@charset "UTF-8";
html {
font-size: 0.4857143vw;
scroll-behavior: smooth;
}
@media screen and (min-width: 1400px) {
html {
font-size: 6.8px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.l-container {
width: initial;
}

.l-footer {
  padding: 0;
}

.pc-footer {
  margin: 0;
}


#feature ul li { list-style: none; }
#feature img { width: 100%; height: auto; display: block; }
#feature a { text-decoration: none; display: block; transition: opacity 0.3s; }
/* 全体設定 */
#feature {
width: 100%;
overflow: clip;
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
background: #efeae6;
position: relative; /* 固定要素の相対基準 */
}
/* PCコンテンツコンテナ (中央寄せ) */
#feature .pc_content {
width: 100%;
display: flex;
justify-content: center;
}
/* 中央メインコンテンツ */
#feature .feature__inner {
width: 75rem;
position: relative;
background: #efeae6;
z-index: 1;
}
/* =========================================================
PC専用 固定配置要素
========================================================= */
/* 左側固定テキスト（初期位置はページ上部、スクロールでヘッダー位置に達すると追従） */
#feature .fixed_left {
position: absolute;
top: 0;
bottom: 0;
left: 7.5rem; /* 画面左端からの距離。コンテンツに寄せる場合は calc(50% - 95.5rem) 等に調整 */
width: 48rem;
z-index: 10;
pointer-events: none;
padding-top: 7.5rem; /* 初期表示時の上部位置 */
padding-bottom: 20rem;
}
#feature .fixed_left figure,
#feature .fixed_left .sticky_wrap {
position: sticky;
top: calc(80px + 3rem); 
width: 100%;
pointer-events: auto;
transition: top 0.5s ease;
}
/* 追従ヘッダー（.header-fixed.show）表示時は固定位置を下げる */
body:has(.header-fixed.show) #feature .fixed_left figure,
body:has(.header-fixed.show) #feature .fixed_left .sticky_wrap {
top: calc(80px + 12rem);
}
/* 右下固定導線（画面右下に常に追従） */
#feature .fixed_right {
position: fixed;
right: 7.5rem; /* 画面右端からの距離。コンテンツに寄せる場合は calc(50% - 95.5rem) 等に調整 */
bottom: 6rem;
width: 36rem;
z-index: 10;
opacity: 1;
visibility: visible;
transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s;
}
/* スクロールで下部に到達した際などに非表示にする用のクラス（JSと連動可能） */
#feature .fixed_right.is-hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s 0.8s;
}
#feature .fixed_right figure {
width: 100%;
pointer-events: auto;
}
/* =========================================================
以降、元のスタイル
========================================================= */
/* アニメーション */
#feature .fadeIn {
opacity: 0;
filter: blur(1rem);
transform: translateY(2rem);
transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
}
#feature .fadeIn.active {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
#feature .hero { position: relative; }
#feature .hero_ttl {
width: 66rem;
position: absolute;
top: 47.2%;
left: 6%;
}
/* リード文セクション */
#feature .lead_area {
width: 65rem;
margin: 10rem auto 19.5rem;
text-align: center;
color: #1e1e1e;
}
#feature .lead_ttl {
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.8rem;
line-height: 2;
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
margin-left: 1rem;
}
#feature .lead_txt {
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2.2rem;
line-height: 2.1;
letter-spacing: 0;
}
#feature .section { padding-bottom: 8rem; }
#feature .sec01 .jacket_ttl {
width: 51.5rem;
margin: -1rem auto 3.5rem 12.5rem
}
#feature .sec02 .jacket_ttl {
width: 57.5rem;
margin: 22.5rem auto 4.5rem 8.5rem;
}
#feature .swiper-linear {
width: 100%;
margin-bottom: 7rem;
}
#feature .swiper-linear .swiper-slide {
width: 48rem;
}
#feature .swiper-linear .swiper-wrapper {
transition-timing-function: linear !important;
}
/* --- アコーディオン & ぼかし表示設定 --- */
#feature .sec01 .accordion_area {
width: 65rem;
margin: 4rem auto 15.2rem;
position: relative;
}
#feature .sec02 .accordion_area {
width: 65rem;
margin: 4rem auto 15.5rem;
position: relative;
}
#feature .accordion_text {
position: relative;
max-height: 8.8rem;
overflow: hidden;
transition: max-height 0.5s ease;
}
#feature .accordion_text p {
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 2.2rem;
line-height: 2;
text-align: center;
color: #1e1e1e;
}
#feature .accordion_text::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6rem;
background: linear-gradient(to bottom, rgba(245, 242, 237, 0) 0%, #efeae6 100%);
pointer-events: none;
transition: opacity 0.4s ease;
}
#feature .accordion_area.is-open .accordion_text {
max-height: 40rem;
}
#feature .accordion_area.is-open .accordion_text::after {
opacity: 0;
}
/* VIEW MORE / CLOSE ボタン */
#feature .view_more {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: 3rem;
cursor: pointer;
position: relative;
z-index: 2;
}
/* --- 画像の切り替え設定 --- */
/* 通常時 */
#feature .view_more .txt {
width: 17rem;
}
#feature .view_more .img_view {
display: block; /* VIEW MOREを表示 */
}
#feature .view_more .img_close {
display: none; /* CLOSEを非表示 */
}
/* アコーディオン展開時（is-open） */
#feature .accordion_area.is-open .view_more .txt {
width: 9rem;
margin-top: 2rem;
}
#feature .accordion_area.is-open .view_more .img_view {
display: none; /* VIEW MOREを非表示 */
}
#feature .accordion_area.is-open .view_more .img_close {
display: block; /* CLOSEを表示 */
}
#feature .view_more .arrow {
width: 2.5rem;
transition: transform 0.3s ease, margin-top 0.3s ease;
}
#feature .accordion_area.is-open .view_more .arrow {
transform: rotate(180deg);
margin-top: 2.4rem;
}
/* クレジット*/
#feature .credit_area {
width: 65rem;
margin: 2rem auto;
font-family: "ivyora-display", serif;
font-weight: 400;
font-style: normal;
font-size: 2.2rem;
line-height: 1.88;
letter-spacing: 0.05em;
}
#feature .credit {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 1rem;
}
#feature .credit .item {
display: inline-block;
}
#feature .credit .link {
display: inline-flex;
gap: 0.5rem;
color: #1e1e1e;
}
#feature .credit01 {
margin: 1rem 1rem 1rem 4rem;
}
#feature .credit02 {
margin: 2rem 1rem 1rem 10.5rem
}
/* 4つ目のアイテムの直前で改行 */
#feature .credit02 .credit .item:nth-child(4) {
  flex-basis: 100%;
}
#feature .credit03 {
margin: 0.5rem 1rem 1rem 10.5rem
}
#feature .credit04 {
margin: 2rem 1rem 1rem 13rem
}
#feature .block_area {
position: relative;
}
#feature .block_area_01 .swiper-normal {
width: 67rem;
margin: 0 auto;
}
#feature .block_area_03 .swiper-normal {
width: 54rem;
margin: 0 auto;
}
#feature .block_area_04 .swiper-normal {
width: 67rem;
margin: 0 auto;
}
#feature .block_area_05 .swiper-normal {
width: 54rem;
margin: 15.1rem auto 0
}
#feature .text01, #feature .text02, #feature .text03, #feature .text04 {
position: absolute;
width: 2.5rem;
z-index: 10;
}
#feature .text01 {
width: 20%;
top: -3rem;
right: 4rem;
}
#feature .text02 {
width: 2.6%;
top: 0;
right: 7.5rem;
}
#feature .text03 {
width: 19%;
top: -3rem;
left: 4rem;
}
#feature .text04 {
width: 2.6%;
top: 0;
left: 7.2rem;
}
#feature .img02 {
margin: 18rem auto 8rem;
}
#feature .footer_sec { padding-bottom: 0; }
#feature .check_all_items {
width: 53rem;
margin: 11rem auto 12rem;
}
#feature .staff_area {
position: relative;
width: 75rem;
}
#feature .staff {
position: absolute;
bottom: 3rem;
left: 3rem;
width: 25rem;
z-index: 10;
}