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

@media print, screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
	
	/* ------------------------------------------------------------

	トップページ

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

	/* グローバルナビアクティブ
	---------------------------------------------- */
	.nav_global01 ul li.g01 a{color: #3898F8;}

	/* バナーエリア
	---------------------------------------------- */
	.bnr_container{
		padding: 65px;
		background: #a0cff9;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bnr_container p{
		font-size: 2.6rem;
		font-weight: bold;
		color: #0058B2;
		position: relative;
		padding-right: 60px;
	}
	.bnr_container p span{
		padding-left: 0.5em;
	}
	.bnr_container p::before{
		content: "";
		display: block;
		width: 38px;
		height: 29px;
		background: url(/img/home/arrow.png);
		background-size: contain;
		position: absolute;
		top: 4px;
		right: 15px;
	}
	.bnr_container a.bnr{
		width: 400px;
		flex:none;
		box-shadow: 5px 5px 10px rgba(16,74,133,0.5);
		background: white;
	}
	.bnr_container a.bnr img{width: 100%;}


	.bnr_container a.bnr:hover img{
		filter: brightness(1.05) contrast(0.97);
		opacity: .8;
	}

	
	/* メインビジュアル
	---------------------------------------------- */
	.main{
		position: relative;
		height: 50vw;
        min-height: 600px;
        background: url("../img/home/pc/bg_main01.jpg") no-repeat 0 0;
        background-size: cover;
	}
	
	.txt_main01{
		position: absolute;
        top: 10.416vw;
		left: 3.125vw;
        width: 665px;
	}
    
    .txt_main01 img{width: 100%;}
	
	.txt_main01.sp{display: none;}

	/* CONTENT
	---------------------------------------------- */
	.content{
		width: 100%;
		max-width: 1460px;
		margin: 0 auto;
		padding: 70px 0 80px;
	}
    
    .wrap_nav01{margin-bottom: 60px;}
    
    .wrap_nav01 a{
        display: flex;
        justify-content: space-between;
        width: 690px;
        margin: 0 auto;
        color: #333;
    }
    
    .wrap_nav01 a .figure_cont,
    .wrap_nav01 a .inner{ width: 327px;}
    
    .wrap_nav01 a .label_cont{margin: 0;}
    
    .wrap_nav02{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	.wrap_nav02 .nav_home_inner{
		width: 25%;
		padding: 0 20px;
	}
	
	.wrap_nav02 .nav_home_inner a{
		display: block;
		color: #333;
	}
    
    .figure_cont{position: relative;}
	
	.figure_cont img{
        width: 100%;
        border: 1px solid #CCCCCC;
    }
	
	.figure_cont figcaption{
        background: rgba(7,47,82,0.7);
		width: 100%;
		height: 100%;
		font-family: 'Oswald';
		font-size: 2rem;
		color: #FFF;
		line-height: 1;
        pointer-events: none;
		letter-spacing: 0.05em;
		display:-webkit-flex;
		display:flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
	}
	
    .nav_home a:hover .figure_cont figcaption{opacity: 1;}
    
	.label_cont{
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
		display: -webkit-flex;
		display: flex;
		width: 240px;
		position: relative;
        margin-top: -20px;
	}
	
	.label_cont .txt{
		background: #FFF;
        width: 200px;
		padding: 13px 0;
		text-align: center;
        font-weight: bold;
		font-size: 1.4rem;
        line-height: 1;
	}
	
	.label_cont .arrow{
		background: url("../img/ico_arrow02.jpg") no-repeat right center;
		background-size: contain;
		width: 40px;
		height: 40px;
	}
	
	.lead_cont{
		font-size: 1.5rem;
		line-height: 1.4;
		letter-spacing: 0.15rem;
		margin-top: 10px;
	}
	
}/*--@media--*/

@media only screen and (min-width:768px) and (max-width:1200px){ /* 表示領域が1200以下で768px以上の場合に適用するスタイル */
    .txt_main01{
        top: 124.992px;
        left: 36.968px;
    }

}/*--@media--*/


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

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

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

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

	トップページ

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

		/* バナーエリア
	---------------------------------------------- */
	.bnr_container{
		padding: 30px 20px;
		background: #a0cff9;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.bnr_container p{
		font-size: 2.2rem;
		font-weight: bold;
		color: #0058B2;
		position: relative;
		text-align: center;
		padding-bottom: 50px;
	}
	.bnr_container p span{display: block;}
	.bnr_container p::before{
		content: "";
		display: block;
/*		width: 38px;
		height: 29px;*/
		width: 30px;
		height: 22.89px;
		background: url(/img/home/arrow.png);
		background-size: contain;
		position: absolute;
		bottom: 4px;
		left: 50%;
		transform: rotate(90deg) translateX(-50%) translateY(50%);
	}
	.bnr_container a.bnr{
		width: 100%;
		flex:none;
		box-shadow: 5px 5px 10px rgba(16,74,133,0.5);
		background: white;
	}
	.bnr_container a.bnr img{width: 100%;}



	/* メインビジュアル
	---------------------------------------------- */
	.main{
		position: relative;
		height: 166.66vw;
        background: url("../img/home/sp/bg_main01.jpg") no-repeat 0 0;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
	}
	
	.txt_main01{width: 89.333vw;}
	
	.txt_main01 img{width: 100%;}
	
	.txt_main01.pc{display: none;}
	
	/* CONTENT
	---------------------------------------------- */
	.content{padding: 45px 25px 75px;}
    
    .wrap_nav01{
        max-width: 360px;
        margin: 0 auto 45px;
    }
    
    .wrap_nav01 a{
        display: block;
        color: #333;
    }
	
    .wrap_nav02{
        max-width: 360px;
        margin: 0 auto;
    }
    
	.nav_home_inner{margin-bottom: 45px;}
	
	.nav_home_inner:last-of-type{margin-bottom: 0;}
	
	.nav_home_inner a{
		display: block;
		color: #333;
	}
	
	.figure_cont img{
        width: 100%;
        border: 1px solid #CCC;
    }
	
	.figure_cont figcaption{display: none;}
	
	.label_cont{
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		display: -webkit-flex;
		display: flex;
		margin-top: -22px;
		width: calc(100% - 30px);
		position: relative;
	}
	
	.label_cont .txt{
		width: calc(100% - 45px);
        height: 45px;
		background: #FFF;
		font-weight: bold;
		text-align: center;
		font-size: 1.9rem;
        line-height: 1;
		white-space: nowrap;
		display:-webkit-flex;
		display:flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.label_cont .arrow{
		background: url("../img/ico_arrow02.jpg") no-repeat right 0;
		background-size: contain;
		width: 45px;
		height: 45px;
	}
	
	.lead_cont{
		line-height: 1.4;
		margin-top: 15px;
	}
	

}/*--@media--*/



@media screen and (max-width: 340px){ /* 表示領域が340px以下の場合に適用するスタイル */
	
	/* CONTENT
	---------------------------------------------- */
	.nav_home_inner .label .txt{font-size: 1.5rem;}
	
	
}/*--@media--*/