@charset "UTF-8";



ul,
ol {
  padding: 0;
}


body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}



ul,
ol {
  list-style: none;
}


a:not([class]) {
  text-decoration-skip-ink: auto;
}


img {
  max-width: 100%;
  display: block;
  width: 100%;
}


article>*+* {
  margin-top: 1em;
}


input,
button,
textarea,
select {
  font: inherit;
}


img:not([alt]) {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}

select::-ms-expand {
  display: none;
}


:root {
  /* vies size PC */
  --view-size-md: 1440;
  --view-size-sp: 390;

  /* カラーパレット */
  --color-accent: #f46e6f;
  --color-text: #f09192;
  --color-white: #fff;
  --color-black: #000;
  ;

  /* フォントファミリー */
  --font-family-main: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
  --font-family-sub: YakuHanJP, "Noto Sans JP", sans-serif;

  /* ブレークポイント（メディアクエリで使用） */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* トランジション */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* 行の高さ */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ハーフ・レディング */
  --leading-trim: calc((1em - 1lh) / 2);
}

body {
  font-family: var(--font-family-main);
  letter-spacing: -0.05em;
}

a {
  text-decoration: none;
}



/*======================================================
  utility
======================================================*/

.u-mobile {
  display: none;
}

@media screen and (max-width: 780px) {
  .u-mobile {
    display: block;
  }
}

.u-desktop {
  display: block;
}

@media screen and (max-width: 780px) {
  .u-desktop {
    display: block;
  }
}



/*======================================================
  component
======================================================*/

.c-text {
  font-weight: normal;
  color: var(--color-text);
  line-height: normal;
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  margin-block: var(--leading-trim);
  
}

/* .c-text:not(:first-child) { */
.c-text:not(:first-child) {
  margin-top: 1lh;
}

.c-text--preface {
  line-height: 2;
}

.c-text--feature {
  font-size: 12px;
}

.c-text--center {
  text-align: center;
}

.c-btn {
  border: 1px solid var(--color-text);
  height: 46px;
  width: 265px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text);
  border-radius: 12px;
  position: relative;
  transition: opacity .3s;
  font-weight: normal;
}

.c-btn::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 19px;
  transform: translate(0, -50%);
  width: 22px;
  height: 22px;
  background-image: url(../img/product_btn_open.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.c-btn.is-active::before {
  background-image: url(../img/product_btn_close.png);
}

@media (any-hover: hover) {
  .c-btn:hover {
    opacity: 0.8;
  }
}

.c-btn__text {
  transform: translateX(-9px);
  font-family: var(--font-family-sub);
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .c-text {
    font-size: calc(16/var(--view-size-md)*100vw);
  }

  .c-btn {
    width: calc(265/var(--view-size-md)*100vw);
    height: calc(46/var(--view-size-md)*100vw);
    border-radius: calc(12/var(--view-size-md)*100vw);
    font-size: calc(14/var(--view-size-md)*100vw);
  }

  .c-text--feature {
    font-size: calc(12/var(--view-size-md)*100vw);
  }

  .c-btn::before {
    width: calc(22/var(--view-size-md)*100vw);
    height: calc(22/var(--view-size-md)*100vw);
    right: calc(19/var(--view-size-md)*100vw);
  }

  .c-btn__text {
    transform: translateX(calc(-9/var(--view-size-md)*100vw));
  }
}



/*======================================================
  layout
======================================================*/

.l-main {
  display: grid;
  grid-template-columns: 765fr 390fr 285fr;
}

.l-main__center {
  max-width: 390px;
  margin-left: auto;
  margin-right: auto; 
  position: relative;
  height: 100%;
}

.l-main__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(../img/main_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.l-main__bg img {
  height: 100%;
  object-fit: cover;
}

.l-section {
  margin-top: 79px;
}

.l-section-bg {
  position: relative;
}

.l-section-bg::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  opacity: .6;
  z-index: -1;
  border-radius: 50px;
}

@media screen and (max-width: 780px) {
  .l-main {
    grid-template-columns: 1fr;
  }

  .l-main__left {
    display: none;
  }

  .l-main__right {
    display: none;
  }
}




@media screen and (min-width: 781px) and (max-width: 1440px) {

  .l-main__center {
    max-width: calc(390/var(--view-size-md)*100vw);
  }

  .l-section {
    margin-top: calc(79/var(--view-size-md)*100vw);
  }

  .l-section-bg::before {
    border-radius: calc(50/var(--view-size-md)*100vw);
  }


}

/*======================================================
  bg
======================================================*/
.p-bg {
  height: 100%;
}

.p-bg__images {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.p-bg__images img {
  position: absolute;
  /* content: ""; */
} 

.p-bg__logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 375px;
}

.p-bg__bubble01 {
  top: calc(50% - 220px);
  right: calc(50% - 273px);
  width: 138px;
  animation-name: bubble01;
  animation-duration: 2s;
  animation-iteration-count:infinite;
}

@keyframes bubble01{
  0%,100%{
    top: calc(50% - 220px);
    right: calc(50% - 273px);
    transform: rotate(0deg);
  }
  
  50%{
    top: calc(50% - 225px);
    right: calc(50% - 278px);
    transform: rotate(10deg);
  }
}



.p-bg__bubble02 {
  width: 65px;
  bottom: calc(50% - 193px);
  left: calc(50% - 193px);
  animation-name: bubble02; 
  animation-duration: 4s;
  animation-iteration-count:infinite;
}

@keyframes bubble02{
 0%,100%{
  bottom: calc(50% - 193px);
  left: calc(50% - 193px);
 }
  50%{
    bottom: calc(50% - 203px);
    left: calc(50% - 183px);
  }
}

.p-bg__footprint {
  width: 117px;
  bottom: 20px;
  left: 18px;
}

.p-bg__hand {
  width: 126px;
  bottom: 0;
  right: 67px;
  animation-name: hand;
  animation-duration: 4s;
  animation-iteration-count:infinite;
}

@keyframes hand {
  0% , 100%{
      transform: rotate(0deg);
  }
  50%{
      transform: rotate(-30deg);
  }
}

.p-bg__hand02 {
  width: 64px;
  top: 0;
  left: 81px;
  animation-name: hand02;
  animation-duration: 4s;
  animation-iteration-count:infinite;
}

@keyframes hand02 {
  0% , 100%{
      transform: rotate(0deg);
  }

  50%{
      transform: rotate(30deg);
  }
}

@media screen and (min-width: 781px) and (max-width: 1440px) {
 
  
  .p-bg__logo {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(375/var(--view-size-md)*100vw);
  }
  
  .p-bg__bubble01 {
    width: calc(138/var(--view-size-md)*100vw);
    top: calc(50% - 220/var(--view-size-md)*100vw);
    right: calc(50% - 273/var(--view-size-md)*100vw);
  }
  
  .p-bg__bubble02 {
    width: calc(65/var(--view-size-md)*100vw);
    bottom: calc(50% - 193/var(--view-size-md)*100vw);
    left: calc(50% - 193/var(--view-size-md)*100vw);
  }
  
    .p-bg__footprint {
        width: calc(117/var(--view-size-md)*100vw);
        left: calc(18/var(--view-size-md)*100vw);
        bottom: calc(20/var(--view-size-md)*100vw);
  }
  
  .p-bg__hand {
    width: calc(126/var(--view-size-md)*100vw);
    right: calc(67/var(--view-size-md)*100vw);
  }
  
  .p-bg__hand02 {
    width: calc(64/var(--view-size-md)*100vw);
    left: calc(81/var(--view-size-md)*100vw);
  }

  @keyframes bubble01{
    0%,100%{
      top: calc(50% - 220/var(--view-size-md)*100vw);
      right: calc(50% - 273/var(--view-size-md)*100vw);
      transform: rotate(0deg);
    }
    
    50%{
      top: calc(50% - 225/var(--view-size-md)*100vw);
      right: calc(50% - 278/var(--view-size-md)*100vw);
      transform: rotate(10deg);
    }
  }

  @keyframes bubble02{
    0%,100%{
     bottom: calc(50% - 193/var(--view-size-md)*100vw);
     left: calc(50% - 193/var(--view-size-md)*100vw);
    }
     50%{
       bottom: calc(50% - 203/var(--view-size-md)*100vw);
       left: calc(50% - 183/var(--view-size-md)*100vw);
     }
   }
}

/*======================================================
  nav
======================================================*/

.p-nav {
  position: sticky;
  top: 163px;
  padding-left: 63px;
}

.p-nav__list {
  
  width: fit-content;
}

.p-nav__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  padding-top: 18px;
  padding-bottom: 18px;
  width: fit-content;
  color: var(--color-accent);
  font-weight: 500;
}

.p-nav__link::before {
  position: absolute;
  content: "";
  top: calc(-50% + 12px);
  left: 0;
  width: 1px;
  height: calc(100% - 24px);
  background-color: #f7c2c2;
}

.p-nav__item:first-child .p-nav__link::before {
  display: none;
}


.p-nav__link::after {
  position: absolute;
  content: "";
  top: 50%;
  left: -5px;
  transform: translate(0, -50%);
  width: 11px;
  height: 11px;
  background-image: url(../img/icon_nikukyu.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all var(--transition-normal);
}

@media (any-hover: hover) {
  .p-nav__link:hover::after {
    transform: translate(0, -50%) scale(1.45);
    background-image: url(../img/icon_nikukyu_on.png);

  } 
}

@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-nav {
    top: calc(163/var(--view-size-md)*100vw);
    padding-left: calc(63/var(--view-size-md)*100vw);
  }

  .p-nav__link {
    padding: calc(10/var(--view-size-md)*100vw);
  padding-left: calc(24/var(--view-size-md)*100vw);
  font-size: calc(14/var(--view-size-md)*100vw);
  padding-top: calc(18/var(--view-size-md)*100vw);
  padding-bottom: calc(18/var(--view-size-md)*100vw);
  }

  .p-nav__link::before {
    top: calc(-50% + 12/var(--view-size-md)*100vw);
    height: calc(100% - 24/var(--view-size-md)*100vw);
  }

  .p-nav__item:last-child .p-nav__link::before {
    /* height: calc(100% -10/var(--view-size-md)*100vw); */
  }

  .p-nav__link::after {
    width: calc(11/var(--view-size-md)*100vw);
    height: calc(11/var(--view-size-md)*100vw);
    left: calc(-5/var(--view-size-md)*100vw);

  }
}

/*======================================================
  header
======================================================*/

.p-header {
  position: fixed;
  top: 0;
  left: calc(50% + 127px);
  width: fit-content;
  height: fit-content;
  z-index: 100;
}

.p-header__inner {
  position: relative;
}

.p-header__open {
  width: 45px;
  height: 45px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 22px;

}

.p-header__content {
  position: fixed;
  top: 0;
  left: calc(50% - 178px);
  /* transform: translate(-50%, 0); */
  width: 373px;
  height: 100%;
  background-image: url(../img/sp_menu_bg.png);
  background-size: contain  ;
  background-position: top;
  background-repeat: no-repeat;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.p-header__content.is-open {
  opacity: 1;
  visibility: visible;
}

.p-header__close {
  width: 31px;
  height: 31px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  margin-top: 29px;
  margin-right: 30px;
}

.p-header__close img {
  width: 100%;
  height: 100%;
}

.p-header__nav {
  width: 100%;
  margin-top: 24px;
}

.p-header__item {
  width: fit-content;
}

.p-header__list {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


.p-header__link {
  color: var(--color-white);
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: block;
  transition: opacity 0.3s ease;
  width: fit-content;
}

.p-header__item:first-child .p-header__link {
  padding-top: 0;
}

.p-header__item:last-child .p-header__link {
  padding-bottom: 0;
}

.p-header__purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 40px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-white);
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 500;
  margin-top: 60px;
}





/*======================================================
  main contents
======================================================*/


.p-kv {}

.p-kv__inner {
  position: relative;
  padding-bottom: 56px;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-kv__inner {
    padding-bottom: calc(56/var(--view-size-md)*100vw);
  }
}

.p-kv__img {}

.p-kv__logo {
  position: absolute;
  top: 168px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: 340px;
}


/* @media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-kv__logo {
    max-width: calc(340/var(--view-size-md)*100vw);
  }
} */



.p-kv__logo img {
  width: 100%;
}

.p-kv__add {
  position: absolute;
  content: "";
  bottom: 0;
  right: 25px;
  width: 189px;
  margin-left: auto;
}




@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-kv__logo {
    max-width: calc(340/var(--view-size-md)*100vw);
    top: calc(168/var(--view-size-md)*100vw);
  }

  .p-kv__add {
    width: calc(189/var(--view-size-md)*100vw);
    right: calc(25/var(--view-size-md)*100vw);
  }
}

.p-story {
  margin-top: 8px;
}

.p-story__inner {}

.p-story__content {
  position: relative;
  padding-top: 77px;
  padding-bottom: 61px;
  padding-left: 30px;
}

.p-story__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/story_bg.png);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  height: 100%;
  width: 370px;
  z-index: -1;
}

.p-story__content::after {
  position: absolute;
  content: "";
  top: 111px;
  right: 45px;
  background-image: url(../img/story_illust01.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 146px;
  width: 71px;
  z-index: -1;
}


.p-story__preface {}

.p-story__btn {
  margin-top: 47px;
}

.p-story__images {
  position: relative;
}

.p-story__images::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 21px;
  width: 64px;
  height: 69px;
  background-image: url(../img/story_illust02.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 5;
}

.p-story__image {
  position: relative;
}

.p-story__image:nth-child(1) {
  width: 186px;
  margin-left: auto;
  z-index: 2;
  margin-top: -35px;
  /* margin-top: -50px; */
}

.p-story__image:nth-child(2) {
  width: 330px;
  margin-top: -35px;
}




@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-story {
    margin-top: calc(8/var(--view-size-md)*100vw);
  }

  .p-story__content {
    padding-top: calc(77/var(--view-size-md)*100vw);
    padding-bottom: calc(61/var(--view-size-md)*100vw);
    padding-left: calc(30/var(--view-size-md)*100vw);
    width: calc(370/var(--view-size-md)*100vw);
  }

  .p-story__content::before {
    width: calc(370/var(--view-size-md)*100vw);
  }

  .p-story__content::after {
    width: calc(71/var(--view-size-md)*100vw);
    height: calc(146/var(--view-size-md)*100vw);
    right: calc(45/var(--view-size-md)*100vw);
    top: calc(111/var(--view-size-md)*100vw);
  }

  .p-story__btn {
    margin-top: calc(47/var(--view-size-md)*100vw);
  }

  .p-story__images::before {
    width: calc(64/var(--view-size-md)*100vw);
    height: calc(69/var(--view-size-md)*100vw);
    top: calc(80/var(--view-size-md)*100vw);
    left: calc(21/var(--view-size-md)*100vw);
  }

  .p-story__image:nth-child(1) {
    width: calc(186/var(--view-size-md)*100vw);
    margin-top: calc(-35/var(--view-size-md)*100vw);
  }

  .p-story__image:nth-child(2) {
    width: calc(330/var(--view-size-md)*100vw);
    margin-top: calc(-35/var(--view-size-md)*100vw);
  }

  .p-story__image:nth-child(1) {
    width: calc(186/var(--view-size-md)*100vw);
    margin-top: calc(-35/var(--view-size-md)*100vw);
  }
}

/* modal */
.p-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-modal.is-active {
  visibility: visible;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.16);
}

.p-modal__inner {
  background-color: var(--color-white);
  border-radius: 30px;
  padding: 52px 18px 36px;
  width: 331px;
  margin: 0 auto;
  max-height: 80dvh;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--color-text);
}

.p-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 17px;
  height: 17px;
}

.p-modal__btn {
  width: inherit;
  height: inherit;
}

.p-modal__title {
  width: 98px;
  margin-left: auto;
  margin-right: auto;
}

.p-modal__text {
  margin-top: 35px;
}

.p-modal__text .c-text {
  line-height: 1.75;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-modal__inner {
    width: calc(331/var(--view-size-md)*100vw);
    border-radius: calc(30/var(--view-size-md)*100vw);
    padding: calc(52/var(--view-size-md)*100vw) calc(18/var(--view-size-md)*100vw) calc(36/var(--view-size-md)*100vw);
  }

  .p-modal__close {
    width: calc(17/var(--view-size-md)*100vw);
    height: calc(17/var(--view-size-md)*100vw);
    top: calc(18/var(--view-size-md)*100vw);
    right: calc(18/var(--view-size-md)*100vw);
  }

  .p-modal__title {
    width: calc(98/var(--view-size-md)*100vw);
  }

  .p-modal__text {
    margin-top: calc(35/var(--view-size-md)*100vw);
  }
}


.p-feature {
  margin-top: 127px;
}

.p-feature__inner {
  padding-inline: 30px;
  padding-bottom: 75px;
  padding-top: 78px;
}

.p-feature__title {
  width: 256px;
  margin-left: auto;
  margin-right: auto;
}

.p-feature__content {
  margin-top: 81px;
}

.p-feature__item:not(:first-child) {
  margin-top: 85px;
}

.p-feature__head {
  display: grid;
  grid-template-columns: auto 49px;
  align-items: center;
}

.p-feature__sub {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  font-family: var(--font-family-main);
}

.p-feature__number {}

.p-feature__image {
  margin-left: -30px;
  width: 100%;
  margin-top: 25px;
}

.p-feature__item:nth-child(even) .p-feature__image {
  margin-left: auto;
}

.p-feature__material {
  width: 270px;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
}

.p-feature__comment {
  margin-top: 33px;
}

.p-feature__text {
  margin-top: 20px;
}

.p-feature__add {
  margin-top: 25px;
}

.p-feature__info {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  margin-top: 13px;
}

.p-feature__info::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -37px;
  width: 45px;
  height: 1px;
  background-color: var(--color-text);
  transform: rotate(-45deg);
}

.p-feature__info::after {
  content: "";
  position: absolute;
  bottom: 14px;
  right: -37px;
  width: 45px;
  height: 1px;
  background-color: var(--color-text);
  transform: rotate(-45deg);
}

.p-feature__h4 {
  font-size: 16px;
  color: var(--color-text);
  font-weight: normal;
  font-family: var(--font-family-main);
  line-height: 1.56;
}

.p-feature__block {
  margin-top: 58px;
  background-color: var(--color-white);
  border-radius: 23px;
  padding: 27px 20px 54px;
}

.p-feature__detail {
  margin-top: 24px;
  font-size: 16px;
  color: var(--color-text);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.8px;
}

.p-feature__name {
  padding: 0 10px;
  padding-bottom: 10px;
  position: relative;
  width: fit-content;
  color: var(--color-text);
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

.p-feature__name::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
}

.p-feature__icon {
  margin-top: 28px;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
}




@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-feature {
    margin-top: calc(127/var(--view-size-md)*100vw);
  }

  .p-feature__inner {
    padding-inline: calc(30/var(--view-size-md)*100vw);
    padding-bottom: calc(75/var(--view-size-md)*100vw);
    padding-top: calc(78/var(--view-size-md)*100vw);
  }

  .p-feature__title {
    width: calc(256/var(--view-size-md)*100vw);
  }

  .p-feature__content {
    margin-top: calc(81/var(--view-size-md)*100vw);
  }

  .p-feature__item:not(:first-child) {
    margin-top: calc(85/var(--view-size-md)*100vw);
  }

  .p-feature__head {
    grid-template-columns: auto calc(49/var(--view-size-md)*100vw);
  }

  .p-feature__sub {
    font-size: calc(24/var(--view-size-md)*100vw);
  }

  .p-feature__number {
    width: calc(49/var(--view-size-md)*100vw);
    height: calc(49/var(--view-size-md)*100vw);
  }

  .p-feature__image {
    margin-left: calc(-30/var(--view-size-md)*100vw);
    width: calc(100% + calc(30/var(--view-size-md)*100vw));
    margin-top: calc(25/var(--view-size-md)*100vw);
  }

  .p-feature__material {
    width: calc(270/var(--view-size-md)*100vw);
    margin-top: calc(35/var(--view-size-md)*100vw);
  }

  .p-feature__comment {
    margin-top: calc(33/var(--view-size-md)*100vw);
  }

  .p-feature__text {
    margin-top: calc(20/var(--view-size-md)*100vw);
  }

  .p-feature__add {
    margin-top: calc(25/var(--view-size-md)*100vw);
  }

  .p-feature__info {
    margin-top: calc(13/var(--view-size-md)*100vw);
  }

  .p-feature__info::before {
    top: calc(14/var(--view-size-md)*100vw);
    left: calc(-37/var(--view-size-md)*100vw);
    width: calc(45/var(--view-size-md)*100vw);
  }

  .p-feature__info::after {
    bottom: calc(14/var(--view-size-md)*100vw);
    right: calc(-37/var(--view-size-md)*100vw);
    width: calc(45/var(--view-size-md)*100vw);
  }


  .p-feature__h4 {
    font-size: calc(16/var(--view-size-md)*100vw);
  }

  .p-feature__block {
    margin-top: calc(58/var(--view-size-md)*100vw);
    border-radius: calc(23/var(--view-size-md)*100vw);
    padding: calc(27/var(--view-size-md)*100vw) calc(20/var(--view-size-md)*100vw) calc(54/var(--view-size-md)*100vw);
  }

  .p-feature__detail {
    margin-top: calc(24/var(--view-size-md)*100vw);
    font-size: calc(16/var(--view-size-md)*100vw);
  }

  .p-feature__name {
    padding: 0 calc(10/var(--view-size-md)*100vw);
    padding-bottom: calc(10/var(--view-size-md)*100vw);
    margin-bottom: calc(12/var(--view-size-md)*100vw);
  }

  .p-feature__icon {
    margin-top: calc(28/var(--view-size-md)*100vw);
    width: calc(120/var(--view-size-md)*100vw);
  }

  .p-feature__item:nth-child(even) .p-feature__image {
    margin-left: calc(-30/var(--view-size-md)*100vw);
    width: calc(100% + calc(30/var(--view-size-md)*100vw));
    margin-top: calc(25/var(--view-size-md)*100vw);
  }
}

.p-container__inner {
  padding-top: 74px;
  padding-bottom: 80px;
}

.p-container__title {
  width: 140px;
  margin-left: auto;
  margin-right: auto;
}

.p-container__image {
  width: 360px;
  margin-top: 65px;
  margin-left: auto;
}

.p-container__content {
  margin-top: 30px;
}

.p-container__item {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}

.p-container__item:nth-child(1) {
  padding-top: 57px;
  padding-bottom: 45px;
}

.p-container__item:nth-child(2) {
  padding-top: 61px;
  padding-bottom: 93px;
  margin-top: -30px;
}

.p-container__item:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../img/container_bg.png);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  height: 100%;
  width: 372px;
  z-index: -1;
}

.p-container__item:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/container_idea_bg.png);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  height: 100%;
  width: 370px;
  z-index: -1;
}

.p-container__item:nth-child(2)::after {
  content: "";
  position: absolute;
  bottom: 26px;
  left: 0;
  background-image: url(../img/container_illust.png);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  height: 66px;
  width: 131px;
  z-index: -1;
}


.p-container__name {
  font-size: 22px;
  color: var(--color-text);
  font-weight: 500;
  font-family: var(--font-family-main);
}

.p-container__name--height {
  line-height: 1.82;
}

.p-container__item:nth-child(1) .p-container__name {
  text-align: right;
}

.p-container__text {
  margin-top: 20px;
  text-align: right;
}

.p-container__icon {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 44px;
}

.p-container__box {
  margin-top: 43px;
  padding-left: 10px;
  padding-right: 10px;
}

.p-container__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: fit-content;
}

.p-container__row:nth-child(even) {
  flex-direction: row-reverse;
  margin-left: auto;
}

.p-container__picture--1 {
  width: 136px;
}

.p-container__picture--2 {
  width: 144px;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-container__inner {
    padding-top: calc(74/var(--view-size-md)*100vw);
    padding-bottom: calc(80/var(--view-size-md)*100vw);
  }

  .p-container__item:nth-child(1)::before {
    width: calc(372/var(--view-size-md)*100vw);
  }

  .p-container__item:nth-child(2)::before {
    width: calc(370/var(--view-size-md)*100vw);
  }
  
  .p-container__title {
      width: calc(140/var(--view-size-md)*100vw);
  }
  
  .p-container__image {
    width: calc(360/var(--view-size-md)*100vw);
    margin-top: calc(65/var(--view-size-md)*100vw);
  } 
  
  .p-container__content {
    margin-top: calc(30/var(--view-size-md)*100vw);
  }
  
  .p-container__item {
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
  }
  
  .p-container__item:nth-child(1) {
    padding-top: calc(57/var(--view-size-md)*100vw);
    padding-bottom: calc(45/var(--view-size-md)*100vw);
  }
  
  .p-container__item:nth-child(2) {
    padding-top: calc(61/var(--view-size-md)*100vw);
    padding-bottom: calc(93/var(--view-size-md)*100vw);
    margin-top: calc(-30/var(--view-size-md)*100vw);
  }

  .p-container__item:nth-child(2)::after {
    bottom: calc(26/var(--view-size-md)*100vw);
    height: calc(66/var(--view-size-md)*100vw);
    width: calc(131/var(--view-size-md)*100vw);
  }
  
  
  .p-container__name {
    font-size: calc(22/var(--view-size-md)*100vw);
  }
  
  .p-container__text {
    margin-top: calc(20/var(--view-size-md)*100vw);
  }
  
  .p-container__icon {
    width: calc(250/var(--view-size-md)*100vw);
    margin-top: calc(44/var(--view-size-md)*100vw);
  }
  
  .p-container__box {
    margin-top: calc(43/var(--view-size-md)*100vw);
    padding-left: calc(10/var(--view-size-md)*100vw);
    padding-right: calc(10/var(--view-size-md)*100vw);
  }
  
  .p-container__row {
    gap: calc(18/var(--view-size-md)*100vw);
  }
  

  .p-container__picture--1 {
    width: calc(136/var(--view-size-md)*100vw);
  }
  
  .p-container__picture--2 {
    width: calc(144/var(--view-size-md)*100vw);
  }
}

.p-usage {

}

.p-usage__inner {
  padding-top: 74px;
  padding-bottom: 70px;
}

.p-usage__title {
  width: 98px;
  margin-left: auto;
  margin-right: auto;
}

.p-usage__content {
  margin-top: 64px;
  
}

.p-usage__text {
  padding-left: 30px;
  padding-right: 30px;
}

.p-usage__image {
  width: 360px;
  margin-top: 30px;
}

.p-usage__amount {
  width: 270px;
  margin-top: -30px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(7px);
}



@media screen and (min-width: 781px) and (max-width: 1440px){
  .p-usage__inner {
    padding-top: calc(74/var(--view-size-md)*100vw);
    padding-bottom: calc(70/var(--view-size-md)*100vw);
  }

  .p-usage__title {
    width: calc(98/var(--view-size-md)*100vw);
  }

  .p-usage__content {
    margin-top: calc(64/var(--view-size-md)*100vw);
  }

  .p-usage__text {
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
  }

  .p-usage__image {
    width: calc(360/var(--view-size-md)*100vw);
    margin-top: calc(30/var(--view-size-md)*100vw);
  }
  
  .p-usage__amount {
    width: calc(270/var(--view-size-md)*100vw);
    margin-top: calc(-30/var(--view-size-md)*100vw);
    transform: translateX(calc(7/var(--view-size-md)*100vw));
  }
}

.p-product__inner {
  padding-top: 76px;
  padding-bottom: 62px;
}

.p-product__title {
  width: 97px;
  margin-left: auto;
  margin-right: auto;
}

.p-product__content {
  margin-top: 77px;
  position: relative;
  padding-bottom: 38px;
}

.p-product__content::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  background-image: url(../img/product_bg.png);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  height: 100%;
  width: 377px;
  z-index: -1;
}

.p-product__image {
  width: 296px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
}


.p-product__info {

}

.p-product__name {
  width: 296px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 38px;
  color: var(--color-text);
  font-size: 22px;
  font-weight: 500;
}

.p-product__detail {
  width: 296px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-product__amount {
  width: 82px;
  height: 83px;
  border-radius: 1000px;
  border: 1px solid var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-product__faq {
  margin-top: 70px;
  padding-left: 30px;
  padding-right: 30px;
  display: grid;
  gap: 45px;
}

.p-product__item {
  
}

.p-product__question {
  font-size: 16px;
  color: var(--color-text);
  font-weight: normal;
  font-family: var(--font-family-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
  cursor: pointer;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 10px;
}

.p-product__question::-webkit-details-marker {
  display: none;
}

.p-product__btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-product__icon {
  font-weight: 400;
}

.p-product__open {
  width: 22px;
  height: 22px;
}

.p-product__close {
  width: 22px;
  height: 22px;
}

.p-product__answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-product__answer.is-open {
  grid-template-rows: 1fr;
}

.p-product__answerBox {
  overflow: hidden;
  min-height: 0;
}


.p-product__textarea {
  padding-top: 18px;
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.5s ease-out;
  
}

.p-product__textarea.is-open {
  transition: all 0.5s ease-in;
 
}

.p-product__close {
  display: none;
}

.p-product__question.is-active .p-product__open {
  display: none;
}

.p-product__question.is-active .p-product__close {
  display: block;
}




@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-product__inner {
    padding-top: calc(76/var(--view-size-md)*100vw);
    padding-bottom: calc(62/var(--view-size-md)*100vw);
  }
  
  .p-product__title {
    width: calc(97/var(--view-size-md)*100vw);
  }
  
  .p-product__content {
    margin-top: calc(77/var(--view-size-md)*100vw);
    padding-bottom: calc(38/var(--view-size-md)*100vw);
  }
  
  .p-product__content::before {
    width: calc(377/var(--view-size-md)*100vw);
    top: calc(15/var(--view-size-md)*100vw);
  }
  
  .p-product__image {
    width: calc(296/var(--view-size-md)*100vw);
    margin-top: calc(-30/var(--view-size-md)*100vw);
  }
  
  .p-product__name {
    width: calc(296/var(--view-size-md)*100vw);
    margin-top: calc(38/var(--view-size-md)*100vw);
    font-size: calc(22/var(--view-size-md)*100vw);
  }
  
  .p-product__detail {
    width: calc(296/var(--view-size-md)*100vw);
    margin-top: calc(20/var(--view-size-md)*100vw);
  }
  
  .p-product__amount {
    width: calc(82/var(--view-size-md)*100vw);
    height: calc(83/var(--view-size-md)*100vw);
  }
  
  .p-product__faq {
    margin-top: calc(70/var(--view-size-md)*100vw);
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
    gap: calc(45/var(--view-size-md)*100vw);
  }

  .p-product__question {
    font-size: calc(16/var(--view-size-md)*100vw);
    padding-bottom: calc(10/var(--view-size-md)*100vw);
  }
  
  .p-product__open {
    width: calc(22/var(--view-size-md)*100vw);
    height: calc(22/var(--view-size-md)*100vw);
  }
  
  .p-product__close {
    width: calc(22/var(--view-size-md)*100vw);
    height: calc(22/var(--view-size-md)*100vw);
  }
  
  
  .p-product__textarea {
    padding-top: calc(18/var(--view-size-md)*100vw);
    font-size: calc(14/var(--view-size-md)*100vw);
  }
}


.p-about {

}

.p-about__inner {
  padding-top: 79px;
  padding-bottom: 72px;
}

.p-about__title {
  width: 266px;
  margin-left: auto;
  margin-right: auto;
}

.p-about__content {
  margin-top: 60px;
  position: relative;
  padding-top: 26px;
}

.p-about__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/about_bg.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.p-about__image {
  width: 330px;
  margin-left: auto;
  margin-right: auto;
}

.p-about__detail {
  padding-left: 30px;
  padding-right: 30px;
}

.p-about__name {
  margin-block: var(--leading-trim);
  line-height: 1.75;
  color: var(--color-text);
  font-size: 22px;
  font-weight: 500;
}

.p-about__text {
  margin-top: 28px;
}

.p-about__other {
  margin-top: 58px;
  padding-left: 30px;
  padding-right: 30px;
}

.p-about__links {
  display: grid;
  gap: 17px;
}

.p-about__link {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.p-about__careful {
  font-size: 14px;
  margin-top: 27px;
  color: var(--color-text);
  letter-spacing: 0;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-about__inner {
    padding-top: calc(79/var(--view-size-md)*100vw);
    padding-bottom: calc(72/var(--view-size-md)*100vw);
  }
  .p-about__title {
    width: calc(266/var(--view-size-md)*100vw);
  }

  .p-about__content {
    margin-top: calc(60/var(--view-size-md)*100vw);
    padding-top: calc(26/var(--view-size-md)*100vw);
  }
  .p-about__image {
    width: calc(330/var(--view-size-md)*100vw);
  }

  .p-about__detail {
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
  }
  
  .p-about__name {
    font-size: calc(22/var(--view-size-md)*100vw);
  }
  
  .p-about__text {
    margin-top: calc(28/var(--view-size-md)*100vw);
  } 
  
  .p-about__other {
    margin-top: calc(58/var(--view-size-md)*100vw);
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
  }
  
  .p-about__links {
    gap: calc(17/var(--view-size-md)*100vw);
  }
  
  .p-about__careful {
    margin-top: calc(27/var(--view-size-md)*100vw);
    font-size: calc(14/var(--view-size-md)*100vw);
  }
}

.p-forcats__inner {
  padding-top: 70px;
  padding-bottom: 79px;
}

.p-forcats__title {
  width: 234px;
  margin-left: auto;
  margin-right: auto;
}

.p-forcats__content {
  margin-top: 60px;
}

.p-forcats__image {
  width: 360px;
  margin-left: auto;
}

.p-forcats__detail {
  margin-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}

.p-forcats__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  color: var(--color-text);
  height: 60px;
  border: 1px solid var(--color-text);
  border-radius: 12px;
  margin-top: 32px;
  position: relative;
  transition: opacity 0.3s ease;
  background-color: var(--color-white);
  font-family: var(--font-family-sub);
  font-weight: normal;
}

@media (any-hover: hover) {
  .p-forcats__more:hover {
    opacity: 0.8;
  }
}


.p-forcats__more::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 12px;
  height: 23px;
  background-image: url(../img/forcats_bt.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-forcats__inner {
    padding-top: calc(70/var(--view-size-md)*100vw);
    padding-bottom: calc(79/var(--view-size-md)*100vw);
  }

  .p-forcats__title {
    width: calc(234/var(--view-size-md)*100vw);
  }

  .p-forcats__image {
    width: calc(360/var(--view-size-md)*100vw);
  }

  .p-forcats__content {
    margin-top: calc(60/var(--view-size-md)*100vw);
  }
  
  .p-forcats__detail {
    margin-top: calc(30/var(--view-size-md)*100vw);
    padding-left: calc(30/var(--view-size-md)*100vw);
    padding-right: calc(30/var(--view-size-md)*100vw);
  }

  .p-forcats__more {
    border-radius: calc(12/var(--view-size-md)*100vw);
    height: calc(60/var(--view-size-md)*100vw);
    font-size: calc(14/var(--view-size-md)*100vw);
    margin-top: calc(32/var(--view-size-md)*100vw);
    width: calc(330/var(--view-size-md)*100vw);
  }

  .p-forcats__more::before {
    right: calc(28/var(--view-size-md)*100vw);
    width: calc(12/var(--view-size-md)*100vw);
    height: calc(23/var(--view-size-md)*100vw);
  } 
}

.p-footer__inner {
  padding-top: 106px;
}

.p-footer__content {
  position: relative;
  z-index: 1;
}

.p-footer__content::before {
  position: absolute;
  content: "";
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/footer_bg.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 100%;
  width: 95%;
  z-index: -1;
}
.p-footer__image {
  width: 142px;
  margin-left: auto;
  margin-right: auto;
}

.p-footer__text {
  font-size: 22px;
  color: var(--color-text);
  margin-top: 20px;
  font-weight: 500;
  text-align: center;
}

.p-footer__back {
  position: relative;
  margin-top: 63px;
}

.p-footer__anchor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 184px;
  height: 45px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/footer_top_bt.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  font-size: 14px;
  font-weight: 500;
  padding-top: 7px;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .p-footer__anchor:hover {
    opacity: 0.8;
  }
}

.p-footer__copy {
  background-color: var(--color-text);
  width: 100%;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--color-white);
  font-family: var(--font-family-sub);
  letter-spacing: normal;
}



@media screen and (min-width: 781px) and (max-width: 1440px) {
  .p-footer__inner {
    padding-top: calc(106/var(--view-size-md)*100vw);
  }

  .p-footer__content::before {
    bottom: calc(10/var(--view-size-md)*100vw);
  }

  .p-footer__image {
    width: calc(142/var(--view-size-md)*100vw);
  }
  
  .p-footer__text {
    font-size: calc(22/var(--view-size-md)*100vw);
    margin-top: calc(20/var(--view-size-md)*100vw);
  }
  
  .p-footer__back {
    margin-top: calc(63/var(--view-size-md)*100vw);
  }
  
  .p-footer__anchor {
    width: calc(184/var(--view-size-md)*100vw);
    height: calc(45/var(--view-size-md)*100vw);
    font-size: calc(14/var(--view-size-md)*100vw);
    padding-top: calc(7/var(--view-size-md)*100vw);
  }
  
  .p-footer__copy {
    font-size: calc(12/var(--view-size-md)*100vw);
    min-height: calc(55/var(--view-size-md)*100vw);
  }
}