@charset "utf-8";
/* CSS Document */


.info img{
 width: 100%;
}

.pc-show{
 display: none;
}

a {color: #000000;}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----SP----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

html,body{
 height: 100%;
 color: #222222;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----HEARDR----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
見出しボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/


header{
 /*
 z-index: 1;
 background-image: url(../../image/main-image_sp-min.png);
 background-size: 100% auto;
 background-repeat: no-repeat;
 */
 background-color: #22232b;
}

header #main-image {
 padding-top: 75%;
 position: relative; 
}

header #main-image img{
 width: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
}

header #main-image h1{
 display: none;
}

header #main-image h1.display-block{
 display: block; 
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 700;
 font-size: 28px;
 line-height: 38px;
 color: #FFFFFF;
 position: absolute;
 z-index: 1;
 left:20px;
 bottom: 10px;
 -moz-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 -webkit-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 -ms-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 animation-name: main-image-h1;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

	@keyframes main-image-h1 {
	from {
	    opacity: 0;
     transform: scale(1.1);  
	   }
	to {
	    opacity: 1;
     transform: scale(1.0);    
    }
}

.___{}

header #header-col{
 background-color: rgba(21,22,30,0.6);
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 20px;
 position: relative;
 z-index: 1;
}


.___{}

header #header-col .top-col{
 margin-bottom: 20px; /*background-color: #E53235;*/
}

header #header-col .top-col .logo{
 display: inline-block;
 max-width: 184px;
 margin-right: 40px;
}

header #header-col .top-col .logo img{
 width: 100%;
}

header #header-col .top-col h2{
 width: 100%;
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 500;
 font-size: 13px;
 line-height: 20px;
 color: #FFFFFF;
 padding-top: 3%;
 clear: both;
}

header #header-col .top-col h2 br{
 display: none;
}

.___{}

header #header-col .bottom-col{
 padding-bottom: 15px; /* background-color: #25A734; */
}

header #header-col .bottom-col .common-info dl{
 color: #FFFFFF;
 margin-bottom:10px;
}

header #header-col .bottom-col .more a{
 font-size: 12px;
 font-family: 'Rubik', sans-serif;
 font-weight: 400;
 background-color: #FFFFFF;
 display: inline;
 text-decoration: none;
 color: #222222;
 padding-top: 3px;
 padding-bottom: 2px;
 padding-left: 15px;
 padding-right: 15px;
 margin-left: 10px;
 border-radius: 9999px;
 transition:all 0.2s; 
}

header #header-col .bottom-col .more a:hover{
 background-color: #222222;
 color: #FFFFFF;
 transition:all 0.2s; 
}

header #header-col .bottom-col .tel-btn a{
 display: block;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 color: #FFFFFF;
 text-align: center;
 padding-top: 8px;
 padding-bottom: 3px;
 background-image: url(../../image/marker_more.png);
 background-repeat: no-repeat;
 background-position: right 10px center;
 background-size: 20px auto;
}

header #header-col .bottom-col .tel-btn dt{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 500;
 font-size: 14px;
 margin-bottom: 5px;
}

header #header-col .bottom-col .common-tel{
 color: #FFFFFF; 
}

main{
 margin-top: 30px;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----COMMON-INFO----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用：インフォメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.common-info dl  {
 clear: both;
}

.common-info dl dt img{
 width: 28px;
 margin-right: 5px;
}

.common-info dl dt{
 float: left; 
}

.common-info dl dd{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 500;
 font-size: 13px;
 line-height: 22px;
 padding-top: 2px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----COMMON-TEL----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用：TEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.common-tel {} 

.common-tel .tel-number{
 font-size: 18px;
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
} 

.common-tel img{
 width: 28px;
 vertical-align: -8px;
} 


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----SECTION----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用：section
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.main-section{
 clear: both;
 overflow: hidden;
}

.sub-section{
 margin-bottom: 40px;
 clear: both;
}

.sub-section::after{
 content: "";
	display: block;
 clear: both;
}

.sub-section .inner{
 margin-right: 20px;
 margin-left: 20px;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----TTL-BOX----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
見出しボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.main-section .main-photo .ttl-box {
 position: absolute;
 z-index: 1;
 color: #FFFFFF;
}

.main-section .main-photo .ttl-box h3{
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 22px;
 display: block;
 -moz-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 -webkit-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 -ms-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
 text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}

.main-section .main-photo .ttl-box .txt{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 400;
 font-size: 11px;
 display: block;
 -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8);
 -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8);
 -ms-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8);
 text-shadow: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8);
 line-height: 16px;
}


.sub-section .ttl-box{
 border-top: 1px solid #494949;
 border-bottom: 1px solid #494949;
 overflow: hidden;
 margin-bottom: 20px;
 padding-top: 8px;
 padding-bottom: 3px;
}

.sub-section .ttl-box .ttl{
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 600;
 font-size: 18px;
 line-height: 24px;
 margin-bottom: 15px;
}

.sub-section .ttl-box .sub-ttl{
 font-family: 'Rubik', sans-serif;
 font-weight: 500;
 font-size: 16px;
 text-align: right;
 line-height: 18px;
}

.sub-section .ttl-box .sub-ttl br{
 display: none;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----PHOTO----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

.main-photo {
 position: relative;
 margin-bottom: 20px;
 padding-top: 50.3125%;
}

.main-photo img{
 width: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
}

.sub-photo{
 padding-bottom: 25px;
 border-bottom: 1px solid #494949;
 margin-bottom: 20px;
 overflow: hidden
}

.two-item.sub-photo li img{
 width: 100%;
}

.sub-photo .txt{
 clear: both;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 13px;
 line-height: 22px;
 padding-top: 5px;
 font-weight: 300;
 word-break: break-all; 
}

.sub-photo .txt br{
 display: none;
}

.sub-photo .slider{
 width: 100%;
 display: inline-block;
 margin-bottom: 25px;
}

.main-photo img,
.one-item.sub-photo img,
.two-item.sub-photo img{
 width: 100%;
}



.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----ITEM-LIST----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

.item-list {
 overflow: hidden;
 margin-left: 20px; 
 margin-right: 20px;
 /* background-color: #F79294;*/
}

.item-list .box {
 width: 45.97014925373134%;
 margin-right: 8.059701492537313%;
 margin-bottom: 25px;
 float: left;
 /*background-color: #5B8CA8;*/
}

.item-list .box:nth-child(even){
 margin-right: 0%;
}

.item-list .box p.item-image {
 position: relative;
 padding-top: 83.46153846153846%;
 /*background-color: #679E2E; */
}

.item-list .box p.item-image img {
 width: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
}

.item-list .box dl {
}

.item-list .box dl dt {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 600;
 font-size: 14px; 
 line-height: 20px;
}

.item-list .box dl dd {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 font-size: 12px;
 line-height: 18px;
 margin-top: 10px;
 word-break: break-all;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-001----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-001 {}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-002----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-002 {}

#S-002.main-section .main-photo .ttl-box {
 top: 10px;
 left: 10px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-003----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-003 {}

#S-003.main-section .main-photo .ttl-box {
 top: 10px;
 left: 10px;

}

#S-003 .top-col{
 
}

#S-003 .bottom-col{
 margin-right: 20px;
 margin-left: 20px;
}

#S-003 .sub-photo{
 border-bottom: none;
 margin-right: 20px;
 margin-left: 20px; 
 margin-bottom: 0px;

}

#S-003 .sub-photo img{
 width: 100%;

}

#S-003 .harf-item-list{

}

#S-003 .half-item-list .box {
 width: 45.97014925373134%;
 margin-right: 8.059701492537313%;
 margin-bottom: 25px;
 float: left;
 /*background-color: #5B8CA8;*/
}

#S-003 .half-item-list .box:nth-child(even){
 margin-right: 0%;
}


#S-003 .half-item-list .box p.item-image img {
 width: 100%;
}

#S-003 .half-item-list .box dl {

}

#S-003 .half-item-list .box dl dt {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 600;
 font-size: 14px; 
 line-height: 20px;
}

#S-003 .half-item-list .box dl dd {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 font-size: 12px;
 line-height: 18px;
 margin-top: 10px;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-004----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-004 {}

#S-004.main-section .main-photo .ttl-box {
 bottom: 10px;
 right: 10px;
 text-align: right;
}

#S-004.main-section .main-photo .ttl-box .txt{
 position: relative;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-005----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-005 {}

#S-005.main-section .main-photo .ttl-box {
 bottom: 10px;
 left: 10px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-006----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-006 {}

#S-006.main-section .main-photo .ttl-box {
 top: 10px;
 left: 10px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-007----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-007 {}

#S-007.main-section .main-photo .ttl-box {
 top: 10px;
 right: 10px;
 text-align: right;
}

#S-007.main-section .main-photo .ttl-box .txt{
 position: relative;
 right: -10px;
}

#S-007 .main-photo {
 margin-bottom: 3px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-008----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-008 {}

#S-008.main-section .main-photo .ttl-box {
 bottom: 10px;
 left: 10px;
}



.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-009----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-009 {}

#S-009.main-section .main-photo .ttl-box {
 top: 10px;
 right: 10px;
 text-align: right;
}

#S-009.main-section .main-photo .ttl-box .txt{
 position: relative;
 right: -10px;
}

/*
#S-009.main-section .main-photo .ttl-box h3{
-moz-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 3px rgba(0, 0, 0, 0.9);
-webkit-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 3px rgba(0, 0, 0, 0.9);
-ms-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 3px rgba(0, 0, 0, 0.9);
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 3px rgba(0, 0, 0, 0.9);
}

#S-009.main-section .main-photo .ttl-box .txt{
-moz-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 8px rgba(0, 0, 0, 0.9);
-webkit-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 8px rgba(0, 0, 0, 0.9);
-ms-text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 8px rgba(0, 0, 0, 0.9);
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9), 0px 0px 8px rgba(0, 0, 0, 0.9);
}
*/



.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-010----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-010 {}

#S-010.main-section .main-photo .ttl-box {
 top: 10px;
 left: 10px;
}

#S-010 .sub-photo {

}

#S-010 .sub-photo img{
 width: 100%;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-011----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#S-011 #precautions-list{

}

#S-011 #precautions-list .box{
 background-color: #f7f7f7;
 overflow: hidden;
 margin-bottom: 20px;
 padding-bottom: 20px;
}

#S-011 #precautions-list .icon{
 float: left;
 width: 26.785714285714285%;
 text-align: center;
 margin-top: 10px;
 /*background-color: #DB4B4D;*/
}

#S-011 #precautions-list .icon img{
  width: 60px;
}

#S-011 #precautions-list dl{
 width: 70.21428571428571%;
 float: right;
 padding-right: 3%;
 /*background-color: #496597;*/
} 

#S-011 #precautions-list dt{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 16px;
 font-weight: 600;
 margin-top: 15px;
 margin-bottom: 15px;
} 

#S-011 #precautions-list dd{
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 13px;
 font-weight: 300;
 line-height: 24px;
} 

#S-011 #precautions-list dd br{
 display: none;
} 

#S-011 #precautions-list dd.common-tel a{
 display: block;
 border: 1px solid #222222;
 text-decoration: none;
 color: #222222;
 text-align: center;
 background-image: url(../../image/marker_more_bk.png);
 background-repeat: no-repeat;
 background-position: right 10px center;
 background-size: 20px auto;
 margin-top: 15px;
} 

#S-011 #precautions-list dd.common-tel .tel-number{

} 

#S-011 #precautions-list dd.common-tel .hour-time{
 display: block;
 margin-top: -5px;
} 

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----S-012----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#gmap {
 margin-top: 30px;
}

#gmap iframe{
 width: 100%;
 height: 400px;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----FOOTER----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

footer{
 background-color: #222222;
 text-align: center;
 padding-top: 15px;
 padding-bottom: 15px;
}

footer .logo{
 display: inline-block;
 width: 13.958333333333334%;
 min-width: 200px;

}

footer .logo img{
 width: 100%;
}

footer #copyright{
 color: #FFFFFF;
 margin-top: 15px;
 font-size: 12px;
}

footer #copyright span:nth-of-type(1){
 font-family: 'Rubik', sans-serif;
 font-weight: 400;
 margin-right: 10px;
}

footer #copyright span:nth-of-type(2){
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 12px;
 font-weight: 300;
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----PAGE-TOP----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

#page-top {
 width: 32px;
 height: 32px;
 border-radius: 9999px;
 background-color: #222222;
 position: fixed;
 right: 15px;
 bottom: 20px;
 transition:all 0.2s; 
}

#page-top:hover {
 cursor: pointer;
 bottom: 25px;
 transition:all 0.2s; 
}

#page-top img{
 width: 18px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
.X-----LAZYLOAD----X{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

.main-photo img,
.sub-photo img,
.item-image img{
 opacity: 0;
 transform: translate(0, 10px);
 transition: 1s; 
}

.main-photo img.lazyloaded,
.sub-photo img.lazyloaded,
.item-image img.lazyloaded{
  transform: translate(0, 0);
  opacity: 1;
}