@charset "UTF-8";

/* **************************************************** */
/* 基礎設定 */
/* **************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@400;700&display=swap');
*{box-sizing:border-box}
html{height:100%;font-size:62.5%}
body,html{height:100%}
body {
    background-color: #F2F2F2;
    color: #323130;
    margin: 0;
    padding: 0;
    font-family: 'Roboto',"Noto Sans JP",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
    /*font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;*/
    font-size: 1.6rem;
    line-height: 1;
}
h1, h2, h3, h4 {margin: 0px;}
ol, ul {list-style: none;}
audio {vertical-align: bottom;}
.pc { display: block;}
.sp { display: none;}
@media screen and (max-width: 768px) {
    .pc { display: none;}
    .sp { display: block;}
}
.audio-100 {width: 100%;}
.video-65 {width: 65%;}

/* **************************************************** */
/* 文字周り */
/* **************************************************** */

@media screen and (min-width: 721px) {
    html {font-size: 75%;}
}
@media screen and (max-width: 720px) {
    html {font-size: 62.5%;}
}

a:link{text-decoration:none;transition:.3s}
a:link,a:visited{color:#074195}
a:hover{color:#4dcbf5;text-decoration:none!important}
a:active{color:#074195}

/* **************************************************** */
/* デザイン */
/* **************************************************** */

/* ヘッダー */
header {width:100%; background:#303945;}
header h1{color:#fff; font-size:1.6rem;font-weight: 700;padding:12px 0;text-align:center;line-height: 1.6em;}
header h1 span {background:#13bf86; font-size:1.2rem; padding: 3px 15px; margin: 0 0 10px 0; display:inline-block;}

/* フッター */
footer{width:100%;padding:20px;border-top:#E1DFDD solid 1px;text-align:center;}
footer .attention{text-align:center;font-size:1.2rem;line-height: 1.5;padding: 0 0 1rem 0;}
@media screen and (max-width: 768px) {
    footer .attention {
        text-align:left;
    }
}
footer small{color:#616161; padding:0px; font-size:1.2rem; font-family:Roboto,sans-serif;}

/* コンテンツ */
.container_bg {background:#EBEFF0;}
.contents_box {background-color: #FFF;max-width: 520px;}
.contents_box h2 {font-size:2.0rem;font-weight: 700;border-bottom: solid 2px #13bf86; position: relative; padding-bottom: 5px;}
.contents_box h3 {font-size: 1.8rem;font-weight: 500;}
.contents_box h3:before { content: "\f111";font-weight: 900; font-family: 'Font Awesome 6 Free'; padding-right: 10px;}
.contents_box h3.kokugo:before {color: #ea5431;}
.contents_box h3.suugaku_1:before {color: #924898;}
.contents_box h3.suugaku_2:before {color: #924898;}
.contents_box h3.suugaku_3:before {color: #924898;}
.contents_box h3.eigo:before {color: #14AE67;}
.contents_box h3.rika:before {color: #2870B8;}
.contents_box h3.shakai_c:before {color: #F6AB00;}
.contents_box h3.shakai_h:before {color: #F6AB00;}
.contents_box h3.shakai_1:before {color: #F6AB00;}
.contents_box h3.shakai_2:before {color: #F6AB00;}
.contents_box h3.shakai_3:before {color: #F6AB00;}
.contents_box h3.shakai_4:before {color: #F6AB00;}

a.btn-watch  {
    background: #0D6EFD;
    padding: 12px 20px ;
    color: #fff;
    border-radius: 7px;
}
a.btn-watch:hover {
    background: #0b5ed7;
}

.contents_box .attention,.container_bg .attention{
    font-size:1.2rem;
    line-height: 1.5;
    padding-left:1em;
    text-indent:-1em;
    text-align: justify;
}