@charset "UTF-8";

/*************************************************************************************************************************
* reset  ※既存プロジェクトの common.css より流用
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll; font-size: 62.5%;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}
button{ cursor: pointer; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; }


/*************************************************************************************************************************
* リキッドの基準単位
*
*   デザインの 1px = var(--u) として、すべてのサイズを calc(●● * var(--u)) で書く。
*   例）font-size: calc(14 * var(--u));   width: calc(335 * var(--u));
*
*   PC  : 1400px 基準（デザイン layout.pdf のアートボード幅）
*   SP  :  375px 基準
*   ブレイクポイント 979px
*************************************************************************************************************************/
:root{
	--u: calc(100vw / 1400);			/* PC：画面幅に対して完全リキッド */
}
/*
@media screen and (min-width: 1920px){
	:root{ --u: calc(1920 / 1400 * 1px); }	 大画面での拡大しすぎを防止 
}
*/
@media screen and (max-width: 979px){
	:root{ --u: calc(100vw / 375); }		/* SP：375px 基準 */
}


/*************************************************************************************************************************
* カラー / 共通変数
*************************************************************************************************************************/
:root{
	--c-navy:    #006a82;	/* 濃いティール（見出し・テーブル見出し・フッター） */
	--c-teal:    #008ba9;	/* ティール */
	--c-cyan:    #00bfd0;	/* シアン（テーブル項目） */
	--c-orange:  #f97700;	/* オレンジ（アクセント・FAQ） */
	--c-orange2: #fc831b;	/* オレンジ（帯） */
	--c-pink:    #ec4285;	/* ピンク（奨学金） */
	--c-pink-l:  #f35a9d;	/* ピンク（装飾） */
	--c-green:   #6bbb6e;	/* グリーン（バッジ） */
	--c-yellow:  #fff103;	/* 蛍光イエロー（マーカー） */
	--c-cream:   #fffad9;	/* クリーム（背景） */
	--c-gray:    #dae2e6;	/* グレーブルー（背景） */
	--c-txt:     #1a1a1a;

	--bp: 979px;			/* ブレイクポイント（JS と合わせる） */
}


/*************************************************************************************************************************
* 共通ユーティリティ
*************************************************************************************************************************/
body{
	font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
	font-weight: 500;
	color: var(--c-txt);
	text-align: left;
	background-color: #fff;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
}

/* SPメニュー展開中のスクロール固定（JS: scrollBlocker() と対） */
body.is-fixed{
	position: fixed;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.sp-only{ display: none !important; }
.sp-only-2{ display: none !important; }
.pc-only{ display: block !important; }
.pc-only-2{ display: inline-block !important; }

@media screen and (max-width: 979px){
	.sp-only{ display: block !important; }
	.sp-only-2{ display: inline-block !important; }
	.pc-only{ display: none !important; }
	.pc-only-2{ display: none !important; }
}

/* 画像の仮枠 --------------------------------------------------------------
   画像は別途 export 予定のため、いまは枠だけ表示しています。
   画像を common/img/ に配置したら class="ph" を外してください。            */
.ph{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;	/* 個別の比率は style.css 末尾で指定 */
	background: repeating-linear-gradient(-45deg, #eee 0 6px, #f7f7f7 6px 12px);
	outline: 1px dashed #b5b5b5;
	outline-offset: -1px;
	font-size: calc(10 * var(--u));
	line-height: 1.4;
	color: #999;
}


/*************************************************************************************************************************
*
*  共通エリア（全ページ共通）
*
*   ・ヘッダー / SPメニュー / フッター
*   ・ページの外枠（PC固定背景 ＋ スマホ幅のスクロールカラム）
*
*   下層ページを作る場合は common.css だけで、この外枠が再現できます。
*   ページ固有の中身は css/style.css 側に置いてください。
*
*************************************************************************************************************************/


/*************************************************************************************************************************
* header
*************************************************************************************************************************/
.l-header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(70 * var(--u));
	background-color: #fff;
	z-index: 100;
}
.l-header__inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 calc(25 * var(--u));
}
.l-header__logo{
	width: calc(212 * var(--u));
	font-size: 0;
	line-height: 0;
}
.l-header__logo > a{
	display: block;
}
.l-header__logo img{ height: auto; }

/* ハンバーガー */
.l-header__navtrg{
	position: relative;
	width: calc(20 * var(--u));
	height: calc(16 * var(--u));
	z-index: 210;
}
.l-header__navtrg span{
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(2 * var(--u));
	background-color: #1a1a1a;
	transition: all .35s ease;
}
.l-header__navtrg span:nth-of-type(1){ top: 0; }
.l-header__navtrg span:nth-of-type(2){ top: 50%; margin-top: calc(-1 * var(--u)); }
.l-header__navtrg span:nth-of-type(3){ bottom: 0; }
.l-header__navtrg.is-active span:nth-of-type(1){ top: 50%; transform: rotate(-45deg); }
.l-header__navtrg.is-active span:nth-of-type(2){ opacity: 0; }
.l-header__navtrg.is-active span:nth-of-type(3){ bottom: auto; top: 50%; transform: rotate(45deg); }

@media screen and (max-width: 979px){
	.l-header__inner{ padding: 0 calc(20 * var(--u)); }
	.l-header__logo{ width: calc(163 * var(--u)); }
}


/* flex ボックスの中で <br> を効かせる */
.l-side__btn, .sp-nav__btn{
	flex-wrap: wrap;
	align-content: center;
	text-align: center;
}
.l-side__btn br, .sp-nav__btn br{
	flex-basis: 100%;
	width: 100%;
	height: 0;
}


/*************************************************************************************************************************
* stage（PC：固定背景 ＋ 右側スクロールカラム）
*************************************************************************************************************************/
.l-stage{
	position: relative;
	padding-top: calc(70 * var(--u));
	overflow: hidden;
}

/* --- PC固定背景 ------------------------------------------------------- */
.l-stage__bg{
	position: fixed;
	top: calc(70 * var(--u));
	left: 0;
	width: 100%;
	height: calc(100vh - 70 * var(--u));
	background-color: #fff9cd;
	/* 方眼の背景（画像に差し替える場合はこの background-image を削除してください） */
	background-image:
		repeating-linear-gradient(to right, #f4e5ab 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(30 * var(--u))),
		repeating-linear-gradient(to bottom, #f4e5ab 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(30 * var(--u)));
	z-index: 1;
	overflow: hidden;
}

.l-side{
	position: relative;
	width: 100%;
	height: 100%;
}
.l-side__inner { position: absolute; top: 50%; transform: translateY(-50%) scale(0.95); left: calc(98 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; width: calc(722 * var(--u)); aspect-ratio: 722/705; transition: transform 0.4s; }

/* タイトル */
.l-side__title { text-align: center; }
.l-side__title img { width: calc(583 * var(--u)); }

/* 入試方式を選ぶ／ボタン群 */
.l-side__nav{
	width: calc(361 * var(--u));
}
.l-side__nav__ttl{
	display: flex;
	align-items: center;
	margin-bottom: calc(13 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	color: var(--c-navy);
}
.l-side__nav__ttl img {
	width: calc(350 * var(--u));
}

.l-side__btns { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, calc(63 * var(--u))); grid-column-gap: calc(10 * var(--u)); grid-row-gap: calc(10 * var(--u));  }
.l-side__btns img { width: auto; height: calc(39 * var(--u)); }
.l-side__btn{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 calc(6 * var(--u)); background-color: #fff; border: 1px solid var(--c-navy); border-radius: calc(5 * var(--u)); transition: background-color .4s ease, color .4s ease; }
.l-side__btn span{ font-size: calc(13 * var(--u)); }
.l-side__btn:hover{ background-color: var(--c-navy); color: #fff; }

.l-side__pill {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: calc(50 * var(--u));
	margin-top: calc(41 * var(--u));	/* 20（区切り線まで）＋ 21 */
	background-color: #fff;
	border-radius: calc(25 * var(--u));
	transition: background-color .4s ease, color .4s ease;
}
.l-side__pill img { width: auto; height: calc(21 * var(--u)); }
.l-side__btn:hover img,
.l-side__pill:hover img { filter: brightness(0) invert(1); }


/* 区切り線 */
.l-side__pill::before{
	position: absolute;
	top: calc(-20 * var(--u));
	left: 0;
	width: 100%;
	height: calc(1 * var(--u));
	background-color: #a4a4a4;
	content: "";
}
.l-side__pill--pink{ border: 1px solid var(--c-pink); color: var(--c-pink); }
.l-side__pill--pink:hover{ background-color: var(--c-pink); }
.l-side__pill--orange{ border: 1px solid var(--c-orange); color: var(--c-orange); }
.l-side__pill--orange:hover{ background-color: var(--c-orange); color: #fff; }

/* 装飾イラスト */
.l-side__illust{
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(323 * var(--u));
}

/* 右端の縦組みコピー */
.l-stage__catch{
	position: absolute;
	left: calc(1310 * var(--u));
	top: calc(60 * var(--u));
	width: calc(33 * var(--u));
}
.l-stage__entry { position: absolute; right: calc(20 * var(--u)); bottom: calc(20 * var(--u)); width: calc(105 * var(--u)); aspect-ratio: 1/1; }

/* --- スクロールカラム（スマホ幅） -------------------------------------- */
.l-main{
	position: relative;
	width: calc(375 * var(--u));
	margin-left: calc(874 * var(--u));
	background-color: #fff;
	font-size: calc(14 * var(--u));
	line-height: 1.8;
	z-index: 2;
	box-shadow: 0 0 calc(5 * var(--u)) rgba(126,107,46,0.5);
}

@media screen and (max-width: 979px){
	.l-main{
		width: 100%;
		margin-left: 0;
	}
}


/*************************************************************************************************************************
* SPメニュー
*************************************************************************************************************************/
.sp-nav{
	position: fixed;
	top: calc(70 * var(--u));
	left: 0;
	width: 100%;
	height: calc(100% - 70 * var(--u));
	padding: calc(20 * var(--u));
	background-color: var(--c-navy);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
	z-index: 90;
}
.sp-nav.is-active{ opacity: 1; visibility: visible; }

.sp-nav__inner{
	padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
	background-color: #fff;
	border-radius: calc(10 * var(--u));
}
.sp-nav__ttl{
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(50 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-radius: calc(25 * var(--u));
	font-size: calc(18.73 * var(--u));
	font-weight: 900;
	letter-spacing: .05em;
	color: var(--c-navy);
}
.sp-nav__btns{
	display: flex;
	flex-wrap: wrap; justify-content: space-between; 
	gap: calc(8 * var(--u));
	margin-top: calc(10 * var(--u));
}
.sp-nav__btns > li { width: calc(50% - 4 * var(--u)); }
.sp-nav__btn{
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: calc(40 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-radius: calc(20 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: var(--c-navy);
}
.sp-nav__btn span{ font-size: calc(11 * var(--u)); }

.sp-nav__pill{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(56 * var(--u));
	margin-top: calc(42 * var(--u));
	border-radius: calc(28 * var(--u));
	font-size: calc(18 * var(--u));
	font-weight: 900;
	letter-spacing: .04em;
}
.sp-nav__pill::before{
	position: absolute;
	left: 0;
	top: calc(-21 * var(--u));
	width: 100%;
	border-top: 2px dotted rgba(94,119,133,0.3);
	content: "";
}
.sp-nav__pill--pink{ border: calc(2 * var(--u)) solid var(--c-pink); color: var(--c-pink); }
.sp-nav__pill--orange{ border: calc(2 * var(--u)) solid var(--c-orange); color: var(--c-orange); }

.sp-nav__logo { margin: calc(24 * var(--u)) auto 0; padding-top: calc(21 * var(--u)); border-top: 2px dotted rgba(94,119,133,0.3); text-align: center; }
.sp-nav__logo img { width: calc(212 * var(--u)); }
.sp-nav__address{
	margin-top: calc(14 * var(--u));
	font-size: calc(11 * var(--u));
	line-height: 1.63;
	text-align: center;
	color: #666;
}
.sp-nav__sns{
	display: flex;
	justify-content: center;
	gap: calc(12 * var(--u));
	margin-top: calc(15 * var(--u));
}
.sp-nav__sns li{ width: calc(33 * var(--u)); }


/*************************************************************************************************************************
* footer
*************************************************************************************************************************/
.l-footer{ padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); background-color: var(--c-navy); text-align: center; color: #fff; overflow: hidden; }
.l-footer__logo{
	width: calc(251 * var(--u));
	margin: 0 auto;
}
.l-footer__address{ margin-top: calc(17 * var(--u)); font-size: calc(13 * var(--u)); font-style: normal; line-height: 1.53; }
.l-footer__address a{ color: #fff; }

.l-footer__sns{
	display: flex;
	justify-content: center;
	gap: calc(14 * var(--u));
	margin-top: calc(24 * var(--u));
}
.l-footer__sns li{ width: calc(40 * var(--u)); }

.l-footer__copy{ position: relative; 
	margin-top: calc(48 * var(--u));
	font-family: 'Lato', sans-serif;
	font-size: calc(12 * var(--u));
	line-height: 1.7;
}
.l-footer__copy::before { position: absolute; top: calc(-20 * var(--u)); left: 50%; transform: translateX(-50%); display: block; width: 100vw; height: calc(1 * var(--u)); background: #fff; content: ""; }


@media (hover: hover) and (pointer: fine) and (max-width: 1366px) and (max-height: 700px) {
	.l-side__inner { transform: translateY(-50%) scale(0.85); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 980px) and (max-aspect-ratio: 4/3) {
	.l-side__inner { align-items: center; }
	.l-side__nav { width: calc(583 * var(--u)); }
	.l-side__pill { width: calc(583 * var(--u) / 2); }
	.l-side__illust { right: calc(100 * var(--u)); bottom: calc(-60 * var(--u)); width: calc(583 * var(--u) / 3); pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 980px) and (max-aspect-ratio: 6/5) {
	.l-side__inner { transform: translateY(-75%) scale(1); }
	.l-side__illust { position: relative; }
	.l-side__pill { width: 100%; }
	.l-side__illust { position: absolute; bottom: calc(-350 * var(--u)); right: 50%; transform: translateX(50%); width: calc(273 * var(--u)); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 980px) and (min-aspect-ratio: 6/5) {
	.l-side__inner { transform: translateY(-50%) scale(0.9); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1920px) and (min-aspect-ratio: 16/9) {
	.l-side__inner { transform: translateY(-50%) scale(0.8); }
}