:root {
  --container: 1100px;
  --gutter: 20px;

  --bg: #0B0016;
  --text: #ffffff;
  --accent: #D7FF00;
}

body {
font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
}

.l-container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* ===== FV ===== */

section{
  scroll-margin-top: 120px;
}

.fv {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
   padding-top: 70px;
    background: url(../img/mv_back.png) center / cover no-repeat;
    background-size: 90%;
    background-color: #210621;
}
.fv__inner{
  width: min(1200px, 100% - 40px);
  margin-inline: auto;
  padding-block: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

/* 上部 */
.fv__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.fv__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fv__logo{
  height: clamp(26px, 3vw, 40px);
  width: auto;
}

/* 中央ビジュアル */
.fv__visual{
  display: grid;
  place-items: center;
  padding-block: clamp(12px, 2vw, 20px);
}

.fv__visualImg {
    max-width: 900px;
    height: auto;
    margin-bottom: 40px;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .45));
}

/* 下部CTA */
.fv__cta{
  display: grid;
  place-items: center;
  padding-bottom: clamp(18px, 3vw, 36px);
}

/* ===== Buttons（2つ共通） ===== */


.btn__icon{
  font-size: 1.05em;
  transform: translateY(-.02em);
}

/* 右上 */
.btn--sm{

  font-size: 16px;
}

/* 下CTA */


.fv__visualImg--sp {
    display: none;
}

.fv__cta img {
    width: 100%;
    max-width: 600px;
}


.omaksep {
    font-weight: 500;
    line-height: 1.8em;
}

.trouble{
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  background: url("../img/mv_back02.png") center/cover no-repeat;
}

.trouble__inner{
  width: min(1200px, 100% - 40px);
  margin-inline: auto;
  position: relative;
}

.trouble__head{
  display: grid;
  place-items: center;
  margin-bottom: clamp(50px, 8vw, 60px);
}

.trouble__head img{
  width: min(620px, 100%);
}

/* 吹き出し配置（PC） */

.trouble__bubbles{
  position: relative;
  min-height: 600px;
}

.bubble{
  position: absolute;
  width: clamp(260px, 28vw, 380px);
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
}

/* 位置調整（PC） */
.bubble--1{ top: 0; left: 0; }
.bubble--2{ top: 60px; right: 0; }
.bubble--3{ bottom: 60px; left: 0; }
.bubble--4{ bottom: 0; right: 0; }

/* 吹き出し配置（PC） */
.trouble__bubbles{
  position: relative;
  min-height: 720px; /* 高さは必要に応じて */
}

.bubble{
  position: absolute;
  width: 490px;
  height: auto;

}

/* 交互（左→右→左→右）で階段っぽく */
.bubble--1 {
    top: 10px;
    left: 15%;
}
.bubble--2 {
    top: 197px;
    right: 12%;
}
.bubble--3 {
    top: 387px;
    left: 10%;
}
.bubble--4 {
    top: 580px;
    right: 15%;
}
.case__other {
    max-width: 980px;
    width: 95%;
    margin: 0 auto;
}


.trouble {
    padding: 150px 0;
   
}

  .trouble__bubbles{

    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

 span.pink {
    color: #f41063;
    font-weight: bold;
}


.points{
  position: relative;
  padding: 150px 0px;
  background:url("../img/_back.png") center/cover no-repeat;
  overflow: hidden;
	background-attachment: fixed;
}

.points__inner{
  width: min(1100px, 100% - 40px);
  margin-inline: auto;
}

/* 見出し */
.points__head{
  display: grid;
  place-items: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.points__head img{
  width: min(820px, 100%);
  height: auto;
}

/* Point blocks */
.point {
    display: grid;
    grid-template-columns: 420px 1fr;
    /* gap: clamp(18px, 3vw, 46px); */
    align-items: center;
    margin-bottom: 70px;
}

/* 写真（画像） */
.point__media{
  transform: translateY(2px);
}
.point__media img{
width: 80%;
    height: auto;
    display: block;
}

/* 右側テキストエリア */
.point__body{
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Pointラベル（画像） */
.point__label img{
  height: 34px;   /* 実画像に合わせて調整OK */
  width: auto;
}

/* テキストが画像のとき用（任意） */
.point__text img{
  width: 100%;
  height: auto;
}

/* 交互レイアウト */
.point.is-reverse{
  grid-template-columns: 1fr 420px;
}
.point.is-reverse .point__media{
  order: 2;
}
.point.is-reverse .point__body{
  order: 1;
}

/* CTA */
.points__cta{
  display: grid;
  place-items: center;
  margin-top: clamp(10px, 2vw, 24px);
}
.points__ctaLink{
  display: inline-block;
}
.points__ctaLink img{
  width: 95%;
	max-width: 800px;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.25));
}


.case{
  position: relative;
 padding: 150px 0px;
  background-image:url("../img/gra_back.png");
	background-size: cover;
	
  overflow: hidden;
  color: #fff;
}

.case__inner{
  width: min(1100px, 100% - 40px);
  margin-inline: auto;
}

/* 見出し（画像） */
.case__head{
  display: grid;
  place-items: center;
  margin-bottom: clamp(26px, 4vw, 54px);
}
.case__head img{
 width: 95%;
    max-width: 550px;
}
span.yellow {
    color: #e3ff03;
	font-weight: bold;
}
/* 上段：2カラム画像 */
.case__top {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 2.5vw, 28px);
    align-items: start;
  
    flex-direction: row;
    justify-content: space-around;
}
.case__left img,
.case__right img{
  width: 100%;
  height: auto;
  display: block;
	margin-bottom: 30px;
}
.case__right {
    width: 50%;
}
/* 中段：白枠ボックス */
.case__box{
  border: 1px solid rgba(255,255,255,.7);
  padding: clamp(18px, 3vw, 30px);
  margin-bottom: clamp(28px, 5vw, 56px);
  background: rgba(0,0,0,.02);
}

.case__boxGrid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}

.case__boxTitle {
    font-weight: 700;
    font-size: 2em;
    line-height: 1.2;
    margin-bottom: 10px;
    /* margin: 0; */
}
p.case__boxTitle02 {
 font-size: 1em;
}
.case__boxRight p{
  margin: 0;
  line-height: 1.9;
}

.case__hl{
  color: #ffe35a; /* 黄色強調。必要ならデザインに寄せて調整 */
  font-weight: 800;
}

.case__sns{
  margin-top: 10px;
  font-weight: 800;
}

.case__otherTitle {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 0 10px;
}
.case__otherText{
  margin: 0;
  font-size: 1em;
  line-height: 1.9;
  opacity: .95;
}

  .case__box {
    padding: 40px;
}






.solution{
  position: relative;
  padding: 150px 0px;
  background:url("../img/sol_back.png")
	  center/cover no-repeat;
  overflow: hidden;
  color: #111;
}

.solution__inner{
  width: min(1100px, 100% - 40px);
  margin-inline: auto;
}

.solution__head{
  display: flex;
  justify-content: center;
  margin-bottom: clamp(28px, 4vw, 50px);
}
.solution__head img{
  width: min(760px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

/* flexbox grid */
.solution__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  justify-content: center;
}

/* 2列（PC） */
.card {
    flex: 0 1 calc(40% - 15px);
    background: #fff;
    /* border-radius: 2px; */
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
}

/* 上の色バー */
.card__bar{
 padding: 25px 0px;
  color: #fff;
}
.card__title{
margin: 0;
    font-weight: 700;
    font-size: 1.8em;
    line-height: 1.2;
    text-align: center;
}

/* 色 */
.card__bar--red{ background: #e2322f; }
.card__bar--blue{ background: #345adf; }
.card__bar--pink{ background: #ff3c8f; }
.card__bar--orange{ background: #f07a2c; }

/* 本体 */
.card__body{
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card__illus{
  display: flex;
  justify-content: center;
}
.card__illus img {
    width: 60%;
    max-width: 200px;
    height: auto;
    display: block;
    padding: 30px 0px;
}

.card__text p {
    margin: 0;
    font-size: 1em;
    line-height: 1.8em;
    color: #222;
}




.solution__inner {
    width: 95%;
    max-width: 1100px;
}




.flow{
  position: relative;
  padding: 150px 0px;
  background:url("../img/flow_back.png");
	background-size: cover;
  overflow: hidden;
	background-attachment: fixed;
  color: #111;
}

.flow__inner{
  width: min(1100px, 100% - 40px);
  margin-inline: auto;
}

/* 見出し（画像） */
.flow__head{
  display: grid;
  place-items: center;
  margin-bottom: clamp(26px, 4vw, 50px);
}
.flow__head img {
    max-width: 400px;
    height: auto;
    display: block;
}

/* リスト */
.flow__list{
 display: flex;
    width: 900px;
    margin: 0 auto;
    flex-direction: column;
    gap: 0;
}

/* カード */
.flow__card{
  background: rgba(245,245,245,.92);
  border-radius: 2px;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.5vw, 34px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

/* アイコン（丸込み画像） */
.flow__icon{
  flex: 0 0 auto;
}
.flow__icon img{
  width: 76px; /* 実画像サイズに合わせて */
  height: auto;
  display: block;
}

/* テキスト */
.flow__text{
  flex: 1 1 auto;
  min-width: 0;
}

.flow__title{
  margin: 0 0 8px;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #ff2b8a; /* ピンク見出し */
  letter-spacing: .02em;
}
h2.omakseh {
    margin-bottom: 15px;
    font-size: 1.8em;
}

.flow__desc{
  margin: 0;
  font-size: 1em;
  line-height: 1.9;
  color: #111;
}

/* 矢印（画像） */
.flow__arrow{
  display: grid;
  place-items: center;
  padding: 14px 0; /* カード間の余白 */
}
.flow__arrow img{
  width: 64px;
  height: auto;
  display: block;
}



.footer{
  background: #2b0030; /* スクショに近い紫 */
  padding: 24px 0;
}

.footer__inner{
  width: min(1100px, 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ */
.footer__logoLink{
  display: inline-flex;
  align-items: center;
}

.footer__logoLink img{
  height: 26px; /* 実画像に合わせて微調整 */
  width: auto;
  display: block;
}

/* 右リンク */
.footer__link{
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: opacity .2s ease;
}

.footer__link:hover{
  opacity: .7;
}



.fade-up{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}


.fade-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-left.is-visible{
  opacity: 1;
  transform: translateX(0);
}



.btn-press{
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform .15s ease;
	border-radius: 50px;
}

.btn-press img{
  display: block;
}

/* 白オーバーレイ */
.btn-press::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* hover → 少し白く */
.btn-press:hover::after{
  opacity: .22;
}

/* 押した瞬間 */
.btn-press:active{
  transform: scale(.97);
}

.header{
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(6px);
}
html{
	scroll-behavior: smooth;
}

.btn-press:hover::after{
  opacity: .50;
}

.btn-press:active::after{
  opacity: .65;
}

section.wrapfv {
    background: url(../img/mv_back.png);
	background-size: cover;
	background-position: center;
}
.site-header{
 position: fixed;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(6px);
}
#points, #case, #solution, #flow, #contact{
  scroll-margin-top: 120px;
}
.site-header__inner{
  width: min(1200px, 100% - 40px);
  margin-inline: auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header#header {
    width: 100%;
}
.site-header__logo{
  height: 34px;
  width: auto;
}
.btnfix {
    display: none;
}
a#mcta {
    display: none;
}

@media (max-width: 768px){
	
	
	a#mcta {
    display: block;
}
	
	.spbr{
    display: none;
}
	
	.mcta{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(120%);
  width: min(92vw, 420px);
  z-index: 1000;

  opacity: 0;
  pointer-events: none;

  transition: transform .35s ease, opacity .35s ease;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}

.mcta img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* 表示状態 */
.mcta.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* お問い合わせ到達で非表示 */
.mcta.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(120%);
  pointer-events: none;
}
	
	
	
	
	
	
	
	
	
.fv__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    display: none;
}
	.btnfix {
    display: block;
}
	.site-header__inner {
    display: none;
}
	.point {
    display: flex;
    grid-template-columns: 420px 1fr;
    /* gap: clamp(18px, 3vw, 46px); */
    align-items: center;
    margin-bottom: 70px;
    flex-direction: column;
}
	.fv {
    padding-top: 0px;
 
}
.fv__visual {
    display: flex;
    place-items: unset;
    padding-block: unset;
}
  .fv__inner{
    width: min(720px, 100% - 32px);
  }

  .btn--sm{
    padding: 12px 14px;
    font-size: 14px;
  }
.point__media img {
    width: 50%;
    height: auto;
    display: unset;
    /* margin: 0 auto; */
}
	.bubble--1 {
    top: 10px;
    left: unset;
}
	
	.bubble--2 {
    top: 175px;
    right: unset;
}
	.bubble--3 {
    top: 340px;
    left: unset;
}
	
	.trouble__head {
    display: grid;
    place-items: center;
    margin-bottom: 30px;
}
	.points {
   position: relative;
        padding: 50px 0px;
        background: url(../img/_back.png);
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
}
	.bubble--4 {
    top: 505px;
    right: unset;
}
	.trouble__bubbles {
    display: flex;
    /* gap: 30px; */
    align-items: center;
    flex-direction: column;
    align-content: center;
}
  .btn--lg{
         padding: unset;
        min-width: unset;
  }

  /* SPはビジュアル1枚画像 */
  .fv__visualImg--pc{ display:none; }
  .fv__visualImg--sp{ display:block; width: 100%; }
.fv__cta img {
    width: 100%;
    max-width: 600px;
}

h2.omakseh {
    font-size: 1.6em;
        margin-bottom: 10px;
}
.points__inner {
    width: 95%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: nowrap; */
}
.trouble {
    padding: unset;
}

  /* SPでは順番統一（画像→テキスト） */
  .point.is-reverse{
    grid-template-columns: 1fr;
  }
  .point.is-reverse .point__media,
  .point.is-reverse .point__body{
    order: initial;
  }
.fv__visualImg {
    max-width: 900px;
    height: auto;
    margin-bottom: 0px;
    filter: unset;
}
  .point__label img{
    height: 30px;
  }
.points__ctaLink img {
    width: 100%;
    max-width: 800px;
    display: block;
    filter: drop-shadow(0 9px 26px rgba(0, 0, 0, 0.25));
}
.case {
    position: relative;
    padding: 100px 0px;
    background-image: url(../img/gra_back.png);
    background-size: cover;
    overflow: hidden;
    color: #fff;
}
 .case__inner{
  width: 95%;
    max-width: 1100px;
  }
	.case__right {
    width: 100%;
    margin-bottom: 30px;
}
.case__top {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: unset;
    align-items: start;
    flex-direction: column;
    /* justify-content: space-around; */
    align-content: space-between;
}
	.case__boxGrid {
    display: flex;
    grid-template-columns: 320px 1fr;
    gap: unset;
    align-items: center;
    flex-direction: column;
}
	.case__box {
    padding: 30px;
}
.solution {
    position: relative;
    padding: 80px 0px;
    background: url(../img/sol_back.png) center / cover no-repeat;
    overflow: hidden;
    color: #111;
}
	.case__left img, .case__right img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
	
	.solution__grid {
   display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        flex-direction: column;
}
	.card {
    display: flex;
    background: #fff;
    /* border-radius: 2px; */
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
    flex-direction: column;
    align-content: center;
}
		.case__right img {
    width: 85%;
    margin-bottom: 20px;
    margin: 0 auto;
    margin-bottom: 20px;
}
	case__box {
    padding: 30px;
}
.case__boxLeft {
    margin-bottom: 20px;
}
  .solution__inner{
    width: min(720px, 100% - 28px);
  }
.card__illus img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    padding: 0px 0px;
}
	p.case__boxTitle02 {
    font-size: 1.4em;
}
	
	.flow__list {
    display: flex;
    width: 100%;
    margin: 0 auto;
    gap: 0;
    flex-direction: column;
}
	.flow__head img {
    max-width: 90%;
    height: auto;
    display: block;
}
	.flow {
    position: relative;
    padding: 90px 0px;
    background: url(../img/flow_back.png);
    background-size: cover;
    overflow: hidden;
    background-attachment: fixed;
    color: #111;
}
  .card__body{
   padding: 40px;
  }

  .card__title{
    font-size: 1.6em;
  }
	
	  .flow__inner{
    width: min(720px, 100% - 28px);
  }

  .flow__card{
    padding: 16px 16px;
    gap: 14px;
  }

  .flow__icon img{
    width: 64px;
  }

  .flow__title{
    margin-bottom: 6px;
  }

  .flow__desc{
    font-size: 13px;
  }

  .flow__arrow{
    padding: 10px 0;
  }
	.point__media {
    transform: unset;
    text-align: center;
    margin-bottom: 20px;
}

  .flow__arrow img{
    width: 56px;
  }
	
	.footer{
    padding: 20px 0;
  }

  .footer__inner{
    width: min(720px, 100% - 28px);
  }

  .footer__logoLink img{
    height: 22px;
  }

  .footer__link{
    font-size: 13px;
  }
	
	
}