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



main{width: 1000px; margin: auto; background: #fff; overflow: hidden;}

a:hover{opacity: 0.5;}

#hero{}
#hero h1{width: 722px; margin: 100px auto 90px;}
#hero .line01{width: 215px; margin: 0 auto 40px;}
#hero .lead{font-size: 2.3em; line-height: 2.1em; text-align: center; padding: 0 0 95px;}

#kikan{background: url("../img/lead_bg.png") repeat-y; background-size: 100%; text-align: center; padding: 75px 0 20px;}
#kikan dl{margin: 0 0 40px;}
#kikan dt{color: #0053ae; background: #fff; width: 170px;  font-size: 3.2em; margin: 0 auto 15px; padding: 5px;}
#kikan dd{color: #fff; font-size: 3em;}



#contents{background: url("../img/bg01.png") repeat-y; background-size: 100%; padding: 0 0 77px; border-bottom:  1px solid #bbbbbc;}

#contents #goods h2{width: 588px; margin: 70px auto 30px;}
#contents #goods .lead{font-size: 2.2em; line-height: 1.5em; text-align: center;}
#contents #goods .item{ width: 805px; margin: 55px auto 0;}
#contents #goods .note{font-size: 1.6em; text-align: center; margin: 55px 0;}

#contents #stay{}
#contents #stay h2{width: 754px; margin: 90px auto 40px;}
#contents #stay .lead{font-size: 2.2em; line-height: 1.5em; text-align: center;}
#contents #stay .item{position: relative;}
#contents #stay .item .pict{width: 948px; margin-left: 50px;}
#contents #stay .item .price{position: absolute; bottom: 50px; width: 100%; text-align: center; }
#contents #stay .item .price h3{width: 109px; margin: 0 auto 45px;}
#contents #stay .item .price dt{background: #000; color: #fff; font-size: 2em; display: inline; padding: 5px;}
#contents #stay .item .price dd{font-size: 2.8em; display: flex; align-items: center; justify-content: center; margin-top: 15px;}
#contents #stay .item .price dd span{font-size: 0.6em; display: inline-block;}

#contents #stay .rev{text-align: center;  font-size : 2.4em; color : #041686; font-weight: 600;}
#contents #stay .btn{margin: 30px auto 75px; width: 287px;}
#contents #stay .note{ font-size : 1.6em; line-height: 2.1em; text-align: center;}

#contents .about{margin: 50px auto 0; width: 806px; border: 1px solid #231815; text-align: center;  background: #fff;}
#contents .about h4{background: #231815; color: #fff; font-size:1.8em; padding: 10px;}
#contents .about ul{margin: 18px;}
#contents .about li{font-size: 1.6em; padding-left: 1.2em; text-align: left; margin-bottom: 10px;}
#contents .about li::before{content: '●'; color: #bbbbbc; margin-left: -1.2em;}

footer{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
footer .footerlogo{padding: 60px 0 80px; text-align: center; border-bottom: 1px solid #bbbbbc;}
footer .footerlogo img{width: 367px;}

footer .sns{ border-bottom: 1px solid #bbbbbc; padding:  0 0 44px;}
footer .snstit{width: 534px; margin: 50px auto 20px;}
footer .snsicon{display: flex; justify-content: space-between; width: 385px; margin: auto;}
footer .snsicon li{width: 67px;}

footer .info{width: 770px; margin: auto; padding: 50px 0;}
footer .info h3{font-size: 2em; margin-bottom: 15px;}
footer .info p{font-size: 1.5em; line-height: 1.8em; margin-bottom: 40px;}
footer .info ul{font-size: 1.5em; line-height: 1.8em;}
footer .info ul li{padding-left: 1.2em;}
footer .info ul li::before{content: '・'; margin-left: -1.2em; padding: 0 5px 0;}


footer .safety{border: 1px solid #103770; width: 760px; margin: auto; padding: 50px 0; text-align: center;}
footer .safety .icon{display: flex; justify-content: space-between; align-items: center; max-width: 523px; margin: 0 auto 45px; }
footer .safety .icon li:nth-child(1){width: 115px;}
footer .safety .icon li:nth-child(2){width: 159px;}
footer .safety .icon li:nth-child(3){width: 126px;}

footer .safety h3{color : #103770; font-size: 2.6em; line-height: 1.4em;}
footer .safety a{color : #2C80AD; text-decoration: underline; font-size: 1.8em;}

#gototop{position: fixed; right: 20px; bottom: 20px;  }
#gototop a{font-size: 25px; background: rgba(54,54,54,0.6); color: #fff; display: block; padding: 15px 15px; text-decoration: none;}






/* @media : SP */
@media screen and (max-width: 768px) {

body{font-size: 8px;}
main{width: 100%;}

#hero h1{width: 80%; margin: 40px auto;}

#kikan{background-size: cover; padding: 25px 0 25px;}
#kikan dl{margin: 0 0 0px;}
#kikan dl:first-child{margin: 0 0 20px;}
#kikan dt{font-size: 2em; width: 120px;}
#kikan dd{font-size: 2.5em;}

#contents #goods h2{width: 80%;}

#contents #goods .item{width: 100%;}

#contents #stay h2{width: 98%; margin: 70px auto 30px;}

#contents #stay .item .pict{width: 100%; margin-left: 0;}

#contents #stay .item .price h3{width: 25%;     margin: 0 auto 30px;}
#contents #stay .item .price{position: relative; margin-top: -40px;}
#contents #stay .btn { margin: 0px auto 35px;    width: 60%;}
#contents #stay .rev{line-height: 1.6em;}

#contents .about{width: 90%;}

footer .safety{width: 90%; padding: 25px 0;}
footer .info,
footer .safety .icon{width: 90%; margin: 0 auto 0px;}

footer .safety .icon li:nth-child(1){width: 30%;}
footer .safety .icon li:nth-child(2){width: 32%;}
footer .safety .icon li:nth-child(3){width: 30%;}
footer .safety h3{font-size: 2em; font-weight: 500;}

footer{ padding-bottom: 20px;}
footer .footerlogo{padding: 30px 0 40px; text-align: center;}
footer .footerlogo img{width: 50%;}

footer .sns{padding: 22px 0;}
footer .snstit{width: 90%; margin: 20px auto 10px;}
footer .snsicon{display: flex; justify-content: space-between; width: 60%; margin: 30px auto;}
footer .snsicon li{width: 15%;}

}