@charset "utf-8";
/* CSS Document */
/*==================================================

リセットCSS

===================================================*/
html, body, div, span, h1, p, a, img, ul, li, footer, header {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 62.5%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
footer, header {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}




/*==================================================

フォント

===================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;660;700&display=swap');
body{
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
	line-height: 1.6;
	font-size: 1.6rem;
	letter-spacing: 0.06em;
    color: #3e3939;
}
@media screen and (max-width:740px) {
    body{
        font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-weight: 500;
        line-height: 1.6;
        font-size: 1.5rem;
        letter-spacing: 0.06em;
    }
}/*SP-end*/




/*==================================================

共通

===================================================*/
html{
    font-size: 62.5%;
}
body{
    background-size: auto;
}
body a{
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    color: #3e3939;
}
.sp{
    display:none;
}

.pc {
    display: block;
}

body a:hover{
    opacity: 1;
    transition: all 0.3s;
}
body .flex_area{
    display: -webkit-flex;
    display: flex;
    gap: 2.32%;
}
body #pagetop a{
    position: absolute;
    right: 20px;
    bottom: -80px;
    z-index: 10;
}
@media screen and (max-width:767px) {
    .sp{
        display:block;
    }
    .pc {
        display: none;
    }
    body #pagetop a{
        position: absolute;
        right: 20px;
        bottom: -55px;
    }
    body #pagetop a img{
        width: 80%;
    }
}/*SP-end*/

/*==================================================

コンテンツ部分共通

===================================================*/
/*header*/
#shindan header {
    background: #fff;
    height: 70px;
}

#shindan header ul {
    width: min(1200px,100%);
    margin: auto;
    padding: 11.4px 15px 0;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    #shindan header ul {
        width: 100%;
        padding: 16px 3% 0;
    }

    #shindan header ul li img {
        width: 77%;
    }
}

@media only screen and (max-width: 425px) {
    /*header*/
    #shindan header {
        height: min(70px,16.470588235294118vw);
    }

    #shindan header ul {
        padding: 5% 5% 0;
    }
}

/*footer*/
#shindan footer{
    background: #fff;
    height: auto;
    position: relative;
    border-top: 2px solid #008ce5;
    padding: 20px;
}
#shindan footer .inner{
    background: #fff;
    text-align: center;
}
#shindan footer .inner p{
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 5px;
}

#shindan footer .linkarea a{
    padding: 0 20px;
}

#shindan footer .linkarea span{
    display: block;
    margin-bottom: 15px;
    line-height: 1.3;
    color: #008ce5;
}

@media screen and (max-width: 767px) {
    #shindan footer .logo {
        width: min(194px,45.64vw);
    }

    #shindan footer .linkarea a {
        padding: 0;
        display: block;
        margin-bottom: 15px;
    }
}

#shindan main{
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
}
#shindan main .main_area{
    margin: 0 auto 0;
    position: relative;
    width: 100%;
}

#shindan main h1{
    font-size: 3rem;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}
#shindan main p{
    font-weight: 600;
}

/*------緑背景タイトルエリア*/
#shindan main .ttl_area{
    background: #00aea9;
    text-align: center;
    height: 130px;
}
#shindan main .ttl_area:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #00aea9;
}

/*------ボタン*/

/*------box_area*/

/*------q_area*/
/*------q_area - ボタン*/


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

    /*footer*/
    #shindan footer{
        background: #fff;
        height: auto;
        position: relative;
        border-top: 2px solid #008ce5;
        padding: 20px;
    }
    #shindan footer .inner{
        background: #fff;
        text-align: center;
    }
    #shindan footer .inner p{
        font-size: min(12px, 2.82vw);
        line-height: 1;
        margin-top: 5px;
    }
    
    #shindan main{
        width: 100%;
        min-width: 100%;
        margin: 0 auto;
    }
    #shindan main .main_area{
        margin: 0 auto 0;
        width: 100%;
        max-width: 100%;
        padding-left: 3.3%;
        padding-right: 3.3%;
        box-sizing: border-box;
    }
    #shindan main h1{
        font-size: 2.5rem;
        width: 90%;
    }

    /*------box_area*/

    /*------q_area*/
    /*------q_area - ボタン*/
    
    /*------緑背景タイトルエリア*/
    #shindan main .ttl_area{
        height: 100px;
    }
	
	/*ボタン*/
}/*SP-end*/




/*================================================== 

系統 - 一覧

===================================================*/
/*タイトルエリア*/
#shindan main.keitou_index .ttl_area:before{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 2;
}
#shindan main.keitou_index .ttl_area:after{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #00aea9;
    z-index: 1;
}
#shindan main.keitou_index .ttl_area{
    background: #fff;
    border:#00aea9 solid 3px;
	position: relative;
}

#shindan main.keitou_index .ttl_area .ttl_area-pre-title {
    background-color: #e5f4f2;
    width: 395px;
    margin: auto;
    font-size: 22px;
    border-radius: 5px;
    margin-top: 20px;
}

#shindan main.keitou_index .ttl_area h1 span.s_ttl{
    display: block;
    color: #e6f3f3;
    font-size: 31px;
    color: #61aca8;
    box-sizing: border-box;
    padding: 17px 0 0;
}
#shindan main.keitou_index .ttl_area h1{
    width: 642px;
	position: absolute;
	top: 58%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
}
#shindan main.keitou_index .ttl_area h1 img{
	width: 80px;
	margin-right: 20px;
}

#shindan main.keitou_index .senio-colleague {
    margin: 70px 0 0;
}

/*動画*/
#shindan main.keitou_index .main_area .movie_area{
    text-align: center;
	width: 372px;
    box-shadow: 0px 0px 10px #b1b1b175;
}

#shindan main.keitou_index .main_area .movie_area_1{
    margin: 0 auto 45px;
}

#shindan main.keitou_index .main_area .movie_area_2{
    margin: 0 auto 30px;
}

#shindan main.keitou_index .main_area .movie_area .iframe_box{
	position: relative;
	width: 100%;
	padding-top: 661px;
	margin: 0 auto;
}
#shindan main.keitou_index .main_area .movie_area iframe{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	max-width: 100%;
}

@media only screen and (max-width: 767px){
    /*タイトルエリア*/
    #shindan main .ttl_area {
        height: min(105px,24.71vw);
    }

    #shindan main.keitou_index .ttl_area h1 {
        display: block;
        width: 100%;
    }

	#shindan main.keitou_index .ttl_area h1 span.s_ttl{
		font-size: min(22px,5.17vw);
        padding: min(17px,4vw) 0 0;
	}
	#shindan main.keitou_index .ttl_area .ttl_area-pre-title {
        width: 90%;
        font-size: min(13px,3.05vw);
        border-radius: 10vw;
        margin-top: min(20px,4.71vw);
    }

    #shindan main.keitou_index .senio-colleague {
        margin: min(40px,9.41vw) 0 0;
    }

    #shindan main.keitou_index .senio-colleague_2 {
        margin: min(70px,16.47vw) 0 0;
    }

    #shindan main.keitou_index .main_area .movie_area {
        width: min(377px,88.7vw);
    }

    #shindan main.keitou_index .main_area .movie_area_1 {
        margin: 0 auto min(40px,9.4vw);
    }

    #shindan main.keitou_index .main_area .movie_area .iframe_box {
        padding-top: 178.3%;
    }
}/*SP-end*/
/*
social-issues */
.social-issues {
    width: 708px;
    margin: auto;
}

.social-issues_2 {
    width: 600px;
}

.social-issues p.issue-title {
    display: inline-block;
    font-size: 17px;
    letter-spacing: -0.1rem;
    margin-left: 5px;
}

.social-issues_2 .issue-title {
    margin-right: 20px;
}

.social-issues p.issue-item {
    display: inline-block;
    font-size: 15px;
    color: white;
    padding: 5px 13px;
    border-radius: 10px;
    margin-left: 3px;
}

.social-issues p.issue-item.blue {
    background-color: #6aa0d6;
}

.social-issues p.issue-item.orange {
    background-color: #f08d70;
}


@media only screen and (max-width: 767px){
    .social-issues {
        width: min(394px,92.7vw);
    }

    .social-issues p.issue-title {
        display: block;
        text-align: left;
        margin-left: 0;
        font-size: min(15px,3.53vw);
    }

    .social-issues p.issue-item {
        font-size: min(14px,3.29vw);
        padding: min(5px,1.17vw);
        border-radius: min(6px,1.4vw);
        margin-left: 0;
    }

    .social-issues p.issue-item_2 {
        margin-left: 2%;
    }

    .social-issues p.issue-item_3 {
        margin-left: 2%;
    }
}

/* keio-episode */
.keio-episode {
    width: 793px;
    margin: 36px auto 0;
    text-align: center;
    position: relative;
}

.keio-episode .episode-title {
    position: absolute;
    width: 503px;
    background-color: #fdd724;
    border: 3px solid #3e3939;
    padding: 2px 0;
    border-radius: 5px;
    left: 50%;
    top: -10%;
    transform: translateX(-50%);
    font-size: 18px;
}

.keio-episode .episode-content {
    border: 3px solid #3e3939;
    border-radius: 15px;
    background-color: white;
    color: #d2707e;
    font-weight: 500;
    font-size: 28px;
    padding: 30px 0 20px;
}

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

    .keio-episode {
        width: min(395px,92.94vw);
        margin: min(36px,8.47vw) auto 0;
        text-align: center;
        position: relative;
    }

    .keio-episode .episode-title {
        width: min(395px,92.94vw);
        box-sizing: border-box;
        border: min(3px,0.7vw) solid #3e3939;
        padding: 2px 0;
        border-radius: min(5px,1.17vw);
        font-size: min(15px,3.5vw);
        letter-spacing: -0.05rem;
    }

    .keio-episode .episode-content {
        border: min(3px,0.7vw) solid #3e3939;
        border-radius: min(15px,2.35vw);
        font-size: min(21px,4.9vw);
        padding: min(30px,7vw) 0 min(20px,4.7vw) min(30px,7vw);
        text-align: left;
        letter-spacing: -0.08rem;
    }

}
/*==================================================

先生の探究ヒストリー

===================================================*/
/*共通*/
/*タイトルエリア上*/
/*タイトルエリア*/

/*各系統タイトル*/
/*keitou1*/
/*keitou2*/
/*keitou3*/


/*動画*/

/*わくわくワード*/

/*テーブル*/

/*-----------------------keitou1*/
/*-----------------------keitou2*/

/*-----------------------keitou3*/


/*ボタンエリア - footer付近*/
@media only screen and (max-width: 767px){
    /*タイトルエリア上*/
    /*タイトルエリア*/

    /*各系統タイトル*/

    /*動画*/

    /*わくわくワード*/

    /*テーブル*/

    /*-----------------------文学系統*/
   /*ボタンエリア - footer付近*/
}/*SP-end*/





/*==================================================

先生の探究ヒストリー - fixed_content

===================================================*/

.height_banner {
    height: 190px;
    margin-top: 60px;
}

#fixed_content .center {
    text-align: center;
}

/*パンフ請求*/
#fixed_content {
    width: 100%;
    background: #00000075;
    padding: 15px;
    color: #fff;
    max-width: 100%;
}

#fixed_content {
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #00000075;
    padding: 15px;
    color: #fff;
    position: absolute;
    max-width: 100%;
    display: block !important;
}

#fixed_content p {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 24px;
}

@media only screen and (max-width: 767px) {
    .height_banner {
        height: 140px;
        margin-top: min(80px,18.82vw);
    }

    #fixed_content {
        height: min(158px, 37.176470588235294vw);
        box-sizing: border-box;
        padding: 3%;
        left: unset;
        top: unset;
        transform: none;
        left: 0px;
    }

    #fixed_content p {
        font-size: min(16px,3.76vw);
    }

    #fixed_content a img {
        width: min(380px, 95.2%);
    }
}


/*==================================================

220601～追記

===================================================*/







/*==================================================

220608追記 - 気になるワクワクワード

===================================================*/
/*テーブル*//*sp-end*/