#lp-sp-old{ margin: auto; width: 960px; line-height: 1.75;} #lp-sp-old img { display: initial; max-width: 100%;} @media only screen and (max-width: 979px) { #lp-sp-old { width: 100%;} } /*--------------------------------- MV slider ---------------------------------*/ /* 表示領域全体 */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3 { position : relative; max-width : 960px; max-height : 400px; margin : 0 auto; } /* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3::before { content : ""; display : block; padding-top : 45%; } /* アニメーションの設定 */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3 div.ph { position: absolute; top : 0; left : 0; max-width : 100%; max-height : 100%; opacity : 0; animation : itmFade3-chg-itm-anim 30s infinite; /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「15秒」で「無限」に繰り返す */ } /* 1つ目のアイテム */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3 div.ph:nth-of-type( 1 ) { animation-delay : 0s; /* アニメーション(下記「@keyframes chg-itm-anim」)の開始を0秒遅らせる */ } /* 2つ目のアイテム */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3 div.ph:nth-of-type( 2 ) { /** * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を5秒遅らせる * (上記アニメーション全体15秒の1/3，1枚目のアニメーションが33%に到達(フェードアウト開始)した時に2枚目のアニメーション(フェードイン)開始) **/ animation-delay : 10s; } /* 3つ目のアイテム */ #lp-sp-old .room_fragrance .top_area div.container.itmFade_3 div.ph:nth-of-type( 3 ) { /** * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を10秒遅らせる * (上記アニメーション全体15秒の1/3，2枚目のアニメーションが33%に到達(フェードアウト開始)した時に3枚目のアニメーション(フェードイン)開始) **/ animation-delay : 20s; } /* アニメーションの進行 */ @keyframes itmFade3-chg-itm-anim { 0% { opacity : 0; } 10%{ opacity : 1; z-index : 3; } 33%{ opacity : 1; } /** * 画像が3枚のため1枚当たり33% * 1枚目->2枚目(33%・不透明から50%・透明)にフェードして切り替える * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる */ 50%{ opacity : 0; z-index : 1; } 100% { opacity : 0; } } .slider-container { position: relative; width: 100%; height: 550px; overflow: hidden; margin: 30px 0px; } /*画像の配置*/ .slideimg { position: absolute; /* 位置を絶対指定で重ねて配置 */ inset: 0; /*親要素内にフルサイズで配置*/ opacity: 0; /* 初期状態で透明に */ background-size: cover; /* 画像をスライド全体にカバー */ animation: slideAnime 12s infinite; /* 1サイクル12秒を無限ループ */ } /* スライド個別設定 */ .slideimg:nth-of-type(1) { background-image: url('/static/mallDefault/contents/images/sp/room_fragrance/mv_01.png'); animation-delay: 0s; } .slideimg:nth-of-type(2) { background-image: url('/static/mallDefault/contents/images/sp/room_fragrance/mv_02.png'); animation-delay: 3s; } .slideimg:nth-of-type(3) { background-image: url('/static/mallDefault/contents/images/sp/room_fragrance/mv_03.png'); animation-delay: 6s; } .slideimg:nth-of-type(4) { background-image: url('/static/mallDefault/contents/images/sp/room_fragrance/mv_04.png'); animation-delay: 9s; } /*タイミング設定*/ @keyframes slideAnime { 0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */ 10%, 20% { opacity: 1; } /* 表示されるタイミング */ } #lp-sp-old .cfix:after { display: block; visibility: hidden; clear: both; height: 0; content: ".";} #lp-sp-old .cfix { min-height: 1px;} #lp-sp-old .sp_main { overflow: hidden;} #lp-sp-old #brand-main { margin-bottom: 20%;} #lp-sp-old .room_fragrance { padding: 50px 0 0; color: #484848; text-align: center; letter-spacing: 0.05em; font-size: 14px;} #lp-sp-old .room_fragrance p { line-height: 1.7;} #lp-sp-old .room_fragrance li { list-style: none;} #lp-sp-old .room_fragrance h1 { margin: 0; padding: 0; border: none;} #lp-sp-old .room_fragrance h2 { margin-bottom: 3%; font-style: italic; font-size: 42px; font-family: dederon-serif-web, serif;} #lp-sp-old .room_fragrance h2 span { display: block; font-style: normal; font-size: 14px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; line-height: 1.4;} #lp-sp-old .room_fragrance h3, #lp-sp-old .room_fragrance h4 { margin: 50px 0 40px; font-size: 24px; font-family: dederon-serif-web, serif;} #lp-sp-old .room_fragrance h3 { padding: 50px 0 0; border-top: 2px solid #cdcdcd;} #lp-sp-old .room_fragrance h3 span, #lp-sp-old .room_fragrance h4 span { display: block; font-size: 12px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;} #lp-sp-old .room_fragrance .center { margin-bottom: 50px;} #lp-sp-old .room_fragrance .center a { margin: 0 auto !important; padding: 16px 0; width: 40%; border: 2px solid #cdcdcd; background-color: #fff; font-size: 14px;} #lp-sp-old .room_fragrance .center a img{ width: auto;} #lp-sp-old .room_fragrance .top_area { margin-bottom: 2%;} #lp-sp-old .room_fragrance .top_area .main_img { margin-bottom: 6%;} #lp-sp-old .room_fragrance .readtext { letter-spacing: 0.1em;} #lp-sp-old .room_fragrance .sec_item_txt { margin: 30px auto 0; max-width: 630px; text-align: left;} #lp-sp-old .room_fragrance .item { margin-top: 40px;} #lp-sp-old #NOTE ul.item_list > li { border-top: 2px solid #cdcdcd;} #lp-sp-old .nav { margin-bottom: 30px;} #lp-sp-old #NOTE .nav ul { display: flex; flex-wrap: wrap;} #lp-sp-old #NOTE .nav ul li { margin-right: 20px; margin-bottom: 20px; width: calc((100% - 46px) / 3); border: 1px solid #bdd077;} #lp-sp-old #NOTE .nav ul li:nth-of-type(2) { border: 1px solid #e0cb59;} #lp-sp-old #NOTE .nav ul li:nth-of-type(3) { border: 1px solid #c1af98;} #lp-sp-old #NOTE .nav ul li:nth-of-type(4) { border: 1px solid #bda6c7;} #lp-sp-old #NOTE .nav ul li:nth-of-type(5) { border: 1px solid #ecb8b4;} #lp-sp-old #NOTE .nav ul li:nth-of-type(6) { border: 1px solid #f8bb9e;} #lp-sp-old #NOTE .nav ul li:nth-of-type(3n) { margin-right: 0;} #lp-sp-old #NOTE .nav ul li p { margin: 0; letter-spacing: 0.05em; font-size: 14px;} #lp-sp-old #NOTE .nav ul li a { display: block; padding: 30px 0;} #lp-sp-old #NOTE .nav ul li p.nav_ttl { margin-bottom: 10px; letter-spacing: 0; font-size: 24px; font-family: dederon-serif-web, serif; line-height: 1.4;} #lp-sp-old #NOTE .nav ul li .nav_ttl span { display: block; font-size: 12px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;} #lp-sp-old #PRODUCT h4 { margin: 30px 0 15px;} #lp-sp-old .tab_item { margin-left: 2.5%;} #lp-sp-old .tab_item:nth-of-type(3n) { margin-left: 0%;} #lp-sp-old .tab_item .phase:hover { opacity: 0.75;} #lp-sp-old input[name="tab_item"] { display: none;} #lp-sp-old .tab_content { display: none; clear: both; overflow: hidden; text-align: center;} #lp-sp-old #one:checked ~ #one_content, #lp-sp-old #two:checked ~ #two_content, #lp-sp-old #three:checked ~ #three_content, #lp-sp-old #four:checked ~ #four_content, #lp-sp-old #five:checked ~ #five_content, #lp-sp-old #six:checked ~ #six_content { display: block;} #lp-sp-old .tabs input:checked + .tab_item { background-color: #c8c8c8; color: #ffffff; pointer-events: visible;} #lp-sp-old .tabs .tab_item img.checked_visible { display: block;} #lp-sp-old .tabs .tab_item img.checked_hidden { display: none;} #lp-sp-old .tabs input:checked + .tab_item img.checked_visible { display: none;} #lp-sp-old .tabs input:checked + .tab_item img.checked_hidden { display: block;} #lp-sp-old #BRAND .sec_item_txt { display: flex; margin: 50px auto 0; max-width: 85%;} #lp-sp-old #BRAND .brand_item_detail { width: 55%;} #lp-sp-old #BRAND .brand_item_detail p { margin-bottom: 20px; margin-left: 30px; text-align: left; word-break: break-all; letter-spacing: 0.05em; line-height: 1.6;} #lp-sp-old #BRAND .brand_item_detail span { display: inline-block; margin-top: 15px; padding: 2px 10px; border: 1px solid #426fc4; color: #426fc4; font-family: futura-pt, sans-serif;} #lp-sp-old #BRAND .brand_item_img { margin-bottom: 15px; width: 90%;} @media only screen and (max-width: 767px) { #lp-sp-old .room_fragrance { padding: 25px 0 0; color: #484848; text-align: center; letter-spacing: 0;} #lp-sp-old .room_fragrance p { text-align: center; letter-spacing: 0; font-size: 12px; line-height: 1.6;} #lp-sp-old .room_fragrance h2 { margin-bottom: 5%; font-size: 26px;} #lp-sp-old .room_fragrance h2 span { line-height: 1.6;} #lp-sp-old .room_fragrance h3, #lp-sp-old .room_fragrance h4 { margin: 0 0 26px; padding-top: 40px; font-size: 22px;} #lp-sp-old .room_fragrance h4 { border-top: 2px solid #cdcdcd;} #lp-sp-old .room_fragrance section { margin-top: -110px; padding-top: 110px;} #lp-sp-old #NOTE .nav ul { justify-content: center;} #lp-sp-old #NOTE .nav ul li { display: flex; flex-direction: column; margin-right: 10px; margin-bottom: 10px; width: calc((100% - 24px) / 2); border: 1px solid #bdd077; justify-content: center;} #lp-sp-old #NOTE .nav ul li:nth-of-type(3n) { margin-right: 10px;} #lp-sp-old #NOTE .nav ul li:nth-of-type(2n) { margin-right: 0;} #lp-sp-old #NOTE .nav ul li a { padding: 12px 0;} #lp-sp-old #NOTE .nav ul li p.nav_ttl { margin-bottom: 10px; letter-spacing: 0; font-size: 16px; line-height: 1.4;} #lp-sp-old #NOTE .nav ul li p { font-size: 12px;} #lp-sp-old #NOTE .nav ul li .nav_ttl span { font-size: 10px;} #lp-sp-old #NOTE ul.item_list > li { margin-top: -110px; padding-top: 110px; border-top: none;} #lp-sp-old .tabs { width: 100%;} #lp-sp-old .tabs::before { top: 45px;} #lp-sp-old .tab_item { margin-right: 1%; width: 23%; height: 14px; font-size: 12px; line-height: 44px;} #lp-sp-old .room_fragrance .center a { padding: 12px 0; width: 90%; font-size: 12px;} #lp-sp-old .room_fragrance .sec_txt { padding-bottom: 16px; width: 100%;} #lp-sp-old .room_fragrance .top_img { margin-bottom: 7%;} #lp-sp-old .room_fragrance .item { margin: 20px auto 0; width: 90%;} #lp-sp-old .room_fragrance .sec_item_txt { margin: 20px auto 0; width: 95%;} #lp-sp-old #BRAND .sec_item_txt { display: block; margin: 30px auto 0; max-width: 95%;} #lp-sp-old #BRAND .brand_item_detail { width: 100%;} #lp-sp-old #BRAND .brand_item_detail p { margin-top: 20px; margin-bottom: 16px; margin-left: 0; letter-spacing: 0; line-height: 1.8;} #lp-sp-old #BRAND .brand_item_img { width: 50%;} } @media only screen and (max-width: 320px) { #lp-sp-old .tab_item { width: 22.8%; font-size: 10px;} } /*--------------------------------- vsm content ---------------------------------*/ #lp-sp-old .vsm-slider { margin: 60px auto !important;} #lp-sp-old .ecbn-selection-widget .ttle_instagram h2 { display: none !important;} @media only screen and (max-width: 767px) { #lp-sp-old .vsm-slider { margin: 30px auto !important;} } /*--------------------------------- anchor link ---------------------------------*/ #lp-sp-old .anchor { display: flex; margin: 4% auto; width: 100%; text-align: center; justify-content: space-between;} #lp-sp-old .hacobune-gallery { margin-bottom: 6%; } #lp-sp-old .pickup { margin-right: 20px; padding: 16px 0; width: calc((100% - 70px)/3); font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; line-height: 1.6;} #lp-sp-old .pickup:last-of-type { margin-right: 0;} #lp-sp-old .pickup a { display: block; padding: 7% 0; background-color: #f4f4f4; color: #333333; letter-spacing: 2px; font-weight: 400; font-size: 16px;} #lp-sp-old .pickup a img { display: inline-block; margin-right: 3%; width: auto; vertical-align: middle;} #lp-sp-old .pickup a span { display: inline-block; margin-right: 3%; vertical-align: middle;} @media only screen and (max-width: 767px) { #lp-sp-old .pickup { margin-right: 10px; width: calc((100% - 10px)/3);} #lp-sp-old .pickup a { font-size: 10px;} } /*--------------------------------- PRODUCT tabs ---------------------------------*/ #lp-sp-old .tabs, #lp-sp-old .tabs2 { margin: 0 auto; width: 100%; text-align: center;} #lp-sp-old .tab_item, #lp-sp-old .tab_item2 { display: block; float: left; margin: 0 20px 10px 0; padding: 16px 0; width: calc((100% - 70px)/3); border: solid 1px #d9d8d6; background-color: #fff; color: #333333; text-align: center; text-align: center; letter-spacing: 1px; font-size: 14px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; line-height: 20px; transition: all 0.2s ease;} #lp-sp-old .tab_item:nth-of-type(3n), #lp-sp-old .tab_item2:nth-of-type(3n) { margin-right: 0;} #lp-sp-old .tab_item:hover { opacity: 0.75;} #lp-sp-old input[name="tab_item"], #lp-sp-old input[name="tab_item2"] { display: none;} #lp-sp-old .tab_content, #lp-sp-old .tab_content2 { display: none; clear: both; overflow: hidden;} #lp-sp-old .tabs input:checked + .tab_item, #lp-sp-old .tabs2 input:checked + .tab_item2 { background-color: #d9d8d6; color: #fff;} @media only screen and (max-width: 767px) { #lp-sp-old .tab_item, #lp-sp-old .tab_item2 { margin: 0 10px 10px 0; width: calc((100% - 15px)/2); letter-spacing: .005em; font-size: 12px; line-height: 14px;} #lp-sp-old .tab_item:nth-of-type(3n), #lp-sp-old .tab_item2:nth-of-type(3n) { margin-right: 10px;} #lp-sp-old .tab_item:nth-of-type(2n), #lp-sp-old .tab_item2:nth-of-type(2n) { margin-right: 0;} }