@charset "UTF-8";
/* CSS Document */

.faq h3#title_1 {
	height: 41px;
	width: 1040px;
	border-bottom: solid 3px #b2b2b2;
/*	margin-bottom: 30px;*/
}

.faq h3#title_2 {
	display:none;
}

.faq .logo {
	width:400px;
    margin: 0 auto;
}

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

    :root{
      --orange:#f67a2d;          /* 濃いオレンジ帯 */
      --peach:#feebe0;           /* 薄いピンク背景 */
      --blue:#009fe8;            /* ボタン青 */
      --shadow: 4px 4px 5px rgba(0,0,0,.2);
      --radius: 12px;
/*      --wrap: 1040px;            /* 画像に合わせた横幅 */
    }

    .q_and_a{
    box-sizing:border-box;
      margin:0 auto;
      width: 100%;
    }

    /* 上部説明＋人物 */
    .qa-hero{
      position:relative;
      padding:0 0 0 0;
      height: 184px;
    }
    .qa-hero__text{
    width: 100%;
      text-align:center;
      line-height:2em;
      font-size:15px;
      color:#717171;
      padding:0 ;
      font-weight: 800;
      position:absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    }
    .qa-hero__text b{
/*      color:#444;*/
      font-weight:700;
    }
    .qa-hero__person{
      position:absolute;
/*      top:10px;*/
/*      width:86px;*/
      height:auto;
    }
    .qa-hero__person--left{ left:70px; }
    .qa-hero__person--right{ right:70px; }
    .qa-hero__person img{
    width: 102px;
}
    /* アコーディオン全体の薄ピンク枠 */
    .qa-box{
      background:var(--peach);
      border-radius:10px;
      padding:40px 40px;
    }

    /* 1項目 */
    .qa-item + .qa-item{ margin-top:20px; }

    .qa-q{
      width:100%;
      border:0;
      background:var(--orange);
      color:#fff;
      border-radius:10px;
      padding:15px 25px 15px 35px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      box-shadow: var(--shadow);
      transition: transform .05s ease;
      text-align:left;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    .qa-q:active{ transform: translateY(1px); }

    .qa-q__left{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    /* 左の▶（CSSで三角形） */
    .qa-q__tri{
      width:0; height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-left:11px solid rgba(255,255,255,.95);
      flex:0 0 auto;
    }

    .qa-q__title{
      font-size:16px;
      font-weight:700;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* 右の白丸＋(/-) */
    .qa-q__badge{
      width:36px;
      height:36px;
/*      border-radius:999px;
      background:#fff;*/
      display:grid;
      place-items:center;
      flex:0 0 auto;
/*      box-shadow: 0 2px 0 rgba(0,0,0,.10) inset;*/
    }
    .qa-q__badge img{
      width:100%;
      height:100%;
      display:block;
    }

    /* 回答エリア（open時に表示） */
    .qa-a{
      background:#fff;
      border-radius:10px;
      margin-top:10px;
      box-shadow: var(--shadow);
      overflow:hidden;

      /* アニメ用 */
      max-height:0;
      opacity:0;
      transform: translateY(-6px);
      transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
    }

    .qa-a__inner{
      padding:20px 60px;
      font-size:14px;
      line-height:1.9;
    }

    .qa-a__inner p{
      border-top: 1px solid #bbb;
      padding-top: 0.8em;
      margin-top: 0.8em;
}

    .qa-a__link{
      margin-top:1em;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:700;
    }
    .qa-a__link_2{
      margin-top:0;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:700;
    }

    /* 開いている状態 */
    .qa-item.is-open .qa-a{
/*      max-height:360px; /* 回答が長い場合は増やしてください */
      opacity:1;
      transform: translateY(0);
    }
    .qa-item.is-open .qa-q__badge img{
      /* JSでsrc差し替えします（保険） */
    }

    /* 下部案内 */
    .qa-footer{
      padding:22px 0 34px;
      text-align:center;
/*      color:#444;*/
/*      font-size:13px;*/
      line-height:2;
    }

    .cta{
      display:flex;
      gap:50px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:18px;
    }

    .cta a{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:0.5em 1.5em;
      border-radius:999px;
      background:var(--blue);
      color:#fff;
      font-size: 17px;
      text-decoration:none;
      font-weight:800;
      min-width:220px;
      justify-content:center;
    }
    .cta a:active{ transform: translateY(1px); }

    .cta .cta__tri{
      width:0; height:0;
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      border-left:12px solid rgba(255,255,255,.95);
    }




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

/* SP */
@media print, screen and (max-width: 640px) {
.faq h3#title_1 {
	display:none;
}

.faq h3#title_2 {
	display:block;
	margin-bottom: 0;
}

.faq .logo {
	width:100%;
	text-align: center;
}

.faq .logo img {
	width:55%;
}

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

    .q_and_a{
    box-sizing:border-box;
      margin:0 auto;
      width: 93%;
    }

    /* 上部説明＋人物 */
    .qa-hero{
      position:relative;
      padding:0 0 0 0;
      height: 10em;
    }
    .qa-hero__text{
    width: 100%;
      text-align:center;
      line-height:2em;
      font-size:2.7vw;
      color:#717171;
      padding:0 ;
      font-weight: 800;
      position:absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    }
    .qa-hero__text b{
/*      color:#444;*/
      font-weight:700;
    }
    .qa-hero__person{
      position:absolute;
      height:auto;
    width: 15%;
    }
    .qa-hero__person--left{
    left:0;
    bottom: 0;
    }
    .qa-hero__person--right{
    right:0;
    bottom: 0;
    }

/* アコーディオン全体の薄ピンク枠 */
    .qa-box{
      background:var(--peach);
      border-radius:10px;
      padding:1.2em 1.2em;
    }

    /* 1項目 */
    .qa-item + .qa-item{
    margin-top:0.4em;
    }

    .qa-q{
      width:100%;
      border:0;
      background:var(--orange);
      color:#fff;
      border-radius:10px;
      padding:1em 1.5em 1em 1.5em;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      box-shadow: var(--shadow);
      transition: transform .05s ease;
      text-align:left;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    .qa-q:active{ transform: translateY(1px); }

    .qa-q__left{
      display:flex;
      align-items:center;
      gap:0.5em;
      min-width:0;
    }

    /* 左の▶（CSSで三角形） */
    .qa-q__tri{
      width:0; height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-left:11px solid rgba(255,255,255,.95);
      flex:0 0 auto;
    }

    .qa-q__title{
      font-size:3.5vw;
      font-weight:700;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* 右の白丸＋(/-) */
    .qa-q__badge{
      width:8%;
      height:8%;
/*      border-radius:999px;
      background:#fff;*/
      display:grid;
      place-items:center;
      flex:0 0 auto;
/*      box-shadow: 0 2px 0 rgba(0,0,0,.10) inset;*/
    }
    .qa-q__badge img{
      width:100%;
      height:100%;
      display:block;
    }

    /* 回答エリア（open時に表示） */
    .qa-a{
      background:#fff;
      border-radius:10px;
      margin-top:0.3em;
      box-shadow: var(--shadow);
      overflow:hidden;

      /* アニメ用 */
      max-height:0;
      opacity:0;
      transform: translateY(-0.5em);
      transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
    }

    .qa-a__inner{
      padding:0.7em 1.5em;
      font-size:3.3vw;
      line-height:1.9;
    }

    .qa-a__inner p{
      border-top: 1px solid #bbb;
      padding-top: 0.8em;
      margin-top: 0.8em;
}

    .qa-a__link{
      margin-top:1em;
      display:inline-flex;
      align-items:center;
      gap:0;
      font-weight:700;
    }
    .qa-a__link_2{
      margin-top:0;
      display:inline-flex;
      align-items:center;
      gap:0;
      font-weight:700;
    }

    /* 開いている状態 */
    .qa-item.is-open .qa-a{
/*      max-height:360px; /* 回答が長い場合は増やしてください */
      opacity:1;
      transform: translateY(0);
    }
    .qa-item.is-open .qa-q__badge img{
      /* JSでsrc差し替えします（保険） */
    }

    /* 下部案内 */
    .qa-footer{
      padding:1.5em 0 0 0;
      text-align:center;
/*      color:#444;*/
      font-size:3.5vw;
      line-height:1.7em;
    }

    .cta{
      display:flex;
      gap:1.3em;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:1.5em;
    }

    .cta a{
      display:inline-flex;
      align-items:center;
      gap:0.5em;
      padding:0.5em 1.5em;
      border-radius:999px;
      background:var(--blue);
      color:#fff;
      font-size: 3.5vw;
      text-decoration:none;
      font-weight:800;
      min-width:12em;
      justify-content:center;
    }
    .cta a:active{ transform: translateY(1px); }

    .cta .cta__tri{
      width:0; height:0;
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      border-left:12px solid rgba(255,255,255,.95);
    }


}