@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;
  z-index: 1;
}

:root {
  --font_regular: "Lato", "Zen Kaku Gothic New", sans-serif;
  --font_serif: "Zen Old Mincho", serif;
  --color_regular: #141414;
  --color_green: #2F561B;
  --color_underline: #D6DED2;
  --color_brown: #4B2A10;
  --color_beige: #F9F8F3;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: .05em;
}

.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_inner {
  position: relative;
  z-index: 1;
  background: #fff;
  min-height: 100vh;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.LP_page sup {
  font-size: calc(8 * (60rem / 390));
  letter-spacing: -.05em;
}

/*
.activePoint.animation01 {
  opacity: 0;
  translate: 0 calc(20 * (60rem / 390));
  transition: opacity 1s, translate 1s;
}

.activePoint.animation01.active {
  opacity: 1;
  translate: unset;
}

.activePoint.animation02 {
  opacity: 0;
  filter: blur(calc(10 * (60rem / 390)));
  transition: opacity .6s, filter 1s;
}

.activePoint.animation02.active {
  opacity: 1;
  filter: unset;
}

.activePoint.animation03 {
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-size: 100% max(300%, 100vh);
  mask-position: center 100%;
  mask-repeat: none;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  -webkit-mask-repeat: none;
  transform: translateZ(0);
  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear;
}

.activePoint.animation03.active {
  mask-position: center 0;
  -webkit-mask-position: center 0;
}
  */

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

/*heading------------------------*/
.heading_area {
  position: relative;
  z-index: 3;
  padding-bottom: calc(250 * (60rem / 390));
}

.heading_area .for_bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
}

.heading_area .for_bg::before {
  display: block;
  position: fixed;
  top: 0;
  width: calc(390 * (60rem / 390));
  height: 100lvh;
  background: url(../img/2605/bg_001.jpg) center center / cover no-repeat;
  content: "";
}

.heading_area .area_inner {
  background: #fff;
  padding-bottom: calc(60 * (60rem / 390));
}

.main_ttl {
  margin-bottom: calc(35 * (60rem / 390));
}

.main_lead {
  font-size: calc(16 * (60rem / 390));
  font-weight: 500;
  line-height: 2;
  text-align: center;
}

.main_lead:nth-of-type(n+2) {
  margin-top: calc(20 * (60rem / 390));
}

.main_lead .txt_L {
  font-size: calc(22 * (60rem / 390));
}

.main_lead .txt_B {
  font-weight: 700;
}

.main_lead .txt_highlight {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: calc(8 * (60rem / 390));
  text-underline-offset: calc(-3 * (60rem / 390));
  text-decoration-color: var(--color_underline);
}

.campaign_area_outside {
  position: relative;
  margin-top: calc(50 * (60rem / 390));
}

.campaign_area_outside.cpOver::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: calc(380 * (60rem / 390));
  height: calc(100% + calc(50 * (60rem / 390)));
  border-radius: calc(5 * (60rem / 390));
  background: rgba(0, 0, 0, .6);
  font-size: calc(22 * (60rem / 390));
  text-shadow: 0 0  10px black;
  font-weight: 700;
  color: #fff;
  content: "キャンペーンは終了しました";
}

.campaign_wrap {
  position: relative;
  z-index: 1;
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  padding: 0 calc(15 * (60rem / 390)) calc(35 * (60rem / 390));
}

.campaign_wrap::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(35 * (60rem / 390)));
  border: solid var(--color_green) calc(1 * (60rem / 390));
  background: #fff;
  box-sizing: border-box;
  content: "";
}

.modal_content .campaign_wrap {
  padding-top: calc(35 * (60rem / 390));
}

.modal_content .campaign_wrap::before {
  height: 100%;
}

.campaign_wrap h2 {
  width: fit-content;
  margin: 0 auto calc(15 * (60rem / 390));
  padding: 0 calc(20 * (60rem / 390));
  background: #fff;
  font-size: calc(32 * (60rem / 390));
  font-weight: 700;
  text-align: center;
  color: var(--color_green);
}

.campaign_wrap h2 .txt_S {
  display: block;
  margin-bottom: calc(6 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
}

.campaign_period {
  margin-bottom: calc(12 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  text-align: center;
  color: var(--color_green);
}

.campaign_period .txt_L {
  font-size: calc(18 * (60rem / 390));
}

.each_campaign {
  position: relative;
  z-index: 1;
  padding-bottom: calc(25 * (60rem / 390));
}

.each_campaign:nth-of-type(n+2) {
  margin-top: calc(15 * (60rem / 390));
}

.each_campaign::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(15 * (60rem / 390)));
  border-radius: calc(3 * (60rem / 390));
  background: var(--color_green);
  opacity: .05;
  content: "";
}

.each_campaign h3 {
  margin: 0 0 calc(15 * (60rem / 390)) calc(15 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  font-weight: 700;
  color: var(--color_green);
}

.each_campaign h3 .txt_L {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
}

.campaign_detail {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.75;
  font-weight: 500;
  text-align: center;
}

.campaign_detail .txt_M {
  display: inline-block;
  margin-top: calc(5 * (60rem / 390));
  padding-right: calc(32 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color_green);
}

.campaign_detail .txt_L {
  display: inline-block;
  margin-top: calc(5 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
  font-weight: 700;
  color: var(--color_green);
}

.campaign_detail .txt_LL {
  font-size: calc(32 * (60rem / 390));
  font-weight: 700;
}

.campaign_detail .txt_highlight {
  margin-right: calc(3 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: calc(8 * (60rem / 390));
  text-underline-offset: calc(-5 * (60rem / 390));
  text-decoration-color: var(--color_underline);
}

.campaign_img {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(45 * (60rem / 390));
  margin: calc(62 * (60rem / 390)) calc(-5 * (60rem / 390)) 0 0;
  rotate: 8deg;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .16));
}

.campaign_notes {
  margin-top: calc(12 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  text-align: center;
}

.btn_allitem {
  width: fit-content;
  margin: 0 auto;
}

.campaign_area .btn_allitem {
  margin-top: calc(30 * (60rem / 390));
}

.btn_allitem a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(300 * (60rem / 390));
  height: calc(66 * (60rem / 390));
  border-radius: calc(3 * (60rem / 390));
  border: solid 1px;
  text-align: center;
  color: #fff;
  transition: background-color .3s, color .3s;
}

.campaign_area .btn_allitem a {
  border-color: var(--color_green);
  background: var(--color_green);
  font-size: calc(18 * (60rem / 390));
  font-weight: 700;
  line-height: 1.3;
}

.modal_content .campaign_area .btn_allitem a {
  border-color: #fff;
}

.btn_allitem a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(8 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-right: calc(10 * (60rem / 390));
  border-top: solid #fff calc(1.5 * (60rem / 390));
  border-right: solid #fff calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: border-color .3s;
}

.campaign_area .btn_allitem a:hover::before {
  border-color: var(--color_green);
}

.campaign_area .btn_allitem a:hover {
  background: #fff;
  color: var(--color_green);
}

.btn_campaign {
  position: fixed;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: calc(42 * (60rem / 390));
  height: calc(130 * (60rem / 390));
  margin-bottom: calc(80 * (60rem / 390));
  border-radius: calc(5 * (60rem / 390)) 0 0 calc(5 * (60rem / 390));
  border: solid var(--color_green) calc(1.5 * (60rem / 390));
  border-right: none;
  background: #F3F5F2;
  font-size: calc(16 * (60rem / 390));
  font-weight: 700;
  writing-mode: vertical-lr;
  color: var(--color_green);
  cursor: pointer;
}

.btn_campaign span {
  position: relative;
  padding-bottom: calc(13 * (60rem / 390));
}

.btn_campaign span::before,
.btn_campaign span::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1.5 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_green);
  content: "";
}

.btn_campaign span::after {
  rotate: 90deg;
}

body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

#HeaderWrap.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal_outside.hidden {
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
}

.modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal_outside::-webkit-scrollbar {
  display:none;
}

.modal_outside::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(100, 60, 45, .5);
  content: "";
}

.modal_outside input {
  display: none;
}

.modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal_wrap {
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  max-height: 100%;
  padding: calc(40 * (60rem / 390)) 0;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal_wrap::-webkit-scrollbar {
  display:none;
}

.modal_inner {
  position: relative;
}

.btn_modalClose {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: calc(25 * (60rem / 390));
  height: calc(25 * (60rem / 390));
  margin: calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) 0 0;
  rotate: 45deg;
  cursor: pointer;
}

.btn_modalClose::before,
.btn_modalClose::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(1 * (60rem / 390));
  height: 100%;
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.btn_modalClose::after {
  rotate: 90deg;
}

/*------------------------heading*/

/*nav----------------------------*/
.main_nav {
  margin: calc(60 * (60rem / 390)) 0 calc(80 * (60rem / 390));
}

.main_nav h3 {
  margin-bottom: calc(15 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
  font-weight: 700;
  text-align: center;
}

.nav_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: solid var(--color_regular) 1px;
  border-bottom: solid var(--color_regular) 1px;
}

.nav_list li {
  position: relative;
}

.nav_list li:nth-of-type(n+2)::before {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 1px;
  height: calc(100% - calc(16 * (60rem / 390)));
  background: var(--color_regular);
  content: "";
}

.nav_list li a {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(70 * (60rem / 390));
}

.main_nav .nav_list li a::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(6 * (60rem / 390));
  height: calc(6 * (60rem / 390));
  margin-bottom: calc(10 * (60rem / 390));
  border-right: solid var(--color_regular) 1px;
  border-bottom: solid var(--color_regular) 1px;
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.nav_list li a p {
  font-size: calc(10 * (60rem / 390));
  letter-spacing: 0;
  text-align: center;
}

.main_nav .nav_list li a p {
  padding-bottom: calc(8 * (60rem / 390));
}


.nav_list li a p .txt_eng {
  display: block;
  margin-bottom: calc(6 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 700;
}

.fixed_nav {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 100%;
  background: #fff;
  translate: 0 100%;
  transition: translate .3s;
}

.fixed_nav.active {
  box-shadow: 0 calc(-3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .1);
  translate: 0 0;
}

.fixed_nav .nav_list {
  border: none;
}
/*---------------------------nav*/

/*pickup-------------------------*/
.area_ttl {
  position: relative;
  z-index: 1;
  padding: calc(15 * (60rem / 390)) 0;
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
}

.area_ttl::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_brown);
  opacity: .6;
  content: "";
  transform-origin: left center;
  /*scale: 0 1;
  transition: scale 1s;*/
}

/*
.area_ttl.active::before {
  scale: 1 1;
}
  */

.area_ttl .txt_eng {
  display: block;
  margin-bottom: calc(8 * (60rem / 390));
  font-size: calc(32 * (60rem / 390));
  font-weight: 700;
}

.pickup_area .area_ttl {
  margin-bottom: calc(40 * (60rem / 390));
}

.pickup_area .pickup_wrap {
  margin-bottom: calc(60 * (60rem / 390));
}

.pickup_area .pickup_copy {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(20 * (60rem / 390));
  padding: 0 calc(10 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
}

.pickup_area .pickup_copy::before,
.pickup_area .pickup_copy::after {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: calc(12 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.pickup_area .pickup_copy::before {
  left: 0;
  rotate: -30deg;
}

.pickup_area .pickup_copy::after {
  right: 0;
  rotate: 30deg;
}

.pickup_area .product_wrap {
  position: relative;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: calc(28 * (60rem / 390));
  padding-left: calc(60 * (60rem / 390));
}

.pickup_area .product_wrap .txt_new {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  width: calc(50 * (60rem / 390));
  height: calc(50 * (60rem / 390));
  margin: calc(25 * (60rem / 390)) 0 0 calc(20 * (60rem / 390));
  border-radius: 50%;
  background: var(--color_green);
  font-size: calc(14 * (60rem / 390));
  font-weight: 700;
  color: #fff;
}

.pickup_area .product_wrap .product_img {
  width: calc(100 * (60rem / 390));
}

.pickup_area .product_wrap .txt_wrap {
  flex: 1;
}

.pickup_area .product_wrap .product_copy {
  margin-bottom: calc(10 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(17 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
}

.pickup_area .product_wrap .product_feature {
  width: fit-content;
  margin-bottom: calc(12 * (60rem / 390));
  padding: calc(5 * (60rem / 390)) calc(15 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  background: #B24E3B;
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  color: #fff;
}

.pickup_area .product_wrap .product_name {
  font-size: calc(16 * (60rem / 390));
  font-weight: 700;
  line-height: 1.4;
}

.pickup_area .product_wrap .product_name span {
  display: inline-block;
  margin-right: calc(6 * (60rem / 390));
  padding: calc(3 * (60rem / 390)) calc(6 * (60rem / 390));
  border: solid rgba(20, 20, 20, .5) 1px;
  font-size: calc(11 * (60rem / 390));
  font-weight: 500;
  vertical-align: .2em;
}

.pickup_area .product_wrap .market_name {
  margin-top: calc(8 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.pickup_area .product_wrap .product_price {
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
}

.pickup_area .product_wrap .product_price .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.pickup_area .product_wrap .product_link {
  margin-top:  calc(15 * (60rem / 390));
}

.product_link {
  display: grid !important;
  place-items: center;
  width: calc(100 * (60rem / 390));
  height: calc(28 * (60rem / 390));
  border-radius: calc(3 * (60rem / 390));
  border: solid var(--color_brown) 1px;
  background: var(--color_brown);
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  color: #fff;
  transition: background-color .3s, color .3s;
}

.product_link:hover {
  background: #fff;
  color: var(--color_brown);
}

.product_link span {
  position: relative;
  padding-right: calc(8 * (60rem / 390));
}

.product_link span::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(6 * (60rem / 390));
  height: calc(6 * (60rem / 390));
  border-top: solid #fff calc(1.5 * (60rem / 390));
  border-right: solid #fff calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: border-color .3s;
}

.product_link:hover span::before {
  border-color: var(--color_brown);
}

.concern_list_wrap {
  position: relative;
  z-index: 1;
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  padding: 0 calc(30 * (60rem / 390)) calc(25 * (60rem / 390));
}

.concern_list_wrap::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(10 * (60rem / 390)));
  border: solid var(--color_regular) 1px;
  box-sizing: border-box;
  opacity: .5;
  content: "";
}

.concern_list_wrap h4 {
  width: fit-content;
  margin: 0 auto calc(20 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390));
  background: #fff;
  font-size: calc(20 * (60rem / 390));
  font-weight: 500;
}

.concern_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(5 * (60rem / 390)) calc(18 * (60rem / 390));
}

.concern_list li {
  position: relative;
  padding-left: calc(16 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
}

.concern_list li::before,
.concern_list li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(12 * (60rem / 390));
  height: calc(12 * (60rem / 390));
  margin-top: calc(5 * (60rem / 390));
  content: "";
}

.concern_list li::before {
  background: var(--color_green);
}

.concern_list li::after {
  background: url(../img/2605/icon_check.svg) center center / 100% auto no-repeat;
}

.pickup_wrap .concern_list_wrap {
  margin-top: calc(45 * (60rem / 390));
}

.pickup_wrap .notes_list {
  width: fit-content;
  margin: calc(10 * (60rem / 390)) auto 0;
}

.notes_list li {
  font-size: calc(10 * (60rem / 390));
  line-height: 1.4;
  letter-spacing: 0;
  text-indent: -1.2em;
  padding-left: 1.2em;
}

.notes_list li:nth-of-type(n+2) {
  margin-top: calc(4 * (60rem / 390));
}

.each_point {
  position: relative;
  z-index: 1;
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  padding: 0 calc(15 * (60rem / 390)) calc(30 * (60rem / 390));
}

.each_point:nth-of-type(n+2) {
  margin-top: calc(30 * (60rem / 390));
}

.each_point::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(25 * (60rem / 390)));
  background: var(--color_beige);
  content: "";
}

.each_point .point_num {
  width: calc(180 * (60rem / 390));
  height: calc(80 * (60rem / 390));
  margin: 0 auto calc(-20 * (60rem / 390));
  padding-top: calc(18 * (60rem / 390));
  border-radius: 50%;
  background: var(--color_beige);
  font-size: calc(14 * (60rem / 390));
  font-weight: 700;
  text-align: center;
  color: var(--color_green);
}

.each_point .point_num .txt_L {
  margin-left: calc(4 * (60rem / 390));
  font-size: calc(24 * (60rem / 390));
  vertical-align: -.05em;
}

.each_point .point_ttl {
  margin-bottom: calc(20 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
  text-align: center;
}

.each_point .point_ttl .txt_L {
  display: block;
  margin-top: calc(10 * (60rem / 390));
  font-size: calc(24 * (60rem / 390));
  line-height: 1.4;
}

.each_point .point_ttl .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
}

.each_point .point_img {
  margin: 0 auto;
}

.each_point.point_001 .point_img {
  width: calc(250 * (60rem / 390));
  margin-bottom: calc(20 * (60rem / 390));
}

.each_point.point_003 .point_img {
  width: calc(324 * (60rem / 390));
}

.each_point .point_lead {
  font-size: calc(13 * (60rem / 390));
  line-height: 2;
  text-align: center;
}

.accordion_outside input {
  display: none;
}

.accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

.opened .accordion_wrap {
  grid-template-rows: 1fr;
}

.accordion_inner {
  overflow: hidden;
  transition: padding .3s;
}

.opened .accordion_inner.point_lead {
  padding-top: calc(20 * (60rem / 390));
}

.accordion_btn {
  width: fit-content;
  margin: calc(10 * (60rem / 390)) auto 0;
  opacity: .6;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  cursor: pointer;
}

.opened .accordion_btn .closed,
.accordion_btn .opened {
  display: block;
}

.accordion_btn .closed,
.opened .accordion_btn .opened {
  display: none;
}

.each_point .point_lead .txt_highlight {
  font-size: calc(18 * (60rem / 390));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: calc(8 * (60rem / 390));
  text-underline-offset: calc(-3 * (60rem / 390));
  text-decoration-color: var(--color_underline);
}

.each_point .keyIngredient_list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(40 * (60rem / 390));
}

.each_point .keyIngredient_list::before,
.each_point .keyIngredient_list::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1px;
  height: calc(20 * (60rem / 390));
  background: var(--color_regular);
  opacity: .5;
  content: "";
}

.each_point .keyIngredient_list::before {
  rotate: -45deg;
}

.each_point .keyIngredient_list::after {
  rotate: 45deg;
}

.each_point .keyIngredient_list li {
  display: grid;
  place-items: center;
  width: calc(140 * (60rem / 390));
  height: calc(140 * (60rem / 390));
  border-radius: 50%;
  background: #fff;
  text-align: center;
}

.each_point .keyIngredient_list li > div {
  padding-top: calc(10 * (60rem / 390));
}

.each_point .keyIngredient_list li .effect {
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(17 * (60rem / 390));
  font-weight: 500;
}

.each_point .keyIngredient_list li .ingredient {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.4;
  letter-spacing: 0;
}

.each_point .notes_list {
  margin-top: calc(25 * (60rem / 390));
}

.review_area {
  margin-top: calc(60 * (60rem / 390));
}

.review_area h3 {
  position: relative;
  z-index: 1;
  margin-bottom: calc(30 * (60rem / 390));
  padding: calc(10 * (60rem / 390)) 0;
  font-size: calc(20 * (60rem / 390));
  font-weight: 500;
  text-align: center;
  color: var(--color_brown);
}

.review_area h3 .txt_S {
  display: block;
  margin-bottom: calc(8 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
}

.review_area h3::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_brown);
  opacity: .2;
  content: "";
}

.review_list_wrap {
  padding: 0 calc(15 * (60rem / 390));
}

.review_list li {
  width: calc(340 * (60rem / 390));
  height: auto;
  margin-right: calc(10 * (60rem / 390));
  padding: calc(25 * (60rem / 390)) calc(15 * (60rem / 390));
  border: solid 1px rgba(20, 20, 20, .5);
  background: #fff;
}

.review_list li:nth-last-of-type(1) {
  margin-right: 0;
}

.review_img_wrap {
  float: left;
  width: calc(158 * (60rem / 390));
  margin-right: calc(12 * (60rem / 390));
}

.staff_wrap {
  margin-bottom: calc(15 * (60rem / 390));
  padding-top: calc(10 * (60rem / 390));
}

.staff_skinType {
  display: flex;
  height: calc(22 * (60rem / 390));
  margin-bottom: calc(10 * (60rem / 390));
  font-weight: 500;
}

.staff_skinType .ttl {
  display: grid;
  place-items: center;
  width: calc(62 * (60rem / 390));
  background: var(--color_regular);
  font-size: calc(12 * (60rem / 390));
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
}

.staff_skinType .skinType {
  display: grid;
  place-items: center;
  width: calc(76 * (60rem / 390));
  border: solid var(--color_regular) 1px;
  border-left: none;
  background: #fff;
  font-size: calc(13 * (60rem / 390));
}

.staff_skinType .skinType.txt_S {
  font-size: calc(10 * (60rem / 390));
  letter-spacing: 0;
}

.staff_detail {
  display: flex;
  align-items: center;
  gap: calc(8 * (60rem / 390));
}

.staff_img {
  width: calc(48 * (60rem / 390));
  border-radius: 50%;
  overflow: clip;
}

.staff_detail .txt_wrap {
  flex: 1;
}

.staff_name {
  margin-bottom: calc(6 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
}

.staff_name .txt_B {
  font-weight: 700;
}

.staff_link {
  position: relative;
  width: fit-content;
  padding-right: calc(8 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.staff_link::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(5 * (60rem / 390));
  height: calc(5 * (60rem / 390));
  border-top: solid var(--color_regular) calc(1.5 * (60rem / 390));
  border-right: solid var(--color_regular) calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.review_txt {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.6;
  text-align: justify;
}

.swiper .swiper-scrollbar {
  position: static;
  width: calc(300 * (60rem / 390));
  height: calc(2 * (60rem / 390));
  margin: calc(25 * (60rem / 390)) auto 0;
  background: rgba(20, 20, 20, .3);
}

.swiper .swiper-scrollbar-drag {
  background: var(--color_regular);
}

.fade-slider {
  position: relative;
}

.fade-slider .review_img:nth-of-type(1) {
  position: relative;
  z-index: 1;
}

.fade-slider .review_img:nth-of-type(2) {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  animation: fadeChange 5s infinite alternate;
}

@keyframes fadeChange {
  0%, 40% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}


/*-------------------------pickup*/

/*Basic Series-------------------*/
.each_area:nth-of-type(n+2) {
  margin-top: calc(100 * (60rem / 390));
}

.basicSeries_area .area_ttl_wrap {
  margin-bottom: calc(45 * (60rem / 390));
}

.area_ttl_wrap > p {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(10 * (60rem / 390));
  padding: calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) 0;
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
}

.area_ttl_wrap > p::before,
.area_ttl_wrap > p::after {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: calc(12 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.area_ttl_wrap > p::before {
  left: 0;
  rotate: -30deg;
}

.area_ttl_wrap > p::after {
  right: 0;
  rotate: 30deg;
}

.basicSeries_concern .concern_list {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.basicSeries_concern .concern_list li:nth-of-type(n+2) {
  margin-top: calc(8 * (60rem / 390));
}

.basicSeries_concern .notes_list {
  width: fit-content;
  margin: calc(10 * (60rem / 390)) auto 0;
}

.step_list_wrap {
  margin-top: calc(70 * (60rem / 390));
}

.step_list_wrap h3 {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(45 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390)) calc(8 * (60rem / 390));
  border-bottom: solid var(--color_green) 1px;
  font-size: calc(18 * (60rem / 390));
  font-weight: 500;
  color: var(--color_green);
}

.step_list_wrap h3 .txt_L {
  margin-right: calc(3 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 700;
}

.step_list_wrap h3::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(15 * (60rem / 390));
  height: calc(4 * (60rem / 390));
  margin-bottom: calc(-2 * (60rem / 390));
  background: #fff;
  content: "";
}

.step_list_wrap h3::after {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: 1px;
  height: calc(15 * (60rem / 390));
  margin-left: calc(8 * (60rem / 390));
  background: var(--color_green);
  content: "";
  rotate: 30deg;
  transform-origin: top center;
}

.each_step {
  position: relative;
  z-index: 1;
  padding-bottom: calc(45 * (60rem / 390));
}

.each_step::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(35 * (60rem / 390)));
  background: linear-gradient(transparent, var(--color_beige));
  content: "";
}

.each_step::after {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  border-top: solid var(--color_beige) calc(35 * (60rem / 390));
  border-left: solid transparent calc(195 * (60rem / 390));
  border-right: solid transparent calc(195 * (60rem / 390));
  margin-bottom: calc(.5 * (60rem / 390));
  content: "";
}

.each_step:nth-of-type(n+2) {
  margin-top: calc(30 * (60rem / 390));
}

.each_step:nth-last-of-type(1) {
  padding-bottom: calc(25 * (60rem / 390));
}

.each_step:nth-last-of-type(1)::before {
  height: 100%;
}

.each_step:nth-last-of-type(1)::after {
  display: none;
}

.each_step > h4 {
  display: flex;
  justify-content: center;
  height: calc(26 * (60rem / 390));
  margin-bottom: calc(20 * (60rem / 390));
  background: #fff;
  font-size: calc(15 * (60rem / 390));
  font-weight: 500;
  color: var(--color_green);
}

.each_step > h4 .step_num {
  display: grid;
  place-items: center;
  width: calc(65 * (60rem / 390));
  padding-bottom: calc(2 * (60rem / 390));
  background: var(--color_green);
  font-size: calc(12 * (60rem / 390));
  font-weight: 700;
  color: #fff;
  vertical-align: .1em;
}

.each_step > h4 .step_num .txt_L {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
}

.each_step > h4 .step_ttl {
  display: grid;
  place-items: center;
  width: calc(75 * (60rem / 390));
  border: solid var(--color_green) 1px;
  border-left: none;
}

.each_step .product_copy {
  margin-bottom: calc(20 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(18 * (60rem / 390));
  font-weight: 500;
  text-align: center;
}

.each_step .product_wrap {
  display: flex;
  align-items: center;
  padding: 0 calc(40 * (60rem / 390));
}

.each_step .product_wrap .product_img {
  display: flex;
  justify-content: center;
  width: calc(140 * (60rem / 390));
  height: calc(180 * (60rem / 390));
}

.each_step .product_wrap .product_img a {
  height: 100%;
}

.each_step .product_wrap .product_img img {
  width: auto;
  height: 100%;
}

.each_step .product_wrap .txt_wrap {
  flex: 1;
  text-align: center;
}

.each_step .product_wrap .product_name {
  font-size: calc(16 * (60rem / 390));
  font-weight: 700;
  line-height: 1.5;
}

.each_step .product_wrap .product_name span {
  display: block;
  width: fit-content;
  margin: 0 auto calc(4 * (60rem / 390));
  padding: calc(3 * (60rem / 390)) calc(6 * (60rem / 390));
  border: solid rgba(20, 20, 20, .5) 1px;
  font-size: calc(11 * (60rem / 390));
  font-weight: 500;
}

.each_step .product_wrap .market_name {
  margin-top: calc(5 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.each_step .product_wrap .product_price {
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
}

.each_step .product_wrap .product_price .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.each_step .product_wrap .product_link {
  margin: calc(18 * (60rem / 390)) auto 0;
}

.each_step .notes {
  margin-top: calc(20 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  text-align: center;
}

.basicSeries_area .btn_allitem {
  margin-top: calc(50 * (60rem / 390))
}

.basicSeries_area .btn_allitem a {
  border-color: var(--color_brown);
  background: var(--color_brown);
  font-size: calc(22 * (60rem / 390));
  font-weight: 500;
}

.basicSeries_area .btn_allitem a:hover {
  background: #fff;
  color: var(--color_brown);
}

.basicSeries_area .btn_allitem a .txt_S {
  display: block;
  margin-top: calc(8 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
}

.basicSeries_area .btn_allitem a:hover::before {
  border-color: var(--color_brown);
}
 
/*-------------------Basic Series*/

/*lineup-------------------------*/
.lineup_area .area_ttl {
  margin-bottom: calc(35 * (60rem / 390));
}

.each_cat {
  background: linear-gradient(transparent, var(--color_beige));
  padding-bottom: calc(40 * (60rem / 390));
}

.each_cat:nth-of-type(n+2) {
  margin-top: calc(50 * (60rem / 390));
}

.each_cat:nth-last-of-type(1) {
  padding-bottom: calc(70 * (60rem / 390));
}

.cat_ttl {
  margin-bottom: calc(20 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 500;
  text-align: center;
}

.lineup_list_wrap {
  padding: 0 calc(15 * (60rem / 390));
}

.lineup_list {
  display: flex;
  justify-content: center;
  gap: calc(10 * (60rem / 390));
}

.lineup_list.swiper-wrapper {
  justify-content: flex-start;
  gap: 0;
}

.lineup_list li {
  position: relative;
  width: calc(175 * (60rem / 390));
  height: auto;
  padding: calc(15 * (60rem / 390)) 0 calc(68 * (60rem / 390));
  border: solid rgba(20, 20, 20, .5) 1px;
  background: #fff;
  text-align: center;
}

.lineup_list li.swiper-slide {
  margin-right: calc(8 * (60rem / 390));
}

.lineup_list li.swiper-slide:nth-last-of-type(1) {
  margin-right: 0;
}

.lineup_list .product_copy {
  margin-bottom: calc(15 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
}

.lineup_list .product_copy.letterspacing0 {
  letter-spacing: 0;
}

.lineup_list .product_img {
  display: flex;
  justify-content: center;
  margin-bottom: calc(15 * (60rem / 390));
}

.lineup_list .product_img a {
  height: 100%;
}

.lineup_list .product_img img {
  width: auto;
  height: calc(125 * (60rem / 390));
}

.lineup_list .product_name {
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .03em;
}

.lineup_list .product_price {
  margin-top: calc(10 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
}

.lineup_list .product_price .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.lineup_list .product_link {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  margin-bottom: calc(25 * (60rem / 390));
}
/*-------------------------lineup*/

/*brand about--------------------*/
.brandAbout_area {
  padding: calc(60 * (60rem / 390)) 0;
  background: url(../img/2605/bg_002.jpg) bottom center / cover no-repeat;
}

.brandAbout_area h3 .logo {
  display: block;
  width: calc(60 * (60rem / 390));
  margin: 0 auto calc(15 * (60rem / 390));
}

.brandAbout_area h3 {
  margin-bottom: calc(35 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 500;
  text-align: center;
  color: #fff;
}

.brandAbout_area h3 .txt_L {
  margin-left: calc(8 * (60rem / 390));
  font-size: calc(26 * (60rem / 390));
  font-weight: 700;
  vertical-align: -.1em;
}

.brandAbout_area ul {
  width: fit-content;
  margin: 0 auto;
  color: #fff;
}

.brandAbout_area ul li {
  display: flex;
  gap: calc(20 * (60rem / 390));
}

.brandAbout_area ul li:nth-of-type(n+2) {
  margin-top: calc(30 * (60rem / 390));
}

.brandAbout_area ul li h4 {
  display: grid;
  place-items: center;
  width: calc(82 * (60rem / 390));
  height: calc(27 * (60rem / 390));
  margin: calc(6 * (60rem / 390)) 0 0 calc(15 * (60rem / 390));
  border: solid #fff 1px;
  font-size: calc(16 * (60rem / 390));
  font-weight: 500;
}

.brandAbout_area ul li p {
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  line-height: 2;
}

.brandAbout_area .btn_allitem {
  margin-top: calc(380 * (60rem / 390));
}

.brandAbout_area .btn_allitem a {
  border-color: rgba(255, 2555, 255, .8);
  background: rgba(255, 2555, 255, .8);
  font-size: calc(22 * (60rem / 390));
  font-weight: 500;
  color: var(--color_brown);
}

.brandAbout_area .btn_allitem a:hover {
  background: transparent;
  color: #fff;
}

.brandAbout_area .btn_allitem a .txt_S {
  display: block;
  margin-top: calc(8 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
}

.brandAbout_area .btn_allitem a::before {
  border-color: var(--color_brown);
}

.brandAbout_area .btn_allitem a:hover::before {
  border-color: #fff;
}
/*--------------------brand about*/

/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
#share {
  z-index: 10 !important;
  transition: translate .3s;
}

#share.move {
  translate: 0 calc(-70 * (60rem / 390));
}

.share-txt {
  display: none;
}

.only_pc {
  display: none;
}

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


/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none !important;
  }

  .LP_page_inner {
    position: relative;
    z-index: 1;
    width: 60rem;
    min-height: 100vh;
    margin: -100vh auto 0;
    overflow: clip;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }

  .fixed_area {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background: var(--color_beige);
  }
  
  .fixed_left,
  .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100%;
  }

  .ttl_pc {
    width: 32rem;
  }

  .pc_nav .nav_list {
    display: block;
    border: none;
  }

  .pc_nav .nav_list li:nth-of-type(n+2) {
    margin-top: 5rem;
  }

  .pc_nav .nav_list li::before {
    display: none;
  }

  .pc_nav .nav_list li a {
    display: block;
    place-items: flex-start;
    height: auto;
  }

  .pc_nav .nav_list li p {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    color: var(--color_brown);
  }

  .pc_nav .nav_list li p .txt_eng {
    display: block;
    margin-bottom: .8rem;
    font-size: 2.8rem;
  }

  .pc_nav .nav_list li p.nav_campaign {
    color: var(--color_green);
    cursor: pointer;
  }

   .pc_nav .nav_list li p.nav_campaign .txt_eng {
    font-size: 3rem;
    font-weight: 700;
   }

   .pc_nav .nav_list li p.nav_campaign .txt_eng .txt_S {
    display: block;
    margin-bottom: .8rem;
    font-size: 1.5rem;
   }

}
/*------------------------------------------------------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));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/