/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
div{ box-sizing:border-box;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:100%; position:relative; padding-bottom:15px; background:#201f16;}
header .header_top{ width:1000px; max-width:100%; margin:0 auto;}
header .nav_wrap{ width:100%; display: flex; justify-content: space-between;}
header nav {width:500px; max-width:90%; margin:50px auto 0;}

header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{font-size:1.4rem; line-height:1.4rem; padding:5px 10px; font-weight:400; font-family: "Poppins", sans-serif;}
header ul.nav li a{ color:#fff;}
header .tel{ width:260px; font-size:2.8rem; line-height:1.2em; max-width:30%;}

#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin:60px 0 0 0; font-weight: 900;}
#navi_toggle ul li{ font-size:1.4rem; margin:0px 0 30px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li span{ padding-left:10px;}


/*フッター*/
#footer_wrap { width:100%; max-width:100%; background:#48443f; margin:0 auto; padding:40px 0; background-size:100%;}
footer{ width:1200px; max-width:90%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left;  color:#fff;}
footer .left_box{ width:260px; max-width:100%; padding:0; margin:50px 0;}
footer .left_box h1.logo{ margin-bottom:20px; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); line-height:1.4em; font-family: "Poppins", sans-serif;}
footer .left_box a{ color:#fff;}
footer .left_box p{font-size:1.4rem; line-height:1.4em; font-weight:500;}
footer .right_box{ width:236px; max-width:70%; font-size:1.4rem; line-height:1.2em; padding:0; }

@media screen and (max-width: 530px){
footer .left_box{  padding:0; margin:20px 0 30px;}
}



/*共通*/
h1.title{ font-family: "Poppins", sans-serif; font-size:1.6rem; line-height:1.4rem; margin:100px auto;}
.col_box{display:flex; justify-content:center; flex-wrap:wrap;}

/*トップページ*/
#top :is(.sec1>div,.sec2,.sec3 .contents,.sec5){ padding:50px 0; width:1200px; max-width:95%; margin:0 auto;}
#top .mainimage{ width:100%; color:#fff; padding:75% 0 0 0; background:url(../images/top_mainimage.jpg) center no-repeat; background-color:#201f16; background-size:cover; position:relative;}
#top .mainimage h1{font-family: "Poppins", sans-serif; font-size:clamp(3rem, -6.3328rem + 19.44vw, 16rem);}
#top .mainimage .text_box{ position:absolute; top:40px; left:0px; right:0; margin:0 auto;}
#top .mainimage p{ text-align:center; color:#fff;  font-size:clamp(1.6rem, 3.368rem + 0.53vw, 2rem); line-height:1.8em; font-weight:400;margin:auto; padding:40px 20px 10px;}
#top .mainimage p.en{ font-size:1.4rem; line-height:1.4em; margin:auto; padding:10px;}
#top .top_image ul{display:flex; justify-content: space-between; flex-wrap:wrap;}
#top .top_image ul li{ width:25%;}

#top .sec1{ background:#dbd6d3;}
#top .sec1 h2{ font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); line-height:2em; font-weight:300;}
#top .sec1 h2 span{ display:block; font-size:1.6rem; line-height:1.4em; margin:30px auto;}
#top .sec1 p{ writing-mode: vertical-rl; text-orientation: upright; margin:0 0 0 auto; height:880px; padding-top:180px; line-height:2em; position:relative;}
#top .sec1 p:before{ content:"01"; font-family: "Libre Baskerville", serif; color:#fff; font-size:clamp(8rem, 2.105rem + 10.53vw, 16rem); line-height:1.2em; position:absolute; top:0; right:0; writing-mode: horizontal-tb;}

#top .sec1 .greeting{ width:1080px; max-width:95%; margin:50px auto; display:flex; justify-content: space-between; flex-wrap:wrap; justify-content: flex-end; }
#top .sec1 .greeting img{ width:450px; max-width:40%; height: 100%; margin-top:150px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -moz-border-radius: 50%; }
@media screen and (min-width: 1400px){
#top .mainimage{ width:100%; color:#fff; padding:0 0 0 0; height:1000px; background-size:contain;}	
}


@media screen and (max-width: 860px){
#top .sec1 .greeting{ display:block;}
#top .sec1 p{ writing-mode: horizontal-tb; margin:60px auto; height:auto; line-height:1.8em; padding-top:100px;}
#top .sec1 .greeting img{ width:488px; max-width:60%; height: 100%; margin:0 auto;}

h1.title{ margin:70px auto;}
}
@media screen and (max-width: 600px){
#top .mainimage{ width:100%; padding:100% 0 0 0; background:url(../images/top_mainimage.jpg) no-repeat center; background-size:cover; position:relative; background-color:#201f16;}
h1.title{ margin:50px auto;}
}

@media screen and (max-width: 500px){
#top .sec1 h2{line-height:1.6em;}
}

@media screen and (max-width: 400px){
#top .mainimage{ width:100%; padding:120% 0 0 0; background:url(../images/top_mainimage.jpg) no-repeat center bottom; background-size:contain; position:relative; background-color:#201f16;}

}

#top .sec2 p.main_text{ writing-mode: vertical-rl; text-orientation: upright; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 15px) 50px 0; position:relative; margin:0;}
#top .sec2 p.main_text:before{ content:"02"; font-family: "Libre Baskerville", serif; color:#dbd6d3; font-size:clamp(8rem, 2.105rem + 10.53vw, 16rem); line-height:1.2em; position:absolute; top:0; left: 50%; transform: translate(-50%, 0%); writing-mode: horizontal-tb;}
#top .sec2 .col_box{ align-items: flex-start; justify-content:center; margin-bottom:100px;}
#top .sec2 .col_box .inner_col_box{display:flex; justify-content:center;flex-wrap:wrap; max-width:100%;}
#top .sec2 .text_box{ width:380px; max-width:100%; padding:15px;margin:auto auto 0;}
#top .sec2 .text_box p{ font-size:1.4rem; line-height:1.8em;}
#top .sec2 .price{ font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); line-height:2em; width:760px; width:90%; margin:0px auto; border:1px solid #666666; padding:20px;}
#top .sec2 .price_ps{ font-size:1.4rem; width:760px; width:90%; padding:20px;}


@media screen and (max-width: 1190px){
#top .sec2 .col_box .inner_col_box{display:block; padding:20px;}
}
@media screen and (max-width: 700px){
#top .sec2 .col_box{ display:block;}	
#top .sec2 p.main_text{ writing-mode: horizontal-tb; padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 15px) 10px 0 10px; margin-bottom:30px;}
#top .sec2 p.main_text:before{ content:"02"; position:absolute; top:0; left:0; transform:none;}
}



#top .sec3{ background:#48443f; color:#fff;}
#top .sec3 p.main_text{ writing-mode: vertical-rl; text-orientation: upright; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 25px) 50px 0; position:relative; margin:0;}
#top .sec3 p.main_text:before{ content:"03"; font-family: "Libre Baskerville", serif; color:#dbd6d3; font-size:clamp(8rem, 2.105rem + 10.53vw, 16rem); line-height:1.2em; position:absolute; top:0; left: 50%; transform: translate(-50%, 0%); writing-mode: horizontal-tb;}

#top .sec3 .col_box{ flex-direction:row-reverse; justify-content: space-between;}
#top .sec3 .sample_image{ width:950px; max-width:calc(100% - 150px); position:relative; padding:78% 0 0 0; position:relative;}
#top .sec3 .sample_image img.img1{ width:calc( 303% / 950 *100); position:absolute; top:0; left:5%;}
#top .sec3 .sample_image img.img2{ width:calc( 175% / 950 *100); position:absolute; top:33%; left:0px;}
#top .sec3 .sample_image img.img3{ width:calc( 217% / 950 *100); position:absolute; top:5%; right:20%;}
#top .sec3 .sample_image img.img4{ width:calc( 151% / 950 *100); position:absolute; top:20%; right:0px;}
#top .sec3 .sample_image img.img5{ width:calc( 420% / 950 *100); position:absolute; bottom:20%; right:0px; left:0; margin:auto;}
#top .sec3 .sample_image img.img6{ width:calc( 252% / 950 *100); position:absolute; bottom:0; left:0px;}
#top .sec3 .sample_image img.img7{ width:calc( 208% / 950 *100); position:absolute; bottom:30%; right:0px;}
#top .sec3 .sample_image img.img8{ width:calc( 256% / 950 *100); position:absolute; bottom:0; right:0px;}
#top .sec3>.bottom_bg{ width:100%; padding:15% 0 0 0; background:url(../images/back.svg) no-repeat center bottom; background-color:#dbd6d3; background-size:cover;}

@media screen and (max-width: 700px){
#top .sec3 .col_box{ display:block;}	
#top .sec3 p.main_text{ writing-mode: horizontal-tb; padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 15px) 10px 0 10px; margin-bottom:30px;}
#top .sec3 p.main_text:before{ content:"03"; position:absolute; top:0; left:0; transform:none;}	
#top .sec3 .sample_image{ width:100%; max-width:100%; padding:85% 0 0 0;}
}

@media screen and (max-width: 440px){
#top .sec3 .sample_image{ width:100%; max-width:100%; padding:160% 0 0 0;}
#top .sec3 .sample_image img.img1{ width:calc( 303% / 950 *100*1.5); position:absolute; top:0; left:5%;}
#top .sec3 .sample_image img.img2{ width:calc( 175% / 950 *100*1.7); position:absolute; top:33%; left:0px;}
#top .sec3 .sample_image img.img3{ width:calc( 217% / 950 *100*1.2); position:absolute; top:5%; right:10%;}
#top .sec3 .sample_image img.img4{ width:calc( 151% / 950 *100*1.8); position:absolute; top:28%; right:0%;}
#top .sec3 .sample_image img.img5{ width:calc( 420% / 950 *100*1.4); position:absolute; bottom:17%; right:5%; left:auto; margin:0;}
#top .sec3 .sample_image img.img6{ width:calc( 252% / 950 *100)*1.2; position:absolute; bottom:5%; left:0px;}
#top .sec3 .sample_image img.img7{ width:calc( 208% / 950 *100); position:absolute; bottom:0%; right:0px; left:0; margin:auto;}
#top .sec3 .sample_image img.img8{ width:calc( 256% / 950 *100); position:absolute; bottom:0; right:0px;}
}


#top .sec4{ width:100%; max-width:100%; background:#dbd6d3; padding:50px 0 100px;}
#top .sec4 .contents{ width:800px; max-width:90%; margin:0 auto; padding-right:100px;}
#top .sec4 p.main_text{ writing-mode: vertical-rl; text-orientation: upright; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); line-height:1.6em; padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 25px) 50px 0; position:relative; margin:0;}
#top .sec4 p.main_text:before{ content:"04"; font-family: "Libre Baskerville", serif; color:#fff; font-size:clamp(8rem, 2.105rem + 10.53vw, 16rem); line-height:1.2em; position:absolute; top:0; left: 50%; transform: translate(-50%, 0%); writing-mode: horizontal-tb;}
#top .sec4 .line_box{ padding:50px; text-align:center; margin:auto;}
#top .sec4 .line_box p{font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); text-align:center;}


@media screen and (max-width: 800px){
#top .sec4 .col_box{ display:block;}	
#top .sec4 p.main_text{ writing-mode: horizontal-tb; padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 15px) 10px 0 10px; margin-bottom:30px;}
#top .sec4 p.main_text:before{ content:"04"; position:absolute; top:0; left:0; transform:none;}	
#top .sec4 .contents{ padding-right:0px;}
}

#top .sec5{ padding:70px 0;}
#top .sec5 .col_box{ flex-direction:row-reverse; justify-content: center;}
#top .sec5 p.main_text{ writing-mode: vertical-rl; text-orientation: upright; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 25px) 50px 0; position:relative; margin:0;}
#top .sec5 p.main_text:before{ content:"04"; font-family: "Libre Baskerville", serif; color:#dbd6d3; font-size:clamp(8rem, 2.105rem + 10.53vw, 16rem); line-height:1.2em; position:absolute; top:0; left: 50%; transform: translate(-50%, 0%); writing-mode: horizontal-tb;}
#top .sec5 img.image15{ width:650px; max-width:80%; height:100%; margin:150px 50px 30px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -moz-border-radius: 50%; }

#top .sec5 .youtube_box{ width:1180px; max-width:100%; background:#dbd6d3; padding:20px 20px 40px; margin:100px auto 40px;}
#top .sec5 .youtube_box h1{ font-size:clamp(2rem, 1.3056rem + 1.58vw, 3.2rem); line-height:1.2em; margin:60px auto;}
#top .sec5 .youtube_box img{ margin:0 auto;}


.shop_btn{
	width:220px; padding: 20px 50px 20px 20px;
    color: #333;
    text-decoration: none;
    outline: none;
	font-size:1.6rem;
	margin:30px auto 30px auto;
	cursor:pointer;
	border:1px solid #000;
	position:relative;
}

.shop_btn::before{
    content: '';
  position: absolute;
    bottom:20px;
    right:25px;
    width: 40px;
    height: 1px;
  background:#333;
    transition: all .3s;
}

.shop_btn::after{
    content: '';
  position: absolute;
    bottom:25px;
    right:25px;
    width: 15px;
    height:1px;
  background:#333;
    transform: rotate(35deg);
    transition: all .3s;
}

.shop_btn:hover::before{
    right:10px;
}

.shop_btn:hover::after{
    right:10px;
}


@media screen and (max-width: 800px){
#top .sec5 .col_box{ display:block;}	
#top .sec5 p.main_text{ writing-mode: horizontal-tb; padding:calc( clamp(8rem, 2.105rem + 10.53vw, 16rem) + 15px) 10px 0 10px; margin-bottom:30px;}
#top .sec5 p.main_text:before{ content:"05"; position:absolute; top:0; left:0; transform:none;}	
#top .sec5{ padding:20px 0;}
#top .sec5 img.image15{ margin:30px auto 30px; }
}
@media screen and (max-width: 800px){
#top .sec5 .youtube_box h1{ margin:30px auto;}

}












 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



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


@media screen and (max-width: 960px){
header .nav_wrap{ display:none;}
header #menubtn{ display:block;}


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


}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
}






/*560以下 */
@media screen and (max-width: 560px){
header .logo{ margin:15px auto 10px 15px; max-width:60%;}







/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
.spno2{ display:none;}






}