@charset "UTF-8";
/* このCSSは[php/setting_basic.php]により生成されます。 */

/********** Font **********/

.font-awesome::before,.font-awesome::after{font-weight:900;font-family:"Font Awesome 6 Free"}
.popup-youtube::after{font-weight:400;font-family:"Font Awesome 6 Brands"}
body,
.font-normal{font-family:"メイリオ","Meiryo","游ゴシック体","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","verdana",sans-serif}
.font-goc{font-family:"游ゴシック体","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","verdana",sans-serif}
.font-min{font-family:"游明朝",YuMincho,"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif}
.font-maru{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",sans-serif}
.font-pop{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO",sans-serif}

/********** カラーセット **********/

.bg_color-00{background-color:inherit;color:inherit}
#mainview_wrap,
.bg_color-01{background-color:rgb(198,198,198)}

@media (min-width: 576px) {
	.bg_color-sm-00{background-color:inherit;color:inherit}
	.bg_color-sm-01{background-color:rgb(198,198,198)}
}
@media (min-width: 768px) {
	.bg_color-md-00{background-color:inherit;color:inherit}
	.bg_color-md-01{background-color:rgb(198,198,198)}
}
@media (min-width: 1024px) {
	.bg_color-lg-00{background-color:inherit;color:inherit}
	.bg_color-lg-01{background-color:rgb(198,198,198)}
}
@media (min-width: 1280px) {
	.bg_color-xl-00{background-color:inherit;color:inherit}
	.bg_color-xl-01{background-color:rgb(198,198,198)}
}
@media (min-width: 1400px) {
	.bg_color-xxl-00{background-color:inherit;color:inherit}
	.bg_color-xxl-01{background-color:rgb(198,198,198)}
}

/********** メインビュー **********/

#mainview_wrap #mainview_slider{
	z-index:1;
}
#mainview_wrap .slide_caption_wrap{
	z-index:2;
	top:0;
	right:0;
	bottom:0;
	left:0;
	pointer-events:none;
}
#mainview_wrap .slide_caption_inner{padding:32px 64px;}
#mainview_wrap .slide_caption_inner *{pointer-events: auto}
#mainview_slider .slide_item{padding:8px}
#mainview_slider .slide_img_wrap{border-radius:8px;}
#mainview_slider .slide_img_wrap::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	background:rgba(0,0,0,0.37);
	border-radius:8px;
}
#mainview_slider .slide_img{
	border-radius:8px;
}
#mainview_slider .slick-prev,
#mainview_slider .slick-next {
	position: absolute;
	z-index: 5;
	border: none;
	width: 32px;
	height: 32px;
	top:50%;
	transform: translateY(-50%);
	border-radius:50%;
	background: rgba(10,10,10,0.4);
	text-indent: -9999px;
	cursor: pointer;
	transition: background 0.4s;
}
#mainview_slider .slick-prev {left:16px}
#mainview_slider .slick-next {right:16px}
#mainview_slider .svg-icon {width:13px;fill:#ffffff}
#mainview_dots{
	width:100%;
	position: absolute;
	left: 0;
	bottom: 16px;
	z-index:1000;
}
#mainview_dots .slick-dots{
	display: flex !important;
	justify-content:center;
	gap: 8px;
	margin:1em 0;
	padding:0;
	list-style:none
}
#mainview_dots .slick-dots button {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width: 16px;
	height: 16px;
	padding:0;
	border:none;
	background:none;
	font-size:0;
	cursor: pointer;
}
#mainview_dots .slick-dots button::after{
	content:"";
	display:block;
	flex:0 0 100%;
 	transition:all .4s ease-out;
	border:1px solid #e0e0e0;
	height:100%;
	border-radius:2px;
	background: #ffffff;
}
#mainview_dots .slick-dots li.slick-active button::after{
	background: #424242;
}

@media(min-width:768px){
}

@media(min-width:1024px){
	#mainview_slider .slide_img_wrap{
		height:calc(100svh - 16px);
	}
	#mainview_dots .slick-dots button {
		width: 12px;
		height: 12px;
	}
	#mainview_dots .slick-dots button:hover::after{
		background: #424242;
	}
}

@media(min-width:1280px){
	#mainview_wrap .slick-list{
		padding: 0 52px!important;
	}
#mainview_slider .slide_item{padding:8px 4px}
	#mainview_wrap .slick-prev,
	#mainview_wrap .slick-next {
		width:48px;
		height:auto;
		transform: translateY(0);
		top:8px;
		bottom:8px;
	}
	#mainview_wrap .slick-prev {
		left: 0;
		border-radius:0 8px 8px 0;
	}
	#mainview_wrap .slick-next {
		right: 0;
		border-radius:8px 0 0 8px;
	}
}

@media(min-width:1440px){
	#mainview_wrap .slick-list{padding: 0 calc((100vw - 1280px) / 2 + 4px) !important;}
	#mainview_wrap .slick-prev,
	#mainview_wrap .slick-next {
		height:auto;
		transform: translateY(0);
		width:calc((100vw - 1280px) / 2);
	}
	#mainview_wrap .svg-icon{width:24px}
}

/********** メインビュー カスタムCSS **********/

@media all and (min-width:1024px),print {
#mainview_slider .slide_img_wrap{max-height:720px}
}