@charset "UTF-8";

/* =========================================
   大枠のベース設定
========================================= */
#subpage {
    position: relative;
    /* ヘッダーの裏に潜らないように上部を空ける */
    padding-top: 60px; 
    padding-bottom: 100px;
    
    /* 最低でも画面いっぱいの高さを確保し、中身を中央に配置 */
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    
    
    background-image: url("/images/subpage/bg_section.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
  	font-family: "fot-udkakugo-large-pr6n", sans-serif;
	font-weight: 400;
    color: #333;
}

/* =========================================
   中央のコンテンツ枠（白い背景部分）
========================================= */
#subpage .subpage__content {
    position: relative;
    margin: auto;

    width: min(85%, 1200px, calc((100vh - 180px) * 16 / 9));
    width: min(85%, 1200px, calc((100dvh - 180px) * 16 / 9));
    
    aspect-ratio: 16 / 9; 
    
    background-image: url("/images/subpage/sec_bg.webp");
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================================
   タイトル画像（プライバシーポリシー）
========================================= */
#subpage .subpage__heading {
    position: absolute;
    /* 枠の上部からの位置（%指定にすることで拡大縮小してもズレない） */
    top: -6%; 
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
	max-width: 600px;
    margin: 0;
    z-index: 10;
}
#subpage .subpage__heading img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   スクロールするテキストエリア
========================================= */
#subpage .outline {
    position: absolute;
    top: 15%;    
    bottom: 12%; 
    left: 10%;   
    right: 10%;  
    overflow: hidden;
}

#subpage .subpage__text {
    width: 100%;
    height: 100%;
    /* auto ではなく scroll にすることで、短い文章でも常にスクロールバーの軌道を出す */
    overflow-y: scroll; 
    padding: 0 20px;
    box-sizing: border-box; 
    
    text-align: left;
    
    /* Firefox用の設定 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* =========================================
   スクロールバーのカスタマイズ（Chrome, Safari, Edge用）
========================================= */
/* スクロールバー全体の幅 */
#subpage .subpage__text::-webkit-scrollbar {
    width: 8px;
}
/* スクロールバーの軌道（背景） */
#subpage .subpage__text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3); /* 座布団になじむ薄い白 */
    border-radius: 4px;
}
/* スクロールバーの動く部分（つまみ） */
#subpage .subpage__text::-webkit-scrollbar-thumb {
    background: rgba(95, 71, 58, 0.5); /* 文字色（#5f473a）の半透明版 */
    border-radius: 4px;
}
/* ホバー時（マウスを乗せた時）のつまみの色 */
#subpage .subpage__text::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 71, 58, 0.8); 
}



/* =========================================
   テキストの装飾
========================================= */
#subpage .subpage__text h2 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 1.5rem;
}
#subpage .subpage__text h3.subpage__text-head {
    margin-top: 2rem;
    margin-bottom: 0.3rem;
    font-size: 1.0em;
    font-weight: bold;
}
#subpage .subpage__text .subpage__text-block p {
    font-size: 0.9em;
    line-height: 1.8;
    margin-bottom: 1em;
    font-weight: 500;
}
#subpage .subpage__text .subpage__text-end {
    margin-top: 0.5rem;
    text-align: right;
    font-size: 0.9em;
}
#subpage .subpage__text a {
    text-decoration: underline;
    color: #0056a8; 
}

#subpage .subpage__content .totop {
    position: absolute;
    bottom: -4%; 
    left: 50%;
    transform: translateX(-50%); /* これで完璧に中央寄せになります */
    z-index: 20; /* テキストより上に表示されるようにする */
    
    /* PCでのボタンの基本サイズ */
    width: 250px; 
    cursor: pointer;
    transition: transform 0.2s ease;
}
#subpage .subpage__content .totop img {
    width: 100%;
    height: auto;
    display: block;
}
#subpage .subpage__content .totop:hover {
    transform: translateX(-50%) scale(1.05);
}


/* =========================================
   フッター
========================================= */
#subpage .subpage__foot-logo {
    display: none; 
}

/* フッターは absolute で画面最下部に固定するか、親の構成に合わせて調整 */
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    background: #000;
    z-index: 100;
}
#footer .footer__links {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 13px;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
}
#footer .footer__links a {
    color: #fff;
    text-decoration: underline;
}
#footer .footer__links a:hover {
    color: #aaa;
}
#footer .footer__c {
    color: #fff;
    font-size: 11px;
    margin-top: 10px;
    letter-spacing: 0.05em;
    text-align: center;
}


/* =========================================
   スマホ用調整（画面幅768px以下）
========================================= */
@media (max-width: 768px) {
    #subpage {
        padding-top: 50px; 
        padding-bottom: 100px;
    }
    #subpage .subpage__content {
        width: 95%; /* スマホでは横幅いっぱいに */
        margin: 30px auto auto auto;
        /* スマホだと16:9だと縦が足りなくなるため、少し縦長のアスペクト比に変更するか Auto にする */
        aspect-ratio: 4 / 5;

        max-height: calc(100vh - 250px);
        max-height: calc(97dvh - 200px);
        
        background-size: cover; /* スマホ用の背景画像がある場合はそれに合わせる */
    }
    #subpage .subpage__heading {
        top: -4%;
        width: 85%;
    }
    #subpage .outline {
        top: 15%;
        bottom: 5%;
        left: 5%;
        right: 5%;
    }
    #subpage .subpage__text {
        padding: 0 10px;
    }
    #subpage .subpage__text .subpage__text-end {
        margin-top: 0.5rem;
        text-align: right;
        font-size: 0.75em;
    }
    #subpage .subpage__text a {
        text-decoration: underline;
        color: #0056a8; 
    }
    #subpage .subpage__text h2 { font-size: 1.1em; }
    #subpage .subpage__text h3.subpage__text-head { font-size: 0.9rem; }
    #subpage .subpage__text .subpage__text-block p { font-size: 0.80rem; }

    #subpage .subpage__content .totop {
        width: 180px; /* スマホでは少し小さく */
        bottom: calc(-1 * (50px + 15px));
    }



    #footer { 
        height: auto; 
        padding: 12px 0; /* 👈 上下の余白を少し詰めてさらにスリムに */
    }
    #footer .footer__links { 
        display: flex;
        flex-direction: row; /* 👈 縦並びから横並びベースに戻す */
        flex-wrap: wrap;     /* 👈 収まらない分を折り返す指示 */
        justify-content: center;
        align-items: center;
        gap: 8px 0;          /* 👈 上下の段の間にだけ少し隙間を作る（上段と下段の間隔） */
        font-size: 0.8rem;
    }
    #footer .footer__links li { 
        width: 50%;          /* 👈 各リンクの幅を50%にして、2個並んだら自動で折り返すようにする */
        text-align: center;  /* 👈 左右中央寄せにする */
        font-size: 0.75rem;  /* 👈 スマホ用に文字サイズも気持ち小さく調整（お好みで） */
        line-height: 1.4;    /* 👈 行間を詰めて高さを削減 */
    }

}






/* =========================================
   タブレット専用調整（画面幅 769px 〜 1024px）
========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    #subpage {
        padding-top: 130px; 
        padding-bottom: 100px;
    }
    #subpage .subpage__content {
        width: 85%; 
        aspect-ratio: 4 / 3;
        margin: 50px auto auto auto;
        max-height: calc(100vh - 290px);
        max-height: calc(100dvh - 290px);
    }
    #subpage .subpage__heading {
        width: 55%;
        top: -45px;
    }
    #subpage .outline {
        top: 12%; /* 座布団内のテキストエリアも微調整 */
        bottom: 8%;
    }

    #subpage .subpage__content .totop {
        width: 200px;
    }



    #subpage .subpage__text h2 { font-size: 1.3em; }
    #subpage .subpage__text h3.subpage__text-head { font-size: 1.0em; }
    #subpage .subpage__text .subpage__text-block p { font-size: 0.85em; }
}