:root { --text-color:#3f2e2c; --shop-color:#bbaf67; --press-color:#7f517b; --event-color:#4a5e6d; --product-color:#b6677c; } /* WEB FONT */ @font-face { font-family:'Shippori Mincho B1 woff'; src: url('assets/fonts/ShipporiMinchoB1-Regular.woff2') format('woff2'), url('assets/fonts/ShipporiMinchoB1-Regular.woff') format('woff'); font-weight:400; } /* @font-face { font-family:'Shippori Mincho B1 woff'; src: url('assets/fonts/ShipporiMinchoB1-Medium.woff2') format('woff2'), url('assets/fonts/ShipporiMinchoB1-Medium.woff') format('woff'); font-weight:500; } */ @font-face { font-family:'Shippori Mincho B1 woff'; src: url('assets/fonts/ShipporiMinchoB1-SemiBold.woff2') format('woff2'), url('assets/fonts/ShipporiMinchoB1-SemiBold.woff') format('woff'); font-weight:600; } .ffGaramond { font-family: adobe-garamond-pro, serif; } .ffAktiv { font-family: aktiv-grotesk-condensed, sans-serif; } .fwMedium:not(.ffGaramond):not(.ffAktiv) { font-weight:600; } /* BODY */ body { color:#000; } body, button, textarea, input { font-family:'Shippori Mincho B1 woff', serif; } /* H1 */ h1 p.eng { font-size:10px; line-height:1.4em; letter-spacing:0.24em; color:#999; /* margin-bottom:21px; */ } h1 p.jpn { font-size:40px; line-height:1.2em; letter-spacing:0.05em; } @media only screen and (max-width:1217px) { /* 1200px */ h1 p.eng { font-size:calc(10 / 1200 * 1rem); } h1 p.jpn { font-size:calc(40 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ h1 p.eng { font-size:calc(16 / 750 * 100vw); } h1 p.jpn { font-size:calc(48 / 750 * 100vw); line-height:1.5em; letter-spacing:0.1em; } } /* A */ ._blank { display:inline-block; position:relative; } ._blank::before, ._blank::after { content:''; position:absolute; right:-20px; top:11px; width:12px; height:8px; border:1px solid #ddd; background-color:#f9f9f9; } ._blank::after { right:-23px; top:8px; } ._blank.brown::before, ._blank.brown::after { border-color:#927a78; background-color:#f6f3ec; } @media only screen and (max-width:1217px) { /* 1200px */ ._blank::before, ._blank::after { right:calc(-20 / 1200 * 1rem); top:calc(11 / 1200 * 1rem); width:calc(12 / 1200 * 1rem); height:calc(8 / 1200 * 1rem); } ._blank::after { right:calc(-23 / 1200 * 1rem); top:calc(8 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ ._blank::before, ._blank::after { right:calc(-31 / 750 * 100vw); top:calc(24 / 750 * 100vw); width:calc(18 / 750 * 100vw); height:calc(14 / 750 * 100vw); } ._blank::after { right:calc(-35 / 750 * 100vw); top:calc(20 / 750 * 100vw); } } /* 最大幅が固定のコンテナ */ .largeContainer { max-width:1568px; margin:0 auto; } .container { max-width:1120px; margin:0 auto; } .container.w800 { max-width:800px; } @media only screen and (max-width:1697px) { /* 1680px */ .largeContainer { max-width:none; margin:0 calc(56 / 1680 * 1rem); } } @media only screen and (max-width:1217px) { /* 1200px */ .largeContainer { max-width:none; margin:0 calc(40 / 1200 * 1rem); } .container:not(.w800) { max-width:none; margin:0 calc(40 / 1200 * 1rem); } .largeContainer .container:not(.w800) { margin:0; } } @media only screen and (max-width:869px) { /* 852px */ .container.w800 { margin:0 calc(26.666 / 852 * 1rem); } .largeContainer .container: { margin:0; } } @media only screen and (max-width:768px) { /* Mobile */ .largeContainer { margin:0 calc(40 / 750 * 100vw); } .container:not(.w800), .container.w800 { max-width:none; margin:0 calc(40 / 750 * 100vw); } .largeContainer .container { margin:0; } } /* テキストの縦書き指定 */ .verticalText, .orientationText { display:block; margin-left:auto; margin-right:auto; -webkit-font-feature-settings:'pkna'; font-feature-settings:'pkna'; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; -ms-writing-mode:tb-rl; text-align:left; white-space:nowrap; } /* テキストの90度回転 */ .orientationText { text-orientation:sideways; } @media only screen and (max-width:768px) { /* Mobile */ .verticalText.spVerticalOff, .spVerticalOff .orientationText, .orientationText.spVerticalOff { -webkit-font-feature-settings:'palt'; font-feature-settings:'palt'; margin-left:0; margin-right:0; -webkit-writing-mode:horizontal-tb; writing-mode:horizontal-tb; -ms-writing-mode:horizontal-tb; } .verticalTextSp, .orientationTextSp { display:block; margin-left:auto; margin-right:auto; -webkit-font-feature-settings:'pkna'; font-feature-settings:'pkna'; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; -ms-writing-mode:tb-rl; text-align:left; white-space:nowrap; } } /************************************************************** モジュール **************************************************************/ /* アローアイコン(丸形) -------------------------------------------------*/ .modArrowCircle { width:32px; height:32px; border-radius:50%; background-color:#3f2e2c; } .modArrowCircle::before, .modArrowCircle::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:1px; background-color:#fff; transform-origin:right; } .modArrowCircle::before { transform:translateX(-50%) rotate(45deg); } .modArrowCircle::after { transform:translateX(-50%) rotate(-45deg); } .modArrowCircle.transparent { background-color:transparent; border:1px solid #afafaf; } .modArrowCircle.transparent::before, .modArrowCircle.transparent::after { background-color:#3f2e2c; } .modArrowCircle.whiteArrow::before, .modArrowCircle.whiteArrow::after { background-color:#fff; } .modArrowCircle.opacity { border:1px solid #555; background-color:rgba(255,255,255,0.16); } .modArrowCircle.opacity::before, .modArrowCircle.opacity::after { background-color:#555; } .modArrowCircle.white { border:none; background-color:#fff; } .modArrowCircle.white::before, .modArrowCircle.white::after { background-color:#3f2e2c; } .modArrowCircle.left::before, .modArrowCircle.left::after { transform-origin:left; } .modArrowCircle.down::before, .modArrowCircle.down::after { left:50%; top:50%; width:1px; height:6px; transform-origin:bottom; } .modArrowCircle.down::before { transform:translateY(-50%) rotate(45deg); } .modArrowCircle.down::after { transform:translateY(-50%) rotate(-45deg); } @media only screen and (max-width:1217px) { /* 1200px */ .modArrowCircle { width:calc(32 / 1200 * 1rem); height:calc(32 / 1200 * 1rem); } .modArrowCircle::before, .modArrowCircle::after { width:calc(6 / 1200 * 1rem); } .modArrowCircle.down::before, .modArrowCircle.down::after { width:1px; height:calc(6 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modArrowCircle { width:calc(44 / 750 * 100vw); height:calc(44 / 750 * 100vw); } .modArrowCircle::before, .modArrowCircle::after { width:calc(8 / 750 * 100vw); } .modArrowCircle.down::before, .modArrowCircle.down::after { height:calc(8 / 750 * 100vw); } } /* オンラインショップバルーン -------------------------------------------------*/ .modOnlineShopBalloon { position:fixed; left:56px; bottom:56px; width:56px; z-index:5; transition:opacity 0.66s, transform 0.66s; } .modOnlineShopBalloon.hide { opacity:0; transform:translateY(-60px); pointer-events:none; } .modOnlineShopBalloon a { width:100%; height:100%; padding:14px 0; display:block; color:#fff; background-color:rgb(63, 46, 44, 0.9); } .modOnlineShopBalloon a > * { margin:0 auto; } .modOnlineShopBalloon figure { width:36px; height:36px; border-radius:50%; background-color:#fff; } .modOnlineShopBalloon figure img { width:100%; } .modOnlineShopBalloon p.jpn { font-size:16px; line-height:3em; margin-top:10px; letter-spacing:0.16em; } .modOnlineShopBalloon p.eng { font-size:12px; line-height:4em; margin-top:10px; letter-spacing:0.075em; color:#98827f; } @media only screen and (max-width:1217px) { /* 1200px */ .modOnlineShopBalloon { left:calc(40 / 1200 * 1rem); width:calc(56 / 1200 * 1rem); } .modOnlineShopBalloon a { padding:calc(14 / 1200 * 1rem) 0; } .modOnlineShopBalloon figure { width:calc(36 / 1200 * 1rem); height:calc(36 / 1200 * 1rem); } .modOnlineShopBalloon p.jpn { font-size:calc(16 / 1200 * 1rem); margin-top:calc(10 / 1200 * 1rem); } .modOnlineShopBalloon p.eng { font-size:calc(12 / 1200 * 1rem); margin-top:calc(10 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modOnlineShopBalloon { left:0; bottom:0; width:calc(96 / 750 * 100vw); padding:1px; background-color:rgb(63, 46, 44, 0.9); } .modOnlineShopBalloon a { padding:calc(20 / 750 * 100vw) 0; border:1px solid #fff; background-color:transparent; } .modOnlineShopBalloon p.jpn { font-size:calc(24 / 750 * 100vw); margin-top:0; } .modOnlineShopBalloon .modArrowCircle { margin-top:calc(8 / 750 * 100vw); } } /* ロゴ -------------------------------------------------*/ .modLogo { position:absolute; right:56px; top:56px; width:172px; display:block; } @media only screen and (max-width:1217px) { /* 1200px */ .modLogo { width:calc(172 / 1200 * 1rem); right:calc(40 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modLogo { top:calc(40 / 750 * 100vw); width:calc(192 / 750 * 100vw); } } /* 縦書きのお品書き風 (HOME基準) -------------------------------------------------*/ .modVirticalMenu { position:absolute; right:224px; top:56px; -webkit-font-feature-settings:'pkna'; font-feature-settings:'pkna'; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-size:20px; line-height:3.3em; letter-spacing:0.2em; text-align:left; padding-top:10px; } @media only screen and (max-width:1217px) { /* 1200px */ .modVirticalMenu { right:200px; line-height:2.8em; } } @media only screen and (max-width:1017px) { /* 1000px */ } @media only screen and (max-width:768px) { /* Mobile */ .modVirticalMenu.spVerticalOff, .modVerticalMenu .spVirticalOff { -webkit-writing-mode:horizontal-tb; writing-mode:horizontal-tb; -ms-writing-mode:horizontal-tb; } } /* オンラインショップバナー (footer基準) -------------------------------------------------*/ .modOnlineShopBanner { display:inline-block; background-color:#31211f; } .modOnlineShopBanner a { display:flex; flex-direction:column; padding:32px 20px; color:#fff; } .modOnlineShopBanner figure { width:52px; height:52px; border-radius:50%; background-color:#3f2e2c; margin:0 auto; margin-bottom:24px; } .modOnlineShopBanner p { letter-spacing:0.1em; font-size:18px; line-height:1.555em; } .modOnlineShopBanner p.eng { font-size:12px; color:#baa9a6; letter-spacing:0.16em; } .modOnlineShopBanner p.text { font-size:10px; line-height:1.6em; margin-top:44px; letter-spacing:0; } .modOnlineShopBanner .modArrowCircle { margin:28px auto 0; } @media only screen and (max-width:1217px) { /* 1200px */ .modOnlineShopBanner a { padding:calc(32 / 1200 * 1rem) calc(20 / 1200 * 1rem); } .modOnlineShopBanner figure { width:calc(52 / 1200 * 1rem); height:calc(52 / 1200 * 1rem); margin-bottom:calc(24 / 1200 * 1rem); } .modOnlineShopBanner p { letter-spacing:0.1em; font-size:calc(18 / 1200 * 1rem); } .modOnlineShopBanner p.eng { letter-spacing:0.16em; font-size:calc(12 / 1200 * 1rem); white-space:nowrap; } .modOnlineShopBanner p.text { font-size:calc(10 / 1200 * 1rem); line-height:1.6em; margin-top:calc(44 / 1200 * 1rem); } .modOnlineShopBanner .modArrowCircle { margin-top:calc(28 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modOnlineShopBanner { display:block; position:relative; left:auto; top:auto; width:100%; padding:2px; margin:calc(60 / 750 * 100vw) auto 0; } .modOnlineShopBanner a { display:flex; justify-content:space-between; flex-direction:row; border-width:0.5px; padding:calc(32 / 750 * 100vw) calc(30 / 750 * 100vw) calc(32 / 750 * 100vw) calc(60 / 750 * 100vw); border:0.5px solid #927a78; background-color:transparent; } .modOnlineShopBanner p { letter-spacing:0.2em; font-size:calc(36 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); text-align:left; } .modOnlineShopBanner p.shopName { font-size:calc(28 / 750 * 100vw); } .modOnlineShopBanner p.eng { letter-spacing:0.16em; font-size:calc(20 / 750 * 100vw); } .modOnlineShopBanner .modArrowCircle { margin:0; } } /* ショップ情報 (ポップアップメニュー基準) -------------------------------------------------*/ .modShopDetail { text-align:left; } .modShopDetail p { font-size:14px; line-height:2em; letter-spacing:0.16em; } .modShopDetail p.shopName { font-size:24px; } .modShopDetail p.address { margin-top:1.3em; } .modShopDetail p.tel { margin-top:1.3em; } .modShopDetail p.time { font-size:11px; line-height:2.25em; letter-spacing:0.12em; margin-top:1.5em; } @media only screen and (max-width:1217px) { /* 1200px */ .modShopDetail p { font-size:calc(14 / 1200 * 1rem); } .modShopDetail p.shopName { font-size:calc(24 / 1200 * 1rem); } .modShopDetail p.time { font-size:calc(11 / 1200 * 1rem); letter-spacing:0; } } @media only screen and (max-width:768px) { /* Mobile */ .modShopDetail p { font-size:calc(26 / 750 * 100vw); line-height:calc(44 / 750 * 100vw); letter-spacing:0.2em; } } /* フォームバナー (footer基準) -------------------------------------------------*/ .modFormBanners > *~* { margin-top:20px; } .modFormBanners .bannerBox { width:384px; display:flex; justify-content:space-between; } .modFormBanners .bannerBox > * { display:flex; width:184px; } .modFormBanners .bannerBox a { display:flex; width:100%; height:100%; border:1px solid #554543; padding:14px 0; text-align:center; } .modFormBanners .bannerBox p { font-size:13px; line-height:2em; letter-spacing:0.075em; } .modFormBanners .bannerBox p:nth-child(2) { font-size:10px; letter-spacing:0.1em; color:#927a78; } .modFormBanners p.privacy { font-size:14px; line-height:1.3em; letter-spacing:0.16em; } @media only screen and (max-width:1217px) { /* 1200px */ .modFormBanners > *~* { margin-top:calc(20 / 1200 * 1rem); } .modFormBanners .bannerBox { width:calc(384 / 1200 * 1rem); } .modFormBanners .bannerBox > * { width:calc(184 / 1200 * 1rem); } .modFormBanners .bannerBox a { padding:calc(14 / 1200 * 1rem) 0; } .modFormBanners .bannerBox p { font-size:calc(13 / 1200 * 1rem); } .modFormBanners p.privacy { font-size:calc(14 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modFormBanners .bannerBox { width:100%; display:block; } .modFormBanners .bannerBox > * { display:block; width:100%; } .modFormBanners .bannerBox > *~* { margin-top:calc(24 / 750 * 100vw); } .modFormBanners .bannerBox p { font-size:calc(26 / 750 * 100vw); letter-spacing:0.1em; } .modFormBanners .bannerBox p:nth-child(2) { font-size:calc(16 / 750 * 100vw); } } /* SNSバナー (メニュー基準) -------------------------------------------------*/ .modFollowUs { position:absolute; right:56px; bottom:56px; display:flex; flex-direction:column; } .modFollowUs p { font-size:11px; line-height:1.25em; color:#927a78; letter-spacing:0.16em; margin-bottom:16px; } .modFollowUs li~li { margin-top:40px; } .modFollowUs li~li::before { content:''; position:absolute; left:50%; top:-20px; width:22px; height:2px; background-color:#554543; transform:translateX(-50%) rotate(-45deg); } @media only screen and (max-width:1217px) { /* 1200px */ .modFollowUs { bottom:calc(40 / 1200 * 1rem); right:calc(40 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modFollowUs { display:block; width:100%; position:relative; right:auto; bottom:auto; margin-top:calc(80 / 750 * 100vw); } .modFollowUs p {width:100%; text-align:center; } .modFollowUs ul { display:flex; } .modFollowUs li~li { margin-top:0; margin-left:calc(120 / 750 * 100vw); } .modFollowUs li~li::before { left:calc(-67 / 750 * 100vw); top:50%; width:calc(2 / 750 * 100vw); height:calc(40 / 750 * 100vw); transform:translateY(-50%) rotate(30deg); } .modFollowUs li img { width:calc(56 / 750 * 100vw); } } /* MOREボタン -------------------------------------------------*/ .modMore a { display:inline-flex; } .modMore p { font-size:14px; line-height:1; letter-spacing:0.16em; } .modMore .modArrowCircle { margin-left:16px; } .modMore.vertical a { flex-direction:column; } .modMore.vertical .modArrowCircle { margin:16px 0 0; } .modMore.large a { width:640px; height:88px; background-color:var(--text-color); color:#fff; justify-content:center; align-content:center; } .modMore.large p{ font-size:18px; } .modMore.large .modArrowCircle { margin:0 0 0 18px; } @media only screen and (max-width:768px) { /* Mobile */ .modMore.large a { width:calc(590 / 750 * 100vw); height:calc(120 / 750 * 100vw); position:relative; } .modMore.large p { font-size:calc(26 / 750 * 100vw); letter-spacing:0.16em; } .modMore.large .modArrowCircle { position:absolute; right:calc(40 / 750 * 100vw); top:50%; transform:translateY(-50%); margin:0; } } /* INFORMATIONサムネ -------------------------------------------------*/ /* カテゴリ表示 */ .modCatgoryIcon span { display:inline-flex; border:1px solid #f00; padding:5px 8px; font-size:11px; line-height:1; height:24px; letter-spacing:0.1em; } .modCatgoryIcon.shop span { border-color:var(--shop-color); color:var(--shop-color); } .modCatgoryIcon.press span { border-color:var(--press-color); color:var(--press-color); } .modCatgoryIcon.event span { border-color:var(--event-color); color:var(--event-color); } .modCatgoryIcon.product span { border-color:var(--product-color); color:var(--product-color); } @media only screen and (max-width:1217px) { /* 1200px */ .modCatgoryIcon { padding-bottom:calc(5 / 1200 * 1rem); } .modCatgoryIcon span { padding:calc(5 / 1200 * 1rem) calc(8 / 1200 * 1rem); font-size:calc(11 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modCatgoryIcon { width:72px; padding-bottom:10px; } .modCatgoryIcon span { width:72px; height:20px; font-size:10px; line-height:1; } } /* 日付表示 */ .modDate { font-size:14px; line-height:32px; height:32px; width:88px; color:#aaa; letter-spacing:0.05em; } @media only screen and (max-width:1217px) { /* 1200px */ .modDate { font-size:calc(14 / 1200 * 1rem); line-height:calc(32 / 1200 * 1rem); height:calc(32 / 1200 * 1rem); width:calc(88 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .modDate { font-size:11px; line-height:20px; width:auto; height:auto; letter-spacing:0.075em; margin-left:auto; } } /* サムネブロック */ .modInformationThumb a { display:block; } .modInformationThumb article { display:flex; justify-content:flex-start; align-items:flex-start; padding-top:16px; text-align:left; } .modInformationThumb p.title { font-size:14px; line-height:32px; width:calc(100% - 88px); max-height:32px; letter-spacing:0.1em; } .modInformationThumb .modCatgoryIcon { width:100%; margin-bottom:6px; } @media only screen and (max-width:768px) { /* Mobile */ .modInformationThumb article { padding-top:12px; } .modInformationThumb p.title { font-size:13px; line-height:20px; width:100%; max-height:40px; letter-spacing:0.12em; } .modInformationThumb .modCatgoryIcon { width:auto; margin-bottom:0; } } /* 下層のヘッダー -------------------------------------------------*/ .modLowerHeader { height:480px; background:url(/assets/img/common/header-bg.svg) center top, #f3f3f3; background-size:480px 480px; } .modLowerHeader.LPFullHeight .largeContainer { height:100%; } .modLowerHeader .container { display:flex; justify-content:space-between; align-content:flex-start; padding-top:276px; text-align:left; } .modLowerHeader .title .modCatgoryIcon { position:absolute; left:2px; top:-49px; } .modLowerHeader .title h1 { text-align:left; margin-left:-0.1em; } .modLowerHeader .title h1 p.eng { position:absolute; left:0; top:-35px; } .modLowerHeader .title h1.verticalText p.eng { right:-22px; top:5px; } .modLowerHeader .title .modDate { position:absolute; left:2px; bottom:-36px; } .modLowerHeader ul.menu { display:flex; font-size:16px; line-height:40px; color:var(--text-color); } .modLowerHeader ul.menu li~li::before { content:''; position:absolute; left:0; top:50%; width:1px; height:14px; background-color:#ccc; transform:translateY(-50%); } .modLowerHeader ul.menu li > * { display:block; padding:0 40px; letter-spacing:0.1em; } .modLowerHeader ul.menu li span { padding:20px 0; } .modLowerHeader ul.menu li.on span { border-bottom:1px solid var(--text-color); } .modLowerHeader ul.menu li.shop.on span { border-color:var(--shop-color); color:var(--shop-color); } .modLowerHeader ul.menu li.press.on span { border-color:var(--press-color); color:var(--press-color); } .modLowerHeader ul.menu li.event.on span { border-color:var(--event-color); color:var(--event-color); } .modLowerHeader ul.menu li.product.on span { border-color:var(--product-color); color:var(--product-color); } .modLowerHeader figure.kv { position:absolute; left:0; top:0; width:100%; height:100%; padding:0; } @media only screen and (max-width:1217px) { /* 1200px */ .modLowerHeader { height:calc(480 / 1200 * 1rem); background-size:calc(480 / 1200 * 1rem) calc(480 / 1200 * 1rem); } .modLowerHeader .container { padding-top:calc(276 / 1200 * 1rem); } .modLowerHeader .title .modCatgoryIcon { position:absolute; left:calc(2 / 1200 * 1rem); top:calc(-49 / 1200 * 1rem); } .modLowerHeader .title h1 p.eng { top:calc(-37 / 1200 * 1rem); } .modLowerHeader .title h1.verticalText p.eng { right:calc(-22 / 1200 * 1rem); top:calc(5 / 1200 * 1rem); } .modLowerHeader .title .modDate { left:calc(2 / 1200 * 1rem); bottom:calc(-36 / 1200 * 1rem); } .modLowerHeader ul.menu { font-size:calc(16 / 1200 * 1rem); line-height:calc(40 / 1200 * 1rem); } .modLowerHeader ul.menu li~li::before { height:calc(14 / 1200 * 1rem); } .modLowerHeader ul.menu li > * { padding:0 calc(40 / 1200 * 1rem); } .modLowerHeader ul.menu li span { padding:calc(20 / 1200 * 1rem) 0; } } @media only screen and (max-width:768px) { /* Mobile */ .modLowerHeader { height:auto; min-height:calc(500 / 750 * 100vw); padding-bottom:calc(120 / 750 * 100vw); background-size:calc(480 / 750 * 100vw) calc(480 / 750 * 100vw); } .modLowerHeader .container { padding-top:calc(310 / 750 * 100vw); } .modLowerHeader .title h1 { padding-left:calc(40 / 750 * 100vw); } .modLowerHeader .title h1 p.eng { top:calc(-50 / 750 * 100vw); padding-left:calc(40 / 750 * 100vw); } .modLowerHeader .title .modCatgoryIcon { left:calc(42 / 750 * 100vw); top:calc(-64 / 750 * 100vw); } .modLowerHeader .title .modDate { left:calc(42 / 750 * 100vw); bottom:calc(-48 / 750 * 100vw); } } /* WordPress記事 -------------------------------------------------*/ .modWPArticle .content { text-align:left; max-width:720px; padding-top:120px; font-size:16px; line-height:36px; letter-spacing:0.1em; } .modWPArticle .content > *:first-child { margin-top:0; } .modWPArticle .content p { margin:1em 0; } .modWPArticle .content figure { margin:2em 0; max-width:100%; } .modWPArticle .content figure img { width:100%; } /* パンくず -------------------------------------------------*/ .modBreadCrumb { font-size:13px; line-height:2.5em; text-align:left; color:#999; letter-spacing:0.1em; padding-top:160px; } .modBreadCrumb li { display:inline-block; } .modBreadCrumb li~li { margin-left:3em; } .modBreadCrumb li~li::before { content:''; position:absolute; left:-1.5em; top:50%; transform:translateY(-50%); width:2px; height:14px; background-color:#bbb; } .modBreadCrumb li a { color:#000; } .modBreadCrumb+footer { padding-top:40px; } @media only screen and (max-width:768px) { /* Mobile */ .modBreadCrumb { font-size:calc(24 / 750 * 100vw); padding-top:calc(160 / 750 * 100vw); } } /* 戻るボタン -------------------------------------------------*/ .modBack > * { display:flex; font-size:16px; line-height:1; color:var(--text-color); letter-spacing:0.1em; } .modBack .modArrowCircle { margin-right:0.75em; } /* ローディング -------------------------------------------------*/ .LPTopLoading { background-color:#f6f3ec; z-index:10000; transition:opacity 2s; } .LPTopLoading svg { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100px; opacity:0; transition:opacity 1.5s; } .LPTopLoading.on svg { opacity:1; } .LPTopLoading.on.off { opacity:0; } .LPTopLoading.on.off svg { opacity:0; transition-delay:0s; } .LPLoadAfterVisible .hasLoading { transition-delay:2s; } @media only screen and (max-width:1217px) { /* 1200px */ .LPTopLoading svg { width:calc(100 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .LPTopLoading svg { width:calc(148 / 750 * 100vw); } } /************************************************************** ページ共通部 (ヘッダーやフッター等) **************************************************************/ /* ハンバーガーメニュー -------------------------------------------------*/ .LPMobileMenuButton { display:block; left:56px; top:56px; right:auto; width:56px; height:auto; padding-top:20px; } .LPMobileMenuButton i, .LPMobileMenuButton i::before, .LPMobileMenuButton i::after { background-color:#fff; width:100%; height:2px; transform:none; } .LPMobileMenuButton i { left:0px; top:9px; } .LPMobileMenuButton i::before { left:0px; top:-9px; } .LPMobileMenuButton i::after { left:0px; top:9px; } .LPMobileMenuButton p { display:inline-block; margin-top:12px; font-size:11px; line-height:14px; letter-spacing:0.16em; white-space:nowrap; text-align:left; transition:none; color:#fff; } .LPMobileMenuButton p.close { display:none; } .LPMobileMenuOpened .LPMobileMenuButton i::before { top:0; transform:rotate(12.5deg); } .LPMobileMenuOpened .LPMobileMenuButton i::after { top:0; transform:rotate(-12.5deg); } .LPMobileMenuOpened .LPMobileMenuButton p.open { display:none; } .LPMobileMenuOpened .LPMobileMenuButton p.close { display:inline-block; } .LPMobileMenuButton.brown i, .LPMobileMenuButton.brown i::before, .LPMobileMenuButton.brown i::after { background-color:#3f2e2c; } .LPMobileMenuButton.brown p { color:#3f2e2c; } .LPMobileMenuOpened .LPMobileMenuButton i { background-color:transparent; } .LPMobileMenuOpened .LPMobileMenuButton i::before, .LPMobileMenuOpened .LPMobileMenuButton i::after { background-color:#3f2e2c; } .LPMobileMenuOpened .LPMobileMenuButton p { color:#3f2e2c; } @media only screen and (min-width:769px) { /* PC HOVER */ .LPMobileMenuOpened .LPMobileMenuButton:hover i::before { top:0; transform:rotate(45deg); } .LPMobileMenuOpened .LPMobileMenuButton:hover i::after { top:0; transform:rotate(-45deg); } } @media only screen and (max-width:768px) { /* Mobile */ .LPMobileMenuButton { display:block; left:20px; top:20px; right:auto; width:40px; padding-top:14px; } .LPMobileMenuButton i { left:2px; } .LPMobileMenuButton i, .LPMobileMenuButton i::before, .LPMobileMenuButton i::after { width:36px; height:1px; } .LPMobileMenuButton i::before { left:0px; top:-6px; } .LPMobileMenuButton i::after { left:0px; top:6px; } } /* ポップアップメニュー -------------------------------------------------*/ .LPMobileMenu { background-color:#f6f3ec; padding:0; } .LPMobileMenu::-webkit-scrollbar { display:none; } .LPMobileMenu .largeContainer { min-height:780px; height:100%; } .LPMobileMenu .container { min-height:780px; height:100%; color:var(--text-color); } .LPMobileMenu .modVirticalMenu { position:absolute; right:348px; top:180px; font-size:24px; line-height:2em; padding:0; z-index:1; } .LPMobileMenu .modVirticalMenu > li~li { margin-right:36px; } .LPMobileMenu .modVirticalMenu > li > ul { margin-top:24px; } .LPMobileMenu .modVirticalMenu > li > ul > li { font-size:18px; padding-top:28px; margin-right:8px; } .LPMobileMenu .modVirticalMenu > li > ul > li::before { content:''; position:absolute; left:50%; top:0; width:1px; height:10px; background-color:#3f2e2c; } .LPMobileMenu .modOnlineShopBanner { position:absolute; left:0; top:124px; background-color:#3f2e2c; padding:1px; } .LPMobileMenu .modOnlineShopBanner a { border:2px solid #f6f3ec; padding:24px 0; width:126px; } .LPMobileMenu .modOnlineShopBanner a > * { display:block; margin:0; } .LPMobileMenu .modOnlineShopBanner p { line-height:1.6em; } .LPMobileMenu .modOnlineShopBanner p.jpn { font-size:20px; } .LPMobileMenu .modOnlineShopBanner p.eng { line-height:2.2em; } .LPMobileMenu .modOnlineShopBanner .modArrowCircle { margin-top:6px; } .LPMobileMenu .bottomBlock { position:absolute; left:0; bottom:92px; width:100%; display:flex; justify-content:space-between; align-items:flex-end; } .LPMobileMenu .modFormBanners { margin-bottom:7px; padding-right:80px; } @media only screen and (max-width:1517px) { /* 1200px */ .LPMobileMenu .modVirticalMenu { right:calc(292 / 1500 * 1rem); } } @media only screen and (max-width:1217px) { /* 1200px */ .LPMobileMenu .modVirticalMenu { right:calc(234 / 1200 * 1rem); top:calc(180 / 1200 * 1rem);; font-size:calc(24 / 1200 * 1rem); } .LPMobileMenu .modVirticalMenu > li~li { margin-right:calc(36 / 1200 * 1rem);; } .LPMobileMenu .modVirticalMenu > li > ul { margin-top:calc(24 / 1200 * 1rem);; } .LPMobileMenu .modVirticalMenu > li > ul > li { font-size:calc(18 / 1200 * 1rem);; padding-top:calc(28 / 1200 * 1rem);; margin-right:calc(8 / 1200 * 1rem);; } .LPMobileMenu .modVirticalMenu > li > ul > li::before { height:calc(10 / 1200 * 1rem); } .LPMobileMenu .modOnlineShopBanner a { padding:calc(24 / 1200 * 1rem) 0; width:calc(126 / 1200 * 1rem); } .LPMobileMenu .modOnlineShopBanner p.jpn { font-size:calc(20 / 1200 * 1rem); } .LPMobileMenu .modOnlineShopBanner .modArrowCircle { margin-top:calc(6 / 1200 * 1rem); } .LPMobileMenu .bottomBlock { bottom:calc(92 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ .LPMobileMenu .largeContainer { min-height:0; padding-bottom:0; height:auto; } .LPMobileMenu .container { min-height:0; padding:calc(72 / 750 * 100vw) calc(40 / 750 * 100vw) 0; height:auto; margin-top:0; } .LPMobileMenu .modVirticalMenu { position:relative; right:auto; top:auto; font-size:calc(30 / 750 * 100vw); line-height:calc(80 / 750 * 100vw); margin:calc(240 / 750 * 100vw) calc(80 / 750 * 100vw) 0; } .LPMobileMenu .modVirticalMenu > li~li { margin-right:0; margin-top:calc(4 / 750 * 1rem) } .LPMobileMenu .modVirticalMenu > li > ul { margin-top:0; margin-left:calc(16 / 750 * 100vw); } .LPMobileMenu .modVirticalMenu > li > ul > li { font-size:calc(26 / 750 * 100vw); padding-top:0; margin-right:0; padding-left:calc(32 / 750 * 100vw); line-height: calc(64 / 750 * 100vw); } .LPMobileMenu .modVirticalMenu > li > ul > li::before { left:0; top:50%; width:calc(16 / 750 * 100vw); height:1px; } .LPMobileMenu .modOnlineShopBanner { position:relative; left:auto; top:auto; padding:2px; margin:0; } .LPMobileMenu .modOnlineShopBanner a { width:100%; border:0.5px solid #927a78; padding:calc(26 / 750 * 100vw) calc(64 / 750 * 100vw); } .LPMobileMenu .modOnlineShopBanner p.shopName { font-size:calc(28 / 750 * 100vw); } .LPMobileMenu .modOnlineShopBanner p.jpn { font-size:calc(28 / 750 * 100vw); } .LPMobileMenu .modOnlineShopBanner p.eng { letter-spacing:0.16em; line-height:calc(48 / 750 * 100vw); } .LPMobileMenu .bottomBlock { position:relative; left:auto; bottom:auto; display:block; } .LPMobileMenu .modFormBanners { margin-bottom:0; padding-right:0; margin-top:calc(24 / 750 * 100vw); } .LPMobileMenu .modFormBanners .bannerBox { width:100%; display:flex; } .LPMobileMenu .modFormBanners .bannerBox > * { display:block; width:48.64%; } .LPMobileMenu .modFormBanners .bannerBox > *~* { margin-top:0; } .LPMobileMenu .modFollowUs { padding-bottom:calc(120 / 750 * 100vw); } } /* FOOTER -------------------------------------------------*/ footer { padding-top:160px; color:#fff; } footer .bg { background-color:#3f2e2c; padding:100px 0; } footer .container { display:flex; justify-content:flex-start; align-items:stretch; } footer .modVirticalMenu { right:200px; top:0; font-size:18px; line-height:3.12em; padding-top:0; } footer .modShopDetail { padding:0 72px; border-right:1px solid #746563; } footer .modShopDetail p.shopName { font-size:18px; } footer .modFormBanners { position:absolute; right:136px; bottom:0; text-align:left; } footer .modFollowUs { right:0; bottom:0; } footer .modLogo { display:block; right:0; top:0; width:148px; z-index:auto: } footer ._blank.brown::before, footer ._blank.brown::after { top:13px; background-color:var(--text-color); } footer ._blank.brown::after { top:10px; } footer p.copyright { font-size:11px; line-height:1.3em; letter-spacing:0.1em; color:#927a78; } footer .LPHoverRight:hover { border-color:#fff; } @media only screen and (max-width:1217px) { /* 1200px */ footer { padding-top:calc(160 / 1200 * 1rem); } footer .bg { padding:calc(100 / 1200 * 1rem) 0; } footer .modVirticalMenu { right:calc(200 / 1200 * 1rem); font-size:calc(18 / 1200 * 1rem); } footer .modShopDetail { padding:0 calc(60 / 1200 * 1rem); } footer .modShopDetail p.shopName { font-size:calc(18 / 1200 * 1rem); } footer .modFormBanners { right:calc(136 / 1200 * 1rem); } footer .modLogo { width:calc(148 / 1200 * 1rem); } footer ._blank.brown::before, footer ._blank.brown::after { top:calc(13 / 1200 * 1rem); } footer ._blank.brown::after { top:calc(10 / 1200 * 1rem); } footer p.copyright { font-size:calc(11 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ footer { text-align:center; padding-top:calc(200 / 750 * 1rem); } footer .modFormBanners { position:relative; right:auto; bottom:auto; width:100%; } footer .container { padding:0 calc(40 / 750 * 100vw); } footer .modVirticalMenu { position:relative; right:auto; top:auto; font-size:calc(28 / 750 * 100vw); } footer .modShopDetail { display:block; width:100%; padding:calc(80 / 750 * 100vw) 0 0; border:none; } footer .modShopDetail p.shopName { font-size:calc(36 / 750 * 100vw); } footer .modFollowUs { position:relative; right:auto; bottom:auto; } footer .modLogo { position:relative; right:auto; top:auto; width:100%; } footer .modLogo figure { width:calc(192 / 750 * 100vw); margin:calc(92 / 750 * 100vw) auto 0; } footer ._blank.brown::before, footer ._blank.brown::after { top:calc(20 / 750 * 100vw); } footer ._blank.brown::after { top:calc(16 / 750 * 100vw);} footer p.copyright { font-size:calc(20 / 750 * 100vw); width:100%; margin-top:calc(40 / 750 * 100vw); } } /************************************************************** HOME **************************************************************/ #home section h1 p.jpn { margin-top:7px; font-size:32px; letter-spacing:0.025em; } #home section h2 p.eng { font-size:10px; line-height:1.4em; letter-spacing:0.5em; margin-left:2px; color:#999999; } #home section h2 p.jpn { font-size:32px; line-height:1.4em; letter-spacing:0.1em; margin-left:0; margin-top:5px; } #home section .textBlock { text-align:left; width:400px; padding-left:16px; } #home section .textBlock p.comment { font-size:14px; line-height:32px; margin-top:31px; letter-spacing:0.2em; } #home section .textBlock .modMore { margin-top:32px; } #home section.kv figure.bg { padding-top:100vh; } #home section.kv .largeContainer { height:100vh; margin-top:-100vh; } #home section.information { padding-bottom:100px; background-color:#f9f9f9; } #home section.information h1 { padding-top:80px; padding-bottom:60px; } #home section.concept { padding-top:180px; padding-bottom:100px; } #home section.concept .container { display:flex; flex-direction:row-reverse; flex-wrap:nowrap; justify-content:center; align-items:stretch; overflow:hidden; } #home section.concept .container > * { overflow:hidden; } #home section.concept h1 { display:flex; flex-direction:row-reverse; align-items:flex-start; text-align:left; padding-left:130px; } #home section.concept h1 p.jpn { margin-top:0; letter-spacing:0.2em; font-size:36px; line-height:2em; padding-top:4.2em; text-indent:-4.2em; } #home section.concept article { font-size:18px; line-height:3.3333em; letter-spacing:0.2em; text-align:left; margin-left:auto; margin-right:0; } #home section.concept .modMore { display:flex; align-items:flex-end; margin-right:auto; } #home section.concept .modMore p { letter-spacing:0.2em; font-size:18px; } #home section.okashi h1 { padding-top:80px; padding-bottom:80px; } #home section.okashi ul.product li { display:flex; align-items:stretch; background-color:#f6f3ec; } #home section.okashi ul.product li.reverce { flex-direction:row-reverse; } #home section.okashi ul.product li article { width:40%; text-align:left; display:flex; } #home section.okashi ul.product li figure { width:60%; } #home section.okashi .modMore.large { padding:80px 0; } #home section.pride { padding-top:80px; } #home section.pride article > figure { padding-top:calc(720 / 1680 * 100%); } #home section.pride .textBlock { position:absolute; padding-left:0; left:calc(1120 / 1680 * 1rem); top:50%; transform:translateY(-50%); color:#fff; } #home section.pride .textBlock h1.pc p.eng { color:#fff; } #home section.pride .modMore .modArrowCircle { border-color:#fff; } #home section.pride .modMore .modArrowCircle::before, #home section.pride .modMore .modArrowCircle::after { background-color:#fff; } #home section.shopDetail { background-color:#f9f9f9 } #home section.shopDetail + footer { background-color:#f9f9f9; } #home section.shopDetail .container { padding:160px 84px 0; } #home section.shopDetail .wrapper { display:flex; flex-direction: row-reverse; } #home section.shopDetail article { width:calc(392 / 952 * 100%); text-align:left; } #home section.shopDetail article .detail { font-size:14px; line-height:24px; letter-spacing:0.15em; } #home section.shopDetail article .detail p.address { margin-top:30px; } #home section.shopDetail article .detail p.map { margin-top:3px; } #home section.shopDetail article .detail p.tel { margin-top:28px; } #home section.shopDetail article .detail p.time { margin-top:24px; padding-left:4.2em; text-indent:-4.2em; } #home section.shopDetail article .detail p.time span { font-size:11px; } #home section.shopDetail figure { width:calc(560 / 952 * 100%); padding-top:calc(400 / 952 * 100%) } @media only screen and (max-width:1217px) { /* 1200px */ #home section h1 p.jpn { margin-top:calc(7 / 1200 * 1rem); font-size:calc(32 / 1200 * 1rem); } #home section h2 p.eng { font-size:calc(10 / 1200 * 1rem); margin-left:calc(2 / 1200 * 1rem); } #home section h2 p.jpn { font-size:calc(32 / 1200 * 1rem); margin-top:calc(5 / 1200 * 1rem); } #home section .textBlock { width:calc(400 / 1200 * 1rem); padding-left:calc(16 / 1200 * 1rem); } #home section .textBlock p.comment { font-size:calc(14 / 1200 * 1rem); line-height:calc(32 / 1200 * 1rem); margin-top:calc(31 / 1200 * 1rem); } #home section .textBlock .modMore { margin-top:calc(32 / 1200 * 1rem); } #home section.information { padding-bottom:calc(100 / 1200 * 1rem); } #home section.information h1 { padding-top:calc(80 / 1200 * 1rem); padding-bottom:calc(60 / 1200 * 1rem); } #home section.concept { padding-top:calc(80 / 1200 * 1rem); padding-bottom:calc(100 / 1200 * 1rem); } #home section.concept h1 { padding-left:calc(130 / 1200 * 1rem); } #home section.concept h1 p.jpn { font-size:calc(36 / 1200 * 1rem); } #home section.concept article { font-size:calc(18 / 1200 * 1rem); } #home section.concept .modMore p { font-size:calc(18 / 1200 * 1rem); } #home section.okashi h1 { padding-top:calc(80 / 1200 * 1rem); padding-bottom:calc(80 / 1200 * 1rem); } #home section.okashi .modMore.large { padding:calc(80 / 1200 * 1rem) 0; } #home section.pride { padding-top:calc(80 / 1200 * 1rem); } #home section.shopDetail .container { padding:calc(160 / 1200 * 1rem) calc(84 / 1200 * 1rem) 0; } #home section.shopDetail article .detail { font-size:calc(14 / 1200 * 1rem); line-height:calc(24 / 1200 * 1rem); } #home section.shopDetail article .detail p.address { margin-top:calc(30 / 1200 * 1rem); } #home section.shopDetail article .detail p.map { margin-top:calc(3 / 1200 * 1rem); } #home section.shopDetail article .detail p.tel { margin-top:calc(28 / 1200 * 1rem); } #home section.shopDetail article .detail p.time { margin-top:calc(24 / 1200 * 1rem); } #home section.shopDetail article .detail p.time span { font-size:calc(11 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #home section.kv .modVirticalMenu { display:none; } #home section.kv .modFollowUs { display:none; } #home section h1 p.eng { position:absolute; right:calc(300 / 750 * 100vw); top:0; font-size:calc(16 / 750 * 100vw); margin-top:calc(8 / 750 * 100vw); letter-spacing:0.24em; } #home section h1 p.jpn { margin-top:0; font-size:calc(48 / 750 * 100vw); letter-spacing:0.18em; padding-left:0; } #home section h2 p.eng { font-size:calc(16 / 750 * 100vw); margin-left:calc(2 / 750 * 100vw); } #home section h2 p.jpn { font-size:calc(44 / 750 * 100vw); letter-spacing:0.2em; margin-top:calc(6 / 750 * 100vw); } #home section .textBlock { text-align:left; width:100%; padding-left:0; } #home section .textBlock p.comment { font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); margin-top:calc(40 / 750 * 100vw); } #home section .textBlock .modMore { margin-top:calc(24 / 750 * 100vw); } #home section.information { padding-bottom:calc(140 / 750 * 100vw); } #home section.information h1 { padding:0; margin:calc(100 / 750 * 100vw) 0 calc(60 / 750 * 100vw); overflow:visible; } #home section.concept { padding-top:0; padding-bottom:calc(60 / 750 * 100vw); } #home section.concept .container { display:block; } #home section.concept h1 { display:block; padding:calc(200 / 750 * 100vw) 0 calc(60 / 750 * 100vw); } #home section.concept h1 p.eng { right:auto; left:0; top:calc(160 / 750 * 100vw); margin-top:0; padding-left:calc(20 / 750 * 100vw); } #home section.concept h1 p.jpn { letter-spacing:0.1em; font-size:calc(44 / 750 * 100vw); line-height:1.8em; padding-top:0; padding-left:calc(20 / 750 * 100vw); text-indent:0; } #home section.concept article { padding:calc(10 / 750 * 100vw); font-size:calc(28 / 750 * 100vw); line-height:2em; letter-spacing:0.16em; white-space:normal; } #home section.concept .modMore { justify-content:flex-start; align-items:center; margin-top:calc(56 / 750 * 100vw); } #home section.concept .modMore a { display:flex; align-items:center;flex-direction:row; } #home section.concept .modMore p { letter-spacing:0.16em; font-size:calc(28 / 750 * 100vw); } #home section.concept .modMore .modArrowCircle { margin:0 0 0 calc(16 / 750 * 100vw); } #home section.okashi h1 { padding:0; margin:calc(60 / 750 * 100vw) 0 calc(60 / 750 * 100vw); } #home section.okashi ul.product li { display:block; background-color:transparent; } #home section.okashi ul.product li~li { margin-top:calc(120 / 750 * 100vw); } #home section.okashi ul.product li figure { width:100%; margin-bottom:calc(-240 / 750 * 100vw); } #home section.okashi ul.product li article { width:calc(630 / 750 * 100vw); padding:calc(80 / 750 * 100vw) calc(64 / 750 * 100vw) calc(80 / 750 * 100vw) calc(80 / 750 * 100vw); background-color:rgba(246,243,236,0.9); margin-left:auto; } #home section.okashi ul.product li.reverce article { margin-left:0; margin-right:auto; } #home section.okashi .modMore.large { padding:calc(100 / 750 * 100vw) 0; } #home section.pride { padding:0 0 calc(140 / 750 * 100vw); } #home section.pride h1 { margin:calc(60 / 750 * 100vw) 0; } #home section.pride h1 p.jpn { letter-spacing:0.2em; } #home section.pride article > figure { padding-top:100%; } #home section.pride .textBlock { position:relative; left:auto; top:auto; transform:none; padding:0 calc(80 / 750 * 100vw); color:#000; } #home section.pride .textBlock p.comment { margin-top:calc(80 / 750 * 100vw); } #home section.pride .modMore .modArrowCircle { border-color:#afafaf; } #home section.pride .modMore .modArrowCircle::before, #home section.pride .modMore .modArrowCircle::after { background-color:#5b4c4b; } #home section.shopDetail { padding:calc(140 / 750 * 100vw) 0 0; } #home section.shopDetail h1.sp { padding-bottom:calc(60 / 750 * 100vw); } #home section.shopDetail .container { padding:0; } #home section.shopDetail figure { width:100%; padding-top:calc(400 / 560 * 100%) } #home section.shopDetail .wrapper { display:block; } #home section.shopDetail article { width:100%; padding:calc(108 / 750 * 100vw) calc(40 / 750 * 100vw) 0; } #home section.shopDetail article h1 p.eng { right:auto; top:calc(-40 / 750 * 100vw); padding-left:0; } #home section.shopDetail article .detail { font-size:calc(26 / 750 * 100vw); line-height:calc(44 / 750 * 100vw); letter-spacing:0.2em; } #home section.shopDetail article .detail p.address { margin-top:calc(60 / 750 * 100vw); } #home section.shopDetail article .detail p.map { margin-top:calc(4 / 750 * 100vw); } #home section.shopDetail article .detail p.tel { margin-top:calc(56 / 750 * 100vw); } #home section.shopDetail article .detail p.time { margin-top:calc(48 / 750 * 100vw); } #home section.shopDetail article .detail p.time span { font-size:calc(22 / 750 * 100vw);; } } /************************************************************** INFORMATION **************************************************************/ #information section.information { padding-top:120px; } #information .modLowerHeader .title { max-width:880px; } #information section.information ul { margin-bottom:-36px; } #information section.information ul > li { margin-bottom:54px; } #information section.information ul > li:nth-child(30)~li { display:none; } #information section.information ul > li.show { display:block; } #information section.information .more { display:none; border:1px solid #aaa; border-left:none; border-right:none; padding:40px 0; margin-top:80px; } #information section.information .more p { display:inline-block; font-size:14px; line-height:14px; letter-spacing:0.1em; } #information section.information .more p::before, #information section.information .more p::after { content:''; position:absolute; right:-40px; top:50%; width:15px; height:1px; background-color:#555; } #information section.information .more p::after { transform:rotate(90deg); } @media only screen and (max-width:1217px) { /* 1200px */ #information .modLowerHeader .title { max-width:calc(880 / 1200 * 1rem); } #information section.information { padding-top:calc(120 / 1200 * 1rem); } } @media only screen and (min-width:769px) { /* Hover */ #information section.information .more:hover { cursor:pointer; } } @media only screen and (max-width:768px) { /* Mobile */ #information .modLowerHeader .title { max-width:none; } #information .modLowerHeader .LPSelect::before { content:none; } #information .modLowerHeader .LPSelect::after { content:''; position:absolute; right:calc(20 / 750 * 100vw); top:calc(14 / 750 * 100vw); width:calc(18 / 750 * 100vw); height:calc(18 / 750 * 100vw); background-color:transparent; border:1px solid #555; border-top:none; border-left:none; transform-origin:center center; transform:rotate(45deg); } #information .modLowerHeader .LPSelect select { border:none; border-bottom:1px solid #555; background-color:transparent; padding:0 calc(48 / 750 * 100vw) 0 calc(16 / 750 * 100vw); height:calc(60 / 750 * 100vw); } #information section.information { padding-top:calc(120 / 750 * 100vw); } #information section.information .more { padding:24px 0; margin-top:24px; } #information section.information .more p { font-size:13px; line-height:13px; } #information section.information ul > li:nth-child(20)~li { display:none; } #information section.information .more p::before, #information section.information .more p::after { content:''; position:absolute; right:-32px; width:12px; } #information.single .modLowerHeader { padding-bottom: calc(50 / 750 * 100vw); } #information.single .modLowerHeader .container { display:block; } #information.single .modLowerHeader .title { margin-bottom:calc(56 / 750 * 100vw); } #information.single .modLowerHeader .modBack a { justify-content:flex-end; } } /* 記事ページ */ #information section.article .container { max-width:720px; } /************************************************************** PRIVACY POLICY **************************************************************/ #privacypolicy .modWPArticle .content { max-width:800px; } #privacypolicy .modWPArticle .content h4 { font-size:24px; line-height:2em; letter-spacing:0.05em; margin-top:2em; margin-bottom:1em; } #privacypolicy .modWPArticle .content h6 { font-size:24px; line-height:1.75em; letter-spacing:0.05em; margin-top:2em; margin-bottom:1em; } #privacypolicy .modWPArticle .content p { font-size:16px; line-height:2em; letter-spacing:0.05em; font-feature-settings:'palt' 1; -webkit-font-feature-settings: "palt" 1; } #privacypolicy .modWPArticle .content p~p { margin-top:1em; } #privacypolicy .modWPArticle .content h4+p { margin-top:1.8em; } /************************************************************** CONTACT **************************************************************/ input, textarea, select, button, .LPButton { font-size:14px; line-height:28px; letter-spacing:0.12em; height:60px; padding:16px 30px; border:1px solid #e0e0e0; color:#000; } input[type=checkbox] { width:24px; height:24px; padding:0; position:relative; vertical-align:text-bottom; } input:not([type=checkbox]):not([type=radio]), span.select, select, textarea { width:100%; } label.checkbox { height:30px; display:flex; justify-content:flex-start; } label.checkbox input[type=checkbox] { width:30px; height:30px; margin-right:24px; vertical-align:baseline; } label.checkbox input[type=checkbox]:checked::before { content:''; position:absolute; width:10px; height:16px; left:12px; top:20px; border:2px solid #444; border-right:none; border-bottom:none; transform:rotate(-135deg); transform-origin:left top; } label.checkbox span { line-height:24px; padding-top:3px; vertical-align:baseline; } textarea { height:160px; } input::placeholder, textarea::placeholder { color:#bbb; } .LPForm span.select select { padding-right:60px; } .LPForm fieldset { margin:32px auto; } .LPForm fieldset > legend { width:190px; letter-spacing:0.12em; font-size:14px; line-height:28px; padding-top:16px; } .LPForm fieldset > *:not(legend) { width:calc(100% - 190px); } .LPForm fieldset .buttons { margin:0; justify-content:flex-start; } .LPForm .agree { font-size:14px; letter-spacing:0.1em; margin-top:80px; } .LPForm .buttons { margin-top:80px; } .LPForm .buttons button { width:336px; height:64px; border-radius:0; color:#fff; background-color:var(--text-color); font-size:14px; letter-spacing:0.12em; line-height:1; } .LPForm .buttons button:disabled { background-color:transparent; color:var(--text-color); opacity:1; } .LPForm .required:not(.hideRequired) > legend::after { content:'*'; font-size:24px; vertical-align:-8px; color:#f03445; } /* 入力必須 */ .LPForm p.message { margin-bottom:100px; } @media only screen and (max-width:768px) { /* Mobile */ .LPForm fieldset { margin:calc(60 / 750 * 100vw) auto; } .LPForm fieldset > legend { padding-top:0; } .LPForm .agree { margin-top:calc(80 / 750 * 100vw); } .LPForm p.message { margin-bottom:calc(80 / 750 * 100vw); } } .LPForm.confirm fieldset p { font-size:14px; line-height:28px; letter-spacing:0.12em; min-height:60px; padding:16px 30px; background-color:#e0e0e0; color:#000; } .LPForm.confirm .next { margin:80px 0 0; } .LPForm.confirm .buttons button { width:336px; height:64px; } @media only screen and (max-width:768px) { /* Mobile */ .LPForm.confirm .next legend { display:none; } .LPForm.confirm .next { margin:calc(80 / 750 * 100vw) 0 0; } .LPForm.confirm .next .sp { text-align:center; margin-top:calc(64 / 750 * 100vw); } } /* #contact a.LPHistoryBack { display:block; font-size:14px; line-height:2em; letter-spacing:0.1em; padding-left:2em; margin-top:2em; position:relative; color:var(--text-color); } #contact a.LPHistoryBack::before, #contact a.LPHistoryBack::after { content:''; position:absolute; left:0; top:50%; width:6px; height:1px; background-color:var(--text-color); transform-origin:left; } #contact a.LPHistoryBack::before { transform:rotate(45deg); } #contact a.LPHistoryBack::after { transform:rotate(-45deg); } */ #contact section.form .container { max-width:960px; padding-left:280px; padding-top:120px; text-align:left; } #contact section .messages { margin-bottom:100px; } #contact section .messages p { font-size:16px; line-height:2em; letter-spacing:0.12em; } #contact section .messages span.asterisk { display:inline-block; color:#f03445; font-size:24px; vertical-align:-8px; margin-right:0.5em; } #contact section .notes p { font-size:14px; line-height: 2em; padding-left:1.1em; letter-spacing:0.1em; } #contact section .notes p~p { margin-top:1em; } #contact section .notes p::before { content:'※'; position:absolute; left:0; } #contact section h2 { font-size:24px; line-height:32px; margin-bottom:48px; } #contact a.arrowBack { display:inline-block; position:relative; font-size:14px; line-height:28px; padding-left:20px; text-decoration:underline; } #contact a.arrowBack::before { content:''; position:absolute; left:0; top:48%; width:9px; height:9px; border-left:1px solid var(--text-color); border-top:1px solid var(--text-color); transform-origin:left top; transform:rotate(-45deg); } #contact .complete a.arrowBack { font-size:14px; line-height:2em; margin-top:4em; } @media only screen and (max-width:768px) { /* Mobile */ #contact section.form .container { max-width:none; padding:46px 20px 0; } #contact section .messages { margin-bottom:0; } #contact section .messages p { font-size:13px; line-height:24px; letter-spacing:0.16em; margin-bottom:calc(60 / 750 * 100vw); } #contact .LPForm fieldset > legend { width:auto; } #contact .LPForm fieldset > *:not(legend) { width:100%; } #contact .LPForm .buttons button { width:100%; height:56px; font-size:13px; letter-spacing:0.18em; } #contact .LPForm .agree label { white-space:normal; display:flex; align-items:flex-start; font-size:13px; line-height:24px; letter-spacing:0.16em; } #contact .LPForm .agree input { display:inline-block; width:30px; height:30px; margin-right:20px; } #contact .LPForm .agree span { width:calc(100% - 50px); } } /************************************************************** GIFT ETIQUETTE **************************************************************/ #manners footer, #manners .modBreadCrumb { background-color:#f9f9f9; } #manners section .red { color:#f03445; } #manners section h2 { font-size:32px; line-height:1.5em; margin-bottom:60px; text-align:center; font-weight:600; letter-spacing:0.05em; } #manners section .season .ctgColor { color:#4a5e6d; } #manners section .season .ctgBgColor { background-color:#acbecc; color:#fff; } #manners section .celebration .ctgColor { color:#b6677c; } #manners section .celebration .ctgBgColor { background-color:#dfc2c9; color:#fff; } #manners section .condolences .ctgColor { color:#7f517b; } #manners section .condolences .ctgBgColor { background-color:#aa8fa8; color:#fff; } #manners section .other .ctgColor { color:#bbaf67; } #manners section .other .ctgBgColor { background-color:#c9c4a7; color:#fff; } #manners section ul.description { display:flex; justify-content:flex-start; align-items:flex-start; } #manners section ul.description li { width:50%; } #manners section ul.description li h2 { text-align-last: left; margin-bottom:32px; } #manners section ul.description li p { text-align:left; font-size:16px; line-height:32px; letter-spacing:0.075em; } #manners section.paper { padding:120px 0; } #manners section.case { padding-top:120px; background-color:#f9f9f9; } #manners section.case ul.tabs { display:flex; font-size:24px; line-height:2em; padding-top:120px; letter-spacing:0.05em; } #manners section.case ul.tabs li { display:flex; padding:0 30px; } #manners section.case ul.tabs li .modArrowCircle { margin-left:0.8em; } #manners section.case article { padding:100px 0; border-bottom:1px solid #ccc; font-size:16px; line-height:30px; font-weight:600; text-align:left; } #manners section.case article:last-of-type { border-bottom:none; } #manners section.case article:last-child { padding-bottom:0; } #manners section.case article figure { font-size:0; line-height:0; padding-top:50%; } #manners section.case article h3 { font-size:20px; line-height:1; display:flex; height:56px; letter-spacing:0.1em; margin-top:40px; } #manners section.case article h4 { font-size:20px; line-height:1; font-weight:600; letter-spacing:0.1em; margin-bottom:20px; } #manners section.case article figure + h3 { margin-top:80px; } #manners section.case article dl { display:flex; justify-content:flex-start; align-items:stretch; } #manners section.case article dt { width:240px; margin-right:2px; margin-bottom:2px; background-color:#fff; padding:13px 0 13px 20px; letter-spacing:0.1em; } #manners section.case article dd { width:calc(100% - 242px); margin-bottom:2px; background-color:#fff; padding:13px 0 13px 20px; letter-spacing:0.1em; } #manners section.case article dd.flex { display:flex; justify-content:flex-start; align-items:flex-start; } #manners section.case article dd.flex > *~* { margin-left:26px; } #manners section.case article p.note { font-weight:400; margin-top:15px; letter-spacing:0.1em; } #manners section.case article .textBlock { padding:40px; margin-top:40px; background-color:#fff; font-weight:400; letter-spacing:0.1em; } @media only screen and (max-width:1217px) { /* 1200px */ #manners section h2 { font-size:calc(32 / 1200 * 1rem); margin-bottom:calc(60 / 1200 * 1rem); } #manners section.case ul.tabs { font-size:calc(24 / 1200 * 1rem); line-height:2em; } #manners section.case ul.tabs li { padding:0 calc(30 / 1200 * 1rem); } #manners section ul.description li h2 { margin-bottom:calc(32 / 1200 * 1rem); } #manners section ul.description li p { font-size:calc(16 / 1200 * 1rem); line-height:calc(32 / 1200 * 1rem); } #manners section.case { padding-top:calc(120 / 1200 * 1rem); } #manners section.case article { padding:calc(100 / 1200 * 1rem) 0; font-size:calc(16 / 1200 * 1rem); line-height:calc(30 / 1200 * 1rem); } #manners section.case article h3 { font-size:calc(20 / 1200 * 1rem); height:calc(56 / 1200 * 1rem); margin-top:calc(40 / 1200 * 1rem); } #manners section.case article h4 { font-size:calc(20 / 1200 * 1rem); margin-bottom:calc(20 / 1200 * 1rem); } #manners section.case article figure + h3 { margin-top:calc(80 / 1200 * 1rem); } #manners section.case article dt { width:calc(240 / 1200 * 1rem); margin-right:calc(2 / 1200 * 1rem); margin-bottom:calc(2 / 1200 * 1rem); padding:calc(13 / 1200 * 1rem) 0 calc(13 / 1200 * 1rem) calc(20 / 1200 * 1rem); } #manners section.case article dd { width:calc(100% - calc(242 / 1200 * 1rem)); margin-bottom:calc(2 / 1200 * 1rem); padding:calc(13 / 1200 * 1rem) 0 calc(13 / 1200 * 1rem) calc(20 / 1200 * 1rem); } #manners section.case article dd.flex > *~* { margin-left:calc(26 / 1200 * 1rem); } #manners section.case article p.note { margin-top:calc(15 / 1200 * 1rem); } #manners section.case article .textBlock { padding:calc(40 / 1200 * 1rem); margin-top:calc(40 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #manners section h2 { font-size:calc(44 / 750 * 100vw); margin-bottom:calc(80 / 750 * 100vw); letter-spacing:0.05em; } #manners section ul.description { margin:0 calc(80 / 750 * 100vw); } #manners section ul.description { display:block; } #manners section ul.description li { width:100%; } #manners section ul.description li~li { margin-top:calc(52 / 750 * 100vw); } #manners section ul.description li h2 { margin-bottom:calc(32 / 750 * 100vw); } #manners section ul.description li p { font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); letter-spacing:0.16em; } #manners section.paper { padding:calc(120 / 750 * 100vw) 0; } #manners section.case ul.tabs { justify-content:space-between; margin-bottom:calc(-24 / 750 * 100vw); font-size:calc(36 / 750 * 100vw); padding-top:calc(120 / 750 * 100vw); } #manners section.case ul.tabs li { width:calc(322 / 750 * 100vw); height:calc(156 / 750 * 100vw); padding:0; margin-bottom:calc(24 / 750 * 100vw); border:0.5px solid #000; flex-direction:column; padding-bottom:calc(12 / 750 * 100vw); } #manners section.case ul.tabs li.season { border-color:#4a5e6d; } #manners section.case ul.tabs li.celebration { border-color:#b6677c; } #manners section.case ul.tabs li.condolences { border-color:#7f517b; } #manners section.case ul.tabs li.other { border-color:#bbaf67; } #manners section.case ul.tabs li .modArrowCircle { margin-left:0; } #manners section.case { padding-top:calc(120 / 750 * 100vw); } #manners section.case article { padding:calc(120 / 750 * 100vw) 0; font-size:calc(26 / 750 * 100vw); line-height:calc(40 / 750 * 100vw); } #manners section.case article h3 { font-size:calc(32 / 750 * 100vw); height:calc(96 / 750 * 100vw); letter-spacing:0.1em; margin-top:calc(80 / 750 * 100vw); } #manners section.case article h4 { font-size:calc(32 / 750 * 100vw); margin-bottom:calc(32 / 750 * 100vw); } #manners section.case article figure + h3 { margin-top:calc(80 / 750 * 100vw); } #manners section.case article dt { width:calc(220 / 750 * 100vw); margin-right:calc(4 / 750 * 100vw); margin-bottom:calc(4 / 750 * 100vw); padding:calc(32 / 750 * 100vw) 0 calc(32 / 750 * 100vw) calc(32 / 750 * 100vw); letter-spacing:0.075em; } #manners section.case article dd { width:calc(100% - calc(224 / 750 * 100vw)); margin-bottom:calc(4 / 750 * 100vw); padding:calc(32 / 750 * 100vw); letter-spacing:0.075em; } #manners section.case article dd.flex { display:block; } #manners section.case article dd.flex > *~* { margin-left:0; } #manners section.case article p.note { margin-top:calc(16 / 750 * 100vw); font-size:calc(24 / 750 * 100vw); letter-spacing:0.1em; } #manners section.case article .textBlock { padding:calc(32 / 750 * 100vw); margin-top:calc(32 / 750 * 100vw); } } /************************************************************** ABOUT **************************************************************/ #about section.modLowerHeader { background:none; } #about section.modLowerHeader h1 { width:48px; } #about section.modLowerHeader h1 p.eng { color:#fff; } #about section.modLowerHeader h1 p.jpn { color:#fff; } #about section.concept { padding-top:160px; padding-bottom:150px; } #about section.concept .container { display:flex; flex-direction:row-reverse; justify-content:center; align-items:flex-start; padding-bottom:156px; } #about section.concept .portrait { display:flex; justify-content:flex-start; align-items:flex-end; } #about section.concept .portrait figure { width:calc(960 / 1680 * 100%); padding-top:calc(600 / 1680 * 100%); } #about section.concept .portrait .text { font-size:16px; line-height:26px; letter-spacing:0.2em; } #about section.concept .portrait .text p { text-align:left; padding-left:32px; } #about section.concept h1 { display:flex; flex-direction:row-reverse; align-items:flex-start; text-align:left; padding-left:110px; } #about section.concept h1 p.eng { margin-left:12px; } #about section.concept h1 p.jpn { margin-top:0; letter-spacing:0.2em; font-size:36px; line-height:2em; padding-top:4.2em; text-indent:-4.2em; } #about section.concept article { font-size:18px; line-height:3.3333em; letter-spacing:0.2em; text-align:left; margin:0; } #about section.yushima { background-color:#f9f9f9; padding-top:120px; } #about section.yushima h2 p.eng { font-size:10px; line-height:14px; color:#999; letter-spacing:0.24em; } #about section.yushima h2 p.jpn { font-size:32px; line-height:38px; color:#000; letter-spacing:0.05em; margin-top:11px; } #about section.yushima .description { font-size:18px; line-height:44px; letter-spacing:0.2em; margin:46px auto 0; max-width:800px; text-align:left; } #about section.yushima article { display:flex; justify-content:flex-start; align-items:flex-start; padding-top:120px; } #about section.yushima article.reverse { flex-direction:row-reverse; } #about section.yushima article > * { width:50%; } #about section.yushima article .photo { display:flex; justify-content:flex-start; } #about section.yushima article .photo figure { width:100%; } #about section.yushima article.p1 .photo figure { width:calc(400 / 1680 * 1rem); margin-left:80px; } #about section.yushima article .comment { text-align:left; padding-left:108px; padding-top:24px; width:560px; } #about section.yushima article.reverse .comment { padding-left:0; padding-right:108px; } #about section.yushima article .comment h3 { font-size:32px; line-height:48px; letter-spacing:0.05em; } #about section.yushima article .comment p { font-size:16px; line-height:28px; letter-spacing:0.18em; margin-top:56px; } #about section.yushima article a { color:#f03445; text-decoration:underline; } #about section.modBreadCrumb { background-color:#f9f9f9; } #about footer { background-color:#f9f9f9; } @media only screen and (max-width:1697px) { /* 1680px */ #about section.yushima article.p1 .photo figure { margin-left:calc(80 / 1680 * 1rem); } #about section.yushima article .comment { padding-left:calc(108 / 1680 * 1rem); padding-top:calc(24 / 1680 * 1rem); width:560px; } #about section.yushima article.reverse .comment { padding-left:0; padding-right:calc(108 / 1680 * 1rem); } } @media only screen and (max-width:1217px) { /* 1200px */ #about section.concept { padding-top:calc(80 / 1200 * 1rem); padding-bottom:calc(150 / 1200 * 1rem); } #about section.concept .container { padding-bottom:calc(156 / 1200 * 1rem); } #about section.concept .portrait .text { font-size:calc(16 / 1200 * 1rem); line-height:calc(26 / 1200 * 1rem); } #about section.concept .portrait .text p { padding-left:calc(32 / 1200 * 1rem); } #about section.concept h1 { padding-left:calc(110 / 1200 * 1rem); } #about section.concept h1 p.jpn { font-size:calc(36 / 1200 * 1rem); } #about section.concept h1 p.eng { margin-left:calc(12 / 1200 * 1rem); } #about section.concept article { font-size:calc(18 / 1200 * 1rem); } #about section.yushima { padding-top:calc(120 / 1200 * 1rem); } #about section.yushima h2 p.eng { font-size:calc(10 / 1200 * 1rem); line-height:calc(14 / 1200 * 1rem); } #about section.yushima h2 p.jpn { font-size:calc(32 / 1200 * 1rem); line-height:calc(38 / 1200 * 1rem); margin-top:calc(11 / 1200 * 1rem); } #about section.yushima .description { font-size:calc(18 / 1200 * 1rem); line-height:calc(44 / 1200 * 1rem); margin-top:calc(46 / 1200 * 1rem); } #about section.yushima article { padding-top:calc(120 / 1200 * 1rem); } #about section.yushima article.p1 .photo figure { width:calc(400 / 1200 * 1rem); margin-left:calc(80 / 1200 * 1rem); } #about section.yushima article .comment { padding-left:calc(108 / 1200 * 1rem); padding-top:calc(24 / 1200 * 1rem); width:calc(560 / 1200 * 1rem); } #about section.yushima article.reverse .comment { padding-right:calc(108 / 1200 * 1rem); } #about section.yushima article .comment h3 { font-size:calc(32 / 1200 * 1rem); line-height:calc(48 / 1200 * 1rem); } #about section.yushima article .comment p { font-size:calc(16 / 1200 * 1rem); line-height:calc(28 / 1200 * 1rem); margin-top:calc(56 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #about section.modLowerHeader h1 { padding:0; width:calc(72 / 750 * 100vw); } #about section.concept { padding-top:calc(140 / 750 * 100vw); } #about section.modLowerHeader .title h1.verticalText p.eng { right:calc(-52 / 750 * 100vw); padding-left:0; } #about section.concept .container { display:block; padding:0 calc(40 / 750 * 100vw) calc(140 / 750 * 100vw) ; } #about section.concept h1 { display:block; padding-left:0; text-align:left; } #about section.concept h1 p.eng { padding-left:0; } #about section.concept h1 p.jpn { font-size:calc(44 / 750 * 100vw); line-height:calc(80 / 750 * 100vw); letter-spacing:0.08em; padding-top:calc(16 / 750 * 100vw); text-indent:0; } #about section.concept article { margin-top:calc(48 / 750 * 100vw); font-size:calc(28 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); letter-spacing:0.18em; white-space:normal; } #about section.concept .portrait { display:block; } #about section.concept .portrait figure { width:calc(710 / 750 * 100vw); padding-top:calc(443 / 750 * 100vw) } #about section.concept .portrait .text { font-size:calc(26 / 750 * 100vw); line-height:calc(36 / 750 * 100vw); padding-top:calc(16 / 750 * 100vw) } #about section.concept .portrait .text p { text-align:right; padding-left:0; padding-right:calc(40 / 750 * 100vw); } #about section.yushima { padding-top:calc(140 / 750 * 100vw); } #about section.yushima h2 p.eng { font-size:calc(16 / 750 * 100vw); line-height:calc(14 / 750 * 100vw); } #about section.yushima h2 p.jpn { font-size:calc(44 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); margin-top:calc(32 / 750 * 100vw); } #about section.yushima .description { font-size:calc(28 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); letter-spacing:0.18em; margin-top:calc(52 / 750 * 100vw); text-align:left; padding:0 calc(80 / 750 * 100vw); } #about section.yushima article { display:block; padding-top:calc(140 / 750 * 100vw); } #about section.yushima article > * { width:100%; } #about section.yushima article .photo { display:block; } #about section.yushima article .photo figure { width:calc(710 / 750 * 100vw); } #about section.yushima article.reverse .photo figure { margin-left:calc(40 / 750 * 100vw); } #about section.yushima article.p1 .photo figure { width:calc(590 / 750 * 100vw); margin:0 auto; } #about section.yushima article .comment, #about section.yushima article.reverse .comment{ text-align:left; padding:calc(60 / 750 * 100vw) calc(80 / 750 * 100vw) 0; width:auto; } #about section.yushima article .comment h3 { font-size:calc(44 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); } #about section.yushima article .comment p { font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); letter-spacing:0.2em; margin-top:calc(56 / 750 * 100vw); } } /************************************************************** OKASHI **************************************************************/ #okashi section.modLowerHeader { background:none; } #okashi section.modLowerHeader h1 { width:48px; } #okashi section.modLowerHeader h1 p.eng { color:#fff; } #okashi section.modLowerHeader h1 p.jpn { color:#fff; padding-bottom:144px; } #okashi section.description p { font-size:20px; line-height:48px; letter-spacing:0.16em; padding:150px 0; text-align:left; max-width:800px; margin:0 auto; } #okashi section.products li { height:640px; background-color:#fbfafa; overflow:hidden; } #okashi section.products li:nth-child(even) { background-color:#f7f7f7; } #okashi section.products li .photo { position:absolute; left:0; top:0; width:100%; height:100%; background:left center no-repeat; background-size:contain; } #okashi section.products li:nth-child(even) .photo { background-position:right center; transform-origin:right center; } #okashi section.products li:nth-child(1) .photo { background-image:url(assets/img/okashi/product-1-pc.jpg); } #okashi section.products li:nth-child(2) .photo { background-image:url(assets/img/okashi/product-2-pc.jpg); } #okashi section.products li:nth-child(3) .photo { background-image:url(assets/img/okashi/product-5-pc.jpg); } #okashi section.products li:nth-child(4) .photo { background-image:url(assets/img/okashi/product-4-pc.jpg); } #okashi section.products li:nth-child(5) .photo { background-image:url(assets/img/okashi/product-3-pc.jpg); } #okashi section.products li:nth-child(6) .photo { background-image:url(assets/img/okashi/product-7-pc.jpg); } /* #okashi section.products li:nth-child(7) .photo { background-image:url(assets/img/okashi/product-7-pc.jpg); } #okashi section.products li:nth-child(8) .photo { background-image:url(assets/img/okashi/product-8-pc.jpg); } */ #okashi section.products .detail { width:400px; position:absolute; left:50%; top:50%; transform:translate(200px, -50%); text-align:left; } #okashi section.products li:nth-child(even) .detail { left:auto; right:50%; transform:translate(-200px, -50%) } #okashi section.products p.type { font-size:10px; line-height:14px; letter-spacing:0.24em; } #okashi section.products h2 { font-size:36px; line-height:48px; letter-spacing:0.1em; color:#3f2e2c; margin-top:8px; } #okashi section.products p.comment { margin-top:32px; font-size:16px; line-height:30px; letter-spacing:0.18em; } #okashi section.products .karinto p.type, #okashi section.products .karinto span { color:#bc5e77; } #okashi section.products .agearare p.type, #okashi section.products .agearare span { color:#7f407a; } #okashi section.products .agesenbei p.type, #okashi section.products .agesenbei span { color:#b6a854; } #okashi section.products figure.graph { position:absolute; left:50%; top:50%; width:266px; transform:translate(-50%, -50%); } #okashi section.products .detail .button { margin-top:40px; } #okashi section.products .detail .button > a { width:320px; height:64px; display:flex; background-color:var(--text-color); } #okashi section.products .detail .button > a span { font-size:14px; line-height:28px; color:#fff; letter-spacing:0.2em; } #okashi section.products .detail .button ._blank.brown::before, #okashi section.products .detail .button ._blank.brown::after { background-color:var(--text-color); } @media only screen and (max-width:1417px) { /* 1400px */ #okashi section.modLowerHeader h1 p.jpn { padding-bottom:calc(144 / 1400 * 1rem); } #okashi section.description p { font-size:calc(20 / 1400 * 1rem); line-height:calc(48 / 1400 * 1rem); padding:calc(150 / 1400 * 1rem) 0; } #okashi section.products li { height:calc(640 / 1400 * 1rem); } #okashi section.products .detail { width:calc(400 / 1400 * 1rem); transform:translate(calc(200 / 1400 * 1rem), -50%); } #okashi section.products li:nth-child(even) .detail { transform:translate(calc(-200 / 1400 * 1rem), -50%) } #okashi section.products p.type { font-size:calc(10 / 1400 * 1rem); line-height:calc(14 / 1400 * 1rem); } #okashi section.products h2 { font-size:calc(36 / 1400 * 1rem); line-height:calc(48 / 1400 * 1rem); margin-top:calc(8 / 1400 * 1rem); } #okashi section.products p.comment { margin-top:calc(32 / 1400 * 1rem); font-size:calc(16 / 1400 * 1rem); line-height:calc(30 / 1400 * 1rem); } #okashi section.products figure.graph { width:calc(266 / 1400 * 1rem); } #okashi section.products .detail .button { margin-top:calc(40 / 1400 * 1rem); } #okashi section.products .detail .button > a { width:calc(320 / 1400 * 1rem); height:calc(64 / 1400 * 1rem); } #okashi section.products .detail .button > a span { font-size:calc(14 / 1400 * 1rem); line-height:calc(28 / 1400 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #okashi section.modLowerHeader h1 { padding-left:0; width:calc(72 / 750 * 100vw); } #okashi section.modLowerHeader h1 p.eng { left:auto; right:calc(-52 / 750 * 100vw); padding-left:0; } #okashi section.modLowerHeader h1 p.jpn { padding-bottom:0; } #okashi section.description p { font-size:calc(28 / 750 * 100vw); line-height:calc(58 / 750 * 100vw); padding:calc(108 / 750 * 100vw) calc(74 / 750 * 100vw); } #okashi section.products li { height:auto; background:center top no-repeat; background-size:contain; background-color:#fbfafa; padding:calc(560 / 750 * 100vw) 0 calc(120 / 750 * 100vw); } #okashi section.products li .photo { width:100%; height:100%; background:center top no-repeat; background-size:contain; } #okashi section.products li:nth-child(even) .photo { background-position:center top; } #okashi section.products li:nth-child(1) .photo { background-image:url(assets/img/okashi/product-1-sp.jpg); } #okashi section.products li:nth-child(2) .photo { background-image:url(assets/img/okashi/product-2-sp.jpg); } #okashi section.products li:nth-child(3) .photo { background-image:url(assets/img/okashi/product-5-sp.jpg); } #okashi section.products li:nth-child(4) .photo { background-image:url(assets/img/okashi/product-4-sp.jpg); } #okashi section.products li:nth-child(5) .photo { background-image:url(assets/img/okashi/product-3-sp.jpg); } #okashi section.products li:nth-child(6) .photo { background-image:url(assets/img/okashi/product-7-sp.jpg); } /* #okashi section.products li:nth-child(7) .photo { background-image:url(assets/img/okashi/product-7-sp.jpg); } #okashi section.products li:nth-child(8) .photo { background-image:url(assets/img/okashi/product-8-sp.jpg); } */ #okashi section.products .detail { width:auto; position:relative; left:auto; top:auto; transform:none; padding:0 calc(80 / 750 * 100vw); } #okashi section.products li:nth-child(even) .detail { left:auto; right:auto; transform:none; } #okashi section.products p.type { font-size:calc(16 / 750 * 100vw); line-height:calc(16 / 750 * 100vw); } #okashi section.products h2 { font-size:calc(48 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); margin-top:calc(16 / 750 * 100vw); letter-spacing:0.2em; } #okashi section.products p.comment { margin-top:calc(32 / 750 * 100vw); font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); letter-spacing:0.2em; } #okashi section.products figure.graph { position:absolute; left:50%; top:auto; bottom:calc(304 / 750 * 100vw); width:calc(478 / 750 * 100vw); transform:translateX(-50%); } #okashi section.products .detail .button { margin-top:calc(574 / 750 * 100vw); } /* #okashi section.products .detail .button { margin-top:calc(80 / 750 * 100vw); } */ #okashi section.products .detail .button > a { width:100%; height:calc(120 / 750 * 100vw); } #okashi section.products .detail .button > a span { font-size:calc(26 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); letter-spacing:0.16em; } } /************************************************************** ショップ **************************************************************/ #shop section.about { padding-top:120px; padding-bottom:148px; } #shop section.about .container { display:flex; align-items:flex-start; padding-bottom:0; } #shop section.about .portrait { margin-right:auto; width:680px; padding-top:140px; } #shop section.about .portrait figure { padding-top:calc(574 / 750 * 100%); } #shop section.about .detail { display:flex; align-items:flex-start; flex-direction:row-reverse; flex-wrap:nowrap; width:382px; } #shop section.about .detail h1 { display:flex; flex-direction:row-reverse; align-items:flex-start; flex-wrap:nowrap; text-align:left; padding-left:34px; width:132px; } #shop section.about .detail h1 p.eng { margin:0; margin-left:12px; } #shop section.about .detail h1 p.jpn { margin-top:0; letter-spacing:0.2em; font-size:36px; line-height:2em; margin:0; } #shop section.about .detail article { font-size:18px; line-height:50px; letter-spacing:0.2em; width:250px; } #shop section.detail .container { display:flex; align-items:flex-start; } #shop section.detail .container > * { width:50%; } #shop section.detail ul.information { padding-left:80px; } #shop section.detail ul.information li { display:flex; align-items:flex-start; font-size:14px; line-height:30px; color:#999; letter-spacing:0.2em; text-align:left; } #shop section.detail ul.information li > legend { width:112px; } #shop section.detail ul.information li > *:not(legend) { width:calc(100% - 112px); letter-spacing:0.1em; color:#222; } #shop section.detail ul.information li.addSeparater { margin-top:3em; } #shop section.detail .map { padding-left:40px; } #shop section.detail .map iframe { width:100%; height:520px; } @media only screen and (max-width:1217px) { /* 1200px */ #shop section.about { padding-top:calc(120 / 1200 * 1rem); padding-bottom:calc(148 / 1200 * 1rem); } #shop section.about .portrait { width:calc(680 / 1200 * 1rem); padding-top:calc(140 / 1200 * 1rem); } #shop section.about .detail { width:calc(382 / 1200 * 1rem); } #shop section.about .detail h1 { padding-left:calc(34 / 1200 * 1rem); width:calc(132 / 1200 * 1rem); } #shop section.about .detail h1 p.eng { margin:0; margin-left:calc(12 / 1200 * 1rem); } #shop section.about .detail h1 p.jpn { margin-top:0; letter-spacing:0.2em; font-size:calc(36 / 1200 * 1rem); line-height:2em; margin:0; } #shop section.about .detail article { font-size:calc(18 / 1200 * 1rem); line-height:calc(50 / 1200 * 1rem); letter-spacing:0.2em; width:calc(250 / 1200 * 1rem); } #shop section.detail ul.information { padding-left:calc(80 / 1200 * 1rem); } #shop section.detail ul.information li { font-size:calc(14 / 1200 * 1rem); line-height:calc(30 / 1200 * 1rem); } #shop section.detail ul.information li > legend { width:calc(112 / 1200 * 1rem); } #shop section.detail ul.information li > *:not(legend) { width:calc(100% - calc(112 / 1200 * 1rem)); } #shop section.detail .map { padding-left:calc(40 / 1200 * 1rem); } #shop section.detail .map iframe { height:calc(520 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #shop section.about { padding-top:0; padding-bottom:calc(120 / 750 * 100vw); background-color:#f9f9f9; } #shop section.about .container { display:block; margin:0; } #shop section.about .portrait { width:100%; padding-top:0; } #shop section.about .detail { display:block; width:auto; margin:calc(120 / 750 * 100vw) calc(80 / 750 * 100vw) 0; text-align:left; } #shop section.about .detail h1 { display:block; padding-left:0; text-align:left; } #shop section.about .detail h1 p.eng { padding-left:0; } #shop section.about .detail h1 p.jpn { font-size:calc(44 / 750 * 100vw); line-height:calc(80 / 750 * 100vw); letter-spacing:0.08em; padding-top:calc(16 / 750 * 100vw); text-indent:0; } #shop section.about .detail article { margin-top:calc(48 / 750 * 100vw); font-size:calc(26 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); letter-spacing:0.2em; white-space:normal; width:auto; } #shop section.detail { padding-top:calc(120 / 750 * 100vw); } #shop section.detail .container { display:block; } #shop section.detail .container > * { width:100%; } #shop section.detail ul.information { padding:0 calc(80 / 750 * 100vw); } #shop section.detail ul.information li { font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); } #shop section.detail ul.information li > legend { width:calc(172 / 750 * 100vw); } #shop section.detail ul.information li > *:not(legend) { width:calc(100% - calc(172 / 750 * 100vw)); } #shop section.detail ul.information li.addSeparater { margin-top:2em; } #shop section.detail .map { padding-left:0; margin-top:calc(100 / 750 * 100vw); } #shop section.detail .map iframe { width:100%; height:calc(670 / 750 * 100vw); } } /************************************************************** こだわり **************************************************************/ #pride section.modLowerHeader { background:none; } #pride section.modLowerHeader h1 { width:48px; } #pride section.modLowerHeader h1 p.eng { color:#fff; } #pride section.modLowerHeader h1 p.jpn { color:#fff; } #pride .magenta { color:#bc5e77; } #pride section.catch { padding:160px 0 134px; } #pride section.catch h2 { font-size:36px; line-height:104px; letter-spacing:0.2em; color:#000; } #pride section.catch article { max-width:660px; font-size:18px; line-height:42px; margin:132px auto 0; letter-spacing:0.2em; color:#000; text-align:left; } #pride section.prides ul.items > li:nth-child(odd) { background-color:#f9f9f9; } #pride section.prides ul.items > li { padding:109px 0 120px; } #pride section.prides h2 { color:#000; margin-bottom:40px; } #pride section.prides h2 p.kodawari { font-size:14px; line-height:40px; letter-spacing:0.12em; } #pride section.prides h2 p.kodawari span { font-size:24px; letter-spacing:0; margin-left:0.12em; } #pride section.prides h2 p.title { font-size:32px; line-height:40px; } #pride section.prides p.description { font-size:16px; line-height:32px; letter-spacing:0.18em; text-align:left; max-width:658px; margin:0 auto; color:#000; } #pride section.prides p.note { font-size:13px; line-height:24px; letter-spacing:0.16em; text-align:left; max-width:658px; margin:16px auto 0; color:#000; } #pride section.prides ul.photo { margin-top:56px; } #pride section.prides ul.photo figure { padding-top:calc(446 / 670 * 100%); } #pride section.bottom p.caption { font-size:18px; line-height:42px; letter-spacing:0.2em; color:#000; text-align:left; max-width:650px; margin:0 auto 107px; } #pride section.bottom figure { padding-top:calc(420 / 1120 * 100%); } @media only screen and (max-width:1217px) { /* 1200px */ #pride section.catch { padding:calc(160 / 1200 * 1rem) 0 calc(134 / 1200 * 1rem); } #pride section.catch h2 { font-size:calc(36 / 1200 * 1rem); line-height:calc(104 / 1200 * 1rem); } #pride section.catch article { max-width:calc(660 / 1200 * 1rem); font-size:calc(18 / 1200 * 1rem); line-height:calc(42 / 1200 * 1rem); margin:calc(132 / 1200 * 1rem) auto 0; } #pride section.prides ul.items > li { padding:calc(109 / 1200 * 1rem) 0 calc(120 / 1200 * 1rem); } #pride section.prides h2 { margin-bottom:calc(40 / 1200 * 1rem); } #pride section.prides h2 p.kodawari { font-size:calc(14 / 1200 * 1rem); line-height:calc(40 / 1200 * 1rem); } #pride section.prides h2 p.kodawari span { font-size:calc(24 / 1200 * 1rem); } #pride section.prides h2 p.title { font-size:calc(32 / 1200 * 1rem); line-height:calc(40 / 1200 * 1rem); } #pride section.prides p.description { font-size:calc(16 / 1200 * 1rem); line-height:calc(32 / 1200 * 1rem); max-width:calc(658 / 1200 * 1rem); } #pride section.prides p.note { font-size:calc(13 / 1200 * 1rem); line-height:calc(24 / 1200 * 1rem); max-width:calc(658 / 1200 * 1rem); margin-top:calc(16 / 1200 * 1rem); } #pride section.prides ul.photo { margin-top:calc(56 / 1200 * 1rem); } #pride section.bottom p.caption { font-size:calc(18 / 1200 * 1rem); line-height:calc(42 / 1200 * 1rem); max-width:calc(650 / 1200 * 1rem); margin-bottom:calc(107 / 1200 * 1rem); } } @media only screen and (max-width:768px) { /* Mobile */ #pride section.modLowerHeader h1 { padding-left:0; width:calc(72 / 750 * 100vw); } #pride section.modLowerHeader h1 p.eng { left:auto; right:calc(-52 / 750 * 100vw); padding-left:0; } #pride section.catch { padding:calc(112 / 750 * 100vw) 0 calc(100 / 750 * 100vw); } #pride section.catch .container { margin: 0 calc(80 / 750 * 100vw); } #pride section.catch h2 { font-size:calc(44 / 750 * 100vw); line-height:calc(80 / 750 * 100vw); letter-spacing:0.12em; } #pride section.catch article { max-width:none; font-size:calc(28 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); margin:calc(60 / 750 * 100vw) auto 0; letter-spacing:0.18em; } #pride section.prides ul.items > li { padding:calc(109 / 750 * 100vw) 0 calc(120 / 750 * 100vw); } #pride section.prides h2 { margin-bottom:calc(40 / 750 * 100vw); text-align:left; padding: 0 calc(40 / 750 * 100vw); } #pride section.prides h2 p.kodawari { font-size:calc(16 / 750 * 100vw); line-height:calc(40 / 750 * 100vw); letter-spacing:0.2em; } #pride section.prides h2 p.kodawari span { font-size:calc(40 / 750 * 100vw); margin-left:0.2em; } #pride section.prides h2 p.title { font-size:calc(48 / 750 * 100vw); line-height:calc(80 / 750 * 100vw); } #pride section.prides p.description { font-size:calc(26 / 750 * 100vw); line-height:calc(48 / 750 * 100vw); letter-spacing:0.2em; max-width:none; margin:0 calc(40 / 750 * 100vw); } #pride section.prides p.note { font-size:calc(24 / 750 * 100vw); line-height:calc(40 / 750 * 100vw); max-width:none; margin:calc(32 / 750 * 100vw) calc(40 / 750 * 100vw) 0; } #pride section.prides ul.photo { margin-top:calc(56 / 750 * 100vw); } #pride section.bottom p.caption { font-size:calc(28 / 750 * 100vw); line-height:calc(56 / 750 * 100vw); max-width:none; margin-bottom:calc(107 / 750 * 100vw); } #pride section.bottom figure { padding-top:100%; } } .has-pale-pink-background-color{background-color:#f78da7} .has-vivid-red-background-color{background-color:#cf2e2e} .has-luminous-vivid-orange-background-color{background-color:#ff6900} .has-luminous-vivid-amber-background-color{background-color:#fcb900} .has-light-green-cyan-background-color{background-color:#7bdcb5} .has-vivid-green-cyan-background-color{background-color:#00d084} .has-pale-cyan-blue-background-color{background-color:#8ed1fc} .has-vivid-cyan-blue-background-color{background-color:#0693e3} .has-vivid-purple-background-color{background-color:#9b51e0} .has-white-background-color{background-color:#fff} .has-very-light-gray-background-color{background-color:#eee} .has-cyan-bluish-gray-background-color{background-color:#abb8c3} .has-very-dark-gray-background-color{background-color:#313131} .has-black-background-color{background-color:#000} .has-pale-pink-color{color:#f78da7} .has-vivid-red-color{color:#cf2e2e} .has-luminous-vivid-orange-color{color:#ff6900} .has-luminous-vivid-amber-color{color:#fcb900} .has-light-green-cyan-color{color:#7bdcb5} .has-vivid-green-cyan-color{color:#00d084} .has-pale-cyan-blue-color{color:#8ed1fc} .has-vivid-cyan-blue-color{color:#0693e3} .has-vivid-purple-color{color:#9b51e0} .has-white-color{color:#fff} .has-very-light-gray-color{color:#eee} .has-cyan-bluish-gray-color{color:#abb8c3} .has-very-dark-gray-color{color:#313131} .has-black-color{color:#000} .has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:linear-gradient(135deg,#0693e3,#9b51e0)} .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)} .has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:linear-gradient(135deg,#7adcb4,#00d082)} .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:linear-gradient(135deg,#fcb900,#ff6900)} .has-luminous-vivid-orange-to-vivid-red-gradient-background{background:linear-gradient(135deg,#ff6900,#cf2e2e)} .has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:linear-gradient(135deg,#eee,#a9b8c3)} .has-cool-to-warm-spectrum-gradient-background{background:linear-gradient(135deg,#4aeadc,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c)} .has-blush-light-purple-gradient-background{background:linear-gradient(135deg,#ffceec,#9896f0)} .has-blush-bordeaux-gradient-background{background:linear-gradient(135deg,#fecda5,#fe2d2d 50%,#6b003e)} .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)} .has-luminous-dusk-gradient-background{background:linear-gradient(135deg,#ffcb70,#c751c0 50%,#4158d0)} .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)} .has-pale-ocean-gradient-background{background:linear-gradient(135deg,#fff5cb,#b6e3d4 50%,#33a7b5)} .has-electric-grass-gradient-background{background:linear-gradient(135deg,#caf880,#71ce7e)} .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)} .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)} .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)} .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}