@charset "utf-8";
/* CSS Document */


*{margin:0;padding:0;font-family:"Noto Sans JP","游ゴシック", YuGothic,"メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;}

.suih2,.suih3{font-family: "Sawarabi Mincho";}


h2,h3,h4,h5,h6,li,p,#header {
letter-spacing:4px;
    }
		
.w60{width:60%;margin:0px auto;}


.hc_cont{
width:100%;
margin: 0px auto;
background: #fff;


}

.w1200box{
width:1400px;
margin:0 auto;
}

.logo_img{width:22%;}

.hero_font{
	box-decoration-break: clone;	
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .3em;
	line-height: 2.5;
	font-size:40px;
	background-color: #fff;
letter-spacing:25px;	
}




.w_font{color:#fff!important;}

.houbox_bg {
  background:#4980A7;
  /* 以下任意のスタイル */
  padding: 20px 0 30px;
}

.btn_type_hc {
    padding: 12px;
    display: block;
    width: 80%;
    margin: 25px auto;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    font-weight: 700;
    background: #4E9743;
    color: #fff;
    box-shadow: 0 8px 0 rgb(21, 89, 21, 1);
    border-radius: 50px;
}


.btn_type_hc:hover{
    box-shadow: 0 0px 0;
		position:relative;
		top:8px;
}



.fv_box{
width:100%;
background: url(../img/ywk_fv.jpg) no-repeat;
background-size:cover;
height:100vh;
position:relative;

}

.fv_box_main{
width: 1400px;
margin: 0px auto;
position:relative;
top:10%;
text-align:center;
}


.fv_box_main2{
width: 1400px;
margin: 0px auto;
position:relative;
bottom:5%;
text-align:center;
}




.flexbox{
  display: flex; 
	flex-wrap: wrap;
	
	}	
	
.flexbox .fbox_2,.flexbox .fbox_21{
  width: 50%;
	margin-bottom: 25px;
	}
	
.flexbox .fbox_3{
  width: 33%;
	margin-bottom: 25px;
	}
	
.flexbox .fbox_31{
  width: 33%;
	margin-bottom: 25px;
	}

.flexbox .fbox_4{
  width: 25%;
	margin-bottom: 25px;
	}
	
.flexbox .fbox_5{
  width: 20%;
	margin-bottom: 25px;
	}

.fbox_2 img,.fbox_3 img,.fbox_4 img,.fbox_5 img{border-radius: 10px;}


/**カード系**/

.card_type{
	background:#fff;
	border-radius: 10px;
}


.dis_on{visibility: visible;display: block;}
.dis_off{visibility: hidden;display: none;}


.pdbox{padding:30px;}
.sui_no{
color: #fc0;
font-size:35px;
font-weight: 900;
}
.a-center{text-align: center;}


.suih2{
font-size:60px;
color: #000;
text-align: center;
margin: 50px auto 10px;
font-weight:400;
}

.suih22{
font-size:20px;
color: #2D2D1C;
text-align: center;
margin: 50px auto 10px;
}

.suih3{
font-size:25px;
color: #000;
font-weight:400;
padding-bottom:2%;
/*margin: 0px auto 10px;*/
}


.suih3 {
  border-bottom: solid 3px #000;
  position: relative;
}

.suih3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ddd;
  bottom: -3px;
  width: 20%;
}



.suih32{
font-size:15px;
color: #2D2D1C;
font-weight:700;
/*margin: 0px auto 10px;*/
}

.suicap_c{
font-size:18px;
color: #000;
text-align: center;
margin-bottom: 10px;
display: block;
}

.suicap_l{
font-size:15px;
color: #ccc;
margin-bottom: 10px;
display: block;
}


.suip{
font-size:16px;
color: #2D2D1C;
line-height:1.8em;

}


.suip2{
font-size:12px;
color: #2D2D1C;
margin-bottom:20px;
}

.bg_001{background: #DFDEDA;}
.bg_002{background: #FFC926;}
.bg_003{background: #F2F2EA;padding-bottom:80px;}
.bg_004{background: #FFF; border-radius:8px;padding:40px 0 0;}
.cl_w{color: #fff;}


.sui_btn{background: #fc0;color: #000; display: block;border-radius: 50px;padding: 12px 0;text-align: center;text-decoration: none; font-weight:bold;}


.wide-wrap {
    position: relative;
    margin: 0 calc(50% - 50vw) 80px;
    overflow: hidden;
}

.box_inner{width:90%;margin: 0 auto;}

.box_inner2{width:90%;margin: 0 auto;}




/**画像の形系**/

/*img.heikou {
clip-path: polygon(15% 0, 100% 0%, 100% 65%, 85% 100%, 0 100%, 0 35%);border-radius:0;
}*/





.filters2 {
  margin-bottom: 2rem;
}
.filters2  li{

}

.filters2 * {
  display: inline-block;
}
.filters2 label {
  text-align: center;
  padding: 0.5rem 2rem;
  margin-bottom: 0.5rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
	border-radius:50px;
	background: #ffc926;
	font-weight: bold;
	font-size:15px;
}
.filters2 label a{
	color:#000;
}

.filters2 label:hover {
  background: #ffc926;

}




.button_solid017 a {
    position: relative;
    text-decoration: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 10px 25px;
    color: #000;
    transition: 0.3s ease-in-out;
    font-size: 14px;
    font-weight: 700;
    background: #ffc926;
    border-radius: 50px;
}
.button_solid017 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #543618;
    border-right: 3px solid #543618;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}


.button_solid017 .addCart {
    position: relative!important;
    text-decoration: none!important;
    display: flex;
    justify-content: space-around!important;
    align-items: center!important;
    margin: 0 auto!important;
    max-width: 200px!important;
    padding: 10px 120px!important;
    color: #000;
    transition: 0.3s ease-in-out!important;
    font-size: 14px!important;
    font-weight: 700!important;
    background: #ffc926!important;
    border-radius: 50px!important;
		border:none;
}

.button_solid017 .addCart:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #543618;
    border-right: 3px solid #543618;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.video_container{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.cate_l_btn{
width:100%;
display:block;
border:2px solid #000;
text-align:center;
line-height:4em;
border-radius:7px;
color:#000;
font-size:14px;
font-weight:bold;
}

.cate_l_btn:hover{background:#ffc926;}



.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb80{margin-bottom:80px;}
.mb120{padding-bottom:120px;}




.scroll {
  padding-top: 70px;
  position: relative;
  text-align:center;
color:#fff;
}

.scroll::before {
  animation: scroll 3.5s infinite;
  display: inline-block;
  content: "";
  position: absolute;
  width: 2px;
  height: 40px;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  background:#fff;
}

@keyframes scroll {
  0% {
    transform:translateY(0px);
    opacity: 0;
  }
  
  40% {
    opacity: 1;
  }
  
  80% {
    transform:translateY(30px);
    opacity: 0;
  }
  
  100% {
    opacity: 0;
  }
  
}



@media screen and (max-width: 1400px) {

.fv_box{
width:100%;
background: url(../img/ywk_fvsp.jpg) no-repeat;
background-size:cover;
height:100vh;
position:relative;

}
.w1200box{
width:100%;
margin:0 auto;
}

.fv_box_main{
width: 90%;
margin: 0px auto;
}

}



@media screen and (max-width: 900px) {


.fv_box{
width:100%;
background: url(../img/ywk_fvsp.jpg) no-repeat;
background-size:cover;
height:100vh;
position:relative;

}


.fv_box_main{
width: 100%;
top:20%;
text-align:center;
}




.scroll {
color:#fff;
}

.scroll::before {
  background:#fff;
}


.hero_font{
letter-spacing:15px;	
	font-size:28px;
}


.logo_img{width:30%;}

.flexbox .fbox_2{
  width: 100%;
	margin-bottom: 25px;
	}
.flexbox .fbox_31{
  width: 100%;
	margin-bottom: 25px;
	}
	
.flexbox .fbox_3,.flexbox .fbox_21,.flexbox .fbox_4,.flexbox .fbox_5{
  width: 50%;
	margin-bottom: 25px;
	}
.bg_004{width:95%;margin:0 auto 50px;}
.clmrb{flex-direction:column-reverse}
}


/********SPtuiki***********/
@media screen and (max-width: 700px) {

#copyright{font-size:12px;}
.logo_img{width:50%;}
.fv_box_main{
width: 84%;
margin: 0px auto;
top:20%;
}

.fv_box{
width:100%;
background: url(../img/ywk_fvsp.jpg) no-repeat;
background-size:cover;
height:100vh;
position:relative;

}
.scroll {
margin-top:20%;
color:#fff;
}

.scroll::before {
  background:#fff;
}
.btn_type_hc {
    font-size: 14px;
}

.hero_font{
letter-spacing:10px;	
	font-size:19px;
}


.sui_no{font-size:25px;}
.sui_no,.suih3,.suicap_l{text-align:center;}
.main_h {
    font-size: 20px;
    text-align: center;
		border:none;
}
.sub_h {
    font-size: 12px;
}
.br-sp {
    display: block;
}


.dis_off{visibility: visible;display: block;}
.dis_on{visibility: hidden;display: none;}	


.flexbox .fbox_2{
  width: 100%;
	margin-bottom: 25px;
	}
.flexbox .fbox_31{
  width: 100%;
	margin-bottom: 25px;
	}
	
.flexbox .fbox_3,.flexbox .fbox_21,.flexbox .fbox_4,.flexbox .fbox_5{
  width: 100%;
	margin-bottom: 25px;
	}


.hc_cont{
width: 100%;
margin: 0px auto;
}


.suih2{
font-size:20px;
text-align: center;
margin: 50px auto 10px;
}

.suih3{
font-size:18px;
/*margin: 0px auto 10px;*/
}


.suih32{
font-size:13px;
/*margin: 0px auto 10px;*/
}

.suicap_c{
font-size:13px;
text-align: center;
margin-bottom: 10px;
display: block;
}

.suicap_l{
font-size:10px;
margin-bottom: 10px;
display: block;
}


.suip{
font-size:14px;

}


.suip2{
font-size:11px;

}


/**逆順**/


.clmrb{flex-direction:column-reverse}


.w60{width:100%;margin:0px auto;}

.w_max{width:100%;margin:0px auto;}


.swp_ul{
	display: flex;
	flex-wrap :  wrap;
	list-style-type: none;
	padding: 0;
	text-align: center;
}



.swp_menu {
    display: flex;
    width: 31%;
    padding: 20px 0 10px;
    margin: 3% 1%;
}

.swp_menu a{
	font-size:12px;

}
.b-none{border-right:none;}
.swp_mini{font-size:8px;margin-top:10px;font-weight:normal!important;}
.b-none2{border-right:none;}

.filters label,.filters2 label{
	font-size:12px;
}
.button_solid017 a{
	font-size:12px;
}

.cate_l_btn{

font-size:13px;
}


.w1200box{
width:100%;

}

.bg_004{width:95%;margin:0 auto 50px;}

}