/*////////////////////////////////////////////////////////////////////////////*/ /*! style.css | kaizu */ /*////////////////////////////////////////////////////////////////////////////*/ /*------------------------------------------------------------------------------ 変数 ------------------------------------------------------------------------------*/ #feature-brand-stylej, #feature-brand-stylej ::before, #feature-brand-stylej ::after { --key_color: 171, 177, 167; --font_sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; --font_mincho: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; } /*------------------------------------------------------------------------------ 基本 ------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------------*/ :root { --font_size: 14px; --line_height: 2; --space_6_3: 3rem; --space_4_2: 3rem; } #feature-brand-stylej { font-size: var(--font_size); } @media (min-width: 320px) { :root { --font_size: calc(14px + ((1vw - 3.2px) * (600 / 1600))); --space_6_3: calc(3rem + (20 * 3) * (100vw - 320px) / (1920 - 320)); --space_4_2: calc(3rem + (20 * 2) * (100vw - 320px) / (1920 - 320)); } /**/ } @media (min-width: 1920px) { :root { --font_size: 20px; --space_6_3: 6rem; --space_4_2: 4rem; } /**/ } /* ------------------------------------------------------------------------------*/ #feature-brand-stylej { scroll-behavior: smooth; margin: 0; padding: 0; line-height: var(--line_height); font-family: var(--font_sans); letter-spacing: .05em; color: rgba(var(--key_color), 1); } #feature-brand-stylej { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; } @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { #feature-brand-stylej { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } #feature-brand-stylej --heading_color p { margin: 0; } #feature-brand-stylej .l { display: inline-block; } #feature-brand-stylej .l.s { width: .3em; } #feature-brand-stylej svg { width: 1em; height: 1em; } /*------------------------------------------------------------------------------ ヒーローヘッダー ------------------------------------------------------------------------------*/ /* コンテナ・共通 ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_header { --main_logo_size: 6.4vw; /**/ position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 5vw; /*padding: 7vw 0 0 7vw;*/ padding: 3vw 0 0 5vw; background: url("/img/brand/stylej/top_header.png") no-repeat center 70% / cover; color: #FFF; } #feature-brand-stylej #site_header .logo, #feature-brand-stylej #site_header .catchcopy { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)); } /* animation */ #feature-brand-stylej #site_header { animation-name: site_header_anime; animation-fill-mode: both; animation-duration: 2s; animation-delay: 0; opacity: 0; } @keyframes site_header_anime { 0% { opacity: 0; } 100% { opacity: 1; } } /* ロゴ ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_header .logo { line-height: 1; font-size: 100%; } #feature-brand-stylej #site_header .logo strong { --size: var(--main_logo_size); --width: 240; --height: 95.4; /**/ overflow: hidden; position: relative; display: block; width: calc(var(--width) / var(--height) * var(--size)); margin: 0 0 calc(44.7285 / 126.5657 * var(--main_logo_size)); } #feature-brand-stylej #site_header .logo br { display: none; } #feature-brand-stylej #site_header .logo em { --size: calc(36.168 / 126.5657 * var(--main_logo_size)); --width: 300; --height: 24; /**/ overflow: hidden; position: relative; display: block; width: calc(var(--width) / var(--height) * var(--size)); } #feature-brand-stylej #site_header .logo img { display: block; width: auto; height: var(--size); } /* Direction */ .vertical #feature-brand-stylej #site_header { --main_logo_size: 15vw; padding: 0; padding-left: 7vw; overflow-x: hidden; } .vertical #feature-brand-stylej #site_header .logo { display: flex; flex-direction: column; justify-content: center; position: absolute; left: 30%; top: 16%; transform: translateX(-50%); } /* animation */ #feature-brand-stylej #site_header .logo strong::before, #feature-brand-stylej #site_header .logo em::before { content: ''; position: absolute; left: -100%; top: 50%; width: 100%; height: 1px; background: #FFF; transform: translateY(-50%); /**/ animation-name: site_header_logo_anime1; animation-fill-mode: both; animation-duration: 2s; animation-delay: 1.25s; } @keyframes site_header_logo_anime1 { 0% { left: -100%; } 50% { left: 0; opacity: 1; filter: blur(0); } 100% { left: 0; opacity: 0; filter: blur(5px); } } #feature-brand-stylej #site_header .logo img { animation-name: site_header_logo_anime2; animation-fill-mode: both; animation-duration: 3s; animation-delay: 1.75s; opacity: 0; } @keyframes site_header_logo_anime2 { 0% { opacity: 0; } 100% { opacity: 1; } } /* キャッチコピー ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_header .catchcopy { /* --size: 2.5vw; --width: 60; --height: 546;*/ --size: 2.2vw; --width: 48; --height: 437; /**/ display: flex; flex-direction: row; justify-content: space-between; /**/ width: calc(var(--size) * 2.5); margin: calc(58.3545 / 126.5657 * var(--main_logo_size)) 0 0; font-size: 100%; } #feature-brand-stylej #site_header .catchcopy .l { position: relative; display: block; width: var(--size); height: auto; } #feature-brand-stylej #site_header .catchcopy .l:nth-child(1) { order: 2; } #feature-brand-stylej #site_header .catchcopy .l:nth-child(2) { order: 1; } #feature-brand-stylej #site_header .catchcopy img { display: block; width: var(--size); height: auto; } /* Direction */ .vertical #feature-brand-stylej #site_header .catchcopy { --size: 5.9vw; /**/ /*flex-direction: column; justify-content: center;*/ flex-direction: row; justify-content: space-between; /**/ position: absolute; left: 3vw; top: 38%; bottom: 0; /**/ width: calc(var(--size) * 2.3); height: auto; margin: 0; } .vertical #feature-brand-stylej #site_header .catchcopy .l { flex-shrink: 1; position: relative; height: calc((100% - 1.5em) / 2); } .vertical #feature-brand-stylej #site_header .catchcopy .l img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .vertical #feature-brand-stylej #site_header .catchcopy .l:nth-child(1) { order: 2; margin-bottom: 1.5em; } .vertical #feature-brand-stylej #site_header .catchcopy .l:nth-child(1) img { object-position: bottom; } .vertical #feature-brand-stylej #site_header .catchcopy .l:nth-child(2) { order: 1; } .vertical #feature-brand-stylej #site_header .catchcopy .l:nth-child(2) img { object-position: top; } /* animation */ #feature-brand-stylej #site_header .catchcopy img { animation-name: site_header_catchcopy_anime; animation-fill-mode: both; animation-duration: .5s; animation-delay: 2.75s; opacity: 0; } @keyframes site_header_catchcopy_anime { 0% { opacity: 0; } 100% { opacity: 1; } } /* SCROLL DOWN ------------------------------------------------------------------------------*/ #feature-brand-stylej #scroll_down { --line_height: 4em; /**/ position: absolute; z-index: 1; left: 0; bottom: -20px; width: 100%; font-size: 75%; } #feature-brand-stylej .horizontal #scroll_down { --line_height: 5em; } #feature-brand-stylej #scroll_down .line { overflow: hidden; position: absolute; left: 50%; bottom: calc(var(--space_6_3) / 2 + 1.5em); width: 2px; height: var(--line_height); transform: translateX(-50%); } #feature-brand-stylej #scroll_down .line::before { content: ''; position: absolute; left: 50%; top: calc(var(--space_6_3) * -1); width: 1px; height: var(--line_height); background: #FFF; transform: translateX(-1px); /**/ animation-name: scroll_announce; animation-delay: 2s; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes scroll_announce { 0% { top: calc(var(--line_height) * -1); } 100% { top: var(--line_height); } } #feature-brand-stylej #scroll_down::after { content: 'SCROLL'; position: absolute; left: 50%; bottom: calc(var(--space_6_3) / 2); transform: translateX(-50%); text-align: center; line-height: 1; white-space: nowrap; color: #FFF; } /* Direction */ .vertical #feature-brand-stylej #scroll_down { bottom: 10px; } .vertical #feature-brand-stylej #scroll_down .line { bottom: calc(4vw + 1.5em); } .vertical #feature-brand-stylej #scroll_down::after { bottom: 4vw; } /* animation */ #feature-brand-stylej #scroll_down { animation-name: site_header_scrolldown_anime; animation-fill-mode: both; animation-duration: 1s; animation-delay: 3s; opacity: 0; } @keyframes site_header_scrolldown_anime { 0% { opacity: 0; } 100% { opacity: 1; } } /*------------------------------------------------------------------------------ ナビゲーションバー ------------------------------------------------------------------------------*/ /* Horizontal ------------------------------------------------------------------------------*/ #feature-brand-stylej:not(.vertical) #navbar { position: sticky; z-index: 99; top: 0; width: 100%; background: rgba(var(--key_color), 1); } /**/ #feature-brand-stylej:not(.vertical) #menu { display: none; } /**/ #feature-brand-stylej:not(.vertical) #sitemap .menu { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; /**/ list-style: none; margin: 0; padding: 1em; } #feature-brand-stylej:not(.vertical) #navbar { min-height: 87px; } #feature-brand-stylej:not(.vertical) #sitemap { background: rgba(var(--key_color), 1); position: relative !important; width: 100%; transition: 0.3s ease-out; } #feature-brand-stylej:not(.vertical) #sitemap.is-fixed { position: fixed !important; top: 0; z-index: 10; /* box-shadow: 0 0 10px rgba(0, 0, 0, .2); */ } #feature-brand-stylej:not(.vertical) #sitemap .menu li { flex-shrink: 1; margin: 1em; } #feature-brand-stylej:not(.vertical) #sitemap .menu li.concept { padding-bottom: 0; } #feature-brand-stylej:not(.vertical) #sitemap .menu a { position: relative; display: flex; align-items: center; } #feature-brand-stylej:not(.vertical) #sitemap .menu a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: #FFF; opacity: 0; transition: opacity .2s ease-out; } #feature-brand-stylej:not(.vertical) #sitemap .menu .l.s { width: .75em; } #feature-brand-stylej:not(.vertical) #sitemap .menu img { display: block; width: auto; height: .75rem; object-fit: contain; filter: brightness(300%); } #feature-brand-stylej:not(.vertical) #sitemap .sns { display: none; } /**/ @media (any-hover: hover) { #feature-brand-stylej:not(.vertical) #sitemap .menu a:hover::after { opacity: 1; } /**/ } @media (any-hover: none) { #feature-brand-stylej:not(.vertical) #sitemap .menu a:active::after { opacity: 1; } /**/ } /* Vertical ------------------------------------------------------------------------------*/ .vertical #feature-brand-stylej #navbar { position: fixed; z-index: 99; left: 0; top: 0; width: 100%; } /**/ .vertical #feature-brand-stylej #menu { overflow: hidden; position: absolute; z-index: 9; left: 0; top: 0; width: 6em; height: 6em; margin: 0; padding: 6em 0 0; background: none; border: none; white-space: nowrap; filter: drop-shadow(0 0 .125em rgba(0, 0, 0, .3)); transition: background .2s ease-out; } .vertical #feature-brand-stylej.out #menu { background: rgba(var(--key_color), 1); filter: none; } .vertical #feature-brand-stylej #menu::before, .vertical #feature-brand-stylej #menu::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4em; height: 3px; background: #FFF; transition: all .3s ease-out; } .vertical #feature-brand-stylej #menu::before { transform: translateX(-50%) translateY(-5px); } .vertical #feature-brand-stylej #menu::after { transform: translateX(-50%) translateY(5px); } .vertical #feature-brand-stylej #navbar.opened #menu::before { transform: translateX(-50%) rotate(45deg); } .vertical #feature-brand-stylej #navbar.opened #menu::after { transform: translateX(-50%) rotate(-45deg); } /**/ .vertical #feature-brand-stylej #sitemap { display: none; /**/ position: fixed; z-index: 1; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; padding: 8rem calc(var(--space_6_3) - 1em) var(--space_6_3); background: rgba(var(--key_color), 1); list-style: none; transition: opacity 2s ease-out; opacity: 0; } .vertical #feature-brand-stylej #navbar.opened #sitemap { display: block; opacity: 1; overflow-y: scroll; } .vertical #feature-brand-stylej #navbar:not(.opened) #sitemap a { pointer-events: none; } .vertical #feature-brand-stylej #sitemap .menu { list-style: none; margin: 0; padding: var(--space_6_3) calc(var(--space_6_3) - 1em) calc(var(--space_6_3) / 2); background: #FFF; } .vertical #feature-brand-stylej #sitemap .menu a { display: flex; align-items: center; justify-content: center; /**/ position: relative; padding: 2rem; box-shadow: inset 0 -1px 0 rgba(var(--key_color), .5); } .vertical #feature-brand-stylej #sitemap .menu li:first-child a { box-shadow: inset 0 1px 0 rgba(var(--key_color), .5), inset 0 -1px 0 rgba(var(--key_color), .5); } .vertical #feature-brand-stylej #sitemap .menu a::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 3px solid rgba(var(--key_color), 1); transition: opacity .2s ease-out; opacity: 0; } .vertical #feature-brand-stylej #sitemap .menu .l.s { width: 1em; } .vertical #feature-brand-stylej #sitemap .menu img { display: block; width: auto; height: 3.75vw; } /**/ .vertical #feature-brand-stylej #sitemap .sns { display: flex; align-items: center; justify-content: center; /**/ list-style: none; margin: 0; padding: calc(var(--space_6_3) / 2) var(--space_6_3) var(--space_6_3); background: #FFF; } .vertical #feature-brand-stylej #sitemap .sns li { margin: 0 1em; } .vertical #feature-brand-stylej #sitemap .sns a { overflow: hidden; display: block; padding: .75em; background: rgba(var(--key_color), 1); border-radius: 50%; } .vertical #feature-brand-stylej #sitemap .sns svg { display: block; width: 5vw; height: 5vw; fill: #FFF; } /**/ @media (any-hover: hover) { .vertical #feature-brand-stylej #sitemap .menu a:hover::before { opacity: 1; } /**/ } @media (any-hover: none) { .vertical #feature-brand-stylej #sitemap .menu a:active::before { opacity: 1; } /**/ } /*------------------------------------------------------------------------------ 本文共通 ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_content>section { padding: calc(var(--space_6_3) * 1.5) var(--space_6_3); } #feature-brand-stylej #site_content>section>*:first-child { margin-top: 0 !important; } #feature-brand-stylej #site_content>section>*:last-child { margin-bottom: 0 !important; } #feature-brand-stylej #site_content h2 { --size: 4rem; /**/ display: flex; justify-content: center; flex-wrap: wrap; /**/ margin: 0 auto calc(var(--size) / 2); line-height: 1.25; font-size: 100%; font-feature-settings: "palt"; color: rgba(var(--heading_color), 1); } #feature-brand-stylej #concept h2 img, #feature-brand-stylej #collection h2 img, #feature-brand-stylej #detail h2 img, #feature-brand-stylej #movie h2 img { filter: brightness(300%); } #feature-brand-stylej #site_content h3 { --size: 2rem; /**/ margin: 0 auto 1.5rem; text-align: center; font-size: 100%; } #feature-brand-stylej #site_content h2 img, #feature-brand-stylej #site_content h3 img { vertical-align: bottom; display: inline-block; width: auto; height: var(--size); } @media (max-width: 1023px) { #feature-brand-stylej #site_content h2 { --size: 8vw; } #feature-brand-stylej #site_content h3 { --size: 6.5vw; } /**/ } /*------------------------------------------------------------------------------ CONCEPT ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ #feature-brand-stylej #concept { --heading_color: 255, 255, 255; /**/ padding-bottom: 0 !important; text-align: center; background: rgba(var(--key_color), 1); color: rgba(var(--heading_color), 1); } /* リード文 ------------------------------------------------------------------------------*/ #feature-brand-stylej #concept .lead { position: relative; padding: 4rem 0 calc(4rem - (var(--line_height) - 1) / 2 * 1em); } #feature-brand-stylej #concept .lead::before, #feature-brand-stylej #concept .lead::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 2rem; background: rgba(var(--heading_color), 1); transform: translateX(-50%); } #feature-brand-stylej #concept .lead::after { top: auto; bottom: 0; } #feature-brand-stylej #concept .lead h3 .l { margin: .25em; } @media (max-width: 1023px) { #feature-brand-stylej #concept .lead p { text-align: justify; } #feature-brand-stylej #concept .lead p br { display: none; } /**/ } /*------------------------------------------------------------------------------ COLLECTION ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ #feature-brand-stylej #collection { --heading_color: 255, 255, 255; /**/ display: flex; flex-direction: column; /**/ overflow: hidden; position: relative; padding-bottom: 0 !important; background: rgba(var(--key_color), 1); color: #FFF; } #feature-brand-stylej #collection>* { position: relative; z-index: 2; } #feature-brand-stylej #collection::before { content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 50em; background: rgba(var(--key_color), 1); } /* タイトル ------------------------------------------------------------------------------*/ #feature-brand-stylej #collection h2 { position: relative; z-index: 3; margin: 0; transform: translateY(50%); } #feature-brand-stylej #site_content>#collection>*:first-child { margin-top: calc(var(--size) * -1) !important; } /* アイテム ------------------------------------------------------------------------------*/ #feature-brand-stylej #collection img { display: block; width: 100%; height: auto; } #feature-brand-stylej #collection-2, #feature-brand-stylej #collection-3, #feature-brand-stylej #collection-4, #feature-brand-stylej #collection-5 { display: flex; flex-wrap: wrap; /**/ margin-top: 6em !important; } /**/ #feature-brand-stylej #collection-1 { position: relative; max-width: calc(60rem + var(--space_6_3) * 2); padding: 0 var(--space_6_3) calc(var(--space_6_3) / 2); color: rgba(var(--key_color), 1); margin-top: 6em; } #feature-brand-stylej #collection-1>* { position: relative; z-index: 2; } #feature-brand-stylej #collection-1::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 100vw; height: calc(50% + 15rem); background: #FFF; transform: translateX(-50%); } /**/ #feature-brand-stylej #collection-2 { flex-direction: row; justify-content: center; /**/ max-width: 48rem; margin: 0 auto; } #feature-brand-stylej #collection-2 figcaption { width: 100%; text-align: right; white-space: nowrap; } /**/ #feature-brand-stylej #collection-3 { align-items: center; /**/ margin: 0 auto 0 0; } #feature-brand-stylej #collection-3 img { max-width: 48rem; } #feature-brand-stylej #collection-3 figcaption { margin-left: 1em; white-space: nowrap; } /**/ #feature-brand-stylej #collection-4 { align-items: center; /**/ margin: 0 0 0 auto; } #feature-brand-stylej #collection-4 img { order: 2; max-width: 48rem; } #feature-brand-stylej #collection-4 figcaption { order: 1; margin-right: 1em; text-align: right; white-space: nowrap; } /**/ #feature-brand-stylej #collection-5 { align-items: center; /**/ position: relative; padding-bottom: 12rem; color: rgba(var(--key_color), 1); } #feature-brand-stylej #collection-5>* { position: relative; z-index: 2; } #feature-brand-stylej #collection-5 img { max-width: 48rem; } #feature-brand-stylej #collection-5 figcaption { margin-top: 30rem; margin-left: 1em; white-space: nowrap; } #feature-brand-stylej #collection-5::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 100vw; height: calc(50% + 12rem); background: #FFF; transform: translateX(-50%); } /* BP ------------------------------------------------------------------------------*/ @media (max-width: 1560px) { #feature-brand-stylej #collection-5 { display: block; max-width: 100%; } #feature-brand-stylej #collection-5 figcaption { margin: .75em 0 0; } /**/ } @media (min-width: 1281px) { #feature-brand-stylej #collection-3 figcaption, #feature-brand-stylej #collection-5 figcaption { display: flex; flex-direction: column; } /**/ } @media (max-width: 1280px) { #feature-brand-stylej #collection-2, #feature-brand-stylej #collection-3, #feature-brand-stylej #collection-4, #feature-brand-stylej #collection-5 { display: block; max-width: 100%; } #feature-brand-stylej #collection-1 { max-width: inherit; width: calc(100% + var(--space_6_3) * 2); margin: 5em 0 0 calc(var(--space_6_3) * -1); padding: 0; } #feature-brand-stylej #collection-1 figcaption { padding: 0 var(--space_6_3); } #feature-brand-stylej #collection-5 { padding-bottom: 6rem; } #feature-brand-stylej #collection figcaption { display: block; margin: .75em 0 0; text-align: center; white-space: initial; font-size: 87.5%; } #feature-brand-stylej #collection figcaption .l::after { content: ','; display: inline-block; width: 1em; text-align: left; } #feature-brand-stylej #collection figcaption .l:last-child:after { display: none; } /**/ } /*------------------------------------------------------------------------------ DETAIL ------------------------------------------------------------------------------*/ #feature-brand-stylej #detail { --heading_color: 255, 255, 255; padding: var(--space_6_3) 0; background: rgba(var(--key_color), 1); color: #FFF; } #feature-brand-stylej #detail .wrapper { max-width: calc(48rem + (var(--space_6_3) - 1rem) * 2); margin: var(--space_4_2) auto 0; padding: var(--space_6_3); background: #FFF; color: rgba(var(--key_color), 1); } #feature-brand-stylej #detail .wrapper section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 2em; align-items: start; position: relative; } #feature-brand-stylej #detail .wrapper section+section { margin-top: var(--space_6_3); } #feature-brand-stylej #detail .wrapper section+section::before { content: ''; position: absolute; left: -2em; top: calc(var(--space_6_3) / 2 * -1); width: calc(100% + 4em); height: 1px; background: rgba(var(--key_color), .5); } #feature-brand-stylej #detail .wrapper section .text { align-self: center; } #feature-brand-stylej #detail .wrapper section h3 { display: flex; flex-wrap: wrap; margin-bottom: 0; } #feature-brand-stylej #detail .wrapper section h3 .l { margin: 0 .4em .5em 0; } #feature-brand-stylej #detail .wrapper section:nth-child(1) h3 img { height: calc((90 / 78) * var(--size)); } #feature-brand-stylej #detail .wrapper section p { margin: 1.4em 0 0; text-align: justify; } #feature-brand-stylej #detail .wrapper section figure { grid-column: 2; /**/ width: 100%; border: 1px solid rgba(var(--key_color), 1); } #feature-brand-stylej #detail .wrapper section figure img { display: block; width: 100%; height: auto; } /* BP ------------------------------------------------------------------------------*/ @media (max-width: 1023px) { #feature-brand-stylej #detail .wrapper { width: calc(100% + 4rem); margin-left: -2rem; } #feature-brand-stylej #detail .wrapper section { display: flex; flex-direction: column; } #feature-brand-stylej #detail .wrapper section+section::before { display: none; } #feature-brand-stylej #detail .wrapper section figure { order: 1; margin-bottom: 2rem; } #feature-brand-stylej #detail .wrapper section .text { order: 2; } #feature-brand-stylej #detail .wrapper section h3 { justify-content: center; } #feature-brand-stylej #detail .wrapper section p { margin: .4em 0 0; } /**/ } /*------------------------------------------------------------------------------ STORY ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ #feature-brand-stylej #story { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } /* 込められたメッセージ ------------------------------------------------------------------------------*/ #feature-brand-stylej #message { position: relative; padding: 4rem 0 0; } #feature-brand-stylej #message::before { --heading_color: var(--key_color); content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 2rem; background: rgba(var(--heading_color), 1); transform: translateX(-50%); } #feature-brand-stylej #message>*:not(figure) { max-width: calc(48rem + var(--space_6_3) * 2); margin: 0 auto; padding: 0 var(--space_6_3); } /**/ #feature-brand-stylej #message h3 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /**/ padding: -.25em 0; } #feature-brand-stylej #message h3 .l { margin: .25em; } #feature-brand-stylej #message h3 .l:nth-child(1) img { height: calc((121 / 102) * var(--size)); } /**/ #feature-brand-stylej #message>p { margin: 1.4em auto var(--space_6_3); text-align: justify; } #feature-brand-stylej #message figure { width: 100%; margin: 0; padding: 0; } #feature-brand-stylej #message img { display: block; width: 100%; height: auto; } /* パートナーメーカー ------------------------------------------------------------------------------*/ #feature-brand-stylej #partner, #feature-brand-stylej #partner h3:after { --heading_color: 255, 255, 255; color: #FFF; } #feature-brand-stylej #partner { padding: var(--space_6_3) 0; background: rgba(var(--key_color), 1); } /**/ #feature-brand-stylej #partner h3 { position: relative; max-width: calc(48rem + var(--space_6_3) * 2); margin: 0 auto; padding: 0 var(--space_6_3) 4rem; text-align: center; line-height: 1.25; font-size: 100%; font-feature-settings: "palt"; } #feature-brand-stylej #partner h3::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 2rem; background: rgba(var(--heading_color), 1); transform: translateX(-50%); } #feature-brand-stylej #partner h3 small { display: block; margin: 0 0 1em; letter-spacing: .1em; font-weight: normal; font-size: 100%; } #feature-brand-stylej #partner h3 br { display: none; } #feature-brand-stylej #partner h3 strong { display: flex; justify-content: center; flex-wrap: wrap; } #feature-brand-stylej #partner h3 strong .l { margin: .375em; } #feature-brand-stylej #partner h3 strong .l:nth-child(1) { margin-bottom: .125em; } #feature-brand-stylej #partner h3 strong .l:nth-child(1) img { height: calc((126 / 102) * var(--size)); } /**/ #feature-brand-stylej #partner .maker { position: relative; max-width: calc(48rem + var(--space_6_3) * 2); margin: 0 auto; padding: var(--space_6_3); } #feature-brand-stylej #partner .maker::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, .5); } #feature-brand-stylej #partner .maker h4 { display: flex; flex-direction: column; justify-content: center; /**/ margin: 0 0 2rem; text-align: center; line-height: 1.25; font-size: 100%; } #feature-brand-stylej #partner .maker h4 br { display: none; } #feature-brand-stylej #partner .maker h4 small { margin-top: 2em; } #feature-brand-stylej #partner .maker h4 img { display: block; width: auto; height: 2rem; } #feature-brand-stylej #partner #boston-club h4 img { height: calc((200 / 74) * 2rem); } #feature-brand-stylej #partner #sugihara-syouten h4 img { height: calc((80 / 74) * 2rem); } #feature-brand-stylej #partner #episo h4 img { height: calc((84 / 74) * 2rem); } #feature-brand-stylej #partner .maker figure { margin: 1em 0; } #feature-brand-stylej #partner .maker figure img { display: block; width: 100%; height: auto; margin: 0 0 1.4em; } #feature-brand-stylej #partner .maker figcaption { text-align: justify; } /* BOSTON CLUB ------------------------------------------------------------------------------*/ #feature-brand-stylej #partner #boston-club { --key_color: 144, 150, 139; /**/ padding-top: var(--space_4_2); padding-bottom: 0; } #feature-brand-stylej #partner #boston-club::after { display: none; } #feature-brand-stylej #partner #boston-club .voice { margin-top: var(--space_6_3); margin-left: calc((var(--space_6_3) - 1rem) * -1); margin-right: calc((var(--space_6_3) - 1rem) * -1); padding: var(--space_6_3); background: #FFF; font-family: var(--font_mincho); color: rgba(var(--key_color), 1); } #feature-brand-stylej #partner #boston-club .voice .header { display: flex; /**/ line-height: 1.5; font-size: 112.5%; } #feature-brand-stylej #partner #boston-club .voice .header .wrapper { flex-grow: 1; flex-shrink: 1; /**/ width: 50%; margin-right: 2em; } #feature-brand-stylej #partner #boston-club .voice .header h5 { display: flex; flex-direction: column; flex-wrap: wrap; margin: 0 0 0 -.5em; font-size: 100%; } #feature-brand-stylej #partner #boston-club .voice .header h5 .l { margin: .5em; } #feature-brand-stylej #partner #boston-club .voice .header h5 img { display: block; width: auto; height: 2rem; } #feature-brand-stylej #partner #boston-club .voice .header p { margin: 1.4em 0; font-size: 112.5%; } #feature-brand-stylej #partner #boston-club .voice .header figure { flex-grow: 1; flex-shrink: 1; /**/ position: relative; width: 50%; margin: 0; } #feature-brand-stylej #partner #boston-club .voice .header figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } #feature-brand-stylej #partner #boston-club .voice .text { width: 100%; margin-top: calc(var(--space_6_3) / 2); line-height: 1.8; } #feature-brand-stylej #partner #boston-club .voice p { text-align: justify; } @media (max-width: 1023px) { #feature-brand-stylej #partner #boston-club .voice { margin-left: calc(var(--space_6_3) * -1); margin-right: calc(var(--space_6_3) * -1); } #feature-brand-stylej #partner #boston-club .voice .header { display: flex; flex-direction: column; } #feature-brand-stylej #partner #boston-club .voice .header .wrapper { width: 100%; margin-right: 0; } #feature-brand-stylej #partner #boston-club .voice .header h5 { flex-wrap: wrap; flex-direction: row; justify-content: center; } #feature-brand-stylej #partner #boston-club .voice .header h5 img { height: 6.5vw; } #feature-brand-stylej #partner #boston-club .voice .header p { text-align: center; } #feature-brand-stylej #partner #boston-club .voice .header figure { width: 100%; height: auto; } #feature-brand-stylej #partner #boston-club .voice .header figure img { position: relative; left: auto; top: auto; display: block; width: 100%; height: auto; margin: 0; } /**/ } /* 協力企業 ------------------------------------------------------------------------------*/ #feature-brand-stylej #partner .cooperative-companies { max-width: calc(60rem + var(--space_6_3) * 2); margin: 0 auto; padding: var(--space_6_3); } #feature-brand-stylej #partner .cooperative-companies h4 { margin: 0 0 2rem; text-align: center; line-height: 1.25; font-size: 100%; } #feature-brand-stylej #partner .cooperative-companies h4 img { display: inline-block; width: auto; height: 2rem; } #feature-brand-stylej #partner .cooperative-companies ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; list-style: none; margin: 0; padding: 0; } #feature-brand-stylej #partner .cooperative-companies li { margin: 0; background: #FFF; } #feature-brand-stylej #partner .cooperative-companies li img { display: block; width: 100%; height: auto; } @media (max-width: 1023px) { #feature-brand-stylej #partner .cooperative-companies h4 img { height: 6.5vw; } /**/ } @media (max-width: 720px) { #feature-brand-stylej #partner .cooperative-companies ul { grid-template-columns: repeat(2, 1fr); } /**/ } /*------------------------------------------------------------------------------ TRY-ON RESERVATION ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ @media (max-width: 1023px) { #feature-brand-stylej #reservation { overflow: hidden; padding-left: calc(var(--space_6_3) - 3rem) !important; padding-right: calc(var(--space_6_3) - 3rem) !important; } #feature-brand-stylej #reservation .mod-spacer-section { margin-top: 2rem; } /**/ } /* タイトル ------------------------------------------------------------------------------*/ #feature-brand-stylej #reservation h2 { display: block; text-align: center; } #feature-brand-stylej #reservation h2 .l { margin: 0 2rem 1rem; } /* リスト ------------------------------------------------------------------------------*/ #feature-brand-stylej #reservation a { text-decoration: none; } /**/ #feature-brand-stylej #product h2 { margin: 2em auto 0; font-weight: normal; font-size: 175%; } @media (max-width: 720px) { #feature-brand-stylej #product h2 { font-size: 4.5vw; } /**/ } /*------------------------------------------------------------------------------ SPECIAL MOVIE ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ #feature-brand-stylej #movie { --heading_color: 255, 255, 255; background: rgba(var(--key_color), 1); } /* タイトル ------------------------------------------------------------------------------*/ #feature-brand-stylej #movie h2 { padding: -.5em 0; } #feature-brand-stylej #movie h2 .l { margin: .5em; } #feature-brand-stylej #movie h2 img { display: block; width: auto; height: 2rem; } /* 動画リスト ------------------------------------------------------------------------------*/ #feature-brand-stylej #movie .movies { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; } #feature-brand-stylej #movie .movies figure { margin: 0; } #feature-brand-stylej #movie .movies a { display: block; } #feature-brand-stylej #movie .movies .img { overflow: hidden; position: relative; display: block; width: 100%; height: 0; margin: 0; padding: 56.25% 0 0; background: #FFF; } #feature-brand-stylej #movie .movies img { position: absolute; z-index: 1; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; transition: opacity .2s ease-out; } #feature-brand-stylej #movie .movies svg { position: absolute; z-index: 2; left: 50%; top: 50%; width: 3em; height: 3em; transform: translateX(-50%) translateY(-50%); fill: #FFF; filter: drop-shadow(0 0 .25em rgba(0, 0, 0, .3)); } #feature-brand-stylej #movie .movies figcaption { margin: .5em 0 0; text-align: center; font-size: 100%; color: rgba(var(--heading_color), 1); } @media (any-hover: hover) { #feature-brand-stylej #movie .movies a:hover img { opacity: .7; } /**/ } @media (any-hover: none) { #feature-brand-stylej #movie .movies a:active img { opacity: .7; } /**/ } @media (max-width: 720px) { #feature-brand-stylej #movie .movies { grid-template-columns: 1fr; } /**/ } /*------------------------------------------------------------------------------ サイトフッター ------------------------------------------------------------------------------*/ /* 親コンテナ ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_footer { padding: 1em; background: rgba(var(--key_color), 1); color: #003d6d; } #feature-brand-stylej #site_footer address { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /**/ font-style: normal; } #feature-brand-stylej #site_footer address>* { margin: 1em; } @media (max-width: 1023px) { #feature-brand-stylej #site_footer address { flex-direction: column; } /**/ } /* ロゴ ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_footer .logo a { display: block; } #feature-brand-stylej #site_footer .logo img { display: block; width: auto; height: 2.4rem; } /* SNS ------------------------------------------------------------------------------*/ #feature-brand-stylej #site_footer .sns { display: flex; align-items: center; list-style: none; margin: 1em .5em; padding: 0; } #feature-brand-stylej #site_footer .sns li { margin: .5em; } #feature-brand-stylej #site_footer .sns a { display: block; color: #003d6d; } #feature-brand-stylej #site_footer .sns svg { display: block; width: 1.6em; height: 1.6em; fill: #003d6d; }