@charset "UTF-8"; @import url("../css/reset.css"); @import url("../css/aos.css"); /*-------------------------------------------/ ページ共通要素 /-------------------------------------------*/ // breakPoint ------------------------------ @mixin pc { @media screen and (max-width: 1919px) { @content; } } @mixin pc_s { @media screen and (max-width: 1499px) { @content; } } @mixin tab { @media screen and (max-width: 1023px) { @content; } } @mixin sp { @media screen and (max-width: 767px) { @content; } } // 変換 ----------------------------- @function pc_vw($px) { $target-vw: 1920; $vw-ratio: 100 / $target-vw; @return $vw-ratio * $px * 1vw; } @function pc_s($px) { $target-vw: 1500; $vw-ratio: 100 / $target-vw; @return $vw-ratio * $px * 1vw; } @function tab_vw($px) { $target-vw: 1024; $vw-ratio: 100 / $target-vw; @return $vw-ratio * $px * 1vw; } @function sp_vw($px) { $target-vw: 750; $vw-ratio: 100 / $target-vw; @return $vw-ratio * $px * 1vw; } @function rem($px) { @return ($px / 16) * 1rem; } /* 表示切替 ----------------------------- */ /*sp*/ @media screen and (max-width: 767px) { .pc { display: none !important; } .tab { display: none !important; } } @media screen and (max-width: 1023px) { .pc_only { display: none !important; } } @media screen and (min-width: 768px) { .sp { display: none !important; } .tab_vertical { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } } @media screen and (min-width: 1024px) { .tab { display: none !important; } .pc_none { display: none !important; } .pc_vertical { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } } /* 縦書き */ .vertical { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .text-combine { text-combine-upright: all; -webkit-text-combine: horizontal; /*Safari */ -ms-text-combine-horizontal: all; /*IE用*/ } /* 横書き */ .horizontal { -ms-writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } /*-------------------------------------------/ ローディング画面 /-------------------------------------------*/ #loading { background: #6c272d; position: fixed; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 99999; .logo_box { img { width: 375px; } p { color: #fff; text-align: center; margin-top: 1em; } } @include sp { .logo_box { img { width: sp_vw(375); } p { font-size: sp_vw(14); } } } } /*===================================================== メイン設定 ======================================================*/ body { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; font-size: 16px; line-height: 1.6; max-width: 100%; color: #000000; -webkit-animation: fadeIn 2s; animation: fadeIn 2s; position: relative; @include sp { font-size: sp_vw(30); } } .wrapper { overflow-x: hidden; } /*================================================= 共通設定 ==================================================*/ img { image-rendering: -webkit-optimize-contrast; } img, object, embed { max-width: 100%; height: auto; *width: inherit; vertical-align: middle; } a { text-decoration: none; color: inherit; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; } a:hover { color: inherit; } a img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; display: block; vertical-align: middle; } .indent { text-indent: -1em; padding-left: 1em; } /* フォント */ $font-gothic: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; $font-mincho: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "MS 明朝", serif; /* カラー */ .white { color: #fff; } .red { color: #e46969; } /* 背景 */ .bg_01 { background: url("../images/common/bg.jpg") top center repeat-y; background-size: 100% auto; } .bg_02 { background: url("../images/common/bg_07.jpg") top center repeat-y; background-size: 100% auto; } /*================================================= レイアウト ==================================================*/ .content { padding-left: 25px; padding-right: 25px; .content__inner { width: 1300px; max-width: 100%; margin: 0 auto; position: relative; } @include sp { padding-left: sp_vw(25); padding-right: sp_vw(25); .content__inner { width: 100%; } } } .content_wide { padding-left: 25px; padding-right: 25px; .content__inner { width: 1700px; max-width: 100%; margin: 0 auto; } @include sp { padding-left: sp_vw(25); padding-right: sp_vw(25); .content__inner { width: 100%; } } } .content_full { .content__inner { width: 100%; max-width: 100%; margin: 0 auto; } @include sp { .content__inner { width: 100%; } } } /*================================================= Googlemap ==================================================*/ .gmap { position: relative; z-index: 0; overflow: hidden; } .gmap iframe { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; display: block; } /*================================================= tel リンク ==================================================*/ @media screen and (min-width: 769px) { a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; } } /*================================================= ヘッダー ==================================================*/ /* トグルボタン ------------------------------------*/ .nav-toggle { position: absolute; right: 0; top: 0; padding: 0; width: 120px; height: 120px; background: #432f2f; /*#282828*/ text-align: center; font-size: 0px; letter-spacing: 0; box-sizing: border-box; pointer-events: auto; cursor: pointer; z-index: 99999; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; div { position: absolute; width: 50px; height: 25px; top: 47.5px; left: 50%; transform: translateX(-50%); span { position: absolute; height: 2px; width: 50px; background: #fff; left: 0; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; &:nth-child(1) { top: 0; } &:nth-child(2) { top: 11px; background: #6c272d; } &:nth-child(3) { top: 22px; } } } @include sp { right: 0; top: 0; padding: 0; width: sp_vw(110); height: sp_vw(80); div { position: absolute; width: sp_vw(50); height: sp_vw(25); top: sp_vw(27.5); left: 50%; transform: translateX(-50%); span { position: absolute; height: sp_vw(2); width: sp_vw(50); background: #fff; left: 0; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; &:nth-child(1) { top: 0; } &:nth-child(2) { top: sp_vw(11); } &:nth-child(3) { top: sp_vw(22); } } } } } header.open, header.fixed.open { .nav-toggle { div { position: absolute; width: 50px; height: 25px; top: 37.5px; left: 50%; transform: translateX(-50%); span { position: absolute; height: 2px; width: 50px; background: #fff; left: 0; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; &:nth-child(1) { top: 6px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } &:nth-child(2) { display: none; } &:nth-child(3) { top: 6px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } } } } @include sp { .nav-toggle { div { position: absolute; width: sp_vw(50); height: sp_vw(20); background: rgba(40, 40, 40, 0); top: sp_vw(25); right: sp_vw(20); span { position: absolute; height: sp_vw(2); width: sp_vw(50); background: #fff; left: 0; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; transition: .3s ease-in-out; &:nth-child(1) { top: sp_vw(25); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } &:nth-child(2) { display: none; } &:nth-child(3) { top: sp_vw(25); -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } } } } } } /* グローバルナビ */ header { position: relative; width: 100%; height: 120px; top: 0; left: 0; z-index: 9999; background: url("../images/common/bg_header.jpg") left top no-repeat; background-size: cover; &.fixed { position: fixed; } .main-navigation { .main-navigation_inner { width: 1810px; max-width: 1900/1920*100%; margin: 0 0 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative; .logo { width: 375px; max-width: 375/1920*100vw; margin-right: auto; } .navigation { width: 1000px; max-width: calc(100% - 375/1920*100vw - 200px); margin: 0 auto; .navigation_inner { ul.main-menu { width: 100%; height: 100px; display: flex; justify-content: space-around; align-items: center; li { a { display: inline-block; padding: 0.5em; color: #fff; text-align: center; span { &.jp { font-size: min(18/1300*100vw, 18px); display: block; } &.en { font-size: min(14/1300*100vw, 14px); color: #dcd99f; display: block; } } &:hover { opacity: 0.8; transform: scale(1.05); } } } } } } .sns { display: none; } .contact-us { color: #fff; margin-left: auto; width: 200px; height: 120px; background: #6c272d; a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; span { display: inline-block; &.ttl { font-size: rem(15); } &.tel { font-size: rem(22); font-weight: bold; padding-left: 1.5em; background: url("../images/common/icon_tel.png") left center no-repeat; background-size: rem(25) rem(25); } } } } .nav-toggle { display: none; } } } @include tab { .main-navigation { width: 100%; max-width: 100%; padding-left: 25px; .main-navigation_inner { max-width: 100%; .logo { max-width: 375/1024*100%; } .navigation { display: none; } .contact-us { margin-right: 120px; } .nav-toggle { display: block; } } } } @include sp { position: relative; height: sp_vw(80); &.fixed { position: fixed; } .main-navigation { padding-left: sp_vw(25); .main-navigation_inner { padding-top: 0; align-items: center; height: sp_vw(80); .logo { display: block; width: sp_vw(375); max-width: sp_vw(375); } .contact-us { display: none; } .nav-toggle { position: fixed; } } } } } /* グローバルナビ オープンメニュー */ header.open, header.fixed.open { @include tab { position: fixed; top: 0; left: 0; background: url("../images/common/bg_menu.jpg") top center no-repeat; background-size: cover; width: 100%; height: 100vh; .main-navigation { position: relative; height: 100%; overflow-y: auto; padding-left: 0; padding-bottom: tab_vw(50); .main-navigation_inner { height: 100%; padding-left: 0; padding-right: 0; z-index: 2; flex-direction: column; height: auto; .logo { display: block; width: tab_vw(375); max-width: 100%; margin-bottom: 50/1024*100vw; padding: 10px 0; a { display: block; width: 100%; max-width: 100%; margin: 0 auto; span {} } } .navigation { display: block; width: 100%; position: relative; z-index: -1; .navigation_inner { display: flex; justify-content: center; align-items: center; } ul.main-menu { display: flex; flex-direction: column; justify-content: center; margin: 0 auto tab_vw(60); color: #fff; height: auto; li { position: relative; height: 100%; margin: 0; width: 100%; a { display: flex; justify-content: center; padding: 0.5em; color: #fff; text-align: center; span { &.jp { font-size: tab_vw(32); display: inline-block; } &.en { font-size: tab_vw(28); color: #dcd99f; display: inline-block; } } &:hover { opacity: 0.8; transform: scale(1.05); } } } } } .sns { display: flex; justify-content: center; margin-bottom: 50px; a { margin: 0.5em; } } .contact-us { color: #fff; margin-left: auto; margin-right: auto; width: tab_vw(370); height: tab_vw(120); background: #6c272d; a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; span { display: inline-block; &.ttl { font-size: tab_vw(28); } &.tel { font-size: tab_vw(40); font-weight: bold; padding-left: 1.5em; background: url("../images/common/icon_tel.png") left center no-repeat; background-size: 25/28*1em auto; } } } } .nav-toggle { background: rgba(108, 39, 45, 0); position: fixed; } } } } @include sp { .main-navigation { position: fixed; height: 100%; overflow-y: auto; padding: 0 sp_vw(25) sp_vw(50); .main-navigation_inner { height: auto; padding-left: 0; padding-right: 0; width: 100%; flex-direction: column; justify-content: center; z-index: 2; .logo { display: block; width: sp_vw(375); max-width: 100%; margin-bottom: 50/750*100vw; padding: sp_vw(10) 0; a { display: block; width: 100%; max-width: 100%; margin: 0 auto; } } .navigation { display: block; width: 100%; max-width: 100%; position: relative; z-index: -1; .navigation_inner { display: flex; justify-content: center; align-items: center; } ul.main-menu { display: flex; flex-direction: column; justify-content: center; margin: 0 auto sp_vw(60); color: #fff; height: auto; li { position: relative; height: 100%; margin: 0; width: 100%; a { display: flex; justify-content: center; padding: 0.5em; color: #fff; text-align: center; span { &.jp { font-size: sp_vw(32); display: inline-block; margin-right: 1em; } &.en { font-size: sp_vw(28); color: #dcd99f; display: inline-block; } } &:hover { opacity: 0.8; transform: scale(1); } } } } } .sns { display: flex; justify-content: center; margin-bottom: sp_vw(50); a { width: sp_vw(32); margin: 0.5em; } } .contact-us { display: flex; color: #fff; margin-left: auto; margin-right: auto; width: sp_vw(370); height: sp_vw(120); background: #6c272d; a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; span { display: inline-block; &.ttl { font-size: sp_vw(28); } &.tel { font-size: sp_vw(40); font-weight: bold; padding-left: 1.5em; background: url("../images/common/icon_tel.png") left center no-repeat; background-size: 25/28*1em auto; } } } } .nav-toggle { position: fixed; background: rgba(108, 39, 45, 0); } } } } } /*================================================= フッター ==================================================*/ footer { position: relative; z-index: 0; color: #fff; width: 100%; height: 100%; background: url("../images/common/bg_footer.jpg") center center no-repeat; background-size: cover; padding-top: 100/1920*100vw; padding-bottom: 50/1920*100vw; padding-left: 25px; padding-right: 25px; .footer__inner { width: 1700px; max-width: 100%; margin: 0 auto; position: relative; z-index: 1; padding-left: 200/1920*100vw; .footer-logo { margin-bottom: 90/1920*100vw; img { width: 170px; max-width: 170/1920*100vw; } } .f-navigation { width: 440px; position: absolute; right: 0; top: 0; .f-menu { margin: 0 auto 35px; color: #fff; text-align: left; color: #fff; li { position: relative; a { display: flex; align-items: center; padding: 0.5em 0; span { height: 100%; &.jp { font-size: rem(18); margin-right: 1em; } &.en { font-size: rem(14); color: #dcd99f; } } &:hover{ opacity: 0.8; } } } } .sns { display: flex; justify-content: flex-start; a { margin-right: 1em; } } } .footer-info { margin-bottom: 90/1920*100vw; max-width: 50%; .info_text { padding-top: 1em; p { font-size: rem(16); line-height: 1.6; &.name { margin-bottom: 1em; } } } } .copyright { max-width: 100%; margin: 0 auto; p { font-size: rem(14); color: #fff; margin: 0.5em; a { margin-left: 1em; display: inline-block; } } } } @include tab { .footer__inner { width: 100%; max-width: 100%; margin: 0 auto; position: relative; z-index: 1; padding-left: 0; display: flex; justify-content: space-between; flex-wrap: wrap; .footer-logo { width: 100%; order: 1; img { max-width: 170/1024*100vw; } } .f-navigation { width: 350px; max-width: 45%; margin-bottom: 50/1024*100vw; position: relative; right: 0; top: 0; order: 3; } .footer-info { margin-bottom: 50/1024*100vw; max-width: 55%; order: 2; } .copyright { max-width: 100%; margin: 0 auto; order: 3; p { font-size: rem(14); color: #fff; margin: 0.5em 0; a { margin-left: 1em; display: inline-block; } } } } } @include sp { background: url("../images/common/bg_footer_sp.jpg") center bottom no-repeat; background-size: cover; .footer__inner { padding-top: sp_vw(75); padding-bottom: sp_vw(25); padding-left: sp_vw(25); padding-right: sp_vw(25); z-index: 1; .footer-logo { width: 100%; max-width: 100%; margin: 0 auto sp_vw(75); order: 1; img { display: block; width: sp_vw(170); margin: 0 auto; } } .f-navigation { width: 100%; max-width: 100%; position: relative; margin-bottom: sp_vw(500); order: 2; .f-menu { margin: 0 auto sp_vw(30); color: #fff; text-align: center; li { position: relative; a { display: flex; align-items: center; justify-content: center; padding: 0.5em 0; span { height: 100%; &.jp { font-size: sp_vw(32); margin-right: 1em; } &.en { font-size: sp_vw(28); color: #dcd99f; } } } } } .sns { display: flex; justify-content: center; margin-bottom: sp_vw(50); a { width: sp_vw(32); margin: 0.5em; } } } .footer-info { max-width: 100%; text-align: center; margin-bottom: sp_vw(50); flex-wrap: wrap; order: 2; .info_text { width: 100%; padding-top: 1em; padding-left: 0; p { font-size: sp_vw(30); line-height: 1.6; &.name { margin-bottom: 0.5em; } } } } .copyright { text-align: center; order: 4; p { font-size: sp_vw(21); color: #fff; margin: 0.5em; display: flex; justify-content: center; align-items: center; a { margin-left: 1em; display: inline-block; } } } } } } /* ページトップへ */ #pagetop { display: none; width: 80px; max-width: 80px; height: 80px; position: fixed; top: auto; bottom: 30px; right: 70px; z-index: 9999; &.stop { position: absolute; bottom: auto; top: -40px; } a { width: 80px; height: 80px; } @include sp { display: none; width: sp_vw(80); max-width: sp_vw(80); height: sp_vw(80); position: fixed; top: auto; bottom: sp_vw(25); right: sp_vw(12.5); z-index: 9998; &.stop { position: absolute; bottom: auto; top: -(sp_vw(40)); } a { width: sp_vw(80); height: sp_vw(80); } } } body.fixed #pagetop { display: none !important; } /*================================================= kv ==================================================*/ #kv { position: relative; margin: 0 auto; z-index: 2; background: #432f2f; .kv_in { position: relative; display: block; width: 100%; padding-bottom: 1080/1920*100%; margin: 0 auto; z-index: 1; overflow: hidden; video { position: absolute; width: 100%; height: 100%; object-fit: cover; } } &.page { .kv_in { position: relative; display: block; width: 100%; height: 0; padding-bottom: 700/1920*100%; margin: 0 auto; z-index: 1; overflow: hidden; img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .kv-title { position: absolute; width: 100%; left: 0; bottom: 80/1920*100vw; z-index: 3; .page-title { width: 100%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; position: relative; line-height: 1.5; font-weight: normal; span { width: 100%; display: block; text-align: center; &.jp { font-size: 36px; color: #fff; } &.en { font-size: 18px; color: #dcd99f; } } &::before { position: absolute; content: ""; background: url("../images/common/deco_01.png") no-repeat; background-size: contain; width: 75px; height: 75px; top: -40px; left: 50%; transform: translateX(-50%); z-index: -1; } } } } } @include sp { .kv_in { position: relative; display: block; width: 100%; padding-bottom: 1080/1920*100%; margin: 0 auto; z-index: 1; overflow: hidden; video { position: absolute; width: 100%; height: 100%; object-fit: cover; } } &.page { .kv_in { position: relative; display: block; width: 100%; height: 0; padding-bottom: 273/750*100%; margin: 0 auto; z-index: 1; overflow: hidden; img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .kv-title { position: absolute; width: 100%; left: 0; bottom: 25/750*100vw; z-index: 3; .page-title { width: 100%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; position: relative; line-height: 1.5; font-weight: normal; span { width: 100%; display: block; text-align: center; &.jp { font-size: sp_vw(40); color: #fff; } &.en { font-size: sp_vw(28); color: #dcd99f; } } &::before { position: absolute; content: ""; background: url("../images/common/deco_01.png") no-repeat; background-size: contain; width: sp_vw(75); height: sp_vw(75); top: sp_vw(-28); left: 50%; transform: translateX(-50%); z-index: -1; } } } } } } } /*================================================= 見出し/テキスト ==================================================*/ .sec-title { width: 100%; padding-top: 0.5em; margin: 0 auto 1.5em; font-size: min(36/1920*100vw, 36px); line-height: 1.2; font-weight: 500; text-align: center; position: relative; z-index: 0; span { display: inline-block; position: relative; &::before { position: absolute; content: ""; top: -30px; left: 50%; transform: translateX(-50%); width: 75px; height: 75px; background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } } &.white { color: #fff; } @include tab { font-size: min(36/1024*100vw, 36px); } @include sp { font-size: sp_vw(40); span { display: inline-block; position: relative; &::before { position: absolute; content: ""; top: sp_vw(-30); left: 50%; transform: translateX(-50%); width: sp_vw(75); height: sp_vw(75); background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } } } } .sec-title_v { font-size: min(30/1700*100vw, 30px); line-height: 50/30*1; padding-right: 40/30*1em; position: relative; z-index: 0; &::before { position: absolute; content: ""; top: 40/30*1em; right: -40/30*1em; transform: translateX(-50%); width: 75/30*1em; height: 75/30*1em; background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } &.white { color: #fff; } @include tab { font-size: min(30/1024*100vw, 30px); } @include sp { font-size: sp_vw(36); line-height: 50/36*1; } } .sec-title_v2 { font-size: min(30/1500*100vw, 30px); line-height: 50/30*1; padding-right: 40/30*1em; position: relative; z-index: 0; &::before { position: absolute; content: ""; top: 40/30*1em; right: -40/30*1em; transform: translateX(-50%); width: 75/30*1em; height: 75/30*1em; background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } &.white { color: #fff; } @include tab { font-size: min(30/1024*100vw, 30px); &::before { position: absolute; content: ""; top: -0.5em; right: auto; left: -40/30*1em; transform: unset; width: 75/30*1em; height: 75/30*1em; background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } } @include sp { font-size: sp_vw(36); line-height: 50/36*1; } } .sec-title_l { width: 100%; margin: 0 auto 1.5em; line-height: 1.2; font-weight: 500; text-align: left; position: relative; z-index: 1; font-size: min(30/1500*100vw, 30px); span { display: inline-block; font-size: min(24/1500*100vw, 24px); } &.white { color: #fff; } &::before { position: absolute; content: ""; top: -0.75em; left: calc(-40/30*1em); width: calc(75/30*1em); height: calc(75/30*1em); background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } @include tab { font-size: min(30/1024*100vw, 30px); span { font-size: min(24/1024*100vw, 24px); } } @include sp { font-size: sp_vw(36); span { font-size: sp_vw(30); } &::before { position: absolute; content: ""; top: -0.75em; left: calc(-40/30*1em); width: calc(75/30*1em); height: calc(75/30*1em); background: url("../images/common/deco_01.png") center center no-repeat; background-size: contain; z-index: -1; } } } .sec-smalltitle { text-align: center; font-size: min(30/1500*100vw, 30px); margin-bottom: 1.5em; span.small { font-size: min(18/1500*100vw, 18px); } @include tab { font-size: min(30/1024*100vw, 30px); span.small { font-size: min(18/1024*100vw, 18px); } } @include sp { font-size: sp_vw(36); span.small { font-size: sp_vw(32); } } } p { font-size: rem(18); line-height: 1.8; &.small { font-size: rem(16); } @include sp { font-size: sp_vw(32); line-height: 1.5; &.small { font-size: sp_vw(30); } } } h3 { font-size: rem(32); font-weight: 500; @include sp { font-size: sp_vw(60); .img-ttl { height: sp_vw(42); width: auto; } } } h4 { font-size: rem(26); font-weight: 500; @include sp { font-size: sp_vw(36); } } /* 余白調整 */ .mb1 { margin-bottom: 1em; } /*================================================= ボタン ==================================================*/ .btn { cursor: pointer; &:hover { opacity: 0.8; } } .btn_detail { margin-left: auto; a { display: flex; align-items: center; justify-content: flex-end; color: #dcd99f; font-size: min(20/1920*100vw, 20px); &::before { content: ""; width: 170/20*1em; height: 2px; background: #dcd99f; margin-right: 0.5em; transition: 0.3s all; } &:hover { &::before { content: ""; width: 10px; height: 2px; background: #dcd99f; margin-right: 0.5em; } } } @include tab { a { font-size: min(20/1024*100vw, 20px); } } @include sp { a { font-size: sp_vw(32); &::before { width: sp_vw(170); } &:hover { &::before { width: sp_vw(10); } } } } } /*================================================= トップページ ==================================================*/ /* ごあいさつ */ #sec-greeting { .content__inner { padding-top: 100px; padding-bottom: 100px; } .message-box { position: relative; width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0 0 0 auto; .text_box { position: relative; z-index: 2; h2 { position: relative; font-size: rem(30); font-weight: normal; margin-left: 1.5em; letter-spacing: 0.2em; span { font-size: rem(22); line-height: 2; display: inline-block; } } p { font-size: rem(18); font-weight: normal; line-height: 2; letter-spacing: 0.2em; &:not(:last-child) { margin-left: 2em; } } } } @include tab { padding-left: 50/1024*100vw; padding-right: 50/1024*100vw; .message-box { .text_box { position: relative; z-index: 2; h2 { position: relative; font-size: rem(26); margin-left: 0; margin-bottom: 1em; } p { font-size: rem(22); line-height: 1.7; &:not(:last-child) { margin-left: 0; margin-bottom: 1em; } } } } } @include sp { padding-left: 70/750*100vw; padding-right: 70/750*100vw; .content__inner { padding-top: sp_vw(100); padding-bottom: sp_vw(100); } .message-box { .text_box { position: relative; z-index: 2; h2 { position: relative; font-size: sp_vw(42); margin-left: 0; margin-bottom: 1em; letter-spacing: normal; span { font-size: sp_vw(32); } } p { font-size: sp_vw(32); line-height: 1.7; letter-spacing: normal; text-align: justify; &:not(:last-child) { margin-left: 0; margin-bottom: 1em; } } } } } } /* ピックアップ */ #sec-pick-up { .pickup-wrap { .pickup_box { width: 100%; color: #fff; background: url("../images/common/bg_00.jpg") top center no-repeat; background-size: cover; display: flex; position: relative; .pic { width: 1112px; max-width: 1112/1920*100%; } .ttl_box { margin-top: 90/1920*100vw; width: 150/1920*100%; } .text_box { width: 390px; max-width: 390/1920*100%; display: flex; flex-direction: column; justify-content: center; p { font-size: min(18/1500*100vw, 18px); line-height: 50/18*1em; } .btn_detail { margin-top: 40/1920*100vw; } } &#pickup_cuisine { padding-left: 0; padding-right: 25px; .sub-pic_01 { position: absolute; width: 250px; max-width: 250/1920*100%; top: -85/1920*100vw; right: 0; } .sub-pic_02 { position: absolute; top: 575/1920*100vw; left: 960/1920*100%; width: 400px; max-width: 400/1920*100%; } } &#pickup_hot-spring { justify-content: flex-end; padding-right: 0; padding-left: 25px; .ttl_box { order: 1; margin-right: 0; margin-left: auto; } .text_box { order: 2; } .pic { order: 3; } .sub-pic_01 { position: absolute; width: 250px; max-width: 250/1920*100%; top: 420/1920*100vw; left: 0; } } &#pickup_facilities { padding-left: 0; padding-right: 25px; .text_box { max-width: 570/1920*100vw; } .sub-pic_01 { position: absolute; width: 400px; max-width: 400/1920*100%; top: 560/1920*100vw; right: 0; } } } .pickup_sep_1 { width: 100%; height: 180/1920*100vw; background: url("../images/common/bg_02.jpg") center center no-repeat; background-size: cover; } .pickup_sep_2 { width: 100%; height: 180/1920*100vw; background: url("../images/common/bg_03.jpg") center center no-repeat; background-size: cover; } } @include pc_s { .pickup-wrap { .pickup_box { .pic { max-width: 850/1500*100%; } .ttl_box { margin-top: 90/1920*100vw; width: 120/1500*100%; } .text_box { width: 390px; max-width: 390/1500*100%; p { font-size: pc_s_vw(18); line-height: 1.8; } } &#pickup_cuisine { padding-left: 0; padding-right: 25px; .sub-pic_01 { position: absolute; width: 250px; max-width: calc(160/1500*100%); top: -85/1920*100vw; right: 0; } .sub-pic_02 { position: absolute; top: 575/1920*100vw; left: 960/1920*100%; width: 400px; max-width: calc(300/1500*100%); } } &#pickup_hot-spring { justify-content: flex-end; padding-right: 0; padding-left: 25px; .ttl_box { order: 1; margin-right: 0; margin-left: auto; } .text_box { order: 2; } .pic { order: 3; } .sub-pic_01 { position: absolute; width: 250px; max-width: 250/1920*100%; top: 420/1920*100vw; left: 0; } } &#pickup_facilities { padding-left: 0; padding-right: 25px; .text_box { max-width: 570/1920*100vw; } .sub-pic_01 { position: absolute; width: 400px; max-width: 400/1920*100%; top: 560/1920*100vw; right: 0; } } } .pickup_sep_1 { width: 100%; height: 180/1920*100vw; background: url("../images/common/bg_02.jpg") center center no-repeat; background-size: cover; } .pickup_sep_2 { width: 100%; height: 180/1920*100vw; background: url("../images/common/bg_03.jpg") center center no-repeat; background-size: cover; } } } @include tab { .pickup-wrap { .pickup_box { width: 100%; color: #fff; background: url("../images/common/bg_00.jpg") top bottom no-repeat, #432f2f; background-size: cover; display: flex; flex-wrap: wrap; position: relative; .pic { width: 100%; max-width: 874/1024*100%; order: 1; } .ttl_box { margin-top: 90/1024*100vw; width: 150/1024*100%; order: 2; } .text_box { width: 100%; max-width: 100%; padding-top: 50/1024*100%; padding-left: 50/1024*100%; padding-right: 50/1024*100%; padding-bottom: 200/1024*100vw; display: flex; flex-direction: column; justify-content: center; order: 3; p { font-size: min(18/1024*100vw, 18px); line-height: 50/18*1em; } .btn_detail { margin-top: 40/1024*100vw; } } &#pickup_cuisine { .sub-pic_01 { position: absolute; width: 250px; max-width: 250/1024*100%; top: auto; bottom: -250/1024*100vw; right: 0; } .sub-pic_02 { position: absolute; top: auto; bottom: -150/1024*100vw; left: auto; right: 300/1024*100vw; width: 400px; max-width: 400/1024*100%; } } &#pickup_hot-spring { justify-content: flex-end; .ttl_box { order: 1; margin-right: 0; margin-left: auto; } .text_box { order: 3; } .pic { order: 2; } .sub-pic_01 { position: absolute; width: 250px; max-width: 250/1024*100%; top: auto; bottom: -250/1024*100vw; left: 0; } } &#pickup_facilities { .text_box { max-width: 100%; } .sub-pic_01 { position: absolute; width: 400px; max-width: 400/1024*100%; top: auto; bottom: -150/1024*100vw; right: 0; } } } .pickup_sep_1 { width: 100%; height: 300/1024*100vw; background: url("../images/common/bg_02.jpg") center center no-repeat; background-size: cover; } .pickup_sep_2 { width: 100%; height: 300/1024*100vw; background: url("../images/common/bg_03.jpg") center center no-repeat; background-size: cover; } } } @include sp { .pickup-wrap { .pickup_box { width: 100%; color: #fff; background: url("../images/common/bg_00_sp.jpg") top bottom no-repeat, #432f2f; background-size: cover; display: flex; flex-wrap: wrap; position: relative; padding-right: 0; padding-left: 0; .pic { width: 100%; max-width: 650/750*100%; order: 1; } .ttl_box { position: absolute; top: 0; right: sp_vw(25); margin-top: 60/750*100vw; width: 6.5em; order: 2; display: flex; justify-content: flex-end; } .text_box { width: 100%; max-width: 100%; padding-top: sp_vw(50); padding-left: sp_vw(50); padding-right: sp_vw(50); padding-bottom: sp_vw(250); display: flex; flex-direction: column; justify-content: center; order: 3; p { font-size: sp_vw(32); line-height: 50/32*1em; text-align: justify; } .btn_detail { margin-top: 1.5em; } } &#pickup_cuisine { padding-right: 0; padding-left: 0; .sub-pic_01 { position: absolute; width: 250px; max-width: 250/750*100%; top: auto; bottom: -220/750*100vw; right: sp_vw(25); } .sub-pic_02 { position: absolute; top: auto; bottom: -120/750*100vw; left: sp_vw(25); right: auto; width: 400px; max-width: 400/750*100%; } } &#pickup_hot-spring { padding-right: 0; padding-left: 0; justify-content: flex-end; .ttl_box { order: 1; position: absolute; top: 0; left: sp_vw(50); margin-right: auto; margin-left: 0; z-index: 2; justify-content: flex-start; } .text_box { order: 3; } .pic { order: 2; } .sub-pic_01 { position: absolute; width: 250px; max-width: 250/750*100%; top: auto; bottom: -220/750*100vw; left: auto; right: sp_vw(25); } } &#pickup_facilities { padding-right: 0; padding-left: 0; .text_box { max-width: 100%; } .sub-pic_01 { position: absolute; width: 400px; max-width: 400/750*100%; top: auto; bottom: -120/750*100vw; right: auto; left: sp_vw(25); } } } .pickup_sep_1 { width: 100%; height: 300/750*100vw; background: url("../images/common/bg_02_sp.jpg") center center no-repeat; background-size: cover; } .pickup_sep_2 { width: 100%; height: 300/750*100vw; background: url("../images/common/bg_02_sp.jpg") center center no-repeat; background-size: cover; } } } } /* コロナウイルス感染症対策について -------------------*/ #sec-coronavirus-measures { .content__inner { padding-top: 190px; padding-bottom: 100px; } .aco-box { width: 1300px; max-width: 100%; margin: 0 auto; font-feature-settings: "palt"; .aco_title { display: block; line-height: 2.5; padding: 0.5em 1.5em; position: relative; cursor: pointer; border-bottom: 1px solid #000; h3 { font-size: rem(22); } &::before, &::after { content: ''; display: block; background-color: #222222; position: absolute; top: 50%; width: 20px; height: 1px; right: 20px; } &::before { transform: rotate(90deg); transition-duration: .3s; } &.active-aco_content::before { transform: rotate(0); transition-duration: .3s; } &.active-aco_content::after { opacity: 0; } } .aco_content { padding: 2em; color: #000; h4 { margin: 1.25em auto 0.75em; font-size: rem(20); padding: 0.25em 0; } .mb-1em { margin-bottom: 1em; } } } @include sp { .content__inner { padding-top: sp_vw(200); padding-bottom: sp_vw(80); } .aco-box { width: 100%; .aco_title { display: block; line-height: 2; padding: 0.5em 1em; h3 { font-size: sp_vw(30); } &::before, &::after { width: sp_vw(25); right: sp_vw(25); } } .aco_content { padding: 1em; h4 { font-size: sp_vw(30); margin-top: 1em; padding: 0.5em 0; margin-bottom: 0; } } } } } /* 空室検索 */ .search { width: 100%; max-width: 100%; margin: 100px auto 0; position: relative; background: #291e19; .search_in { width: 100%; max-width: 100%; margin: 0 auto; } @include sp { margin: sp_vw(50) auto; padding: 0 0 sp_vw(85); } } /* おすすめ宿泊プラン */ #recommended { background: url("../images/common/bg_01.jpg") center top no-repeat; background-size: cover; .content__inner { padding-top: 80px; padding-bottom: 80px; } @include sp { background: url("../images/common/bg_01_sp.jpg") center top repeat-y; background-size: 100% auto; .content__inner { padding-top: sp_vw(80); padding-bottom: sp_vw(60); } #plan-list { padding-left: sp_vw(25); padding-right: sp_vw(25); } } } #sec-information_02 { .content__inner { padding-bottom: 100px; } .col2-box { display: flex; justify-content: space-between; font-feature-settings: "palt"; margin-bottom: 80px; .calendar_box { width: 50%; padding-right: 80/1300*100%; .text_box { p.date { line-height: 1.5; span { display: inline-block; min-width: 4em; text-align: center; background: #a1c29c; color: #fff; margin-right: 1em; border-radius: 1.5em; margin-bottom: 0.5em; } } p.bottom_text { margin-top: 1.5em; } } } .press_box { width: 50%; padding-left: 80/1300*100%; .press-list-wrap { .press-list { p { font-size: rem(16); padding: 0.25em 0; text-indent: -1.25em; margin-left: 1.25em; position: relative; &::after { position: absolute; content: ""; left: -1.25em; bottom: 0; width: calc(100% + 1.25em); height: 1px; background: #a1c29c; } } } } } } .bnr-terms { a.btn_link { width: 570px; height: 80px; background: #a1c29c; color: #fff; display: flex; justify-content: center; align-items: center; font-size: rem(26); margin: 0 auto; transition: 0.3s linear; &:hover { border: 3px solid #a1c29c; color: #a1c29c; background: rgba(255, 255, 255, .5); } } } @include tab { .col2-box { display: flex; justify-content: center; flex-wrap: wrap; font-feature-settings: "palt"; width: 600px; margin: 0 auto 80px; .calendar_box { width: 100%; padding-right: 0; margin-bottom: 80px; .text_box { p.date { line-height: 1.5; span { display: inline-block; min-width: 4em; text-align: center; background: #a1c29c; color: #fff; margin-right: 1em; border-radius: 1.5em; margin-bottom: 0.5em; } } p.bottom_text { margin-top: 1.5em; } } } .press_box { width: 100%; padding-left: 0; .press-list-wrap { .press-list { p { font-size: rem(16); padding: 0.25em 0; } } } } } } @include sp { .content__inner { padding-bottom: sp_vw(100); padding-left: sp_vw(25); padding-right: sp_vw(25); } .col2-box { display: flex; justify-content: center; flex-wrap: wrap; font-feature-settings: "palt"; width: 100%; margin: sp_vw(80) auto; .calendar_box { width: 100%; padding-right: 0; margin-bottom: sp_vw(80); .text_box { p.date { font-size: sp_vw(32); line-height: 1.5; span { display: inline-block; min-width: 4em; text-align: center; background: #a1c29c; color: #fff; margin-right: 1em; border-radius: 1.5em; margin-bottom: 0.5em; } } p.bottom_text { font-size: sp_vw(32); margin-top: 1.5em; } } } .press_box { width: 100%; padding-left: 0; .press-list-wrap { .press-list { p { font-size: sp_vw(32); padding: 0.25em 0; } } } } } .bnr-terms { a.btn_link { width: sp_vw(570); height: sp_vw(80); background: #a1c29c; color: #fff; display: flex; justify-content: center; align-items: center; font-size: sp_vw(36); margin: 0 auto; transition: 0.3s linear; &:hover { border: 3px solid #a1c29c; color: #a1c29c; background: rgba(255, 255, 255, .5); } } } } } /*================================================= 下層ページ共通部分 ==================================================*/ /* 宿泊プラン バナー */ #bnr-area { .bnr-box { padding-top: 85/1920*100vw; padding-bottom: 90/1920*100vw; width: 100%; background: rgba(108, 39, 45, 0.1); .col2-box { display: flex; justify-content: center; a { width: 250px; margin: 0 50px; } } } .bnr-plan { a { width: 100%; max-width: 100%; &:hover { opacity: 0.8; } img { width: 100%; vertical-align: middle; } } } @include sp { .bnr-box { padding-top: sp_vw(80); padding-bottom: sp_vw(80); padding-left: sp_vw(50); padding-right: sp_vw(50); width: 100%; background: rgba(108, 39, 45, 0.1); .col2-box { display: flex; justify-content: space-between; a { width: 250px; max-width: 300/650*100%; margin: 0; } } } } } /* レイアウトボックス */ .col2-box_1 { position: relative; z-index: 0; width: 1920px; max-width: 100%; margin: 60/1920*100vw auto 120/1920*100vw; padding-left: 110/1920*100%; padding-right: 110/1920*100%; padding-top: 110/1920*100vw; display: flex; justify-content: center; align-items: center; .bg_box { position: absolute; content: ""; top: 0; right: 0; width: 1460/1920*100vw; height: calc(635/770*100%); background: url("../images/common/bg_00.jpg") right top no-repeat; z-index: -1; } .pic_main { width: 850px; max-width: 850/1920*100vw; } .text_box { width: 850/1920*100vw; padding-left: 130/1920*100vw; color: #fff; .text_box_in { width: 100%; max-width: 100%; min-height: 350/1920*100vw; } p.description { width: 520px; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 40/18*1; font-size: min(18/1500*100vw, 18px); } .caution_box { margin-top: 2em; margin-bottom: 2em; } .pic_sub { display: flex; justify-content: flex-end; .pic { width: 310px; max-width: 310/850*100%; margin-left: 30/850*100%; } } } @include tab { width: 100%; max-width: 100%; margin: 60/1024*100vw auto 120/1024*100vw; padding-left: 50/1024*100%; padding-right: 50/1024*100%; padding-top: 50/1024*100vw; flex-wrap: wrap; .bg_box { position: absolute; content: ""; top: 0; right: 0; width: 924/1024*100vw; height: calc(75%); background: url("../images/common/bg_00.jpg") right top no-repeat; z-index: -1; } .pic_main { width: 850px; max-width: 850/1024*100vw; margin-right: auto; margin-bottom: calc(270/1024*100vw); order: 2; } .text_box { width: 100%; padding-left: 100/1024*100vw; color: #fff; order: 1; p.description { width: 100%; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 40/18*1; font-size: min(18/1024*100vw, 18px); } .pic_sub { display: flex; justify-content: flex-end; position: absolute; right: 50/1024*100vw; bottom: calc(-800/1024*100vw); width: 100%; .pic { width: 310px; max-width: 310/1024*100%; margin-left: 30/1024*100%; } } } } @include sp { width: 100%; max-width: 100%; margin: 50/750*100vw auto 100/750*100vw; padding-left: 0; padding-right: 0; padding-top: 70/750*100vw; flex-wrap: wrap; .bg_box { position: absolute; content: ""; top: 0; right: 0; width: 700/750*100vw; height: calc(75%); background: url("../images/common/bg_00_sp.jpg") right top no-repeat; background-size: cover; z-index: -1; } .pic_main { width: 650px; max-width: 650/750*100%; margin-right: auto; margin-bottom: calc(270/750*100vw); order: 2; } .text_box { width: 100%; padding-left: 120/750*100vw; padding-right: 70/750*100vw; color: #fff; order: 1; p.description { width: 100%; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 52/32*1; font-size: sp_vw(32); text-align: justify; } .pic_sub { width: sp_vw(650); max-width: 650/750*100%; margin: 0 auto; display: flex; justify-content: space-between; position: absolute; right: unset; left: 50%; transform: translateX(-50%); bottom: sp_vw(-665); .pic { width: 310px; max-width: 310/650*100%; margin-left: 0; } } } } } .col2-box_2 { position: relative; z-index: 0; width: 1920px; max-width: 100%; margin: 60/1920*100vw auto 120/1920*100vw; padding-left: 110/1920*100%; padding-right: 110/1920*100%; padding-top: 110/1920*100vw; display: flex; justify-content: center; align-items: center; .bg_box { position: absolute; content: ""; top: 0; left: 0; width: 1460/1920*100vw; height: calc(635/770*100%); background: url("../images/common/bg_00.jpg") right top no-repeat; z-index: -1; } .pic_main { width: 850px; max-width: 850/1920*100vw; order: 2; } .text_box { width: 850/1920*100vw; padding-right: 100/1920*100vw; color: #fff; order: 1; .text_box_in { width: 550px; max-width: 100%; margin-left: auto; padding-left: 40/550*100%; min-height: 350/1920*100vw; } p.description { width: 520px; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 40/18*1; font-size: min(18/1500*100vw, 18px); } .caution_box { margin-top: 2em; margin-bottom: 2em; } .pic_sub { display: flex; justify-content: flex-start; .pic { width: 310px; max-width: 310/850*100%; margin-right: 30/850*100%; } } } @include tab { width: 100%; max-width: 100%; margin: 60/1024*100vw auto 120/1024*100vw; padding-left: 50/1024*100%; padding-right: 50/1024*100%; padding-top: 50/1024*100vw; flex-wrap: wrap; .bg_box { position: absolute; content: ""; top: 0; right: 0; width: 924/1024*100vw; height: calc(75%); background: url("../images/common/bg_00.jpg") right top no-repeat; z-index: -1; } .pic_main { width: 850px; max-width: 850/1024*100vw; margin-left: auto; margin-bottom: calc(270/1024*100vw); order: 2; } .text_box { width: 100%; padding-right: 100/1024*100vw; color: #fff; order: 1; .text_box_in { width: 100%; max-width: 100%; margin-right: auto; padding-left: 40/1024*100%; } p.description { width: 100%; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 40/18*1; font-size: min(18/1024*100vw, 18px); } .pic_sub { display: flex; justify-content: flex-start; position: absolute; left: 50/1024*100vw; bottom: calc(-800/1024*100vw); width: 100%; .pic { width: 310px; max-width: 310/1024*100%; margin-right: 30/1024*100%; } } } } @include sp { width: 100%; max-width: 100%; margin: 50/750*100vw auto 100/750*100vw; padding-left: 0; padding-right: 0; padding-top: 70/750*100vw; flex-wrap: wrap; .bg_box { position: absolute; content: ""; top: 0; right: 0; width: 700/750*100vw; height: calc(75%); background: url("../images/common/bg_00_sp.jpg") right top no-repeat; background-size: cover; z-index: -1; } .pic_main { width: 650px; max-width: 650/750*100%; margin-left: auto; margin-bottom: calc(270/750*100vw); order: 2; } .text_box { width: 100%; padding-right: 120/750*100vw; padding-left: 70/750*100vw; color: #fff; order: 1; p.description { width: 100%; max-width: 100%; margin-right: auto; margin-bottom: 2em; line-height: 52/32*1; font-size: sp_vw(32); text-align: justify; } .pic_sub { width: sp_vw(650); max-width: 650/750*100%; margin: 0 auto; display: flex; justify-content: space-between; position: absolute; right: unset; left: 50%; transform: translateX(-50%); bottom: sp_vw(-665); .pic { width: 310px; max-width: 310/650*100%; margin-right: 0; } } } } } /* table */ .table-box { width: 1300px; max-width: 100%; margin-left: auto; margin-right: auto; .bottom_text { margin: 1em auto; } @include sp { width: 100%; &.sp-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: sp_vw(30); table { width: auto; white-space: nowrap; } } } } table.default { width: 100%; font-size: rem(16); border-collapse: collapse; border-left: 1px solid #fff; border-top: 1px solid #fff; font-weight: normal; font-feature-settings: "palt"; tr { th { padding: 0.5em; color: #fff; background: #432f2f; font-weight: normal; border-bottom: 1px solid #fff; border-right: 1px solid #fff; vertical-align: middle; } td { padding: 0.5em; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center; vertical-align: middle; &.t-left { text-align: left; padding-left: 60/1920*100vw; } } } &.type1 { font-size: rem(18); border-left: 1px solid #ababab; border-top: 1px solid #ababab; tr { th { color: #fff; background: #6c272d; border-bottom: 1px solid #ababab; border-right: 1px solid #ababab; text-align: center; } td { border-bottom: 1px solid #ababab; border-right: 1px solid #ababab; } } } &.fixed { table-layout: fixed; } @include sp { font-size: sp_vw(30); tr { td { padding: 0.5em; &.t-left { padding-left: 0.5em; } } } &.type1 { font-size: sp_vw(28); } } } table.simple { width: 100%; border-top: 1px solid #ababab; font-size: rem(18); tr { th { font-weight: normal; min-width: 200px; padding: 0.8em 2em; border-bottom: 1px solid #ababab; text-align: center; vertical-align: middle; } td { padding: 0.8em 2em; border-bottom: 1px solid #ababab; text-align: left; vertical-align: middle; } } @include sp { font-size: sp_vw(32); tr { th { min-width: 5em; padding: 0.8em 0.5em 0; text-align: left; display: block; border-bottom: none; } td { display: block; padding: 0.5em 0.5em 0.8em; } } } } /* list */ ul.default { margin-left: 1.5em; padding-left: 1.5em; li { list-style: disc; text-align: left; } } dl.default { width: 1000px; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: first baseline; font-size: rem(18); &:not(:last-of-type) { border-bottom: 1px solid #9a896f; } dt { width: 200px; padding: 0.5em 1em; span { width: 100%; color: #fff; background: #974c43; border-radius: 10px; text-align: center; display: inline-block; padding: 0.5em; } } dd { width: calc(100% - 200px); padding: 0.5em 1em 0.5em 35/18*1em; } @include sp { justify-content: center; font-size: sp_vw(32); dt { width: 100%; padding: 0.5em 0; span { display: block; margin: 0 auto; } } dd { width: 100%; padding: 0.5em 0; } } } /*================================================= Cuisine お料理 ==================================================*/ #sec-cuisine-lead { .content__inner { padding-top: 90/1920*100vw; padding-bottom: 90/1920*100vw; position: relative; } .lead-box { width: 100%; position: relative; .text_box { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 380/1920*100vw; margin: 0 auto; h3 { font-size: 22px; margin-left: 1.5em; font-weight: normal; } p { font-size: 18px; line-height: 40/18*1; font-weight: normal; } } .pic_01 { position: absolute; width: 510px; max-width: 510/1920*100%; left: 0; top: 200/1920*100vw; } .pic_02 { position: absolute; width: 200px; max-width: 200/1920*100%; right: 565/1920*100vw; top: 450px; } .pic_03 { position: absolute; width: 200px; max-width: 200/1920*100%; right: 310/1920*100vw; top: 345px; } } @include pc_s { .lead-box { width: 100%; position: relative; .text_box { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 380/1500*100vw; margin: 0 auto; h3 { font-size: 22px; margin-left: 1.5em; font-weight: normal; } p { font-size: 18px; line-height: 40/18*1; font-weight: normal; } } .pic_01 { position: absolute; width: 510px; max-width: 510/1500*100%; left: 0; top: auto; bottom: -60/1500*100vw; } .pic_02 { position: absolute; width: 200px; max-width: 200/1500*100%; right: 365/1500*100vw; top: 450px; } .pic_03 { position: absolute; width: 200px; max-width: 200/1500*100%; right: 110/1500*100vw; top: 345px; } } } @include tab { .content__inner { padding-top: 90/1024*100vw; padding-bottom: 90/1024*100vw; position: relative; } .lead-box { width: 100%; position: relative; .text_box { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 380/1024*100vw; padding-left: 50/1024*100vw; padding-right: 50/1024*100vw; h3 { font-size: 22px; margin-left: 0; margin-bottom: 1.5em; font-weight: normal; } p { font-size: 18px; line-height: 40/18*1; font-weight: normal; } } .pic_01 { position: absolute; width: 510px; max-width: 510/1024*100%; left: 0; top: auto; bottom: 0; } .pic_02 { position: absolute; width: 200px; max-width: 200/1024*100%; right: 260/1024*100vw; top: auto; bottom: 0; } .pic_03 { position: absolute; width: 200px; max-width: 200/1024*100%; right: 30/1024*100vw; top: auto; bottom: 100/1024*100vw; } } } @include sp { .content__inner { padding-top: 75/750*100vw; padding-bottom: 50/750*100vw; position: relative; } .lead-box { width: 100%; position: relative; .text_box { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 750/750*100vw; padding-left: 70/750*100vw; padding-right: 70/750*100vw; h3 { font-size: sp_vw(36); margin-left: 0; margin-bottom: 1.5em; font-weight: normal; } p { font-size: sp_vw(32); line-height: 50/32*1; font-weight: normal; text-align: justify; } } .pic_01 { position: absolute; width: 510px; max-width: 510/750*100%; left: 50%; transform: translateX(-50%); top: auto; bottom: 0; } .pic_02 { position: absolute; width: 200px; max-width: 200/750*100%; right: 250/750*100vw; top: auto; bottom: 400/750*100vw; } .pic_03 { position: absolute; width: 200px; max-width: 200/750*100%; right: 0; top: auto; bottom: 450/750*100vw; } } } } #cuisine { .caution_box { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 100/1920*100vw 120/1920*100vw; } @include tab { .caution_box { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 50/1024*100vw 120/1024*100vw; } } @include sp { .caution_box { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 70/750*100vw 100/750*100vw; } } } #sec-sake { .content__inner { padding-bottom: 200/1920*100vw; } .con_box { width: 100%; max-width: 1920px; padding-top: 90/1920*100vw; margin: 0 auto; background: url("../images/cuisine/pic_sake_01.png") top right no-repeat, url("../images/common/bg_04.jpg") top center no-repeat; background-size: auto 100%, cover; .text_box { width: 1400px; max-width: 100%; margin: 0 auto; padding-left: 50/1920*100vw; padding-right: 50/1920*100vw; color: #fff; display: flex; .ttl_box { width: 90px; max-width: 90/1400*100%; } .text_box_in { width: 700px; max-width: 700/1400*100%; padding-top: 180/1920*100vw; p.description { margin-bottom: 75/1920*100vw; } .pic_sub { width: 500px; max-width: 500/700*100%; margin-left: auto; margin-right: auto; margin-bottom: -110/1920*100vw; } } } } @include tab { .content__inner { padding-bottom: 200/1024*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 90/1024*100vw; margin: 0 auto; background: url("../images/cuisine/pic_sake_01.png") top right -200% no-repeat, url("../images/common/bg_04.jpg") top center no-repeat; background-size: auto 100%, cover; .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 100/1024*100vw; padding-right: 100/1024*100vw; color: #fff; display: flex; flex-wrap: wrap; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 2em; } .text_box_in { width: 700px; max-width: 650/1024*100%; padding-top: 0; p.description { margin-bottom: 75/1024*100vw; } .pic_sub { width: 500px; max-width: 650/1024*100%; margin-left: auto; margin-right: auto; margin-bottom: -110/1920*100vw; } } } } } @include sp { .content__inner { padding-bottom: 200/750*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 415/750*100vw; margin: 0 auto; background: url("../images/cuisine/pic_sake_01_sp.png") top center no-repeat, url("../images/common/bg_04_sp.jpg") top center repeat-y; background-size: 100% auto, 100% auto; .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 100/750*100vw; padding-right: 100/750*100vw; color: #fff; display: flex; flex-wrap: wrap; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 1em; } .text_box_in { width: 100%; max-width: 100%; padding-top: 0; p.description { margin-bottom: 85/750*100vw; text-align: justify; } .pic_sub { width: 500px; max-width: 500/550*100%; margin-left: auto; margin-right: auto; margin-bottom: -100/750*100vw; } } } } } } /*=================================================    Hot spring 湯谷温泉 ==================================================*/ #sec-hotspring-lead { .content__inner { padding-top: 100/1920*100vw; padding-bottom: 100/1920*100vw; padding-right: 110/1920*100vw; position: relative; } .lead-box { width: 100%; height: 680/1920*100vw; max-height: 680px; display: flex; justify-content: flex-start; margin-right: auto; .text_box_01 { width: 740px; max-width: 740/1920*100%; height: 530/1920*100vw; background: url("../images/hot-spring/pic_lead_01.jpg") right top no-repeat; background-size: cover; padding-top: 190/1920*100vw; padding-bottom: 50/1920*100vw; padding-right: 80/1920*100vw; color: #fff; p { font-size: min(18/1920*100vw, 18px); } } .text_box_02 { width: 550px; max-width: 550/1920*100%; height: 100%; margin-left: auto; h3 { font-size: min(22/1500*100vw, 22px); margin-right: 1em; margin-left: 1.5em; font-weight: normal; } p { font-size: min(18/1500*100vw, 18px); line-height: 2em; margin-left: 2em; font-weight: normal; } } .pic_01 { width: 510px; max-width: 510/1920*100vw; display: flex; flex-direction: column; margin-top: auto; } } @include tab { .content__inner { padding-top: 100/1024*100vw; padding-bottom: 100/1024*100vw; padding-right: 0; position: relative; } .lead-box { width: 100%; height: auto; max-height: unset; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-right: auto; .text_box_01 { width: 100%; max-width: 100%; height: 530/1024*100vw; margin-left: auto; margin-right: auto; background: url("../images/hot-spring/pic_lead_01.jpg") right top no-repeat; background-size: cover; padding-top: 190/1024*100vw; padding-bottom: 50/1024*100vw; padding-left: 360/1024*100vw; padding-right: 80/1024*100vw; color: #fff; order: 3; p { font-size: min(18/1024*100vw, 18px); text-align: justify; } } .text_box_02 { width: 100%; max-width: 100%; height: 100%; margin-left: auto; margin-right: auto; padding-left: 50/1024*100%; padding-right: 50/1024*100%; order: 1; h3 { font-size: min(22/1024*100vw, 22px); margin-right: 0; margin-left: 0; margin-bottom: 1em; font-weight: normal; } p { font-size: min(18/1024*100vw, 18px); line-height: 2em; margin-left: 0; margin-bottom: 2em; font-weight: normal; text-align: justify; } } .pic_01 { width: 510px; max-width: 510/750*100vw; display: block; margin-top: auto; margin-left: auto; margin-bottom: 50/1024*100vw; order: 2; } } } @include sp { .content__inner { padding-top: 85/750*100vw; padding-bottom: 50/750*100vw; padding-right: 0; position: relative; } .lead-box { width: 100%; height: auto; max-height: unset; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-right: auto; .text_box_01 { width: 100%; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; background: url("../images/hot-spring/pic_lead_01_sp.jpg") right top no-repeat; background-size: cover; padding-top: 160/750*100vw; padding-bottom: 70/750*100vw; padding-left: 65/750*100vw; padding-right: 65/750*100vw; color: #fff; order: 3; p { font-size: sp_vw(32); margin-bottom: 0.5em; } } .text_box_02 { width: 100%; max-width: 100%; height: 100%; margin-left: auto; margin-right: auto; padding-left: 65/750*100%; padding-right: 65/750*100%; order: 1; h3 { font-size: sp_vw(36); margin-right: 0; margin-left: 0; margin-bottom: 1em; font-weight: normal; } p { font-size: sp_vw(32); line-height: 2em; margin-left: 0; margin-bottom: 2em; font-weight: normal; } } .pic_01 { width: 510px; max-width: 420/750*100%; display: block; margin-top: auto; margin-left: auto; margin-bottom: 80/750*100vw; order: 2; } } } } #hot-spring { p.u_line { span { display: inline-block; text-decoration: underline; } } .text_box_in { min-height: 450/1920*100vw; } } #sec-course_03 { .col2-box_1 { margin-bottom: 0; } } #sec-hotspring-info { .content__inner { padding-top: 100/1920*100vw; padding-bottom: 100/1920*100vw; } @include sp { .content__inner { padding-top: 100/750*100vw; padding-bottom: 100/750*100vw; padding-left: 30/750*100vw; padding-right: 30/750*100vw; } } } #sec-day-trip { .content__inner { padding-bottom: 200/1920*100vw; } .con_box { width: 100%; max-width: 1920px; padding-top: 90/1920*100vw; margin: 0 auto; background: url("../images/hot-spring/pic_day-trip_01.png") top right no-repeat, url("../images/common/bg_04.jpg") top center no-repeat; background-size: 1093/1920*100vw auto, cover; .text_box { width: 1400px; max-width: 100%; margin: 0 auto 50/1920*100vw; padding-left: 50/1920*100vw; padding-right: 50/1920*100vw; padding-bottom: 50/1920*100vw; color: #fff; display: flex; .ttl_box { width: 90px; max-width: 90/1400*100%; } .text_box_in { width: 700px; max-width: 700/1400*100%; padding-top: 180/1920*100vw; p.description { margin-bottom: 2em; } .table-box { table.default { margin-bottom: 1em; } } } } .text_box2 { width: 1400px; max-width: 100%; margin: 0 auto; padding-left: 50/1920*100vw; padding-right: 50/1920*100vw; color: #fff; display: flex; .pic_sub { width: 500px; max-width: 500/700*100%; margin-left: auto; margin-right: auto; margin-top: 150/1920*100vw; margin-bottom: -90/1920*100vw; } .text_box_in { width: 560px; max-width: 700/1400*100%; padding-left: 60/1920*100vw; min-height: unset; p.description { margin-bottom: 1em; } } } } @include tab { .content__inner { padding-bottom: 200/1024*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 90/1024*100vw; margin: 0 auto; background: url("../images/hot-spring/pic_day-trip_01.png") top right no-repeat, url("../images/common/bg_04.jpg") top right no-repeat; background-size: 70% auto, cover; .text_box { width: 100%; max-width: 100%; margin: 0 auto 50/1024*100vw; padding-left: 100/1024*100vw; padding-right: 100/1024*100vw; padding-bottom: 50/1024*100vw; color: #fff; display: flex; flex-direction: column; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 1em; } .text_box_in { width: 700px; max-width: 100%; padding-top: 0; p.description { margin-bottom: 2em; } .table-box { table.default { margin-bottom: 1em; } } } } .text_box2 { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 100/1024*100vw; padding-right: 100/1024*100vw; color: #fff; display: flex; flex-direction: column; .pic_sub { width: 500px; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 100/1024*100vw; margin-bottom: -90/1024*100vw; order: 2; } .text_box_in { width: 560px; max-width: 100%; padding-left: 0; min-height: unset; order: 1; p.description { margin-bottom: 1em; } } } } } @include sp { .content__inner { padding-bottom: 200/750*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 415/750*100vw; margin: 0 auto; background: url("../images/hot-spring/pic_day-trip_01_sp.png") top center no-repeat, url("../images/common/bg_05_sp.jpg") top center repeat-y; background-size: 100% auto, 100% auto; .text_box { width: 100%; max-width: 100%; margin: 0 auto 50/750*100vw; padding-left: 75/750*100vw; padding-right: 75/750*100vw; padding-bottom: 50/750*100vw; color: #fff; display: flex; flex-direction: column; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 1em; padding-left: 25/750*100vw; padding-right: 50/750*100vw; } .text_box_in { width: 100%; max-width: 100%; padding-top: 0; p.description { margin-bottom: 2em; text-align: justify; padding-left: 25/750*100vw; padding-right: 25/750*100vw; } .table-box { table.default { margin-bottom: 1em; } } } } .text_box2 { width: 100%; max-width: 100%; margin: 100/750*100vw auto 0; padding-left: 100/750*100vw; padding-right: 100/750*100vw; color: #fff; display: flex; flex-direction: column; .pic_sub { width: 500px; max-width: 500/750*100vw; margin-left: auto; margin-right: auto; margin-top: 50/750*100vw; margin-bottom: -90/750*100vw; order: 2; } .text_box_in { width: 100%; max-width: 100%; padding-left: 0; min-height: unset; order: 1; p.description { margin-bottom: 1em; text-align: justify; } } } } } } /*================================================= Facilities 客室 ==================================================*/ #facilities { p.ttl { font-size: min(18/1500*100vw, 18px); span { display: inline-block; padding: 0 0.5em; background: #6c272d; color: #fff; margin-right: 1em; margin-bottom: 2em; border-radius: 5px; } } @include tab { p.ttl { font-size: min(18/1024*100vw, 18px); } } @include sp { p.ttl { font-size: sp_vw(32); } } } #sec-room_06 { .content__inner { padding-bottom: 120/1920*100vw; } .table-box { width: 1200px; max-width: 100%; padding-left: 100/1920*100vw; padding-right: 100/1920*100vw; margin: 0 auto; } } #sec-art { .content__inner { padding-bottom: 200/1920*100vw; } .con_box { width: 100%; max-width: 1920px; padding-top: 90/1920*100vw; padding-bottom: 100/1920*100vw; margin: 0 auto; background: url("../images/facilities/pic_art_01.png") top right no-repeat, url("../images/common/bg_06.jpg") top center no-repeat; background-size: 1093/1920*100vw auto, cover; .text_box { width: 1400px; max-width: 100%; margin: 0 auto 80/1920*100vw; padding-left: 50/1920*100vw; padding-right: 50/1920*100vw; color: #fff; display: flex; .ttl_box { width: 130px; max-width: 130/1400*100%; } .text_box_in { width: 530px; max-width: 530/1400*100%; padding-top: 180/1920*100vw; p.description { margin-bottom: 75/1920*100vw; line-height: 50/18*1; } .pic_sub { width: 500px; max-width: 500/700*100%; margin-left: auto; margin-right: auto; margin-bottom: -110/1920*100vw; } } } .pic_box { width: 1460px; max-width: 1460/1920*100vw; display: flex; justify-content: space-between; .pic_01 { width: 510px; max-width: 510/1460*100%; margin-right: auto; } .pic_02 { width: 200px; max-width: 200/1460*100%; margin-left: auto; position: relative; top: 100/1920*100vw; } .pic_03 { width: 200px; max-width: 200/1460*100%; margin-left: 50/1460*100%; position: relative; top: 190/1920*100vw; } .pic_04 { width: 200px; max-width: 200/1460*100%; margin-left: 50/1460*100%; position: relative; top: 280/1920*100vw; } } } @include tab { .content__inner { padding-bottom: 200/1024*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 90/1024*100vw; margin: 0 auto; background: url("../images/facilities/pic_art_01.png") top right no-repeat, url("../images/common/bg_06.jpg") top center no-repeat; background-size: 75% auto, cover; .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 100/1024*100vw; padding-right: 100/1024*100vw; color: #fff; display: flex; flex-wrap: wrap; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 2em; } .text_box_in { width: 700px; max-width: 650/1024*100%; padding-top: 0; p.description { margin-bottom: 75/1024*100vw; line-height: 50/32*1; } } } } } @include sp { .content__inner { padding-bottom: 200/750*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 415/750*100vw; padding-bottom: 25/750*100vw; margin: 0 auto; background: url("../images/facilities/pic_art_01_sp.png") top right no-repeat, url("../images/common/bg_05_sp.jpg") top center no-repeat; background-size: 100% auto, cover; .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 100/750*100vw; padding-right: 100/750*100vw; color: #fff; display: flex; flex-wrap: wrap; .ttl_box { width: 100%; max-width: 100%; margin-bottom: 1em; } .text_box_in { width: 100%; max-width: 100%; padding-top: 0; p.description { margin-bottom: 85/750*100vw; text-align: justify; } } } .pic_box { width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding-left: sp_vw(50); padding-right: sp_vw(50); .pic_01 { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 50/750*100vw; text-align: center; img { width: sp_vw(510); max-width: 100%; } } .pic_02 { width: 185/750*100vw; max-width: 185/650*100%; margin-left: 0; margin-right: 0; position: relative; top: 0; } .pic_03 { width: 185/750*100vw; max-width: 185/650*100%; margin-left: 0; margin-right: 0; position: relative; top: 80/750*100vw; } .pic_04 { width: 185/750*100vw; max-width: 185/650*100%; margin-left: 0; margin-right: 0; position: relative; top: 160/750*100vw; } } } } } #sec-banquet-hall { .content__inner { padding-top: 80/1920*100vw; padding-bottom: 100/1920*100vw; } .con_box { width: 100%; max-width: 1920px; padding-top: 90/1920*100vw; margin: 0 auto; position: relative; z-index: 0; &::before { position: absolute; content: ""; width: 100%; top: 0; left: 50%; transform: translateX(-50%); height: calc(770/910*100%); background: url("../images/common/bg_01.jpg") top center no-repeat; background-size: cover; z-index: -1; } .text_box { width: 1200px; max-width: 100%; margin: 0 auto; padding-left: 100/1920*100vw; padding-right: 100/1920*100vw; color: #fff; p.description { text-align: center; margin-bottom: 75/1920*100vw; font-size: min(18/1500*100vw, 18px); } .pic_box { width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; } } } @include tab { .content__inner { padding-top: 80/1024*100vw; padding-bottom: 100/1024*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 90/1024*100vw; margin: 0 auto; position: relative; z-index: 0; &::before { position: absolute; content: ""; width: 100%; top: 0; left: 50%; transform: translateX(-50%); height: calc(770/910*100%); background: url("../images/common/bg_01.jpg") top center no-repeat; background-size: cover; z-index: -1; } .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 50/1024*100vw; padding-right: 50/1024*100vw; color: #fff; p.description { text-align: center; margin-bottom: 75/1024*100vw; font-size: min(18/1024*100vw, 18px); } .pic_box { width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; } } } } @include sp { .content__inner { padding-top: 80/750*100vw; padding-bottom: 100/750*100vw; } .con_box { width: 100%; max-width: 100%; padding-top: 90/750*100vw; margin: 0 auto; position: relative; z-index: 0; &::before { position: absolute; content: ""; width: 100%; top: 0; left: 50%; transform: translateX(-50%); height: calc(770/910*100%); background: url("../images/common/bg_01.jpg") top center no-repeat; background-size: cover; z-index: -1; } .text_box { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 50/750*100vw; padding-right: 50/750*100vw; color: #fff; p.description { text-align: justify; margin-bottom: 75/750*100vw; font-size: sp_vw(32); padding-left: 50/750*100vw; padding-right: 50/750*100vw; } .pic_box { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } } } } } /*================================================= Charge / Reservation 料金・予約 ==================================================*/ #sec-fee { .content__inner { padding-top: 100/1920*100vw; padding-bottom: 150/1920*100vw; } .content_box { width: 1000px; max-width: 100%; margin-left: auto; margin-right: auto; &:not(:last-of-type) { margin-bottom: 80px; } } @include sp { .content__inner { padding-top: sp_vw(80); padding-bottom: sp_vw(80); } .content_box { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: sp_vw(25); padding-right: sp_vw(25); font-feature-settings: "palt"; text-align: justify; &:not(:last-of-type) { margin-bottom: sp_vw(50); } } } } /*================================================= Access アクセス・周辺 ==================================================*/ #sec-map { .content__inner { padding-top: 100px; padding-bottom: 100px; } .access-map { width: 1300px; max-width: 100%; margin: 0 auto; position: relative; .gmap { position: relative; width: 100%; max-width: 100%; height: 600/1920*100vw; margin: 0 auto; z-index: 0; overflow: hidden; iframe { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; display: block; } } .map-info { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 90/1920*100vw auto; .pic { width: 300px; max-width: 300/1920*100vw; margin: 0 25/1920*100vw 50/1920*100vw; } .text_box { margin: 0 25/1920*100vw; color: #fff; .logo { width: 220px; max-width: 220/1920*100vw; margin: 0 25/1920*100vw; } p { font-size: min(20/1500*100vw, 20px); line-height: 1.5; &.name { margin: 1em 0; } } } } } .access-root { width: 1100px; max-width: 100%; margin: 0 auto; padding-right: 100/1920*100vw; padding-left: 100/1920*100vw; .root_box { margin-bottom: 70/1920*100vw; color: #fff; } } .access-microbus { width: 1000px; max-width: 100%; margin: 0 auto; background: rgba(21, 21, 21, 0.2); border: 1px solid #fff; padding: 45/1920*100vw 20/1920*100vw 20/1920*100vw; text-align: center; color: #fff; } @include tab { padding-left: 50/1024*100vw; padding-right: 50/1024*100vw; .access-map { width: 100%; max-width: 100%; .gmap { position: relative; width: 100%; max-width: 100%; height: 600/1920*100vw; margin: 0 auto; z-index: 0; overflow: hidden; iframe { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; display: block; } } .map-info { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 90/1024*100vw auto; .pic { width: 300px; max-width: 300/1024*100vw; margin: 0 25/1024*100vw 50/1024*100vw; } .text_box { margin: 0 25/1024*100vw; color: #fff; .logo { width: 220px; max-width: 220/1024*100vw; margin: 0 25/1024*100vw; } p { font-size: min(20/1024*100vw, 20px); line-height: 1.5; &.name { margin: 1em 0; } } } } } } @include sp { padding-left: 0; padding-right: 0; .content__inner { padding-top: sp_vw(80); padding-bottom: sp_vw(80); } .access-map { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; margin-top: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; position: relative; .gmap { position: relative; width: 100%; max-width: 100%; height: 400/750*100vw; margin: 0 auto; z-index: 0; overflow: hidden; iframe { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; display: block; } } .map-info { position: relative; width: 100%; margin: 0; padding: sp_vw(70) sp_vw(25) sp_vw(70) sp_vw(25); .text_box { margin: 0 auto; text-align: center; .logo { width: sp_vw(220); margin: 0 auto sp_vw(35); } p { font-size: sp_vw(30); } } } } .access-root { width: 100%; max-width: 100%; margin: 0 auto; padding-right: 50/750*100vw; padding-left: 100/750*100vw; .root_box { margin-bottom: 70/750*100vw; color: #fff; p { margin-bottom: 0.5em; } } } .access-microbus { width: sp_vw(650); max-width: 650/750*100%; margin: 0 auto; background: rgba(21, 21, 21, 0.2); border: 1px solid #fff; padding: 45/750*100vw 50/750*100vw 25/750*100vw; text-align: left; color: #fff; } } } #sec-sightseeing { padding-left: 100/1920*100vw; padding-right: 100/1920*100vw; .content__inner { padding-top: 100/1920*100vw; padding-bottom: 100/1920*100vw; } .col2-box { width: 1300px; max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; .inbox_item { width: 600px; max-width: 600/1300*100%; .pic { width: 100%; } .text_box { padding: 40/1920*100vw 0; .ttl_box { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.5em; h4 { font-size: min(30/1500*100vw, 30px); } p.time { font-size: min(18/1500*100vw, 18px); display: inline-block; padding: 0 0.5em; color: #fff; background: #6c272d; border-radius: 10px; margin-left: 1em; } } p.description { font-size: min(18/1500*100vw, 18px); margin-bottom: 1em } .btn_detail { a { color: #63613a; &::before { background: #63613a; } } } } } } @include tab { padding-left: 50/1024*100vw; padding-right: 50/1024*100vw; .content__inner { padding-top: 100/1024*100vw; padding-bottom: 100/1024*100vw; } .col2-box { width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; .inbox_item { width: 600px; max-width: 437/924*100%; .pic { width: 100%; } .text_box { padding: 40/1024*100vw 0; .ttl_box { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0.5em; h4 { font-size: min(26/1024*100vw, 30px); } p.time { font-size: min(16/1024*100vw, 18px); display: inline-block; padding: 0 0.5em; color: #fff; background: #6c272d; border-radius: 10/1024*100vw; margin-left: 1em; } } p.description { font-size: min(18/1024*100vw, 18px); margin-bottom: 1em } .btn_detail { a { color: #63613a; &::before { background: #63613a; } } } } } } } @include sp { padding-left: sp_vw(50); padding-right: sp_vw(50); .content__inner { padding-top: sp_vw(80); padding-bottom: sp_vw(80); } .col2-box { width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; .inbox_item { width: 600px; max-width: 100%; margin-left: auto; margin-right: auto; .pic { width: 100%; text-align: center; } .text_box { padding: 40/750*100vw 0; .ttl_box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1em; h4 { font-size: sp_vw(36); } p.time { font-size: sp_vw(28); display: inline-block; padding: 0 0.5em; color: #fff; background: #6c272d; border-radius: 10/750*100vw; margin-left: 1em; } } p.description { font-size: sp_vw(32); margin-bottom: 1em } .btn_detail { a { color: #63613a; &::before { background: #63613a; } } } } } } } } /*===================================================== アニメーション ======================================================*/ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .zoom { overflow: hidden; } .zoom img { transform: scale(1); transition: all 1s ease-out; } .zoom:hover img { transform: scale(1.02); transition: all 1s ease-out; }