@charset "utf-8";

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Common(PC.SP共通設定)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

* {
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
}

body {
	/* ゴシック体系のフォント指定 */
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-rendering: optimizeLegibility;
}

.serif {
	/* 明朝体系(セリフ体)のフォント指定 */
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

main {
	display: block;
}

img {
	display: block;
	width: 100%;
	height: auto;
}
a {
    list-style: none;
    text-decoration: none;
}
a img {
	transition: all 0.2s ease-in-out;
}

a:hover img {
	opacity: 0.5;
}

ul,
ol {
	list-style: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Goto Top (Topへ戻る) PC.SP共通設定
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#pageTop {
	display: block;
	padding: 10px 15px;
	position: fixed;
	right: 20px;
	bottom: 115px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
	font-size: 16px;
	color: #fff;
	z-index: 10000;
}



/*/////////////////////////////////////////////////////////////////////
    for PC  パソコン画面用（768px以上）
/////////////////////////////////////////////////////////////////////*/

@media only screen and (min-width:768px) {

	body {
		min-width: 960px;
	}

	#wrapper {}

	.pc_none {
		display: none;
	}


	/*==================================================
    Header  for PC
==================================================*/

	.top_title {
		width: 960px;
		margin: 10px auto;
		padding: 0;
		display: flex;
		align-items: center;
        justify-content: space-between;
	}

	.top_title a {
        position: relative;
        display:block;
		font-size: 13px;
        letter-spacing: 3px;
        color:#fff;
        background: linear-gradient(90deg, rgba(140,198,63,1) 0%, rgba(0,169,157,1) 100%);
        padding:1em 3em;
        border-radius: 4px;
	}
    .top_title a:hover {
        opacity:0.6;
        transition:0.5s;
        }
    
    .top_title a:after {
        position:absolute;
        display:inline-block;
        width:15px;
        height:15px;
        content:"";
        background-image: url(../img/btn_icon_img01.png);
        background-size: contain;
        background-position: center;
        top:calc(50% - 7.5px);
        right:1em;
    }

	.top_title h1 img {
		width: 180px;
        height:auto;
	}

	header .fv_box {
    width:100%;
    height:420px;
        background-image: url(../img/fv_bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
	}
    .fv_box .wrap {
        width:100%;
        height:420px;
        background: linear-gradient(90deg, rgba(80,182,151,0.6629026610644257) 0%, rgba(255,255,255,0) 100%);
    }
    .fv_box .inner {
        width:900px;
        padding:43px 0 0 0;
        margin:0 auto;
    }
    
    .fv_box img {
        width:482px;
        height:150px;
    }
    .fv_box p {
        font-size:16px;
        font-weight:bold;
        color:#fff;
        line-height: 2;
        margin:2em 0 0 1em;
    }

	/*==================================================
    Main  for PC
==================================================*/

/*==========見出し==========*/
     .ttl_en {
         font-size:30px;
         font-weight:bold;
         color:#1f6d56;
        text-align: center;
        margin-bottom:10px;
        letter-spacing: 2px;
     }
     h2 {
         font-size:14px;
         font-weight:bold;
         color:#4d4d4d;
         text-align: center;
         margin-bottom:40px;
     }

/*==========ボタン==========*/
    .btn_rtas {
        position: relative;
        display:block;
        width:460px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3px;
        color:#fff;
        background: linear-gradient(90deg, rgba(140,198,63,1) 0%, rgba(0,169,157,1) 100%);
        border-radius: 4px;
        text-align: center;
        padding:1em 3em;
        margin:0 auto;
    }

    .btn_rtas:after {
        position:absolute;
        display:inline-block;
        width:30px;
        height:30px;
        content:"";
        background-image: url(../img/btn_icon_img01.png);
        background-size: contain;
        background-position: center;
        top:calc(50% - 15px);
        right:1em;
    }

    .btn_rtas:hover {
    opacity:0.6;
    transition:0.5s;
}
/*==================================================
    About for PC
==================================================*/

    #about {
        padding:40px 0;
        margin: 0 auto;
        }
    #about .wrap {
        width:960px;
        margin:0 auto;
    }
    
    #about .wrap ul li {
        display: flex;
        flex-wrap: wrap;
        margin-bottom:40px;
    }
    #about .wrap ul li figure {
        position:relative;
        width:480px;
        height:300px;
    }
    #about .wrap ul li:nth-child(1) figure {
        position:relative;
    }
    
    #about .wrap ul li:nth-child(1) figure figcaption{
        position:absolute;
        display: block;
        width:100%;
        font-size:14px;
        color:#fff;
        background-color:rgba(31,109,86,0.6);
        padding:0.3em 0 0.3em 0.5em;
        bottom:0;
        left:0;
    }
    #about .wrap ul li:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        flex-direction:row-reverse;
    }
    
   
    
    #about ul li .right_box {
        width:480px;
        height:300px;
    }
    #about ul li .right_box h3{
        font-size:18px;
        font-weight:bold;
        border-bottom:2px #1f6d56 solid;
        padding:1em 0 0.3em 1.5em;
    }
    #about ul li .right_box p{
        font-size:15px;
        line-height:1.8;
        padding:1em 0 0 27px;
    }

    #about .wrap ul li:nth-child(2) h3{
        padding:0.3em 0 0.3em 0;
    }
    #about .wrap ul li:nth-child(2) p{
        padding:0.3em 0 0.3em 0;
        padding:1em 0 0 0;
    }

	/*==================================================
    Main メリット  for PC
==================================================*/

    #merit {
        background-color: #f3ffeb;
		margin: 0 auto;
        padding: 40px 0;
	}

	#merit .merit_in {
		width: 960px;
		margin: 0 auto;
	}
    #merit .photo{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto 20px;
    }
    #merit .photo li{
        width:32%;
        height:auto;
    }
    
	#merit .detail {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto 60px;
	}

    #merit .detail li {
		width: 25%;
        padding:0 1em;
        text-align: center;
        border-right:1px solid #cccccc;
	}

    #merit .detail li img {
		width: 50px;
        height:50px;
        margin:0 auto 20px;
	}
    #merit .detail li h3{
       font-size:15px;
       font-weight:bold;
       line-height:1.8;
       margin-bottom:1.5em;
    }
    #merit .detail li p{
        font-size:14px;
        line-height:1.6;
        text-align: justify;
    }
    
    #merit .merit_in .detail li:nth-child(4){
    border:none;
    }
    

	/*==================================================
    Main インタビュー  for PC
==================================================*/

	#interview {
    padding:40px 0;
	}

	#interview .interview_box {
		width: 740px;
		margin: 0 auto 30px;
	}


	#interview ul {
		width: 740px;
		margin: auto;
		padding: 20px 0;
	}

    #interview ul li{
        display: flex;
        justify-content: space-between;
        width: 740px;
        margin:0 auto;
        padding: 20px 0;
    }

    #interview ul .left_box {
        
        width: 200px;
        height:auto;
	}
    #interview ul .left_box .bio {
        width: 100%;
        height:auto;
        background-color:#1f6d56;
    }
    
    #interview ul .left_box img{
        position:relative;
    }
    #interview ul .left_box .bio span {
    display:block;
    width:100%;
    font-size:18px;
    color:#fff;
        padding:5px;
        margin:0 auto;
        text-align:center;
    }
    #interview .interview_box ul .left_box .dept {
        width:90%;
        font-size:16px;
        border-bottom: 1px solid #fff;
    }
    #interview .interview_box ul .left_box .years{
        position:relative;
        width:92px;
        height:auto;
        font-size:14px;
        font-weight: bold;
        text-align: center;
        padding:5px;
        background-color:#fcee21;
        bottom:50px;
        left:-20px;
    }
    #interview .interview_box ul .right_box {
    width:540px;
    padding-left:2em;
	}

    #interview ul .right_box h3 {
		font-size: 16px;
        color:#1f6d56;
        line-height: 1.5;
        margin-bottom: 3px;
	}

    #interview ul .right_box p {
		font-size: 16px;
		line-height: 1.5;
		text-align: justify;
        margin-bottom:1em;
	}



    #field_trip {
    background-color: #f3ffeb;
    padding:40px 0 60px;
    text-align: center;
    }
    
    #field_trip .wrap {
    position: relative;
    max-width:640px;
    width:100%;
    height:0;
    margin:0 auto 40px;
    padding-top: 30%;
    }
    
    #field_trip .wrap iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    #field_trip .txt_btn {
        font-size:16px;
        line-height:1.5;
        text-align: center;
        padding:1em 0;
    }
    
	/*==================================================
    Footer  for PC
==================================================*/

	footer {
		width: 100%;
        background-color: #1f6d56;
        padding:16px; 0;
	}

	footer p {
        font-size: 12px;
		text-align: center;
        color:#fff;
	}
}




/*/////////////////////////////////////////////////////////////////////
    for sp  スマホ画面用（767px以下）
/////////////////////////////////////////////////////////////////////*/


@media only screen and (max-width:767px) {
	body {
		width: 100%;
		font-size: 13px;
	}

.sp_none {
    display:none !important;
}

    /*==================================================
    Header  for SP
    ==================================================*/

    .top_title {
        width: 100%;
        margin: 10px auto;
        padding: 0 2%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    

    .top_title h1 img {
        width: 180px;
        height:auto;
    }

    header .fv_box {
        width:100%;
        height:420px;
        background-image: url(../img/fv_bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .fv_box .wrap {
        width:100%;
        height:420px;
        background: linear-gradient(90deg, rgba(80,182,151,0.6629026610644257) 0%, rgba(255,255,255,0) 200%);
    }
    .fv_box .inner {
        width:100%;
        padding:3%;
        margin:0 auto;
    }

    .fv_box img {
        width:100%;
        max-width:480px;
        height:auto;
    }
    .fv_box p {
        font-size:16px;
        font-weight:bold;
        color:#fff;
        line-height: 2;
        margin:2em 0 0 0;
    }
    .fv_box a {
        position: relative;
        display:block;
        width:300px;
        font-size: 13px;
        letter-spacing: 3px;
        color:#fff;
        background: linear-gradient(90deg, rgba(140,198,63,1) 0%, rgba(0,169,157,1) 100%);
        padding:1em 3em;
        margin-top:20px;
        border-radius: 4px;
        text-align:center;
    }
    .fv_box a:hover {
        opacity:0.6;
        transition:0.5s;
    }

    .fv_box a:after {
        position:absolute;
        display:inline-block;
        width:15px;
        height:15px;
        content:"";
        background-image: url(../img/btn_icon_img01.png);
        background-size: contain;
        background-position: center;
        top:calc(50% - 7.5px);
        right:1em;
    }

    /*==================================================
    Main  for PC
    ==================================================*/

    /*==========見出し==========*/
    .ttl_en {
        font-size:30px;
        font-weight:bold;
        color:#1f6d56;
        text-align: center;
        margin-bottom:10px;
    }
    h2 {
        font-size:14px;
        color:#4d4d4d;
        text-align: center;
        margin-bottom:40px;
    }

    /*==========ボタン==========*/
    .btn_rtas {
        position: relative;
        display:block;
        width:100%;
        max-width:460px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        color:#fff;
        background: linear-gradient(90deg, rgba(140,198,63,1) 0%, rgba(0,169,157,1) 100%);
        border-radius: 4px;
        text-align: center;
        padding:1em 3em;
        margin:0 auto;
    }

    .btn_rtas:after {
        position:absolute;
        display:inline-block;
        width:20px;
        height:20px;
        content:"";
        background-image: url(../img/btn_icon_img01.png);
        background-size: contain;
        background-position: center;
        top:calc(50% - 10px);
        right:1em;
    }

    .btn_rtas:hover {
        opacity:0.6;
        transition:0.5s;
    }
    /*==================================================
    About for PC
    ==================================================*/

    #about {
        padding:40px 3%;
        margin: 0 auto;
    }
    #about .wrap {
        width:100%;
        margin:0 auto;
    }

    #about .wrap ul li {
        display: flex;
        flex-direction: column-reverse;
        padding:0 3%;
        margin:0 auto 20px;
    }
    #about .wrap ul li figure {
        position:relative;
        width:100%;
        height:auto;
        margin:0 auto;
    }
    #about .wrap ul li:nth-child(1) figure {
        position:relative;
    }

    #about .wrap ul li:nth-child(1) figure figcaption{
        position:relative;
        display: block;
        width:100%;
        font-size:14px;
        color:#fff;
        background-color:rgba(31,109,86,0.6);
        padding:0.3em 0 0.3em 0.5em;
        bottom:22px;
        left:0;
    }


    #about ul li .right_box {
        width:100%;
    }
    #about ul li .right_box h3{
        font-size:18px;
        font-weight:bold;
        border-bottom:2px #1f6d56 solid;
        padding:0.3em 0 0.3em 0;
    }
    #about ul li .right_box p{
        font-size:15px;
        line-height:1.8;
        padding:1em 0;
    }


    /*==================================================
    Main メリット  for PC
    ==================================================*/

    #merit {
        background-color: #f3ffeb;
        margin: 0 auto;
        padding: 40px 3%;
    }

    #merit .merit_in {
        width:100%;
        margin: 0 auto;
    }
    #merit .photo{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 auto 20px;
    }
    #merit .photo li{
        width:100%;
        max-width:312px;
        height:auto;
        margin:0 auto 10px;
    }

    #merit .detail {
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-wrap;
        margin: 0 auto 60px;
    }

    #merit .detail li {
        width: 48%;
        padding:0 0.5em;
        margin-bottom:2em;
        text-align: center;
        border-right:1px solid #cccccc;
        margin:0 auto 30px;
    }

    #merit .detail li img {
        width: 50px;
        height:50px;
        margin:0 auto 20px;
    }
    #merit .detail li h3{
        font-size:15px;
        font-weight:bold;
        line-height:1.8;
        margin-bottom:1.5em;
    }
    #merit .detail li p{
        font-size:14px;
        line-height:1.6;
        text-align: justify;
    }

    #merit .merit_in .detail li:nth-child(even){
        border:none;
    }


    /*==================================================
    Main インタビュー  for PC
    ==================================================*/

    #interview {
        padding:40px 3%;
    }

    #interview .interview_box {
        width:100%;
        margin: 0 auto 30px;
    }


    #interview ul {
        width:100%;
        margin: auto;
        padding: 20px 0;
    }

    #interview ul li{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width:100%;
        margin:0 auto;
        padding: 20px 0;
    }
    #interview ul li:last-child figure {
        margin-bottom:24px;
    }
    #interview ul .left_box {
        max-width: 200px;
        height:auto;
        margin:0 auto;
    }
    #interview ul .left_box .bio {
        width: 100%;
        height:auto;
        background-color:#1f6d56;
    }

    #interview ul .left_box img{
        position:relative;
    }
    #interview ul .left_box .bio span {
        display:block;
        width:100%;
        font-size:18px;
        color:#fff;
        padding:5px;
        margin:0 auto;
        text-align:center;
    }
    #interview .interview_box ul .left_box .dept {
        width:90%;
        font-size:16px;
        border-bottom: 1px solid #fff;
    }
    #interview .interview_box ul .left_box .years{
        position:relative;
        width:92px;
        height:auto;
        font-size:14px;
        font-weight: bold;
        text-align: center;
        padding:5px;
        background-color:#fcee21;
        bottom:50px;
        left:-20px;
    }
    #interview .interview_box ul .right_box {
        width:100%;
        max-width:540px;
    }

    #interview ul .right_box h3 {
        font-size: 16px;
        color:#1f6d56;
        line-height: 1.5;
        margin-bottom: 3px;
    }

    #interview ul .right_box p {
        font-size: 16px;
        line-height: 1.5;
        text-align: justify;
        margin-bottom:1em;
    }



    #field_trip {
        background-color: #f3ffeb;
        padding:40px 3% 60px;
        text-align: center;
    }

    #field_trip .wrap {
        position: relative;
        max-width:640px;
        width:100%;
        height:0;
        margin:0 auto 40px;
        padding-top: 56%;
    }

    #field_trip .wrap iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #field_trip .txt_btn {
        font-size:16px;
        line-height:1.5;
        text-align: center;
        padding:1em 0;
    }

    /*==================================================
    Footer  for PC
    ==================================================*/

    footer {
        width: 100%;
        background-color: #1f6d56;
        padding:16px; 0;
    }

    footer p {
        font-size: 12px;
        text-align: center;
        color:#fff;
    }

}