@charset "utf-8";

/* =================================================================
   基本設定・変数
   ================================================================= */
:root {
    /* 流用 */
    --col_white: #ffffff;
    --col_lightblue: #def2ff;
    --col_skyblue: #88c7f0;
    --col_salmonorange: #ffb375;
    --col-palepink: #ffe0c8;
    --font-yu-gothic: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif;
    --toggle_bar1: clamp(1px, calc(3 / 750 * 100vw), 3px);
    --toggle_bar2: clamp(12px, calc(20 / 750 * 100vw), 20px);
    /* オリジナル用 */
    --col_black: #212121;
    --col_blue: #0E3392;
    --col_red: #C90000;
}

/* レイアウトの根幹 */
.frames_basic,
.frames_basic__wrap,
.frames_basic__wrap a {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
}

/* コンテンツ幅760 */
.sec_inner {
    padding: 0 min(40px, calc(calc(40/750) * 100vw));
    box-sizing: border-box;
}


/* テキスト */
.txt_sec p {
    text-align: center;
    color: var(--col_black);
    font-family: var(--font-yu-gothic);
    font-size: min(28px, calc(calc(28/750) * 100vw));
    font-weight: 400;
    line-height: 1.8;
    margin: min(50px, calc(calc(50/750) * 100vw)) 0;
}
.txt_sec p span {
    font-family: var(--font-yu-gothic);
    font-size: min(28px, calc(calc(28/750) * 100vw));
}

.txt_sec p span._blue {
    color: var(--col_blue);
    font-weight: 600;
}
.txt_sec p span._red {
    color: var(--col_red);
}
.txt_sec p span._bold {
    font-weight: 600;
}
.txt_sec p span._large {
    font-size: min(36px, calc(calc(36/750) * 100vw));
    line-height: 1.5;
}
.txt_sec p span._middle {
    font-size: min(40px, calc(calc(40/750) * 100vw));
}
.txt_sec p span._regular {
    font-weight: 400;
}
.txt_sec p span._marker {
    background: rgba(255, 247, 1, 0.9);
}





/* =================================================================
   CTAエリア
   ================================================================= */
.cta_sec {
    background: url(../../images/lp-brain__ab06/cta_bg.webp) no-repeat top center / cover;
    padding: min(58px, calc(calc(58/750) * 100vw)) min(50px, calc(calc(50/750) * 100vw));
    box-sizing: border-box;
}
.cta_sec h5 {
    text-align: center;
    color: var(--col_blue);
    font-family: var(--font-noto-sans-jp);
    font-size: min(28px, calc(28 / 750) * 100vw);
    font-weight: 600;
    line-height: 1;
    margin-bottom: min(30px, calc(30 / 750) * 100vw);
}
.cta_sec--box {
    background: #fff;
    border-radius: min(20px, calc(20 / 750) * 100vw);
    padding: min(40px, calc(40 / 750) * 100vw) min(35px, calc(35 / 750) * 100vw);
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(70, 70, 95, 0.3);
    margin-bottom: min(35px, calc(35 / 750) * 100vw);
}
@media screen and (max-width: 750px) {
    .cta_sec--box {
        box-shadow: 0 0 2.67vw rgba(70, 70, 95, 0.3);
    }
}
.cta_coupon img {
    filter: drop-shadow(0 0 10px rgba(70, 70, 95, 0.4));
}


/* =================================================================
   アコーディオン（ターコイズブルー）
   ================================================================= */




/* =================================================================
   ヘッダー・ドロワーメニュー
   ================================================================= */

.nav_header {
    position: relative;
    background-color: white;
}
.nav_header .header_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding-right: min(10px, calc(10 / 750 * 100vw));
}


/* =================================================================
   FVエリア
   ================================================================= */
.fv_area {
    background: url(../../images/lp-brain__ab06/fv_bg.webp) no-repeat top center / cover;
    padding: min(58px, calc(58 / 750) * 100vw) min(50px, calc(50 / 750) * 100vw);
    box-sizing: border-box;
}
.fv_area__desc {
    margin-bottom: min(56px, calc(56 / 750) * 100vw);
}
.fv_area__access h5 {
    text-align: center;
    color: var(--col_blue);
    font-family: var(--font-noto-sans-jp);
    font-size: min(28px, calc(28 / 750) * 100vw);
    font-weight: 600;
    line-height: 1;
    margin-bottom: min(30px, calc(30 / 750) * 100vw);
}
.fv_area__access--box {
    background: #fff;
    border-radius: min(20px, calc(20 / 750) * 100vw);
    padding: min(28px, calc(28 / 750) * 100vw) min(50px, calc(50 / 750) * 100vw) min(23px, calc(23 / 750) * 100vw);
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(70, 70, 95, 0.3);
    margin-bottom: min(40px, calc(40 / 750) * 100vw);
}
@media screen and (max-width: 750px) {
    .fv_area__access--box {
        box-shadow: 0 0 2.67vw rgba(70, 70, 95, 0.3);
    }
}

.btn_cta__wrap {
    width: min(450px, calc(450 / 750) * 100vw);
    margin: 0 auto;
}
.btn_cta__wrap p {
    text-align: center;
    color: var(--col_red);
    font-family: var(--font-noto-sans-jp);
    font-size: min(22px, calc(22 / 750) * 100vw);
    font-weight: 600;
    line-height: 1;
    margin-bottom: min(13px, calc(13 / 750) * 100vw);
}


/* =================================================================
   お困りの症状を改善したい方へ
   ================================================================= */
.improvement__ttl {
    background: var(--col_red);
    text-align: center;
    color: #fff;
    font-family: var(--font-noto-sans-jp);
    font-size: min(46px, calc(46 / 750) * 100vw);
    font-weight: 500;
    line-height: 1;
    padding: min(48px, calc(48 / 750) * 100vw) 0;
}



/* =================================================================
   QEEG検査の流れ
   ================================================================= */
.toggle_contents ul.flow_step {
    margin: 0;
}
.toggle_contents .flow_step li {
    background: #fff;
    border-radius: min(20px, calc(20 / 750) * 100vw);
    box-shadow: 0 5px 12px rgba(100, 100, 100, 0.3);
    padding: min(50px, calc(50 / 750) * 100vw) min(30px, calc(30 / 750) * 100vw);
    margin-bottom: min(24px, calc(24 / 750) * 100vw);
}
@media screen and (max-width: 750px) {
    .toggle_contents .flow_step li {
        box-shadow: 0 0.67vw 1.6vw rgba(100, 100, 100, 0.3);
    }
}
.toggle_contents .flow_step li p {
    font-size: min(24px, calc(24 / 750) * 100vw)!important;
    margin: min(30px, calc(30 / 750) * 100vw) auto 0;
    padding: 0;
}


/* =================================================================
   FAQ (アコーディオン)
   ================================================================= */
section#faq .frames_basic {
    background: white;
    padding: min(80px, calc(80 / 750 * 100vw)) min(30px, calc(30 / 750 * 100vw));
}
section#faq .toggle_contents {
	width: min(690px, calc(690 / 750 *100vw));
}
#faq p {
    font-weight: 500;
    line-height: 1.6;
}

/* 質問(Q)と回答(A)の画像アイコン */
.icon_type2 .toggle_title {
    background: url(../../images/lp-brainclinic/faq__icon_q.webp) no-repeat left center / 35px;
    padding-left: 45px;
}
.toggle_contents.icon_type2 li {
    background: url(../../images/lp-brainclinic/faq__icon_a.webp) no-repeat left 5px / 35px;
    padding-left: 45px;
    list-style: none;
}

/* アコーディオンの開閉ボタン */
.col_skyblue_toggle .toggle_btn {
    background-color: var(--col_skyblue);
    border-radius: 50%;
    position: absolute;
}
.col_skyblue_toggle .toggle_btn:before, .col_skyblue_toggle .toggle_btn:after {
    background: white;
}
.large_toggle .toggle_btn {
    width: min(40px, calc(40 / 750 * 100vw));
    height: min(40px, calc(40 / 750 * 100vw));
    top: 50%;
    transform: translateY(-50%);
    right: min(24px, calc(25 / 750 * 100vw));
}
/*トグルサイズ　大き目*/
.large_toggle .toggle_btn:before {
	width: var(--toggle_bar1);
	height: var(--toggle_bar2);
}
.large_toggle .toggle_btn:after {
	width: var(--toggle_bar2);
	height: var(--toggle_bar1);
}

.toggle_btn:before {
    content: "";
    width: var(--toggle_bar1);
    height: var(--toggle_bar2);
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.toggle_btn:after {
    content: "";
    width: var(--toggle_bar2);
    height: var(--toggle_bar1);
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layout2 .toggle_bgc {
    background: var(--col_lightblue);
}
.toggle_contents.layout2 {
	background-position: -4px 30px;
}

.toggle_contents.layout2 ul {
	margin-left: min(16px, calc(16 / 750 * 100vw));
}

.toggle_contents.layout2 li {
	background-position: 0px min(28px, calc(28 / 750 * 100vw));
    padding: 4% 2%;
}

.toggle_contents.layout2 p {
	padding-left: 40px;
    margin: 0;
    text-align: left;
}



/* =================================================================
   アクセス
   ================================================================= */
/* アクセス */
section#access {
    background: white;
    padding: 40px 0;
}
section#access .frames_basic__wrap.map_wrap {
	overflow: hidden;
	padding: min(40px, calc(40 / 750 * 100vw)) min(30px, calc(30 / 750 * 100vw)) 0 min(30px, calc(30 / 750 * 100vw));
	box-sizing: border-box;
}
section#access hr {
    width: 100%;
    height: 2px;
    background: var(--col_salmonorange);
    border: none;
    margin: 30px 0;
}
section.map {
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

/* =================================================================
   LINE用フッターバナー
   ================================================================= */
.footbnr_line {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, calc(calc(700/750) * 100vw));
  z-index: 5;
  bottom: min(180px, calc(calc(180/750) * 100vw));
}

/* 閉じるボタン */
.footbnr_line_close {
  position: absolute;
  width: min(60px, calc(calc(60/750) * 100vw));
  height: min(60px, calc(calc(60/750) * 100vw));
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.7);
  top: max(-60px, calc(-1 * (calc(60/750) * 100vw)));
  right: min(5px, calc(calc(5/750) * 100vw));
  border: none;
  cursor: pointer;
  padding: 0;
}
.footbnr_line_close::before,
.footbnr_line_close::after {
  content: "";
  background-color: #fff;
  width: min(2px, calc(calc(2/750) * 100vw));
  height: min(40px, calc(calc(40/750) * 100vw));
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.footbnr_line_close::before {
  transform: rotate(45deg);
}
.footbnr_line_close::after {
  transform: rotate(135deg);
}



/* =================================================================
   フッターバナー
   ================================================================= */
/* 追尾バナー（スクロールで表示） */
.footer__bnr {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    display: flex;
    width: min(730px, calc(730 / 750 * 100vw));
}
.footer__bnr.active {
    opacity: 1;
    visibility: visible;
}
.footer__bnr a {
    flex: 1;
}
.footer__bnr img {
    width: 100%;
    height: auto;
}