@charset "UTF-8";
/* stylesheet */


html, body {
  overflow-x: hidden;
}

/*------------------------------------------------------

    BASE

------------------------------------------------------*/
body {
  background: #ececec;
  color: #333;
  width: 100%;
  font-size: 18px;
  line-height: 1.6;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック  Medium", meiryo, sans-serif;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

a {
  display: block;
  text-decoration: none;
}
a:link { color:#000; }

.w100 {
  width: 100%;
  height: auto;
}

.container {
  background-color: #fff;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

/*------------------------------------------------------

    ANIMATION BASICS

------------------------------------------------------*/
/* FADE UP */
.fade-up {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1);
  will-change: transform, opacity;
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ZOOM IN (stable: use translateX for horizontal centering) */
.zoom-in {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px) scale(.94);
  transition: transform .56s cubic-bezier(.2,.9,.3,1), opacity .48s ease;
  will-change: transform, opacity;
}
.zoom-in.is-visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/*------------------------------------------------------

    HEADER

------------------------------------------------------*/
header { position: relative; }
header img.hero01, header img.hero02, header img.hero03, header img.hero04 { position: absolute; }
header img.hero01 { top: 12%; left: 3%; z-index: 1; animation: catch .48s .20s cubic-bezier(.22,.61,.36,1) both; width: 90%; }
header img.hero02 { top: 71%; right: 1.3%; z-index: 3; animation: catch .60s .80s cubic-bezier(.22,.61,.36,1) both; }
header img.hero03 { top: 80.4%; z-index: 2; animation: catch .60s 1.40s cubic-bezier(.22,.61,.36,1) both; }
header img.hero04 { top: 6%; right: 10.5%; z-index: 4; animation: catch .2s .1s linear both; }
@keyframes catch { 0%{transform:scale(4);opacity:0;}100%{transform:scale(1);opacity:1;} }

/*------------------------------------------------------

    SECTION

------------------------------------------------------*/
section { position: relative; text-align: center; }
section .section__title, section .section__contents { text-align: center; }
section img { margin: 0 auto; display: block; }

/*------------------------------------------------------

    CV

------------------------------------------------------*/
.cv-area { padding: 70px 0; }
.cv-area img.arrow-down { margin-bottom: 10px; }
.cv-area img.cv-btn { animation: bounce 2s ease infinite; }
#cv01 { background-repeat: no-repeat; background-position: center top; }
@keyframes bounce { 0%,100%,20%,50%,80%{transform:scale(1);}40%{transform:scale(1.2);}60%{transform:scale(1.1);} }

/*------------------------------------------------------

    LOOP IMG

------------------------------------------------------*/
.loop__img { display:flex; overflow:hidden; }
.loop__img img:first-child { animation: loop 120s linear -60s infinite; }
.loop__img img:last-child  { animation: loop2 120s linear infinite; }
@keyframes loop { 0%{transform:translateX(100%);} to{transform:translateX(-100%);} }
@keyframes loop2 { 0%{transform:translateX(0);} to{transform:translateX(-200%);} }

/*------------------------------------------------------

    WHAT

------------------------------------------------------*/
#what img.what-txt { position: absolute; top: 44%; transform: translate(0, -50%); }

/*------------------------------------------------------

    WHAT2

------------------------------------------------------*/
#what2 { position: relative; overflow: hidden; }
#what2 img.what-img { display: block; width: 100%; height: auto; object-fit: cover; }
#what2 img.fade-up {
  position: absolute;
  left: 50%;
  top: 86.6%;
  transform: translate(-50%, -50%) translateY(100px);
  z-index: 5;
  max-width: 95%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease .5s, transform .5s ease .5s;
  will-change: transform, opacity;
}
#what2 img.fade-up.is-visible { transform: translate(-50%, -50%) translateY(0); opacity: 1; }

/*------------------------------------------------------

    WHAT3

------------------------------------------------------*/
#what3 {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  z-index: 0 !important;

  background-image: url("images/what3-img.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;

  min-height: 70vh !important; /* 必要なら 60vh/75vh に調整 */
  height: auto !important;
  background-color: transparent !important;
}

/* container の白被りを防ぐ */
#what3 .what3-inner { background: transparent !important; position: relative !important; z-index: 12 !important; }

/* TOP BANNER: 中央上に安定配置、遅延を付ける（ゆっくり） */
#what3 .what3-top-banner{
  position: absolute !important;
  left: 50% !important;
  top: 22% !important;
  transform: translateX(-50%) translateY(0) !important;
  z-index: 120 !important;
  pointer-events: none !important;

  max-width: 690px !important;
  width: min(690px,86vw) !important;
  height: auto !important;
  object-fit: contain !important;

  /* 強制で transition を有効に（既存で none を付けているならこれで上書き） */
  transition: transform .7s cubic-bezier(.2,.9,.3,1) .12s, opacity .56s ease .12s !important;
  opacity: 0 !important;
}

/* 丸群（横並び） */
#what3 .feature-circles {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 55.5% !important;
  display: flex !important;
  gap: 22px !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

/* 丸画像の基本（ゆっくり上がる） */
#what3 .circle-img{
  width: 210px !important;
  height: 210px !important;
  object-fit: contain !important;
  opacity: 0 !important;
  transform: translateY(44px) !important;
  transition: transform .7s cubic-bezier(.2,.9,.3,1) .22s, opacity .56s ease .22s !important;
  z-index: 31 !important;
}

/* stagger：詳細な遅延を個別に指定（左→右） */
#what3 .feature-circles .circle-img:nth-child(1){ transition-delay: .26s !important; }
#what3 .feature-circles .circle-img:nth-child(2){ transition-delay: .42s !important; }
#what3 .feature-circles .circle-img:nth-child(3){ transition-delay: .58s !important; }

#what3 .what3-bottom-banner {
  position: absolute !important;
  left: 50% !important;                         /* 横中央固定 */
  bottom: 7% !important;                        /* 背景下寄せ */
  transform: translateX(-50%) translateY(60px) !important; /* 初期：中央に置いた上で下にオフセット */
  z-index: 30 !important;
  pointer-events: none !important;

  max-width: 680px !important;
  width: 90% !important;
  opacity: 0 !important;

  /* 必ず transform と opacity を transition。遅延を付けてゆっくり表示 */
  transition: transform .7s cubic-bezier(.2,.9,.3,1) .14s, opacity .56s ease .14s !important;
}

/* is-visible 状態で自然に表示させる */
#what3 .what3-top-banner.is-visible { opacity: 1 !important; transform: translateX(-50%) translateY(0) scale(1) !important; }
#what3 .circle-img.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
#what3 .what3-bottom-banner.is-visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
}

/* レスポンシブ調整 */
@media (max-width:800px){
  #what3 { min-height: 48vh !important; background-position: center 20% !important; }
  #what3 .feature-circles { top: 40% !important; gap: 10px !important; }
  #what3 .circle-img{ width: 114px !important; height: 114px !important; }
  #what3 .what3-top-banner{ width: min(520px,86vw) !important; }
}

/* TEMP: what3 高さ固定（テスト用） */
#what3 { min-height: 70vh !important; }
/* or 固定ピクセルで試すなら: min-height: 720px !important; */

@media (max-width: 800px) {
  #what3 .what3-bottom-banner {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(36px) !important; /* 初期：下にオフセット */
    bottom: calc(6% + env(safe-area-inset-bottom)) !important; /* safe-area 対応 */
    max-width: 720px !important;
    width: 92% !important;
    padding: 10px 14px !important; 
    box-sizing: border-box !important;
    font-size: 15px !important; /* 必要に応じ調整 */
    opacity: 0 !important; 
    z-index: 40 !important;
    pointer-events: none !important;
    transition: transform .6s cubic-bezier(.2,.9,.3,1) .14s, opacity .5s ease .14s !important;
  }

  /* 表示時（横位置は維持、縦だけ0に） */
  #what3 .what3-bottom-banner.is-visible {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
  }
}

/*------------------------------------------------------

    POINT

------------------------------------------------------*/
#point{ position:relative; background:none !important; }
#point .point-bg{
  display:block;
  width:100%;
  height:auto;         
}
#point .point-overlay{
  position: absolute;
  top: 663px;  
  left: 0;
  right: 0;
  bottom: 0;  
  padding: 30px;
}
#point .section__contents{
  display:flex;
  flex-direction:column;
  gap:45px;
  background:none;
}


/*------------------------------------------------------

    caution

------------------------------------------------------*/

#caution{
  background:#fff !important;
  position: relative;
  padding: 50px 30px;   /* 好みで上下余白 */
}


/* 見出し（テキスト画像）は“通常フロー”で中央揃え＋zoom-in */
#caution .caution-txt{
  position: static;          /* ← 絶対配置しない */
  display: block;
  margin: 0 auto;
  max-width: 95%;
  height: auto;
  pointer-events: none;
}


/* スマホは左右を少し詰めて、上下も軽くタイトに */
@media (max-width:800px){
  #caution{ padding: 32px 14px; }
  #caution .caution-txt{ max-width: 96%; }
}

/*------------------------------------------------------

    voice

------------------------------------------------------*/
#voice .section__title { margin-bottom: 20px; }
#voice .section__contents { padding: 30px 30px 50px; display: flex; flex-direction: column; gap: 50px; }

/*------------------------------------------------------

    STEP

------------------------------------------------------*/
#step { background-color: #c8e4fb; }
#step .section__contents { padding: 50px 30px; display: flex; flex-direction: column; gap: 25px; }

/*------------------------------------------------------

    LINE

------------------------------------------------------*/
#line {
  position: fixed;
  bottom: 0;
  display: none;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
}
@media (max-width: 800px) {
  #line { display:block; transition: opacity 1s ease-in-out, transform 1s ease-in-out; }
}
@media (min-width: 800px) {
  #line.fade-in-up { display:block; opacity:1; transform: translateY(0); }
}

/*------------------------------------------------------

    FOOTER

------------------------------------------------------*/
footer { margin-top: -30px; padding: 20px 20px 5%; text-align: center; background: #dbe8ed; }
footer p#copyright { color: #000000; }

/*------------------------------------------------------

    RESPO / PC FIRST

------------------------------------------------------*/
@media (max-width: 800px) {
  header img.hero01 { top:12%; right:8%; width:90%; }
  header img.hero02 { top:71%; width:100%; }
  header img.hero03 { top:80.4%; width:100%; }
  header img.hero04 { top:6%; right:10.5%; width:52%; }

  .cv-area { padding: 30px 0 50px; }
  .cv-area img.arrow-down { margin-bottom:5px; width:25%; }
  .cv-area img.cv-btn { width:90%; }

  #what img.what-txt { width:100%; }

    #point .point-bg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* オーバーレイ：左右をキュッと、上の位置はSP専用で下げる */
  #point .point-overlay{
    position: absolute;
    inset: 0;
    /* 左右の余白を詰める（今より狭く） */
    padding-left: 12px;
    padding-right: 12px;

    /* 上からの距離（中身を下げる） */
    padding-top: 362px;   /* ← 好みで 56〜96px くらいで微調整 */
  }

  /* 中のコンテンツ余白も少し詰める（既存よりさらにタイトに） */
  #point .section__contents {
    gap: 32px;
    padding: 12px;   /* ← もとの 15px からさらに詰める */
  }

  #voice .section__title { margin-bottom:0; }
  #voice .section__title img { width:100%; }
  #voice .section__contents { padding:25px 15px 25px; gap:25px; }

  #step .section__contents { padding:25px 15px; gap:15px; }
  #step .section__contents img.sep { width:12%; }

  footer p#copyright { font-size:2.5vw; }

  /* mobile adjustments for what3 */
  #what3 { min-height: 420px; background-position: center 20%; }
  #what3 .feature-circles { bottom: 16%; gap: 10px; }
  #what3 .circle-img { flex: 0 0 114px; width: 114px; height: 114px; }
  #what3 .what3-top-banner { width: min(520px,86vw); }
}



/* RESTORE: original zoom-in behaviour (copy from original site) */
.zoom-in {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}

.zoom-in.is-visible {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  animation: zoomAnimation 0.5s ease 0.5s;
}

@keyframes zoomAnimation {
  0% {
    transform: translate(0, -50%) scale(0);
  }
  70% {
    transform: translate(0, -50%) scale(1.5);
  }
  100% {
    transform: translate(0, -50%) scale(1);
  }
}

/* まずは #caution の下パディングを少しだけ減らす（全体に自然） */
#caution { padding-bottom: 24px !important; }   /* 既存は 50px */

/* それでもまだ空くなら、voice 自体を少しだけ上に引き上げる */
#caution + #voice { 
  margin-top: -186px;      /* もっと詰めたいなら -24px〜-32px へ */
}

/* スマホではさらに詰める（必要なら調整） */
@media (max-width: 800px){
  #caution { padding-bottom: 16px !important; } /* 既存SPは 32px */
  #caution + #voice { margin-top: -120px; }      /* -12〜-28px で微調整OK */
}

#voice {
  background: #f6f6f6;
}

#qa{
  background: #fffced; /* 既定背景（あなた指定色） */
}

/* リスト余白・並びは既存を流用 */
#qa .section__contents.qa-list{
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* アイテムカード */
#qa .qa-item{
  border: 1px solid #ece6d4;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
#qa .qa-item.is-open{
  border-color: #e3c97e; /* 少し強めに */
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* 質問ボタン（左にQバッジ、右に＋/−） */
#qa .qa-q{
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 18px 54px 18px 56px; /* 左56でバッジ分のスペース確保 */
  font-size: 18px;
  line-height: 1.55;
  color: #222;
  position: relative;
  text-align: left;
}

/* Qバッジ（左の丸） */
#qa .qa-q::before{
  content: "Q";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: #57bed1;              /* ← ここを変更！ */
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* 右側の＋/−トグル */
#qa .qa-q::after{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 22px;
  color: #3973b7;
  opacity: .9;
  transition: transform .2s ease;
}
#qa .qa-q[aria-expanded="true"]::after{
  content: "–";
}

/* 回答（左にAバッジ） */
#qa .qa-a{
  position: relative;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .30s ease, opacity .24s ease;
  padding: 0 16px 0 56px; /* 左56でAバッジ分のスペース */
}
#qa .qa-a::before{
  content: "A";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px; color: #fff;
  background: #ffb74d;             /* 目立つオレンジ（変更可） */
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
#qa .qa-a p{
  margin: 16px 0 18px;
  color: #333;
  text-align: left;
}

/* 開いた状態（高さは中身分だけ出すため余裕値） */
#qa .qa-item.is-open .qa-a{
  max-height: 900px; /* 長文想定で広めに */
  opacity: 1;
}

/* ホバー/フォーカスの手触り */
#qa .qa-q:focus-visible{
  outline: 2px solid #3973b7; outline-offset: 3px;
}
#qa .qa-q:hover{
  background: rgba(57,115,183,.06);
}

/* SP微調整 */
@media (max-width: 800px){
  #qa .section__contents.qa-list{ padding: 20px 24px; gap: 12px; }
  #qa .qa-q{ font-size: 16px; padding: 16px 48px 16px 52px; }
  #qa .qa-q::before{ left: 12px; }
  #qa .qa-q::after{ right: 12px; }

  #qa .qa-a{ padding: 0 12px 0 52px; }
  #qa .qa-a::before{ left: 12px; }
  #qa .qa-a p{
    font-size: 13px;    
    line-height: 1.75;    /* 読みやすく少し広め */
    margin: 14px 0 18px;  /* 既存の余白を維持 */
  }	
	
}

/* セクション内の余白（必要なら） */
#qa .section__contents.qa-list{
  padding: 40px;                        /* 既存値ならそのまま */
}
@media (max-width:800px){
  #qa .section__contents.qa-list{ padding: 20px 14px; }
}

/* === Q&A：スマホで自動改行＆はみ出し防止 === */
#qa .qa-item, 
#qa .qa-q, 
#qa .qa-a { box-sizing: border-box; }

@media (max-width: 800px){
  /* テキストを強制的に折り返し可能に */
  #qa .qa-q{
    white-space: normal !important;     /* nowrapの打ち消し */
    word-break: break-word;             /* Safari含む一般的な改行 */
    overflow-wrap: anywhere;            /* どこでも折り返しOK（長い英数対策） */
    text-align: left;
    line-height: 1.6;
    padding-right: 52px;                /* 右の＋記号ぶんの余白を確保 */
  }

  /* 回答側も保険で */
  #qa .qa-a{
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

#info { padding: 0; background: transparent; }
#info .info-img{
  display: block;
  width: 100%;
  height: auto;
}



/* 固定ボタン：コンテナ右端基準で固定。背景なし（PNGのみ） */
.u-fixed-cta{
  position: fixed;
  /* 画面幅中、中央寄せ800pxコンテナの右端から12px内側に配置 */
  right: calc((100vw - min(100vw, 800px)) / 2 + 28px);
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: block;

  /* アニメ表示 */
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  /* 余計な見た目は全消し */
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.u-fixed-cta.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 画像だけを表示（丸背景ナシ） */
.u-fixed-cta img{
  display: block;
  width: 200px;   
  height: auto;
  border-radius: 0;          /* 丸めない */
  background: transparent;   /* 念のため */
}

@media (max-width: 800px){
  .u-fixed-cta{
    right: 18px;                           /* 右に寄りすぎ→少し内側 */
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .u-fixed-cta img{
    width: 140px;                          /* 76→140px くらいが見やすい */
    height: auto;
    max-width: none;                        /* 画像の縮小を防止 */
  }
}


#info{ position: relative; }

/* 点滅画像の基本 */
.info-blink{
  position: absolute;
  /* —— 位置とサイズは%で調整（背景画像に追従） —— */
  left: 50%;   /* 横位置（％）←好みで調整 */
  top: 30.2%;    /* 縦位置（％）←好みで調整 */
  width: 100%;  /* 画像の見た目サイズ（％） */
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;   /* クリックを邪魔しない */

  /* ハードな点滅（ON/OFF） */
  animation: blink 0.9s steps(1, end) infinite;
}

/* ハード点滅（パッパッと切替） */
@keyframes blink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* やわらかい明滅にしたい場合は↑の animation をこれに変更
   animation: pulse 1.4s ease-in-out infinite;
*/
@keyframes pulse{
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.98); }
  50%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.98); }
}

/* SP時に位置やサイズを微調整したい場合 */
@media (max-width: 800px){
  .info-blink{
    left: 50%;
    top: 29.7%;
    width: 100%;
  }
}

footer ul li a,
footer ul li a:link,
footer ul li a:visited,
footer ul li a:hover,
footer ul li a:active {
  color: #000;
}

/*# sourceMappingURL=style.css.map */