@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

/* MEMO */
/* #148e00：濃い緑 */

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; }
footer, header, nav, section { display:block; }
div, nav, section, dl, ul { overflow:hidden; }
ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
form, input,select,textarea { vertical-align:middle; box-sizing:border-box; }
input, button, textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/*================================================
 *  タグ定義
 ================================================*/
* { line-height:1.6; }
html { background-color:#dddddd; height:100%; }
body { margin:0 auto; font-size:14px; -webkit-text-size-adjust:none; background-color:white; }
body, textarea, input { font-family:'Noto Sans JP', sans-serif; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); color:#222; }
a:hover, a:focus { text-decoration:none; outline:none; }
h1 { font-size:24px; font-weight:400; letter-spacing:-0.1em; }
h2 { font-size:20px; font-weight:400; letter-spacing:-0.1em; }
p { margin-bottom:0.5em; }
p:last-child { margin-bottom:0; }
section { min-height:500px; height:calc(100vh - 90px - 45px); position:relative; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { position:fixed; bottom:20px; right:10vw; background-color:#333; border:1px solid white; z-index:2; opacity:0.95; }
#page-top a { display:block; width:60px; height:60px; background:url("images/common_totop.png"); }
#page-top a:hover { text-decoration:none; background-color:black; opacity:1; }

/*================================================
 *  ページ共通
 ================================================*/
/* ブロック構造 */
.inner { width:960px; margin:0 auto; }
.object_fit { background-size:cover; background-position:center center; background-repeat:no-repeat; display:block; position:absolute; top:0; left:0; width:100%; height:100%; }

/* 文字装飾 */
span.nobr { white-space:nowrap; display:inline-block; }

/*================================================
 *  ページ別定義
 ================================================*/
/* TOPページ */
header { display:flex; justify-content:space-between; align-items:center; height:90px; padding-left:30px; padding-right:30px; }
h1 { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
h1 span { line-height:1; }
h1 img { margin-left:10px; }
header h2 { text-align:right; margin-left:20px; }

ul.slide { position:relative; z-index:1; width:100%; height:100%; }
ul.slide li { width:100%; height:calc(100% - 90px); }
ul.slide li { display:none; }
div.slide_filter { position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.8); }

div.hotels { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%, -50%); width:900px; margin:auto; display:flex; justify-content:space-between; }
div.hotels a { display:block; width:400px; background-color:#e8fcec; }
div.hotels a h2 { text-align:center; font-size:20px; color:white; padding:10px; }
div.hotels a.fuchu h2 { background-color:#666699; }
div.hotels a.musashisakai h2 { background-color:#40996a; }
div.hotels a img { display:block; width:100%; margin-left:auto; margin-right:auto; }
div.hotels a div { padding:10px; }
div.hotels a:hover img { opacity:0.5; }

footer { text-align:center; height:45px; line-height:45px; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット大
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:960px) {

/* ページの戻り */
#page-top { right:5vw; } 
#page-top a:hover { opacity:1; }

/* TOPページ */
header { padding-left:20px; padding-right:20px; }
header h2 { font-size:16px; margin-left:0; }
div.hotels { width:calc(100% - 40px); }
div.hotels a { width:calc(50% - 20px); }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット小
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:800px) {

html { background-color:white; }
header { display:block; padding:20px; height:auto; }
header h1 { display:block; }
section { height:auto; min-height:auto; position:static; background-color:#eeeeee; padding-top:20px; padding-bottom:20px; }
ul.slide { display:none; }
div.slide_filter { display:none; }
div.hotels { position:static; transform:none; }
div.hotels a:not(:last-child) { margin-bottom:20px; }
footer { height:auto; padding-bottom:80px; }

}

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ大
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:640px) {

div.hotels { display:block; }
div.hotels a { width:100%; }

}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ小
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:480px) {

h1 { font-size:20px; }
h1 img { height:20px; }
header h2 { font-size:14px; }
h2 { font-size:16px; }
div.hotels a h2 { font-size:18px; }
}