@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 4;

}



:root {

  --font_regular: "ryo-gothic-plusn", sans-serif;

  --font_eng: "Noto Sans JP", sans-serif;

  --font_ttl: "imaginaryfriend-bb", sans-serif;

  --color_regular: #121212;

  --color_01: #D6808A;

  --color_02: #FFFCFE;

  --color_03: #E9C5DA;

  --color_04: #4B4B4B;

  --staff_01_bg: #FAEFE8;

  --staff_02_bg: #F3F0F7;

  --staff_03_bg: #F7F3E5;

  --staff_04_bg: #ECEEF4;

  --staff_05_bg: #E6F0EB;

  --staff_01: #D5AF9E;

  --staff_02: #BDB1CB;

  --staff_03: #CBC3A4;

  --staff_04: #A8B0C3;

  --staff_05: #ACC6B9;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .1em;

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1.1rem;

}



.LP_page_inner {

  padding-bottom: 6rem;

  background: #fff;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .2s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .4s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .6s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .8s;

}



.LP_page .activeDelay.delay5 {

  transition-delay: 1s;

}



.LP_page .activeDelay.delay6 {

  transition-delay: 1.2s;

}



.LP_page .activeDelay.delay7 {

  transition-delay: 1.4s;

}



.LP_page .activeDelay.delay8 {

  transition-delay: 1.6s;

}



.LP_page .activeDelay.delay9 {

  transition-delay: 1.8s;

}



.LP_page .activeDelay.delay10 {

  transition-delay: 2s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

}

/*----------------------------all*/



/*beginning----------------------*/

.beginning_area {

  padding-bottom: 5.5rem;

}



.beginning_area .mv {

  margin-bottom: 3rem;

}



.beginning_area .main_lead {

  font-size: 1.7rem;

  line-height: 2.2;

  letter-spacing: .18em;

  text-align: center;

  font-feature-settings: "palt";

}

/*----------------------beginning*/



/*campaign-----------------------*/

.campaign_area {

  padding-top: 1rem;

}



.campaign_area .campaign_ttl {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 33rem;

  height: 4.5rem;

  margin: 0 auto -2.2rem;

  background: var(--color_01);

  font-size: 2rem;

  font-weight: 700;

  letter-spacing: .2em;

  color: #fff;

}



.campaign_area .area_inner > div {

  width: 57rem;

  margin: 0 auto;

  padding: 5rem 1.5rem 2rem;

  border: solid var(--color_04) .15rem;

  background: var(--color_02);

}



.campaign_period {

  margin-bottom: 2rem;

  font-family: var(--font_eng);

  font-weight: 600;

  font-size: 1.6rem;

  letter-spacing: .05em;

  text-align: center;

}



.campaign_period span {

  letter-spacing: .05em;

}



.campaign_period .txt_L {

  margin-right: .5rem;

  font-size: 2.6rem;

  vertical-align: -.2rem;

}



.campaign_period .txt_S {

  position: relative;

  padding-right: 1.5rem;

  font-size: 1.5rem;

  vertical-align: .5rem;

}



.campaign_period .hyphen {

  position: relative;

  padding-left: 3.5rem;

}



.campaign_period .hyphen::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 1.3rem;

  height: .15rem;

  margin: .3rem 0 0 .8rem;

  background: var(--color_regular);

  content: "";

}



.campaign_period .txt_S::before {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

  right: 0;

  width: .1rem;

  height: 1.6rem;

  margin-right: .6rem;

  background: var(--color_regular);

  rotate: 30deg;

  content: "";

}



.each_campaign {

  padding-bottom: 3rem;

}



.each_campaign .campaign_num {

  position: relative;

  z-index: 1;

  margin-bottom: 1rem;

  padding: 1rem 0;

  text-align: center;

}



.each_campaign .campaign_num::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 100%;

  height: .15rem;

  background: var(--color_04);

  content: "";

}



.each_campaign .campaign_num span {

  position: relative;

  padding: 0 3rem;

  background: var(--color_02);

  font-family: var(--font_eng);

  font-size: 1.4rem;

  font-weight: 600;

  color: var(--color_04);

}



.each_campaign .campaign_num span::before,

.each_campaign .campaign_num span::after {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

  font-family: var(--font_eng);

  font-size: 2.2rem;

  font-weight: 400;

}



.each_campaign .campaign_num span::before {

  left: 0;

  content: "（";

}



.each_campaign .campaign_num span::after {

  right: 0;

  content: "）";

}



.campaign_summary {

  font-size: 2.2rem;

  line-height: 1.75;

  text-align: center;

}



.campaign_summary .txt_highlight {

  color: var(--color_01);

}



.campaign_summary .txt_L {

  font-family: var(--font_eng);

  font-size: 3.4rem;

  vertical-align: -.2rem;

}



.campaign_summary .txt_S {

  font-size: 1.5rem;

}



.campaign_summary .txt_slash {

  position: relative;

  padding: 0 .6rem;

}



.campaign_summary .txt_slash > span {

  position: relative;

  padding: 0 1.5rem;

}



.campaign_summary .txt_slash::before,

.campaign_summary .txt_slash::after,

.campaign_summary .txt_slash > span::before,

.campaign_summary .txt_slash > span::after {

  position: absolute;

  bottom: 0;

  width: .1rem;

  margin-bottom: .2rem;

  background: var(--color_regular);

  content: "";

}



.campaign_summary .txt_slash::before,

.campaign_summary .txt_slash::after {

  height: 1.8rem;

}



.campaign_summary .txt_slash > span::before,

.campaign_summary .txt_slash > span::after {

  height: 2.2rem;

}



.campaign_summary .txt_slash > span::before {

  left: 0;

  rotate: -30deg;

}



.campaign_summary .txt_slash > span::after {

  right: 0;

  rotate: 30deg;

}



.campaign_summary .txt_slash::before {

  left: 0;

  rotate: -40deg;

}



.campaign_summary .txt_slash::after {

  right: 0;

  rotate: 40deg;

}



.campaign_detail {

  margin-top: 1rem;

  font-size: 1.7rem;

  line-height: 1.5;

  letter-spacing: .05em;

  text-align: center;

}



.campaign_notes {

  margin-top: 2rem;

  font-size: 1.4rem;

  text-align: center;

}



.campaign_notes .txt_S {

  font-family: var(--font_eng);

  margin-left: .5rem;

  font-size: 1.1rem;

  vertical-align: .2rem;

}



.appStore_list {

  display: flex;

  justify-content: center;

  gap: 2rem;

  margin-top: 1.2rem;

}



.appStore_list li a {

  height: 6rem;

}



.appStore_list li a img {

  width: auto;

  height: 100%;

}



.combination_wrap {

  margin-top: 2.5rem;

  padding: 0 1rem;

}



.combination_wrap dt {

  position: relative;

  z-index: 1;

  width: fit-content;

  margin: 0 auto -1.2rem;

  padding: .5rem 1rem;

  background: var(--color_03);

  font-size: 1.4rem;

  font-weight: 700;

  color: #fff;

}



.combination_wrap dd {

  display: grid;

  grid-template-columns: 1fr 1fr;

  border: solid var(--color_03) .15rem;

  border-right: none;

}



.combination_wrap dd .each_combination {

  display: flex;

  flex-direction: column;

  padding: 2rem 0;

  border-right: solid var(--color_03) .15rem;

  background: #fff;

}



.combination_wrap dd .combination_list {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 1rem;

  padding: 0 2rem 0 .5rem;

}



.combination_wrap dd .combination_list li a {

  display: flex;

  align-items: center;

}



.combination_wrap dd .combination_list li a figure {

  width: 7.5rem;

}



.combination_wrap dd .combination_list li a h5 {

  flex: 1;

  font-size: 1.4rem;

  font-weight: 400;

  line-height: 1.5;

  letter-spacing: .05em;

  text-decoration: underline;

  text-decoration-skip-ink: none;

}



.combination_wrap dd .combination_list li a h5 .txt_S {

  font-size: 1.2rem;

}



.combination_wrap dd .totalAmount {

  position: relative;

  margin-top: 1rem;

  padding-top: 2rem;

  font-family: var(--font_eng);

  font-size: 2.2rem;

  font-weight: 700;

  letter-spacing: .05em;

  text-align: center;

  color: var(--color_01);

}



.combination_wrap dd .totalAmount .txt_S {

  font-family: var(--font_regular);

  font-size: 1.2rem;

  letter-spacing: .05em;

}



.combination_wrap dd .totalAmount .txt_total {

  margin-right: .6rem;

  padding: .1rem .6rem;

  background: var(--color_01);

  font-size: 1.3rem;

  letter-spacing: .05em;

  vertical-align: .1rem;

  color: #fff;

}



.combination_wrap dd .totalAmount::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(100% - 4rem);

  height: .1rem;

  border-top: dashed var(--color_03) .15rem;

  content: "";

}



.campaign_btn {

  width: fit-content;

  margin: 1.2rem auto 0;

}



.campaign_btn .btn_inner {

  position: relative;

  display: grid;

  place-items: center;

  width: 32rem;

  height: 4rem;

  border-radius: 10rem;

  background: var(--color_04);

  font-size: 1.8rem;

  font-weight: 500;

  color: #fff;

}



.campaign_btn .btn_inner::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1.4rem;

  height: 1rem;

  margin-right: 1.5rem;

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

}



.link_targetItem {

  width: fit-content;

  margin: 2rem auto 0;

}



.link_targetItem .btn_inner {

  position: relative;

  display: grid;

  place-items: center;

  width: 40rem;

  height: 6rem;

  border-radius: 10rem;

  background: var(--color_01);

  font-size: 2rem;

  font-weight: 500;

  color: #fff;

}



.link_targetItem .btn_inner::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1.4rem;

  height: 1rem;

  margin-right: 1.5rem;

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

}

/*-----------------------campaign*/



/*brand about--------------------*/

.brandAbout_area {

  margin-top: 8rem;

  padding-bottom: 3rem;

}



.brandAbout_area .about_wrap {

  position: relative;

  z-index: 1;

  padding: 5.5rem 3rem 6.5rem;

  background: url(../img/bg_001.jpg) center center / cover no-repeat;

}



.brandAbout_area .about_wrap::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/bg_002.jpg) center center / cover no-repeat;

  content: "";

  opacity: 0;

  animation: change 12s linear infinite;

}



@keyframes change {

  0% {

    opacity: 0;

  }



  40% {

    opacity: 0;

  }



  50% {

    opacity: 1;

  }



  90% {

    opacity: 1;

  }



  100% {

    opacity: 0;

  }

}



.area_ttl {

  font-size: 3.6rem;

  font-weight: 700;

  color: var(--color_04);

}



.area_ttl .txt_eng {

  display: block;

  margin-top: 1.2rem;

  font-family: var(--font_ttl);

  font-size: 2rem;

  font-weight: 400;

  color: var(--color_01);

}



.brandAbout_area .area_ttl .txt_brand {

  position: relative;

  padding-top: 1rem;

  font-family: var(--font_eng);

}



.brandAbout_area .area_ttl .txt_kana {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  font-family: var(--font_regular);

  font-size: 1.6rem;

  font-weight: 400;

  white-space: nowrap;

}



.brandAbout_area .area_lead {

  margin-top: 5rem;

  font-size: 2rem;

  line-height: 2;

}



.buyer_wrap {

  padding: 3.5rem 3rem 5rem;

}



.buyer_wrap .buyer_img {

  width: 19rem;

  margin: 0 2.5rem 1rem 0;

  float: left;

}



.buyer_wrap .txt_wrap {

  padding-top: 1rem;

}



.buyer_wrap .txt_wrap h4 {

  margin-bottom: 1rem;

  font-size: 2.7rem;

  line-height: 1.5;

  font-weight: 700;

  color: var(--color_04);

}



.buyer_wrap .txt_wrap p {

  font-size: 2rem;

  line-height: 2;

}



.brandDetail_wrap {

  display: grid;

  grid-template-columns: 1fr 1fr;

}



.brandDetail_wrap .each_brand {

  height: 48rem;

  padding: 9.2rem 1.5rem 0;

  overflow: clip;

}



.brandDetail_wrap .brand_soel {

  background: url(../img/bg_soel.jpg) top center / cover no-repeat;

}



.brandDetail_wrap .brand_whipp {

  background: url(../img/bg_whipp.jpg) top center / cover no-repeat;

}



.brandDetail_wrap .accordion_btn {

  width: 4rem;

  height: 4rem;

  margin: 0 auto 2rem;

  border-radius: 50%;

  background: #fff;

  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .1));

  cursor: pointer;

}



.brandDetail_wrap .accordion_btn span {

  position: relative;

  display: block;

  width: 100%;

  height: 100%;

}



.brandDetail_wrap .accordion_btn span::before,

.brandDetail_wrap .accordion_btn span::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: .15rem;

  height: 2rem;

  background: var(--color_04);

  content: "";

  transition: rotate .3s;

}



.brandDetail_wrap .accordion_btn span::after {

  rotate: 90deg;

}



.brandDetail_wrap .open .accordion_btn span::after {

  rotate: -90deg;

}



.brandDetail_wrap .open .accordion_btn span::before {

  rotate: 90deg;

}



.brandDetail_wrap .brand_txt {

  font-size: 1.6rem;

  line-height: 1.75;

}



.brandDetail_wrap .brand_txt span {

  line-height: 1.75;

}



.brandDetail_wrap .brand_txt .accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .3s;

}



.brandDetail_wrap .open .brand_txt .accordion_wrap {

  grid-template-rows: 1fr;

}



.brandDetail_wrap .brand_txt .accordion_inner {

  overflow: hidden;

}

/*--------------------brand about*/



/*product------------------------*/

.product_area {

  padding: 4rem 0 6rem;

}



.product_area .area_ttl {

  margin-bottom: -5rem;

  padding-left: 3rem;

  line-height: 1.3;

}



.product_area .txt_S {

  font-size: 2.5rem;

}



.product_area .txt_brand {

  font-family: var(--font_eng);

}



.product_area .nav_list {

  position: relative;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: .2rem;

  margin-bottom: 3rem;

  padding: 0 1.5rem;

}



.product_area .nav_list::before {

  display: block;

  content: "";

}



.product_area .nav_list li a {

  position: relative;

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem;

}



.product_area .nav_list li:nth-of-type(1) a {

  background: var(--staff_01_bg);

}



.product_area .nav_list li:nth-of-type(2) a {

  background: var(--staff_02_bg);

}



.product_area .nav_list li:nth-of-type(3) a {

  background: var(--staff_03_bg);

}



.product_area .nav_list li:nth-of-type(4) a {

  background: var(--staff_04_bg);

}



.product_area .nav_list li:nth-of-type(5) a {

  background: var(--staff_05_bg);

}



.product_area .nav_list li a figure {

  width: 6rem;

}



.product_area .nav_list li a .txt_wrap {

  flex: 1;

}



.product_area .nav_list li a .txt_wrap .skinType {

  display: flex;

  gap: .3rem;

}



.product_area .nav_list li a .txt_wrap .skinType p {

  padding: .4rem .6rem;

  font-size: 1.3rem;

  font-weight: 500;

  letter-spacing: .08em;

  color: #fff;

}



.product_area .nav_list li:nth-of-type(1) .txt_wrap .skinType p {

  background: var(--staff_01);

}



.product_area .nav_list li:nth-of-type(2) .txt_wrap .skinType p {

  background: var(--staff_02);

}



.product_area .nav_list li:nth-of-type(3) .txt_wrap .skinType p {

  background: var(--staff_03);

}



.product_area .nav_list li:nth-of-type(4) .txt_wrap .skinType p {

  background: var(--staff_04);

}



.product_area .nav_list li:nth-of-type(5) .txt_wrap .skinType p {

  background: var(--staff_05);

}



.product_area .nav_list li a .txt_wrap h5 {

  margin-top: .8rem;

  font-size: 2rem;

  font-weight: 500;

}



.each_staff {

  padding: 2rem 0 5rem;

}



.each_staff:nth-last-of-type(1) {

  padding-bottom: 0;

}



.staffProfile_wrap {

  position: relative;

  z-index: 1;

  width: 58.5rem;

  margin-bottom: -3rem;

  padding: 0 0 3rem 3rem;

}



.staffProfile_wrap::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - 3.5rem);

  border: solid var(--color_04) .15rem;

  border-left: none;

  border-radius: 0 100rem 100rem 0;

  background: #fff;

  content: "";

}



.staffProfile_wrap .staff_img {

  width: 16rem;

  float: left;

  margin: 0 2.5rem 1.5rem 0;

}



.staffProfile_wrap .txt_wrap {

  padding-top: 7rem;

}



.staffProfile_wrap .txt_wrap .skinType {

  display: flex;

  gap: .6rem;

  margin-bottom: .8rem;

}



.staffProfile_wrap .txt_wrap .skinType p {

  padding: .5rem 1rem;

  font-size: 1.3rem;

  font-weight: 500;

  color: #fff;

}



#Staff01 .staffProfile_wrap .txt_wrap .skinType p {

  background: var(--staff_01);

}



#Staff02 .staffProfile_wrap .txt_wrap .skinType p {

  background: var(--staff_02);

}



#Staff03 .staffProfile_wrap .txt_wrap .skinType p {

  background: var(--staff_03);

}



#Staff04 .staffProfile_wrap .txt_wrap .skinType p {

  background: var(--staff_04);

}



#Staff05 .staffProfile_wrap .txt_wrap .skinType p {

  background: var(--staff_05);

}



.staffProfile_wrap .txt_wrap h5 {

  font-size: 1.8rem;

  font-weight: 500;

  line-height: 1.5;

}



.staff_profile {

  width: 48rem;

  margin-top: 2.5rem;

  font-size: 1.7rem;

  line-height: 1.75;

}



.productDetail_wrap {

  padding-top: 3rem;

}



#Staff01 .productDetail_wrap {

  background: var(--staff_01_bg);

}



#Staff02 .productDetail_wrap {

  background: var(--staff_02_bg);

}



#Staff03 .productDetail_wrap {

  background: var(--staff_03_bg);

}



#Staff04 .productDetail_wrap {

  background: var(--staff_04_bg);

}



#Staff05 .productDetail_wrap {

  background: var(--staff_05_bg);

}



.productDetail_wrap .each_itm {

  position: relative;

}



.productDetail_wrap .each_itm .itm_name {

  font-size: 1.3rem;

  line-height: 1.5;

  letter-spacing: .05em;

  text-decoration: underline;

  text-decoration-skip-ink: none;

}



.productDetail_wrap .each_itm .itm_comment {

  padding: .5rem .8rem;

  background: #fff;

  font-size: 1.5rem;

  line-height: 1.75;

  text-align: justify;

}



/*Staff01---------------------------*/

#Staff01 .itm_001 {

  position: relative;

  z-index: 1;

  margin-top: 2rem;

}



#Staff01 .itm_001::before {

  position: absolute;

  z-index: -1;

  top: 0;

  right: 0;

  width: 45.5rem;

  height: 28rem;

  margin-top: 20.6rem;

  background: url(../img/itm_01_004.jpg) center center / cover no-repeat;

  content: "";

}



#Staff01 .itm_001 .itm_img {

  width: 16.7rem;

  margin-left: 1.5rem;

}



#Staff01 .itm_001 .itm_name {

  width: 11.5rem;

  margin: 1rem 0 0 1.5rem;

}



#Staff01 .itm_001 .itm_comment {

  position: absolute;

  top: 0;

  left: 0;

  width: 37.6rem;

  margin: 3.5rem 0 0 14.5rem;

}



#Staff01 .itm_002 {

  position: relative;

  z-index: 1;

  margin-top: -1rem;

}



#Staff01 .itm_002 .itm_img {

  width: 19.4rem;

  margin: 0 .5rem 0 auto;

}



#Staff01 .itm_002 .itm_name {

  width: 18.2rem;

  margin: 1rem 1.5rem 0 auto;

}



#Staff01 .itm_002 .itm_comment {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 38rem;

  margin-left: 1.5rem;

}



#Staff01 .itm_003 .itm_img {

  width: 19rem;

  margin: 2.5rem 0 0 13rem;

}



#Staff01 .itm_003 .itm_name {

  position: absolute;

  top: 0;

  left: 0;

  width: 11.6rem;

  margin: 11rem 0 0 3rem;

}



#Staff01 .itm_003 .itm_comment {

  position: absolute;

  top: 0;

  left: 0;

  width: 24.8rem;

  margin: 4rem 0 0 32rem;

}



/*Staff02---------------------------*/

#Staff02 .itm_001 {

  margin-top: 3rem;

}



#Staff02 .itm_001 .itm_img {

  width: 20.6rem;

  margin: 0 5rem 0 auto;

}



#Staff02 .itm_001 .itm_name {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 29rem;

  margin: 0 0 2rem 3rem;

}



#Staff02 .itm_001 .itm_comment {

  position: absolute;

  top: 0;

  left: 0;

  width: 29rem;

  margin: 2rem 0 0 3rem;

}



#Staff02 .itm_002 {

  position: relative;

  z-index: 1;

  margin-top: 3.5rem;

}



#Staff02 .itm_002 .itm_img {

  position: absolute;

  top: 0;

  right: 0;

  width: 21.8rem;

  margin: 8rem 1.5rem 0 auto;

}



#Staff02 .itm_002 .itm_name {

  position: absolute;

  top: 0;

  right: 0;

  width: 10rem;

  margin: 16rem 1.5rem 0 0;

}



#Staff02 .itm_002 .itm_comment {

  width: 48rem;

  margin: 0 1.5rem 0 auto;

}



#Staff02 .itm_003 {

  margin-top: 3rem;

}



#Staff02 .itm_003 .itm_img {

  width: 37rem;

  margin: 0 0 0 5.5rem;

}



#Staff02 .itm_003 .itm_name {

  position: absolute;

  top: 0;

  left: 0;

  width: 13.4rem;

  margin: 32rem 0 0 7rem;

  color: #fff;

  pointer-events: none;

}



#Staff02 .itm_003 .itm_comment {

  width: 50.6rem;

  margin: 1.5rem 0 0 5.5rem;

}



/*Staff03---------------------------*/

#Staff03 .itm_001 {

  margin-top: 3rem;

}



#Staff03 .itm_001 .itm_img {

  width: 24.7rem;

  margin-left: 3rem;

}



#Staff03 .itm_001 .itm_name {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 10.6rem;

  margin: 0 0 7rem 4rem;

  color: #fff;

  pointer-events: none;

}



#Staff03 .itm_001 .itm_comment {

  position: absolute;

  top: 0;

  right: 0;

  width: 33rem;

  margin: 4rem 1.5rem 0 0;

}

#Staff03 .itm_002 {

  margin-top: 2.5rem;

}



#Staff03 .itm_002 .itm_img {

  position: absolute;

  top: 0;

  right: 0;

  width: 21.8rem;

  margin: -15.5rem 3rem 0 0;

}



#Staff03 .itm_002 .itm_name {

  position: absolute;

  top: 0;

  right: 0;

  width: 13.5rem;

  margin: -10rem 10.7rem 0 0;

  color: #fff;

  pointer-events: none;

}



#Staff03 .itm_002 .itm_comment {

  position: relative;

  width: 29.6rem;

  margin-left: 9rem;

}



#Staff03 .itm_003 {

  margin-top: 2.5rem;

}



#Staff03 .itm_003 .itm_img {

  width: 31.2rem;

}



#Staff03 .itm_003 .itm_name {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 33rem;

  margin: 0 3rem 8rem 0;

}



#Staff03 .itm_003 .itm_comment {

  position: absolute;

  top: 0;

  right: 0;

  width: 33rem;

  margin: 18rem 3rem 0 0;

}



/*Staff04---------------------------*/

#Staff04 .itm_001 {

  margin-top: 3rem;

}



#Staff04 .itm_001 .itm_img {

  width: 28rem;

  margin: 0 0 0 auto;

}



#Staff04 .itm_001 .itm_name {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 21.6rem;

  margin: 0 0 12rem 3rem;

}



#Staff04 .itm_001 .itm_comment {

  position: absolute;

  top: 0;

  left: 0;

  width: 32rem;

  margin: 1rem 0 0 3rem;

}



#Staff04 .itm_002 {

  margin-top: 3.5rem;

}



#Staff04 .itm_002 .itm_img {

  position: absolute;

  top: 0;

  left: 0;

  width: 28.5rem;

  margin: -11.6rem 0 0 -.5rem;

}



#Staff04 .itm_002 .itm_name {

  position: absolute;

  top: 0;

  left: 0;

  width: 12rem;

  margin: -5rem 0 0 15rem;

}



#Staff04 .itm_002 .itm_comment {

  width: 29.8rem;

  margin: 0 1.5rem 0 auto;

}



#Staff04 .itm_003 {

  margin-top: 5.5rem;

}



#Staff04 .itm_003 .itm_img {

  width: 46.7rem;

  margin: 0 auto;

}



#Staff04 .itm_003 .itm_name {

  position: absolute;

  top: 0;

  left: 0;

  width: 15.2rem;

  margin: 1.5rem 0 0 8rem;

  pointer-events: none;

}



#Staff04 .itm_003 .itm_comment {

  width: 46.7rem;

  margin: 1.5rem auto 0;

}



/*Staff05---------------------------*/

#Staff05 .itm_001 {

  margin-top: 3rem;

}



#Staff05 .itm_001 .itm_img {

  width: 34.6rem;

  margin: 0 0 0 auto;

}



#Staff05 .itm_001 .itm_name {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 15.2rem;

  margin: 0 0 1.5rem 1.5rem;

  color: #fff;

  pointer-events: none;

}



#Staff05 .itm_001 .itm_comment {

  position: absolute;

  top: 0;

  left: 0;

  width: 28.6rem;

  margin: 1rem 0 0 1.5rem;

}



#Staff05 .itm_002 {

  position: relative;

  z-index: 1;

  margin-top: 4.5rem;

}



#Staff05 .itm_002 .itm_img {

  position: absolute;

  top: 0;

  width: 19.8rem;

  margin: -10rem 0 0 0;

}



#Staff05 .itm_002 .itm_name {

  position: absolute;

  top: 100%;

  width: 10.2rem;

  margin: 1rem 0 0 21rem;

}



#Staff05 .itm_002 .itm_comment {

  position: relative;

  width: 36.4rem;

  margin-left: 16rem;

}



#Staff05 .itm_003 {

  margin-top: 3rem;

}



#Staff05 .itm_003 .itm_img {

  width: 30rem;

  margin: 0 0 0 auto;

}



#Staff05 .itm_003 .itm_name {

  position: absolute;

  top: 0;

  right: 0;

  width: 11.3rem;

  margin: 10rem 16rem 0 0;

}



#Staff05 .itm_003 .itm_comment {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 25.2rem;

  margin: 0 0 0 3rem;

}



.product_area .itm_list_wrap {

  margin-top: 6rem;

  padding: 0 1.5rem;

  background: linear-gradient(transparent, #fff);

}



.product_area .itm_list_wrap > p {

  position: relative;

  margin-bottom: 2rem;

  padding-left: 4.8rem;

}



.product_area .itm_list_wrap > p::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 4rem;

  height: 4rem;

  border-radius: 50%;

  content: "";

}



#Staff01 .itm_list_wrap > p::before {

  background: url(../img/staff_001.jpg) center center / cover no-repeat;

}



#Staff02 .itm_list_wrap > p::before {

  background: url(../img/staff_002.jpg) center center / cover no-repeat;

}



#Staff03 .itm_list_wrap > p::before {

  background: url(../img/staff_003.jpg) center center / cover no-repeat;

}



#Staff04 .itm_list_wrap > p::before {

  background: url(../img/staff_004.jpg) center center / cover no-repeat;

}



#Staff05 .itm_list_wrap > p::before {

  background: url(../img/staff_005.jpg) center center / cover no-repeat;

}



.product_area .itm_list_wrap > p span {

  padding: .8rem;

  background: #fff;

  font-size: 1.8rem;

}



.product_area .itm_list {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: .8rem;

}



.product_area .itm_list li a {

  position: relative;

  height: 100%;

  padding: 1rem 1rem 5rem;

  border: solid .15rem;

  background: #fff;

}



#Staff01 .itm_list li a {

  border-color: var(--staff_01);

}



#Staff02 .itm_list li a {

  border-color: var(--staff_02);

}



#Staff03 .itm_list li a {

  border-color: var(--staff_03);

}



#Staff04 .itm_list li a {

  border-color: var(--staff_04);

}



#Staff05 .itm_list li a {

  border-color: var(--staff_05);

}



.product_area .itm_list li a h4 {

  margin-top: .8rem;

  font-weight: 400;

  font-size: 1.5rem;

  line-height: 1.5;

  letter-spacing: .05em;

}



.product_area .itm_list li a h4 .txt_brand {

  font-size: 1.3rem;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .05em;

}



.product_area .itm_list li a .itm_price_wrap {

  position: absolute;

  bottom: 0;

  left: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 0 1rem 2rem;

}



.product_area .itm_list li a .itm_price {

  font-size: 1.5rem;

  letter-spacing: .05em;

}



.product_area .itm_list li a .itm_price .txt_S {

  margin-left: .3rem;

  font-size: 1.2rem;

  letter-spacing: .05em;

}



.product_area .itm_list li a .itm_link {

  font-family: var(--font_eng);

  font-size: 1.4rem;

  font-weight: 500;

  letter-spacing: .05em;

  text-decoration: underline;

}



#Staff01 .itm_list li a .itm_link {

  color: var(--staff_01);

}



#Staff02 .itm_list li a .itm_link {

  color: var(--staff_02);

}



#Staff03 .itm_list li a .itm_link {

  color: var(--staff_03);

}



#Staff04 .itm_list li a .itm_link {

  color: var(--staff_04);

}



#Staff05 .itm_list li a .itm_link {

  color: var(--staff_05);

}



.fixed_nav {

  position: fixed;

  z-index: 3;

  bottom: 0;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  gap: .2rem;

  width: 100%;

  background: #fff;

  border-top: solid var(--color_04) .15rem;

  translate: 0 100%;

  transition: translate .3s;

}



.fixed_nav.active {

  translate: 0 0;

}



.fixed_nav li a {

  display: flex;

  align-items: center;

  height: 6rem;

}



.fixed_nav li:nth-of-type(1) a {

  background: var(--staff_01_bg);

}



.fixed_nav li:nth-of-type(2) a {

  background: var(--staff_02_bg);

}



.fixed_nav li:nth-of-type(3) a {

  background: var(--staff_03_bg);

}



.fixed_nav li:nth-of-type(4) a {

  background: var(--staff_04_bg);

}



.fixed_nav li:nth-of-type(5) a {

  background: var(--staff_05_bg);

}



.fixed_nav li a figure {

  width: 3.8rem;

}



.fixed_nav li a .txt_wrap {

  flex: 1;

  font-size: 1.3rem;

  font-weight: 500;

  text-align: center;

}



.fixed_nav li a .txt_wrap h5 {

  margin-bottom: .5rem;

  letter-spacing: .05em;

}



.fixed_nav li a .txt_wrap p {

  font-family: var(--font_eng);

  letter-spacing: .05em;

}



.fixed_nav li:nth-of-type(1) a .txt_wrap p {

  color: var(--staff_01);

}



.fixed_nav li:nth-of-type(2) a .txt_wrap p {

  color: var(--staff_02);

}



.fixed_nav li:nth-of-type(3) a .txt_wrap p {

  color: var(--staff_03);

}



.fixed_nav li:nth-of-type(4) a .txt_wrap p {

  color: var(--staff_04);

}



.fixed_nav li:nth-of-type(5) a .txt_wrap p {

  color: var(--staff_05);

}

/*------------------------product*/



/*review-------------------------*/

.review_area {

  padding: 4rem 0 9rem;

}



.review_area .area_ttl {

  margin-bottom: 3rem;

  padding-left: 3rem;

}



.review_list.swiper-wrapper {

  transition-timing-function: linear;

}



.review_list .each_review {

  position: relative;

  width: 23rem !important;

  height: auto;

  margin: 0 .75rem;

}



.review_list .each_review > a {

  height: 100%;

  padding: 1.5rem 1.5rem 5rem;

  border: solid var(--color_04) .15rem;

  background: #FFFEFA;

}



.review_list .each_review figure {

  margin-bottom: .8rem;

}



.review_list .each_review figure img {

  height: 22rem;

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap {

  display: flex;

  align-items: center;

  gap: .8rem;

  margin-bottom: 1rem;

}



.review_list .each_review .staff_detail_wrap .staff_img {

  width: 5.4rem;

  height: 5.4rem;

  border-radius: 50%;

  overflow: clip;

}



.review_list .each_review .staff_detail_wrap .staff_img img {

  height: 100%;

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap .txt_wrap {

  flex: 1;

}



.review_list .each_review .staff_detail_wrap .txt_wrap p {

  font-size: 1.4rem;

  line-height: 1.5;

}



.review_list .each_review .staff_comment {

  margin-top: 1rem;

  font-size: 1.4rem;

  line-height: 1.5;

  overflow: hidden;

  display: -webkit-box;

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



.review_list .each_review .link_detail {

  position: absolute;

  bottom: 0;

  right: 0;

  margin: 0 1.5rem 2rem 0;

  font-family: var(--font_eng);

  font-size: 1.6rem;

  letter-spacing: .05em;

  text-decoration: underline;

}

/*-------------------------review*/



/*brand link---------------------*/

.linkBrand_area {

  display: grid;

  grid-template-columns: 1fr 1fr;

  margin-top: 10rem;

}



.linkBrand_area .each_brand a {

  position: relative;

  height: 30rem;

  overflow: clip;

}



.linkBrand_area .each_brand a img {

  transition: scale .5s;

}



.linkBrand_area .each_brand a:hover img {

  scale: 1.05;

}



.linkBrand_area .each_brand a p {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  display: grid;

  place-items: center;

  width: 21rem;

  height: 4rem;

  margin-bottom: 2rem;

  padding-bottom: .2rem;

  border-radius: .5rem;

  font-size: 1.6rem;

  color: #fff;

}



.linkBrand_area .brand_soel a p {

  background: var(--color_regular);

}



.linkBrand_area .brand_whipp a p {

  background: var(--color_01);

}



.linkBrand_area .each_brand a p .txt_L {

  margin-right: .5rem;

  font-family: var(--font_eng);

  font-size: 2rem;

  font-weight: 500;

  vertical-align: -.2rem;

}

/*---------------------brand link*/



/*shareボタン、shareテキスト---------------------------*/

@media screen and  (max-width:768px) {

#share {

  z-index: 10 !important;

  transition: translate .3s;

}



#share.move {

  translate: 0 -6rem;

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



.fixedBtn {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  display: grid !important;

  place-items: center;

  width: 4.2rem;

  height: 18rem;

  margin-bottom: 4rem;

  border-radius: 1rem 0 0 1rem;

  background: var(--color_01);

  transition: translate .3s, transform .3s;

  transform: translateX(100%);

}



.fixedBtn.active {

  transform: translateX(0);

}



.fixedBtn.move {

  translate: 0 -6rem;

}



.fixedBtn span {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  rotate: 90deg;

  display: inline-block;

  font-size: 1.3rem;

  letter-spacing: .2em;

  white-space: nowrap;

  color: #fff;

}



}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

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

  .only_sp {

    display: none !important;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    margin: -100vh auto 0;

    overflow: clip;

    box-shadow: 0 0 10px rgba(0, 0, 0, .2);

  }



  .LP_page_inner,

  .fixed_nav {

    width: 60rem !important;

  }



  .fixed_area {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100vh;

    margin: 0 auto;

    background: #E3E7EE;

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

    width: calc((100% - 60rem) / 2);

    height: 100%;

  }



  .main_ttl_pc {

    width: 42rem;

  }



  .campaignBtn {

    display: grid;

    place-items: center;

    width: 26rem;

    height: 6.5rem;

    margin: 4rem auto 0;

    border-radius: .2rem;

    background: var(--color_01);

    font-size: 2rem;

    font-weight: 500;

    text-align: center;

    color: #fff;

    transition: background-color .3s;

  }



  .campaignBtn span {

    transition: color .3s !important;

  }



  .campaignBtn:hover {

    opacity: 1 !important;

    background: #fff;

    color: var(--color_01);

  }



  .campaignBtn .txt_eng {

    display: block;

    margin-top: .5rem;

    font-family: var(--font_eng);

    font-size: 1.6rem;

  }



  .PCnavigation_list > li {

    padding: 0 1rem;

  }



  .PCnavigation_list > li:nth-of-type(n+2) {

    margin-top: 1.8rem;

    padding-top: 1.8rem;

    border-top: solid #fff .1rem;

  }



  .PCnavigation_list > li a {

    font-size: 2rem;

    font-weight: 600;

    line-height: 1.5;

    letter-spacing: .1em;

  }



  .PCnavigation_list > li a .txt_brand {

    font-family: var(--font_eng);

  }



  .PCnavigation_list > li a .txt_eng {

    display: block;

    margin-top: .5rem;

    font-family: var(--font_ttl);

    font-size: 1.3rem;

    font-weight: 400;

    letter-spacing: .1em;

    color: var(--color_01);

  }

}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1600px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1600));

  }

}



@media screen and (max-width: 768px) {

  html {

    font-size: calc(10 * (100vw / 600));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/