/* -------------------------------------------------- Common -------------------------------------------------- */ body #shopify-section-header, body #shopify-section-footer { display: none; } body header.section-header { display: none; } body .page-content { padding: 0; max-width: none; } body .page-content .grid { margin: 0; } body .page-content .grid .grid__item { padding: 0; width: 100%; left: 0; } body #wrapper { font-family: source-han-serif-japanese, serif; color: #666666; line-height: 1; margin: 0; } body #wrapper input, body #wrapper textarea, body #wrapper button, body #wrapper h1, body #wrapper .h1, body #wrapper h2, body #wrapper .h2, body #wrapper h3, body #wrapper .h3, body #wrapper h4, body #wrapper .h4, body #wrapper h5, body #wrapper .h5, body #wrapper h6, body #wrapper .h6, body #wrapper p { font-family: inherit; margin: 0; } body #wrapper p { margin: 0; } body #wrapper ul { margin: 0; } body #wrapper ul li { list-style: none; margin: 0; } body #wrapper img, body #wrapper video { width: 100%; vertical-align: middle; } body #wrapper a { color: inherit; text-decoration: none; border: none; display: inline; } body #wrapper a::after { display: none; } body #wrapper.is-loaded { opacity: 1 !important; transition: opacity .5s ease 0s; } @media screen and (max-width: 768px) { #wrapper .pc { display: none !important; } } @media screen and (min-width: 769px) { #wrapper .sp { display: none !important; } } /* -------------------------------------------------- Contents -------------------------------------------------- */ #wrapper { overflow: hidden; } #wrapper .top { position: relative; } #wrapper .top .logo { width: 24%; position: absolute; left: 72%; top: 2.67%; z-index: 2; } #wrapper .top .logo img { aspect-ratio: 500 / 58; filter: brightness(100); } #wrapper .top .titlearea { position: absolute; left: 0; right: 0; top: 48.89%; z-index: 2; } #wrapper .top .titlearea .title { width: 66.93%; margin: 0 0 5.2% 30.13%; opacity: 0; } #wrapper .top .titlearea .title img { aspect-ratio: 500 / 349; } #wrapper .top .titlearea .catch { width: 79.2%; margin: 0 0 0 18.13%; } #wrapper .top .titlearea .catch .catch-row { display: block; width: fit-content; position: relative; background: linear-gradient(90deg, #E6AAC8 0%, #E6AAC8 100%); background-size: 0% 100%; background-position: 0% 0%; background-repeat: no-repeat; } #wrapper .top .titlearea .catch .catch-row img { width: auto; height: 6.67vw; opacity: 0; } #wrapper .top .titlearea .catch .catch-row2 { margin: 0 0 0 auto; } #wrapper .top .image-container .imagearea { width: 89.33%; position: absolute; left: 0; top: 0; opacity: 0; } #wrapper .top .image-container .imagearea img { aspect-ratio: 67 / 96; } #wrapper .top .image-container .bg-image img { aspect-ratio: 750 / 1125; } #wrapper .lead { padding: 60px 0 80px; } #wrapper .lead .inner .moviearea { width: 315px; max-width: 96%; margin: 0 auto 35px; position: relative; } #wrapper .lead .inner .moviearea .iconarea { position: absolute; right: 20px; top: 20px; color: #fff; font-family: spectral, source-han-serif-japanese, serif; font-size: 12px; } #wrapper .lead .inner .moviearea .iconarea .sound-icon img { aspect-ratio: 100 / 82; width: 15px; margin: 0 0 0 10px; } #wrapper .lead .inner .moviearea .iconarea .sound-icon#sound-on { display: none; } #wrapper .lead .inner .textarea { text-align: center; } #wrapper .lead .inner .textarea .text { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; font-size: 13px; line-height: 2; letter-spacing: 0.1em; margin: 0 0 35px; } #wrapper .lead .inner .textarea .rsv-btn { width: 315px; max-width: 96%; height: 62px; margin: 0 auto 45px; color: #fff; font-weight: 600; font-size: 16px; } #wrapper .lead .inner .textarea .rsv-btn a { height: 100%; display: flex; justify-content: center; align-items: center; background: #E6AAC8; position: relative; border-radius: 3px; } #wrapper .lead .inner .textarea .rsv-btn a::after { display: block; content: ""; width: 10px; aspect-ratio: 1; border-right: 1px solid #fff; border-top: 1px solid #fff; transform: translate(0, -50%) rotate(45deg); position: absolute; right: 30px; top: 50%; } #wrapper .lead .inner .textarea .about-btn { width: 200px; max-width: 90%; margin: 0 auto; } #wrapper .lead .inner .textarea .about-btn img { aspect-ratio: 240 / 33; } #wrapper .message { padding: 50px 0 0; position: relative; } #wrapper .message .inner { background: #FAECF1; padding: 140px 0 40px; } #wrapper .message .inner .imagearea { width: 180px; border-radius: 20px; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; } #wrapper .message .inner .imagearea img { aspect-ratio: 18 / 16; } #wrapper .message .inner .textarea .titlearea { margin: 0 0 10px; } #wrapper .message .inner .textarea .titlearea .title-line1 { width: 100px; margin: 0 auto 12px; } #wrapper .message .inner .textarea .titlearea .title-line1 img { aspect-ratio: 500 / 105; } #wrapper .message .inner .textarea .titlearea .title-line2 { width: 80px; margin: 0 auto; } #wrapper .message .inner .textarea .titlearea .title-line2 img { aspect-ratio: 500 / 132; } #wrapper .message .inner .textarea .comment { position: relative; color: #4d4d4d; text-align: center; padding: 5px 0; } #wrapper .message .inner .textarea .comment .text { font-size: 13px; line-height: 1.81; } #wrapper .message .inner .textarea .comment .quot { width: 22px; position: absolute; } #wrapper .message .inner .textarea .comment .quot img { aspect-ratio: 100 / 87; } #wrapper .message .inner .textarea .comment .quot1 { right: calc(50% + 114px); top: 0; } #wrapper .message .inner .textarea .comment .quot2 { left: calc(50% + 114px); bottom: 0; transform: rotate(180deg); } #wrapper .look-wrapper { padding: 8% 0 34.67%; } #wrapper .look-wrapper .look { position: relative; z-index: 1; } #wrapper .look-wrapper .look > * { position: relative; } #wrapper .look-wrapper .look .deco { position: absolute; z-index: 3; } #wrapper .look-wrapper .look .titlearea { position: relative; z-index: 4; } #wrapper .look-wrapper .look .titlearea .title-catch { width: 32.53%; position: relative; z-index: 4; } #wrapper .look-wrapper .look .titlearea .title-catch img { aspect-ratio: 500 / 137; } #wrapper .look-wrapper .look .titlearea .color { position: relative; z-index: 4; } #wrapper .look-wrapper .look .titlearea .deco { top: 0; } #wrapper .look-wrapper .look .image-panel { position: relative; } #wrapper .look-wrapper .look .image-panel .image-container { position: relative; } #wrapper .look-wrapper .look .image-panel .look-catch { position: relative; z-index: 4; } #wrapper .look-wrapper .look .image-panel .look-catch .catch { font-weight: 600; font-size: 4.8vw; line-height: 1.5; letter-spacing: 0; } #wrapper .look-wrapper .look .image-panel .textarea { padding: 20px 0 0; } #wrapper .look-wrapper .look .image-panel .textarea .credit { font-family: spectral, source-han-serif-japanese, serif; font-size: 13px; line-height: 2; } #wrapper .look-wrapper .look .image-panel .textarea .credit ul { display: flex; flex-wrap: wrap; column-gap: 1.5em; } #wrapper .look-wrapper .look .image-panel .textarea .credit ul li a { text-decoration: underline; } #wrapper .look-wrapper .look#look01 { margin: 0 0 4.67%; } #wrapper .look-wrapper .look#look01 .titlearea { aspect-ratio: 750 / 421; padding: 19.33% 0 0; } #wrapper .look-wrapper .look#look01 .titlearea .title-catch { margin: 0 0 4% 61.87%; } #wrapper .look-wrapper .look#look01 .titlearea .color { width: 36.53%; margin: 0 0 0 47.33%; } #wrapper .look-wrapper .look#look01 .titlearea .color img { aspect-ratio: 500 / 221; } #wrapper .look-wrapper .look#look01 .titlearea .deco { width: 43.73%; left: 8.53%; transform: rotate(7deg); } #wrapper .look-wrapper .look#look01 .titlearea .deco img { aspect-ratio: 258 / 310; } #wrapper .look-wrapper .look#look01 .image-panel1 .image-container .imagearea img { aspect-ratio: 54 / 72; } #wrapper .look-wrapper .look#look01 .image-panel1 .image-container .deco { width: 52%; left: 54.13%; top: 82.1%; transform: rotate(7deg); } #wrapper .look-wrapper .look#look01 .image-panel1 .image-container .deco img { aspect-ratio: 263 / 314; } #wrapper .look-wrapper .look#look01 .image-panel1 .look-catch { aspect-ratio: 750 / 273; padding: 6.67% 0 0 8%; } #wrapper .look-wrapper .look#look01 .image-panel2 { padding: 0 0 20%; } #wrapper .look-wrapper .look#look01 .image-panel2 .image-container .imagearea { width: 92%; } #wrapper .look-wrapper .look#look01 .image-panel2 .image-container .imagearea img { aspect-ratio: 45 / 60; } #wrapper .look-wrapper .look#look01 .image-panel2 .textarea .credit { padding: 0 8%; } #wrapper .look-wrapper .look#look01 .image-panel2::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: 13.47vw; bottom: 0; background: #F2C9DD; z-index: -1; } #wrapper .look-wrapper .look#look02 { margin: 0 0 25.33%; } #wrapper .look-wrapper .look#look02 .titlearea { aspect-ratio: 750 / 506; padding: 32.67% 0 0; } #wrapper .look-wrapper .look#look02 .titlearea .title-catch { margin: 0 0 4.67% 36.4%; } #wrapper .look-wrapper .look#look02 .titlearea .color { width: 72.93%; margin: 0 0 0 14%; } #wrapper .look-wrapper .look#look02 .titlearea .color img { aspect-ratio: 500 / 98; } #wrapper .look-wrapper .look#look02 .titlearea .deco { width: 51.2%; left: -8.67%; transform: rotate(10deg); } #wrapper .look-wrapper .look#look02 .titlearea .deco img { aspect-ratio: 258 / 310; } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .imagearea { width: 94.67%; } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .imagearea img { aspect-ratio: 54 / 76; } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .deco { width: 46.13%; left: 53.07%; top: 75.1%; transform: rotate(-5deg); } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .deco img { aspect-ratio: 255 / 307; } #wrapper .look-wrapper .look#look02 .image-panel1 .look-catch { aspect-ratio: 750 / 255; padding: 13.33% 0 0 11.47%; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container { aspect-ratio: 750 / 892; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea { position: absolute; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(1) { width: 86.67%; right: 0; bottom: 0; z-index: 2; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(1) img { aspect-ratio: 466 / 600; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(2) { width: 77.33%; left: 0; top: 0; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(2) img { aspect-ratio: 431 / 608; } #wrapper .look-wrapper .look#look02 .image-panel2 .textarea .credit { padding: 0 13.33%; } #wrapper .look-wrapper .look#look03 { margin: 0 0 25.33%; } #wrapper .look-wrapper .look#look03 .titlearea { aspect-ratio: 750 / 573; padding: 38.27% 0 0; } #wrapper .look-wrapper .look#look03 .titlearea .title-catch { margin: 0 0 4.4% 19.47%; } #wrapper .look-wrapper .look#look03 .titlearea .color { width: 45.87%; margin: 0 0 0 38.4%; } #wrapper .look-wrapper .look#look03 .titlearea .color img { aspect-ratio: 500 / 214; } #wrapper .look-wrapper .look#look03 .titlearea .deco { width: 51.07%; left: 55.73%; transform: rotate(12deg); } #wrapper .look-wrapper .look#look03 .titlearea .deco img { aspect-ratio: 257 / 309; } #wrapper .look-wrapper .look#look03 .layout-container::after { display: block; content: ""; width: 96%; position: absolute; right: 0; top: 177.2vw; aspect-ratio: 720 / 1054; background: #EFEBDF; z-index: -1; } #wrapper .look-wrapper .look#look03 .image-panel1 .image-container .imagearea { width: 94.67%; } #wrapper .look-wrapper .look#look03 .image-panel1 .image-container .imagearea img { aspect-ratio: 54 / 76; } #wrapper .look-wrapper .look#look03 .image-panel1 .look-catch { aspect-ratio: 750 / 245; padding: 6.67% 0 0 13.33%; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .imagearea { width: 86.67%; margin: 0 0 0 auto; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .imagearea img { aspect-ratio: 45 / 60; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .deco { width: 52.53%; left: -9.87%; top: -1.31%; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .deco img { aspect-ratio: 264 / 317; } #wrapper .look-wrapper .look#look03 .image-panel2 .textarea .credit { padding: 0 13.33%; } #wrapper .look-wrapper .look#look04 .titlearea { aspect-ratio: 750 / 346; padding: 8.93% 0 0; } #wrapper .look-wrapper .look#look04 .titlearea .title-catch { margin: 0 0 3.73% 56.13%; } #wrapper .look-wrapper .look#look04 .titlearea .color { width: 46.27%; margin: 0 0 0 41.87%; } #wrapper .look-wrapper .look#look04 .titlearea .color img { aspect-ratio: 500 / 177; } #wrapper .look-wrapper .look#look04 .titlearea .deco { width: 51.2%; left: -6.27%; } #wrapper .look-wrapper .look#look04 .titlearea .deco img { aspect-ratio: 258 / 309; } #wrapper .look-wrapper .look#look04 .image-panel1 { z-index: 3; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .imagearea img { aspect-ratio: 54 / 72; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco2 { width: 54.67%; left: 54.67%; top: 83.7%; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco2 img { aspect-ratio: 258 / 309; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco3 { width: 46.13%; left: 64.27%; top: 110.2%; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco3 img { aspect-ratio: 219 / 263; } #wrapper .look-wrapper .look#look04 .image-panel1 .look-catch { aspect-ratio: 750 / 292; padding: 7.33% 0 0 8%; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container { aspect-ratio: 750 / 983; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea { position: absolute; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(1) { width: 92%; left: 0; bottom: 0; z-index: 2; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(1) img { aspect-ratio: 48 / 64; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(2) { width: 77.33%; right: 0; top: 0; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(2) img { aspect-ratio: 420 / 594; } #wrapper .look-wrapper .look#look04 .image-panel2 .textarea .credit { padding: 0 8%; } #wrapper .look-wrapper .still { margin: 0 0 22.67%; } #wrapper .look-wrapper .still .imagearea img { aspect-ratio: 900 / 675; } #wrapper .corsage-arrange { background: #FAECF1; padding: 13.33% 0 16%; position: relative; z-index: 2; } #wrapper .corsage-arrange .inner { position: relative; z-index: 2; } #wrapper .corsage-arrange .inner .titlearea { margin: 0 0 8%; position: relative; } #wrapper .corsage-arrange .inner .titlearea .title { width: 65.33%; margin: 0 0 0 6%; } #wrapper .corsage-arrange .inner .titlearea .title img { aspect-ratio: 500 / 153; } #wrapper .corsage-arrange .inner .titlearea .deco { width: 39.33%; position: absolute; left: 64%; top: -23.87vw; transform: rotate(-11deg); } #wrapper .corsage-arrange .inner .titlearea .deco img { aspect-ratio: 215 / 259; } #wrapper .corsage-arrange .inner .arrange-list { display: flex; flex-direction: column; row-gap: 12vw; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .imagearea { width: 94.67%; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .imagearea img { aspect-ratio: 1; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea { padding: 20px 8% 0; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit { font-family: spectral, source-han-serif-japanese, serif; font-size: 13px; line-height: 2; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit ul { display: flex; flex-wrap: wrap; column-gap: 1.5em; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit ul li a { text-decoration: underline; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single:nth-child(2) .imagearea { margin: 0 0 0 auto; } #wrapper .corsage-arrange::before, #wrapper .corsage-arrange::after { display: block; content: ""; background: #FAECF1; position: absolute; left: -15%; right: -15%; aspect-ratio: 760 / 210; } #wrapper .corsage-arrange::before { bottom: calc(100% - 20vw); border-radius: 50% / 100% 100% 0 0; } #wrapper .corsage-arrange::after { top: calc(100% - 20vw); border-radius: 50% / 0 0 100% 100%; } #wrapper .story { position: relative; z-index: 1; overflow: hidden; } #wrapper .story .inner { padding: 90px 0 65px; position: relative; z-index: 2; } #wrapper .story .inner .titlearea { margin: 0 0 30px; } #wrapper .story .inner .titlearea .title { width: 277px; margin: 0 auto 13px; } #wrapper .story .inner .titlearea .title img { aspect-ratio: 500 / 75; } #wrapper .story .inner .titlearea .sub-title { width: 192px; margin: 0 auto; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); } #wrapper .story .inner .titlearea .sub-title img { aspect-ratio: 500 / 119; } #wrapper .story .inner .textarea { padding: 0 8%; filter: drop-shadow(0 0 6px black); } #wrapper .story .inner .textarea .text { color: #fff; text-align: justify; font-weight: 600; font-size: 13px; line-height: 1.81; } #wrapper .story .bg-image { position: absolute; top: -5%; right: 0; bottom: -5%; left: 0; } #wrapper .story .bg-image img { height: 100%; object-fit: cover; } #wrapper .about { padding: 90px 0 80px; } #wrapper .about .inner { padding: 0 8%; } #wrapper .about .inner .titlearea { text-align: center; margin: 0 0 25px; } #wrapper .about .inner .titlearea .title { width: 93px; margin: 0 auto 13px; } #wrapper .about .inner .titlearea .title img { aspect-ratio: 500 / 118; } #wrapper .about .inner .titlearea .title-jp { font-size: 11px; } #wrapper .about .inner .textarea { margin: 0 0 35px; } #wrapper .about .inner .textarea .text { text-align: justify; font-size: 13px; line-height: 1.81; } #wrapper .about .inner .imagearea .logo { width: 75px; margin: 0 auto 15px; } #wrapper .about .inner .imagearea .logo img { aspect-ratio: 1; } #wrapper .about .inner .imagearea .instagram { text-align: center; color: #DB6EAF; font-family: classico-urw, sans-serif; font-size: 16px; letter-spacing: 0.06em; } #wrapper .about .inner .imagearea .instagram a { display: inline-flex; align-items: center; column-gap: 7px; } #wrapper .about .inner .imagearea .instagram a img { width: 16px; aspect-ratio: 1; } #wrapper .profile { background: #FAECF1; padding: 40px 0; } #wrapper .profile .inner { padding: 0 8%; } #wrapper .profile .inner .flex-container { display: flex; align-items: center; margin: 0 0 25px; } #wrapper .profile .inner .flex-container .imagearea { width: 140px; } #wrapper .profile .inner .flex-container .imagearea img { aspect-ratio: 1; } #wrapper .profile .inner .flex-container .titlearea { flex: 1; text-align: center; color: #db6eaf; } #wrapper .profile .inner .flex-container .titlearea .name { font-size: 24px; letter-spacing: 0.1em; margin: 0 0 10px; } #wrapper .profile .inner .flex-container .titlearea .name-en { font-family: classico-urw, sans-serif; font-size: 13px; letter-spacing: 0.1em; margin: 0 0 25px; } #wrapper .profile .inner .flex-container .titlearea .instagram { font-family: classico-urw, sans-serif; font-size: 16px; letter-spacing: 0.06em; } #wrapper .profile .inner .flex-container .titlearea .instagram a { display: inline-flex; align-items: center; column-gap: 7px; } #wrapper .profile .inner .flex-container .titlearea .instagram a img { width: 16px; aspect-ratio: 1; } #wrapper .profile .inner .textarea { color: #4D4D4D; } #wrapper .profile .inner .textarea .text { text-align: justify; font-size: 13px; line-height: 1.81; } #wrapper .footer { padding: 100px 0 20px; text-align: center; font-family: spectral, source-han-serif-japanese, serif; } #wrapper .footer .staff-credit { margin: 0 0 70px; } #wrapper .footer .staff-credit .text-large { font-size: 16px; margin: 0 0 20px; } #wrapper .footer .staff-credit .text { font-size: 12px; line-height: 2; } #wrapper .footer .logo { width: 180px; margin: 0 auto 40px; } #wrapper .footer .logo img { aspect-ratio: 500 / 58; } #wrapper .footer .copyright { font-size: 10px; } #wrapper.is-loaded .top .titlearea .title { opacity: 1; transition: opacity 1.4s ease 0.8s; } #wrapper.is-loaded .top .titlearea .catch .catch-row { background-size: 100% 100%; transition: background-size 0.3s ease 1.6s; } #wrapper.is-loaded .top .titlearea .catch .catch-row img { opacity: 1; transition: opacity 1.4s ease 1.9s; } #wrapper.is-loaded .top .titlearea .catch .catch-row2 { transition-duration: 0.6s; transition-delay: 1.9s; } #wrapper.is-loaded .top .titlearea .catch .catch-row2 img { transition-delay: 2.5s; } #wrapper.is-loaded .top .image-container .imagearea { opacity: 1; transition: opacity 1.4s ease 0.4s; } @media screen and (orientation: landscape) { #wrapper .top .logo { width: 10.49%; left: 2.08%; top: 2.6%; } #wrapper .top .logo img { filter: brightness(1); } #wrapper .top .titlearea { top: 27.21%; } #wrapper .top .titlearea .title { width: 29.86%; margin: 0 0 2.01% 55.69%; opacity: 0; } #wrapper .top .titlearea .catch { width: 35.28%; margin: 0 0 0 52.92%; } #wrapper .top .titlearea .catch .catch-row img { height: 2.99vw; } #wrapper .top .image-container .imagearea { width: 83.33%; opacity: 1; } #wrapper .top .image-container .imagearea img { aspect-ratio: 1200 / 768; } #wrapper .top .image-container .bg-image img { aspect-ratio: 1440 / 768; } } @media screen and (min-width: 769px) { #wrapper .lead { padding: 120px 0; } #wrapper .lead .inner .moviearea { width: 450px; margin: 0 auto 70px; } #wrapper .lead .inner .textarea .text { font-size: 16px; margin: 0 0 70px; } #wrapper .lead .inner .textarea .rsv-btn { width: 400px; height: 80px; margin: 0 auto 55px; font-size: 20px; } #wrapper .lead .inner .textarea .rsv-btn a { transition: opacity 0.4s ease 0s; } #wrapper .lead .inner .textarea .rsv-btn a::after { width: 14px; right: 35px; transition: transform 0.4s ease 0s; } #wrapper .lead .inner .textarea .rsv-btn a:hover { opacity: 0.5; } #wrapper .lead .inner .textarea .rsv-btn a:hover::after { transform: translate(3px, -50%) rotate(45deg); } #wrapper .lead .inner .textarea .about-btn { width: 240px; } #wrapper .lead .inner .textarea .about-btn a { transition: opacity 0.4s ease 0s; } #wrapper .lead .inner .textarea .about-btn a:hover { opacity: 0.5; } #wrapper .message { width: 720px; margin: 0 auto; } #wrapper .message .inner { padding: 145px 0 60px; } #wrapper .message .inner .textarea .titlearea { margin: 0 0 45px; } #wrapper .message .inner .textarea .titlearea .title-line1 { width: 138px; margin: 0 auto 19px; } #wrapper .message .inner .textarea .titlearea .title-line2 { width: 110px; } #wrapper .message .inner .textarea .comment { padding: 5px 0 20px; } #wrapper .message .inner .textarea .comment .text { font-size: 16px; line-height: 1.75; } #wrapper .message .inner .textarea .comment .quot { width: 26px; } #wrapper .message .inner .textarea .comment .quot1 { right: calc(50% + 210px); } #wrapper .message .inner .textarea .comment .quot2 { left: calc(50% + 210px); } #wrapper .look-wrapper { width: 1200px; max-width: 96%; margin: 0 auto; padding: 100px 0 150px; } #wrapper .look-wrapper .look .titlearea { position: absolute; left: 0; right: 0; top: 0; } #wrapper .look-wrapper .look .titlearea .title-catch { width: 14.25%; } #wrapper .look-wrapper .look .image-panel .look-catch .catch { font-size: clamp(10px, 2.24vw, 28px); line-height: 1.75; } #wrapper .look-wrapper .look .image-panel .textarea { padding: 40px 0 0; } #wrapper .look-wrapper .look .image-panel .textarea .credit { font-size: 16px; } #wrapper .look-wrapper .look .image-panel .textarea .credit ul li a { transition: opacity 0.4s ease 0s; } #wrapper .look-wrapper .look .image-panel .textarea .credit ul li a:hover { opacity: 0.5; } #wrapper .look-wrapper .look .layout-container { display: flex; align-items: flex-start; } #wrapper .look-wrapper .look#look01 { margin: 0 0 8.33%; } #wrapper .look-wrapper .look#look01 .titlearea { aspect-ratio: 1200 / 309; padding: 13.42% 0 0; } #wrapper .look-wrapper .look#look01 .titlearea .title-catch { margin: 0 0 1.67% 75.92%; } #wrapper .look-wrapper .look#look01 .titlearea .color { width: 15.25%; margin: 0 0 0 68.75%; } #wrapper .look-wrapper .look#look01 .titlearea .deco { width: 18.33%; left: 58.67%; } #wrapper .look-wrapper .look#look01 .layout-container { padding: 9.17% 0 0; } #wrapper .look-wrapper .look#look01 .image-panel1 { width: 45%; margin: 0 4.17% 0 5%; } #wrapper .look-wrapper .look#look01 .image-panel1 .image-container .deco { width: 48.33%; left: 77.59%; top: 95.42%; } #wrapper .look-wrapper .look#look01 .image-panel1 .look-catch { aspect-ratio: auto; padding: 7.41% 0 0 22.78%; } #wrapper .look-wrapper .look#look01 .image-panel2 { padding: 0; width: 40.83%; margin: 22.08% 0 0; } #wrapper .look-wrapper .look#look01 .image-panel2 .image-container { aspect-ratio: 490 / 659; } #wrapper .look-wrapper .look#look01 .image-panel2 .image-container .imagearea { width: 91.84%; } #wrapper .look-wrapper .look#look01 .image-panel2 .image-container::after { display: block; content: ""; width: 91.84%; position: absolute; right: 0; bottom: 0; aspect-ratio: 450 / 600; background: #F2C9DD; z-index: -1; } #wrapper .look-wrapper .look#look01 .image-panel2 .textarea .credit { padding: 0 8.16%; } #wrapper .look-wrapper .look#look01 .image-panel2::after { display: none; } #wrapper .look-wrapper .look#look02 { margin: 0 0 13.33%; } #wrapper .look-wrapper .look#look02 .titlearea { aspect-ratio: 1200 / 378; padding: 21.17% 0 0; } #wrapper .look-wrapper .look#look02 .titlearea .title-catch { margin: 0 0 0 28.08%; } #wrapper .look-wrapper .look#look02 .titlearea .color { width: 35%; margin: 0 0 0 4.92%; } #wrapper .look-wrapper .look#look02 .titlearea .deco { width: 21.42%; left: 15.67%; } #wrapper .look-wrapper .look#look02 .layout-container { padding: 14.42% 0 0; flex-direction: row-reverse; } #wrapper .look-wrapper .look#look02 .image-panel1 { width: 45%; margin: 0 5% 0 5.83%; } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .imagearea { width: 100%; } #wrapper .look-wrapper .look#look02 .image-panel1 .image-container .deco { width: 56.67%; left: 68.7%; top: 62.11%; } #wrapper .look-wrapper .look#look02 .image-panel1 .look-catch { aspect-ratio: auto; padding: 7.41% 0 0 11.11%; } #wrapper .look-wrapper .look#look02 .image-panel2 { width: 43.83%; margin: 25.25% 0 0; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container { aspect-ratio: 526 / 655; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(1) { width: 88.59%; } #wrapper .look-wrapper .look#look02 .image-panel2 .image-container .imagearea:nth-child(2) { width: 81.94%; } #wrapper .look-wrapper .look#look02 .image-panel2 .textarea .credit { padding: 0 11.41%; } #wrapper .look-wrapper .look#look03 { margin: 0 0 18.5%; padding: 13.42% 0 0; } #wrapper .look-wrapper .look#look03 .titlearea { aspect-ratio: 1200 / 308; padding: 6.17% 0 0; top: -17.81%; } #wrapper .look-wrapper .look#look03 .titlearea .title-catch { margin: 0 0 1.75% 52.67%; } #wrapper .look-wrapper .look#look03 .titlearea .color { width: 19.08%; margin: 0 0 0 58.92%; } #wrapper .look-wrapper .look#look03 .titlearea .deco { width: 21.42%; left: 76.92%; transform: rotate(0); } #wrapper .look-wrapper .look#look03 .layout-container { position: relative; } #wrapper .look-wrapper .look#look03 .layout-container::after { width: 52.5%; right: auto; left: 30%; top: 27.1%; aspect-ratio: 630 / 770; } #wrapper .look-wrapper .look#look03 .image-panel { position: static; } #wrapper .look-wrapper .look#look03 .image-panel1 { width: 45%; margin: 0 7.5% 0 5%; } #wrapper .look-wrapper .look#look03 .image-panel1 .image-container .imagearea { width: 100%; } #wrapper .look-wrapper .look#look03 .image-panel1 .look-catch { aspect-ratio: auto; padding: 0; position: absolute; left: 58.92%; top: 14.05%; } #wrapper .look-wrapper .look#look03 .image-panel2 { width: 37.5%; margin: 25.33% 0 0; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .imagearea { width: 100%; } #wrapper .look-wrapper .look#look03 .image-panel2 .image-container .deco { width: 58.67%; left: -30.67%; top: 68.67%; } #wrapper .look-wrapper .look#look03 .image-panel2 .textarea { position: absolute; left: 5%; top: 84.07%; max-width: 350px; } #wrapper .look-wrapper .look#look03 .image-panel2 .textarea .credit { padding: 0; } #wrapper .look-wrapper .look#look04 .titlearea { aspect-ratio: 1200 / 309; padding: 12.67% 0 0; } #wrapper .look-wrapper .look#look04 .titlearea .title-catch { margin: 0 0 1.42% 27%; } #wrapper .look-wrapper .look#look04 .titlearea .color { width: 19.25%; margin: 0 0 0 19.33%; } #wrapper .look-wrapper .look#look04 .titlearea .deco { width: 21.42%; left: 2.58%; } #wrapper .look-wrapper .look#look04 .layout-container { padding: 16.58% 0 0; flex-direction: row-reverse; } #wrapper .look-wrapper .look#look04 .image-panel1 { width: 45%; margin: 0 7.5% 0 2.5%; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco2 { width: 44.44%; left: 72.96%; top: 63.75%; } #wrapper .look-wrapper .look#look04 .image-panel1 .image-container .deco3 { width: 40.56%; left: 82.59%; top: 85.69%; } #wrapper .look-wrapper .look#look04 .image-panel1 .look-catch { aspect-ratio: auto; padding: 8.33% 0 0 18.52%; } #wrapper .look-wrapper .look#look04 .image-panel2 { width: 44.92%; margin: 15.83% 0 0; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container { aspect-ratio: 539 / 722; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(1) { width: 89.05%; left: auto; right: 0; } #wrapper .look-wrapper .look#look04 .image-panel2 .image-container .imagearea:nth-child(2) { width: 77.92%; right: auto; left: 0; } #wrapper .look-wrapper .look#look04 .image-panel2 .textarea .credit { padding: 0 11.13%; } #wrapper .look-wrapper .still { width: 900px; max-width: 96%; margin: 0 auto 130px; } #wrapper .corsage-arrange { padding: 120px 0 160px; clip-path: inset(0 -20% round 70% 70% 0 0/750px 750px 0 0); } #wrapper .corsage-arrange .inner .titlearea { margin: 0 0 65px; } #wrapper .corsage-arrange .inner .titlearea .title { width: 500px; margin: 0 auto; } #wrapper .corsage-arrange .inner .titlearea .deco { width: 215px; left: calc(50% + 95px); top: -143px; } #wrapper .corsage-arrange .inner .arrange-list { width: 990px; max-width: 90%; margin: 0 auto; flex-direction: row; justify-content: space-between; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single { width: 48.48%; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .imagearea { width: 100%; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea { padding: 20px 0 0; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit { font-size: 16px; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit ul li a { transition: opacity 0.4s ease 0s; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single .textarea .credit ul li a:hover { opacity: 0.5; } #wrapper .corsage-arrange .inner .arrange-list .arrange-single:nth-child(2) .imagearea { margin: 0; } #wrapper .corsage-arrange::before, #wrapper .corsage-arrange::after { display: none; } #wrapper .story .inner { padding: 95px 0 100px; } #wrapper .story .inner .titlearea { margin: 0 0 40px; } #wrapper .story .inner .titlearea .title { width: 346px; margin: 0 auto 15px; } #wrapper .story .inner .titlearea .sub-title { width: 208px; filter: drop-shadow(0 0 10px black); } #wrapper .story .inner .textarea { padding: 0; filter: drop-shadow(0 0 3px black); } #wrapper .story .inner .textarea .text { text-align: center; font-size: 16px; line-height: 2; letter-spacing: 0.1em; } #wrapper .about { padding: 120px 0 90px; } #wrapper .about .inner { padding: 0; } #wrapper .about .inner .titlearea { margin: 0 0 20px; } #wrapper .about .inner .titlearea .title { width: 130px; margin: 0 auto 15px; } #wrapper .about .inner .titlearea .title-jp { font-size: 13px; } #wrapper .about .inner .textarea { margin: 0 0 45px; } #wrapper .about .inner .textarea .text { text-align: center; font-size: 16px; line-height: 2; letter-spacing: 0.1em; } #wrapper .about .inner .imagearea .logo { width: 101px; } #wrapper .about .inner .imagearea .instagram { font-size: 19px; } #wrapper .about .inner .imagearea .instagram a { column-gap: 10px; } #wrapper .about .inner .imagearea .instagram a img { width: 19px; } #wrapper .profile { padding: 70px 0; } #wrapper .profile .inner { padding: 0; width: 480px; margin: 0 auto; } #wrapper .profile .inner .flex-container { margin: 0 0 20px; } #wrapper .profile .inner .flex-container .imagearea { width: 168px; } #wrapper .profile .inner .flex-container .titlearea .name { font-size: 30px; } #wrapper .profile .inner .flex-container .titlearea .name-en { font-size: 16px; } #wrapper .profile .inner .flex-container .titlearea .instagram { font-size: 19px; } #wrapper .profile .inner .flex-container .titlearea .instagram a { column-gap: 10px; } #wrapper .profile .inner .flex-container .titlearea .instagram a img { width: 19px; } #wrapper .profile .inner .textarea .text { font-size: 14px; line-height: 1.79; } #wrapper .footer .staff-credit { margin: 0 0 90px; } #wrapper .footer .staff-credit .text-large { font-size: 18px; margin: 0 0 40px; } }