@import url("https://fonts.googleapis.com/css?family=Lato");
@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
	--bg : #333;
    --green : #116845;
    --backcolor : #e7f0ec;
}
body{
	position : relative;
	letter-spacing : .1em;
    background: #141414;
}
	main{
        background: #fefefe;
	}
@media screen and (max-width: 768px){
	body{
		overflow-x : hidden;
	}
}
@media print,screen and (min-width: 769px){
	body{
		min-width : 1100px;
	}
}
@media screen and (max-width: 768px){
	main{
        background: #fff;
	}
}
@media print,screen and (min-width: 769px){
	main{
	}
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
.back-color {
    background: var(--backcolor);
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.wrap{
		width : 1200px;
		padding-left : 20px;
		padding-right : 20px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
	background-color : rgba(0,0,0,.8);
}
@media screen and (max-width: 768px){
    #header{
        background-color : rgba(0,0,0,.6);
    }
	#header .wrap{
		padding-left : calc( 17 * 100% / 768 );
		padding-right : calc( 17 * 100% / 768 );
		height : calc( 110 * 100vw / 768 );
		display : flex;
		align-items : center;
	}
	#header h1 img{
		height : calc( 100 * 100vw / 768 );
		width : auto;
		max-width : inherit;
	}
}
@media print,screen and (min-width: 769px){
	#header .wrap{
		height : 120px;
		padding-top : 8px;
		position : relative;
	}
	#header h1{
		flex-shrink : 0;
	}
	#header h1 a{
		display : inline-block;
	}
	#header h1 img{
		width : 450px;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	#menuBth span span:nth-of-type(2){
		transform-origin : center center;
	}
	#menuBth span span:nth-of-type(3){
		transform-origin : center center;
	}
	body.is-open #menuBtn span{
		overflow : hidden;
	}
	body.is-open #menuBtn span span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #menuBtn span span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media (-ms-high-contrast:none){
		body.is-open #menuBtn span span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #menuBtn span span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
}
#menuBtn{
	position : absolute;
	display : block;
}
#menuBtn > span{
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	position : absolute;
	background-color : #000;
	width : 100%;
	display : block;
	transition : transform .3s ease;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		top : calc( 33 * 100vw / 768 );
		right : calc( 25 * 100% / 768 );
		width : calc( 80 * 100vw / 768 );
		height : calc( 48 * 100vw / 768 );
	}
	#menuBtn span span{
		background-color : var(--green);
		height : calc( 8 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
#nav .gnav{
        font-family: var(--fontFamily);
}

@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		background-color : rgba(0,0,0,.95);
		top : calc( 110 * 100vw / 768 );
		height : calc( 100vh - calc( 110 * 100vw / 768 ) );
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		padding-top : calc( 12 * 100vw / 768 );
		padding-bottom : calc( 62 * 100vw / 768 );
	}
	#nav a{
		color : #fff;
		display : block;
	}
	#nav .gnav a{
		font-size : calc( 28 * 100vw / 768 );
		padding-top : calc( 41 * 100vw / 768 );
		padding-bottom : calc( 41 * 100vw / 768 );
		border-bottom : calc( 2 * 100vw / 768 ) solid #fff;
		padding-left : calc( 21 * 100% / 700 );
		padding-right : calc( 21 * 100% / 700 );
	}
	#nav .lang{
		display : flex;
		margin-top : calc( 53 * 100vw / 768 );
        justify-content: center;
        
	}
	#nav .lang li{
		width : calc( 300 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
	}
	#nav .lang li + li{
	}
	#nav .lang a{
		width : 100%;
		height : 100%;
		font-size : calc( 26 * 100vw / 768 );
		border : calc( 2 * 100vw / 768 ) solid var(--green);
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		border-style : solid;
		border-width : calc( 2 * 100vw / 768 );
		border-color : var(--green);
	}
	#nav .lang a.is-active{
		border-color : var(--green);
		background-color : var(--green);
	}
	#nav .member{
        margin-bottom: .5em;
        padding-top:1em; 
	}
        #nav .member a{
            width : 100%;
            background-color : #6a0203;
            border-color : #6a0203;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 3em;
        }
    
    
    
	#nav button{
		width : calc( 72 * 100% / 720 );
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 78 * 100vw / 768 );
		display : block;
	}
    #nav .snav{
        margin-top: calc( 50 * 100vw / 768 );
        margin-bottom: calc( 50 * 100vw / 768 );
        display: flex;
        column-gap: 1em;
        font-size: calc( 26 * 100vw / 768 );
    }
    	#nav .snav li{
    	}
    	#nav .snav li a::before{
            content: "» "
	    }

}
@media print,screen and (min-width: 769px){
	#nav{
		width : 100%;
	}
	#nav .scroll{
		width : 100%;
	}
	#nav ul{
		display : flex;
	}
	#nav a{
		color : #fff;
		height : 30px;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		font-size : 14px;
	}
	#nav .gnav{
		width : 100%;
		margin-top : 8px;
		border-right : solid 1px #ccc;
	}
	#nav .gnav li{
		border-left : solid 1px #999;
	}
	#nav .gnav li{
		flex-grow : 1;
	}
	#nav .gnav a{
		width : 100%;
	}
	#nav .lang{
		position : absolute;
		top : 10px;
		right : 20px;
	}
	#nav .lang a{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		width : 120px;
		font-size : 14px;
		border-width : 2px;
	}
	#nav .lang a:not(.is-active){
		border-color : var(--green);
		border-style : solid;
	}
	#nav .lang a.is-active , #nav .lang a:hover{
		color : #fff;
		background-color : var(--green);
		border-color : var(--green);
	}
	#nav .lang li.member a{
        margin-left: 10px;
		width : 150px;
		background-color : #6a0203;
		border-color : #6a0203;
	}
            #nav .lang li.member{
            }
}
/*--------------------------------------------
COLUMN
---------------------------------------------*/
@media print,screen and (min-width: 769px){
	#column .wrap{
		display : -ms-grid;
		display :     grid;
		grid-template-areas : "article aside";
		-ms-grid-columns : 700px 20px 340px;
		grid-template-columns : 700px 340px;
		grid-column-gap : 20px;
		padding-top : 40px;
		padding-bottom : 180px;
	}
	#column #interview{
		grid-area : article;
	}
	#column #sidebarInterview{
		grid-area : aside;
	}
}
@media print,screen and (min-width: 769px){
	#column02 .wrap{
		display : -ms-grid;
		display :     grid;
		grid-template-areas : "article aside";
		-ms-grid-columns : 790px 20px 250px;
		grid-template-columns : 790px 250px;
		grid-column-gap : 20px;
		padding-top : 44px;
		padding-bottom : 67px;
	}
	#column02 #news{
		grid-area : article;
	}
	#column02 #sidebarNews{
		grid-area : aside;
	}
        #column02 #sidebarNews a{
            text-decoration: none !important;
        }
}
@media print,screen and (min-width: 769px){
	#column02 #interview{
		-ms-grid-row : 1;
		-ms-grid-column : 1;
	}
	#column02 #interview{
		-ms-grid-row : 1;
		-ms-grid-column : 1;
	}
	#column02 #sidebarInterview{
		-ms-grid-row : 1;
		-ms-grid-column : 3;
	}
	#column02 #sidebarInterview{
		-ms-grid-row : 1;
		-ms-grid-column : 3;
	}
	#column02 #news{
		-ms-grid-row : 1;
		-ms-grid-column : 1;
	}
	#column02 #news{
		-ms-grid-row : 1;
		-ms-grid-column : 1;
	}
	#column02 #sidebarNews{
		-ms-grid-row : 1;
		-ms-grid-column : 3;
	}
	#column02 #sidebarNews{
		-ms-grid-row : 1;
		-ms-grid-column : 3;
	}
}
/*--------------------------------------------
TO TOP
---------------------------------------------*/
@media screen and (max-width: 768px){
	#toTop{
		position : fixed;
		right : 0;
		height : calc( 60 * 100vw / 768 );
		width : calc( 60 * 100% / 768 );
		bottom : 0;
		display : block;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer .nav{
	background : var(--green);
    color: #fff;
}
#footer .nav a{
	color : #fff;
}
@media screen and (max-width: 768px){
    #footer .footer_text {
        padding-top: calc( 50 * 100% / 768 );
        padding-bottom: calc( 30 * 100% / 768 );
    }
        #footer .footer_text h2.logo {
            font-size: calc( 40 * 100vw / 768 );
            margin-bottom: 1em;
        }
        #footer .footer_text dl {
        }
            #footer .footer_text dl div {
                display: flex;
            }
                #footer .footer_text dl div dt {
                    width: 6em;
                }
	#footer .footer_link{
		display : none;
	}
}
@media print,screen and (min-width: 769px){
	#footer .nav .box {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        padding: 20px 0 ;
        align-items: center;
    }
        #footer .nav ul{
        }
        #footer .nav ul li{
            text-align: right;
        }
    #footer .footer_text {
        width: 550px;
    }
        #footer .footer_text h2.logo {
            font-size: 1.6rem;
        }
        #footer .footer_text h2.logo img {
            height: 65px;
            width: auto;
        }
        #footer .footer_text dl {
        }
            #footer .footer_text dl div {
                display: flex;
            }
                #footer .footer_text dl div dt {
                    width: 5em;
                }
    #footer .footer_link {
    }
        #footer .footer_link ul {
        }
            #footer .footer_link ul li {
                line-height: 1.8;
                font-size: 14px;
            }
}

#footer .me{
	background-color : #141414;
	text-align : center;
}
#footer .me p , #footer .me a{
	color : #fff;
}
#footer .me p{
	font-family : "Lato", sans-serif;
}
@media screen and (max-width: 768px){
	#footer .me .wrap{
		padding-top : calc( 60 * 100vw / 768 );
		padding-bottom : calc( 60 * 100vw / 768 );
	}
	#footer .me h2{
		display : none;
	}
	#footer .me p{
		font-size : calc( 22 * 100vw / 768 );
		line-height : 1.1;
	}
}
@media print,screen and (min-width: 769px){
	#footer .me .wrap{
		padding-top : 20px;
		padding-bottom : 20px;
	}
	#footer .me .box{
        display: flex;
        justify-content: space-between;
        width: 1200px;
	}
	#footer .me .link2{
            text-align: right;
	}
        #footer .me .link2 ul{
            text-align: right;
            display: flex;
            column-gap: 2em;
        }
            #footer .me .link2 ul li{
                display: inline-block;
            }
	#footer .me p{
	}
}
/*--------------------------------------------
COMPONENT HEADER
---------------------------------------------*/
.component-header{
	color : #fff;
	text-align : center;
}
    .component-header .black{
        background-color: rgba(0,0,0,.5);
    }

.component-header .title span{
	display : block;
    font-family : var(--fontFamilySerif);
}
.component-header .title span:nth-of-type(2){
	font-family : "Lato", sans-serif;
}
@media screen and (max-width: 768px){
	.component-header{
		padding-top : calc( 110 * 100vw / 768 );
		background-image : url("../images/home/bg02_pc.jpg");
		background-repeat : no-repeat;
		background-position : center top;
		background-size : cover;
	}
	.component-header .wrap{
		height : calc( 190 * 100vw / 768 );
		padding-top : calc( 59 * 100vw / 768 );
	}
	.component-header .title span:nth-of-type(1){
		font-size : calc( 50 * 100vw / 768 );
	}
	.component-header span:nth-of-type(2){
		font-size : calc( 22 * 100vw / 768 );
		margin-top : calc( 30 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component-header{
		background-image : url("../images/home/bg02_pc.jpg");
        background-color: rgba(0,0,0,);
		background-repeat : no-repeat;
		background-position : center top;
		background-size : cover;
	}
	.component-header .wrap{
        padding-top: 220px;
        padding-bottom: 100px;
	}
	.component-header .title span:nth-of-type(1){
		font-size : 30px;
	}
	.component-header span:nth-of-type(2){
		font-size : 18px;
		margin-top : 15px;
	}
}
.component-flexbox .img{
	flex-shrink : 0;
}
@media screen and (max-width: 768px){
	.component-flexbox .img{
		text-align : center;
	}
	.component-flexbox{
		display : flex;
        flex-direction: column;
        grid-gap: 1em;
        column-gap: calc( 100 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component-flexbox{
		display : flex;
		align-items : flex-start;
        column-gap: 20px;
	}
	.component-flexbox.reverse{
		flex-direction : row-reverse;
	}
	.component-flexbox.tate-center{
        align-items: center;
	}
}
.component-center{
	text-align : center;
}
.component-center.left{
	text-align : left;
}
.component-list{
	display : flex;
	flex-wrap : wrap;
}
@media screen and (max-width: 768px){
	.component-list{
		justify-content : space-between;
	}
}
@media print,screen and (min-width: 769px){
	.component-list{
		justify-content : center;
	}
}
.component-topics > li{
	border-bottom : dotted;
	border-bottom-color : #221815;
}
.component-topics .box{
	display : flex;
	align-items : flex-start;
}
.component-topics time{
	display : block;
	flex-shrink : 0;
}
.component-topics .categories{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	flex-shrink : 0;
}
.component-topics h4{
	color : #221815;
}
@media screen and (max-width: 768px){
	.component-topics li{
		border-bottom-width : calc( 2 * 100vw / 768 );
		padding-bottom : calc( ( 24 - 6 ) * 100vw / 768 );
	}
	.component-topics li + li{
		margin-top : calc( 28 * 100vw / 768 );
	}
	.component-topics .box{
		align-items : center;
	}
	.component-topics time{
		font-size : calc( 26 * 100vw / 768 );
		width : calc( 182 * 100% / 720 );
	}
	.component-topics .categories{
		width : calc( 169 * 100% / 720 );
		height : calc( 43 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	.component-topics h4{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.46;
		margin-top : calc( ( 20 - 6 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component-topics > li:not(:last-child){
		border-bottom-width : 2px;
	}
	.component-topics > li:last-child{
		border-bottom-width : 0;
	}
	.component-topics > li{
		display : flex;
		align-items : flex-start;
		padding-bottom : 17px;
	}
	.component-topics > li:not(:first-child){
		padding-top : 17px;
	}
	.component-topics .box{
		flex-shrink : 0;
	}
	.component-topics time{
		font-size : 14px;
		margin-top : 9px;
		padding-left : 2px;
		width : 120px;
	}
	.component-topics .categories{
		width : 121px;
		height : 34px;
		font-size : 14px;
	}
	.component-topics h4{
		margin-left : 20px;
		font-size : 14px;
		line-height : 20px;
		margin-top : -3px;
	}
}


@media screen and (max-width: 768px){
	.section-bord{
		background-image : url("../images/home/bg02_pc.jpg");
        background-position: center bottom ;
        background-size: cover;
        height: 50vw;
	}
}
@media print,screen and (min-width: 769px){
	.section-bord{
		background-image : url("../images/home/bg02_pc.jpg");
        background-position: center bottom -200px;
        height: 200px;
	}
}