/* CSS Document */
@import url("image_fade.css");
/* sp View   ～768px  ----------------------------------------------------------------------------------------------*/
#rinen{
}
.rinen_text{
    font-size: 14px;
    width: 90%;
    display: inline-block;
    text-align: left;
    line-height: 1.5em;
}
.rinen_text strong{
    color: var(--accent-color);
}
#housin ol{
    width: 90%;
    text-align: left;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5em;
}
#housin ol li{
    margin-bottom: 1em;
}
#housin ol li span{
    display: block;
}
.symbol_text{
    width: 90%;
    max-width: 960px;
    display: inline-block;
    text-align: left;
    line-height: 1.5em;
}
.symbol_text p{
    text-align: center;
}
.symbol_text strong{
    color: var(--accent-color);
}
#symbol .img_area{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
#list_10e{
    max-width: 960px;
    margin: 1em auto;
    list-style: none;
    text-align: left;
    padding: 0;
}
#list_10e li{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0.5em;
}
#list_10e li span{
    line-height: 1.2em;
}
#list_10e li span:nth-of-type(1){
    color: #548235;
    font-size: 24px;
    display: block;
    width: 100%;
}
#list_10e li span:nth-of-type(2){
    color: #333;
    display: block;
    margin-left: 1em;
    text-align: justify;
}

#history ul{
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    text-align: left;
    padding-left: 0;
}
#history ul li{
    width: 100%;
    line-height: 1.2em;
}
#history ul li:nth-child(1){
    font-weight: bold;
    border-bottom: 1px #fff;
}
#history ul li:nth-child(2){
    margin-left: 1em;
}

#cost_menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 1.2em;
    font-weight: bold;
    color: royalblue;
    /*text-decoration: underline;*/
}
#cost1, #cost2{
    scroll-margin-top: 180px; /* ヘッダーの高さ分 */
}

#cost_menu>a{
    min-width: 100px;
    height: 120px;
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-size: contain;      /* 画像全体を表示 */
    background-position: center;  /* 中央に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    /*text-decoration: none;*/
    margin: 1em 0.5em;
    /*transition: transform 0.3s ease;*/ /* アニメーションを滑らかにする */
}
#cost_menu>a:hover{
    transform: rotate(5deg);
}
#cost_menu>a:nth-of-type(1){background-image: url("../img/admission/bk1.png")}
#cost_menu>a:nth-of-type(2){background-image: url("../img/admission/bk2.png")}
#cost_menu>a:nth-of-type(3){background-image: url("../img/admission/bk3.png")}
#cost_menu>a:nth-of-type(4){background-image: url("../img/admission/bk4.png")}
/* 共通設定 */
  /*  #subject_child, #cost1, #cost2 {*/
        /* --- 全体レイアウト --- */
        .admission_guide_root {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            color: #333;
            max-width: 900px;
            margin: 30px auto;
            padding: 0 20px;
            line-height: 1.6;
        }

        /* --- レスポンシブ用コンテナ --- */
        .table_wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 20px;
            border: 1px solid #333;
        }

        /* --- テーブル共通スタイル（PC向け） --- */
        .content_table, .guide_table {
            width: 100%;
            border-collapse: collapse;
            border-style: hidden;
        }

        .content_table td, .content_table th,
        .guide_table td, .guide_table th {
            border: 1px solid #333;
            padding: 12px 15px;
            vertical-align: middle;
            font-size: 16px;
        }

        /* --- セルの背景色・装飾 --- */
        /*.bg_accent, .guide_bg_light_blue { background-color: #add8e6; font-weight: bold; }
        .bg_accent, .guide_bg_light_blue { background-color: #6e9bc5; font-weight: bold; }*/
        .bg_accent, .guide_bg_light_blue { background-color: #bdd6ee; font-weight: bold; }
        .guide_bg_orange { background-color: #ffcc99; } /* オレンジ */
        .guide_bg_green { background-color: #c6efce; }  /* グリーン */
        .guide_bg_yellow { background-color: #ffff99; } /* イエロー */
        
        .section_title {
            font-size: 1.5em;
            font-weight: bold;
            /*text-decoration: underline;*/
            margin: 40px 0 15px;
            text-align: left;
            border-bottom: 10px solid #bdd6ee;
        }

        .guide_title_main {
            font-size: 1.4em;
            font-weight: bold;
            margin: 50px 0 20px;
        }
        .cost_note{
            font-size: 0.9em;
            color: #555;
            margin-top: 5px;
            text-align: left;
            width: fit-content;
            margin: auto;
        }

        .section_subtitle { font-weight: bold;/* margin-bottom: 10px;*/ display: block; text-align: left;}
        .text_center { text-align: center; }
        .text_underline { text-decoration: underline; }
        .font_small, .text_small { font-size: 0.9em; color: #555; margin-top: 5px; }

        .col_30 { width: 30%; }
        .col_40 { width: 40%; }
        .col_50 { width: 50%; }
        .col_60 { width: 60%; }
        .row_span_cell { font-weight: bold; background-color: #ffffff; }

        /* --- スマホ表示の最適化 --- */
        @media screen and (max-width: 600px) {
            .admission_guide_root { padding: 0 10px; margin: 10px auto; }
            .content_table td, .guide_table td {
                font-size: 12px;
                padding: 8px 4px; /* スマホではセル幅を狭める */
            }
            .section_title { font-size: 1.1em; }
        }

#cost>div{
    margin-bottom: 2em;
    text-align: left;
}
#cost .sub_title{
    color: var(--secondary-color);
    font-size: 24px;
    border-bottom: 1px var(--secondary-color) dashed;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
#cost ul,#cost li{
    /*width: fit-content;*/
    line-height: 1.5em;
}
#cost ul{
    width: fit-content;
    list-style: none;
/*    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;*/
    text-align: left;
    margin: 0 auto 1em;
    padding: 0
}
#cost ul li{
    line-height: 1.5em;
    display: flex;
    margin-right: auto;
    width: 100%;
    justify-content: flex-end;
    /*margin-bottom: 0.5em;*/
}
#cost ul li span{
    display: block;
    margin-left: 0.5em;
}
#uniforms_info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    margin-top: 1em;
    background-color: #fff;
    padding: 0.5em;
    border-radius: 6px;
}
#uniforms_info img{
    width: 120px;
    height: auto;
}
#uniforms_info div:nth-of-type(2){
    line-height: 1.5em;
    padding: 1em;
}
.uniforms_main_img img{
    width: 90%;
    height: auto;
    border-radius: 20px;
}
#uniforms_point{
    margin-top: 2em;
}
#uniforms_point > div{
    display: grid;
    grid-template-areas:
    "title"
    "img"
    "text";
    margin-bottom: 2em;
}
.uniforms_img,.slider_wrapper {
    grid-area: img;
    margin: auto;
    margin-top: 0.5em !important;
}
.uniforms_img img{
    width: 240px;       /* 幅を320pxに固定 */
    height: 240px;      /* 高さも同じ320pxにする（正方形にする） */
    border-radius: 50%; /* 角を丸くして円にする */
    object-fit: cover;  /* 画像の比率を保ったままトリミングする */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin: auto;
}
.uniforms_title{
    grid-area: title;
    display: inline-block;
    border-bottom: #aaa 5px dotted;
    /*padding: 0 1em;*/
    font-size: 24px;
    align-self: end;
}
.uniforms_title::before {
    content: "";                  /* 必須：空のコンテンツを作る */
    display: inline-block;        /* 必須：幅と高さを指定できるようにする */

    /* --- 画像の設定 --- */
    width: 30px;                  /* アイコンの幅 */
    height: 30px;                 /* アイコンの高さ */
    background-image: url("../img/admission/uniforms/icon1.png"); /* 画像のパス */
    background-size: contain;     /* 画像を枠内に収める */
    background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center;  /* 枠の中央に配置 */

    /* --- 位置の調整 --- */
    margin-right: 8px;            /* 文字との間の余白 */
    vertical-align: middle;       /* 文字に対する縦位置の基準 */
    

    /* 微調整が必要な場合（例：少し下にずらす） */
    position: relative;
    top: -6px;                    /* 上に2px、下にずらすなら正の数 */
}
.uniforms_title::after {
  content: "";
  display: inline-block;
  
  /* --- 画像の設定（別の画像を指定） --- */
  width: 16px;
  height: 16px;
  background-image: url("../img/admission/uniforms/icon2.png"); /* ここに別の画像を指定 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* --- 位置の調整（ここがポイント） --- */
  margin-left: 8px;            /* ★重要：文字の「左側」に余白を作る */
  vertical-align: middle;
  
  /* 微調整（必要な場合） */
  position: relative;
  top: 4px;
}
.uniforms_text{
    grid-area: text;
}

/*--- Tablet View ---------------------------------------------------------------------------------------------------------*/
@media (min-width: 768px){
    .rinen_text{
        width: fit-content;
        font-size: 16px;
    }
    #housin ol{
        font-size: 18px;
        width: fit-content;
    }
    #housin ol li span{
        display: inline;
    }
    #catch img{
        max-width: 960px;
        height: auto;
    }
    .symbol_text{
        width: fit-content;
    }
    .symbol_text p{
        text-align: right;
    }
    #list_10e li{
        flex-wrap: nowrap;
        align-items: center;
    }
    #list_10e li span:nth-of-type(1){
        width: auto;
    }
    #history{
        width: 640px;
        margin: 0 auto;
    }
    #history ul{
        display: flex;
        flex-wrap: nowrap;
    }
    #history ul li{
        width: auto;
    }
    #history ul li:nth-child(1){
        margin-right: 1em;
        white-space: nowrap;
    }
    #cost_menu>a{
        min-width: 200px;
        height: 120px;
    }
    #cost>div{
        width: 480px;
        margin: 2em auto;
        text-align: center;
    }
    #cost .sub_title{
        padding-left: 1em;
        text-align: left;
        border-left: 8px solid var(--secondary-color);
    }
    #cost ul{
        width: 100%;
    }
    #cost ul li{
        width: 100%;
        justify-content: flex-end;
    }
    #cost ul li span{
        width: 50%;
        display: block;
    }
    #uniforms_info{
        width: 720px;
        margin: 1em auto 4em;
        flex-wrap: nowrap;
        align-items: center;
    }
    #uniforms_info img{
        width: 240px;
    }
    
    #uniforms_point{
        /*width: auto;
        margin: 2em auto;*/
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }
    #uniforms_point > div{
        display: grid;
        gap: 10px 20px; /* 画像と文字の間隔 */

        /* 画像の幅(例:80px) | 文字の幅(残り全部) */
        grid-template-columns: 280px 680px;
        /* 横2列、縦2行の定義 */
        /*grid-template-columns: 1fr 1fr;*/ /* 左右 50%:50% */
        /*grid-template-rows: 1fr 1fr;*/    /* 上下 50%:50% */

        /* 視覚的に配置を指定（これが一番わかりやすいです） */
        grid-template-areas:
        "img title"
        "img text";
        text-align: left;
    }

    .uniforms_main_img img{
        width: auto;
        height: 480px;
    }
    .uniforms_title, .uniforms_text{
        transform: translateY(-80px);
    }

}