@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);
    --headmenu_tri: clamp(10px, calc(40 / 750 * 100vw), 40px);
    /* オリジナル用 */
    --col_black: #070707;
    --col_blue: #1933a2;
    --col_red: #f91313;
    --col_turquoise: #20a2b5;
    --font-noto-sans-jp: "Noto Sans JP", sans-serif;
}

/* レイアウトの根幹 */
.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;
}

/* 共通の余白設定 */
.gap_50 {
    gap: min(50px, calc(50 / 750 * 100vw));
}
.gap_70 {
    gap: min(70px, calc(70 / 750 * 100vw));
}

/* テキスト */
.txt_sec p {
    text-align: center;
    color: var(--col_black);
    font-family: var(--font-noto-sans-jp);
    font-size: min(32px, calc(calc(32/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-noto-sans-jp);
    font-size: min(32px, calc(calc(32/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(52px, calc(calc(52/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 {
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.4em;
    text-decoration-color: rgba(252, 255, 26, 0.9);
    text-decoration-skip-ink: none;
}

/* ターコイズグリーンのラベル */
.label_ttl {
    text-align: center;
}
.label_ttl h5 {
    display: inline-block;
    background: var(--col_turquoise);
    border-radius: 9999px;
    color: #fff;
    font-family: var(--font-noto-sans-jp);
    font-size: min(32px, calc(calc(32/750) * 100vw));
    font-weight: 400;
    line-height: 1.5;
    margin: 0 auto min(60px, calc(calc(60/750) * 100vw));
    text-align: center;
    padding: 0 min(50px, calc(calc(50/750) * 100vw));
    box-sizing: border-box; 
}



/* =================================================================
   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));
}


/* =================================================================
   アコーディオン（ターコイズブルー）
   ================================================================= */
.acc_type01 .toggle_title {
    position: relative;
    background: var(--col_turquoise);
    color: #fff;
    font-family: var(--font-noto-sans-jp);
    font-size: min(32px, calc(32 / 750) * 100vw);
    font-weight: 400;
    text-align: center;
    left: 0;
}
.acc_type01 .toggle_title::before,
.acc_type01 .toggle_title::after {
    content: "";
    width: min(4px, calc(4 / 750) * 100vw);
    height: min(30px, calc(30 / 750) * 100vw);
    background: #fff;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: min(43px, calc(43 / 750) * 100vw);
    transition: all 0.3s;
}
.acc_type01 .toggle_title::after {
    transform: rotate(90deg);
}
.acc_type01 .toggle_title.selected::before {
    transform: rotate(90deg);
    transition: all 0.3s;
}


.acc_type01 .toggle_bgc {
    background: #fff;
    border: min(2px, calc(2 / 750 * 100vw)) solid var(--col_turquoise);
    border-top: 0;
    padding: min(45px, calc(45 / 750) * 100vw) min(28px, calc(28 / 750) * 100vw);
    box-sizing: border-box;
}
.acc_type01 .toggle_bgc p {
    text-align: justify;
    font-size: min(28px, calc(28 / 750) * 100vw);
}
.acc_type01 .toggle_bgc p span {
    color: var(--col_turquoise);
    font-size: min(28px, calc(28 / 750) * 100vw);
    font-weight: 600;
}
.acc_type01 .toggle_bgc h5 {
    position: relative;
    font-family: var(--font-noto-sans-jp);
    color: var(--col_turquoise);
    font-size: min(32px, calc(32 / 750) * 100vw);
    font-weight: 600;
    line-height: 1;
    padding-left: min(20px, calc(20 / 750) * 100vw);
}
.acc_type01 .toggle_bgc h5::before {
    content: "";
    width: min(6px, calc(6 / 750) * 100vw);
    height: 100%;
    background: var(--col_turquoise);
    position: absolute;
    left: 0;
    top: 0;
}
/* アコーディオン内のリストボックス（脳波の詳細） */
.acc_type01__listbox {
    border: min(3px, calc(3 / 750) * 100vw) solid #6bbfcb;
    border-top-width: min(10px, calc(10 / 750) * 100vw);
    padding: min(48px, calc(48 / 750) * 100vw) min(25px, calc(25 / 750) * 100vw);
    box-sizing: border-box;
}
.acc_type01 .toggle_bgc .acc_type01__listbox h5 {
    font-size: min(26px, calc(26 / 750) * 100vw);
    margin-bottom: min(20px, calc(20 / 750) * 100vw);
}
.acc_type01 .toggle_bgc .acc_type01__listbox h5::before {
    content: "";
    background: #8fcce6;
    width: min(10px, calc(10 / 750) * 100vw);
    height: min(16px, calc(16 / 750) * 100vw);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    margin: auto;
    top: 0;
    bottom: 0;
}
.acc_type01 .toggle_bgc .acc_type01__listbox p {
    color: #252525;
    font-size: min(23px, calc(23 / 750) * 100vw)!important;
    line-height: 1.7;
    padding: 0;
    margin: 0 auto min(30px, calc(30 / 750) * 100vw);
}
.acc_type01 .toggle_bgc .acc_type01__listbox ul {
    margin: 0;
}
.acc_type01 .toggle_bgc .acc_type01__listbox ul li {
    background: none;
    padding: 0;
}
.acc_type01 .toggle_bgc .acc_type01__listbox ul li:not(:last-child) {
    border-bottom: 1px solid #dcd9db;
    margin-bottom: min(38px, calc(38 / 750) * 100vw);
}

/* アコーディオン内のテキストボックス */
.acc_type01__inbox {
    background: #e7f5f7;
    padding: min(45px, calc(45 / 750) * 100vw) min(25px, calc(25 / 750) * 100vw);
    box-sizing: border-box;
}
.acc_type01 .toggle_bgc .acc_type01__inbox p {
    color: #252525;
    font-size: min(23px, calc(23 / 750) * 100vw);
    line-height: 1.7;
    margin: min(24px, calc(24 / 750) * 100vw) auto;
}
.acc_type01 .toggle_bgc .acc_type01__inbox p span {
    color: #252525;
    font-size: min(19px, calc(19 / 750) * 100vw);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto;
    display: inline-block;
}
.acc_type01 .toggle_bgc .acc_type01__inbox h5 {
    font-size: min(26px, calc(26 / 750) * 100vw);
}
.acc_type01 .toggle_bgc .acc_type01__inbox h5::before {
    content: "";
    width: min(10px, calc(10 / 750) * 100vw);
    height: min(16px, calc(16 / 750) * 100vw);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    margin: auto;
    bottom: 0;
}




/* =================================================================
   ヘッダー・ドロワーメニュー
   ================================================================= */
nav .head__menu__list {
	background-color: white;
	height: 100vh;
}
nav li:has(.cta) {
	padding: min(50px, calc(50 / 750 * 100vw)) min(30px, calc(30 / 750 * 100vw)) min(50px, calc(50 / 750 * 100vw)) min(30px, calc(30 / 750 * 100vw));
	border-bottom: none;
}

/*SP：ドロワーメニューの下部に余白をつくる*/
nav li:has(.sp) {
	padding-bottom: min(300px, calc(300 / 750 * 100vw));
	border-bottom: none;
}

.nav_header {
    background-color: white;
}
.nav_header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #000;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); */
}
/*
@media screen and (max-width: 750px) {
    .nav_header::after {
        box-shadow: 0 0.4vw 1.33vw rgba(0, 0, 0, 0.5);
    }
}
    */

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

/* ハンバーガーメニュー */
@media screen and (min-width: 641px) {
	header .head__menu {
		width: calc(100% + 1px);
	}
}

header .head__menu-inner {
	margin-top: 0;
	/* margin-bottom: 0; */
}

header .head__menu__item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	background-color: #fff;
}

header .head__menu__item:before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	border-left: var(--headmenu_tri) solid transparent;
	border-bottom: var(--headmenu_tri) solid skyblue;
	bottom: clamp(1px, calc(3 / 750 * 100vw), 3px);
	right: clamp(1px, calc(8 / 750 * 100vw), 8px);
}

header .head__menu__item a {
	display: flex;
	align-items: center;
	width: 100%;
	padding: min(20px, calc(calc(20 / 750) * 100vw));
	font-weight: 600;
}
header .head__menu__item a span {
	font-size: min(32px, calc(32 / 750) * 100vw);
	color: #333;
	font-family: var(--font-yu-gothic);
	margin-left: min(20px, calc(20 / 750 * 100vw));
}
.lp_humberger-nav a:hover {
    background: rgba(135, 206, 235, 0.1);
    opacity: 1;
}

.lp_humberger-nav ul {
    background: white;
    padding-bottom: min(50px, calc(50 / 750 * 100vw));
}
.lp_humberger-nav li {
    border-bottom: 1px solid var(--col_skyblue);
    background-color: white;
}

.head__menu__item {
    display: flex;
    align-items: center;
    background-color: #fff;
}
.head__menu__item a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: min(20px, calc(20 / 750) * 100vw);
    font-weight: 600;
    text-decoration: none;
}
.head__menu__item a span {
    font-size: min(32px, calc(32 / 750) * 100vw);
    color: #333;
    margin-left: min(20px, calc(20 / 750 * 100vw));
}
.head__menu__item .c-icon__wrap {
	width: min(64px, calc(64 / 750 * 100vw));
	height: min(64px, calc(64 / 750 * 100vw));
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 0.5em;
}
.head__menu__item .c-icon__wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 768px) {
	header .head__menu__item a {
		font-size: min(32px, calc(calc(32 / 750) * 100vw));
	}
}

@media screen and (max-width: 750px) {
	.lp_humberger-nav ul {
		padding-bottom: min(50px, calc(50 / 750 * 100vw));
	}
}

@media screen and (max-width: 500px) {
	.c-icon__wrap--small img {
		width: 80%;
	}
}

/* ハンバーガーメニュー内CTAボタン調整 */
.lp_humberger-nav .btn_cta__wrap {
    width: 80%;
}
.lp_humberger-nav .btn_cta__wrap p {
    font-size: min(26px, calc(26 / 750) * 100vw);
}
.lp_humberger-nav .btn_cta__wrap a {
    padding: 0;
}
.lp_humberger-nav .btn_cta__wrap a img {
    width: 100%;
}



/* =================================================================
   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;
}