@charset "utf-8"; /* ==================================================================================================== ページ基本設定 ---------------------------------------------------------------------------------------------------- */ /* ベース */ body { position:relative; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #wrap { position:relative; padding:0; overflow:hidden; } .container { position:relative; width:80%; max-width:1600px; margin:0 auto; } .container._l { width:100%; max-width:1400px; } .container._m { width:80%; max-width:1200px; } .container._s { width:60%; max-width: 900px; } /* ==================================================================================================== ヘッタ ---------------------------------------------------------------------------------------------------- */ /* ヘッタ */ header { position:absolute; top:20px; left:22px; right:auto; z-index:10; width:80px; height:60px; pointer-events:auto; } header h1 a { color:#000; } /* ==================================================================================================== Main_キービジュアル ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ main { position:relative; display:flex; width:100%; height:100vh; min-height:880px; background:rgba(0,0,0,0.5); pointer-events:none; } main::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-2; width:100%; height:100%; margin:auto; background:#000; } /* ロゴ_テキスト */ main article { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:50%; height:100%; margin:0 auto; padding:100px 50px 150px 50px; text-align:center; color:#fff; } main article h1 { width:100%; margin-bottom:20px; font-size:0.9rem; line-height:1.4; letter-spacing:0.2em; font-weight:500; font-family: 'Cormorant Garamond', serif; } main article h1 span { display:inline-block; margin:0 10px; color:#9e522b; transform: scale(3) translate(1px,0.8px); } main article h2 { display:flex; justify-content: center; width:100%; margin:0 auto 10px auto; } main article h2 img { width:180px; height:135px; margin:10px 20px; } main article h3 { width:100%; margin-bottom:15px; font-size:4.4rem; line-height:1.0; font-weight:700; font-family: "Sarabun", sans-serif; } main article h3 span { display:inline; margin:0 0.02em; } main article h3 span:nth-child(5) { margin:0 0.15em; } main article h3 span:nth-child(10)::before { content:"\A"; white-space:pre; } main article h3 span:nth-child(13) { margin:0 -0.06em 0 -0.055em; } main article h4 { width:100%; margin-bottom:60px; font-size:0.8rem; line-height:1.1; letter-spacing:0.2em; } /* ロゴ_テキスト_ご予約 */ main article .btn_reserve { position:relative; width:180px; height:180px; margin:0 auto; pointer-events:auto; } main article .btn_reserve::before { content:""; position:absolute; top:-35px; left:0; right:0; width:1px; height:0; margin:0 auto; background:#fff; } main article .btn_reserve a { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:100%; height:100%; text-align:center; color:#fff; background:url(../../img/stay/concept_dhs/common/bg_grunge.jpg) repeat center center #9e522b; border-radius:50%; } main article .btn_reserve img { display:block; width:50px; height:50px; margin:-5px auto 5px auto; } main article .btn_reserve span { width:100%; font-size:0.7rem; line-height:1.6; letter-spacing:0.05em; font-family: 'Cormorant Garamond', serif; } main article .btn_reserve strong { width:100%; font-size:1.4rem; line-height:1.6; letter-spacing:0.20em; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* ロゴ_テキスト_キャッチコピー */ main h5 { width:50%; height:100%; padding:100px; font-size:1.5vw; line-height:1.4; letter-spacing:0.2em; font-weight:bold; color:#fff; font-feature-settings:normal; writing-mode:vertical-rl; white-space:nowrap; } main h5 span { display: inline-flex; margin: 0 0 0 2vw; pointer-events:auto; overflow:hidden; } main h5 span strong { display:inline-block; white-space:nowrap; width:0%; padding:0.2em 0 0.1em 0; background:#000; } main h5 span font { margin:-0.4em 0 -0.2em; } /* ナビ */ nav { position:absolute; bottom:60px; left:0; right:0; z-index:1000; width:100%; height:50px; } nav ul { display:flex; justify-content:center; width:auto; height:50px; margin:0 auto; pointer-events:auto; } nav ul li { padding:0 20px; } nav ul li a { position:relative; display:flex; justify-content:center; align-items:center; padding:10px 20px; font-size:1.0rem; line-height:30px; letter-spacing:0.05em; font-weight:500; color:#fff; white-space:nowrap; font-family: 'Cormorant Garamond', serif; } nav ul li a::before { content:""; position:absolute; bottom:0; left:0; right:0; width:calc(100% - 40px); height:1px; margin:0 auto; background:rgba(255,255,255,0.8); transition:.2s; } nav ul li a:hover::before { width:100%; } nav ul li a::after { content:""; display:inline-block; width:0; height:0; margin-left:5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #fff; } /* 背景 */ main .slider { position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; width:100%; height:100%; margin:auto; pointer-events:auto; } main .slider .slick-list, main .slider .slick-slider, main .slider .slick-track, main .slider .slick-track .pic { width:100%; height:100%; } main .slider .pic img { width:100%; height:100%; object-fit:cover; } main .slider .pic img { transform:scale(1.00); transition:4.0s ease-in-out; } main .slider .pic.slick-active img { transform:scale(1.04);} /* アニメーション設定 */ main article h1 { opacity:0; transition:2.0s .2s ease } main.on article h1 { opacity:1; } main article h2 { opacity:0; transition:2.0s .4s ease } main.on article h2 { opacity:1; } main article h3 { opacity:0; transition:2.0s .6s ease } main.on article h3 { opacity:1; } main article h4 { opacity:0; transition:2.0s .8s ease } main.on article h4 { opacity:1; } main .btn_reserve { opacity:0; transform:scale(0.5) rotate(15deg); transition:1.0s 1.0s ease; } main.on .btn_reserve { opacity:1; transform:scale(1.0) rotate(0deg); } main .btn_reserve::before { top:-35px; height:0px; transition:2.0s 2.0s ease-in-out; } main.on .btn_reserve::before { top:-35px; height:50px; } main h5 span { height: 0em; transition:2.0s ease-in-out; } main.on h5 span { height:18em; } main h5 span:nth-child(1) { transition-delay:4.0s; } main h5 span:nth-child(3) { transition-delay:6.5s; } main h5 span:nth-child(5) { transition-delay:9.0s; } main h5 span:nth-child(7) { transition-delay:11.5s; } main .slider { filter:brightness(0); transition:8.0s ease } main.on .slider { filter:brightness(1); } /* ==================================================================================================== Sect_コンセプト ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_concept { display:flex; justify-content:space-between; width:100%; padding:100px 0; background:#fff; } /* アイキャッチ */ #sect_concept .eye_catch { width:40%; overflow:hidden; } #sect_concept .eye_catch .imgs { display:flex; flex-wrap:wrap; margin:0 -2px; } #sect_concept .eye_catch .imgs img { margin:0 2px 4px 2px; object-fit:cover; } #sect_concept .eye_catch .imgs img:nth-child(1) { width:calc(100% - 4px); } #sect_concept .eye_catch .imgs img:nth-child(2) { width:calc( 60% - 4px); } #sect_concept .eye_catch .imgs img:nth-child(3) { width:calc( 40% - 4px); } /* テキスト */ #sect_concept article { width:60%; padding:50px 10%; } #sect_concept article h1 { margin-bottom:45px; font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; color:#9e522b; font-family: 'Cormorant Garamond', serif;} #sect_concept article h1 span { display:inline-block; border-bottom:1px solid #9e522b; } #sect_concept article h2 { margin-bottom:25px; font-size:3.2vw; line-height:1.1; letter-spacing:0.05em; } #sect_concept article h2 span { display:inline-block; margin-bottom:15px; } #sect_concept article .jp { margin-bottom:50px; } #sect_concept article .jp p { margin-bottom:25px; font-size:0.95rem; line-height:2.2; letter-spacing:0.05em; font-weight:bold; text-align:justify; text-justify:inter-ideograph; } #sect_concept article .en { margin-bottom: 0px; } #sect_concept article .en p { margin-bottom:20px; font-size:0.80rem; line-height:2.0; letter-spacing:0.02em; font-weight: 500; text-align:justify; text-justify:inter-ideograph; font-family: 'Cormorant Garamond', serif; } /* ==================================================================================================== Sect_ディテイール ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_detail { width:100%; padding:100px 100px 150px 100px; background:#000; } #sect_detail h1 { max-width:1200px; margin:0 auto 45px auto; font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; color:#9e522b; font-family: 'Cormorant Garamond', serif; } #sect_detail h1 span { display:inline-block; border-bottom:1px solid #9e522b; } /* グリッド写真 */ .grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; gap:20px; max-width:1200px; margin:0 auto; filter:grayscale(0.2); } .grid div { position:relative; background:#333; } .grid div img { width:100%; height:100%; object-fit:cover; } .grid div:nth-child(1) { grid-column-start:1; grid-column-end:3; grid-row-start:1; grid-row-end:3; } .grid div:nth-child(2) { grid-column-start:3; grid-column-end:4; grid-row-start:1; grid-row-end:2; aspect-ratio:1/0.7; } .grid div:nth-child(3) { grid-column-start:3; grid-column-end:4; grid-row-start:2; grid-row-end:3; aspect-ratio:1/0.7; } .grid div:nth-child(4) { grid-column-start:4; grid-column-end:5; grid-row-start:1; grid-row-end:3; } .grid div:nth-child(5) { grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4; aspect-ratio:1/0.7; } .grid div:nth-child(6) { grid-column-start:1; grid-column-end:2; grid-row-start:4; grid-row-end:5; aspect-ratio:1/0.7; } .grid div:nth-child(7) { grid-column-start:2; grid-column-end:3; grid-row-start:3; grid-row-end:5; } .grid div:nth-child(8) { grid-column-start:3; grid-column-end:4; grid-row-start:3; grid-row-end:4; aspect-ratio:1/0.7; } .grid div:nth-child(9) { grid-column-start:3; grid-column-end:4; grid-row-start:4; grid-row-end:5; aspect-ratio:1/0.7; } .grid div:nth-child(10) { grid-column-start:4; grid-column-end:5; grid-row-start:3; grid-row-end:5; } /* グリッド写真_キャプション */ .grid div p { position:absolute; bottom:0; right:0; z-index:2; margin:0; padding:8px 10px 5px 40px; font-size:0.7rem; line-height:1.4; letter-spacing:0.05em; text-align:right; font-weight:bold; color:#fff; background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.6)); } .grid div p span { font-size:0.65rem; font-weight:200; color:rgba(255,255,255,0.8); font-family: 'Cormorant Garamond', serif; } /* Fancybox調整 */ .grid div a { width:100%; height:100%; } .grid div a.fancybox::before { bottom:34px; right:5px; background-image:url(../../tools/fancybox/zoom_wt.svg); background-color:rgba(0,0,0,0.0); border:none; border-radius:0; } .fancybox-skin { border-radius:0 !important; } .fancybox-close { top:0 !important; right:0 !important; background-color:rgba(0,0,0,0.5) !important; border-radius:0 0 0 2px !important; } /* ==================================================================================================== Sect_ヒストリー ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_history { position:relative; display:flex; justify-content:space-between; width:100%; padding:120px 8% 200px 8%; background:rgba(0,0,0,0.5); } #sect_history::before { content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; margin:0 auto; background:url(../../img/stay/concept_dhs/history/bg.jpg) no-repeat fixed center bottom #000; background-size:cover; } #sect_history article._l { width:50%; padding:0; } #sect_history article._r { width:50%; padding:0; } /* テキスト_左 */ #sect_history article._l h1 { margin-bottom:45px; font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; color:#fff; font-family: 'Cormorant Garamond', serif; } #sect_history article._l h1 span { display:inline-block; border-bottom:1px solid #fff; } #sect_history article._l h2 { margin-bottom:25px; font-size:3.2vw; line-height:1.1; letter-spacing:0.05em; } #sect_history article._l h2 span { display:inline-block; margin-bottom:15px; color:#fff; background:#000; } #sect_history article._l p { margin-bottom:25px; font-size:1.2rem; line-height:1.5; letter-spacing:0.05em; font-weight:500; color:#fff; font-family: 'Cormorant Garamond', serif; } /* テキスト_右 */ #sect_history article._r .jp { margin-bottom:50px; } #sect_history article._r .jp p { margin-bottom:25px; font-size:0.95rem; line-height:2.2; letter-spacing:0.05em; font-weight:bold; text-align:justify; text-justify:inter-ideograph; color:#fff; } #sect_history article._r .en { margin-bottom: 0px; } #sect_history article._r .en p { margin-bottom:20px; font-size:0.80rem; line-height:2.0; letter-spacing:0.02em; font-weight: 500; text-align:justify; text-justify:inter-ideograph; color:#fff; font-family: 'Cormorant Garamond', serif; } /* 背景 */ #sect_history .slider { position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; width:100%; height:100%; margin:auto; } #sect_history .slider .slick-list, #sect_history .slider .slick-slider, #sect_history .slider .slick-track { width:100%; height:100%; } #sect_history .slider img { width:100%; height:100%; object-fit:cover; } /* ==================================================================================================== Sect_クリエイター ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_creator { position:relative; } #sect_creator h1 { position:absolute; top:50px; left:50px; z-index:2; font-size:1.5rem; line-height:1.4; letter-spacing:0.05em; color:#fff; font-family: 'Cormorant Garamond', serif; } #sect_creator h1 span { display:inline-block; border-bottom:1px solid #fff; } #sect_creator h1 strong { font-size:1.1rem; letter-spacing:0.1em; font-weight:500; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } /* ボタン */ #sect_creator .btns { position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; justify-content:center; width:100%; margin:0; padding:5vw; background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0)); background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1)); } #sect_creator .btns .btn { width:calc(33.33% - 50px); margin:0 25px; padding:10px; cursor:pointer; } #sect_creator .btns .btn h2, #sect_creator .btns .btn h3, #sect_creator .btns .btn h4 { display:inline-block; width:100%; margin-bottom:8px; line-height:1.5; color:#fff; } #sect_creator .btns .btn h2 { font-size:1.0rem; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } #sect_creator .btns .btn h3 { font-size:1.4rem; letter-spacing:0.2em; } #sect_creator .btns .btn h3 span { font-size:0.6rem; font-weight:500; margin-left:0.2rem; letter-spacing:0.05em; } #sect_creator .btns .btn h4 { margin-bottom:15px; font-size:0.8rem; font-weight:500; } #sect_creator .btns .btn p.more { position:relative; padding:0 0 0 30px; font-size:0.8rem; font-weight:500; color:#9e522b; text-decoration:underline; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } #sect_creator .btns .btn p.more::before { content:""; position:absolute; top:-2px; left:-2px; width:20px; height:20px; background: url(../../img/common/wt/plus.svg) no-repeat center center #9e522b; background-size:20px; border-radius:50%; } /* 背景 */ #sect_creator .bg, #sect_creator .bg img { width:100%; background:#333 } /* 小窓 */ .window { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100vh; background:rgba(0,0,0,0.5); opacity:0; visibility:hidden; pointer-events:none; transition:.2s; } .window.on { opacity:1; visibility:visible; pointer-events:auto; } .window .container { position:absolute; top:0; right:0; bottom:0; left:0; display:flex; justify-content:space-between; width:calc(100% - 100px); max-width:980px; height:calc(100% - 200px); margin:auto; padding:0 80px 0 0; overflow:auto; } /* 小窓_プロフィール写真 */ .window .profile { width:50%; overflow:hidden; } .window .profile img { width:80%; object-fit:cover; } /* 小窓_テキスト */ .window article { width:50%; padding:50px 0; } .window article h1, .window article h2, .window article h3, .window article h4, .window article h5, .window article p { line-height:1.5; color:#fff; } .window article h1 { margin-bottom:10px; font-size:2.0rem; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } .window article h2 { margin-bottom:20px; padding-bottom:30px; font-size:1.1rem; letter-spacing:0.1em; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; } .window article h3 { margin-bottom:10px; padding-bottom:10px; font-size:2.0rem; letter-spacing:0.3em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.2); } .window article h3 span { font-size:0.7rem; font-weight:500; letter-spacing:0.2em; } .window article h4 { margin-bottom:10px; padding-bottom:10px; font-size:0.9rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,0.2); } .window article h5 { margin-bottom:20px; padding-bottom:30px; font-size:0.9rem; font-weight:500; } .window article p { margin-bottom:15px; font-size:0.95rem; line-height:2.0; font-weight:bold; } .window article .jp { margin-bottom:50px; } .window article .jp p { margin-bottom:25px; font-size:0.95rem; line-height:2.0; font-weight:bold; text-align:justify; text-justify:inter-ideograph; color:#fff; } .window article .en { margin-bottom: 0px; } .window article .en p { margin-bottom:20px; font-size:0.80rem; line-height:2.0; font-weight: 500; text-align:justify; text-justify:inter-ideograph; color:#fff; font-family: 'Cormorant Garamond', serif; } /* 小窓_背景 */ .window .bg { position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; width:100%; height:100%; margin:auto; background:url(#) no-repeat center center; background-size:cover; filter: brightness(0.3); } /* 小窓：閉じるボタン */ .window .close_btn { position:absolute; top:0px; left:0px; z-index:2; width:100px; height:100px; background:rgba(0,0,0,0.0); cursor:pointer; transition:all 0.2s ease; } .window .close_btn:hover { background:rgba(0,0,0,0.1); } .window .close_btn:before { content:""; position:absolute; top:50%; left:50%; width:40px; height:3px; margin:0px 0px 0px -20px; background:#fff; transform:rotate( 45deg); border-radius:3px; } .window .close_btn:after { content:""; position:absolute; top:50%; left:50%; width:40px; height:3px; margin:0px 0px 0px -20px; background:#fff; transform:rotate(-45deg); border-radius:3px; } /* ==================================================================================================== Sect／予約 ---------------------------------------------------------------------------------------------------- */ /* ご予約 */ .type._reserve { display:block; padding:40px 50px 60px 50px; background:url(../../img/stay/concept_dhs/common/bg_grunge.jpg) repeat center center #9e522b; } /* ご予約 */ .type._reserve .header { width:100%; } .type._reserve .header h1 { margin-bottom:10px; font-size:1.0rem; line-height:0.7; letter-spacing:0.10em; font-weight:400; color:#fff; text-align:center; font-family: 'Cormorant Garamond', serif;} .type._reserve .header h2 { margin-bottom:30px; font-size:1.8rem; line-height:1.6; letter-spacing:0.20em; font-weight:400; text-align:center; color:#fff; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } .type._reserve .header p { font-size:0.9rem; line-height:2.0; letter-spacing:0.05em; font-weight:500; width:90%; text-align:center; margin:-10px auto 40px auto; } .type._reserve .btns { width:80%; margin-bottom:30px; } .type._reserve .btns .btn { color:#621a07; border-color:#621a07; } .type._reserve .btns .btn::after { filter:brightness(0.5) hue-rotate(-60deg) contrast(1.5); } .type._reserve .tel { font-size:1.8rem; line-height:1.6; letter-spacing:0.05em; font-weight:400; margin:40px 0 40px 0; text-align:center; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;} .type._reserve .tel span { font-size:0.9rem; line-height:2.0; letter-spacing:0.05em; font-weight:500; text-align:center; display:block; } .type._reserve p { font-size:0.9rem; text-align:center; } .type._reserve p a.link { color:#fff; text-decoration:underline; } .type._reserve p a.link._blank { background-image:url(../../img/common/wt/blank.svg); } /* ==================================================================================================== Sect／ディナー ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_dinner { position:relative; padding:150px 0 150px 0; background:rgba(0,0,0,0.6); } #sect_dinner::before { content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; margin:0 auto; background:url(../../img/stay/concept_dhs/dinner/bg.jpg) no-repeat fixed center bottom #000; background-size:cover; } #sect_dinner .flex .thumb { width:36%; margin:0 10% 0 0; } #sect_dinner .flex .reads { width:44%; margin-right:10%; display:flex; flex-wrap:wrap; align-content:center; } /* フォトスライダー：アニメーション設定 */ #sect_dinner .flex .thumb .slider li { overflow:hidden; } #sect_dinner .flex .thumb .slider li img { transform:scale(1.0); transition:4.0s ease-in-out 1s; } #sect_dinner .flex .thumb .slider li.slick-active img { transform:scale(1.08); transition:transform 6s ease-in-out; } /* テキスト */ #sect_dinner .reads h1, #sect_dinner .reads h2, #sect_dinner .reads p { margin-bottom:50px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_dinner .reads h1.ttl_l strong { font-size:4.0rem; } #sect_dinner .reads h1.ttl_l span { font-size:1.2rem;} #sect_dinner .reads h2 { font-size:2.0rem; line-height:1.6; letter-spacing:0.2em; font-weight: 400; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } #sect_dinner .reads p { font-size:0.9rem; line-height:2.2; letter-spacing:0.1em; font-weight:bold; width:100%; } #sect_dinner .reads p .btn { padding:0 25px; } /* ==================================================================================================== Sect／朝食 ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_breakfast { padding:80px 80px 60px 80px; background:rgba(255,255,255,0.85); } #sect_breakfast .ttl_l { text-align:center; } #sect_breakfast p._read { margin-bottom:20px; padding:0; font-size:0.9rem; line-height:2.2; letter-spacing:0.1em; font-weight:bold; text-align:center; } #sect_breakfast p._read:last-child { margin-bottom:30px; line-height:1.8; } /* 記事リスト：タイル */ .atls { display:flex; flex-wrap:wrap; justify-content:center; margin:0 -25px 50px -25px; } .atls article { position:relative; width:calc(50% - 50px); margin:0 25px 50px 25px; overflow:hidden; } .atls article .new { left:auto; right:10px; } .atls article a { display:block; text-decoration:none; } .atls article a::after { content:""; position:absolute; z-index:2; display:block; right:20px; bottom:20px; width:30px; height:30px; margin:auto 0; background: url(../../img/common/wt/next.svg) no-repeat center center #ab9353; background-size: 16px; border:2px solid #ab9353; box-sizing:border-box; border-radius:50%; transition:all .2s; } .atls article a:hover::after { transform:scale(1.3); filter:brightness(0.7) contrast(1.5); } .atls article a .cat { display:none; } .atls article a .thumb { position:relative; overflow:hidden; } .atls article a .thumb img { width:100%; transition:all .3s; } .atls article a .thumb img:hover { transform:scale(1.05); } .atls article a .hgroup { position:absolute; bottom:0; left:0; width:100%; padding:100px 80px 30px 25px; background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8)); background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8)); pointer-events:none; } .atls article a .hgroup h1 { font-size:1.1rem; line-height:1.4; font-weight:bold; letter-spacing:0.05em; color:rgba(255,255,255,1.00); margin:0 auto 8px auto; width:100%; display:block; text-shadow: 1px 1px 8px rgba(0,0,0,0.8); } .atls article a .hgroup h2 { font-size:0.8rem; line-height:1.4; font-weight: 500; letter-spacing:0.05em; color:rgba(255,255,255,0.80); width:100%; display:block; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); } .atls article a .hgroup time, .atls article a .hgroup .view { display:none; } /* 記事リスト：タイル_リンク無し */ .atls article div.link { display:block; text-decoration:none; } .atls article div.link .cat { display:none; } .atls article div.link .thumb { position:relative; overflow:hidden; } .atls article div.link .thumb img { width:100%; transition:all .3s; } .atls article div.link .hgroup { position:absolute; bottom:0; left:0; width:100%; padding:100px 80px 30px 25px; background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8)); background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8)); pointer-events:none; } .atls article div.link .hgroup h1 { font-size:1.1rem; line-height:1.4; font-weight:bold; letter-spacing:0.05em; color:rgba(255,255,255,1.00); margin:0 auto 8px auto; width:100%; display:block; text-shadow: 1px 1px 8px rgba(0,0,0,0.8); } .atls article div.link .hgroup h2 { font-size:0.8rem; line-height:1.4; font-weight: 500; letter-spacing:0.05em; color:rgba(255,255,255,0.80); width:100%; display:block; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); } .atls article div.link .hgroup time, .atls article div.link .hgroup .view { display:none; } /* ==================================================================================================== Sect／温泉 ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_spa { position:relative; padding:150px 0 150px 0; background:rgba(0,0,0,0.6); } #sect_spa::before { content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; margin:0 auto; background:url(../../img/stay/concept_dhs/spa/bg.jpg) no-repeat fixed center bottom #000; background-size:cover; } #sect_spa::after { content:""; position:absolute; bottom:-1px; left:0; z-index: 0; width:100%; height:30%; margin:0 auto; background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5)); background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.5)); pointer-events:none; } #sect_spa .eye_catch { position:relative; width:50%; } #sect_spa .flex .reads { width:40%; margin-left:10%; display:flex; flex-wrap:wrap; align-content:center; padding:100px 0; } /* アイキャッチ */ #sect_spa .eye_catch { overflow:hidden; } #sect_spa .eye_catch .imgs { display:flex; flex-wrap:wrap; margin:0 -2px; } #sect_spa .eye_catch .imgs img { margin:0 2px 4px 2px; object-fit:cover; } #sect_spa .eye_catch .imgs img:nth-child(1) { width:calc(100% - 4px); } #sect_spa .eye_catch .imgs img:nth-child(2) { width:calc( 40% - 4px); } #sect_spa .eye_catch .imgs img:nth-child(3) { width:calc( 60% - 4px); } /* テキスト */ #sect_spa .reads h1, #sect_spa .reads h2, #sect_spa .reads p { margin-bottom:50px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_spa .reads h1.ttl_l strong { font-size:4.0rem; } #sect_spa .reads h1.ttl_l span { font-size:1.2rem;} #sect_spa .reads h2 { font-size:2.0rem; line-height:1.6; letter-spacing:0.2em; font-weight: 400; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } #sect_spa .reads p { font-size:0.9rem; line-height:2.2; letter-spacing:0.1em; font-weight:bold; width:100%; } #sect_spa .reads p .btn { padding:0 25px; } /* ==================================================================================================== Sect／アクティビティ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_activity { position:relative; padding:150px 0 150px 0; background:rgba(0,0,0,0.6); } #sect_activity::before { content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; margin:0 auto; background:url(../../img/stay/concept_dhs/activity/bg.jpg) no-repeat fixed center bottom #000; background-size:cover; } #sect_activity .flex .thumb { width:36%; margin:0 10% 0 0; } #sect_activity .flex .reads { width:44%; margin-right:10%; display:flex; flex-wrap:wrap; align-content:center; } /* フォトスライダー：アニメーション設定 */ #sect_activity .flex .thumb .slider li { overflow:hidden; } #sect_activity .flex .thumb .slider li img { transform:scale(1.0); transition:4.0s ease-in-out 1s; } #sect_activity .flex .thumb .slider li.slick-active img { transform:scale(1.08); transition:transform 6s ease-in-out; } /* テキスト */ #sect_activity .reads h1, #sect_activity .reads h2, #sect_activity .reads p { margin-bottom:50px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_activity .reads h1.ttl_l strong { font-size:4.0rem; } #sect_activity .reads h1.ttl_l span { font-size:1.2rem;} #sect_activity .reads h2 { font-size:2.0rem; line-height:1.6; letter-spacing:0.2em; font-weight: 400; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } #sect_activity .reads p { font-size:0.9rem; line-height:2.2; letter-spacing:0.1em; font-weight:bold; width:100%; } #sect_activity .reads p .btn { padding:0 25px; } /* ==================================================================================================== Sect／トピックス・予約 ---------------------------------------------------------------------------------------------------- */ /* タイプ別／関連トピックス */ .type._topics { display:flex; justify-content:space-between; flex-wrap:wrap; padding:60px 0; } .type._topics .txt { padding:55px 0 0 0; } .type._topics .txt .atls article { width:calc(50% - 50px); } .type._topics .txt .atls article a .hgroup { padding:100px 80px 15px 20px } .type._topics .txt .atls article a .hgroup h1 { font-size:1.0rem; } .type._topics .txt .atls article a .hgroup .cat, .type._topics .txt .atls article a .hgroup time, .type._topics .txt .atls article a .hgroup .view { display:none; } /* ==================================================================================================== Sect／アクセス ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_access { position:relative; padding:80px 0 40% 0; background:url(../../img/stay/concept_dhs/access/bg.jpg) no-repeat center bottom #bab4d1; background-size:100% auto; overflow:hidden; } /* テキスト */ #sect_access article { position:absolute; top:200px; left:10%; z-index:2; width:500px; height:500px; margin:auto 0; } #sect_access article .hgroup { position:relative; padding: 10px 0 0 170px; } #sect_access article .hgroup h1 { position:absolute; top:0; left:0; width:150px; height:75px; } #sect_access article .hgroup h2 { font-size:2.78rem; line-height:1.1; letter-spacing:0.04em; font-weight: 600; color:#000; margin-bottom: 2px; font-family: 'Cormorant Garamond', serif; } #sect_access article .hgroup h3 { font-size:0.74rem; line-height:1.1; letter-spacing:0.03em; font-weight:bold; color:#000; margin-bottom:50px; } #sect_access article p { font-size:0.98rem; line-height:2.0; letter-spacing:0.05em; font-weight:bold; color:#000; margin-bottom:50px; } #sect_access article .btns { width:400px; margin:0 0 50px -5px; } #sect_access article .btns .btn { width:calc( 50% - 10px); margin:0 5px 10px 5px; } #sect_access article .btns .btn._100 { width:calc(100% - 10px); } #sect_access article p.copy { font-size:1.0rem; line-height:1.3; font-weight:400; letter-spacing:0.05em; color:#fff; font-family: 'Cormorant Garamond', serif; } /* 北海道マップ */ #sect_access .hokkaido { position:relative; width:67.5%; height:100%; margin:0 0 0 42.5%; } #sect_access .hokkaido img { width:100%; height:auto; } #sect_access .hokkaido img:nth-child(2) { position:absolute; top:0; left:0; z-index:2; width:100%; height:auto; } /* ホーム設定 */ #home #sect_access { padding:80px 0 27% 0; } /* ==================================================================================================== スクロール ---------------------------------------------------------------------------------------------------- */ /* アニメーショントリガー */ #check_01 { position:absolute; width:1px; height:1px; top:200px; } /* ページダウン */ #scroll_down { position:fixed; bottom:0; right:10px; z-index:4; width:60px; height:40px; margin:0 auto; } #scroll_down::before { content:""; position:absolute; top:0; right:0; left:0px; z-index:1; width:1px; height:100%; margin:0 auto; background:rgba(255,255,255,0.2); } #scroll_down::after { content:""; position:absolute; top:0; right:0; left:0px; z-index:2; width:1px; height:25px; margin:0 auto; background:#fff; animation:anm_scroll_down 2.0s linear infinite; } @keyframes anm_scroll_down { 0% { top: 0%; opacity:0; } 10% { top: 10%; opacity:1; } 90% { top: 90%; opacity:1; } 100% { top:100%; opacity:0; } } /* ページダウン：アニメーション */ #scroll_down { opacity:1; pointer-events:none; transition:all 0.4s ease; } #scroll_down.off { opacity:0; } /* ページトップ */ #scroll_top { position:fixed; bottom:20px; right:0; z-index:1006; width:80px; height:80px; transition:.2s; } #scroll_top a { width:100%; height:100%; display:block; text-indent:150%; white-space:nowrap; overflow:hidden; } #scroll_top a::before { content:""; position:absolute; top:10px; right:0; left:0; width:14px; height: 2px; margin:0 auto; background:#9e522b; border-radius:2px; transition:.2s ease-in-out; filter:drop-shadow(0 0 5px rgba(0,0,0,0.2)); } #scroll_top a::after { content:""; position:absolute; top:30px; right:0; left:0; width:26px; height:26px; margin:0 auto; background:url(../../img/stay/concept_dhs/common/up.svg) no-repeat center center; background-size:26px; transition:.2s ease-in-out; filter:drop-shadow(0 0 5px rgba(0,0,0,0.2)); } #scroll_top a:hover::before { width:18px; } #scroll_top a:hover::after { top:15px } /* ページトップ：アニメーション */ #scroll_top { opacity:0; visibility:hidden; } #scroll_top.on { opacity:1; visibility:visible; } /* ==================================================================================================== フェード設定 ---------------------------------------------------------------------------------------------------- */ /* 基本 */ ._fade { opacity:0; visibility:hidden; transition:1.5s 0.4s ease; } ._active { opacity:1; visibility:visible; transform:translate(0) scale(1) rotate(0) !important; filter:blur(0) !important; } /* 時間 */ ._fade_02 { transition-delay:0.6s; } ._fade_03 { transition-delay:0.8s; } ._fade_04 { transition-delay:1.0s; } ._fade_05 { transition-delay:1.2s; } ._fade_06 { transition-delay:1.4s; } ._fade_07 { transition-delay:1.6s; } ._fade_08 { transition-delay:1.8s; } ._fade_09 { transition-delay:2.0s; } ._fade_10 { transition-delay:2.2s; } /* 動き */ ._fade_up { transform:translateY( 20px); } ._fade_down { transform:translateY(-20px); } ._fade_left { transform:translateX(-20px); } ._fade_right { transform:translateX( 20px); } ._fade_zoom_in { transform:scale(0.8); } ._fade_zoom_out { transform:scale(1.2); } ._fade_rotate_right { transform:translateX(-60px) rotate(-30deg); } ._fade_rotate_left { transform:translateX( 60px) rotate( 30deg); } ._fade_blur { filter:blur(6px); } /* テキストカバー */ ._fade_txt_cover { opacity:1; transition:0s 0s; color:rgba(0,0,0,0); } ._fade_txt_cover._active { animation:anm_txt_cover 1s ease-in-out .5s forwards; } @keyframes anm_txt_cover { 0% { color:rgba(255,255,255,0); } 50% { color:rgba(255,255,255,0); } 51% { color:rgba(255,255,255,0); } 100% { color:rgba(255,255,255,1); } } ._fade_txt_cover span { display:inline; white-space:nowrap; } ._fade_txt_cover span strong { display: block; white-space:nowrap; width:0%; background:#000; overflow:hidden; } ._fade_txt_cover._active span strong { animation:anm_txt_cover_span_strong 1s ease-in-out .5s forwards; } @keyframes anm_txt_cover_span_strong { 0% { width: 0%; } 50% { width:100%; } 51% { width:100%; } 100% { width:100%; } } /* テキストカバー上へ */ ._fade_txt_cover_up { opacity:1; transition:0s 0s; color:rgba(0,0,0,0); } ._fade_txt_cover_up._active { animation:anm_txt_cover_up 1s ease-in-out .5s forwards; } @keyframes anm_txt_cover_up { 0% { color:rgba(0,0,0,0); } 50% { color:rgba(0,0,0,0); } 51% { color:rgba(0,0,0,1); } 100% { color:rgba(0,0,0,1); } } ._fade_txt_cover_up span { position:relative; display:inline; } ._fade_txt_cover_up span::before { content:""; position:absolute; top:0; bottom:auto; left:0; width:100%; height:0; background:#fff; } ._fade_txt_cover_up._active span::before { animation:anm_txt_cover_up_span 1s ease-in-out .5s forwards; } @keyframes anm_txt_cover_up_span { 0% { height: 0%; top:auto; bottom: 0; } 50% { height:100%; top:auto; bottom: 0; } 51% { height:100%; top: 0; bottom:auto; } 100% { height: 0%; top: 0; bottom:auto; } } /* ==================================================================================================== タブレット以下対応 ---------------------------------------------------------------------------------------------------- */ @media screen and (max-width:1000px){ /* ヘッタ */ header { top:16px; left:15px; width:50px; height:35px; } /* Main_キービジュアル */ main { flex-wrap:wrap; flex-direction:column-reverse; height:auto; min-height:auto; } main article { width:100%; height:auto; } main .slider { position:absolute; } main .slider .pic img { transform:scale(1.00); transition:4.0s ease-in-out; } main .slider .pic.slick-active img { transform:scale(1.08);} /* ロゴ_テキスト_キャッチコピー */ main h5 { width:100%; height:220px; padding:20px 20px 0 0; font-size:2.7vw; line-height:1.4; letter-spacing:0.2em; font-weight:bold; color:#fff; font-feature-settings:normal; writing-mode:vertical-rl; white-space:nowrap; } main h5 span { display: inline-flex; margin: 0 0 0 4vw; pointer-events:auto; overflow:hidden; } main h5 span strong { display:inline-block; white-space:nowrap; width:0%; padding:0.2em 0 0.1em 0; background:#000; } main h5 span font { margin:-0.2em 0 -0.2em; } main h5 span:nth-child(1) { transition-delay:1.0s; } main h5 span:nth-child(3) { transition-delay:3.5s; } main h5 span:nth-child(5) { transition-delay:6.0s; } main h5 span:nth-child(7) { transition-delay:8.5s; } /* ロゴ_テキスト */ main article { padding:0 25px 180px 25px; } main article h1 { margin-bottom:15px; font-size:0.6rem; } main article h1 span { margin:0 5px; transform:scale(3) translate(0.6px,-1.8px); } main article h2 { width:100%; margin:0 auto 10px auto; } main article h2 img { width:120px; height:100px; margin:0 10px; } main article h3 { margin-bottom:10px; font-size:2.7rem; } main article h4 { margin-bottom:40px; font-size:0.5rem; } /* ロゴ_テキスト_ご予約 */ main article .btn_reserve { width:110px; height:110px; } main article .btn_reserve a { background-size:950px auto; } main .btn_reserve::before { top:-15px; height:0px; transition:2.0s 2.0s ease-in-out; } main.on .btn_reserve::before { top:-15px; height:25px; } main article .btn_reserve img { width:35px; height:35px; margin:-8px auto 2px auto} main article .btn_reserve span { font-size:0.5rem; } main article .btn_reserve strong { font-size:1.0rem; line-height:1.2; } /* ナビ */ nav { position:absolute; bottom:50px; left:0; right:0; z-index:1000; width:100%; height:auto; } nav ul { display:flex; justify-content:center; flex-wrap:wrap; width:auto; height:auto; margin:0 auto; pointer-events:auto; } nav ul li { padding:0 10px; } nav ul li a { position:relative; display:flex; justify-content:center; align-items:center; padding:5px 10px; font-size:0.8rem; line-height:30px; font-weight:normal; color:#fff; white-space:nowrap; } nav ul li a::before { content:""; position:absolute; bottom:5px; left:0; right:0; width:calc(100% - 20px); height:1px; margin:0 auto; background:rgba(255,255,255,0.5); } nav ul li a::after { content:""; display:inline-block; width:0; height:0; margin-left:4px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #fff; } /* Sect_コンセプト */ #sect_concept { flex-wrap:wrap; padding:0; } #sect_concept .eye_catch { width:100%; overflow:hidden; } #sect_concept article { width:100%; padding:50px 40px; } #sect_concept article h1 { font-size:1.2rem; } #sect_concept article h2 { font-size:1.80rem; } #sect_concept article .jp p { font-size:0.90rem; } #sect_concept article .en p { font-size:0.65rem; } /* Sect_ディテイール */ #sect_detail { padding:30px 5px 80px 5px; } #sect_detail h1 { margin-bottom:30px; text-align:center; } /* グリッド写真 */ .grid { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:8px; } .grid div:nth-child(1) { grid-column-start:1; grid-column-end:3; grid-row-start:1; grid-row-end:3; } .grid div:nth-child(2) { grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4; aspect-ratio:1/0.85; } .grid div:nth-child(3) { grid-column-start:1; grid-column-end:2; grid-row-start:4; grid-row-end:5; aspect-ratio:1/0.85; } .grid div:nth-child(4) { grid-column-start:2; grid-column-end:3; grid-row-start:3; grid-row-end:5; } .grid div:nth-child(5) { grid-column-start:2; grid-column-end:3; grid-row-start:5; grid-row-end:6; aspect-ratio:1/0.85; } .grid div:nth-child(6) { grid-column-start:2; grid-column-end:3; grid-row-start:6; grid-row-end:7; aspect-ratio:1/0.85; } .grid div:nth-child(7) { grid-column-start:1; grid-column-end:2; grid-row-start:5; grid-row-end:7; } .grid div:nth-child(8) { grid-column-start:1; grid-column-end:2; grid-row-start:7; grid-row-end:8; aspect-ratio:1/0.85; } .grid div:nth-child(9) { grid-column-start:1; grid-column-end:2; grid-row-start:8; grid-row-end:9; aspect-ratio:1/0.85; } .grid div:nth-child(10) { grid-column-start:2; grid-column-end:3; grid-row-start:7; grid-row-end:9; } /* Sect_クリエイター */ #sect_creator { position:relative; display:flex; flex-direction:column-reverse; } #sect_creator h1 { top:-26px; left:10px; font-size:1.2rem; } #sect_creator h1 strong { font-size:0.8rem; } #sect_creator .bg { padding:10px 0; overflow:hidden; } #sect_creator .bg img { transform: scale(1.2); } #sect_creator .btns { position:relative; margin-top:-1px; padding:10px 5px 80px 5px; background:#000; } #sect_creator .btns .btn { width:calc(33.33% - 20px); margin:0 10px; padding:5px 0; cursor:pointer; } #sect_creator .btns .btn h2 { font-size:0.4rem; } #sect_creator .btns .btn h3 { font-size:1.2rem; } #sect_creator .btns .btn h3 span { display:none; } #sect_creator .btns .btn h4 { display:none; } #sect_creator .btns .btn p.more { padding:0 0 0 20px; font-size:0.7rem; } #sect_creator .btns .btn p.more::before { top:-2px; left:-2px; width:16px; height:16px; background-size:16px; } /* ご予約 */ .type._reserve { display:block; padding:40px 20px 50px 20px; background-size:950px auto; } .type._reserve .header h1 { margin-bottom:10px; font-size:0.9rem; } .type._reserve .header h2 { margin-bottom:20px; font-size:1.8rem; } .type._reserve .header p { font-size:0.9rem; margin:-10px auto 40px auto; } .type._reserve .btns { flex-wrap:wrap; width:100%; margin-bottom:20px; } .type._reserve .btns .btn { width:100%; margin:0 auto 10px; } .type._reserve .tel { font-size:1.8rem; } .type._reserve .tel span { font-size:0.9rem; } .type._reserve p { font-size:0.9rem; } .type._reserve p a.link { color:#fff; text-decoration:underline; } .type._reserve p a.link._blank { background-image:url(../../img/common/wt/blank.svg); } /* Sect_ディナー */ #sect_dinner { padding:40px 0 80px 0; background-attachment:scroll; } #sect_dinner::before { background-attachment: scroll; } #sect_dinner::after { display:none; } #sect_dinner .flex { flex-wrap:wrap; } #sect_dinner .flex .thumb { width:calc(100% - 20px); margin:0 0 40px 20px; } #sect_dinner .slick-dots { text-align:right; } #sect_dinner .flex .reads { width:100%; margin:-65px auto 0 auto; padding:0 10%; display:flex; flex-wrap:wrap; align-content:center; } #sect_dinner .reads h1, #sect_dinner .reads h2, #sect_dinner .reads p { margin-bottom:30px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_dinner .reads h1.ttl_l strong { font-size:2.4rem; } #sect_dinner .reads h1.ttl_l span { font-size:0.9rem; } #sect_dinner .reads h2 { font-size:1.5rem; } #sect_dinner .reads p { font-size:0.8rem; } /* Sect_朝食 */ #sect_breakfast { padding:40px; } .atls { margin:0 -10px 0 -10px; margin-bottom:20px; } .atls article { width:calc(100% - 20px); margin:0 10px 20px 10px; } .atls article a .hgroup { padding:50px 40px 15px 10px; } .atls article a .hgroup h1 { font-size:0.8rem; } .atls article a .hgroup h2 { font-size:0.5rem; } .atls article div.link .hgroup { padding:50px 40px 15px 10px; } .atls article div.link .hgroup h1 { font-size:0.8rem; } .atls article div.link .hgroup h2 { font-size:0.5rem; } /* Sect_スパ */ #sect_spa { position:relative; padding:0 0 100px 0; background:#000; background-size:cover; } #sect_spa::after { content:""; position:absolute; bottom:-1px; left:0; z-index: 0; width:100%; height:100px; margin:0 auto; background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1)); background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1)); pointer-events:none; } #sect_spa .flex { flex-wrap:wrap; flex-direction:column-reverse; } #sect_spa .eye_catch { width:100%; margin:0 0 50px 0; } #sect_spa .flex .reads { width:100%; margin:0 auto; padding:0 10%; display:flex; flex-wrap:wrap; align-content:center; } #sect_spa .reads h1, #sect_spa .reads h2, #sect_spa .reads p { margin-bottom:30px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_spa .reads h1.ttl_l strong { font-size:2.4rem; } #sect_spa .reads h1.ttl_l span { font-size:0.9rem; } #sect_spa .reads h2 { font-size:1.5rem; } #sect_spa .reads p { font-size:0.8rem; } #sect_spa .reads p._mg_b_0, #sect_spa .food_img { display:none; } /* Sect_アクティビティ */ #sect_activity { padding:40px 0 80px 0; background-attachment:scroll; } #sect_activity::before { background-attachment:scroll; } #sect_activity::after { display:none; } #sect_activity .flex { flex-wrap:wrap; } #sect_activity .flex .thumb { width:calc(100% - 20px); margin:0 0 40px 20px; } #sect_activity .slick-dots { text-align:right; } #sect_activity .flex .reads { width:100%; margin:-65px auto 0 auto; padding:0 10%; display:flex; flex-wrap:wrap; align-content:center; } #sect_activity .flex .reads br { display:none; } #sect_activity .reads h1, #sect_activity .reads h2, #sect_activity .reads p { margin-bottom:30px; padding:0; text-align:left; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.5); } #sect_activity .reads h1.ttl_l strong { font-size:2.4rem; } #sect_activity .reads h1.ttl_l span { font-size:0.9rem; } #sect_activity .reads h2 { font-size:1.5rem; } #sect_activity .reads p { font-size:0.8rem; } /* Sect_ヒストリー */ #sect_history { flex-wrap:wrap; padding:80px 40px; } #sect_history::before { background-attachment:scroll; } #sect_history article._l { width:100%; padding:0; } #sect_history article._r { width:100%; padding:0; } #sect_history article._l h1 { font-size:1.2rem; } #sect_history article._l h1 span { color:#fff; border-bottom-color:#fff; } #sect_history article._l h2 { font-size:1.8rem; } #sect_history article._l p { font-size:0.9rem; } #sect_history article._r .jp p { font-size:0.90rem; } #sect_history article._r .en p { font-size:0.65rem; } /* Sect_アクセス */ #sect_access { padding:80px 0; } #sect_access article { position:relative; top:auto; left:auto; z-index:auto; width:88%; height:auto; margin:0 auto; } #sect_access article .hgroup { position:relative; padding:5px 0 0 140px; } #sect_access article .hgroup h1 { position:absolute; top:0; left:0; width:120px; height:60px; } #sect_access article .hgroup h2 { font-size:1.80rem; line-height:1.1; letter-spacing:0.04em; font-weight: 600; color:#000; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; } #sect_access article .hgroup h3 { font-size:0.56rem; line-height:1.1; letter-spacing:0.03em; font-weight:bold; color:#000; margin-bottom:35px; } #sect_access article p { font-size:0.90rem; line-height:2.0; letter-spacing:0.05em; font-weight:bold; color:#000; margin-bottom:35px; } #sect_access article p a { text-decoration:underline; color:#9e522b; } #sect_access article .btns { width:100%; margin:0 0 10px 0; } #sect_access article .btns .btn { width:calc( 50% - 10px); margin:0 5px 10px 5px; } #sect_access article .btns .btn._100 { width:calc(100% - 10px); } #sect_access article p.copy { font-size:0.8rem; line-height:1.3; font-weight:400; letter-spacing:0.05em; color:#111; font-family: 'Cormorant Garamond', serif; } /* 北海道マップ */ #sect_access .hokkaido { position:relative; width:100%; height:100%; margin:0 0 50px 0; overflow:hidden; } #sect_access .hokkaido img { width:125%; max-width:125%; height:auto; } #sect_access .hokkaido img:nth-child(2) { position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; display:block; width:125%; max-width:125%; height:auto; margin:auto; } /* 小窓 */ .window { width:100%; height:100vh; height:100dsvh; } .window .container { display:block; width:100%; height:100%; padding:40px; } /* 小窓_プロフィール写真 */ .window .profile { width:100%; margin-bottom:40px; overflow:hidden; } .window .profile img { width: 80%; object-fit:cover; } /* 小窓_テキスト */ .window article { width:100%; padding:0; } .window article h1 { margin-bottom: 5px; font-size:1.4rem; } .window article h2 { margin-bottom:10px; padding-bottom:15px; font-size:0.7rem; } .window article h3 { margin-bottom:10px; padding-bottom:10px; font-size:1.4rem; } .window article h3 span { font-size:0.5rem; } .window article h4 { margin-bottom:10px; padding-bottom:10px; font-size:0.8rem; } .window article h5 { margin-bottom:10px; padding-bottom:30px; font-size:0.8rem; } .window article p { margin-bottom: 7px; font-size:0.8rem; } .window article .jp { margin-bottom:25px; } .window article .jp p { margin-bottom:12px; font-size:0.8rem; } .window article .en { margin-bottom:50px; } .window article .en p { margin-bottom:10px; font-size:0.6rem; } /* 小窓：閉じるボタン */ .window .close_btn { left:auto; right:0; } }