@charset "utf-8"; /* ==================================================================================================== 基本設定 ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ .sect_jump { scroll-margin-top:75px; } .container { width:100%; max-width:1600px; } p { word-break:break-all; } /* ==================================================================================================== ヘッタ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ header { position:absolute; top:20px; left:22px; right:auto; z-index:1002; width:80px; height:60px; margin:0; pointer-events:auto; } header h1 { width:100%; height:100%; margin:0; } /* ==================================================================================================== ナビ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ nav { position:fixed; top:0; bottom:0; left:0; z-index:1000; display:flex; align-items:center; width:160px; height:100vh; margin:auto 0; } nav ul li { padding:0 20px; } nav ul li a { position:relative; display:flex; justify-content:left; align-items:center; width:100%; padding:10px 0 10px 10px; font-size:1.0rem; line-height:30px; letter-spacing:0.05em; font-weight:500; color:#fff !important; white-space:nowrap; font-family: 'Cormorant Garamond', serif; } nav ul li a::before { content:""; display:inline-block; width:0; height:0; margin-right:10px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #fff; } nav ul li a::after { content:""; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; margin:0 auto; background:rgba(255,255,255,0.8); transition:.2s; } nav ul li a:hover::after { width:100%; } /* フェード設定 */ nav { opacity:1; transition:1s; } nav.off { opacity:0; user-select:none; pointer-events:none; } /* ==================================================================================================== キービジュアル ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #main_kv { position:relative; width:100%; height:100vh; height:100svh; } #main_kv .inner { width:100%; height:100%; } #main_kv .inner h1 { position:absolute; top:1%; left:0; right:0; bottom:0; max-width:787px; height:auto; max-height:80vh; margin:auto; aspect-ratio:1; } #main_kv .inner a.btn_lodges { position:absolute; top:63%; left:50%; display:flex; justify-content:center; align-items:center; width:250px; margin: 0 0 0 -125px; padding:20px; font-size:1.05rem; line-height:1.2; letter-spacing:0.1em; font-weight:600; text-align:center; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; background:#746434; transition:.2s; } #main_kv .inner a.btn_lodges img { width:26px; height:26px; margin:4px 6px 4px -4px; } #main_kv .inner a.btn_lodges:hover { width:270px; margin: 0 0 0 -135px; background-color:#a58e50; box-shadow:15px 15px 30px rgba(0,0,0,0.1); } #main_kv .inner a.btn_wp { position:absolute; display:block; background:rgba(0,0,0,0.6); transition:.3s; } #main_kv .inner a.btn_wp:hover { background:#111; } #main_kv .inner a.btn_wp._01 { top:80.0%; left:25.5%; width:28.5%; } #main_kv .inner a.btn_wp._02 { top:80.0%; left:55.2%; width:19.5%; } #main_kv .inner img.bg { width:100%; height:100vh; height:100svh; object-fit:cover; } @media screen and (max-width:760px){ #main_kv .inner h1 { top:0; bottom:10.5%; width:90.5%; max-width:auto; } #main_kv .inner a.btn_wp._01 { top:87.5%; left:9.6%; width:46.0%; } #main_kv .inner a.btn_wp._02 { top:87.5%; left:59.1%; width:31.3%; } } /* 背景 */ #main_kv .slider { position:fixed; top:0; left:0; right:0; bottom:0; z-index:-2; width:100%; height:100%; margin:auto; background:#317fc2; pointer-events:auto; } #main_kv .slider .slick-list, #main_kv .slider .slick-slider, #main_kv .slider .slick-track, #main_kv .slider .slick-track .pic { width:100%; height:100%; } #main_kv .slider .pic img { width:100%; height:100%; object-fit:cover; } #main_kv .slider .pic img { transform:scale(1.00); transition:4.0s ease-in-out; } #main_kv .slider .pic.slick-active img { transform:scale(1.04);} /* OFF設定 */ #main_kv .slider { filter:brightness(0.0); transition:2.0s; } #main_kv.on .slider { filter:brightness(1.0); } #main_kv.off .slider { filter:brightness(0.5); } /* ==================================================================================================== Sect_Movie ---------------------------------------------------------------------------------------------------- */ #sect_movie { background:#d4d2c1; border-top:1px solid #193b23; padding:60px 0 76px 0; } #sect_movie .container { position:relative; display:flex; justify-content:space-between; width:80%; margin:0 auto; } #sect_movie .container .col_left, #sect_movie .container .col_right { width:calc(50% - 13px); } #sect_movie h1, #sect_movie h2 { width:100%; margin-bottom:15px; } #sect_movie h1 img, #sect_movie h2 img { width:100%; } #sect_movie .youtube_if { margin:0; border-radius:0; } #sect_movie .youtube_if::before { display:none; } /* ==================================================================================================== Sect_About ---------------------------------------------------------------------------------------------------- */ #sect_about { background:#193b23; } #sect_about .container { position:relative; display:flex; width:80%; padding:150px 10% 150px 0; } #sect_about .container h1 { position:absolute; top:150px; right:0; width:120px; height:600px; } #sect_about .container .thumb { width:35%; margin:0 10% 0 0; } #sect_about .container article { width:45%; } #sect_about .container article h2 { margin-bottom:40px; } #sect_about .container article h2 img { width:500px; height:50px; } #sect_about .container article p { margin-bottom:2em; font-size:1.0rem; line-height:1.8; letter-spacing:0.05em; font-weight:400; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* ==================================================================================================== Sect_ギャラリー ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_gallery { position:relative; margin:0 auto; padding:10px 0 0 0; background:#193b23; } /* リスト */ #sect_gallery .gls_cover { padding:0; } #sect_gallery .gls { display:flex; flex-wrap:wrap; margin:0 -10px; } #sect_gallery .gls li { position:relative; width:calc(20% - 20px); margin:0 10px; } #sect_gallery .gls li a { display:block; } /* ==================================================================================================== Sect_About_アウトドア ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_about_outdoor { display:flex; background:#193b23; } #sect_about_outdoor .container { position:relative; display:flex; flex-direction:row-reverse; width:100%; max-width:auto; padding:150px 0; } /* サムネイル */ #sect_about_outdoor .container .thumb { width:50%; margin:0 0 0 10%; } /* テキスト */ #sect_about_outdoor .container article { width:30%; margin:0 0 0 10%; } #sect_about_outdoor .container article h2 { margin-bottom:40px; } #sect_about_outdoor .container article h2 img { width:500px; height:50px; } #sect_about_outdoor .container article p { margin-bottom:2em; font-size:1.0rem; line-height:1.8; letter-spacing:0.05em; font-weight:400; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* ==================================================================================================== Sect_About_ハンドメイド ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_about_handmade { position:relative; padding:100px; } /* テキスト */ #sect_about_handmade article { width:50%; margin:0 0 0 50%; padding:50px; background:rgba(0,0,0,0.5) } #sect_about_handmade article h2 { margin-bottom:40px; } #sect_about_handmade article h2 img { width:500px; height:50px; } #sect_about_handmade article p { margin-bottom:2em; font-size:1.0rem; line-height:1.8; letter-spacing:0.05em; font-weight:400; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* 背景 */ #sect_about_handmade .bg { position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; } #sect_about_handmade .bg img { width:100%; height:100%; object-fit:cover; } /* ==================================================================================================== ギャラリー02 ---------------------------------------------------------------------------------------------------- */ #sect_gallery_02 { display:grid; width:100%; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-rows:1fr 1fr; gap:0; margin:0 auto -1px auto; background:#d4d2c1; } #sect_gallery_02 img:first-child { grid-column:1 / 3; grid-row:1 / 3; } /* ==================================================================================================== Sect_ロッジ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_lodges { background:#d4d2c1; padding:100px 50px; line-height:0; } /* タイトル */ #sect_lodges h1 { margin-bottom:60px; text-align:center; } #sect_lodges h1 img { width:700px; height:70px; } /* ロッジ */ #sect_lodges .lodge { display:flex; justify-content:space-between; padding:40px 0; border-bottom:4px solid #193b23; } #sect_lodges .lodge:last-child { border-bottom:none; } /* カラム設定 */ #sect_lodges .col_left { width:calc(52% - 25px); } #sect_lodges .col_right { width:calc(48% - 25px); } /* 左カラム */ #sect_lodges .col_left { display:flex; justify-content:space-between; } #sect_lodges .col_left .thumb { width:calc(55% - 25px); } #sect_lodges .col_left article { width:calc(45% - 25px); } #sect_lodges .col_left article h2 { position:relative; height:100px; margin:50px 0 10px 0; } #sect_lodges .col_left article h2 img { position:absolute; top:0; left:0; width:450px; height:100px; } #sect_lodges .col_left article p { margin-bottom:50px; font-size:0.9rem; line-height:1.8; letter-spacing:0.05em; font-weight:600; word-break:break-all; color:#1a3b24; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* 右カラム */ #sect_lodges .col_right .lodge_photos { display:flex; flex-wrap:wrap; margin:0 -3px 25px -3px; } #sect_lodges .col_right .lodge_photos a { display:block; width:calc(33.33% - 6px); margin:0 3px 6px 3px; } #sect_lodges .col_right .wp_reserve { display:flex; justify-content:space-between; } #sect_lodges .col_right .wp_reserve .hgroup, #sect_lodges .col_right .wp_reserve .btn { width:calc(50% - 15px); max-width:auto; min-width:auto; margin:0; } #sect_lodges .col_right .wp_reserve .btn { min-height:80px; background-color:rgba(255,255,255,0.8); color:#8f7936; border-color:#8f7936; } #sect_lodges .col_right .wp_reserve .btn:hover { background-color:rgba(255,255,255,1.0); box-shadow:15px 15px 30px rgba(0,0,0,0.1); } #sect_lodges .col_right .wp_reserve .hgroup { display:flex; align-items:center; } #sect_lodges .col_right .wp_reserve .hgroup h3 { position:relative; width:100%; font-size:1.2rem; line-height:1.8; letter-spacing:0.05em; font-weight:600; color:#8f7936; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } #sect_lodges .col_right .wp_reserve .hgroup h3::after { content:""; position:absolute; bottom:12px; left:3.5em; width:calc(100% - 3.5em); height:1px; background:#8f7936; } #sect_lodges .col_right .wp_reserve .hgroup p { font-size:0.9rem; line-height:1.8; letter-spacing:0.05em; font-weight:600; color:#8f7936; } #sect_lodges .col_right .wp_reserve .hgroup p a { color:#8f7936; text-decoration:underline; } /* カラム逆転設定 */ #sect_lodges .lodge._reverse { flex-direction: row-reverse; } #sect_lodges .lodge._reverse .col_left { flex-direction:row-reverse; } /* ==================================================================================================== Sect_ショップ_レンタル ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_shop_rental { padding:150px; background:#193b23; } #sect_shop_rental .container { display:flex; flex-wrap:wrap; width:80%; max-width:1600px; } #sect_shop_rental .container .thumb { width:100%; margin-bottom:40px; } #sect_shop_rental .container h1 { width:100%; margin-bottom:60px; text-align:center; } #sect_shop_rental .container h1 img { width:40%; } #sect_shop_rental .container .col_left { width:45%; margin-right:10% } #sect_shop_rental .container .col_right { width:45%; } /* テキスト */ #sect_shop_rental article p { margin-bottom:50px; font-size:1.0rem; line-height:2.0; letter-spacing:0.05em; font-weight:400; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } #sect_shop_rental article h2 { margin-bottom:20px; } #sect_shop_rental article h2 img { width:70%; height:auto; } #sect_shop_rental article ul { margin:0 0 20px 20px; font-size:0.9rem; line-height:1.5em; letter-spacing:0.15em; font-weight:bold; color:#fff; } #sect_shop_rental article ul li { position:relative; padding:0 0 1em 0; display:inline; } #sect_shop_rental article ul li:before { content:""; position:absolute; top:6px; left:-15px; z-index:2; display:block; width:4px; height:4px; background:#fff; border-radius:20px; } #sect_shop_rental article ul li:after { content:""; width:5px; height:5px; display:block; } #sect_shop_rental article p._s { font-size:0.8rem; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } /* 画像 */ #sect_shop_rental .container .col_right img { width:100%; } /* ==================================================================================================== Sect_アクセス_スペック ---------------------------------------------------------------------------------------------------- */ #sect_access_spec { background:#d4d2c1; padding:150px 0; } #sect_access_spec .container { display:flex; flex-wrap:wrap; width:80%; max-width:1600px; } #sect_access_spec .container .col_left { width:45%; margin-right:10% } #sect_access_spec .container .col_right { width:45%; } #sect_access_spec .container h1 { width:100%; margin-bottom:50px; text-align:left; } #sect_access_spec .container h1 img { width:500px; } #sect_access_spec .container article h2 { margin-bottom:40px; } #sect_access_spec .container article h2 img { width:500px; height:50px; } #sect_access_spec .container article p { margin-bottom:2em; font-size:1.05rem; line-height:1.8; letter-spacing:0.05em; font-weight:400; color:#000; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } #sect_access_spec ul { margin:0 0 25px 25px; font-size:0.95rem; line-height:1.5em; color:#000; } #sect_access_spec ul li { position:relative; padding:0 0 1em 0; display:inline; } #sect_access_spec ul li:before { content:""; position:absolute; top:8px; left:-20px; z-index:2; display:block; width:4px; height:4px; background:#000; border-radius:20px; } #sect_access_spec ul li:after { content:""; width:10%; height:10px; display:block; } #sect_access_spec ul li span { display:inline-block; transform:scale(0.5); } /* DL リスト */ #sect_access_spec dl { font-size:0.95rem; } #sect_access_spec dt { display:flex; justify-content:space-between; width:75px; font-weight:bold; color:#8f7936; } #sect_access_spec dd { min-height:1px; margin:-20px 0 5px 95px; padding-bottom:15px; } #sect_access_spec dd::after { content:""; display:block; clear:both; height:0; visibility:hidden; } #sect_access_spec dd a { color:#000 !important; text-decoration:underline; } /* ==================================================================================================== フッタ ---------------------------------------------------------------------------------------------------- */ footer { height:auto; color:#fff; background:#193b23; padding:150px 0; } footer .container { display:flex; flex-wrap:wrap; width:80%; max-width:1600px; } footer .container address { width:40%; margin-right:5%; font-style:normal; } footer .container .map { width:55%; } footer .container .map img { width:100%; height:100%; } footer address h1 { width:100%; margin-bottom:50px; text-align:left; } footer address h1 img { width:500px; } footer address p { font-size:0.95rem; line-height:1.6; margin-bottom:50px; } footer dl { font-size:0.95rem; } footer dt { display:flex; justify-content:space-between; width:75px; font-weight:bold; color:#8f7936; } footer dd { min-height:1px; margin:-20px 0 5px 95px; padding-bottom:15px; } footer dd::after { content:""; display:block; clear:both; height:0; visibility:hidden; } footer dd a { color:#fff !important; text-decoration:underline; } /* ==================================================================================================== タブレット対応 ---------------------------------------------------------------------------------------------------- */ @media screen and (max-width:1200px){ nav { position:fixed; top:auto; bottom:40px; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:center; width:100%; height:auto; margin:0 auto; } nav ul { display:flex; flex-wrap:wrap; } #main_kv .inner h1 { top:0; bottom:4%; } #sect_about .container { flex-wrap:wrap; padding:150px 30% 150px 0; } #sect_about .container .thumb { width:100%; margin:0 0 50px 0; } #sect_about .container article { width:100%; } #sect_about_outdoor .container { flex-wrap:wrap; } #sect_about_outdoor .container .thumb { width:80%; margin:0 10% 50px 10%; } #sect_about_outdoor .container article { width:80%; margin:0 10% 0 10%; } #sect_about_handmade article { width:70%; margin:0 0 0 30%; } #sect_lodges .lodge { flex-wrap:wrap; } #sect_lodges .lodge .col_left { width:100%; margin-bottom:40px;} #sect_lodges .lodge .col_right { width:100%; } #sect_shop_rental { padding:150px 100px; } #sect_shop_rental .container { width:100%; } #sect_access_spec .container .col_left, #sect_access_spec .container .col_right { width:100%; margin-bottom:50px; } footer .container address, footer .container .map { width:100%; margin-bottom:50px; } } /* ==================================================================================================== スマートフォン対応 ---------------------------------------------------------------------------------------------------- */ @media screen and (max-width:760px){ header { top:16px; left:15px; width:50px; height:35px; } nav { position:relative; top:auto; bottom:auto; height:150px; margin:0 auto; padding:20px 0; background:#193b23; } nav ul li a { padding:5px 6px 5px 10px; font-size:0.9rem; } nav.off { opacity:1; user-select:auto; pointer-events:auto; } #main_kv { height:calc(100svh - 150px); } #main_kv .inner a.btn_lodges { width:200px; margin:0 0 0 -100px; padding:10px; font-size:0.9rem; } #main_kv .slider { position:absolute; top:0; bottom:auto; height:calc(100svh - 150px); } #sect_movie { padding:9vw 0 12vw 0; } #sect_movie .container { flex-wrap:wrap; } #sect_movie .container .col_left, #sect_movie .container .col_right { width:100%; } #sect_movie .container .col_left { margin-bottom:40px; } #sect_about .container { width:84%; padding:100px 26% 50px 0; } #sect_about .container h1 { position: absolute; top:100px; right:0; width:60px; height:300px; } #sect_about .container .thumb { margin:0 0 30px 0; } #sect_about .container article h2 { margin-bottom:10px; } #sect_about .container article p { font-size:0.9rem; } #sect_about_outdoor .container { padding:100px 0 75px 0; } #sect_about_outdoor .container .thumb { width:82%; margin:0 9% 30px 9%; } #sect_about_outdoor .container article { width:82%;margin:0 9% 0 9%; } #sect_about_outdoor .container article h2 { margin-bottom:20px; } #sect_about_outdoor .container article p { font-size:0.9rem; } #sect_about_handmade { padding:0; } #sect_about_handmade article { width:100%; margin:0; padding:80px 9%;} #sect_about_handmade article h2 { margin-bottom:20px; } #sect_about_handmade article p { font-size:0.9rem; } #sect_about_handmade .bg img { width:200%; max-width:200%; } #sect_gallery_02 { grid-template-columns:1fr 1fr; grid-auto-rows:1fr 1fr 1fr 1fr; } #sect_gallery_02 img:first-child { grid-column:1 / 3; grid-row:1 / 3; } #sect_lodges { padding:50px 25px; } #sect_lodges h1 { margin-bottom:10px; } #sect_lodges .col_left { flex-wrap:wrap; } #sect_lodges .col_left .thumb { width:100%; margin-bottom:25px; } #sect_lodges .col_left article { width:100%; } #sect_lodges .col_left article h2 { margin:0 0 10px 0; } #sect_lodges .col_left article p { margin-bottom:25px; font-size:0.8rem; } #sect_lodges .lodge .col_left { margin-bottom:20px; } #sect_lodges .col_right .lodge_photos a { width:calc(50% - 6px); } #sect_lodges .col_right .wp_reserve { flex-wrap:wrap; } #sect_lodges .col_right .wp_reserve .hgroup { width:100%; margin-bottom:25px; } #sect_lodges .col_right .wp_reserve .btn { width:100%; } #sect_shop_rental { padding:100px 50px; } #sect_shop_rental .container .col_left { width:100%; margin:0 0 25px 0; } #sect_shop_rental .container .col_right { width:100%; } #sect_shop_rental .container h1 { margin-bottom:40px; } #sect_shop_rental .container h1 img { width:60%; } #sect_shop_rental article p { margin-bottom:50px; font-size:0.9rem; } #sect_access_spec { padding:80px 0; } #sect_access_spec .container { width:82%; } #sect_access_spec .container article h2 { margin-bottom:20px; } #sect_access_spec ul, #sect_access_spec dl { font-size:0.8rem; } #sect_access_spec dt { width:65px; } #sect_access_spec dl dd { margin:-17px 0 5px 85px; } footer { padding:75px 0; } footer .container { width:82%; } footer .container address { margin-right:0; } footer dl { font-size:0.8rem; } footer dt { width:65px; } footer dl dd { margin:-17px 0 5px 85px; } }