@charset "UTF-8"; /*-----------------font---------------------*/ @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Noto+Sans+JP&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap"); /*-----------------setting---------------------*/ /* ========================================================================== Modern Reset CSS ========================================================================== */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; } body { line-height: 1.5; font-size: 1.6rem; color: #333; width: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } a { color: inherit; text-decoration: none; } img { width: 100%; height: auto; vertical-align: bottom; } ._sp { display: none; } ._pc { display: block; } @media screen and (max-width: 768px) { ._sp { display: block; } ._pc { display: none; } } main { overflow: hidden; } main p { line-height: 1.5; letter-spacing: 0.05em; } body { font-family: "Shippori Mincho", serif; } /* タグにこのクラスがついたら、opnboxを即消去 */ .is-fast-skip .opnbox { display: none !important; } .anime0 { opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: all 0.5s; transition: all 0.5s; } .anime0.scrollin { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } .anime1 { opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition: all 1s; transition: all 1s; } .anime1.scrollin { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .anime2 { opacity: 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); -webkit-transition: all 1.5s; transition: all 1.5s; } .anime2.scrollin { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .anime3 { opacity: 0; -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); -webkit-transition: all 1.8s; transition: all 1.8s; } .anime3.scrollin { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .anime_par { overflow: hidden; } .com_col_wh { text-shadow: 0 0 5px #000; } /* ========================================================================== Mixins (定義エリア) ========================================================================== */ /* ========================================================================== Common Classes (適用エリア) ========================================================================== */ .com_col_wh { color: #fff; } .com_col_blk { color: #000000; } .com_center { position: absolute; inset: 0; margin: auto; } .com_imgBox { position: relative; } .com_imgBox .com_imgNote { position: absolute; font-size: 1rem; inset: auto 5px 5px auto; } .com_imgBox .com_imgNote_l { position: absolute; font-size: 1rem; inset: auto auto 5px 5px; } .com_imgBox .com_imgNote_b { position: absolute; font-size: 1rem; inset: calc(100% + 5px) 5px auto auto; } .com_text { font-size: 1.4rem; font-size: clamp(1.4rem, 3.5vw, 1.6rem); } .com_note { font-size: 1rem; } .com_w800 { width: 95%; max-width: 800px; margin: 0 auto; } .com_w1000 { width: 95%; max-width: 1000px; margin: 0 auto; } .com_w1400 { width: 95%; max-width: 1400px; margin: 0 auto; } .com_flbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .com_notebox { width: 90%; max-width: 1000px; margin: 0 auto; padding: clamp(20px, 6vw, 50px) 0; } .com_note_item { font-size: 1rem; padding-left: 1em; text-indent: -1em; position: relative; } .com_note_item::before { content: "※"; } @font-face { font-family: ""; src: url(../fonts/) format("opentype"); } .eb-garamond { font-family: "EB Garamond", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .noto-sans-jp { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .shippori-mincho { font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; } body { font-family: "Shippori Mincho", serif; font-weight: 500; font-style: normal; } /* ========================================================================== アニメーション共通設定 ========================================================================== */ [class*=anime].scrollin { opacity: 1 !important; -webkit-filter: blur(0) !important; filter: blur(0) !important; -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } [class*=anime].scrollin img { scale: 1; } /* ----------------------------------------------------------- ぼかしフェード ----------------------------------------------------------- */ [class*=anime_blur_] { opacity: 0; -webkit-filter: blur(100px); filter: blur(100px); -webkit-transition: opacity 1s, -webkit-filter 1s; transition: opacity 1s, -webkit-filter 1s; transition: opacity 1s, filter 1s; transition: opacity 1s, filter 1s, -webkit-filter 1s; } .anime_blur_2 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .anime_blur_3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .anime_blur_4 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .anime_blur_5 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .anime_blur_6 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .anime_blur_7 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .anime_blur_8 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } .anime_blur_9 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } .anime_blur_10 { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } /* ----------------------------------------------------------- 下からふわっと表示 ----------------------------------------------------------- */ [class*=anime_fadeUp_] { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1s; transition: all 1s; } .anime_fadeUp_2 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .anime_fadeUp_3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .anime_fadeUp_4 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .anime_fadeUp_5 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .anime_fadeUp_6 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .anime_fadeUp_7 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .anime_fadeUp_8 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } .anime_fadeUp_9 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } .anime_fadeUp_10 { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } /* ----------------------------------------------------------- 透明度変更 ----------------------------------------------------------- */ [class*=anime_fade_] { opacity: 0; -webkit-transition: opacity 1.5s; transition: opacity 1.5s; } .anime_fade_1 { -webkit-transition-delay: 0s; transition-delay: 0s; } .anime_fade_2 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .anime_fade_3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .anime_fade_4 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .anime_fade_5 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .anime_fade_6 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .anime_fade_7 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .anime_fade_8 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } .anime_fade_9 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } .anime_fade_10 { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } /* ----------------------------------------------------------- 画像表示（scale:1.1 → 1） ----------------------------------------------------------- */ [class*=anime_imgScale_] { overflow: hidden; opacity: 0; -webkit-transition: 1s; transition: 1s; } [class*=anime_imgScale_] img { scale: 1.1; -webkit-transition: 1.5s; transition: 1.5s; } .anime_imgScale_1 { -webkit-transition-delay: 0s; transition-delay: 0s; } .anime_imgScale_2 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .anime_imgScale_3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .anime_imgScale_4 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .anime_imgScale_5 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .anime_imgScale_6 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .anime_imgScale_7 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } .anime_imgScale_8 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } .anime_imgScale_9 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } .anime_imgScale_10 { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } header .top_header { width: 100%; padding: 2vw 3vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: -webkit-gradient(linear, left top, left bottom, from(#2A2B2C), to(rgba(42, 43, 44, 0))); background: linear-gradient(180deg, #2A2B2C 0%, rgba(42, 43, 44, 0) 100%); position: fixed; top: 0; left: 0; z-index: 100; opacity: 0; -webkit-animation: header_fade_only 1.5s ease-out 0.3s forwards; animation: header_fade_only 1.5s ease-out 0.3s forwards; } @media screen and (max-width: 768px) { header .top_header { padding: 6vw; } } header .top_header .item._l { max-width: 364px; width: 21vw; position: relative; opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-animation: item_down 2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; animation: item_down 2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; } @media screen and (max-width: 768px) { header .top_header .item._l { width: 58vw; } } header .top_header .item._l a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } header .top_header .item._l img { width: 100%; } header .top_header .item._r { max-width: 500px; width: 32vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { header .top_header .item._r { width: 100%; position: fixed; bottom: 0; left: 0; text-align: center; z-index: 1; } } header .top_header .item._r li { padding: 0.8vw 0; position: relative; opacity: 0; } @media screen and (max-width: 768px) { header .top_header .item._r li { width: 30%; padding: 4.5vw 0 3vw; } } header .top_header .item._r li:nth-child(1) { -webkit-animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; } header .top_header .item._r li:nth-child(2) { -webkit-animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; } header .top_header .item._r li:nth-child(3) { -webkit-animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; animation: menu_slide_pc 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; } @media screen and (max-width: 768px) { header .top_header .item._r li:nth-child(1) { -webkit-animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; } header .top_header .item._r li:nth-child(2) { -webkit-animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; } header .top_header .item._r li:nth-child(3) { -webkit-animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; animation: menu_slide_sp 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; } } @media screen and (max-width: 768px) { header .top_header .item._r li._ol { background: #22617A; } } @media screen and (max-width: 768px) { header .top_header .item._r li._map { background: #D9D9D9; } } header .top_header .item._r li._res { max-width: 285px; padding-left: 4vw; padding-right: 4vw; background: #A79C62; } header .top_header .item._r li._res::after { content: ""; width: 0.5vw; height: 0.8vw; display: block; background: url(../img/common/arrow_w.png) no-repeat center/cover; position: absolute; top: 50%; right: 2vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 768px) { header .top_header .item._r li._res::after { display: none; } } @media screen and (max-width: 768px) { header .top_header .item._r li._res { width: 40%; } } header .top_header .item._r li._res a { background: #fff; opacity: 0; -webkit-transition: 1s; transition: 1s; } header .top_header .item._r li._res a:hover { opacity: 0.3; -webkit-transition: 1s; transition: 1s; } @media screen and (max-width: 768px) { header .top_header .item._r li._res a:hover { opacity: 0; } } header .top_header .item._r li a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } header .top_header .item._r li p { color: #fff; font-size: min(1.1vw, 15px); letter-spacing: 0.1em; } @media screen and (max-width: 768px) { header .top_header .item._r li p { font-size: 4vw; } } @media screen and (max-width: 768px) { header .top_header .item._r li p._map { color: #363636; } } header .top_header .item._r li p.en { font-family: "EB Garamond", serif; font-size: 2.6vw; } header .top_header .item._r li p.en._ol { color: rgba(255, 255, 255, 0.6); } header .top_header .item._r li p.en._map { color: rgba(54, 54, 54, 0.6); } header .top_header .item._r li p.en._res { color: rgba(255, 255, 255, 0.6); } @-webkit-keyframes header_fade_only { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes header_fade_only { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes item_down { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes item_down { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes menu_slide_pc { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes menu_slide_pc { 0% { opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes menu_slide_sp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes menu_slide_sp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } footer .top_footer .tel_box { padding: 4vw 0; background: #D9D9D9; } footer .top_footer .tel_box p { color: #000; font-size: min(1.2vw, 16px); text-align: center; line-height: 1.2; } @media screen and (max-width: 768px) { footer .top_footer .tel_box p { font-size: 4vw; } } footer .top_footer .tel_box p.ttl { width: 35vw; margin: 0 auto; padding-bottom: 1.2vw; border-bottom: 1px solid #AFAFAF; letter-spacing: 0.1em; } @media screen and (max-width: 768px) { footer .top_footer .tel_box p.ttl { width: 90vw; } } footer .top_footer .tel_box .tel { margin: 0 auto; } footer .top_footer .tel_box .tel a { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } footer .top_footer .tel_box .tel a img { width: min(35vw, 455px); margin-bottom: 0.2vw; } @media screen and (max-width: 768px) { footer .top_footer .tel_box .tel a img { width: 85vw; } } footer .top_footer .tel_box .tel a p { font-size: 1rem; font-size: clamp(1rem, 6vw, 6.2rem); } @media screen and (max-width: 768px) { footer .top_footer .tel_box { padding-block: 10% 13%; } footer .top_footer .tel_box .tel { margin: 5px auto 10px; width: 95%; } footer .top_footer .tel_box .tel a p { font-size: 1rem; font-size: clamp(1rem, 9vw, 6.2rem); } footer .top_footer { /*@media screen end*/ } } footer .bottom_footer { width: 100%; padding: 2.5% 0 3%; background: #fff; } footer .bottom_footer .owner_area { width: 90%; max-width: 850px; margin: 0 auto; } footer .bottom_footer .owner_area ul { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -ms-flex-wrap: wrap; flex-wrap: wrap; } footer .bottom_footer .owner_area ul .owner { width: 25%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } footer .bottom_footer .owner_area ul .owner p { font-size: 1.2rem; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } footer .bottom_footer .owner_area ul .owner._01 { max-width: 130px; width: 10vw; margin-top: -1vw; } @media screen and (max-width: 768px) { footer .bottom_footer .owner_area ul .owner._01 { width: 35vw; } } footer .bottom_footer .owner_area ul .owner._02 { max-width: 390px; width: 30vw; } @media screen and (max-width: 768px) { footer .bottom_footer .owner_area ul .owner._02 { width: 90vw; } } footer .bottom_footer .owner_area ul .owner._03 { max-width: 234px; width: 18vw; position: relative; top: -1vw; } @media screen and (max-width: 768px) { footer .bottom_footer .owner_area ul .owner._03 { width: 58vw; top: 0; } } footer .bottom_footer .owner_area ul a { display: inline-block; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media screen and (max-width: 768px) { footer .bottom_footer .owner_area { margin: 10% auto 20%; } footer .bottom_footer .owner_area ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } footer .bottom_footer .owner_area ul .owner { margin: 0 auto 10vw; } footer .bottom_footer .owner_area ul .owner p { margin-left: 10%; } footer .bottom_footer { /*@media screen end*/ } } footer .copy { background-color: #fff; padding: 1rem 0; } footer .copy p { text-align: center; font-size: 1.2rem; } #top .opnbox { width: 100%; height: 100svh; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1000; background-color: #fff; -webkit-animation: finalFadeOut 1.5s cubic-bezier(0.45, 0, 0.55, 1) forwards 9.5s; animation: finalFadeOut 1.5s cubic-bezier(0.45, 0, 0.55, 1) forwards 9.5s; } #top .opnbox .skip-btn { position: absolute; bottom: 30px; right: 30px; z-index: 1100; background: none; border: 1px solid #fff; color: #fff; padding: 6px 20px 8px; font-size: 12px; letter-spacing: 0.1em; cursor: pointer; -webkit-transition: opacity 0.3s, background 0.3s; transition: opacity 0.3s, background 0.3s; outline: none; font-family: "Shippori Mincho", serif; line-height: 1; } #top .opnbox .skip-btn:hover { background: rgba(255, 255, 255, 0.2); } @media screen and (max-width: 768px) { #top .opnbox .skip-btn { bottom: 20px; right: 20px; padding: 6px 15px; } #top .opnbox .skip-btn:hover { background: none; } } #top .opnbox .bgbox { width: 100%; height: 100%; } #top .opnbox .bgbox .bg-parallax { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-animation: bgPanUp 11s ease-out forwards; animation: bgPanUp 11s ease-out forwards; } #top .opnbox .bgbox .bg-parallax._sp { display: none; } @media screen and (max-width: 768px) { #top .opnbox .bgbox .bg-parallax._pc { display: none; } #top .opnbox .bgbox .bg-parallax._sp { display: block; } } #top .opnbox p { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: min(1.8vw, 24px); font-weight: 300; text-align: center; margin: 0; opacity: 0; pointer-events: none; text-shadow: 0 0 15px rgba(0, 0, 0, 0.2); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; } @media screen and (max-width: 768px) { #top .opnbox p { font-size: 4.8vw; } } #top .opnbox p.p01 { -webkit-animation: stylishReveal 3.5s forwards 0.5s; animation: stylishReveal 3.5s forwards 0.5s; } #top .opnbox p.p02 { -webkit-animation: stylishReveal 3.5s forwards 3.7s; animation: stylishReveal 3.5s forwards 3.7s; } #top .opnbox p.p03 { -webkit-animation: stylishRevealLast 4s forwards 6.9s; animation: stylishRevealLast 4s forwards 6.9s; } #top .sec._mv { position: relative; width: 100%; height: 100svh; overflow: hidden; background-color: #000; } @media screen and (max-width: 768px) { #top .sec._mv { height: auto; } } #top .sec._mv .mvbox { width: 100%; height: 100%; } #top .sec._mv .mvbox img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; } #top .sec._mv .mvbox img._01 { -webkit-animation: mv_bg_fade 3s ease-out forwards 10.5s, mv_bg_zoom 15s linear forwards 10.5s; animation: mv_bg_fade 3s ease-out forwards 10.5s, mv_bg_zoom 15s linear forwards 10.5s; } #top .sec._mv .mvbox img._02 { position: absolute; top: 0; left: 0; opacity: 0; -webkit-animation: mv_fade_in 2.5s ease-out 12s forwards; animation: mv_fade_in 2.5s ease-out 12s forwards; } #top .sec._mv .copybox { width: 37vw; position: absolute; top: 52%; left: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); opacity: 0; z-index: 20; -webkit-animation: mv_copy_up 3s cubic-bezier(0.22, 1, 0.36, 1) 13s forwards; animation: mv_copy_up 3s cubic-bezier(0.22, 1, 0.36, 1) 13s forwards; } @media screen and (max-width: 768px) { #top .sec._mv .copybox { width: 58vw; top: 55%; } } #top .sec._mv .copybox img { width: 100%; height: auto; } @-webkit-keyframes bgPanUp { 0% { -webkit-transform: scale(1.2) translateY(4%); transform: scale(1.2) translateY(4%); } 100% { -webkit-transform: scale(1.2) translateY(-4%); transform: scale(1.2) translateY(-4%); } } @keyframes bgPanUp { 0% { -webkit-transform: scale(1.2) translateY(4%); transform: scale(1.2) translateY(4%); } 100% { -webkit-transform: scale(1.2) translateY(-4%); transform: scale(1.2) translateY(-4%); } } @-webkit-keyframes stylishReveal { 0% { opacity: 0; letter-spacing: 0.2em; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } 20% { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 80% { opacity: 1; letter-spacing: 0.5em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 100% { opacity: 0; letter-spacing: 0.6em; -webkit-transform: translate(-50%, -55%); transform: translate(-50%, -55%); } } @keyframes stylishReveal { 0% { opacity: 0; letter-spacing: 0.2em; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } 20% { opacity: 1; -webkit-filter: blur(0); filter: blur(0); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 80% { opacity: 1; letter-spacing: 0.5em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 100% { opacity: 0; letter-spacing: 0.6em; -webkit-transform: translate(-50%, -55%); transform: translate(-50%, -55%); } } @-webkit-keyframes stylishRevealLast { 0% { opacity: 0; letter-spacing: 0.2em; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } 25%, 100% { opacity: 1; -webkit-filter: blur(0); filter: blur(0); letter-spacing: 0.5em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @keyframes stylishRevealLast { 0% { opacity: 0; letter-spacing: 0.2em; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } 25%, 100% { opacity: 1; -webkit-filter: blur(0); filter: blur(0); letter-spacing: 0.5em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @-webkit-keyframes finalFadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes finalFadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } } @-webkit-keyframes mv_bg_fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes mv_bg_fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes mv_bg_zoom { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes mv_bg_zoom { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @-webkit-keyframes mv_fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes mv_fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes mv_copy_up { 0% { opacity: 0; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(0); filter: blur(0); } } @keyframes mv_copy_up { 0% { opacity: 0; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(0); filter: blur(0); } } #top.skip-op .opnbox { opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -webkit-animation: none; animation: none; } #top.skip-op .sec._mv .mvbox img._01 { -webkit-animation: mv_bg_fade 3s ease-out forwards, mv_bg_zoom 15s linear forwards; animation: mv_bg_fade 3s ease-out forwards, mv_bg_zoom 15s linear forwards; } #top.skip-op .sec._mv .mvbox img._02 { -webkit-animation: mv_fade_in 2.5s ease-out forwards 1.5s; animation: mv_fade_in 2.5s ease-out forwards 1.5s; } #top.skip-op .sec._mv .copybox { -webkit-animation: mv_copy_up 3s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards; animation: mv_copy_up 3s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards; } #top.is-fixed { overflow: hidden; height: 100vh; position: fixed; width: 100%; top: 0; left: 0; } #top .sec._main .bgwrap { padding: 4.5vw 0 4vw; background: linear-gradient(87deg, #0E0E0E -0.91%, #374E6D 48.44%, #0E0E0E 100.73%); color: #fff; } @media screen and (max-width: 768px) { #top .sec._main .bgwrap { padding: 7vw 0 9vw; } } #top .sec._main .ul_t { max-width: 1300px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 768px) { #top .sec._main .ul_t { width: 90vw; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #top .sec._main .ul_t p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: min(2vw, 26px); line-height: 1; } @media screen and (max-width: 768px) { #top .sec._main .ul_t p { font-size: 7.2vw; } } #top .sec._main .ul_t .rel { position: relative; } #top .sec._main .ul_t .abs { position: absolute; top: -0.2vw; left: 1vw; font-size: min(0.84vw, 11px); } @media screen and (max-width: 768px) { #top .sec._main .ul_t .abs { left: 4vw; font-size: 2.5vw; } } #top .sec._main .ul_t .num { display: inline-block; position: relative; top: 0.2vw; color: #D1AF78; font-family: "EB Garamond", serif; font-size: min(3.8vw, 50px); line-height: 1; } @media screen and (max-width: 768px) { #top .sec._main .ul_t .num { font-size: 12vw; } } #top .sec._main .ul_t li { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } #top .sec._main .ul_t li:nth-of-type(1) { padding-right: 1.5vw; border-right: 1px solid #fff; } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(1) { margin-bottom: 5vw; padding-right: 0; border: none; } } #top .sec._main .ul_t li:nth-of-type(2) { padding-left: 1.5vw; } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(2) { padding-left: 0; } } #top .sec._main .ul_t li:nth-of-type(3) { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 2.5vw auto 0; } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(3) { margin-top: 4vw; } } #top .sec._main .ul_t li:nth-of-type(3) p { font-size: min(1.8vw, 24px); } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(3) p { font-size: 5.5vw; line-height: 2.2; text-align: center; } } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(3) p span._yak { width: 100%; margin-bottom: 4vw; display: inline-block; border-bottom: 0.5px solid #fff; font-size: 4.5vw; } } #top .sec._main .ul_t li:nth-of-type(3) .abs { top: -0.8vw; font-size: min(1.05vw, 14px); } @media screen and (max-width: 768px) { #top .sec._main .ul_t li:nth-of-type(3) .abs { top: -4vw; font-size: 2.5vw; } } #top .sec._main .ul_b { max-width: 1040px; width: 80vw; margin: 2.2vw auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.4vw; } @media screen and (max-width: 768px) { #top .sec._main .ul_b { width: 85vw; margin-top: 5vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #top .sec._main .ul_b p { font-size: min(1.4vw, 18px); } @media screen and (max-width: 768px) { #top .sec._main .ul_b p { font-size: 3.8vw; letter-spacing: 0.2em; } } #top .sec._main .ul_b li { width: 30%; padding: 0.8vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: #A0865C; position: relative; text-align: center; } @media screen and (max-width: 768px) { #top .sec._main .ul_b li { width: 100%; margin-bottom: 2.5vw; padding: 3vw 0; background: none; } } #top .sec._main .ul_b li:nth-of-type(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media screen and (max-width: 768px) { #top .sec._main .ul_b li:nth-of-type(2) { -webkit-transition-delay: 0; transition-delay: 0; } } #top .sec._main .ul_b li:nth-of-type(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } @media screen and (max-width: 768px) { #top .sec._main .ul_b li:nth-of-type(3) { -webkit-transition-delay: 0; transition-delay: 0; } } #top .sec._main .ul_b li::after { content: ""; width: 98%; height: 85%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #fff; } @media screen and (max-width: 768px) { #top .sec._main .ul_b li::after { width: 105%; height: 100%; border: 0.5px solid #fff; } } #top .actbox { padding: 4.5vw 0; } @media screen and (max-width: 768px) { #top .actbox { padding: 9vw 0; } } #top .actbox h2 { font-size: min(2.5vw, 33PX); letter-spacing: 0.1em; text-align: center; } @media screen and (max-width: 768px) { #top .actbox h2 { font-size: 5.5vw; } } #top .actbox .btn_res { max-width: 416px; width: 32vw; margin: 1.5vw auto 0; padding: 0.6vw 0; background: #A79C62; border: 1px solid #fff; position: relative; text-align: center; -webkit-transition: 1s; transition: 1s; } @media screen and (max-width: 768px) { #top .actbox .btn_res { width: 62vw; margin-top: 2.5vw; padding: 1.5vw 0; } } #top .actbox .btn_res a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; } #top .actbox .btn_res p { position: relative; color: #fff; font-size: min(1.7vw, 23px); letter-spacing: 0.1em; -webkit-transition: 1s; transition: 1s; z-index: 1; } @media screen and (max-width: 768px) { #top .actbox .btn_res p { font-size: 3.2vw; } } #top .actbox .btn_res::before { content: ""; width: 0%; height: 100%; display: block; background: #fff; position: absolute; top: 0; left: 0; z-index: 0; -webkit-transition: 1s; transition: 1s; } #top .actbox .btn_res:hover { border: 1px solid #A79C62; -webkit-transition: 1s; transition: 1s; } #top .actbox .btn_res:hover p { color: #A79C62; -webkit-transition: 1s; transition: 1s; } #top .actbox .btn_res:hover::before { width: 100%; } #top .sec._con { display: -webkit-box; display: -ms-flexbox; display: flex; background: -webkit-gradient(linear, right top, left top, from(#0C1018), color-stop(71.58%, #3F547E)); background: linear-gradient(270deg, #0C1018 0%, #3F547E 71.58%); } @media screen and (max-width: 768px) { #top .sec._con { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #top .sec._con .item._l { width: 53%; } @media screen and (max-width: 768px) { #top .sec._con .item._l { width: 100%; } } #top .sec._con .item._r { width: 47%; padding-top: 11vw; color: #fff; text-align: center; } @media screen and (max-width: 768px) { #top .sec._con .item._r { width: 100%; padding: 9vw 0 12vw; } } #top .sec._con .copybox { width: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #top .sec._con h3 { margin-bottom: 2vw; position: relative; font-size: min(1.8vw, 24px); letter-spacing: 0.35em; line-height: 2.4; } @media screen and (max-width: 768px) { #top .sec._con h3 { margin-bottom: 5vw; font-size: 5.5vw; line-height: 2; } } #top .sec._con h3 span { font-size: 0.8em; } #top .sec._con h3::before { content: ""; width: 88%; height: 1px; background: #fff; display: block; position: absolute; bottom: 2.25em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 768px) { #top .sec._con h3::before { bottom: 1.9em; } } #top .sec._con .p_body { font-size: min(1.1vw, 15px); letter-spacing: 0.1em; line-height: 3.2; } @media screen and (max-width: 768px) { #top .sec._con .p_body { font-size: 3.5vw; line-height: 2.2; } } #top .bgwrap { background: url(../img/top/bg_01.png); background-size: cover; background-position: top; background-repeat: no-repeat; } #top .sec._pos { padding: 7vw 0 17vw; } @media screen and (max-width: 768px) { #top .sec._pos { padding: 12vw 0 1px; } } #top .sec._pos h2 { margin-bottom: 7vw; color: #fff; font-size: min(1.6vw, 21px); letter-spacing: 0.15em; line-height: 2.2; text-align: center; } @media screen and (max-width: 768px) { #top .sec._pos h2 { margin-bottom: 12vw; font-size: 5vw; } } #top .sec._pos .box { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } @media screen and (max-width: 768px) { #top .sec._pos .box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #top .sec._pos .box .item { z-index: 1; } #top .sec._pos .box::before { content: ""; width: 100%; height: 22.5vw; background: url(../img/top/bg_02.png); background-size: cover; background-position: center; background-repeat: no-repeat; display: block; position: absolute; bottom: 4vw; left: 0; z-index: 0; clip-path: inset(0 100% 0 0); -webkit-transition: clip-path 2.5s cubic-bezier(0.5, 1, 0.5, 1); transition: clip-path 2.5s cubic-bezier(0.5, 1, 0.5, 1); } @media screen and (max-width: 768px) { #top .sec._pos .box::before { height: 40vw; bottom: -12vw; } } #top .sec._pos .box.is-animated::before { clip-path: inset(0 0 0 0); } #top .sec._pos .box.is-animated h3 span { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-filter: blur(0); filter: blur(0); } #top .sec._pos .box._tenjin { margin-bottom: 13vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._tenjin { margin-bottom: 60vw; } } #top .sec._pos .box._tenjin .item._l { width: 48%; } @media screen and (max-width: 768px) { #top .sec._pos .box._tenjin .item._l { width: 95%; } } #top .sec._pos .box._tenjin .item._r { width: 52%; padding-top: 10vw; padding-left: 5.5vw; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } @media screen and (max-width: 768px) { #top .sec._pos .box._tenjin .item._r { width: 100%; padding-top: 0; } } #top .sec._pos .box._tenjin .imgboxes { width: 70%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; position: absolute; left: 5vw; bottom: -4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._tenjin .imgboxes { width: 90%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: -42vw; } } #top .sec._pos .box._tenjin .imgboxes ._l { width: 45%; } #top .sec._pos .box._tenjin .imgboxes ._r { width: 49%; } #top .sec._pos .box._yakuin { width: 75%; margin: 0 auto 11vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin { width: 100%; margin-bottom: 25vw; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } #top .sec._pos .box._yakuin .item._l { width: 55%; padding-left: 4.5vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin .item._l { width: 90%; margin-left: 3vw; } } #top .sec._pos .box._yakuin .item._r { width: 45%; margin-left: -4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin .item._r { width: 65%; margin-left: 4.5vw; } } #top .sec._pos .box._yakuin h3 { margin-top: 4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin h3 { margin-top: 2vw; margin-left: -1vw; font-size: 10.5vw; } } #top .sec._pos .box._yakuin .p_body { margin-top: 4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin .p_body { margin-top: 10vw; } } #top .sec._pos .box._yakuin .abs { width: 24%; position: absolute; bottom: -7vw; right: 0vw; z-index: 1; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin .abs { width: 38%; bottom: 34vw; right: 4vw; } } #top .sec._pos .box._yakuin .abs .com_imgNote { font-size: 10px; letter-spacing: 0; position: absolute; right: 3px; bottom: 3px; } #top .sec._pos .box._yakuin::before { width: calc(100% - 4vw); height: 15vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._yakuin::before { height: 40vw; bottom: -10vw; left: 4vw; } } #top .sec._pos .box._hakata { width: 75%; margin: 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; left: 4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata { width: 100%; margin-bottom: 25vw; left: 0; } } #top .sec._pos .box._hakata .item._r { width: 55%; padding-left: 4.5vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata .item._r { width: 90%; } } #top .sec._pos .box._hakata .item._l { width: 45%; margin-left: -4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata .item._l { width: 68%; margin-left: auto; } } #top .sec._pos .box._hakata h3 { margin-top: 4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata h3 { margin-top: 2vw; margin-right: -5vw; font-size: 10.5vw; text-align: right; } } #top .sec._pos .box._hakata .p_body { margin-top: 4vw; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata .p_body { margin-top: 12vw; } } #top .sec._pos .box._hakata .abs { width: 24%; position: absolute; bottom: -7vw; left: -4vw; z-index: 1; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata .abs { width: 37%; bottom: 35vw; left: 4vw; } } #top .sec._pos .box._hakata .abs .com_imgNote { font-size: 10px; letter-spacing: 0; position: absolute; right: 3px; bottom: 3px; } #top .sec._pos .box._hakata::before { width: calc(100% - 4vw); height: 15vw; margin-left: auto; } @media screen and (max-width: 768px) { #top .sec._pos .box._hakata::before { height: 40vw; bottom: -10vw; } } #top .sec._pos h3 { color: #22617A; font-family: "EB Garamond", serif; font-size: min(4.2vw, 55px); letter-spacing: 0.09em; } @media screen and (max-width: 768px) { #top .sec._pos h3 { font-size: 14vw; } } #top .sec._pos h3 span { display: inline-block; opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); -webkit-transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), filter 1.5s ease, -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; } #top .sec._pos .p_body { margin-top: 6vw; color: #fff; font-size: min(1.1vw, 15px); letter-spacing: 0.1em; line-height: 2.2; } @media screen and (max-width: 768px) { #top .sec._pos .p_body { margin-top: 8vw; font-size: 3.2vw; } } @media screen and (min-width: 1700px) { #top .sec._pos .p_body { margin-top: 6.5vw !important; } #top .sec._pos .p_body._tenjin { margin-top: 9vw !important; } } #top .sec._pos .abs { position: absolute; } #top .sec._pos_b { color: #fff; } #top .sec._pos_b .box { margin-bottom: 8vw; display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) { #top .sec._pos_b .box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #top .sec._pos_b .box .item._l { width: 53%; } @media screen and (max-width: 768px) { #top .sec._pos_b .box .item._l { width: 100%; } } #top .sec._pos_b .box .item._r { width: 47%; padding-top: 14vw; padding-left: 7vw; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) { #top .sec._pos_b .box .item._r { width: 100%; padding-top: 5vw; padding-left: 4.5vw; } } #top .sec._pos_b .box h3 { margin-bottom: 1.5vw; color: #22617A; font-size: min(4.2vw, 55px); } @media screen and (max-width: 768px) { #top .sec._pos_b .box h3 { font-size: 10.5vw; } } #top .sec._pos_b .box h3 span { display: inline-block; opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); -webkit-transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), filter 1.5s ease; transition: opacity 1.5s cubic-bezier(0.36, 1, 0.36, 1), transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), filter 1.5s ease, -webkit-transform 1.5s cubic-bezier(0.36, 1, 0.36, 1), -webkit-filter 1.5s ease; } #top .sec._pos_b .box.is-animated h3 span { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-filter: blur(0); filter: blur(0); } #top .sec._pos_b .box .p_body { font-size: min(1.1vw, 15px); line-height: 2.5; } @media screen and (max-width: 768px) { #top .sec._pos_b .box .p_body { font-size: 3.2vw; } } #top .sec._pos_b .com_imgBox { color: #000; } #top .sec._pos_b h2 { margin: 7vw 0; font-size: min(1.6vw, 21px); line-height: 2.2; letter-spacing: 0.15em; text-align: center; } @media screen and (max-width: 768px) { #top .sec._pos_b h2 { margin: 12vw 0; font-size: 5vw; } } #top .com_notebox_wrap { background: url(../img/top/bg_04.png); background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; } #top .com_notebox_wrap .com_notebox { padding: 2.5vw 0 7vw; } @media screen and (max-width: 768px) { #top .com_notebox_wrap .com_notebox { padding: 8vw 0 15vw; } } #map { background: #F2F2F2; } #map main { padding-top: 10vw; } @media screen and (max-width: 768px) { #map main { padding-top: 25vw; } } @media print { #map header, #map footer, #map .btn { display: none; } #map { margin: 0; } } #map .ttl_area { padding: 5% 0; } @media screen and (max-width: 768px) { #map .ttl_area { padding-bottom: 8%; } } #map .ttl_area h2 { font-size: min(2.2vw, 29px); text-align: center; } @media screen and (max-width: 768px) { #map .ttl_area h2 { font-size: 6vw; } } #map .ttl_area p { font-size: min(1vw, 13px); letter-spacing: 0; text-align: center; } @media screen and (max-width: 768px) { #map .ttl_area p { font-size: 3vw; } } #map .img_area .imgbox:last-child { margin-top: 10%; } #map .map_wrap { max-width: 725px; width: 90%; margin: 0 auto 10vw; -webkit-box-shadow: 0 0 20px 0 rgba(173, 173, 173, 0.25); box-shadow: 0 0 20px 0 rgba(173, 173, 173, 0.25); } @media screen and (max-width: 768px) { #map .map_wrap { margin-bottom: 20vw; } } #map .btn_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 5% auto 10%; } #map .btn_box .btn { background: -webkit-gradient(linear, left top, right top, from(#2b89c0), color-stop(71%, #2989d8), to(#216eac)); background: linear-gradient(to right, #2b89c0 0%, #2989d8 71%, #216eac 100%); width: 30%; position: relative; -webkit-transition: 0.3s; transition: 0.3s; border: none; color: #fff; text-align: center; position: relative; font-size: 1rem; font-size: clamp(1rem, 3.5vw, 1.5rem); cursor: pointer; padding-block: 1.5%; } #map .btn_box .btn:last-child { margin-left: 5%; } #map .btn_box .btn:hover { opacity: 0.7; } #map .btn_box .btn p { font-family: "Shippori Mincho", serif; } @media screen and (max-width: 768px) { #map .btn_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 5% auto 10%; } #map .btn_box .btn { width: 80%; font-size: 1rem; font-size: clamp(1rem, 4vw, 1.5rem); padding-block: 4%; } #map .btn_box .btn:last-child { margin: 5% auto 0; } #map { /*@media screen end*/ } } #outline { background: #F2F2F2; } #outline main { padding-top: 10vw; } @media screen and (max-width: 768px) { #outline main { padding-top: 25vw; } } @media print { #outline header, #outline footer, #outline .btn { display: none; } #outline { margin: 0; } } #outline .ttl_area { padding: 5% 0; } @media screen and (max-width: 768px) { #outline .ttl_area { padding-bottom: 8%; } } #outline .ttl_area h2 { font-size: min(2.2vw, 29px); text-align: center; } @media screen and (max-width: 768px) { #outline .ttl_area h2 { font-size: 6vw; } } #outline .ttl_area p { font-size: min(1vw, 13px); letter-spacing: 0; text-align: center; } @media screen and (max-width: 768px) { #outline .ttl_area p { font-size: 3vw; } } #outline .outline_wrap { padding-bottom: 5vw; } @media screen and (max-width: 768px) { #outline .outline_wrap { padding-bottom: 12vw; } } #outline .sec_table { max-width: 680px; width: 90%; margin: 0 auto; } #outline .outline_ttl { padding-left: 1vw; border-left: 2px solid #000; font-size: min(1.5vw, 20px); font-weight: 900; line-height: 1; } @media screen and (max-width: 768px) { #outline .outline_ttl { margin-bottom: 6vw; padding-left: 3vw; font-size: 4vw; } } #outline table { width: 100%; margin: 3% auto 12%; } @media screen and (max-width: 768px) { #outline table { margin-bottom: 18%; } } #outline table th, #outline table td { padding: 1.5rem 1em; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: min(1vw, 13px); letter-spacing: 0.1em; line-height: 1.5em; text-align: left; } @media screen and (max-width: 768px) { #outline table th, #outline table td { font-size: 3vw; } } #outline table th { width: 25%; border-bottom: 1px solid #9e9e9e; } @media screen and (max-width: 768px) { #outline table th { background: #000; border: none; color: #fff; } } #outline table td { width: 75%; border-bottom: 1px dotted #9e9e9e; } @media screen and (max-width: 768px) { #outline table td { border: none; } } #outline table td span { font-size: clamp(0px, 2.8vw, 14px); font-size: 1rem; font-size: clamp(1rem, 2.8vw, 1.4rem); } #outline table td.red { color: red; } #outline .notice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; } #outline .notice .p1 { border: 1px solid #000; width: 16%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; font-size: clamp(1rem, 4vw, 1.6rem); } #outline .notice .p2 { width: 82%; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1rem; font-size: clamp(1rem, 2.8vw, 1.4rem); letter-spacing: 0.05em; } #outline .update { margin: 5% auto; } #outline .update p { font-size: 1rem; font-size: clamp(1rem, 3.2vw, 1.6rem); } @media screen and (max-width: 768px) { #outline table th, #outline table td { display: block; width: 100%; } #outline .notice .p1 { width: 100%; padding: 3% 5%; } #outline .notice .p2 { width: 100%; margin-top: 3%; } #outline { /*@media screen end*/ } } #limited { /* パスワード入力画面の装飾例 */ } #limited .page_password { min-height: 60vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #limited .page_password .password_input { padding: 10px 15px; width: 250px; border: 1px solid #ccc; font-size: 1.6rem; } #limited .page_password .password_submit { padding: 10px 30px; background: #333; color: #fff; cursor: pointer; border: none; -webkit-transition: 0.3s; transition: 0.3s; } #limited .page_password .password_submit:hover { opacity: 0.7; } #limited .page_password .error_msg { color: #d9534f; font-weight: bold; } @media screen and (max-width: 768px) { #limited { /*@media screen end*/ } } @media screen and (max-width: 768px) { #limited { /*@media screen end*/ } } @media screen and (max-width: 768px) { #limited { /*@media screen end*/ } } @media screen and (max-width: 768px) { #limited { /*@media screen end*/ } } @media print { #location header, #location footer, #location .btn { display: none; } #location { margin: 0; } } #location .ttl_area { padding: 5% 0; } #location .ttl_area p { text-align: center; font-size: 1rem; font-size: clamp(1rem, 4vw, 1.6rem); } #location .ttl_area .ttl { font-size: 1rem; font-size: clamp(1rem, 13vw, 6rem); } #location .outline_ttl { font-size: 1rem; font-size: clamp(1rem, 3vw, 2.5rem); } #location table { width: 100%; margin: 3% auto 5%; } #location table th, #location table td { text-align: left; letter-spacing: 0.1em; line-height: 1.5em; font-size: 1rem; font-size: clamp(1rem, 3.4vw, 1.6rem); border-bottom: 1px solid #9e9e9e; padding: 1rem; -webkit-box-sizing: border-box; box-sizing: border-box; } #location table th { width: 25%; } #location table td { width: 75%; } #location table td span { font-size: clamp(0px, 2.8vw, 14px); font-size: 1rem; font-size: clamp(1rem, 2.8vw, 1.4rem); } #location .notice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; } #location .notice .p1 { border: 1px solid #000; width: 16%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; font-size: clamp(1rem, 4vw, 1.6rem); } #location .notice .p2 { width: 82%; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1rem; font-size: clamp(1rem, 2.8vw, 1.4rem); letter-spacing: 0.05em; } #location .update { margin: 5% auto; } #location .update p { font-size: 1rem; font-size: clamp(1rem, 3.2vw, 1.6rem); } @media screen and (max-width: 768px) { #location table th, #location table td { display: block; width: 100%; } #location table th { background-color: #e8f5ff; } #location .notice .p1 { width: 100%; padding: 3% 5%; } #location .notice .p2 { width: 100%; margin-top: 3%; } #location { /*@media screen end*/ } } @media screen and (max-width: 768px) { #location { /*@media screen end*/ } } @media screen and (max-width: 768px) { #location { /*@media screen end*/ } } @media screen and (max-width: 768px) { #location { /*@media screen end*/ } } /*# sourceMappingURL=style.css.map */