@charset "UTF-8";

body{
font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", "Meiryo", "sans-serif";
}

body{
	background:url("../img/bg.jpg");
}

html {
    scroll-behavior: smooth;
}


#main img{
	display:block;
    margin:0px auto;
    line-height:0em;
    vertical-align:bottom;
}

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}


.custom, .goods, .flow {
    background: #f3f3f3;
}



.top{background:#FFF;
	    }

.button01 {
    padding-left: 9%;
	    padding-right: 9%;
    margin-bottom: 13%;
	

}



.header-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer{padding-top:10%;
margin-bototm:10%;}
.footer{padding-top:3%}

footer{background:#211c32;}
.footer-inner p{color:#CCCCCC;
margin-top: 24px;
    margin-bottom: 50px;
}



.footer-nav {
    font-size: 11px;
}	
	
.footer-nav {
	    margin: 0 auto;
    color: #CCCCCC;
}	
	
.header-nav ul {
    display: flex;
    font-size: 12px;
    color: #595757;
}

.header-nav ul,ul.footer-nav_inner{
font-weight: 400;
font-size:9px;
}

.ttl {
    background: white;
    margin-left: 0%;
    margin-right: 0%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    text-align: center;
    width: 89%;
}


.ttl-wrap{
    /*追加*/display: flex;
    /*追加*/justify-content: center;
    /*追加*/align-items: center;
	background: url("../img/top.png") no-repeat center center / cover;}

.ttl-wrap {
    padding-top: 6%;
    padding-bottom: 49%;
}

.ttl-inner {
    border-top: solid 1.5px #b28554;
    border-bottom: solid 1.5px #b28554;
    padding-top: 4%;
    padding-bottom: 4%;
    margin-right: 3%;
    margin-left: 3%;
}



.ttl h2 {
    font-size: 5.1vw;
    margin-bottom: 3%;
}

h1 {
    font-size: 6.2vw;
    font-weight: 600;
    line-height: 7.5vw;
}

.ttl span{
	color:#518336;
	font-weight:600;
}
.top-copy h3 {
    font-size: 4.8vw;
    line-height: 9.5vw;
    font-weight: 600;
    text-align: center;
    margin-top: 14%;
    margin-bottom: 14%;
}

.kate-tx{
	text-align: center;
    padding-top: 14%;
    padding-bottom: 12%;
}
	
.kate-tx h2 {
    font-size: 6.5vw;
    font-weight: 600;
    padding-bottom: 4%;
}
	
.kate-tx h3 {
    font-size: 3.8vw;
    line-height: 6.5vw;
    font-weight: 600;
}

.kate-tx p {
    font-size: 3.5vw;
    color: #898989;
    margin-bottom: 19px;
}



.sns {
    text-align: center;
    font-size: 14px !important;
    margin-top: 20px;
}
.sns-btn {
display: flex!important;
	margin:0 auto!important;
margin-top: 10px!important;
	margin-bottom: 35px!important;
  justify-content: center!important;	
}

.sns-btn li {
width: 40px!important;
margin-left: 10px!important;
margin-right: 10px!important;
}



.april{color:magenta !important;}

.banner {
    margin-bottom: 5%;
}

.footer-nav_inner {
	text-align-last: center!important ;
	justify-content: center;
    display: flex;
    flex-wrap: wrap;
	    margin-top: 20px;
}	
	
   .footer-inner { display: flex;
		justify-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: env(safe-area-inset-bottom);
		     text-align: center;
}	

.sns-btn li:hover{
opacity:0.6;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

.april {
    color: #f06689 !important;
    line-height: 30px;
    font-size: 25px;
    margin-top: 3px;
}	
	
.april-tx {
    color: #000000 !important;
    background: linear-gradient(transparent 75%, #fff375 30%);
    display: inline-block;
}




.button001{
    text-align: center;
    margin-bottom: 50px;
	 

}

.btn,
a.btn,
button.btn {
	font-size:22px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 6rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff !important;
  background-color: #518336;;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff !important;
  background: #7aaa5e;
}

a.btn--radius {
  border-radius: 100vh;
}


/*goods*/
.goods {
    padding-top: 20px;
    padding-bottom: 40px;
}


.goods-contents {
    margin-left: 28px;
    margin-right: 28px;
    background: #fff;
    margin-top: 40px;
    padding: 28px 28px;
    text-align: center;
    border-radius: 8px;
}
   


.goods-ttl {
    line-height: 30px;
    margin-bottom: 30px;
    margin-left: -10px;
    margin-right: -10px;
}

.goods-ttl h3 {
    font-weight: 600;
    font-size: 24px;
}
.goods-ttl h4 {
    margin-top: 0.3vw;
    font-weight: 600;
    font-size: 24px;
}

.goods-img1 {
    margin-bottom: 15px;
}

.goods-img2 {
    margin-bottom: 9px;
}

.goods-lead {
    font-size: 19px;
    line-height: 30px;
    font-weight: 600;
    margin-bottom: 25px;
}


.uservoice {
    background: #f3f3f3;
    margin-top: 0px;
    padding: 14px 14px;
    border-radius: 8px;
    margin-right:0.5%;
     margin-left:0.5%;
}
.uservoice p{padding-left:1.5%;}

.uservoice-tx{margin-top:2%}

.uservoice-m{color:#518336}

.username {
    font-size: 13px;
    line-height: 23px;
    font-weight: 400;
    color: #7d7d7d;
}

/*flow*/
.step1 p,.step2 p,.step3 p,.step4 p,.uservoice-tx {
    line-height: 23px;
	    font-weight: 200;
}

.flow-head{
	text-align: center;
    margin: 0 auto;
    margin-left:28px;
	  margin-right:28px;
	    margin-bottom: 20px;
border-bottom: 2px solid black;
	border-top: 2px solid black;
	padding-top:15px;
		padding-bottom:15px;
	    font-weight: 600;
    font-size: 24px;
}



.flow-contents {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 11% 87%;
    gap: 2%;
    margin-left: 28px;
    margin-right: 28px;
    padding-bottom: 145px;

}

.step-head {
    font-weight: 600;
    font-size: 28px;
    border-bottom: 1px solid black;
    margin-top: 20px;
    margin-bottom: 11px;
    padding-bottom: 11px;
}



.step-sentence{margin-bottom:15px;}




@media screen and (min-width:801px),print{
#main {
    width: 500px;
    margin: 0 auto;
}
.sp{
display: none !important;
}
	

	
.ttl-wrap {
    padding-top: 16%;
    padding-bottom: 49%;
}

.ttl-inner {
    border-top: solid 1.5px #b28554;
    border-bottom: solid 1.5px #b28554;
    padding-top: 4%;
    padding-bottom: 4%;
    margin-right: 3%;
    margin-left: 3%;
}



.ttl h2 {
   font-size: 25.5px;
    margin-bottom: 2%;
}

h1 {
    font-size: 31px;
    font-weight: 600;
    line-height: 38px;
}
	
    .top-copy h3 {
        font-size: 20px;
        line-height: 41px;
        font-weight: 600;
    }
	

.kate-tx{
		text-align: center;
    padding-top: 55px;
    padding-bottom: 62px;
}	
	
.kate-tx h2 {
    font-size: 32px;
    font-weight: 600;
    padding-bottom: 30px;
}	
	
.kate-tx h3 {
    font-size: 16px;
    line-height: 30px;
	    font-weight: 600;
}	

.kate-tx p {
    font-size: 13px;
    color: #898989;
    margin-bottom: 19px;
}	
	
.voice-slide {
 margin-top: -40px;
}
	
	
	
.sns-top ul {
    display: flex;
    align-items: center;
    justify-content: center;
}







	li.sns01,li.sns02{margin-right: 14px;
    width: 84px;
}	
	
	
}




@media screen and (max-width:800px),print{
#main {
    max-width: 800px;
    padding: 0%;
}

.button001 {
    text-align: center;
    margin-bottom: 4vw;
    margin-left: 14px;
    margin-right: 14px;
}    
    
.goods-contents {
        margin-left: 14px;
        margin-right: 14px;
        background: #fff;
        margin-top: 20px;
        padding: 20px 14px;
        text-align: center;
        border-radius: 8px;
        margin-bottom: 6.5vw;
    }  
    
    .goods-ttl h3 {
        font-weight: 600;
        font-size: 5.5vw;
    }
    .goods-ttl h4 {
        font-weight: 600;
        font-size: 5.5vw;
    }    
.goods p {
    font-size: 4vw;
}	    
    
    .goods-img1 {
        margin-bottom: 5.5vw;
    }
.goods-img2 {
    margin-bottom: 4.5vw;
}    
    .goods-lead {
        margin-bottom: 7vw;
        line-height: 8vw;
        font-size: 5.0vw;
    }
    
    
.step-head {
    font-weight: 600;
    font-size: 6.5vw;
    border-bottom: 1px solid black;
    margin-top: 4.2vw;
    margin-bottom: 1.5vw;
    padding-bottom: 1.5vw;
}	
     .step1 p, .step2 p, .step3 p, .step4 p {
        line-height: 5.8vw;
        font-weight: 200;
        font-size: 4.2vw;
    }
	
	.flow-head {
    text-align: center;
    margin: 0 auto;
    margin-left: 14px;
    margin-right: 14px;
    margin-bottom: 4vw;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    padding-top: 3vw;
    padding-bottom: 3vw;
    font-weight: 600;
    font-size: 6.2vw;
}

.flow-contents {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 11% 87%;
    gap: 2%;
    margin-left: 14px;
    margin-right: 14px;
    padding-bottom: 145px;
}	
.pc{
display: none;
}
}

.fv02{
padding: 20px 0;
background:url("../img/fv02_bg.png");
}


.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 5vw;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.slick-prev:before, .slick-next:before {
    color: #464646;
    opacity: 1;
	z-index: 1;
}

.slick-dotted.slick-slider {

    margin-bottom: 18%;
    margin-left: 0%;
    margin-right: 0%;

}



.slick-prev, .slick-next {
	width: inherit;
	height: inherit;
}

	
.slick-prev {
    left: 1%;
    z-index: 1;
}
 
.slick-next {
    right:1%;
}

a,a:hover,a:visited{
    color: inherit;
}



header{position: fixed;
    z-index: 100;
  
    top: 0px;
    width: 100%;
}

.button001 {
    text-align: center;
    margin-bottom: 30px;
    margin-left: 14px;
    margin-right: 14px;
    margin-top: 31px;
}

.btn,
a.btn,
button.btn {
	font-size:1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.8rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
box-shadow: 3px 2px 6px 0px rgba(0, 0, 0, 0.29);

}





@media screen and (min-width:801px),print{


	
.header-title02{
      position: fixed;
    z-index: 100;
    right: -4px;
    top: 0px;
    width: 558px;
    display: flex;
    justify-content: flex-end;
list-style: none;
	}

	
	
	.header-title02 a {margin-left: 4px;}

.slick-prev:before, .slick-next:before {
	  font-size: 28px;;
	}


/***追従するトップへ戻るボタン***/
.pagetop {
    height: 80px;
    width: 80px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #518336;
    border: solid 2px #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
	   transition: 0.5s ease-out;
}

.pagetop__arrow {
    height: 17px;
    width: 17px;
    border-top: 4px solid #FFF;
    border-right: 4px solid #FFF;
    transform: translateY(20%) rotate(-45deg);
}

.pagetop:hover {
	background: #7aaa5e;
}

/***トップへ戻るボタンここまで***/
}



@media screen and (max-width:800px),print{
	.top {

}
	
.april {
    line-height: 7vw;
    font-size: 5.9vw;
    margin-top: 2%;
}

sns-top {
    background: #f3f3f3;
    font-size: 4px;
    margin-bottom: 3%;
}
	
.sns-top ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sns-top {
    padding-bottom: 2%;
    padding-top: 22%;
    background: #f3f3f3;
   
    position: relative;
    box-shadow: 0px -1px 15px 0px rgba(0, 0, 0, 0.35);
}
li.sns-tx {font-size: 3.5vw;
    line-height: 6.5vw;
    font-weight: 600;
}	
	li.sns01,li.sns02 {
    width: 10%;
}

	li.sns-tx,li.sns01,li.sns02{margin-right:2%;}
	
	
}