@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat fixed;
}
.footer{
	max-width: 1920px;
	margin: 0 auto;
	background: url("../images/bg.jpg");
	padding: 10px 0;
}




/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.for_m img {  width: 100%; }
}

/* ----------------------CUSTOMERIZATION---------------------- */


.broadwise li.transform{ margin-left: 390px;}

.bg_6 .hightlight_5p img{object-fit: contain;}
.bg_6 .hightlight_5p {width: 1200px;margin: 10px auto 30px;padding:0 0px 20px;position: relative;}
.bg_6 .hightlight_5p img{padding: 6px;object-fit: contain;}
.bg_6 .hightlight_5p ul li{ height: 340px; margin-top: 150px;}
.bg_6 .hightlight_5p ul li h4{background: #422919;}
.bg_6 .hightlight_5p ul li:first-child{width: 280px;height: 450px;margin-top: 40px; padding-top: 10px;}
.bg_6 .hightlight_5p ul li:first-child p{padding: 8px 15px 0;}
.bg_6 .hightlight_5p ul li:first-child img{width:280px; height: 280px; margin: 0 auto 10px;}

.bg_6 .hightlight_5p .titleD{position: absolute;top: 60px;left: 340px;}

.bg_6 .hightlight_5p .titleD .more{font-size: 1.2rem;padding: 10px;position: absolute;top: 10px;right: -450px;transition-duration:0.3s;color: #381610;}
.bg_6 .hightlight_5p .titleD .more a{color: #000;}
.bg_6 .hightlight_5p .titleD .more:hover{ transform: scale(0.98);}

.btn2 ul{ display: flex; justify-content: center;flex-wrap: wrap; }
.btn2 ul li {width: 500px;height: 110px;background: #945832;margin: 0 20px 20px;text-align: center;}
.btn2 ul li a {text-align: center;color: #EEC98B;line-height: 100px;font-size: 40px;}

@media screen and (max-width: 991px){
	.broadwise li.transform{ margin-left: 1vw;}
	
	
		.broadwise ul.TF li {width: 97vw; padding:2vw; margin: 0.5vw; }
		.broadwise ul.TF .font {padding: 0 2vw; }
		.broadwise ul.TF li img { width: 40vw; height: 40vw; order: 0; margin: auto;}
	
	.bg_6 .hightlight_5p { width: 98vw; margin: 0 auto 3vw; padding: 2vw 0;}
	.bg_6 .hightlight_5p img{padding:1vw;}
	.bg_6 .hightlight_5p ul {margin-top: 10vw;}
	.bg_6 .hightlight_5p ul li{ height:auto; margin-top: 0;}
	.bg_6 .hightlight_5p ul li:first-child{width: 96vw;height: auto;margin-top: 0px; padding-top: 10px;}
	.bg_6 .hightlight_5p ul li:first-child p{padding:3%;}
	.bg_6 .hightlight_5p ul li:first-child img{width:45vw; height: 60vw; margin: 0 auto 10px;}
	
	.bg_6 .hightlight_5p .titleD{position: absolute;top: 0px;left: 0px;width: 100%;margin: 2vw;border: none;padding: 0;}
	.bg_6 .hightlight_5p .titleD .more{font-size: 1.2rem;padding: 10px;position: absolute;/* top: 0px; */right: 4vw;transition-duration:0.3s;}
	
	.btn2 ul li { width: 90vw; height: auto; margin: 2vw auto; background-size: 100%;}
	.btn2 ul li a { padding: 5vw; font-size: 2.2rem; line-height: 2; }
.heart_bg {
    width: 100%!important;
    background: url(../images/bg_orange2.jpg) repeat center center!important;
    border-radius: 0 30px 0 30px;
    background-size: 100%;
}
.bg_wrap_orange,.bg_wrap_brwon{
    width: 100%!important;
    padding: 3px 0;
    background: url("../images/bg_orange2.jpg") repeat center center;
    border-radius: 0 30px 0 30px;
    padding: 0!important;
}
.buy_wrap{
    width: 100%!important;
    margin: 40px auto 40px;
    display: inline-block;
    justify-content: center;
}
.head_5{
	width: 15%!important;
	margin: -66% 0 32.5% 19%!important;
}
.head_5_frame{
	width: 15%!important;
	margin: -66% 0 32.5% 19%!important;
}
.bg1{
    margin-top:130px;
}
.banner_frame{
    height: 75px!important;
    margin: 0 30px 30px!important;
}
.btn2 ul li {
    height: 65px!important;
}	
}









/*--輪播AD--*/
      .swiper {
        width: 1300px;
        padding-top: 50px;
        padding-bottom: 50px;margin: 0 auto;
      }
.swiper-wrapper,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right{width: 300px;border-radius: 20px;}

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;margin-bottom: 60px;
      }

      .swiper-slide img {
        display: block;
        width: 300px;
        height: 300px;border-radius: 20px;
      }

.swiper-slide p{width: 100%;text-align: center;padding: 5px 5px;font-size: 22px;color: #000;font-weight:500;margin-top: 10px;line-height: 26px;}

@media screen and ( max-width: 991px ){
	 .swiper {
        width: 100%;
        padding-top: 2vw;
        padding-bottom:2vw;margin: 0 auto;
      }
      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 80vw;
        height:auto;
		margin-bottom: 70px;
      }	
	      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 50vw;
        height: 50vw;
      }
	      .swiper-slide img {
        display: block;
        width:  50vw;
        height:  50vw;border-radius: 20px;
      }
	.swiper-wrapper,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right{width:50vw;border-radius: 20px;}
	.swiper-slide p{width: 100%;height: auto; text-align: center;padding: 5px 5px;font-size: 1rem;color: #000;font-weight:500;line-height: 1.2rem;margin-top: 6px;}
	.head_pc{display: none!important;}
	.head_phone{display:block!important;}
}



/*for mobile*/
menu{display:none;}
@media screen and ( max-width: 991px ){
		menu{ display:block;}
	}
menu ul{position:fixed;bottom:0;left:0;margin:0;width:100%;display:flex;flex-wrap: wrap;list-style: none;background: #6F3C22;z-index:1000;border-top:none;}
menu ul li{border-right: 2px solid #FFE4B9;padding: 2vw 1vw;width:20%;box-sizing:border-box;text-align:center;font-size:15px;}
menu ul li a{font-size:1.1rem;font-weight: 500;line-height: 1.2;}
menu ul li:nth-last-child(1){border-right:none;}
menu a{color: #FFE4B9 !important;text-decoration:none;}




/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;/* text-align: center; */border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 55px;color: #fff;opacity:0.5;background: url(../images/top.png) center no-repeat;background-size:50%;background-position: 75% 0;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 991px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}


.round_3p .font h4 {background: #AB1E38;border-radius: 100px;}
.round_3p .font p, .price {color:#FFE4B9;font-size: 18px;}
.titleC h2{
	width:605px;
	height:165px;
	color:#FFE4B9;
	font-size: 46px;
	letter-spacing:3px;
	background: url("../images/title_bg.png") no-repeat;
	line-height: 190px;
	margin: 20px 0;
}
.round_3p img {border: 4px solid #AB1E38;border-radius: 300px;}
.titleC h3 p{font-size: 1.5rem;color: #FFE4B9;letter-spacing: 2px;margin: 20px 0 10px 0;line-height: 32px;}
.rectangle .font .price {color:#000;}
.hightlight .font .price {color:#000;}
.collect_5x6 .font .price {color:#000;}
.broadwise .font .price {color:#000;}
.hightlight_5p .font .price {color:#000;}
.triple .font .price {color:#000;}
.bg_6 .hightlight_5p .titleD{color: #000;}
.triple .font h4 ,.collect_5x6 .special {background: #AB1E38;}
.hightlight .font h4 {background: #BA783C;}
.hightlight_5p .font h4 {background: #BA783C;}
.half ul{
	background: url("../images/bg_orange.jpg") no-repeat;
	border-radius: 0 50px 0 50px;
	background-size:cover;
}
.buy_wrap{
    width: 1160px;
    margin: 40px auto 40px;
    display: flex;
    justify-content: center;
}
.buy{width:33.33%; float:left;}
.buy img{width:92%; margin:0 4%;}
.bg1{
    width:100%;
	background: url("../images/bg1.png") no-repeat center center;
	background-size:100%;
}
.bg2{
    width:100%;
    background: url("../images/bg2.png") repeat-y center top;
    background-size:100%;
}
.bg3{
    width:100%;
    background: url("../images/bg3.png") no-repeat center center;
    background-size: cover;
    padding-bottom: 20px;
}
.bg4{
    width:100%;
    background: url("../images/bg2.png") repeat-y center center;
    background-size:100%;
}
.bg_wrap_orange,.bg_wrap_brwon{
    width: 1280px;
    margin: 30px auto 50px;
    padding: 3px 20px;
    background: url("../images/bg_orange2.jpg") repeat center center;
    border-radius: 0 50px 0 50px;
}
.bg_wrap_brwon{background: url("../images/bg_color_brwon.jpg") repeat center center;}
.heart_bg{
    width: 1280px;
    margin: 30px auto 50px;
    padding: 30px 20px 10px 20px;
    background: url("../images/heart_bg.jpg") no-repeat center center;
    border-radius: 0 50px 0 50px;
    background-size: cover;
}
.hightlight_5p h3{
	width: 360px;
	margin: 8px;
    font-size: 40px;
    text-align: center;
	background: url("../images/title_arrow.svg") no-repeat center center;
	color:#381610;
	padding-left:45px;
	letter-spacing:2px;
}
.banner_frame{
    width: 500px;
    height: 110px;
    margin: 0 20px 20px;
    background: url("../images/frame_bg.jpg") no-repeat center center;
    padding: 15px 5px;
    border-radius: 10px;
}
.btn2 ul li {
    background-color: #381610;
    text-align: center;
    margin: -10px 0 0 0;
    width: 99.7%;
    height: 100px;
    border-radius: 10px;
}
.head_bg{
    width:100%;
    height: auto;
    background:url("../images/head_bg.jpg") top center no-repeat;
    background-size: 100%;
}
.head_pc{display:block;}
.head_phone{display:none;}
.head_bg img{
    width:100%;
}
.head_5{
	width: 8%;
	margin: -31.5% 0 32.5% 33.5%;
	position: absolute;
}
.head_5 img,.head_5_frame img{
	width: 100%;
}
.head_5_frame{
	width: 8%;
	margin: -31.5% 0 20% 33.5%;
	position: relative;
	animation-name:ani01;
	animation-duration: 3.5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-delay:0;
}
@keyframes ani01{
0%{-webkit-filter:brightness(1);} 5%{ -webkit-filter:brightness(1.2);}10%{ -webkit-filter:brightness(1.1);} 15%{ -webkit-filter:brightness(1);} 50%{ -webkit-filter:brightness(1);} 	40%{-webkit-filter:brightness(1);} 45%{ -webkit-filter:brightness(1.2);} 50%{ -webkit-filter:brightness(1);}60%{-webkit-filter:brightness(1.3);opacity: 1;} 75%{-webkit-filter:brightness(1); opacity: 0;} 80%{ -webkit-filter:brightness(1);} 	85%{ -webkit-filter:brightness(1);} 90%{-webkit-filter:brightness(1.2);opacity: 1;} 95%{ -webkit-filter:brightness(1.3);} 	100%{-webkit-filter:brightness(1);} }
@keyframes ani02{
0%{-webkit-filter:brightness(1);} 5%{ -webkit-filter:brightness(1.2);}10%{ -webkit-filter:brightness(1.1);} 15%{ -webkit-filter:brightness(1);} 50%{ -webkit-filter:brightness(1);} 	40%{-webkit-filter:brightness(1);} 45%{ -webkit-filter:brightness(1.2);} 50%{ -webkit-filter:brightness(1);}60%{-webkit-filter:brightness(1.3);opacity: 1;} 75%{-webkit-filter:brightness(1); opacity: 0;} 80%{ -webkit-filter:brightness(1);} 	85%{ -webkit-filter:brightness(1);} 90%{-webkit-filter:brightness(1.2);opacity: 1;} 95%{ -webkit-filter:brightness(1.3);} 	100%{-webkit-filter:brightness(1);} }




@media screen and ( max-width: 480px ){
.titleC h2 {width:100%;background-position: bottom center;font-size: 40px;background-size: 130%;line-height: 175px;height: 140px;}
.buy_wrap{width: 90%!important;display: inline-block;margin: 0 5%;}
.buy{
    width: 100%;
    margin: 15px 0;
}
.bg1{
	background: url("../images/bg1.png") no-repeat center 25%;
	background-size:100%;
	margin-top: 50px;
}
.bg2{
    width:100%;
    background: url("../images/bg2.png") repeat-y center center;
    background-size:100%;
}
.bg3{
    width:100%;
    background: url("../images/bg3.png") repeat center left;
    background-size: 180%;
    padding-bottom: 20px;
}
.heart_bg {
    width: 100%;
    margin: 30px auto 50px;
    padding: 30px 20px 20px 20px;
    background: url(../images/bg_orange2.jpg) repeat center center;
    border-radius: 0 30px 0 30px;
    background-size: 100%;
}
.bg_wrap_orange,.bg_wrap_brwon{
    width: 100%;
    padding: 3px 0;
    background: url("../images/bg_orange2.jpg") repeat center center;
    border-radius: 0 30px 0 30px;
}
.bg_wrap_brwon{
    background: url("../images/bg_color_brwon.jpg") repeat center center;
}	
.hightlight_5p h3 {
	width: auto;
	margin: 8px;
	font-size: 34px;
	text-align: left;
	background: url(../images/title_arrow2.svg) no-repeat left center;
	color: #381610;
	padding-left: 40px;
	letter-spacing: 2px;
	background-size: contain;
}
.banner_frame{
    width: 100%;
    height: 75px;
    margin: 0 20px 20px;
}
.btn2 ul li {
    height: 65px;
}
.footer{height:120px;line-heigt:30px;}
.round_3p .font p, .price {
    font-size: 14px;
}
.bg_6 .hightlight_5p ul {
    margin-top: 16vw;
}
.head_5{
	width: 15%;
	margin: -63% 0 32.5% 19%;
	position: absolute;
}
.head_5 img,.head_5_frame img{
	width: 100%;
}
.head_5_frame{
	width: 15%;
	margin: -63% 0 32.5% 19%;
	position: relative;
}	
}
@media(min-width:992px) and (max-width: 1199px) {
.buy_wrap{width: 98%;margin: 20px 1% 0 1%;}
.round_3p .font h4 {
    width: 13vw;
    height: 13vw;
}
.heart_bg{
    width: 100%;
    border-radius: 0 30px 0 30px;
    background-size: 100%;
}
.bg_wrap_orange,.bg_wrap_brwon{
    width: 100%;
    padding: 3px 0;
    background: url("../images/bg_orange2.jpg") repeat center center;
    border-radius: 0 30px 0 30px;
}
.bg_wrap_brwon{background: url("../images/bg_color_brwon.jpg") repeat center center;}
.half ul{
	border-radius: 0 30px 0 30px;
}
}
/*輪播*/
.topbox_wrap{
   width:450px;
   height:600px;
   margin: -670px 0 0 67%;
   position: absolute;
   background: url("../images/product_bottom.png") no-repeat center bottom;
   background-size:contain;
}
.topbox{
   margin: -670px 0 0 67%;
}
.topbox img {
   width: 155%;
   margin: -120px 0 0 -78%;
}
.p_01, .p_02, .p_03, .p_04{
	position: absolute;
	top: 62px;
	left: 20%;
	animation-name:anime;
	animation-duration: 16s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}
.p_02{animation-delay: -4s;} 
.p_03{animation-delay: -8s;} 
.p_04{animation-delay: -12s;}
.p_02 {top: 80px;}

@keyframes anime{
0%{ opacity: 0;left:50%;} 
5%{  opacity: 1;left: 50%;}
25%{  opacity: 1;left: 50%;}  
30%{  opacity: 0;} 
66%{  opacity: 0;}  
100%{  opacity: 0;} 
}
@media(min-width:1279px) and (max-width: 1641px) {
.topbox_wrap{
   width:350px;
   margin: -640px 0 0 67%;
}
.topbox img {
   width: 155%;
   margin: 20px 0 0 -78%;
}	
}
@media screen and ( max-width: 480px ){
.topbox_wrap{
   width: 120px;
   height: 270px;
   margin: -240px 0 0 76%;
}
.topbox img {
   width: 150%;
   margin: 35px 0 0 -78%;
}
.p_02{top: 67px;}	
}
@media(min-width:481px) and (max-width: 1023px) {
.topbox_wrap{
   width:240px;
   margin: -430px 0 0 75%;
   height: 500px;
}
.topbox img {
   width: 155%;
   margin: 85px 0 0 -78%;
}
.footer{
   height:120px;
}	
}
@media(min-width:1024px) and (max-width: 1278px) {
.topbox_wrap{
   width:270px;
   margin: -540px 0 0 68%;
   height: 500px;
}
.topbox img {
   width: 155%;
   margin: 40px 0 0 -78%;
}	
}