/* CSS Document */
html{ }
body{ background:#fff; color:#221814; position:relative; word-break: break-all; height:auto;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2rem;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
a:hover img{ opacity:0.8;}
#about,h1.title,#contact p,footer,p.copy,#order p{font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
p{ text-align:left;}

/*ヘッダー*/
.header_bg{ background: #f3f3f3;}
.header_wrap{ width:100%; margin:0 auto;}
header{ width:100%; height:100vh; position:relative; background:url(../images/image1.jpg) no-repeat top left; background-size:cover;
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	}
@supports (-webkit-touch-callout: none) {
  header {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}
header h1{ position:absolute; top:24%; left:11%; max-width:35%;}
header div{ width:350px; margin:0; border-left:4px solid #FFF000; overflow:hidden; position:absolute; top:0; right:0; padding-top:23%;}
header p{ color:#fff; font-size:2.4em; padding-left:15px; text-shadow: 1px 1px 3px #000; letter-spacing:-0.1em;}
header ul{ margin:28% 0 30px;}
header ul li{ font-size:1.6rem; font-weight:bold; line-height:1.4em; padding:0 0 10px 15px; text-align:left; text-shadow: 0px 1px 1px rgba(255,255,255,0.5), 1px 0px 1px rgba(255,255,255,0.5), -1px 0px 1px rgba(255,255,255,0.5), 0px -1px 1px rgba(255,255,255,0.5);}




/*トップページ*/
#top_wrap{ overflow:hidden;}
.about_f4_wrap{ width:100%; background:#111;}
.about_f4{ width:1024px; max-width:100%; margin:0 auto; background:url(../images/image3.jpg) right 30px no-repeat #000000; text-align:left; position:relative;}
.about_f4 .image2{margin:10px 0 30px 80px;}
#para_image1{ max-width:60%; position:absolute; right:-5%; bottom:-20%;}

/*.about_f4{ background:#000; width:1024px; max-width:100%; margin:0 auto; overflow:hidden;}
.about_f4 .image2{ float:left; margin:10px 0 30px 80px;}
.about_f4 .image3{ width:360px; margin:60px 0 0 auto; display:block;}
*/

h1.title{ background:#FFF000; padding:50px 8px 5px 8px; margin:0 auto 0 0; font-size:1.8rem; line-height:1.2em; letter-spacing:0.1em; display:inline-block; font-weight:bold;}

#service { background:url(../images/image4.png) no-repeat left top 230px;}
#service h2{ background:#FFF000; padding:3px 8px 3px 8px; margin:50px auto 0 0; font-size:1.4rem; line-height:1.2em; display:inline-block; font-weight:bold;}
#service .service_wrap{ width:600px; max-width:67%; text-align:left; margin-left:25%; position:relative; padding:0 0 10px;}
#service p{ font-size:1.4rem; line-height:1.6em; padding:5px 0 5px; margin-bottom:10px;}
#service ul{ font-size:1.2rem; line-height:1.6em; border:1px solid #FFF000; padding:3px 10px; margin-bottom:10px;}
#service ul li{ display:inline-block; margin-right:15px; font-weight:bold;}

#para_image2{ max-width:100%; position:absolute; right:-20%; top:20%;}
#para_image3{ max-width:70%; position:absolute; left:-50%; top:60%;}
#para_image4{ max-width:90%; position:absolute; left:-50%; bottom:5%;}


#about_wrap{ width:100%; background:#000;}
#about { width:1024px; max-width:100%; margin:0 auto; text-align:right; background:url(../images/image5.jpg) no-repeat center top; background-size:cover;}
#about h1{ margin:0 10% 0 auto;}
#about div{ width:460px; max-width:80%; margin:0 5% 0 auto; padding-bottom:30px;}
#about p{ width:430px; max-width:100%; padding:20px 0; margin:0 auto; color:#fff; font-size:1.3rem; line-height:2em; letter-spacing:-0.05em;}
#about p:nth-of-type(1){ margin-top:30px;}

#outline{ width:1024px; max-width:90%; background:#000; padding:100px 0 150px; margin:0 auto; position:relative;}
#outline dl{ width:720px; max-width:100%; margin:0 auto; color:#fff; font-size:1.2rem; line-height:1.4em; text-align:left}
#outline dl dt{ padding:10px 10px 10px 35px; float:left;}
#outline dl dd{ padding:10px 10px 10px 27%; border-bottom:1px solid #fff;}
#outline dl dd ul:nth-of-type(1){ margin-bottom:20px;}
#outline dl dd ul li{ padding:3px 0;}
#outline h1{ width:650px; max-width:95%; margin:20px auto 10px; color:#fff; text-align:left; font-size:1.2rem; line-height:1.4em;}

#para_image5{ max-width:60%; position:absolute; left:-20%; bottom:0%;}
#para_image6{ max-width:80%; position:absolute; right:-20%; top:10%;}
#para_image7{ max-width:50%; position:absolute; right:-7%; bottom:-15%;}

#contact_wrap{ width:100%;}
#contact,#order { width:1024px; max-width:90%; margin:0 auto; text-align:left; position:relative; padding:0 0 10px;}
#contact h1,#order h1{ margin:0 auto 50px 10%;}
#contact p,#order p{ width:790px; margin:10px auto; max-width:80%; font-size:1.4rem; line-height:1.8em;}
#contact p.tel{ font-weight:bold; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, Verdana, sans-serif; letter-spacing:0.1em;}
#contact p.tel span{ background:#FFF000; padding:0 8px; display:inline-block; color:#000;}
#contact p:nth-of-type(3){ font-size:1.2rem;}
#contact dl,#order dl { width:500px; margin:100px auto 150px; max-width:95%; font-size:1.2rem; line-height:1.6em; position:relative; z-index:10;}
#contact dl dt,#order dl dt{ padding:5px;}
#contact dl dd,#order dl dt{ padding:5px;}
#contact dl dd a{ text-decoration:underline;}
#para_image8{ max-width:90%; position:absolute; left:-7%; bottom:1%; z-index:3;}

.banner_wrap{  display: flex; flex-wrap: wrap; justify-content: center; margin:30px auto;}
.banner_wrap img{ margin:10px;}


/*グーぐるマップ*/
.gmap {
position: relative;
width:650px;
padding-bottom: 25%;
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%;
}

/*フッター*/
.footer_wrap{ width:100%; background: #f3f3f3;}
footer { width:1024px; max-width:100%; margin:0 auto; position:relative; background:url(../images/image6.jpg) no-repeat right top; background-size:cover; z-index:0;}
footer h1{ position:absolute; bottom:0; left:0px;}
footer .nav_wrap{ width:310px; margin:0 20px 0 auto;}
footer ul.social_nav{ background:rgba(255,240,0,0.8); padding:0 10px;}
footer ul.social_nav li{ display:inline-block; padding:10px;}
footer ul.footer_nav{ font-size:1.8em; line-height:1.4em; margin:0; padding-bottom:100px;}
footer ul.footer_nav li{ padding:5px 30px; text-align:left;}
p.copy{ font-size:1.2em; line-height:1.4em; padding:5px 30px 30px; text-align:right;}


/*サンクスページ、プライバシーポリシー*/
.thanks,.privacy{ width:680px; margin:0 auto; padding:100px 0 150px; max-width:90%;}
.thanks h1{ font-size:2.0rem; line-height:1.6em; margin:20px auto 60px;}
.thanks p{ font-size:1.6rem; line-height:1.6em;}

.thanks span.tel{ font-weight:bold; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, Verdana, sans-serif; letter-spacing:0.1em; background:#FFF000; padding:0 8px; display:inline-block;}

.privacy .logo{ padding-bottom:20px;}
.privacy h1{ font-size:2rem; line-height:1.6em; margin:30px 0 10px; font-weight:bold; text-align:left; color:#934b74;}
.privacy h2{ font-size:1.6rem; line-height:1.4em; font-weight:bold; text-align:left; margin:10px 0 5px;}
.privacy p{ font-size:1.4rem; line-height:1.6em;}

@media (prefers-color-scheme: dark) {
#service,#contact_wrap,#order_wrap{
    background-color: #000;
    color: #fff;
  }
#service h1,#service h2,#contact_wrap h1,#order_wrap h1{{ color:#000;}
#contact dl dd a{ text-decoration:underline; color:#fff;}

}
@media screen and (max-width: 1024px) and (max-height: 700px) {
header div{ padding-top:18%;}
}

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

}


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


}





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

header div{ width:280px; padding-top:23%;}
header p{ font-size:2.2em;}
.about_f4 .image2{margin:10px 0 30px 30px;}
.about_f4{ background-size:55%; background-position:bottom 30px right 0px;}

#service { background-size:30%;}
#para_image2{right:-10%;}



/*グーぐるマップ*/
.gmap {
position: relative;
width:95%;
padding-bottom: 40%;
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%;
}

@media screen and (max-width: 767px) and (max-height: 400px) {
header div{ width:280px; padding-top:15%;}
}
/*560以下 */
@media screen and (max-width: 560px){
header h1{ position:absolute; top:5%; left:10%; right:10%; max-width:50%;}
header div{ top:22%; right:0; height:150px; padding-top:50px;}
header ul{ margin:13% 0 15px;}
header ul li{ font-size:1.4rem; padding:0 0 5px 15px; }

#about p{ padding:15px 0; line-height:1.8em;}
#outline dl dt{ padding:10px 10px 5px 35px; float:none; border-bottom:1px dotted #fff;}
#outline dl dd{ padding:10px 10px 10px 35px; border-bottom:1px solid #fff; text-align:left;}

#para_image3{bottom:5%;}


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

}