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

html {
  box-sizing: border-box; height:100%;
}
body{ background:#221814; height:100%; color:#fff; position:relative;}
a{ color:#fff;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem); line-height:2.2em; letter-spacing:0.1em; margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 10px;
    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:1000px; max-width:100%; margin:0 auto; position:relative; padding-bottom:15px; display:flex; justify-content: space-between; flex-wrap:wrap; }
header .header_left{ width:260px; margin-bottom:80px; padding:10px}
header .header_right{ width:calc(100% - 260px); margin-top:100px;}
header .logo{ margin:20px 0; font-family: "Yuji Syuku", serif; font-size:clamp(3.0rem, 1.9584rem + 2.37vw, 4.8rem); letter-spacing:0.2em; position:relative; padding:114px 15px 20px;  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
header .logo:before{ content:""; background:url(../images/logo.jpg) no-repeat; background-size:contain; width:94px; height:94px; position:absolute; top:0; left:0;}
header .header_left p{ font-size:1rem; line-height:1.5em; writing-mode: horizontal-tb;}
header .header_right .nav_wrap{ display:flex; justify-content:right; flex-wrap:wrap; align-items: flex-start; flex-direction: row-reverse;}
header nav {}
header ul.nav { text-align:left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-right:30px;}
header ul.nav li{ font-size:1.6rem; line-height:1.4rem; margin:0 10px; padding:5px; font-weight:500;}
header ul.nav li.sns{ width:40px;}


#navi_toggle{ width:100%; display:none; background:rgba(0,0,0,0.8); 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.6rem; margin:0px 0 30px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li.sns ul{ margin:0;}
#navi_toggle ul li.sns ul li{ display:inline-block; width:40px; padding:5px;}

/*フッター*/
#footer_wrap { width:100%; max-width:100%; margin:0 auto; padding:0; background:#fff; color:#000; position:relative;}
#footer_wrap .bg{ width:1200px; padding:45% 0 0 0; max-width:100%; margin:0 auto; background:url(../images/image5.jpg) no-repeat center top; background-size:contain;}
#footer_wrap a{ color:#000;}
footer{ width:1200px; max-width:95%; margin:0 auto; position:absolute; top:0; left:0; right:0; display:flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row-reverse; }
footer .right_box{ width:300px; padding:0; margin:50px 0 0 0; display:flex; justify-content:right; flex-wrap: wrap; flex-direction: row-reverse;}
footer .right_box h1.logo{ margin:20px 0; text-align:left; font-family: "Yuji Syuku", serif; font-size:clamp(2.2rem, 1.1736rem + 2.11vw, 4.2rem); letter-spacing:0.2em; position:relative; padding:64px 0px 20px;  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
footer .right_box h1.logo:before{ content:""; background:url(../images/logo.jpg) no-repeat; background-size:contain; width:44px; height:44px; position:absolute; top:0; left:7px;}
footer .right_box p{ font-size:1.6rem; line-height:1.8em; font-weight:500; margin:30px 30px 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

footer .left_box{ width:300px; font-size:1.6rem; line-height:1.2em; padding:0; margin:100px 0 0; }
footer .left_box ul{}
footer .left_box ul li{ text-align:left; padding:10px 25px;}
footer .left_box ul li.sns ul{}
footer .left_box ul li.sns ul li{ display:inline-block; width:40px; padding:5px;}

/*共通*/
h1.title{  font-size: clamp(2rem, 1.6368rem + 1.14vw, 3rem); line-height:1.4em; margin:100px auto 80px;}
.col_box{display:flex; justify-content:center; flex-wrap:wrap;}

/*トップページ*/
#top .sec1{ width:1200px; max-width:100%; margin:0 auto; background-color:#fff; position:relative;}
#top .sec1 div{ width:1200px; max-width:100%; padding-top:77%; background:url(../images/image1.jpg) no-repeat bottom center; background-size:contain; }
#top .sec1 p{ position:absolute; right:0; top:0; font-family: "Yuji Syuku", serif; color:#000; font-size:clamp(2.2rem, 0.6944rem + 3.42vw, 4.8rem); line-height:1.8em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
margin:30px;}
#top .sec1 p span{ font-size: clamp(1.6rem, calc(0.3264rem + 2.89vw), 3.8rem);}
#top .sec2 { width:1006px; max-width:100%; margin:100px auto;}
#top .sec2 .text_area{ max-width:95%; margin:0 auto; padding:20px;}
#top .sec2 h1{ margin-bottom:40px; text-align:left; letter-spacing:0.2em; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem);}
#top .sec2 .image2{ width:1006px; max-width:100%; margin:100px auto 0;  position:relative; color:#000; font-size:clamp(3.0rem, 0.62562rem + 5.39vw, 7.1rem);}
#top .sec2 .image2 .text1{  position:absolute; right:10%; top:20%;}
#top .sec2 .image2 .text2{  position:absolute; right:10%; bottom:20%;}
#top .sec2 .image2 .text3{  position:absolute; left:10%; top:20%;}
#top .sec2 .image2 .text4{  position:absolute; left:10%; bottom:20%;}

.sec3{ width:1000px; max-width:95%; margin:50px auto; justify-content: space-between; flex-direction: row-reverse;}
.sec3 .text_area{ width:calc(100% - 255px); -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align:left;}
.sec3 .text_area h1{ margin-left:50px; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem); letter-spacing:0.2em;}
.sec3 .text_area p{ height:460px;}
.sec3 .photo{ width:255px;}
.sec3 .photo img{ width:255px; height:255px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}


.sec4 {width:1200px; max-width:100%; margin:100px auto;}
.sec4 .photo{  background:url(../images/image4.jpg) no-repeat; background-size:contain; padding-top:57.5%; position:relative;}
.sec4 .maru{ width:257px; height:257px; display:flex; justify-content: center; align-items: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
 background:#000;position:absolute; top:10%; left:5%;}
.sec4 .maru p{ color:#fff; font-size: clamp(2.4rem, calc(2.2rem + 1.2vw), 3.8rem); line-height:1.4em; text-align:center;}

.sec5{ width:1100px; max-width:95%; margin:50px auto; justify-content: space-between; flex-direction: row-reverse;}
.sec5 .text_area h1{ margin-left:50px; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem);}
.sec5 .text_area p{ height:460px; margin-left:30px;}
.sec5 .text_area{width:30%; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align:left;}
.sec5 .text_area p span{text-combine-upright: all; -ms-text-combine-horizontal: all;}



.sec5 .gmap {
position: relative;
width:550px;
max-width:50%;
padding-bottom: 35%;
height: 0;
overflow: hidden;
max-width:100%;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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



#thanks .sec1{ width:1000px; max-width:90%; margin:200px auto;}


#privacy { width:800px; max-width:90%; margin:60px auto 100px;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:30px auto 10px;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; text-align:left; margin-bottom:20px;}

#contact{ width:800px; max-width:90%; margin:60px auto 100px;}



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


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

.sec5{ display:block; margin:0 auto;}
.sec5 .text_area h1{ margin-left:50px; font-size:clamp(2.0rem, 1.4672rem + 1.11vw, 2.8rem);}
.sec5 .text_area p{ height:330px; }
.sec5 .text_area{width:90%; margin:0 auto;}


.sec5 .gmap {
position: relative;
width:600px;
max-width:100%;
padding-bottom: 70%;
margin:0  auto 40px;

}
 

}
@media screen and (max-width: 900px){
.sec3{ display:block;}
.sec3 .text_area{ width:auto; max-width:90%; margin:0 auto 40px; writing-mode: horizontal-tb; text-align:left;}
.sec3 .text_area h1{ margin:0 0 50px 0px;}
.sec3 .text_area p{ height:auto;}
.sec3 .photo{ width:255px; max-width:90%; margin-left:30px;}
.sec3 .photo img{ width:255px; height:255px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}

#footer_wrap{}
#footer_wrap .bg{ padding:0; margin:0 auto; background:url(../images/image5.jpg) no-repeat top 0% right 0%; background-size:cover;}
footer{  position:relative; top:0; left:0; right:auto; display:block;}
footer .right_box{ width:300px; max-width:100%; padding:20px; margin:20px 0 0 auto; display:flex; justify-content:right; flex-wrap: wrap; flex-direction: row-reverse;}
footer .right_box h1.logo{ margin:20px 0; text-align:left; font-family: "Yuji Syuku", serif; font-size:clamp(2.2rem, 1.1736rem + 2.11vw, 4.2rem); letter-spacing:0.2em; position:relative; padding:64px 0px 20px;  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
footer .right_box h1.logo:before{ content:""; background:url(../images/logo.jpg) no-repeat; background-size:contain; width:44px; height:44px; position:absolute; top:0; left:7px;}
footer .right_box p{ font-size:1.6rem; line-height:1.8em; font-weight:500; margin:30px 30px 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

footer .left_box{ width:200px; max-width:90%; font-size:1.6rem; line-height:1.2em; padding:0; margin:30px 0 0 auto; }
footer .left_box ul li{ text-align:left; padding:10px 10px;}

}



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

header { display:block;}
header .header_left{ max-width:95%; margin-bottom:50px;}
header .header_right{ width:auto; margin-top:0px;}

}





/*600以下 */
@media screen and (max-width: 600px){
.sec4 .photo{ background:url(../images/image4.jpg) no-repeat; background-size:cover; padding-top:75%;}
.sec4 .maru{ width:180px; height:180px; position:absolute; top:5%; left:5%;}
#top .sec2{ margin:50px auto;}








}

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

header .logo:before{width:60px; height:60px; }
header .logo{ padding:80px 10px 20px;}



}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
.sec3 .photo{ margin:0px auto;}
.sec3 .photo img{ height:auto;}
.sec4 .maru{ width:150px; height:150px; position:absolute; top:5%; left:5%;}
.sec5 .text_area p{ height:300px; margin-left:10px; line-height:1.8em;}
header .header_left{ margin-bottom:10px;}

#top .sec1 div{padding-top:120%;  }
#top .sec1 p{ position:absolute; right:0; top:0; font-family: "Yuji Syuku", serif; color:#000; font-size:clamp(2.2rem, 0.6944rem + 3.42vw, 4.8rem); line-height:1.8em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
margin:30px;}


#footer_wrap .bg{ padding:0; margin:0 auto; background:url(../images/image5.jpg) no-repeat top 0% right 10%; background-size:cover;}



.spno2{ display:none;}






}