/* ======================================= // ● Common // ▼ Webfont ▼ Linkbio ▼ Teaser ▼ Soon ▼ Recapthca ▼ MembNone ▼ Loading ▼ Cursor ▼ Paywall ▼ Animation ▼ Header ▼ FixedMenu ▼ DrawerMenu ▼ Footer ▼ Humb ▼ Search ▼ MusicNav --- // ● listSect // ▼ MV ▼ listPick ▼ listBase ▼ listLatest ▼ listGrid - ▼ listFeature ▼ listAnthology - ▼ listMagazine ▼ listEdition ▼ listFive ▼ l-listThree ▼ l-listMusic ▼ l-listNews ▼ l-listRelated --- // ● Archive // ▼ ArchiveCommon - ■ l-archiveHead ■ l-archiveSlideshow ■ l-archiveCont ■ l-archiveMusic ■ l-archiveTags ■ Pagenation - ▼ Feature - ■ l-archiveFeature ■ l-archiveTheme --- // ● Article // ▼ Article Base - ■ ArticleCommon ■ l-article_arrow ■ l-article__right ■ l-article__mv ■ l-articleIntro ■ l-articleMovie ■ l-article__navigation ■ l-article__btn ■ l-articleSeries ■ l-creditIntro ▼ listSection ▼ listEdit ▼ listFour ■ l-creditFull ■ l-articleProf ■ l-articleBack ■ l-articlePoetxt ■ toc_container ■ l-articleBtn ■ l-articleShare ■ l-articleInfo ■ l-articleRef ■ l-category ■ l-articleCredit ■ l-articleGallery ■ l-distribute - ▼ Article Cont - ■ l-articleCont - ▼ Article Dev - ■ l-article__container - ▼ Preoder - ▼ Article Magazine - - ▼ Article Music - ■ l-article__musicEmbed - ▼ Article News - ■ NewsCommon ■ NewsTilte - ▼ Article Feature ▼ Article Page --- // ● Page // ▼ SiteInfo - ▼ About - ■ Flow - ▼ PageCommon - ■ l-pageCircle - ▼ Philosophy ▼ Membership - ■ MemberHead ■ l-subscBg ■ l-subscIntro ■ l-subscNav ■ l-subscTable ■ Guide ■ FAQ ■ Login - ▼ Stockist ▼ Outline - ■ l-pageOutline - ▼ Contact ▼ SitePolicy ▼ Retreat --- // ● Objects // ▼ Bread ▼ listCont ▼ musicCont ▼ c-btn ▼ SNS ▼ hover ▼ Member - ■ memberBox ======================================= // ● Common // /* ><><><><><><><><><><><><><><><><> ▼ Webfont ><><><><><><><><><><><><><><><><> /* --------------------------- ■ common --------------------------- */ /* ><><><><><><><><><><><><><><><><> ▼ Linkbio ><><><><><><><><><><><><><><><><> /* --------------------------- ■ common --------------------------- */ body.linkbio header, body.linkbio footer, body.linkbio .c-bread, body.linkbio .l-fixedMenu { display: none; } /* common */ body.linkbio main { background: #f4f4f4; padding-top: 0.6rem; padding-bottom: 2.9rem; } /* linkWrap */ .l-linkWrap { max-width: 585px; margin: 0 auto; text-align: center; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3); background: #fff; padding: 0px 2.5rem 0px; } /* --------------------------- ■ l-linkHead --------------------------- */ /* --- common --- */ .l-linkHead { padding-top: 50px; } /* --- icon --- */ .l-linkHead__icon { display: inline-block; width: 120px; height: 120px; position: relative; border-radius: 100%; } .l-linkHead__icon:before { content: ""; position: absolute; border: 1px solid #dfdfdf; border-radius: 100%; width: 103%; height: 103%; transform: translate(-50%,-50%); left: 50%; top: 50%; } .l-linkHead__icon figure { width: 100%; height: 100%; overflow: hidden; border-radius: 100%; margin-top: 0.1rem; } .l-linkHead__icon figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center; transform: scale(1.065); } /* --- title --- */ .l-linkHead__title { font-size: 15.4px; font-family: minion-pro-display,"Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 600; margin-top: 25px; text-transform: uppercase; letter-spacing: 0.29em; } .l-linkHead__title span { font-family: adobe-garamond-pro, sans-serif; display: block; margin-top: 1.1rem; font-weight: 400; font-size: 76%; text-transform: initial; letter-spacing: 0.095em; color: #a18d70; } /* --- sns --- */ ul.l-linkHead__sns { display: flex; justify-content: center; margin-top: 18px; display: none; } .l-linkHead__sns li { font-size: 24px; } .l-linkHead__sns li + li { margin-left: 15px; } /* --- btn --- */ .l-linkHead__btn + .l-linkHead__btn { margin-top: 5px; } .l-linkHead__btn a { display: block; width: 93%; margin: 0 auto; padding: 31px 0 31px; border: 1px solid #f4f4f4; /* background: #7a7a7a; color: #fff;*/ font-size: 11px; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.35em; border-radius: 4px; text-transform: uppercase; } .l-linkHead__btn:nth-child(3) a { margin-top: 65px; } .l-linkHead__btn:last-child a { margin-bottom: 57px; } .l-linkHead__btn.last a { background: #ffffff; border: 1px solid #ececec; color: #000; background: #585552; color: #fff; } /* --------------------------- ■ l-linkTab --------------------------- */ /* --- menu --- */ .l-linkTab { border: 0.1rem solid #ececec; box-sizing: border-box; width: 100%; margin: 0rem auto 1.3rem; display: none; } .l-linkTab .tab { display: flex; justify-content: center; font-size: 1.25rem; font-weight: 500; font-family: Arial; text-transform: capitalize; letter-spacing: 0.09em; } .l-linkTab .tab li { width: 50%; padding: 2.5rem; cursor: pointer; background: #f2f2f2; transition: all ease .35s; } .l-linkTab .tab li.select { background: #7a7a7a; } .l-linkTab .tab li.select span { color: #fff; } .l-linkTab .tab li:not(.select):hover { background: #e7e7e7; } /* arrow */ .l-linkTab .tab span { position: relative; display: inline-block; padding-left: 1.4rem; } .l-linkTab .tab span:before { content: ""; background-image: url(../../assets/img/common/arrowRight.svg); display: block; position: absolute; opacity: 0.8; top: 25%; left: 0; transform: translate(-50%,0%) rotate(90deg); background-size: cover; background-position: center center; width: 0.7rem; height: 0.7rem; z-index: 5; } .l-linkTab .tab .select span:before { background-image: url(../../assets/img/common/arrowRightwh.svg); } /* --------------------------- ■ l-linkSelect --------------------------- */ .l-linkSelect.hide { display: none; } /* --------------------------- ■ l-linkList --------------------------- */ ul.l-linkList { display: flex; flex-flow: wrap; } ul.l-linkList li { width: calc(33.3333333% - 4px); margin: 2px; height: 192px; border: 0.1rem solid #ececec; box-sizing: border-box; transition: all ease .5s; } ul.l-linkList li:hover { opacity: 0.7; } ul.l-linkList li figure { width: 100%; height: 100%; } ul.l-linkList li figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center; } /* --------------------------- ■ l-linkText --------------------------- */ /* common */ ul.l-linkText { width: 99%; margin: 2rem auto 0; } ul.l-linkText li { display: flex; align-items: center; transition: all ease .35s; } ul.l-linkText li:hover { opacity: 0.8; } ul.l-linkText li + li { border-top: 1px solid #f3f3f3; padding-top: 1.3rem; margin-top: 1.3rem; } .next_posts_link.linkText { display: none; } /* image */ ul.l-linkText li .image { width: 14.5rem; height: 14.5rem; } ul.l-linkText li figure { width: 100%; height: 100%; } ul.l-linkText li figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center; } /* cont */ ul.l-linkText li .cont { text-align: left; margin-left: 4.7rem; margin-top: -1.9rem; width: 60%; } /* sub */ ul.l-linkText li .type { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.55rem; font-weight: 500; letter-spacing: 0.18em; display: block; line-height: 1.7; font-variant: small-caps; text-transform: lowercase; margin-left: 0.2rem; display: flex; align-items: center; color: #8a7f70; } /* title */ ul.l-linkText li .title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.06em; width: 100%; margin: 0 auto; margin-top: 0.7rem; } /* --------------------------- ■ l-linkCopy --------------------------- */ .l-linkCopy { font-size: 1.1rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.8; letter-spacing: 0.065em; opacity: 0.4; margin-top: 5.6rem; padding-bottom: 4.8rem; } /* ><><><><><><><><><><><><><><><><> ▼ Teaser ><><><><><><><><><><><><><><><><> /* --------------------------- ■ outline --------------------------- */ body.teaser .l-articleOutline p.l-articlePageIntro__desc { display: none; } body.teaser .l-articleOutline .l-articlePageIntro__btn { display: none; } body.teaser .l-pageOutline { border-top: 0px dotted #ebebeb; border-bottom: 0px dotted #ebebeb; margin-top: initial; padding-top: initial; padding-bottom: 12rem; } /* ><><><><><><><><><><><><><><><><> ▼ Soon ><><><><><><><><><><><><><><><><> /* --------------------------- ■ common --------------------------- */ .soon { font-size: 1.425rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; opacity: 0.5; color: #868686; letter-spacing: 0.05em; text-align: center; width: 81%; margin: 10.4rem auto 14.7rem; } /* ><><><><><><><><><><><><><><><><> ▼ Recapthca ><><><><><><><><><><><><><><><><> /* --------------------------- ■ common --------------------------- */ .grecaptcha-badge { visibility: hidden; } /* ><><><><><><><><><><><><><><><><> ▼ MembNone ><><><><><><><><><><><><><><><><> /* --------------------------- ■ humbMenu & footer --------------------------- */ body.membNone .c-memberBtn { display: none !important; } body.membNone .membUse { display: none !important; } /* --------------------------- ■ header --------------------------- */ body.membNone .l-header__search { right: 11.8rem; } body.membNone .l-fixedMenu .l-header__search { right: 11.4rem; } /* ><><><><><><><><><><><><><><><><> ▼ Loading ><><><><><><><><><><><><><><><><> /* --------------------------- ■ respomsive --------------------------- */ .loadBg.pc { display: flex; } .loadBg.tablet { display: none; } .loadBg.sp { display: none; } /* --------------------------- ■ common --------------------------- */ body { transition: all ease .45s; } body.humb-active { overflow: hidden; } body.pageTrans { opacity: 0; margin-top: 1.5rem; } /* --------------------------- ■ Bg --------------------------- */ body .loadBg { position: fixed; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 99; transition: all ease .35s; } body.load5 .loadBg { opacity: 0; visibility: hidden; } /* --------------------------- ■ Cont --------------------------- */ body.top .loadBg__cont { text-align: center; opacity: 1; transition: all 1.5s cubic-bezier(.275,0,0,1); } body.under .loadBg__cont { display: none; } /* end */ body.load4 .loadBg__cont { transform: translateY(-1vw); opacity: 0; } /* --------------------------- ■ Logo --------------------------- */ /* --- common --- */ .loadBg__cont .logo { width: 96px; height: 96px; border-radius: 100%; border: 0px solid #000; display: flex; align-items: center; position: relative; justify-content: center; margin: 0 auto; } /* --- icon --- */ .loadBg__cont .logo img { width: 60px; height: 60px; margin-top: 5px; } .loadBg__cont .logo .icon { overflow: hidden; } /* Pre */ .loadBg__cont .logo img { opacity: 0; transform: rotate(0deg); transition: all 2s ease; } /* start */ body.load1 .loadBg__cont .logo img { opacity: 0.4; transform: rotate(360deg); filter: blur(0); } /* end */ body.load3 .loadBg__cont .logo img { opacity: 0.4; transition-delay: 0.2s; } /* --- circle --- */ .loadBg__cont .logo svg.loadCircle { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /* 01 */ /* Pre */ .loadBg__cont .logo svg.circle1 { fill:transparent; stroke:rgba(0,0,0,0.15); opacity: 0; } .loadBg__cont .logo svg.circle1 circle{ stroke-dasharray:0 276; } /* start */ body.load1 .loadBg__cont .logo svg.circle1 circle { stroke-dasharray:276 276; transition:all 2s ease; transition-delay: 0s; } body.load1 .loadBg__cont .logo svg.circle1 { stroke:rgba(0,0,0,0.15); transition:all 2s ease; transition-delay: 0s; opacity: 1; } /* 02 */ /* Pre */ .loadBg__cont .logo svg.circle2 { fill:transparent; stroke:rgba(0,0,0,0.35); opacity: 0; } .loadBg__cont .logo svg.circle2 circle{ stroke-dasharray:0 301; } /* start */ body.load1 .loadBg__cont .logo svg.circle2 circle { stroke-dasharray:301 301; transition:all 2s ease; transition-delay: 0s; } body.load1 .loadBg__cont .logo svg.circle2 { stroke:rgba(0,0,0,0.35); transition:all 2s ease; transition-delay: 0s; opacity: 1; } /* 03 */ /* Pre */ .loadBg__cont .logo svg.circle3 { fill:transparent; } .loadBg__cont .logo svg.circle3 circle{ stroke-dasharray:0 301; transition: all 1.5s cubic-bezier(.275,0,0,1); } /* start */ body.load3 .loadBg__cont .logo svg.circle3 circle { stroke-dasharray:301 301; } body.load3 .loadBg__cont .logo svg.circle3 { stroke:rgba(0,0,0,0.7); } /* --------------------------- ■ txt --------------------------- */ .loadBg__cont .txt { font-size: 1.5rem; text-transform: uppercase; margin-top: 17px; line-height: 1; letter-spacing: 0.57em; margin-left: 5px; } /* Pre */ .loadBg__cont .txt { overflow: hidden; display: inline-block; } .loadBg__cont .txt img { width: 77%; transform: translateY(105%); opacity: 0; transition: all 1.5s cubic-bezier(.275,0,0,1); transition-delay: 0.2s; } /* end */ body.load3 .loadBg__cont .txt img { transform: translateY(0%); opacity: 1; } /* --- progress --- */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: all 1s ease; } .pace-inactive { display: none; } .pace .pace-progress { background: rgba(0,0,0,1); position: fixed; z-index: 9000; top: 0px; right: 100%; width: 100%; height: 1px; opacity: 1; } /* ><><><><><><><><><><><><><><><><> ▼ Cursor ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ .btnCursor { cursor: pointer; } #stalker { position: fixed; -webkit-transform:translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; } /* ------ drag ------- */ .drag { cursor:grab; } #stalker .circle { position: absolute; -webkit-transform:translate(-50%, -50%); transform: translate(-50%, -50%); border: 0px solid #d7d7d7; width: 0px; height: 0px; border-radius: 100%; opacity: 0; pointer-events: none; z-index: 99; transition: all ease .5s; } #stalker.active .circle { border: 1px solid #f0f0f0; background-color: #fff; width: 11rem; height: 11rem; opacity: 0.8; } #stalker.active .circle:before { content:""; position: absolute; top: 49%; right: 27%; width: 6px; height: 6px; border-top: 2px solid #a49f9a; border-right: 2px solid #a49f9a; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); opacity: 0.8; } #stalker.active .circle:after { content:""; position: absolute; top: 44.6%; left: 28%; width: 6px; height: 6px; border-top: 2px solid #a49f9a; border-right: 2px solid #a49f9a; -webkit-transform: rotate(-135deg) translateY(-50%); transform: rotate(-135deg) translateY(-50%); opacity: 0.8; } /* ><><><><><><><><><><><><><><><><> ▼ Paywall ><><><><><><><><><><><><><><><><> /* --------------------------- ■ None --------------------------- */ .codoc-more, .codoc-buy-creator, .codoc-subscription-articlelist, .codoc-copyright { display: none !important; } /* --------------------------- ■ Subscribe --------------------------- */ body .codoc-connect-widget-subscribed { display: none !important; } /* --------------------------- ■ Modal --------------------------- */ .codoc-modal-mask { height: 100vh !important; } .wrapper.codoc-modal-transition-rescue { position: relative; z-index: 6; } /* --------------------------- ■ Modal / Contents --------------------------- */ /* --- container --- */ .codoc-modal-mask { background-color: rgba(0,0,0,0.7) !important; } .codoc-modal-container { min-width: initial !important; max-width: initial !important; max-height: initial !important; width: 34%; margin: 0 auto !important; background: #fff !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 13%) !important; box-shadow: 0 2px 8px rgb(0 0 0 / 13%) !important; -webkit-transition: all 1s ease !important; transition: all 1s ease !important; overflow: auto !important; } .codoc-modal-container-scroll { padding: 5.7rem 3rem 5.3rem; position: relative; border: 0px solid #ccc; } .codoc-link_area .codoc-link-section { margin-bottom: 3.3rem !important; } .codoc-link_area .codoc-link-section:nth-child(2) { margin-bottom: 0 !important; } /* --- head --- */ .codoc-modal-header>div { position: initial !important; border-bottom: 0 !important; padding:initial !important; } .codoc-modal-header-title { display: none; } /* --- close --- */ .codoc-modal-header>div .codoc-modal-close .codoc-modal-close-icon { position: absolute !important; display: block; width: 2.2rem !important; height: 2.2rem !important; top: 1.1rem; right: 1.8rem; } .codoc-modal-header>div .codoc-modal-close .codoc-modal-close-icon:after, .codoc-modal-header>div .codoc-modal-close .codoc-modal-close-icon:before { width: 1px !important; height: 100% !important; } /* --- body --- */ /* cont */ .codoc-modal-body { width: 100%; margin: 0 auto; padding: initial !important; } .codoc-link_area { max-width: initial !important; } .codoc-modal-container .codoc-modal-body p { width: 100%; font-weight: 700; margin: 0 auto !important; padding-right: 0%; } .codoc-modal-container .codoc-modal-body p a { padding: 2rem 0 !important; font-size: 1.1rem !important; border-radius: 5.2rem !important; } .codoc-link_area .codoc-noentry { background-color: #fff !important; padding: initial !important; } /* title */ .codoc-modal-container .codoc-modal-header-subtitle { font-weight: 700 !important; font-size: 0rem !important; letter-spacing: -0.02em; margin: 0 auto 1.6rem !important; color: #000 !important; } .codoc-link-section:nth-child(1) .codoc-modal-header-subtitle:before { content: "[ 既にアカウントをお持ちの方 ]"; font-size: 1.15rem !important; font-weight: 500 !important; } .codoc-link-section:nth-child(2) .codoc-modal-header-subtitle:before { content: "[ 新規会員登録が必要な方 ]"; font-size: 1.15rem !important; font-weight: 500 !important; } /* btn */ .codoc-link-section + .codoc-noentry { margin-top: -2rem !important; } .codoc-modal-container .codoc-btn-buy-bg { font-size: 1.2rem !important; border-radius: 5.2rem !important; padding: 1.8rem 0 !important; } /* login */ .codoc-modal-container .codoc-link-section:nth-child(1) p a.codoc-btn-buy-bg { background-color: #EAEAEA !important; border: initial !important; color: #000 !important; font-weight: 500 !important; } /* caution */ .codoc-link_area .codoc-noentry p.codoc-noentry-caution { font-size: 1.2rem !important; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; line-height: 1.7; letter-spacing: 0.01em !important; margin-top: 2.2rem !important; color: #000000 !important; } /* --------------------------- ■ Common --------------------------- */ /* --- continue --- */ .codoc-continue { font-size: 1.1rem !important; margin-top: 8.4rem !important; margin-bottom: 0.6rem !important; position: relative !important; justify-content: center !important; margin-right: 0% !important; } .codocTitle + .codoc-continue { display: none !important; } .codoc-continue span:nth-child(1) { font-size: 0; position: relative; padding-left: 3.2rem; display: block; z-index: 1; } .codoc-continue span:nth-child(1):after { content: "この記事は自由課金でお読み頂けます。"; font-size: 1.2rem; letter-spacing: 0.03em; color: #000; font-weight: 500; } .codoc-continue span:nth-child(1):before { content: ""; position: absolute; left: 1.3rem; top: 0.2rem; width: 1rem; height: 1.25rem; display: block; z-index: 1; background-size: cover; background-position: center center; background-image: url(../../assets/img/common/key.svg); } /* debug */ .codoc-buy-wrap + .codoc-continue { display: none !important; } /* buy */ body.buy .codoc-continue span:nth-child(1):after { content: "この記事は単体購入/会員限定の記事です。"; } /* --- shadow --- */ .codoc-continue span { background: #fff; padding: 0 0.8rem; } .codoc-continue .codoc-continue-count { display: none !important; } .codoc-continue:before { content:""; position: absolute !important; width: 100% !important; display: block !important; height: 40rem !important; top: -40rem !important; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important; z-index: 1 !important; } .codoc-continue:after { position: absolute; top: 0.9rem; width: 100%; z-index: 0; margin-left: 0 !important; } /* story */ article.l-articleStPc .codoc-continue:before { background: -moz-linear-gradient(top, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)) !important; background: -webkit-linear-gradient(top, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)) !important; background: linear-gradient(to bottom, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)) !important; z-index: 1 !important; } article.l-articleStPc .codoc-continue span { background: rgba(249, 249, 249, 1); } /* --- common --- */ .wp-block-group { width: 100%; margin: 0 auto; margin-top: 0rem; position: relative; } .codoc-entry .codoc-btn, .codoc-buy, .codoc-subscription-list { max-width: initial !important; } /* --------------------------- ■ Login --------------------------- */ /* --- common --- */ .membBtn { width: 100%; border-bottom: 1px solid #ebedf0; } .membBtn ul { display: flex; width: 86%; margin: 2rem auto 4rem; } .membBtn ul li { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; background-color: #e4e4e4; padding: 1.9rem 0 1.9rem 0; display: block; width: 100%; height: 100%; white-space: nowrap; border-radius: 3.3rem; cursor: pointer; transition: all ease .5s; } .membBtn ul li.subsc { background: #575757; } .membBtn ul li.subsc a { color:#fff; } .membBtn ul li:hover { background-color: #d8d8d8; } .membBtn ul li.subsc:hover { background: #3a3a3a; } .membBtn ul li a { display: block; width: 100%; height: 100%; } .membBtn ul li + li { margin-left: 0.8%; } /* --------------------------- ■ ReadMore --------------------------- */ /* --- common --- */ .codoc-continue + div + .codoc-buy-wrap { display: flex; flex-flow: wrap; text-align: center; margin: 0 auto; padding-bottom: 7rem; padding: 0 1.7rem 0rem; position: relative; } .codoc-continue + div + .codoc-buy-wrap:after { position: absolute; content: ""; border-bottom: 0px solid #ebedf0; display: block; width: 100%; bottom: 0; left: 0; } /* --- caution --- */ /* copy */ .memberCopy { font-size: 2.225rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.03em; width: 81%; margin: 5.4rem auto 0; text-align: left; } .memberCopy span { font-size: 1.15rem; font-family: adobe-garamond-pro,sans-serif; letter-spacing: 0.05em; color: #aea291; display: block; margin-top: 1.2rem; } /* intro */ .memberIntro { font-size: 1.3rem; line-height: 2.1; width: 81%; text-align: justify; margin: 3.8rem auto 0rem; } .memberIntro strong { font-size: 94%; } /* memberBtn */ .memberBtn { font-size: 1.2rem; letter-spacing: 0.05em; line-height: 4.9; color: #fff; background: #605d5d; text-align: center; margin-top: 2.9rem; border-radius: 3.5rem; font-weight: 600; margin-left: -2%; width: 104%; cursor: pointer; transition: all ease .35s; } .memberBtn a { color: #fff; display: block; width: 100%; height: 100%; } .memberBtn:hover { background: #717171; } /* btnList */ .memberBtnlist { width: 87.9%; font-size: 1.25rem; margin: 2.7rem auto 5.1rem; text-align: left; line-height: 2.4; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 3.5rem 1.1rem; } .memberBtnlist ul { display: flex; } .memberBtnlist li { border: 1px solid #ccc; padding: 0rem 2.5rem; background: #fff; border-radius: 2rem; } .memberBtnlist .mark { font-size: 1.6rem; margin-right: 0.3rem; color: #8f8577; } .memberBtnlist li + li { margin-left: 0.7rem; } /* memberSwitch */ .membSwitch { margin-bottom: 4rem; display: block; width: 100%; position: relative; } .membSwitch:before { content: ""; position: absolute; width: 100%; display: block; height: 20rem; top: -20rem; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); z-index: 1; } article.l-articleStPc .membSwitch:before { background: -moz-linear-gradient(top, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); background: -webkit-linear-gradient(top, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); background: linear-gradient(to bottom, rgba(249, 249, 249, 0), rgba(249, 249, 249, 1)); } .membSwitch__btn { position: absolute; width: 7.4rem; height: 7.4rem; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 100%; top: -7.6rem; left: 50%; transform: translateX(-50%); z-index: 2; cursor: pointer; box-shadow: 0px 0px 8px -5px #777777; transition: all .25s ease; } .membSwitch__btn:hover { border: 1px solid #c0c0c0; } .membSwitch__btn:before, .membSwitch__btn:after { content:""; background-image: url(../../assets/img/common/memb_more.svg); display: block; position: absolute; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1.2rem; height: 1.2rem; } .membSwitch__btn:before { top: 50%; transition: all .25s ease; transition-delay: 0.25s; } .membSwitch__btn:after { top: 48%; opacity: 0; transition: all .25s ease; transition-delay: 0s; } .membSwitch__btn:hover:before { opacity: 0; top: 54%; transition-delay: 0s; } .membSwitch__btn:hover:after { opacity: 1; top: 50%; transition-delay: 0.25s; } /* switchHidden */ .switchHide { display: none; margin-bottom: 6.1rem; } .switchHide.active { display: block; } .membSwitch + .memberGuide { display: none; } /* memberGuide */ .memberGuide { text-align: left; width: 82%; margin: 6.7rem auto 5.3rem; background: #fff; padding: 6rem 7.2rem 6.5rem; border: 1px solid #9d968b; } .memberGuide__title { font-size: 1.85rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5em; margin-bottom: 4.4rem; text-align: center; } .memberGuide__list { font-size: 1.15rem; font-family: dnp-shuei-gothic-gin-std, sans-serif; line-height: 1.75; } .memberGuide__list li { text-indent: -2.8em; margin-left: 2.8em; } .memberGuide__list li i { display: inline; margin-left: 0.3rem; font-size: 81%; } ul.memberGuide__list li + li { margin-top: 1rem; } .memberGuide__list .mark { color: #7b7265; } .memberGuide__list .num { font-size: 1.25rem; font-family: adobe-garamond-pro, sans-serif; margin-right: 1.4rem; margin-left: 0.1rem; letter-spacing: 0.11em; } .codoc-continue + div + .codoc-buy-wrap .memberGuide__list a { font-size: 98%; line-height: initial !important; background: initial; color: #6f675c; text-decoration: underline; } /* --- btn --- */ /*.codoc-continue + div + .codoc-buy-wrap a { font-size: 1.2rem; letter-spacing: 0.04em; height: 6.2rem !important; line-height: 6.2rem !important; width: 48.6%; border-radius: 4.5rem !important; font-weight: 600; color: #fff; background: #474747; }*/ /* --- login --- */ /*.codoc-continue + div + .codoc-buy-wrap a.codoc-btn { font-size: 0 !important; color: #000 !important; background-color: #EBEBEB !important; font-weight: 500; }*/ /*.codoc-continue + div + .codoc-buy-wrap a.codoc-btn:before { font-size: 1.2rem; content: "ログインはこちら"; }*/ /* --------------------------- ■ stars --------------------------- */ /* --- common --- */ section.l-articleStars { position: fixed; z-index: 2000; width: 80%; height: 86%; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; visibility: hidden; opacity: 0; transition: all ease 1.05s; transition-delay: 0s; } section.l-articleStars > .inner { display: flex; height: 100%; border: 1rem solid #fff; box-sizing: border-box; opacity: 0; transition: all ease .75s; transition-delay: 0s; } section.l-articleStars .left { width: 50%; } section.l-articleStars .right { width: 50%; overflow-y: scroll; } /* active */ body.stars { overflow: hidden; } body.stars .l-humbBg { opacity: 1; visibility: visible; transition-delay: 0s; } body.stars section.l-articleStars { opacity: 1; visibility: visible; transition-delay: 0.7s; } body.stars section.l-articleStars > .inner { opacity: 1; visibility: visible; transition-delay: 0.5s; } /* --- close --- */ .l-articleStars__close { position: absolute; width: 2.7rem; height: 2.6rem; z-index: 9; opacity: 0; top: 1.2rem; right: 2rem; cursor: pointer; transition: all ease .65s; } .l-articleStars__close span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #7f7f7f; left: 0; transition: .6s all cubic-bezier(.275,0,0,1); } .l-articleStars__close span:nth-child(1) { top: 1.3rem; transform: rotate(0deg); } .l-articleStars__close span:nth-child(2) { top: 1.3rem; transform: rotate(0deg); } /* active */ .l-articleStars__close { opacity: 1; } .l-articleStars__close span:nth-child(1) { top: 1.3rem; transform: rotate(-25deg); } .l-articleStars__close span:nth-child(2) { top: 1.3rem; transform: rotate(25deg); } /* --- image --- */ .l-articleStars__image { width: 100%; height: 100%; overflow: hidden; } .l-articleStars__image figure { width: 100%; height: 100%; } .l-articleStars__image figure img { width: 100%; height: 100%; will-change: transform; object-fit: cover; font-family: 'object-fit: cover;'; } /* active */ body.stars .l-articleStars__image figure { } /* --- cont --- */ .l-articleStars__cont { width: 68%; margin: 10.3rem auto 10rem; opacity: 0; transform: translateY(1vw); transition: all ease 1.15s; transition-delay: 0s; } /* active */ body.stars .l-articleStars__cont { opacity: 1; transform: translateY(0vw); transition-delay: 0.7s; } /* title */ .l-articleStars__title { text-align: center; font-size: 2.45rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.17em; } .l-articleStars__title span { font-size: 1.35rem; letter-spacing: 0.06em; color: #bebebe; display: block; font-weight: 300; margin-top: 1.3rem; } /* desc */ .l-articleStars__desc { font-size: 1.35rem; line-height: 2.2; width: 100%; letter-spacing: 0.04em; margin-top: 7.4rem; } /* --- btn --- */ .l-articleStars__btn { font-size: 1.05rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.25em; text-transform: uppercase; width: 108%; margin-left: -4%; background: #ededed; border: 1px solid #e3e3e3; box-sizing: border-box; line-height: 6.6; text-align: center; cursor: pointer; border-radius: 3.5rem; margin-top: 3.8rem; } /* --------------------------- ■ codoc-buy --------------------------- */ /* --- common --- */ .l-articleCont .codoc-buy { width: 100%; padding: 6rem 6.1rem 6.2rem !important; margin: 0rem auto 0 !important; position: relative !important; display: flex; background-color: #8E8282; border-radius: 0.4rem !important; } .l-articleCont .codoc-buy:before { content: "" !important; display: block; position: absolute; width: 98.6%; height: 95%; border-top: 0px solid rgba(255,255,255,0.3); top: 1.7%; left: 0.6%; z-index: 0; } .codoc-buy-info { display: block !important; width: 42%; margin: 0 auto; color: #fff; position: relative; margin-bottom: 0 !important; } /* --- thumb --- */ .codoc-buy-icon { display: none !important; width: 19% !important; height: 7.8vw !important; margin: 0 3.9rem 0 0 !important; } .codoc-buy-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* --- title --- */ .codoc-buy-title { font-weight: 400 !important; line-height: 1.2; font-size: 0rem !important; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif !important; letter-spacing: 0.035em !important; margin-bottom: 0.3rem !important;; } .codoc-buy-title:before { content: "Free Price"; font-size: 2.4rem !important; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; text-align: left; display: block; width: 100%; margin-bottom: 1rem; } .codoc-buy-title:after { content:"自由課金について"; font-size: 0.9rem !important; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500 !important; letter-spacing: 0.13em; opacity: 0.9; text-align: left; display: block; } /* buy */ body.buy .codoc-buy-title:before { content: "Buy Article"; } body.buy .codoc-buy-title:after { content:"記事を購入する"; } /* --- border --- */ .buyBorder{ display: none; } /* --- price --- */ .codoc-buy-price { font-size: 0rem !important; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif !important; text-align: center; display: flex; align-items: center; justify-content: center; flex-flow: wrap; } .codoc-buy-price span { font-size: 0; display: flex; align-items: center; order: 2; display: none; } .codoc-buy-price span:before { content: "Free"; font-family: adobe-garamond-pro,sans-serif; font-size: 2.3rem !important; letter-spacing: 0.02em; font-weight: 500; } .codoc-buy-info:after { display: none; } /* buy */ body.buy .codoc-buy-price { color: #dacb9b; font-size: 2.7rem !important; font-weight: 500; letter-spacing: 0.075em; justify-content: left; margin-top: 3.4rem; align-items: baseline; } /* --- btn --- */ .codoc-buy-info + div { display: flex; flex-flow: column; width: 55%; position: relative; } .codoc-entry .codoc-buy .codoc-btn { border-radius: 3rem; padding: 1.5rem 0; height: initial !important; line-height: initial !important; margin-top:2.4rem; font-size: 0; order:2; width: 100%; background: #ffffff; transition: all ease .5s; } .codoc-entry .codoc-btn:hover { background: #e4e4e4 !important; } .codoc-entry .codoc-buy .codoc-btn:after { content: "自由課金で読む"; font-size: 1.1rem; color: #000; } /* buy */ body.buy .codoc-entry .codoc-buy .codoc-btn:after { content: "記事を購入する"; font-size: 1.1rem; color: #000; } /* --- thx --- */ body .codoc-buy .codoc-thx { font-size: 0 !important; line-height: 2.1; text-align: left; letter-spacing: 0.04em; padding: 0.3rem 0; width: 93%; margin: 0rem auto -0.2rem; } body .codoc-buy .codoc-thx:after { font-size: 1.2rem !important; color: #ffffff !important; letter-spacing: 0.02em; content:"読者の皆さまが自由に金額を決める「自由課金」の記事です。閲覧後にご自身が感じる適切な金額をご指定下さい。"; } /* buy */ body.buy .codoc-buy-info + div:before { font-size: 1.2rem !important; line-height: 2.1; color: #ffffff !important; letter-spacing: 0.05em; width: 93%; margin: 0rem auto; text-align: left; content:"記載の金額で記事を購入頂けます。購入ボタンから記事の購入後、本記事をお読み下さい。"; } /* --------------------------- ■ support --------------------------- */ /* --- bg --- */ .supportBg { position: fixed; width: 100%; height: 100%; z-index: 99; top: 0; background: rgba(0, 0, 0, 0.8); visibility: hidden; opacity: 0; transition: all ease .5s; cursor: crosshair; } .supportBg .codoc-entry { width: 51%; height: 100%; flex-flow:initial; align-items: center; } .supportBg .codoc-support { margin: 0rem auto 0 !important; } .supportBg .codoc-buy-wrap { display: none !important; } /* active */ body.supportActive .supportBg { opacity: 1; visibility: visible; } /* close */ .supportBg__close { position: fixed; width: 3.7rem; height: 3.6rem; z-index: 9; top: 2.2rem; right: 2.5rem; cursor: pointer; transition: all ease .65s; opacity: 0; } body.supportActive .supportBg__close { opacity: 1; } .supportBg__close span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #fff; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } .supportBg__close span:nth-child(1) { top: 1.3rem; transform: rotate(0deg); } .supportBg__close span:nth-child(2) { top: 1.3rem; transform: rotate(0deg); } body.supportActive .supportBg__close span:nth-child(1) { top: 1.3rem; transform: rotate(-25deg); } body.supportActive .supportBg__close span:nth-child(2) { top:1.3rem; transform: rotate(25deg); } /* hover */ body.supportActive .supportBg__close:hover span:nth-child(1) { transform: rotate(-20deg); } body.supportActive .supportBg__close:hover span:nth-child(2) { transform: rotate(20deg); } /* --- message --- */ .supportBg .codoc-support-modal-body-thx dt { display: none; } .supportBg .codoc-modal-container-scroll { padding: 5.7rem 3rem 5.7rem; } .supportBg .codoc-modal-thx-price:before { display: none; } .supportBg .codoc-support-modal-body-thx:before { content: "Thank You"; font-size: 2.55rem; letter-spacing: 0.23em; color: #83796b !important; display: block; font-family: minion-pro-display, serif; text-transform: uppercase; margin-top: 1rem; margin-bottom: 3.9rem; text-align: center; } .supportBg .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl dd { width: 68%; margin: 0 auto; } /* --- common --- */ .codoc-support { width: 95% !important; border-radius: 0 !important; max-width: initial !important; margin: 7.4rem auto 0 !important; padding: 5.5rem 6.9rem 6rem !important; background: #e3e1de !important; border: 3px solid #ddd6d0 !important; } .codoc-support .codoc-btn span { font-size: 0; } .codoc-support .codoc-btn span:before { content: "HAS Magazine をサポートする"; font-size: 1.2rem; } /* archive */ article.l-articleArchive .codoc-support { margin: 10rem auto 0 !important; } /* ======== for Story ======== */ article.l-articleStPc .codoc-support { width: 90% !important; } /* --- title --- */ .codoc-support .codoc-support-title { font-size: 0 !important; text-align: left !important; width: 93% !important; margin: 0 auto; font-weight: 500 !important; color: initial !important; } .codoc-support .codoc-support-title:before { content: "Support Us"; font-size: 3.25rem; color: #a58c6a !important; display: block; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.23em; text-align: center; margin-bottom: 3.5rem; } .codoc-support .codoc-support-title:after { font-size: 1.25rem !important; line-height: 2.1; content:"最後までお読み頂きありがとうございました。内容はいかがでしたでしょうか？皆様の力が大きな力となります。物語にご満足頂けましたら任意の金額をサポートお願いいたします。"; } /* --- btn --- */ .codoc-support .codoc-btn { font-size: 1.2rem !important; margin-top: 3.2rem !important; letter-spacing: 0.05em; padding: 0 !important; height: initial !important; line-height: 4.4 !important; border-radius: 3rem !important; transition: all ease .5s; } .codoc-support .codoc-btn:hover { background: #f6f6f6 !important; } /* --- modal --- */ /* title */ .codoc-modal-body > .codoc-link_area:before { content: "Subscribe"; font-size: 2.85rem; letter-spacing: 0.2em; color: #83796b !important; display: block; font-family: minion-pro-display, serif; text-transform: uppercase; margin-bottom: 4.7rem; } .codoc-modal-body .codoc-support-modal-body-thx + .codoc-link_area:before { content: "support us"; } .codoc-modal-thx-price:before { content: "Thank you"; font-size: 2.25rem; letter-spacing: 0.28em; color: #83796b !important; display: block; font-family: minion-pro-display, serif; text-transform: uppercase; margin-top: -3rem; margin-bottom: 3.9rem; } /* price */ .codoc-modal-thx-price-num { font-weight: 400 !important; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl dt { font-size: 1.1rem !important; font-weight: 400 !important; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; width: 77% !important; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 3.8rem 0 3.3rem; margin: 0 auto; } .codoc-support-modal-price a { border: 1px solid #c7c7c7 !important; color: #414141 !important; background: #f5f5f5 !important; height: 3.2rem !important; font-size: 1rem !important; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(1) { font-size: 1.2rem !important; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(1) strong { font-size: 0 !important; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(1) strong:before { font-size: 2rem !important; margin-right: 0.4rem; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(1) strong:nth-child(1):before { content:"100"; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(1) strong:nth-child(2):before { content:"50,000"; margin-left: 0.3rem; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(2) { margin-left: 0rem; font-size: 1.1rem !important; display: block; margin-top: 0.6rem; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(2) strong { font-size: 0 !important; } .codoc-modal-container .codoc-modal-body .codoc-support-modal-body dl .codoc-modal-thx-price dt span:nth-child(2) strong:before { content:"200"; font-size: 1.7rem !important; margin-right: 0.4rem; } /* area */ .codoc-link_area .codoc-modal-header-subtitle::before { font-size: 1.2rem !important; font-weight: 500 !important; display: block; margin-bottom: 0.4rem; } .codoc-link_area .codoc-modal-header-subtitle:nth-child(1)::before { content: "[ 既にアカウントをお持ちの方 ]"; } .codoc-link_area .codoc-modal-header-subtitle:nth-child(3)::before { content: "[ 新規会員登録が必要な方 ]"; margin-top: 3rem; } .codoc-modal-container .codoc-btn-buy { background-color: #EAEAEA !important; border: initial !important; } .codoc-link_area .codoc-noentry { margin-top: 0.6rem !important; } .codoc-link_area .codoc-noentry p.codoc-noentry-caution { display: none !important; } .codoc-modal-container .codoc-modal-footer .codoc-link_area { font-weight: 600; padding-top: 1.6rem !important; margin: 0 auto!important; width: 81%; } /* --------------------------- ■ memberNav --------------------------- */ /* --- common --- */ .codoc-memberNav { border: 1px solid #ebedf0; border-radius: 0.2rem !important; margin-top: 4.7rem; display: none; position: relative; } .codoc-memberNav > .inner { padding: 5.8rem 4.6rem 4.6rem; } .codoc-memberNav .top { display: flex; width: 97.5%; margin: 0 auto; } .codoc-memberNav .top > div { width: 50%; } /* border */ .codoc-memberNav:before { content: "" !important; display: block; position: absolute; width: 98%; border-top: 1px solid #000; top: 0.3rem; left: 1%; } .codoc-memberNav:after { content: "" !important; display: block; position: absolute; width: 98%; border-top: 0px solid #000; bottom: 0.3rem; left: 1%; } /* --- lead --- */ .codoc-memberNav .lead { font-size: 2.9rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; position: relative; padding-left: 3.8rem; } .codoc-memberNav .lead:before { content: ""; position: absolute; left: 0rem; top: 0.4rem; width: 3rem; height: 3rem; opacity: 0.5; display: block; z-index: 1; background-size: cover; background-position: center center; background-image: url(../../assets/img/common/member_icon.svg); } /* --- desc --- */ .codoc-memberNav .desc { font-size: 1.25rem; text-align: justify; line-height: 2.1; margin-top: 0.3rem; } /* --- button--- */ .codoc-memberNav button { background-color: #474747; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; width: 100%; border: initial; border-radius: 7rem; margin-top: 2.8rem; } .codoc-memberNav button a { color: #fff; display: block; padding-top: 2.5rem; padding-bottom: 2.5rem; } /* --------------------------- ■ Free --------------------------- */ /* --- common--- */ .codoc-entry { display: flex; flex-flow: column; width: 95%; margin: 0 auto; } .codoc-continue { order: 1; } .codoc-continue + div { order: 3; } .codoc-continue + div + .codoc-buy-wrap { order: 4; } .codoc-continue + div + .codoc-buy-wrap + .codoc-buy-wrap { order: 5; margin-top: 7rem !important; display: flex; } .codoc-entry-body-after + div { order: 2; } .codoc-entry-body-after { order: 1 !important; margin-top: -0.8rem; } /* support */ /* ======== for Story ======== */ article.l-articleStPc .codoc-entry { width: 100%; } /* --- logout--- */ .codoc-entry .codoc-like-wrap { display: none; } /* --- guide--- */ body .codoc-thx { background: initial; color: #000000; font-size: 1.35rem; line-height: 1.85; text-align: left; letter-spacing: 0.03em; padding: 0.3rem 0; width: 100%; margin: 3.6rem auto -0.8rem; } .codoc-thx:before { display: none !important; } body .codoc-thx > div > div { } body .codoc-thx > div > div span { font-size: 1.25rem; display: block; margin-top: 0.6rem; letter-spacing: 0.02em; } body .codoc-thx .codoc-btn { font-size: 1.2rem; line-height: 5rem !important; height: 5rem !important; border-radius: 3.3rem !important; background: #474747 !important; width: 57%; margin-top: 1.9rem; } /* --------------------------- ■ subscription --------------------------- */ /* common */ body .codoc-subscription-list { width: 100%; display: flex !important; margin: 0.3rem auto -12px!important; position: relative; flex-wrap: initial; flex-flow: wrap !important; } body .codoc-subscription-list li { padding: 7.2rem 5.5rem 5.7rem !important; min-width: initial; border-radius: 0.1rem !important; position: relative; flex-wrap: wrap !important; width: 50%; } .codoc-subscription-list li + li:nth-child(2) { margin-left: 0.8% !important; filter: grayscale(1); } .codoc-subscription-info { justify-content: left; text-align: left; padding-bottom: 0rem; width: 100%; flex-flow: column; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-info { opacity: 0.6; filter: blur(4px); } /* border */ body .codoc-subscription-list li:after { content: "" !important; display: block; position: absolute; width: 99%; border-top: 1px solid #000; top: 0.3rem; left: 0.5%; } /* image */ .codoc-subscription-icon { width: 9.4vw; height: 9.4vw; background-size: cover; background-position: center center; position: relative; margin: 0 auto !important; } .codoc-subscription-icon img { display: none !important; } .codoc-subscription-list li:nth-child(1) .codoc-subscription-icon { background-image: url(../../assets/img/photo/subscribe/subsc_m.jpg); } .codoc-subscription-list li:nth-child(2) .codoc-subscription-icon { background-image: url(../../assets/img/photo/subscribe/subsc_s.jpg); } /* ======== for Story ======== */ article.l-articleStPc .codoc-subscription-icon { height: 11.8vw; } /* title */ .codoc-subscription-title { font-size: 0rem !important; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500 !important; letter-spacing: 0.1em; text-align: center; margin-top: 3.9rem; } .codoc-subscription-title:after { content: "マンスリー・パスポート"; font-size: 1rem; opacity: 0.7; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-title:after { content: "シリウス・パスポート"; } /* Eng */ .codoc-subscription-list li .codoc-subscription-title:before { display: block; font-size: 2.45rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.125em; margin-bottom: 0.9rem; } .codoc-subscription-list li:nth-child(1) .codoc-subscription-title:before { content: "Monthly"; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-title:before { content: "Sirius"; } /* price */ .codoc-subscription-price { margin-top: 1.6rem; display: flex; align-items: center; justify-content: center; flex-flow: wrap; } .codoc-subscription-price:before { content: "会員限定記事の購読"; font-size: 1rem; letter-spacing: 0.03em; line-height: 3.2rem; height: 3.2rem; color: #000; display: block; width: 100%; border-radius: 3px; background-color: #EAEAEA; margin: 1.4rem auto 2.1rem; font-weight: initial; text-align: center; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-price:before { content: "現在準備中"; } .codoc-subscription-price span.codoc-price { font-size: 0rem !important; font-weight: 500 !important; font-family:adobe-garamond-pro,sans-serif; letter-spacing: 0.07em; display: flex; align-items: center; } .codoc-subscription-price span.codoc-type { font-size: 0rem !important; font-weight: 500 !important; font-family: 'Zen Old Mincho', sans-serif; margin-top: 0.4rem; margin-left: 0.5rem; } /* Time */ .codoc-subscription-list li .codoc-subscription-price span.codoc-price:before { content: ""; font-family: 'Zen Old Mincho', sans-serif; font-size: 1rem !important;; letter-spacing: 0.03em; margin-right: 0.9rem; margin-top: 0.3rem; } .codoc-subscription-list li:nth-child(1) .codoc-subscription-price span.codoc-price:before { content: "月額"; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-price span.codoc-price:before { content: "年額"; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-price span.codoc-price:before { } /* Num */ .codoc-subscription-list li .codoc-subscription-price span.codoc-price:after { content: ""; font-size: 2.9rem !important; letter-spacing: 0.02em; } .codoc-subscription-list li:nth-child(1) .codoc-subscription-price span.codoc-price:after { content: "660"; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-price span.codoc-price:after { content: "3960"; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-price span.codoc-price:after { content: ""; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-price .charge { font-size: 1.9rem; font-family: 'Zen Old Mincho', sans-serif; color: #000; margin-top: 0.4rem; margin-bottom: 0.6rem; } /* Unit */ .codoc-subscription-list li .codoc-subscription-price span.codoc-type:before { content: ""; font-size: 1rem !important; } .codoc-subscription-list li:nth-child(1) .codoc-subscription-price span.codoc-type:before { content: "円（税込）"; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-price span.codoc-type:before { content: "円（税込）"; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-price span.codoc-type:before { content: ""; } /* label */ .codoc-subscription-labels { display: none !important; } /* desc */ .codoc-subscription-description { font-size: 1.1rem !important; font-family: nimbus-sans, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; letter-spacing: 0.01em; line-height: 1.95; position: relative; padding-top: 0.1rem; text-align: left; color: #000000 !important; border-top: 0px dotted #ccc; width: 103%; margin: 1.4rem auto 0.2rem !important; } /* btn */ .codoc-subscription-footer { width: 104%; margin-left: -2%; margin-top: 0.5rem; } .codoc-subscription-login { margin-top: 1.9rem; } .codoc-subscription-login .codoc-btn { font-size: 0 !important; line-height: 3.3rem !important; height: 3.2rem !important; border-radius: 3.3rem !important; background: #474747 !important; } .codoc-subscription-login .codoc-btn:before { content: ""; font-family: nimbus-sans,"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.1rem; letter-spacing: 0.03em; } .codoc-subscription-list .codoc-btn { padding: 0.7rem 0 !important; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-login .codoc-btn { font-weight: 500; color: #000 !important; background-color: #EAEAEA !important; } /* text */ .codoc-subscription-list li:nth-child(1) .codoc-subscription-login .codoc-btn:before { content:"1週間無料トライアル"; } .codoc-subscription-list li:nth-child(2) .codoc-subscription-login .codoc-btn:before { content:"1週間無料トライアル"; } .codoc-subscription-list li:nth-child(3) .codoc-subscription-login .codoc-btn:before { content:"無料で始める"; } /* --------------------------- ■ Login Info --------------------------- */ .codoc-like-wrap { justify-content: initial !important; } .codoc-caution-mail { display: none !important; } .codoc-bottom { background-color: #fff !important; padding: 0 !important; margin-top: 1rem !important; } .codoc-user-icon { display: none; } .codoc-user a { text-decoration: underline !important; } .codoc-user a:before { content: " » "; } .codoc-user strong { font-size: 1.3rem !important; } /* --------------------------- ■ Article --------------------------- */ .wp-block-group figure img { opacity: 1; } /* --------------------------- ■ Payment --------------------------- */ /* info */ body .codoc-modal-container .codoc-modal-body dl dt { font-size: 1.2rem !important; width: 24%; } body .codoc-modal-container .codoc-modal-body dl dt, body .codoc-modal-container .codoc-modal-body dl dd { color: #000 !important; margin-top: 3.5rem !important; margin-bottom: 2.5rem !important; } body .codoc-support-modal-price div { width: 12rem !important; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 0rem !important; background-color: #ffffff; } body .codoc-support-modal-price div strong { font-size: 2.1rem !important; font-weight: 500; } body .codoc-support-modal-price div strong:after { content: "円"; font-size: 66%; margin-left: 0.3rem; } body .codoc-modal-container .codoc-modal-body dl dd .modal-price-label { margin-left: 0.6rem; } /* ><><><><><><><><><><><><><><><><> ▼ Animation ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Inview --------------------------- */ .inview { transform: translateY(15px); opacity: 0; transition: all ease .75s; } .inview.fadeInUp { transform: translateY(0px); opacity: 1; } .inview2,.inview4 { transform: translateY(15px); opacity: 0; transition: all ease .75s; } body.start2 .inview2.fadeInUp, body.start2 .inview4.fadeInUp { transform: translateY(0px); opacity: 1; } .inview6 { transform: translateY(15px); opacity: 0; transition: all ease .75s; } body.start2 .inview6.fadeInUp { transform: translateY(0px); opacity: 1; } .inview8 { opacity: 0; transition: all ease .75s; } body.start2 .inview8.fadeInUp { opacity: 1; } /* philosophy */ .l-archiveFeature.policy .inview, .l-archivePolicy__head .inview { transition-delay: 0.3s; } /* --------------------------- ■ Hover --------------------------- */ .hoverTxt { position: relative; overflow: hidden; display: inline-block; white-space: nowrap; } .hoverTxt > span.top { display: block; transition: 0.5s transform cubic-bezier(.275,0,0,1); transform: translateY(100%) } .hoverTxt > span.bottom { position: absolute; left: 0; right: 0; top: 100%; transition: 0.5s all cubic-bezier(.275,0,0,1); } /* loading */ body.start1 .hoverTxt > span.top { transform: translateY(0%); } /* hover */ body.start1 a:hover .hoverTxt span.top { transform: translateY(-100%); } a:hover .hoverTxt span.bottom { top: 0%; } body.start1 .link:hover .hoverTxt span.top { transform: translateY(-100%); } .link:hover .hoverTxt span.bottom { top: 0%; } /* humb */ .l-humbNav_main:hover .hoverTxt span.top { transform: translateY(-100%); } .l-humbNav_main:hover .hoverTxt span.bottom { top: 0%; } /* member */ .c-memberBtn:hover .hoverTxt span.top { transform: translateY(-100%); } .c-memberBtn:hover .hoverTxt span.bottom { top: 0%; } /* post */ .l-archiveHead__nav li:hover .hoverTxt span.top { transform: translateY(-100%); } .l-archiveHead__nav li:hover .hoverTxt span.bottom { top: 0%; } /* philosophy */ ul.l-archivePolicy__list li .title:hover .hoverTxt span.top { transform: translateY(-100%); } ul.l-archivePolicy__list li .title:hover .hoverTxt span.bottom { top: 0%; } .fieldNext:hover .hoverTxt span.top { transform: translateY(-100%); } .fieldNext:hover .hoverTxt span.bottom { top: 0%; } /* Footer */ .memberFoot:hover .hoverTxt span.top { transform: translateY(-100%); } .memberFoot:hover .hoverTxt span.bottom { top: 0%; } /* magazine */ .l-magazine__menu:hover .hoverTxt span.top { transform: translateY(-100%); } .l-magazine__menu:hover .hoverTxt span.bottom { top: 0%; } /* ><><><><><><><><><><><><><><><><> ▼ Header ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ header.l-header { position: relative; z-index: 5; height: 21.2rem; /*height: 24.8vh;*/ max-height: 23rem; width: 100%; text-align: center; transition: all .35s cubic-bezier(.23,1,.32,1); background: #fff; } header.l-header > .inner { width: 91.7%; height: 100%; margin:0 auto; position: relative; } header.l-header > .inner:before { content:""; position: absolute; width: 0%; display: inline-block; border-bottom: 1px solid #f0f0f0; bottom:0rem; left: 0; transition: 1.9s all cubic-bezier(.275,0,0,1); } body.top header.l-header > .inner:before { border-bottom: 1px solid #fff; } body.drawer-active.top header.l-header > .inner:before { border-bottom: 1px solid #f0f0f0; width: 100%; } body.top.saerch-active header.l-header > .inner:before { border-bottom: 1px solid #f0f0f0; width: 100%; } header.l-header .innerInner { width: 96.1%; height: 100%; margin:0 auto; position: relative; } /* start */ body.start2 header.l-header > .inner:before { width: 100%; } /* --------------------------- ■ l-header__nav --------------------------- */ .l-header__nav { top: 4rem; left: 1.4rem; height: calc(100% - 3.6rem); position: absolute; } .l-header__nav ul { display: flex; height: 100%; } .l-header__nav ul li { font-size: 1.7rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.275em; font-weight: 300; } .l-header__nav ul li + li { margin-left: 6.3rem; } .l-header__nav .randCont { height: 100%; } .l-header__nav .randCont > a { height: 100%; display: inline; } .l-header__nav .drawer-open .randCont > a { display: inline-block; } .l-header__nav ul li > a { text-transform: uppercase; opacity: 0.7; position: relative; } .l-header__nav ul li > a span { position: relative; transition: all ease .35s; } .l-header__nav ul li > a span:hover { /*opacity: 0.5;*/ } body.under .l-header__nav ul li > a { color:#000; } .l-header__nav ul li.drawer-open > a { height: 100%; display: block; } .item_wrapper .randCont:nth-child(n+2) { display: none; } /* loading */ /* --------------------------- ■ l-header__title --------------------------- */ .l-header__title { position: absolute; left: 50%; top: 50.3%; transform: translate(-50%,-50%); margin:0; transition: all .35s ease; } .l-header__title img { /*width: 26.2vh;*/ width: 23.7rem; min-width: 13.1vw; max-width: 24.2rem; transition: 1s all cubic-bezier(.275,0,0,1); } /* pre */ .l-header__title { overflow: hidden; } .l-header__title img { transform: translateY(120%); opacity: 0; } /* start */ body.start2 .l-header__title img { opacity: 1; transform: translateY(0); } /* --------------------------- ■ l-header__search --------------------------- */ .l-header__search { position: absolute; right: 11.8rem; top: 4.6rem; cursor: pointer; } .l-header__search img { height: 1.725rem; width: 1.725rem; } /* pre */ .l-header__search { overflow: hidden; } .l-header__search img { transform: translateY(90%); opacity: 0; transition: 0.5s transform cubic-bezier(.275,0,0,1); } /* start */ body.start1 .l-header__search img { transform: translateY(0%); opacity: 1; } /* --------------------------- ■ l-header__account --------------------------- */ .l-header__account { position: absolute; right: 8.1rem; top: 4.6rem; cursor: pointer; } .l-header__account img { height: 1.85rem; width: 1.85rem; } /* pre */ .l-header__account { overflow: hidden; } .l-header__account img { transform: translateY(90%); opacity: 0; transition: 0.5s transform cubic-bezier(.275,0,0,1); } /* start */ body.start1 .l-header__account img { transform: translateY(0%); opacity: 1; } /* --------------------------- ■ l-header__humbBtn --------------------------- */ .l-header__humbBtn.l-humbBtn { position: absolute; right: 0rem; top: 4.5rem; } /* ><><><><><><><><><><><><><><><><> ▼ FixedMenu ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ .l-fixedMenu { position: fixed; z-index: 6; height: 6.8rem; top: -10.0rem; width: 100%; text-align: center; left: 50%; transform: translateX(-50%); transition: all .35s ease; background: #fff; } body.pace-done .l-fixedMenu.visible { top: 0rem; } body.pace-done .l-fixedMenu.hidden { top: -10.0rem !important; } body.pace-done .l-fixedMenu.fixed-open { top: 0rem; } .l-fixedMenu > .inner { width: 95.2%; height: 100%; margin:0 auto; position: relative; } .l-fixedMenu > .inner:before { content: ""; position: absolute; width: 100%; display: inline-block; border-bottom: 1px solid #f2f2f2; bottom: 0rem; left: 0; transition: all ease .35s; } .l-fixedMenu .innerInner { width: 94.3%; height: 100%; margin:0 auto; position: relative; } /* codoc */ body.pace-done .wrapper.codoc-modal-transition-rescue .l-fixedMenu { top:-9rem; } /* retreat */ body.retreat .l-fixedMenu { background-color: transparent; } body.retreat.drawer-active .l-fixedMenu, body.retreat .l-fixedMenu.search-open { background-color: #fff; } /* --------------------------- ■ l-header__nav --------------------------- */ .l-fixedMenu .l-header__nav { top: 2.6rem; left: 0.7rem; height: calc(100% - 3.5rem); position: absolute; } .l-fixedMenu .l-header__nav ul { display: flex; height: 100%; } .l-fixedMenu .l-header__nav ul li { font-size: 1.4rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.275em; } .l-fixedMenu .l-header__nav ul li + li { margin-left: 5.1rem; } .l-fixedMenu .l-header__nav ul li > a { position: relative; } .l-fixedMenu .l-header__nav ul li.drawer-open > a { height: 100%; display: block; } /* --------------------------- ■ l-header__title --------------------------- */ .l-fixedMenu .l-header__title { position: absolute; left: 50%; top: 53.9%; transform: translate(-50%,-50%); margin:0; transition: all .35s ease; } .l-fixedMenu .l-header__title img { width: 6.7rem; min-width: initial; max-width: initial; transition: all .35s ease; } /* retreat */ body.retreat .l-fixedMenu .l-header__title img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); } body.retreat.drawer-active .l-fixedMenu .l-header__title img, body.retreat .l-fixedMenu.search-open .l-header__title img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* --------------------------- ■ l-header__search --------------------------- */ .l-fixedMenu .l-header__search { position: absolute; right: 11.7rem; top: 2.5rem; } .l-fixedMenu .l-header__search img { height: 1.5rem; width: 1.5rem; } /* retreat */ body.retreat.drawer-active .l-fixedMenu .l-header__search img, body.retreat .l-fixedMenu.search-open .l-header__search img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* --------------------------- ■ l-header__account --------------------------- */ .l-fixedMenu .l-header__account { position: absolute; right: 8rem; top: 2.4rem; } .l-fixedMenu .l-header__account img { height: 1.6remm; width: 1.6rem; } /* retreat */ body.retreat.drawer-active .l-fixedMenu .l-header__account img, body.retreat .l-fixedMenu.search-open .l-header__account img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* --------------------------- ■ l-header__humbBtn --------------------------- */ .l-fixedMenu .l-humbBtn { position: absolute; right: 0rem; top: 2.5rem; height: 1.6rem; } /* --------------------------- ■ l-drawerMenu --------------------------- */ /* --- Common --- */ .l-fixedMenu .l-drawerMenu { top: 4.1rem; left: -5.95vw; } /* ><><><><><><><><><><><><><><><><> ▼ DrawerMenu ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ .l-drawerMenu__bg { background: rgba(22,26,20,.8); width: 100%; height: 100%; position: fixed; z-index: 4; visibility: hidden; opacity: 0; transition: all ease .35s; } body.pace-done.drawer-active .l-drawerMenu__bg { visibility: visible; opacity: 1; } .l-drawerMenu { position: absolute; /*top: 16.1rem;*/ top: 96.4%; width: 100vw; height: 0rem; background-color: #fff; text-align: left; overflow: hidden; transition: height .55s cubic-bezier(.23,1,.32,1); box-shadow: 0rem 0.6rem 0.8rem -0.5rem rgb(0 0 0 / 0%); transform: translate3d(0,0,0); z-index: -1; left: -6.85vw; } body.pace-done .drawer-open .l-drawerMenu { height: 41.1vw; z-index: 1; box-shadow: 0rem .6rem .8rem -.5rem rgba(0,0,0,0.2); border-top: 1px solid #f1f1f1; } body.pace-done .l-fixedMenu .drawer-open .l-drawerMenu { height: 41.2vw; z-index: 1; box-shadow: 0rem .6rem .8rem -.5rem rgba(0,0,0,0.2); } .l-fixedMenu.fixed-drawClose .drawer-open .l-drawerMenu { height: 0; } .hide .drawer-open .l-drawerMenu, .hide2 .drawer-open .l-drawerMenu { height: 0; } .l-drawerMenu > .inner { display: flex; width: 95.4%; margin: 4.9rem auto 8rem; } .l-fixedMenu .l-drawerMenu > .inner { margin: 5rem auto 6rem; } /* --------------------------- ■ Category --------------------------- */ .l-drawerMenu__category { width: 9.5%; font-size: 1.85rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.04em; box-sizing: border-box; padding-top: 0.7rem; padding-left: 4.8%; display: none; } .l-fixedMenu .l-drawerMenu__category { font-size: 1.7rem; padding-left: 4.6%; width: 9.5%; } .l-drawerMenu__category a { display: block; overflow: hidden; } .l-drawerMenu__category a:nth-child(n+4) { display: none; } .l-drawerMenu__category a + a { margin-top: 0.8rem; } .l-drawerMenu__category a > span { display: inline-block; transform: translateY(0.5vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; opacity: 0; } .drawer-open .l-drawerMenu__category a > span { transform: translateY(0); opacity: 1; transition-delay: 0.1s; } /* --------------------------- ■ List --------------------------- */ /* --- common --- */ .l-drawerMenu__list { width: 100%; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } .l-drawerMenu__list .c-listCont { width: 25%; padding: 0.4rem 4.3rem 3.4rem; } .l-drawerMenu__list .c-listCont + .c-listCont { border-left: 1px dotted #e7e4e4; } /* --- image --- */ .l-drawerMenu__list .c-listImage { width: 97%; height: 17vw; margin: 0 auto; } .l-drawerMenu__list .c-listImage:hover { transform: scale(1); } .l-drawerMenu__list .c-listImage { opacity: 0; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } .drawer-open .l-drawerMenu__list .c-listImage { transform: translateY(0); opacity: 1; transition-delay: 0.1s; } .l-drawerMenu__list .c-listImage figure { transform: scale(1); } .drawer-open .l-drawerMenu__list .c-listImage figure, .drawer-open .l-drawerMenu__list .c-listImage figure img { transform: scale(1); } .l-drawerMenu__list .c-listImage figure img { opacity: 0; transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } .drawer-open .l-drawerMenu__list .c-listImage figure img { opacity: 1; } /* --- contWrapper --- */ .l-drawerMenu__list .contWrapper { width: 96%; } /* --- CatDate --- */ .l-drawerMenu__list .c-listCat { margin-top: 1rem; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: .1s; opacity: 0; margin-left: -0.4rem; margin-top: 0rem; display: none; } .l-drawerMenu__list .c-listCat a { font-size: 1.15rem; } .l-drawerMenu__list .c-listCat span + span { margin-left: -0.3rem; } .drawer-open .l-drawerMenu__list .c-listCat { transform: translateY(0); opacity: 1; transition-delay: 0.15s; } /* --- title --- */ /* subTitle */ .l-drawerMenu__list .c-subTitle { margin-top: 2.5rem; margin-left: 0.3rem; font-size: 1.4rem; letter-spacing: 0.18em; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: .1s; opacity: 0; } .drawer-open .l-drawerMenu__list .c-subTitle { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .l-drawerMenu__list .c-subTitle + .c-listTitle { margin-top: 0.9rem; width: 99%; } .l-drawerMenu__list .c-subTitle span.border { margin-right: 0.1rem; margin-left: 0.1rem; } /* listTitle */ .l-drawerMenu__list .c-listTitle { font-size: 1.7rem; line-height: 1.85; margin-top: 3rem; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: .1s; opacity: 0; } .l-drawerMenu__list .c-listTitle span.title { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .l-drawerMenu__list .c-listTitle br { display: none; } .drawer-open .l-drawerMenu__list .c-listTitle { transform: translateY(0); opacity: 1; transition-delay: 0.2s; } .l-drawerMenu__list .c-listTitle .count span { margin-top: 1.3rem; padding: 1rem 0.8rem 0.9rem; letter-spacing: 0.12em; margin-left: -0.3rem; } /* listCopy */ .l-drawerMenu__list .c-listCopy { font-size: 1.2rem; font-family: adobe-garamond-pro,dnp-shuei-gothic-gin-std, sans-serif; margin-top: -0.1rem; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: .1s; opacity: 0; display: none; } .drawer-open .l-drawerMenu__list .c-listCopy { transform: translateY(0); opacity: 1; transition-delay: 0.2s; } /* listDesc */ .l-drawerMenu__list .c-listDesc { font-size: 1rem; width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 1rem auto 0; transform: translateY(1vw); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: .1s; opacity: 0; } .drawer-open .l-drawerMenu__list .c-listDesc { transform: translateY(0); opacity: 1; transition-delay: 0.2s; } /* ><><><><><><><><><><><><><><><><> ▼ Footer ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common ---------------------- ----- */ /* --- common --- */ footer.l-footer { width: 99.4%; margin: 10rem auto 0; padding-bottom: 0.5rem; position: relative; background: #fff; } footer.l-footer > .inner { /*background-color: #a7a7a1;*/ /* background-color: #b2aea9;*/ background-color: #8E8282; color: #fff } footer.l-footer > .inner a { color: #fff } /* --------------------------- ■ Top --------------------------- */ /* --- common --- */ .l-footer__top { padding-top: 10.7rem; padding-bottom: 9rem; } .l-footer__top > .inner { display: flex; width: 86.4%; margin: 0 auto; } /* --- about --- */ /* common */ .areaAbout { width: 51%; display: flex; align-items: initial; flex-flow: wrap; } /* logo */ .areaAbout .logo { width: 9.5rem; height: 9.5rem; border-radius: 100%; opacity: 1; } .areaAbout .logo a { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 100%; position: relative; } .areaAbout .logo img { width: 100%; margin-top: 0rem; } /* cont */ /* common */ .areaAbout .cont { width: calc(100% - 30rem); margin-top: -0.1rem; margin-left: 8.1%; font-family: nimbus-sans, sans-serif; font-weight: 300; opacity: 0.8; } /* desc */ .areaAbout .desc { font-size: 1.15rem; font-family: adobe-garamond-pro, sans-serif; line-height: 2; letter-spacing: 0.035em; } /* info */ .areaAbout .info { font-family: adobe-garamond-pro, sans-serif; margin-top: 1.5rem; letter-spacing: 0.03em; display: flex; align-items: center; } .areaAbout .produced { font-size: 1.1rem; } .areaAbout .name { font-size: 1.4rem; margin-left: 0.8rem; letter-spacing: 0.07em; } .areaAbout .line { font-size: 1rem; margin-left: 1.1rem; margin-right: 1.2rem; } .areaAbout .url { font-size: 1.2rem; } /* --- areaInfo --- */ /* common */ .areaInfo { width: 51.5%; margin-top: 0.1rem; margin-left: auto; } /* list */ li.areaInfo__list { padding: 4.7rem 2.4rem; border-top: 1px dotted #ffffff30; } li.areaInfo__list:last-child { border-bottom: 1px dotted #ffffff30; } li.areaInfo__list a { display: flex; align-items: center; } /* arrow */ li.areaInfo__list .arrow { display: block; position: relative; } li.areaInfo__list .arrow:before { content: ""; background-image: url(../../assets/img/common/arrowRightwh.svg); display: block; position: absolute; opacity: 0.6; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.85rem; transition: all .25s ease; transition-delay: 0s; } /* eng */ li.areaInfo__list .eng { font-family: minion-pro-display, serif; font-size: 1.6rem; letter-spacing: 0.435em; font-weight: 600; text-transform: uppercase; margin-top: 0.435em; margin-left: 3.4rem; } /* jpn */ li.areaInfo__list .jpn { font-size: 1.15rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; opacity: 0.95; letter-spacing: 0.13em; margin-left: auto; margin-right: 0.1rem; } /* --------------------------- ■ Bottom --------------------------- */ /* --- common --- */ .l-footer__bottom { font-family: adobe-garamond-pro, sans-serif; font-weight: 300; width: 88.6%; margin: 0 auto 0; padding-top: 5.6rem; padding-bottom: 5.9rem; } .l-footer__bottom > .inner { display: flex; padding: 0 2.1rem; } /* --- siteInfo --- */ .siteInfo ul { display: flex; } .siteInfo ul li { font-family: 'Zen Old Mincho', sans-serif; font-size: 1.2rem; opacity: 0.7; letter-spacing: 0.035em; } .siteInfo ul li + li { margin-left: 3.5rem; } /* --- sns --- */ .l-footer__bottom .sns { margin-top: 0.1rem; margin-left: 2.5rem; opacity: 0.7; } .l-footer__bottom .sns ul { display: flex; } .l-footer__bottom .sns ul li { font-size: 1.4rem; } .l-footer__bottom .sns ul li + li { margin-left: 1.1rem; } .l-footer__bottom .sns ul li + li:last-child { margin-left: 1.2rem; } /* --- copy --- */ .l-footer__bottom .copy { font-size: 1.25rem; letter-spacing: 0.07em; opacity: 0.7; margin-left: auto; margin-top: 0.2rem; margin-right: 0rem; } /* ><><><><><><><><><><><><><><><><> ▼ Humb ><><><><><><><><><><><><><><><><> /* --------------------------- ■ humbBtn --------------------------- */ /* --- common --- */ .l-humbBtn { position: absolute; width: 5.6rem; height: 1.8rem; z-index: 9; right: 4%; cursor: pointer; transition: all ease .65s; } .l-humbBtn > .inner { width: 100%; height: 100%; position: absolute; } .l-humbBtn span { position: absolute; left: 0rem; content: ''; width: 100%; height: 1px; background-color: #000; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1), -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } .l-humbBtn span:nth-child(1) { top: 0; } .l-humbBtn span:nth-child(2) { top: 47%; } .l-humbBtn span:nth-child(3) { bottom: 0; } /* Ready */ /* Pre */ .l-humbBtn .first { } .l-humbBtn .first span { transform: scale(0, 0); transform-origin: left top; transition-delay: 0s; } body.start1 .l-humbBtn .first span:nth-child(1) { transform-origin: left top; transform: scale(1, 1); } body.start1 .l-humbBtn .first span:nth-child(2) { transform-origin: left top; transform: scale(1, 1); transition-delay: 0.1s; } body.start1 .l-humbBtn .first span:nth-child(3) { transform-origin: left top; transform: scale(1, 1); transition-delay: 0.2s; } /* First */ body.start1 .l-humbBtn:hover .first span:nth-child(1) { transform-origin: right top; transform: scale(0, 1); } body.start1 .l-humbBtn:hover .first span:nth-child(2) { transform-origin: right top; transform: scale(0, 1); transition-delay: 0.1s; } body.start1 .l-humbBtn:hover .first span:nth-child(3) { transform-origin: right top; transform: scale(0, 1); transition-delay: 0.2s; } /* Second */ .l-humbBtn .second { } .l-humbBtn .second span { transform: scale(0, 1); transform-origin: left top; transition-delay: 0.1s; } .l-humbBtn:hover .second span:nth-child(1) { transform: scale(1, 1); transition-delay: 0.3s; } .l-humbBtn:hover .second span:nth-child(2) { transform: scale(1, 1); transition-delay: 0.4s; } .l-humbBtn:hover .second span:nth-child(3) { transform: scale(1, 1); transition-delay: 0.5s; } /* hover */ /* --- l-fixed__humbBtn --- */ .l-fixed__humbBtn.l-tagBtn { position: absolute; width: 3.7rem; height: 3.6rem; z-index: 9; top: 2.8rem; right: 3.5rem; cursor: pointer; transition: all ease .65s; opacity: 0; } .l-fixed__humbBtn.l-tagBtn { display: none; } body.humb-active .l-fixed__humbBtn.l-humbBtn, body.is-category .l-fixed__humbBtn.l-tagBtn, body.is-country .l-fixed__humbBtn.l-tagBtn, body.is-theme .l-fixed__humbBtn.l-tagBtn, body.is-local .l-fixed__humbBtn.l-tagBtn { opacity: 1; } .l-fixed__humbBtn.l-humbBtn span, .l-fixed__humbBtn.l-tagBtn span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #adadad; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } .l-fixed__humbBtn.l-humbBtn span:nth-child(1), .l-fixed__humbBtn.l-tagBtn span:nth-child(1) { top: 1.3rem; transform: rotate(0deg); } .l-fixed__humbBtn.l-humbBtn span:nth-child(2), .l-fixed__humbBtn.l-tagBtn span:nth-child(2) { top: 1.3rem; transform: rotate(0deg); } body.humb-active .l-fixed__humbBtn.l-humbBtn span:nth-child(1), body.is-category .l-fixed__humbBtn.l-tagBtn span:nth-child(1), body.is-country .l-fixed__humbBtn.l-tagBtn span:nth-child(1), body.is-theme .l-fixed__humbBtn.l-tagBtn span:nth-child(1), body.is-local .l-fixed__humbBtn.l-tagBtn span:nth-child(1) { top: 1.3rem; transform: rotate(-25deg); } body.humb-active .l-fixed__humbBtn.l-humbBtn span:nth-child(2), body.is-category .l-fixed__humbBtn.l-tagBtn span:nth-child(2), body.is-country .l-fixed__humbBtn.l-tagBtn span:nth-child(2), body.is-theme .l-fixed__humbBtn.l-tagBtn span:nth-child(2), body.is-local .l-fixed__humbBtn.l-tagBtn span:nth-child(2) { top:1.3rem; transform: rotate(25deg); } /* hover */ body.humb-active .l-fixed__humbBtn:hover span:nth-child(1) { transform: rotate(-20deg); } body.humb-active .l-fixed__humbBtn:hover span:nth-child(2) { transform: rotate(20deg); } /* retreat */ body.retreat .l-fixedMenu .l-humbBtn span { background-color: #fff; } body.retreat.drawer-active .l-fixedMenu .l-humbBtn span, body.retreat .l-fixedMenu.search-open .l-humbBtn span { background-color: #000; } /* --------------------------- ■ l-humbCont --------------------------- */ /* --- common --- */ .l-humbCont { position: fixed; width: 36.4%; height: 100%; right: -36.4%; background-color: #fff; z-index: 7; transition: all ease .7s; overflow-x: hidden; overflow-y: scroll; transition-delay: 0.5s; } .l-humbCont > .inner { width: 77%; margin: 0 auto; display: flex; flex-flow: column; opacity: 0; transform: translateY(0.5vw); transition: all ease 0.7s; transition-delay: 0s; } /* active */ body.humb-active .l-humbCont { right: 0; transition-delay: 0s; } body.humb-active .l-humbCont > .inner { transform: translateY(0); opacity: 1; transition-delay: 0.5s; } /* --- bg --- */ .l-humbBg { background: rgba(22,26,20,.8); width: 100%; height: 100%; position: fixed; cursor: crosshair; z-index: 7; visibility: hidden; opacity: 0; top: 0; left: 0; transition: all ease 1.35s; transition-delay: 0s; } /* active */ body.humb-active .l-humbBg { opacity: 1; visibility: visible; transition-delay: 0s; } /* --- Head --- */ .l-humbHead { position: relative; } /* search */ /* Btn */ .l-humbSearch__btn { position: absolute; right: 10.1rem; top: 2.7rem; cursor: pointer; z-index: 8; transition: all ease .5s; } .l-humbSearch__btn img { height: 1.7rem; width: 1.7rem; } .l-humbCont.active .l-humbSearch__btn { opacity: 0; } /* Area */ .l-humbSearch__area { position: absolute; width: 100%; top: 2.5rem; left: 2.6rem; opacity: 0; transition: all ease .5s; z-index: -1; visibility: hidden; } .l-humbCont.active .l-humbSearch__area { opacity: 1; z-index: 8; visibility: visible; } .l-humbSearch__area input { font-size: 1.2rem; font-family: nimbus-sans,"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; border: none; letter-spacing: 0.035em; outline: none; width: 86%; line-height: 2.3; } .l-humbSearch__area input::placeholder { color:#949494; font-weight: 300; padding-left: .8rem; padding-right: .8rem; } /* close */ .l-humbHead .l-fixed__humbBtn.l-humbBtn { position: absolute; width: 3.4rem; height: 2.7rem; z-index: 9; top: 2.2rem; right: 2.1rem; cursor: pointer; transition: all ease .65s; opacity: 0; } /* Account */ .l-humbAccount__btn { position: absolute; right: 7rem; top: 2.7rem; cursor: pointer; } .l-humbAccount__btn img { width: 1.65rem; } /* --- nav --- */ .l-humbNav { margin-top: 7.4rem; padding-top: 5.1rem; margin-bottom: 3.6rem; border-top: 1px dotted #e7e7e7; } .l-humbNav ul.children, .l-humbNav ul.underChild { display: none; } .l-humbNav ul.children li.parents_list { display: block; width: 100%; position: relative; } .l-humbNav ul.children li.parents_list + li:before { border-top: 1px dotted #ebebeb24; content: ""; display: block; width: 95%; margin: 0 auto; } /* color */ .l-humbNav ul.children li.parents_list.color { background: #847979; } .l-humbNav ul.children li.parents_list.dark { background: #736464; } .l-humbNav ul.children li.parents_list.caution { background: #716565; } /* first */ .l-humbNavFirst { cursor: pointer; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; display: flex; position: relative; align-items: center; cursor: pointer; padding: 0.5rem 3.1rem; } .l-humbNavFirst .eng { font-size: 3rem; letter-spacing: 0.06em; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; } .l-humbNavFirst .jpn { font-size: 1.1rem; opacity: 0.7; margin-left: auto; margin-right: 0rem; margin-top: -0.4rem; letter-spacing: 0.075em; } /* main */ .l-humbNav .children { margin-top: 0.7rem; margin-bottom: 2.1rem; width: 128%; margin-left: -14%; background: #8e8282; } .l-humbNav .children.last { margin-bottom: 2.2rem; } .l-humbNav_main { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; display: flex; position: relative; align-items: center; color: #fff; cursor: pointer; padding: 3rem 9.2rem 3rem 9rem; transition: all ease .5s; } .l-humbNav ul.children li.parents_list:first-child .l-humbNav_main { padding-top: 3.3rem; } .l-humbNav ul.children li.parents_list:last-child .l-humbNav_main { padding-bottom: 3rem; } .l-humbNav_main:hover { background-color: #7e6f6f; } ul.underChild .l-humbNav_main:hover { background-color: #6c5959; } /* none */ .l-humbNav_main.none { opacity: 0.5; pointer-events: none; } /* Txt */ .l-humbNav_main .eng { font-size: 1.8rem; letter-spacing: 0.15em; opacity: 0.8; margin-top: -0.3rem; margin-left: 0.4rem; font-variant: small-caps; display: flex; padding-left: 0rem; position: relative; color: #fff; } .l-humbNav_main .eng:before { content: "+"; color: #f7d983; opacity: 0.6; font-size: 88%; margin-right: 0.5rem; margin-left: -0.4rem; } .l-humbNav_main .jpn { font-size: 1.1rem; margin-left: auto; margin-right: -0.3rem; opacity: 0.9; color: #fff; margin-top: -0.1rem; letter-spacing: 0.05em; } /* Arrow */ .l-humbNav_main:before { content: ""; background-image: url(../../assets/img/common/humbUnderArrow.svg); display: block; position: absolute; top: 51%; left: 2.2rem; transform: translateY(-59%) rotate(-90deg); background-size: cover; background-position: center center; width: 1.3rem; height: 1.3rem; transition: all .25s ease; transition-delay: 0s; display: none; } .l-humbNav_main.active:before { transform: translateY(-59%) rotate(0deg); } /* sub */ .l-humbNav .children { display: none; } .l-humbNav .children_list + .children_list { padding-top: 1.5rem; } .l-humbNav .children_list:first-child { padding-top: 1.1rem; } .l-humbNav .children_list:last-child { padding-bottom: 2.5rem; } /* Arrow */ .l-humbNav_sub .link { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; display: flex; position: relative; align-items: center; cursor: pointer; margin: 0 2.3rem 0 2.1rem; overflow: hidden; padding-left: 1.2rem; } .l-humbNav_sub .link:before { content: ""; background-image: url(../../assets/img/common/humbRightArrow.svg); display: block; position: absolute; top: 50%; left: 0; transform: translateY(-75%); background-size: cover; background-position: center center; width: 1.1rem; height: 1.1rem; z-index: 3; display: none; } /* Txt */ .l-humbNav_sub .eng { font-size: 1.2rem; letter-spacing: 0.05em; padding-left: 0.1rem; padding-right: 1.1rem; text-transform: capitalize; background-color: #fff; display: block; position: relative; z-index: 2; } .l-humbNav_sub .jpn { font-size: 1rem; letter-spacing: 0.065em; margin-left: auto; margin-top: -0.5rem; opacity: 0.5; padding-left: 1.2rem; padding-right: 0.7rem; transform: scale(0.95); background-color: #fff; display: block; position: relative; z-index: 2; } /* Border */ .l-humbNav_sub .link:after { content: ""; position: absolute; display: block; width: 100%; height: 1px; border-top: 1px dotted #eaeaea; top: 43%; transform: translateY(-50%); z-index: 1; } /* cont */ .l-humbNav_subCont { background-color: #F4F4F4; padding: 4.3rem 5.2rem; margin: 3.1rem 0 2.5rem; display: none; } .l-humbNav_subCont a:hover { opacity: 0.6; transition: all ease .5s; } /* cat */ .l-humbNav_subCont .cat-item { font-size: 1.3rem; font-family: adobe-garamond-pro, sans-serif; font-variant: small-caps; letter-spacing: 0.15em; } .l-humbNav_subCont .cat-item + .cat-item { margin-top: 1.6rem; } .l-humbNav_subCont .cat-item:before { content:"-"; font-family: nimbus-sans, sans-serif; margin-right: 0.8rem; margin-left: -0.7rem; } /* feature */ .l-humbNav_subCont .l-humbNav_subFeature { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; } .l-humbNav_subCont .l-humbNav_subFeature + .l-humbNav_subFeature { margin-top: 1.7rem; } .l-humbNav_subCont .l-humbNav_subFeature:before { content:"-"; font-family: nimbus-sans, sans-serif; margin-right: 0.7rem; margin-left: -0.7rem; } /* --- wrap --- */ .l-humbNavWrap { background-color: #776B6B; color:#fff; width: 130%; margin-left: -15%; } .l-humbNavWrap > .inner { width: 77%; margin:0 auto; } .l-humbNavWrap a { color:#fff; } /* --- sub --- */ .l-humbNav.sub { margin-top: 0rem; padding-top: 4.8rem; } .l-humbNav.sub2 { margin-top: 0; border-top: initial; padding-top: 7rem; } .l-humbSub { display: flex; padding: 3.4rem 2.9rem 3.4rem; border-top: 1px dotted #e7e7e7; border-bottom: 1px dotted #e7e7e7; } /* title */ .l-humbSubtitle { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.22em; font-family: adobe-garamond-pro, sans-serif; padding: 0rem 3.1rem; margin-top: 0.3rem; margin-bottom: 2.1rem; } /* btn */ .l-humbNav.sub .l-humbNavFirst { padding: 0.3rem 3.1rem; } .l-humbNav.sub .l-humbNavFirst > .eng { font-size: 2.5rem; } .l-humbNav.sub2 .l-humbNavFirst > .eng { font-size: 2.25rem; } /* sns */ .l-humbInsta { padding: 0rem 3.3rem; margin-top: 1.5rem; } .l-humbInsta i { font-size: 2rem; } /* --- info --- */ .l-humbInfo { margin-top: 0.2rem; white-space: nowrap; } .l-humbInfo ul { display: flex; margin-top: 0.2rem; } .l-humbInfo ul li { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.35rem; letter-spacing: 0.15em; position: relative; padding-left: 1.4rem; font-variant: small-caps; opacity: 0.6; } .l-humbInfo ul li + li { margin-left: 2.4rem; } .l-humbInfo ul li:before { position: absolute; content: ""; top: 54%; left: 0; width: 0.3rem; height: 0.3rem; border-top: 1px solid #d4b890; border-right: 1px solid #d4b890; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(45deg); z-index: 0; } /* --- sns --- */ .l-humbSns { margin-left: auto; margin-top: -0.5rem; } .l-humbSns ul { display: flex; align-items: center; } /* icon */ .l-humbSns li { font-size: 1.8rem; opacity: 0.5; } .l-humbSns li:nth-child(1) { font-size: 1.8rem; } .l-humbSns li:nth-child(1) + li { margin-left: 1.2rem; margin-top: 0rem; } .l-humbSns li + li { margin-left: 0.9rem; } /* --- l-humbSub__list --- */ .l-humbSub__list { border-top: 1px dotted rgba(255,255,255,0.2); } .l-humbSub__list ul { padding: 5.2rem 3.4rem 5.2rem; display: flex; flex-wrap: wrap; } /* list */ .l-humbSub__list li { width: 35%; font-family: adobe-garamond-pro, sans-serif; font-size: 1.35rem; letter-spacing: 0.07em; position: relative; opacity: 0.8; } .l-humbSub__list li:nth-child(n+3) { margin-top: 1.6rem; } /* --- l-humbCredit--- */ .l-humbCredit { border-top: 1px dotted rgba(255, 255, 255, 0.2); } .l-humbCredit > ul { padding: 6rem 3.4rem 14.6rem; } .l-humbCredit li { display: flex; } .l-humbCredit li + li { margin-top: 4.6rem; } .l-humbCredit .right { border-left: 1px dotted rgba(255, 255, 255, 0.2); margin-left: 3.9rem; padding-left: 3.5rem; } /* sub */ .l-humbCredit__sub { font-family: adobe-garamond-pro, sans-serif; font-size: 1rem; letter-spacing: 0.05em; } /* title */ .l-humbCredit__title { margin-top: 1.4rem; display: flex; align-items: center; } .l-humbCredit__title .main { font-family: minion-pro-display, serif; font-size: 1.7rem; letter-spacing: 0.15em; font-weight: 600; } .l-humbCredit__title .sub { font-family: adobe-garamond-pro, sans-serif; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.27em; margin-left: 1.3rem; } /* desc */ .l-humbCredit .desc { font-size: 1.1rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.04em; line-height: 1; } /* url */ .l-humbCredit__url { font-family: adobe-garamond-pro, sans-serif; font-size: 1rem; letter-spacing: 0.05em; text-decoration: underline; text-underline-offset: 0.7rem; text-decoration-color: rgba(255,255,255,0.3); margin-top: 1.2rem; } /* --- btnlist --- */ .l-humbBtnlist { width: 99%; margin: 0.7rem auto 6rem; } /* btn */ .l-humbBtnlist__btn { } .l-humbBtnlist__btn + .l-humbBtnlist__btn { margin-top: 0.4rem; } .l-humbBtnlist__btn a { font-size: 1.65rem; font-family: adobe-garamond-pro,sans-serif; display: block; padding: 2.8rem 0 2rem; letter-spacing: 0.1em; text-align: center; border-radius: 0.2rem; } /* black */ .l-humbBtnlist__btn.black a { color:#fff; background-color:#4f4f4f; } /* gray */ .l-humbBtnlist__btn.gray a { background-color:#F4F4F4; } /* --------------------------- ■ l-humbEdition --------------------------- */ /* --- common --- */ .l-humbEdition { position: fixed; background-color: #776B6B; border-radius: 0.4rem; z-index: 7; width: 26%; left: 0.75%; top:1.75%; overflow-y: scroll; visibility: hidden; opacity: 0; transition: all ease .7s; } .l-humbEdition > .inner { width: 94%; margin: 1.2rem auto; } /* active */ body.humb-active .l-humbEdition { visibility: visible; opacity: 1; top: 1.15%; } /* --- l-humbEd_thum --- */ .l-humbEd_thum { height: 23vw; border: 2px solid #fff; box-sizing: border-box; } .l-humbEd_thum figure { height: 100%; width: 100%; } .l-humbEd_thum figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- l-humbEd_cont --- */ .l-humbEd_cont { color: #fff; margin-bottom: 5.2rem; } .l-humbEd_cont > .inner { width: 82%; margin: 5rem auto 0; } /* num */ .l-humbEd_cont .num { font-family: minion-pro-display, serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-left: 0.2rem; } .l-humbEd_cont .num span:nth-child(1) { font-weight: 600; letter-spacing: 0.22em; } .l-humbEd_cont .num span:nth-child(2) { margin-left: 1rem; font-size: 151%; font-variant: small-caps; } /* title */ .l-humbEd_cont .title { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 2.4rem; font-weight: 500; letter-spacing: 0.1em; margin-top: 1.3rem; } /* sub */ .l-humbEd_cont .sub { margin-top: 1.4rem; } .l-humbEd_cont .sub:after { content:""; display: block; width: 2rem; border-top: 1px solid rgba(255,255,255,0.3); margin-left: 0.2rem; margin-top: 1.6rem; padding-bottom: 2.4rem; } .l-humbEd_cont .sub img { width: 57%; filter: invert(100) sepia(0%) saturate(751%) hue-rotate(13deg) brightness(218%) contrast(101%); } /* progress */ .l-humbEd_cont .progress { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.05em; margin-left: -0.6rem; margin-bottom: 1.6rem; } /* desc */ .l-humbEd_cont .desc { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.08em; line-height: 2.25; } /* btn */ .l-humbEd_cont .btn { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.05em; background-color: #fff; transition: all ease .5s; width: 104%; margin-left: -2%; text-align: center; border-radius: 5rem; margin-top: 2.4rem; } .l-humbEd_cont .btn a { display: block; width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; transition: all ease .5s; } /* hover */ .l-humbEd_cont .btn:hover { background-color: #5d5151; } .l-humbEd_cont .btn:hover a { color:#fff; } /* ><><><><><><><><><><><><><><><><> ▼ Search ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-searchBtn --------------------------- */ .l-searchBtn { position: absolute; width: 3.0rem; height: 3.0rem; z-index: 9; right: 3.7rem; cursor: pointer; transition: all ease .65s; top: 3.0rem; } .l-searchBtn span { position: absolute; display: inline-block; height: .2rem; width: 100%; background-color: #fff; left: 0; transition: all ease .25s; } .l-searchBtn span:nth-child(1) { top: 50%; transform: rotate(45deg) translateY(-50%); } .l-searchBtn span:nth-child(2) { top: 50%; transform: rotate(-45deg)translateY(-50%); } /* --------------------------- ■ l-searchCont --------------------------- */ /* --- common --- */ body.saerch-active .l-drawerMenu__bg { visibility: visible; opacity: 1; cursor:pointer; } .l-searchCont { position: absolute; top: 19.8rem; width: 100%; height: 0%; background-color: #fff; z-index: 6; transition: height .55s cubic-bezier(.23,1,.32,1); overflow: hidden; } header.search-open .l-searchCont { height: 20.0rem; } .l-fixedMenu .l-searchCont { top: 7.3rem; } .l-fixedMenu.search-open.visible .l-searchCont { height: 17.2rem; } .l-searchCont > .inner { width: 71%; height: 100%; margin:0 auto; } /* --- form --- */ .l-searchCont form { width: 100%; height: 100%; position: relative; display: flex; align-items: center; } .l-searchCont form input { font-size: 1.6rem; letter-spacing: 0em; font-weight: 300; width: calc(100% - 2.0rem); border-radius: 0; border:none; font-family: nimbus-sans,"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; border-bottom: 1px solid #000; right: 0; opacity: 0; line-height: 3.9; outline: none; margin-top: -2.5rem; transform: translateY(1.5rem); transition: .4s all cubic-bezier(.275,0,0,1); transition-delay: 0s; background: transparent; } body.saerch-active .l-searchCont form input { opacity: 1; transform: translateY(0rem); transition-delay: 0.3s; } .l-searchCont form input::placeholder { color:#949494; font-weight: 300; padding-left: .8rem; padding-right: .8rem; } .l-listBrand { display: none !important; } .l-listBrand + .l-listSp { display: none !important; } /* ><><><><><><><><><><><><><><><><> ▼ MusicNav ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ /* --- common --- */ .l-musicNav { position: fixed; width: 55.4rem; right: 0%; height: 18.2rem; bottom: -18.8rem; background: rgb(242 242 242 / 90%); box-shadow: 0px 4px 8px -3px #000000; border-radius: 2rem 0rem 0rem 0rem; z-index: 2; transition: all .95s cubic-bezier(.23,1,.32,1); } .l-musicNav a { display: block; width: 100%; height: 100%; } /* windowIn */ body.start2 .l-musicNav.windowIn { bottom: 0; } /* windowOut */ body.drawer-active.start2 .l-musicNav, body.start2 .l-musicNav.windowIn.windowOut, body.start2 .l-musicNav.windowIn.windowOut2 { bottom: -18.8rem; } /* active */ body.musicScroll { overflow: hidden; } body.musicScroll .l-humbBg { visibility: visible; opacity: 1; background: rgba(22,26,20,0.5); } body.start2 .l-musicNav.active.windowIn.windowOut { bottom: 2.9rem; } body.start2 .l-musicNav.active2 { height: 68rem; width: 40rem; } /* --- sub --- */ .l-musicNav .sub { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.4rem; font-weight: 500; color: #7f6e57; letter-spacing: 0.2em; margin-top: -1.2rem; font-variant: small-caps; display: block; line-height: 1.7; text-transform: lowercase; } /* --- title --- */ .l-musicNav .title { font-size: 2.3rem; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.7; color: #000000; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- embed --- */ .l-musicNav .embed { background: #f3f3f3; } /* --------------------------- ■ Horizontal --------------------------- */ /* --- common --- */ .l-musicNav__hr { width: 100%; height: 100%; cursor: pointer; border-radius: 2rem 0rem 0rem 0rem; transition: all ease 0.5s; } .l-musicNav__hr > .inner { display: flex; align-items: center; padding: 2rem; height: calc(100% - 4rem); } .l-musicNav__hr .left { width: 55.6%; margin-left: 9.6%; margin-right: 8.5%; margin-top: 1.2rem; } .l-musicNav__hr .right { width: 23%; } /* hover */ .l-musicNav__hr:hover { background: rgb(242,242,242); } /* active */ .l-musicNav.active .l-musicNav__hr { opacity: 0; visibility: hidden; } /* --- title --- */ .l-musicNav__hr .title { margin-top: 0.6rem; } /* --- artist --- */ .l-musicNav__hr .artist { font-size: 1.2rem; color: #9c9c9c; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; margin-top: 0.3rem; margin-left: 0rem; letter-spacing: 0.05em; } /* --- copy --- */ .l-musicNav__hr .copy { font-size: 1.1rem; display: inline-block; padding: 0rem 0.4rem 0rem; letter-spacing: 0.05em; border-top: 0px solid #ecebeb; margin-top: 0.7rem; margin-left: -0.3rem; transform: scale(0.85); transform-origin: top left; color: #444444; } /* --- embed --- */ .l-musicNav__hr .embed { width: 10.3rem; height: 10.3rem; margin: auto; border: 1px solid #464646; } .l-musicNav__hr .embed iframe { width: 100% !important; height: 100% !important; pointer-events: none; } /* --------------------------- ■ Close --------------------------- */ /* --- common --- */ .l-musicNav__btn { background: #6a5c5c; height: 7rem; width: 7rem; position: absolute; top: -7rem; right: 0; border-radius: 1.5rem 0rem 0rem 0rem; cursor: pointer; display: none; } /* --------------------------- ■ Vertical --------------------------- */ /* --- common --- */ .l-musicNav__vr { visibility: hidden; opacity: 0; position: absolute; top: 0; height: 100%; width: 100%; transition: all ease .5s; } /* active */ .l-musicNav.active3 .l-musicNav__vr { visibility: visible; opacity: 1; } /* --- close --- */ .l-musicNav__close { position: absolute; width: 2.2rem; height: 2.2rem; z-index: 9; opacity: 1; display: flex; align-items: center; justify-content: center; top: 0.7rem; right: 0.7rem; cursor: pointer; transition: all ease .65s; border: 1px solid rgb(174 174 174 / 30%); } .l-musicNav__close .inner { width: 68%; height: 68%; display: block; position: relative; } .l-musicNav__close span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #00000099; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } .l-musicNav__close span:nth-child(1) { top: 50%; transform: rotate(-45deg); } .l-musicNav__close span:nth-child(2) { top: 50%; transform: rotate(45deg); } /* active */ .l-musicNav__close:hover { background-color: #fff; } .l-musicNav__close:hover span { background-color: #000; } /* --- embed --- */ .l-musicNav__vr .embed { width: 80%; height: 32rem; margin: 3.6rem auto 0; display: flex; align-items: center; justify-content: center; border: 1px solid #e3e3e3; } .l-musicNav__vr .embed iframe { width: 56% !important; height: 56% !important; } /* --- cont --- */ .l-musicNav__vr .cont { text-align: center; margin-top: 4.9rem; } /* --- title --- */ .l-musicNav__vr .title { margin-top: 1.5rem; } /* --- copy --- */ .l-musicNav__vr .copy { font-size: 1.1rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; display: inline-block; padding: 2rem 1.2rem 2rem; letter-spacing: 0.1em; border-top: 1px solid #ecebeb; border-bottom: 1px solid #ecebeb; transform: scale(0.875); transform-origin: top; margin-top: 2.2rem; color: #313131; } /* --- readBtn --- */ .l-musicNav__vr .readBtn { font-size: 1.15rem; font-family: adobe-garamond-pro, sans-serif; display: inline-block; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.145em; margin-top: 4.5rem; position: relative; } /* border */ .l-musicNav__vr .readBtn:before { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } .l-musicNav__vr .readBtn:hover::before { transform-origin: right top; transform: scale(0, 1); } .l-musicNav__vr .readBtn:after { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } .l-musicNav__vr .readBtn:hover::after { transform-origin: left top; transform: scale(1,1); } /* ================================= // ● listSect // /* ><><><><><><><><><><><><><><><><> ▼ MV ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ section.l-mv { padding-bottom: 1rem; max-height: 48vw; min-height: 52.5rem; position: relative; } section.l-mv > .inner { height: 100%; } /* --------------------------- ■ l-mv__slider --------------------------- */ /* --- common --- */ ul.l-mv__slider { height: 100%; position: relative; opacity: 1; transition: .35s all cubic-bezier(.275,0,0,1); } ul.l-mv__slider .slick-list, ul.l-mv__slider .slick-track, ul.l-mv__slider .slick-slide, ul.l-mv__slider .slick-slide > div { height: 100%; /*opacity: 1 !important;*/ } ul.l-mv__slider li { height: 100%; position: relative; } /* --- l-mv__bg --- */ .l-mv__bg { /*height: calc(100% - 14.1rem);*/ max-height: calc(100% - 16vh); height: calc(100% - 18.7vh); width: 70.3%; background-size: cover; background-position: center center; margin: 0 auto; overflow: hidden; border: 1px solid #fff; /* padding: 0.3rem;*/ box-sizing: border-box; position: relative; transition: all ease 1s; transition-delay: 1s; } .l-mv__bg a { height: 100%; width: 100%; display: inline-block; overflow: hidden; } .l-mv__bg figure { width: 100%; height: 100%; } .l-mv__bg figure.pc { display: block; position: relative; } .l-mv__bg figure.sp { display: none; } .l-mv__bg figure img { width: 100%; height: 100%; transform: scale(1.1); will-change: transform; object-fit: cover; font-family: 'object-fit: cover;'; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slick-slide figure img { transition: 3.8s all cubic-bezier(.275,0,0,1); } .delay .l-mv__bg figure img { transition: 6.8s all cubic-bezier(0.275,0,0,1); } .slick-slide figure img.lazyloaded { opacity: 1; } .slick-slide.slick-active figure img.lazyloaded { will-change: transform; transform: scale(1); opacity: 1; } /*.l-mv__bg figure { clip-path: inset(0% 100% 0% 0%); transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: 3s; } .slick-slide.slick-active .l-mv__bg figure { clip-path: inset(0% 0% 0% 0%); transition: 1.75s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /*.preve-slide .l-mv__bg figure { clip-path: inset(0% 0% 0% 0%); transition: 1.75s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } */ /* Pre */ .l-mv__bg:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #fff; display: block; z-index: 1; transition: 1.6s all cubic-bezier(0.275,0,0,1); } .l-mv__bg figure { transform: scale(1.1); transition: 1.6s all cubic-bezier(0.275,0,0,1); } /* Start */ body.start2 .l-mv__bg { /* border: 1px solid #eee;*/ } body.start2 .l-mv__bg:before { height: 0; } body.start2 .l-mv__bg figure { transform: scale(1); } /* --- listCont --- */ .l-mv__cont { position: absolute; bottom: 7.9vh; left: 5.8%; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: 1.15s; } body.done .l-mv__cont { transform: translateY(0rem); opacity: 1; } .l-mv__cont > .inner { display: flex; align-items: center; white-space: nowrap; overflow: hidden; } /* --- date --- */ .l-mv__cont .c-listDate { font-size: 1.8rem; letter-spacing: 0.09em; margin-right: 4.3rem; color: #c9c9c9; } .l-mv__cont .c-listDate:before { background-color: rgba(255,255,255,0.6); height: 1.1rem; } /* First */ .l-mv__cont .c-listDate .fAnim { opacity: 0; display: inline-block; transform: translateY(1em); transition: all ease 0s; transition-delay: 0.4s; } body.start2 .slick-active .l-mv__cont .c-listDate .fAnim { opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* Second */ .l-mv__cont .c-listDate .sAnim { display: inline-block; opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); } .preve-slide .l-mv__cont .c-listDate .sAnim { opacity: 0; transform: translateY(-1em); transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* --- listTitle --- */ .l-mv__cont .c-listTitle { font-size: 1.7rem; letter-spacing: 0.05em; line-height: 1.1; margin-top: 0.1rem; order: 2; overflow: hidden; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); } .l-mv__cont .c-listTitle a { display: inline-block; } .l-mv__cont .c-listTitle span.feature { margin-left: -1.1rem; } .l-mv__cont .c-listTitle br { display: none; } .l-mv__cont .c-listTitle .part { font-size: 95%; margin-left: 0.5rem; } /* First */ .l-mv__cont .c-listTitle .firstAnim { display: inline-block; transform: translateY(1.5em); opacity: 0; transition: all ease 0s; transition-delay: 0.5s; } body.start2 .slick-active .l-mv__cont .c-listTitle .firstAnim { opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } /* Second */ .l-mv__cont .c-listTitle .secondAnim { display: inline-block; transform: translateY(0em); opacity: 1; transition: all ease 0s; } .preve-slide .l-mv__cont .c-listTitle .secondAnim { opacity: 0; transform: translateY(-1.5em); transition: 1.4s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } /* --- listCat --- */ .l-mv__cont .c-listCat { order: 1; margin-top: 0.3rem; margin-left: 0rem; margin-right: 4.4rem; } .l-mv__cont .c-listCat span + span { margin-left: 0rem; } .l-mv__cont .c-listCat a { font-size: 1.45rem; letter-spacing: 0.065em; padding: 0.65rem 1.3rem 0.55rem; } /* First */ .l-mv__cont .c-listCat .fAnim { opacity: 0; display: inline-block; transform: translateY(1.5em); transition: all ease 0s; transition-delay: 0.5s; } body.start2 .slick-active .l-mv__cont .c-listCat span:nth-child(1) .fAnim { opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 0.2s; } body.start2 .slick-active .l-mv__cont .c-listCat span:nth-child(2) .fAnim { opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 0.35s; } /* Second */ .l-mv__cont .c-listCat .sAnim { display: inline-block; opacity: 1; transform: translateY(0em); transition: 1.2s all cubic-bezier(.275,0,0,1); } .preve-slide .l-mv__cont .c-listCat span:nth-child(1) .sAnim { opacity: 0; transform: translateY(-1.5em); transition: 1s all cubic-bezier(.275,0,0,1); } .preve-slide .l-mv__cont .c-listCat span:nth-child(2) .sAnim { opacity: 0; transform: translateY(-1.5em); transition: 1s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } /* --- arrow --- */ /* Area */ .l-mv__slider button.slick-arrow { font-size: 0; background: initial; position: absolute; width: 11rem; height: 11rem; border: 0px solid #dddddd; top: 37.8%; transform: translateY(-50%); z-index: 1; border-radius: 100%; outline: none; transition: all ease .3s; } .l-mv__slider button.slick-prev { left: 4.1%; } .l-mv__slider button.slick-next { right: 3.7%; } /* Arrow */ .l-mv__slider button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1.25vw; height: 1.25vw; transition:all .25s ease; transition-delay: 0.25s; } .l-mv__slider button.slick-prev:before { background-image: url(../../assets/img/common/arrowLeft.svg); } .l-mv__slider button.slick-next:before { background-image: url(../../assets/img/common/arrowRight.svg); } /* before - Pre */ .l-mv__slider button.slick-arrow:before { top: 54%; opacity: 0; } body.start2 .l-mv__slider button.slick-arrow:before { top: 50%; opacity: 1; } /* before - hover */ body.start2 .l-mv__slider button.slick-arrow:hover:before { transition-delay: 0s; } body.start2 .l-mv__slider button.slick-prev:hover:before { top: 46%; opacity: 0; } body.start2 .l-mv__slider button.slick-next:hover:before { top: 46%; opacity: 0; } /* After - hover */ .l-mv__slider button.slick-arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1.2vw; height: 1.2vw; opacity: 0; transition:all .25s ease; transition-delay: 0s; } .l-mv__slider button.slick-prev:after { background-image: url(../../assets/img/common/arrowLeft.svg); } .l-mv__slider button.slick-next:after { background-image: url(../../assets/img/common/arrowRight.svg); } .l-mv__slider button.slick-arrow:hover:after { transition-delay: 0.25s; } .l-mv__slider button.slick-prev:hover:after { top: 50%; opacity: 1; } .l-mv__slider button.slick-next:hover:after { top: 50%; opacity: 1; } /* CircleBase */ .l-mv__slider button.slick-arrow .circleBase { fill:transparent; stroke:rgba(0,0,0,0.09); position: absolute; top: 50%; left: 50%; z-index: 3; } .l-mv__slider button.slick-arrow .circleBase circle{ stroke-dasharray:0 345; } /* Start */ body.start2 .l-mv__slider button.slick-arrow .circleBase circle{ stroke-dasharray:345 345; transition: 1.75s all cubic-bezier(.275,0,0,1); } body.start2 .l-mv__slider button.slick-arrow .circleBase .mvDots { stroke:rgba(0,0,0,0.09); } /* CircleArrow */ .l-mv__slider button.slick-arrow .circleArrow { fill:transparent; stroke:rgba(0,0,0,0); position: absolute; top: 50%; left: 50%; z-index: 4; } .l-mv__slider button.slick-arrow .circleArrow circle{ stroke-dasharray:345; stroke-dashoffset:0; transition:all .55s ease; } .l-mv__slider button.slick-arrow:hover .circleArrow circle{ stroke-dashoffset:690; } .l-mv__slider button.slick-arrow:hover .circleArrow { stroke:rgba(0,0,0,0.8); } /* --- dots --- */ .l-mv__slider .slick-dots { position: absolute; /*bottom: 5.5rem;*/ bottom: 7.7vh; right: 6.3%; display: flex !important; opacity: 0; transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: 0.25s; } body.start2 .l-mv__slider .slick-dots { opacity: 1; } .l-mv__slider .slick-dots li + li { margin-left: 0rem; } .l-mv__slider .slick-dots button { border: 0px solid #fff; font-size: 0; padding:0; width: 2.2rem; height: 2.2rem; background-color: transparent; border-radius: 100%; box-sizing: border-box; outline:none; position: relative; display: flex; align-items: center; justify-content: center; transition: all ease .35s; z-index: 1; } .l-mv__slider .slick-dots li button:before { content:""; width: 1rem; height: 1rem; background-color: #e5e5e5; display: block; border-radius: 100%; transition: all ease .35s; } .l-mv__slider .slick-dots button:hover:before, .l-mv__slider .slick-dots li.slick-active button:before { background-color: #505050; } /* circle */ .l-mv__slider .slick-dots .mvDots{ fill:transparent; stroke:rgba(0,0,0,1); position: absolute; top: 54%; left: 55%; z-index: 0; cursor: pointer; transform: translate(-50%,-50%) scale(1.0); } .l-mv__slider .slick-dots .mvDots circle{ stroke-dasharray:0 69; } body.start2 .l-mv__slider .slick-dots li.slick-active .mvDots circle{ stroke-dasharray:69 69; transition:all 9.95s cubic-bezier(.23,1,.32,1); } body.start2 .l-mv__slider .slick-dots li.slick-active .mvDots { stroke:#333; } /* ><><><><><><><><><><><><><><><><> ▼ listPick ><><><><><><><><><><><><><><><><> /* --------------------------- ■ common --------------------------- */ .l-mvPick { position: fixed; top: 3rem; right: 3.1rem; width: 34.8rem; height: initial; background-color: #fff; z-index: 6; box-shadow: 3px 3px 16px -7px rgba(0,0,0,0.2); border-top: 2px solid #000; box-sizing: border-box; } /* --------------------------- ■ close --------------------------- */ .l-mvPick__close { position: absolute; width: 3.7rem; height: 3.7rem; top: -1px; right: 0; background-color: #000; z-index: 1; } /* --------------------------- ■ head --------------------------- */ .l-mvPick__head { font-family: minion-pro-display, serif; font-size: 2.8rem; letter-spacing: 0.21em; font-weight: 600; text-transform: uppercase; text-align: center; padding-top: 4.7rem; padding-bottom: 4rem; } /* --------------------------- ■ list --------------------------- */ /* --- common --- */ .l-mvPick__cont { display: flex; width: 80.5%; margin: 0 auto; align-items: center; } .l-mvPick__cont + .l-mvPick__cont { margin-top: 2.9rem; padding-top: 2.9rem; border-top: 1px dotted #dedede; } /* --- thumb --- */ .l-mvPick__cont .image { width: 30%; height: 5.6vw; } .l-mvPick__cont .image a { display: block; height: 100%; width: 100%; } .l-mvPick__cont .image figure { height: 100%; width: 100%; } .l-mvPick__cont .image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- cont --- */ .l-mvPick__cont .cont { width: 70%; } .l-mvPick__cont .cont > .inner { margin-left: 3.2rem; } /* title */ .l-mvPick__cont .title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.75; letter-spacing: 0.05em; } /* cat */ .l-mvPick__cont .c-listCat { margin-top: 0.9rem; } .l-mvPick__cont .c-listCat a { font-size: 1rem; letter-spacing: 0.05em; padding: 0.4rem 0.7rem 0.4rem; } /* --------------------------- ■ arrow --------------------------- */ .l-mvPick .conduct { margin-top: 3.4rem; border-top: 1px dotted #dedede; height: 4.7rem; position: relative; } .l-mvPick .conduct a { display: block; width: 100%; height: 100%; } .l-mvPick .conduct:before { position: absolute; content: ""; top: 42%; left: 50%; width: 0.7rem; height: 0.7rem; border-top: 1px solid #C4BBA3; border-right: 1px solid #C4BBA3; -webkit-transform: translate(-50%,-50%) rotate(135deg); transform: translate(-50%,-50%) rotate(135deg); z-index: 0; } .l-mvPick .conduct:after { content: ""; position: absolute; width: 100%; border-bottom: 1px solid #000; bottom: 1px; } /* ><><><><><><><><><><><><><><><><> ▼ listBase ><><><><><><><><><><><><><><><><> /* --------------------------- ■ responsive --------------------------- */ .l-listPc { display: block; } .l-listSp { display: none; } /* --------------------------- ■ l-listHead --------------------------- */ /* --- common --- */ .l-listHead { width: 96.3%; margin: 9.2rem auto 11.5rem; text-align: center; border-top: 1px solid #f3f3f3; padding-top: 11.4rem; } /* issue */ section.l-listIssue .l-listHead { margin-bottom: 8rem; } /* music */ section.l-archiveCont.melody .l-listHead { margin-bottom: 5.6rem; } /* --- title --- */ .l-listHead__title { font-family: minion-pro-display, serif; font-size: 3.75rem; letter-spacing: 0.34em; font-weight: 600; text-transform: uppercase; display: inline-block; position: relative; } .l-listHead__title:before { content: ""; position: absolute; bottom: -1.3rem; left: -0.4rem; width: calc(100% + -0.1rem); height: 0px; background-color: #ededed; } /* for Editor */ section.l-listEdit .l-listHead__title { font-size: 2.35rem; margin-left: 1.8rem; } /* for Issue */ section.l-listIssue .l-listHead__title { margin-bottom: 2.9rem; } /* --------------------------- ■ listCont --------------------------- */ /* --- common --- */ section.l-listBase { width: 91.8%; margin:0 auto; } section.l-mv + section.l-listBase { margin-top: 10.5rem; } section.l-listBase > .inner { font-size: 0; width: 100%; margin:0 auto; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } section.l-listBase .c-listCont { width: 33.3%; padding:0 4.1rem 11.0rem; } /* --- listImage --- */ .l-listBase .c-listImage { height: 17vw; } /* --- listTitle --- */ .l-listBase .c-listTitle { width: 93%; } /* --- c-listCatDate --- */ .l-listBase .c-listCatDate { } /* --------------------------- ■ l-listSect__showAll --------------------------- */ /* common */ .l-listSect__showAll { width: 98%; margin: 7.5rem auto; padding-bottom: 1.5rem; text-align: center; position: relative; opacity: 0; transition: all ease .35s; z-index: 0; } body.start1 .l-listSect__showAll { opacity: 1; } /* btn */ .l-listSect__showAll a { font-size: 1.3rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.375em; position: relative; } /* arrow */ .l-listSect__showAll .arrow { position: relative; display: inline-block; } /* border */ .l-listSect__showAll a:before { content:""; position: absolute; bottom:-1.3rem; left: -0.8rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } .l-listSect__showAll a:hover::before { transform-origin: right top; transform: scale(0, 1); } .l-listSect__showAll a:after { content:""; position: absolute; bottom:-1.1rem; left: -0.4rem; width: 113%; height: .1rem; background-color: #e9ddb8; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } .l-listSect__showAll a:hover::after { transform-origin: left top; transform: scale(1, 1); } /* latest */ section.l-listLatest .l-listSect__showAll { margin-top: 6.9rem; padding-bottom: 0rem; } /* feature */ section.l-listFeature .l-listSect__showAll { margin-top: 5.5rem; padding-bottom: 1rem; } /* ><><><><><><><><><><><><><><><><> ▼ listLatest ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listLatest__loop --------------------------- */ /* --- common --- */ section.l-listLatest { margin: 0rem auto 0; padding-top: 0; opacity: 0; transform: translateY(0.7vw); transition: all ease 0.75s; } section.l-archiveCont.l-listLatest { margin-top: 2.7rem; } ul.l-listLatest__loop { position: relative; width: 100%; margin: 0 auto; display: flex !important; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* l-sectionCont */ section.l-archiveCont.l-sectionCont { margin-top: 0rem; } section.l-archiveCont.l-sectionCont02 { padding-bottom: 9rem; } /* scroll */ body.membNavAdjust section.l-listLatest { opacity: 1; transform: translateY(0vw); } /* --- head --- */ section.l-listLatest .l-listFeatureHead { text-align: center; margin: 0 auto 11rem; display: none; } /* l-sectionCont */ section.l-sectionCont .l-listHead { padding-top: 11.5rem; margin: 0rem auto 7.4rem; } section.l-sectionCont .l-listHead__title { font-size: 2.75rem; } /* --- listCont --- */ ul.l-listLatest__loop li.c-listCont { width: 25%; padding: 0 2.5rem 9rem; } ul.l-listLatest__loop.l-horizontal__loop .c-listCont.horizontal:nth-child(7), ul.l-listLatest__loop.l-horizontal__loop .c-listCont.horizontal:nth-child(8) { display: none; } /* border */ ul.l-listLatest__loop li.c-listCont + li { border-left: 1px dotted #e7e4e4; } ul.l-listLatest__loop li.c-listCont:nth-child(5) { border-left: initial; } /* hover */ ul.l-listLatest__loop li.c-listCont:hover { background: initial; } /* --- listImage --- */ ul.l-listLatest__loop li.c-listCont .c-listImage { height: 13.6vw; width: 65%; margin: 6.5rem auto 0; } /* --- subTitle --- */ ul.l-listLatest__loop .c-subTitle { } /* --- listTitle --- */ ul.l-listLatest__loop .c-listTitle { width: 79%; } /* --- listDesc --- */ ul.l-listLatest__loop .c-listDesc { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* --- nav --- */ section.l-listLatest button.slick-arrow { font-size: 0; background: initial; position: absolute; top: -11.5rem; width: 3.8rem; height: 3.8rem; border: 1px solid #e9e9e9; z-index: 1; border-radius: 100%; outline: none; transition: all ease .3s; } /* prev */ section.l-listLatest button.slick-prev { right: -36rem; } /* next */ section.l-listLatest button.slick-next { right: -40.3rem; } /* Arrow */ section.l-listLatest button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; transition:all .25s ease; transition-delay: 0.25s; } section.l-listLatest button.slick-prev:before { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listLatest button.slick-next:before { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listLatest button.slick-arrow:hover:before { transition-delay: 0s; } section.l-listLatest button.slick-prev:hover:before { top: 46%; opacity: 0; } section.l-listLatest button.slick-next:hover:before { top: 46%; opacity: 0; } section.l-listLatest button.slick-arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; opacity: 0; transition:all .25s ease; transition-delay: 0s; } section.l-listLatest button.slick-prev:after { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listLatest button.slick-next:after { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listLatest button.slick-arrow:hover:after { transition-delay: 0.25s; } section.l-listLatest button.slick-prev:hover:after { top: 50%; opacity: 1; } section.l-listLatest button.slick-next:hover:after { top: 50%; opacity: 1; } /* ><><><><><><><><><><><><><><><><> ▼ listGrid ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listGrid --------------------------- */ /* --- common --- */ section.l-listGrid { width: 95%; margin: 12rem auto -5rem; margin-top: 8rem; padding-top: 9.3rem; border-top: 1px solid #f3f3f3; } section.l-listGrid > .inner { display: flex; } .l-listGrid__left { width: 70.5%; } .l-listGrid__right { margin-left: 0.2%; margin-right: -6.4%; margin-bottom: 3rem; width: 29%; } /* margin */ section.l-listEssay + section.l-listGrid { margin-top: 10.6rem; } /* ><><><><><><><><><><><><><><><><> ▼ listFeature ><><><><><><><><><><><><><><><><> /* --- common --- */ section.l-listFeature { } section.l-listFeature.sp { display: none; } /* --- head --- */ .l-listFeatureHead { font-family: minion-pro-display, serif; font-size: 3.7rem; letter-spacing: 0.4em; font-weight: 600; text-transform: uppercase; text-align: center; width: 93.3%; margin: 3.8rem auto 9.5rem; /*padding-left: 2.9rem;*/ } /* --------------------------- ■ l-listFeature__loop --------------------------- */ /* --- common --- */ ul.l-listFeature__loop { display: none; } /* --- listCont --- */ ul.l-listFeature__loop li.c-listCont { width: 25%; padding: 0 2.5rem 8rem; } /* --- listImage --- */ ul.l-listFeature__loop li.c-listCont .c-listImage { height: 28.7vw; } /* --- subTitle --- */ ul.l-listFeature__loop .c-subTitle { } /* --- listTitle --- */ ul.l-listFeature__loop .c-listTitle { font-size: 1.7rem; } /* --------------------------- ■ l-listUnbalance_loop --------------------------- */ /* --- common --- */ .unbalanceBox { } /* --- listCont --- */ .unbalanceBox li.c-listCont { width: 100%; display: flex; padding: 0 2.7rem 5.7rem; align-items: center; position: relative; } .unbalanceBox li.c-listCont + li { border-top: 1px solid #f3f3f3; padding-top: 5.7rem; } .unbalanceBox li.c-listCont:first-child { padding-top: 7.8rem; margin-top: -7rem; } /* hover */ .unbalanceBox li.c-listCont:before { content: ""; position: absolute; width: 103%; top: 0; left: -3%; height: 101%; background: #fff; z-index: -1; transition: all ease .75s; } .unbalanceBox li.c-listCont:hover:before { background: #f8f8f8; } /* --- listImage --- */ .unbalanceBox li.c-listCont .c-listImage { height: 26.8vw; width: 44%; } /* --- contWrapper --- */ .unbalanceBox li.c-listCont .contWrapper { text-align: left; width: 41%; margin-left: 9.5%; margin-top: -0.8rem; } /* --- subTitle --- */ .unbalanceBox li.c-listCont .c-subTitle { margin-top: initial; margin-left: 0.2rem; } /* --- listTitle --- */ .unbalanceBox li.c-listCont .c-listTitle { font-size: 2.1rem; margin-top: 1.5rem; width: 95%; margin-left: initial; } .unbalanceBox li.c-listCont .c-listTitle br { display: none; } .unbalanceBox li.c-listCont .c-listTitle .count span { margin-top: 2.1rem; } /* --- listDesc --- */ .unbalanceBox li.c-listCont .c-listDesc { margin-left: initial; width: 73%; } /* --- c-listCat --- */ .unbalanceBox li.c-listCont .c-listCat { margin-left: -0.6rem; } /* --------------------------- ■ Arrow --------------------------- */ /* --- nav --- */ section.l-listFeature button.slick-arrow { font-size: 0; background: initial; position: absolute; top: -15.8rem; width: 3.2rem; height: 3.2rem; border: 1px solid #e9e9e9; z-index: 1; border-radius: 100%; outline: none; opacity: 0; transform: translateY(0.5vw); transition: all ease .3s; } body.start2 section.l-listFeature button.slick-arrow { opacity: 1; transform: translateY(0vw); } /* prev */ section.l-listFeature button.slick-prev { left: 3.1rem; } /* next */ section.l-listFeature button.slick-next { right: 2.7rem; } /* Arrow */ section.l-listFeature button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; transition:all .25s ease; transition-delay: 0.25s; } section.l-listFeature button.slick-prev:before { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listFeature button.slick-next:before { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listFeature button.slick-arrow:hover:before { transition-delay: 0s; } section.l-listFeature button.slick-prev:hover:before { top: 46%; opacity: 0; } section.l-listFeature button.slick-next:hover:before { top: 46%; opacity: 0; } section.l-listFeature button.slick-arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; opacity: 0; transition:all .25s ease; transition-delay: 0s; } section.l-listFeature button.slick-prev:after { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listFeature button.slick-next:after { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listFeature button.slick-arrow:hover:after { transition-delay: 0.25s; } section.l-listFeature button.slick-prev:hover:after { top: 50%; opacity: 1; } section.l-listFeature button.slick-next:hover:after { top: 50%; opacity: 1; } /* ><><><><><><><><><><><><><><><><> ▼ listAnthology ><><><><><><><><><><><><><><><><> /* --- common --- */ section.l-listAnthology { border-radius: 0.4rem; border: 1px solid #eeeeee; margin-top: 0rem; padding: 8.9rem 5.2rem 9rem; box-shadow: -2px 6px 8px -7px #777777; text-align: center; position: sticky; top: 9.5rem; } section.l-listAnthology:hover { background: #fdfdfd; } /* archiveHor */ .archiveHor .l-archiveLeft { width: 69%; } .l-archiveRight { display: none; width: 27%; margin-top: 5rem; margin-left: 2%; margin-right: 2.3%; position: sticky; top: 11.8rem; } .archiveHor .l-archiveRight { display: block; } /* --- tab --- */ .tab li.active { text-decoration: underline; text-underline-offset: 0.9rem; } .tab_area,.tab_area2 { } .tab li a { opacity: 0.4; } .tab li.active a { text-decoration-color: #f2f2f2; opacity: 1; } /* --- nav --- */ section.l-listAnthology .tab { font-size: 3.1rem; font-family: minion-pro-display, serif; letter-spacing: 0.275em; margin-left: 0.6rem; display: flex; justify-content: center; text-transform: uppercase; } section.l-listAnthology .tab li + li { } section.l-listAnthology .tab li:nth-child(2) { content: "/"; margin-left: 0.7rem; padding-right: 0.6rem; opacity: 0.2; } /* feature */ section.l-listAnthology.feature .tab { font-size: 2.6rem; } section.l-listAnthology.feature .title.jpn { font-size: 1.45rem; letter-spacing: 0.05em; line-height: 2; } /* music */ section.l-listAnthology.feature.music .tab { font-size: 2rem; } /* --- main --- */ section.l-listAnthology .tab_content { margin-top: 5.6rem; } /* --- list --- */ li.l-listAnthology__cont > a { display: flex; flex-flow: column; } li.l-listAnthology__cont + li.l-listAnthology__cont { margin-top: 4.3rem; } /* --- image --- */ li.l-listAnthology__cont .image { width: 42.9%; height: 8.9vw; margin: 0 auto; position: relative; border: 1px solid #eee; padding: 0.3rem; box-sizing: border-box; overflow: hidden; } li.l-listAnthology__cont .image figure { width: 100%; height: 100%; } li.l-listAnthology__cont .image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } li.l-listAnthology__cont .image iframe { width: 100% !important; height: 100% !important; pointer-events: none; } /* --- cont --- */ li.l-listAnthology__cont .cont { width: 100%; text-align: center; margin: 5.5rem auto 0; } /* title */ li.l-listAnthology__cont .title { font-size: 2.05rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.04em; line-height: 1.5; } li.l-listAnthology__cont .title.jpn { font-size: 1.75rem; letter-spacing: 0.06em; } /* artist */ li.l-listAnthology__cont .artist { font-size: 1.2rem; font-family: nimbus-sans,sans-serif; line-height: 1.6; letter-spacing: 0.035em; color: #ada59a; margin-top: 0.7rem; } /* copy */ li.l-listAnthology__cont .copy { font-size: 1.1rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; line-height: 1.6; letter-spacing: 0em; opacity: 0.65; margin-top: 2.9rem; } /* eng */ li.l-listAnthology__cont .eng { font-family: adobe-garamond-pro, sans-serif; font-size: 1.05rem; line-height: 1.6; color: #898989; margin-top: 3.7rem; padding: 1.7rem 0.8rem 1.6rem; letter-spacing: 0.1em; border-top: 1px solid #f1f0f0; display: inline-block; border-bottom: 1px solid #f1f0f0; } li.l-listAnthology__cont .eng br { display: none; } /* desc */ li.l-listAnthology__cont .desc { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-size: 1rem; text-transform: lowercase; color: #a8a6a6; line-height: 2.35; letter-spacing: 0.03em; width: 82%; margin: 3.9rem auto 0; } /* --- readmore --- */ section.l-listAnthology .readBtn { font-size: 1.2rem; font-family: adobe-garamond-pro, sans-serif; display: inline-block; text-transform: lowercase; letter-spacing: 0.15em; margin-top: 5.4rem; position: relative; } /* before */ section.l-listAnthology .readBtn .arrow:before { left: 0.2rem; transition-delay: 0.25s; } section.l-listAnthology .readBtn:hover .arrow:before { left: 0.4rem; opacity: 0; transition-delay: 0s; } /* after */ section.l-listAnthology .readBtn .arrow:after { left: -0.1rem; opacity: 0; transition-delay: 0s; } section.l-listAnthology .readBtn:hover .arrow:after { left: 0.2rem; opacity: 1; transition-delay: 0.25s; } /* border */ section.l-listAnthology .readBtn:before { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } section.l-listAnthology .readBtn:hover::before { transform-origin: right top; transform: scale(0, 1); } section.l-listAnthology .readBtn:after { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } section.l-listAnthology .readBtn:hover::after { transform-origin: left top; transform: scale(1, 1); } /* ><><><><><><><><><><><><><><><><> ▼ listMagazine ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listMagazine --------------------------- */ /* --- common --- */ section.l-listMagazine {width: 99%;margin: 3rem auto;} section.l-listMagazine > .inner { color: #fff; background: #776B6B; padding: 12rem 0rem 12rem 13rem; /* overflow: visible; */ } section.l-listMagazine .wrap { display: flex; margin-top: 5.7rem; } section.l-listMagazine .left { width: 24%; } section.l-listMagazine .right { width: 68%; margin-left: 8%; } /* --- sectTitle --- */ section.l-listMagazine .l-listSectTitle { font-size: 1.5rem; font-family:minion-pro-display, serif; text-transform: uppercase; letter-spacing: 0.23em; margin-left: 0.3rem; } section.l-listMagazine .l-listSectTitle span { font-variant: small-caps; font-size: 143%; margin-left: 0.8rem; letter-spacing: 0.075em; } /* --- listTitle --- */ section.l-listMagazine .l-listTitle { font-size: 2.7rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; line-height: 1.85; letter-spacing: 0.05em; margin-top: 2.3rem; } section.l-listMagazine .l-listTitle .eng { margin-top: 1rem; } section.l-listMagazine .l-listTitle img {filter: invert(100) sepia(0%) saturate(751%) hue-rotate(13deg) brightness(218%) contrast(101%);} /* --- listInfo --- */ section.l-listMagazine .l-listInfo { font-size: 1.15rem; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; letter-spacing: 0.065em; padding: 1.9rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); display: inline-block; margin-top: 1.9rem; } /* --- listDesc --- */ section.l-listMagazine .l-listDesc { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-size: 1.15rem; line-height: 2.75; font-weight: 400; letter-spacing: 0.05em; opacity: 0.8; margin-top: 3.4rem; } /* --- listBtn --- */ section.l-listMagazine .l-listBtn { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.05em; background-color: #fff; transition: all ease .5s; /* padding: 0 2.9rem; */ display: inline-block; margin-left: -2.4%; text-align: center; border-radius: 5rem; margin-top: 2.9rem; } section.l-listMagazine .l-listBtn a { display: block; padding: 1.2rem 2.9rem; transition: all ease .5s; } /* hover */ section.l-listMagazine .l-listBtn:hover { background-color: #5d5151; } section.l-listMagazine .l-listBtn:hover a { color:#fff; } /* --------------------------- ■ l-listMagGallery --------------------------- */ /* --- common --- */ .l-listMagGallery { } .l-listMagGallery .slick-list { cursor: grab; } .l-listMagGallery .slick-slide + .slick-slide { margin-left: 0.6rem; } .l-listMagGallery li { height: 35vw; border: 3px solid #fff; box-sizing: border-box; } .l-listMagGallery li figure { height: 100%; width: 100%; } .l-listMagGallery li figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- arrow --- */ section.l-listMagazine.l-listArrow button.slick-arrow { top: -10.5rem; } section.l-listMagazine.l-listArrow button.slick-next {right: 9.1%;} section.l-listMagazine.l-listArrow button.slick-prev {left: initial;right: 12.4%;} /* ><><><><><><><><><><><><><><><><> ▼ listEdition ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listEdition --------------------------- */ /* --- common --- */ section.l-listEdition > .inner { padding-left: 1.9%; } section.l-listEdition.l-listLatestPick { margin-top: 4rem; } /* gray */ section.l-listEdition.gray { position: relative; background-color: #f3f3f3; padding-top: 4rem; padding-bottom: 6rem; margin-top: 12rem; margin-bottom: -9.3rem; } section.l-sectionCont + section.l-listEdition.gray { top: initial; margin-bottom: -9.4rem; } section.l-subscSp + section.l-listEdition.gray { margin-top: 18rem; } /* media */ section.l-subscBg.media + section.l-listEdition.gray { margin-top: 1.4rem; } /* essay */ article.l-articleEssay + section.l-listEdition.gray { background: #fff; } /* related */ section.l-listEdition.gray.related { top:initial; position: initial; } /* --- listHead --- */ /* gray */ section.l-listEdition.gray .l-listHead { margin: 16.2rem auto 10.5rem; padding-top: 13.1rem; } section.l-listEdition.gray .l-listHead__title { font-size: 4.15rem; letter-spacing: 0.32em; } section.l-sectionCont + section.l-listEdition.gray .l-listHead { margin: 0rem auto 9.5rem; } /* related */ section.l-listEdition.gray.related .l-listHead { margin-top: 0rem; } /* --------------------------- ■ editionSlider --------------------------- */ /* --- common --- */ .l-listEdition .slick-slider { cursor: grab; margin-top: -3.5rem; } section.l-listEdition .slick-list { padding-right: 1rem; } section.l-listEdition .slick-slide.first { width: 57.5rem !important; } /* margin */ section.l-archiveHead + section.l-listEdition { margin-top:10.6rem; } /* gray */ .l-listEdition.gray .slick-slider { margin-top: initial; } /* --- listCont --- */ .l-listEdition .c-listCont { padding: 0 0rem 7.5rem; height: 59.4vw; position: relative; } .l-listEdition .slick-slide + .slick-slide .c-listCont:before { content: ""; height: 95.7%; top: 5.3%; position: absolute; left: 0; width: 1px; border-left: 1px dotted #e7e4e4; } /* gray */ section.l-listEdition.gray .slick-slide + .slick-slide .c-listCont:before { content: ""; height: 95.7%; top: 5.3%; position: absolute; left: 0; width: 1px; border-left: 1px solid #ffffff; } /* hover */ section.l-listEdition .slick-slide .c-listCont:hover { background: #f8f8f8; } /* --- listImage --- */ .l-listEdition .c-listImage { height: 33.5vw; width: 89%; margin: 4.3rem auto 0; box-sizing: border-box; } .l-listEdition .c-listImage a { pointer-events: none; } section.l-listEdition .slick-slide.first .c-listImage { width: 87.3%; } section.l-listEdition .c-listImage img { filter: grayscale(1); } section.l-listEdition .c-listCont:hover img, section.l-listEdition .slick-current .c-listImage img { filter: grayscale(0); } /* gray */ section.l-listEdition.gray .c-listImage { border: 2px solid #fff; } section.l-listEdition.gray .c-listImage img { filter: grayscale(1); } section.l-listEdition.gray .c-listCont:hover img, section.l-listEdition.gray .slick-current .c-listImage img { filter: grayscale(0); } /* essay */ article.l-articleEssay + section.l-listEdition.gray .c-listImage { border: initial; } /* --- contWrapper --- */ .l-listEdition .contWrapper { width: 83%; margin: 0 auto; } /* --- listTitle --- */ .l-listEdition .c-subTitle { font-size: 1.55rem; margin-top: 4.2rem; margin-left: 0.4rem; } .l-listEdition .c-subTitle + .c-listTitle { margin-top: 1.3rem; } .l-listEdition .c-listTitle { font-size: 1.95rem; margin-left: 0.2rem; margin-top: 4.3rem; } .l-listEdition .c-listTitle .count span { padding: 1.6rem 0.9rem 1.4rem; margin-top: 2.4rem; } /* gray */ .l-listEdition.gray .c-listTitle .count span { border-top: 1px solid #e5e4e4; border-bottom: 1px solid #e5e4e4; } /* essay */ article.l-articleEssay + section.l-listEdition.gray .c-listTitle .count span { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; } /* --- listCopy --- */ .l-listEdition .c-listCopy { margin-top: 0.4rem; } /* --- listDesc --- */ .l-listEdition .c-listDesc { font-size: 1.05rem; margin-top: 2.8rem; line-height: 2.2; width: 60%; margin-left: initial; } /* ><><><><><><><><><><><><><><><><> ▼ listEdit ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listEdit --------------------------- */ /* --- common --- */ section.l-listEdit { position: relative; width: 89.5%; margin:0 auto; } section.l-listEdit .l-listHead { width: 100%; padding-top: 12.2rem; } /* --------------------------- ■ editSlider --------------------------- */ /* --- listCont --- */ section.l-listEdit .c-listCont { display: flex !important; flex-flow: row-reverse; align-items: center; } /* --- listImage --- */ section.l-listEdit .c-listImage { width: 50%; height: 40.3vw; } /* --- contWrapper --- */ section.l-listEdit .contWrapper { width: 45.6%; text-align: left; padding-left: 5.1rem; margin-top: auto; margin-bottom: 2.5rem; } /* --- subTitle --- */ section.l-listEdit .c-subTitle { margin-left: 0.4rem; } /* --- listTitle --- */ section.l-listEdit .c-listTitle { font-size: 2rem; width: 58%; margin-left: initial; } section.l-listEdit .c-listTitle br { display: none; } /* --- listDesc --- */ section.l-listEdit .c-listDesc { font-size: 1.1rem; line-height: 2.2; width: 49%; margin: 2rem 0 0; } /* --- listCat --- */ section.l-listEdit .c-listCat { margin-left: -0.4rem; } /* ><><><><><><><><><><><><><><><><> ▼ listFour ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listFour --------------------------- */ /* --- Common --- */ section.l-listFour { position: relative; width: 92.5%; margin:0 auto; margin-top: 6.5rem; } /* --------------------------- ■ fourSlider --------------------------- */ /* --- common --- */ .fourSlider .slick-slider { cursor: grab; } /* --- listCont --- */ .l-listFour .c-listCont { padding: 0 2.5rem 8.6rem; } /* --- listImage --- */ .l-listFour .c-listImage { height: 28.7vw; } .l-listFour .c-listImage a { pointer-events: none; } /* --- subTitle --- */ .l-listFour .c-subTitle + .c-listTitle { } /* --- listTitle --- */ .l-listFour .c-listTitle { font-size: 1.75rem; line-height: 1.65; } /* --- listDesc --- */ .l-listFour .c-listDesc { margin-top: 1rem; } /* ><><><><><><><><><><><><><><><><> ▼ listFive ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listFive --------------------------- */ /* --- Common --- */ section.l-listFive { position: relative; width: 99%; margin:0 auto; margin-top: 6.5rem; } /* --- listHead --- */ section.l-listFive .l-listHead { margin-bottom: 3.2rem; } /* --------------------------- ■ fiveSlider --------------------------- */ /* --- common --- */ .fiveSlider { cursor: grab; } /* --- listCont --- */ .l-listFive .c-listCont { height: 42.8vw; padding: 0 2.5rem 5.3rem; } .l-listFive .slick-slide.slick-active + .slick-active .c-listCont:before { content: ""; height: 90%; top: 10%; position: absolute; left: 0; width: 1px; border-left: 1px dotted #e7e4e4; } /* hover */ .l-listFive .c-listCont:hover { background: #f8f8f8; } /* --- listImage --- */ .l-listFive .c-listImage { height: 18.8vw; width: 84.6%; margin: 7rem auto 0; } .l-listFive .c-listImage a { /* pointer-events: none;*/ } /* --- subTitle --- */ .l-listFive .c-subTitle { margin-top: 2.8rem; } .l-listFive .c-subTitle + .c-listTitle { margin-top: 1.2rem; } /* --- listTitle --- */ .l-listFive .c-listTitle { font-size: 1.65rem; } /* --- contWrapper --- */ .l-listFive .contWrapper { width: 81.4%; margin: 0 auto; } /* --- listDesc --- */ .l-listFive .c-listDesc { width: 100%; margin-top: 1.9rem; } /* ><><><><><><><><><><><><><><><><> ▼ l-listThree ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listThree --------------------------- */ /* --- head --- */ section.l-listThree .l-listHead { width: 96%; margin-bottom: 3rem; } /* --- Common --- */ section.l-listThree { position: relative; width: 99%; margin:0 auto; margin-top: 6.5rem; } section.l-listThree > .inner { width: 100%; margin:0 auto; } /* --------------------------- ■ threeSlider --------------------------- */ /* --- common --- */ .l-listThree .slick-slider { cursor: grab; } /* --- listCont --- */ .l-listThree .c-listCont { padding: 0 0rem 7.5rem; height: 50.3vw; } .l-listThree .slick-slide.slick-active + .slick-active .c-listCont:before { content: ""; height: 93%; top: 7%; position: absolute; left: 0; width: 1px; border-left: 1px dotted #e7e4e4; } /* hover */ .threeSlider .slick-slide.slick-active .c-listCont:hover { background: #f8f8f8; } /* --- listImage --- */ .l-listThree .c-listImage { height: 25.5vw; width: 76.2%; margin: 7.3rem auto 0; } .l-listThree .c-listImage a { pointer-events: none; } /* --- contWrapper --- */ .l-listThree .contWrapper { width: 74%; margin: 0 auto; } /* --- listTitle --- */ .l-listThree .c-subTitle { font-size: 1.55rem; margin-top: 3rem; margin-left: 0.6rem; } .l-listThree .c-subTitle + .c-listTitle { margin-top: 1.7rem; } .l-listThree .c-listTitle { font-size: 1.8rem; margin-left: 0.2rem; margin-top: 4.1rem; } .l-listThree .c-listTitle .count span { padding: 1.3rem 0.9rem 1.1rem; margin-top: 1.9rem; } /* --- listCopy --- */ .l-listThree .c-listCopy { margin-top: 0.4rem; } /* --- listDesc --- */ .l-listThree .c-listDesc { font-size: 1.05rem; margin-top: 1.7rem; line-height: 2.2; width: calc(100% - 0.3rem); } /* --- Arrow --- */ /* Area */ section.l-listArrow button.slick-arrow { font-size: 0; background: initial; position: absolute; top: -15.7rem; width: 2.6rem; height: 2.6rem; border: 1px solid #e9e9e9; background: #fff; z-index: 1; border-radius: 100%; opacity: 0; transform: translateY(0.5vw); outline: none; transition: all ease .3s; } body.start2 section.l-listArrow button.slick-arrow { opacity: 1; transform: translateY(0vw); } section.l-listArrow button.slick-prev { left: 3.7%; } section.l-listArrow button.slick-next { right: 3.7%; } /* Hover */ section.l-listArrow button.slick-prev:hover { left: 3.5%; } section.l-listArrow button.slick-next:hover { right: 3.5%; } /* l-listEdition */ section.l-listEdition button.slick-arrow { top: -10.7rem; } section.l-listLatestPick button.slick-arrow { display: none !important; } /* gray */ section.l-listEdition.gray button.slick-arrow { display: none!important; } /* l-listSection */ section.l-listSection button.slick-arrow { top: -9.8rem; } /* l-listEdit */ section.l-listEdit button.slick-arrow { top: -14.4rem; } section.l-listEdit button.slick-prev { left: 0.3%; } section.l-listEdit button.slick-next { right: 0.3%; } /* Hover */ section.l-listEdit button.slick-prev:hover { left: 0.1%; } section.l-listEdit button.slick-next:hover { right: 0.1%; } /* l-listThree */ section.l-listThree button.slick-arrow { top: -6.4rem; } section.l-listThree button.slick-prev { left: 5%; } section.l-listThree button.slick-next { right: 5%; } /* Hover */ section.l-listThree button.slick-prev:hover { left: 4.7%; } section.l-listThree button.slick-next:hover { right: 4.7%; } /* l-listFour */ section.l-listFour button.slick-prev { left: 5.1%; } section.l-listFour button.slick-next { right: 5.1%; } /* Hover */ section.l-listFour button.slick-prev:hover { left: 4.8%; } section.l-listFour button.slick-next:hover { right: 4.8%; } /* l-listFive */ section.l-listFive button.slick-arrow { top: -7rem; } section.l-listFive button.slick-prev { left: 4%; } section.l-listFive button.slick-next { right: 4%; } /* Hover */ section.l-listArrow.l-listFive button.slick-prev:hover { left: 3.7%; } section.l-listArrow.l-listFive button.slick-next:hover { right: 3.7%; } /* Arrow */ section.l-listArrow button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.75rem; transition:all .25s ease; transition-delay: 0.25s; } section.l-listArrow button.slick-prev:before { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listArrow button.slick-next:before { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listArrow button.slick-arrow:hover:before { transition-delay: 0s; } section.l-listArrow button.slick-prev:hover:before { top: 46%; opacity: 0; } section.l-listArrow button.slick-next:hover:before { top: 46%; opacity: 0; } section.l-listArrow button.slick-arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.75rem; opacity: 0; transition:all .25s ease; transition-delay: 0s; } section.l-listArrow button.slick-prev:after { background-image: url(../../assets/img/common/arrowLeft.svg); } section.l-listArrow button.slick-next:after { background-image: url(../../assets/img/common/arrowRight.svg); } section.l-listArrow button.slick-arrow:hover:after { transition-delay: 0.25s; } section.l-listArrow button.slick-prev:hover:after { top: 50%; opacity: 1; } section.l-listArrow button.slick-next:hover:after { top: 50%; opacity: 1; } /* Circle */ section.l-listArrow button.slick-arrow .circleBase { fill:transparent; stroke:rgba(0,0,0,0.125); position: absolute; top: 50%; left: 50%; z-index: 3; } section.l-listArrow button.slick-arrow .circleArrow { fill:transparent; stroke:rgba(0,0,0,0); position: absolute; top: 50%; left: 50%; z-index: 4; } section.l-listArrow button.slick-arrow .circleArrow circle{ stroke-dasharray:182; stroke-dashoffset:0; transition:all .55s ease; } section.l-listArrow button.slick-arrow:hover .circleArrow circle{ stroke-dashoffset:364; } section.l-listArrow button.slick-arrow:hover .circleArrow { stroke:rgba(0,0,0,0.8); } /* ><><><><><><><><><><><><><><><><> ▼ l-listMusic ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listMusic --------------------------- */ /* --- Common --- */ section.l-listMusic { position: relative; width: 87%; margin: 6.5rem auto 0; } section.l-listThree + section.l-listMusic { margin-top: 7.0rem; } section.l-listMusic > .inner { width: 98.3%; margin: 0 auto; } /* --- l-listHead --- */ section.l-listMusic .l-listHead { width: 96.3%; } /* --- Loop --- */ ul.l-listMusic__loop { display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0rem; } ul.l-listMusic__loop li.c-musicCont { width: 50%; margin-bottom: 9.2rem; } section.l-listRelated ul.l-listMusic__loop { margin-top:0; width: 100%; } /* --- showAll --- */ section.l-listMusic .l-listSect__showAll { width: 96.5%; margin-top: 2.0rem; } body.chColor { background-color: #ccc; } /* ><><><><><><><><><><><><><><><><> ▼ l-listNews ><><><><><><><><><><><><><><><><> /* --------------------------- ■ list --------------------------- */ /* --- Common --- */ section.l-listNews { position: relative; width: 89%; margin: 7rem auto 10rem; } section.l-listNews > .inner { width: 98.3%; margin: 0 auto; } ul.l-listNews__loop { display: flex; flex-wrap: wrap; margin-bottom: 6.6rem; width: 100%; } /* Related */ section.l-newsRelated ul.l-listNews__loop { margin-bottom: 0; } /* --- list --- */ li.l-listNews__cont { width: 50%; display: flex; align-items: center; } li.l-listNews__cont + li.l-listNews__cont:nth-child(2n+2) { margin-left: 0%; } li.l-listNews__cont:nth-child(n + 3) { margin-top: 9.3rem; } /* --- image --- */ li.l-listNews__cont .c-listImage { width: 33%; height: 14.4vw; } /* --- cont --- */ .c-newsCont { margin-left: 10.6%; width: 45.5%; } .c-newsCont .date { font-size: 1.6rem; font-family: adobe-garamond-pro, sans-serif; font-variant: small-caps; letter-spacing: 0.035em; position: relative; color: #bfbfbf; font-weight: 300; margin-top: -1.5rem; margin-left: 0.2rem; } .c-newsCont .title { font-size: 1.7rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.85; letter-spacing: 0.05em; margin-top: 1.3rem; } .c-newsCont .c-listCat { margin-top: 1.8rem; margin-left: -0.4rem; } /* poetry */ section.l-archivePoetry .c-newsCont { margin-left: 12%; width: 52.5%; } section.l-archivePoetry .c-newsCont .title { font-size: 1.75rem; margin-top: -0.2rem; } section.l-archivePoetry .c-newsCont .eng { font-size: 1.2rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.07em; margin-top: 0.9rem; margin-left: 0.1rem; opacity: 0.3; } section.l-archivePoetry .c-newsCont .copy { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-size: 1.15rem; text-transform: lowercase; margin-top: 1.7rem; margin-left: 0.2rem; } section.l-archivePoetry .c-newsCont .copy:before { content: "/"; font-size: 96%; opacity: 0.2; margin-left: 0rem; margin-right: 0.8rem; } section.l-archivePoetry .c-newsCont .copy a { color: #8c8c8c; } section.l-archivePoetry .c-newsCont .c-listCat { margin-top: 1.7rem; margin-left: -0.4rem; } /* ><><><><><><><><><><><><><><><><> ▼ l-listRelated ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-listRelated --------------------------- */ /* --- Common --- */ section.l-listRelated { position: relative; width: 97%; margin:0 auto; } section.l-listRelated > .inner { width: 100%; margin:0 auto; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; /* margin-top: 9rem;*/ } /* Music */ section.l-listMusic.l-listRelated { width: 88.5%; } /* News */ section.l-newsRelated.l-listRelated { width: 87.5%; } /* --- l-relateHead --- */ .l-relateHead { text-align: center; margin-top: 12.7rem; margin-bottom: 4.4rem; } .l-relateHead__title { font-size: 2.9rem; font-family:minion-pro-display, serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.45em; display: inline-block; position: relative; } /* news */ section.l-newsRelated .l-relateHead { margin-bottom: 11rem; } /* NotFound */ section.l-notRelated { margin-top: -9.5rem; } /* --- listCont --- */ section.l-listRelated .c-listCont { width: 25%; padding: 0 2.5rem 6.7rem; display: flex; flex-flow: column; transition: all ease .75s; } section.l-listRelated .c-listCont:hover { background: #f8f8f8; } /* border */ section.l-listRelated .c-listCont:before { content: ""; height: 90%; top: 10%; position: absolute; right: 0; width: 1px; border-right: 1px dotted #e7e4e4; } section.l-listRelated .c-listCont:nth-child(4n):before { border-right: initial; } /* music */ section.l-listRelated .c-listCont.melody { text-align: center; } section.l-listRelated .c-listCont.melody + .c-listCont { margin-left: initial; } section.l-listRelated .c-listMusicCopy { text-align: center; } /*section.l-listRelated .c-listCont.melody { width: 20%; }*/ /*section.l-listRelated .c-listCont.melody:before { height: 92%; top: 8%; }*/ /*section.l-listRelated .c-listCont.melody:nth-child(4n):before { border-right: 1px dotted #e7e4e4; } section.l-listRelated .c-listCont.melody:nth-child(5):before { border-right: initial; }*/ /* --- listImage --- */ section.l-listRelated .c-listImage { height: 17.1vw; width: 81%; margin: 7rem auto 0; } /* news */ section.l-listRelated li.l-listNews__cont .c-listImage { width: 30.1%; height: 13.2vw; margin: initial; } /* music */ section.l-listRelated .c-listImage.melody { height: 16.9vw; } section.l-listRelated .c-listCont:hover .c-listImage.melody { background: #dfddd9; border: 1px solid #ccc; } /* --- .c-listCat --- */ section.l-listRelated .c-listCat { margin-top: 2.7rem; margin-left: -0.4rem; text-align: center; } /* --- c-listContainer --- */ section.l-listRelated .c-listContainer { width: 77.6%; margin: 0 auto; } section.l-listRelated .c-subTitle { font-size: 1.5rem; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } section.l-listRelated .c-subTitle + .c-listTitle { margin-top: 1.7rem; } /*section.l-listRelated .c-listTitle { font-size: 1.55rem; }*/ section.l-listRelated .c-listDesc { } /* music */ section.l-listRelated .melody .c-listContainer { text-align: center; } /* issue */ article.l-issue + section.l-listRelated .c-subTitle { font-family: adobe-garamond-pro,dnp-shuei-gothic-gin-std, sans-serif; font-size: 1.1rem; color: #5f5f5f; text-transform: uppercase; } article.l-magazine + section.l-listRelated .c-subTitle, article.l-digital + section.l-listRelated .c-subTitle { font-size: 1.1rem; overflow: initial; width: initial; } /* --- l-listRelated__border --- */ .l-listRelated__showAll { margin-top: 8.7rem; margin-bottom: 0; padding-bottom: 2rem; } section.l-listMusic .l-listRelated__showAll { width: 100%; margin: 3rem auto 0; } /* ================================= // ● Archive // /* ><><><><><><><><><><><><><><><><> ▼ ArchiveCommon ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-archiveHead --------------------------- */ /* --- common --- */ section.l-archiveHead { padding-top: 0.4rem; text-align: center; margin-top: 0rem; } article.l-articleAbout section.l-archiveHead { padding-top: 21.8rem; } .l-archiveHead__title { font-size: 9.4rem; font-family: minion-pro-display,"Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.12em; overflow: hidden; margin-top: 1.5rem; margin-left: 0.7rem; } .l-archiveHead__title.three { font-size: 10rem; margin-top: 1.7rem; } .l-archiveHead__title.four { font-size: 9.7rem; margin-top: 1.8rem; } .l-archiveHead__title.six { font-size: 9rem; margin-top: 1.6rem; } .l-archiveHead__title.seven { font-size: 8.6rem; margin-top: 3.1rem; } .l-archiveHead__title.eight { font-size: 8rem; margin-top: 2.9rem; } .l-archiveHead__title.nine { font-size: 7.8rem; margin-top: 2.3rem; } .l-archiveHead__title.ten { font-size: 7.8rem; margin-top: 2.6rem; } .l-archiveHead__title.all { font-size: 7.8rem; margin-top: 2.7rem; } .l-featureHead__title { font-size: 7.2rem; } .l-archiveSearchHead .l-archiveHead__title { font-size: 3.7rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; text-transform: capitalize; font-weight: 500; margin-top: 9.5rem; } /* pre */ .l-archiveHead__title .inner { transform: translateY(90%); opacity: 0; transition: .95s all cubic-bezier(.275,0,0,1); display: inline-block; } /* start */ body.start2 .l-archiveHead__title .inner { transform: translateY(0); opacity: 1; } /* --- l-archiveHead__sub --- */ /* commmon */ .l-archiveHead__sub { font-size: 1.5rem; letter-spacing: 0.1em; font-family: adobe-garamond-pro, sans-serif; white-space: nowrap; color: #9b9b9b; position: relative; margin-top: 1.2rem; font-weight: 300; transition: all ease .25s; opacity: 0.7; } article.l-articleStPc .l-archiveHead__sub { display: none; } .l-archiveHead__sub br { display: none; } /* Pre */ .l-archiveHead__sub .inner { opacity: 0; transform: translateY(2vw); transition: .95s all cubic-bezier(.275,0,0,1); } /* start */ body.start2 .l-archiveHead__sub .inner { transform: translateY(0); opacity: 1; } /* --- l-archiveHead__nav --- */ /* commmon */ nav.l-archiveHead__nav { display: inline-block; margin: 4.3rem auto 0; } nav.l-archiveHead__nav ul { display: flex; justify-content: center; } nav.l-archiveHead__nav ul li { font-family: adobe-garamond-pro, sans-serif; font-size: 2.3rem; letter-spacing: 0.14em; line-height: 0.8; text-transform: lowercase; white-space: nowrap; font-variant: small-caps; color: #494949; opacity: 0.65; position: relative; cursor: pointer; font-weight: 300; padding: 0 3.6rem; transition: all ease .25s; } /* pre */ nav.l-archiveHead__nav { opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; margin-left: 1rem; } /* start */ body.start2 nav.l-archiveHead__nav { opacity: 1; transform: translateY(0); } /* border */ nav.l-archiveHead__nav ul li +li:before { content: ""; position: absolute; border-left: 1px solid #e1e1e1; height: 39%; top: 43%; transform: translateY(-50%) rotate(16deg); left: 0; } /*nav.l-archiveHead__nav ul li:last-child:after { content: ""; position: absolute; border-left: 1px solid #dddddd; height: 65%; top: 49%; transform: translateY(-50%) rotate(20deg); right: 0; }*/ nav.l-archiveHead__nav ul li:nth-child(1) .navInner { padding-right: 0.3rem; padding-left: 0.4rem; } nav.l-archiveHead__nav ul li .navInner { padding: 0rem 3.2rem 0.4rem 0.2rem; margin-right: 0; display: inline-block; position: relative; } nav.l-archiveHead__nav ul li a { color: #757474; padding: 1.6rem 0rem .1rem 0.2rem; transition: all ease .35s; } nav.l-archiveHead__nav ul li a.current { padding-bottom: .3rem; border-bottom: 1px solid rgba(213, 206, 196, 1); } nav.l-archiveHead__nav ul li .current { padding-bottom: .2rem; border-bottom: 1px solid rgba(213, 206, 196, 1); } nav.l-archiveHead__nav ul li a.none { border-bottom: initial; } /* arrow */ nav.l-archiveHead__nav ul li .navInner:before { position: absolute; content: ""; top: 24%; right: -0.1rem; width: 0.5rem; height: 0.5rem; background-size: cover; background-position: center center; width: 2rem; height: 0.93rem; background-image: url(../../assets/img/common/filter_story.svg); -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all ease .5s; } nav.l-archiveHead__nav ul li.active .navInner:before { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } nav.l-archiveHead__nav ul li:nth-child(1) .navInner:before { display: none; } /* --- l-archiveHead__pageNav --- */ /* common */ nav.l-archiveHead__pageNav { margin-top: 3.2rem; opacity: 0; transform: translateY(1vw); transition: .95s all cubic-bezier(.275,0,0,1); } nav.l-archiveHead__pageNav ul { display: flex; justify-content: center; } nav.l-archiveHead__pageNav ul li { font-size: 1.4rem; letter-spacing: 0.04em; font-family: 'Zen Old Mincho', sans-serif; text-transform: capitalize; padding: 0 3.8rem; position: relative; } nav.l-archiveHead__pageNav ul li:before { content: ""; position: absolute; border-left: 1px solid #e2e2e2; height: 40%; top: 47%; transform: translateY(-50%); left: 0; } nav.l-archiveHead__pageNav ul li:last-child:after { content: ""; position: absolute; border-left: 1px solid #e2e2e2; height: 40%; top: 51%; transform: translateY(-50%); right: 0; } nav.l-archiveHead__pageNav ul li a { color: #7a7a7a; transition: all ease .35s; } nav.l-archiveHead__pageNav ul li a:hover { color: #7a7a7a; } /* start */ body.start2 nav.l-archiveHead__pageNav { opacity: 1; transform: translateY(0); } /* --- l-archiveSaerch__total --- */ .l-archiveSaerch__total { font-size: 1.5rem; letter-spacing: 0.02em; font-family: adobe-garamond-pro, serif; color: #3a3a3a; display: flex; justify-content: center; align-items: center; margin-top: 1.4rem; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: .85s; } .l-archiveSaerch__total span { font-size: 2.1rem; font-family: adobe-garamond-pro, serif; margin-left: .5rem; } /* Anim */ body.done .l-archiveSaerch__total { opacity: 1; transform: translateY(0rem); } /* --- l-archiveHead_subTitle --- */ .l-archiveHead_subTitle { font-size: 1.525rem; letter-spacing: 0.135em; font-family: 'Zen Old Mincho', sans-serif; color: #a0a0a0; margin-top: 1.9rem; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 .l-archiveHead_subTitle { opacity: 1; transform: translateY(.0rem); } /* --------------------------- ■ l-archiveSlideshow --------------------------- */ /* --- common --- */ section.l-archiveSlideshow { padding-top: 10rem; /*position: sticky; top: -33vw;*/ transition: all ease 1s; } section.l-archiveSlideshow .slick-list { cursor: grab; padding-bottom: 5rem !important; } .l-archiveSlider_slide .c-listCont { margin: 0 3.8rem; display: flex; flex-flow: row-reverse; align-items: center; } section.l-archiveSlideshow:after { content: ""; display: block; width: 90%; border-bottom: 1px solid #f6f6f6; margin: 4rem auto 2rem; } /* sticky */ section.l-archiveSlideshow.sticky { } /* scroll */ body.archiveActive3 section.l-archiveSlideshow { opacity: 0; visibility: hidden; } /* --- image --- */ .l-archiveSlider_slide .c-listImage a { pointer-events: none; } .l-archiveSlider_slide .c-listImage { height: 41vw; width: 50%; filter: grayscale(0); opacity: 0; position: relative; transition: 1.65s all cubic-bezier(.275,0,0,1); } .l-archiveSlider .slick-current .c-listImage, .l-archiveSlider .is-active-next .c-listImage { height: 41vw; width: 50%; margin-top: initial; transition: 1.65s all cubic-bezier(.275,0,0,1); opacity: 1; transition-delay: 0.2s; } /* pre */ .l-archiveSlider_slide .c-listImage a { /*border: 1px solid #e4e4e4; padding: 0.4rem; box-sizing: border-box;*/ transform: scale(1.3); transition-delay: 0s; } /* start */ body.start2 .l-archiveSlider_slide .c-listImage a { transform: scale(1); } body.start3 .l-archiveSlider_slide .c-listImage { } /* --- cont --- */ /* subTitle */ .l-archiveSlider_slide .c-subTitle { font-size: 1.1rem; margin-top: 0.8rem; margin-left: 0.4rem; } .l-archiveSlider_slide .c-subTitle + .c-listTitle { margin-top: 1.6rem; } /* listTitle */ .l-archiveSlider_slide .c-listTitle { font-size: 2.15rem; margin-top: 4rem; line-height: 1.85; width: 65%; margin-left: initial; } .l-archiveSlider_slide .c-listTitle .count { font-size: 45%; } .l-archiveSlider_slide .c-listTitle .count span { padding: 1.5rem 1rem 1.4rem; margin-top: 2.2rem; } /* desc */ .l-archiveSlider_slide .c-listDesc { font-size: 1.15rem; width: 46%; margin-top: 2.1rem; line-height: 2.25; margin-left: 0; } /* listCat */ .l-archiveSlider_slide .c-listCat { margin-top: 2.5rem; margin-left: -0.6rem; } .l-archiveSlider_slide .c-listCat a { font-size: 1.2rem; } /* pre */ .l-archiveSlider_slide .contWrapper { width: 43.1%; margin-left: 5.3%; margin-top: -3%; text-align: left; opacity: 0; transform: translateY(0.5vw); transition: 0.95s all cubic-bezier(.275,0,0,1); } /* active */ body.start2 .slick-current .contWrapper, body.start2 .is-active-next .contWrapper { opacity: 1; transform: translateY(0vw); } /* --- arrow --- */ /* Area */ .l-archiveSlider button.slick-arrow { font-size: 0; background: initial; position: absolute; display: none; width: 2.8rem; height: 2.8rem; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(22px); border: 1px solid #f2f2f2; top: -12.6rem; z-index: 1; border-radius: 100%; outline: none; transition: 0.65s all cubic-bezier(.275,0,0,1); opacity: 0; transform: translateY(1vw); } .l-archiveSlider button.slick-arrow:hover { } .l-archiveSlider button.slick-prev { right:6.4%; } .l-archiveSlider button.slick-prev:hover { right:6.3%; } .l-archiveSlider button.slick-next { left:6.4%; } .l-archiveSlider button.slick-next:hover { left:6.3%; } /* Active */ body.start2 .l-archiveSlider button.slick-arrow { opacity: 1; transform: translateY(0vw); } body.start2.archiveActive1 .l-archiveSlider button.slick-arrow { opacity: 0; transform: translateY(-1vw); } /* Arrow */ .l-archiveSlider button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.9rem; height: 0.85rem; transition:all .25s ease; transition-delay: 0.25s; } .l-archiveSlider button.slick-prev:before { background-image: url(../../assets/img/common/arrowRight.svg); } .l-archiveSlider button.slick-next:before { background-image: url(../../assets/img/common/arrowLeft.svg); } /* before - Pre */ .l-archiveSlider button.slick-arrow:before { top: 54%; opacity: 0; } body.start2 .l-archiveSlider button.slick-arrow:before { top: 50%; opacity: 1; } /* before - hover */ body.start2 .l-archiveSlider button.slick-arrow:hover:before { transition-delay: 0s; } body.start2 .l-archiveSlider button.slick-prev:hover:before { top: 46%; opacity: 0; } body.start2 .l-archiveSlider button.slick-next:hover:before { top: 46%; opacity: 0; } /* After - hover */ .l-archiveSlider button.slick-arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.9rem; height: 0.85rem; opacity: 0; transition:all .25s ease; transition-delay: 0s; } .l-archiveSlider button.slick-prev:after { background-image: url(../../assets/img/common/arrowRight.svg); } .l-archiveSlider button.slick-next:after { background-image: url(../../assets/img/common/arrowLeft.svg); } .l-archiveSlider button.slick-arrow:hover:after { transition-delay: 0.25s; } .l-archiveSlider button.slick-prev:hover:after { top: 50%; opacity: 1; } .l-archiveSlider button.slick-next:hover:after { top: 50%; opacity: 1; } /* CircleBase */ .l-archiveSlider button.slick-arrow .circleBase { fill:transparent; stroke:rgba(0,0,0,0.09); position: absolute; top: 50%; left: 50%; z-index: 3; } .l-archiveSlider button.slick-arrow .circleBase circle{ stroke-dasharray:0 314; } /* Start */ body.start2 .l-archiveSlider button.slick-arrow .circleBase circle{ stroke-dasharray:314 314; transition: 1.75s all cubic-bezier(.275,0,0,1); } body.start2 .l-archiveSlider button.slick-arrow .circleBase .mvDots { stroke:rgba(0,0,0,0.09); } /* CircleArrow */ .l-archiveSlider button.slick-arrow .circleArrow { fill:transparent; stroke:rgba(0,0,0,0); position: absolute; top: 50%; left: 50%; z-index: 4; } .l-archiveSlider button.slick-arrow .circleArrow circle{ stroke-dasharray:314; stroke-dashoffset:0; transition:all .55s ease; } .l-archiveSlider button.slick-arrow:hover .circleArrow circle{ stroke-dashoffset:628; } .l-archiveSlider button.slick-arrow:hover .circleArrow { stroke:rgba(0,0,0,0.8); } /* --- scroll --- */ /* Area */ .l-archiveScroll { display: none; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(22px); position: fixed; width: 9.2rem; height: 9.2rem; border: 1px solid #efefef; bottom: 6.3rem; left: 5.8rem; z-index: 1; border-radius: 100%; transition: all ease .3s; box-shadow: 3px 3px 12px -7px rgb(0 0 0 / 10%); opacity: 0; transform: translateY(1vw); transition: 0.65s all cubic-bezier(.275,0,0,1); } .l-archiveScroll a { display: block; width: 100%; height: 100%; } body.start3 .l-archiveScroll { opacity: 1; transform: translateY(0vw); } body.start3.archiveActive1 .l-archiveScroll { opacity: 0; transform: translateY(1vw); } body.start3.humb-active .l-archiveScroll { opacity: 0; transform: translateY(1vw); } /* Hover */ .l-archiveScroll:hover { bottom: 5.5rem; } /* Arrow */ .l-archiveScroll:before { content: ""; display: block; position: absolute; top: 53%; left: 50%; background-image: url(../../assets/img/common/arrowLeft.svg); transform: translate(-50%,-50%) rotate(-90deg); background-size: cover; background-position: center center; width: 1.55rem; height: 1.6rem; transition:all .25s ease; transition-delay: 0.25s; } .l-archiveScroll:hover:before { opacity: 0; top: 56%; transition-delay: 0s; } .l-archiveScroll:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background-image: url(../../assets/img/common/arrowLeft.svg); transform: translate(-50%,-50%) rotate(-90deg); background-size: cover; background-position: center center; width: 1.55rem; height: 1.6rem; opacity: 0; transition:all .25s ease; transition-delay: 0s; } .l-archiveScroll:hover:after { opacity: 1; top: 53%; transition-delay: 0.25s; } /* --- dots --- */ .l-archiveSlider .slick-dots { position: absolute; bottom: 6.6rem; left: 8.4%; display: flex !important; opacity: 0; transition: 0.65s all cubic-bezier(.275,0,0,1); } body.start3 .l-archiveSlider .slick-dots { opacity: 1; } .l-archiveSlider .slick-dots li { position: relative; } .l-archiveSlider .slick-dots li + li { margin-left: 0.4rem; } .l-archiveSlider .slick-dots button { border: 0px solid #fff; font-size: 0; padding:0; width: 2rem; height: 2rem; background-color: transparent; border-radius: 100%; box-sizing: border-box; outline:none; position: relative; display: flex; align-items: center; justify-content: center; transition: all ease .35s; z-index: 1; } .l-archiveSlider .slick-dots li button:before { content:""; width: 1.1rem; height: 1.1rem; background-color: #e5e5e5; display: block; border-radius: 100%; transition: all ease .35s; } .l-archiveSlider .slick-dots button:hover:before, .l-archiveSlider .slick-dots li.slick-active button:before { background-color: #505050; } /* circle */ .l-archiveSlider .slick-dots .mvDots{ fill:transparent; stroke:rgba(0,0,0,1); position: absolute; top: 50%; left: 50%; z-index: 0; cursor: pointer; transform: translate(-50%,-50%) scale(1.0); } .l-archiveSlider .slick-dots .mvDots circle{ stroke-dasharray:0 75; } body.start1 .l-archiveSlider .slick-dots li.slick-active .mvDots circle{ stroke-dasharray:75 75; transition:all 15.95s cubic-bezier(.23,1,.32,1); } body.start1 .l-archiveSlider .slick-dots li.slick-active { stroke: #333; } /* --------------------------- ■ l-archiveCont --------------------------- */ /* --- common --- */ section.l-archivePage { margin-top: 9.7rem; } .l-archiveCont__loop { position: relative; width: 98.8%; margin:0 auto; display: flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } section.l-archiveCont { margin-top: 7rem; background: #fff; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); transition-delay: 1.15s; } body.done section.l-archiveCont { opacity: 1; transform: translateY(0rem); } section.l-archiveHead + section.l-archiveCont.l-archiveHorizontal:before { content: ""; display: block; width: 95%; border-bottom: 1px solid #f6f6f6; margin: 2rem auto 2rem; } /* latest */ section.l-archiveCont.latestTgr { margin-top: 2rem; } /* margin */ section.l-listEdition + section.l-archiveCont { margin-top: 2.8rem; } /* feature */ section.l-archiveCont.feature { margin-top: 8.1rem; } /* music */ section.l-archiveCont.melody { margin-top: initial; padding-top: 11rem; background: #6a5c5c; } section.l-archiveCont.music { margin-top: initial; padding-top: 11.2rem; background: #fff; margin-top: 9.8rem; opacity: 0; transition: all ease .5s; } body.start2 section.l-archiveCont.music { background: #6a5c5c; transition: all ease .5s !important; } .single section.l-archiveCont.music { margin-top: 11.4rem; } section.l-listEdition + section.l-archiveCont.music { padding-top: 1rem; } /* Slider */ section.l-archiveSlideshow + section.l-archiveCont { margin-top: 0rem; /* border-top: 1px solid #f6f6f6;*/ padding-top: 0rem; } /* News */ section.l-archiveNews { margin-top: 10.9rem; } section.l-archiveNews .l-archiveCont__loop { width: 85.6%; } .l-newsAdjust { margin-top: 13rem; } .c-pagenation + .l-newsAdjust { margin-top: 0; } /* one */ .l-archiveCont__loop.one { } /* two */ .l-featureCont__loop.two { justify-content: left; } /* archiveHor */ section.l-archiveSlideshow + section.l-archiveCont.archiveHor { margin-top: -1rem; } section.l-archiveCont.archiveHor > .inner { display: flex; width: 97%; margin: 0 auto; align-items: self-start; } section.l-archiveCont.archiveHor .l-archiveCont__loop { width: 100%; } /* --- head --- */ .l-archiveCont__head { font-family: minion-pro-display, serif; font-size: 2.85rem; letter-spacing: 0.225em; font-weight: 600; text-transform: uppercase; position: relative; text-align: center; padding-top: 7.9rem; padding-bottom: 6.8rem; margin-left: 2rem; } /* --- listCont --- */ section.l-archiveCont .c-listCont { width: 25%; padding: 0 0.6rem 7.1rem; } section.l-archivePage .c-listCont { padding: 0 2.9rem 10.3rem; } section.l-archivePage .c-listCont:nth-child(n + 4) { padding-bottom: 5.0rem; } /* first */ section.l-archiveCont .c-listCont.first { width: 50%; margin-bottom: 1.1rem; } section.l-archiveCont.lizm .c-listCont.first.melody { width: calc(40% - 0.6rem); } /* hover */ section.l-archiveCont .c-listCont:hover { background: #f8f8f8; } /* border */ section.l-archiveCont .c-listCont:before { content: ""; height: 96.5%; top: 3.5%; position: absolute; right: 0; width: 1px; border-right: 1px dotted #e7e4e4; } section.l-archiveCont .c-listCont:nth-child(n + 5):before { height: 100%; top: 0%; } section.l-archiveCont .c-listCont:nth-child(4n + 4):before { border-right: initial; } section.l-archiveCont.firstTrg .c-listCont:nth-child(4n + 4):before { border-right: 1px dotted #e7e4e4; } section.l-archiveCont.firstTrg .c-listCont:nth-child(4n + 3):before { border-right: initial; } section.l-archiveCont.melody.firstTrg .c-listCont:nth-child(4n + 3):before { border-right: 1px dotted #e7e4e4; } section.l-archiveCont.melody.firstTrg .c-listCont:nth-child(5n + 4):before { border-right: initial; } /* music */ /*section.l-archiveCont .c-listCont.melody { width: 20%; } section.l-archiveCont .c-listCont.melody:before { height: 87%; top: 13%; } section.l-archiveCont .c-listCont.melody:nth-child(n + 6):before { height: 100%; top: 0%; } section.l-archiveCont .c-listCont.melody:nth-child(4n):before { border-right: 1px dotted #e7e4e4; } section.l-archiveCont .c-listCont.melody:nth-child(5n):before { border-right: initial; }*/ /* --- listImage --- */ section.l-archiveCont .c-listImage { height: 25.6vw; width: 79.6%; margin: 3.6rem auto 0; } /* first */ section.l-archiveCont.lizm .c-listCont.first .c-listImage { height: 40.1vw; width: 88.7%; } section.l-archiveCont.lizm .c-listCont.first .c-listImage { } section.l-archiveCont.lizm .c-listCont.first .c-listImage figure.pc, section.l-archiveCont.lizm .c-listCont.first .c-listImage figure.pc img { display: none; } section.l-archiveCont.lizm .c-listCont.first .c-listImage figure.sp, section.l-archiveCont.lizm .c-listCont.first .c-listImage figure.sp img { display: block; } /* melody */ section.l-archiveCont.lizm .c-listCont.first.melody .c-listImage { height: 32.3vw; width: 98.9%; } /* second */ section.l-archiveCont.lizm .c-listCont:nth-child(2n+3) .c-listImage { height: 25.6vw; } /* latest */ section.l-listLatest.lizm .c-listCont:nth-child(1) .c-listImage { height: 25.6vw; } section.l-listLatest.lizm .c-listCont:nth-child(8n+5) .c-listImage, section.l-listLatest.lizm .c-listCont:nth-child(8n+7) .c-listImage { height: 19vw; } section.l-listLatest.lizm .c-listCont:nth-child(8n+6) .c-listImage, section.l-listLatest.lizm .c-listCont:nth-child(8n+8) .c-listImage { height: 25.6vw; } /* News */ section.l-archiveNews .c-listImage { width: 31.7%; height: 13.7vw; margin: initial; } /* two */ section.l-archiveCont .l-archiveCont__loop.two .c-listImage { /*height: 25.5vw;*/ } /* Music */ .c-listCont.melody .c-listImage:hover a{ transform: scale(1); } /*.c-listCont.melody .c-listImage { height: 9.05vw; width: 56.2%; } */ .c-listImage.melody { border: 1px solid #dfdfdf; background: #efeeea; } .c-listImage.melody a { display: flex; align-items: center; justify-content: center; } .c-listImage.melody iframe { width: 66% !important; height: 66% !important; filter: grayscale(0.3); pointer-events: none; border: 0.4rem solid #fff !important; box-sizing: border-box; transition: all ease .35s; } .c-listCont:hover .c-listImage.melody { background: #d1cdc6; border: 1px solid #dcdcdc; } .c-listCont:hover .c-listImage.melody iframe { filter: grayscale(0); } /* first */ .c-listCont.first .c-listImage.melody iframe { width: 83% !important; height: 83% !important; } /* --- contWrapper --- */ section.l-archiveCont .contWrapper { width: 73.8%; } /* first */ section.l-archiveCont .c-listCont.first .contWrapper { width: 85%; } /* --- l-archiveCont__none --- */ section.l-archive404 { padding-top: 21.7rem; } .l-archiveCont__none { text-align: center; width: 100%; font-size: 3.05rem; margin-top: -0.1rem; font-family: adobe-garamond-pro,sans-serif; letter-spacing: 0.05em; text-transform: initial; margin-bottom: 27rem; position: relative; } .l-archiveCont__none span { display: inline-block; position: relative; } .l-archiveCont__none span:before { content: ""; position: absolute; width: 100%; height: .1rem; bottom: -1.1rem; background: #e8e8e8; } /* --------------------------- ■ l-archiveMusic --------------------------- */ /* --- common --- */ ul.l-archiveMusic__loop { width: 85%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; } section.l-archiveCont .melody { text-align: center; } .c-listMel__right { text-align: left; width: 69%; margin: 0 auto; } /* first */ .first .c-listMel__right { text-align: center; } /* --- image --- */ section.l-archiveCont .melody .c-listImage { height: 15.4vw; width: 98%; margin: 0.7rem auto 0; } section.l-archiveCont.lizm.melody .c-listCont:nth-child(2n+3) .c-listImage { height: 15.4vw; } /* --- cont --- */ section.l-archiveMusic .c-listCont.melody { padding: 8.9rem 7.5rem; align-items: start; width: 100%; display: flex; margin-left: 1rem; } section.l-archiveCont .c-listCont.melody { padding: 0 0.6rem 5.4rem; width: calc(20% - 0.6rem); background: #fff; margin-bottom: 10.6rem; border-radius: 4px; } section.l-archiveCont .c-listCont.melody:hover { background: #e4e1db; } .c-listCont.melody + .c-listCont { margin-left: 0.6rem; } section.l-archiveCont .c-listCont.melody:nth-child(5), section.l-archiveCont .c-listCont.melody:nth-child(10), section.l-archiveCont .c-listCont.melody:nth-child(14) { margin-left: initial !important; } section.l-archiveCont .c-listCont.melody:nth-child(n + 5) .c-listMel__left { margin-top: 0rem; } section.l-archiveMusic .c-listCont + .c-listCont { border-top: 1px solid #f3f3f3; } section.l-archiveMusic .contWrapper { margin-left: 6.8rem; width: 48%; text-align: left; } /* --- title --- */ section.l-archiveMusic .c-listTitle { font-size: 1.9rem; line-height: 1.45; margin-top: 2.6rem; } /* copy */ .c-listMusicCopy { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.25rem; letter-spacing: 0.05em; } .c-listMel__right:before { content: ""; width: 1.9rem; height: 1px; background: #f0eeee; display: block; margin: 2.9rem auto 2.6rem; } /* artist */ .c-listArtist { font-size: 1.15rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.075em; margin-top: 1.2rem; } .c-listArtist a { color: #8a7f70; } .c-listCont.melody.new .c-listArtist:after { content: "new"; font-size: 90%; font-family: nimbus-sans, sans-serif; margin-left: 0.5rem; color: #F55252; } /* first */ .c-listCont.melody.first .c-listArtist { font-size: 1.3rem; margin-top: 1.2rem; } /* --- desc --- */ section.l-archiveMusic .c-listDesc { font-size: 1rem; margin: 1.5rem 0 0; width: 76%; } .melody .c-listDesc { font-size: 0.95rem; margin: 2rem auto 0; text-align: center; } /* first */ section.l-archiveCont.melody .c-listCont.first .c-listMel__right:before { height: 0; } section.l-archiveCont.melody .c-listCont.first .c-listMusicCopy { display: none; } section.l-archiveCont.melody .c-listCont.first .c-listDesc { width: 40%; margin-top: 1.8rem; margin-left: auto; display: none; } /* --------------------------- ■ l-archiveTags --------------------------- */ /* --- common --- */ .l-archiveBg { position: fixed; width: 100%; height: 100%; top: 0; background-color: hsl(0deg 0% 19% / 80%); z-index: 9; opacity: 0; visibility: hidden; transition: all ease .75s; cursor: crosshair; transition-delay: 0.5s; } .l-archiveBg.active { opacity: 1; visibility: visible; transition-delay: 0s; transition: all ease .5s; } section.l-archiveTags { position: fixed; z-index: 10; width: 35%; height: calc(100% - 3.0rem); background-color: #fff; border: 1px solid #f0f0f0; box-shadow: 0 .4rem 1.5rem 0 hsl(0deg 0% 50% / 25%); top: 3.5rem; left: 1.5rem; text-align: left; opacity: 0; visibility: hidden; transition: 0.6s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } body.is-category section.l-archiveCategory, body.is-country section.l-archiveCountry { top: 1.5rem; opacity: 1; visibility: visible; transition-delay: 0s; } section.l-archiveTags > .inner { width: 66%; margin: 9.5rem auto; } .l-archiveTags__cont + .l-archiveTags__cont { margin-top: 3.8rem; } /* --- title --- */ .l-archiveTags__title { font-size: 2.7rem; font-family: minion-pro-display, sans-serif; font-weight: 600; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.13em; opacity: 0; transition: 0.8s all cubic-bezier(.275,0,0,1); transform: translateY(2.0rem); transition-delay: 0s; } body.is-category .l-archiveTags__title, body.is-country .l-archiveTags__title { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } /* --- list --- */ ul.l-archiveTags__list { margin-top: 2.2rem; margin-left: 0.2rem; display: flex; flex-flow: wrap; } ul.l-archiveTags__list li { font-size: 1.25rem; font-family:nimbus-sans, sans-serif; font-weight: 300; letter-spacing: 0.05em; margin-right: 0.4rem; margin-bottom: 0.7rem; transition: 0.8s all cubic-bezier(.275,0,0,1); transform: translateY(2.0rem); transition-delay: 0s; } ul.l-archiveTags__list li.cat-item-none { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; } ul.l-archiveTags__list li a { display: inline-block; padding: 0.6rem 1.2rem 0.6rem; border: 1px solid #e4e4e4; border-radius: 1.5rem; transition: all ease .35s; } ul.l-archiveTags__list li a:hover { background: #f8f8f8; border: 1px solid #efefef; } ul.l-archiveTags__list li + li { } ul.l-archiveTags__list li ul.children { margin-top: 2.7rem; margin-bottom: 3rem; margin-left: 0rem; padding-top: 0rem; padding-bottom: 1.7rem; border-left: 1px solid #e1e1e1; display: none; } ul.l-archiveTags__list li ul.children.height { height: 0rem !important; } ul.l-archiveTags__list li ul.children.active { margin-top: 2.3rem; margin-bottom: 2.4rem; transition-delay: 0s; } /*ul.l-archiveTags__list li.cat-item-8 a, ul.l-archiveTags__list li.cat-item-107 a, ul.l-archiveTags__list li.cat-item-15 a, ul.l-archiveTags__list li.cat-item-118 a, ul.l-archiveTags__list li.cat-item-18 a { padding-right: 1.5rem; position: relative; } ul.l-archiveTags__list li.cat-item-8 a:before, ul.l-archiveTags__list li.cat-item-107 a:before, ul.l-archiveTags__list li.cat-item-15 a:before, ul.l-archiveTags__list li.cat-item-118 a:before, ul.l-archiveTags__list li.cat-item-18 a:before { position: absolute; content: ""; top: 46%; right: 0rem; width: .4rem; height: .4rem; border-top: 1px solid #ab997f; border-right: 1px solid #ab997f; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); transition: all ease .35s; } ul.l-archiveTags__list li.cat-item-8 a.active:before, ul.l-archiveTags__list li.cat-item-107 a.active:before, ul.l-archiveTags__list li.cat-item-15 a.active:before, ul.l-archiveTags__list li.cat-item-118 a.active:before, ul.l-archiveTags__list li.cat-item-18 a.active:before { -webkit-transform: translateY(-50%) rotate(-225deg); transform: translateY(-50%) rotate(-225deg); }*/ ul.l-archiveTags__list li ul.children li { font-size: 1.35rem; transform: translateY(0rem); opacity: 1; transition-delay: 0s; } ul.l-archiveTags__list li ul.children.active li { transform: translateY(0rem); opacity: 1; transition-delay: 0s; } ul.l-archiveTags__list li ul.children li:before { content: ""; margin-right: 2rem; margin-left: 0.5rem; } ul.l-archiveTags__list li ul.children li a { } ul.l-archiveTags__list li ul.children li a:before { display: none; } ul.l-archiveTags__list li ul.children li a:after { display: none; } ul.l-archiveTags__list ul.children li + li { margin-top: 1.5rem; } body.is-category ul.l-archiveTags__list li, body.is-country ul.l-archiveTags__list li { opacity: 0.7; transform: translateY(0); transition-delay: 0.35s; } /* --------------------------- ■ Pagenation --------------------------- */ /* --- common --- */ .c-pagenation { padding: 9.2rem 0 0rem; background: #fff; text-align: center; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 .c-pagenation { opacity: 1; transform: translateY(0rem); } .l-archiveMusicCont + .c-pagenation { margin-top: -1rem; } .l-archiveNews + .c-pagenation { margin-top: 1.7rem; } .c-pagenation ul { display: flex; align-items: center; justify-content: center } .c-pagenation li { font-size: 2.05rem; font-family: adobe-garamond-pro,sans-serif; font-weight: 300; padding-bottom: 0.1rem; } .c-pagenation li a.active { position: relative; border-bottom: 1px solid #bababa; padding-bottom: 0.5rem; } .c-pagenation li + li { margin-left: 1.3rem; } /* retreat */ body.retreatArc .c-pagenation { background: transparent; } body.retreatArc .c-pagenation a { color:#fff; } /* archiveHor */ .archiveHor .c-pagenation { padding: 1rem 0 0rem; } /* music */ section.l-archiveCont.music .c-pagenation, section.l-archiveCont.melody + .c-pagenation { background: #6a5c5c; padding-bottom: 13rem; margin-bottom: -9.5rem; margin-top: -7rem; } section.l-archiveCont.music .c-pagenation li a, section.l-archiveCont.melody + .c-pagenation li a { color: #fff; } /* --- next --- */ .c-pagenation li.next { font-size: 0; height: 2.8rem; width: 2.3rem; position: relative; padding-left: 0.1rem; } .c-pagenation li.next:before { position: absolute; content: ""; top: 46%; right: 0rem; width: .6rem; height: .6rem; border-top: 1px solid #9d9d9d; border-right: 1px solid #9d9d9d; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); z-index: 1; } .c-pagenation li.next a { display: inline-block; width: 100%; height: 100%; } /* --- prev --- */ .c-pagenation li.prev { font-size: 0; height: 2.8rem; width: 2.3rem; position: relative; padding-right: .1rem; } .c-pagenation li.prev:before { position: absolute; content: ""; top: 50%; left: 0rem; width: .6rem; height: .6rem; border-top: 1px solid #ab997f; border-right: 1px solid #ab997f; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg); z-index: -1; } .c-pagenation li.prev a { display: inline-block; width: 100%; height: 100%; } /* ><><><><><><><><><><><><><><><><> ▼ Feature ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-archiveFeature --------------------------- */ /* --- l-articleFeature --- */ article.l-articleFeature { position: sticky; padding-bottom: 0rem; transition: all ease .75s; } article.l-articleFeature:before { content: ""; position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0); visibility: hidden; z-index: 3; transition: all ease .75s; } /* active */ article.l-articleFeature.shadow { opacity: 0; } article.l-articleFeature.shadow:before { visibility: visible; background-color: rgba(0,0,0,0); } /* --- l-archiveFeature --- */ .l-archiveFeature { position: relative; background-color: #fff; z-index: 5; /*-moz-box-shadow: 3rem -36rem 42rem -26rem rgba(0, 0, 0, 0.08); -webkit-box-shadow: 3rem -36rem 42rem -26rem rgba(0, 0, 0, 0.08); -ms-box-shadow: 3rem -36rem 42rem -26rem rgba(0, 0, 0, 0.08); box-shadow: 3rem -36rem 42rem -26rem rgba(0, 0, 0, 0.08);*/ } .l-archiveFeature.paged:before { display: none; } .l-archiveFeature section.l-archiveHead { padding-top: 25.4rem; text-align: center; } /* policy */ .l-archiveFeature.policy:before { margin: 2rem auto 0; } /* music */ .l-archiveFeature.music:before { } /* --- l-archiveHead__featureTitle --- */ .l-archiveHead__featureTitle { font-size: 1.2rem; font-family: minion-pro-display, sans-serif; letter-spacing: 0.45em; line-height: 1.7; padding-bottom: 4.6rem; text-transform: uppercase; color: #9b917b; padding-top: 6.4rem; text-align: center; margin-top: initial; background: #f4f4f4; display: none; } body.done .l-archiveHead__featureTitle { opacity: 1; transform: translateY(0); } /* --- nav --- */ .l-archiveFeature nav.l-archiveHead__nav { margin-top: 2.5rem; } /* --------------------------- ■ l-archiveTheme --------------------------- */ /* --- common --- */ section.l-archiveTheme { position: fixed; z-index: 10; width: 43%; height: calc(100% - 3.0rem); background-color: #fff; border: 1px solid #f0f0f0; box-shadow: 0 .4rem 1.5rem 0 hsl(0deg 0% 50% / 25%); top: 3.5rem; left: 1.5rem; text-align: left; opacity: 0; visibility: hidden; transition: 0.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; overflow: hidden; } body.is-theme section.l-archiveThemelist, body.is-local section.l-archiveLocalist { top: 1.5rem; opacity: 1; visibility: visible; transition-delay: 0s; } section.l-archiveTheme .wrap > .inner { width: 80.9%; margin: 10.7% auto; } section.l-archiveTheme .wrap { height: calc(100% - 1.3rem); width: 99.2%; margin: 0.5% auto; overflow-y: scroll; visibility: hidden; opacity: 0; transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } body.is-theme section.l-archiveThemelist .wrap, body.is-local section.l-archiveLocalist .wrap { visibility: visible; opacity: 1; transition-delay: 0s; } section.l-archiveTheme .wrap::-webkit-scrollbar { width: .4rem; } section.l-archiveTheme .wrap::-webkit-scrollbar-track { border-radius: 0px; } section.l-archiveTheme .wrap::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 0px; } /* --- l-archiveTheme__list --- */ /* common */ ul.l-archiveTheme__list { margin-bottom: 7.6rem; } ul.l-archiveTheme__list li { display: flex; align-items: center; flex-flow: row-reverse; } ul.l-archiveTheme__list li + li { padding-top: 3.9rem; margin-top: 3.9rem; border-top: 1px dotted #f0f0f0; } /* thumb */ .l-archiveTheme__thumb { height: 9.5vw; width: 28.6%; overflow: hidden; } .l-archiveTheme__thumb figure { height: 100%; width: 100%; opacity: 0; transform:translateY(2.0rem); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } body.is-theme .l-archiveTheme__thumb figure, body.is-local .l-archiveTheme__thumb figure { opacity: 1; transform:translateY(0rem); transition-delay: 0.35s; } .l-archiveTheme__thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* cont */ .l-archiveTheme__cont { width: 56.4%; margin-right: 11%; } /* title */ .l-archiveTheme__cont .c-listTitle { font-size: 1.6rem; line-height: 1.6; margin-top: 0.5rem; opacity: 0; transform:translateY(1.0rem); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } body.is-theme .l-archiveTheme__cont .c-listTitle, body.is-local .l-archiveTheme__cont .c-listTitle { opacity: 1; transform:translateY(0rem); transition-delay: 0.35s; } .l-archiveTheme__subTitle { font-size: 1.1rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 300; letter-spacing: 0.05em; color: #c1b8ac; margin-left: 0rem; margin-top: 0.7rem; opacity: 0; transform:translateY(1.0rem); transition: .6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } .l-archiveTheme__subTitle br { display: none; } body.is-theme .l-archiveTheme__subTitle, body.is-local .l-archiveTheme__subTitle { opacity: 1; transform:translateY(0rem); transition-delay: 0.35s; } /* btn */ section.l-archiveTheme .l-listSect__showAll a { font-size: 1.05rem; letter-spacing: 0.3em; opacity: 0; display: inline-block; transform: translateY(0.5vw); transition: all ease 0.55s; transition-delay: 0.5s; } body.is-theme section.l-archiveTheme .l-listSect__showAll a, body.is-local section.l-archiveTheme .l-listSect__showAll a { opacity: 1; transform: translateY(0vw); } /* ================================= // ● Article // /* ><><><><><><><><><><><><><><><><> ▼ Article Base ><><><><><><><><><><><><><><><><> /* --------------------------- ■ ArticleCommon --------------------------- */ /* --- common --- */ article.l-article { display: flex; width: 98.1%; margin:0 auto; padding-top: 1.5rem; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } article.l-article > .inner { position: relative; z-index: 1; background: #fff; } article.l-article:after { content: ""; display: block; border-bottom: 1px dotted #ececec; width: 96%; margin: 0 auto; margin-top: 15rem; } article.l-article.one:after { border-bottom: 0px solid #ededed; } article.l-article.l-issue.one:after { border-bottom: 1px solid #f0f0f0; } .l-article__left { width: 50%; } .l-article__right { width: 50%; } /* feature */ article.l-singleFeature { position: sticky; transition: all ease 1s; } article.l-singleFeature.shadow { opacity: 0; } article.l-articleStory.l-articleArchive .l-article__right { /* margin-bottom: 21rem;*/ } /* Edition */ article.l-articleEdition:after { border-bottom: 0px dotted #ececec; } /* magazine */ article.l-magazine { } article.l-article.l-magazine:after { margin-top: 0; border-bottom: initial; } body.preorder article.l-magazine:after {border-bottom: 1px dotted rgba(255, 255, 255, 0.2);} /* ======== for Story ======== */ /* --- common --- */ article.l-article.l-articleStPc { width: 100%; display: block; } article.l-articleStPc .l-article__right { width: 100%; margin: 0 auto; position: relative; background: #fff; transition: all ease 1s; } article.l-articleStPc.l-article:after { margin-top: initial; } article.l-articleStPc .l-article__introWrap { display: flex; width: 77%; margin:0 auto; padding-top: 15rem; opacity: 0; transition: all ease 1s; } article.l-articleStPc .l-article__introWrap .left { width: 35%; } article.l-articleStPc .l-article__introWrap .right { width: 65%; } /* feature */ article.l-articleStPc.l-singleFeature .l-article__introWrap { padding-bottom: 21rem; } /* scroll */ body.membNavAdjust article.l-articleStPc .l-article__introWrap { opacity: 1; } body.membNavAdjust article.l-articleStPc .l-article__right { background: #f9f9f9; } /* --- left --- */ .l-article__introEng { display: none; } .l-article__introEng span { width: 70%; display: block; } article.l-articleStPc .l-article__introEng { display: block; font-family: minion-pro-display, sans-serif; font-size: 2.4rem; letter-spacing: 0.325em; color: #beb2a0; margin-bottom: 0; text-transform: lowercase; font-weight: 300; line-height: 1.3; font-variant: small-caps; position: sticky; top: 21.5rem; padding-bottom: 34rem; } /* --- l-articleWrap --- */ /* common */ article.l-articleStPc .l-articleWrap { display: flex; width: 77%; margin: 14rem auto 0; padding-bottom: 16rem; } article.l-articleStPc section.l-articleCont { padding-top: 0; } article.l-articleStPc section.l-articleCont:before { display: none; } .l-articleWrap .left { display: none; } article.l-articleStPc .l-articleWrap .left { display: block; width: 34%; } article.l-articleStPc .l-articleWrap .right { width: 66%; } /* only */ article.l-articleStPc .l-articleWrap.only .right { margin-top: 1.1rem; } article.l-articleStPc .l-articleWrap.only .right section:first-child:before { margin-top: 0; padding-top: 0; border-top: initial; } /* title */ article.l-articleStPc .l-articleWrap_title { font-family: minion-pro-display, sans-serif; font-size: 2.4rem; letter-spacing: .35em; color: #beb2a0; margin-bottom: 0; text-transform: lowercase; font-weight: 300; line-height: 1.4; font-variant: small-caps; position: sticky; top: 21.5rem; padding-bottom: 45rem; width: 70%; } /* --------------------------- ■ l-article__titleInfo --------------------------- */ /* --- common --- */ section.l-article__titleInfo { margin-left: 19.7%; height: calc(100vh - 21.3rem); display: flex; align-items: center; position: relative; top:0; transition: all ease 0.85s; } article.leftSticy section.l-article__titleInfo { position: sticky; } section.l-article__titleInfo.sticky { height: 100vh; } /* --- c-listCatDate --- */ article.l-article .c-listCatDate { position: absolute; top: 2rem; margin-top: initial; overflow: hidden; left: -6.3rem; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0s; z-index: 2; } body.start2 article.l-article .c-listCatDate { transform: translateY(0rem); opacity: 1; } article.l-article .c-listCatDate .slideUp-wrap { display: flex; align-items: baseline; transition: all ease 0.55s; height: 2.2rem; } article.l-article sticky .c-listCatDate .slideUp-wrap { transform: translateY(1vw); opacity: 0; } article.l-article .c-listDate { font-size: 1.45rem; letter-spacing: 0.05em; } article.l-article .c-listCat a { font-size: 1.425rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.05em; border: none; padding: 0; } article.l-article .c-listCat a:after { content: ""; width: 103%; left: -5%; bottom: -0.3rem; height: 1px; position: absolute; display: block; background-color: #f0e8d8; } article.l-article .c-listCat span + span { margin-left: -0.1rem; } article.l-article .c-listCat span + span:before { content:","; color: #af9f8a; margin-right: .5rem; margin-left: -.1rem; } /* --- l-article__sub --- */ .l-article__sub { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.05em; display: block; line-height: 1.7; margin-bottom: 1.7rem; margin-left: 0.3rem; opacity: 0.6; } /* --- c-listTitle --- */ section.l-article__titleInfo .c-listTitle { font-size: 2.85rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; line-height: 1.75; width: 76%; letter-spacing: 0.065em; margin-top: -3.9vw; opacity: 0; margin-left: initial; transform: translateY(2vw); transition: 1.85s all cubic-bezier(.275,0,0,1); transition-delay: 0.1s; } body.start2 section.l-article__titleInfo .c-listTitle { transform: translateY(0rem); opacity: 1; } section.l-article__titleInfo.sticky .c-listTitle { margin-top: 4.4rem; } section.l-article__titleInfo.nonDelay .c-listTitle { transition-delay: 0s; } section.l-article__titleInfo .c-listTitle br { display: inline-block; } section.l-article__titleInfo .c-listTitle span { font-size: 1.6rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.05em; color: #b3a38e; display: block; font-weight: 300; margin-top: 0.3rem; margin-left: 0.1rem; } section.l-article__titleInfo .c-listTitle span br { display: none; } section.l-article__titleInfo .c-listTitle.titleSize span { margin-top: .1rem; } /* sizing */ section.l-article__titleInfo .c-listTitle.big > .inner { font-size: 107%; } /* l-issue__title */ section.l-article__titleInfo .l-issue__title { font-size: 3.4rem; letter-spacing: 0.04em; } /* l-issueSub */ section.l-article__titleInfo .c-listTitle span.l-issueSub { margin-top: -0.4rem; font-size: 1.5rem; } /* edition */ section.l-article__titleInfo .c-listTitle.edition > .inner { font-size: 134%; } section.l-article__titleInfo .c-listTitle.edition .l-article__num { display: inline-block; font-variant: small-caps; font-size: 118%; margin-left: 0.5rem; letter-spacing: 0.01em; } /* digital */ section.l-article__titleInfo .c-listTitle.digital .num { display: flex; font-family: minion-pro-display, sans-serif; font-size: 1.5rem; color: #85855c; align-items: center; margin-left: 0.3rem; } section.l-article__titleInfo .c-listTitle.digital .num span { font-size: 148%; font-family: minion-pro-display, sans-serif; font-variant: small-caps; color: #85855c; margin-top: -0.5rem; margin-left: 0.8rem; } section.l-article__titleInfo .c-listTitle.digital .inner { font-size: 105%; margin-top: 0.7rem; } section.l-article__titleInfo .c-listTitle.digital .l-issueSub img { margin-top: 1.3rem; width: 13.9vw; } /* --- l-article_scroll --- */ .l-article_scroll { position: absolute; content: ""; bottom: 3rem; left: -12.1rem; transition: all ease .5s; display: none; } .l-article_scroll a { position: absolute; bottom: 0; padding: 1rem 1rem 11rem; } .l-article_scroll a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 10rem; background: #ccc; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite; } @keyframes sdl { 0% { transform: scale(1, 0); transform-origin: 0 0; } 50% { transform: scale(1, 1); transform-origin: 0 0; } 50.1% { transform: scale(1, 1); transform-origin: 0 100%; } 100% { transform: scale(1, 0); transform-origin: 0 100%; } } /* scroll */ section.l-article__titleInfo.sticky .l-article_scroll { visibility: hidden; opacity: 0; } /* --------------------------- ■ l-article__right --------------------------- */ /* --- common --- */ .l-article__rightInner { width: 100%; } /* --------------------------- ■ l-article__mv --------------------------- */ section.l-article__mv { height: calc(100vh - 23.9rem); max-height: calc(100vh - 20.9rem); margin-bottom: 9rem; opacity: 1; } section.l-article__mv:before { content:""; position: absolute; width: 100%; height: 0%; background-color: #fff; z-index: 1; bottom:0; transition: 1.2s all cubic-bezier(.275,0,0,1); transition-delay: 1.2s; } body.done section.l-article__mv:before { height: 0; } section.l-article__mv figure { overflow: hidden; height: 100%; position: relative; } section.l-article__mv figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center center; } /* pre */ section.l-article__mv figure img { transition: all ease .75s; transform: scale(1.15); transition: 1.6s all cubic-bezier(.275,0,0,1); } section.l-article__mv figure:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #fff; display: block; z-index: 1; transition: 1.6s all cubic-bezier(0.275,0,0,1); } /* start */ body.start2 section.l-article__mv figure img { transform: scale(1); } body.start2 section.l-article__mv figure:before { height: 0%; } /* ======== for Story ======== */ article.l-articleStPc section.l-article__mv { width: 50%; margin-bottom: 2rem; } /* --------------------------- ■ l-articleIntro --------------------------- */ /* --- common --- */ section.l-articleIntro { width: 82%; margin:0 auto; padding-right: 1%; } /* archive */ article.l-articleArchive .l-articleIntro + section.l-creditIntro { margin-bottom: -0.7rem; } /* --- title --- */ .l-articleIntro__title { font-size: 2.5rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.75; letter-spacing: 0.05em; padding-top: 0.4rem; } h3.l-articleIntro__title span { margin-left: 0.3rem; display: block; font-size: 1.25rem; margin-bottom: 0.3rem; } .l-articleIntro__title + .l-articleIntro__desc { } .l-articleIntro__title + .l-articleIntro__desc:before { content: ""; display: block; width: 0.8rem; border-top: 1px solid #dfdfdf; margin-top: 0rem; padding-top: 2.5rem; margin-left: 0.6%; } /* --- desc --- */ .l-articleIntro__desc { font-size: 1.475rem; line-height: 2.325; letter-spacing: 0.05em; width: 94%; } .l-articleIntro__desc a { text-decoration: underline dotted; text-decoration-color: #8E8282; color: #231d1d; text-underline-offset: 10px; } article.l-articleFeature .l-articleIntro__desc { font-size: 1.475rem; line-height: 2.45; letter-spacing: 0.05em; opacity: 0; transform: translateY(2vw); transition: 1.15s all cubic-bezier(.275,0,0,1); transition-delay: 0.45s; } body.start2 article.l-articleFeature .l-articleIntro__desc { opacity: 1; transform: translateY(0rem); } /* --- parents --- */ .l-articleIntro__parents { display: inline-block; border: 0px dotted #bbbbbb; border-radius: 4px; margin-top: 3.1rem; margin-left: -0.46rem; margin-bottom: 2rem; } .l-articleIntro__parents a { display: inline-block; font-size: 1.45rem; padding: 1.3rem 1.9rem 1.1rem 3rem; position: relative; background: #f5f5f5; border-radius: 0.4rem; } .l-articleIntro__parents a:before { content: ""; position: absolute; width: .5rem; left: 1.5rem; height: .5rem; top: 0.1rem; bottom: 0; margin: auto; border-top: 1px solid #aea291; border-right: 1px solid #aea291; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* ======== for Story ======== */ /* --- common --- */ article.l-articleStPc section.l-articleIntro { width: 100%; padding-right: initial; margin-top: -0.3rem; } /* --- desc --- */ article.l-articleStPc .l-articleIntro__desc { width: 82%; font-size: 1.6rem; line-height: 2.75; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 400; letter-spacing: 0.065em; } /* quote */ article.l-articleStPc .l-articleIntro__desc blockquote { background: #ffffff; border: 1px solid #f2f2f2; border-radius: 4px; margin: 0; padding: 9.1rem 9.7rem; width: 100%; margin-left: -5.8%; margin-top: 7rem; } /* --------------------------- ■ l-articleMovie --------------------------- */ /* --- common --- */ section.l-articleMovie { width: 109%; height: 36vw; margin-left: -5%; margin-top: 9rem; margin-bottom: 6rem; cursor: pointer; } section.l-articleMovie figure { width: 100%; height: 100%; position: relative; overflow: hidden; } section.l-articleMovie figure img { width: 100%; height: 100%; object-fit: cover; object-position: center center; font-family: 'object-fit: cover;'; transition: all ease 1s; } section.l-articleMovie figure:hover img { transform: scale(1.05); } /* about */ section.l-articleMovie.l-subscMovie { width: 79%; height: 47vw; margin: 16rem auto 14rem; border: 1px solid #fff; box-sizing: border-box; position: relative; } /* issue */ section.l-magazine__intro + section.l-articleMovie.l-subscMovie {margin-top: 21rem;margin-bottom: -2rem;} /* --- arrow --- */ section.l-articleMovie figure:after { content: ""; position: absolute; top:0; display: block; width: 100%; height: 100%; transition: all 1s ease; background-color: rgba(0,0,0,0.3); z-index: 0; } section.l-articleMovie figure:hover:after { background-color: rgba(0,0,0,0.1); } section.l-articleMovie figure:before { content: ""; background-image: url(../../assets/img/common/play.svg); display: block; position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 8rem; height: 8rem; transition: all s ease; transition-delay: 0s; z-index: 1; } section.l-articleMovie figure:hover:before { opacity: 1; } /* endroll */ section.l-articleMovie.endroll figure:before { background-image: url(../../assets/img/common/endroll.svg); width: 24.9rem; height: 13.8rem; } section.l-articleMovie.endroll figure:after { background-color: rgba(0, 0, 0, 0.4); } .l-articleStPc section.l-articleMovie.endroll { width: 102%; margin-left: -1%; height: 33.5vw; } section.l-articleMovie.endroll:hover figure:after { background-color: rgba(0, 0, 0, 0.2); } /* --- video --- */ section.l-articleVideo { position: fixed; cursor: crosshair; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; background: rgba(0,0,0,0.8); visibility: hidden; opacity: 0; transition: all ease .5s; } section.l-articleVideo video { position: absolute; height: 87vh; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* active */ body.pace-done.movStart .l-fixedMenu.visible { top: -10rem; } body.movStart section.l-articleVideo { visibility: visible; opacity: 1; } /* --- close --- */ .l-articleVideo__close { position: fixed; width: 3rem; height: 3rem; z-index: 9; top: 1.8rem; right: 1.8rem; cursor: pointer; } .l-articleVideo__close > .inner { width: 100%; height: 100%; position: absolute; } .l-articleVideo__close span { top: 1.3rem; position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #fff; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } /* active */ body.movStart .l-articleVideo__close span:nth-child(1) { transform: rotate(-30deg); } body.movStart .l-articleVideo__close span:nth-child(2) { transform: rotate(30deg); } /* hover */ body.movStart .l-articleVideo__close:hover span:nth-child(1) { transform: rotate(-25deg); } body.movStart .l-articleVideo__close:hover span:nth-child(2) { transform: rotate(25deg); } /* --------------------------- ■ l-article__navigation --------------------------- */ /* --- common --- */ section.l-article__navigation { display: flex; align-items: center; justify-content: center; width: 40%; margin: 8.6rem auto 0; border-top: 1px dotted #e3e3e3; border-bottom: 1px dotted #e3e3e3; padding: 6rem 1.7rem; } /* --- arrow --- */ /* common */ section.l-article__navigation .arrow { display: block; height: 3rem; width: 3rem; border: 1px solid #e9e9e9; border-radius: 100%; position: relative; } section.l-article__navigation .arrow a { display: block; width: 100%; height: 100%; position: relative; z-index: 1; } section.l-article__navigation .arrow:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; opacity: 1; transition: all .25s ease; transition-delay: 0s; } /* prev */ section.l-article__navigation .arrow.prev { margin-right: auto; position: absolute; left: 1.2rem; } section.l-article__navigation .arrow.prev:after { background-image: url(../../assets/img/common/arrowLeft.svg); } /* next */ section.l-article__navigation .arrow.next { margin-left: auto; position: absolute; right: 1.2rem; } section.l-article__navigation .arrow.next:after { background-image: url(../../assets/img/common/arrowRight.svg); } /* --- toIndex --- */ /* common */ section.l-article__navigation .toIndex { font-family: adobe-garamond-pro, sans-serif; font-weight: 500; font-size: 1.5rem; letter-spacing: 0.235em; text-transform: uppercase; flex-grow: 0; padding-top: 0.7rem; } /* --------------------------- ■ l-article__btn --------------------------- */ /* --- common --- */ section.l-article__btn { width: 86%; margin: 3.5rem auto 5rem; padding-right: 1%; } /* --- cont --- */ .l-article__btnCont { text-align: center; background: #f1f1f1; border-radius: 0.5rem; text-align: center; transition: all ease .35s; } .l-article__btnCont:hover { background-color: #f1f1f1; } .l-article__btnCont a { font-size: 1.45rem; letter-spacing: 0.05em; display: inline-block; width: 100%; height: 100%; padding-top: 3rem; padding-bottom: 3.1rem; } .l-article__btnCont a:before { position: absolute; content: ""; top: 50%; right: 3.6rem; width: 0.7rem; height: 0.7rem; border-top: 1px solid #bea684; border-right: 1px solid #bea684; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); z-index: 0; } /* --------------------------- ■ l-articleSeries --------------------------- */ /* --- common --- */ section.l-articleSeries { width: 87.4%; margin:0 auto; } section.l-articleSeries:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 4.1rem; padding-top: 5.2rem; margin-left: 0.2%; } section.l-articleCont + section.l-articleSeries:before { border-top: 0px solid #dfdfdf; margin-top: 2.8rem; } /* archive */ section.l-articleIntro + section.l-creditIntro + section.l-articleSeries { margin-bottom: 12rem; } section.l-articleIntro + section.l-creditIntro + section.l-articleSeries:before { padding-top: 2.7rem; } section.l-articleIntro + section.l-articleSeries { margin-bottom: 12rem; } section.l-articleIntro + section.l-articleSeries.related:before { margin-top: 2.7rem; padding-top: 3.7rem; border: initial; } article.l-articleStPc section.l-articleIntro + section.l-creditIntro + section.l-articleSeries { margin-bottom: 0; } /* feature */ section.l-articleSeries.feature { margin-bottom: 8.5rem; } section.l-articleCont + section.l-articleSeries.feature:before { margin-top: 3.6rem; } /* related */ section.l-articleSeries.related:before { padding-top: 3.7rem; } /* photo */ section.l-articlePhoto + section.l-articleSeries.related:before { padding-top: 5.5rem; border-top: 1px solid #fff; } /* profile */ section.l-articleProf + section.l-articleSeries.related ul.l_series__list { border-top: initial; } /* philosophy */ section.l-articleSeries.philosophy { width: 113%; margin-left: -6.5%; margin-top: 8rem; } section.l-articleSeries.philosophy:before { content:none; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleSeries.related { width: 79.4%; } article.l-articleStPc section.l-articleSeries.related:before { padding-top: 3.4rem; } article.l-articleStPc section.l-articleSeries.related ul.l_series__list { margin-left: -2.4rem; margin-right: -2.4rem; } article.l-articleStPc section.l-articleSeries.related ul.l_series__list .inner { padding: 3rem; } /* next */ article.l-articleStPc section.l-articleSeries.related.next { } article.l-articleStPc section.l-articleSeries.related.next:before { padding-top: 4rem; border-top: 0px solid #dfdfdf } /* --- sectTitle --- */ .l-articleSeries__sectTitle { font-weight: 300; font-size: 1.1rem; font-family: 'arial',sans-serif; color: #aea291; letter-spacing: 0.05em; } /* related */ .l_series__relatedTitle { font-size: 1.2rem; letter-spacing: 0.035em; margin-left: 0rem; margin-bottom: 3.2rem; } /* issue */ .l-issue .l_series__relatedTitle { display: none; } .l-issue section.l-articleSeries:before { margin-top: 2.5rem; } /* --- title --- */ .l-articleSeries__title { font-size: 2.2rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.03em; margin-top: 1.6rem; margin-left: -0.3rem; line-height: 1.7; } .l-articleSeries__title br { display: none; } /* --- sub --- */ .l-articleSeries__title span { font-size: 1.25rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.07em; color: #aeaba4; display: block; font-weight: 300; margin-top: 0.2rem; margin-left: 0.2rem; display: none; } /* --- list --- */ ul.l_series__list { margin-top: 0; margin-left: -1.4rem; } ul.l_series__list li { background: #fff; border: 1px solid #e9e9e9; border-radius: 0.1rem; transition: all ease .35s; } ul.l_series__list li + li { margin-top: 0.5rem; } ul.l_series__list li .inner { display: flex; padding: 2.2rem; align-items: center; } /* current */ ul.l_series__list li.current { color: #fff; background-color: #8E8282 !important; border: 1px solid #e9e9e9; } /* none */ ul.l_series__list li.none.fadeInUp { opacity: 1; color: #242121; background-color: #e8e8e8 !important; } /* hover */ ul.l_series__list li:hover { background-color: #f3f3f3; border: 1px solid #e9e9e9; } /* thumb */ .l_series__thumb { width: 20.2%; height: 7.9vw; } .l_series__thumb figure { width: 100%; height: 100%; } .l_series__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; font-family: 'object-fit: cover;'; } /* current */ ul.l_series__list li.current .l_series__thumb { box-sizing: border-box; border: 1px solid #fff; } /* philosophy */ section.l-articleSeries.philosophy .l_series__thumb { width: 17%; height: 6.4vw; border: 1px solid #e3e3e3; box-sizing: border-box; padding: 2px; background: #fff; } section.l-articleSeries.philosophy ul.l_series__list li { background-color: #f6f6f6; } section.l-articleSeries.philosophy ul.l_series__list li:hover { background-color: #ececec; } /* cont */ .l_series__cont { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; margin-left: 5rem; } .l_series__num { font-size: 1rem; letter-spacing: 0.1em; margin-top: -1rem; margin-left: 0.1rem; } .l_series__num .date { font-size: 1.15rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.03em; margin-right: 1.2rem; margin-left: 0.8rem; text-decoration: underline; color: #504638; text-decoration-color: #ccc; text-underline-offset: 0.1em; } .l_series__title { font-size: 1.75rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.035em; margin-top: 1.1rem; } .l_series__title.edition { margin-left: -0.4rem; } /* current */ ul.l_series__list li.current .l_series__num, ul.l_series__list li.current .l_series__title { /* color: #ffffff;*/ } /* philosophy */ .l_series__title.eng { font-size: 2.2rem; letter-spacing: 0.06em; margin-top: 1.3rem; color: #8c7a61; } /* ======== for Story ======== */ /* --- intro --- */ article.l-articleStPc section.l-articleSeries.stotyIntro { width: 93%; margin-left: -1%; } article.l-articleStPc section.l-articleSeries.stotyIntro:before { border-top: 0px solid #dfdfdf; margin-top: 6.4rem; } article.l-articleStPc section.l-articleSeries.stotyIntro .l_series__thumb { width: 15.3%; height: 6.8vw; } article.l-articleStPc section.l-articleSeries.stotyIntro .l_series__cont { margin-left: 6rem; } article.l-articleStPc section.l-articleSeries.stotyIntro .l_series__title { font-size: 1.7rem; margin-top: 0.9rem; letter-spacing: 0.065em; } article.l-articleStPc section.l-articleSeries.stotyIntro ul.l_series__list li .inner { padding: 2.9rem; } /* feature */ article.l-articleStPc.l-singleFeature section.l-articleSeries.stotyIntro:before { margin-top: 3.7rem; } /* --- common --- */ article.l-articleStory section.l-articleSeries.story { width: 98%; background-size: cover; background-attachment: fixed; margin: 17rem auto 0; position: relative; clip-path: inset(0 0 0 0); } article.l-articleStory section.l-articleSeries.story:before { /* reset */ border-top: initial; margin-top: initial; padding-top: initial; margin-left: initial; /* add */ content:""; position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } /* margin */ article.l-articleStory .l-articleWrap + section.l-articleSeries.story { margin: 0 auto 0; } /* --- subTitle --- */ article.l-articleStory section.l-articleSeries.story .l_series__subTitle { font-size: 2.25rem; letter-spacing: 0.4em; font-family: adobe-garamond-pro, sans-serif; color: #fff; position: relative; text-transform: uppercase; text-align: center; padding-top: 12rem; } /* --- list --- */ article.l-articleStPc section.l-articleSeries.story ul.l_series__list { position: relative; margin: 0 auto; width: 56%; padding-top: 9.8rem; padding-bottom: 21rem; } section.l-articleSeries.story ul.l_series__list li .inner { padding: 2.1rem; } /* thumb */ article.l-articleStPc section.l-articleSeries.story .l_series__thumb { width: 16.6%; height: 8.3vw; } /* cont */ article.l-articleStPc section.l-articleSeries.story .l_series__cont { margin-left: 6.9rem; } article.l-articleStPc section.l-articleSeries.story .l_series__num { font-size: 1.2rem; letter-spacing: 0.07em; margin-top: -0.9rem; margin-left: 0.2rem; } article.l-articleStory section.l-articleSeries.story .l_series__num .date { font-size: 1.15rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.04em; margin-right: 1rem; text-decoration: underline; color: #6d593b; text-decoration-color: #ccc; text-underline-offset: 0.1em; margin-left: 0.7rem; } article.l-articleStory section.l-articleSeries.story .l_series__num .txt { font-size: 1.1rem; } article.l-articleStPc section.l-articleSeries.story .l_series__title { font-size: 1.85rem; letter-spacing: 0.075em; margin-top: 1.5rem; } /* ======== for Poetry ======== */ /* --- common --- */ article.l-articleStPc.l-articlePoetry section.l-articleSeries { width: 80%; margin: 0 auto; } article.l-articleStPc.l-articlePoetry section.l-articleSeries .l_series__thumb { width: 19.4%; height: 7.6vw; } article.l-articleStPc.l-articlePoetry section.l-articleSeries.related:before { padding-top: 6.7rem; } /* --------------------------- ■ l-articleThemeNav --------------------------- */ /* --- common --- */ section.l-articleThemeNav { width: 102%; margin-left: -1%; margin-top: 11rem; } /* --- list --- */ li.l-articleThemeNav__list { background: #fff; border: 1px solid #eeeeee; border-radius: 0.3rem; transition: all ease .5s; } li.l-articleThemeNav__list + li.l-articleThemeNav__list { margin-top: 0.6rem; } li.l-articleThemeNav__list .inner { padding: 4.6rem 4.7rem; display: flex; align-items: center; } /* hover */ li.l-articleThemeNav__list:hover { background-color: #f9f9f9; border: 1px solid #e9e9e9; } /* arrow */ li.l-articleThemeNav__list .arrow { width: 1.5rem; height: 1.5rem; border: 1px solid #e9e9e9; border-radius: 100%; display: block; position: relative; } li.l-articleThemeNav__list .arrow:before { content: ""; background-image: url(../../assets/img/common/arrowRight.svg); display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 0.5rem; height: 0.45rem; transition: all .25s ease; transition-delay: 0s; } /* jpn */ li.l-articleThemeNav__list .jpn { font-size: 1.4rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.095em; margin-left: 2rem; margin-top: 0.3rem; } /* eng */ li.l-articleThemeNav__list .eng { font-size: 1.1rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.095em; color: #7E7758; margin-left: 2rem; margin-top: 0.5rem; } /* --------------------------- ■ l-articlePhoto --------------------------- */ /* --- common --- */ section.l-articlePhoto { margin-top: 14rem; } /* --- photo --- */ section.l-articlePhoto figure { width: 95.5%; margin: 0 auto; transition-delay: 0.25s; } section.l-articlePhoto figure img { width: 100%; } section.l-articlePhoto figure + figure { margin-top: 0.2rem; } /* --- photo --- */ section.l-articlePhoto figcaption { font-size: 1.45rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; color: #989898; letter-spacing: 0.02em; margin-top: 0.9rem; margin-left: 0rem; padding-bottom: 0.9rem; } /* --------------------------- ■ l-creditIntro --------------------------- */ /* --- common --- */ section.l-creditIntro { width: 81.7%; margin:0 auto; padding-right: 1%; } section.l-creditIntro.onlyArticle { display: none; } section.l-articleCont + section.l-creditIntro { width: 82%; margin:0 auto; padding-right: 1%; } section.l-creditIntro:before { content:""; display: block; width: 0.8rem; border-top: 1px solid #dfdfdf; margin-top: 2.5rem; padding-top: 2.9rem; margin-left: 0.1%; } /* margin */ section.l-articleCont + section.l-creditIntro:before { margin-top: 4.8rem; padding-top: 3.1rem; } section.l-articleSeries + section.l-creditIntro:before { margin-top: 0rem; border-top: 0; } section.l-articleSeries.related + section.l-creditIntro:before { margin-top: 4.5rem; } section.l-articleProf + section.l-creditIntro:before { margin-top: 8.6rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-creditIntro { width: 98.2%; } /* margin */ article.l-articleStPc .l-articleWrap section.l-creditIntro, article.l-articleStPc section.l-articleSeries + section.l-creditIntro, article.l-articleStPc section.l-articleCont + section.l-creditIntro { width: 78.3%; } article.l-articleStPc section.l-articleSeries + section.l-creditIntro:before { margin-top: 3.9rem; border-top: 0; } article.l-articleStPc section.l-articleCont + section.l-creditIntro:before { margin-top: 6.6rem; padding-top: 5rem; } /* only */ article.l-articleStPc .l-articleWrap.only section.l-creditIntro { display: none; } /* --- list --- */ .l-creditIntro__list { display: flex; flex-flow: wrap; } section.l-creditIntro li { font-family: adobe-garamond-pro, sans-serif; font-size: 1.25rem; font-weight: 300; letter-spacing: 0.05em; opacity: 0.6; } section.l-creditIntro li + li { margin-left: 1rem; } section.l-creditIntro li + li:before { content: "/"; opacity: 0.7; font-size: 1rem; margin-right: 0.5rem; } section.l-creditIntro li span:nth-child(1) { font-size: 1.05rem; letter-spacing: 0.05em; text-transform: lowercase; } section.l-creditIntro li span:nth-child(1):after { content:":"; margin-left: .5rem; margin-right: .2rem; } /* --------------------------- ■ l-creditFull --------------------------- */ /* --- common --- */ section.l-creditFull { width: 100%; margin: 11rem auto 2rem; } ul.l-creditFull__list { } ul.l-creditFull__list > li { border: 1px dotted #e3e3e3; padding: 7.8rem 8.3rem; } ul.l-creditFull__list > li + li{ margin-top: 0.6rem; } /* --- list --- */ /* part */ ul.l-creditFull__list .part { font-weight: 300; font-size: 1.3rem; font-family: adobe-garamond-pro, serif; color: #aea291; letter-spacing: 0.035em; margin-left: 0.2%; margin-bottom: 1.6rem; } /* info */ ul.l-creditFull__list .info { display: flex; align-items: center; } /* name */ ul.l-creditFull__list .name { font-size: 2.2rem; letter-spacing: 0.05em; font-family: adobe-garamond-pro,sans-serif; } /* sns */ ul.l-creditFull__list .sns { margin-left: 2rem; } ul.l-creditFull__list .sns ul { display: flex; font-size: 1.45rem; } ul.l-creditFull__list .sns li + li { margin-left: 1rem; } /* outline */ ul.l-creditFull__list .outline { /* width: 86%;*/ font-size: 1.2rem; line-height: 2.1; opacity: 0.6; letter-spacing: 0; margin-top: 1.5rem; } ul.l-creditFull__list .outline a { text-decoration: underline; } /* url */ ul.l-creditFull__list .url { font-size: 1.15rem; font-family: 'arial',sans-serif; color: #616161; letter-spacing: 0.05em; margin-top: 2.3rem; } ul.l-creditFull__list .url + .url { margin-top: 0.9rem; } ul.l-creditFull__list .url a { color: #a89880; margin-left: 0.4rem; } ul.l-creditFull__list .url a:hover { } /* ======== for Story ======== */ /* --- common --- */ article.l-articleStPc section.l-creditFull { width: 95.5%; margin: 13rem auto 0rem; background: #fff; } article.l-articleStPc ul.l-creditFull__list > li { } article.l-articleStPc ul.l-creditFull__list > li + li:before { margin-top: 4.5rem; padding-top: 4.5rem; } /* poetry */ article.l-articleStPc.l-articlePoetry section.l-creditFull { margin: 13rem auto 0rem; } /* --- list --- */ /* part */ article.l-articleStPc ul.l-creditFull__list .part { margin-bottom: 1.4rem; } /* info */ article.l-articleStPc ul.l-creditFull__list .info { } /* name */ article.l-articleStPc ul.l-creditFull__list .name { font-size: 2.2rem; } /* sns */ article.l-articleStPc ul.l-creditFull__list .sns ul { font-size: 1.6rem; } article.l-articleStPc ul.l-creditFull__list .sns { margin-left: 2.2rem; } article.l-articleStPc ul.l-creditFull__list .sns li + li { margin-left: 1.1rem; } /* outline */ article.l-articleStPc ul.l-creditFull__list .outline { width: 97%; margin-top: 2rem; } /* url */ article.l-articleStPc ul.l-creditFull__list .url { } article.l-articleStPc ul.l-creditFull__list .url a { } /* --------------------------- ■ l-articleProf --------------------------- */ /* --- common --- */ section.l-articleProf { width: 97%; margin: 0 auto 0; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0.3s; } body.start2 section.l-articleProf { opacity: 1; transform: translateY(0rem); } /* music */ article.l-articleMusic section.l-articleProf { width: 100%; margin-left: 0; } /* poetry */ article.l-articleStPc article.l-articlePoetry section.l-articleProf { width: 100%; margin-left: 0; } article.l-articleStPc.l-articlePoetry .l-articleProf__cont { margin: 0 auto; } /* Story */ article.l-articleStPc section.l-articleProf { margin-left: -4%; width: 108%; } article.l-articleStPc .l-articleProf__cont { margin-top: 10rem; padding: 10.5rem 12rem 11rem; } article.l-articleStPc .l-articleProf__title { font-size: 2.4rem; } article.l-articleStPc .l-articleProf__eng { font-size: 1.2rem; } article.l-articleStPc .l-articleProf__desc { font-size: 1.35rem; line-height: 2.5; width: 100%; letter-spacing: 0.04em; margin-top: 3.7rem; } /* --- l-articleProf__cont --- */ .l-articleProf__cont { width: initial; margin: 8rem auto 0; padding: 8rem 8.3rem 8.4rem; border: 1px dotted #dfdfdf; background: #fff; } /* music */ article.l-articleMusic .l-articleProf__cont { padding: 6.4rem 8.1rem; margin: 6.3rem auto 4.8rem; width: 66.7%; } /* title */ .l-articleProf__title { font-size: 2.2rem; letter-spacing: 0.075em; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; font-variant: small-caps; margin:0; } /* eng */ .l-articleProf__eng { font-size: 1.1rem; letter-spacing: 0.12em; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; color: #9b9b9b; font-variant: small-caps; margin-top: 1.1rem; margin-left: 0.2rem; } /* desc */ .l-articleProf__desc { font-size: 1.3rem; line-height: 2.3; width: 100%; letter-spacing: 0.04em; margin-top: 3.6rem; } /* url */ .l-articleProf__url { margin-top: 2.1rem; position: relative; } .l-articleProf__url a { font-size: 1.45rem; font-family:adobe-garamond-pro,sans-serif; letter-spacing: 0.02em; color: #aea291; display: inline-block; position: relative; padding-left: 0rem; font-weight: 300; } .l-articleProf__url a:after { content:""; position: absolute; bottom:-.1rem; left: 0; width: 100%; height: .1rem; background-color: #d9d9d9; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0s; } .l-articleProf__url a:hover::after { transform-origin: left top; transform: scale(1, 1); } /* --------------------------- ■ l-articleBack --------------------------- */ /* --- common --- */ section.l-articleBack { background-attachment: fixed; background-size: cover; background-position: center center; height: 57vw; width: 98%; margin: 20rem auto 0; position: relative; display: flex; justify-content: center; text-align: center; align-items: center; } section.l-articleBack:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.45); z-index: 1; } /* only */ section.l-articleBack.only { height: 49vw; } /* --- cont --- */ .l-articleBack__cont { position: relative; color: #fff; z-index: 1; } .l-articleBack__cont .chapter { font-size: 1.3rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.3em; padding: 1.7rem 0.9rem 1.6rem; display: inline-block; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .l-articleBack__cont .chapterTitle { font-size: 3.15rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.9; letter-spacing: 0.075em; margin-top: 4.4rem; } .l-articleBack__cont .chapterEng { font-size: 0.95rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.82em; text-transform: uppercase; margin-top: 2.3rem; opacity: 0.6; } .l-articleBack__cont .chapterEng br { display: none; } /* --------------------------- ■ l-articlePoetxt --------------------------- */ section.l-article__horizonWrap { position: relative; z-index: 1; background-color: #fff; } /* --- common --- */ section.l-articlePoetxt { background-attachment: fixed; background-size: cover; background-position: center center; padding: 22rem 0; position: relative; margin: 20rem auto 0; width: 98%; } section.l-articlePoetxt:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); top: 0; } /* --- cont --- */ .l-articlePoetxt__cont { width: 60%; background-color: #fff; margin: 0 auto; position: relative; } .l-articlePoetxt__cont > .inner { padding: 14.6rem 12.6rem; } /* --- title --- */ .l-articlePoetxt__cont .title { font-size: 2.8rem; font-weight: 400; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.05em; text-align: center; } /* big */ .l-articlePoetxt__cont .title.big span { font-size: 117%; letter-spacing: 0.2em; } /* --- aruthor --- */ .l-articlePoetxt__cont .author { font-size: 1.2rem; font-weight: 400; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.2em; text-align: center; opacity: 0.5; } .l-articlePoetxt__cont .author:before { content: ""; display: block; width: 1.8rem; height: 1px; background-color: #E0E0E0; margin: 1.7rem auto 2.2rem; } /* --- desc --- */ .l-articlePoetxt__cont .desc { margin-top: 11.2rem; } article.l-articleStory.l-articlePoetry .l-articlePoetxt__cont .desc p { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.55rem; line-height: 2.6; font-weight: 400; letter-spacing: 0.05em; width: 100%; text-align: left; } /* --------------------------- ■ toc_container --------------------------- */ /* --- common --- */ div#toc_container { background-color: initial; border:1px dotted #dfdfdf; width: 100%; padding: 11.1rem 13.2rem 21rem; width: 30%; margin: 0 auto 0; margin-bottom: 25rem; position: relative; } div#toc_container:after { content: ""; position: absolute; bottom: 3.3rem; left: 50%; width: 1rem; height: 1rem; border-top: 1px solid #9f8a6b; border-right: 1px solid #9f8a6b; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-225deg); transform: translateX(-50%) translateY(-50%) rotate(-225deg); z-index: 0; } section.l-articleIntro + div#toc_container, section.l-articleProf + div#toc_container { margin-top: 6.0rem; } /* story */ article.l-articleStPc div#toc_container { width: 100%; border: 0px dotted #dfdfdf; padding:initial; margin-left: 1.4rem; margin-bottom: 3rem; display: flex; } article.l-articleStPc div#toc_container:after { display: none; } /* --- intro --- */ #toc_container p.toc_title { font-size: 3.65rem; font-weight: 500; font-family:adobe-garamond-pro,sans-serif; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0rem; width: 100%; } #toc_container span.toc_toggle { display: none; } /* story */ article.l-articleStPc #toc_container p.toc_title { display: none; } /* --- toc_list --- */ /* common */ #toc_container p.toc_title + ul.toc_list { margin-top: 5.8rem; } /* story */ article.l-articleStPc #toc_container ul.toc_list { margin-top: 0.8rem; width: 67%; padding-bottom: 10.5rem; } /* parents */ #toc_container.no_bullets ul.toc_list > li { font-size: 1.55rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.05em; } #toc_container.no_bullets ul.toc_list li a:hover { text-decoration: initial !important; } #toc_container.no_bullets ul.toc_list > li span { font-size: 1.6rem; font-weight: 300; margin-left: 0.8rem; margin-right: 0rem; } #toc_container.no_bullets ul.toc_list > li span:after { content:"."; margin-right: 1.7rem; } #toc_container.no_bullets ul.toc_list > li + li { margin-top: 1.9rem; } /* children */ #toc_container.no_bullets ul.toc_list li ul { margin-left: 0; margin-top: 1.8rem; margin-bottom: 4rem; } #toc_container.no_bullets ul.toc_list li:last-child ul { margin-bottom: 0; } #toc_container.no_bullets ul.toc_list li ul li { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.25rem; letter-spacing: 0.035em; opacity: 0.7; } #toc_container.no_bullets ul.toc_list li ul li:before { content: "-"; margin-left: 1rem; margin-right: 2.2rem; color: #6c6c6c; } #toc_container.no_bullets ul.toc_list li ul li span { display: none; } #toc_container.no_bullets ul.toc_list li ul li + li { margin-top: 1.2rem; } /* --------------------------- ■ l-articleBtn --------------------------- */ /* --- common --- */ section.l-articleBtn { width: 84%; margin: 0 auto; margin-top: 5.1rem; margin-bottom: 7.5rem; } .l-articleBtn__sub { font-size: 1.2rem; letter-spacing: 0em; } .l-articleBtn__sub span { font-size: 1.6rem; color: #aea291; margin-right: .6rem; margin-left: .1rem; } .l-articleBtn__title { font-family: 'adobe-garamond-pro',sans-serif; font-size: 1.95rem; margin-top: .9rem; display: inline-block; position: relative; } .l-articleBtn__title:hover { text-decoration: underline; } /* --------------------------- ■ l-articleShare --------------------------- */ /* --- common --- */ section.l-articleShare { width: 80%; margin: 0 auto; padding-right: 3%; margin-top: 4.9rem; } section.l-articleIntro + section.l-articleShare { margin-top: 4.5rem; } /* share */ section.l-articlePhoto + section.l-articleShare { margin-top: 10rem; } /* news */ section.l-article__newsContainer section.l-articleShare { padding-left: 6%; margin-top: 6.1rem; } /* gallery */ section.l-articleGallery + section.l-articleShare { margin-top: 9rem; } /* --- list --- */ section.l-articleShare ul { display: flex; margin-left: -1.3%; } section.l-articleShare ul li { background: #f7f7f7; font-size: 1.4rem; font-family: nimbus-sans, sans-serif; border-radius: 0.2rem; letter-spacing: 0.045em; } section.l-articleShare ul li a { display: inline-block; padding: 1.4rem 2rem 1.3rem 1.7rem; transition: all ease .5s; } section.l-articleShare ul li a:hover { background: #e2e2e2; } section.l-articleShare ul li + li { margin-left: .4rem; } section.l-articleShare ul li i { font-size: 1.35rem; } section.l-articleShare ul li span { margin-left: .3rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleShare { width: 79.4%; margin-top: 5.8rem; padding-right: initial; } article.l-articleStPc section.l-articleShare ul li { font-size: 1.4rem; background: #f0f0f0; } article.l-articleStPc section.l-articleShare ul li , article.l-articleStPc .l-cat__cont ul li a { } /* margin */ article.l-articleStPc .l-article__introWrap section.l-articleShare { width: 99.3%; } /* only */ article.l-articleStPc .l-articleWrap.only section.l-articleShare { margin-top: 1rem; } /* --------------------------- ■ l-articleInfo --------------------------- */ /* --- common --- */ section.l-articleInfo { width: 81%; margin: 0 auto; padding-right: 3%; } section.l-articleInfo:before { content: ""; display: block; width: 0.8rem; border-top: 1px solid #dfdfdf; margin-top: 6.6rem; padding-top: 4.4rem; margin-left: 0.4%; } section.l-articleInfo .title { font-weight: 300; font-size: 1.5rem; font-family: adobe-garamond-pro, serif; color: #aea291; letter-spacing: 0.02em; margin-left: 0.1%; margin-bottom: 1.7rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleInfo { width: 79%; margin: 0 auto; padding-right: initial; } /* --- l-articleInfo__list --- */ li.l-articleInfo__list { } li.l-articleInfo__list + li:before { content: ""; width: 1.2rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 4.3rem; padding-top: 3.0rem; margin-left: .2rem; } li.l-articleInfo__list .infoTitle { font-size: 1.8rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.05em; margin-top: 0; margin-bottom: 0; } li.l-articleInfo__list span.subTitle { font-size: 1.05rem; font-family: nimbus-sans, sans-serif; font-weight: 300; letter-spacing: 0.03em; display: block; margin-bottom: 0.8rem; } li.l-articleInfo__list .infoTitle + div { margin-top: 2.2rem; } li.l-articleInfo__list div + div { margin-top: 1.9rem; } li.l-articleInfo__list .desc { font-size: 1.3rem; line-height: 2.2; width: 89%; } li.l-articleInfo__list .address { font-size: 1.3rem; font-family:'arial',sans-serif,"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; letter-spacing: 0.03em; } li.l-articleInfo__list .tel { font-size: 1.3rem; font-family:'arial',sans-serif; } li.l-articleInfo__list .mail { font-size: 1.3rem; font-family:'arial',sans-serif; letter-spacing: 0.03em; } li.l-articleInfo__list .url { font-size: 1.25rem; font-family:'arial',sans-serif; } li.l-articleInfo__list .url a { color: #aea291; } /* --------------------------- ■ l-articleRef --------------------------- */ /* --- common --- */ section.l-articleRef { width: 81%; margin: 0 auto; padding-right: 3%; } section.l-articleRef:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 4.4rem; padding-top: 4.2rem; margin-left: .2rem; } section.l-articleRef .title { font-weight: 300; font-size: 1.5rem; font-family: adobe-garamond-pro, serif; color: #aea291; letter-spacing: 0.05em; margin-left: 0.2%; margin-bottom: 1.9rem; } /* --- l-articleRef__list --- */ section.l-articleRef ul { margin-top: 1.3rem; } li.l-articleRef__list { display: inline-block; width: 47%; } li.l-articleRef__list + li { margin-bottom: 2.9rem; } li.l-articleRef__list .bookTitle { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.35rem; letter-spacing: 0.01em; font-weight: 500; margin:0; margin-left: -0.8rem; opacity: 0.9; line-height: 1.8; width: 90%; } li.l-articleRef__list .bookCap { font-size: 1rem; letter-spacing: 0.03em; display: flex; flex-flow: wrap; margin-top: 0.9rem; opacity: 0.5; } li.l-articleRef__list .bookCap dl + dl:before { content:"/"; margin-right: .5rem; margin-left: .5rem; } li.l-articleRef__list .bookCap dl { display: flex; margin-bottom: 0.7rem; } li.l-articleRef__list .bookCap dt span { margin-right: .3rem; margin-left: .3rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleRef { width: 79.4%; padding-right: initial; } article.l-articleStPc section.l-articleRef:before { } article.l-articleStPc .l-articleWrap.only section.l-creditIntro + section.l-articleRef:before { /*border-top: initial; margin-top: initial; padding-top: 0.8rem;*/ } article.l-articleStPc li.l-articleRef__list .bookTitle { font-size: 1.45rem; } article.l-articleStPc li.l-articleRef__list .bookCap { font-size: 1rem; margin-top: 0.8rem; } /* --------------------------- ■ l-category --------------------------- */ /* --- common --- */ section.l-category { width: 81.2%; margin: 0 auto; padding-right: 3%; } section.l-category.onlyArticle { display: none; } section.l-category:before { content: ""; display: block; width: 0.8rem; border-top: 1px solid #dfdfdf; margin-top: 4.5rem; padding-top: 3.6rem; margin-left: 0.4%; } section.l-creditIntro + section.l-category:before { margin-top: 3.6rem; padding-top: 5.3rem; } /* margin */ section.l-articleSeries + section.l-category:before { border-top: 0px; } /* --- l-cat__cont --- */ .l-cat__title { font-weight: 300; font-size: 1.5rem; font-family: adobe-garamond-pro, serif; color: #aea291; letter-spacing: 0.05em; margin-left: 0.2%; margin-bottom: 1.9rem; } .l-cat__cont + .l-cat__cont { margin-top: 4.6rem; } .l-cat__cont ul { display: flex; margin-left: 0; } .l-cat__cont ul li { } .l-cat__cont ul li a { display: inline-block; text-decoration: underline; transition: all ease .5s; } .l-cat__cont ul li a + a { margin-left: 0.4rem; } .l-cat__cont ul li a:hover { } /* --- l-cat__featureList --- */ .l-cat__featureList { font-size: 1.45rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.02em; } .l-cat__featureList a { } .l-cat__featureList + li { margin-left: 0rem; } .l-cat__featureList + li:before { content: ","; margin-right: 0.9rem; } /* --- l-cat__catList --- */ .l-cat__catList { font-size: 1.45rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.05em; text-transform: capitalize; } .l-cat__catList a { } .l-cat__catList + li { margin-left: 0rem; } .l-cat__catList + li:before { content: ","; margin-right: 0.4rem; margin-left: 0.2rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-category { width: 79.4%; padding-right: initial; margin-bottom: 13rem; } article.l-articleStPc .l-cat__featureList { font-size: 1.3rem; } article.l-articleStPc section.l-category:before { border-top: initial; margin-top: 2.1rem; } article.l-articleStPc .l-cat__cont ul li a { } /* --------------------------- ■ l-articleCredit --------------------------- */ /* --- common --- */ section.l-articleCredit { width: 81.9%; margin: 0 auto; padding-right: 3%; } section.l-articleCredit:before { content: ""; display: block; width: 1.2rem; border-top: 1px solid #dfdfdf; margin-top: 5.6rem; padding-top: 4.0rem; margin-left: 0.4%; } section.l-articleCredit ul li + li { margin-top: 6.5rem; } /* --- cont --- */ .l-articleCredit__part { font-size: 1.1rem; font-family: 'arial',sans-serif; letter-spacing: 0.05em; color: #aea291; display: block; margin-bottom: .5rem; margin-left: 0.2%; } .l-articleCredit__part:after { content:":"; } .l-articleCredit__name { font-size: 2.6rem; font-family: minion-pro-display, sans-serif; letter-spacing: 0.035em; margin-top: 1.4rem; } .l-articleCredit__desc { font-size: 1.25rem; line-height: 2.3; letter-spacing: 0; width: 92%; margin-top: 1.6rem; } .l-articleCredit__link { margin-top: 1.6rem; } .l-articleCredit__link a { font-size: 1.4rem; font-family:nimbus-sans, sans-serif; font-weight: 300; letter-spacing: 0.035em; color: #a19585; display: inline-block; position: relative; padding-left: 0rem; } /* --------------------------- ■ l-articleGallery --------------------------- */ /* --- common --- */ section.l-articleGallery { width: 100%; margin: 10.5rem auto 0; background: #f8f8f8; border: 1px solid #efefef; box-sizing: border-box; } /* --- gallery --- */ /* common */ section.l-articleGallery ul { display: flex; flex-wrap: wrap; padding: 7.2rem 7.2rem 7.2rem; } /* list */ section.l-articleGallery ul li { width: calc(20% - 0.3rem); height: 7.5vw; background: #fff; margin-bottom: 0.3rem; padding: 0.8rem; border: 1px solid #f1f1f1; box-sizing: border-box; transition: all ease .35s; } section.l-articleGallery ul li:hover { opacity: .7; } section.l-articleGallery ul li + li { margin-left: .3rem; } section.l-articleGallery ul li:nth-child(5n + 6) { margin-left: 0; } /* image */ section.l-articleGallery ul li figure { height: 100%; width: 100%; } section.l-articleGallery ul li figure img { width: 100%; height: 100%; object-fit: contain; font-family: 'object-fit: cover;'; } /* --------------------------- ■ l-distribute --------------------------- */ /* --- common --- */ section.l-distribute { width: 83%; margin: 0 auto; padding-right: 1%; } section.l-distribute:before { content: ""; width: 1.2rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 5.5rem; padding-top: 4.4rem; margin-left: 0.4%; } section.l-distribute .title { font-weight: 300; font-size: 1.1rem; font-family: 'arial',sans-serif; color: #999999; letter-spacing: 0.02em; margin-left: 0.3%; } dl.l-distList { } dl.l-distList + dl.l-distList { border-top: 1px solid #d3d3d3; } dl.l-distList:last-child { border-bottom: 1px solid #d3d3d3; } dl.l-distList dt { font-size: 2.1rem; font-weight: 600; font-family:minion-pro-display, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; padding-left: .7rem; padding-right: .7rem; padding-top: 2.9rem; padding-bottom: 2.9rem; cursor: pointer; position: relative; } dl.l-distList dt:before { content: ""; position: absolute; display: inline-block; width: 1.1rem; height: .1rem; background-color: #cdb99c; top: 50%; right: 1.2rem; transition: all ease .35s; } dl.l-distList dt:after { content: ""; position: absolute; display: inline-block; width: 1.1rem; height: .1rem; background-color: #cdb99c; top: 50%; right: 1.2rem; transform: rotate(90deg); transition: all ease .25s; } dl.l-distList dt.active:after { transform: rotate(360deg); } dd.japan .l-distPref__cont:nth-child(1) > .l-distPref__list { display: block; } ul.l-distSpot__list { display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 4.5rem .1rem 5.2rem; } ul.l-distSpot__list li { width: 40%; font-size: 1.6rem; font-family:minion-pro-display, sans-serif; letter-spacing: 0.05em; } ul.l-distSpot__list li:before { content:"-"; margin-right: .3rem; margin-left: .2rem; } ul.l-distSpot__list li:nth-child(n + 3) { margin-top: 1.8rem; } ul.l-distSpot__list li a { padding-bottom: .4rem; padding-left: .1rem; padding-right: .2rem; border-bottom: 1px solid rgba(213, 206, 196, 0); transition: all ease .25s; } ul.l-distSpot__list li a:hover { padding-bottom: .6rem; border-bottom: 1px solid rgba(213, 206, 196, 1); } /* --- japan --- */ dl.l-distList dd.japan { border-top: 1px solid #d3d3d3; } .l-distPref__cont { } .l-distPref__cont + .l-distPref__cont { border-top: 1px dotted #d4d4d4; } .l-distPref__title { font-size: 1.7rem; font-family:minion-pro-display, sans-serif; text-transform: uppercase; font-variant: small-caps; letter-spacing: 0.08em; padding:2.6rem 0.7rem ; cursor: pointer; position: relative; } .l-distPref__title:before { position: absolute; content: ""; top: 48%; right: 1.3rem; width: .7rem; height: .7rem; border-top: 1px solid #cdb99c; border-right: 1px solid #cdb99c; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); transition: all ease .25s; } .l-distPref__title.active:before { top: 52%; -webkit-transform: translateY(-50%) rotate(-405deg); transform: translateY(-50%) rotate(-405deg); } .l-distPref__title + .l-distPref__list { border-top: 1px dotted #d4d4d4; } .l-distPref__list { display: none; } /* --- abroad --- */ dl.l-distList dd.abroad { display: none; } dd.abroad .l-distSpot__list { border-top: 1px dotted #d4d4d4; } /* ><><><><><><><><><><><><><><><><> ▼ Article Cont ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-articleCont --------------------------- */ /* --- common --- */ section.l-articleCont { padding-top: 1.6rem; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0.3s; } body.start2 section.l-articleCont { opacity: 1; transform: initial !important; } section.l-creditIntro + section.l-articleCont { padding-top: 2.5rem; } section.l-creditIntro.onlyArticle + section.l-articleCont, section.l-articleCont.onlyArticle { padding-top: 0rem; } section.l-articleCont:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 6.4rem; padding-top: 15.6rem; margin-left: 8.7%; } section.l-articleCont.onlyArticle:before { content:none; } /* margin */ section.l-creditIntro + section.l-articleCont:before { padding-top: 11.5rem; } section.l-articleIntro + section.l-articleCont { margin-top: 12rem; } /* essay */ article.l-articleFeature section.l-articleCont { padding-top: initial; } article.l-articleFeature section.l-articleCont:before { content: none; } /* music */ article.l-articleMusic section.l-articleCont { padding-top: initial; } article.l-articleMusic section.l-articleCont:before { content: none; } /* --- iframe --- */ section.l-articleCont iframe { margin-top: -6.5rem; } section.l-articleCont iframe.music { text-align: center; width: 86% !important; max-width: 700px; margin: 6rem auto 1rem; display: block; } /* --- figure --- */ section.l-articleCont .wp-block-image { display: inline-block; } section.l-articleCont figure { width: 100%; } section.l-articleCont figure img { width: 100%; height: auto; object-fit: cover; object-position: center center; } section.l-articleCont figcaption { font-size: 1.3rem; font-family: nimbus-sans,dnp-shuei-gothic-gin-std, sans-serif; color: #b0b0b0; letter-spacing: 0.02em; margin-top: 1.9rem; margin-left: 0rem; margin-bottom: 0.4rem; } /* art */ section.l-articleCont figure.art { text-align: center; background: #fff; } section.l-articleCont figure.art img { width: 68%; padding-top: 13rem; padding-bottom: 13rem; } article.l-articleStPc section.l-articleCont figure.art figcaption { margin-top: -7.7rem; padding-bottom: 6.4rem; } /* ver */ section.l-articleCont figure.ver { text-align: center; background: #f8f8f8; padding-top: 12rem; padding-bottom: 12rem; border: 1px solid #eaeaea; box-sizing: border-box; } section.l-articleCont figure.ver img { width: 65%; box-sizing: border-box; padding: 0.4rem; background: #fff; } section.l-articleCont figure.ver figcaption { padding-top: 4.3rem; margin-bottom: -4.5rem; } /* margin */ section.l-articleCont p + .wp-block-image { margin-top: 10.8rem; } /* codoc */ .codoc-entry-body-after figure img { opacity: 1; transition: all ease .5s; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleCont figure { width: 102%; margin: 0 auto; display: block; } article.l-articleStPc section.l-articleCont figure img { border: 0.7rem solid #fff; } /* ver */ article.l-articleStPc section.l-articleCont figure.ver { background: #ffffff; } /* margin */ article.l-articleStPc section.l-articleCont p + .wp-block-image { margin-top: 11.2rem; } article.l-articleStPc section.l-articleCont figcaption { font-size: 1.2rem; color: #8f8f8f; margin-top: 1rem; margin-left: 0.8rem; } /* --- gallery --- */ .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { margin-bottom: 5.4rem; } .wp-block-gallery figcaption { position: absolute; bottom: -3.1rem !important; width: 100% !important; max-height: 100% !important; overflow: auto !important; padding: initial !important; color: #a2a2a2 !important; text-align: left !important; font-size: 1.25rem !important; background: initial !important; box-sizing: border-box !important; margin: 0 !important; } /* --- h1 --- */ section.l-articleCont h1 { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; width: 82%; margin:0 auto; padding-right: 1%; line-height: 1.5; } section.l-articleCont h1:before { font-size: 1.5rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 300; margin-left: 0.4rem; margin-right: 0.7rem; } section.l-articleCont h1:nth-of-type(1):before { content:"1."; } section.l-articleCont h1:nth-of-type(2):before { content:"2."; } section.l-articleCont h1:nth-of-type(3):before { content:"3."; } section.l-articleCont h1:nth-of-type(4):before { content:"4."; } section.l-articleCont h1:nth-of-type(5):before { content:"5."; } section.l-articleCont h1:nth-of-type(6):before { content:"6."; } /* margin */ section.l-articleCont .wp-block-image + h1 { margin-top: 8rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleCont h1 { font-size: 1.5rem; padding-right: initial; width: 79.2%; } /* margin */ article.l-articleStPc section.l-articleCont h1:before { font-size: 1.65rem; margin-right: 1.2rem; } article.l-articleStPc section.l-articleCont .wp-block-image + h1 { margin-top: 11rem; } /* --- h2 --- */ section.l-articleCont h2 { font-size: 2.8rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.03em; width: 82%; margin:0 auto; padding-right: 1%; line-height: 1.7; } /* music */ article.l-articleMusic section.l-articleCont h2 { font-size: 2.5rem; width: 85%; } article.l-articleMusic section.l-articleCont h2 + p:before { margin-top: 1.8rem; padding-top: 2.4rem; } /* margin */ section.l-articleCont h1 + h2:before { content: ""; width: 1.2rem; display: block; padding-top: 1.8rem; margin-left: .2rem; } section.l-articleCont p + h2 { margin-top: 3.8em; } figure.wp-block-image + h2 { margin-top: 9rem; } /* only */ section.l-articleCont.onlyArticle h2:nth-child(1) { padding-top: 0.8rem; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleCont h2 { width: 79.2%; font-size: 2.75rem; padding-right: initial; line-height: 1.75; } /* margin */ article.l-articleStPc section.l-articleCont h1 + h2:before { padding-top: 1.8rem; } article.l-articleStPc figure.wp-block-image + h2 { margin-top: 11rem; } /* --- h3 --- */ section.l-articleCont h3 { font-size: 2.8rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.03em; width: 85%; margin:0 auto; padding-right: 2%; line-height: 1.7; } /* --- h4 --- */ section.l-articleCont h4 { font-size: 1.2rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.05em; width: 82%; margin: 0 auto; margin-top: 1.2rem; padding-right: 1%; line-height: 1.7; } /* --- separator --- */ section.l-articleCont .wp-block-separator { border: 0.5px dotted #dcdcdc; width: 83%; margin: 5.9rem auto; } /* --- p --- */ section.l-articleCont p { font-size: 1.5rem; line-height: 2.45; letter-spacing: 0.05em; width: 77%; margin:0 auto; padding-right: 6%; } section.l-articleCont p a { font-size: 100%; color: #65553f; text-decoration: underline; } section.l-articleCont p br.pc { display: none; } /* essay */ article.l-articleFeature section.l-articleCont p { width: 80%; } article.l-articleMusic section.l-articleCont p { width: 80%; font-size: 1.4rem; line-height: 2.3; } /* margin */ section.l-articleCont h1 + p:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 2.3rem; padding-top: 2.1rem; margin-left: .2rem; } section.l-articleCont h2 + p:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 1.9rem; padding-top: 2.5rem; margin-left: .2rem; } section.l-articleCont h4 + p:before { content: ""; width: 0.8rem; border-top: 1px solid #dfdfdf; display: block; margin-top: 2.5rem; padding-top: 2.8rem; margin-left: .2rem; } section.l-articleCont .wp-block-image + p { margin-top: 9.5rem; } section.l-articleCont p + p { margin-top: 2.6em; } section.l-articleCont .wp-block-verse + p { margin-top: 4.9em; } /* --- wp-block-verse --- */ section.l-articleCont .wp-block-verse { background: #f9f9f9; padding: 8.7rem; width: calc(96% - 18rem); margin: 6.6rem auto 0; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.55rem; line-height: 2.5; font-weight: 400; letter-spacing: 0.05em; } /* ======== for Story ======== */ article.l-articleStPc section.l-articleCont p { font-size: 1.6rem; line-height: 2.6; width: 79%; margin: 0 auto; padding-right: initial; } /* margin */ article.l-articleStPc section.l-articleCont .wp-block-image + p { margin-top: 11rem; } article.l-articleStPc section.l-articleCont p + p { margin-top: 2.6em; } /* --- h6 --- */ section.l-articleCont h6 { font-size: 1.2rem; letter-spacing: 0.05em; width: 81%; margin: 0 auto; margin-top: 2.8rem; padding-right: initial; } section.l-articleCont h6 a { text-decoration: underline; } /* ><><><><><><><><><><><><><><><><> ▼ Article Dev ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-article__container --------------------------- */ /* --- common --- */ .l-article__container { display: flex; width: 98.1%; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } article.l-articleFeature .l-article__container { margin: 11.8rem auto 11rem; } article.l-articlePage .l-article__container { margin:0 auto 10rem; padding-top: 9.5rem; } article.l-articleMusic .l-article__container { margin: 10.6rem auto 0; width: 97%; } article.l-articleLogin .l-article__container { justify-content: center; text-align: center; padding-top: 27.9rem; } article.l-articleFeature.l-articleSubscribe .l-article__container { margin: 0rem auto 1rem; padding-top: 15.2rem; padding-bottom: 8rem; } .l-article__container + .l-article__container { background: #f9f9f9; } div#plan { margin-top: 6.5rem; } div#plan:before { content: ""; width: 98%; margin: 0 auto; border-top: 1px solid #eeeeee; padding-top: 14.6rem; } .l-article__container:after { content: ""; display: block; border-bottom: 1px solid #f7f5f5; width: 95.8%; margin: 0 auto; margin-top: 10.9rem; } .l-articlePage .l-article__container:after { content:none; } .l-article__contLeft { width: 50%; } .l-article__contRight { width: 50%; margin-left: 0%; } .l-article__contRight > .inner { width: 96%; margin: 0 auto 7rem; } /* commercial */ article.l-articlePage.commercial .l-article__container { padding-top: 11.3rem; } /* subsc */ .l-article__container.subsc .l-article__contRight > .inner { margin: 0 auto 5rem; } /* outline */ article.l-articleFeature.l-articleOutline .l-article__container{ margin: 12.4rem auto 1.5rem; } /* --- title --- */ section.l-article__horizonTitle { padding-top: 5.3rem; text-align: center; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 section.l-article__horizonTitle { opacity: 1; transform: translateY(0); } section.l-article__horizonTitle .l-article__title { } /* sizing */ article.l-articleStPc .l-article__title.little > .inner { font-size: 98%; } section.l-article__horizonTitle .l-article__title.middle > .inner { font-size: 108%; } section.l-article__horizonTitle .l-article__title.big > .inner { font-size: 111%; } /* for About */ /* mv */ figure.mvFade {} /* list */ ul.l-articlePage__list { margin-top: 1.3rem; margin-left: -1.2rem; } ul.l-articlePage__list li { width: 107%; margin-bottom: 3.6rem; padding-bottom: 3.6rem; border-bottom: 1px solid #f0f0f0; } ul.l-articlePage__list li a { display: flex; align-items: center; position: relative; } ul.l-articlePage__list li a:before { content: "»"; font-size: 1.8rem; color: #998675; padding-right: 1.3rem; padding-left: 0.4rem; background-color: #fff; } ul.l-articlePage__list li span { display: block; } ul.l-articlePage__list li .eng { font-size: 2.6rem; font-family: minion-pro-display,"Hiragino Mincho ProN", "MS PMincho", serif; letter-spacing: 0.05em; font-weight: 500; background-color: #fff; padding-right: 1.5rem; } ul.l-articlePage__list li .jpn { font-size: 1.4rem; letter-spacing: 0.075em; font-family: 'adobe-garamond-pro','yu-mincho-pr6n', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; color: #4D4D4D; margin-left: auto; background-color: #fff; padding-left: 1.5rem; padding-right: 0.2rem; } /* for Feature */ section.l-article__featureTitle .l-article__title { font-size: 2.95rem; font-weight: 400; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; line-height: 1.625; letter-spacing: 0.075em; margin-top: 0.1rem; margin-left: 0rem; overflow: hidden; opacity: 1 !important; } section.l-article__featureTitle .l-article__title + nav.l-archiveHead__nav { margin-top: 2.8rem; } section.l-article__featureTitle .l-article__title br { display: block; } /* Medium */ article.l-articleStPc section.l-article__featureTitle .l-article__title .med { font-size: 107%; letter-spacing: 0.095em; } /* big */ section.l-article__featureTitle .l-article__title.big span { font-size: 118%; letter-spacing: 0.2em; } /* for Essay */ article.l-articleEssay section.l-article__featureTitle .l-article__title { font-size: 3.55rem; } /* Archvie */ .l-archiveFeature.paged section.l-article__featureTitle .l-article__title { font-size: 3.8rem; } /* Pre */ section.l-article__featureTitle .l-article__title .inner { opacity: 0; transform: translateY(70%); transition: .95s all cubic-bezier(.275,0,0,1); } /* Start */ body.start2 section.l-article__featureTitle .l-article__title .inner { opacity: 1; transform: translateY(0); } /* for Music */ section.l-article__musicTitle .l-article__title { font-size: 5.6rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.04em; margin-top: -0.4rem; line-height: 1.1; opacity: 1; overflow: hidden; padding-top: 0; } section.l-article__musicTitle .l-article__title.jpn { font-size: 3.6rem; padding-top: 2.3rem; } /* sizing */ section.l-article__musicTitle .l-article__title.little .inner { font-size: 77%; margin-top: 0.1rem; } section.l-article__musicTitle .l-article__title.middle .inner { font-size: 89%; margin-top: 0.3rem; } section.l-article__musicTitle .l-article__title.big .inner { font-size: 105%; } /* Pre */ section.l-article__musicTitle .l-article__title .inner { opacity: 0; transform: translateY(50%); transition: .95s all cubic-bezier(.275,0,0,1); } /* Start */ body.start2 section.l-article__musicTitle .l-article__title .inner { opacity: 1; transform: translateY(0); } /* ======== for Story ======== */ /* --- common --- */ article.l-articleStPc .c-listCatDate { margin-left: 6%; left: initial; } article.l-articleStPc .l-article__horizonWrap { display: flex; position: sticky; top: -4.5rem; width: 98.1%; margin: 0 auto; transition: all ease 1s; } article.l-articleStPc section.l-article__horizonTitle { width: 50%; text-align: left; display: flex; align-items: center; height: calc(100vh - 29.5vh); max-height: calc(100vh - 25rem); padding-top: 0; } article.l-articleStPc section.l-article__horizonTitle > .inner { width: 80.3%; margin-left: 19%; margin-top: -2.3vw; } article.l-articleStPc .l-article__horizonSub { font-size: 1.4rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.065em; color: #b3a38e; display: block; font-weight: 300; margin-top: 0.8rem; margin-left: 0.2rem; opacity: 0; transform: translateY(70%); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 article.l-articleStPc .l-article__horizonSub { opacity: 1; transform: translateY(0); } article.l-articleStPc .l-article__horizonSub br { display: none; } article.l-articleStPc section.l-article__horizonTitle .l-article__title { width: 77%; font-size: 3.15rem; letter-spacing: 0.05em; line-height: 1.7; } /* scroll */ body.membNavAdjust article.l-articleStPc .l-article__horizonWrap { opacity: 0; } /* feature */ .l-article__chapter.feature { letter-spacing: 0.1em; } /* sp */ .l-article__chapterPc { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.16em; margin-bottom: 1.5rem; margin-left: 0.3rem; display: block; } .l-article__chapterPc .subNum { margin-left: 0.6rem; font-size: 115%; } .l-article__chapter { font-size: 1.5rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.45em; margin-top: 5.2rem; margin-bottom: 0rem; padding: 1.6rem 1.6rem 1.8rem 2rem; display: inline-block; border-top: 1px solid #7a7a7a; border-bottom: 1px solid #7a7a7a; display: none; } /* edition */ .l-article__chapterPc.edition { font-size: 1.05rem; letter-spacing: 0.25em; text-transform: uppercase; } .l-article__chapterPc .editionNum { font-size: 160%; font-variant: small-caps; letter-spacing: 0.0em; margin-left: 0.6rem; } /* music */ article.l-articleMusic .l-article__chapter { font-size: 1.4rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.1em; color: #393939; display: inline-block; margin-top: 4.9rem; padding: 2.8rem 1.6rem 2.8rem 1.7rem; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } /* for Nava */ article.l-articleStPc section.l-article__horizonTitle .l-article__title span.nava { font-size: 0; display: flex; align-items: center; margin-bottom: -3.9rem; margin-top: 0.8rem; } article.l-articleStPc section.l-article__horizonTitle .l-article__title span.navaSub { display: none; } article.l-articleStPc section.l-article__horizonTitle .l-article__title span.nava:before { content: ""; background-image: url(../../assets/img/common/nava.svg); width: 14.6rem; height: 6.9rem; display: inline-block; background-size: cover; } article.l-articleStPc section.l-article__horizonTitle .l-article__title span.nava:after { content: "ナヴァ"; font-size: 1.7rem; margin-top: 1rem; margin-left: 1.8rem; display: inline-block; } /* --- catDate --- */ section.l-article__horizonTitle .c-listCatDate { justify-content: center; margin-top: 3rem; opacity: 0; transform: translateY(1vw); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 section.l-article__horizonTitle .c-listCatDate { opacity: 1; transform: translateY(0); } section.l-article__horizonTitle .c-listDate { font-size: 1.55rem; } section.l-article__horizonTitle .c-listCat a { font-size: 1.6rem; border: 0; padding: initial; } section.l-article__horizonTitle .c-listCat a:after { content: ""; width: 103%; left: -5%; bottom: -0.4rem; height: 1px; position: absolute; display: block; background-color: #f0e8d8; } section.l-article__horizonTitle .c-listCat span + span { margin-left: -0.1rem; } section.l-article__horizonTitle .c-listCat span + span:before { content:","; color: #af9f8a; margin-right: .4rem; margin-left: 0rem; } /* for Philosophy */ section.l-articlePageIntro { width: 80%; margin-left: 5.2rem; padding-bottom: 5rem; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0.3s; } body.start2 section.l-articlePageIntro { opacity: 1; transform: translateY(0rem); } .l-articlePageIntro__title { font-size: 2.85rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.75; letter-spacing: 0.035em; margin-top: 0.1rem; } .l-articlePageIntro__title + .l-articlePageIntroCont { margin-top: 1.7rem; } .l-articlePageIntro__title + .l-articlePageIntro__desc:before { content: ""; width: 1.6rem; display: block; border-top: 1px solid #ccc; margin-top: 2rem; padding-top: 2.6rem; } p.l-articlePageIntro__desc { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.5rem; line-height: 2.45; letter-spacing: 0.04em; } p.l-articlePageIntro__desc a { color: #908069; text-decoration: underline; } .l-articlePageIntro__sign { margin-top: 3.5rem; margin-left: -.4rem; } .l-articlePageIntro__sign img { width: 30.2rem; } /* for Join us */ /* l-articlePageIntro__btn */ .l-articlePageIntro__btn { border-radius: 6rem; max-width: 103%; margin-left: -1.5%; } .l-articlePageIntro__btn a { font-size: 1.4rem; font-weight: 300; letter-spacing: 0.035em; display: inline-block; font-weight: 500; width: 100%; height: 100%; text-align: center; padding: 2.2rem 0 1.7rem; border-radius: 6rem; background-color: #444444; color: #fff; transition: all ease .35s; position: relative; } .l-articlePageIntro__btn a:before { position: absolute; content: ""; top: 47%; right: 3.6rem; width: 0.6rem; height: 0.6rem; border-top: 1px solid #d4b890; border-right: 1px solid #d4b890; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); z-index: 0; } .l-articlePageIntro__btn a:hover { background: #000; } .l-articlePageIntro__desc + .l-articlePageIntro__btn { margin-top: 4.2rem; } .l-articleAccord_sect + .l-articlePageIntro__btn { margin-top: 4.2rem; } /* for Join */ .l-articlePageIntro__btn.join a:before { top: 49%; right: 3.4rem; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(45deg); } /* for Siteinfo */ .l-articlePageIntro__btn.outline a { font-family: adobe-garamond-pro,sans-serif; font-size: 1.55rem; letter-spacing: 0.085em; padding: 3.5rem 0 3rem; } .l-articlePageIntro__btn.outline a:before { top: 49%; right: 3.4rem; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(45deg); } /* l-articleAccord dt */ .l-articleAccord { margin-top: 7.8rem; } .l-articleAccord dt { border-top: 1px dotted #dbdbdb; border-bottom: 1px dotted #dbdbdb; padding-top: 4.4rem; padding-bottom: 3.8rem; position: relative; } .l-articleAccord dt:before { position: absolute; content: none; top: 43%; right: 1.8rem; width: .6rem; height: .6rem; border-top: 2px solid #cdb99c; border-right: 2px solid #cdb99c; -webkit-transform: rotate(135deg); transform: rotate(135deg); z-index: 0; transition: all ease .25s; } .l-articleAccord dt.active:before { transform: rotate(-45deg); top: 47%; } .l-articleAccord_title { display: flex; align-items: center; } .l-articleAccord_title span.jpn { font-size: 1.85rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 300; line-height: 1.95; letter-spacing: 0.04em; padding-left: 0.4rem; } .l-articleAccord_title span.eng { font-size: 1.2rem; font-weight: 300; font-family: adobe-garamond-pro,sans-serif; letter-spacing: 0.04em; color: #aea291; margin-left: 2.6rem; margin-top: -0.2rem; } /* l-articleAccord dd */ .l-articleAccord dd { } .l-articleAccord_sect:first-child { margin-top: 6.3rem; } .l-articleAccord_sect + .l-articleAccord_sect:before { content:""; display: block; width: 1rem; height: 1px; margin-left: 0.1rem; background-color: #dadada; margin-top: 3.3rem; margin-bottom: 3.4rem; } .l-articleAccord_sectTitle { display: flex; align-items: center; } .l-articleAccord_sectTitle span:nth-child(1) { font-size: 2.4rem; font-family: minion-pro-display,serif; letter-spacing: 0.15em; font-weight: 600; } .l-articleAccord_sectTitle span:nth-child(2) { font-size: 1rem; font-weight: 300; margin-left: 2rem; margin-top: 0rem; } .l-articleAccord_cont { margin-top: 3.4rem; } .l-articleAccord_sectSub { font-size: 1.35rem; font-family: 'Zen Old Mincho', sans-serif; letter-spacing: 0.03em; margin-bottom: 1.1rem; } .l-articleAccord_cont p { font-size: 1.35rem; line-height: 2.35; } /* ><><><><><><><><><><><><><><><><> ▼ Preoder ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ body.preorder { background-color: #776B6B; } body.preorder article { color: #fff; } body.preorder footer.l-footer { padding-bottom: initial; background-color: #776B6B; } body.preorder footer.l-footer > .inner { background-color: #776B6B; } /* --- header --- */ /* l-header__nav */ body.preorder .l-header__nav ul li > a { color: #fff; } /* drawer-active */ body.preorder.drawer-active .l-header__nav ul li > a, body.preorder header.search-open .l-header__nav ul li > a { color: #000; } body.preorder.drawer-active .l-fixedMenu .l-header__nav ul li > a, body.preorder .l-fixedMenu.search-open .l-header__nav ul li > a { color: #000; } /* title */ body.preorder header { background-color: transparent; } body.preorder header .l-header__title img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); } body.preorder header.active { z-index: 1; } body.preorder.retreatArc header { position: relative; } /* drawer-active */ body.preorder.drawer-active header, body.preorder header.search-open { background-color: #fff; } body.preorder.drawer-active header .l-header__title img, body.preorder header.search-open .l-header__title img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__search */ body.preorder .l-header__search img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.preorder.drawer-active header .l-header__search img, body.preorder header.search-open .l-header__search img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__account */ body.preorder .l-header__account img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.preorder.drawer-active header .l-header__account img, body.preorder header.search-open .l-header__account img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-humbBtn */ body.preorder header .l-humbBtn span { background-color: #fff; } /* drawer-active */ body.preorder.drawer-active header .l-humbBtn span, body.preorder header.search-open .l-humbBtn span { background-color: #000; } /* --- fixedMenu --- */ body.preorder .l-fixedMenu { background-color: transparent; } /* title */ body.preorder .l-fixedMenu .l-header__title img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); } /* drawer-active */ body.preorder.drawer-active .l-fixedMenu, body.preorder .l-fixedMenu.search-open { background-color: #fff; } body.preorder.drawer-active .l-fixedMenu .l-header__title img, body.preorder .l-fixedMenu.search-open .l-header__title img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__search */ body.preorder .l-fixedMenu .l-header__search img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.preorder.drawer-active .l-fixedMenu .l-header__search img, body.preorder .l-fixedMenu.search-open .l-header__search img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__account */ body.preorder .l-fixedMenu .l-header__account img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.preorder.drawer-active .l-fixedMenu .l-header__account img, body.preorder .l-fixedMenu.search-open .l-header__account img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-humbBtn */ body.preorder .l-fixedMenu .l-humbBtn span { background-color: #fff; } /* drawer-active */ body.preorder.drawer-active .l-fixedMenu .l-humbBtn span, body.preorder .l-fixedMenu.search-open .l-humbBtn span { background-color: #000; } /* ><><><><><><><><><><><><><><><><> ▼ Article Magazine ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Navigation --------------------------- */ /* --- l-magazine__scroll --- */ .l-magazine__scroll { position: fixed; width: 7.2rem; height: 7.2rem; background-color: #fff; border-radius: 100%; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.175); bottom: 3.3rem; left: 3.3%; z-index: 1; transition: all ease .25s; } .l-magazine__scroll:before { content: ""; background-image: url(../../assets/img/common/arrowFilter.svg); display: block; position: absolute; opacity: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: cover; background-position: center center; width: 1.3rem; height: 1.05rem; transition: all .25s ease; transition-delay: 0s; } .l-magazine__scroll:after { content: ""; background-image: url(../../assets/img/common/arrowFilter.svg); display: block; position: absolute; opacity: 1; top: 47%; left: 50%; transform: translate(-50%, -50%); background-size: cover; background-position: center center; width: 1.1rem; height: 0.85rem; transition: all .25s ease; transition-delay: 0.25s; opacity: 0; } .l-magazine__scroll a { display: block; width: 100%; height: 100%; } /* hover */ .l-magazine__scroll:hover { background-color: #3E3333; } .l-magazine__scroll:hover:after { top:50%; opacity: 1; } .l-magazine__scroll:hover:before { top:53%; opacity: 0; } /* scroll */ .l-magazine__scroll.hidden { opacity: 0 !important; bottom:2.5rem; } /* --- l-magazine__nav --- */ .l-magazine__nav { position: fixed; background-color: #fff; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.2); z-index: 1; backdrop-filter: blur(1px); left: 50%; transform: translateX(-50%); bottom: 2.4rem; display: flex; border-radius: 3rem; padding: 0.5rem; opacity: 0; transition: 0.25s all ease; } .l-magazine__nav .list { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.35rem; letter-spacing: 0.04em; font-weight: 500; display: flex; padding: 1.2rem 3.9rem 0.7rem; } .l-magazine__nav .list li { display: flex; align-items: center; position: relative; } .l-magazine__nav .list li + li:before { content:"・"; margin-left: 0.9rem; margin-right: 0.8rem; margin-top: -0.4rem; } /* current */ .l-magazine__nav .list li.current span { text-decoration: underline; } /* active */ body.start3 .l-magazine__nav { opacity: 1; bottom: 3.4rem; } body.start3.magDisplay .l-magazine__nav { opacity: 0; bottom: 2.4rem; } /* btn */ .l-magazine__nav .btn { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.3rem; letter-spacing: 0.08em; background-color: #3E3333; border-radius: 3rem; margin-left: -1.2rem; } .l-magazine__nav .btn a { color:#fff; display: block; padding: 1.3rem 3.4rem 0.9rem; } /* --- l-magazine__menu --- */ .l-magazine__menu { position: fixed; font-family: adobe-garamond-pro,serif; font-size: 1.3rem; letter-spacing: 0.3em; padding: 1rem 2rem 0.8rem; background-color: #fff; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.15); z-index: 1; bottom: 4.1rem; right: 5.1%; display: flex; align-items: center; border-radius: 3rem; cursor: pointer; color: #000; transition: all ease .25s; } /* active */ .l-magazine__menu:hover { background-color: #3E3333; color: #fff; } body.menuActive .l-magazine__menu { background-color: #3E3333; color: #fff; } /* scroll */ body.start2.magDisplay .l-magazine__menu { opacity: 0; bottom: 3.1rem; } /* cross */ .l-magazine__menu .cross { height: .5rem; width: 1.5rem; position: relative; margin-right: 1.1rem; } .l-magazine__menu .cross:before, .l-magazine__menu .cross:after { content:""; position: absolute; width: 100%; height: 1px; background-color: #000; transition: all ease .25s; } .l-magazine__menu .cross:before { top:0; } .l-magazine__menu .cross:after { bottom:0; } /* active */ .l-magazine__menu:hover .cross:before, .l-magazine__menu:hover .cross:after { background-color: #fff; } body.menuActive .l-magazine__menu .cross:before, body.menuActive .l-magazine__menu .cross:after { background-color: #fff; } /* eng */ .l-magazine__menu .eng .hoverTxt { display: block; } /* --------------------------- ■ l-magazine__menuCont --------------------------- */ /* --- common --- */ .l-magazine__menuCont { background-color: #fff; border-radius: 0.3rem; position: fixed; z-index: 2; right: 2.4rem; bottom: 10rem; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.175); opacity: 0; visibility: hidden; transition: all ease .25s; } .l-magazine__menuCont > .inner { padding: 4.8rem 7.9rem 4.3rem 5.8rem; } /* active */ body.menuActive .l-magazine__menuCont { opacity: 1; visibility: visible; bottom: 10.6rem; } /* --- list --- */ .l-magazine__menuCont li { font-size: 1.45rem; font-family: adobe-garamond-pro,serif; letter-spacing: 0.285em; text-transform: uppercase; } .l-magazine__menuCont li + li { margin-top: 1.9rem; } /* --------------------------- ■ l-magazine__mv --------------------------- */ /* --- common --- */ .l-magazine__mv { width: 100%; padding-top: 3.3rem; height: calc(100vh - 37.2rem); max-height: 34vw; padding-bottom: 9rem; } .l-magazine__mv > .inner { display: flex; align-items: start; margin:0 auto; height: 100%; width: 88%; } .l-magazine__mv .left { width: 36.5%; height: 100%; display: flex; align-items: center; } .l-magazine__mv .middle { width: 27%; height: 100%; } .l-magazine__mv .right { width: 36.5%; } /* --- left --- */ /* l-magazine__info */ .l-magazine__info { margin-left: 4.5rem; margin-top: -2.1rem; } .l-magazine__info .top { font-size: 1.75rem; font-family: minion-pro-display,serif; letter-spacing: 0.22em; font-weight: 600; padding-left: 0.5rem; } .l-magazine__info .num { font-size: 154%; color: #a2967e; font-weight: 400; letter-spacing: 0.03em; font-variant: small-caps; margin-left: 0.3rem; } .l-magazine__info .bottom { font-size: 1.35rem; font-family: adobe-garamond-pro,serif; letter-spacing: 0.05em; color: #848484; border-top: 1px solid rgba(0,0,0,0.075); padding-left: 0.3rem; padding-top: 2rem; margin-top: 1.4rem; } /* preorder */ body.preorder .l-magazine__info .num { color: #fff; } body.preorder .l-magazine__info .bottom { color: #fff; border-top: 1px solid rgba(255,255,255,0.2); opacity: 0.6; } /* --- l-magazine__thumb --- */ .l-magazine__thumb { width: 100%; height: 100%; } .l-magazine__thumb figure { height: 100%; width: 100%; overflow: hidden; position: relative; } .l-magazine__thumb figure:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #fff; display: block; z-index: 1; transition: 1.6s all cubic-bezier(0.275, 0, 0, 1); } body.preorder .l-magazine__thumb figure:before { background-color: #776B6B; } .l-magazine__thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transform: scale(1.15); transition: 1.6s all cubic-bezier(.275, 0, 0, 1); } /* active */ body.start2 .l-magazine__thumb figure img { transform: scale(1); } body.start2 .l-magazine__thumb figure:before { height: 0%; } /* --- right --- */ .l-magazine__mv .right { writing-mode: vertical-rl; margin-top: 1.2rem; } .l-magazine__title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 2.8rem; font-weight: 500; font-variant: initial; margin: 0; letter-spacing: 0.14em; } .l-magazine__sub { margin-right: 1.4rem; } .l-magazine__desc { font-size: 1.1rem; letter-spacing: 0.04em; font-family: adobe-garamond-pro, sans-serif; height: 24rem; line-height: 1.7; opacity: 0.3; } .l-magazine__desc:before { content:""; display: block; height: 3rem; border-right: 1px solid rgba(0,0,0,0.2); margin-right: 2.5rem; padding-right: 2.5rem; } /* ver */ .l-magazine__sub .hor { display: none; } /* preorder */ body.preorder .l-magazine__title:after { content: "【予約購入のご案内】"; display: block; font-size: 51%; letter-spacing: 0.25em; margin-right: 1.2rem; margin-top: -0.7rem; margin-left: 2.7rem; } body.preorder .l-magazine__desc:before { border-right: 1px solid rgba(255,255,255,0.2); } body.preorder .l-magazine__sub img { filter: invert(96%) sepia(96%) saturate(17%) hue-rotate(236deg) brightness(104%) contrast(104%); } /* --------------------------- ■ l-magazine__intro --------------------------- */ /* --- common --- */ .l-magazine__intro { margin-top: 15rem; position: relative; width: 100%; padding-bottom: 50rem; } /* --- txt --- */ .l-magazine__intro .txt { width: 50%; margin:0 auto; } .l-magazine__intro .txt p { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.55rem; letter-spacing: 0.065em; line-height: 2.9; } .l-magazine__intro .txt p + p { margin-top: 2.5em; } /* --- photo --- */ .l-magazine__intro .photo figure { height: 100%; width: 100%; } .l-magazine__intro .photo figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } .l-magazine__intro .photo .image { position: absolute; } .l-magazine__intro .photo .one { width: 32rem; height: 42rem; top:0; right: 0; } .l-magazine__intro .photo .two { width: 27rem; height: 37rem; left: -8rem; bottom: 24rem; } .l-magazine__intro .photo .three { width: 25rem; height: 35rem; right: 28rem; bottom:0; } /* --------------------------- ■ l-magazine__contents --------------------------- */ /* --- common --- */ section.l-magazine__contents { width: 100%; padding-top: 15rem; margin-top: 19rem; margin-bottom: 3rem; position: relative; } section.l-magazine__contents:before { content:""; position: absolute; border-top: 1px dotted rgba(0, 0, 0, 0.1); width: 93%; top:0; left: 50%; transform: translateX(-50%); } section.l-magazine__contents > .inner { display: flex; width: 94%; margin:0 auto; } section.l-magazine__contents .left { width: 37.5%; margin-left: 6%; } section.l-magazine__contents .right { width: 55%; margin-top: 0.7rem; } /* --- more --- */ section.l-magazine__contents .more { font-family: adobe-garamond-pro,serif; font-size: 1.6rem; letter-spacing: 0.05em; margin-top: 6rem; } /* --- left --- */ /* wrap */ section.l-magazine__contents .wrap { position: sticky; top: 16.7rem; } /* title */ section.l-magazine__contents .title { font-family: minion-pro-display, serif; font-size: 5.8rem; letter-spacing: 0.145em; text-transform: uppercase; } /* info */ section.l-magazine__contents .info { margin-top: 6.4rem; width: 80%; margin-left: 0.3rem; } section.l-magazine__contents .info li { width: 33%; display: inline-block; margin-bottom: 4rem; } section.l-magazine__contents .sub { font-family: minion-pro-display, serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.16em; } section.l-magazine__contents .cont { font-family: adobe-garamond-pro,serif; color: #867E69; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.03em; margin-top: 1.1rem; } /* --- right --- */ /* common */ section.l-magazine__contSect + section.l-magazine__contSect { margin-top: 10rem; } li.l-magazine__contList { position: relative; } li.l-magazine__contList + li:before { content:""; position: absolute; display: block; width: 104%; left: -2%; border-top: 1px dotted rgba(0,0,0,0.1); } li.l-magazine__contList:last-child:after { content:""; position: absolute; display: block; width: 104%; left: -2%; border-bottom: 1px dotted rgba(0,0,0,0.1); } /* title */ .l-magazine__contTitle { display: flex; align-items: center; margin-top: 2rem; margin-bottom: 0.5rem; margin-left: 0.5rem; } .l-magazine__contTitle .eng { font-family: minion-pro-display, serif; font-size: 1.45rem; letter-spacing: 0.43em; text-transform: uppercase; } .l-magazine__contTitle .jpn { font-size: 1.2rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.12em; padding-left: 1.6rem; margin-left: 1.2rem; margin-top: -0.3rem; position: relative; } .l-magazine__contTitle .jpn:before { content:""; display: inline-block; border-left: 1px solid rgba(0,0,0,0.1); height: 1.2rem; position: absolute; left: 0; top: 56%; transform: translateY(-50%); } /* triger */ li.l-magazine__contList .triger { padding-top: 5.5rem; padding-bottom: 5.5rem; cursor: pointer; position: relative; } li.l-magazine__contList .jpn { font-size: 1.75rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.11em; transition: all ease .25s; } li.l-magazine__contList .eng { font-family: adobe-garamond-pro,serif; color: #867E69; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.035em; margin-top: 1.3rem; margin-left: 0.1rem; transition: all ease .25s; } /* cross */ li.l-magazine__contList .cross { position: absolute; right: 0; width: 1.3rem; height: 1.3rem; top:53%; transform: translateY(-50%); } li.l-magazine__contList .cross span { position: absolute; display: block; height: 1px; width: 100%; background-color: #000; transition: all ease .35s; } li.l-magazine__contList .cross span:nth-child(2) { transform: rotate(90deg); } li.l-magazine__contList .triger.active .cross span:nth-child(2) { transform: rotate(180deg); } /* hover */ li.l-magazine__contList .triger:after { content:""; position: absolute; width: 116%; height: 100%; left: -8%; top:0; z-index: -1; transition: all ease .25s; } li.l-magazine__contList .triger:hover:after { content:""; position: absolute; background-color: #f4f4f4; } li.l-magazine__contList .triger.active:after { background-color: #fff; } /* cont */ li.l-magazine__contList .cont { padding-bottom: 6rem; margin-left:-1rem; display: none; margin-top: 0px; color: #2c2c2c; } li.l-magazine__contList .desc { font-size: 1.3rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; line-height: 2.6; letter-spacing: 0.05em; width: 63%; margin-left: 0.8rem; margin-top: 0; } /* gallery */ .magGallery { margin-top: 7.2rem; margin-left:0; width: 111%; /* opacity: 0; */ transition: all ease 0.5s; /* transition-delay: 0s; */ } .magGallery .slick-list { padding-right: 7rem; cursor: grab; } .magGallery li { height: 29vw; } .magGallery .slick-slide + .slick-slide { margin-left: 0.4rem; } .magGallery li figure { height: 100%; } .magGallery li figure img { height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } .cont.active .magGallery { /* opacity: 1; */ /* transition-delay: 0.5s; */ } /* --------------------------- ■ l-magazine__gallery --------------------------- */ /* --- common --- */ section.l-magazine__gallery { width: 102%; padding-top: 13rem; padding-bottom: 13rem; margin-left: -1%; } section.l-magazine__gallery > .inner { width: 101%; margin: 0 auto; } /* brown */ section.l-magazine__gallery.brown { color: #fff; background-color: #776B6B; } /* preorder */ section.l-magazine__gallery.preorder { position: relative; margin-top: 15rem; } section.l-magazine__gallery.preorder:before { content:""; position: absolute; border-top: 1px dotted rgba(255, 255, 255, 0.2); width: 93%; top:0; left: 50%; transform: translateX(-50%); } /* margin */ section.l-magazine__intro + section.l-magazine__gallery {margin-top: 11rem;} /* --- title --- */ section.l-magazine__gallery .title { font-family: minion-pro-display, serif; font-size: 4.5rem; letter-spacing: 0.31em; font-weight: 600; text-transform: uppercase; text-align: center; padding-bottom: 9.5rem; } /* --- gallery --- */ section.l-magazine__gallery .listGallery { margin-left: 10rem; display: flex; cursor: grab; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; } section.l-magazine__gallery .listGallery li { height: 35vw; } section.l-magazine__gallery .listGallery li:last-child { margin-right: 3rem; } section.l-magazine__gallery .listGallery li + li { margin-left: 0.6rem; } section.l-magazine__gallery .listGallery li figure { height: 100%; width: 100%; } section.l-magazine__gallery .listGallery li figure img { height: 100%; width: auto; object-fit: cover; font-family: 'object-fit: cover;'; } /* --------------------------- ■ l-magazine__btn --------------------------- */ /* --- common --- */ section.l-magazine__btn { width: 100%; position: relative; padding-top: 13.6rem; padding-bottom: 13.6rem; } section.l-magazine__btn > .inner { width: 87%; margin:0 auto; } section.l-magazine__btn:before { content:""; position: absolute; border-top: 1px dotted rgba(255, 255, 255, 0.2); width: 93%; top:0; left: 50%; transform: translateX(-50%); } /* --- title --- */ section.l-magazine__btn .title { font-family: minion-pro-display, serif; font-size: 2.7rem; letter-spacing: 0.375em; font-weight: 600; text-transform: uppercase; text-align: center; margin-bottom: 10rem; margin-left: 1.8rem; } /* --- list --- */ section.l-magazine__btn ul { display: flex; width: 102%; margin-left: -1%; } li.l-magazine__btnList { background-color: #fff; border-radius: 0.7rem; width: 50%; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); transition: all ease .25s; } li.l-magazine__btnList + li.l-magazine__btnList { margin-left: 1rem; } li.l-magazine__btnList a { display: block; transition: all ease .25s; padding: 5rem 5.9rem; display: flex; align-items: center; } li.l-magazine__btnList .right { margin-left: auto; width: 45%; height: 100%; } /* hover */ li.l-magazine__btnList:hover, li.l-magazine__btnList.color { background-color: #3E3333; } li.l-magazine__btnList:hover a, li.l-magazine__btnList.color a { color: #fff; } /* wImage */ li.l-magazine__btnList.wImage { height: 11vw; } li.l-magazine__btnList.wImage a { height: 100%; padding:0.5rem 0.5rem 0.5rem 5.1rem; } /* --- txt --- */ li.l-magazine__btnList .jpn { font-size: 2rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.11em; margin-top: 0.1rem; } li.l-magazine__btnList .eng { font-family: adobe-garamond-pro,serif; color: #867E69; font-size: 1.15rem; font-weight: 500; letter-spacing: 0.05em; margin-top: 0.6rem; transition: all ease .25s; } /* --- scroll --- */ li.l-magazine__btnList .scroll { width: 2.6rem; height: 2.6rem; box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.2); border-radius: 100%; margin-left: auto; background: #fff; margin-right: -1rem; position: relative; } li.l-magazine__btnList .scroll:after { content: ""; background-image: url(../../assets/img/common/arrowFilter.svg); display: block; position: absolute; opacity: 1; top: 47%; left: 50%; transform: translate(-50%, -50%); background-size: cover; background-position: center center; width: 1.1rem; height: 0.75rem; transition: all .25s ease; transition-delay: 0.25s; opacity: 0; } li.l-magazine__btnList .scroll:before { content: ""; background-image: url(../../assets/img/common/arrowFilter.svg); display: block; position: absolute; opacity: 1; top: 51%; left: 50%; transform: translate(-50%, -50%); background-size: cover; background-position: center center; width: 1.1rem; height: 0.75rem; transition: all .25s ease; transition-delay: 0s; } /* hover */ li.l-magazine__btnList:hover .scroll:after { top:50%; opacity: 1; } li.l-magazine__btnList:hover .scroll:before { top:56%; opacity: 0; } /* --- thumb --- */ li.l-magazine__btnList .thumb { height: calc(100% - 1rem); } li.l-magazine__btnList .thumb figure { height: 100%; width: 100%; } li.l-magazine__btnList .thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --------------------------- ■ l-magazine__point --------------------------- */ /* --- common --- */ section.l-magazine__point { position: relative; padding-top: 12rem; } section.l-magazine__point > .inner { width: 88%; margin:0 auto; } section.l-magazine__point:before { content:""; position: absolute; border-top: 1px dotted rgba(255, 255, 255, 0.2); width: 93%; top:0; left: 50%; transform: translateX(-50%); } /* --- title --- */ section.l-magazine__point .title { text-align: center; /* margin-bottom: 11rem; */ padding-bottom: 6.3rem; padding-top: 6.3rem; } section.l-magazine__point .title .eng { font-family: minion-pro-display, serif; font-size: 4.1rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; } section.l-magazine__point .title .jpn { font-size: 1.35rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.085em; margin-top: 2.6rem; } /* --- list --- */ li.l-magazine__pointList { display: flex; position: relative; margin-top: 9rem; } li.l-magazine__pointList + li { padding-top: 7rem; margin-top: 7rem; } li.l-magazine__pointList + li:before { content:""; position: absolute; border-top: 1px dotted rgba(255, 255, 255, 0.2); width: 102%; top:0; left: -1%; } li.l-magazine__pointList .left { width: 24%; } li.l-magazine__pointList .middle { width: 33%; margin-left: auto; } li.l-magazine__pointList .right { width: 32%; } /* --- thumb --- */ li.l-magazine__pointList .thumb { height: 29vw; } li.l-magazine__pointList .thumb figure { height: 100%; width: 100%; } li.l-magazine__pointList .thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- num --- */ li.l-magazine__pointList .num { font-size: 2.2rem; font-family: adobe-garamond-pro, sans-serif; padding-bottom: 0.5rem; font-variant: small-caps; padding-left: 0.2rem; margin-top: 0.7rem; margin-left: 0.3rem; display: inline-block; border-bottom: 1px solid #ffffff66; } /* --- lead --- */ li.l-magazine__pointList .lead { margin-top: 5.3rem; } li.l-magazine__pointList .lead .jpn { font-size: 2.5rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.075em; } li.l-magazine__pointList .lead .eng { font-family: adobe-garamond-pro, sans-serif; font-size: 1.2rem; letter-spacing: 0.03em; margin-top: 1.7rem; opacity: 0.7; } /* --- desc --- */ li.l-magazine__pointList .desc { font-size: 1.35rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.05em; line-height: 2.5; margin-top: 0.7rem; } /* --------------------------- ■ l-magazine__schedule --------------------------- */ /* --- common --- */ section.l-magazine__schedule { position: relative; margin-top: 15rem; padding-top: 17rem; padding-bottom: 18rem; } section.l-magazine__schedule > .inner { width: 84%; margin:0 auto; display: flex; } section.l-magazine__schedule .left { width: 50%; } section.l-magazine__schedule .right { width: 50%; margin-top: 0.7rem; } section.l-magazine__schedule:before { content:""; position: absolute; border-top: 1px dotted rgba(255, 255, 255, 0.2); width: 93%; top:0; left: 50%; transform: translateX(-50%); } /* --- title --- */ section.l-magazine__schedule .title { } section.l-magazine__schedule .eng { font-family: minion-pro-display, serif; font-size: 4.75rem; line-height: 1.35; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400; } section.l-magazine__schedule .jpn { font-size: 1.25rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.1em; margin-top: 1.9rem; } /* --- schedule --- */ section.l-magazine__schedule .schedule { } section.l-magazine__schedule .schedule:before { content:""; display: block; width: 2rem; border-top: 1px solid rgba(255,255,255,0.3); margin-top: 4.2rem; margin-bottom: 4.3rem; margin-left: 0.2rem; } section.l-magazine__schedule .schedule .sub { font-size: 1.1rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.05em; margin-left: 0.1rem; } section.l-magazine__schedule .schedule .date { font-family: minion-pro-display, serif; font-size: 3.7rem; letter-spacing: 0.025em; margin-top: 0.8rem; font-variant: small-caps; } /* --- desc --- */ section.l-magazine__schedule .desc { font-size: 1.3rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; line-height: 2.7; letter-spacing: 0.05em; margin-top: 2.8rem; width: 72%; } /* --- progeress --- */ section.l-magazine__schedule .progress { border-left: 1px solid rgba(255,255,255,0.2); padding-top: 2.1rem; padding-bottom: 20rem; } li.l-magazine__proList { display: flex; align-items: start; margin-left: -0.5rem; opacity: 0.5; } li.l-magazine__proList + li { margin-top: 7.9rem; } li.l-magazine__proList.current, li.l-magazine__proList.current + li, li.l-magazine__proList.current + li + li { opacity: 1; } /* circle */ li.l-magazine__proList .circle { height: 1rem; width: 1rem; border-radius: 100%; background-color:#fff; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); position: relative; margin-top: 0.6rem; } li.l-magazine__proList.current .circle:before { content:""; position: absolute; width: 200%; height: 200%; border-radius: 100%; border: 1px solid #fff; top:50%; left: 50%; transform: translate(-50%,-50%); } /* sub */ li.l-magazine__proList .sub { font-size: 1.25rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.075em; margin-left: -0.5rem; } /* num */ li.l-magazine__proList .num { font-family: minion-pro-display, serif; font-variant: small-caps; font-size: 3rem; letter-spacing: 0.04em; margin-top: 0.8rem; } /* off */ li.l-magazine__proList .off { color: #000; background-color: #fff; font-size: 1.8rem; font-variant: small-caps; padding: 0.4rem 1.5rem 0.5rem; font-family: adobe-garamond-pro, sans-serif; border-radius: 0.2rem; margin-top: 2.2rem; display: inline-block; } li.l-magazine__proList .off span { font-size: 74%; font-variant: initial; margin-left: 0.5rem; } /* tax */ li.l-magazine__proList .tax { margin-left: 0.1em; font-family: 'adobe-garamond-pro'; font-size: 60%; font-variant: initial; } /* info */ li.l-magazine__proList .info { margin-left: 8.6rem; width: 37%; } /* price */ li.l-magazine__proList .price { position: relative; padding-left: 6rem; margin-left: 4rem; } li.l-magazine__proList .price:before { content:""; display: block; height: 100%; border-left: 1px solid rgba(255,255,255,0.2); transform: rotate(10deg); position: absolute; left: 0; } /* --------------------------- ■ l-magazine__buy --------------------------- */ /* --- common --- */ section.l-magazine__buy { width: 102%; padding-top: 12rem; padding-bottom: 12rem; margin-left: -1%; margin-right: -1%; background-color: #53514D; } section.l-magazine__buy > .inner { display: flex; align-items: center; width: 86%; margin: 0 auto; } section.l-magazine__buy .left { width: 38%; } section.l-magazine__buy .right { width: 62%; } /* --- title --- */ section.l-magazine__buy .title { color: #fff; font-family: minion-pro-display, serif; font-size: 4rem; letter-spacing: 0.37em; text-transform: uppercase; font-weight: 400; line-height: 1.4; margin-left: 6%; } section.l-magazine__buy .title span { font-weight: 400; display: block; } /* --- list --- */ section.l-magazine__buy ul { display: flex; justify-content: center; } section.l-magazine__buy li { width: 50%; background-color: #fff; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.2); border-radius: 0.3rem; } section.l-magazine__buy li + li { margin-left: 1.2rem; } section.l-magazine__buy li > .inner { padding: 0.7rem; } /* --- thumb --- */ section.l-magazine__buy .thumb { height: 21vw; } section.l-magazine__buy .thumb figure { height: 100%; width: 100%; } section.l-magazine__buy .thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- cont --- */ section.l-magazine__buy .cont { color: #000; width: 74%; margin: 4.4rem auto; } /* --- sTitle --- */ section.l-magazine__buy .sTitle { font-family: minion-pro-display, serif; font-size: 2.9rem; letter-spacing: 0.33em; line-height: 1.35; text-transform: uppercase; } section.l-magazine__buy .sTitle span { font-weight: 600; display: block; } section.l-magazine__buy .sTitle:after { content:""; display: block; width: 1.8rem; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 1.6rem; margin-bottom: 2rem; } /* --- price --- */ section.l-magazine__buy .price { font-size: 2rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 300; letter-spacing: 0.05em; display: flex; align-items: center; } section.l-magazine__buy .info { font-size: 1.5rem; font-family: adobe-garamond-pro, sans-serif; margin-left: 0.6rem; } /* --- button --- */ section.l-magazine__buy .btn { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.05em; background-color: #F5F5F5; transition: all ease .5s; width: 110%; text-align: center; border-radius: 5rem; margin-top: 3.4rem; margin-left: -5%; } section.l-magazine__buy .btn a { display: block; width: 100%; height: 100%; padding-top: 1.7rem; padding-bottom: 1.7rem; transition: all ease .5s; } /* hover */ section.l-magazine__buy .btn:hover { background-color: #5d5151; } section.l-magazine__buy .btn:hover a { color:#fff; } /* ><><><><><><><><><><><><><><><><> ▼ Article Music ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-article__musicEmbed --------------------------- */ section.l-article__musicEmbed { border: 1px dotted #e3e3e3; background: #efeeea; width: 49vw; height: 49vw; margin: 0 auto ; position: sticky; top:10.2rem; display: flex; align-items: center; justify-content: center; } section.l-article__musicEmbed iframe { width: 72% !important; height: 72% !important; max-width: 70rem; margin: 0 auto; display: block; border: 2px solid #fff !important; box-sizing: border-box; } section.l-article__musicEmbed figure { height: 100%; width: 100%; } section.l-article__musicEmbed figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* none */ .l-article__contRight section.l-article__musicEmbed { display: none; } /* pre */ section.l-article__musicEmbed { opacity: 0; transform: translateY(2vw); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* start */ body.start2 section.l-article__musicEmbed { opacity: 1; transform: translateY(0vw); } /* --------------------------- ■ l-article__musicWrapper --------------------------- */ /* --- common --- */ .l-article__musicWrapper { width: 48%; margin:0 auto; } /* --- l-playlistEmbed --- */ section.l-playlistEmbed { width: 84%; margin: 6.6rem auto 0; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0.3s; } body.start2 section.l-playlistEmbed { opacity: 1; transform: translateY(0rem); } /* --- l-articleProf --- */ .l-articleMusic .l-articleProf__intro { margin-top: .6rem; } .l-articleMusic .l-articleProf__intro:before { display: none; } /* title */ .l-articleMusic .l-articleProf__title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 2.6rem; font-weight: 500; font-variant: initial; margin: 0; letter-spacing: 0.03em; margin-top: 0.9rem; margin-bottom: -0.7rem; } .l-articleMusic .l-articleProf__title:before { content: "Artist :"; display: block; font-size: 1.3rem; margin-left: 0.3rem; letter-spacing: 0.03em; margin-bottom: 1.3rem; color: #aea291; } /* desc */ .l-articleMusic .l-articleProf__desc { width: 100%; font-size: 1.25rem; margin-top: 2.9rem; line-height: 2.2; opacity: 0.7; } /* url */ .l-articleMusic .articleProf__url { margin-top: 1.9rem; } /* --- l-article__musicBtn --- */ section.l-article__musicBtn { width: 88.8%; margin: 4.8rem auto 5.0rem; } /* ><><><><><><><><><><><><><><><><> ▼ Article News ><><><><><><><><><><><><><><><><> /* --------------------------- ■ NewsCommon --------------------------- */ /* --- common --- */ article.l-articleNews { } article.l-articleNews > .inner { display: flex; flex-flow: column; width: 98%; margin: 0 auto 0rem; } /* --------------------------- ■ NewsTilte --------------------------- */ /* --- common --- */ article.l-articleNews section.l-article__horizonTitle { padding-top: 6.8rem; width: 100%; } article.l-articleNews section.l-article__horizonTitle > .inner { padding-bottom: initial; } /* --- title --- */ article.l-articleNews .c-listTitle { font-size: 3.35rem; font-weight: 400; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.01em; line-height: 1.6; margin-top: 0; } article.l-articleNews .c-listTitle br { display: block; } /* --- date --- */ article.l-articleNews .c-listDate { font-size: 1.95rem; margin-top: 1.3rem; color: #c1c1c1; font-variant: small-caps; } /* --------------------------- ■ Mv --------------------------- */ /* --- common --- */ section.l-articleNews__mv { width: 50%; height: calc(100vh - 10.5rem); top: 9.1rem; margin: 0 auto; position: sticky; overflow: hidden; } section.l-articleNews__mv figure { width: 100%; height: 100%; } section.l-articleNews__mv figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center center; } /* pre */ section.l-articleNews__mv:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; background-color: #fff; z-index: 1; transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } section.l-articleNews__mv figure { transform: scale(1.2); transition: 1.65s all cubic-bezier(.275,0,0,1); } /* start */ body.start2 section.l-articleNews__mv:before { height: 0; } body.start2 section.l-articleNews__mv figure { transform: scale(1); } /* --------------------------- ■ contInner --------------------------- */ /* --- common --- */ .l-articleNews_contInner { display: flex; } /* --------------------------- ■ container --------------------------- */ /* --- common --- */ .l-article__newsContainer { width: 50%; margin: -0.8rem auto 13rem; } .l-article__newsContainer > .inner { position: sticky; top: 14rem; } /* --- p --- */ .l-article__newsContainer p { font-size: 1.475rem; line-height: 2.4; letter-spacing: 0.03em; width: 76%; margin: 0 auto; } .l-article__newsContainer p a { color: #908069; text-decoration: underline dotted; text-underline-offset: 0.8rem; text-decoration-thickness: 0.8px; font-size: 95%; } /* margin */ .l-article__newsContainer p + p { margin-top: 2.5em; } .l-article__newsContainer figure + p { margin-top: 8.5rem; } /* --- image --- */ .l-article__newsContainer figure { width: 95.5%; margin: 0 auto; } .l-article__newsContainer figure img { width: 100%; height: auto; } /* margin */ .l-article__newsContainer p + figure { margin-top: 8.5rem; } /* --------------------------- ■ PrevNext --------------------------- */ /* --- common --- */ section.l-prevNext { border-bottom: 1px solid #f0f0f0; width: 96%; margin: 0 auto 0; } /* ><><><><><><><><><><><><><><><><> ▼ Article Feature ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-article__container --------------------------- */ .l-articleFeature .l-article__container:after { content: none; } /* --------------------------- ■ l-article__mv --------------------------- */ /* --- common --- */ .l-articleFeature .l-article__mv { height: calc(100vh - 10.4rem); max-height: initial; position: sticky; top: 8.9rem; margin-bottom: initial; transition-delay: 1.05s; } /* --------------------------- ■ l-article__contRight --------------------------- */ .l-articleFeature .l-article__contRight > .inner { position: sticky; top: 13.8rem; margin-bottom: 17rem; margin-left: 3.3rem; } .l-articleFeature.l-articleOutline .l-article__contRight > .inner { margin-bottom: 0; } /* music */ .l-articleMusic .l-article__contRight > .inner { margin-left: 3.3rem; } /* ><><><><><><><><><><><><><><><><> ▼ Article Page ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-archivePolicy --------------------------- */ /* --- common --- */ .l-archivePolicy { text-align: center; margin-bottom: 11.5rem; } .l-archiveFeature section.l-archivePolicy { width: 98%; margin: 22rem auto 2rem; } .l-archiveFeature.policy:before { content: none; } /* --- head --- */ .l-archivePolicy__title { text-align: center; padding-top: 18.5rem; margin: 0 auto 16rem; width: 90%; border-top: 0px solid #f0f0f0; } .vision .l-archivePolicy__title { border-top: initial; } /* eng */ .l-archivePolicy__title span.eng { font-family: minion-pro-display, serif; font-size: 2.7rem; letter-spacing: 0.33em; font-weight: 600; text-transform: uppercase; display: inline-block; position: relative; } .l-archivePolicy__title span.eng:before { content: ""; position: absolute; bottom: -1.5rem; left: -0.4rem; width: calc(100% + -0.1rem); height: 0px; background-color: #ededed; } /* --- list --- */ /* common */ .l-archivePolicy__list { display: flex; flex-flow: column; width: 100%; margin: 0 auto; } .l-archivePolicy__list li { width: 100%; margin: 0 auto; position: relative; display: flex; position: relative; } .l-archivePolicy__list li.reserve { flex-flow: row-reverse; } .l-archivePolicy__list li + li { margin-top: 4rem; } /* image */ .l-archivePolicy__list li figure { width: 50%; height: 46.5vw; overflow: hidden; cursor: pointer; } .l-archivePolicy__list li figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center center; transform: scale(1.1); opacity: 1; transition: all ease 1.5s; } /* active */ .l-archivePolicy__list li.fadeInUp figure img { transform: scale(1); } /* cont */ .l-archivePolicy__list li .cont { width: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } /* title */ .l-archivePolicy__list li .title { margin-top: -1rem; text-align: center; } .l-archivePolicy__list li.reserve .title { margin-left:-6rem; } .l-archivePolicy__list li .title span { display: block; } .l-archivePolicy__list li .title span.num { font-size: 2rem; font-family: 'Benne', serif; /*margin-left: 0.8rem;*/ font-weight: 500; color: #b6aa99; letter-spacing: 0.02em; display: inline-block; position: relative; } .l-archivePolicy__list li .title span.num:before { content: ""; position: absolute; bottom: -0.3rem; left: -0.2rem; width: calc(100% + 0.3rem); height: 1px; background-color: #ededed; } .l-archivePolicy__list li .title span.jpn { font-size: 2.6rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 300; letter-spacing: 0.1em; margin-top: 1.2rem; } .l-archivePolicy__list li .title span.eng { font-size: 1.4rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 300; letter-spacing: 0.05em; margin-top: 1.2rem; color: #b8ad9f; } .l-archivePolicy__list li .title span.eng.two { margin-left: 0.3rem; } .l-archivePolicy__list li .title span.eng.three { margin-left: 0rem; } /* ================================= // ● Page // /* ><><><><><><><><><><><><><><><><> ▼ SiteInfo ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ section.l-siteInfo { margin-top: 3.8rem; padding-bottom: 3rem; } section.l-siteInfo > .inner { } ul.l-siteInfo__list { width: 95.5%; margin:0 auto; display: flex; flex-wrap: wrap; } /* --------------------------- ■ Cont --------------------------- */ /* --- common --- */ .l-siteInfo__cont { width: 25%; padding: 0 2.5rem 9.5rem; text-align: center; vertical-align: top; box-sizing: border-box; display: flex; flex-flow: column; } /* hover */ .l-siteInfo__cont:hover { background: #f8f8f8; } /* border */ .l-siteInfo__cont:before { content: ""; height: 92%; top: 8%; position: absolute; right: 0; width: 1px; border-right: 1px dotted #e9e9e9; } .l-siteInfo__cont:nth-child(n + 5):before { height: 100%; top: 0%; } .l-siteInfo__cont:nth-child(4n):before { border-right: initial; } /* --- image --- */ .l-siteInfo__cont .c-listImage { height: 11.1vw; width: 54.5%; margin: 5.5rem auto 0; border: 1px solid #f5f5f5; box-sizing: border-box; padding: 0.3rem; order: 2; } .l-siteInfo__cont .c-listImage figure { overflow: hidden; transition: all ease .5s; } .l-siteInfo__cont .c-listImage a { overflow: hidden; } /* hover */ .l-siteInfo__cont .c-listImage:hover a{ opacity: 1; transform: scale(1); } .l-siteInfo__cont .c-listImage:hover figure { transform: scale(1.04); } /* --- title --- */ .l-siteInfo__listTitle { margin-top: 5.6rem; } /* num */ .l-siteInfo__listTitle .num { font-size: 1.2rem; font-family: adobe-garamond-pro, sans-serif; color: #938675; letter-spacing: 0.05em; position: relative; display: inline-block; } .l-siteInfo__listTitle .num:before { content: ""; position: absolute; bottom: -4.3px; width: 102%; height: 1px; background: #e1e1e1; left: -1%; } /* jpn */ .l-siteInfo__listTitle .jpn { font-size: 1.575rem; letter-spacing: 0.08em; font-family: 'Zen Old Mincho', sans-serif; margin-top: 1.8rem; } /* eng */ .l-siteInfo__listTitle .eng { font-size: 1.2rem; letter-spacing: 0.075em; font-family: adobe-garamond-pro, sans-serif; color: #A09375; margin-top: 1.2rem; } /* ><><><><><><><><><><><><><><><><> ▼ About ><><><><><><><><><><><><><><><><> /* --------------------------- ■ About List --------------------------- */ /* --- common --- */ section.l-aboutList { margin: 0rem auto -10rem; padding-bottom: 0.5rem; background: #fff; position: relative; z-index: 3; } section.l-aboutList .wrap { width: 99.4%; margin:0 auto; padding-top: 8.3rem; padding-bottom: 6.5rem; background: #f6f6f6c4; } section.l-aboutList > .inner { width: 97%; margin: 0 auto; } section.l-aboutList ul { display: flex; width: 97%; margin: 0 auto; } /* margin */ section.l-subscSp + section.l-aboutList { margin-top: 26rem; } section.l-aboutLink + section.l-aboutList { padding-top: 0.4rem; } /* --- cont --- */ li.l-aboutList__cont { width: 50%; padding: 3.9rem 3.8rem 8.5rem; text-align: center; } li.l-aboutList__cont + li.l-aboutList__cont { border-left: 1px dotted #e5e4e4; } /* --- num --- */ li.l-aboutList__cont .num { font-size: 1.7rem; font-family: adobe-garamond-pro, sans-serif; font-variant: small-caps; position: relative; color: #938675; letter-spacing: 0.035em; position: relative; display: inline-block; } li.l-aboutList__cont .num:before { content:""; position: absolute; bottom:-5.1px; width: 102%; height: 1px; background: #e0e0e0; left:-1%; } /* --- title --- */ li.l-aboutList__cont .title { margin-top: 3.3rem; } li.l-aboutList__cont .eng { font-size: 3.5rem; font-family: minion-pro-display, serif; letter-spacing: 0.23em; text-transform: uppercase; } li.l-aboutList__cont .jpn { font-size: 1rem; letter-spacing: 0.12em; font-family: 'Zen Old Mincho', sans-serif; color: #999898; margin-top: 0.6rem; } /* --- image --- */ li.l-aboutList__cont .image { height: 13.3vw; margin: 6rem auto 0; width: 31%; overflow: hidden; border: 1px solid #ebebeb; padding: 0.4rem; } li.l-aboutList__cont .image figure { height: 100%; width: 100%; overflow: hidden; } li.l-aboutList__cont .image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transition: all ease .75s; } /* hover */ li.l-aboutList__cont a:hover .image figure img { transform: scale(1.05); } /* --- readmore --- */ li.l-aboutList__cont .readmore { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.35rem; font-weight: 300; letter-spacing: 0.2em; margin-top: 7rem; display: inline-block; position: relative; text-transform: lowercase; } /* border */ li.l-aboutList__cont .readmore:before { content:""; position: absolute; bottom:-0.5rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } li.l-aboutList__cont a:hover .readmore::before { transform-origin: right top; transform: scale(0, 1); } li.l-aboutList__cont .readmore:after { content:""; position: absolute; bottom:-0.5rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } li.l-aboutList__cont a:hover .readmore::after { transform-origin: left top; transform: scale(1, 1); } /* --------------------------- ■ About Link --------------------------- */ /* --- common --- */ section.l-aboutLink { background-color: #b2aea9; width: 99.4%; margin: 1rem auto 0; position: relative; text-align: center; position: sticky; top: -8vw; } section.l-aboutLink a { color: #fff; } section.l-aboutLink > .inner, section.l-aboutLink .l-aboutLink__list { width: 100%; margin:0 auto; display: flex !important; align-items: center; padding: 16rem 0; } section.l-aboutLink .left { width: 52%; } section.l-aboutLink .right { width: 50%; } /* margin */ article.l-singleFeature + section.l-aboutLink { margin: 0rem auto 0; } section.l-archiveSlideshow + section.l-aboutLink { margin: 0rem auto 0; display: none; } /* theme */ section.l-aboutLink.theme .l-aboutLink__list { padding-top: initial; cursor: grab; } /* --- head --- */ .l-aboutLink__head { font-family: minion-pro-display, serif; font-size: 3.35rem; letter-spacing: 0.225em; font-weight: 600; text-transform: uppercase; display: inline-block; position: relative; color:#fff; padding-top: 11.8rem; padding-bottom: 9.8rem; } /* --- Arrow --- */ .l-aboutLink__slider button.slick-arrow { font-size: 0; background: initial; position: absolute; top: -14rem; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(255,255,255,0.4); z-index: 1; border-radius: 100%; opacity: 0; transform: translateY(0.5vw); outline: none; transition: all ease .3s; } body.start2 .l-aboutLink__slider button.slick-arrow { opacity: 1; transform: translateY(0vw); } .l-aboutLink__slider button.slick-prev { left: 6.3%; } .l-aboutLink__slider button.slick-next { right: 6.3%; } /* Hover */ .l-aboutLink__slider button.slick-prev:hover { left: 6.1%; } .l-aboutLink__slider button.slick-next:hover { right: 6.1%; } /* Arrow */ .l-aboutLink__slider button.slick-arrow:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: cover; background-position: center center; width: 1rem; height: 0.95rem; transition:all .25s ease; transition-delay: 0.25s; } .l-aboutLink__slider button.slick-prev:before { background-image: url(../../assets/img/common/arrowLeftwh.svg); } .l-aboutLink__slider button.slick-next:before { background-image: url(../../assets/img/common/arrowRightwh.svg); } /* --- cont --- */ /* title */ .l-aboutLink__title { } .l-aboutLink__title .main { font-size: 3.65rem; font-family: minion-pro-display, serif; font-weight: 600; line-height: 1; letter-spacing: 0.325em; text-transform: uppercase; margin-left: 1.2rem; } .l-aboutLink__title .sub { font-size: 1.6rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 500; letter-spacing: 0.175em; margin-top: 1.9rem; font-variant: small-caps; opacity: 0.7; } /* jpn */ .l-aboutLink__title .main.jpn { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; font-size: 2.5rem; line-height: 1.2; letter-spacing: 0.065em; } .l-aboutLink__title .main.jpn + .sub { margin-top: 1.5rem; } /* btn */ .l-aboutLink__btn { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.05rem; font-weight: 300; letter-spacing: 0.425em; margin-top: 9.2rem; display: inline-block; position: relative; text-transform: uppercase; } .l-aboutLink__btn.sp { display: none; } /* border */ .l-aboutLink__btn:before { content:""; position: absolute; bottom:-0.8rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #d0c297; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } section.l-aboutLink a:hover .l-aboutLink__btn::before { transform-origin: right top; transform: scale(0, 1); } .l-aboutLink__btn:after { content:""; position: absolute; bottom:-0.8rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #d0c297; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } section.l-aboutLink a:hover .l-aboutLink__btn::after { transform-origin: left top; transform: scale(1, 1); } /* --- image --- */ .l-aboutLink__image { height: 37vw; width: 77%; border:1px solid transparent; box-sizing: border-box; overflow: hidden; transition: all ease 1s; } .l-aboutLink__image figure { height: 100%; width: 100%; overflow: hidden; transition: 2.6s all cubic-bezier(.275,0,0,1); } .l-aboutLink__image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* start */ body.start2 .l-aboutLink__image { border:1px solid #fff; } /* hover */ .l-aboutLink__image:hover figure { transform: scale(1.05); } /* --------------------------- ■ Flow --------------------------- */ /* --- common --- */ section.l-pageFlow { /*background-attachment: fixed; background-size: cover; background-position: center bottom;*/ width: 99.4%; margin: 0 auto; border-bottom: 1px dotted #ffffff17; position: relative; opacity: 0; transition: 1.25s all cubic-bezier(.275,0,0,1); } .l-pageFlow__nav { padding: 10rem 11.5rem 10rem; border-bottom: 1px solid rgba(255,255,255,0.1); } section.l-pageFlow.first > .l-pageFlow__nav { padding: 11rem 10rem 12rem; } /* transition */ body.done section.l-pageFlow { opacity: 1; } /* --- nav --- */ /* list */ nav.l-pageFlow__nav ul { display: flex; flex-wrap: wrap; } nav.l-pageFlow__nav ul li { width: 33.33%; opacity: 0; transform: translateY(1vw); transition: 1.25s all cubic-bezier(.275,0,0,1); } nav.l-pageFlow__nav ul li:nth-child(n + 4) { margin-top: 0.9rem; } nav.l-pageFlow__nav ul li a { padding: 3.4rem 0 3.4rem; background-color: #ffffff1a; display: flex; color: #fff; flex-flow: column; width: 97.2%; margin: 0 auto; text-align: center; border-radius: 0.2rem; border: 1px solid rgba(255,255,255,0.2); position: relative; transition: all ease .5s; } /* hover */ nav.l-pageFlow__nav ul li a:hover { background-color: #ffffff2e; } /* visivle */ .visible.start nav.l-pageFlow__nav ul li { opacity: 1; transform: translateY(0vw); } .visible.start nav.l-pageFlow__nav ul li:nth-child(2) { transition-delay: 0.025s; } .visible.start nav.l-pageFlow__nav ul li:nth-child(3) { transition-delay: 0.05s; } .visible.start nav.l-pageFlow__nav ul li:nth-child(4) { transition-delay: 0.075s; } .visible.start nav.l-pageFlow__nav ul li:nth-child(5) { transition-delay: 0.1s; } /* txt */ nav.l-pageFlow__nav .eng { font-size: 1.55rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: 0.36em; padding-top: 0.2rem; display: inline-block; } nav.l-pageFlow__nav .jpn { display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 0.18em; font-family: 'Zen Old Mincho', sans-serif; color: #fffefc; margin-top: 0.8rem; opacity: 0.7; transform: scale(0.8); } /* ><><><><><><><><><><><><><><><><> ▼ PageCommon ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-pageSect --------------------------- */ /* --- common --- */ section.l-pageSect { width: 75.4%; margin:0 auto; } /* faq */ section.l-pageSect.faq { margin-top: 9rem; } /* margin */ .l-article__container + section.l-pageSect { padding-top: 9rem; } .l-article__container + section.l-pageSect.outline { padding-top: 8.4rem; margin-bottom: 16rem; } /* --------------------------- ■ l-pageHead --------------------------- */ /* --- common --- */ .l-pageHead { position: relative; margin-bottom: 9.7rem; } /* --- nav --- */ .l-pageHead__nav { position: absolute; top: 4.9rem; right: 0.5rem; } .l-pageHead__nav ul { display: flex; } .l-pageHead__nav ul li { font-size: 1.2rem; letter-spacing: 0.07em; font-family: 'Zen Old Mincho', sans-serif; text-transform: capitalize; position: relative; } .l-pageHead__nav ul li a { color: #616161; transition: all ease .35s; } .l-pageHead__nav ul li a:hover { color: #000; } .l-pageHead__nav ul li + li { margin-left: 2.9rem; padding-left: 2.9rem; } .l-pageHead__nav ul li + li:before { content: ""; position: absolute; border-left: 1px solid #dbdbdb; height: 42%; top: 50%; transform: translateY(-50%); left: 0; } /* --------------------------- ■ l-pageCircle --------------------------- */ /* --- common --- */ section.l-pageCircle { background-color: #f3f3f3; } section.l-pageCircle > .inner { width: 84%; margin:1.1rem auto -9.3rem; padding: 13rem 0; } /* margin */ .navAction + section.l-pageCircle { margin-top: 12rem; } /* --- list --- */ .l-pageCircle__list li { display: inline-block; width: 49.5%; background: #fff; margin-bottom: 0.9rem; border-radius: 0.4rem; position: relative; box-shadow: 3px 3px 15px -7px rgba(0, 0, 0, 0.1); border: 1px solid #efefef; box-sizing: border-box; transition: all ease .5s; } .l-pageCircle__list li + li { margin-left: 0.6%; } .l-pageCircle__list li:nth-child(2n+3) { margin-left: 0; } .l-pageCircle__list li a { display: block; width: 100%; height: 100%; } .l-pageCircle__list li .inner { display: flex; align-items: center; padding: 3rem; } /* hover */ .l-pageCircle__list li:hover { background-color: #dddada; } .l-pageCircle__list li.current { background-color: #c5bfbf; } /* --- title --- */ .l-pageCircle__list li .cont { width: 70.9%; margin-right: 4.7%; } .l-pageCircle__list li .cont { display: flex; align-items: center; } .l-pageCircle__list li .title { font-size: 2.45rem; font-family: minion-pro-display, serif; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; display: inline-block; margin-left: 3.4rem; transition: all ease .5s; } .l-pageCircle__list li .jpn { font-family: 'Zen Old Mincho', sans-serif; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.12em; opacity: 0.3; margin-top: 1rem; } /* hover */ .l-pageCircle__list li:hover .title { } .l-pageCircle__list li.current .title { color: #fff; } .l-pageCircle__list li:hover .jpn { } .l-pageCircle__list li.current .jpn { opacity: 0.8; } /* --- image --- */ .l-pageCircle__list .image { width: 24.7%; height: 9vw; box-sizing: border-box; border: 1.5px solid #fff; } .l-pageCircle__list .image figure { height: 100%; width: 100%; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; overflow: hidden; } .l-pageCircle__list .image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* hover */ .l-pageCircle__list li:hover .image figure img, .l-pageCircle__list li.current .image figure img { transform: scale(1.05); } /* ><><><><><><><><><><><><><><><><> ▼ Philosophy ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ body.fixed { overflow: hidden; height: 100%; } /* --------------------------- ■ bg --------------------------- */ .designBg { position: fixed; height: 100%; width: 100%; top: 0; background-color: rgba(0,0,0,0); visibility: hidden; transition: all ease .5s; } .designBg.bgOne { z-index: 6; } .designBg.bgTwo { z-index: 7; } .designBg.active { background-color: rgba(0,0,0,0.2); visibility: visible; } /* --------------------------- ■ fieldClose --------------------------- */ .c-fieldClose { position: fixed; width: 3.4rem; height: 2.6rem; top: 2.6rem; right: 2.7rem; cursor: pointer; z-index: 2; opacity: 0; transition: all ease 1s; transition-delay: 0s; } /* active */ .open .c-fieldClose, .open2 .c-fieldClose { opacity: 1; } .c-fieldClose span { position: absolute; display: inline-block; width: 100%; height: 1px; background-color: #939393; left: 0; transition: .6s all cubic-bezier(.275,0,0,1); } .c-fieldClose span:nth-child(1) { transform: rotate(0deg); top:1.3rem; } .c-fieldClose span:nth-child(2) { transform: rotate(0deg); top:1.3rem; } .open .c-fieldClose span:nth-child(1), .open2 .c-fieldClose span:nth-child(1) { top:1.3rem; transform: rotate(-30deg); } .open .c-fieldClose span:nth-child(2), .open2 .c-fieldClose span:nth-child(2) { top: 1.3rem; transform: rotate(30deg); } /* hover */ .open .c-fieldClose:hover span:nth-child(1), .open2 .c-fieldClose:hover span:nth-child(1) { transform: rotate(-20deg); } .open .c-fieldClose:hover span:nth-child(2), .open2 .c-fieldClose:hover span:nth-child(2) { transform: rotate(20deg); } /* --------------------------- ■ l-fieldSect --------------------------- */ section.l-fieldSect { position: fixed; width: 100%; overflow-y: scroll; height: 0%; background-color: #fff; bottom: 0; -webkit-transition: .8s cubic-bezier(.6,0,.25,1); transition: .8s cubic-bezier(.6,0,.25,1); } section.l-fieldSect > .inner { margin-top: 1.2rem; } section.l-fieldSect.z1 { z-index: 6; } section.l-fieldSect.active { height: 100%; } section.l-fieldSect.z2 { z-index: 8; } section.l-fieldSect.active2 { height: 100%; } section.l-fieldSect.zIndex { z-index: 6; } /* --------------------------- ■ l-fieldSect__main --------------------------- */ .l-fieldSect__main { display: flex; width: calc(100% - 2.4rem); margin:0rem auto 0; } /* --------------------------- ■ l-fieldSect__mv --------------------------- */ .l-fieldSect__mv { width: 50%; height: calc(100vh - 2.4rem); padding-top: 0rem; top: 1.2rem; position: sticky; transition: all ease 1.05s; opacity: 0; transition-delay: 0s; overflow:hidden; } /* active */ .active .l-fieldSect__mv, .active2 .l-fieldSect__mv { opacity: 1; transition-delay: .5s; } .l-fieldSect__mv figure { height: 100%; transition: all ease 2.35s; transform: scale(1.2); transition-delay: 0s; } /* active */ .active .l-fieldSect__mv figure, .active2 .l-fieldSect__mv figure { transform: scale(1); transition-delay: .6s; } .l-fieldSect__mv figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transition: all ease .75s; } /* --------------------------- ■ l-fieldSect__cont --------------------------- */ /* --- common --- */ .l-fieldSect__cont { width: 50%; z-index: 1; } .l-fieldSect__cont > .inner { width: 62%; margin: 12.6rem auto; padding-bottom: 5rem; transition: all ease 1s; transition-delay: 0s; opacity: 0; transform: translateY(2.5rem); } /* active */ .active .l-fieldSect__cont > .inner, .active2 .l-fieldSect__cont > .inner { opacity: 1; transform: translateY(0rem); transition-delay: 1.4s; } /* --- title --- */ .l-fieldSect__title { font-size: 2.55rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; line-height: 1.75; letter-spacing: 0.05em; margin-left: 0.1rem; } .l-fieldSect__title span { display: block; margin-top: 0.4rem; margin-left: 0.3rem; font-family: adobe-garamond-pro, sans-serif; font-size: 1.3rem; font-weight: 300; letter-spacing:0.05em; color: #b8ad9f; } /* --- desc --- */ p.l-fieldSect__desc { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; font-size: 1.4rem; line-height: 2.42; letter-spacing: 0.05em; margin-left: 0.3rem; margin-top: 4.7rem; } /* --- next --- */ .fieldNext { border-top: 1px dotted #e8e8e8; border-bottom: 1px dotted #e8e8e8; margin-top: 11.7rem; cursor: pointer; } .fieldNext__cont { font-size: 2.05rem; font-family:adobe-garamond-pro,"Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 500; line-height: 1.35; letter-spacing: 0.05em; padding: 10.6rem .9rem 10.4rem; position: relative; } .fieldNext__cont span.eng { display: block; margin-top: 0.2rem; margin-left: 0.4rem; font-size: 1.2rem; font-family: adobe-garamond-pro, sans-serif; font-weight: 300; letter-spacing: 0.075em; color: #b8ad9f; } /* --- arrow --- */ .fieldNext__cont:before { content: ""; position: absolute; width: 0.6rem; height: 0.6rem; right: 2.4rem; top: -1rem; bottom: 0; margin: auto; border-top: 1px solid #cdb99c; border-right: 1px solid #cdb99c; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all ease .5s; transition-delay: 0.1s; } .fieldNext__cont:after { content: ""; position: absolute; width: 0.6rem; height: 0.6rem; right: 2.8rem; top: -1rem; bottom: 0; margin: auto; border-top: 1px solid #cdb99c; border-right: 1px solid #cdb99c; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; transition: all ease .5s; transition-delay: 0s; } /* hover */ .fieldNext__cont:hover:before { right: 2rem; opacity: 0; transition-delay: 0s; } .fieldNext__cont:hover:after { right: 2.4rem; opacity: 1; transition-delay: 0.1s; } /* --- l-fieldFoot --- */ .l-fieldFoot { display: none; } /* ><><><><><><><><><><><><><><><><> ▼ Membership ><><><><><><><><><><><><><><><><> /* --------------------------- ■ memberFix --------------------------- */ /* --- common --- */ .memberFix { position: fixed; background-color: #8E8282; width: 100%; z-index: 3; bottom: -6rem; color:#fff; transition: all ease .5s; } .memberFix > .inner { padding: 1.2rem 4.9rem 1rem; display: flex; } /* active */ body.start2 .memberFix.active { bottom: 0; } body.start2 .memberFix.active.active2 { bottom: -6rem; } /* login */ html.codocLogin .memberFix { display: none; } /* --- title --- */ .memberFix .title { display: flex; align-items: center; } .memberFix .title .eng { font-size: 1.7rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.085em; font-variant: small-caps; } .memberFix .title .desc { font-size: 1.1rem; letter-spacing: 0.05em; margin-left: 1.8rem; padding-left: 1.7rem; position: relative; } .memberFix .title .desc:before { content:""; display: block; height: 1.1rem; border-left: 1px solid rgba(255,255,255,0.3); position: absolute; left: 0; top:54%; transform:translateY(-50%); } /* --- btn --- */ .memberFix .btn { margin-left: auto; margin-right: 0rem; } .memberFix .btn ul { display: flex; } .memberFix .btn li + li { margin-left: 0.6rem; } .memberFix .btn .btnInner { font-size: 1.15rem; letter-spacing: 0.02em; color:#fff; cursor: pointer; display: block; padding:0.6rem 2.8rem; border-radius: 3rem; border: 1px solid rgba(255,255,255,0.3); transition: all ease .5s; } .memberFix .btn .white .btnInner { color: #000; background-color: #fff; } /*.memberFix .btn .btnInner:hover { color:#000; background-color: #fff; } .memberFix .btn .white .btnInner:hover { color:#000; background-color: #ccc; border: 1px solid rgba(0,0,0,0); }*/ /* --------------------------- ■ banner --------------------------- */ /* --- common --- */ body.baseMag { overflow: hidden; } /* login */ html.codocLogin body.baseMag { overflow: initial; } /* private */ body.private { overflow: initial; } body.private #banner { display: none !important; } /* --- bg --- */ .bannerBg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0); visibility: hidden; z-index: 25; transition: all ease .7s; transition-delay: 1s; } body.baseMag.start2 .bannerBg { background: rgba(0,0,0,0.75); visibility: visible; transition-delay: 0.2s; } /* login */ html.codocLogin .bannerBg{ display: none; } /* bannerHead */ .bannerHead { position: fixed; width: 51%; height: 0; right: 0; /*left: 50%; transform: translateX(-50%);*/ z-index: 27; mix-blend-mode: difference; top: 4.6rem; opacity: 0; visibility: hidden; transition: all ease .7s; } /* active */ body.baseMag.start2 .bannerHead { visibility: visible; opacity: 1; transition-delay: 1.25s; } /* login */ html.codocLogin .bannerHead { display: none; } /* coountDown */ #countdown { color: #fff; font-size: 2.7rem; font-family: adobe-garamond-pro, serif; font-variant: small-caps; font-weight: 500; letter-spacing: -0.05em; position: absolute; right: 3.3rem; top: 0; z-index: 25; } /* close */ .bannerClose { position: absolute; width: 3.6rem; height: 3rem; top: 0; right: 2.7rem; cursor: pointer; z-index: 25; } .bannerClose > .inner { width: 100%; height: 100%; } .bannerClose span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #fff; left: 0; visibility: hidden; opacity: 0; transition: all ease .35s; } .bannerClose span:nth-child(1) { top:50%; transform: rotate(0deg); } .bannerClose span:nth-child(2) { top:50%; transform: rotate(-0deg); } /* active */ .bannerClose.active span { visibility: visible; opacity: 1; } .bannerClose.active span:nth-child(1) { transform: rotate(25deg); } .bannerClose.active span:nth-child(2) { transform: rotate(-25deg); } /* --- cont --- */ /* common */ .bannerCont { height: calc(100% - 2.4rem); width: 0%; overflow-x: hidden; z-index: 26; position: fixed; bottom:0; right: 0; /*left: 50%; transform: translateX(-50%);*/ background: #fff; border-radius: 2rem 0 0 0; overflow-y: scroll; visibility: hidden; transition: all ease .8s; transition-delay: 0.5s; } .bannerCont > .inner { opacity: 0; transform: translateY(0.5vw); visibility: hidden; transition: all ease .7s; transition-delay: 0s; } /* active */ body.baseMag.start2 .bannerCont { width: 55%; background: rgb(137 128 128); visibility: visible; opacity: 1; transition-delay: 0.5s; } body.baseMag.start2 .bannerCont > .inner { transform: translateY(0vw); visibility: visible; opacity: 1; transition-delay: 1.2s; } /* login */ html.codocLogin .bannerCont { display: none; } /* bannerIntro */ .bannerIntro { background: #fff; } .bannerIntro > .inner { width: 74.5%; display: flex; margin: 0rem auto; padding: 10.3rem 0px 7.3rem; } .bannerIntro .left { width: 90%; } .bannerIntro .right { width: 100%; } /* title */ .bannerLead { text-align: left; } .bannerLead .sub { font-size: 0.95rem; font-family: minion-pro-display, serif; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; margin-left: 0.3rem; position: relative; display: inline-block; padding: 0rem 0rem 1rem 0.2rem; display: none; } .bannerLead .sub:before { content:""; position: absolute; width: 100%; height: 1px; background-color: #eeeeee; bottom:0; left: -0.1rem; } .bannerLead .jpn { font-size: 2.5rem; letter-spacing: 0.08em; font-family: 'Zen Old Mincho', sans-serif; line-height: 1.75; margin-top: -0.3rem; } .bannerLead .eng { font-size: 1.05rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.04em; color: #b3a38e; line-height: 2; margin-top: 1.5rem; } /* desc */ .bannerIntro .desc { font-size: 1.3rem; letter-spacing: 0.05em; line-height: 2.3; margin-top: 0.2rem; } /* loginNav */ .loginNav { font-family: 'Zen Old Mincho', sans-serif; font-size: 1.25rem; letter-spacing: 0.06em; display: flex; margin-top: 2.4rem; } .loginBtn { width: 108%; margin-left: -4%; background-color: rgb(233 233 233); border-radius: 5rem; text-align: center; } .loginBtn a { padding: 1.5rem 0rem 1.3rem; width: 100%; display: block; } /* bannerList */ .bannerList { padding-top: 0rem; padding-bottom: 8rem; color: #fff; } .bannerList dl { width: 82.5%; margin: 0 auto; } /* bannerList -- dt */ .bannerList dt { font-family: 'Zen Old Mincho', sans-serif; font-size: 1.45rem; letter-spacing: 0.06em; border-top: 1px dotted rgba(233, 233, 233, 0.25); line-height: 6.8; box-sizing: border-box; position: relative; cursor: pointer; transition: all ease .35s; } .bannerList dt.active, .bannerList dt:hover, .bannerList dl:hover + dl dt { border-top: 1px dotted rgba(233, 233, 233, 0); } .bannerList dt.line { border-top: 1px dotted rgba(233, 233, 233, 0); } .bannerList dl:first-child dt { padding-top: 0.1rem; border-top: 1px dotted rgba(233, 233, 233, 0); } .bannerList dl:last-child dt { border-bottom: 1px dotted rgba(233, 233, 233, 0.25); } .bannerList dl:last-child dt.active, .bannerList dl:last-child dt:hover { border-bottom: 1px dotted rgba(233, 233, 233, 0); } .bannerList dt:before { content:""; background-image: url(../../assets/img/common/arrowRightwh.svg); display: block; position: absolute; opacity: 1; top: 52%; left: 3.6rem; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.7rem; height: 0.7rem; transition: all .25s ease; transition-delay: 0s; } .bannerList dt > .inner { padding: 0rem 6.8rem; position: relative; } .bannerList dt > .inner:before, .bannerList dt > .inner:after { content:""; position: absolute; top:50%; width: 1.1rem; height: 1px; right: 5.2rem; background-color: #fff; transition: all ease .35s; } .bannerList dt > .inner:after { transform: rotate(90deg); } /* hover */ .bannerList dt:after { content:""; position: absolute; height: 100%; width: 121%; background-color: rgba(143,134,134,0); display: block; top: 0; left: -10.5%; transition: all ease .35s; z-index: -1; } .bannerList dt:hover:after, .bannerList dt.active:after { background-color: rgba(143,134,134,1); } /* active */ .bannerList dt.active > .inner:after { transform: rotate(180deg); } /* bannerList -- dd */ .bannerList dd { color: #fff; background-color: rgba(143,134,134,1); border-top: 1px dotted #e9e9e936; width: 121%; margin-left: -10.5%; padding-bottom: 6.5rem; display: none; } .bannerList dd > .inner { width: 75%; margin: 0 auto; padding: 6.3rem 0 0rem; display: flex; align-items: initial; } .bannerList dd .left { width: 47%; } .bannerList dd .right { width: 53%; margin-left: auto; margin-right: 0rem; } /* bannerList -- title */ /* lead */ .bannerList .lead { font-family: 'Zen Old Mincho', sans-serif; font-size: 2.35rem; line-height: 1.6; letter-spacing: 0.11em; } /* eng */ .bannerList .eng { font-size: 0.9rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.05em; line-height: 2.1; margin-top: 1.5rem; opacity: 0.6; } /* bannerList -- desc */ .bannerList .desc { font-size: 1.25rem; letter-spacing: 0.06em; line-height: 2.3; margin-top: 0.3rem; } /* bannerList -- btn */ .bannerList .btn { margin: 3.9rem auto 0; background-color: #fff; border-radius: 4.2rem; text-align: center; width: 80%; position: relative; transition: all ease .35s; } .bannerList .btn a { font-size: 1.3rem; font-weight: 500; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-variant: small-caps; letter-spacing: 0.01em; display: block; padding: 1.4rem; position: relative; transition: all ease .35s; } body.start1 .bannerList .btn .hoverTxt > span.top { transform: translateY(9%); } body.start1 .bannerList .btn:hover .hoverTxt > span.top { transform: translateY(-100%); } body.start1 .bannerList .btn .hoverTxt > span.bottom { transform: translateY(100%); } body.start1 .bannerList .btn:hover .hoverTxt > span.bottom { transform: translateY(9%); } /* hover */ .bannerList .btn:hover { background-color: rgba(0,0,0,0.1); } .bannerList .btn:hover a { color: #fff; } /* arrow */ .bannerList .btn.arrow:after { content: ""; background-image: url(../../assets/img/common/arrowLink.svg); display: block; position: absolute; opacity: 1; top: 50%; right: 2.7rem; transform: translateY(-50%); background-size: cover; background-position: center center; width: 1.1rem; height: 1.2rem; transition: all .25s ease; transition-delay: 0s; } /* bannerGallery */ .bannerGallery { margin-left: 7.4rem; margin-bottom: 0; padding-top: 7.5rem; padding-bottom: 0rem; } .bannerGallery .slick-list { padding-right: 9.5rem; cursor: grab; } .bannerGallery .slick-slide + .slick-slide { margin-left: 0.5rem; } .bannerGallery li { box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.1); } .bannerGallery li figure { border: 0px solid #fff; box-sizing: content-box; height: 26vw; } .bannerGallery li figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --------------------------- ■ l-subscPagenav --------------------------- */ /* --- common --- */ .l-subscPagenav { position: fixed; right: -9rem; top:50%; transform: translateY(-50%); background-color: #8e8282; border-top-left-radius: 0.7rem; border-bottom-left-radius: 0.7rem; box-shadow: -1px 3px 15px -7px rgba(0,0,0,0.4); z-index: 1; transition: all ease .5s; } .l-subscPagenav ul { padding: 5.5rem 3rem 5.5rem 3.3rem; } /* scroll */ body.start3 .l-subscPagenav.active { right: 0; } body.start3 .l-subscPagenav.active.active2 { right: -9rem; } /* --- list --- */ .l-subscPagenav li { writing-mode: vertical-rl; font-size: 1.15rem; letter-spacing: 0.25em; position: relative; } .l-subscPagenav li a { font-weight: 600; color: #fff; } .l-subscPagenav li + li { margin-top: 2.5rem; padding-top: 3.3rem; } .l-subscPagenav li + li:before { content: ""; top: 0; position: absolute; left: 50%; width: 52%; transform: translateX(-49%); border-top: 1px dotted rgba(255,255,255,0.8); } /* --------------------------- ■ MemberHead --------------------------- */ /* --- title --- */ .l-archiveHead__title.passport { font-size: 7.35rem; margin-top: 0.7rem; letter-spacing: 0.12em; position: relative; display: inline-block; margin-left: -2.8rem; } .l-archiveHead__title.passport > .inner { padding-left: 2.6rem; } /* --- Logo --- */ .l-archiveHead__logo { position: relative; width: 9.8rem; height: 9.8rem; display: flex; align-items: center; justify-content: center; border-radius: 100%; margin: 0rem auto 1.9rem; } .l-archiveHead__logo img { width: 100%; opacity: 0.2; margin-top: -0.3rem; } /* --------------------------- ■ l-subscBg --------------------------- */ /* --- common --- */ section.l-subscBg { margin: 11.5rem auto 0; width: 98%; height: 45vw; background-attachment: fixed; background-size: cover; background-position: center bottom; position: relative; opacity: 0; transition: .95s all cubic-bezier(.275,0,0,1); } section.l-subscBg:before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0); transition: all ease 1.3s; } section.l-subscBg > .inner { width: 100%; height: 100%; } /* guide */ section.l-subscMember + section.l-subscBg.last.middle { margin-top: 1.1rem; } section.l-subscGuide + section.l-subscBg.last.middle { margin-top: 1.1rem; } /* middle */ section.l-subscBg.last.middle { margin-top: 19rem; margin-bottom: 0em !important; } /* last */ section.l-subscBg.last { margin-bottom: -8.6rem !important; margin-top: 15rem; height: initial; } section.l-subscBg.last > .inner { padding: 3rem 0rem 15rem; } /* start */ body.start2 section.l-subscBg { opacity: 1; } /* scroll */ section.l-subscBg.last.visible:before { background: rgba(0,0,0,0.2); } /* pre */ section.l-subscBg > .inner:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; background-color: #fff; z-index: 1; transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* start */ body.start2 section.l-subscBg > .inner:after { height: 0; } /* --- under --- */ section.l-subscBg.under { height: initial; } section.l-subscBg.under:before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); transition: all ease 1.3s; } section.l-subscBg.under > .inner { display: flex; width: 79%; padding: 13rem 0; margin: 0 auto; } section.l-subscBg.under > .inner > .left { width: 43%; } section.l-subscBg.under > .inner > .right { width: 57%; } /* scroll */ section.l-subscBg.under.active:before { background: rgba(0, 0, 0, 0.7); } /* --- membership --- */ section.l-subscBg.member { background-image: url(../../assets/img/photo/subscribe/main.jpg); } section.l-subscBg.last { background-image: url(../../assets/img/photo/subscribe/main.jpg); } /* --- about --- */ section.l-subscBg.about { background-image:url(../../assets/img/photo/about/main.jpg); } /* --- media --- */ section.l-subscBg.media { background-image:url(../../assets/img/photo/media/main.jpg); } /* --- philosophy --- */ section.l-subscBg.message { background-image:url(../../assets/img/photo/philosophy/main.jpg); } /* --- produced --- */ section.l-subscBg.produced { background-image:url(../../assets/img/photo/produced/main.jpg); } /* --- service --- */ section.l-subscBg.service { background-image:url(../../assets/img/photo/service/main.jpg); } /* --------------------------- ■ l-subscSp --------------------------- */ /* --- common --- */ section.l-subscSp { display: block; height: initial; /*position: sticky; top: 0;*/ } section.l-subscSp .l-subscIntro { opacity: 1; color: #000; } /* sticky */ section.l-subscSp.sticky { /*position: sticky; top: -10vw;*/ } /* --- philososect --- */ section.philoSect { position: relative; background-attachment: fixed; background-size: cover; background-position: center center; padding-bottom: 18rem; } section.philoSect:before { content:""; position: absolute; width: 100%; height: 100%; top:0; background-color: rgba(0,0,0,0.6); } section.about + section.philoSect { margin-top: 18rem; } section.philoSect + section.philoSect { margin-top: 0.4rem; } /* vision */ section.philoSect.vision { background-image:url(../../assets/img/photo/about/vision.jpg); } /* brandbook */ section.philoSect.brandbook { background-image:url(../../assets/img/photo/about/book.jpg); } /* movie */ section.philoSect.movie { padding-top: 0rem; padding-bottom: 1rem; } section.philoSect.movie:before { } section.philoSect.movie { background-image:url(../../assets/img/photo/about/movie.jpg); } /* --------------------------- ■ philoFv --------------------------- */ /* --- common --- */ .philoFv { position: sticky; top: 7.3rem; height: calc(100vh - 7.3rem); display: flex; align-items: center; justify-content: center; text-align: center; } /* --- cont --- */ .philoFv .cont { margin-top: 3rem; color: #fff; transition: all ease .5s; } .philoFv .eng { font-size: 6.3rem; font-family: minion-pro-display, serif; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .philoFv .jpn { font-size: 1.35rem; letter-spacing: 0.15em; font-family: 'Zen Old Mincho', sans-serif; margin-top: 2.2rem; opacity: 0.8; } /* active */ .philoFv.active .cont { opacity: 0; transform: translateY(-2vw); } /* --------------------------- ■ l-subscIntro --------------------------- */ /* --- common --- */ .l-subscIntro { display: flex; width: 72%; margin: 14rem auto 5rem; color: #fff; position: relative; z-index: 1; opacity: 0; transform: translateY(2vw); transition: .95s all cubic-bezier(.275,0,0,1); } .l-subscIntro > div { width: 50%; } /* scroll */ section.l-subscBg.visible .l-subscIntro { transform: translateY(0vw); opacity: 1; } /* under */ .l-subscBg.under .l-subscUnderIntro { color: #fff; position: relative; opacity: 0; transition: all ease .5s; } .l-subscBg.under .l-subscUnderIntro .desc { font-size: 1.5rem; font-weight: 500; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; line-height: 2.7; letter-spacing: 0.05em; } section.l-subscBg.under.active .l-subscUnderIntro { opacity: 1; } /* mediapolicy */ .mediapolicy .l-subscIntro { width: 81%; } .mediapolicy .l-subscIntro .left { width: 44%; } .mediapolicy .l-subscIntro .right { width: 56%; } .mediapolicy .l-subscIntro .right > .inner { position: sticky; top: 9rem; } /* philoSect */ section.philoSect .l-subscIntro { margin-top: 0rem; } /* --- title --- */ .l-subscIntro__lead { position: sticky; top: 37.4rem; padding-bottom: 21rem; } .l-subscIntro__lead > span { display: block; } .l-subscIntro__lead .jpn { font-size: 2.75rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.06em; } .l-subscIntro__lead .eng { font-size: 1.3rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.065em; color: #ccb69e; margin-top: 1.6rem; margin-left: 0.2rem; } /* under */ .l-subscBg.under .l-subscIntro__lead { position: initial; padding-bottom: 4.8rem; } /* mediaplicy */ .mediapolicy .l-subscIntro__lead { position: initial; padding-bottom:6rem; } /* philoSect */ section.philoSect .l-subscIntro__lead { color: #fff; } /* preorder */ body.preorder .l-subscIntro__lead { position: relative; top: initial; padding-bottom: initial; margin-bottom: 5rem; } /* --- desc --- */ .l-subscIntro p.desc { font-size: 1.5rem; font-weight: 500; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; line-height: 2.7; letter-spacing: 0.05em; width: 104%; margin-top: -0.5rem; } /* mediaplicy */ .mediapolicy .l-subscIntro p.desc { width: 100%; } /* philoSect */ section.philoSect .l-subscIntro p.desc { color: #fff; } /* --------------------------- ■ brandBook --------------------------- */ /* --- common --- */ .brandBook { background: #FAFAFA; border: 1px solid #EDEDED; margin-left: -6%; width: 112%; border-radius: 0.2rem; margin-top: 6rem; transition: all ease .35s; } .brandBook .inner { padding: 3.2rem; display: flex; align-items: center; } .brandBook + .brandBook { margin-top: 0.8rem; } /* under */ section.l-subscBg.under .brandBook { margin-top: 7rem; } /* hover */ .brandBook:hover { background: #f3f3f3; } /* media */ .brandBook.media { display: none; } /* stars */ section.l-articleStars .brandBook { margin-top: 4.5rem; } /* --- left --- */ .brandBook .left { width: 33%; height: 8.9vw; } /* under */ section.l-subscBg .brandBook .left { height: 8vw; } /* book */ ._df_thumb { width: 100% !important; height: 100% !important; margin: 0 !important; } ._df_thumb:hover ._df_book-cover { box-shadow: 3px 0 12px rgba(0,0,0,0.3) !important; } .df-lightbox-close { } .df-lightbox-close:hover { color:#444 !important; background-color:transparent !important; border-color:transparent !important; } ._df_thumb ._df_book-title { font-size: 1rem !important; letter-spacing: 0.25rem !important; font-family: adobe-garamond-pro, serif !important; text-transform: uppercase !important; } /* thumb */ .brandBook__thumb { width: 100%; height: 100%; } .brandBook__thumb figure { width: 100%; height: 100%; } .brandBook__thumb figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* stars */ section.l-articleStars .brandBook .left { width: 35%; height: 6.3vw; } /* --- right --- */ .brandBook .right { width: calc(63% - 8.7rem); margin-left: 6.6rem; } .brandBook__title { font-size: 2.05rem; font-family: minion-pro-display,"Hiragino Mincho ProN", serif; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; } .brandBook__desc { font-family: adobe-garamond-pro, serif; font-size: 1rem; color: #b3a08b; letter-spacing: 0.02em; margin-top: 1.6rem; line-height: 2; } /* stars */ section.l-articleStars .brandBook .right { width: calc(65% - 5.7rem); margin-left: 3.9rem; } section.l-articleStars .brandBook__title { font-size: 1.5rem; } section.l-articleStars .brandBook__desc { font-size: 1rem; line-height: 1.5; } /* --------------------------- ■ service_link --------------------------- */ /* --- common --- */ .service_link { border: 1px solid #e5e5e5; border-radius: 0.4rem; margin-left: 7.5rem; width: calc(100% + -2.1rem); } .service_link + .service_link { margin-top: 1.5rem; } /* --- info --- */ .service_info { background: #e2e2e2; font-size: 1.15rem; letter-spacing: 0.12em; font-family: 'Zen Old Mincho', sans-serif; padding: 1.7rem 3.4rem; } /* --- box --- */ .service_box { padding: 4.4rem 5.4rem; display: flex; transition: all ease .5s; } .service_link:hover .service_box { background: #f5f5f5; } /* --- image --- */ .service_image { width: 26%; height: 9.9vw; } .service_image figure { height: 100%; width: 100%; } .service_image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --- cont --- */ .service_cont { width: calc(73% - 5.8rem); margin-left: 5.8rem; } /* title */ .service_cont .title .eng { font-size: 2.4rem; font-family: minion-pro-display, "Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 600; letter-spacing: 0.185em; margin-top: -0.4rem; text-transform: uppercase; display: block; } .service_cont .title .jpn { font-size: 1.05rem; letter-spacing: 0.1em; font-family: 'Zen Old Mincho', sans-serif; font-weight: 400; margin-top: 0.7rem; opacity: 0.6; display: block; } /* desc */ .service_cont .desc { font-size: 1.15rem; margin-top: 1.9rem; line-height: 2.05; } /* readmore */ .service_link .readBtn { font-size: 1.2rem; font-family: adobe-garamond-pro, sans-serif; display: inline-block; text-transform: lowercase; letter-spacing: 0.135em; margin-top: 1.9rem; margin-left: 0.2rem; position: relative; } /* before */ .service_link .readBtn .arrow:before { left: 0.2rem; transition-delay: 0.25s; } .service_link .readBtn:hover .arrow:before { left: 0.4rem; opacity: 0; transition-delay: 0s; } /* after */ .service_link .readBtn .arrow:after { left: -0.1rem; opacity: 0; transition-delay: 0s; } .service_link .readBtn:hover .arrow:after { left: 0.2rem; opacity: 1; transition-delay: 0.25s; } /* border */ .service_link .readBtn:before { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(1, 1); transform-origin: left top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); } .service_link .readBtn:hover::before { transform-origin: right top; transform: scale(0, 1); } .service_link .readBtn:after { content:""; position: absolute; bottom:-0.4rem; left: -0.4rem; width: 104%; height: .1rem; background-color: #e9ddb8; transform: scale(0, 1); transform-origin: right top; transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1); transition-delay: 0.3s; } .service_link .readBtn:hover::after { transform-origin: left top; transform: scale(1, 1); } /* --------------------------- ■ l-subscNav --------------------------- */ /* --- common --- */ .l-subscNav { position: sticky; margin-left: 8.1rem; width: calc(100% + -0.5rem); top: 16.7rem; opacity: 0; transition: all ease .5s; } .l-subscNav__list { background-color: #fff; padding: 4.8rem 6.2rem 4.4rem; border-radius: 0.4rem; position: relative; box-shadow: 3px 3px 15px -7px rgba(0, 0, 0, 0.1); border: 1px solid #efefef; } .l-subscNav__list + .l-subscNav__list { margin-top: 0.7rem; } .l-subscNav__list:before { content:""; position: absolute; width: 99.5%; border-top: 1px solid #000; top:0.2rem; left: 0.25%; } .l-subscNav__list > .inner { display: flex; align-items: center; } .l-subscNav__list .left { width: 62%; margin-right: 7%; } .l-subscNav__list .right { width: 32%; } /* sirius */ .l-subscNav__list.sirius > .inner { filter: blur(4px); } .l-subscNav__list.sirius { opacity: 0.7; pointer-events: none; filter: grayscale(1); } /* scroll */ section.l-subscBg.under.active .l-subscNav { opacity: 1; } /* --- top --- */ .l-subscNav__list .top { display: flex; } /* title */ .l-subscNav__title { } .l-subscNav__title .eng { font-size: 2.8rem; font-family: minion-pro-display, serif; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; display: inline-block; } .l-subscNav__title .jpn { font-size: 1rem; letter-spacing: 0.04em; opacity: 0.5; margin-top: 1rem; font-family: 'Zen Old Mincho', sans-serif; } /* exp */ .l-subscNav__exp { font-size: 1.05rem; letter-spacing: 0.05em; font-family: 'Zen Old Mincho', sans-serif; display: flex; padding-top: 0.5rem; line-height: 2; } .l-subscNav__exp:before { content:""; display: block; height: 100%; border-left: 1px dotted #cbc6c6; margin-left: 2.7rem; padding-left: 2.3rem; } /* --- middle --- */ .l-subscNav__list .middle { border-top: 1px dotted #cbc6c6; margin-top: 2.3rem; padding-top: 1.8rem; } /* info */ .l-subscNav__info { display: flex; align-items: baseline; } .l-subscNav__info li + li { margin-left: 1rem; } .l-subscNav__info .jpn { font-size: 1.05rem; letter-spacing: 0.04em; font-family: 'Zen Old Mincho', sans-serif; } .l-subscNav__info .num { font-size: 2.1rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.04em; margin-left: 0.5rem; } .l-subscNav__info .txt { font-size: 1.25rem; letter-spacing: 0.04em; font-family: 'Zen Old Mincho', sans-serif; } /* op */ .l-subscNav__info li:before { font-size: 1.1rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.04em; } .l-subscNav__info .price:before { content:"price:"; } .l-subscNav__info .option:before { content:"option:"; } /* --- desc --- */ .l-subscNav__list .desc { font-size: 1.1rem; letter-spacing: 0.04em; line-height: 2; margin-top:5.2rem; } /* --- bottom --- */ .l-subscNav__btn { font-size: 1rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; background-color: #f1f1f1; border-radius: 5rem; margin-top: 2.4rem; text-align: center; margin-left: -0.9rem; transition: all ease .5s; } .l-subscNav__btn .padding { padding: 1.5rem 0 1.4rem 0; display: block; width: 100%; height: 100%; } .l-subscNav__btn:hover { background-color: #d8d7d7; } /* short */ .l-subscNav__btn.short { width: 71%; } /* gold */ .gold .l-subscNav__btn { background: #e0d9cd; } .gold .l-subscNav__btn:hover { background: #c5beb2; } /* --- image --- */ .l-subscNav__image { width: 100%; height: 12vw; margin-right: -1.2rem; margin-left: 0.5rem; } .l-subscNav__image figure { height: 100%; width: 100%; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; overflow: hidden; } .fadeInUp .l-subscNav__image figure { transform: scale(1); } .l-subscNav__image figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } .fadeInUp .l-subscNav__image figure img { transform: scale(1); } /* --------------------------- ■ l-philoNav --------------------------- */ /* --- common --- */ .l-philoNav { position: fixed; bottom: 4.6rem; left: 50%; transform: translateX(-50%); z-index: 99; background-color: #EFEFEF; border-radius: 7rem; box-shadow: 0px 0px 5px -2px #777777; opacity: 0; transition: all ease .5s; } .l-philoNav ul { display: flex; padding: 2.4rem 5.5rem 2.2rem; align-items: center; white-space: nowrap; } .l-philoNav ul li { font-size: 1.15rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.275em; line-height: 1; text-transform: uppercase; } .l-philoNav ul li + li:before { content:"・"; color:#C4AF7F; margin-right: 0.9rem; margin-left: 1.2rem; font-size: 100%; } /* active */ .l-philoNav.active { opacity: 1; } .l-philoNav.active.active2 { opacity: 0; } /* --------------------------- ■ l-subscGuide --------------------------- */ /* --- common --- */ section.l-subscGuide { background: #f0f0f0; padding: 13.3rem 0 12rem; width: 98.1%; margin: 1.2rem auto 0; } section.l-subscGuide > .inner { width: 82%; margin: 0 auto; } .l-subscGuide__title { font-size: 2.7rem; letter-spacing: 0.475em; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; text-align: center; } /* --- list --- */ ul.l-subscGuide__list { display: flex; flex-wrap: wrap; margin-top: 11.6rem; } /* cont */ li.l-subscGuide__cont { width: 49.5%; text-align: center; position: relative; background-color: #fff; box-sizing: border-box; border-radius: 0.3rem; box-shadow: 3px 0px 9px -7px rgba(0,0,0,0.6); } li.l-subscGuide__cont:before, li.l-subscGuide__cont:after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 98.5%; border-top: 1px solid #d8d8d8; display: block; z-index: 1; transition: all ease .35s; } li.l-subscGuide__cont:before { top: 0.5rem; } li.l-subscGuide__cont:after { bottom: 0.5rem; } li.l-subscGuide__cont + li.l-subscGuide__cont { margin-left: 1%; } li.l-subscGuide__cont + li.l-subscGuide__cont:nth-child(3) { margin-left: 0; } li.l-subscGuide__cont:nth-child(n+3) { margin-top: 1.2rem; } li.l-subscGuide__cont > .inner { padding: 5.6rem 0 6rem; width: 58%; margin: 0 auto; } /* hover */ li.l-subscGuide__cont:hover:before, li.l-subscGuide__cont:hover:after { border-top: 1px solid #000; } /* icon */ li.l-subscGuide__cont:nth-child(1) .icon img { width: 3.7rem; } li.l-subscGuide__cont:nth-child(2) .icon img { width: 3.1rem; } li.l-subscGuide__cont:nth-child(3) .icon img { width: 3.3rem; } li.l-subscGuide__cont:nth-child(4) .icon img { width: 2.3rem; } /* title */ li.l-subscGuide__cont .title { font-size: 2rem; letter-spacing: 0.04em; font-family: 'Zen Old Mincho', sans-serif; margin-top: 1.8rem; } /* desc */ li.l-subscGuide__cont .desc { font-size: 1.15rem; letter-spacing: 0.04em; line-height: 1.95; margin-top: 2.2rem; text-align: left; opacity: 0.7; } li.l-subscGuide__cont .desc a { font-size: 98%; font-weight: 600; color: #6f675c; text-decoration: underline; } /* --------------------------- ■ l-subscMember --------------------------- */ /* --- common --- */ section.l-subscMember { background: #e5e5e5; padding: 12rem 0 12rem; width: 97.9%; margin: 21rem auto 0; } section.l-subscMember > .inner { } /* title */ body.membership .memberGuide__title { font-size: 2.3rem; margin-bottom: 6.5rem; letter-spacing: 0.475em; } /* --- guide --- */ body.membership .memberGuide { width: 53%; padding: 8.9rem 13.1rem 9.8rem; margin: 0 auto 0; } section.l-subscMember .memberGuide a { font-size: 98%; font-weight: 600; color: #6f675c; text-decoration: underline; } /* list */ body.membership .memberGuide__list { font-size: 1.4rem; line-height: 1.75; } body.membership .memberGuide__list .num { font-size: 1.6rem; } ul.memberGuide__list li + li { margin-top: 1.2rem; } /* --------------------------- ■ l-subscTable --------------------------- */ /* --- common --- */ .l-subscTable { width: 84.8%; position: relative; margin: 11rem auto 0; font-size: 1.35rem; letter-spacing: 0.04em; font-family: 'Zen Old Mincho', sans-serif; text-align: center; display: none; } .l-subscTable__title { font-size: 2.45rem; font-family: minion-pro-display, serif; font-weight: 600; color: #fff; letter-spacing: 0.28em; text-transform: uppercase; display: inline-block; } .l-subscTable table { width: 100%; text-align: center; background-color: #fff; border-radius: 3px; margin-top: 8.7rem; } /* --- Hor --- */ .l-subscTable tr { line-height: 2; } .l-subscTable tr:nth-child(1) { line-height: 2; } .l-subscTable tr + tr { border-top: 1px dotted #ccc; } /* --- Ver --- */ .l-subscTable td { width: 27.66666%; padding: 2.7rem 0rem; } .l-subscTable td:nth-child(1) { width: 17%; } .l-subscTable td + td { border-left: 1px dotted #ccc; } /* --- title --- */ .l-subscTable tr.title td { font-size: 2.6rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-top: 0px solid #000; padding: 2.2rem 0rem 2.4rem; } .l-subscTable tr.title td span { font-size: 1.1rem; display: block; font-weight: 500; letter-spacing: 0.2em; margin-top: -0.8rem; opacity: 0.8; } /* gray */ .l-subscTable tr.title td.gray { border-top: 6px solid #EAEAEA; } /* silver */ .l-subscTable tr.title td.silver { border-top: 6px solid #bdbdbd; } /* gold .l-subscTable tr.title td.gold { border-top: 6px solid #c7bcaa; } /* red */ .l-subscTable tr.title td.red { border-top: 6px solid #B4817F; } /* --- price --- */ .l-subscTable .price { display: flex; justify-content: center; align-items: center; line-height: 1.6; } .l-subscTable .price .num { font-size: 2.6rem; font-family: adobe-garamond-pro, serif; font-weight: 500; letter-spacing: 0.04em; margin-left: 0.7rem; margin-right: 0.6rem; margin-top: -0.1rem; } .l-subscTable .price .jpn { font-size: 1.1rem; } .l-subscTable .price .tax { font-size: 1.1rem; margin-left: 0.6rem; } /* --------------------------- ■ FAQ --------------------------- */ /* --- Common --- */ .l-pageFaq { width: 100.7%; margin-left: -0.35%; } .l-pageFaq__sect:first-child { padding-top: 2.4rem; margin-top: -4rem; } .l-pageFaq__sect + .l-pageFaq__sect { padding-top: 3rem; } .l-pageFaq__sect:last-child { border-bottom: 1px dotted #dedede; } /* --- Head --- */ .l-pageFaq__head { line-height: 7.9; border-top: 1px solid #cacaca; } .l-pageFaq__head > .inner { width: 96.5%; margin: 0 auto; display: flex; align-items: center; } .l-pageFaq__head .jpn { font-size: 2rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.08em; } .l-pageFaq__head .eng{ font-size: 1.3rem; font-family: adobe-garamond-pro, serif; color: #9f9f9f; letter-spacing: 0.06em; margin-left: 2.9rem; margin-top: 0.4rem; } /* --- List --- */ .l-pageFaq__list dl { border-top: 1px dotted #dedede; } /* dt */ .l-pageFaq__list dt { font-size: 1.55rem; font-family: 'Zen Old Mincho', sans-serif; letter-spacing: 0.04em; padding-top: 5.1rem; padding-bottom: 5.1rem; position: relative; cursor: pointer; } .l-pageFaq__list dt:before { position: absolute; content: ""; top: 49%; right: 2.7rem; width: 0.6rem; height: 0.6rem; border-top: 1px solid #b7a181; border-right: 1px solid #b7a181; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); z-index: 0; transition: all ease .25s; } .l-pageFaq__list dt.active:before { top: 53%; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .l-pageFaq__list dt > .inner { width: 98.5%; margin: 0 auto; transition: all ease .35s; } .l-pageFaq__list dt:hover > .inner { opacity: 0.6; } .l-pageFaq__list dt.active:hover > .inner { opacity: 1; } .l-pageFaq__list dt span { color: #9f8a6b; font-size: 1.25rem; font-family: 'Benne', serif; letter-spacing: 0.09em; margin-right: 2.4rem; margin-left: 1.3rem; } /* dd */ .l-pageFaq__list dd { border-top: 0px dotted #e8e8e8; padding-top: 0; opacity: 0.9; padding-bottom: 9.5rem; display: none; } .l-pageFaq__list dd > .inner { width: 99.4%; margin: 0 auto; } .l-pageFaq__list dd .cont { width: 54%; font-size: 1.3rem; letter-spacing: 0.035em; line-height: 2.15; opacity: 0.8; margin-left: 6.7rem; margin-top: -0.9rem; position: relative; } .l-pageFaq__list dd .cont:before { content: ""; position: absolute; top: 0.5rem; height: 96%; border-left: 1px solid #ebebeb; left: -4.4rem; } .l-pageFaq__list dd .cont a { font-size: 98%; font-weight: 600; color: #6f675c; text-decoration: underline; } .l-pageFaq__list dd .cont i { display: inline; margin-left: 0.3rem; font-size: 81%; } /* --------------------------- ■ Login --------------------------- */ /* before */ article.l-articleLogin .codoc-connect-widget { max-width: initial !important; margin: initial !important; margin-top: 4.3rem !important; } article.l-articleLogin .codoc-connect-widget-login .codoc-connect-widget-body { padding: initial !important; border: initial !important; } article.l-articleLogin .codoc-connect-widget-body-bottom .codoc-btn { font-size: 1.4rem !important; width: 100% !important; padding: 2.8rem 0.8rem; letter-spacing: 0.02em !important; transition: all ease .35s; border-radius: 5rem !important; background: #000; } /* after */ article.l-articleLogin .codoc-connect-widget-login-header-name-profile { display: none !important; } article.l-articleLogin .codoc-connect-tooltip { width: 100% !important; padding: initial !important; display: block !important; position: relative !important; box-shadow: initial !important; } article.l-articleLogin .codoc-connect-widget-login-header-name .codoc-connect-tooltip-title { display: none !important; } article.l-articleLogin .codoc-connect-widget .codoc-btn-border { display: none !important; } article.l-articleLogin .codoc-connect-widget-login-header-name .codoc-connect-tooltip-buttons .codoc-btn { font-size: 1.4rem !important; width: 100% !important; letter-spacing: 0.02em !important; padding: 1.6rem 0.8rem !important; transition: all ease .35s; } /* ><><><><><><><><><><><><><><><><> ▼ Stockist ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ section.l-archiveCont.stockist { width: calc(99.3% - 17rem* 2); padding: 14.5rem 17rem; margin: 10.2rem auto -9.4rem; background: #ccc; background-image: url(../../assets/img/photo/stockist/main.jpg); background-size: cover; background-position: center center; background-attachment: fixed; transform: initial !important; } .l-archiveCont.stockist > .inner { background-color: #fff; } .l-stockCont { padding: 13rem 11.5rem; } /* --------------------------- ■ l-stockNav --------------------------- */ nav.l-stockNav { margin-top: -2.3rem; margin-left: 0.4rem; } nav.l-stockNav ul { display: flex; justify-content: center; } nav.l-stockNav li { font-size: 1.3rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.27em; } nav.l-stockNav li a { opacity: 0.4; position: relative; padding-left: 1.9rem; transition: all ease .5s; } nav.l-stockNav li a:before { content: ""; background-image: url(../../assets/img/common/arrowBrown.svg); display: block; position: absolute; opacity: 0.6; top: 49%; left: 0; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.65rem; } nav.l-stockNav li + li:before { content:"/"; padding-left: 2.2rem; padding-right: 1.4rem; opacity: 0.4; } nav.l-stockNav li.magazine a { pointer-events: none; } /* current */ nav.l-stockNav li a.current { opacity: 1; } nav.l-stockNav li a:hover { opacity: 1; } nav.l-stockNav li a.current:after { content: ""; position: absolute; width: 108%; border-bottom: 1px solid #c6bfaf; left: 49%; transform: translateX(-50%); bottom: -1rem; } /* --------------------------- ■ l-stockMid --------------------------- */ /* --- common --- */ .l-stockMid { display: flex; margin-top: -1.6rem; align-items: center; flex-flow: column; } .l-stockMid .right { } /* --- l-stockCountry --- */ .l-stockCountry { font-size: 6.7rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-left: 0.3rem; } .l-stockCountry ul { display: flex; flex-wrap: wrap; } .l-stockCountry li + li:before { content:"/"; padding-left: 1.3rem; padding-right: 0rem; opacity: 0.1; } .l-stockCountry li a { opacity: 0.3; transition: all ease .5s; } .l-stockCountry li + li a { margin-left: -0.5rem; } .l-stockCountry li.world a { pointer-events: none; } /* current */ .l-stockCountry li a:hover { opacity: 1; } .l-stockCountry li a.current { opacity: 1; } /* --- l-stockInfo --- */ .l-stockInfo { margin-top: 3.7rem; } .l-stockInfo ul { display: flex; } .l-stockInfo li { font-size: 1.4rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; width: 20rem; background-color:#efefef; border:1px solid #e6e6e6; text-align: center; border-radius: 3rem; line-height: 1; letter-spacing: 0.04em; transition: all ease .5s; cursor: pointer; } .l-stockInfo li.wanted { color:#fff; background-color: #535353; display: none; } .l-stockInfo li + li { margin-left: 0.6rem; } .l-stockInfo li a { display: block; } .l-stockInfo li .wrap { padding: 1.8rem 0 1.8rem; } .l-stockInfo li span { position: relative; padding-left: 2rem; margin-left: -1.2rem; } /* hover */ .l-stockInfo li.map:hover { background-color: #e2e2e2; } .l-stockInfo li.wanted:hover { background: #484848; } /* map */ .l-stockInfo li.map span { letter-spacing: 0.075em; } .l-stockInfo li.map span:before { content: ""; background-image: url(../../assets/img/common/map.svg); display: block; position: absolute; opacity: 0.6; top: 50%; left: 0; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.95rem; height: 1.35rem; } /* wanted */ .l-stockInfo li.wanted span:before { content: ""; background-image: url(../../assets/img/common/arrowBrown.svg); display: block; position: absolute; opacity: 0.6; top: 46%; left: 0; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.65rem; } /* --------------------------- ■ l-stockBottom --------------------------- */ /* --- common --- */ .l-stockList { margin-top: 11rem; border-top: 2px solid #000; border-bottom: 1px solid #000; } /* --- title --- */ .l-stockList__title { line-height: 6.5; text-transform: uppercase; cursor: pointer; transition: all ease .5s; position: relative; } .l-stockList dl:nth-child(2n) .l-stockList__title { background: #fafafa; } .l-stockList__title:hover, .l-stockList__title.active { background: #f6f6f6; } dl + dl .l-stockList__title { border-top: 1px dotted #ccc; } .l-stockList__title .eng { font-size: 1.55rem; font-family: minion-pro-display, serif; font-weight: 600; letter-spacing: 0.36em; margin-left: 3.9rem; transition: all ease .5s; } .l-stockList__title:hover .eng { color: #775937; } .l-stockList__title .jpn { font-size: 1.15rem; font-family: 'Zen Old Mincho', sans-serif; margin-left: 1.4rem; padding-left: 2.4rem; position: relative; letter-spacing: 0.35em; opacity: 0.8; transition: all ease .5s; } .l-stockList__title:hover .jpn { color: #816D56; opacity: 1; } .l-stockList__title .jpn:before { content: ""; position: absolute; height: 1rem; background: #bababa; width: 1px; top: 54%; transform: translateY(-50%); left: 0; } /* cross */ .l-stockList__title:before, .l-stockList__title:after { content: ""; display: block; position: absolute; width: 1.1rem; top: 49%; transform: translateY(-50%) rotate(0deg); border-top: 1px solid #000; right: 4rem; transition: all ease .5s; } .l-stockList__title:after { transform: translateY(-50%) rotate(90deg); } .l-stockList__title.active:after { transform: translateY(-50%) rotate(0deg); } /* --- cont --- */ .l-stockList__cont{ border-top: 1px dotted #ccc; display: none; } .l-stockList__cont ul { display: flex; flex-flow: wrap; width: 95.3%; margin: 4.9rem auto 2.7rem; } .l-stockList__cont li { width: 27.8%; margin-bottom: 5.5rem; } .l-stockList__cont li + li { margin-left: 7%; } .l-stockList__cont li:nth-child(3n+4) { margin-left: 0; } /* title */ .l-stockList__cont .title { font-size: 1.4rem; font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; letter-spacing: 0.075em; line-height: 1.35; display: flex; } .l-stockList__cont .title:before { content: "◼︎"; display: block; font-size: 117%; margin-right: 0.5rem; margin-left: 0rem; } .l-stockList__cont li .title a { transition: all ease .5s; } .l-stockList__cont li .title a:hover { opacity: 0.7; } /* cat */ .l-stockList__cont .cat { font-size: 1rem; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; letter-spacing: 0.075em; margin-top: 1.1rem; margin-left: -0.3rem; } /* image */ .l-stockList__cont .cont { margin-top: 1.3rem; } .l-stockList__cont .image { width: 14rem; height: 5.5vw; margin-right: 8%; overflow: hidden; } .l-stockList__cont figure { height: 100%; width: 100%; } .l-stockList__cont figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* desc */ .l-stockList__cont .desc { font-size: 1.05rem; width: 87%; letter-spacing: 0.05em; line-height: 1.9; opacity: 0.7; } .l-stockList__cont .desc span { margin-left: -0.5rem; font-weight: 600; display: block; margin-bottom: 0.3rem; } /* btn */ .l-stockBtn { margin-top: 2.3rem; width: 99.4%; margin-left: -2.5%; display: flex; } .l-stockList__cont .btn { text-align: center; font-size: 0.9rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; width: 100%; } .l-stockList__cont .btn + .btn { margin-left: -1px; } .l-stockList__cont .btn a { display: block; padding: 0.9rem 0 0.8rem; border: 1px solid #e6e6e6; border-radius: 0.1rem; box-sizing: border-box; transition: all ease .5s; } .l-stockList__cont .btn.url a { background-color: #efefef; } .l-stockList__cont .btn span { position: relative; padding-left: 1.4rem; margin-left: -0.7rem; display: inline-block; } /* hover */ .l-stockList__cont .btn a:hover { background-color: #e2e2e2; } /* article */ .l-stockList__cont .btn.article a { background: #555555; color: #fff; } .l-stockList__cont .btn.article a:hover { background: #484848; } /* url */ .l-stockList__cont .btn.url span:before { content: ""; background-image: url(../../assets/img/common/link.svg); display: block; position: absolute; opacity: 0.6; top: 46%; left: -3%; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.8rem; height: 0.8rem; } /* map */ .l-stockList__cont .btn.map span:before { content: ""; background-image: url(../../assets/img/common/map.svg); display: block; position: absolute; opacity: 0.6; top: 46%; left: 0; transform: translateY(-50%); background-size: cover; background-position: center center; width: 0.6rem; height: 0.88rem; } /* ><><><><><><><><><><><><><><><><> ▼ Outline ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-pageOutline --------------------------- */ /* --- common --- */ .l-pageOutline { border-top: 1px dotted #ebebeb; border-bottom: 0px dotted #ebebeb; margin-top: 5.4rem; padding-top: 5.4rem; padding-bottom: 3rem; } .l-pageOutline dl { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; display: flex; padding: 1.3rem 0; } .l-pageOutline dt { font-size: 1.35rem; text-transform: lowercase; font-variant: small-caps; margin-top: 0.1rem; width: 24.2%; padding-left: 0%; letter-spacing: 0.035em; } .l-pageOutline dd { font-size: 1.45rem; letter-spacing: 0.05em; width: 81%; } /* --- list --- */ ul.l-pageOutline__list li { font-size: 1.3rem; } ul.l-pageOutline__list li + li { margin-top: 0.9rem; } /* ><><><><><><><><><><><><><><><><> ▼ Contact ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-articleTitle --------------------------- */ /* --- common --- */ section.l-articleTitle { width: 72%; margin: 0 auto 20rem; padding-left: 7.3rem; position: sticky; top: 17rem; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); } article.l-articleLogin section.l-articleTitle { margin:0 auto 7rem; } body.start2 section.l-articleTitle { opacity: 1; transform: translateY(0rem); } /* subsc */ .l-article__container.subsc section.l-articleTitle { margin-bottom: 0; padding-bottom: 5rem; } /* commercial */ article.commercial section.l-articleTitle { padding-left: 15.5rem; } /* --- title --- */ .l-articleTitle__title { font-size: 5.9rem; font-family: minion-pro-display,"Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.12em; } .l-articleTitle__title span { display: block; font-size: 1.25rem; letter-spacing: 0.06em; font-family: 'Zen Old Mincho', sans-serif; color: #9f9f9f; font-weight: 500; margin-top: 0.9rem; } /* Guide */ .l-articleTitle__title.guide { font-size: 5.4rem; } /* Faq */ .l-articleTitle__title.faq { font-size: 6.7rem; margin-left: 2.1rem; } /* Outline */ .l-articleTitle__title.outline { font-size: 8.9rem; text-align: center; } /* commercial */ article.commercial .l-articleTitle__title { font-size: 2.5rem; font-weight: 500; } article.commercial .l-articleTitle__title span { margin-top: 1.1rem; font-family: adobe-garamond-pro,' sans-serif'; text-transform: capitalize; } /* --- desc --- */ p.l-articleTitle__desc { font-size: 1.3rem; line-height: 2.1; width: 92%; text-align: justify; letter-spacing: 0; margin-top: 5.7rem; } p.l-articleTitle__desc a { text-decoration: underline; text-decoration-color: #cdb99c; color: #92846f; } /* login */ article.l-articleLogin p.l-articleTitle__desc { width: 100%; text-align: left; margin: 4.9rem auto 0; } /* --- mail --- */ .l-articleTitle__mail { font-family: adobe-garamond-pro,' sans-serif'; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.025em; margin-top: 2.7rem; } .l-articleTitle__mail span { font-size: 1.6rem; } .l-articleTitle__mail span:after { content:":"; margin-left: .5rem; margin-right: .6rem; } .l-articleTitle__mail a { text-decoration: underline; } /* --------------------------- ■ l-article__form --------------------------- */ /* --- common --- */ section.l-article__form { width: 92%; margin-top: 1.7rem; opacity: 0; transform: translateY(1.5rem); transition: .95s all cubic-bezier(.275,0,0,1); } body.start2 section.l-article__form { opacity: 1; transform: translateY(0rem); } /* --- formCont --- */ .formCont + .formCont { margin-top: 3.8rem; } .formCont + .formCont.confirm { margin-top: 0.6rem; } .formBorder { border-top: 1px dotted #ccc; margin-top: 5.5rem; margin-bottom: 5.5rem; } /* --- formTitle --- */ .formTitle { font-size: 1.4rem; font-family: adobe-garamond-pro, serif; font-weight: 300; letter-spacing: 0.04em; margin-bottom: 1.8rem; margin-left: .3rem; } .formTitle span.required { font-size: 1.25rem; color:red; margin-left: 0.2rem; } /* --- input/textrea --- */ .formCont input { font-size: 1.3rem; letter-spacing: 0.03em; width: calc(100% - 6rem); border: 1px solid #f0f0f0; background: #fcfcfc; line-height: 6.1; padding-left: 3rem; padding-right: 3rem; border-radius: 0.2rem; outline: none; transition: all ease .35s; } .formCont input:focus { border:1px solid #000; } .formCont input.wpcf7-not-valid { border:1px solid #dc3232; } .formCont input.wpcf7c-conf { box-shadow: 0 0 0 1000px #f4f4f4 inset !important; border: 1px solid #d4d4d4; } .formCont input::placeholder { color: #616161; } .formCont textarea { font-size: 1.3rem; letter-spacing: 0.03em; height: 31rem; width: calc(100% - 6rem); border: 1px solid #f0f0f0; background: #fcfcfc; line-height: 1.5; padding: 3.3rem 3rem; border-radius: 0.2rem; outline: none; resize: vertical; transition: all ease .35s; } .formCont textarea:focus { border:1px solid #000; } .formCont textarea.wpcf7-not-valid { border:1px solid #dc3232; } .formCont textarea.wpcf7c-conf { box-shadow: 0 0 0 1000px #f4f4f4 inset !important; border: 1px solid #d4d4d4; } .formCont textarea::placeholder { color: #616161; } input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; } /* --- policy --- */ .accept { font-size: 1.25rem; margin-top: 2.5rem; margin-left: .1rem; position: relative; display: flex; } .accept span.wpcf7-list-item { margin:0; margin-top: 0.2rem; margin-right: 1.4rem; } .accept span.mark { color:red; } .accept a { text-decoration: underline; } input[type="checkbox"] { display: none; } span.wpcf7-list-item-label { display: block; height: 1.3rem; width: 1.3rem; margin-top: 0.5rem; border: 1px solid #e4e3e3; background: #fcfcfc; position: relative; cursor: pointer; } .wpcf7-not-valid span.wpcf7-list-item-label { border: 1px solid #dc3232; } span.wpcf7-list-item-label::before { content: " "; position: absolute; width: 58%; height: 56%; border-radius: .1rem; background: rgba(205, 185, 156, 0.97); left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; } input[type="checkbox"]:checked + span.wpcf7-list-item-label::before, input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { opacity: 1; } input.wpcf7c-conf-hidden + span.wpcf7-list-item-label::before, input.wpcf7c-conf-hidden + span.wpcf7-list-item-label::after { opacity: 1; } .wpcf7-spinner { display: none !important; } /* --- btn --- */ .btnList { margin-top: 3.9rem; margin-left: -0.5%; } .btnList input { font-size: 1.3rem; letter-spacing: 0.02em; border:none; width: 101%; background-color: #494949; line-height: 5.5; color: #fff; border-radius: 4.3rem; outline: none; } .btnList input.wpcf7c-btn-back { background-color: #a6a6a6; } .btnList input.wpcf7c-btn-back + input { margin-top: .7rem; } .btnList .ajax-loader { display: none !important; } /* --- Message --- */ /* common */ .wpcf7-not-valid-tip { display: none !important; } .wpcf7 form .wpcf7-response-output { font-size: 1.3rem; border: 2px solid #ededed !important; margin: 0; margin-top: 3.9rem; line-height: 2.15; width: calc(101% - 7.2rem); padding: 3rem 3.6rem; margin-left: -0.5%; } /* ><><><><><><><><><><><><><><><><> ▼ SitePolicy ><><><><><><><><><><><><><><><><> /* --------------------------- ■ l-articleTitle --------------------------- */ /* --- nav --- */ .l-articleTitle__nav { margin-top: 6.5rem; } .l-articleTitle__nav ul { } .l-articleTitle__nav ul li { font-size: 1.3rem; letter-spacing: 0.05em; display: flex; } .l-articleTitle__nav ul li:before { content:"-"; margin-right: 0.8rem; margin-left: -0.2rem; } .l-articleTitle__nav ul li + li { margin-top: 0.5rem; } /* --------------------------- ■ l-articlePolicy --------------------------- */ /* --- common --- */ section.l-articlePolicy { width: 88%; padding-top: 8.9rem; margin-top: -20.2rem; opacity: 0; transform: translateY(1.5rem); transition: 1.65s all cubic-bezier(.275,0,0,1); } section.l-articlePolicy + section.l-articlePolicy { padding-top: 18rem; } body.start2 section.l-articlePolicy { opacity: 1; transform: translateY(0rem); } section.l-articlePolicy:nth-child(1) { padding-top: 21.1rem; margin-bottom: 13.0rem; } /* --- title --- */ .l-articlePolicy__title { font-size: 2.25rem; font-family:adobe-garamond-pro,"Hiragino Mincho ProN", "MS PMincho", serif; letter-spacing: 0.1em; font-weight: 500; } .l-articlePolicy__title span { font-size: 1.35rem; font-family: adobe-garamond-pro, serif; display: block; letter-spacing: 0.075em; font-weight: 300; margin-top: 1.2rem; margin-left: 0.3rem; color:#bababa; } p.l-articlePolicy__desc { font-size: 1.3rem; letter-spacing: 0.01em; line-height: 2.35; margin-top: 4.2rem; opacity: 0.9; } /* --- dl --- */ .l-articlePolicy__intro + dl { margin-top: 4.6rem; } section.l-articlePolicy dl + dl { margin-top: 4.3rem; } /* commercial */ article.commercial section.l-articlePolicy dl + dl { margin-top: 3.3rem; } /* --- title --- */ .l-articlePolicy__listTitle { font-size: 1.55rem; font-family:adobe-garamond-pro,"Hiragino Mincho ProN", "MS PMincho", serif; letter-spacing: 0.05em; } section.l-articlePolicy dl dt:before { font-size: 1.8rem; font-family: adobe-garamond-pro, serif; margin-right: 0.4rem; margin-left: 0.1rem; } section.l-articlePolicy dl:nth-of-type(1) dt:before { content:"1."; } section.l-articlePolicy dl:nth-of-type(2) dt:before { content:"2."; } section.l-articlePolicy dl:nth-of-type(3) dt:before { content:"3."; } section.l-articlePolicy dl:nth-of-type(4) dt:before { content:"4."; } section.l-articlePolicy dl:nth-of-type(5) dt:before { content:"5."; } section.l-articlePolicy dl:nth-of-type(6) dt:before { content:"6."; } /* commercial */ article.commercial .l-articlePolicy__listTitle { font-size: 1.05rem; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 500; } article.commercial dl dt:before { display: none; } /* --- desc --- */ dd.l-articlePolicy__listDesc { margin-top: 1.7rem; font-size: 1.25rem; letter-spacing: 0.0em; line-height: 2.1; opacity: 0.7; } dd.l-articlePolicy__listDesc a { text-decoration: underline; } dd.l-articlePolicy__listDesc ul { font-size: 1.2rem; margin-top: 1.7em; } dd.l-articlePolicy__listDesc ul li { line-height: 1.75; } dd.l-articlePolicy__listDesc ul li + li { margin-top: 0.5rem; } dd.l-articlePolicy__listDesc ul li:before { font-size: 1.25rem; font-family: adobe-garamond-pro, serif; margin-right: .8rem; margin-left: .2rem; } dd.l-articlePolicy__listDesc ul li:nth-child(1):before { content:"1. )"; } dd.l-articlePolicy__listDesc ul li:nth-child(2):before { content:"2. )"; } dd.l-articlePolicy__listDesc ul li:nth-child(3):before { content:"3. )"; } /* commercial */ article.commercial dd.l-articlePolicy__listDesc { margin-top: 1rem; font-size: 1.35rem; line-height: 1.85; font-weight: 500; } /* ><><><><><><><><><><><><><><><><> ▼ Retreat ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ /* --- body --- */ body.retreat { } body.retreat main { background-color: transparent; } /* --- link --- */ body.retreat .l-listSect__showAll a { color: #fff; font-size: 1.55rem; } /* --- header --- */ /* l-header__nav */ body.retreat .l-header__nav ul li > a { color: #fff; } /* drawer-active */ body.retreat.drawer-active .l-header__nav ul li > a, body.retreat header.search-open .l-header__nav ul li > a { color: #000; } body.retreat.drawer-active .l-fixedMenu .l-header__nav ul li > a, body.retreat .l-fixedMenu.search-open .l-header__nav ul li > a { color: #000; } /* title */ body.retreat header { position: fixed; top: 0; background-color: transparent; } body.retreat header .l-header__title img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); } body.retreat header.active { z-index: 1; } body.retreat.retreatArc header { position: relative; } /* drawer-active */ body.retreat.drawer-active header, body.retreat header.search-open { background-color: #fff; } body.retreat.drawer-active header .l-header__title img, body.retreat header.search-open .l-header__title img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__search */ body.retreat .l-header__search img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.retreat.drawer-active header .l-header__search img, body.retreat header.search-open .l-header__search img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-header__account */ body.retreat .l-header__account img { filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(95deg) brightness(109%) contrast(100%); transition: all ease .5s; } /* drawer-active */ body.retreat.drawer-active header .l-header__account img, body.retreat header.search-open .l-header__account img { filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(215deg) brightness(99%) contrast(99%); } /* l-humbBtn */ body.retreat header .l-humbBtn span { background-color: #fff; } /* drawer-active */ body.retreat.drawer-active header .l-humbBtn span, body.retreat header.search-open .l-humbBtn span { background-color: #000; } /* --- cont --- */ /* common */ .l-retreatSect.visible { opacity: 1; } .l-retreatSect .cont { } .l-retreatSect .cont > .inner { display: flex; text-align: left; } .l-retreatSect .l-retreatSect__left { width:50%; } .l-retreatSect .l-retreatSect__right { width:50%; } /* music */ .l-retreatSect .inner.music { margin-top: -4vh; width: 74%; } .l-retreatSect__cont { display: flex; width: 93%; margin: 0 auto; } /* poetry */ .l-retreatSect .inner.poetry { margin-top: initial; width: 70%; } /* words */ .l-retreatSect .inner.words { margin-top: -8.9vh; width: 76%; } /* single */ /* common */ body.start3 .l-retreatCont section.l-retreatSect.single.inview8 { opacity: 1; } .l-retreatCont section.l-retreatSect.single { height: initial; } .l-retreatCont section.l-retreatSect.single .cont { position: relative; height: initial !important; padding-top: 20.4rem; flex-flow: column; } .l-retreatCont section.l-retreatSect.single .inner { margin-top: initial; flex-flow: column; } .l-retreatCont section.l-retreatSect.single .l-retreatSect__left { width: 100%; text-align: center; } .l-retreatCont section.l-retreatSect.single .l-retreatSect__right { width: 50%; text-align: center; } /* title */ .l-retreatCont section.l-retreatSect.single .l-retreatSect__title { width: 100%; margin-top: 10.7rem; margin-bottom: 12.8rem; } section.l-retreatSect.single .poetry .l-retreatSect__title { text-align: center; } section.l-retreatSect.single .l-retreatSect__title .melody { font-size: 200%; } /* embed */ .l-retreatCont section.l-retreatSect.single .l-retreatSect__right .embed { position: sticky; top: 16vw; background: #fff; height: 45vw; display: flex; align-items: center; justify-content: center; } .l-retreatCont section.l-retreatSect.single .l-retreatSect__right .embed iframe { width: 35vw !important; height: 35vw !important; } /* poetry */ .l-retreatCont section.l-retreatSect.single .inner.poetry { margin-top: 13rem; padding-bottom: initial; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__left { width: 100%; text-align: center; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__right { width: 86%; text-align: left; margin: 12.5rem auto 0; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__title { margin-top: initial; margin-bottom: initial; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__title .txt { font-size: 113%; margin-bottom: 1.4rem; } section.l-retreatSect.single .l-retreatSect__poetry .txt { width: 100%; } /* btn */ section.l-retreatSect.single .l-retreatSect__info { bottom: initial; margin-top: 7rem; margin-bottom: 7rem; position: relative; transform: initial; left: initial; } /* wrap */ .l-retreatSingle__wrap { width: 50%; margin: 0rem auto 10rem; text-align: left; } .l-retreatSingle__wrap > .inner { width: 76%; margin: 0 auto; } .poetry .l-retreatSingle__wrap { width: 100%; } /* about */ section.l-retreatSect.single .l-retreatSect__desc { text-align: left; } /* profile */ section.l-retreatSect.single .l-retreatSingle__about + .l-retreatSect__profile { margin-top: 8rem; } section.l-retreatSect.single .l-retreatSect__sub { color:#fff; } section.l-retreatSect.single .l-retreatSect__url a { color:#fff; } section.l-retreatSect.single .l-retreatSect__drawer .l-retreatSect__sub { color: #aea291; } section.l-retreatSect.single .l-retreatSect__drawer .l-retreatSect__url a { color: #aea291; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__profile { position: relative; z-index: 1; margin-top: 9rem; line-height: 1.5; } /* ref */ section.l-retreatSect.single .l-retreatSect__list { opacity: 1; } section.l-retreatSect.single .l-retreatSect__ref { border: 1px solid #ebebeb8a; width: 110%; margin-left: -5%; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__ref { position: relative; z-index: 1; line-height: 1.2; } .l-retreatCont section.l-retreatSect.single .poetry .l-retreatSect__sub { color: #aea291; } /* title */ .l-retreatSect__title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; width: 84%; } .l-retreatSect__title .title { font-size: 2.9rem; letter-spacing: 0.05em; line-height: 1.9; display: inline-block; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 4.2rem; margin-bottom: 3.9rem; } .l-retreatSect__title .artist { font-size: 1.5rem; letter-spacing: 0.18em; margin-top: 0.1rem; } .l-retreatSect__title .author { font-size: 1.5rem; letter-spacing: 0.07em; margin-left: -0.4em; } /* words */ .words .l-retreatSect__title { width: 94%; } .words .l-retreatSect__title .txt { font-size: 88%; line-height: 1.95; margin-bottom: 1.9rem; } /* poetry */ .poetry .l-retreatSect__title .txt { font-size: 103%; margin-bottom: 0.8rem; } /* music */ .music .l-retreatSect__title .title { padding-bottom: 4.5rem; margin-bottom: 3.8rem; } .l-retreatSect__title .melody { font-size: 150%; letter-spacing: 0.035em; line-height: 1.3; } .l-retreatSect__title .name { font-size: 56%; letter-spacing: 0.06em; margin-top: 1.2rem; } .l-retreatSect__title .copy { font-size: 1.5rem; /* white-space: nowrap;*/ letter-spacing: 0.05em; } /* music */ .l-retreatSect__right .embed .pc { text-align: center; } .l-retreatSect__right .embed .pc iframe { width: 22vw !important; border: 14px solid #fff !important; } .l-retreatSect__right .embed .pc iframe { height: 22vw !important; } .l-retreatSect__right .embed .sp { display: none; } /* poetry */ .l-retreatSect__poetry { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; font-size: 1.65rem; letter-spacing: 0.065em; line-height: 2.25; margin-top: 0.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .l-retreatCont section.l-retreatSect.single .l-retreatSect__poetry { font-size: 1.75rem; background: #fff; display: block; color: #000; padding: 11.5rem 12.5rem; position: relative; } .l-retreatCont section.l-retreatSect.single .l-retreatSect__poetry:before { content: ""; position: absolute; border: 1px solid #000; width: calc(100% - 1rem); height: calc(100% - 1rem); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } .read .l-retreatSect__poetry { display: initial; -webkit-box-orient: initial; -webkit-line-clamp: initial; overflow:auto; } .l-retreatSect__poetry .txt { width: 95%; } .l-retreatSect__poetry p { line-height: 2.6; letter-spacing: 0.1em; } .l-retreatSect__poetry p + p { margin-top: 2.2em; } /* bar */ .simplebar-scrollbar { background: #ffffff; width: 3px; border-radius: 3px; } .simplebar-scrollbar:before { display: none; } /* btn */ .l-retreatSect__more { font-size: 1.55rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.2em; text-transform: lowercase; font-variant: small-caps; font-weight: 300; margin-top: 4.2rem; margin-left: -1.5rem; text-align: center; padding: 1.4rem; cursor: pointer; background-color: rgba(255, 255, 255, 0.25); border-radius: 5rem; transition: all ease .5s; } .l-retreatSect__more:hover { background-color: rgba(255, 255, 255, 0.35); } .read .l-retreatSect__more { display: none; } /* --- moreInfo --- */ .l-retreatSect__info { color: #fff; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; font-size: 1.2rem; letter-spacing: 0.3em; text-transform: uppercase; background-color: rgba(255, 255, 255, 0.25); border-radius: 5rem; padding: 1.5rem 3.3rem 1.3rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5rem; cursor: pointer; transition: allease .5s; } .l-retreatSect__info:before { content:"+"; } .l-retreatSect__info:hover { background-color: rgba(255,255,255,0.4); } /* poetry */ .poetry .l-retreatSect__info { visibility: hidden; opacity: 0; } .poetry.read .l-retreatSect__info { visibility: visible; opacity: 1; } /* --- btn --- */ /* Common */ .l-retreatBtn__group { position: fixed; right: 8.3rem; transform: translateY(-50%); bottom: 21%; } .l-retreatBtn { background-color: rgba(255, 255, 255, 0.25); height: 6.4rem; width: 6.4rem; border-radius: 100%; z-index: 8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all ease .5s; opacity: 0; } body.start2 .l-retreatBtn { opacity: 1; } .l-retreatBtn:hover { background-color: rgba(255, 255, 255, 0.4); } /* filter */ .l-retreatFilter__btn { } .l-retreatFilter__btn img { width: 38%; margin-top: 0.2rem; } /* fix */ .l-retreatFilter__arcBtn.fix { position: fixed; left:50%; transform: translateX(-50%); bottom:3.7rem; background-color: #ffffffcc; backdrop-filter: blur(3px); border-radius: 10rem; z-index: 5; cursor: pointer; box-shadow: 4px 3px 11px -5px #777777; border: 0px solid #fff; opacity: 0; transition: all ease .5s; } .l-retreatFilter__arcBtn.fix:hover { background-color: #e6e6e6; } .l-retreatFilter__arcBtn.fix > .inner { display: flex; align-items: center; padding: 1.2rem 3.2rem; color:#000; } .l-retreatFilter__arcBtn.fix .txt { font-family: adobe-garamond-pro, sans-serif; font-size: 1.9rem; letter-spacing: 0.19em; font-weight: 400; text-transform: lowercase; white-space: nowrap; font-variant: small-caps; opacity: 0.9; } .l-retreatFilter__arcBtn.fix .icon { margin-left: 1.1rem; } .l-retreatFilter__arcBtn.fix .icon img { width: 2rem; filter: invert(17%) sepia(8%) saturate(729%) hue-rotate(340deg) brightness(90%) contrast(87%); } /* active */ body.archiveActive1 .l-retreatFilter__arcBtn.fix { opacity: 1; bottom: 4.8rem; } body.archiveActive1 .l-retreatFilter__arcBtn.fix.active { opacity: 0; bottom:3.8rem; } /* copied */ .l-retreatCopy__btn { margin-top: 0.6rem; } .l-retreatCopy__btn img { width: 23%; margin-top: -0.2rem; } .copy-url { font-size: 0; } /* close */ .l-retreatCopy__cont .l-retreatSect__close { position: absolute; width: 2.7rem; height: 2.7rem; z-index: 9; top: 0rem; right: 1.7rem; } body.copied2 .l-retreatSect__close { visibility: visible; opacity: 1; position: absolute; } body.copied2 .l-retreatSect__close span { background-color: #ababab; } /* cont */ .l-retreatCopy__cont { color: #000; background-color: #fff; border-radius: 0.5rem; position: fixed; width: 65rem; top: 52%; left: 50%; transform: translate(-50%,-50%); opacity: 0; visibility: hidden; transition: all ease .5s; z-index: 6; } body.copied1 header.l-header { z-index: 1; } body.copied2 .fadeInUp .l-retreatCopy__cont { opacity: 1; visibility: visible; } .l-retreatCopy__bg { background-color: rgba(0, 0, 0, 0.65); position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: 5; visibility: hidden; transition: all ease 0.5s; cursor: crosshair; } body.copied2 .fadeInUp .l-retreatCopy__bg { opacity: 1; visibility: visible; } .l-retreatCopy__cont > .inner { padding: 3.3rem 3.3rem; } .l-retreatCopy__title { font-size: 2.2rem; font-family: minion-pro-display, serif; font-weight: 500; font-variant: small-caps; letter-spacing: 0.09em; padding-top: 0.6rem; } .l-retreatCopy__btnList { margin-top: 3.7rem; } .l-retreatCopy__btnList li + li { margin-top: 0.4rem; } .l-retreatCopy__btnList .link { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-size: 1.35rem; padding: 2rem 0 2rem; border: 1px solid #eeeeee; display: block; border-radius: 0.4rem; box-sizing: border-box; transition: allease .35s; cursor: pointer; } .l-retreatCopy__btnList a.link { background-color: #F4F4F4; } .l-retreatCopy__btnList .txtcopy { position: relative; padding-right: 1.8rem; display: flex; justify-content: center; align-items: center; } .l-retreatCopy__btnList .txtcopy:after { display: block; margin-left: 0.6rem; content: ""; width: 1rem; height: 1rem; background-size: cover; background-position: center center; background-image: url(../../assets/img/common/clip.svg); } /* active */ .l-retreatCopy__btn.active { background-color: rgba(255, 255, 255, 0.5); } .l-retreatCopy__btn.active:before { opacity: 1; } /* --- Filter --- */ /* common */ .l-retreatBg { background-color: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%; top:0; left:0; opacity: 0; z-index: 4; visibility: hidden; transition: all ease .7s; cursor: crosshair; } .l-retreatFilter { color: #000; position: fixed; text-align: left; background-color: #B9B6AC; height: 100vh; width: 48%; top:0; right: -48%; z-index: 12; transition: all ease .7s; overflow-y: scroll; overflow-x: hidden; transition-delay: 0.5s; } .l-retreatFilter > .inner { padding: 9.1rem 10.3rem 10.4rem; opacity: 0; transform: translateY(0.5vw); transition: all ease 0.7s; transition-delay: 0s; } /* margin */ .l-retreatFilter__sect + .l-retreatFilter__sect { margin-top: 5.6rem; } .l-retreatFilter__sect + .l-retreatFilter__sect.theme { margin-top: 8.3rem; } /* active */ .l-retreatFilter.active { width: 48%; right: 0; transition-delay: 0s; } .l-retreatFilter.active > .inner { transform: translateY(0); opacity: 1; transition-delay: 0.5s; } .l-retreatBg.active { opacity: 1; visibility: visible; } /* title */ .l-retreatFilter__title { font-size: 2.05rem; font-family: minion-pro-display, serif; font-weight: 600; color:#fff; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 2.6rem; } .l-retreatFilter__sub { font-family: adobe-garamond-pro,sans-serif; font-size: 1.6rem; letter-spacing: 0.13em; color:#fff; margin-bottom: 1.7rem; } /* margin */ .l-retreatFilter__cat + .l-retreatFilter__sub { margin-top: 3.1rem; } /* category */ .l-retreatFilter__cat { margin-left: -0.4rem; max-width: 40rem; } .l-retreatFilter__cat ul { display: flex; flex-flow: wrap; } .l-retreatFilter__cat ul.children { display: none; } .l-retreatFilter__cat li { margin-right: 0.6rem; margin-bottom: 1rem; } .l-retreatFilter__cat li a { font-family: adobe-garamond-pro,sans-serif; font-size: 1.45rem; letter-spacing: 0.08em; text-transform: capitalize; font-variant: small-caps; display: inline-block; padding: 0.45rem 1.5rem 0.45rem; background-color: #fff; border-radius: 5rem; border: 1px solid #fff; box-sizing: border-box; transition: all ease .5s; } /* hover */ .l-retreatFilter__cat li a:hover { box-sizing: border-box; border: 1px solid #000; } /* theme */ .l-retreatFilter__theme { overflow-x: scroll; width: calc(100% + 11rem); border-collapse: collapse; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; margin-top: 3.5rem; margin-left: -0.8rem; } .l-retreatFilter__theme::-webkit-scrollbar { display: none; } .l-retreatFilter__theme ul { } li.l-retreatFilter__list { width: 29.7rem; height: 26.1vw; display: inline-block; border-radius: 0.5rem; background-color: #fff; text-align: center; border: 1px solid #fff; transition: all ease .5s; } li.l-retreatFilter__list:hover { border: 1px solid #000; } li.l-retreatFilter__list a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } li.l-retreatFilter__list .cont { margin-top:-5.3rem; text-align: center; } li.l-retreatFilter__list + li.l-retreatFilter__list { margin-left: 0.7rem; } li.l-retreatFilter__blank { padding: 3rem; display: inline-block; } /* image */ li.l-retreatFilter__list figure { height: 10.5vw; width: 10.5vw; border-radius: 100%; padding:0.3rem; border: 1px solid #e4e4e4; display: inline-block; } li.l-retreatFilter__list figure img { height: 100%; width: 100%; filter: grayscale(1); border-radius: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transition: all ease .5s; } li.l-retreatFilter__list:nth-child(1) figure img { filter: grayscale(0); } li.l-retreatFilter__list:hover figure img { filter: grayscale(0); } /* title */ li.l-retreatFilter__list .title { margin-top: 4.4rem; margin-bottom: -1.9rem; } li.l-retreatFilter__list .title .jpn { font-size: 1.6rem; font-family:'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.065em; } li.l-retreatFilter__list .title .Eng { font-size: 1.35rem; font-family: adobe-garamond-pro,sans-serif; text-transform: capitalize; font-weight: 500; opacity: 0.4; letter-spacing: 0.085em; padding-top: 1.5rem; white-space: nowrap; } li.l-retreatFilter__list .title .Eng br { display: none; } /* btn */ .l-retreatFilter__sect + .l-listSect__showAll { margin-top: 8.3rem; padding-bottom: 0; margin-bottom: 1rem; } .l-retreatFilter__sect + .l-listSect__showAll a { font-size: 1.4rem; color:#fff; } /* --- Draewer --- */ /* close */ .l-retreatSect__close { position: fixed; width: 3.4rem; height: 2.7rem; z-index: 9; opacity: 1; display: flex; align-items: center; justify-content: center; top: 2.1rem; right: 2.5rem; cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(0.5vw); transition: all ease 0.7s; transition-delay: 0s; } .l-retreatSect__close span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #adadad; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } .l-retreatSect__close span:nth-child(1) { top: 50%; transform: rotate(-25deg); } .l-retreatSect__close span:nth-child(2) { top: 50%; transform: rotate(25deg); } .l-retreatSect__drawer.active .l-retreatSect__close { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0.5s; } .l-retreatFilter.active .l-retreatSect__close { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0.5s; } /* about */ .l-retreatSect__drawer.about .l-retreatSect__close span { background-color: #ffffff; } /* filter */ .l-retreatFilter .l-retreatSect__close span { background-color: #ffffff; } /* common */ .l-retreatSectBg { background-color: rgba(0,0,0,0.7); position: fixed; width: 100%; height: 100%; top:0; left:0; opacity: 0; visibility: hidden; transition: all ease .7s; cursor: crosshair; } .l-retreatSectBg.active { opacity: 1; visibility: visible; } .l-retreatSect__drawer { color: #000; position: fixed; text-align: left; background-color: #fff; height: 100svh; top:0; z-index: 12; transition: all ease .7s; overflow-y: scroll; overflow-x: hidden; transition-delay: 0.5s; } .l-retreatSect__drawer > .inner { padding: 8.3rem 11.5rem 9.4rem; opacity: 0; transform: translateY(0.5vw); transition: all ease 0.7s; transition-delay: 0s; } /* active */ .l-retreatSect__drawer.active > .inner { transform: translateY(0); opacity: 1; transition-delay: 0.5s; } /* about */ .l-retreatSect__drawer.about { width: 45%; right: -45%; color: #fff; } .l-retreatSect__drawer.about.active { right: 0; background: rgb(62 59 59 / 90%); transition-delay: 0s; } /* info */ .l-retreatSect__drawer.info { width: 44%; right: -44%; } .l-retreatSect__drawer.info.active { right: 0; transition-delay: 0s; } /* --- Parts --- */ /* common */ /* sub */ .l-retreatSect__sub { font-family: adobe-garamond-pro,sans-serif; font-size: 1.2rem; letter-spacing: 0.03em; margin-left: 0.2rem; margin-bottom: 1.5rem; color: #aea291; } .l-retreatSect__sub:after { content:":"; } /* title */ .l-retreatSect__ref .title { font-size: 2.3rem; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.01em; line-height: 1.7; width: 100%; } /* refference */ .l-retreatSect__ref .title { font-size: 2.25rem; margin-top: 1.3rem; } .l-retreatSect .music .l-retreatSect__ref .title { font-size: 2.4rem; } /* profie */ .l-retreatSect__title.jpn { font-size: 1.6rem; } /* About */ .l-retreatSect__about { } .l-retreatAbout__title { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-weight: 500; font-size: 2.35rem; letter-spacing: 0.01em; line-height: 1.9; } .l-retreatSect__desc { font-size: 1.4rem; font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; } .l-retreatSect__desc p { line-height: 2.4; letter-spacing: 0.065em; } .l-retreatSect__desc p + p { margin-top: 2.6rem; } .l-retreatAbout__title + .l-retreatSect__desc:before { content: ""; width: 1.8rem; border-top: 1px solid rgba(255,255,255,0.5); display: block; margin-top: 2.1rem; padding-top: 2.9rem; margin-left: .2rem; } .l-retreatSect__drawer.info .l-retreatAbout__title + .l-retreatSect__desc:before { border-top: 1px solid rgba(0,0,0,0.2); } /* margin */ .l-retreatSect__about + .l-retreatFilter__sect { margin-top: 7.9rem; } /* Refference */ .l-retreatSect__ref { border: 1px solid #EBEBEB; width: 120%; margin-left: -10%; } .l-retreatSect__ref > .inner { padding: 6.4rem 6.9rem 6.3rem; } /* margin */ .l-retreatSect__about + .l-retreatSect__ref { margin-top: 6.4rem; } .l-retreatSect__profile + .l-retreatSect__ref { margin-top: 9.5rem; } /* list */ .l-retreatSect__list { margin-top: 1.5rem; opacity: 0.45; } .l-retreatSect__list.music { margin-top: 0.8rem; } .l-retreatSect__list ul { display: flex; flex-wrap: wrap; } .l-retreatSect__list ul li { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; font-size: 1.2rem; line-height: 1.8; display: flex; align-items: baseline; } .l-retreatSect__list.music ul li { font-size: 1.3rem; } .l-retreatSect__list ul li span.listTitle { font-size: 85%; } .l-retreatSect__list ul li span + span:before { content:":"; margin-left: 0.6rem; margin-right: 0.6rem; } .l-retreatSect__list ul li + li:before { content:"/"; opacity: 0.6; margin-left: 0.8rem; margin-right: 0.7rem; } /* btn */ .l-retreatSect__btn { background-color: #F4F4F4; text-align: center; margin-top: 3.2rem; margin-left: -1.5%; width: 103%; border-radius: 2px; transition: all ease .5s; } .l-retreatSect__btn:hover { background-color: #ebebeb; } .l-retreatSect__btn a { font-size: 1.2rem; font-family: 'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0.04em; display: block; width: 100%; height: 100%; padding: 1.9rem 0 2.1rem; } /* Profile */ .l-retreatSect__about + .l-retreatSect__profile { margin-top: 6.5rem; } .l-retreatSect__ref + .l-retreatSect__profile { margin-top: 7.3rem; } /* title */ .l-retreatSect__profile .title { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serif; } .l-retreatSect__profile .title.eng { font-size: 2.7rem; font-weight: 500; letter-spacing: 0.02em; } .l-retreatSect__profile .title.jpn { font-size: 2.2rem; font-weight: 500; letter-spacing: 0.05em; } /* desc */ .l-retreatSect__subDesc { font-size: 1.2rem; line-height: 2.15; margin-top: 2rem; } /* url */ .l-retreatSect__url { margin-top: 2rem; } .l-retreatSect__url a { font-size: 1.45rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.02em; color: #aea291; display: inline-block; position: relative; padding-left: 0rem; font-weight: 300; } /* --- footer --- */ body.retreat footer { display: none; } /* --- bread --- */ body.retreat .c-bread { display: none; } /* --------------------------- ■ Section --------------------------- */ /* --- common --- */ .l-retreatSlideshow { position: fixed; top:0; left: 0; right: 0; height: 100%; width: 100%; z-index: 0; } .l-retreatSlideshow .slide { height: 100%; width: 100%; transform: scale(1.2); transition: all ease 4s; } body.done .l-retreatSlideshow .slide { transform: scale(1); } .l-retreatSlideshow figure { height: 100%; width: 100%; } .l-retreatSlideshow figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } .l-retreatSlideshow:before { content:""; position: fixed; background-color: rgba(0,0,0,0.425); top: 0; left: 0; z-index: 1; width: 100%; height:100%; } .l-retreatCont { height: 100svh; padding: 0; overflow: scroll; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100svh); -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: repeat(100svh); -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-points-y: repeat(100svh); scroll-snap-type: y mandatory; text-align: center; position: relative; z-index: 1; } /* archive */ body.retreatArc .l-retreatCont { height: initial; padding: initial; overflow: initial; scroll-snap-type: initial; } /* --- section --- */ /* common */ .l-retreatCont section.l-retreatSect { position: relative; height: 100svh; list-style: none; color: white; border-bottom: 0px solid white; scroll-snap-align: start; } .l-retreatCont section.l-retreatSect .cont { position: absolute; width: 100%; bottom:0; display: flex; align-items: center; justify-content: center; } .l-retreatCont section.l-retreatSect.none { display: none; } /* intro */ .l-retreatSect__intro { margin-top: 0rem; color: #fff; } .l-retreatSect__intro .title { font-size: 8rem; font-family: minion-pro-display,"Hiragino Mincho ProN", "MS PMincho", serif; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.175em; overflow: hidden; } .l-retreatSect__intro .subTitle { font-size: 1.7rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.17em; opacity: 0.8; font-variant: small-caps; margin-top: 2.6rem; } .l-retreatSect__intro .about { font-size: 1.55rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.245em; font-weight: 300; text-transform: uppercase; margin-top: 8.2rem; } .l-retreatSect__intro .about a { letter-spacing: 0.7em; } /* size */ .l-retreatSect__intro .title .five { font-size: 113%; } .l-retreatSect__intro .title .eight { font-size: 97%; } .l-retreatSect__intro .title .nine { font-size: 93%; } /* archive */ body.retreatArc .l-retreatSect__intro { margin-top: 11.5rem; } /* radio */ .l-retreatSect__radio { font-family: adobe-garamond-pro, sans-serif; background: rgba(255, 255, 255, 0.3); border-radius: 24rem; padding: 0.8rem; color: #000; font-weight: normal; display: flex; justify-content: space-between; align-items: center; height: 3.2rem; width: 27rem; font-size: 1.25rem; position: absolute; bottom: 5rem; transition: all 0.5s ease-in-out; cursor: pointer; } .l-retreatSect__radio .btn { width: 50%; text-transform: uppercase; letter-spacing: 0.17em; position: relative; padding-top: 0.2rem; transition: all ease .5s; } .l-retreatSect__radio:before { content:""; background-color: #fff; position: absolute; width: 47%; height: 75%; border-radius: 19rem; transition: all ease .5s; } .l-retreatSect__radio.left:before { left: 3%; } .l-retreatSect__radio.left .btn.right { color:#fff; } .l-retreatSect__radio.right:before { left: 50%; } .l-retreatSect__radio.right .btn.left { color:#fff; } /* --------------------------- ■ Archive --------------------------- */ /* --- common --- */ .l-retreatArc__intro { margin-bottom: 12.2rem; } .l-retreatArc__main { } /* --- list --- */ .l-retreatArc__list { background-color: rgba(255,255,255,0); width: 74%; margin:0 auto; display: flex; border: 1px solid rgba(255,255,255,0.5); border-radius: 5px; text-align: left; position: relative; transition: all ease .5s; } .l-retreatArc__list:hover { background-color: rgba(255,255,255,1); } .l-retreatArc__list:before { content:""; position: absolute; top:0.3rem; width: 99%; left: 0.5%; transition: all ease .5s; border-top: 1px solid rgba(255,255,255,0.3); } .l-retreatArc__list:after { content:""; position: absolute; bottom:0.3rem; width: 99%; left: 0.5%; transition: all ease .5s; border-top: 1px solid rgba(255,255,255,0.3); } .l-retreatArc__list:hover:before, .l-retreatArc__list:hover:after { border-top: 1px solid rgba(0,0,0,1); } .l-retreatArc__list a { width: 100%; height: 100%; color: #fff; transition: all ease .5s; } .l-retreatArc__list:hover a { color: #000; } .l-retreatArc__list a > .inner { display: flex; padding: 6.9rem 6.9rem; align-items: center; } .l-retreatArc__list + .l-retreatArc__list { margin-top: 1.4rem; } .l-retreatArc__list .left { width: 88%; } .l-retreatArc__list .right { width: 10%; } /* jpn */ .l-retreatArc__list.jpn .left { width: 100%; } .l-retreatArc__list.jpn .right { display: none; } /* title */ .l-retreatArc__title { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-weight: 500; letter-spacing: 0em; } .l-retreatArc__title .eng { font-size: 3.05rem; } .l-retreatArc__title .sub { font-size: 1.35rem; margin-top: 1.3rem; } .l-retreatArc__copy { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.45rem } .l-retreatArc__copy:before { content: ""; width: 0.8rem; border-top: 1px solid #d1d1d1; display: block; margin: 2.3rem 0.3rem 0; padding-top: 1.7rem; } /* jpn */ .l-retreatArc__title .eng .jpn { font-size: 81%; margin-bottom: 0.9rem; line-height: 1.8; } .l-retreatArc__title .sub .jpn { font-size: 81%; } .l-retreatArc__copy .jpn { margin-left: -0.8rem; } /* image */ .l-retreatArc__list iframe { width: 7vw !important; height: 7vw !important; } /* --- pagenation --- */ .relatedPageNav { padding-top: 5rem; padding-bottom: 19rem; } /* ================================= // ● Objects // /* ><><><><><><><><><><><><><><><><> ▼ Bread ><><><><><><><><><><><><><><><><> /* --- common --- */ .c-bread { margin-top: 3.1rem; margin-left: 6.9%; font-size: 1.3rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.075em; opacity: 0.4; } .c-bread .border { font-size: 1.1rem; margin-left: 1.2rem; margin-right: 0.9rem; opacity: 0.3; } /* story */ article.l-articleStPc .c-bread span.post-feature { font-size: 1.3rem; } /* --- current --- */ .c-bread span.current-item { position: relative; } .c-bread span.current-item:before { content: ""; position: absolute; width: 103.8%; border-bottom: 1px solid #ccc; bottom: -0.5rem; left: -1.8%; } /* pre */ .c-bread { opacity: 0; transform: translateY(1vw); transition: .95s all cubic-bezier(.275,0,0,1); } /* start */ body.start2 .c-bread.c-bread { opacity: 0.6; transform: translateY(0vw); } /* for Feature & News */ article.l-articleFeature .c-bread .current-item, article.l-articleNews .c-bread .current-item, article.l-articleStory .c-bread .current-item { display: none; } article.l-articleFeature .c-bread span:nth-child(6), article.l-articleNews .c-bread span:nth-child(6), article.l-articleStory .c-bread span:nth-child(6) { display: none; } /* for Music */ article.l-articleMusic .c-bread span:nth-child(4), article.l-articleMusic .c-bread span:nth-child(5) { display: none; } /* ><><><><><><><><><><><><><><><><> ▼ listCont ><><><><><><><><><><><><><><><><> /* --------------------------- ■ listCont --------------------------- */ /* --- common --- */ .c-listCont { vertical-align: top; box-sizing: border-box; } .c-listCont a { transition:all ease .35s; } .contWrapper { margin: 0 auto; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal { width: 50%; display: flex; align-items: center; padding: 6.1rem 4rem; border-left: initial; } ul.l-horizontal__loop .c-listCont.horizontal .contWrapper { text-align: left; margin-left: 8rem; width: 44%; } ul.l-horizontal__loop .c-listCont.horizontal:before { border-right: initial; } /* archiveHorizontal */ .archiveHor ul.l-horizontal__loop .c-listCont.horizontal { width: 100%; padding: 9.1rem 8.5rem; margin-left: 0.5rem; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .contWrapper { margin-left: 9.7rem; width: 50%; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal + .c-listCont.horizontal { border-top: 1px solid #f3f3f3; } /* --------------------------- ■ listImage --------------------------- */ /* --- common --- */ .c-listImage { width: 100%; /*padding: 0.6rem; border: 1px solid #e7e7e7; */ overflow: hidden; transition: 0.95s all ease; } .c-listImage:hover { transform: scale(1); } .c-listImage a { display: inline-block; width: 100%; height: 100%; transition: all ease .75s; } .c-listImage:hover a{ opacity: 1; transform: scale(1.04); } .c-listImage figure { height: 100%; width: 100%; transform: scale(1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; overflow: hidden; } .fadeInUp .c-listImage figure { transform: scale(1); } .c-listImage figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; transform: scale(1.1); transition: 2.6s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } .fadeInUp .c-listImage figure img { transform: scale(1); } .c-listImage figure.top img { object-position:top center; } .c-listImage figure.pc, .c-listImage figure.pc img { display: block; } .c-listImage figure.sp, .c-listImage figure.sp img { display: none; } /* pre */ .c-listImage:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; background-color: #fff; z-index: 1; transition: 1.65s all cubic-bezier(.275,0,0,1); transition-delay: 0s; } /* gray */ .gray .c-listImage:before { background-color:#f3f3f3; } /* essay */ article.l-articleEssay + section.l-listEdition.gray .c-listImage:before { background: #fff; } /* start */ body.start2 .c-listImage:before { height: 0; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal .c-listImage { height: 17.6vw; width: 44.7%; margin:initial; } /* archiveHorizontal */ .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listImage { height: 20.9vw; width: 36%; margin-top: initial; } /* --------------------------- ■ listCatDate --------------------------- */ /* --- common --- */ .c-listCatDate { font-size: 1.2rem; text-transform: capitalize; display: flex; margin-left: .1rem; letter-spacing: 0.02em; margin-top: 4.2rem; margin-bottom: 1.2rem; margin-left: .1rem; align-items: baseline; } /* --- date --- */ .c-listDate { font-size: 1.25rem; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.05em; position: relative; color: #a3a3a3; font-weight: 300; } /* --- category --- */ .c-listCat { margin-top: 2.4rem; margin-left: -0.6rem; display: none; } .c-listDate + .c-listCat { margin-left: 2.5rem; margin-top: initial; } .c-listCat a { font-family: nimbus-sans, sans-serif; font-size: 1rem; letter-spacing: 0.065em; font-weight: 400; color: #272727; background: rgba(255,255,255,0.5); border: 1px solid #f2f2f2; padding: 0.6rem 1rem 0.6rem; border-radius: 2.2rem; position: relative; text-transform: capitalize; display: inline-block; transition: all ease .35s; } .c-listCat span.feature a { font-size: 1rem; font-family: dnp-shuei-gothic-gin-std, sans-serif; padding: 0rem 1rem 0rem; letter-spacing: 0.03em; } .c-listCat a:hover { color: #000; } .c-listCat a + a { margin-left: 0.3rem; } .c-listCat span + span { margin-left: 0rem; } .c-listCat span + span:before { content:none; color: #af9f8a; margin-right: .4rem; margin-left: -.2rem; } .c-listCat a:after { content: none; width: 105%; left: -5%; bottom: -.5rem; height: 1px; position: absolute; display: block; background-color: #f0e8d8; } /* single */ article.l-article .c-listCatDate .c-listCat { display: block; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal .c-listCat { margin-top: 1.8rem; margin-left: -0.6rem; } /* archiveHorizontal */ .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listCat { margin-top: 2.2rem; margin-left: -0.7rem; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listCat a { font-size: 1.1rem; } /* music */ .c-listMel__right .c-listCat { display: block; } /* --------------------------- ■ listTitle --------------------------- */ /* --- common --- */ /* sub */ .c-subTitle { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.55rem; font-weight: 500; letter-spacing: 0.18em; display: block; margin-top: 3rem; line-height: 1.7; font-variant: small-caps; text-transform: lowercase; margin-left: 0.2rem; display: flex; align-items: center; } .c-subTitle br { display: none; } .c-subTitle a { color: #8a7f70; } /* issue */ .c-subTitle.issue { font-size: 1.1rem; color: #5f5f5f; font-weight: 300; text-transform: uppercase; position: relative; display: inline-block; margin-left: 0.1rem; margin-top: 3.7rem; margin-bottom: -0.2rem; } .c-subTitle.issue span { font-size: 146%; display: block; letter-spacing: 0.03em; position: absolute; left: 110%; top: 50%; transform: translateY(-56%); } .c-subTitle.issue span:before { content:":"; margin-right: 0.5rem; } /* border */ .c-subTitle span.border { font-size: 1.1rem; transform: scale(0.8); margin-right: 0.2rem; margin-left: 0.2rem; opacity: 0.5; margin-top: 0.4rem; } /* subInfo */ .c-subTitle span.subInfo { font-size: 0.95rem; letter-spacing: 0.1em; margin-top: 0.2rem; } /* subNum */ .c-subTitle span.subNum { font-size: 1.05rem; letter-spacing: 0.03em; font-variant: initial; margin-left: 0.7rem; margin-top: 0.2rem; } /* bracket */ .c-subTitle span.bracket { font-size: 87.4%; } .c-subTitle span.bracket:nth-child(1) { margin-left: -0.5rem; margin-right: -0.2rem; } .c-subTitle span.bracket:nth-child(2) { margin-left: -0.2rem; margin-right: 0.2rem; } /* slash */ .c-subTitle span.slash { font-size: 92%; opacity: 0.6; margin-right: 0.3rem; margin-left: 0.4rem; } /* jpn */ .c-subTitle span.jpn { font-size: 88%; } .c-subTitle span.storyJpn { font-size: 85%; } .c-subTitle span.jpn.chapter { margin-left: 0rem; } .c-subTitle span.storyJpn:nth-child(2) { margin-right: 0.1rem; } .c-subTitle span.storyJpn:nth-child(3) { margin-left: 0.1rem; } /* margin */ .c-subTitle + .c-listTitle { margin-top: 1.3rem; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal .c-subTitle { margin-top: -0.7rem; margin-left: 0.3rem; } /* title */ .c-listTitle { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; font-size: 1.75rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.06em; width: 100%; margin: 0 auto; margin-top: 3.2rem; transition: all ease .35s; } .c-listTitle br { display: none; } /* count */ .c-listTitle .count { display: block; font-size: 69%; margin-left: 0.1rem; margin-top: 0.2rem; } .c-listTitle .count span { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; display: inline-block; padding: 1.2rem 0.8rem 1.2rem; letter-spacing: 0.12em; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; margin-top: 2.3rem; margin-left: -0.2rem; margin-bottom: 0.8rem; color: #313131; } .c-listTitle .count span br { display: none; } .c-listTitle .count br { display: none; } /* first */ section.l-archiveCont .c-listCont.first .c-subTitle { margin-top: 3.8rem; } section.l-archiveCont .c-listCont.first .c-listTitle { font-size: 1.95rem; } /* edition */ ul.sectionSlider .c-listTitle .count span { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .c-listTitle .issue { font-size: 119%; } .c-listTitle .issue02 { font-size: 119%; } /* music */ .melody .c-listTitle { font-size: 1.8rem; margin-top: 4.5rem; line-height: 1.4; } .melody .c-listTitle a { font-size: 105%; } .melody .c-listTitle.playlist a { font-size: 84%; } .melody .c-listTitle .count span { letter-spacing: 0.05em; padding: 1.7rem 0.8rem 1.7rem; margin-top: 2.3rem; } section.l-archiveCont .c-listCont.first.melody .c-listTitle { font-size: 2.15rem; margin-top: 5.1rem; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle { width: initial; font-size: 1.6rem; margin-top: 1.5rem; line-height: 1.9; } ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle .count span { margin-top: 1.9rem; padding: 1.3rem 0.8rem 1.2rem; } ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle br { display: none; } /* archiveHorizontal */ .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle { font-size: 1.725rem; margin-top: 1.6rem; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle br { display: none; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle .count { font-size: 55%; } .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listTitle .count span { margin-top: 1.7rem; padding: 1.3rem 0.8rem 1rem; margin-left: -0.3rem; } /* eng */ .c-listEng { margin-top: 0.9rem; margin-left: -0.3rem; } .c-listEng img { width: 64%; } /* --------------------------- ■ c-listCopy --------------------------- */ /* --- common --- */ .c-listCopy { font-size: 1.22rem; margin-top: 0.3rem; margin-left: 0rem; margin-bottom: 2.1rem; } /* --------------------------- ■ listDesc --------------------------- */ .c-listDesc { font-family: dnp-shuei-gothic-gin-std, sans-serif; font-size: 1.05rem; line-height: 2.2; letter-spacing: 0.06em; width: 100%; margin: 2.5rem auto 0; position: relative; } .c-listDesc a { color: #a3a2a2; } .c-pageTitle + .c-listDesc { width: 86%; line-height: 2.3; text-align: center; margin: 1.1rem auto 0; display: none; } .c-pageTitle + .c-listDesc:before { width: 0; margin-top: .6rem; } /* first */ section.l-archiveCont .c-listCont.first .c-listDesc { width: 60%; margin-left: initial; } /* horizontal */ ul.l-horizontal__loop .c-listCont.horizontal .c-listDesc { width: initial; margin: 1.7rem auto 0; } /* archiveHorizontal */ .archiveHor ul.l-horizontal__loop .c-listCont.horizontal .c-listDesc { font-size: 1.15rem; margin: 1.5rem 0 0; width: 80%; } /* issue */ li.c-listCont.issue .c-listDesc {margin-top: 1.4rem;} /* --------------------------- ■ c-listBtn --------------------------- */ .c-listBtn { font-family: adobe-garamond-pro, 'Zen Old Mincho', sans-serifsans-serif; font-size: 1.1rem; letter-spacing: 0.08em; display: inline-block; text-align: center; background: #766868; text-transform: lowercase; font-variant: small-caps; margin-left: -1%; border-radius: 5rem; margin-top: 2.1rem; transition: all ease .25s; } .c-listBtn a { display: block; padding: 1rem 3.1rem; color: #fff; } /* hover */ .c-listBtn:hover { background-color: #5e5353; } /* ><><><><><><><><><><><><><><><><> ▼ musicCont ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Common --------------------------- */ /* --- common --- */ .c-musicCont { display: flex; align-items: center } .c-musicImage { width: 30%; } .c-musicInfo { width: 57.5%; margin-left: 10%; } /* --------------------------- ■ musicCont --------------------------- */ /* --- image --- */ .c-musicImage { width: 9.5vw; height: 9.5vw; overflow: hidden; transition: all ease .5s; } .c-musicImage:hover { box-shadow: 0px 3px 14px -6px rgb(0 0 0 / 20%); } .c-musicImage a { display: inline-block; width: 100%; height: 100%; position: relative; overflow: hidden; } .c-musicImage iframe { width: 100% !important; height: 100% !important; } .c-musicImage figure { height: 100%; width: 100%; position: absolute; top: 0; } .c-musicImage figure img { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; } /* --------------------------- ■ musicInfo --------------------------- */ /* --- c-musicTitle --- */ .c-musicTitle { font-size: 2.35rem; font-weight: 300; font-family: adobe-garamond-pro, sans-serif; letter-spacing: 0.03em; margin-top: -0.7rem; } /* --- c-musicArist --- */ .c-musicArist { font-size: 1.2rem; font-family: nimbus-sans, sans-serif; font-weight: 300; letter-spacing: 0.035em; color: #b5aa9c; margin-top: 1.1rem; } .c-musicArist:before { content:"/"; font-size: 1.3rem; margin-left: .3rem; margin-right: 0.2rem; } /* --- c-musicCopy --- */ .c-musicCopy { font-size: 1.05rem; margin-top: 1.8rem; } .c-musicCopy a { color:#8f8f8f; letter-spacing: 0.0em; } /* ><><><><><><><><><><><><><><><><> ▼ c-btn ><><><><><><><><><><><><><><><><> /* --------------------------- ■ c-btn --------------------------- */ .c-btn { font-size: 1.45rem; font-family: nimbus-sans, sans-serif; letter-spacing: 0.075em; text-transform: initial; height: 8.3rem; background: #f5f5f5; border-radius: 0.5rem; } .c-btn a { display: flex; align-items: center; position: relative; width: 100%; height: 100%; } .c-btn a:before { content: ""; position: absolute; right: 3.4rem; width: 0.7rem; height: 0.7rem; top: 0; bottom: 0; margin: auto; border-top: 1px solid #aea291; border-right: 1px solid #aea291; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c-btn span { padding-left: 4.3rem; } /* ><><><><><><><><><><><><><><><><> ▼ SNS ><><><><><><><><><><><><><><><><> /* --------------------------- ■ snsNav --------------------------- */ /* --- common --- */ .c-snsNav { display: none; } .c-snsNav ul { display: flex; } .c-snsNav ul li { font-size: 2rem; } .c-snsNav ul li + li { margin-left: 1.3rem; } .c-snsNav ul li:nth-child(2) { margin-left: 1.6rem; } /* white */ .c-snsNav--white a { } /* ><><><><><><><><><><><><><><><><> ▼ hover ><><><><><><><><><><><><><><><><> /* --------------------------- ■ Normal --------------------------- */ /* --- parents --- */ .c-hover__parents { display: inline-block; position: relative; transition: transform ease .35s; overflow: hidden; } /* --- children --- */ .c-hover__children { display: block; position: relative; transition: transform ease .35s; text-align: center; } /* --- bottom --- */ .c-hover__children.bottom { position: absolute; left: 50%; transform: translate(-50%,0); } /* --- hover --- */ a:hover .c-hover__parents .c-hover__children.top { transform: translate(0%,-100%); } a:hover .c-hover__parents .c-hover__children.bottom { transform: translate(0%,-100%); } /* --------------------------- ■ Italic --------------------------- */ .c-hover__parents.italic .c-hover__children.bottom { text-transform: capitalize; font-family: minion-pro-display, serif; font-style: italic; letter-spacing: 0.08em; } /* --- hover --- */ .c-hover__parents.italic:hover .c-hover__children.top { transform: translate(-50%,-100%); } .c-hover__parents.italic:hover .c-hover__children.bottom { transform: translate(0%,-100%); } /* --------------------------- ■ Italic + Center --------------------------- */ .c-hover__parents.italic.center .c-hover__children.bottom { transform: translate(0%,0); } /* --- hover --- */ a:hover .c-hover__parents.italic.center .c-hover__children.top { transform: translate(-50%,-100%); } a:hover .c-hover__parents.italic.center .c-hover__children.bottom { transform: translate(-50%,-100%); } /* --- hover --- */ .is-active .c-hover__parents.italic.center .c-hover__children.top { left: 50%; transform: translate(-50%,0); } .is-active .c-hover__parents.italic.center .c-hover__children.bottom { left: 50%; transform: translate(-50%,0); } /* ><><><><><><><><><><><><><><><><> ▼ Member ><><><><><><><><><><><><><><><><> /* --------------------------- ■ memberNav --------------------------- */ /* --- bg --- */ .c-memberNavBg { background-color: rgb(22,26,20); position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; visibility: hidden; transition: all ease .5s; } /* active */ body.membNavActive .c-memberNavBg { visibility: hidden; background-color: rgba(22,26,20,.8); } /* --- common --- */ .c-memberNav { position: absolute; width: 32rem; height: initial; background-color: rgba(255,255,255,1); box-shadow: 3px 3px 15px -7px rgb(0 0 0 / 50%); top: 9rem; right: 3rem; z-index: 117; border-radius: 0.4rem; border-top: 0px solid #000; visibility: hidden; opacity: 0; transform: translateY(0.5rem); transition: .3s all cubic-bezier(.275,0,0,1); } .c-memberNav > .inner { width: 77%; margin: 0 auto; padding-bottom: 2.7rem; } /* adjust */ body.membNavAdjust .c-memberNav { position: fixed; top: 7.6rem; } /* border */ .c-memberNav:before { content: ""; position: absolute; width: 97%; border-top: 1px solid #000; top: 0.2rem; left: 1.5%; } .c-memberNav:after { content: ""; position: absolute; width: 97%; border-top: 1px solid #000; bottom: 0.2rem; left: 1.5%; } /* active */ body.membNavActive .c-memberNav { visibility: visible; opacity: 1; transform: translateY(0rem); } /* --- btn --- */ .c-memberNav__btn { padding-top: 2.3rem; padding-bottom: 2.3rem; border-top: 1px dotted #ebebeb; } /* parents */ .c-memberNav__btn .parents { font-size: 1.3rem; letter-spacing: 0.05em; padding-left: 2.8rem; position: relative; transition: all ease .35s; } /* hover */ .c-memberNav__btn .parents:hover { opacity: 0.7; } /* icon */ .c-memberNav__btn .parents:before { position: absolute; display: block; background-size: cover; } .c-memberNav__btn .parents.register:before { content: ""; top: 0.4rem; left: 0.5rem; width: 1.05rem; height: 1.05rem; background-image: url(../../assets/img/common/member_register.svg); } .c-memberNav__btn .parents.support:before { content: ""; top: 0.4rem; left: 0.6rem; width: 1.025rem; height: 1.1rem; background-image: url(../../assets/img/common/member_support.svg); } /* children */ .c-memberNav__btn ul.chilren { margin-top: 1.6rem; margin-left: 0rem; } .c-memberNav__btn ul.chilren li { font-size: 1.15rem; transition: all ease .35s; } .c-memberNav__btn ul.chilren li:before { content: "-"; margin-left: 0.8rem; margin-right: 1.2rem; } .c-memberNav__btn ul.chilren li + li { margin-top: 0.9rem; } /* hover */ .c-memberNav__btn ul.chilren li:hover { opacity: 0.7; } /* --- login --- */ /* codoc */ body .codoc-connect-widget-body-bottom { margin-top: 3.5rem; margin-bottom: 2.6rem; } body .codoc-connect-widget-login .codoc-connect-widget-body { border: initial !important; padding: initial !important; border-radius: initial !important; background: initial !important; } body .codoc-connect-widget-body-bottom .codoc-btn { font-size: 1.35rem !important; background: initial !important; color: #000 !important; font-weight: 500 !important; width: initial !important; padding: initial !important; transition: all ease .35s; padding-left: 2.6rem !important; position: relative; text-align: left; } body .codoc-connect-widget-body-bottom .codoc-btn:nth-child(2) { display: none !important; } body .codoc-connect-widget-body-bottom .codoc-btn:before { content: ""; position: absolute; display: block; top: 0.4rem; left: 0.5rem; width: 1rem; height: 1.2rem; background-size: cover; background-image: url(../../assets/img/common/member_login.svg); transition: all ease .35s; } /* hover */ body .codoc-connect-widget-body-bottom .codoc-btn:hover { opacity: 0.7; } /* --- MyPage --- */ /* btn */ /* defalut */ body .codoc-connect-widget-login { margin-top: initial !important; } body .codoc-connect-widget-login-header-name .codoc-connect-tooltip-title { margin-bottom: initial !important; padding-bottom: initial !important; border-bottom: initial !important; text-align: initial !important; } body .codoc-connect-tooltip { display: block !important; position: relative !important; top:initial !important; left: 0; width: 100% !important; padding: initial !important; background: #fff; border-radius: initial !important; -webkit-box-shadow: initial !important; box-shadow: initial !important; background: initial !important; z-index: initial !important; } .codoc-connect-widget-login-header-name .codoc-connect-tooltip-buttons { display: initial !important; display: initial !important; display: initial !important; -webkit-box-pack: initial !important; -ms-flex-pack: initial !important; justify-content: initial !important; -ms-flex-wrap: initial !important; flex-wrap: initial !important; } .codoc-connect-tooltip-buttons .codoc-btn { background: initial !important; color: #000 !important; width: 100% !important; font-weight: 500 !important; border: initial !important; text-align: left !important; padding :initial !important; display: block !important; } .codoc-connect-widget-login-header-name .codoc-connect-tooltip-buttons .codoc-btn { color: #000 !important; } .codoc-connect-widget-login-header-name .codoc-connect-tooltip:before { content: initial !important; } /* original */ .codoc-connect-tooltip-buttons .codoc-btn { font-size: 1.3rem !important; letter-spacing: 0.05em !important; padding-top: 2.3rem !important; padding-bottom: 2.3rem !important; border-top: 1px dotted #ebebeb !important; color: #000 !important; transition: all ease .35s; padding-left: 2.8rem !important; position: relative; } .codoc-connect-tooltip-buttons .codoc-btn-border { font-size: 0 !important; } .codoc-connect-tooltip-buttons .codoc-btn-border:after { content: "マイページ"; font-size: 1.3rem !important; } .codoc-connect-tooltip-buttons .codoc-btn:before { content: ""; position: absolute; display: block; top: 49%; transform: translateY(-50%); left: 0.6rem; width: 1.1rem; height: 1.2rem; background-size: cover; background-image: url(../../assets/img/common/member_logout.svg); } .codoc-connect-tooltip-buttons .codoc-btn.codoc-btn-border:before { content: ""; position: absolute; display: block; top: 49%; transform: translateY(-50%); left: 0.5rem; width: 1.25rem; height: 1.25rem; background-size: cover; background-image: url(../../assets/img/common/member_mypage.svg); } /* hover */ .codoc-connect-tooltip-buttons .codoc-btn:hover { opacity: 0.7; } /* icon */ /* defalut */ body .codoc-connect-widget-login-header-name-profile img { display: none !important; } body .codoc-connect-widget-login-header-name-profile { justify-content: center !important; text-align: center !important; height: initial !important; width: 100% !important; } body .codoc-connect-widget-login-header-name-profile-text { padding-left: initial !important; font-weight: 400; } /* original */ body .codoc-connect-widget-login-header-name-profile { font-family: adobe-garamond-pro,'Zen Old Mincho', sans-serif; padding-top: 3.2rem; padding-bottom: 2.8rem; cursor: initial !important; } body .codoc-connect-widget-login-header-name-profile-text { font-size: 1.8rem !important; color: #000 !important; letter-spacing: 0.03em !important; max-width: 7.6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body .codoc-connect-widget-login-header-name-profile:after { font-size: 1rem; content: "さん"; margin-left: 0.4rem; margin-top: 0.1rem; color: #000; } /* --------------------------- ■ memberBtn --------------------------- */ /* --- common --- */ .c-memberBtn { position: absolute; bottom: -9.5rem; right: 0; width: 35rem; height: 11.6rem; color: #fff; cursor: pointer; transition: all ease .6s; } .c-memberBtn .bg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #181818; transition: all ease .35s; } .c-memberBtn .inner { height: initial; width: 68.1%; display: flex; } .c-memberBtn .right { margin-left: auto; } /* humb */ .l-humbCont .c-memberBtn { transition-delay: 0s; } body.humb-active .c-memberBtn { bottom: 0rem; transition-delay: 0.4s; } /* hover */ /*.c-memberBtn .bg:hover { background-color: #3b3b3b; }*/ /* --- icon --- */ .c-memberBtn .icon { width: 48px; height: 100%; border-radius: 100%; display: flex; align-items: center; justify-content: center; transform: scale(1); } .c-memberBtn .icon img { opacity: 0.55; width: 1.1rem; } .c-memberBtn .circle20{ fill:transparent; stroke:rgba(255,255,255,0.13); position: absolute; } .c-memberBtn .circle20 circle{ stroke-dasharray:151; stroke-dashoffset:0; transition:all .75s ease; } .c-memberBtn:hover .circle20 circle{ stroke-dashoffset:302; } .c-memberBtn:hover .circle20 { stroke:rgba(255,255,255,0.4); } /* --- cont --- */ .c-memberBtn .cont { margin-left: 2.3rem; } .c-memberBtn .cont .eng { font-family: minion-pro-display, serif; font-size: 2.1rem; font-weight: 500; letter-spacing: 0.09em; line-height: 1; opacity: 0.75; margin-top: 0.2rem; } .c-memberBtn .cont .jpn { font-size: 1rem; margin-top: -0.2rem; letter-spacing: 0.175em; opacity: 0.6; transform: scale(0.8); transform-origin: left bottom; } /* --- arrow --- */ .c-memberBtn .arrow { display: flex; align-items: center; height: 100%; margin-left: 1.4rem; opacity: 0.7; display: none; } /* --------------------------- ■ memberBox --------------------------- */ /* --- bg --- */ .c-memberBg { background: rgba(22,26,20,.8); width: 100%; height: 100%; position: fixed; z-index: 10; visibility: hidden; opacity: 0; transition: all ease .5s; } /* active */ body.membBoxActive .c-memberBg { visibility: visible; opacity: 1; cursor: pointer; } /* --- close --- */ .c-memberBox__close { position: absolute; width: 3.3rem; height: 3.4rem; z-index: 9; top: 1.9rem; right: 2rem; cursor: pointer; transition: all ease .65s; opacity: 0; } .c-memberBox__close { opacity: 0.5; } .c-memberBox__close span { position: absolute; display: inline-block; height: 1px; width: 100%; background-color: #7f7f7f; left: 0; transition: all ease .25s; transition: .6s all cubic-bezier(.275,0,0,1); } .c-memberBox__close span:nth-child(1) { top: 1.3rem; transform: rotate(0deg); } .c-memberBox__close span:nth-child(2) { top: 1.3rem; transform: rotate(0deg); } body.membBoxActive .c-memberBox__close span:nth-child(1) { top: 1.3rem; transform: rotate(-30deg); } body.membBoxActive .c-memberBox__close span:nth-child(2) { top:1.3rem; transform: rotate(30deg); } /* hover */ body.membBoxActive .c-memberBox__close:hover span:nth-child(1) { transform: rotate(-20deg); } body.membBoxActive .c-memberBox__close:hover span:nth-child(2) { transform: rotate(20deg); } /* --- box --- */ /* common */ .c-memberBox { position: fixed; width: 47rem; background-color: rgba(255,255,255,1); backdrop-filter: blur(22px); top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: all ease .5s; z-index: 11; } .c-memberBox > .inner { width: 72.4%; height: auto; padding: 4.9rem 0 6.3rem; } .c-memberBox:before { content: ""; position: absolute; width: 100%; border-top: 0px solid #000; top: 0.2rem; left: 0%; } .c-memberBox:after { content: ""; position: absolute; width: 100%; border-top: 0px solid #000; bottom: 0.3rem; left: 0%; } /* active */ body.membBoxActive .c-memberBox { visibility: visible; opacity: 1; } /* top */ .c-member__top { } .c-member__top .left { } .c-member__top .right { margin-top: 2.6rem; } /* title */ .c-memberBox .title { font-size: 3.75rem; font-family: minion-pro-display, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; position: relative; display: flex; flex-flow: column; text-align: center; justify-content: center; } .c-memberBox .title .logo { display: block; width: 7.4rem; height: 7.4rem; display: flex; align-items: center; justify-content: center; border: 2px solid #e4e4e4; border-radius: 100%; position: relative; margin: 0rem auto 1.1rem; } .c-memberBox .title .logo img { width: 66%; height: auto; margin-top: -0.1rem; margin-left: 0rem; opacity: 1; } .c-memberBox .title .logo:before { content: ""; position: absolute; width: 93%; height: 93%; border: 0.5px solid #e3e3e3; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); } /* desc */ .c-memberBox .desc { line-height: 2.15; width: 94.8%; margin: 0 auto; } /* bottom */ .c-member__bottom { display: flex; flex-flow: column; margin-top: 3rem; width: 101%; margin-left: -0.5%; } .c-memberBox button { font-size: 1.25rem; border: initial; border-radius: 0.2rem; } .c-memberBox button + button { margin-top: 0.5rem; } .c-memberBox button a { display: block; padding-top: 2.7rem; padding-bottom: 2rem; } /* login */ .c-memberBox button.login { background: #EBEBEB; } /* register */ .c-memberBox button.register { background-color: #292929; } .c-memberBox button.register a { color: #fff; }