@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* 一番上近くに置く */
*,*::before,*::after{ box-sizing: border-box; }

html, body{
  max-width: 100%;
  overflow-x: clip; /* デバッグが済んだら clip にしてもOK */
}
img{ max-width:100%; height:auto; display:block; }


body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 600;
}

p {
  font-family: 'Noto Sans JP','Hiragino Sans','Meiryo','Quicksand',sans-serif;
  font-weight: 400;      /* 400→細いと感じたら 500〜600 に */
  color: #222;
  line-height: 1.8;
}

.logo__text,.section-fulltext,.section-title,.uservoice__title,
.faq__en,.faq__number,.faq__q,.faq__a,.contact__en{
  font-family: "Quicksand", sans-serif;
}

.main{
  background-color: #fafafa;
}


/* メインビジュアル */

  /* ===== Hero（全幅＆はみ出し対策） ===== */
.hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
.hero__picture, .hero__image{
  display: block;
  width: 100%;
  height: auto;
}

/* ラッパーで縦並びを制御 */
.hero__content{
  position: absolute;  /* メインビジュアル内に配置する場合 */
  top: 20%;
  left: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* デフォルトは左揃え */
  gap: 60px;
  z-index: 2;
}

@media (max-width: 960px){
  .hero{
    margin-top: 60px;
  }

  .hero__content{
    gap: 40px;
  }
}

/* スマホでは中央寄せに変更 */
@media (max-width: 640px){
  .hero__content{
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;                    /* 上下いっぱい使う */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;       /* 縦並び */
    justify-content: space-between; /* 上下に配置 */
    align-items: center;          /* 横中央寄せ */
    text-align: center;
    padding: 26px 0;              /* 上下に26pxの余白 */
    width: 100%;                  /* 横幅も広げておくと安心 */
    box-sizing: border-box;
  }
}


/* ===== 上部オーバーレイ（手書き文字＋ペン） ===== */
.hero__overlay-left{
  /* position: absolute; */
  top: clamp(40px, 10vw, 170px);  /* 上からの距離を可変 */
  left: 130px;                     /* ← PCデフォルトは左寄せ */
  z-index: 2;
  max-width: min(92vw, 580px);
}

.hero__text-img{ 
  width: clamp(250px, 40vw, 580px);
   height: auto; 
  }

/* ===== スマホ（640px以下） ===== */ 
@media (max-width: 640px){  
  .hero__overlay-left{   
    max-width: 100%;              /* はみ出し防止の保険 */
   margin-top: -15px;
  }  

  
}

/* ===== 白帯コピー ===== */
.hero__strips {
  /* position: absolute; */
  bottom:  240px; 
  left: 130px;                     /* ← PCデフォルトは左寄せ */
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}

.hero__strips .strip {
  background-color: #fafafa;
  padding: 3px 14px;
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: normal;
  color: #222;
}

/* ===== タブレットだけ位置とサイズを微調整 ===== */
@media (min-width: 641px) and (max-width: 960px){
  .hero__strips{
    bottom: clamp(140px, 16vh, 200px);   /* 上がり過ぎ防止：PCより少しだけ上 */
    left: clamp(24px, 6vw, 80px);        /* 画面が狭いほど左余白を自動で詰める */
    gap: 14px;                           /* 行間少しだけ詰める */
    max-width: min(90vw, 600px);         /* はみ出し防止（任意） */
  }
  .hero__strips .strip{
    padding: 3px 12px;                   /* ほんのり圧縮 */
    font-size: clamp(16px, 2.2vw, 24px); /* タブレット用の上限を少し下げる */
  }
}


/* ===== SPは中央寄せ ===== */
@media (max-width: 640px){
  .hero__strips {
    left: 50%;
    bottom: 20px;
    align-items: center;         /* 中のテキストも中央 */
    text-align: center;
    gap: 10px;
  }
  .hero__strips .strip {
    white-space: nowrap; /* 改行させない */
  }
}

/* ロゴ（メインビジュアル左上に固定） */
.logo {
  display:flex;
  position: absolute;
  top: 10px;       /* 上からの余白 */
  left: 60px;      /* 左からの余白 */
  display: flex;   /* アイコンとテキスト横並び */
  align-items: center;
  gap: 10px;       /* 画像と文字の間隔 */
  text-decoration: none;
  z-index: 10;     /* ヒーロー画像より前に出す */
}



.logo__mark {
  height: 32px;  /* ロゴ画像の高さ */
  width: auto;
}

.logo__text {
  font-size: 24px;
  color: #222;   /* テキスト色 */
  font-weight: normal;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .logo {
    top: 12px;
    left: 12px;
    gap: 6px;
  }
  .logo__text {
    font-size: 14px;
  }
  .logo__mark {
    height: 24px;
  }
}

/* 
:root{
  --z-header: 9999;
  --z-content: 1;
  --z-deco: 0;
} */

/* ===== PC/Tablet ヘッダー（既存 .site-header に .pc-header を付与） ===== */
.site-header.pc-header{
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  background-color: #fafafa;
  border-bottom-left-radius: 60px;
  padding: 20px 30px;
  z-index: 2147483000 !important;
  pointer-events: auto;
  display: block;              /* まずはPCで表示 */
  isolation: auto;       /* isolate は一旦外して様子見 */
}

/* ナビ（既存のまま） */
.site-header.pc-header .nav__list{ 
  display:flex; 
  align-items:center;
   justify-content:space-between;
    gap:1.5rem; margin:0; padding:0;
     list-style:none;
     }
     
.nav__item a{ text-decoration:none; color:#333; font-weight:500; }
.nav__contact img{ display:block; width:90px; height:90px; }


/* PCではSPヘッダーとドロワーメニューを非表示 */
@media (min-width: 961px) {
  .sp-header,
  .sp-drawer,
  .sp-drawer__scrim {
    display: none !important;
  }
}

/* 960px以下（タブレット〜スマホ）で切替 */
@media (max-width: 960px){
  /* PCヘッダーは非表示（既にある指定） */
  .site-header.pc-header{ 
    display:none; }

/* セクション・デコ層（既存のまま） */
/* .section, .section .container{ position:relative; z-index:var(--z-content); }
.troubles-deco, .support-deco, .contact-decoration, .faq-decoration, .decoration{
  position:absolute; z-index:var(--z-deco);
} */

}
/* ヘッダー */
.sp-header{
  position: fixed; 
  top:0; 
  left:0;
  width:100%; height:60px;
  background: url("/wp-content/uploads/2025/09/sp_header.png") no-repeat center/cover;
  z-index: 2147483647;
}
.sp-header__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 12px;
}
.sp-header__logo{ display:flex; align-items:center; gap:5px; text-decoration:none; }
.sp-logo__mark{ display:block; width:50px; height:auto; }
.sp-logo__text{ font-size:13px; line-height:1.2; color:#222; }
.sp-header__icons{ display:flex; align-items:center; gap:10px; }
.sp-header__contact_img{
  width: 40px;
  height: 40px;
}

/* ===== ハンバーガー一式（.sp-nav の中で閉じる） ===== */
.sp-nav{ position: relative; display:flex; align-items:center; }

/* チェックボックスを隠す */
.sp-nav__toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ハンバーガー（3本線） */
.sp-nav__hamburger{
  position: relative;
  width:30px; height:22px; cursor:pointer;
  z-index:2001; display:inline-block;
}
.sp-nav__hamburger span{
  position:absolute; left:0; width:100%; height:2px; background:#222; border-radius:2px; transition:.3s;
}
.sp-nav__hamburger span:nth-child(1){ top:0; }
.sp-nav__hamburger span:nth-child(2){ top:10px; }
.sp-nav__hamburger span:nth-child(3){ top:20px; }

/* ハンバーガー → × */
.sp-nav__toggle:checked + .sp-nav__hamburger span:nth-child(1){ transform:rotate(45deg); top:10px; }
.sp-nav__toggle:checked + .sp-nav__hamburger span:nth-child(2){ opacity:0; }
.sp-nav__toggle:checked + .sp-nav__hamburger span:nth-child(3){ transform:rotate(-45deg); top:10px; }

/* ドロワー本体（.sp-nav直下の兄弟に効く） */
.sp-drawer{
  position: fixed; top:0; right:0;
  width:260px; height:100vh;
  background:#fff; border-radius:20px 0 0 20px;
  transform:translateX(100%); transition:.3s;
  z-index:2000; padding:80px 20px;
}
.sp-drawer__list{ list-style:none; margin:0; padding:0; }
.sp-drawer__list li{ margin:20px 0; }
.sp-drawer__list a{ text-decoration:none; color:#222; font-size:18px; }

/* 黒幕 */
.sp-drawer__scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:.3s; z-index:1999;
}

/* 開く（同じ親＝.sp-nav内で ~ が成立） */
.sp-nav__toggle:checked ~ .sp-drawer{ transform:translateX(0); }
.sp-nav__toggle:checked ~ .sp-drawer__scrim{ opacity:1; pointer-events:auto; }


/* ===== ブレークポイントで切替（例：960px以下をSP） ===== */
@media (max-width: 960px){
  .site-header.pc-header{ display:none; }
  .sp-header{ display:block; }
  /* ヒーロー上のロゴ（.logo）は隠す＝重なり防止＆位置の混乱を解消 */
  .logo{ display:none; }

}


/* Cocoonの :hover / :focus に色が付く場合の保険 */
button.sp-header__mene:hover,
button.sp-header__mene:focus,
button.sp-header__menu:hover,
button.sp-header__menu:focus {
  background: transparent !important;
  box-shadow: none !important;
}


/* Cocoonのデフォルトロゴを非表示 */
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header{
  display: none !important;
}




/* ---------------------------------------- */
  /* Section1 女性個人事業主を応援します */
/* ---------------------------------------- */

  .section.support {
    position: relative;
  padding: 100px 20px; /* PCデフォルト：上下100px 左右0 */
  background-color: #fafafa;
}

@media (max-width: 640px) {
  .section.support {
    padding: 80px 16px; /* スマホ：上下80px */
  }
}

#support-title{
    gap: 0;
}

.section-title .highlight {
  background: linear-gradient(
    to top, 
    rgba(242, 192, 191, 0.9) 0%,       /* 下から */
    rgba(242, 192, 191, 0.9) 40%,      /* 半分くらいまで色 */
    transparent 40%,                   /* 上半分は透明 */
    transparent 100%
  );
  padding: 0 2px; /* 左右に少し余白を足して自然に */
}

/* PC: 780pxの2カラム（左150 / 右残り）、中央寄せ */
.support__grid{
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 70px;
  max-width: 780px;
  margin-inline: auto;
  align-items: center;
}

.support__lead{
  margin-top: 40px;
}

/* 吹き出し画像：デスクトップでは右カラムの上に配置 */
.eyebrow{
  grid-column: 2;          /* 右カラムに載せる */
  justify-self: start;
  display: block;
  width: 220px;            /* 画像実寸に合わせて調整 */
  height: auto;
  margin: 0;        /* 見出しとの間隔 */
  margin-left: -150px;
}

/* 画像の基本 */
.support__figure{ margin: 0; }
.support__figure img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
}

/* ========== support専用 背景装飾 ========== */
.section.support { position: relative; }
.section.support .container { position: relative; z-index: 1; }

.support-deco {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: -1;    /* コンテンツの背面に配置 */
  opacity: 0.95; /* お好みで薄めに */
}

/* 左下 */
.support-deco--bottom-left {
  width: 146px;
  height: 146px;
  background-image: url("/wp-content/uploads/2025/09/left-under-deco.png");
  left: 40px;
  bottom: -70pxpx;
}

/* 右上 */
.support-deco--top-right {
  width: 120px;
  height: 120px;
  background-image: url("/wp-content/uploads/2025/09/light-top-deco.png");
  right: 80px;
  top: -40px;
}

/* スマホで縮小 */
@media (max-width: 640px){
  .support-deco--bottom-left {
    width: 80px; height: 80px;
    left: -20px; 
    top: 200px;
  }
  .support-deco--top-right {
    width: 60px; height: 60px;
    right: 16px; 
    top: 90px;
  }
}


/* スマホ：縦並びで ①吹き出し → ②イラスト → ③テキスト */
@media (max-width: 640px){
  .support__grid{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    max-width: min(94vw, 560px);
    margin-inline: auto;
    align-items: center; /* 中央寄せ（左寄せにしたければ start に） */
  }
  .eyebrow{ 
    order: 1; 
    width: 220px;
    grid-column: auto;
    justify-self: auto;
    align-self: center;
    margin: 0 auto 12px;
   }
  .support__figure{ order: 2; }
  .support__content{ order: 3; width: 100%; }
}


/* ----------------------------------------- */
  /* Section: お困りなことはありませんか */
/* ----------------------------------------- */

.section.troubles{
   position: relative;
   width: 100%;
  padding: 100px 20px 0; 
  background-color: #fafafa;

}
   
.section-title--center {
  position: relative;
  display: inline-block; /* 擬似要素をテキストの左右に配置する */
  text-align: center;
  font-size: 28px;  /* 任意で調整 */
  font-weight: 700;
  color: #222222;
  margin: 0 auto;          /* コンテナの中央に配置 */
}

/* コンテナで中央寄せ */
.section.troubles .container {
   max-width: 1000px; /* 横幅を1000pxに制限 */
  margin: 0 auto;    /* 中央寄せ */
  text-align: center;

}

/* PCデフォルト：見出し下 80px */
.section.troubles .section-title {
  margin-bottom: 80px;
}

/* スマホ：見出し下 40px */
@media (max-width: 640px) {
  .section.troubles{
  padding: 60px 16px;

}

  .section.troubles .section-title {
    margin-bottom: 40px;
  }
  #troubles-title{
    font-size: 18px;
    font-weight: 500;
  }
}

/* 左スラッシュ */
.section-title--center::before {
  content: "";
  position: absolute;
  left: -40px; /* テキストとの距離 */
  top: 50%;
  transform: translateY(-50%) rotate(60deg);
  width: 40px;              /* スラッシュの長さ */
  height: 1.5px;            /* スラッシュの太さ（細め） */
  background-color: #222222;
}

/* 右スラッシュ */
.section-title--center::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-60deg);
  width: 40px;
  height: 1.5px;
  background-color: #222222;
}

@media (max-width: 640px){
  .section-title--center::before{
    left: -20px; /* テキストとの距離 */
    width: 30px;
  }
  .section-title--center::after{
    right: -20px;
    width: 30px;

  }
}

/* 共通（本体） */
.troubles__wrap {
  position: relative;   
  max-width: 960px;
  margin: 0 auto;
  min-height: 520px;   
}


.balloon {
  position: absolute;
  max-width: 280px;
  background: #fafafa;       /* 背景色を薄グレーに */
  border: 1px solid #222;    /* 黒の細い線で枠をつける */
  border-radius: 14px;
  box-shadow: none;          /* 影をなくす */
  padding: 14px 16px;
  line-height: 1.7;
  color: #333;
  z-index: 0;
}

/* しっぽ共通の土台 */
.balloon::after{
  content: "";
  position: absolute;
  width: 26px;      /* しっぽ画像の実寸に合わせて調整 */
  height: 26px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ===== 配置（PC想定の目安） ===== */

.troubles__figure img {
  display: block;
  width: clamp(144px, 20vw, 160px);
  height: auto;
  margin: 0 auto;
}

.troubles__figure {
  position: relative;
  top: 60px; 
}

/* 左上ブロック：右向きしっぽを右側に */
.balloon--tl{ top: 40px; left: 190px; }
.balloon--tl::after{
  background-image: url("/wp-content/uploads/2025/09/balloon-_triangle-light.png");

  right: 50px;     /* 外側に少し出す */
  bottom: -26px;
}

/* 右上ブロック：左向きしっぽを左側に */
.balloon--tr{ top: 40px; right: 190px; }
.balloon--tr::after{
  background-image: url("/wp-content/uploads/2025/09/balloon-_triangle-left.png");
  left: 50px;
  bottom: -26px;
}

/* 左下ブロック：右向きしっぽを右側に（下寄せ） */
.balloon--bl{ bottom: 240px; left: 150px; }
.balloon--bl::after{
  background-image: url("/wp-content/uploads/2025/09/balloon-_triangle-light.png");
  right: 50px;
  bottom: -26px;
}

/* 右下ブロック：左向きしっぽを左側に（下寄せ） */
.balloon--br{ bottom: 240px; right: 150px; }
.balloon--br::after{
  background-image: url("/wp-content/uploads/2025/09/balloon-_triangle-left.png");
  left: 50px;
  bottom: -26px;
}

/* テキスト */
.balloon p{ 
  margin: 0;
   font-size: 
   clamp(14px, 1.6vw, 16px);
  text-align: left;

   }

.highlight-pink {
  background: linear-gradient(
    to top, 
    rgba(242, 192, 191, 0.9) 0%,       /* 下から */
    rgba(242, 192, 191, 0.9) 40%,      /* 半分くらいまで色 */
    transparent 40%,                   /* 上半分は透明 */
    transparent 100%
  );
  padding: 0 2px; /* 左右に少し余白を足して自然に */
}





/* ========= SP（640px以下） ========= */
@media (max-width: 960px){
  .section.troubles .section-title {
  margin-bottom: 40px;
}
  .troubles__wrap{
    display: flex;
    flex-direction: column;
    row-gap: 0;
    max-width: min(94vw, 280px);
    margin: 40px auto ;  
    min-height: unset;
  
  }

  .balloon{
    position: relative !important; /* PCのabsoluteを打ち消す */
    max-width: 90%;                /* 超小画面でも崩れない保険 */
    padding: 12px 14px;
    margin: 0;                     /* 初期は0 */
  }

  /* 左寄せ（1番・3番） */
  .balloon--tl{ 
    order: 1;
     margin-right: auto;
    top: -40px;
    left: 0px;
    z-index: -1;
   }
  .balloon--bl{ 
    order: 3; 
    margin-right: auto;
    left: 0;
    top: -60px;
   }

  /* 右寄せ（2番・4番） */
  .balloon--tr{
     order: 2; 
     margin-left: auto;
     right: 0;
     top: -50px;
     }
  .balloon--br{ 
    order: 4; 
    margin-left: auto; 
    left: 0 ;
    top: -70px;
  }


  /* 人物は一番下 */
  .troubles__figure{
    order: 5;
    position: static;
    width: min(70%, 280px);
    margin: -40px auto 0;
  }

  /* 尻尾：デフォルトは非表示、4つ目だけ表示 */
  .balloon::after{ display: none; }
  .balloon--br::after{
    display: block;
    content: "";
    position: absolute;
    left: 50px;
    bottom: -23px;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: url("/wp-content/uploads/2025/09/balloon-_triangle-left.png")
                no-repeat center/contain;
  }


  /* テキストサイズ調整 */
  .balloon p{ font-size: 14px; line-height: 1.6; }
}



/* 共通：troubles専用デコ */
.troubles-deco{
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;             /* コンテンツの背面に */
  opacity: 0.95;          /* 任意で薄く */
}

/* 右上（黄色ドットなど） */
.troubles-deco--top-right{
  top: 100px;
  right: 50px;
  width: 146px;
  height: 146px;
  background-image: url("/wp-content/uploads/2025/09/right-top-deco-1.png");
}

/* 左下（2重サークルなど） */
.troubles-deco--bottom-left{
  left: 40px;
  bottom: 140px;
  width: 120px;
  height: 120px;
  background-image: url("/wp-content/uploads/2025/09/left-under-deco-1.png");
}

/* スマホで少し小さく＆位置微調整（お好みで） */
@media (max-width: 640px){
  .troubles-deco--top-right{
    top: -60px; right: 16px;
    width: 90px; height: 90px;
  }
  .troubles-deco--bottom-left{
    left: 16px; bottom: 80px;
    width: 96px; height: 96px;
  }
}



/* ーーーーーーーーーーーーーーーーーーーーーー
section: そのお悩み記帳屋さんが解決します
ーーーーーーーーーーーーーーーーーーーーーー */


/* セクション全体 */
.section.solusion{
  position: relative;
  background-color: #F9F0BE;
  padding: 0 20px 100px;
  text-align: center;
  overflow: visible;         
  
}

@media (max-width: 640px){
  .section.solusion{
      padding: 0 16px 60px;
}
  }


/* コンテナは手前に */
.section.solusion .container{
  position: relative;
  /* z-index: 1; */
  max-width: 1000px;
  margin: 0 auto;
}



/* ラベル */
.section-label span {
  position: relative;
  display: inline-block;
  margin: 0 0px;
  font-size: 40px;   
  font-weight: normal;
      margin-top: -0.5em;
}

/* 丸点を文字の上に表示 */
.section-label span::before {
  content: "";
  position: absolute;
  top: -20px;              /* 丸点の位置調整 */
  left: 50%;
  margin-top: -0.1em;
  width: 8px;              /* 丸点サイズ */
  height: 8px;
  background: #F8CC00;     /* 黄色 */
  border-radius: 50%;      /* 丸にする */
}


.section-label {
  /* 三角のサイズ（PC） */
  --tri-w: 600px;   /* 横幅 */
  --tri-h: 114px;   /* 高さ */

  position: relative;
  display: flex;
  justify-content: center;       /* 横中央 */
  align-items: center;           /* 縦中央 */
  width: var(--tri-w);
  height: var(--tri-h);
  margin: 0 auto 40px;
  line-height: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #222;
  gap: 10px;
  white-space: nowrap;           /* 折り返し防止 */
  letter-spacing:  0; /* 文字間隔 */
  z-index: 0;
}

/* 背面に逆三角形 */
.section-label::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fafafa;
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* 頂点が下の逆三角形 */
  z-index: -1;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .section-label {
    --tri-w: min(90vw, 600px);
    --tri-h: 90px;   /* 三角の高さ */
    line-height: 1;  /* ← 行の高さは固定値をやめる */
    letter-spacing: -0.02em;  /* ← 文字間隔を狭くする */
  }

  .section-label span {
    position: relative;      /* 擬似要素の基準 */
    font-size: 20px;
    display: inline-flex;    /* 中央揃えしやすく */
    align-items: center;     /* 縦中央 */
    justify-content: center; /* 横中央 */
    margin-top: -15px;

  }

  .section-label span::before {
  content: "";
  position: absolute;
  top: -8px;                /* テキストの上に配置 */
  left: 0;
  right: 0;
  margin: 0 auto;           /* 横中央寄せ */
  width: 5px;
  height: 5px;
  background: #F8CC00;
  border-radius: 50%;
}

}



/* 見出し */
.solusion__head {
  margin-bottom: 40px;
}

.section-title .em {
  font-size: 40px;
  font-weight: 500;
}
.section-title .qoute{
  font-size: 64px;
  font-weight: 500;
  color: #000;
}

.section-title .strong{
  font-size: 64px;
  font-weight: 600;
  color: #222;
  display: inline-flex;   /* 横並びにする */
  gap: 4px;               /* 「解」と「決」の間隔 */
}

.section-lead {
  font-size: 16px;
  margin-top: 10px;
  color: #222;
}

@media (max-width: 640px){
  .section-lead {
      margin-top: 40px;
  }
}


/* 「解」「決」の上の黄色い点 */
.section-title .strong .char {
  position: relative;
  display: inline-block;
}

.section-title .strong .char::before {
  content: "";
  position: absolute;
  top: -0.22em;                 /* 文字の上に配置（調整可） */
  left: 0;
  right: 0;                     /* 横方向いっぱい */
  margin: 0 auto;               /* 中央寄せ */
  width: clamp(8px, 2vw, 15px);
  height: clamp(8px, 2vw, 15px);
  background: #F8CB00;          /* 黄色 */
  border-radius: 50%;
}


/* 見出し全体：中央寄せ＋必要なら自然に折返し */
.section-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;          /* ← ここで自然折返し */
  gap: 10px 10px;           /* 行内＆行間ギャップ */
  text-align:center;
  line-height:1.2;
}

/* かぎかっこ・強調サイズ（PC基準） */
.section-title .qoute { font-size: 64px; font-weight: 700; }
.section-title .em    { font-size: 40px; font-weight: 500; }
.section-title .strong{ font-size: 64px; font-weight: 700; }
.section-title .tail  { font-size: 40px; font-weight: 500; }

/* 「解決します！！」をひとかたまりにして中で改行させない */
.section-title .solve{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  white-space: nowrap;     /* ← ここがミソ（内部は改行しない） */
}


/* ─── タブレット（例：≤960px） ─── */
@media (max-width: 960px){
  .section-title .qoute { font-size: 48px; }
  .section-title .em    { font-size: 28px; }
  .section-title .strong{ font-size: 52px; }
  .section-title .tail  { font-size: 28px; }
  .section-title .char::before{ width:10px; height:10px; top:-0.6em; }
}

/* ─── スマホ（例：≤640px） ─── */
@media (max-width: 640px){
  .section-title .qoute { font-size: 32px; }
  .section-title .em    { font-size: 20px; }
  .section-title .strong{ font-size: 36px; }
  .section-title .tail  { font-size: 22px; }
  .section-title .char::before{ width:10px; height:10px; top:-0.55em; }
}



/* メインビジュアル */
.solusion__visual {
  margin: 60px 0;
}
.solusion__figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 装飾 */
.solusion .decoration  {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  pointer-events: none; /* クリック貫通 */
}
.solusion-deco--dots-left {
  background-image: url("/wp-content/uploads/2025/09/left-center-deco.png");
  width: clamp(60px, 10vw, 160px);
  height: 160px;
  bottom: 80px;
  left: 0;
}
.solusion-deco--circle-right {
  background-image: url("/wp-content/uploads/2025/09/right-top-deco2.png");
  width: clamp(70px, 10vw, 140px);
  height: 140px;
  top: 250px;
  right: 40px;
  
}
.solusion-deco--line-right {
  background-image: url("/wp-content/uploads/2025/09/right-under-deco.png");
  width:clamp(100px, 10vw, 200px);
  height: 150px;
  bottom: -100px;
  right: 20px;
}

@media (max-width: 640px){
  .solusion .decoration{
    z-index: -1;
  }
  .solusion-deco--dots-left {
    width: 60px;
   bottom: 110px;
  }
  .solusion-deco--circle-right{
    width: 70px;
    right: 0;
    top: 90px;
  }
  
}

/* ------------------------------------
Section: cando（記帳屋さんができること）
------------------------------------ */

.section.cando{
  position: relative;
  background: #F9F0BE;
  padding: 100px 20px 0px;
  overflow: hidden;   
}


.section.cando .container{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;                 /* 背景英字より手前に */
}

/* 見出し */
.cando__head{
  text-align: center;
  margin-bottom: 40px;
}
#cando-title{
  font-size: 28px;
  font-weight: normal;
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.headline-deco{
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 520px;
  width: 100%;
}

/* --- カード一覧：Flexで中央寄せ、段落ちも中央 --- */
.cando__list{
  list-style: none;
  margin: 40px 0 32px;
  display: grid; /* ← flex ではなく grid を使う */
  grid-template-columns: repeat(2, 300px); 
  gap: 40px; /* 余白 */
  justify-content: center;  
  padding-left: 0; 
}

/* カードの幅（PC想定） */
.card{
  width: 300px;                                      
  height: 360px;           /* ← 高さ固定 */
  box-sizing: border-box;  /* 余白・枠を内側計算に */
  background: #fafafa;
  border: 1.5px solid #222;
  box-shadow: 8px 10px 0 #F8CB00;
}
.card__inner{ 
  height: 100%;                 /* なくてもOK。揃えたいなら付ける */
  display: flex;                /* 縦レイアウトを安定 */
  padding: 30px 20px; 
  flex-direction: column;
  width: 297px;
}



.card--02 .card__header{
  gap: 20px;
}

.card__header {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* 余白 */
}




.card__no{
  font-size: 40px;
  font-weight: bold;
  color: #F8CB00;
  line-height:1;          /* フォントの余白を殺す */
  margin:0;
  align-self:flex-start;  /* さらに個別で上揃え */

}


.card__title {
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
  line-height:1.2;
  padding-top: 0.2em; /* 上だけ余白を入れる */
}

.card__text{
  font-size:16px;
}


/* 画像はカードごとに幅指定（高さは縦横比維持） */
.card__figure{ margin: 14px 0 12px; text-align:center; }
.card__figure img{ height: auto; display: inline-block; }

/* ▼ここでカードごとの横幅を指定（数値は例。お好みで変更） */
.card--01 .card__figure img { width: 118px; }
.card--02 .card__figure img { width: 140px; }
.card--03 .card__figure img { width: 175px; }
.card--04 .card__figure img { width: 140px; }

@media (max-width: 640px) {
  .card__figure img {
    transform: scale(0.8);   /* 8割サイズに縮小 */
    transform-origin: center; /* 中央基準で縮小 */
  }
}


/* ====== リード文 ====== */
.cando__lead{
  margin: 80px auto;
  text-align: left;
  font-size: 16px;
  line-height: 2;
  color: #222;
  max-width: 800px;   /* 横幅を制限して中央寄せできるようにする */
  width: 100%;        /* スマホでは画面幅いっぱい、PCでは最大800px */
}

/* ====== CTA（LINE） ====== */
.cta-wrapper {
  display: flex;
  gap: 10px; /* ボタンの間の余白 */
  justify-content: center;
  flex-wrap: wrap; /* 横幅が足りない時に折り返し */

}


.cta{
  text-align: center;
  z-index: 1;
  margin-top: 12px;
}

.cta--line,.cta--coconara {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;    /* 中央揃え */
  text-align: center;     /* テキストも中央 */
}

.cta__note-wrapper{
  text-align: center;
  margin-bottom: 80px;
}

.cta__note{
  position: relative;
  display: inline-block; /* 横並びにするため */
  font-size: clamp(18px, 2vw, 24px) ;  /* お好みで調整 */
  font-weight: 500;
  color: #222;
  margin: 0 0 10px;
}


.cta__note::before,
.cta__note::after {
  content: "";
  margin: 0 8px 0 0; /* テキストとの間隔 */
}

.cta__note::before {
  content: "＼"; /* 左側の逆スラッシュ */
}

.cta__note::after {
  content: "／"; /* 右側の普通スラッシュ */
}


.btn{
  display: inline-flex;         /* 中央揃えに最適 */
  align-items: center;
  justify-content: center;
  padding: 20px 36px;           /* ← 16px→18px に少し増量（縦のゆとり） */
  min-height: 58px;             /* ← 文字が太く見える環境でも高さを保証 */
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.25;            /* ← 1.2→1.25（Windowsでの窮屈感を緩和） */
  font-family: "Noto Sans JP","Hiragino Sans","Meiryo",sans-serif;
}


.btn--line{
  background: #52BF9B;         /* 指定色 */
  font-size:clamp(18px, 2vw, 32px) ;
  color: #fff;
  transition: transform .1s ease, box-shadow .1s ease;
  width: 370px;        /* PC用の基準幅 */
  max-width: 95%;      /* 画面幅の90%まで縮む */
  margin: 0 auto;      /* 中央寄せ */
 
}


.btn--coconara{
  background: #fafafa;         /* 指定色 */
  font-size:clamp(18px, 2vw, 32px) ;
  color: #52BF9B;
  transition: transform .1s ease, box-shadow .1s ease;
  width: 370px;        /* PC用の基準幅 */
  max-width: 95%;      /* 画面幅の90%まで縮む */
  margin: 0 auto;      /* 中央寄せ */
 border: 2px solid #52BF9B;
}



@media (max-width: 640px) {
  .cta-wrapper{
    flex-direction: column; /* 縦並びに */
    align-items: center;    /* 中央寄せ */
    gap: 20px;              /* ←ここで間を調整（20px→10pxなど） */
  }


  .btn--line,.btn--coconara{
    width: 260px;      /* スマホ用の基準幅 */
   
  }
  .cta__note{
    margin-bottom: 0;
  }
}


.btn--line:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(82,191,155,.45);
}
.btn--coconara:hover {
 transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(82,191,155,.35);
  color: rgba(82,191,155,.7); /* 緑を少し薄く */
}

/* ====== レスポンシブ ====== */
/* ===== タブレット：2列 ===== */
@media (max-width: 960px){
  .card{
    flex: 0 0 calc(50% - 30px);  /* gap分を引いて2列 */
    width: auto;                 /* 固定幅解除 */
  }
}

/* スマホ：1列 */
@media (max-width: 640px){
  .section.cando{ 
    padding: 60px 16px 0; 
  }

  #cando-title{
     font-size: 22px;
     }

  .headline-deco{
     max-width: 380px;
     }

  .card{
    flex: none;       /* flex幅の制御を解除 */
    height: auto;     /* 高さは可変に */
  }

  .cando__list{
    grid-template-columns:none;
    align-items: center;    /* 中央寄せ */
    gap: 40px;
  }
  .card__inner{
    align-items: center;
    width: 270px;
  }
      
  .card__no{
     font-size: 40px;
     }

  .card__title{ 
    font-size: 20px; 
    padding-top: 0.4em;
  }

  .cando__lead{ 
    font-size: 16px;
     margin-bottom: 40px;
     }

  .section.cando::after{
    font-size: clamp(40px, 18vw, 84px);
    bottom: -6px;
  }
}


/* 共通設定 */
#cando .decoration {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain; /* 画像全体を収める */
}

@media (max-width: 640px){
  #cando .decoration{
    display: none;
  }
  
}

/* 左中央にドット画像 */
.deco--dots-left {
  left: -20px;
  top: 60%;
  /* transform: translateY(-50%); */
  width: clamp(70px, 10vw, 150px);   /* 画像の表示サイズ */
  height: 150px;
  background-image: url("/wp-content/uploads/2025/09/left-deco.png"); /* ドット画像パス */
}

/* 右下にサークル画像 */
.deco--circle-right {
  right: 20px;
  bottom: 30px;
  width: clamp(70px, 10vw, 180px);
  height: 200px;
  background-image: url("/wp-content/uploads/2025/09/right-under-deco1.png"); /* サークル画像パス */
}


.section-fulltext{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  text-align: center;

  /* 1行固定 & はみ出し対策 */
  white-space: nowrap;
  overflow: hidden;

  /* 文字サイズは画面幅で可変（上限120px） */
  font-size: clamp(20px, 7vw, 100px);

  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.05;
  color: #fafafa;
}


/* =========================
  Section: Profile
========================= */
.section.profile{
  position: relative;
  background: #fafafa;          /* セクション背景 */
  padding: 100px 0;
  overflow: hidden;             /* 装飾のはみ出し防止 */
}

@media (max-width: 640px){
  .section.profile{
    padding: 60px 0;
  }
}

.section.profile .container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 640px){
  .section.profile .container{
    padding: 0 16px;
  }
}

/* ---- ヘッダー（イラスト + 見出し） ---- */
.profile__head{
  text-align: center;
  margin-bottom: 40px;
}
.profile__figure{
  margin: 0 auto 18px;
  width: 200px;                  /* 画像サイズはHTMLに合わせて */
  height: 200px;
}
.profile__figure img{
  display: block;
  width: 100%;
  height: auto;
}
#profile-title{
  font-size: 28px;
  font-weight: 400;
  color: #222;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
#profile-title::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;                  /* 細い黒線 */
  height: 1px;
  background: #222;
}

/* ---- プロフィール概要 ---- */
.profile__intro{
  max-width: 870px;              /* 説明ブロックの適正幅 */
  margin:50px auto;
  color: #222;
  line-height: 1.9;
  font-size: 16px;
  margin-left: auto;     /* 中央寄せ */
  margin-right: auto;
  padding-left: 16px;    /* スマホ余白 */
  padding-right: 16px;
  box-sizing: border-box; /* padding込みで870px */
}



.profile__intro p{ 
  margin: 16px 0 ; 
  
}

  /* ハイライトの箇条書き（黄色い帯） */
.profile__list--highlight{
  list-style: disc;
  background: #F9F0BE;          /* 指定色 */
  border-radius: 10px;
  padding: 20px 40px;
  margin: 14px auto 18px;
  width: 100%;
  max-width: 1000px;              /* 横幅 900px（レスポンシブでは縮む） */
}

.profile__list--highlight li{
  font-weight: 400;
}

ul{
  font-weight: 400;
}

@media (max-width: 640px){
  .profile__list--highlight{
    padding: 20px 20px;
  }
}

/* ---- 注意事項カード（940pxカード） ---- */
.profile__note-box{
  width: 100%;
  max-width: 940px;              /* 指定のカード幅 */
  margin: 60px auto 0;
  background: #fafafa;           /* カード背景 */
  border: 1.5px solid #222;      /* 黒の細い枠 */
  box-shadow: 12px 14px 0 #F9F0BE; /* 黄色の影 */
  padding: 40px 28px 40px;
  position: relative;
  z-index: 1;
}

/* 見出し */
.profile__note-title{
  font-size: 24px;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1;
}

.headline-deco {
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 720px;
    width: 100%;
 }

/* リスト本文 */
.profile__note-list{
  margin: 16px 0 ;
  line-height: 1.9;
  font-size: 16px;
  padding-left: 10px;
}
.profile__note-list li{ 
  margin: 0 0 10px; 
  font-weight: 400;
}

.highlight_yellow{
  background: linear-gradient(
    to top, 
    rgba(249, 240, 190, 0.9) 0%,       /* 下から */
    rgba(249, 240, 190, 0.9) 40%,      /* 半分くらいまで色 */
    transparent 40%,                   /* 上半分は透明 */
    transparent 100%
  );
  padding: 0 2px; /* 左右に少し余白を足して自然に */
}

/* profile背景画像共通 */
.profile-decoration {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;       
  pointer-events: none; /* 装飾はクリック不可 */
}

/* 位置指定 */
.profile-decoration--top-left {
  top: 230px;
  left: 60px;
  width: clamp(70px, 12vw, 160px);    
  height: 180px;
  background-image: url("/wp-content/uploads/2025/09/left-top-deco.png");
}

.profile-decoration--top-right {
  top: 50px;
  right: 60px;
  width: clamp(70px, 15vw, 200px);   
  height: 190px;  
  background-image: url("/wp-content/uploads/2025/09/right-top-deco3.png");
}

.profile-decoration--bottom-left {
  bottom: 40px;
  left: 20px;
  width: clamp(70px, 15vw, 160px);   
  height: 160px;  
  background-image: url("/wp-content/uploads/2025/09/left-under-deco2.png");
}

.profile-decoration--bottom-right {
  bottom: 45%;
  right: 30px;
  width: clamp(80px, 14vw, 120px);    
  height: 120px;
  background-image: url("/wp-content/uploads/2025/09/right-under-deco2.png");
}



/* ---- レスポンシブ ---- */
@media (max-width: 640px){
  #profile-title{ font-size: 24px; }
  .profile__intro{ 
    font-size: 14px;
    padding: 0;
   }
  .profile__note-box{
    padding: 20px 18px 22px;
    box-shadow: 10px 12px 0 #F8CB00;
  }

  .profile__note-title{
    font-size:18px;
    margin: 0 0 10px
  }
  .profile__note-title::after{ width: 70%; }
  .profile__note-title::before{ bottom: -12px; width: 28px; height: 14px; }

  .profile-decoration {
    z-index: -1;
  }
  .profile-decoration--top-left{ 
    width: 70px; 
    height: 70px; 
   top: 180px;
    left: 10px;
  }
  .profile-decoration--top-right{
     width: 70px;
      height: 70px; 
      right: 10px;
      top: -30px;
    }
    .profile-decoration--bottom-left {
      width: 70px; 
      height: 70px; 
    }
    .profile-decoration--bottom-right{
      width: 70px;
      top: 60%;
      right: 10px;
    }
}

/* =========================
  Section: USER VOICE
========================= */
.section.uservoice{
  position: relative;
  background: #F2C0BF;     /* セクション背景 */
  padding: 100px 20px 0;      
  overflow: hidden;
}
.section.uservoice .container{
  max-width: 1000px;
  margin: 0 auto;

}

@media (max-width: 640px){
  
  .section.uservoice{
    padding: 60px 16px 0;
  }
}

/* ---- タイトル（大きい英字 + 日本語を半分重ねる） ---- */
.uservoice__head{
  text-align: center;
  margin: 0 0 40px;
  position: relative;
  z-index: 1;
}
.uservoice__title{
  font-size: clamp(56px, 11vw, 120px); /* 大きく、背景っぽく */
  font-weight: 800;
  letter-spacing: .08em;
  color: #fafafa;
  margin: 0;
  line-height: 1;
}
.uservoice__subtitle{
  font-size: clamp(16px, 6vw, 40px);
  color: #222;
  margin: 0;
  transform: translateY(-60%);     
  font-weight: normal;     /* ← 半分くらい重ねる */
}

/* ---- カード一覧（2×2） ---- */
/* --- カード一覧（Flexで揃える） --- */
.uservoice__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 横方向を中央寄せ */
  gap: 40px;
  margin-bottom: 100px;
}

/* 各カード */
.voice-card {
  display: flex;
  flex-direction: column;    /* 上から下へ積む */
  justify-content: space-between;
  width: 410px;
  background: #fafafa;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 10px 0 rgba(0,0,0,.06);
  z-index: 1;
}

/* グリッド的に均一高さに揃える */
.uservoice__list {
  align-items: stretch;      /* 子カードを同じ高さに揃える */
}

@media (max-width: 768px){
  .uservoice__list {
    flex-direction: column;   /* 縦並び */
    gap: 20px;
    align-items: center;
  }
  .voice-card {
    /* width: 100%; */
    flex: none;   
    /* 高さは揃える！ */
  flex: 1 1 300px;           /* 300px を基準に伸び縮み */          
  }
}


/* 角欠け（上段＝左上カット、下段＝右上カット） */
.uservoice__list > .voice-card:nth-child(1),
.uservoice__list > .voice-card:nth-child(2){
  /* 左上を少し欠けさせる */
  clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
}
.uservoice__list > .voice-card:nth-child(3),
.uservoice__list > .voice-card:nth-child(4){
  /* 右上を少し欠けさせる */
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
}


/* 上下の比率を固定する例 */
.voice-card__head {
  flex: 0 0 30%;   /* 上部は全体の40% */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;
}



.voice-card__figure {
  margin: 0;
}
.voice-card__figure img {
  display: block;
  width: 80px;
  height: auto;
}



.voice-card__name{
  display: inline-block;
  align-items: center;         /* 縦中央 */
  justify-content: center;     /* 横中央 */
  background: #F3E576;
  color: #222;
  font-weight: 600;
  font-size: 24px;
  padding: 3px 12px;
  width: auto;                 /* 強制的に幅リセット */
  max-width: fit-content;      /* 余計に広がらないように */
}

@media (max-width: 640px){
  .voice-card {
     flex: none;
  }

  .voice-card__name{
    font-size: 20px;
  }

  .voice-card__head{
    gap: 10px;
  }
}

/* 頭部の下に細い区切り線 */
.voice-card__head::after {
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;         /* ← .voice-card__headの最下部に */
  height: 1.5px;
  background: #222;
  opacity: .4;
}

/* 本文 */
.voice-card__text {
  flex: 1;         /* 残りの60%を本文に割り当てる */
  margin: 0;
  color: #222;
  line-height: 1.5;
  font-size: 16px;
  overflow: hidden; /* 長文で溢れないように調整 */
}

/* === 極小画面（~430px）：1列にしてはみ出し防止 === */
@media (max-width: 430px){
  .uservoice__list{
    grid-template-columns: minmax(0, 1fr); /* 1列で画面幅にフィット */
    gap: 20px;
  
  }
  .voice-card{
    width: 100%;       /* 幅いっぱい */
    padding: 30px 16px;
  }
}


/* ---- 背景あしらい（任意） ---- */
/* 共通装飾 */
.uservoice-decoration {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}


/* 右上 */
.uservoice-decoration--top-right {
  top: 100px;
  right:40px;
  width: clamp(70px, 17vw, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  background-image: url("/wp-content/uploads/2025/09/right-top-deco-4.png");
}

/* 左中央 */
.uservoice-decoration--left-center {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: clamp(80px, 20vw, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  background-image: url("http://fphp.local/wp-content/uploads/2025/09/right-under-deco-5.png");
}

/* 右下 */
.uservoice-decoration--bottom-right {
  bottom: 300px;
  right: 40px;
  width: clamp(100px, 22vw, 180px);
  height: auto;
  aspect-ratio: 1 / 1;
  background-image: url("/wp-content/uploads/2025/09/right-under-deco-3.png");
}

@media (max-width: 640px){
  .uservoice-decoration--top-right {
    right:20px;
  }
}

/* ---- 下部ギャラリー ---- */
.full-width-image {
  display: block;
  width: 100vw;                     /* 画面幅いっぱい */
  max-width: 100vw;                 /* セクションの制約を超える */
  margin-left: calc(50% - 50vw);    /* セクション余白を打ち消す */
  height: auto;
}



/* =========================
  Section: FAQ
========================= */

#faq{
  background:#fafafa;          /* セクション背景 */
  padding:100px 0;
  position: relative;
}
#faq .inner{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}

/* 見出し（英字＋日本語） */
.faq__title{
  text-align:center;
  margin:0 0 36px;
}
.faq__en{
  display:block;
  font-size: clamp(56px, 10vw, 120px);
  font-weight:800;
  color:#F9F0BE;              
  line-height:1;
}
.faq__ja{
  display:block;
  transform: translateY(-60%);          /* ← 半分くらい重ねる */
  font-size:clamp(16px, 6vw, 40px);
  color:#222;
  font-weight: normal;
}

/* リスト全体 */
.faq__list{
  display:flex;
  flex-direction:column;
  gap:40px;
  z-index: 2;
}

/* 各アイテム（左上以外15px角丸） */
.faq__item{
  position:relative;
  background:#F9F0BE;
  border-radius:0 15px 15px 15px; /* 左上だけ角丸なし */
  padding:80px;
  z-index: 1;
  margin-bottom: 80px;
}

/* 左上の黄色い二等辺直角三角形（120px） */
.faq__item::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:120px; height:120px;       /* 二等辺(=幅=高さ) */
  background:#F8CB00;
  /* 直角が左上にくる三角形 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 三角内の番号（白） */
.faq__number{
  position:absolute;
  top:10px; left:10px;
  font-weight:800;
  font-size:40px;
  line-height: 1;
  letter-spacing:.02em;
  color:#fafafa;
  z-index:1;                        /* 三角の上 */
}

/* 本文ブロック */


/* Q（行） */
.faq__question{
  display: flex;
  align-items: center;       /* 縦位置を中央揃え */
  gap: 40px;
  margin: 0 0 20px;
  text-align: left;          /* 左寄せ */
  padding-left: 36px;     /* ← Aのテキストと揃えるために左余白を追加 */
}

@media (max-width: 640px){
  #faq{
  padding:60px 0;
}

  .faq__question{
  padding-left: 10px; 
  gap: 10px;
  align-items: flex-start;  
  }
}

.faq__q{
  flex: 0 0 auto;            /* 固定幅 */
  font-weight: 800;
  font-size: 64px;
  color: #F8CB00;
  line-height: 1;
}

.faq__question p{
  margin: 0;
  font-size: 24px;
  color: #222;
  flex: 1;                   /* 残り幅を使う */
  text-align: left;
  
}

/* Aのボックス */
.faq__answer{
  display: flex;
  align-items: center;       /* 縦位置を中央揃え */
  gap: 40px;
  background: #fafafa;
  border-radius: 15px;
  padding: 14px 40px;       /* ← 左右80pxに設定 */
  text-align: left;         /* 左寄せ */
}

@media (max-width: 640px){
  .faq__answer{
    padding: 12px 16px;
    gap: 10px;
    align-items: flex-start;  
  }
}

.faq__a{
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 64px;
  color: #F2C0BF;
  line-height: 1;
}

.faq__answer p{ 
  margin: 0;
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  flex: 1;
  text-align: left;
}


/* CTA（下部）— 既存の .btn--line を使う前提 */
.faq__cta{
  text-align:center;
  margin:70px 0 0;
}



/* ===== レスポンシブ ===== */
@media (max-width: 640px){
  .faq__item{ 
    padding:50px 16px; 
    margin-bottom: 40px;
  }

  /* 三角を小さめに */
  .faq__item::before{ width:60px; height:60px; }
  .faq__number{ top:8px; left:8px; font-size:18px; }

  .faq__q{ font-size:24px; }
  .faq__question p{ font-size:16px; }
  .faq__a{ font-size:22px; }
  .faq__answer p{ font-size:14px; line-height:1.5; }
}

/* 共通（全装飾の基本ルール） */
.faq-decoration {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

/* 右上 */
.faq-decoration--top-right {
  top: 50px;
  right: 116px;
  width: clamp(80px, 10vw, 160px);
  height: 160px;
  background-image: url("/wp-content/uploads/2025/09/right-top-deco-5.png");
}

/* 右下 */
.faq-decoration--bottom-right {
  bottom: 530px;
  right: 80px;
  width: clamp(90px, 10vw, 180px);
  height: 180px;
  background-image: url("/wp-content/uploads/2025/09/right-under-deco-4.png");
}

/* 左上 */
.faq-decoration--top-left {
  top: 50%;
  left: 100px;
  width: clamp(70px, 10vw, 140px);
  height: 140px;
  background-image: url("/wp-content/uploads/2025/09/left-top-deco-1.png");
}

/* 左下 */
.faq-decoration--bottom-left {
  bottom: 114px;
  left: 100px;
  width: clamp(100px, 10vw, 200px);
  height: 160px;
  background-image: url("/wp-content/uploads/2025/09/left-under-deco-3.png");
}

/* スマホでまとめて縮小 */
@media (max-width: 640px) {
  .faq-decoration {
    transform: scale(0.7);
    opacity: 0.8;
  }

  .faq-decoration--top-right {
  top: 20px;
  right: 20px;
}

.faq-decoration--bottom-left {
  bottom: -60px;
  left: 40px;
}

}



/* =========================
  Section: CONTACT
========================= */

.section.contact{
  background:#F2C0BF;             /* セクション背景 */
  padding:100px 0;
  position: relative;
}
.section.contact .container{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}

/* 見出し：英字大＋日本語を半分重ねる */
.contact__title{ 
  text-align:center; 
  margin:0 0 40px; 
  position:relative;
 }

.contact__en{
  display:block;
  font-weight:800;
  font-size:clamp(56px, 10vw, 120px);
  color:#F5E9EA;                  /* うっすら白っぽく */
  line-height:1;
}
.contact__ja{
  display:block;
  font-size: clamp(16px, 6vw, 40px);
  color:#222;
  transform: translateY(-60%);    /* ← 半分くらい重ねる */
  font-weight: normal;      
}

/* ===== フォーム枠 ===== */
.contact__form .wpcf7 form{
  max-width:700px;                /* だいたい700px */
  width:100%;
  margin:0 auto;
}

/* 共通フィールド */
.cf-field{ margin:0 0 40px; }

@media (max-width:640px){
  .cf-field{
     margin:0 0 20px; 
    }
}

.cf-label{ 
  /* display:block;  */
  font-size:16px; 
  color:#222; 
  margin-bottom:10px;
 }

.cf-input,
.cf-textarea{
  display:block;
  width:100%;
  background:#fafafa;             /* 入力エリア背景 */
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
  color:#222;
  /* box-sizing:border-box; */
}
.cf-textarea{ min-height:180px; }

/* ラジオ（use_label_elementで<label>になる） */
.cf-radio .wpcf7-list-item{ display:block; margin:6px 0; }
.cf-radio .wpcf7-list-item label{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:#222;
  margin-left: 20px;
}


.checkbox{
  text-align: center;
}



/* 送信ボタンの横にあった謎のもの（検証で見つけた） */
.wpcf7-spinner{
  display: none;
}


/* 送信ボタン */
.cf-btn{
  display:inline-block;
  width:100%;
  max-width:420px;
  background:#52BF9B;       /* 緑 */
  color:#fafafa;            /* 文字は白 */
  border:2px solid #52BF9B; /* 境界線を付けると反転した時に自然 */
  border-radius:999px;
  padding:16px 24px;
  font-weight:700;
  cursor:pointer;
  transition: all .2s ease; /* 色変化をなめらかに */
}

.cf-submit{ 
  text-align:center; 
  margin-top:24px; 
}


input[type=submit] {
    /* -webkit-appearance: none; */
    border: none;
    background-color: #52BF9B;
    color: #fafafa;
}

/* hover時のスタイル */
.cf-btn:hover{
  background:#fff;          /* 背景は白 */
  color:#52BF9B;            /* 文字は緑 */
  transform:none;           /* 浮かせない */
  box-shadow:none;          /* 影なし */
}


/* スマホ */
@media (max-width:640px){
  .section.contact{ padding:60px 16px; }
  .section.contact .container{
    padding: 0;
  }
}


/* ==== CONTACT セクション背景装飾 ==== */
.contact-decoration {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;          /* コンテンツより後ろに */
  pointer-events: none; /* クリック操作の邪魔をしない */
}

/* 右上 */
.contact-decoration--top-right {
  top: 80px;
  right: 60px;
  width: clamp(90px, 10vw, 170px);
  height: 160px;
  background-image: url("/wp-content/uploads/2025/09/right-top-deco-6.png");
}

/* 右下 */
.contact-decoration--bottom-right {
  bottom: 80px;
  right: 20px;
  width: clamp(90px, 10vw, 180px);
  height: 180px;
  background-image: url("/wp-content/uploads/2025/09/right-under-deco-5.png");
}

/* 左中央 */
.contact-decoration--center-left {
  top: 50%;
  left: 20px;
  width: clamp(70px, 10vw, 140px);
  height: 140px;
  transform: translateY(-50%);
  background-image: url("/wp-content/uploads/2025/09/left-deco-2.png");
}

/* スマホで小さめに */
@media (max-width: 640px) {
  .contact-decoration {
    transform: scale(0.7);
    opacity: 0.8;
  }

  .contact-decoration--top-right {
  top: 100px;
  right: 20px;
}
.contact-decoration--center-left {
  top: 70%;
  left: 10px;
}

}



/* =========================
  Section: footer
========================= */
/* フッター全体 */
.site-footer {
  background: #F9F0BE;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}

/* 上の帯 */
.footer__top {
  background: #EFDE83;
  height: 24px;
  width: 100%;
}

/* 内側コンテナ */
.footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* ===== グローバルメニュー（共通） ===== */
.footer-nav__list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;          /* PCは横並びで適宜折り返し */
  gap: 50px;
  background: #EFDE83;
  border-radius: 50px;
  padding: 12px 24px;
  max-width: 1000px;
  margin: 0 auto 40px;
  list-style: none;
}

.footer-nav__item a{
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  position: relative;
}

/* 先頭の丸ドット（10px・#fafafa・文字と5px間隔） */
.footer-nav__item a::before{
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fafafa;
  margin-right: 5px;
}

/* ===== タブレット：2段（上3 / 下2を中央寄せ） ===== */
/* 例：1024px以下で2段化 */
@media (max-width: 1024px){
  .footer-nav__list{
    display: grid;                       /* グリッドに切替 */
    grid-template-columns: repeat(3, auto);
    gap: 18px 40px;                      /* 行間 / 列間 */
    justify-content: center;             /* 全体を中央寄せ */
  }
  /* 2段目の最初の項目(=4番目)を列2から開始して中央寄せにする */
  .footer-nav__item:nth-child(4){ grid-column: 2; }
  /* 5番目は自動で列3に入るので 2つが中央に揃う */
}

/* ===== スマホ：1列（中央寄せ・テキストは左揃え） ===== */
@media (max-width: 640px){
  .footer-nav__list{
    display: flex;              /* 再びflexへ */
    flex-direction: column;     /* 縦並び */
    align-items: center;        /* ボタン自体は中央に配置 */
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
  }
  .footer-nav__item{
    width: 100%;
    /* max-width: 360px;           */
  }
  .footer-nav__item a{
    display: block;
    text-align: left;           /* テキストは左揃え */
  }
}


/* ===== ロゴ・テキスト ===== */
.footer__logo img {
  display: block;
  margin: 0 auto 16px;
  width: 220px;
  height: auto;
}

.footer__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #222;
}

.footer__subtitle {
  font-size: 16px;
  margin: 4px 0 0;
  color: #333;
}

.ad-section {
  text-align: center;
  padding: 40px 20px 0;
}

.ad-banner-wrap {
   display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap; /* 横幅が足りないとき折り返しOK */
  margin-top: 20px;
}


/* --- 横幅が狭くなったときに縦並びに変更 --- */
@media (max-width: 600px) {
.ad-section {
   padding: 40px 0 0;
}

  .ad-banner-wrap {
    gap: 20px; /* 縦並び時の間隔を少し狭く */
  }

  .ad-banner-item {
    height: 45px; /* モバイルでは少し小さめに */
  }

  .ad-banner-note {
    font-size: 12px;
  }
}

/* それぞれの画像用 */
.ad-banner-item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像 */
.ad-banner-item {
  height: 60px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.ad-banner-item:hover {
  opacity: 0.8;
}

/* 注意書き（アフィリエイト画像の下） */
.ad-banner-note {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}




/* ===== コピーライト ===== */
.footer__copy {
  background: #fafafa;
  font-size: 13px;
  color: #222;
  height: 40px;          /* ← 背景の縦幅を固定 */
  display: flex;         /* 中央寄せ用 */
  align-items: center;   /* 縦中央 */
  justify-content: center; /* 横中央 */
}

.site-name-text-link {
  display: none !important;  /* 完全非表示 */
}

/* ===== Cocoonデフォルトのフッター要素を非表示 ===== */
.footer-bottom,
.navi-footer,
.copyright {
  display: none !important;
}



.main{
  padding: 0px;
}

.footer{
  margin-top: 0;
}

/* 元々あるレスポンシブ追従フッター  */
.mobile-footer-menu-buttons{
      display: none;
    }