@charset "UTF-8";
/* =================================
common
================================= */
.pankuzu {
  font-family: "century-gothic", Century Gothic, CenturyGothic, Futura, AppleGothic, sans-serif;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 60px;
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
  letter-spacing: .2em; }
  .pankuzu li {
    display: inline-block; }
    .pankuzu li:nth-child(n+2):before {
      content: '－'; }
  .pankuzu a {
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 0.3em; }
    .pankuzu a:hover {
      text-decoration: none; }

.ui2 h2, .ui2 h3, .ui2 h4 {
  font-family: "century-gothic", Century Gothic, CenturyGothic, Futura, AppleGothic, sans-serif;
  font-weight: unset;
  letter-spacing: .2em; }

@media screen and (max-width: 768px) {
  .pankuzu {
    width: 90%;
    margin: 15px auto 35px;
    font-size: 11px; } }
/* =================================
Concept
================================= */
.concept h2 {
  font-size: 42px;
  margin-bottom: 53px; }
.concept .primary {
  position: relative; }
  .concept .primary img.sp {
    display: none; }
  .concept .primary .txt01 {
    position: absolute;
    font-size: 1.7vw;
    writing-mode: vertical-rl;
    text-orientation: upright;
    top: 15.5vw;
    left: 21.8vw;
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0.2em; }
  .concept .primary .txt02 {
    position: absolute;
    top: 23vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 10vw; }
    .concept .primary .txt02 span {
      font-size: .6vw;
      letter-spacing: 1em;
      color: #fff;
      line-height: 7em; }
  .concept .primary .txt03 {
    position: absolute;
    right: 22vw;
    bottom: 10.2vw;
    font-size: .85vw;
    line-height: 2.5;
    text-align: left;
    letter-spacing: 0.2em; }
.concept + footer {
  margin-top: 0; }

@media screen and (max-width: 768px) {
  .concept h2 {
    font-size: 25px;
    width: 90%;
    margin: 0 auto 35px; }
  .concept .primary img.pc {
    display: none; }
  .concept .primary img.sp {
    display: block; }
  .concept .primary .txt01 {
    font-size: 5.4vw;
    top: 20vw;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content; }
  .concept .primary .txt02 {
    top: 118vw;
    width: 23vw; }
    .concept .primary .txt02 span {
      font-size: 2vw;
      letter-spacing: .5em;
      line-height: 5em; }
  .concept .primary .txt03 {
    font-size: 4vw;
    line-height: 2.5;
    left: 0;
    right: 0;
    bottom: 28vw;
    margin: auto;
    width: 83%; }
  .concept + footer {
    margin-top: 0; } }
/* =================================
News
================================= */
.news h2 {
  font-size: 42px;
  margin-bottom: 100px; }
.news .news-wrap {
  max-width: 1000px; }
  .news .news-wrap li {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #d9d9d9; }
    .news .news-wrap li:last-of-type {
      margin-bottom: 0; }
  .news .news-wrap a {
    margin: 0; }
  .news .news-wrap .left_area img {
    max-width: 340px;
    width: auto; }
  .news .news-wrap .right-area {
    max-width: 620px;
    width: 62%;
    text-align: left; }
  .news .news-wrap dl {
    margin-bottom: 15px; }
  .news .news-wrap dt {
    margin-bottom: 15px;
    font-family: "century-gothic", Century Gothic, CenturyGothic, Futura, AppleGothic, sans-serif;
    line-height: 1;
    letter-spacing: .1em; }
  .news .news-wrap span {
    vertical-align: middle;
    display: inline-block; }
  .news .news-wrap .cate {
    color: #fff;
    text-align: center;
    font-size: 14px;
    background: #CDCDCD;
    width: 110px;
    margin-right: 20px;
    padding: 3px 0; }
  .news .news-wrap .day {
    font-size: 12px;
    color: #999; }
  .news .news-wrap dd {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6; }
  .news .news-wrap h3 {
    font-family: inherit; }
  .news .news-wrap h4 {
    font-size: 15px;
    font-family: inherit; }
  .news .news-wrap p {
    margin-bottom: 1.5em;
    font-size: 14px;
    line-height: 1.8; }
    .news .news-wrap p:last-of-type {
      margin-bottom: 0; }
  .news .news-wrap .bold {
    font-weight: bold; }
  .news .news-wrap .red {
    color: #ef3434; }
  .news .news-wrap .flex_wrap {
    display: flex;
    column-gap: 1.5em;
    margin-top: .5em; }
    .news .news-wrap .flex_wrap .shop_btn {
      max-width: 130px;
      padding: .5em 1em .5em 1.8em;
      box-sizing: border-box; }
  .news .news-wrap .ui2-btn {
    font-family: inherit;
    text-align: center;
    margin-top: 1%;
    background: #020100;
    color: #fff;
    font-weight: bold; }
  .news .news-wrap .no_link {
    opacity: .3;
    pointer-events: none; }
  .news .news-wrap .more {
    position: absolute;
    right: 0;
    bottom: 30px;
    font-size: 15px;
    color: #83c4c0; }
    .news .news-wrap .more span {
      position: relative;
      padding-right: 20px;
      display: inline-block; }
      .news .news-wrap .more span:after {
        content: '';
        width: 8px;
        height: 8px;
        border-top: solid 1px #83c4c0;
        border-right: solid 1px #83c4c0;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        margin: auto;
        transform: rotate(45deg); }

@media screen and (max-width: 768px) {
  .news h2 {
    font-size: 25px;
    width: 90%;
    margin: 0 auto 50px; }
  .news .news-wrap li {
    display: block;
    margin-bottom: 40px;
    padding-bottom: 40px; }
  .news .news-wrap .left_area img {
    max-width: none;
    width: 42%;
    float: right;
    margin-left: 4%;
    margin-bottom: 2%; }
  .news .news-wrap .right-area {
    max-width: none;
    width: 100%;
    text-align: left; }
  .news .news-wrap dl {
    margin-bottom: 12px; }
  .news .news-wrap dt {
    margin-bottom: 12px; }
  .news .news-wrap span {
    display: block; }
  .news .news-wrap .cate {
    font-size: 12px;
    width: 100px;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 2px 0; }
  .news .news-wrap .day {
    font-size: 11px;
    text-align: left;
    padding: 0; }
  .news .news-wrap dd {
    font-size: 14px; }
  .news .news-wrap h4 {
    font-size: 13px; }
  .news .news-wrap p {
    font-size: 12px;
    line-height: 1.6; }
  .news .news-wrap .flex_wrap {
    column-gap: 0.8em; }
  .news .news-wrap .more {
    position: static;
    padding: 5px 0;
    margin-top: 10px;
    display: block;
    font-size: 14px; } }
/* =================================
下層共通
================================= */
.faq h2, .faq h3, .faq h4, .shop_list h2, .shop_list h3, .shop_list h4, .about h2, .about h3, .about h4, .privacy h2, .privacy h3, .privacy h4, .guide h2, .guide h3, .guide h4, .contact h2, .contact h3, .contact h4 {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; }
.faq h2, .shop_list h2, .about h2, .privacy h2, .guide h2, .contact h2 {
  margin-bottom: 60px;
  font-size: 28px; }

@media print, screen and (max-width: 768px) {
  .faq h2, .shop_list h2, .about h2, .privacy h2, .guide h2, .contact h2 {
    font-size: 20px;
    margin-bottom: 40px; } }
/* =================================
よくあるご質問
================================= */
.faq .faq-menu {
  max-width: 1000px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 3.5%;
  row-gap: 30px;
  margin-bottom: 60px; }
  .faq .faq-menu li {
    width: 31%; }
  .faq .faq-menu a {
    border: 1px solid #333;
    padding: 15px 20px;
    font-size: 16px;
    display: block;
    text-align: center; }
.faq .bg-area {
  padding-top: 80px;
  background: url("../images/top/bg.jpg") no-repeat center/cover;
  background-attachment: fixed; }
.faq .faq-section h3 {
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  font-size: 22px;
  text-align: center;
  padding: 25px 0; }
.faq .faq-section ul.inner {
  max-width: 750px;
  padding-top: 80px;
  padding-bottom: 80px; }
  .faq .faq-section ul.inner li {
    background: #fff;
    margin-bottom: 25px;
    position: relative;
    line-height: 1.8;
    text-align: left;
    letter-spacing: .1em; }
    .faq .faq-section ul.inner li:last-of-type {
      margin-bottom: 0; }
  .faq .faq-section ul.inner .title {
    position: relative;
    cursor: pointer;
    padding: 30px 55px 30px 20px;
    font-size: 18px; }
    .faq .faq-section ul.inner .title:before, .faq .faq-section ul.inner .title:after {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      content: '';
      width: 15px;
      height: 1px;
      background: #333;
      transition: all .2s ease-in; }
    .faq .faq-section ul.inner .title:before {
      right: 20px;
      transform: rotate(0deg); }
    .faq .faq-section ul.inner .title:after {
      right: 20px;
      transform: rotate(90deg); }
    .faq .faq-section ul.inner .title.close:before {
      transform: rotate(45deg); }
    .faq .faq-section ul.inner .title.close:after {
      transform: rotate(-45deg); }
    .faq .faq-section ul.inner .title p {
      padding-left: 60px; }
  .faq .faq-section ul.inner .box {
    font-size: 15px;
    display: none;
    margin: 0 20px;
    padding-bottom: 30px; }
  .faq .faq-section ul.inner .box-inner {
    border-top: 1px solid #333;
    padding-top: 28px;
    padding-left: 60px;
    position: relative; }
  .faq .faq-section ul.inner .txt-q, .faq .faq-section ul.inner .txt-a {
    font-size: 20px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .faq .faq-section ul.inner .txt-q {
    background: #83c4c0;
    border: 1px solid #83c4c0;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto; }
  .faq .faq-section ul.inner .txt-a {
    border: 1px solid #83c4c0;
    color: #83c4c0;
    position: absolute;
    top: 20px;
    left: 0; }
  .faq .faq-section ul.inner .red {
    color: #c70719; }
  .faq .faq-section ul.inner p {
    margin-bottom: 1em; }
    .faq .faq-section ul.inner p small {
      display: block;
      font-size: 0.8em; }
    .faq .faq-section ul.inner p:last-of-type {
      margin-bottom: 0; }
  .faq .faq-section ul.inner .border {
    border: 1px solid #333;
    text-align: center;
    line-height: 1.7;
    padding: 20px 40px;
    margin: 0;
    display: block;
    width: 70%;
    position: relative;
    box-sizing: border-box; }
    .faq .faq-section ul.inner .border:before {
      content: '';
      width: 10px;
      height: 10px;
      border-top: solid 1px #333;
      border-right: solid 1px #333;
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0;
      margin: auto;
      transform: rotate(45deg); }
  .faq .faq-section ul.inner .card {
    margin-top: 20px; }
    .faq .faq-section ul.inner .card li {
      display: inline-block;
      margin: 0;
      margin-right: 20px;
      padding: 0; }
      .faq .faq-section ul.inner .card li:last-of-type {
        margin-right: 0; }
    .faq .faq-section ul.inner .card img {
      width: auto;
      height: 50px; }
  .faq .faq-section ul.inner .mt {
    margin-top: 1em; }
  .faq .faq-section ul.inner .mb {
    margin-bottom: 1em; }
.faq + footer {
  margin-top: 0; }

@media screen and (max-width: 768px) {
  .faq .faq-menu {
    display: block;
    margin-bottom: 40px; }
    .faq .faq-menu li {
      width: 100%;
      margin-bottom: 20px; }
      .faq .faq-menu li:last-of-type {
        margin-bottom: 0; }
    .faq .faq-menu a {
      padding: 12px 15px;
      font-size: 15px; }
  .faq .bg-area {
    padding-top: 40px; }
  .faq .faq-section h3 {
    font-size: 17px;
    padding: 18px 0; }
  .faq .faq-section ul.inner {
    max-width: none;
    padding-top: 40px;
    padding-bottom: 40px; }
    .faq .faq-section ul.inner li {
      margin-bottom: 18px; }
    .faq .faq-section ul.inner .title {
      padding: 15px 40px 15px 15px;
      font-size: 15px;
      justify-content: flex-start; }
      .faq .faq-section ul.inner .title:before, .faq .faq-section ul.inner .title:after {
        width: 12px; }
      .faq .faq-section ul.inner .title:before {
        right: 15px; }
      .faq .faq-section ul.inner .title:after {
        right: 15px; }
      .faq .faq-section ul.inner .title p {
        padding-left: 48px; }
    .faq .faq-section ul.inner .box {
      font-size: 13px;
      margin: 0 15px;
      padding-bottom: 30px; }
    .faq .faq-section ul.inner .box-inner {
      padding-top: 15px;
      padding-left: 48px; }
    .faq .faq-section ul.inner .txt-q, .faq .faq-section ul.inner .txt-a {
      font-size: 18px;
      width: 35px;
      height: 35px; }
    .faq .faq-section ul.inner .txt-a {
      top: 15px; }
    .faq .faq-section ul.inner a {
      padding: 15px 35px 15px 15px;
      width: 100%;
      max-width: 450px; }
      .faq .faq-section ul.inner a:before {
        right: 15px; }
    .faq .faq-section ul.inner .border {
      width: 100%;
      padding: 10px 30px 10px 15px; }
      .faq .faq-section ul.inner .border:before {
        right: 15px; }
    .faq .faq-section ul.inner .card li {
      margin-right: 15px;
      margin-bottom: 10px; }
    .faq .faq-section ul.inner .card img {
      height: 30px; } }
/* =================================
お取り扱い店
================================= */
.shop_list .inner {
  max-width: 800px; }
  .shop_list .inner ul {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    line-height: 2.5;
    border-collapse: collapse;
    border-top: 1px solid #181818;
    border-bottom: 1px solid #181818; }
    .shop_list .inner ul li {
      display: inline-block;
      margin: 0 1.2em;
      font-size: 1em; }
      .shop_list .inner ul li a {
        text-decoration: underline; }
        .shop_list .inner ul li a:hover {
          text-decoration: none; }
  .shop_list .inner.note {
    font-size: .8em;
    margin-top: 1em;
    text-align: center; }
    .shop_list .inner.note p {
      display: inline-block;
      text-align: left; }

/* =================================
会社概要
================================= */
.about table {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  font-size: .9em; }
.about th, .about td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid #83c4c0; }
.about th {
  width: 23%;
  font-weight: bold; }

@media screen and (max-width: 768px) {
  .about th, .about td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0; }
  .about th {
    border: 0;
    padding-bottom: 0; }
  .about td {
    padding-top: 5px; }
  .about tr:first-of-type th {
    padding-top: 0; } }
/* =================================
プライバシーポリシー
================================= */
.privacy .inner {
  text-align: left;
  max-width: 1000px;
  font-size: .85em;
  line-height: 1.5;
  letter-spacing: .1em; }
.privacy .box {
  margin-bottom: 2em; }
  .privacy .box:last-of-type {
    margin-bottom: 0; }
.privacy p {
  margin-bottom: 1em; }
  .privacy p:last-of-type {
    margin-bottom: 0; }
.privacy h3 {
  margin-bottom: .5em;
  letter-spacing: .1em; }
.privacy .red {
  text-decoration: underline;
  display: inline-block;
  color: #e22f59; }
  .privacy .red:hover {
    text-decoration: none; }

/* =================================
お問い合わせ
================================= */
.contact .inner {
  width: 90%;
  max-width: 800px;
  letter-spacing: .1em;
  font-size: 13px; }
  .contact .inner div p {
    line-height: 2.3; }
  .contact .inner a {
    display: inline-block;
    color: #2da0cb; }
  .contact .inner .ui2-btn {
    max-width: 260px;
    margin-top: 37px;
    color: #181818;
    font-family: "Noto Sans CJK JP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; }
    .contact .inner .ui2-btn:hover {
      color: #83c4c0; }
  .contact .inner ul p {
    font-family: "century-gothic", Century Gothic, CenturyGothic, Futura, AppleGothic, sans-serif; }
  .contact .inner > ul > li {
    border-top: solid #181818 1px;
    padding-top: 60px;
    margin-top: 60px; }
    .contact .inner > ul > li:last-of-type {
      margin-bottom: 0; }
  .contact .inner h3 {
    font-size: 16px;
    letter-spacing: .1em;
    margin-bottom: 5px; }
  .contact .inner .tel p {
    font-size: 27px;
    line-height: 1.7;
    letter-spacing: .1em; }
  .contact .inner .tel a {
    color: #181818;
    pointer-events: none; }
  .contact .inner span {
    display: block;
    font-family: "Noto Sans CJK JP", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
    font-size: 13px;
    letter-spacing: .05em; }
  .contact .inner .mail h3 {
    margin-bottom: 12px; }
  .contact .inner .mail p {
    font-size: 20px;
    margin-bottom: 45px;
    letter-spacing: .1em; }
  .contact .inner .mail li {
    text-align: left;
    font-size: .8em;
    line-height: 2;
    padding-left: 1em;
    text-indent: -1em; }

@media print, screen and (max-width: 768px) {
  .contact .inner {
    padding-top: 0; }
    .contact .inner div p {
      text-align: left;
      display: inline-block; }
      .contact .inner div p a {
        display: inline; }
    .contact .inner .ui2-btn {
      margin-top: 25px; }
    .contact .inner > ul > li {
      padding-top: 40px;
      margin-top: 40px; }
      .contact .inner > ul > li h3 {
        line-height: 1; }
    .contact .inner .tel p {
      line-height: 1.5; }
    .contact .inner .tel a {
      pointer-events: inherit; }
    .contact .inner .mail h3 {
      margin-bottom: 5px; }
    .contact .inner .mail p {
      margin-bottom: 30px; } }
/* =================================
shopping（LP）
================================= */
.mainn {
  width: 100%;
  max-width: 600px;
  padding-top: 115px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  position: relative;
  /*アコーディオン共通*/
  /* FAQ */
  /*全成分*/
  /*プランバー 常駐ボタン*/ }
  .mainn:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../images/top/bg.jpg");
    z-index: -1; }
  .mainn img {
    display: block;
    width: 100%;
    height: auto; }
  .mainn a {
    display: block; }
    .mainn a:hover {
      opacity: 0.5;
      transition: all .2s ease-in; }
  .mainn #sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    margin: auto;
    padding: min(15px, 2.5vw) 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    background-color: rgba(0, 0, 0, 0.2); }
  .mainn .relative-wrap, .mainn .relative_wrap {
    position: relative; }
  .mainn video {
    display: block;
    width: 100%;
    margin: 0 auto; }
  .mainn .abs {
    position: absolute;
    backface-visibility: hidden;
    opacity: 0; }
  .mainn .abs_center {
    left: 0;
    right: 0;
    margin: auto; }
  .mainn .opa1 {
    opacity: 1 !important; }
  .mainn .c_btn {
    position: absolute;
    left: 0;
    margin: 0 auto;
    right: 0; }
  .mainn .btn_wrap {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.8em;
    margin: auto; }
    .mainn .btn_wrap a {
      animation: scale 1.5s ease-in-out infinite; }
  .mainn .accordion__container .title {
    cursor: pointer; }
  .mainn .accordion__container .box {
    display: none; }
  .mainn .faq_area {
    margin: 0 auto;
    padding: 5% 0;
    background: #e4f0f7;
    letter-spacing: .05em;
    text-align: left;
    line-height: 1.5;
    font-size: min(3.8vw, 18px); }
  .mainn .faq_area dl {
    margin: 0 auto 3%;
    background: #fff;
    width: 90%;
    border-radius: .5em; }
  .mainn .faq_area dl:last-of-type {
    border: 0;
    margin-bottom: 0; }
  .mainn .faq_area dt {
    position: relative;
    padding: 5% 11% 5% 5%;
    font-weight: bold; }
  .mainn .faq_area dt:before,
  .mainn .faq_area dt:after {
    content: '';
    position: absolute;
    top: 0;
    right: 3%;
    bottom: 0;
    margin: auto;
    width: min(5vw, 25px);
    height: min(0.8vw, 4px);
    background: #eb788b;
    transition: all .2s ease-in;
    border-radius: 10px; }
  .mainn .faq_area dt:before {
    transform: rotate(0deg); }
  .mainn .faq_area dt:after {
    transform: rotate(90deg); }
  .mainn .faq_area dt.close:before {
    transform: rotate(45deg); }
  .mainn .faq_area dt.close:after {
    transform: rotate(-45deg); }
  .mainn .faq_area dd {
    background: #fff;
    padding: 5% 0;
    margin: 0 auto;
    width: 90%;
    border-top: .08em solid #333; }
  .mainn .seibun_area {
    letter-spacing: 0; }
  .mainn .seibun_area dt {
    padding: 1em 3em;
    display: block;
    color: #fff;
    background: #25190d;
    position: relative;
    font-size: min(12px, 3vw); }
  .mainn .seibun_area dt:after {
    content: "";
    position: absolute;
    top: -4px;
    right: 5%;
    bottom: 0;
    width: .5em;
    height: .5em;
    margin: auto;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(135deg);
    transition: all .2s ease-in; }
  .mainn .seibun_area dt.close:after {
    transform: rotate(-45deg);
    top: 0; }
  .mainn .seibun_area dd {
    padding: 3% 5%;
    background: #fff;
    text-align: left;
    font-size: min(3.3vw, 11px);
    line-height: 1.5; }
  .mainn .btn_area {
    display: flex;
    align-items: center;
    justify-content: center; }
  .mainn .btn_area a {
    width: 40%;
    background: #fff;
    padding: 1% 6%;
    margin: 0 1.5%;
    box-sizing: border-box;
    border-radius: 80px; }

@media screen and (max-width: 768px) {
  .mainn {
    max-width: none;
    padding-top: 80px;
    margin-bottom: 0; } }