@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; width:15px; height:3px; margin:0 3px; background:#ddd; border-radius:0; opacity:1; vertical-align:top; transition:.2s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#eee;}
.swiper-pagination-bullet-active{position:relative; width:25px; height:3px; margin:0 3px; background:#555;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{background:#666;}
.swiper-pagination-fraction{bottom:0;}
.swiper-button-next, .swiper-button-prev{position:absolute; width:25px; height:47px; top:50%; left:auto; right:auto; margin:0; margin-top:-23.5px; padding:0; transition:opacity .2s;}
.swiper-button-prev{left:0;}
.swiper-button-prev.gray{background:url('../images/ico_prev_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-prev.white{background:url('../images/ico_prev_white.png') no-repeat center top; background-size:100%;}
.swiper-button-next{right:0;}
.swiper-button-next.gray{background:url('../images/ico_next_gray.png') no-repeat center top; background-size:100%;}
.swiper-button-next.white{background:url('../images/ico_next_white.png') no-repeat center top; background-size:100%;}
.swiper-button-prev:focus, .swiper-button-prev:hover{opacity:0.7;}
.swiper-button-next:focus, .swiper-button-next:hover{opacity:0.7;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{background-position:center bottom !important; opacity:1;}

/* visual */
#mainVisual{position:relative; width:100%; margin:0 auto; background:transparent; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{width:100%; height:100%; padding:0;}
#mainVisual .swiper-container{width:100%; /*max-width:1920px;*/ height:100%;}
#mainVisual .imgBox{}
#mainVisual .imgBox img{width:100%;}
#mainVisual .imgBox img.pc{display:inline-block;}
#mainVisual .imgBox img.mobile{display:none;}
#mainVisual .txtBox{display:inline-block; position:absolute; width:80%; top:50%; left:200px; margin-top:-30px; transform:translateY(-50%); z-index:2;/* cursor:default;*/}
#mainVisual .txtBox p{display:block; line-height:1.6; margin:0 auto 28px; color:#FFF; font-size:2.4rem; word-break:keep-all;text-align:center}
#mainVisual .txtBox p.ti{line-height:1; margin:0 auto 32px; font-size:3.2rem; font-weight:bold;}
#mainVisual .bgBox{position:absolute; width:100%; height:100%; bottom:0;}
#mainVisual .bgBox .inner{height:100%;}
#mainVisual .bgBox .control{position:absolute; width:100%; bottom:50%;}
#mainVisual .bgBox .control .swiper-button-prev{display:inline-block; left:28px;}
#mainVisual .bgBox .control .swiper-button-next{display:inline-block; right:28px;}
#mainVisual .pager{display:inline-block; position:relative; width:100%; line-height:1; margin:20px auto; text-align:center;}
#mainVisual .pager .swiper-pagination-bullet{width:auto; height:auto; padding:12px 20px; background:transparent; border-bottom:1px solid #222; color:#222; font-size:.938rem;}
#mainVisual .pager .swiper-pagination-bullet-active{border-bottom:1px solid #ff8a00; color:#ff8a00; font-weight:500;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:#fff; z-index:1;}
#mainContents .main_title{margin:0 auto 40px;}
#mainContents .main_title h2{margin:0 auto 12px; font-size:2rem; font-weight:bold;}
#mainContents .main_title p, #mainContents .main_title a{color:#888; font-size:1.3rem;}

#mainContents .area01,
#mainContents .area02,
#mainContents .area022,
#mainContents .area03,
#mainContents .area04,
#mainContents .area05,
#mainContents .area06{clear:both; position:relative; width:100%; padding:60px 0; text-align:center;}

#mainContents .area01{}
#mainContents .area01 .inner{max-width:1150px; padding:0;}
#mainContents .area01 .prdlist.new{display:flex; gap:24px;}
#mainContents .area01 .prdlist.new li{}
#mainContents .area01 .prdlist.new li.banner01{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; flex:1;}
#mainContents .area01 .prdlist.new li.banner02{flex:2;}
#mainContents .area01 .prdlist.new li.banner03{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; flex:1;}
#mainContents .area01 .prdlist.new li {display:block;border:0px solid #DDD}
#mainContents .area01 .prdlist.new span {display:block;border:1px solid #DDD;font-size:1.2em;margin:10px 0}
#mainContents .area01 .prdlist.new span:hover{border:1px solid #000;}
#mainContents .area01 .prdlist.new p {padding-bottom:15px}
#mainContents .area01 .prdlist.new li a{display:block;border:0px solid #DDD;}
#mainContents .area01 .prdlist.new li a img{width:100%; height:100%}
#mainContents .area01 .prdlist.new .banner02 p {padding:19px;font-size:1.5em}

#mainContents .area02{}
#mainContents .ar1 {background:#F1F1F1}
#mainContents .ar1 a{margin:0px 3px !important;border:none !important;}

#mainContents .ar3 {background:#F1F1F1}
#mainContents .ar3 a{margin:0px 3px !important;border:none !important;}

#mainContents .area02 .prdlist.inch{display:flex; flex-wrap:wrap;}
#mainContents .area02 .prdlist.inch li{flex:1 1 33%; margin:0 auto 40px;}
#mainContents .area02 .prdlist.inch li p.ti{margin:0 auto 20px; font-size:1.131rem; font-weight:bold;}
#mainContents .area02 .prdlist.inch li .box{width:100%;}
#mainContents .area02 .prdlist.inch li .box a{display:inline-block; width:46%;margin:0 0px;border:1px solid #ddd;vertical-align:top;}
#mainContents .area02 .prdlist.inch li .box a:hover{border:1px solid #000}
#mainContents .area02 .prdlist.inch li .box a p{height:70px;padding:6px 10px 0px 10px;line-height:126%;font-size:1.1em;overflow:hidden;}
#mainContents .area02 .prdlist.inch li .box a img{width:100%;height:100%;border:0px solid #ddd}\


#mainContents .area022{}
#mainContents .area022 .prdlist.inch{display:flex; flex-wrap:wrap;}
#mainContents .area022 .prdlist.inch li{flex:1 1 33%; margin:0 auto 40px;}
#mainContents .area022 .prdlist.inch li p.ti{margin:0 auto 20px; font-size:1.131rem; font-weight:bold;}
#mainContents .area022 .prdlist.inch li .box{width:100%;}
#mainContents .area022 .prdlist.inch li .box a{display:inline-block; width:46%;margin:0 0px;border:1px solid #ddd;vertical-align:top;}
#mainContents .area022 .prdlist.inch li .box a:hover{border:1px solid #000}
#mainContents .area022 .prdlist.inch li .box a p{height:70px;padding:6px 10px 0px 10px;line-height:126%;font-size:1.1em;overflow:hidden;}
#mainContents .area022 .prdlist.inch li .box a img{width:100%;height:100%;border:0px solid #ddd}

#mainContents .area03{padding-bottom:120px;}
#mainContents .area03 .main_title{float:left; width:22%; text-align:left;}
#mainContents .area03 .main_title h2{margin:0 auto 20px;}
#mainContents .area03 .main_title p{line-height:1.6; padding:0 0 0 4px; font-size:1.125rem; word-break:keep-all;}
#mainContents .area03 .tab{float:right; width:26%;}
#mainContents .area03 .tab ul{}
#mainContents .area03 .tab ul li{}
#mainContents .area03 .tab ul li .tabLink{display:block; position:relative; width:100%; line-height:1; padding:16px 4px 16px 32px; background:none; border-bottom:1px solid #222; color:#222; font-size:0.9rem; text-align:left; cursor:pointer; outline:none;line-height:120%;font-weight:500}
#mainContents .area03 .tab ul li .tabLink:focus, #mainContents .area03 .tab ul li .tabLink:hover{background:#f9f9f9;}
#mainContents .area03 .tab ul li .tabLink span{display:inline-block; position:absolute; left:4px; color:#888;}
#mainContents .area03 .tab ul li .tabLink.active{border-bottom:2px solid #ff8a00; font-weight:600;}
#mainContents .area03 .tab ul li .tabLink.active span{color:#ff8a00;}
#mainContents .area03 .tabCon{display:block; float:left; width:52%; margin:0 auto; padding:0 2vw;}
#mainContents .area03 .tabCon .tabItem{display:none;}
#mainContents .area03 .tabCon .tabItem.active{display:block;}
#mainContents .area03 .tabCon .tabItem a{}
#mainContents .area03 .tabCon .tabItem a img{width:100%; max-width:800px;border:1px solid #919191;padding:0px}

#mainContents .area04{background:#eee;}
#mainContents .area04 ul.review{display:flex; flex-wrap:wrap; gap:28px;}
#mainContents .area04 ul.review li{display:inline-block; flex:1 1 20%;}
#mainContents .area04 ul.review li a{}
#mainContents .area04 ul.review li a .imgW{}
#mainContents .area04 ul.review li a .imgW img{width:100%;}
#mainContents .area04 ul.review li a .txtW{padding:20px; background:#fff;}
#mainContents .area04 ul.review li a .txtW p{line-height:1.4; color:#494949; font-size:.875rem;}
#mainContents .area04 ul.review li a .txtW p.ti{margin:0 auto 12px; color:#222; font-size:1rem; font-weight:500;height:60px}

#mainContents .area05{background:#eee;}
#mainContents .area05 ul.sns{}
#mainContents .area05 ul.sns li{display:inline-block; flex-wrap:wrap; padding:0 4vw;}
#mainContents .area05 ul.sns li a{color:#494949; text-align:center;}
#mainContents .area05 ul.sns li a:focus, #mainContents .area05 ul.sns li a:hover{color:#ff8a00;}
#mainContents .area05 ul.sns li a .imgBox{display:inline-block; width:80px; height:80px; margin:0 auto 16px; background:#888; border-radius:12px; transition:all .2s; vertical-align:middle; overflow:hidden;}
#mainContents .area05 ul.sns li a .imgBox img.ico{width:100%;}
#mainContents .area05 ul.sns li a .imgBox img.ico.youtube{background:#ff0000;}
#mainContents .area05 ul.sns li a .imgBox img.ico.naverblog{background:#18d86d;}
#mainContents .area05 ul.sns li a .imgBox img.ico.facebook{background:#1778f2;}
#mainContents .area05 ul.sns li a .imgBox img.ico.instagram{background:#d13078;}
#mainContents .area05 ul.sns li a p{}

#mainContents .area06{padding-bottom:120px; background:#eee;}
#mainContents .area06 ul.banner.best{display:flex; flex-wrap:wrap; gap:24px;}
#mainContents .area06 ul.banner.best li{flex:1;}
#mainContents .area06 ul.banner.best li img{width:100%;height:100%}

@media only screen and (max-width:1279px){
	.swiper-button-next, .swiper-button-prev{width:18px; height:34px; margin-top:-17px;}

	#mainVisual{position:relative; min-width:auto; max-height:auto; min-height:auto;}
	#mainVisual .txtBox{left:60px;}
	#mainVisual .bgBox .control .swiper-button-prev{left:20px;}
	#mainVisual .bgBox .control .swiper-button-next{right:20px;}

	#mainContents{min-width:960px;}

	#mainContents .area01 .inner{width:82%; min-width:auto;}

	#mainContents .area02 .prdlist.inch li{flex:1 1 48%;}
}

@media only screen and (max-width:1023px){
	#mainVisual{width:100%;}
	#mainVisual .imgBox img.pc{display:none;}
	#mainVisual .imgBox img.mobile{display:inline-block;}
	#mainVisual .txtBox{width:64%;}
	#mainVisual .bgBox .control .swiper-button-prev{left:12px;}
	#mainVisual .bgBox .control .swiper-button-next{right:12px;}
	#mainVisual .pager{margin:8px auto;}

	#mainContents{min-width:100%;}
	#mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04, #mainContents .area05, #mainContents .area06{padding:40px 0;}
	#mainContents .main_title{margin:0 auto 28px;}

	#mainContents .area01 .prdlist.new{display:block; gap:0;font-size:1.0em}
	#mainContents .area01 .prdlist.new li.banner01{flex-direction:row; gap:8px; margin:0 auto 8px;}
	#mainContents .area01 .prdlist.new li.banner02{margin:0 auto 8px;}
	#mainContents .area01 .prdlist.new li.banner03{flex-direction:row; gap:8px;}
	#mainContents .area01 .prdlist.new li a{flex:1 1 48%;}
	#mainContents .area01 .prdlist.new .banner02 p {padding:19px;font-size:1.0em}

	#mainContents .area04 ul.review{gap:20px;}

	#mainContents .area06 ul.banner.best{gap:20px;}
}

@media only screen and (max-width:768px){
	#mainVisual .txtBox{width:100%; max-width:360px; left:0; margin-top:0; padding:0 28px;}
	#mainVisual .txtBox p{margin:0 auto 12px; font-size:1.4rem;}
	#mainVisual .txtBox p.ti{font-size:1.8rem;}
	#mainVisual .bgBox .control{display:none;}
	#mainVisual .pager .swiper-pagination-bullet{padding:12px;}

	#mainContents .area02 .prdlist.inch li{flex:1 1 100%; margin:0 auto 20px;}
	#mainContents .area02 .prdlist.inch li p.ti{margin:0 auto 12px;}

	#mainContents .area03 .main_title{float:none; width:100%; margin:0 auto 20px; text-align:center;}
	#mainContents .area03 .main_title h2{margin:0 auto 12px; font-size:1.5rem;}
	#mainContents .area03 .main_title p{padding:0;}
	#mainContents .area03 .main_title p br{display:none;}
	#mainContents .area03 .tab{float:none; width:100%; margin:0 auto 20px;}
	#mainContents .area03 .tabCon{float:none; width:100%; padding:0;}

	#mainContents .area04 ul.review li{flex:1 1 48%;}
	#mainContents .area04 ul.review li a .imgW img{width:90%;height:80%}
	#mainContents .area04 ul.review .txtW {width:90%;margin:0 auto}

	#mainContents .area05 ul.sns li{width:24%; padding:0 4vw 20px;}
	#mainContents .area05 ul.sns li a .imgBox{width:100%; max-width:80px; height:auto;}

	#mainContents .area06 ul.banner.best li{flex:1 1 48%;}
	#mainContents .area06 ul.banner.best li{width:100%;}
	#mainContents .area06 ul.banner.best li img{width:80%;}
}

@media only screen and (max-width:540px){
	#mainContents .area05 ul.sns li{width:48%;}

}

@media only screen and (max-width:480px){
	#mainVisual .txtBox{max-width:100%;}
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}