@charset "UTF-8";

@font-face {
  font-family: 'Quickpen';
  src: url('../fonts/Quickpen.woff2') format('woff2'),
       url('../fonts/Quickpen.woff') format('woff'),
       url('../fonts/Quickpen.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   TOP   
======================================== */

main {overflow: hidden;}

/***** Top Image Section *****/
#top_img {width: 100%;position: relative;overflow: hidden;z-index: 0;}
#top_img .top-img-container {width: 100%;position: relative;display: flex;align-items: flex-start;}
/*#top_img .wave-overlay.wave-top {position: absolute;top: 0;left: 0;right: 0;height: 80px;background: #fff;z-index: 5;pointer-events: none;-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,100 C360,118 480,118 720,100 S1080,82 1440,100 L1440,0 L0,0 Z' fill='%23000'/></svg>");mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,100 C360,118 480,118 720,100 S1080,82 1440,100 L1440,0 L0,0 Z' fill='%23000'/></svg>");-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center bottom;mask-position: center bottom;-webkit-mask-size: 100% 100%;mask-size: 100% 100%;}*/
#top_img .top-video {width: 100%;max-height: 80vh;display: block;position: relative;z-index: 1;object-fit: cover;object-position: center top;}
#top_img .top-video-sp {display: none;}

/***** Concept Section *****/
#concept {position: relative;width: 100%;overflow: hidden;margin-top: -36px;z-index: 1;min-height: calc(100vw * 0.43125);}
#concept .concept-background {position: absolute;top: 0;right: 0;bottom: 0;left: 0; background-image: url('../img/concept_bg.png');background-size: cover; background-position: bottom 60%;background-repeat: no-repeat;z-index: 0;}
#concept .inner {width: 1100px;margin: 0 auto;padding-top: max(160px, min(12vw, 220px));padding-bottom: max(160px, min(12vw, 200px));display: flex;flex-direction: column;align-items: flex-start;position: relative;z-index: 1;}
/* ★ タイトルSVG ----------------------------------------------------------------------------------------------------------------*/
#concept .title {margin-bottom: 32px;width: 650px;margin-top: 40px;position: relative;left: -24px;}
#concept .title .concept-title-wrapper {width: 100%;}
#concept .title .concept-title-wrapper svg {display: block;width: 100%;height: auto;}
#concept .title .concept-title-wrapper .concept-mask-line path {fill: none;stroke: #fff;stroke-width: 60;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 1;stroke-dashoffset: 1;animation: none;}
#concept .title .concept-title-wrapper.is-anim .concept-mask-line path {animation: concept-handwriting 8s ease forwards;}
@keyframes concept-handwriting { 0%   { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; }}
#concept .title .concept-text path {fill: #19436E;}
#concept .title .concept-title-text {display: none;}
/*-------------------------------------------------------------------------------------------------------------------------*/
#concept .text {text-align: left;}
#concept .text h2 {font-size: 22px;font-weight: 500;letter-spacing: 0;color: #19436E;margin-bottom: 24px;}
#concept .text h2 br {display: none;}
#concept .text p {font-size: 18px;line-height: 32px;color: #19436E;font-weight: 400;}
/***** About Section *****/
#about {position: relative;width: 100%;padding: 140px 0;background-color: #fff;overflow: visible;z-index: 2;}
#about .inner {position: relative;z-index: 1;text-align: center;width: 1000px;margin: 0 auto;overflow: hidden;}
#about .about-photo {position: absolute;z-index: 0;pointer-events: none;opacity: 0;transform: translateY(20px);
transition: opacity 1.4s ease-out, transform 1.4s ease-out;}
#about .about-photo.is-visible {opacity: 1;transform: translateY(0);}
#about .about-photo img {display: block;width: 100%;height: auto;}
#about .about-photo-1 {top: 4px;left: -16px;width: 30%;max-width: 400px;}
#about .about-photo-2 {top: 0px;right: -28px;width: 30%; max-width: 400px;}
#about .about-photo-3 {bottom: 0;left: -64px;width: 36%;max-width: 450px;}
#about .about-photo-4 {bottom: -24px;right: -32px;width: 26%;max-width: 450px;}
#about .title {font-size: 60px;font-weight: 400;color: #19436E;}
#about .decoration {margin: -10px auto 40px;width: 300px;max-width: 100%;}
#about .decoration-inner {position: relative;overflow: hidden;}
#about .decoration img {width: 100%;height: auto;display: block;}
#about .decoration-inner::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #fff;transform: translateX(0);}
#about .decoration-inner.is-animate::before{animation:title-decoration-reveal 1.2s cubic-bezier(.7,0,.3,1) forwards;}
@keyframes title-decoration-reveal {from { transform: translateX(0); }to   { transform: translateX(100%); }}
#about .text {margin: 72px auto 88px;text-align: center;}
#about .text p {font-size: 18px;line-height: 32px;color: #1e3a5f;}
#about .text p:last-child {margin-bottom: 0;}
#about .about-button {margin-top: 40px;}
#about .more-button {display: inline-block;padding: 12px 64px;background-color: #19436E;color: #fff;text-decoration: none;border-radius: 50px;font-size: 18px;font-weight: 500;border: 1px solid transparent;transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
#about .more-button:hover {background-color: #fff;color: #19436E;border-color: #19436E;}
/***** Gradient Story Block *****/
#story-block {background: linear-gradient(180deg, #FFFFFF 0%, #F7E9D1 70%, #f2d7aa 100%);padding: 156px 0 224px;}
/***** Ingredients *****/
#ingredients {margin-bottom: 200px;}
#ingredients .inner {text-align: center;width: 1100px;margin: 0 auto;overflow: hidden;}
#ingredients .heading {display: flex;align-items: center;justify-content: center;gap: 16px;margin-bottom: 24px;}
#ingredients .heading-text {font-size: 42px;font-weight: 400;color: #1e3a5f;}
/*svgテキスト-----------------------------------------------------------------------------------------------*/
#ingredients .heading .ingredients-title-wrapper {width: 450px;}
#ingredients .heading .ingredients-title-wrapper svg {width: 100%;height: auto;display: block;}
#ingredients .heading .ingredients-title-wrapper .ingredients-mask-line path {fill: none;stroke: #fff;stroke-width: 60;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 1;stroke-dashoffset: 1;animation: none;}
#ingredients .heading .ingredients-title-wrapper.is-anim .ingredients-mask-line path {animation: ingredients-handwriting 6s ease forwards;}
@keyframes ingredients-handwriting { 0%   { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; }}
#ingredients .heading .ingredients-text path {fill: #19436E;}
/*-------------------------------------------------------------------------------------------------------*/
#ingredients .description {font-size: 18px;line-height: 32px;color: #19436E;margin-bottom: 80px;}
#ingredients .ingredients-items {display: flex;justify-content: center;gap: 56px;flex-wrap: wrap;}
#ingredients .ingredient-item {display: flex;flex-direction: column;align-items: center;gap: 16px;}
#ingredients .ingredient-icon {position: relative;width: 110px;height: 110px;}
#ingredients .ingredient-circle {width: 100%;height: 100%;display: block;}
#ingredients .ingredient-symbol {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60%;height: auto;}
#ingredients .ingredient-label {font-size: 18px;font-weight: 500;color: #1e3a5f;}
/***** products Section *****/
#products {margin-bottom: 0;position: relative;}
#products .inner {position: relative;z-index: 10;text-align: center;padding-bottom: 132px;}
#products .title {font-size: 60px;font-weight: 400;color: #19436E;}
#products .decoration {margin: -10px auto 56px;width: 300px;max-width: 100%;}
#products .decoration-inner {position: relative;overflow: hidden;}
#products .decoration img {width: 100%;height: auto;display: block;}
#products .decoration-inner::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #f9f2e5;transform: translateX(0);}
#products .decoration-inner.is-animate::before{animation:title-decoration-reveal 1.2s cubic-bezier(.7,0,.3,1) forwards;}
@keyframes title-decoration-reveal {from { transform: translateX(0); }to   { transform: translateX(100%); }}
#products .description {margin-bottom: 72px;font-size: 18px;line-height: 32px;color: #19436E;}
#products .products-grid {display: flex;gap: 32px;width: 90%;margin: 0 auto;max-width: 1200px;}
#products .product-card {position: relative;display: flex;align-items: center;justify-content: flex-start;padding: 0 24px 0;border-radius: 20px;color: #ffffff;text-decoration: none;overflow: hidden;background-size: cover;background-position: center center;transition: transform 0.3s ease;}
#products .product-card::after {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: inherit;background: rgba(25, 67, 110, 0.2);opacity: 0;transition: opacity 0.3s ease;pointer-events: none;z-index: 2;}
#products .product-card:hover::after {opacity: 1;}
#products .product-card--empty-packs::after {background: url('../img/product_empty_packs.png') 30% 92% / 173% no-repeat;opacity: 1;z-index: 0;top: 0;right: 0;bottom: 0;left: 40%;}
#products .product-card-label {position: relative;z-index: 3;font-size: 22px;font-weight: 300;line-height: 1.4;text-align: left;}
#products .product-card--eyes .product-card-label {width: 100%;font-size: 24px;font-weight: 300;text-align: center;margin-top: 12px;}
#products .product-card--large {flex: 1;min-height: 475px;}
#products .product-card-column {flex: 1;display: flex;flex-direction: column;gap: 16px;}
#products .product-card--small {min-height: 180px;}
#products .product-card--eyes {background-image: url('../img/product_eyes.png');align-items: flex-start;justify-content: center; padding: 30px 40px 0;}
#products .product-card--gray-hair {background-image: url('../img/product_gray_hair.png');}
#products .product-card--nail-pen {background-image: url('../img/product_nail_pen.png');}
#products .product-card--empty-packs {background: none;}
#products .product-card--eyes::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 22%;border-radius: 20px 20px 0 0;background: url('../img/product_eyes_overlay.png')top center / 100% 100% no-repeat;pointer-events: none;z-index: 1;opacity: 1;transition: none;}
#products .product-card--gray-hair::before,
#products .product-card--nail-pen::before,
#products .product-card--empty-packs::before {content: "";position: absolute;top: 0;left: -68px;bottom: 0;width: 60%;border-radius: 30px 0 0 30px;background: url('../img/product_common_overlay.png') left center / cover no-repeat;pointer-events: none;z-index: 1;}
#products .product-card--nail-pen::before {background: url('../img/product_nail_pen_overlay.png') left center / cover no-repeat;}
#products .product-card__hover-overlay {position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: inherit;background: rgba(25, 67, 110, 0.2);opacity: 0;transition: opacity 0.3s ease;pointer-events: none;z-index: 2;}
#products .product-card--empty-packs:hover .product-card__hover-overlay {opacity: 1;}

/* ========================================
   レスポンシブ
======================================== */

@media (max-width: 1300px){
/***** Concept Section ******/
#concept .concept-background {background-position-x: 35%;}
}
@media (max-width: 1150px){
/***** Concept Section ******/
#concept .concept-background {background-position-x: 56%;}
/* タイトルSVG ----------------------------------------------------------------------------------------------------------------*/
#concept .title {margin-bottom: 32px;width: 74%;max-width: 550px;margin-top: 24px;position: relative;left: -24px;}
/*----------------------------------------------------------------------------------------------------------*/
#concept .inner {width: 90%;}
#concept .text h2 {font-size: 20px;margin-bottom: 32px;}
#concept .text p {font-size: 17px;width: 90%;}
#concept .text p br {display: none;}
/***** About Section *****/
#about .inner {width: 80%;}
#about .about-photo-1 {width: 34%;}
#about .about-photo-2 {width: 32%;}
#about .about-photo-3 {bottom: 24px;width: 38%;}
#about .about-photo-4 {width: 32%;}
#about .title {font-size: 42px;}
#about .text p {font-size: 17px;}
#about .text p br {display: none;}
#about .more-button {font-size: 17px;}
/***** Ingredients *****/
#ingredients {margin-bottom: 175px;}
#ingredients .inner {width: 80%;}
#ingredients .heading-text {font-size: 28px;}
/*svgテキスト-----------------------------------------------------------------------------------------------*/
#ingredients .heading .ingredients-title-wrapper {width: 320px;}
/*-------------------------------------------------------------------------------------------------------*/
#ingredients .description {font-size: 17px;}
#ingredients .ingredients-items {gap: 24px;}
#ingredients .ingredient-icon {width: 100px;height: 100px;}
#ingredients .ingredient-label {font-size: 16px;} 
/***** products Section *****/
#products .inner {padding-bottom: 124px;}
#products .title {font-size: 42px;}
#products .description {font-size: 17px;width: 80%;margin: 0 auto 72px;}
#products .products-grid {gap: 24px;width: 90%;}
#products .product-card {padding: 0 16px 0;}
#products .product-card-label {font-size: 18px;}
#products .product-card--eyes .product-card-label {font-size: 20px;margin-top: 8px;}
#products .product-card--large {min-height: 450px;}
#products .product-card--small {min-height: 150px;}
#products .product-card--eyes {padding: 30px 0 0;}
#products .product-card--gray-hair::before,
#products .product-card--nail-pen::before,
#products .product-card--empty-packs::before {left: -68px;width: 72%;max-width: 275px;}
}

@media (max-width: 1060px){
/***** Top Image Section *****/
#top_img .top-video-pc {display: none;}
#top_img .top-video-sp {display: block;}
}

@media (max-width: 768px){
/***** Concept Section *****/
#concept {margin-top: -36px;}
#concept .concept-background {background-image: url('../img/concept_bg_sp.png');background-position: 56% 10%;background-size: cover;}
#concept .inner {width: 90%;padding-top: 100px;padding-bottom: 124px;;}
/* タイトルSVG ----------------------------------------------------------------------------------------------------------------*/
#concept .title {margin-bottom: 24px;width: 400px;margin-top: 40px;position: relative;left: -24px;}
/*----------------------------------------------------------------------------------------------------------*/
#concept .text h2 br {display: block;}
#concept .text p{width:100%;}
/***** About Section *****/
#about .inner {width: 90%;}
#about .about-photo-1 {width: 38%;}
#about .about-photo-2 {width: 34%;top: 16px;right: -16px;}
#about .about-photo-3 {bottom: 12px;width: 44%;}
#about .about-photo-4 {width: 38%;bottom: -24px;}
/***** Gradient Story Block *****/
#story-block {padding: 100px 0 180px;}
/***** Ingredients *****/
#ingredients {margin-bottom: 124px;}
#ingredients .inner {width: 90%;}
#ingredients .heading {flex-direction: column;}
#ingredients .heading-text {font-size: 28px;}
/*svgテキスト-----------------------------------------------------------------------------------------------*/
#ingredients .heading .ingredients-title-wrapper {width: 300px;}
/*-------------------------------------------------------------------------------------------------------*/
#ingredients .description {font-size: 17px;margin-bottom: 56px;}
#ingredients .ingredients-items {gap: 32px;width: 90%;margin: 0 auto;max-width: 450px;}
#ingredients .ingredient-icon {width: 100px;height: 100px;}
#ingredients .ingredient-label {font-size: 16px;}   
/***** products Section *****/
#products .inner {padding-bottom: 124px;}
#products .decoration {margin: -10px auto 40px;}
#products .title {font-size: 42px;}
#products .description {font-size: 17px;width: 90%;margin: 0 auto 40px;}
#products .products-grid {gap: 24px;width: 86%;flex-direction: column;}
#products .product-card {padding: 0 16px 0;}
#products .product-card-label {font-size: 18px;}
#products .product-card--eyes::before {height: 25%;}
#products .product-card--eyes .product-card-label {font-size: 20px;margin-top: 8px;}
#products .product-card--large {min-height: 400px;}
#products .product-card--small {min-height: 175px;}
#products .product-card--eyes {padding: 30px 0 0;}
#products .product-card--gray-hair::before,
#products .product-card--nail-pen::before,
#products .product-card--empty-packs::before {left: -88px;width: 64%;max-width: 375px;}
#products .product-card--empty-packs::after {background: url('../img/product_empty_packs.png') 30% 80% / 150% no-repeat;}
#products .product-card--gray-hair::before, #products .product-card--nail-pen::before, #products .product-card--empty-packs::before {width: 70%;}
}



@media (max-width: 750px){
  #concept .title .concept-title-wrapper svg {display: none;}
  #concept .title .concept-title-text {display: block;font-family: 'Quickpen', cursive;font-size: 45px;color: #19436E;text-align: left;margin: 20px;line-height: 1.3;}
  #concept .title .concept-title-text--mobile {display: none;}
}
@media (max-width: 560px){
  #concept .title .concept-title-text--desktop {display: none;}
  #concept .title .concept-title-text--mobile {display: block;}
}
@media (max-width: 450px){
/***** Concept Section *****/
#concept .inner {padding-top: 80px;padding-bottom: 100px;;}
#concept .text h2 {font-size: 16px;margin-bottom: 24px;}
#concept .text p {font-size: 14px;line-height: 25px;}
#concept .title .concept-title-text{font-size:30px;}
/***** About Section *****/
#about {padding: 148px 0;}
#about .about-photo-1 {width: 50%;}
#about .about-photo-2 {width: 40%;}
#about .about-photo-3 {bottom: 0;left: -32px;width: 54%;}
#about .about-photo-4 {width: 50%;bottom: -80px;}
#about .title {font-size: 32px;}
#about .text {margin: 24px auto 40px;}
#about .text p {font-size: 14px;line-height: 24px;}
#about .more-button {font-size: 17px;}
/***** story-block *****/
#story-block {background: linear-gradient(to bottom, #fff 0, #fff 30%, #f2d7aa 100%);}
/***** Ingredients *****/
#ingredients {margin-bottom: 80px;}
#ingredients .heading-text {font-size: 22px;}
#ingredients .description {font-size: 14px;line-height: 24px;}
#ingredients .ingredients-items {gap: 24px;width: 95%;}
#ingredients .ingredient-icon {width: 85px;height: 85px;}
#ingredients .ingredient-label {font-size: 12px;}
/***** products Section *****/
#products .inner {padding-bottom: 80px;}
#products .title {font-size: 32px;}
#products .description {font-size: 14px;line-height: 24px;width: 90%;margin: 0 auto 40px;}
#products .products-grid {gap: 16px;width: 90%;}
#products .product-card--large {min-height: 300px;}
#products .product-card--small {min-height: 125px;}
#products .product-card-label {font-size: 14px;}
#products .product-card--eyes .product-card-label {font-size: 14px;margin-top: -8px;}
#products .product-card--gray-hair::before,
#products .product-card--nail-pen::before,
#products .product-card--empty-packs::before {left: -64px;width: 64%;max-width: 300px;}
}