@charset "UTF-8";

html {
    font-size: 62.5%;/* 1rem=10px */
}

body{
	width: 100%;
    min-width: 300px;
	margin: 0;
	padding: 0;
	border: none;
    background-color: #fffffc;
    color: #25292f;
	font-family: "Times New Roman","Yu Mincho","游明朝","YuMincho","游明朝体","MS PMincho","ＭＳ Ｐ明朝","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro",serif;
    font-size: clamp(1.2rem, calc(1rem + 0.5vw), 1.7rem);/* clamp(最小値, 推奨値, 最大値) */
}

/* ============================================
    リスト・リンクに対する指定
============================================ */
ul,
ol {/* リスト */
    list-style: none;
    margin: 0;
    padding: 0;
}
a {/* リンク */
    text-decoration: none;
    user-select: none;
}

/* ============================================
    各タイトルに対する指定
============================================ */
/* Topのタイトル */
h1 {/* 日本語・英語 */
    position: absolute;
    z-index: 1;
    width: 100%;
    margin: 0;
    text-align: center;
}

/* 基本のタイトル */
h2 {/* 日本語・英語 */
    width: 100%;
    margin: 0;
    line-height: 1;
    text-align: center;
}
h2 .en {/* 英語 */
    display: inline-block;
    width: 100%;
    color: #a59aca;
    font-size: max(12px, 0.6em);
}

/* ============================================
    パララックス
============================================ */
.parallax {/* パララックス表示する範囲 */
    width: 100%;
}
.parallax::before {/* パララックス画像 */
    position: fixed;/* 要素（背景）を固定配置 */
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../img/bg_parallax.jpg) no-repeat center / cover;/* position / sizeの順必須 */
    content: "";/* 疑似要素に必須 */
}
section {/* 各セクションの背景 */
    background-color: #fffffc;
}

/* ============================================
    ヘッダー
============================================ */
/* すべてのヘッダー */
.header_main,
.header_scroll,
.header_mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 50px;
    box-sizing: border-box;
}
/* PC用ヘッダー */
.header_main {
    position: absolute;/* ページ全体を起点とする */
    z-index: 900;
}
/* スクロール時と1024px以下の端末用のヘッダー */
.header_scroll,
.header_mobile {
    position: fixed;
    z-index: 999;
    box-shadow: 0 5px 5px -5px rgba(12,12,12,0.7);
    background-color: rgba(12,12,12,0.7);
}
/* スクロール時のヘッダー */
.header_scroll {
    opacity: 0;
    animation: scroll-anim 1s linear both;/* 1s:実際の動きに影響しないため何でもよい（1msやauto等） */
    animation-timeline: scroll();
}
/* スクロール時のアニメーション */
@keyframes scroll-anim {
    0% {/* スクロール開始から0％ */
        opacity: 0;
        translate: 0 -100%;
    }
    14% {/* スクロール開始から14％ */
        opacity: 0;
        translate: 0 -100%;
    }
    17% {/* スクロール開始から17％ */
        opacity: 1;
        translate: 0 0;
    }
    100% {/* スクロール開始から100％ */
        opacity: 1;
    }
}

/* ロゴ */
.logo_common_img {
    height: 40px;
    vertical-align: middle;
}

/* ナビゲーションメニュー */
.gnav_list {/* ul */
    display: flex;
    column-gap: 1.8em;
}
.gnav_item {/* li */
    position: relative;/* ドロップダウンの位置を決めるための基準 */
    height: 60px;
}
.gnav_link {/* a */
    position: relative;/* アンダーラインの配置を決めるための基準 */
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(12,12,12,0.4);
}

/* ホバーアニメーション */
.gnav_link::after {/* アンダーラインの描画 */
    position: absolute;/* 親要素（aタグ）を基準に配置 */
    bottom: 0;
    transform: scaleX(0);/* ホバー前X軸は0倍（幅ゼロ・見えない） */
    transform-origin: center;/* 中央を起点に拡大 */
    width: 100%;/* アンダーラインの横幅 */
    height: 2px;/* アンダーラインの高さ（太さ） */
    background-color: #a59aca;/* アンダーラインの色 */
    content: '';/* 疑似要素に必須 */
    transition-duration: 0.2s;
}
@media (any-hover: hover) {/* タッチデバイスでホバーしない */
    .gnav_link:hover {
        color: #dbd0e6;/* ホバー時の文字色 */
    }
    .gnav_link:hover::after {
        transform: scaleX(1);/* ホバー時X軸は1倍（幅100%・見える） */
    }
}

/* ドロップダウンメニュー */
.gsub_list {/* ul */
    position: absolute;/* 親要素（gnav_item）を基準に配置 */
    top: 60px;
    left: 0;
    visibility: hidden;/* デフォルトで非表示 */
    opacity: 0;
    font-size: 0.9em;
}
.gsub_item {/* li */
    background-color: rgba(12,12,12,0.7);
    width: 120px;
    padding: 0.6em;
}
.gsub_item:not(:last-child) {/* 一番下のli以外に下線を引く */
    border-bottom: 1px solid #dbd0e6;
}
.gsub_link {/* a */
    position: relative;/* 矢印の位置を決めるための基準 */
    display: flex;
    align-items: center;
    color: #fff;
}
.gsub_link::before {/* 矢印の描画 */
    position: absolute;/* 親要素（gsub_link）を基準に配置 */
    right: 0;
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #dbd0e6;
    border-right: 2px solid #dbd0e6;
    content: '';
}
.gsub_list,
.gsub_item,
.gsub_link {/* ul・li・a共通 */
    transition-duration: 0.2s;
}
@media (hover: hover) {/* タッチデバイスでホバーしない */
    .gnav_item:hover .gsub_list {
        visibility: visible;/* メニュー名にホバー時ドロップダウンメニュー表示 */
        opacity: 1;
    }
    .gsub_item:hover {
        background-color: rgba(12,12,12,0.9);/* ホバー時の背景色 */
    }
    .gsub_link:hover {
        color: #dbd0e6;/* ホバー時の文字色 */
    }
}

/* 以下の記述は1024px以下のモバイル端末用 */
.hamburger_btn {/* ハンバーガーメニュー */
    position: relative;
    display: flex;
    align-items: center;
    width: 30px;
    height: 100%;
}
.hamburger_btn span,
.hamburger_btn span::before,
.hamburger_btn span::after {/* 三本線 */
    position: absolute;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    content: '';
    transition-duration: 0.4s;
}
.hamburger_btn span::before {
    top: -10px;/* 上の線は中心から10px上に配置 */
}
.hamburger_btn span::after {
    top: 10px;/* 下の線は中心から10px下に配置 */
}
#openBtnCheck {
    display: none;/* inputの存在は消す */
}
#openBtnCheck:checked + .hamburger_btn span {/* checkboxがチェック状態の時後隣のspanに適用 */
    background-color: rgba(0, 0, 0, 0);/* 真ん中の線を透明にする */
}
#openBtnCheck:checked + .hamburger_btn span::before {/* checkboxがチェック状態の時後隣のspan::beforeに適用 */
    top: 0;/* 上の線の位置を戻す */
    transform: rotate(45deg);/* 中心を基準点に時計回りに回転する */
}
#openBtnCheck:checked + .hamburger_btn span::after {/* checkboxがチェック状態の時後隣のspan::afterに適用 */
    top: 0;/* 下の線の位置を戻す */
    transform: rotate(-45deg);/* 中心を基準点に反時計回りに回転する */
}
.mobile_nav {/* メニュー表示 */
    position: fixed;
    top: 0;
    left: 100%;/* メニューを画面外へ */
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-225deg, #a59aca, #d9ded8);
    transition-duration: 0.4s;
}
.mobile_logo,
.hamburger_btn {/* ロゴとハンバーガーメニュー */
    z-index: 10;/* メニューよりも上に */
}
#openBtnCheck:checked ~ .mobile_nav {/* checkboxがチェック状態の時後方のmobile_navに適用 */
    left: 0;/* メニューを画面内へ */
}
.mobile_list {/* ul */
    width: 90%;
    margin: 100px auto 0;
}
.mobile_item {/* li */
    border-bottom: 1px solid #fff;
}
.mobile_link {/* a */
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    box-sizing: border-box;
    color:#fff;
}
.msub_list {/* ul */
    margin: 0 0 0.5em 2em;
}
.msub_item {/* li */
    padding-top: 0.5em;
}
.msub_link {/* a */
    color: #fff;
}

/* 1024px以下では「PC用とスクロール時のヘッダー」を消す */
@media (max-width: 1024px) {
    .header_main,
    .header_scroll {
        display: none;
    }
}
/* 1025px以上では「1024px以下のモバイル端末用ヘッダー」を消す */
@media (min-width: 1025px) {
    .header_mobile {
        display: none;
    }
}