@charset "UTF8";
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');

/* Reset */
*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;      
} 

a{
        text-decoration: none;
}

ul{
        list-style-type: none;
}

/* Custom Properties */
:root{
        --cmn_bg_color:#5a544b;         /* 共通背景色：海松茶 mirucha */
        --cmn_font_color:#d1cfc6;       /* 共通文字色：象牙色 zouge-iro */
        --base_font_color:#433d3c;      /* ベース文字色：檳榔子染 binrouzi-zome */
       
        --layer_one:#b3ada0;            /* 地層色_１：利休白茶 rikyu-shirocha */
        --layer_two:#a58f86;            /* 地層色_2：胡桃染 kurumi-zome */
        --layer_tree:#887f7a;           /* 地層色_3：煤色 susu-iro */

        --btn_color_active:#69821b;     /* ボタン(primary/活性)：苔色 koke-iro */
        --btn_color_inactive:#93b881;   /* ボタン(primary/非活性)：柳染 yanagi-zome */
        --btn_color_sub:#949495;        /* ボタン(secondary)：錫色 鼠色 nezumi-iro */

        
        /*--sub_bg_color:#d3cbc6;          sub背景色：枯野色 kareno-iro */
        /*--sub_bg_color:#dcd3b2;          sub背景色：砂色 suna-iro */
        --sub_bg_color:#fbfaf5;         /* sub背景色：生成り色 kinari-iro */

}

/* Responsive design */
@media screen and (min-width:375px){
    h2{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    header{
        padding: 20px;
    }

}
@media screen and (min-width:768px){
    h2{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    header{
        padding: 25px;
    }
 }

@media screen and (min-width:960px){
    h2{
        margin-top: 50px;
        margin-bottom: 50px;
    }
    header{
        padding: 30px;
    }
}

body{
        background-color: var(--cmn_bg_color);  /* 共通背景色 */
}

/* h2：章 */
h2{
        font-size: clamp(30px,3.2vw,36px);
        letter-spacing: 0.1em;           ;/* 文字間 */ 
        font-family: "Times New Roman", "Times", serif; /* フォント指定 */  
}

/* h3：節 */
h3{
        color: var(--base_font_color);          /* タイトル文字色 */ 
        margin-top: 10px;                       /* 外側の余白 */

        /* =================================================
        フォント:『Times New Roman』
        　イギリスの新聞「The Times」のために開発
          セリフ体フォント/英語の論文やドキュメントなどに
        ===================================================*/
        font-family: "Times New Roman", "Times", serif; /* フォント指定 */ 
        font-weight: lighter;                           /* フォント細身 */ 
        letter-spacing: 0.05em;                         /* 文字間 */ 
        font-size: clamp(12px,3.2vw,20px);              /* 12px:スマホサイズ、22pxPCサイズ */ 

}

p{
   font-size: clamp(14px,3.2vw,20px);  
   font-family: "Times New Roman", "Times", serif; /* フォント指定 */    
}

td{
   font-size: clamp(14px,3.2vw,20px);  
}

/* ===============================
ヘッダー
=================================*/
header{
        background-color: var(--cmn_bg_color);  /* 共通背景色 */
        
        text-align: center;                     /* 要素を水平方向に中央揃え */
        position: sticky;                       /* 位置固定 */
        top: 0;                                 /* 固定場所：上部 */
        font-weight: bold;                      /* 太字 */
        z-index: 100;                           /* sliderよりも手前に表示 */
}
.header_container{
        max-width: 900px;       /* 要素領域 ※HOMEは全て900pxで統一 */
        margin: 0 auto;         /* 要素を中央揃え */
        height: 100%;           /* 高さ */
}
header nav ul{
        display: flex;                  /* 横並び */
        justify-content: space-around;  /* 均等割 */
}
header a{
        color: var(--cmn_font_color);                   /* 共通文字色 */
        font-family: "Helvetica Neue" , Helvetica;      /* フォント指定 */
        letter-spacing: 0.1em;                          /* 文字間 */
}

/* ===============================
フッター
=================================*/
footer{
    background-color: var(--cmn_bg_color);      /* 共通背景色 */
    color: var(--cmn_font_color);               /* 共通文字色 */
    padding: 10px;                              /* 内側の余白 */
    text-align: center;                         /* 行センター */

}