@charset "utf-8";

@import url("/kokunai/___common/css/fonts.css");

/* =============================================================================
    reset
============================================================================= */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,span,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym{border:0}strong,em{font-weight:medium}figure{margin:0;padding:0}input:focus,textarea:focus,select:focus,button:focus{outline:none}input,button,textarea,select{color: #323743;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:0;outline:none;font-size:100%}

/* =============================================================================
    common
============================================================================= */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto!important;font-size:62.5%}body{font-size:1.6rem;font-family:"Work Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";color:#323743;font-feature-settings:"palt";line-height:1.5;background:#fff}body *{box-sizing:border-box}input,button,textarea,select{font-family:"Work Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}

/*  共通リンク色・別ウィンドウ
-----------------------------------------------------------*/
a, a:link, a:visited, a:hover{ color: #323743; text-decoration: none; } a.link-txt{ color: #3498DB; text-decoration: underline; }@media screen and (min-width:760px){a.link-txt:hover{text-decoration:none;}}

/*  アイコン
-----------------------------------------------------------*/
.m-ico{display:inline-flex;align-items:center;font-style:normal;vertical-align:middle;font-weight:400}.m-ico:before{position:relative;top:-1px;font-family:'Material Icons Round';content:attr(data-icon);font-size:100%}.m-ico.-arrow{transform:scale(1.3)}@media screen and (min-width:970px){.m-ico.-arrow{transform:scale(1.5)}}

/* 表示・非表示 */
@media screen and (max-width:969px){.pc-only{display:none}}@media screen and (min-width:970px){.sp-only{display:none}}

/*  パンくず
-----------------------------------------------------------*/
.breadcrumbs_wrapper{display:flex;align-items:center}.breadcrumbs_contents{display:block;width:100%}.breadcrumbs_item{display:inline-block;color:#6b6e71;font-size:1.2rem;line-height:2}.breadcrumbs_item.-home{flex-shrink:0;margin-right:2.6666666667vw}.breadcrumbs_inner{margin-bottom:-10px;padding-bottom:10px;overflow-x:auto;white-space:nowrap;width:71vw}.breadcrumbs_item{display:inline-block;color:#323743;line-height:2;margin-right:2.6666666667vw}.breadcrumbs_item a{color:#c0c5cb}.breadcrumbs_item:not(:last-child):after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);display:inline-block;transform:rotate(-45deg);border:1px solid #c0c5cb;border-top:none;border-left:none;vertical-align:middle;content:"";width:1.0666666667vw;height:1.0666666667vw;margin-top:-.7vw;margin-left:1.3333333333vw}a.breadcrumbs_anchor{color:#3498db;font-weight:700}@media screen and (min-width:970px){.breadcrumbs_item.-home,.breadcrumbs_item{margin-right:10px}.breadcrumbs_item:last-child{margin-right:0}.breadcrumbs_inner{width:inherit}.breadcrumbs_item:not(:last-child):after{width:4px;height:4px;margin-top:-3px;margin-left:4px}}.mv .breadcrumbs{position:absolute;left:0;top:0;padding-left:5px;width:100%;background-color:rgba(255,255,255,.5)}@media screen and (min-width:760px){.mv .breadcrumbs{left:10px;padding:2px 10px;width:auto;border-radius:0 0 5px 5px}}.mv .breadcrumbs_item a{color:#323743}.mv .breadcrumbs_item:not(:last-child):after{border-color:#323743}.f-breadcrumbs{margin-top:20px;padding:20px 0;border-bottom:solid 1px #BCBDC2;background:#f5f5f5}

/*  PC/SP切り替え
============================================================================= */
.change_pc{margin-top:25px;text-align:center}.change_pc a{color:#125687;text-decoration:underline}.change_sp{margin-top:50px}

/*  pagetop
============================================================================= */
.page-top{position:fixed;right:20px;bottom:20px;z-index:100;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.page-top a{display:flex;align-items:center;justify-content:center;width:50px;height:50px;font-size:2.4rem;border:1px solid #fff;border-radius:4px;background:rgba(207,240,255,1);transition:opacity .3s}.page-top a:hover{opacity:.6}.page-top.is-active{visibility:visible;opacity:1}

/*  kome
============================================================================= */
p.kome, .kome li{
	display: flex;
	font-size: 1.2rem;
}
p.kome:before, .kome li:before{
	content: "※";
	width: 1em;
	margin-right: .2em;
}




/* =============================================================================
    Slider
============================================================================= */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;width:100%}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);width:100%;height:100%}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-prev,.slick-next{position:absolute;top:50%;display:block;font-size:0;padding:0;cursor:pointer;border:none;outline:none;z-index:2;background:none}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}.slick-prev:before,.slick-next:before{font-size:3rem;line-height:1;opacity:.75;color:#3d2502;font-family:'Material Icons Round'}.slick-prev{left:-50px}.slick-next{right:-50px}.slick-prev:before{content:"\e5e0"}.slick-next:before{content:"\e5e1"}.slick-dotted.slick-slider{padding-bottom:50px}.slick-dots{position:absolute;bottom:15px;display:flex;justify-content:center;width:100%}.slick-dots li{position:relative;display:inline-block;width:10px;height:10px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:10px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}.slick-dots li button:hover,.slick-dots li button:focus{outline:none}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}.slick-dots li button:before{font-size:1rem;line-height:20px;position:absolute;top:0;left:0;content:'●';font-family:Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}.slick-dots>li:first-child:last-child{display:none}



/*  レイアウト
============================================================================= */
.main *{
	outline: none!important;
}
.main *:focus {
    outline: none!important;
}
.main img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* セクション */
.sect{
	padding: 30px 0;
}
.inner{
	padding: 0 10px;
}
@media screen and (min-width: 760px){
	.sect{
		padding: 80px 0;
	}
	.inner{
		 margin: 0 auto;
		 width: 100%;
		 max-width: 1300px;
	}
}

/* サブセクション */
.sect-sub{
	margin-top: 50px;
}
.sect-sub.-dotline:not(:first-of-type){
	margin-top: 30px;
	padding-top: 30px;

}
.sect-sub.-wline:not(:first-of-type){
	margin-top: 30px;
	padding-top: 30px;
	border-top: solid 2px #000;
}

@media screen and (min-width: 760px) {
	.sect-sub{
		margin-top: 50px;
	}
	.sect-sub.-dotline:not(:first-of-type),
	.sect-sub.-wline:not(:first-of-type){
		margin-top: 10px;
		padding-top: 30px;
	}
}


/*  見出し
============================================================================= */
.ttl{
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
}
@media screen and (min-width: 760px){
	.ttl{
		font-size: 3.0rem;
	}
}

/* メインタイトル */
.ttl-main{
	position: relative;
	text-align: center;
}
.ttl-main:before, .ttl-main:after{
	position: absolute;
	bottom: -20px;
	content: "";
	display: inline-block;
	z-index: -1;
}
.ttl-main:before{
	left: 0;
	width: 40%;
	height: 0;
}
.ttl-main:after{
	right: 0;
	width: 40%;
	height: 0;
}
.ttl-main em{
	display: inline-block;
	margin-top: 5px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
}
.ttl-main_txt{
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 1.6rem;

}


@media screen and (min-width: 760px){

	}
	.ttl-main em{
		font-size: 4.5rem;
	}
	.ttl-main_txt{
		font-size: 1.7rem;
	}
}

/* サブタイトル */
.ttl_sub{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px;
	font-size: 1.4rem;
	font-weight: bold;
	border: solid 1px #888;
}
.ttl_sub:before{
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: -1;
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #e0fcff;
}
.ttl_sub-arrow{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 17px;
	border: solid 1px #e0fcff;
}
.ttl_sub-arrow:before{
	position: absolute;
	right: -1px;
	top: 0;
	content: "";
	display: inline-block;
	width: 1px;
	height: 15px;
	border-right: solid 1px #888;
	transform-origin: 100% 0;
	transform: rotateZ(35deg);
}
.ttl_subtxt{
	position: relative;
	display: inline-block;
	padding: 0 20px 15px;
	font-weight: bold;
	line-height: 1.3;
}
.ttl_subtxt:before{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: -1;
	content: "";
	display: inline-block;
	width: 100%;
	height: 40px;
	background: linear-gradient(transparent 80%,#ffe500 60%)
}
.ttl_subtxt-fs{
	font-size: 1.4rem;
	font-weight: bold;
}

.-yellow .ttl_sub:before{ background: #fffcea; }
.-blue .ttl_sub:before{ background: #e8faff; }
.-purple .ttl_sub:before{ background: #e9defa; }
.-pinkred .ttl_sub:before{ background: #f9e4e6; }
.-orange .ttl_sub:before{ background: #fff8da; }
.-orangedark .ttl_sub:before{ background: #ffddd1; }
.-yellow .ttl_sub-arrow{ border-color: #faf7e6; }
.-blue .ttl_sub-arrow{ border-color: #e8faff; }
.-purple .ttl_sub-arrow{ border-color: #e9defa; }
.-pinkred .ttl_sub-arrow{ border-color: #f9e4e6; }
.-orange .ttl_sub-arrow{ border-color: #fff8da; }
.-orangedark .ttl_sub-arrow{ border-color: #ffddd1; }

@media screen and (min-width: 760px){
	.ttl_sub{
		padding: 10px 50px;
		font-size: 2.0rem;
	}
	.ttl_sub:before{
		left: 8px;
		top: 8px;
	}
	.ttl_subtxt-fs{
		font-size: 2.4rem;
	}	
}

/*  ボタン
============================================================================= */
.fbtn{
	position: relative;
	margin: 20px auto 0;
	max-width: 500px;
}
.fbtn a{
	position: relative;
	z-index: 1;
	display: block;
	padding: 15px 20px;
	text-align: center;
	font-weight: bold;
	border-radius: 50vw;
	border: solid 1px #777;
	background: #fff;
	transition: opacity 0.3s ease;
}
.fbtn .m-ico{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3.0rem;
	line-height: 1;
}

@media screen and (min-width: 760px) {
	.fbtn{
		margin: 50px auto 0;
	}
	.fbtn + .fbtn{
		margin-top: 20px;
	}
	.fbtn a:hover{
		opacity: .6;
	}
}




/*  キャンペーン
============================================================================= */
.sect.-feature + .sect.-feature{
	padding-top: 0;
}
.cpn-cas{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0 0 -10px;
}
.cpn-cas_item{
	position: relative;
	margin: 10px 0 0 10px;
	width: calc(100% / 2 - 10px);
    background: #fff;
}
.cpn-cas_item > a{
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	color: #323743;
	transition: all 0.3s ease;
}
.cpn-cas_img{
	order: -1;
}
.cpn-cas_ttl{
	margin-top: 10px;
	font-weight: bold;
	line-height: 1.4;
}
.cpn-cas_ttl span{
	font-weight: bold;
}

.cpn-cas_txt{
	margin-top: 5px;
	line-height: 1.5;
}
.cpn-cas_ttl + .cpn-cas_txt{
	font-size: 1.4rem;
}

@media screen and (min-width: 760px) {
	.cpn-cas{
		margin: 20px 0 0 -20px;
	}
	.cpn-cas_item{
		margin: 30px 0 0 20px;
		width: calc(100% / 4 - 20px);
		max-width: 260px;
		background: #fff;
	}
	.cpn-cas:after{
		content: "";
		margin: 0 0 0 20px;
		width: calc(100% / 4 - 20px);
		max-width: 260px;
	}
	.cpn-cas:before{
		content: "";
		order: 1;
		margin: 0 0 0 20px;
		width: calc(100% / 4 - 20px);
		max-width: 260px;
	}
	.cpn-cas_item > a:hover{
		opacity: .6;
		color: #323743;
	}
}
