/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
.wrap{ width:1192px; max-width:100%; margin:0 auto; position:relative;}
p{ font-size:1em; line-height:1.6em; margin:0 auto;}
.tel {font-family:Century Gothic,Verdana, Geneva, sans-serif; font-size:1.2em; line-height:1em;}
.tel i{ display:inline-block; margin-right:5px;}
h1{ max-width:90%; margin:0 auto;}

.hover_button1::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #221814;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.hover_button1:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}

.hover_button1:hover a{ color:#fff;}

.contents{ max-width:90%; margin:80px auto 50px;}
.text1{ font-size:1.4em; line-height:2em;}
#thanks,#privacy,#about h2,#qa,#description2 h2,#description2 h3,#description2 ul,#description3 h2,#description3 h3,#description3 ul.point,#description3 .sec5 ul,#price .notes,#price h2,#price h3{font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;}






/*トグルボタン*/
#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.6); margin-top:60px; position:relative; z-index:1;}
#navi_toggle ul{ margin:0px 15px 0 0; }

#menubtn{
	width:40px;
	height:41px;
	display:none;
    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;
	}
#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:1192px; max-width:100%; margin:0 auto; overflow:hidden; position:relative;}
header h1.logo{ float:left;}
header .tel{ font-size:1.6em; margin-top:28px;}
header .left_box{ width:220px; padding:10px 0 0 20px; float:left;}
header ul.nav { width:600px; margin:33px 0 0 auto;}
header ul.nav li{ display:inline-block; margin-right:10px; padding:3px 5px 2px 3px; line-height:20px;}
header ul.nav li img{ margin-right:5px;}

#navi_toggle ul{ width:130px; margin-left:auto;}
#navi_toggle ul li{ border-bottom:1px solid #a5d9ec; margin:0px 0 4px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li img{ margin-right:5px;}


/*フッター*/
#footer_wrap{ width:100%; background:#e9e4d9; padding:30px 0;}
footer{ width:965px; max-width:95%; margin:0 auto; overflow:hidden;}
footer .left_box{ width:260px; text-align:left; float:left; line-height:1.2em;}
footer h1{ font-size:1.2em; padding:5px 0 10px;}
footer p{ font-size:1em; padding:0; margin:0;}
footer p.tel{ font-size:1.2em; margin-top:5px;}
footer ul.nav{ padding:70px 0 0 370px; text-align:left;}
footer ul.nav li{ display:inline-block; margin-right:20px; font-size:1em; line-height:1.4em;}


/*トップページ*/

header #top_mainimage{ width:1192px; background-attachment: fixed;  max-width:100%; margin:0 auto; position:relative;  text-align:left; color:#fff; font-size:1.1em; line-height:1.6em;}
header #top_mainimage a{ color:#fff;}
header #top_mainimage .logo{ position:absolute; top:40px; left:50px;}
header #top_mainimage .text_box{ position:absolute; top:120px; left:180px; max-width:90%; margin:0 auto;}
header #top_mainimage .text_box p{ line-height:1.8em; animation-delay: 0.5s; animation-timing-function: ease-out;}
header #top_mainimage .tel_box { animation-delay: 1s; animation-timing-function: ease-out; width:230px; margin:40px 0 30px 0; float:left;}
header #top_mainimage .tel{ font-size:1.4em; line-height:1em; position:relative; padding-left:17px;}
header #top_mainimage .tel_box i{ font-size:0.8em; position:absolute; left:0; top:10px;}
header #top_mainimage .tel_box p span{ font-size:0.6em; display:block; line-height:1em; padding-top:0;}
header #top_mainimage h1{ opacity:0; animation-delay: 0.2s; animation-timing-function: ease-out;}
header #top_mainimage .mainimage,header #top_mainimage .mainimage_img{ opacity:0;}

header #top_mainimage ul.top_nav { position:absolute; top:145px; right:75px; z-index:10;}
header #top_mainimage ul.top_nav li{ border-bottom:1px solid #a5d9ec; margin:0px 0 4px; padding:3px 5px 2px 3px;}
header #top_mainimage ul.top_nav li img{ margin-right:5px;}
 
#top h1{ margin:30px auto 15px;}
#top p{ font-size:1.1em; line-height:1.4em; margin:10px auto;}
#top ul.discription_list {  margin:20px auto 10px;}
#top ul.discription_list li{animation-name: zoomIn; position:relative; background:#fff; width:120px; height:70px; max-width:30%; margin-right:15px; display:inline-block; position:relative; border:1px solid #221814; font-size:1.2em; font-weight:bold; line-height:1.3em;}
#top ul.discription_list li:nth-child(1){}
#top ul.discription_list li:nth-child(2){ animation-delay: 0.2s;}
#top ul.discription_list li:nth-child(3){ animation-delay: 0.4s;}


#top ul.discription_list li a{ width:100%; height:100%; display:block;}
#top ul.discription_list li div.text{  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 95%;
  text-align: center;}
#top .more_wrap{ width:700px; max-width:97%; position:relative; margin:0 auto 20px;}
#top .more{ position:absolute; right:0; bottom:10px;}

#top .sec1 .more{ position:absolute; right:0; bottom:30px;}
#top .sec1 .more_wrap{ width:600px;}


#top img.fade_img { animation-delay: 0.3s;}

.more{ width:75px; text-align:right; line-height:15.5px; position:relative; padding-right:25px; font-size:1em; color:#7d7c7d;}
.more:after {
	content:"";
     display: block;
     width: 13px;
     height: 13px;
     border-top: solid 1px #7d7c7d;
     border-right: solid 1px #7d7c7d;
     -webkit-transform: rotate(225deg);
     transform: rotate(225deg);
	 position:absolute;
	 right:0; top:0;
	 transition: 0.5s;
	 -webkit-transition: 0.5s;
}
.more:hover:after{ border-color:#1679af; right:4px; animation-direction:normal;}
.more:hover{ color:#1679af;}



#top .sec3 ul{ width:440px; max-width:95%; margin:0 auto 20px auto; padding-left:40px;}
#top .sec3 ul li{ position:relative; text-align:left; padding:2px 0 2px 15px; margin-bottom:5px;}

#top .sec3 ul li:before{
     position: absolute;
     content: '';
     width: 0;
     height: 0;
     border: solid 6px transparent;
     border-left: solid 8px #534236;
     top: 2px;
     left: 0;
}
#top .sec5 dl { width:500px; max-width:95%; margin:20px auto; font-size:1.2em; line-height:1.4em;}
#top .sec5 dl dt{ width:60px; float:left; text-align:right; margin-bottom:10px;}
#top .sec5 dl dd{ margin-left:70px; text-align:left; margin-bottom:10px;}
#top .sec5 dl dd span{ font-size:1.6em; color:#c30d22; display:inline-block; margin:0 3px;}
#top .sec6 .tel_box{ font-size:1.9em; color:#534236;}

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

#description h1{ margin-bottom:20px;}
#description h2{ width:246px; max-width:95%; margin:40px auto 15px;transition: 0.5s; -webkit-transition: 0.2s;}
#description h2:hover{ width:256px; max-width:95%; transform: translate(-10px,-10px); filter:drop-shadow(4px 4px 1px #bbb);}
#description p{ animation-delay: 0.3s;}

#qa dl { width:610px; max-width:95%; margin:20px auto; font-size:1.1em; line-height:1.5em; text-align:left;}
#qa dl dt { padding:13px 10px 13px 70px; color:#0098d9; border:1px solid #0098d9; position:relative;}
#qa dl dd { padding:13px 10px 13px 70px; color:#627a86; position:relative; margin-bottom:20px;}
#qa dl dt:before{ content:"Ｑ"; font-size:1.4em; margin-right:5px; margin-left:-1.5em;}
#qa dl dd:before{ content:"Ａ"; font-size:1.4em; margin-right:5px; margin-left:-1.5em;}
#qa dl dt img{ position:absolute; left:8px; top:50%; margin-top:-12px;}
#qa dl dd img{ position:absolute; left:8px; top:10px;}

#qa dl dt:nth-of-type(2),#qa dl dd:nth-of-type(2){animation-delay: 0.1s;}
#qa dl dt:nth-of-type(3),#qa dl dd:nth-of-type(3){animation-delay: 0.2s;}
#qa dl dt:nth-of-type(4),#qa dl dd:nth-of-type(4){animation-delay: 0.3s;}
#qa dl dt:nth-of-type(5),#qa dl dd:nth-of-type(5){animation-delay: 0.4s;}


#description1 .sec1,#description2 .sec1{ margin-top:-30px;}
.description h1{ margin:20px auto 0; border-top:1px solid #000; position:relative; z-index:-1;}
.description{ width:940px; max-width:100%; text-align:left;}
.description .sec1,.description .sec2,.description .sec3,.description .sec4,.description .sec5,.description .sec6{ width:800px; max-width:90%; margin:0 auto; overflow:hidden;}
.description p{ margin:10px auto ; line-height:2em; font-size:1.2em; }

.description .sec1{animation-delay: 0.3s;}

#description1 h1 img{ margin-top:-44px;}
#description2 h1 img{ margin-top:-43px;}
#description3 h1 img{ margin-top:-43px;}
#description1 h2{ margin:0px auto 10px ; font-size:1.5em; color:#c30d22; font-weight:bold; position:relative;}
#description1 img.image1{ margin:60px 0;}
#description2 .sec1 h2{ margin-top:0;}
#description2 h2{ margin:30px auto 10px ; font-size:1.5em; color:#c30d22; font-weight:bold; position:relative;}
#description2 .sec1 h2 img{ margin-bottom:-10px;}
#description2 p{ margin:10px auto ; line-height:2em; font-size:1.2em; }
#description2 .sec3 div{ overflow:hidden;}
#description2 .sec3 .left_box { width:500px; float:left; max-width:55%;}
#description2 .sec3 .image3{ margin-top:50px; max-width:45%;}
#description2 .sec4{ max-width:95%; }

.description h3{ font-size:1.4em; line-height:1.6em; font-weight:bold; padding:0 10px; position:relative; margin:10px 0 10px;}
#description2 .sec3 .h3_wrap1{width:150px; text-align:center; clear:both; float:left; margin-right:20px;}
#description2 .sec3 .h3_wrap2{ width:220px; text-align:center; clear:both; float:left; margin-right:20px;}
.description h1{ max-width:100%;}

.description h3:before, .description h3:after {
	content: '';
	width: 8px;
	height: 100%;
	position: absolute;
}

.description h3:before {
	border-left: double 4px #221814;
	border-top: solid 2px #221814;
	border-bottom: solid 2px #221814;
	top: 0;
	left: 0;
}

.description h3:after {
	border-right: double 4px #221814;
	border-top: solid 2px #221814;
	border-bottom: solid 2px #221814;
	top: 0;
	right: 0;
}
#description2 .sec3 ul,#description1 ul,#description3 ul.point{ color:#627a86; margin:20px 0 20px 0; font-size:1.2em; line-height:1.4em;}
#description2 .sec3 ul li,#description1 ul li,#description3 ul li{ margin-bottom:5px;}

#description2 .sec4 ul li{ width:90px; margin:0 4px 5px 0; background:#7d8488; color:#fff; display:inline-block; padding:20px 5px; text-align:center;}



#description3 h2{ margin:30px auto 10px ; font-size:1.5em; color:#c30d22; font-weight:bold; position:relative;}

#description3 .h3_wrap1,#description3 .h3_wrap2{width:205px; text-align:center; clear:both; float:left; margin-right:20px;}
#description3 .h3_wrap3{ width:300px; max-width:95%; text-align:center; clear:both; float:left; margin-right:20px;}

#description3 .sec2 .right_box,#description3 .sec4 .right_box{ margin-left:225px;}
#description3 .sec5 ul li{ font-weight:bold; font-size:1.2em; line-height:1.4em;}
#description3 .sec2 { position:relative;}
#description3 .sec2 img.image3{ position:absolute; right:-120px; top:0;}

#price { width:800px; max-width:95%; text-align:left;}
#price h1{ text-align:center;}
#price h2{ margin:30px auto 15px ; font-size:1.5em; color:#c30d22; font-weight:bold; position:relative;}
#price .sec1 h2{ margin-top:-30px;}
#price h2 img{ margin-bottom:-15px;}
#price h3{ font-weight:bold; margin:10px 0 5px;}

#price .notes{ color:#627a86; margin:10px 0 ; font-size:1.2em; line-height:1.4em; padding-left:1em;}
#price .notes li{ padding:5px 0;}
#price .sec3{ position:relative;}
#price .image1{ position:absolute; right:0; top:-100px;}
#price p{ font-size:1.2em; line-height:2em;}
#price .sec2{animation-delay: 0.2s;}


#about { width:780px; max-width:95%; text-align:left; font-size:1.1em; padding-bottom:40px;}
#about h1{ text-align:center;}
#about h2{ font-size:1.5em; line-height:1.4em; color:#627a86; margin:30px 0 15px; font-weight:bold; letter-spacing:0.2em;}
#about p{ font-size:1.2em; line-height:1.8em;}
#about p.name{ font-size:1.5em; text-align:right;}
#about p.name span{ font-size:0.7em;}

#about ul li { padding:5px 0;}
#about dl{ margin:20px 0 40px;}
#about .sec2 dl dt{ width:60px; float:left; text-align:justify; text-justify:inter-ideograph; -moz-text-align-last: justify; text-align-last: justify; padding:5px 0;}
#about dl dd{ padding:5px 0 5px 80px; border-bottom:1px solid #CCCCCC;}
#about .sec2 dl dd:last-child{ border:none;}
#about .sec3{ border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding-bottom:30px;}
#about .sec4 dl dt{ width:60px; float:left; padding:5px 0;}
#about .sec4 dl dd{ border:none;}
#about .sec4 dl.prof dt{ width:60px; float:left; padding:5px 0;}
#about .sec3 img{animation-delay: 0.4s;}

#privacy { width:780px; max-width:95%; text-align:left; font-size:1.1em; padding-bottom:40px;}
#privacy h1{ text-align:center; margin-bottom:30px;}
#privacy h2{ font-size:1.5em; line-height:1.4em; color:#627a86; margin:30px 0 15px; font-weight:bold; letter-spacing:0.2em;}
#privacy p{ font-size:1.2em; line-height:1.8em; margin:0 auto; padding:15px 0; border-bottom:1px solid #ccc;}
#privacy ul li { padding:5px 0;}

#thanks{ width:600px; max-width:90%; text-align:left; font-size:1.2em; padding-bottom:40px;}
#thanks h1{ text-align:center; margin-bottom:30px;}
#thanks h2{ font-size:1.5em; line-height:1.4em; color:#627a86; margin:40px 0 20px; font-weight:bold; letter-spacing:0.2em;}
#thanks p{ font-size:1.2em; line-height:1.8em; margin:0 auto; padding:15px 0;}

/*1020以下 */
@media screen and (max-width: 1020px){
header #top_mainimage .text_box{ left:60px;}


}


/*960以下
 */
@media screen and (max-width: 960px){
	#description3 .sec2 img.image3{ position:relative; right:0px; top:0; margin-top:20px;}

}
/*800以下
 */
@media screen and (max-width: 800px){



}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
#menubtn{ display:block;}
header ul.nav{ display:none;}
header #top_mainimage .logo{ top:20px; left:0; right:0; margin:auto;}
header #top_mainimage ul.top_nav, img.mainimage_img{ display:none;}
header #top_mainimage .text_box{ top:90px; left:40px; line-height:1.8em;}
header .tel{ font-size:1.4em; margin-top:28px;}
header .left_box{ width:230px; padding:10px 0 0 10px; float:left;}

#top .sec2 .more{ position:relative; right:auto; bottom:auto; margin-left:auto;}
footer ul.nav{ padding:70px 0 0 280px; text-align:left;}
#price .image1{ width:240px;}

}





/*643以下 */
@media screen and (max-width: 643px){
.contents{ margin:40px auto 40px;}

header #top_mainimage img.mainimage{ width:643px; height:400px; object-fit: cover;}
.spno{ display:none;}
#top_mainimage h1{ margin-bottom:10px;}
#top_mainimage .tel_box { margin:60px 0 30px 0;}

#top .more,#top .sec1 .more{ position:relative; right:auto; bottom:auto; margin-left:auto;}
#top ul.discription_list li{ margin-right:2%; height:50px;}
#top .sec3 ul{ padding-left:0px;}

#description2 .sec3 .left_box { width:600px; float:none; max-width:95%;}
#description2 .sec3 .image3{ margin-top:20px; max-width:95%;}


}

/*560以下 */
@media screen and (max-width: 560px){
header #top_mainimage .text_box{left:0px; right:0;}
footer .left_box{ float:none; }
footer ul.nav{ padding:20px 0 20px 10px; text-align:left;}

#description1 h1.main_title img,#description2 h1.main_title img,#description3 h1.main_title img{ width:240px; margin-top:-32px;}
.description h1{ margin:10px auto 0;}
#description1 img.image1{ margin:20px 0;}


#description2 .sec3 .h3_wrap1{float:none; margin-right:0px;}
#description2 .sec3 .h3_wrap2{float:none; margin-right:0px;}
#description3 .h3_wrap1,#description3 .h3_wrap2{float:none; margin-right:0px;}
#description3 .h3_wrap3{float:none; margin-right:0px;}
#description3 .sec2 .right_box,#description3 .sec4 .right_box{ margin-left:0;}
#description2 .sec4 ul li{ width:85px; margin:0 1px 4px 0;  padding:15px 0px;}
#description2 .sec4 ul li:nth-child(10){ font-size:0.9em;}
#price .sec5 h2 { position:relative; padding-right:100px;}
#price .sec5 h2 img{ position:absolute; top:0; right:0;}
#price .image1{ position:relative; right:0; top:0px;}

#about dl{ margin:10px 0 20px;}
#about dl dd{ padding:5px 0 5px 65px;}

/*グーぐるマップ*/
.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){
#top ul.discription_list li{ font-size:1.1em; margin-right:1%;}
#top ul.discription_list li br{ display:none;}



}