@charset "utf-8";
/*==================================================
カラーパレット
===================================*/

body{
    /*基本配色*/
    --base-color-white:#e8e8e8;
    --base-color-black:#3d3d3d;
    --theme-color-pale:#c0d8cc;
    --theme-color-middle:#7e9c7c;
    --theme-color-dark:#546953;
    --accent-color-yellow:#d5a153;
    --accent-color-red:rgb(213,105,83);
    /*色が共通のパーツ*/
    --header-background:var(--base-color-white);
    --main-background:var(--base-color-white);
    --footer-background:var(--base-color-white);
    --link-button:var(--base-color-black);
    --link-button-hover:var(--accent-color-yellow);
    --container-header:var(--theme-color-dark);
}

/*========= サブメニュー用CSS ================*/
@media screen and (max-width: 767px){ 
   
    nav.sub-nav ul li:last-child{
      width: 100%;
    }

}

/*========= レイアウトのためのCSS ===============*/

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
}

.container-cource{
    width: 100%;
    padding: 1.5em;
    display: flex;
}

.container-cource-header{
    width: 20%;
    color: #e8e8e8;
    background-color: var(--container-header);
    margin-right: 5%;
    border-radius: 10px;
    position: relative;
    text-align: center;
}

.container-cource-header>h1{
   margin-top: 1.5em;
}

.container-cource-header-last{
    width: 20%;
    color: #e8e8e8;
    background-color: var(--container-header);
    margin-right: 5%;
    border-radius: 10px;
    text-align: center;
}

.container-cource-header-last>h1{
    margin-top: 1.5em;
}

.container-cource-header::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 30px solid transparent; /* 左側を透明にすることで三角形を作成 */
    border-right: 30px solid transparent; /* 右側も透明にする */
    border-top: 30px solid #e8e8e8; /* 三角形の色を設定 */
    bottom: -40px; /* 矢印を下方向にオフセット */
    left: 50%; /* 横方向中央に配置 */
    transform: translateX(-50%); /* 中央寄せ */
}

.container-cource-body{
    width: 80%;
}

.container-cource-body > p{
    padding-bottom: 0.5em;
    font-size: 16px;
}

.container-cource-img-container > img{
    object-fit: contain;
    height: 200px;
}

.info-container{
    padding: 3em;
    padding-bottom: 0;
}

.info-container-header{
    background-color: var(--container-header);
    font-weight: bold;
    color: #e8e8e8;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    padding: 1em;
}

.info-container-body{
    background-color: #e8e8e8;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: center;
    padding: 1.5em;
}

.info-container-body>div>ul>li>label::after{
    content: "：";
}

/*=========タブレット用 レイアウトのためのCSS ===============*/
@media screen and (max-width: 1199px){

    .container-cource-header-container{
        display: flex;
        align-items: center;
        display: none;
    }
    
    /* .container-cource-header>h1{
        margin-top: 0;
    } */
    .container-cource-header-last>h1{
        /* margin-top: 0; */
        padding-top: 5%;
    }

    .container-teacher-wrapper{
        padding: 3%;
    }

    .container-cource-header::after {
      top: 105%;
    }

    .teacher-container{
        background-color: #e8e8e8;
        border-radius: 10px;
        width: calc(50% - 8px);
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-bottom: 20px;
        text-align: center;
    }

    .apply-container{
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .price-container{
        width: calc(50% - 20px);
    }
}

@media screen and (max-width:1024px) {

    .container-cource-header-container{
        display: flex;
        align-items: center;
    }

    .container-cource-header::after{
        content: "";
        position: absolute; /* 絶対位置指定 */
        top: 50%; /* 上下中央に配置 */
        right: -20px; /* 右側に配置 */
        left: 105%;
        border: solid transparent;
        border-width: 20px;
        border-left-color:#e8e8e8;
        transform: translateY(-50%); /* 上下中央に配置 */
    }
    
}


/*=========スマートフォン用 レイアウトのためのCSS ===============*/

@media screen and (max-width: 767px) {
    
    .container-cource-header-container{
        display: block;
    }

    .container-cource{
        display: block;
    }

    .container-cource-header{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12.5%;
    }

    .container-cource-header::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 30px solid transparent; /* 左側を透明にすることで三角形を作成 */
        border-right: 30px solid transparent; /* 右側も透明にする */
        border-top: 30px solid #e8e8e8; /* 三角形の色を設定 */
        bottom: -40px; /* 矢印を下方向にオフセット */
        top:107.5%;
        left: 50%; /* 横方向中央に配置 */
        transform: translateX(-50%); /* 中央寄せ */
    }

    .container-cource-header-last{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .container-cource-body{
        width: 100%;
    }

    .container-cource-img-container{
        text-align: center;
    }

    .container-teacher-wrapper{
        padding: 3%;
    }
    .teacher-container{
        width: 100%;
    }

    .container-apply-wrapper{
        padding: 3%;
    }

    .apply-container{
        width: 100%;
    }

    .price-container{
        width: 100%;
    }

    .info-container{
        width:100%;
        padding: 0;
        margin-top: 5%;
    }

    .flex-to-block{
        display: block;
    }
}

/*========= 極小スマートフォン用 レイアウトのためのCSS ===============*/

@media screen and (max-width: 280px){

    .apply-container{
        white-space: normal;
    }

    .apply-container-header{
        white-space: normal;
    }

    .price-container-header{
        white-space: normal;
    }

}

/*========= プリントレイアウトのためのCSS ===============*/
@media print and (max-width:767px) {
    nav.sub-nav ul{
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
    }
    nav.sub-nav ul li{
        width: 50%
    }  

    .container-cource-header{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12.5%;
    }

    .container-cource-header-last{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12.5%;
    }

    .container-cource{
        display: block;
    }

    .container-cource-body{
        width: 100%;
    }

    .container-cource-img-container{
        text-align: center;
    }
}