@charset 'utf-8';

html {
  min-width: 1280px;
}

body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  font-family: 'Shippori Mincho', '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
  line-height: 1.6;
  font-weight: 400;
  color: #000;
}

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

img { height: auto; max-width: 100%; border: none; vertical-align: top; }
picture { display: block; position: relative; width: 100%; }

/* overwrite
------------------------------------------------ */
#container { margin-top: 0; }
#main_column.colnum1 { width: 100%; }
.LC_Page_Index #container { padding-top: 68px; max-width: 100% !important; min-width: 1280px; }
.LC_Page_Index div#main_column > div { margin-top: 0; }
.base_design #footer_company #footer_company_inner .company_link_group ul li a { font-size: 85.7142857143%; }
.base_design #copyright { font-size: 100%; }
.base_design #copyright small { font-size: inherit; }
.slick-list { width: 100%; }
#detailarea #detail_type_new_a .review_link_bloc { width: 80%; max-width: 500px; }
#customervoice_area .review_btn a { width: 300px; }
#customervoice_area .raku2_review_sort a { width: auto; }

/* utility
------------------------------------------------ */
.u-r-lists { margin: 0; padding: 0; list-style: none; }
.u-r-btn { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; position: relative; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; font-family: inherit; font-size: inherit; font-weight: inherit; cursor: pointer; }
.u-object-fit { width: 100%; height: 100%; max-width: inherit; object-fit: cover; font-family: 'object-fit: cover;'; }

.u-f-gothic { font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; }
.u-f-Garamond { font-family: 'EB Garamond', serif; }
.u-f-CenturyGothic { font-family: 'Century Gothic', Futura, sans-serif; }

@media screen and (max-width: 768px) {
  .u-d-mobile { display: inherit !important; }
  .u-d-desktop { display: none !important; }
}

@media screen and (min-width: 769px) {
  .u-d-mobile { display: none !important; }
  .u-d-desktop { display: inherit !important; }
}

/* component
------------------------------------------------ */
/* button */
.btn-1 { aspect-ratio: 1 / 0.283018867925; width: 212px; font-size: 150%; font-weight: 600; line-height: 1.2; }
.btn-1 > a,
.btn-1 > button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(../img/share/btn1.png) no-repeat center center; background-size: 100% 100%; color: #fff; }
.btn-2 { aspect-ratio: 1 / 0.190677966102; width: 236px; text-align: center; font-size: 142.857142857%; font-weight: 600; line-height: 1.2; }
.btn-2 > a,
.btn-2 > button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(../img/share/btn2.png) no-repeat center center; background-size: 100% 100%; color: #fff; }
.btn-modal-close { position: absolute; top: 16px; right: 16px; width: 31px; height: 31px; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.btn-modal-close::before,
.btn-modal-close::after { content: ''; position: absolute; top: 50%; left: -7px; width: 44px; height: 1px; background-color: #000; }
.btn-modal-close::before { transform: rotate(45deg); }
.btn-modal-close::after { transform: rotate(-45deg); }

@media screen and (min-width: 1281px) {
  .btn-1 { width: calc(((212 * 100) / 1280) * 1vw); font-size: calc(((21 * 100) / 1280) * 1vw); }
  .btn-2 { width: calc(((236 * 100) / 1280) * 1vw); font-size: calc(((20 * 100) / 1280) * 1vw); }
}

/* links */
#links-guide { display: flex; justify-content: center; gap: 64px; padding: 70px 0 85px; }
#links-guide > li { width: 243px; }
#links-guide > li > a { display: block; position: relative; aspect-ratio: 1 / 0.543209876543; padding-top: 10px; width: 100%; background: url(../img/share/btn3.png) no-repeat center center; background-size: 100% 100%; }
#links-guide > li > a i { display: flex; align-items: center; margin: 0 auto; height: 70px; }
#links-guide > li > a i.i-cart { width: 60px; }
#links-guide > li > a i.i-faq { width: 68px; }
#links-guide > li > a p { margin-top: 6px; text-align: center; font-size: 153.571428571%; line-height: 1.2; color: #fff; }

/* block */
#block-instagram { padding: 40px 0 70px; }
#block-instagram .title { margin-bottom: 45px; text-align: center; font-family: 'Century Gothic', Futura, sans-serif; font-size: 285.714285714%; font-weight: 400; letter-spacing: 0.127em; line-height: 1.75; color: #636262; }
#block-instagram .lists { display: grid; gap: 10px; grid-template-columns: repeat(6,calc((100% / 6) - (10px / (6 / 5)))); margin: 0 auto; width: 870px; }
#block-instagram .lists > li { position: relative; }
#block-instagram .lists > li > a { display: block; position: relative; aspect-ratio: 1 / 1.25; overflow: hidden; }

@media screen and (min-width: 1281px) {
}

/* header
------------------------------------------------ */
.l-hd { position: fixed; top: 0; left: 0; width: 100%; height: 68px; background-color: #fff; z-index: 10; }
.l-hd-logo { margin: 0 auto; padding-top: 20px; width: 210px; }
.l-hd-logo > a { display: block; width: 100%; }
.l-hd-info { display: flex; position: absolute; top: 0; right: 24px; }
.l-hd-btns { display: flex; padding-top: 14px; }
.l-hd-btns__item { text-align: center; }
.l-hd-btns__item:not(:first-child) { margin-left: 30px; }
.l-hd-btns__item > a { display: block; }
.l-hd-btns__item i { display: flex; align-items: center; margin: 0 auto 1px; height: 30px; }
.l-hd-btns__item span { display: block; text-align: center; font-size: 85.7142857143%; line-height: 1.2; }
.l-hd-btns__item input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding: 0; background: none; border: none; font-family: inherit; font-size: inherit; font-weight: inherit; }
.l-hd-btns__item.is-account i { width: 28px; }
.l-hd-btns__item.is-cart i { width: 30px; }
.l-hd-menu { margin-left: 26px; padding-top: 16px; }
.l-hd-menu > button { display: block; position: relative; padding-top: 30px; }
.l-hd-menu > button::before { content: ''; position: absolute; top: 0; left: 50%; transition: opacity 0.4s ease; transform: translateX(-50%); width: 28px; height: 1px; background-color: #333; }
.l-hd-menu i { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 26px; }
.l-hd-menu i::before,
.l-hd-menu i::after { content: ''; position: absolute; left: 0; transition: transform 0.4s ease; width: 100%; height: 1px; background-color: #333; }
.l-hd-menu i::before { top: 12px; }
.l-hd-menu i::after { top: 25px; }
.l-hd-menu > button[aria-expanded=true]::before { opacity: 0; }
.l-hd-menu > button[aria-expanded=true] i::before,
.l-hd-menu > button[aria-expanded=true] i::after { top: 50%; }
.l-hd-menu > button[aria-expanded=true] i::before { transform: rotate(45deg); }
.l-hd-menu > button[aria-expanded=true] i::after { transform: rotate(-45deg); }
.l-hd-menu span { display: block; text-align: center; font-size: 85.7142857143%; line-height: 1.2; color: #333; }
.l-hd-menu > button:hover span { color: #aaa; }
.l-gnav { pointer-events: none; position: absolute; top: 68px; right: 0; transition: opacity 0.4s ease; padding: 66px 0; width: 355px; max-height: calc(100dvh - 68px); background-color: #fff; overflow-y: auto; overscroll-behavior-y: contain; opacity: 0; }
.l-gnav[aria-hidden=false] { pointer-events: inherit; opacity: 1; }
.l-gnav-links { margin: 0 auto; width: 188px; border-top: 1px solid #231815; }
.l-gnav-links__item { height: 110px; border-bottom: 1px solid #231815; text-align: center; font-size: 185.714285714%; }
.l-gnav-links__item > a,
.l-gnav-links__item > button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: left; text-decoration: none; color: #333; }
.l-gnav-links__item > button:hover { color: #aaa; }
.l-gnav-links__item input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding: 0; background: none; border: none; font-family: inherit; font-size: inherit; font-weight: inherit; }
.l-gnav-close { display: block; margin: 100px auto 0; width: 61px; height: 61px; }

/* top
------------------------------------------------ */
/* common */
#page-top .top-product { position: relative; }
#page-top .product-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
#page-top .product-visual { position: relative; width: 100%; height: 100%; z-index: 1; }
#page-top h2 { margin: 0; padding: 0; border: none; text-align: left; }

/* product1 */
#top-product1 { aspect-ratio: 1 / 0.509375; }
#top-product1 .copy { position: absolute; top: calc(((220 * 100) / 652) * 1%); left: 15.46875%; font-size: 357.142857143%; line-height: 1.646856; }
#top-product1 .info { position: absolute; top: calc(((112 * 100) / 652) * 1%); left: 64.140625%; width: calc(100% - 64.140625%); }
#top-product1 .name { margin-bottom: 36px; width: 252px; }
#top-product1 .text { margin-bottom: 22px; font-size: 128.571428571%; font-weight: 600; line-height: 1.83333333333; }
#top-product1 .title { font-size: 121.428571429%; font-weight: 600; line-height: 1.64705882353; color: #000; }
#top-product1 .price { font-size: 121.428571429%; font-weight: 600; line-height: 1.64705882353; }
#top-product1 .attentions { margin-top: 24px; font-size: 64.2857142857%; line-height: 1.75; }
#top-product1 .logo { position: absolute; bottom: calc(((32 * 100) / 652) * 1%); left: 50%; transform: translateX(-50%); width: 41.89825%; }

@media screen and (min-width: 1281px) {
  #top-product1 .copy { font-size: calc(((50 * 100) / 1280) * 1vw); }
  #top-product1 .name { margin-bottom: calc(((36 * 100) / 1280) * 1vw); }
  #top-product1 .text { margin-bottom: calc(((22 * 100) / 1280) * 1vw); font-size: calc(((18 * 100) / 1280) * 1vw); }
  #top-product1 .title { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-product1 .price { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-product1 .attentions { margin-top: calc(((24 * 100) / 1280) * 1vw); font-size: calc(((9 * 100) / 1280) * 1vw); }
}

/* product2 */
#top-product2 { aspect-ratio: 1 / 0.5625; }
#top-product2 .copy { position: absolute; top: calc(((70 * 100) / 720) * 1%); left: 15.625%; }
#top-product2 .copy-en { font-family: 'EB Garamond', serif; font-size: 142.857142857%; font-style: italic; line-height: 1.2; }
#top-product2 .copy-ja { margin-top: 12px; font-size: 421.428571429%; font-weight: 600; line-height: 1.75; }
#top-product2 .text { position: absolute; top: calc(((98 * 100) / 720) * 1%); left: 60.390625%; font-size: 128.571428571%; line-height: 1.96140555556; }
#top-product2 .text p + p { margin-top: 1em; }
#top-product2 .btn-1 { position: absolute; bottom: 4.21875%; left: 50%; transform: translateX(-50%); }
#top-product2 .product-visual { margin: 0 auto; width: 31.9053515625%; }

@media screen and (min-width: 1281px) {
  #top-product2 .copy-en { font-size: calc(((20 * 100) / 1280) * 1vw); }
  #top-product2 .copy-ja { margin-top: calc(((12 * 100) / 1280) * 1vw); font-size: calc(((59 * 100) / 1280) * 1vw); }
  #top-product2 .text { font-size: calc(((18 * 100) / 1280) * 1vw); }
}

/* product3 */
#top-product3 { aspect-ratio: 1 / 0.5625; }
#top-product3 .panel { position: absolute; top: 4.72222222222%; left: 7.8125%; padding: 50px 0 50px 50px; width: 26.171875%; background-color: #fff; font-size: 164.285714286%; font-weight: 500; line-height: 1.73913043478; }
#top-product3 .panel span { display: inline-block; padding-top: 0.1em; vertical-align: top; font-size: 128.571428571%; }
#top-product3 .panel sup { display: inline-block; padding-top: 0.7em; vertical-align: top; font-size: 0.4em; }
#top-product3 .explain { position: absolute; top: calc(((62 * 100) / 720) * 1%); left: 40.3125%; width: calc(100% - 40.3125%); }
#top-product3 .explain-block { position: relative; }
#top-product3 .explain-block + .explain-block { margin-top: 34px; }
#top-product3 .explain-block-title { position: absolute; top: 0; left: 0; font-size: 185.714285714%; font-weight: 600; line-height: 1.75; }
#top-product3 .explain-block-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; }
#top-product3 .explain-block-title span { vertical-align: top; font-size: 141.142857143%; }
#top-product3 .explain-block-title sup { position: absolute; top: 1em; right: -2em; font-size: 0.3em; }
#top-product3 .explain-box { padding-left: 166px; }
#top-product3 .explain-box-title { font-size: 142.857142857%; font-weight: 600; line-height: 1.85; }
#top-product3 .explain-box-title sup { font-size: 0.5em; }
#top-product3 .explain-box-text { font-size: 114.285714286%; font-weight: 600; line-height: 1.6875; }
#top-product3 .explain-box-text sup { font-size: 0.5em; }
#top-product3 .explain-attentions { margin-top: 20px; padding-left: 166px; font-size: 64.2857142857%; line-height: 1.75; }
#top-product3 .ingredient { position: absolute; bottom: calc(((48 * 100) / 720) * 1%); left: 9.6875%; width: 24.375%; }
#top-product3 .ingredient-text { margin-bottom: 10px; text-align: center; font-size: 107.142857143%; font-weight: 500; line-height: 1.66666666667; }
#top-product3 .ingredient-imark { display: flex; justify-content: space-between; align-items: center; }
#top-product3 .ingredient-imark li.is-govc { width: 36.5384615385%; }
#top-product3 .ingredient-imark li.is-repista { width: 19.2307692308%; }
#top-product3 .ingredient-imark li.is-naturalfullerene { width: 27.5641025641%; }
#top-product3 .ingredient .btn-2 { margin: 56px auto 0; }
#top-product3 .ingredient-modal { pointer-events: none; position: fixed; top: 0; left: 0; transition: opacity 0.4s ease; padding: 100px 0 42px; width: 100%; height: 100%; background-color: #fff; overflow-y: auto; overscroll-behavior-y: contain; opacity: 0; z-index: 100; }
#top-product3 .ingredient-modal[aria-hidden=false] { pointer-events: inherit; opacity: 1; }
#top-product3 .ingredient-modal-content { padding: 0 124px; }
#top-product3 .ingredient-modal-title { margin-bottom: 15px; font-size: 114.285714286%; font-weight: 400; line-height: 2.5; }
#top-product3 .ingredient-modal-text-1 { font-size: 114.285714286%; line-height: 2.5; }
#top-product3 .ingredient-modal-close { display: block; margin: 80px auto 0; width: 61px; height: 61px; }

@media screen and (min-width: 1281px) {
  #top-product3 .panel { padding: calc(((50 * 100) / 1280) * 1vw) 0 calc(((50 * 100) / 1280) * 1vw) calc(((50 * 100) / 1280) * 1vw); font-size: calc(((23 * 100) / 1280) * 1vw); }
  #top-product3 .panel span { font-size: calc(((18 * 100) / 1280) * 1vw); }
  #top-product3 .explain-block + .explain-block { margin-top: calc(((34 * 100) / 1280) * 1vw); }
  #top-product3 .explain-block-title { font-size: calc(((26 * 100) / 1280) * 1vw); }
  #top-product3 .explain-block-title::after { height: calc(((1 * 100) / 1280) * 1vw); }
  #top-product3 .explain-block-title span { font-size: calc(((19.76 * 100) / 1280) * 1vw); }
  #top-product3 .explain-box { padding-left: calc(((166 * 100) / 1280) * 1vw); }
  #top-product3 .explain-box-title { font-size: calc(((20 * 100) / 1280) * 1vw); }
  #top-product3 .explain-box-text { font-size: calc(((16 * 100) / 1280) * 1vw); }
  #top-product3 .explain-attentions { margin-top: calc(((20 * 100) / 1280) * 1vw); padding-left: calc(((166 * 100) / 1280) * 1vw); font-size: calc(((9 * 100) / 1280) * 1vw); }
  #top-product3 .ingredient {bottom: 3.90625vw; left: 9.6875vw; }
  #top-product3 .ingredient-text { margin-bottom: calc(((10 * 100) / 1280) * 1vw); font-size: calc(((15 * 100) / 1280) * 1vw); }
  #top-product3 .ingredient .btn-2 { margin-top: calc(((56 * 100) / 1280) * 1vw); }
}

/* product4-5 */
#top-product4-5 { display: flex; position: relative; aspect-ratio: 1 / 0.5625; }
#top-product4-5 .panel { display: flex; align-items: center; position: absolute; top: 4.02777777778%; left: 10.78125%; padding-top: 32px; width: 21.8225625%; height: 47.6388888889%; background-color: #fff; writing-mode: vertical-rl; font-size: 164.285714286%; font-weight: 500; line-height: 1.73913043478; }
#top-product4-5 .btn-1 { position: absolute; bottom: 4.21875%; left: 50%; transform: translateX(-50%); z-index: 3; }

@media screen and (min-width: 1281px) {
  #top-product4-5 .panel { padding-top: calc(((32 * 100) / 1280) * 1vw); font-size: calc(((23 * 100) / 1280) * 1vw); }
}

/* product4 */
#top-product4 { width: 50%; }
#top-product4 .text { position: absolute; bottom: 11.1111111111%; left: 30.9375%; font-size: 114.285714286%; font-weight: 600; line-height: 2.0625; }

@media screen and (min-width: 1281px) {
  #top-product4 .text { font-size: calc(((16 * 100) / 1280) * 1vw); }
}

/* product5 */
#top-product5 { width: 50%; }
#top-product5 .lists { display: grid; gap: 14px; grid-template-columns: repeat(2,calc(50% - 7px)); position: absolute; bottom: 10.8333333333%; left: 10.9375%; width: 62.1875%; }
#top-product5 .lists > li > div { display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; aspect-ratio: 1 / 0.385416666667; background-repeat: no-repeat; background-position: center center; background-size: cover; }
#top-product5 .lists > li > div > p { text-align: center; font-size: 121.428571429%; font-weight: 500; line-height: 1.2; }
#top-product5 .lists > li > div > p sup { font-size: 0.5em; }
#top-product5 .lists > li > p { margin-top: 10px; font-size: 64.2857142857%; }
#top-product5 .lists > li:nth-of-type(1) > div { background-image: url(../img/top/product5_btn1.png); }
#top-product5 .lists > li:nth-of-type(2) > div { background-image: url(../img/top/product5_btn2.png); }
#top-product5 .lists > li:nth-of-type(3) > div { background-image: url(../img/top/product5_btn3.png); }
#top-product5 .lists > li:nth-of-type(4) > div { background-image: url(../img/top/product5_btn4.png); }

@media screen and (min-width: 1281px) {
  #top-product5 .lists > li > div > p { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-product5 .lists > li > p { margin-top: calc(((10 * 100) / 1280) * 1vw); font-size: calc(((9 * 100) / 1280) * 1vw); }
}

/* product6 */
#top-product6 { aspect-ratio: 1 / 0.5625; }
#top-product6 .copy { position: absolute; top: 5.83333333333%; left: 14.84375%; writing-mode: vertical-rl; font-size: 200%; font-weight: 600; line-height: 1.2; }
#top-product6 .copy strong { font-size: 250%; font-weight: 600; }
#top-product6 .skin { position: absolute; top: 1%; left: 50%; transform: translateX(-50%); aspect-ratio: 1 / 1.09424920128; width: 50%; background: url(../img/top/product6_skin.png) no-repeat center center; background-size: 100% 100%; }
#top-product6 .skin > li { position: absolute; aspect-ratio: 1 / 1; width: 26.8370607029%; }
#top-product6 .skin > li > div { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
#top-product6 .skin > li > div > p { text-align: center; font-weight: 600; line-height: 1.4; }
#top-product6 .skin > li > div > p:nth-of-type(1) { font-size: 135.714285714%; }
#top-product6 .skin > li > div > p:nth-of-type(2) { margin-top: 10px; font-size: 107.142857143%; }
#top-product6 .skin > li > div > p > sup { font-size: 0.5em; }
#top-product6 .skin > li > p { position: absolute; bottom: 9%; left: 90%; white-space: nowrap; font-size: 64.2857142857%; line-height: 1.4; }
#top-product6 .skin > li:nth-of-type(1) { top: 4.5%; left: 36.6%; }
#top-product6 .skin > li:nth-of-type(2) { top: 21%; left: 68%; }
#top-product6 .skin > li:nth-of-type(3) { top: 54.5%; left: 68%; }
#top-product6 .skin > li:nth-of-type(4) { top: 70.5%; left: 36.6%; }
#top-product6 .skin > li:nth-of-type(5) { top: 54.5%; left: 5%; }
#top-product6 .skin > li:nth-of-type(6) { top: 21%; left: 5.4%; }
#top-product6 .btn-1 { position: absolute; bottom: 6.94444444444%; left: 67.8125%; }

@media screen and (min-width: 1281px) {
  #top-product6 .copy { font-size: calc(((28 * 100) / 1280) * 1vw); }
  #top-product6 .copy strong { font-size: calc(((35 * 100) / 1280) * 1vw); }
  #top-product6 .skin > li > div > p:nth-of-type(1) { font-size: calc(((19 * 100) / 1280) * 1vw); }
  #top-product6 .skin > li > div > p:nth-of-type(2) { margin-top: calc(((10 * 100) / 1280) * 1vw); font-size: calc(((15 * 100) / 1280) * 1vw); }
  #top-product6 .skin > li > p { font-size: calc(((9 * 100) / 1280) * 1vw); }
}

/* product7 */
#top-product7 { aspect-ratio: 1 / 0.5625; }
#top-product7 .panel { position: absolute; top: 7.63888888889%; left: 10.9375%; padding: 46px 0 46px 60px; width: 26.40625%; background-color: #fff; font-size: 164.285714286%; font-weight: 600; line-height: 1.73913043478; }
#top-product7 .info { position: absolute; top: 13.1944444444%; left: 44.609375%; }
#top-product7 .text { font-size: 121.428571429%; font-weight: 600; line-height: 2; }
#top-product7 .text sup { font-size: 71.4285714286%; }
#top-product7 .text p + p { margin-top: 2em; }
#top-product7 .attentions { margin-top: 30px; font-size: 64.2857142857%; line-height: 1.75; }

@media screen and (min-width: 1281px) {
  #top-product7 .panel { padding: calc(((46 * 100) / 1280) * 1vw) 0 calc(((46 * 100) / 1280) * 1vw) calc(((60 * 100) / 1280) * 1vw); font-size: calc(((23 * 100) / 1280) * 1vw); }
  #top-product7 .text { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-product7 .text sup { font-size: calc(((10 * 100) / 1280) * 1vw); }
  #top-product7 .attentions { margin-top: calc(((30 * 100) / 1280) * 1vw); font-size: calc(((9 * 100) / 1280) * 1vw); }
}

/* product8 */
#top-product8 { aspect-ratio: 1 / 0.5625; }
#top-product8 .panel { position: absolute; top: 7.63888888889%; left: 10.9375%; padding: 46px 0 46px 50px; width: 30.3125%; background-color: #fff; font-size: 164.285714286%; font-weight: 600; line-height: 1.73913043478; }
#top-product8 .text { position: absolute; top: 47.2222222222%; left: 15.3515625%; font-size: 121.428571429%; font-weight: 600; line-height: 2; }
#top-product8 .text p + p { margin-top: 0.8em; }
#top-product8 .method { position: absolute; top: 9.16666666667%; left: 53.90625%; aspect-ratio: 1 / 1.30769230769; width: 26.40625%; background: url(../img/top/product8_method.png) no-repeat center center; background-size: 100% 100%; }
#top-product8 .method > li { display: flex; justify-content: center; align-items: center; position: absolute; aspect-ratio: 1 / 1; width: 57.100591716%; text-align: center; font-size: 135.714285714%; line-height: 1.75; }
#top-product8 .method > li:nth-of-type(1) { top: 29%; left: 23%; }
#top-product8 .method > li:nth-of-type(2) { top: 56.5%; right: 0; }
#top-product8 .method > li:nth-of-type(3) { top: 56.5%; left: 0; }
#top-product8 .btn-1 { position: absolute; bottom: 6.94444444444%; left: 50%; transform: translateX(-50%); }

@media screen and (min-width: 1281px) {
  #top-product8 .panel { padding: calc(((46 * 100) / 1280) * 1vw) 0 calc(((46 * 100) / 1280) * 1vw) calc(((50 * 100) / 1280) * 1vw); font-size: calc(((23 * 100) / 1280) * 1vw); }
  #top-product8 .text { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-product8 .method > li { font-size: calc(((19 * 100) / 1280) * 1vw); }
}

/* howto */
#top-howto { position: relative; padding: 46px 0 38px; }
#top-howto .title { position: relative; margin: 0 auto 48px; width: 705px; font-family: 'EB Garamond', serif; font-size: 192.857142857%; font-style: italic; font-weight: 400; line-height: 1.2; }
#top-howto .title::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #000; z-index: 1; }
#top-howto .title span { display: inline-block; position: relative; padding-right: 16px; background-color: #fff; vertical-align: top; z-index: 2; }
#top-howto .movie-block { margin: 0 auto; width: 590px; }
#top-howto .movie-block + .movie-block { margin-top: 54px; }
#top-howto .movie-block-title { margin-bottom: 28px; font-size: 148.571428571%; font-weight: 600; line-height: 1.2; }
#top-howto .movie-block-media { position: relative; aspect-ratio: 1 / 0.562711864407; margin-bottom: 24px; }
#top-howto .movie-block-play { position: absolute; top: 0; left: 0; transition: opacity 0.4s ease; width: 100%; height: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
#top-howto .movie-block-play::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border: 52px solid transparent; border-right: none; border-left: 82px solid #888; }
#top-howto .movie-block-play[aria-expanded=true] { pointer-events: none; opacity: 0; }
#top-howto .movie-block-media__video { pointer-events: none; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease; opacity: 0; z-index: 2; }
#top-howto .movie-block-media__video[aria-hidden=false] { pointer-events: inherit; opacity: 1; }
#top-howto .movie-block-info { display: flex; }
#top-howto .movie-block-copy,
#top-howto .movie-block-pic { min-width: 220px; }
#top-howto .movie-block-copy { font-size: 125.714285714%; font-weight: 600; line-height: 2; }
#top-howto .movie-block-pic img { width: 100px; }
#top-howto .movie-block-text { white-space: nowrap; font-size: 114.285714286%; font-weight: 600; line-height: 2; }
#top-howto .movie-block-text p + p { margin-top: 2em; }

@media screen and (min-width: 1281px) {
}

/* message */
#top-message { position: relative; aspect-ratio: 1 / 1.05; }
#top-message .message-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
#top-message .title { position: absolute; top: 0.74404761904%; left: 15.78125%; font-family: 'EB Garamond', serif; font-size: 142.857142857%; font-style: italic; font-weight: 400; line-height: 1.2; z-index: 2; }
#top-message .title::after { content: ''; position: absolute; top: 28px; left: 22px; width: 1px; height: 82px; background-color: #000; }
#top-message .panel { position: absolute; top: 7.14285714286%; left: 7.8125%; padding: 50px 0 50px 60px; width: 27.734375%; background-color: #fff; font-size: 164.285714286%; font-weight: 500; line-height: 1.73913043478; }
#top-message .text { position: absolute; top: 5.35714285714%; left: 47.03125%; font-size: 121.428571429%; font-weight: 600; line-height: 2; }
#top-message .text p + p { margin-top: 2em; }
#top-message .developer { position: absolute; top: 33.0357142857%; left: 27.96875%; width: 10.546875%; }
#top-message .developer-photo { width: 100%; }
#top-message .developer-name { white-space: nowrap; font-size: 114.285714286%; font-weight: 600; line-height: 1.8125; }
#top-message .info { position: absolute; bottom: 7.7380952381%; left: 61.875%; width: 16.5625%; }
#top-message .name,
#top-message .price { text-align: center; font-size: 121.428571429%; font-weight: 600; line-height: 1.64705882353; }
#top-message .btn-1 { margin-top: 18px; }
#top-message .message-visual { position: relative; z-index: 1; }

@media screen and (min-width: 1281px) {
  #top-message .title { font-size: calc(((20 * 100) / 1280) * 1vw); }
  #top-message .title::after { top: calc(((28 * 100) / 1280) * 1vw); left: calc(((22 * 100) / 1280) * 1vw); width: calc(((1 * 100) / 1280) * 1vw); height: calc(((82 * 100) / 1280) * 1vw); }
  #top-message .panel { padding: calc(((50 * 100) / 1280) * 1vw) 0 calc(((50 * 100) / 1280) * 1vw) calc(((60 * 100) / 1280) * 1vw); font-size: calc(((23 * 100) / 1280) * 1vw); }
  #top-message .text { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-message .developer-name { font-size: calc(((16 * 100) / 1280) * 1vw); }
  #top-message .name,
  #top-message .price { font-size: calc(((17 * 100) / 1280) * 1vw); }
  #top-message .btn-1 { margin-top: calc(((18 * 100) / 1280) * 1vw); }
}

/* guide
------------------------------------------------ */
#page-guide { margin: 0 auto; padding: 124px 0 120px; max-width: 623px; }
#page-guide .guide-block + .guide-block { margin-top: 32px; }
#page-guide .guide-title { position: relative; margin: 0 0 20px; padding: 3px; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(237,241,244,0.96) 38%,rgba(237,241,244,0.99) 100%); border-bottom: none; font-size: 114.285714286%; font-weight: 600; line-height: 1.4; }
#page-guide .guide-text { position: relative; font-size: 114.285714286%; font-weight: 600; line-height: 2.0625; }
#page-guide .guide-text .link-contact { display: inline-flex; align-items: center; vertical-align: top; }
#page-guide .guide-text .link-contact::after { content: ''; display: inline-block; margin-left: 8px; width: 26px; height: 26px; background: url(../img/icon/arrow1.png) no-repeat center center; background-size: 100%; }
#page-guide .guide-text .creditcard { display: flex; align-items: flex-end; gap: 10px; }
#page-guide .guide-text .creditcard li { text-align: center; }

/* faq
------------------------------------------------ */
#page-faq { margin: 0 auto; padding: 120px 0; max-width: 623px; }
#page-faq .page-title { margin: 0 0 74px; padding: 0; border-bottom: none; font-size: 164.285714286%; font-weight: 500; line-height: 2.21739130435; }
#page-faq .qa-block + .qa-block { margin-top: 94px; }
#page-faq .qa-title { position: relative; margin-bottom: 20px; padding: 3px; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(237,241,244,0.96) 38%,rgba(237,241,244,0.99) 100%); font-size: 114.285714286%; font-weight: 600; line-height: 1.4; }
#page-faq .qa-box { border-bottom: 1px solid #E8E8E8; }
#page-faq .qa-box > dt,
#page-faq .qa-box > dd { position: relative; padding-left: 1.4em; font-size: 114.285714286%; font-weight: 600; line-height: 1.9375; }
#page-faq .qa-box > dt { padding-top: 16px; padding-bottom: 16px; cursor: pointer; }
#page-faq .qa-box > dt::before { content: 'Q.'; position: absolute; top: 16px; left: 0; }
#page-faq .qa-box > dt::after { content: ''; position: absolute; top: 16px; right: 7px; width: 30px; height: 30px; background: linear-gradient(45deg,  rgba(237,241,244,0.99) 0%,rgba(237,241,244,0.96) 62%,rgba(255,255,255,0) 100%); border-radius: 50%; z-index: 1; }
#page-faq .qa-box > dt > span { display: block; position: relative; padding-right: 40px; width: 100%; }
#page-faq .qa-box > dt > span::before,
#page-faq .qa-box > dt > span::after { content: ''; position: absolute; top: 14px; right: 15px; width: 14px; height: 1px; background-color: #000; z-index: 2; }
#page-faq .qa-box > dt > span::after { transition: transform 0.4s ease; transform: rotate(90deg); }
#page-faq .qa-box > dt.is-active > span::after { transform: rotate(0); }
#page-faq .qa-box > dd { display: none; position: relative; padding-top: 4px; padding-bottom: 22px; }
#page-faq .qa-box > dd::before { content: 'A.'; position: absolute; top: 4px; left: 0; }
#page-faq .qa-box > dd > button { color: #31869C; }
#page-faq .ingredient-modal { pointer-events: none; position: fixed; top: 0; left: 0; transition: opacity 0.4s ease; padding: 100px 0 42px; width: 100%; height: 100%; background-color: #fff; overflow-y: auto; overscroll-behavior-y: contain; opacity: 0; z-index: 100; }
#page-faq .ingredient-modal[aria-hidden=false] { pointer-events: inherit; opacity: 1; }
#page-faq .ingredient-modal-content { padding: 0 124px; }
#page-faq .ingredient-modal-title { margin-bottom: 15px; padding: 0; border-bottom: none; font-size: 114.285714286%; font-weight: 400; line-height: 2.5; }
#page-faq .ingredient-modal-text-1 { font-size: 114.285714286%; line-height: 2.5; }
#page-faq .ingredient-modal-close { display: block; margin: 80px auto 0; width: 61px; height: 61px; }