@charset "UTF-8";
/* KV */
.hero { position: relative; height: calc(95vh - 40px); }
@media screen and (min-width: 990px) { .hero { height: calc(100vh - 15vh); } }

.hero-text { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 4vw 0; }
.hero-text .title { line-height: 1.2; text-align: center; text-shadow: 1px 1px 1px white; grid-area: box1; order: 1; margin-bottom: 2vh; }
.hero-text .title span { display: block; }
.hero-text .title span.catch { font-size: 1.25rem; font-weight: 400; }
.hero-text .title span.catch b { font-weight: 400; }
.hero-text .title span.logo { font-size: 2.25rem; letter-spacing: 1px; }
.hero-text .description { grid-area: box2; order: 3; line-height: 1.65; font-size: 0.8125rem; font-weight: 600; text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px; margin-bottom: 1vh; }
.hero-text .description span { display: inline-block; }
.hero-text .item-img { grid-area: box3; width: 160px; height: auto; margin: auto; order: 2; }
.hero-text .btn-align { grid-area: box4; order: 4; }

.wave-block { position: absolute; bottom: 0; left: 0; right: 0; }

.wave-bottom { background-color: #fff; padding: 20px; }

/* TOP ブロック
-------------------------------------*/
/* news */
.news-block { margin-bottom: 20px; }

/* concept */
.concept-block { background-image: url("https://vitamin-lush.com/wp_vl/wp-content/uploads/2025/05/bg-img01_202505.jpg"); background-position: center; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0.5); background-blend-mode: color; position: relative; padding: 40px 0; }
.concept-block .section-ttl { font-size: 1.5rem; font-weight: 500; line-height: 1.5; text-align: center; text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px; position: relative; padding-top: 60px; }
.concept-block .section-ttl span { display: inline-block; }
.concept-block .section-ttl span i { display: inline-block; position: relative; padding: 0 0.8em; font-size: 1.875rem; }
.concept-block .section-ttl span i::before, .concept-block .section-ttl span i::after { content: ""; width: 2px; height: 30px; background-color: #533635; display: inline-block; position: absolute; top: 6px; }
.concept-block .section-ttl span i::before { transform: rotate(-30deg); left: 8px; }
.concept-block .section-ttl span i::after { transform: rotate(30deg); right: 8px; }
.concept-block .section-ttl::before { content: ""; display: block; background: url("../img/icon-vl-orange.png") no-repeat center; background-size: 70px 58px; width: 70px; height: 58px; position: absolute; top: 0; left: 50%; margin-left: -35px; }
@media screen and (min-width: 990px) { .concept-block { padding: 60px 0 120px; } }

/* 特徴 */
.list-point { margin: 20px auto 20px; max-width: 480px; }
.list-point > li { text-align: center; font-size: 1.125rem; display: flex; justify-content: center; flex-direction: column; align-items: center; border: 1px solid #533635; background-color: rgba(255, 255, 255, 0.7); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 14px; line-height: 1.2; }
.list-point > li span { display: inline-block; }
.list-point > li span b { font-size: 110%; }
.list-point > li + li { margin-top: 5px; }
@media screen and (min-width: 990px) { .list-point { max-width: calc(750px + calc(55px * 2)); display: flex; justify-content: center; align-items: center; margin: 20px auto 40px; }
  .list-point > li { width: 250px; height: 250px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; font-size: 1.375rem; }
  .list-point > li + li { margin-top: 0; margin-left: 55px; } }

/* 商品ラインナップ　*/
.item-block { max-width: 360px; margin: -20px auto 0; display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; position: relative; }

.item-box { display: flex; background: linear-gradient(#f4f8ee 75%, #91b553 25%); background: linear-gradient(to bottom, #f4f8ee 75%, #91b553 25%); }
.item-box .right { order: 2; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; min-width: 55%; }
.item-box .pic { order: 1; min-width: 45%; padding: 0 20px; }
.item-box .pic img { height: 260px; width: auto; object-fit: cover; margin: auto; }
.item-box .circle { color: #fff; display: inline-block; background-color: #91b553; padding: 5px 10px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }
.item-box .item-name, .item-box .sub-name, .item-box .price { color: #91b553; margin-top: 10px; text-align: center; }
.item-box .item-name { font-size: 0.875rem; font-weight: normal; }
.item-box .item-name img { max-height: 40px; width: auto; }
.item-box .sub-name { font-size: 1rem; }
.item-box .price { font-size: 0.875rem; font-family: "Urbanist", sans-serif; }
.item-box .price b { font-size: 1.375rem; padding-right: 6px; }
.item-box.rm-color { background: linear-gradient(#fbf3f1 75%, #da896d 25%); background: linear-gradient(to bottom, #fbf3f1 75%, #da896d 25%); }
.item-box.rm-color .circle { background-color: #d88267 !important; }
.item-box.rm-color .item-name, .item-box.rm-color .sub-name, .item-box.rm-color .price { color: #d88267 !important; }
.item-box .link-more { order: 3; color: #fff; margin-top: auto; margin-left: auto; }
.item-box .link-more::before, .item-box .link-more::after { border-top: 2px solid #fff; }
.item-box .link-more::after { border-right: 2px solid #fff; }
.item-box .link-more:hover { color: #a90600; }
.item-box .link-more:hover::before, .item-box .link-more:hover::after { border-top: 2px solid #a90600; }
.item-box .link-more:hover::after { border-right: 2px solid #a90600; }

/* お客様の声 */
.voice-block { position: relative; margin: 130px auto 30px; }
.voice-block .box:nth-child(1) { background-color: #533635; max-width: 250px; color: #fff; padding: 15px 10px 25px; display: block; background-color: #533635; max-height: 360px; position: absolute; top: -100px; left: 0; }
.voice-block .box:nth-child(2) { padding: 100px 3vw 20px; background-color: rgba(83, 54, 53, 0.1); }
.voice-block .box:nth-child(3) { background-color: rgba(83, 54, 53, 0.15); padding: 20px 3vw; }
.voice-block .box:nth-child(4) { background-color: rgba(83, 54, 53, 0.2); padding: 20px 3vw; margin-bottom: 20px; }
.voice-block .circle-tmb { margin-right: 15px; margin-bottom: 15px; float: left; }
.voice-block .box-name { text-align: left; margin: 20px 0; }
.voice-block .initial { font-size: 0.9375rem; }
.voice-block .catch { font-size: 0.9375rem; color: #ff8400; margin-top: 0.6em; }
.voice-block .p-text { clear: left; }
.voice-block .box-ttl { font-size: 1.625rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.voice-block .box-ttl::before { content: ""; background-image: url("../img/icon-vl-green.png"); background-repeat: no-repeat; background-size: 70px 58px; display: block; width: 70px; height: 58px; }
.voice-block .sub-lead { line-height: 1.5; }
.voice-block .sub-lead span { display: inline-block; font-size: 0.875rem; }
.voice-block .sub-lead span b { font-size: 120%; font-weight: 400; }

/* 開発メンバー */
.member-block { padding: 20px 0 0; }
@media screen and (min-width: 768px) { .member-block { padding: 40px 0 0; } }
@media screen and (min-width: 990px) { .member-block { padding: 60px 0 0; } }

@media screen and (min-width: 768px) { /* KV */
  .hero-text { max-width: 70%; }
  .hero-text .item-img { width: 200px; }
  /* 商品ラインナップ　*/
  .item-block { max-width: none; margin: -30px auto 0; flex-direction: row; }
  .item-block .item-name img { max-height: 50px; } }
@media screen and (min-width: 990px) { /* KV */
  .hero-text { max-width: 1000px; padding: 0; grid-template-columns: 350px 1fr; grid-template-rows: 1fr 1fr 1fr; display: grid; grid-template-areas: "box3 box1" "box3 box2" "box3 box4"; }
  .hero-text .title { text-align: left; }
  .hero-text .title span { display: block; }
  .hero-text .title span.catch { font-size: 2.25rem; }
  .hero-text .title span.catch b { font-size: 70%; }
  .hero-text .title span.logo { font-size: 4.875rem; }
  .hero-text .description { font-size: 1rem; margin: 0; }
  .hero-text .item-img { width: 310px; margin-right: 20px; }
  .hero-text .btn-align { order: 4; min-width: 100%; }
  /* 商品ラインナップ　*/
  .item-block { max-width: 1200px; margin: -60px auto 0; }
  .item-box { display: flex; background: linear-gradient(#f4f8ee 80%, #91b553 20%); background: linear-gradient(to bottom, #f4f8ee 80%, #91b553 20%); width: 50%; }
  .item-box .right { padding: 30px 40px 30px 0; }
  .item-box .pic { order: 1; padding: 0 30px; }
  .item-box .pic img { height: auto; }
  .item-box .circle { font-size: 1.25rem; }
  .item-box .item-name, .item-box .sub-name, .item-box .price { color: #91b553; margin-top: 15px; }
  .item-box .item-name { font-size: 1.25rem; font-weight: normal; }
  .item-box .item-name img { max-height: 80px; }
  .item-box .price { font-size: 1rem; }
  .item-box .price b { font-size: 1.5rem; padding-right: 6px; }
  .item-box.rm-color { background: linear-gradient(#fbf3f1 80%, #da896d 20%); background: linear-gradient(to bottom, #fbf3f1 80%, #da896d 20%); }
  .item-box.rm-color .circle { background-color: #d88267 !important; }
  .item-box.rm-color .item-name, .item-box.rm-color .sub-name, .item-box.rm-color .price { color: #d88267 !important; }
  .item-box .link-more { margin-right: -10px; }
  .voice-block { display: flex; justify-content: flex-end; margin: 80px auto 30px; }
  .voice-block .box { display: block; }
  .voice-block .box:nth-child(1) { width: 300px; max-width: none; padding: 30px 10px 45px; top: -40px; }
  .voice-block .box:nth-child(2) { max-width: calc( calc(100% - 260px) / 3); min-height: 100%; margin-left: -100px; padding: 40px 1.0em; }
  .voice-block .box:nth-child(3) { max-width: calc( calc(100% - 260px) / 3); min-height: 100%; padding: 40px 1.0em; }
  .voice-block .box:nth-child(4) { max-width: calc( calc(100% - 260px) / 3); min-height: 100%; padding: 40px 1.0em; margin-bottom: 0; }
  .voice-block .circle-tmb { float: none; margin: auto; } }
@media screen and (min-width: 1366px) { .item-box { min-height: 400px; }
  .item-box .circle { display: flex; align-items: center; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 96px; height: 96px; font-size: 1.5rem; }
  .voice-block .box:nth-child(1) { min-height: 360px; padding-top: 50px; }
  .voice-block .box:nth-child(2) { padding: 40px 2em 40px 4em; }
  .voice-block .box:nth-child(3), .voice-block .box:nth-child(4) { padding: 40px 2em; } }