@charset "UTF-8"; /*アクセスボタン*/ #top_access + .widget_shop01 { padding-bottom: 200px; } #top_access_btn + .contents_btn01 { overflow: initial; margin-top: -140px; margin-bottom: 70px; } /*非表示に*/ /#mv_outer { display: none; opacity: 0; }*/ /*セクション毎の画面幅_mv*/ .mv_org .mv_org_mp4 { height: 100vh; } .mv_org .mv_org_mp4 video { width: 100%; height: 100%; object-fit: cover; } /*セクション毎の画面幅_bgimg*/ .bg_img01.section_snap { background-image:url(/common/upload_data/hanabusa-unagicom/image/20230608174217.jpg); background-size:cover; background-color: rgba(0,0,0,0.4); background-blend-mode: darken; display: flex; align-items: center; justify-content: center; color: #fff; } /*セクション毎の画面幅_4カラム*/ .column01.section_snap .wrapper_item { display: flex; flex-wrap: wrap; } .column01.section_snap .wrapper_item .inner_item { position: relative; width: 50%; height: 50vh; } .column01.section_snap .wrapper_item .inner_item:nth-of-type(even) { border-left: 1px solid #fff; } .column01.section_snap .wrapper_item .inner_item:nth-of-type(n + 3) { border-top: 1px solid #fff; } .column01.section_snap .wrapper_item .inner_item_img { height: 100%; position: relative; overflow: hidden; transition: 0.8s ease-in-out; } .column01.section_snap .wrapper_item .inner_item_img:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); width: 100%; height: 100%; top: 0; left: 0; } .column01.section_snap .wrapper_item .inner_item a:hover .inner_item_img:after { background: rgba(0,0,0,0); } .column01.section_snap .wrapper_item .inner_item_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease-in-out; } .column01.section_snap .wrapper_item .inner_item a:hover .inner_item_img img { transform: scale(1.05); } .column01.section_snap .wrapper_item .inner_item .inner_item_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; pointer-events: none; } .column01.section_snap .wrapper_item .inner_item .inner_item_txt h3 { writing-mode: vertical-rl; display: inline-block; letter-spacing: 0.3rem !important; margin-bottom: 80px; font-size: 2.2rem!important; color: #fff; } @media screen and (max-width: 600px) { .column01.section_snap .wrapper_item .inner_item .inner_item_txt h3 { letter-spacing: 0.1.5rem !important; margin-bottom: 30px; font-size: 1.8rem!important; } } /*スクロール設定*/ #snap_scroll + .block_html * { box-sizing: border-box!important; } #snap_scroll + .block_html > .content_wrapper { padding: 0!important; } #snap_scroll + .block_html .container { position: relative; height: 100vh; overflow: auto; scroll-snap-type: y mandatory; } .container .section_snap { position: relative; scroll-snap-align: start; width: 100%; height: 100%; overflow: hidden; } /*-----------------------追加---------------------------*/ /*アクセスボタン*/ #top_access + .widget_shop01 { padding-bottom: 200px; } #top_access_btn + .contents_btn01 { overflow: initial; margin-top: -140px; margin-bottom: 70px; } /*非表示に*/ /#mv_outer { display: none; opacity: 0; }*/ /*セクション毎の画面幅_mv*/ .mv_org .mv_org_mp4 { height: 100vh; } .mv_org .mv_org_mp4 video { width: 100%; height: 100%; object-fit: cover; } /*セクション毎の画面幅_bgimg*/ .bg_img01.section_snap { background-image:url(/common/upload_data/hanabusa-unagicom/image/20230608174217.jpg); background-size:cover; background-color: rgba(0,0,0,0.4); background-blend-mode: darken; display: flex; align-items: center; justify-content: center; color: #fff; } /*セクション毎の画面幅_4カラム*/ .column01.section_snap .wrapper_item { display: flex; flex-wrap: wrap; } .column01.section_snap .wrapper_item .inner_item { position: relative; width: 50%; height: 50vh; } .column01.section_snap .wrapper_item .inner_item:nth-of-type(even) { border-left: 1px solid #fff; } .column01.section_snap .wrapper_item .inner_item:nth-of-type(n + 3) { border-top: 1px solid #fff; } .column01.section_snap .wrapper_item .inner_item_img { height: 100%; position: relative; overflow: hidden; transition: 0.8s ease-in-out; } .column01.section_snap .wrapper_item .inner_item_img:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); width: 100%; height: 100%; top: 0; left: 0; } .column01.section_snap .wrapper_item .inner_item a:hover .inner_item_img:after { background: rgba(0,0,0,0); } .column01.section_snap .wrapper_item .inner_item_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease-in-out; } .column01.section_snap .wrapper_item .inner_item a:hover .inner_item_img img { transform: scale(1.05); } .column01.section_snap .wrapper_item .inner_item .inner_item_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; pointer-events: none; } .column01.section_snap .wrapper_item .inner_item .inner_item_txt h3 { writing-mode: vertical-rl; display: inline-block; letter-spacing: 0.3rem !important; margin-bottom: 80px; font-size: 2.2rem!important; color: #fff; } @media screen and (max-width: 600px) { .column01.section_snap .wrapper_item .inner_item .inner_item_txt h3 { letter-spacing: 0.1.5rem !important; margin-bottom: 30px; font-size: 1.8rem!important; } } /*スクロール設定*/ #snap_scroll + .block_html * { box-sizing: border-box!important; } #snap_scroll + .block_html > .content_wrapper { padding: 0!important; } #snap_scroll + .block_html .container { position: relative; height: 100vh; overflow: auto; scroll-snap-type: y mandatory; } .container .section_snap { position: relative; scroll-snap-align: start; width: 100%; height: 100%; overflow: hidden; } /*------------------TOPページのコピーここまで------------------*/ #lv_outer{ height: 1px; } #lv, #pan{ display: none; } /*店舗パーツの区切り線削除*/ .widget_shop01 dl:nth-of-type(1){ border-top: none; } .widget_shop01 dl{ border-bottom: none; } .widget_shop01 dt{ border-bottom: none; } /*店舗パーツ調整*/ .widget_shop01 .wrapper_item { max-width: calc(1680px - var(--i_padding, 20px) * 2); } .widget_shop01 .map { max-width: 1600px; margin: 0 auto; } @media screen and (min-width: 801px){ .widget_shop01 .wrapper_item{ display: flex; align-items: center; } } /*花紅柳緑*/ #tate+section{ margin-top: -10px; padding-top: 150px; padding-bottom: 130px; } #tate+section .content_wrapper { writing-mode: vertical-rl; margin: 0 auto; width: fit-content; } #tate+section .wrapper_item{ line-height: 3.3; padding-right: 50px; font-family: 'Yuji Syuku', 'Noto Serif JP', "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MS PMincho", serif; } #tate+section .heading.block_header_6 .h::before{ display: none; } #tate+section .heading.block_header_6 .h{ font-size: 5rem !important; position: relative; top: -5rem; left: 1rem; } #tate+section .heading.block_header_6 p { font-size: 2.5rem; padding-right: 10px; } @media screen and (max-width: 900px){ .pc{ display: none; } #tate+section .content_wrapper { writing-mode:inherit; margin: 0 auto; width: auto; } #tate+section .heading.block_header_6 .h::before{ display: block; } #tate+section .wrapper_item{ line-height: 1.9; padding-right: 0px; } #tate+section .heading.block_header_6 p { font-size: 1.85rem; padding-right: 0px; } #tate+section .heading.block_header_6 .h{ font-size: 3.9rem !important; top: 0rem; left: 0rem; } #tate+section{ padding-top: 90px; padding-bottom: 90px } } /*アクセスとブログ見出し*/ #top_access+div .heading.block_header_1 p, .block_news_1 .heading.block_header_1 p{ font-size: 4.3rem!important; letter-spacing: 0.5rem; margin-bottom: -3px; padding-bottom: 10px; } #top_access+div .heading.block_header_1 .h, .block_news_1 .heading.block_header_1 .h{ font-size: 2.4rem; } /*全画面コンテンツ*/ #con01+div, #con02+div, #con03+div, #con04+div, #con05+div, #con06+div{ margin-top: -20px; } #con01+div .inner_item:nth-child(2), #con02+div .inner_item:nth-child(2), #con03+div .inner_item:nth-child(2), #con04+div .inner_item:nth-child(2), #con05+div .inner_item:nth-child(2), #con06+div .inner_item:nth-child(2){ display: none!important; } #con01+div .inner_item > a{ pointer-events: none; } #con01+div .inner_item, #con02+div .inner_item, #con03+div .inner_item, #con04+div .inner_item, #con05+div .inner_item, #con06+div .inner_item{ width: 100%!important; height: 100vh; } #con01+div .inner_item > a:hover .inner_item_img img, #con02+div .inner_item > a:hover .inner_item_img img, #con03+div .inner_item > a:hover .inner_item_img img, #con04+div .inner_item > a:hover .inner_item_img img, #con05+div .inner_item > a:hover .inner_item_img img, #con06+div .inner_item > a:hover .inner_item_img img{ transform: scale(1)!important; } #con01+div .inner_item_txt, #con02+div .inner_item_txt, #con03+div .inner_item_txt, #con04+div .inner_item_txt, #con05+div .inner_item_txt, #con06+div .inner_item_txt, #con01+div .inner_item > a:hover + .inner_item_txt, #con02+div .inner_item > a:hover + .inner_item_txt, #con03+div .inner_item > a:hover + .inner_item_txt, #con04+div .inner_item > a:hover + .inner_item_txt, #con05+div .inner_item > a:hover + .inner_item_txt, #con06+div .inner_item > a:hover + .inner_item_txt{ /*background-color: rgba(0,0,0,0.4)!important;*/ background-color: rgba(0,0,0,0.0)!important; } #con01+div .heading.block_header_4 .h, #con02+div .heading.block_header_4 .h, #con03+div .heading.block_header_4 .h, #con04+div .heading.block_header_4 .h, #con05+div .heading.block_header_4 .h, #con06+div .heading.block_header_4 .h{ font-size: 4.3rem!important; letter-spacing: 0.5rem!important; margin-bottom: -3px; } #con01+div .heading.block_header_4 p, #con02+div .heading.block_header_4 p, #con03+div .heading.block_header_4 p, #con04+div .heading.block_header_4 p, #con05+div .heading.block_header_4 p, #con06+div .heading.block_header_4 p{ font-size: 2.4rem; } /*スクロール矢印*/ .arrow img{ width: 60px; margin-left: -30px; } .arrow{ bottom: 15%; position: absolute; } .arrow a:hover{ opacity: 0.7; } /*アニメーション*/ #con01+div .inner_item .heading, #con02+div .inner_item .heading, #con03+div .inner_item .heading, #con04+div .inner_item .heading, #con05+div .inner_item .heading, #con06+div .inner_item .heading, #con01+div .arrow, #con02+div .arrow, #con03+div .arrow, #con04+div .arrow, #con05+div .arrow, #con06+div .arrow{ opacity: 0; } #con01+div .inner_item .heading.showActive, #con02+div .inner_item .heading.showActive, #con03+div .inner_item .heading.showActive, #con04+div .inner_item .heading.showActive, #con05+div .inner_item .heading.showActive, #con06+div .inner_item .heading.showActive, #con01+div .arrow.showActive, #con02+div .arrow.showActive, #con03+div .arrow.showActive, #con04+div .arrow.showActive, #con05+div .arrow.showActive, #con06+div .arrow.showActive{ animation: fade4 1.5s forwards; animation-delay: 0.5s; } @keyframes fade4 { 0% { transform: translateY(30px); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translateY(0px); opacity: 1; } } @media screen and (max-width: 480px){ #con01+div, #con02+div, #con03+div, #con04+div, #con05+div, #con06+div{ margin-top: 0px; } #con01+div .heading.block_header_4 .h, #con02+div .heading.block_header_4 .h, #con03+div .heading.block_header_4 .h, #con04+div .heading.block_header_4 .h, #con05+div .heading.block_header_4 .h, #con06+div .heading.block_header_4 .h, #top_access+div .heading.block_header_1 p, .block_news_1 .heading.block_header_1 p{ font-size: 2.9rem!important; letter-spacing: 0.2rem!important; } #con01+div .heading.block_header_4 p, #con02+div .heading.block_header_4 p, #con03+div .heading.block_header_4 p, #con04+div .heading.block_header_4 p, #con05+div .heading.block_header_4 p, #con06+div .heading.block_header_4 p, #top_access+div .heading.block_header_1 .h, .block_news_1 .heading.block_header_1 .h{ font-size: 1.85rem; } .arrow img { width: 48px; margin-left: -24px; } #con01+div.composite_box01 .inner_item_img img, #con02+div.composite_box01 .inner_item_img img, #con03+div.composite_box01 .inner_item_img img, #con04+div.composite_box01 .inner_item_img img, #con05+div.composite_box01 .inner_item_img img, #con06+div.composite_box01 .inner_item_img img { object-fit: cover!important; } #con01+div.composite_box01.block_images_7 .inner_item_txt, #con02+div.composite_box01.block_images_7 .inner_item_txt, #con03+div.composite_box01.block_images_7 .inner_item_txt, #con04+div.composite_box01.block_images_7 .inner_item_txt, #con05+div.composite_box01.block_images_7 .inner_item_txt { padding: 80px 10px; } #con06+div.composite_box01.block_images_7 .inner_item_txt { padding: 52px 10px; } #con01+div .inner_item, #con02+div .inner_item, #con03+div .inner_item, #con04+div .inner_item, #con05+div .inner_item, #con06+div .inner_item{ height: 100%; } .composite_box01.block_images_7 .inner_item:nth-of-type(2n-1):nth-last-of-type(2) { margin-bottom: 0px !important; } }