@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/


#container {
	padding-top: 0;
}

.mainVisual #gHeader {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: none;
	background: #FFEFE9;
}

@-webkit-keyframes opa {
	from {
		opacity: 1;
		
	}
	50% {
		opacity: 0;
	}
		
	to {
		opacity: 1;
	}
}

@keyframes opa {
	from {
		opacity: 1;
		
	}
	50% {
		opacity: 0;
	}
		
	to {
		opacity: 1;
	}
}

#gHeader.on {
	-webkit-animation-name: opa;
	animation-name: opa;
	
}

#gHeader.on {
	background: #FFEFE9;
}

.mainVisual {
	height: 715px;
	background: url(../img/index/main_img202512.jpg) no-repeat left 37%;
	background-size: cover;
	position: relative;
	margin-top: 60px
}
.testvisual{
	height: 715px;
	background: url(../img/index/main_img202312.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	margin-top: 90px
}

.mainVisual h2 {
	padding-top: 257px;
	color: #000;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.45;
	text-align: left;
	max-width: 1100px;
	min-width: 928px;
	margin: 0 auto;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
  -1px 1px 0 #fff,  1px -1px 0 #fff,
  1px 0 0 #fff, -1px  0 0 #fff,
  0 1px 0 #fff,  0 -1px 0 #fff;
}
.mainVisual h2 span { width: 492px; float:left; display: block; line-height: 230%}

#main {
	margin-bottom: 30px;
	width: auto;
}

#main .topText {
	margin: 0 auto;
	width: 940px;
	padding: 35px 0 37px;
	color: #8C4040;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

#main .product {
	margin-bottom: 54px;
	padding: 58px 0 43px;
	background: url(../img/common/page_title_bg.jpg) repeat;
}

#main .product .comItemList {
	margin: -8px auto 36px;
	width: 940px;
}

#main .product .comItemList li {
	margin-top: 44px;
}

#main .product .comItemList li .pho {
	box-shadow: 1px 1px 10px rgba(0,0,0,.2);
}

#main .newsBox {
	margin: 0 auto 50px;
	width: 940px;
}

#main .newsBox .ttlBox {
	width: 226px;
	height: 161px;
	float: left;
	text-align: center;
	background-color: #D7D3D7;
}

#main .newsBox .ttlBox h3 {
	padding-top: 34px;
	font-size: 22px;
	font-weight: normal;
}

#main .newsBox .ttlBox h3 span {
	display: block;
	font-size: 10px;
	line-height: 1.2;
}

#main .newsBox .ttlBox .link {
	margin: 30px auto 0;
	width: 76px;
	font-size: 14px;
}

#main .newsBox .ttlBox .link a {
	padding: 2px 0 4px;
	display: block;
	border: 1px solid #909090;
}

.mainVisual .btn {
	position: absolute;
	bottom: 40px;
	right: 46px;
	z-index: 99;
	width: 320px;
	background: #fff;
}

.mainVisual .btn img {
	width: 100%;
}

.mainVisual .btn a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

@media all and (-ms-high-contrast:none){
	#main .newsBox .ttlBox .link a {
		padding: 5px 0 1px;
	}
	
}

#main .newsBox .ttlBox .link a:hover {
	text-decoration: none;
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#main .newsBox ul {
	padding: 13px 30px 0;
	width: 714px;
	min-height: 161px;
	float: right;
	font-size: 14px;
	letter-spacing: 1px;
	background-color: #FFF9F6;
	box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
}

#main .newsBox li {
	padding-top: 20px;
}
	
#main .newsBox li a {
	display: block;
	overflow: hidden;
	text-decoration: none;
}
	
#main .newsBox li span {
	display: block;
}

#main .newsBox li a:hover span {
	text-decoration: underline;
}

#main .newsBox li .date {
	padding: 0;
	float: left;
}

#main .newsBox li span {
	padding-left: 7.7em;
}
#main .product .banner{ margin: 30px auto 50px; text-align: center}
#main .product .banner:hover{
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";}
#main .product .banner img{ max-width: 100%;}
div.pickup-banner{ width: 480px; margin: 50px auto; text-align: center; overflow: hidden}
div.pickup-banner img{ width: 100%; height: auto}
ul.pickup-banner{ width: 1000px; margin: 50px auto; text-align: center; overflow: hidden}
ul.pickup-banner li{ width: 480px; display: block; margin: 30px 20px 30px 0; float: left}
ul.pickup-banner li img{ width: 100%}
ul.pickup-banner li a:hover{
	opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)"; }
ul.pickup-banner li:nth-child(2n){ margin-right: 0}
.product-title{ width: 940px; overflow: hidden; margin: 0 auto}
.product-title h3.headLine03{ width: 160px; float: left; text-align: left}
.product-title .search{ width: 255px; float: right}
.pickup-banner p{ margin: 0 auto 20px;}
.youtube{ width: 795px; margin: 30px auto;}
.video{ width: 100%;
  aspect-ratio: 16 / 9;}
.video iframe {
  width: 100%;
  height: 100%;
}
/* slider */
.sliderArea {
max-width:100%;
margin: 0 auto;
padding: 0 25px;
}

.slick-slide img {
height: auto;
width: auto;
margin: 0 auto;
max-height: 200px;
}
.slick-prev,
.slick-next {
top:-200%;
z-index: 1;
}
.slick-prev:before,
.slick-next:before {
color: #000;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: 1;
}
.slick-current {
opacity: 1;
}
.thumb {
margin: 5px 0 0;
}
.thumb .slick-slide {
cursor: pointer;
}
.thumb .slick-slide img{
height: auto;
width: auto;
margin: 0 auto;
max-height: 40px;
}
.thumb .slick-slide:hover {
opacity: .7;
}


/*次矢印のアイコンフォントメイン*/
.slider img.prev-arrow-main{ width: 10px; position: absolute; right: -22px; top: 50%}
.slider img.next-arrow-main{ width: 10px; position: absolute; left: -22px; top: 50%}

/*次矢印のアイコンフォントサムネイル*/
.thumb img.prev-arrow{ width: 10px; position: absolute; right: -22px; top: 41%}
.thumb img.next-arrow{ width: 10px; position: absolute; left: -22px; top: 41%}

/*次矢印のアイコンフォント間取り*/
.thumb_slider_room img.prev-arrow-room{ width: 10px; position: absolute; right: -22px; top: 47%}
.thumb_slider_room img.next-arrow-room{ width: 10px; position: absolute; left: -22px; top: 47%}

.slick-dotted.slick-slider{ margin: 12px 0}

.slider img.prev-arrow{ top: 35%}
.slider img.next-arrow{ top: 35%}
.thumb-item-nav li{ margin-right: 4px}
	
.slider{ margin: 60px auto 5px; width: 940px; }
.thumb{ margin: 10px auto 100px; width: 940px;}
.slick-prev,.slick-next{top: 50%;}
.thumb .slick-slide { height: 127px; margin-right: 10px; background:#F2F2F2}
.slick-slide img{
    height: auto;
    width: auto;
	margin: 0 auto;
	min-height:100;
	max-height: 100%;}
ul.slider .slick-slide{ height: 540px;}
.thumb .slick-slide img{ height: auto; width: 100%; margin: 0 auto; max-height: 140px; }


@media all and (min-width: 0) and (max-width: 767px) {
	div.pickup-banner{ width: 100%; margin: 50px auto; text-align: center;}
	ul.pickup-banner{ width: 100%; margin: 50px auto; text-align: center;}
	ul.pickup-banner li{ width: 100%; display: block; margin: 20px auto;}
	.youtube{ width: 100%; margin: 10px auto;}
	
	.mainVisual {
		height: 375px;
		background: url(../img/index/sp_main_img202512.jpg) no-repeat center top;
		background-size: cover;
		padding-top: 64px;
		margin-top: 29px
	}
	.testvisual {
		height: 375px;
		background: url(../img/index/sp_main_img202312.jpg) no-repeat center center;
		background-size: cover;
		padding-top: 64px;
		margin-top: 60px
	}
	
	.mainVisual h2 {
		padding-top: 67px;
		font-size: 21px;
		line-height: 1.45;
	}
	.mainVisual h2 {
	color: #000;
	font-weight: bold;
	text-align: center;
	max-width: 87%;
	min-width: 87%;
	margin: 0 auto;
	}
	.mainVisual h2 span { width: 100%; float: none; display: block; line-height: 190%}
	
	#main {
		margin-bottom: 0;
		width: auto;
	}
	
	#main .topText {
		margin: 0;
		width: auto;
		padding: 25px 0 15px;
		line-height: 1.64;
	}
	
	#main .product {
		margin: 0 -30px;
		padding: 0 30px 72px;
		background: url(../img/common/page_title_bg.jpg) repeat;
	}
	
	#main .product .comItemList {
		margin: 0 0 38px;
		width: auto;
	}
	
	#main .product .comItemList li {
		margin-top: 25px;
		font-size: 18px;
	}
	
	#main .product .comItemList li .pho {
		margin-bottom: 16px;
		box-shadow: 1px 1px 10px rgba(0,0,0,.2);
	}
	
	#main .newsBox {
		margin: 0 -30px 50px;
		width: auto;
	}
	
	#main .newsBox .ttlBox {
		padding: 25px 30px 20px;
		width: auto;
		height: auto;
		float: none;
		text-align: left;
		background-color: #D7D3D7;
	}
	
	#main .newsBox .ttlBox h3 {
		margin-top: -8px;
		padding: 0;
		float: left;
		font-size: 21px;
		font-weight: normal;
	}
	
	#main .newsBox .ttlBox h3 span {
		font-size: 10px;
		line-height: 1.2;
	}
	
	#main .newsBox .ttlBox .link {
		margin: 0;
		width: 76px;
		float: right;
		font-size: 14px;
		text-align: center;
	}
	
	#main .newsBox .ttlBox .link a {
		padding: 2px 0 4px;
		display: block;
		border: 1px solid #909090;
	}
	
	#main .newsBox .ttlBox .link a:hover {
		text-decoration: none;
		filter: alpha(opacity=100);
		opacity: 1;
	}
	
	#main .newsBox ul {
		padding: 0;
		width: auto;
		min-height: 161px;
		float: none;
		font-size: 13px;
		letter-spacing: 1px;
		background-color: #FFF9F6;
	}
	
	#main .newsBox li{
		padding: 0;
		border-bottom: 1px solid #C7C4C3;
	}

	#main .newsBox li a {
		padding: 14px 30px 15px;
		background: url(../img/common/icon03.png) no-repeat right center;
		background-size: 24px 16px;
	}

	#main .newsBox li a span {
		padding: 0;
	}
	
	#main .newsBox li a .date {
		float: none;
	}

	#main .newsBox li a:hover span {
		text-decoration: none;
	}

	.mainVisual .btn {
		bottom: 26px;
		width: 40%;
		right: 20px
	}
	.mainVisual .btn a:hover {
		filter: alpha(opacity=100);
		opacity: 1;
	}
	.product-title{ width: 100%;  }
	.product-title h3{ text-align:center; width: auto; float: none}
	.product-title .search{ width: 255px; float: none; display: block; margin: 0 auto}
	
	/* slider */
	.sliderArea {
	max-width:470px;
	margin: 0 auto;
	padding: 0 25px;
	}

	.slick-slide img {
	height: auto;
	width: auto;
	margin: 0 auto;
	max-height: 247px;
	}
	.slick-prev,
	.slick-next {
	top:-200%;
	z-index: 1;
	}
	.slick-prev:before,
	.slick-next:before {
	color: #000;
	}
	.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
	}
	.slick-active {
	opacity: 1;
	}
	.slick-current {
	opacity: 1;
	}
	.thumb {
	margin: 5px 0 0; width: 100%;
	}
	.thumb .slick-slide {
	cursor: pointer;
	height: 58px;
	margin-right: 3px
	}
	.thumb .slick-slide img{
	height: auto;
	width: auto;
	margin: 0 auto;
	max-height: 58px;
	}
	.thumb .slick-slide:hover {
	opacity: .7;
	}
	.slider{width: 100%; }

	/*次矢印のアイコンフォントメイン*/
	.slider img.prev-arrow-main{ width: 10px; position: absolute; right: -22px; top: 50%}
	.slider img.next-arrow-main{ width: 10px; position: absolute; left: -22px; top: 50%}

	/*次矢印のアイコンフォントサムネイル*/
	.thumb img.prev-arrow{ width: 10px; position: absolute; right: -22px; top: 41%}
	.thumb img.next-arrow{ width: 10px; position: absolute; left: -22px; top: 41%}

	/*次矢印のアイコンフォント間取り*/
	.thumb_slider_room img.prev-arrow-room{ width: 10px; position: absolute; right: -22px; top: 47%}
	.thumb_slider_room img.next-arrow-room{ width: 10px; position: absolute; left: -22px; top: 47%}

	.slick-dotted.slick-slider{ margin: 12px 0}
	ul.slider .slick-slide{ height: 247px;}

}