@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; vertical-align: bottom; } table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --font-main: "hiragino-mincho-pron", sans-serif; --font-jp: "Zen Kaku Gothic New", serif; --font-en: "roma", sans-serif; --font-title: "adobe-caslon-pro", serif; --color-base: #2A2925; --color-main: #A69979; --color-white: #fff; --media-query: 768px; --transition-duration: 2s; } html { font-size: 62.5%; } @media (width < 768px) { html { font-size: 2.4154589372vw; } } body { background: #F1EADC; color: var(--color-base); font-family: var(--font-main); font-size: 1.5rem; letter-spacing: 0; line-height: 2; overflow-x: clip; } body.is-fixed { overflow-y: hidden; } html, body { margin: 0; padding: 0; height: 100%; /* overflow: hidden; */ } html, body.unlock-scroll { overflow: auto !important; /* JSで解除 */ } img { width: 100%; height: auto; object-fit: cover; } .door-mask { position: fixed; top: 100px; /* ← 100pxにするとズレる */ left: 0; width: 100vw; height: 100vh; z-index: 10; background: transparent; /* background: url(../images/fv_sp.png) center center / cover no-repeat; */ display: flex; align-items: center; justify-content: center; pointer-events: none; /* ← 拡大中もマウスイベントを通す */ } .door-mask img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; } .l-main { opacity: 1; /* 最初から表示しておく（背景と揃えるため） */ } .js-fadeInItem { opacity: 0; transition: 1.5s ease-in-out; } .js-fadeInItem.is-active { opacity: 1; } h1 { position: relative; width: 58px; z-index: 100; } @media (width > 768px) { h1 { width: 110px; } /* .l-main { max-width: 1280px; margin: 0 auto; } */ } .l-wrapper { padding-top: 100px; } .header_box { position: fixed; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 33px; height: 100px; z-index: 100; ; } /* ・-・・・・--・・-・・ --- ハンバーガーメニュー・-・・・・--・・-・・ --- */ .p-hamburger_menu { position: relative; width: 29px; height: 24px; z-index: 100; } .p-hamburger_menu div { position: absolute; width: 29px; height: 2px; background: #2A2925; transition: all 0.3s ease; left: 0; } .p-hamburger_top, .p-hamburger_middle, .p-hamburger_bottom { height: 1px; width: 29px; background: #2A2925; } .p-hamburger_middle { position: absolute; top: 9px; } .p-hamburger_bottom { position: absolute; top: 18px; } .p-hamburger_menu.active .p-hamburger_top { transform: rotate(45deg); top: 9px; } .p-hamburger_menu.active .p-hamburger_middle { opacity: 0; } .p-hamburger_menu.active .p-hamburger_bottom { transform: rotate(-45deg); top: 9px; } /* ・-・・・・--・・-・・ --- ナビゲーション・-・・・・--・・-・・ --- */ .g-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 75vh; z-index: 20; background: #FDF8EE; transition: right 0.3s ease; align-content: center; } @media (width > 768px) { .g-nav { width: 30%; height: 100vh; } } /* メニューが開いたとき */ .g-nav.is-open { right: 0; } .nav { padding: 50px 35px; } .p-nav-list { padding: 2%; border-bottom: 1px solid #A69979; } .p-nav-list:nth-last-child(1) { border: none; } .logo_fadein { background: #F1EADC; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; z-index: 999; } .logo_fadein p { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 9999; width: 130px; } /* ・-・・・・--・・-・・ --- fv ・-・・・・--・・-・・ --- */ .p-fv { position: relative; padding-top: 100px; } .p-fv__text { position: absolute; bottom: 7%; left: 11%; width: 60%; } @media (width > 768px) { .p-fv__text { bottom: 43%; left: auto; right: 6%; width: 26%; } } /* ・-・・・・--・・-・・ --- リード部分・-・・・・--・・-・・ --- */ .p-read-section { position: relative; padding: 290px 10% 266px; } @media (width > 768px) { .p-read-section { max-width: 940px; padding: 160px 0 460px; margin: 0 auto; } } .p-read-title { width: 220px; margin-bottom: 30px; } .p-read-sub-title { font-size: 20px; margin-bottom: 30px; } @media (width > 768px) { .p-read-title { width: 420px; margin-bottom: 48px; } .p-read-sub-title { font-size: 30px; } .p-read-sub-title br:first-of-type { display: none; } .p-read-text { font-size: 16px; } } .p-item-read-img { position: absolute; overflow: clip; } .p-item-read-img:nth-of-type(2) { width: 172px; height: 142px; top: 90px; left: 0; border-radius: 0 7px 7px 0; } .p-item-read-img:nth-of-type(3) { width: 139px; height: 204px; top: 25%; right: 0; border-radius: 7px 0 0 7px; z-index: -1; } .p-item-read-img:last-of-type { width: 194px; height: 160px; bottom: 8%; left: 0; border-radius: 0 7px 7px 0; z-index: -1; } @media (width > 768px) { .p-read__textBox { margin: 78px 0 0 620px; } .p-item-read-img:nth-of-type(2), .p-item-read-img:nth-of-type(3), .p-item-read-img:last-of-type { border-radius: 0; } .p-item-read-img:nth-of-type(2) { width: 229px; height: 218px; top: 160px; right: 0; left: auto; } .p-item-read-img:nth-of-type(3) { width: 542px; height: 484px; top: 396px; left: 0; /* left: auto; */ } .p-item-read-img:last-of-type { width: 265px; height: 192px; left: 40%; bottom: 13%; } } /* .p-item-read-img:nth-of-type(2)>img, .p-item-read-img:nth-of-type(3)>img { height: 100%; } */ .p-item-read-img img { height: 110%; } .l-item-menu { position: fixed; bottom: 0; max-width: 1228px; width: 96%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 2%; z-index: 11; visibility: hidden; /* transform: translateY(100%); */ opacity: 0; transition: .5s ease-in-out; } .l-item-menu.is-fixed { opacity: 1; visibility: visible; /* transform: translateY(0); */ pointer-events: auto; } .l-item-menu span { display: none; font-family: var(--font-jp); } @media (width > 768px) { .l-item-menu { width: 92%; } .l-item-menu span { display: inline-block; } } @media (width > 1450px) { .l-item-menu { margin: 0 1.5%; } } .l-item-list { padding: 4px; margin-bottom: 10px; text-align: center; border-radius: 6px; background: #37353D; font-family: var(--font-en); } .l-item-list a { position: relative; display: block; padding: 15px 0; color: #fff; font-size: 12px; border: 1px solid #FFFFFF; border-radius: 6px; } .l-item-list a::after { content: ''; display: block; position: absolute; right: 16px; top: 40%; width: 5px; height: 8px; rotate: 90deg; background: url(../images/next_white.png) center center / cover; } .l-item-container { padding: 3%; margin: 0 2% 50px; background: #FDF8EE; border: 2px solid #2A2925; } .p-item-box { border: 1px solid #2A2925; } .p-item-title-img { margin: 3%; } .p-title__box { border-bottom: 1px solid #2A2925; } .p-item-title { padding-bottom: 26px; text-align: center; line-height: 1em; font-size: 40px; font-weight: 600; color: #75684E; font-family: var(--font-title); letter-spacing: 0.05em; } @media (width > 768px) { .l-item-container { padding: 1%; } .p-title__box { display: flex; justify-content: space-between; align-items: end; flex-direction: row-reverse; text-align-last: left; } .p-item-title { padding-bottom: 70px; margin-left: 60px; line-height: 0.8em; font-size: 80px; } .p-item-title-img { margin: 1%; } #category .p-title__box { flex-direction: row; } #category .p-item-title { margin-right: 60px; } } .p-item-title-jp { letter-spacing: .1rem; font-size: 14px; } .p-slider-area { padding: 5%; } .l-botton-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 0 auto 60px; } @media (width > 768px) { .l-botton-box { width: 80%; max-width: 980px; grid-template-columns: repeat(4, 1fr); margin: 0 0 80px; } } .p-category-botton { padding: 5px; background: #F3F0E6; font-family: var(--font-jp); font-weight: 500; border-bottom: 3px solid transparent; transition: .3s; font-size: 15px; } .p-category-botton.active-tab { color: #a3a099; border-bottom: 3px solid #AB966A; /* ← 下線風の装飾 */ } .swiper_container { position: relative; width: 100%; margin: 0 auto; } .swiper { height: 170vw; } .mySwiper { width: 100%; } .swiper-wrapper { position: relative; } .tab-wrapper .swiper-wrapper::before { content: ''; display: block; position: absolute; left: 0; top: 46%; width: 100%; height: 1px; background: #2A2925; } .swiper-slide { width: 140px; height: 50%; } .swiper-slide img { width: 100%; aspect-ratio: 1/1; } @media (width > 768px) { .swiper { /*height: 65vw;*/ height: 70vw; } } @media (width > 1280px) { .swiper { height: 60vw; } } .p-item-name, .p-item-price-jp { font-family: var(--font-jp); } .p-item-price { font-family: var(--font-en); } .p-item-price>span { font-size: 12px; } .p-item-price-jp { font-size: 10px; } .swiper-slide .swiper-slide-active { width: 140px; } .swiper-box { position: relative; } .swiper-pagination { margin: 0 0 25px; } .swiper-pagination-bullet:not(#_) { width: 11px; height: 1px; background: #ccc; opacity: 1; margin: 0 4px; } .swiper-pagination-bullet-active:not(#_) { background: #2A2925; /* アクティブな棒の色 */ } .swiper-fraction-display:not(#_) { margin-top: -20px; /* margin-top: 30px; */ text-align: center; font-size: 14px; font-family: var(--font-en); } .swiper_review_container .swiper-fraction-display:not(#_) { color: #fff; } .p-item-name, .p-item-price { font-size: 15px; } .swiper-button-prev, .swiper-button-next { height: 14px; width: 7px; } /* 矢印スタイル上書きのため詳細度アゲ */ .swiper_container .swiper-box .swiper-button-prev::after, .swiper_container .swiper-box .swiper-button-next::after { content: ''; position: absolute; top: -15px; height: 14px; margin: auto; width: 7px; } .swiper_container .swiper-box .swiper-button-prev::after { background: url(../images/prev_black.png) center center / cover no-repeat; } .swiper_container .swiper-box .swiper-button-next::after { background: url(../images/next_black.png) center center / cover no-repeat; } .tab-wrapper { position: relative; min-height: 1px; /* 高さがゼロになると重なりません */ } .tab-content { opacity: 0; visibility: hidden; transition: 0.4s ease-in-out; height: 0; /* display: none; */ } .tab-content.active-content { opacity: 1; visibility: visible; height: auto; /* display: block; */ } .p-category-botton.active-tab { font-weight: bold; text-decoration: underline; } @media (width > 768px) { .p-item-name { margin-bottom: 26px; } .p-item-name, .p-item-price { width: auto; } .p-item-section, .ranking { max-width: 1280px; margin: 0 auto; } .p-decoration-section .swiper-fraction-display:not(#_), .p-wrapping__section .swiper-fraction-display:not(#_), .p-item-section .swiper-fraction-display:not(#_), .ranking .swiper-fraction-display:not(#_), .p-review__area .swiper-fraction-display:not(#_) { display: none; } .swiper_container .swiper-box .swiper-button-prev::after, .swiper_container .swiper-box .swiper-button-next::after { top: -28px; } .swiper_container .swiper-box .swiper-button-prev::after { right: -20vw; } .swiper_container .swiper-box .swiper-button-next::after { left: -20vw; } } /* ・-・・・・--・・-・・ --- デコレーションアイテムスタイル・-・・・・--・・-・・ --- */ .p-decoration-section { padding: 78px 2%; color: #fff; background: #75684E; } .title { text-align: center; } .title_decoration { position: relative; display: grid; justify-content: center; grid-template-columns: 10px auto 10px; gap: 12px; font-size: 28px; font-family: var(--font-title); font-weight: 600; line-height: 1.2em; letter-spacing: .05em; } .title_decoration::before, .title_decoration::after { content: ''; display: block; width: 10px; height: 10px; margin-top: 5px; background: url(../images/star_white.png) center center / cover no-repeat; } .p-wrapping__section .title_decoration::before, .p-wrapping__section .title_decoration::after, .p-movie-area .title_decoration::before, .p-movie-area .title_decoration::after { content: ''; display: block; width: 10px; height: 10px; margin-top: 5px; background: url(../images/star_beige.png) center center / cover no-repeat; } .title span { font-size: 11px; font-family: var(--font-main); } @media (width > 768px) { .p-decoration-section .decoSwiper { height: 25vw; } .title_decoration { font-size: 50px; } .title_decoration::before, .title_decoration::after, .p-wrapping__section .title_decoration::before, .p-wrapping__section .title_decoration::after { margin-top: 15px; } .title span { font-size: 14px; } } .p-decoration-title { margin-bottom: 80px; } .p-decoration-title::before { left: 25%; bottom: 28%; } .p-decoration-title::after { right: 25%; bottom: 28%; } .decoSwiper { height: 90vw; } .decoSwiper .swiper-slide { width: 150px; /* お好みで。2枚ちょうど入るサイズ + α に */ height: 250px; } /* 矢印スタイル上書きのため詳細度アゲ */ .decoSwiper .swiper-button-prev::after, .decoSwiper .swiper-button-next::after, .reviewSwiper .swiper-button-prev::after, .reviewSwiper .swiper-button-next::after { content: ''; position: absolute; top: -15px; height: 14px; width: 7px; } .decoSwiper .swiper-button-prev::after, .reviewSwiper .swiper-button-prev::after { background: url(../images/prev_white.png) center center / cover no-repeat; } .decoSwiper .swiper-button-next::after, .reviewSwiper .swiper-button-next::after { background: url(../images/next_white.png) center center / cover no-repeat; } @media (width > 768px) { .p-decoration-title::before { left: 42%; bottom: 23%; } .p-decoration-title::after { right: 42%; bottom: 23%; } .decoSwiper { width: 1000px; height: 30vw; } .decoSwiper .swiper-slide { width: 250px; /* お好みで。2枚ちょうど入るサイズ + α に */ height: 250px; } .reviewSwiper .swiper-button-prev::after { top: -28px; left: 35vw; } .reviewSwiper .swiper-button-next::after { top: -28px; right: 35vw; } } /* ・-・・・・--・・-・・ --- ラッピングセクション・-・・・・--・・-・・ --- */ .p-wrapping__section { padding: 80px 5%; } .p-wrapping__title { color: #75684E; margin-bottom: 60px; line-height: 1em; } /* .p-wrapping__title::before, .p-wrapping__title::after { content: ''; display: block; position: absolute; bottom: 25%; width: 10px; height: 10px; background: url(../images/star_beige.png) center center / cover no-repeat; } */ .p-wrapping__title::before { left: 22%; } .p-wrapping__title::after { right: 22%; } .p-wrapping__read { margin: 0 0 30px 4%; font-size: 20px; } .p-wrapping__text { margin: 0 0 60px 4%; } #wrapping .p-wrapping__text:nth-of-type(2) { margin: 0 0 0 4%; } .p-wrapping__img { max-width: 310px; padding: 10px; margin: 0 auto 30px; border: 3px solid #2A2925; align-content: center; } .p-wrapping__img:nth-child(3) { margin-bottom: 60px; } .p-wrapping__img img { min-width: 287px; padding: 10% 38px; border: 1px solid #2A2925; } .p-wrapping-link { position: relative; width: 65%; padding-bottom: 8px; margin-left: auto; border-bottom: 1px solid #2A2925; } .p-wrapping-link a::after { content: ''; position: absolute; right: 0; top: 10px; display: block; width: 5px; height: 8px; background: url(../images/next_black.png) center center / cover no-repeat; } @media (width > 768px) { .p-wrapping__section { max-width: 1000px; margin: 0 auto; padding: 120px 0; text-align: center; } .p-wrapping__title { font-size: 52px; } .p-wrapping__title span { font-size: 16px; } .p-wrapping__title::before { left: 35%; } .p-wrapping__title::after { right: 35%; } .p-wrapping__read { font-size: 22px; } .p-wrapping__read br, .p-wrapping__text br { display: none; } .p-wrapping__text { margin: 0 0 60px 0; font-size: 17px; } #wrapping .p-wrapping__text:nth-of-type(2) { margin: 0; } .l-wrapping__box { margin-bottom: 85px; display: flex; justify-content: center; align-items: center; gap: 30px; } .p-wrapping__img { max-width: 320px; width: 320px; height: 300px; margin: 0; } .p-wrapping__img:nth-child(3) img { padding: 11% 38px; } .p-wrapping__img:nth-child(3) { margin-bottom: 0; } .p-wrapping-link { width: 20%; font-size: 13px; text-align-last: left; } } /* ・-・・・・--・・-・・ --- レビューセクション・-・・・・--・・-・・ --- */ .p-review__area { position: relative; padding: 10px 0; background: #75684E; margin-bottom: 30px; } .p-review__area::before, .p-review__area::after { content: ''; position: absolute; /* left: 0; */ display: block; width: 100%; height: 8px; background-repeat: repeat-x; } .p-review__area::before { top: 10px; background: url(../images/dobble_line_top.png) center center / contain; } .p-review__area::after { bottom: 10px; background: url(../images/dobble_line_bottom.png) center center / contain; } .p-review__title { position: relative; padding: 25px; margin: 8px 15% 0; color: #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; } .swiper_review_container { padding-top: 80px; border-top: 1px solid #fff; } .swiper_review_container .swiper { height: 100vh; width: 95%; margin-bottom: 60px; } .swiper.reviewSwiper { overflow: visible; } .p-review-card { background: #FBFCF4; border-radius: 8px; min-height: 570px; padding: 6px; } .p-review-card__textBox { min-height: 570px; padding: 60px 30px; border: 1px solid #000; border-radius: 8px; align-content: center; } .p-review-card-title { font-size: 16px; margin-bottom: 27px; } .p-review-card-text { font-size: 13px; } .p-review-card-text span { color: var(--color-main); font-size: 14px; font-weight: 600; } @media (width > 768px) { .p-review__area { overflow: hidden; } .p-review__title { padding: 25px; } .swiper_review_container .swiper { margin-bottom: 0; } .swiper_review_container .swiper { min-height: 700px; max-height: 700px; height: 90vh; } .p-review-card { min-height: 526px; } .p-review-card__textBox { /*min-height: 540px;*/ } .p-review-card-text { font-size: 15px; } } /* ・-・・・・--・・-・・ --- ランキングセクション・-・・・・--・・-・・ --- */ /* .ranking .swiper-wrapper { position: relative; } .rank01,.rank02,.rank03 { position: absolute; top: -20px; font-size: 2rem; } .rank01 { color: #907018; } .rank02 { color: #BCBCBC; } .rank03 { color: #904018; } */ @media (width > 768px) { .ranking { margin-bottom: 60px; flex-direction: row; } .ranking .p-item-title { font-size: 80px; margin-right: 180px; font-weight: 600; line-height: 1em; } } /* ・-・・・・--・・-・・ --- movieセクション・-・・・・--・・-・・ --- */ .p-movie-area { padding: 78px 10%; background: #F6F4ED; } .p-movie-title { color: #75684E; } .p-movie-title-jp { font-size: 2rem; color: #2A2925; } .p-movie-title-jp span{ font-size: 2.3rem; color: var(--color-main); /* color: #75684E; */ } .p-movie { aspect-ratio: 480 / 268; } .p-movie video { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; } @media (width > 768px) { .p-movie-title { margin-bottom: 80px; } .p-movie-title-jp { font-size: 2.5rem; } .p-movie-title-jp span{ font-size: 3rem; } .p-movie-title-jp br { display: none; } .p-movie { margin: 0 auto; max-width: 800px; aspect-ratio: 480 / 268; } } /* ・-・・・・--・・-・・ --- footerセクション・-・・・・--・・-・・ --- */ .footer { padding: 60px 10%; color: #fff; text-align: center; background: #75684E; } .p-logo { width: 115px; margin: 0 auto; margin-bottom: 29px; }