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

html {
  box-sizing: border-box; height:100%;
}
body{ background:#F7F3F1; 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.6rem; line-height:2.3em; 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_wrap{ width:100%; background:#fff;}
header { width:1200px; max-width:100%; margin:0 auto; position:relative;}
header .header_top{ display: flex; justify-content: space-between; align-items: flex-end; padding-bottom:30px; }
header .logo{ width:320px; max-width:26%;}
header .nav_wrap{width:850px;  max-width:74%; display: flex; justify-content: space-between; }
header nav {width:850px; max-width:90%; margin:50px auto 0;}
header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{ font-size:1.6rem; line-height:1.4rem; letter-spacing:0.1em; padding:5px 10px; font-weight:500;}
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;}
#navi_toggle ul li{font-size:1.6rem; line-height:1.4rem; letter-spacing:0.1em; padding:15px 10px;}


/*フッター*/
footer{ width:1200px; max-width:95%; margin:100px auto 50px;  text-align:left; }
footer .logo{ width:320px; max-width:90%; margin-bottom:20px;}

footer p{font-size:1.6rem; line-height:1.4em; font-weight:500; margin:0 30px;}
footer .tel{ font-size:1.6rem;  padding-left:35px; position:relative; margin-top:10px;}
footer .tel:before{ content:""; width:30px; height:30px; position:absolute; left:0; top:-3px; background:url(../images/tel_icon.png) no-repeat; background-size:cover;}

footer ul{ margin:50px auto 50px 30px;}
footer ul li{font-size:1.6rem; line-height:1.4rem; letter-spacing:0.1em; padding:10px 10px; font-weight:500; display:inline-block;}

/*共通*/
h1.title{ font-size:2rem; line-height:1.4em; margin:100px auto 80px; -ms-writing-mode: tb-rl;  writing-mode: vertical-rl; display: inline-block;}
.img_title{ color:#fff; line-height:1em;}
header ul.nav li,.img_title,#top .sec6 h1.title,footer ul li{font-family: "Montserrat Subrayada", sans-serif; font-weight: 400;}
#top .sec2,#top .sec3,#top .sec4,#top .sec5,#top .sec6{ width:1200px; max-width:90%; margin:50px auto;}
#top .sec3 .text_box{ width:1000px; max-width:100%; margin:50px auto;}
#top .sec2 .image_box p.img_title,#top .sec4 .image_box p.img_title,#top .sec6 .image_box p.img_title{  font-size:calc(6.2vw + 3.4rem); position:absolute; right:0; bottom:-0.3em;}
#top .sec3 .image_box p.img_title,#top .sec5 .image_box p.img_title{  font-size:calc(6.2vw + 3.4rem); position:absolute; left:0; bottom:-0.3em;}
.image_box{ position:relative;}

/*トップページ*/

#top .sec1{ position:relative;}
#top .sec1 #mainiamge{ position:relative; width:100vw; height:60vw; background:url(../images/top_mainimage.jpg) no-repeat; background-size:cover; margin-bottom:6vw;}
#top .sec1 h1{ font-size:13vw; position:absolute; bottom:-0.3em;}
#top .sec1 p{ height:70%; position:absolute; right:5%; top:10%;  -ms-writing-mode: tb-rl;  writing-mode: vertical-rl; letter-spacing:0.1em; line-height:3em;}

#top .sec2>div{ display:flex; justify-content:center; flex-wrap:wrap;  align-items: flex-end; flex-direction:row-reverse;}
#top .sec2 .image_box{ width:674px; max-width:65%; margin-left:-15%; z-index:-1; }
#top .sec2 .text_box{ width:600px; max-width:50%;}

#top .sec3 h2{ font-size:2.4rem; line-height:1.2em; text-align:left; margin:30px 0 30px;}
#top .sec3 p{ font-size:1.4rem;}
#top .sec3 dl{ width:960px; max-width:100%; margin:40px auto; display:flex; justify-content:center; flex-wrap:wrap; text-align:left; font-size:1.4rem; line-height:2.3rem;}
#top .sec3 dl dt{ width:270px; padding:15px; border-bottom:1px solid #333333;}
#top .sec3 dl dd{ width:calc(100% - 270px); padding:15px; border-bottom:1px solid #333333;}



.more_btn{
	width:220px;
  position:absolute;
  right:10px;
  bottom:0;
  padding: 15px 50px 15px 20px;
    color: #333;
    text-decoration: none;
    outline: none;
	font-size:1.6rem;
	margin:0 0 0 auto;
	cursor:pointer;
	border:1px solid #000;
}

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

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

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

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

#top .sec5 dl{ font-size:1.6rem; line-height:1.6em; width:600px; max-width:95%; margin:100px auto; display:flex; justify-content:left; flex-wrap:wrap; text-align:left;}
#top .sec5 dl dt{ width:120px; padding:10px;}
#top .sec5 dl dd{ width:calc(100% - 120px); padding:10px;}



#top .sec6 { margin-bottom:100px;}
#top .sec6 .image_box{ text-align:center; margin-bottom:50px;}
#top .sec6 h1.title{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; margin:0; text-align:left;}
#top .sec6 .text_box p{ width:900px; margin:0 auto; max-width:90%;}

#top .sec7 { width:900px; max-width:90%; margin:0 auto;}
#top .sec7 h1.title{ color:#fff; font-size:calc(3.6vw + 6rem); text-align:center; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
#top .sec7 .text_box{ display:flex; justify-content:center; flex-wrap:wrap; align-items: flex-start; flex-direction:row-reverse; }
#top .sec7 .text_box div{ width:580px; max-width:65%;}
#top .sec7 .text_box div p{ padding:10px;}
#top .sec7 .text_box img{ max-width:35%; padding:10px;}
#top .sec7 .text_box p.tel{  font-size:calc(1.1vw + 2rem); padding-left:70px; margin:20px 0; position:relative;}
#top .sec7 .text_box p.tel:before{ content:""; width:60px; height:60px; position:absolute; left:0; top:20px; background:url(../images/tel_icon.png) no-repeat; background-size:cover;}


 
/* pagination */
.pagination {
  margin: 30px auto;
  font-size:1.4rem;
}

/* リンクの枠 */
.pagination .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

 /* 数字のリンク */
.pagination .nav-links .page-numbers {
  text-decoration: none;
  color: #333;
  border: 1px solid #aaa;
  display: inline-block;
  border-radius: 6px;
  padding: 0.5em 0.8em;
  -webkit-transition: .3s;
  transition: .3s;
}

/* 現在のページ */
.pagination .nav-links .current {
  background-color: #333;
  color: #fff;
}

/* 現在のページとドット以外にホバーした時 */
.pagination .nav-links a:hover {
  background-color: #333;
  color: #fff;
} 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



/*#privacy { width:800px; max-width:90%; margin:60px auto;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:13px auto 16px;}
#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;}
#privacy .sec1 section{ margin-bottom:60px;}

#contact{ width:800px; max-width:90%; margin:60px auto 100px;}
#contact p{ font-size:1.4em; line-height:3em; }

*/

@media screen and (max-width: 1033px){
#top .sec2 .image_box{ width:674px; max-width:75%; margin-left:-35%; position:relative; z-index:-1; }
#top .sec2 .txt_box{ max-width:60%;}
}


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


}
@media screen and (max-width: 900px){
header .logo{ max-width:100%; width:240px;}
#top .sec1 p{ font-size:1.4rem; height:80%;}
#top .sec2>div{ display:block; }
#top .sec2 .image_box{ width:500px; max-width:100%; margin:0 0 0 auto; }
#top .sec2 .text_box{ width:100%; max-width:100%; margin:30px auto; }

}

}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
#top .sec3 dl dt{ width:230px;}
#top .sec3 dl dd{ width:calc(100% - 230px);}
#top .sec4>div{ display:block;}
#top .sec4 .image_box{ width:590px; max-width:100%; }
#top .sec4 .text_box{ width:600px; max-width:100%; padding-bottom:70px;}
#top .sec5{ margin-top:100px;}
}





/*600以下 */
@media screen and (max-width: 600px){
#top .sec3 dl{ display:block;}
#top .sec3 dl dt{ width:100%; border-bottom: dotted 1px #999;}
#top .sec3 dl dd{ width:100%; }

#top .sec5 .image_box{ margin-bottom:30px;}
#top .sec5 .text_box{ display:block; }
#top .sec5 p.left_box{ font-size:1.6rem; width:100%; max-width:100%;  padding:30px; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; margin:0;}
#top .sec5 .qa_box{ max-width:95%; margin:0 auto;}
#top .sec5 .qa_list{  padding:40px 20px 40px 80px;}
#top .sec5 .qa_list:before{ font-size:12rem;}



#top .sec7 h1.title{ margin:30px auto ;}

#top .sec3 dl {display: block;}
#top .sec3 dl dt {width: 100%; border-bottom: dotted 1px #999;}
#top .sec3 dl dd {width: 100%;} 
  
  
  
/*グーぐるマップ*/
.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%;
}
	
}

/*520以下 */
@media screen and (max-width: 520px){
#top .sec1 p{ width:90%; margin:20px auto; font-size:1.4rem; height:auto; position:relative; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; right:auto; top:auto;}
#top .sec7 .text_box{ display:block;}
#top .sec7 .text_box div{max-width:100%;}
#top .sec7 .text_box div p{ padding:10px;}
#top .sec7 .text_box img{ max-width:100%; padding:10px; margin-bottom:30px;}





}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
.spno2{ display:none;}

#top .sec5 dl{  margin:50px auto; display:block;}
#top .sec5 dl dt{ width:100%; border-bottom: dotted 1px #999; padding-bottom:5px;}
#top .sec5 dl dd{ width:100%;}


#top .sec6 h1.title{ display:none;}

p{ font-size:1.4rem; line-height:2em; margin:0 auto; font-weight:400; text-align:left;}

}