@charset "utf-8";
/* Copyright 2022 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

PC、タブレット、スマートフォン共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

トップページ

------------------------------------------------------------ */

/* メインビジュアル
---------------------------------------------- */
.main{
	position: relative;
	min-height: 313px;
	overflow: hidden;
}

.slide li img{
	width: 100%;
	height: auto;
}

.slide01{
	display: none;
	opacity: 0;
	transition: opacity .3s;
}

.slide01.slick-initialized{
	display: block;
	opacity: 1;
}

.slide02{display: none !important;}

.main .txt{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
}

.main .txt li{
	width: 50%;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.main .txt li span{
	font-family: 'Amiri';
	line-height: 1;
	color: #FFF;
	text-shadow: 0 0 6px #000;
}

.main .txt li span.country{
	font-size: 2.4rem;
	margin-bottom: 5px;
}

.main .txt li span.city{font-size: 4.6rem;}

/* コンテンツ
---------------------------------------------- */
.ttl_home01{
	font-family: "Amiri";
	font-size: 5.6rem;
	line-height: 1;
	color: #0C2C2B;
	margin-bottom: 55px;
}

/* Pick out article
---------------------------------------------- */
.sec_article_home{padding: 120px 50px;}
	
.wrap_article_home{
	display: flex;
	margin: 0 -10px;
}
	
.article_home{
	padding: 0 10px;
	width: 25%;
}

.article_home a{
	display: flex;
	color: #333;
}

.article_home .image{
	width: calc(50% - 10px);
	height: 100%;
	background: #E6E8E7;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 34.48%;
	position: relative;
	overflow: hidden;
}

.article_home .image figure{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.article_home .image img{
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.0001);
	transition: transform .5s, filter .5s;
}

.article_home:hover .image img{transform: scale(1.05);}

.article_home .image .noimage{
	width: 100%;
	height: 100%;
	background: url("../img/img_logo03.png") no-repeat center;
	background-size: 68.96%;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.0001);
	transition: transform .5s, filter .5s;
}

.article_home:hover .image .noimage{transform: scale(1.05);}

.article_home .text{
	width: calc(50% - 10px);
	position: relative;
	padding-left: 20px;
}

.article_home .text time{
	font-size: 1.3rem;
	display: block;
	/*font-family: "Amiri";*/
	margin-bottom: 6px;
}

.article_home .text h3{
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
}

/* Subject
---------------------------------------------- */
.sec_subject{
	border-top: 1px solid #CCD0CD;
	background: #E6E8E7;
	display: flex;
}

.sec_subject .col_l{
	background: #FFF;
	width: 340px;
	flex: none;
	border-right: 1px solid #CCD0CD;
}

.sec_subject .col_l h2{
	font-family: "Amiri";
	font-size: 5.6rem;
	padding: 25px 0;
	line-height: 1;
	text-align: center;
	pointer-events: none;
}

.sec_subject .col_l h2 span{
	display: block;
	font-size: 1.5rem;
	margin: 2px 0 0 0;
}

.sec_subject .col_l_inner{
	position: sticky;
	position: -webkit-sticky;/*Safari用*/
	top: 0;
	left: 0;
}

.sec_subject .col_l_inner > div .btn_subject_close{display: none;}

.sec_subject .col_l ul li{border-bottom: 1px solid #C4C8C6;}

.sec_subject .col_l ul li:first-of-type{border-top: 1px solid #C4C8C6;}

.sec_subject .col_l ul li span{
	display: block;
	color: #000;
	font-size: 1.6rem;
	padding: 25px 40px 25px 30px;
	line-height: 1;
	position: relative;
	cursor: pointer;
	transition: background .3s;
}

.sec_subject .col_l ul li span:hover{background: #E6E8E7;}

.sec_subject .col_l ul li span::after{
	content: "";
	display: inline-block;
	background: url("../img/ico_arrow04.png") no-repeat 0 0;
	background-size: contain;
	width: 6px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 30px;
	margin-top: -5px;
	pointer-events: none;
}

.sec_subject .col_l ul li.show span{
	background: #0D2E2B;
	color: #FFF;
	pointer-events: none;
}

.sec_subject .col_l ul li.show span::after{
	background: url("../img/ico_arrow01.png") no-repeat 0 0;
	background-size: contain;
}

.sec_subject .col_r{width: calc(100% - 340px);}

.sec_subject .col_r > div{padding: 50px 50px;}
	
.sec_subject .col_r h2{display: none;}

.sec_subject .col_r .subject{
	display: none;
	flex-wrap: wrap;
	margin: 0 -12px -24px;
	opacity: 0;
	transition: opacity .3s;
}

.sec_subject .col_r .subject .item {
    padding: 0 12px;
    width: 20%;
    margin-bottom: 24px;
}
	
.sec_subject .col_r .subject .item a {
    display: block;
    background: #FFF;
    border: 1px solid #C4C8C6;
    color: #000;
    min-height: 380px;
    transition: background .3s;
    font-size: 1.6rem;
}

.sec_subject .col_r .subject .item a:hover{background: #EAEEEB;}

.sec_subject .col_r .subject .item .image {
    height: 100%;
    background: url(../img/img_logo03.png) no-repeat center;
    background-size: 68.96%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 70%;
    position: relative;
    overflow: hidden;
}

.sec_subject .col_r .subject .item .image figure{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.sec_subject .col_r .subject .item .image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.0001);
    transition: transform .5s, filter .5s;
}

.sec_subject:hover .image img{transform: scale(1.05);}

.sec_subject .col_r .subject .item .text {
    position: relative;
    padding: 20px;
}

.sec_subject .col_r .subject .item .text time{
	font-size: 1.3rem;
	display: block;
	/*font-family: "Amiri";*/
	margin-bottom: 6px;
}

.sec_subject .col_r .subject .item .text h3{
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
}



.sec_subject .col_r .subject.is-show{
	display: flex;
	opacity: 1;
}

/* Other contents
---------------------------------------------- */
.sec_other{
	padding: 6.25vw 50px 140px;
	position: relative;
}

.sec_other::before{
	content: "";
	display: block;
	background: url("../img/bg01_pc.jpg") no-repeat center;
	background-size: cover;
	width: 100%;
	padding-top: 24.791%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}
	
.sec_other .ttl_home01{
	text-align: center;
	margin-bottom: 3.125vw;
}

.btn_other{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.btn_other p{margin-right: 10px;}

.btn_other p:last-of-type{margin-right: 0;}

.btn_other p a{
	background: #0D2E2B;
	width: 240px;
	display: block;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 1;
	padding: 15px 20px;
	position: relative;
	transition: background .3s;
}

.btn_other p a:hover{background: #550404;}

.btn_other p a::after{
	content: "";
	background: url("../img/ico_arrow01.png") no-repeat 0 0;
	background-size: contain;
	width: 7px;
	height: 12px;
	pointer-events: none;
	position: absolute;
	top: 18px;
	right: 20px;
}

.nav_other{
	max-width: 1748px;
	margin: 0 auto;
}

.nav_other > div{
	display: flex;
	margin: 0 -5px;
}

.other{
	width: 33.33%;
	padding: 0 5px;
}

.other a{
	display: block;
	color: #FFF;
	font-size: 1.6rem;
	position: relative;
}

.other .image{
	position: relative;
	padding-top: 52.08%;
	overflow: hidden;
}

.other .image img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	transform: scale(1.0001);
	transition: transform .5s;
}

.other:hover .image img{transform: scale(1.05);}

.other p{
	background: #0D2E2B;
	min-width: 260px;
	padding: 17px 38px 17px 20px;
	line-height: 1;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: background .3s;
}

.other:hover p{background: #550404;}

.other p::after{
	content: "";
	background: url("../img/ico_arrow01.png") no-repeat 0 0;
	background-size: contain;
	width: 7px;
	height: 12px;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -6px;
}


@media only screen and (max-width:1580px){ /* 表示領域が1580px以下の場合に適用するスタイル */

	/* Subject
	---------------------------------------------- */
	.sec_subject .col_r .subject .item{width: 25%;}

	
}/*--@media--*/


@media only screen and (max-width:1300px){ /* 表示領域が1300px以下の場合に適用するスタイル */

	/* Subject
	---------------------------------------------- */
	.sec_subject .col_r .subject .item{width: 50%;}

	
}/*--@media--*/


@media only screen and (max-width:1180px){ /* 表示領域が1180px以下の場合に適用するスタイル */

	/* メインビジュアル
	---------------------------------------------- */
	.main .txt li span.country{font-size: 1.8rem;}

	.main .txt li span.city{font-size: 3.6rem;}
	
	
}/*--@media--*/


@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	.ttl_home01{font-size: 4.4rem;}
	
	/* Pick out article
	---------------------------------------------- */
	.sec_article_home{padding: 70px 15px;}
	
	.sec_article_home .ttl_home01{margin-bottom: 20px;}

	.wrap_article_home{
		flex-wrap: wrap;
		margin: 0 -7.5px -20px;
	}

	.article_home{
		width: 100%;
		padding: 0 7.5px;
		margin-bottom: 20px;
	}
	
	.article_home a{
		display: flex;
		color: #000;
	}

	.article_home time{
		font-size: 1.3rem;
		margin-bottom: 3px;
	}

	.article_home h3{
		font-size: 1.3rem;
		letter-spacing: 0.05em;
		line-height: 1.8;
	}
	
	/* Subject
	---------------------------------------------- */
	.sec_subject{display: block;}

	.sec_subject .col_l{
		background: #FFF;
		width: auto;
		flex: none;
		border-right: 1px solid #CCD0CD;
	}
	
	.sec_subject .col_l::before{
		content: "";
		display: block;
		background: rgba(13,46,43,0.95);
		opacity: 0;
		width: 100%;
		height: 100vh;
		pointer-events: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
	}
	
	.mode-1024 .sec_subject .col_l::before{transition: opacity .3s;}

	#wrap_all.subject_open .sec_subject .col_l::before{
		opacity: 1;
		pointer-events: auto;
	}

	.sec_subject .col_l h2{display: none;}
	
	.sec_subject .col_l_inner{position: inherit;}
	
	.sec_subject .col_l_inner > div{
		width: 100%;
		transform: translateX(-100%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 4;
	}
	
	.mode-1024 .sec_subject .col_l_inner > div{transition: transform .3s;}
	
	#wrap_all.subject_open .sec_subject .col_l_inner > div{transform: translateX(0);}
		
	.sec_subject .col_l_inner > div .btn_subject_close{
		display: flex;
		align-items: center;
		background: #FFF;
		font-family: "Amiri";
		line-height: 1;
		width: 180px;
		border-right: 1px solid #C4C8C6;
		border-bottom: 1px solid #C4C8C6;
		padding: 10px 30px 8px 15px;
		font-size: 2.2rem;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: auto;
		cursor: pointer;
	}
	
	.sec_subject .col_l_inner > div .btn_subject_close span{
		font-size: 1.1rem;
		margin: 0;
		display: inline-block;
		margin-left: 5px;
	}
	
	.sec_subject .col_l_inner > div .btn_subject_close::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow03.png") no-repeat 0 0;
		background-size: contain;
		width: 11px;
		height: 10px;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -5px;
		transform: scale(-1, 1);
	}
	
	.sec_subject .col_l ul{
		background: #FFF;
		width: 80%;
		height: 100vh;
		padding-top: 40px;
	}

	.sec_subject .col_l ul li span{
		padding: 15px 30px 15px 15px;
		font-size: 1.4rem;
	}

	.sec_subject .col_l ul li span::after{right: 15px;}

	.sec_subject .col_l ul li.show span{
		background: #0D2E2B;
		color: #FFF;
		pointer-events: none;
	}

	.sec_subject .col_l ul li.show span::after{
		background: url("../img/ico_arrow01.png") no-repeat 0 0;
		background-size: contain;
	}
	
	.sec_subject .col_r{width: 100%;}

	.sec_subject .col_r > div{padding: 0 15px;}
	
	.sec_subject .col_r h2{
		display: flex;
		align-items: center;
		font-family: "Amiri";
		line-height: 1;
		background: #FFF;
		width: 180px;
		border-right: 1px solid #C4C8C6;
		border-bottom: 1px solid #C4C8C6;
		padding: 10px 30px 8px 15px;
		font-size: 2.2rem;
		position: sticky;
		position: -webkit-sticky;/*Safari用*/
		top: 0;
		left: 0;
		pointer-events: auto;
		cursor: pointer;
		z-index: 1;
	}
	
	.sec_subject .col_r h2 span{
		font-size: 1.1rem;
		margin: 0;
		display: inline-block;
		margin-left: 5px;
	}
	
	.sec_subject .col_r h2::after{
		content: "";
		display: inline-block;
		background: url("../img/ico_arrow03.png") no-repeat 0 0;
		background-size: contain;
		width: 11px;
		height: 10px;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -5px;
	}

	.sec_subject .col_r .subject{
		margin: 0 -7.5px;
		padding: 15px 0 40px;
	}

	.sec_subject .col_r .subject .item{
		width: 50%;
		font-size: 1.3rem;
		padding: 0 7.5px;
		margin-bottom: 15px;
	}
	
	.sec_subject .col_r .subject .item:last-of-type{margin-bottom: 0;}

	.sec_subject .col_r .subject .item a{
		min-height: 310px;
		font-size: 1.3rem;
	}

	.sec_subject .col_r .subject .item time{
		font-size: 1.4rem;
		margin-bottom: 5px;
	}
	
	.sec_subject .col_r .subject .item .text {
		padding: 10px;
	}

	/* Other contents
	---------------------------------------------- */
	.sec_other{
		padding: 70px 15px;
		position: relative;
	}
	
	.sec_other::before{
		background-image: url("../img/bg01_sp.jpg");
		height: 60%;
		padding: 0;
	}

	.sec_other .ttl_home01{margin-bottom: 25px;}
	
	.nav_other > div{margin: 0 -7.5px -15px;}

	.other{
		padding: 0 7.5px;
		margin-bottom: 15px;
	}

	.other a{font-size: 1.3rem;}

	.other p{
		min-width: auto;
		padding: 14px 30px 14px 15px;
	}
	
	.btn_other{
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	.btn_other p{
		margin: 0;
		width: calc(50% - 7.5px);
	}

	.btn_other p:last-of-type{margin-right: 0;}

	.btn_other p a{
		width: 100%;
		font-size: 1.3rem;
		padding: 15px 25px 15px 15px;
	}

	.btn_other p a::after{
		top: 15px;
		right: 15px;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	/* メインビジュアル
	---------------------------------------------- */
	.slide01{display: none !important;}
	
	.slide02{
		opacity: 0;
		transition: opacity .3s;
	}

	.slide02.slick-initialized{
		display: block !important;
		opacity: 1;
	}
	
	.main{min-height: 500px;}
	
	.main .txt{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.main .txt li{
		width: 100%;
		height: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.main .txt li span.country{font-size: 1.5rem;}

	.main .txt li span.city{font-size: 3rem;}
	
	/* コンテンツ
	---------------------------------------------- */
	.ttl_home01{
		font-size: 3.3rem;
		margin-bottom: 20px;
	}
	
	/* Subject
	---------------------------------------------- */
	.sec_subject .col_r .subject .item{width: 50%;}
	
	/* Other contents
	---------------------------------------------- */
	.sec_other::before{height: 82%;}
	
	.nav_other > div{display: block;}
	
	.other{width: 100%;}
	
	.other p{min-width: 200px;}
	
	
}/*--@media--*/

	
@media only screen and (max-width:414px){ /* 表示領域が414px以下の場合に適用するスタイル */
	
	/* Pick out article
	---------------------------------------------- */
	.article{width: 100%;}
	

}/*--@media--*/