/* -------------------------------------------------- */
/* 汎用設定 */
/* -------------------------------------------------- */

/* カラーパレット */
:root {
--bk:#666;
--bl:#4f9fcd;
--ye:#fff7dc;
--re:#dc554c;
--or:#ffedd2;
--or-2:#fc9f11;
--pi:#fff1f1;
--wh:#fff;
}

/* 文字色 */
.bl-txt { color:var(--bl); }
.red-txt { color:var(--re); }

/* よく使う設定あらかじめ */
.back-config::before, .back-config::after { content:''; }
.back-config, .back-config::before, .back-config::after { background-position:center; background-repeat:no-repeat; background-size:contain; display:inline-block; }
.event-none { pointer-events:none; }
.flex.flex-column { flex-direction:column; }

/* コンテンツまとめて */
.contents { padding:0 20px; margin-bottom:120px; }

/* 画像見出しまとめて */
.img-title img { margin:auto; max-height:64px; height:100%; height:auto; max-width:auto; }

/* 見出し */
.midashi-general { color:var(--bl); font-size:20px; font-weight:700; line-height:160%; margin-bottom:8px; }
.about-us h2.img-title, .initiative h2.img-title, .store-info h2.img-title, .kakari h2.img-title, .student h2.img-title, .info h2.img-title { margin-bottom:40px; }

/* テキスト */
.contents p, .contents li, .contents dt, .contents dd, .contents time, .contents address { font-size:14px; line-height:160%; }

/* ボタン */
.link-more a, a.info-link, a.oubo-link { aspect-ratio:196/54; background-image:url('../img/recruit/button-details-ov.png'); display:inline-block; margin:auto; height:54px; width:196px; }
a.info-link { background-image:url('../img/info/button-more-ov.png'); }
a.oubo-link { background-image:url('../img/recruit/oubo-ov.png'); }
.link-more a img, a.info-link img, a.oubo-link img { aspect-ratio:196/54; opacity:1; transition:.3s; height:54px; width:196px; }
.link-more a:hover img, a.info-link:hover img, a.oubo-link:hover img { opacity:0; transition:.3s; }

/* 560px以上で背景出現処理 */
@media( min-width:561px ) { html { background-attachment:fixed; background-image:url('../img/bg.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; } } 

@container( min-width:561px ) {

/* コンテンツまとめて */
.contents { padding:0 40px; }

/* メイン固定はここから */
main { background-color:var(--wh); position:fixed; overflow-y:scroll; top:0; left:50%; transform:translateX(-50%); scroll-behavior:smooth; height:100vh; width:560px; z-index:100; }

/* テキスト */
.contents p, .contents li, .contents dt, .contents dd, .contents time, .contents address { font-size:16px; }

}

@container( min-width:1000px ) {

/* メイン固定はここから */
main { top:0; left:50%; transform:translateX(-50%); height:100vh; }
div.deco-1, div.deco-2, div.deco-3, div.deco-4 { position:absolute; z-index:1; }

/* デコレーション01 */
div.deco-1 { aspect-ratio:333/158; background-image:url('../img/deco/fv-deco-01.png'); top:100px; right:2.5vw; height:158px; width:333px; }
div.deco-2 { aspect-ratio:326/282; background-image:url('../img/deco/fv-deco-02.png'); top:70vh; right:5vw; height:282px; width:326px; }
div.deco-3 { aspect-ratio:151/126; background-image:url('../img/deco/fv-deco-03.png'); transform:translateY(-50%); top:50vh; left:-10px; height:151px; width:126px; }
div.deco-4 { aspect-ratio:52/56; background-image:url('../img/deco/fv-deco-04.png'); transform:translateX(-360px); top:70vh; left:50%; height:52px; width:56px; }

}

/* -------------------------------------------------- */
/* フォント設定 */
/* -------------------------------------------------- */

/* ベース */
html, body, h1, h2, h3, h4, p, ul li, dt, dd, table tr td, time, address {
color:var(--bk);
font-family:"Zen Maru Gothic", sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:400;
text-align:justify;
}

/* -------------------------------------------------- */
/* ヘッダ */
/* -------------------------------------------------- */

/* ベース */
header { background-color:rgba(255,255,255,0.85); display:flex; flex-direction:column; overflow:hidden; transition:.3s; position:fixed; top:0; height:0px; width:100vw; z-index:9999; }

/* スマホ版は見えない */
header h1 { display:none; }

/* お問い合わせリンクバナー */
header p a img { margin:auto; height:100px; max-width:245px; width:100%; }
header p a { aspect-ratio:245/100; background-image:url('../img/nav/contact-ov.png'); opacity:1; height:100px; width:100%; }
header p a:hover img { opacity:0; transition:.3s; }
header p a:hover { opacity:1; transition:.3s; }

/* コピーライト */
p.copy { font-size:12px; font-weight:400; line-height:32px; margin-top:80px; }

@container( min-width:1000px ) {

/* ベース */
header { align-items:center; background-color:transparent; box-sizing:border-box; justify-content:center; transition:0s; position:fixed; top:0; right:calc(50% + 280px); left:0; max-height:100%; height:100%; width:auto; }

/* PC版は見える */
header h1 { display:block; }

/* タイトルロゴ */
header h1 img { aspect-ratio:178/145; height:145px; width:178px; }

}

@media( min-width:1000px ) and ( max-height:876px ) {

/* タイトルロゴ */
header h1 img { transform:translateY(20px); height:100px; width:auto; }

}

/* -------------------------------------------------- */
/* ナビゲーション */
/* -------------------------------------------------- */

/* ハンバーガーアイコン */
nav.gnav label { aspect-ratio:1/1; align-items:center; cursor:pointer; justify-content:center; position:fixed; top:10px; right:20px; height:40px; width:40px; z-index:10000; }
span.gnav__icon { display:block; position:relative; height:30px; width:30px; }
span.gnav__line, span.gnav__line::before, span.gnav__line::after { background-color:var(--bk); border-radius:3px; display:inline-block; transition:.3s; position:absolute; left:0; height:3px; width:100%; }
span.gnav__line { top:50%; transform:translateY(-50%); }
span.gnav__line::before, span.gnav__line::after { content:''; }
span.gnav__line::before { top:-8px; }
span.gnav__line::after { top:8px; }

/* 動かす */
.gnav__cb:checked + .gnav__btn .gnav__line { background-color:transparent; transition:.3s; }
.gnav__cb:checked + .gnav__btn .gnav__line::before { top:0; transform:rotate(45deg); transition:.3s; }
.gnav__cb:checked + .gnav__btn .gnav__line::after { top:0; transform:rotate(-45deg); transition:.3s; }

/* ナビメニュー本体 */
ul.gnav__list { align-items:center; gap:42px; justify-content:flex-start; padding-top:60px; margin-bottom:40px; width:100%; }
ul.gnav__list li { font-size:17px; font-weight:700; display:flex; justify-content:flex-start; max-width:150px; width:100%; }
ul.gnav__list li a { display:block; text-align:left; }

/* 展開 */
header:has(.gnav__cb:checked) { transition:.3s; height:100%; }

@container( min-width:1000px ) {

/* ハンバーガーアイコン */
nav.gnav label { display:none; }

/* ナビメニュー本体 */
ul.gnav__list { background-color:transparent; position:static; height:auto; width:auto; }
ul.gnav__list li a:hover { text-decoration:underline; }

}

@media( min-width:1000px ) and ( max-height:876px ) {

/* ナビメニュー本体 */
ul.gnav__list { gap:20px; }

}

/* -------------------------------------------------- */
/* ページャー */
/* -------------------------------------------------- */

#pagenation{text-align:center;}#pagenation #pagenation-list{display:inline-block;}#pagenation:after{content:".";display:block;clear:both;height:0;visibility:hidden;}#pagenation #pagenation-list li{float:left;background:none;list-style:none;padding:0;margin:0 5px 5px 0;}#pagenation #pagenation-list li:last-child{margin-left:0;}#pagenation #pagenation-list a,#pagenation #pagenation-list span{background:none;display:block;margin:0;padding:6px 11px;font-size:12px;line-height:1.5;text-align:center;}#pagenation #pagenation-list .current{background:#F59E00;color:#FFFFFF;}#pagenation #pagenation-list .omit{padding:6px 2px;color:#666666;}#pagenation #pagenation-list li a{background:#5CA0CF;color:#FFFFFF;text-decoration:none;}#pagenation #pagenation-list a:hover{background:#F59E00;color:#FFFFFF;text-decoration:none;}