@charset "UTF-8";

/*************************************************************************************************************************
*
*  人間情報学部 入試ガイド LP
*
*  ■ 設計メモ
*   ・すべてのサイズは リキッド単位 var(--u) で指定しています（common.css で定義）
*       PC : 1400px 基準 ／ SP : 375px 基準 ／ ブレイクポイント 979px
*       例）font-size: calc(14 * var(--u));  ＝ デザイン上の 14px
*
*   ・共通エリア（ヘッダー / SPメニュー / フッター / ページの外枠）は
*     common/css/common.css に置いています。このファイルはページ固有の中身のみ。
*
*   ・構造
*       .l-header      … 上部固定ヘッダー（PC / SP 共通）      → common.css
*       .l-stage
*          .l-stage__bg … PCのみ。画面に固定される背景          → common.css
*          .l-main      … スマホ幅（375）のスクロール領域       → common.css
*       .sp-nav        … SPのハンバーガーメニュー              → common.css
*       .l-footer      … フッター                            → common.css
*
*   ・画像は別途 export 予定のため、いまは class="ph" の仮枠で入れています。
*
*************************************************************************************************************************/


/* flex ボックスの中で <br> を効かせる（共通エリア分は common.css） */
.type-tab__btn, .method-tab__btn,
.card__bubble, .fv__lead__banner, .access__balloon{
	flex-wrap: wrap;
	align-content: center;
	text-align: center;
}
.type-tab__btn br, .method-tab__btn br,
.card__bubble br, .fv__lead__banner br, .access__balloon br{
	flex-basis: 100%;
	width: 100%;
	height: 0;
}


/*************************************************************************************************************************
* FV
*************************************************************************************************************************/
.fv__inner{
	position: relative;
	height: calc(630 * var(--u));
	background-color: var(--c-cream);
	/* ドットの背景（画像に差し替える場合はこの background-image を削除してください） */
	background-image: radial-gradient(#f4e5ab calc(1.2 * var(--u)), transparent calc(1.2 * var(--u)));
	background-size: calc(8 * var(--u)) calc(8 * var(--u));
	overflow: hidden;
}

.fv__badge { position: absolute; left: calc(20 * var(--u)); top: calc(20 * var(--u)); display: block; width: calc(208 * var(--u)); z-index: 3; }

.fv__ttl{ position: absolute; left: calc(20 * var(--u)); top: calc(82 * var(--u)); width: calc(325 * var(--u)); z-index: 3; }
.fv__kansai{
	position: absolute;
	left: calc(264 * var(--u));
	top: calc(150 * var(--u)); width: calc(84 * var(--u));
	z-index: 4;
}
.fv__catch{ position: absolute; left: 50%; transform: translateX(-50%); top: calc(320 * var(--u)); width: calc(39 * var(--u)); z-index: 3; }
.fv__entry{ position: fixed; right: calc(20 * var(--u)); bottom: calc(30 * var(--u)); display: block; width: calc(80 * var(--u)); aspect-ratio: 1/1; z-index: 4; }/* transition: all .3s ease;*/
.fv__entry img{  }
/*
.fv__entry:hover{ transform: scale(1.05); }
*/
.fv__deco { position: absolute; z-index: 2; }
.fv__deco--drone { top: calc(250 * var(--u)); left: calc(27 * var(--u)); width: calc(165 * var(--u)); aspect-ratio: 165/48; }
.fv__deco--ufo { top: calc(345 * var(--u)); left: calc(23 * var(--u)); width: calc(75 * var(--u)); aspect-ratio: 75/41; }
.fv__deco--turtle { top: calc(415 * var(--u)); left: calc(56 * var(--u)); width: calc(104 * var(--u)); aspect-ratio: 104/122; }
.fv__deco--boy { right: 0; bottom: 0; width: calc(202 * var(--u)); aspect-ratio: 202/258; }


/* --- リード（ティール帯） --- */
.fv__lead{
	position: relative;
	z-index: 3;
	padding: calc(45 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
	background-color: var(--c-teal);
	text-align: center;
}
.fv__lead__banner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(-16 * var(--u)); display: block; width: calc(335 * var(--u)); aspect-ratio: 335/53; }


.fv__lead__txt { text-align: center; }
.fv__lead__txt img { width: calc(190 * var(--u)); }
.fv__lead__illust { position: absolute; right: calc(12 * var(--u)); bottom: 0; width: calc(90 * var(--u)); }


/*************************************************************************************************************************
* セクション共通
*************************************************************************************************************************/
.sec{ padding: calc(38 * var(--u)) calc(20 * var(--u)) calc(42 * var(--u)); }
.sec--admission{ background-color: var(--c-gray); }
.sec--scholarship{ background-color: var(--c-cream); }
.sec--faq{ background-color: var(--c-gray); padding-bottom: calc(40 * var(--u)); }
.sec--access{ background-color: var(--c-gray); padding-top: 0; }

.sec__head{ text-align: center; }
.sec__icon{ width: calc(49 * var(--u)); aspect-ratio: 49/44; margin: 0 auto calc(3 * var(--u)); }
.sec__ttl{ font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.315; letter-spacing: .15em; text-indent: .15em; color: #1a1a1a; }
.sec__ttl__en { display: block; margin-top: calc(2 * var(--u)); font: 700 calc(10 * var(--u)) 'Lato', sans-serif; line-height: 1.5; letter-spacing: .22em; text-indent: .22em; color: var(--c-teal);
}
.sec__catch{ margin-top: calc(18 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--c-navy); }
.sec__catch em{ font-style: normal; color: var(--c-orange); }
.sec__lead{ margin-top: calc(16 * var(--u)); padding-top: calc(16 * var(--u)); border-top: calc(1 * var(--u)) solid var(--c-navy); font-size: calc(14 * var(--u)); line-height: 1.5714; text-align: center; }

/* 奨学金セクションの見出し色 */
.sec--scholarship .sec__ttl__en{ color: var(--c-pink); }
.sec--scholarship .sec__catch{ color: var(--c-green); }
.sec--scholarship .sec__catch em{ color: var(--c-pink); }
.sec--scholarship .sec__lead{ border-top-color: var(--c-pink); }

/* FAQセクションの見出し色 */
.sec--faq .sec__ttl__en{ color: var(--c-orange); }
.sec--faq .sec__catch{ color: var(--c-orange); }
.sec--faq .sec__catch em{ color: var(--c-teal); }
.sec--faq .sec__lead{ border-top-color: var(--c-orange); }

/* 注釈 */
.note{
	margin-top: calc(7 * var(--u));
	font-size: calc(9.5 * var(--u));
	line-height: 1.6;
}
.note-list{ margin-top: calc(10 * var(--u)); }
.note-list li{ margin-bottom: calc(5 * var(--u)); padding-left: calc(11 * var(--u)); text-indent: calc(-11 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.4; color: var(--c-navy); }
.note-mark { font-size: 60%; vertical-align: super; }

/* 黄色マーカー */
.marker{
	background: linear-gradient(transparent 55%, var(--c-yellow) 55%);
}


/*************************************************************************************************************************
* 入試方式：第1階層タブ
*************************************************************************************************************************/
.type-tab__lead{ margin-top: calc(23 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: .02em; text-align: center; color: var(--c-orange); }

.type-tab__nav{ display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)) calc(5 * var(--u)); margin-top: calc(6 * var(--u)); }
.type-tab__btn{ display: flex; justify-content: center; align-items: center; width: calc(165 * var(--u)); height: calc(40 * var(--u)); background-color: #fff; border: calc(1 * var(--u)) solid var(--c-navy); font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1.5; text-align: center; color: var(--c-navy); transition: background-color .3s ease, color .3s ease; }
.type-tab__btn:hover{ background-color: rgba(0,106,130,.1); }
.type-tab__btn.is-active{ background-color: var(--c-navy); color: #fff; }

/* パネル */
.type-tab__body{ margin-top: calc(22 * var(--u)); }
.type-panel{ display: none; }
.type-panel.is-active{ display: block; animation: fadeIn .4s ease; }

@keyframes fadeIn{
	from{ opacity: 0; transform: translateY(calc(8 * var(--u))); }
	to  { opacity: 1; transform: translateY(0); }
}


/*************************************************************************************************************************
* 入試方式：カード
*************************************************************************************************************************/
.card { position: relative;
	padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
	background-color: #fff;
	border-radius: calc(5 * var(--u));
	box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.06);
}

.card__ttl{
	position: relative;
	padding-bottom: calc(12 * var(--u));
	border-bottom: calc(2 * var(--u)) solid var(--c-navy);
	font-size: calc(25 * var(--u)); font-weight: 900;
	line-height: 1.32;
	letter-spacing: .04em;
	color: var(--c-navy);
	z-index: 2;
}
.card__ttl::before { position: absolute; top: 50%; transform: translateY(-63%); right: calc(-20 * var(--u)); display: block; width: calc(82 * var(--u)); aspect-ratio: 1/1; background: url("../img/boom_heigan.svg") no-repeat center/contain; content: ""; z-index: 5; }
.card__bubble{
	position: absolute;
	right: calc(10 * var(--u));
	top: calc(-14 * var(--u));
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(88 * var(--u));
	height: calc(88 * var(--u));
	background-color: var(--c-pink-l);
	border-radius: 50%;
	font-size: calc(10 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	z-index: 5;
}

/* こんな受験生にオススメ */
.card__reco { position: relative; display: inline-block; margin-top: calc(15 * var(--u)); z-index: 2; }
.card__reco img { width: auto; height: calc(46 * var(--u)); }
.card__reco--taller img { height: calc(72 * var(--u)); }
.card__reco::before { position: absolute; display: block; width: calc(66 * var(--u)); aspect-ratio: 1/1; background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; content: ""; }
#type01 .card__reco::before { top: calc(-61 * var(--u)); right: calc(-8 * var(--u)); width: calc(82 * var(--u)); background-image: url("../img/deco_type_1.svg"); aspect-ratio: 82/81; }
#type01 .card__ttl::before { display: none; }
#type02 .card__reco::before { top: calc(-46 * var(--u)); right: calc(45 * var(--u)); background-image: url("../img/deco_type_2.svg"); }
#type03 .card__reco::before { top: calc(-46 * var(--u)); right: calc(-14 * var(--u)); background-image: url("../img/deco_type_3.svg"); }
#type03 .card__ttl { letter-spacing: -0.03em; }
#type04 .card__reco::before { top: calc(-46 * var(--u)); right: calc(55 * var(--u)); background-image: url("../img/deco_type_4.svg"); }

.card__reco__label{
	display: block;
	width: fit-content;
	padding: calc(2 * var(--u)) calc(8 * var(--u));
	background-color: var(--c-yellow);
	font-size: calc(11 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
}
.card__reco__txt{
	display: inline;
	margin-top: calc(4 * var(--u));
	padding: calc(3 * var(--u)) calc(7 * var(--u));
	background-color: var(--c-navy);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-size: calc(19 * var(--u));
	font-weight: 900;
	line-height: 1.85;
	letter-spacing: .01em;
	color: #fff;
}

/* 注目ポイント */
.point-ttl { position: relative; width: fit-content; margin: calc(20 * var(--u)) auto calc(20 * var(--u)); padding: 0 calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: .04em; color: var(--c-navy); }
.point-ttl__txt { position: relative; z-index: 10; }
.point-ttl::before { position: absolute; bottom: calc(-4 * var(--u)); left: 50%; transform: translateX(-50%); width: 100%; height: calc(7 * var(--u)); background: var(--c-yellow); content: ""; z-index: 0; }
.point-ttl::after { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(-12 * var(--u)); width: calc(10 * var(--u)); height: calc(1 * var(--u)); background-color: var(--c-navy); content: ""; }
.point-list{  }
.point-list li{
	position: relative;
	padding-left: calc(14 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 700;
	line-height: 1.67;
}
.point-list li::before{
	position: absolute; left: 0; top: calc(5 * var(--u));
	border-style: solid;
	border-width: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(9.6 * var(--u));
	border-color: transparent transparent transparent var(--c-orange);
	content: "";
}
.point-list__note{ font-size: calc(11 * var(--u)); font-weight: 500; }


/*************************************************************************************************************************
* 入試方式：第2階層タブ（総合型選抜入試の中）
*************************************************************************************************************************/
.method-tab{ margin-top: calc(9 * var(--u)); }

.method-tab__lead { position: relative; display: flex; justify-content: center; align-items: center; height: calc(20 * var(--u)); background-color: var(--c-orange2); border-radius: calc(10 * var(--u)); padding-bottom: calc(2 * var(--u));; font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .02em; color: #fff; }
.method-tab__lead::after { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; border-style: solid; border-width: calc(6 * var(--u)) calc(3.5 * var(--u)) 0 calc(3.5 * var(--u)); border-color: var(--c-orange2) transparent transparent transparent; content: ""; }

.method-tab__nav { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: calc(40 * var(--u)); grid-column-gap: calc(5 * var(--u)); grid-row-gap: 0px; margin-top: calc(12 * var(--u)); }
.method-tab__btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%; height: 100%;
	background-color: #fff;
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-bottom: none;
	border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0;
	font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1.3;
	text-align: center;
	color: var(--c-navy);
	transition: background-color .3s ease, color .3s ease;
}
.method-tab__btn.is-active{
	background-color: var(--c-navy);
	color: #fff;
}

.method-panel{ display: none; }
.method-panel.is-active{ display: block; }


/*************************************************************************************************************************
* テーブル
*************************************************************************************************************************/
.tbl{
	width: 100%;
	border-collapse: separate;
	border-spacing: calc(3 * var(--u));
	background-color: var(--c-navy);
	padding: calc(5 * var(--u));
	font-size: calc(11.5 * var(--u));
	line-height: 1.65;
}
.tbl th,
.tbl td{
	padding: calc(7 * var(--u)) calc(7 * var(--u));
	vertical-align: middle;
}
.tbl td{ background-color: #f7f2e2; }
.tbl th{ font-weight: 700; text-align: center; }

.tbl__th--navy{ background-color: var(--c-navy); color: #fff; }
.tbl__th--cyan{ background-color: var(--c-cyan); color: #fff; }
.tbl__th--v{ width: calc(72 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.4; }
.tbl__th--s{ width: calc(44 * var(--u)); font-size: calc(11 * var(--u)); }

.tbl--method{ border-top: none; }

.tbl--method th {  }
.tbl--method td{ font-size: calc(11.5 * var(--u)); }

.tbl--schedule{ margin-top: calc(20 * var(--u)); font-size: calc(11 * var(--u)); text-align: center; }
.tbl--schedule td{ font-weight: 700; text-align: center; white-space: nowrap; }
.tbl--schedule .tbl__th--cyan{ width: calc(70 * var(--u)); font-size: calc(11 * var(--u)); }
.tbl--schedule .tbl__td--exam{ white-space: normal; }

.tbl--subject th{ width: calc(58 * var(--u)); }
.tbl--subject td{ text-align: left; }
.tbl__td--pattern{ width: calc(96 * var(--u)); text-align: center !important; font-weight: 700; }
.tbl__td--exam{ text-align: center !important; font-weight: 700; }

.tbl--pattern{ text-align: center; }
.tbl--pattern td{ text-align: center; font-weight: 700; }
.tbl--pattern th:first-child{ width: calc(54 * var(--u)); }

.adms-tbl-wrap { margin-top: calc(10 * var(--u)); }
.adms-tbl {  }
.adms-tbl+.adms-tbl { margin-top: calc(13 * var(--u)); }
.adms-tbl__ttl { margin-bottom: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; line-height: 1.3; color: var(--c-navy); }
.adms-tbl__ttl sup { font-size: 60%; }
.adms-tbl__ttl::before { content: "\025a0"; margin-right: calc(2 * var(--u)); }
.adms-tbl__img {  }
.adms-tbl__notice { margin-top: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; line-height: 1.3; color: var(--c-navy); }

/* 横スクロール（狭い端末での保険） */
.tbl-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }


/*************************************************************************************************************************
* 奨学金・特待生制度
*************************************************************************************************************************/
.sch{ margin-top: calc(22 * var(--u)); }

.sch__item { padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); background-color: #fff; border-radius: calc(5 * var(--u)); box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(126,107,46,.4); overflow: hidden; }
.sch__item+.sch__item { margin-top: calc(20 * var(--u)); }
.sch__label { display: flex; justify-content: center; align-items: center; width: 100%; height: calc(25 * var(--u)); background-color: var(--c-pink); border-radius: 0 0 calc(8.5 * var(--u)) calc(8.5 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.sch__label img { width: auto; height: calc(12 * var(--u)); }
.sch__ttl{
	padding: calc(13 * var(--u)) 0 calc(10 * var(--u));
	border-bottom: calc(2 * var(--u)) solid var(--c-pink);
	font-size: calc(25 * var(--u));
	font-weight: 900;
	line-height: 1.35;
	color: var(--c-pink);
}
.sch__txt { margin-top: calc(9 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.6; }

.sch__content { margin-top: calc(18 * var(--u)); }
.sch__content._has-max { position: relative; }
.sch__content._has-max::before { position: absolute; top: calc(-10 * var(--u)); left: calc(-5 * var(--u)); display: block; width: calc(40 * var(--u)); aspect-ratio: 40/18; background: url("../img/sch_max.svg") no-repeat center/contain; content: ""; }
/* 免除額バッジ */
.sch__badge{
	display: flex;
	align-items: center;
	margin-top: calc(12 * var(--u));
}
.sch__badge__green{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(94 * var(--u));
	padding: calc(8 * var(--u)) calc(4 * var(--u));
	background-color: var(--c-green);
	font-size: calc(13 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: #fff;
}
.sch__badge__green::after{
	position: absolute;
	right: calc(-9 * var(--u));
	top: 50%;
	margin-top: calc(-8 * var(--u));
	border-style: solid;
	border-width: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(9 * var(--u));
	border-color: transparent transparent transparent var(--c-green);
	content: "";
}
.sch__badge__max{
	position: absolute;
	left: calc(-4 * var(--u));
	top: calc(-10 * var(--u));
	padding: 0 calc(5 * var(--u));
	background-color: var(--c-yellow);
	font-size: calc(10 * var(--u));
	color: #1a1a1a;
	transform: rotate(-6deg);
}
.sch__badge__txt{
	flex: 1;
	padding-left: calc(16 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: .01em;
}
.sch__badge__txt em{ font-style: normal; font-size: calc(20 * var(--u)); color: var(--c-orange); }

/* 採用人数 */
.sch__num{
	display: flex;
	align-items: center;
	margin-top: calc(12 * var(--u));
	padding: calc(7 * var(--u)) calc(10 * var(--u));
	background-color: #fce4ec;
}
.sch__num__ttl{
	width: calc(74 * var(--u));
	padding-right: calc(10 * var(--u));
	border-right: calc(1 * var(--u)) solid var(--c-pink);
	font-size: calc(12 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--c-pink);
}
.sch__num__txt{
	flex: 1;
	padding-left: calc(10 * var(--u));
	font-size: calc(10 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--c-pink);
}

/* POINT */
.sch__point-wrap { margin-top: calc(2 * var(--u)); }
.sch__point { display: flex; align-items: flex-start; padding: calc(14 * var(--u)) 0; }
.sch__point + .sch__point { border-top: 2px dotted var(--c-pink); }
.sch__point:last-of-type { padding-bottom: 0; }
.sch__point dt { width: calc(42 * var(--u)); }

.sch__point dd { flex: 1; margin-top: calc(-3 * var(--u)); margin-left: calc(8 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.6; letter-spacing: -0.04em; text-align: justify; }
.sch__point dd em{ font-style: normal; font-weight: 700; color: var(--c-pink); }
.sch__point ._lsless { letter-spacing: -0.1em; }
.sch__amount { margin-top: calc(12 * var(--u)); }

/*************************************************************************************************************************
* FAQ（アコーディオン）
*************************************************************************************************************************/
.faq__list { margin-top: calc(28 * var(--u)); }
.faq__item { background-color: #fff; border-radius: calc(5 * var(--u)); overflow: hidden; }
.faq__item+.faq__item { margin-top: calc(15 * var(--u)); }
.faq__q{
	position: relative;
	padding: calc(13 * var(--u)) calc(44 * var(--u)) calc(13 * var(--u)) calc(53 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--c-orange);
	cursor: pointer;
}
.faq__q__icon { position: absolute; left: calc(16 * var(--u)); top: 50%; transform: translateY(-50%); display: block; width: calc(25 * var(--u));}
.faq__q__icon .cls-1 { fill: transparent; }
.faq__q__icon .cls-2 { fill: var(--c-orange); }
.faq__q:hover{ background-color: #fff8f0; }
/* ＋ / − アイコン */
.faq__q__cross { position: absolute; right: calc(18 * var(--u)); top: 50%; transform: translateY(-50%); display: block; width: calc(12 * var(--u)); aspect-ratio: 1/1; }
.faq__q__cross::before,
.faq__q__cross::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; transition: .4s; display: block; background: var(--c-orange); content: ""; }
.faq__q__cross::before { width: 100%; height: calc(2 * var(--u)); }
.faq__q__cross::after { height: 100%; width: calc(2 * var(--u)); }
.faq__q .marker{ background: linear-gradient(transparent 58%, #ffe9a0 58%); }

/* 縦棒（＋の縦線）は疑似要素を1つしか使えないため span で実装せず、背景で表現 */
.faq__q {  }
.faq__q.is-open { background-color: var(--c-orange); color: #fff; }
.faq__q.is-open .faq__q__icon .cls-2 { fill: #fff; }
.faq__q.is-open .faq__q__cross::before,
.faq__q.is-open .faq__q__cross::after { background-color: #fff; }
.faq__q.is-open .faq__q__cross::after { height: 0; }
.faq__q.is-open .marker { background: linear-gradient(transparent 58%, #f74000 58%); }

.faq__a{ position: relative; margin: 0; padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(50 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; line-height: 1.8; text-align: justify; }
.faq__a::before{
	position: absolute;
	left: calc(13 * var(--u));
	top: calc(20 * var(--u));
	width: calc(25 * var(--u)); aspect-ratio: 1/1; background: url("../img/ico_a.svg") no-repeat center/contain; content: "";
}
.faq__a__note{ display: inline; color: var(--c-navy); }


/*************************************************************************************************************************
* アクセス
*************************************************************************************************************************/
.sec--access{ padding-bottom: calc(40 * var(--u)); }
.sec--access .sec__head{ padding-top: calc(30 * var(--u)); border-top: calc(1 * var(--u)) solid #9bb4bc; }
.sec--access .sec__ttl__en{ color: var(--c-teal); }
.access__badge { width: calc(124 * var(--u)); aspect-ratio: 124/133; margin: calc(37 * var(--u)) auto 0; }
.access__txt{ text-align: center; margin-top: calc(14 * var(--u)); }
.access__txt img { width: calc(234 * var(--u)); }

.access__btn { position: relative; display: flex; justify-content: center; align-items: center; width: calc(295 * var(--u)); height: calc(40 * var(--u)); background-color: var(--c-navy); margin: calc(25 * var(--u)) auto 0; border: calc(2 * var(--u)) solid var(--c-navy); font-size: calc(12 * var(--u)); font-weight: 900; letter-spacing: .2em; color: #fff; transition: all .3s ease; }
.access__btn::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: calc(100% - 5px); height: calc(100% - 5px); border: 1px solid #fff; content: ""; }
.access__btn::after{
	position: absolute;
  right: calc(16 * var(--u));
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: calc(4 * var(--u));;
  height: calc(4 * var(--u));;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  content: "";
	
}
.access__btn:hover{  color: #fff; }

@media screen and (min-width: 980px){
	.fv__entry { display: none; }
}

/*************************************************************************************************************************
* 画像仮枠の目安比率
*
*  width / height 属性は liquid レイアウト／HTML5 の推奨に合わせて付けていません。
*  画像を common/img/ に配置したら、common.css の .ph とあわせて
*  このブロックごと削除してください。
*************************************************************************************************************************/
.l-header__logo .ph,
.sp-nav__logo .ph			{ aspect-ratio: 212 / 30; }
.l-footer__logo .ph			{ aspect-ratio: 250 / 40; }
/*.l-side__title { aspect-ratio: 583 / 291; }*/
.l-stage__catch .ph			{ aspect-ratio: 80 / 560; }
.fv__ttl .ph				{ aspect-ratio: 335 / 150; }
.fv__catch .ph				{ aspect-ratio: 70 / 230; }
.fv__illust .ph				{ aspect-ratio: 375 / 560; }
.sec--access .sec__icon .ph	{ aspect-ratio: 46 / 52; }