@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;400;500&family=Noto+Serif+JP:wght@200;400&display=swap');
/* 
Start 2025.03.29 --- Updated 2025.04.23
-------------------------------
ONE SECOND MAGIC (PC)
---------------------------------------------------------------------- */
html, body {height: 100%; width: 100%;}
#one_content {contain: paint; margin: 0;}
#one_main {position: relative; color: #949494;}
#one_main img {width: auto; height: auto;}

#one_main .layer {position: sticky; top: 0; height: 100vh;}

#one_main .layer .section {position: relative; height: 100vh; width: 100vw; background-size: cover; background-position: center; background-repeat: no-repeat; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;}


.item_name {font-family: "Noto Sans JP", sans-serif; font-weight: 200; font-size: 2.34vw; line-height: 1.5; color: #858585;}
.item_shoulder {font-family: "Noto Sans JP", sans-serif; font-weight: 200; font-size: 1.2vw; color: #858585; margin: 0 0 min(1.2vw,36px);}
.item_copy {font-family: "Noto Serif JP", serif; font-weight: 200; font-size: 1.56vw; line-height: 1.5; color: #666666; margin: 0 0 min(3vw,58px);}
.item_spec {font-family: "Noto Sans JP", sans-serif; font-weight: 200; font-size: 1.04vw; line-height: 1.66; color: #8a8a8a;}
.view_more {padding: min(3.85vw,74px) 0 0 0;}
.view_more img {width: min(20.3vw,390px) !important;}

/* #section01 */
.layer#section01 .section {background-image: url(/img/usr/onetop2025/bg01-8_pc.jpg); -webkit-box-align: start; align-items: flex-start;}
.layer#section01 .section .content_inner {display: -webkit-box; display: flex; flex-wrap: nowrap; width: 100%; padding: 19vh 0 0;}
.layer#section01 .section .content_inner .one_hl {width: 50vw; padding: 0 20vw; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-pack: end; justify-content: flex-end;}
.layer#section01 .section .content_inner .one_hl .hl_txt {font-family: "Noto Sans JP", sans-serif; font-weight: 400; white-space: nowrap; font-size: 1vw; line-height: 2.5; color: #fff; animation: fadeIn 2.5s forwards 1.5s; opacity: 0;}

/* #section02 */
.layer#section02 .section {background-image: url(/img/usr/onetop2025/bg02-2_pc.jpg);}
.layer#section02_main .section .content_inner {width: 100%; height: 100%; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between;}
.layer#section02_main .section .content_inner .one_left {padding: 0 0 10vh 12vw;}
.layer#section02_main .section .content_inner .one_right {padding: 0 12vw 10vh 0;}
.layer#section02_main .item_name {font-weight: 200;}

/* #section03 */
.layer#section03 .section video {position: absolute; top: 0;}
.layer#section03_smoke .section {margin-top: -336px;}
.layer#section03_smoke .section img {width: 100%; height: 100%;}
.layer#section03_main .section .content_inner {width: 100%; padding: 0 0 10vh 12vw;}
.layer#section03_main .section .content_inner p {font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.15vw; line-height: 1.9; color: #fff; margin: 0 0 1.5em;}
.layer#section03_main .section .content_inner p.txt01 {font-size: 1.45vw; line-height: 1; font-weight: 500;}

/* #section04 */
#one_main .layer#section04 {position: relative !important; height: auto;}
.layer#section04 .section {display: block; height: auto;}
.layer#section04 .section .content_inner {background-color: #fff; height: auto; padding: 0 0 90px;}

.layer#section04 .inr_box {width: 80%; margin: 0 auto; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between;}
.layer#section04 .inr_box .one_left {width: 33.33%; text-align: center;}
.layer#section04 .inr_box .one_center {width: 33.33%; text-align: center;}
.layer#section04 .inr_box .one_right {width: 33.33%;}
.layer#section04 .inr_box img {height: auto;}
.layer#section04 .inr_box.box00 {padding: 15vh 0 0;}
.layer#section04 .inr_box.box01 {padding: 15vh 0 0;}
.layer#section04 .inr_box.box01 .item_pic img {width: min(20.3vw,390px);}
.layer#section04 .inr_box.box02 {flex-wrap: wrap; padding: 15vh 0 10vh;}
.layer#section04 .inr_box.box02 .item_box {width: 50%; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; margin: 0 0 min(5.2vw,100px);}
.layer#section04 .inr_box.box02 .item_box .item_pic {width: 42%; text-align: center;}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_soap01 img {width: min(14.6vw,280px);}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_soap02 img {width: min(9.375vw,180px);}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_protector img {width: min(5.2vw,100px);}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_refresher img {width: min(5.2vw,100px);}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_mist img {width: min(5.1vw,99px);}
.layer#section04 .inr_box.box02 .item_box .item_pic.pic_gel img {width: min(5.1vw,99px);}
.layer#section04 .inr_box.box02 .item_box .item_name  {font-size: 1.3vw; line-height: 1.36;}
.layer#section04 .inr_box.box02 .item_box .item_spec  {font-size: 0.93vw; line-height: 1.46;}
.layer#section04 .inr_box.box03 {padding: 0 0 15vh;}
.layer#section04 .inr_box.box03 .item_pic img {width: min(8.2vw,158px);}
.layer#section04 .inr_box.box04 {padding: 20vh 0 0;}
.layer#section04 .inr_box.box04 .item_pic img {width: min(8.2vw,158px);}
.layer#section04 .item_ant {display: block; text-align: center; font-family: "Noto Sans JP", sans-serif; font-weight: 200; font-size: 0.82vw; color: #8a8a8a; padding: 0 0 2.5vw;}
.layer#section04 sup {font-size: 0.5em; line-height: 2; vertical-align: top; position: relative; top: 0; right: 1px; margin-right: 1px;}
.layer#section04 sup.spf {font-size: 1em; line-height: 1.2; vertical-align: top; position: relative; top: 0; right: 0; margin-right: 0;}

/* #section05 */
.layer#section05 .section {background-image: url(/img/usr/onetop2025/bg05_pc.jpg);}
.layer#section05_smoke .section {margin-top: -365px;}
.layer#section05_smoke .section img {width: 100%; height: 100%;}

.layer#section05_ttl .about_ttl {font-family: "Noto Sans JP", sans-serif; font-weight: 100; text-align: center; font-size: 2.34vw; color: #333;}
.layer#section05_ttl .about_content .hl {width: 41.66vw; font-size: 1.04vw; line-height: 2.4; margin: 0 auto 10vh; color: #333;}

.layer#section05_main .section {background-color: #fff; padding: 26vh 0 0 0; -webkit-box-align: start; align-items: flex-start;}
.layer#section05_main .section .content_inner {-webkit-box-align: start; align-items: flex-start;}
.layer#section05_main .inr_box {width: 100%; color: #333;}
.layer#section05_main .about_content .fet {width: 79.5vw; margin: 0 auto; display: -webkit-box; display: flex; flex-wrap: nowrap;}
.layer#section05_main .about_content .fet .fet_box {width: 26.5vw;}
.layer#section05_main .about_content .fet .fet_box .fet_box_inr {padding: 0 2.34vw;}
.layer#section05_main .about_content .fet .fet_box:nth-of-type(1) {margin: 0;}
.layer#section05_main .about_content .fet .fet_box .fet_ttl {font-family: "Noto Serif JP", serif; font-weight: 200; font-size: 1.56vw; text-align: center; border-bottom: 0.5px solid #333; padding: 0 0 1.4vw; margin: 0 0 4.7vh;}
.layer#section05_main .about_content .fet .fet_box .fet_txt { font-size: 1.04vw; line-height: 2.3;}

/* #section06 */
.layer#section06 .section {background-image: url(/img/usr/onetop2025/bg06_pc.jpg);}
.layer#section06_logo .section {padding: 32vh 0 0 0; -webkit-box-align: start; align-items: flex-start;}
.layer#section06_logo .logo {text-align: center;}
.layer#section06_logo .logo img {width: 15.9vw;}
.layer#section06_main .section {padding: 62vh 0 0 0; -webkit-box-align: start; align-items: flex-start;}
.layer#section06_main .section .content_inner {-webkit-box-align: start; align-items: flex-start;}
.layer#section06_main .btn {display: block;}
.layer#section06_main .btn a {display: block; background-color: #fff; width: 15.9vw; height: 3.64vw; display: -webkit-box; display: flex; flex-wrap: nowrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-size: 0.94vw;}


@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}