@charset "UTF-8";

.main_inner {
  overflow-x: hidden;
}
#breadcrumbs {
  width: 140rem;
  margin-inline: auto;
}

/*
///////////////////////////////////////////////////////////////////////////////////////
  ベーススタイル
///////////////////////////////////////////////////////////////////////////////////////
*/
.barbour_241023 {
  overflow: hidden;
  --color-black: #000;
  --color-green: #204128;
  --font-f37-ginger: "F37 Ginger", sans-serif;
  font-feature-settings: "palt";
  color: var(--color-black);
}
.txt_Box02{
  text-align: justify;
  line-height: 1.8695652174;
}
.cont_inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.credit a {
  font-size: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.7rem;
}
.gridArea{
  display: grid;
  margin: 0 auto;
}
.flexArea{
  display: flex;
}
.buy_btn {
  background-color: var(--color-green);
  border-radius: 50px;
  border: solid 1px var(--color-green);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1rem;
}
.buy_btn span {
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.buy_btn:hover {
  background-color: transparent;
  border: solid 1px var(--color-green)
}
.buy_btn:hover span {
  color: var(--color-green);
}
.font-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.font-en {
  font-family: var(--font-f37-ginger);
  font-weight: 400;
}
.font-en02 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
/* @font-face {
  font-family: "ginger";
  font-display: swap;
  font-weight: 700;
  src: url("../font/F37GingerBold.otf") format("opentype");
}

@font-face {
  font-family: "ginger";
  font-display: swap;
  font-weight: 400;
  src: url("../font/F37GingerRegular.ttf") format("truetype");
} */


/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

@media screen and (min-width: 768px) {
  .flexAreaPc {
    display: flex;
  }
  .gridAreaPc{
    display: grid;
  }

  .buy_btn {
    width: 10rem;
    height: 3rem;
  }
  .buy_btn span{
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  .credit ul li {
    font-size: calc(31 * (100vw / 375));
  }
  .credit a {
    font-size: calc(30 * (100vw / 375));
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0 calc(8 * (100vw / 375));
  }
  .txt_Box02{
    font-size: calc(23* (100vw / 375));
    width: calc(680*(100vw / 375));
    text-align: center;
  }
  .buy_btn {
    width: calc(100* (100vw / 375));
    height: calc(30* (100vw / 375));
    margin: 0 auto calc(51* (100vw / 375)) calc(113* (100vw / 375));
  }
  .buy_btn span{
    font-size: calc(18* (100vw / 375));
  }
}


/*
///////////////////////////////////////////////////////////////////////////////////////
  fv-section
///////////////////////////////////////////////////////////////////////////////////////
*/

.fv-section {
  position: relative;
  margin-right: auto;
  margin-left: auto;
}
.fv-section::after{
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.mainVisual__wrapper {
  position: relative;
  justify-content: space-between;
}
.mainVisual {
  position: relative;
  z-index: 1;
}
.mv .mainArea {
  position: relative;
}

.fv_txt {
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fv_ttl02 {
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.077em;
}
.fv_ttl02_sub{
  display: block;
  letter-spacing: 0.038em;
}
.fv_txt03{
  letter-spacing: 0.099em;
}
@media screen and (min-width: 768px) {
  .fv-section {
    max-width: 172.8rem;
    width: 100%;
    margin-bottom: 25.9rem;
  }
  .fv-section::after{
    background-image: url(../img/mv_bg.jpg);
    width: 100vw;
    height: 64.7rem;
  }
  .mainVisual__wrapper {
    position: relative;
    align-items: end;
    top: 12rem;
  }
  .main_txt{
    position: absolute;
    z-index: 10;
  }
  .mainVisual01_img{
    max-width: 29.4rem;
  }
  .main_txt01{
    max-width: 19.319rem;
    top: -8.5rem;
    right: -15.465rem;
  }
  .mainVisual03_img{
    max-width: 31.4rem;
    margin-left: 2.4rem;
    margin-bottom: 1rem;
  }
  .main_txt03{
    max-width: 3.86rem;
    top: 46.6%;
    /* bottom: 35%; */
    right: 2rem;
  }
  .mainVisual05_img{
    max-width: 28.8rem;
    margin-left: 7rem;
    margin-bottom: 0.5rem;
  }
  .main_txt05{
    max-width: 22.4rem;
    top: -12.9rem;
    left: 0.9rem;
  }
  .mainVisual02_img{
    max-width: 42.3rem;
    margin-right: -0.6rem;
    margin-bottom: 0.6rem;
  }
  .main_txt02{
    max-width: 22.3rem;
    top: -4.5rem;
    right: -3rem;
  }
  .mainVisual04_img{
    max-width: 30.6rem;
    margin-bottom: -0.3rem;
  }
  .main_txt04{
    max-width: 15.2rem;
    top: 63.7%;
    /* bottom: 20.8rem; */
    left: -3.3rem;
  }
  .fv_txt{
    margin: 17.1rem auto 0;
    padding-bottom: 9.5rem;
  }
  .fv_ttl01{
    width: 67.984rem;
    padding-bottom: 3.514rem;
  }
  .fv_ttl02_sub{
    font-size: 3rem;
    padding-bottom: 1.8rem;
    padding-right: 0.4rem;
  }
  .fv_ttl02{
    font-size: 4rem;
    padding-bottom: 3.9rem;
    padding-left: 0.2rem;
  }
  .fv_txt03{
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.75;
    padding-right: 0.4rem;
  }

}
@media screen and (max-width: 767px) {
  .fv-section {
    margin-bottom: calc(53.5* (100vw / 375));
  }
  .fv-section::after{
    background-image: url(../img/mv_bg_sp.jpg);
    height: 64.7rem;
  }
  .mv {
    width: 100%;
    margin: 0 auto;
  }
  .mainVisual__wrapper{
    margin-bottom: calc(19*(100vw / 375));
  }
  .mainVisual01_img{
    width: calc(64* (100vw / 375));
  }
  .mainVisual03_img{
    width: calc(68.2*(100vw / 375));
    margin-left: calc(-41*(100vw / 375));
    margin-top: calc(-2*(100vw / 375));
  }
  .mainVisual05_img{
    width: calc(63*(100vw / 375));
    margin-left: calc(-31*(100vw / 375));
    margin-top: calc(1*(100vw / 375));
  }
  .mainVisual02_img{
    position: absolute;
    width: calc(91.3*(100vw / 375));
    right: calc(-46.2*(100vw / 375));
    bottom: calc(6.5*(100vw / 375));
  }
  .mainVisual04_img{
    position: relative;
    width: calc(66*(100vw / 375));
    bottom: calc(4*(100vw / 375));
  }
  .fv_ttl02_sub{
    font-size: calc(16* (100vw / 375));
    padding-bottom: calc(12.66* (100vw / 375));
  }
  .fv_ttl01{
    width: calc(318.3* (100vw / 375));
    margin-bottom: calc(37* (100vw / 375));
  }
  .fv_ttl02{
    font-size: calc(24* (100vw / 375));
    padding-bottom: calc(19* (100vw / 375));
    line-height: 1.3333333333;
    letter-spacing: 0.04em;
  }
  .fv_ttl02_sub{
    display: none;
  }
  .fv_txt03{
    font-size: calc(13* (100vw / 375));
    width: calc(323* (100vw / 375));
    text-align: justify;
    padding-bottom: calc(50* (100vw / 375));
    line-height: 1.6153846154;
    letter-spacing: 0.13em;
  }
}
/*
///////////////////////////////////////////////////////////////////////////////////////
  contents 共通
///////////////////////////////////////////////////////////////////////////////////////
*/
.intro_left,
.intro_right{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intro_ttl{
  border-bottom: 1px solid var(--color-black);
}
.style-txt{
  line-height: 1;
}
.style-txt01,
.style-txt02{
  font-weight: 700;
}
.style-txt02{
  line-height: 1.5;
}
.style-txt03{
  line-height: 1.75;
}
.nmbr__wrapper{
  justify-content: space-between;
  margin: 0 auto;
}
/* PC */
@media screen and (min-width: 768px) {
  .contents01,
  .contents02{
    margin-bottom: 25.8rem;
  }
  .intro_right{
    padding-right: 2.4rem;
  }
  .intro_ttl{
    width: 90rem;
    margin: 0 auto 4.7rem;
  }
  .item-txt{
    width: 38.5rem;
    font-size: 1.6rem;
    line-height: 1.75;
    margin-bottom: 3.5rem;
    letter-spacing: 0.095em;
    padding-left: 1.1rem;
    text-align: justify;
  }
  .intro{
    margin-right: auto;
    margin-left: auto;
  }
  .intro__wrapper {
    justify-content: space-between;
    align-items: flex-start;
  }
  .item-name{
    width: 5.5rem;
    height: 2.5rem;
    margin-bottom: 4.8rem;
    padding-top: 1.5rem;
    margin-right: 0.5rem;
  }
  .nmbr__wrapper{
    width: 34.6rem;
  }
  .nmbr{
    width: 3rem;
    height: 3rem;
  }
  .style{
    position: relative;
    width: 94.8rem;
    margin-right: auto;
    margin-left: auto;
    justify-content: space-between;
  }
  .style-txt{
    font-size: 3.8rem;
    padding-bottom: 2rem;
  }
  .style-txt01{
    position: relative;
    font-size: 3.8rem;
    padding-bottom: 3.2rem;
    margin-bottom: 2.9rem;
    z-index: 10;
  }
  .style-txt01::after{
    content: "";
    position: absolute;
    width: 32.5rem;
    height: 1px;
    background-color: var(--color-green);
    bottom: 0;
    left: 0.5rem;
    z-index: 10;
  }
  .style02 .style-txt01::after {
    left: 0.1rem;
  }
  .style-left{
    position: absolute;
  }
  .intro,
  .style01,
  .style02 {
    margin-bottom: 13rem;
  }
  .style01,
  .style03 {
    justify-content: right;
  }
  .style01 .style-left,
  .style03 .style-left {
    left: 1.9rem;
  }
  .style-txt02 {
    font-size: 2.4rem;
    padding-left: 0.5rem;
    letter-spacing: 0.065em;
    padding-bottom: 1rem;
  }
  .style-txt03{
    font-size: 1.6rem;
    width: 25.5rem;
    padding-left: 0.5rem;
    letter-spacing: 0.086em;
    text-align: justify;
  }
  .style-img{
    width: 62rem;
    margin-right: 2.4rem;
  }
  .style-ttl{
    width: 20.3rem;
    margin-bottom: 1.8rem;
    margin-left: 0.6rem;
    margin-top: 0.2rem;
  }
  .style02{
    flex-direction: row-reverse;
  }
  .style02 .style-left{
    flex-direction: column;
    align-items: end;
  }
  .style02 .style-img{
    margin-left: 2.4rem;
    margin-right: 0;
  }
  .style02 .style-txt02 {
    padding-right: 1.2rem;
  }
  .style02 .style-txt01{
    text-align: right;
  }
  .style02 .style-txt03{
    padding-left: 0;
    letter-spacing: 0.17em;
    width: 25.1rem;
    padding-right: 0.1rem;
    text-align: justify;
  }
  .style02 .style-ttl{
    margin-right: 0.6rem;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .contents01 .intro,
  .contents01 .style-left,
  .contents02 .intro,
  .contents02 .style-left,
  .contents03 .intro,
  .contents03 .style-left {
    width: calc(323* (100vw / 375));
    margin-right: auto;
    margin-left: auto;
  }
  .intro{
    margin-bottom: calc(54.57* (100vw / 375));
  }
  .intro_ttl{
    width: calc(323* (100vw / 375));
    margin: 0 auto calc(13.5* (100vw / 375));
    padding-bottom: calc(12.3* (100vw / 375));
    padding-left: 0;
  }
  .item-name{
    width: calc(41.25* (100vw / 375));
    margin-bottom: calc(26* (100vw / 375));
  }
  .nmbr__wrapper{
    width: calc(259.5* (100vw / 375));
    margin-right: calc(31*(100vw / 375));
  }
  .nmbr{
    width: calc(22.5* (100vw / 375));
    height: calc(22.5* (100vw / 375));
  }
  .style-ttl{
    width: calc(162*(100vw / 375));
    margin-bottom: calc(12* (100vw / 375));
    margin-right: calc(79*(100vw / 375));
    margin-left: auto;
  }
  .style-txt01{
    position: relative;
    font-size: calc(30* (100vw / 375));
    padding-bottom: calc(26.5* (100vw / 375));
    margin: 0 auto calc(20* (100vw / 375));
    text-align: center;
  }
  .style-txt01::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--color-green);
    bottom: 0;
    left: calc(2* (100vw / 375));
    z-index: 10;
  }
  .style-txt02{
    font-size: calc(22* (100vw / 375));
    padding-bottom: calc(10.8*(100vw / 375));
    text-align: center;
    letter-spacing: 0.05em;
  }
  .style-txt03{
    font-size: calc(16* (100vw / 375));
    padding-bottom: calc(25* (100vw / 375));
    letter-spacing: 0.087em;
  }
  .style-img{
    width: 100%;
  }
  .style{
    margin-bottom: calc(49.65* (100vw / 375));
  }
  .style01 {
    margin-bottom: calc(54.65*(100vw / 375));
  }
  .style02 {
    margin-bottom: calc(55.65*(100vw / 375));
  }
  .style03 {
    margin-bottom: calc(103*(100vw / 375));
  }
  .item-txt{
    font-size: calc(16* (100vw / 375));
    margin-bottom: calc(38*(100vw / 375));
    line-height: 1.75;
    letter-spacing: 0.08em;
  }
  .item-img{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: calc(16*(100vw / 375));
  }
}

/*
///////////////////////////////////////////////////////////////////////////////////////
  contents01
///////////////////////////////////////////////////////////////////////////////////////
*/

/* PC */
@media screen and (min-width: 768px) {
  .contents01 .intro{
    width: 94.8rem;
  }
  .contents01 .intro_ttl img{
    width: 61.248rem;
    padding-bottom: 1.5rem;
    margin-left: 0;
  }
  .contents01 .item-img{
    width: 41rem;
    margin-bottom: 1.625rem;
  }
  .contents01 .intro_img{
    width: 45.8rem;
  }
  .contents01 .nmbr__wrapper{
    margin: 0 auto 0 5.3rem;
  }
  .contents01 .style02{
    position: relative;
    width: 97rem;
    display: flex;
    justify-content: left;
  }
  .contents01 .style02 .style-txt01{
    width: 33rem;
  }
  .contents01 .style02 .style-left{
    position: absolute;
    right: 3.2rem;

  }
  .contents01 .style-right {
    margin-left: 1.1rem;
  }
  .contents01 .style02 .style-ttl{
    margin-right: 0.4rem;
  }
  /* .contents01 .style-ttl{
    width: 20.5rem;
    margin-bottom: 0.5rem;
  } */

}

/* SP */
@media screen and (max-width: 767px) {
  .contents01 .intro_ttl img{
    width: calc(305.59* (100vw / 375));
  }
  .contents01 .item-img{
    width: calc(306.6*(100vw / 375));
    margin-left: calc(6*(100vw / 375));
  }
  .contents01 .intro_img{
    width: calc(343.6*(100vw / 375));
  }
}

/*
///////////////////////////////////////////////////////////////////////////////////////
  contents02
///////////////////////////////////////////////////////////////////////////////////////
*/

/* PC */
@media screen and (min-width: 768px) {
  .contents02 .intro{
    width: 94.8rem;
  }
  .contents02 .intro_ttl{
    margin: 0 auto 2rem;
    padding-bottom: 1.5rem;
  }
  .contents02 .intro_left{
    margin-left: -2.9rem;
  }
  .contents02 .intro_ttl img{
    width: 36.533rem;
    padding-bottom: 0;
    margin-left: 0;
  }
  .contents02 .item-txt{
    margin-left: 1.7rem;
    letter-spacing: 0.065em;
  }
  .contents02 .item-img{
    width: 45.6rem;
    margin-bottom: 0.1rem;
  }
  .contents02 .intro_right{
    margin-top: 2.7rem;
    padding-right: 0.5rem;
  }
  .contents02 .buy_btn {
    margin-left: 2.4rem;
  }
  .contents02 .item-name{
    margin-right: 1rem;
  }
  .contents02 .intro_img{
    width: 49.272rem;
  }
  .contents02 .nmbr__wrapper{
    margin: 0 auto 1rem 6.9rem;
  }
  .contents02 .style02{
    position: relative;
    width: 97rem;
    display: flex;
    justify-content: left;
  }
  .contents02 .style02 .style-txt01{
    width: 33rem;
  }
  .contents02 .style02 .style-left{
    position: absolute;
    right: 3.2rem;

  }
  .contents02 .style-right {
    margin-left: 1.1rem;
  }
  .contents02 .style02 .style-ttl{
    margin-right: 0.4rem;
  }
  .contents02 .style-txt01{
    padding-bottom: 3rem;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .contents02 .intro{
    width: calc(318*(100vw / 375));
    margin-bottom: calc(48.57*(100vw / 375));
  }
  .contents02 .intro_ttl{
    margin: 0 auto calc(7.5*(100vw / 375));
  }
  .contents02 .intro_ttl img{
    width: calc(182.66* (100vw / 375));
  }
  .contents02 .item-img {
    position: relative;
    width: calc(325*(100vw / 375));
    left: calc(-11*(100vw / 375));
    margin-bottom: calc(9*(100vw / 375));
  }
  .contents02 .item-txt{
    margin-bottom: calc(35*(100vw / 375));
  }
  .contents02 .intro_img{
    width: calc(372*(100vw / 375));
    position: relative;
    top: calc(2.5*(100vw / 375));
    left: calc(1*(100vw / 375));
  }
  .contents02 .buy_btn{
    margin: 0 auto calc(51*(100vw / 375)) calc(111*(100vw / 375));
  }
  .contents02 .nmbr__wrapper {
    margin-right: calc(28*(100vw / 375));
  }
}

/*
///////////////////////////////////////////////////////////////////////////////////////
  contents03
///////////////////////////////////////////////////////////////////////////////////////
*/

/* PC */
@media screen and (min-width: 768px) {
  .contents03 {
    margin-bottom: 19.4rem;
  }
  .contents03 .intro{
    width: 94.8rem;
  }
  .contents03 .intro_ttl{
    margin: 0 auto 4.7rem;
    padding-bottom: 1.5rem;
  }
  .contents03 .intro_left{
    margin-left: -2.9rem;
  }
  .contents03 .intro_ttl img{
    width: 29.5rem;
    padding-bottom: 0;
    margin-left: 0;
  }
  .contents03 .item-txt{
    margin-left: 3.5rem;
    letter-spacing: 0.065em;
  }
  .contents03 .item-img{
    width: 41.7rem;
    margin-left: 1.6rem;
  }
  .contents03 .intro_right{
    padding-right: 0.8rem;
  }
  .contents03 .buy_btn {
    margin-left: 4.7rem;
  }
  .contents03 .item-name{
    margin-left: 1.6rem;
  }
  .contents03 .intro_img{
    width: 50.873rem;
    margin-top: -3.4rem;
  }
  .contents03 .nmbr__wrapper{
    margin: 0 auto 1rem 8.8rem;
  }
  .contents03 .style02{
    position: relative;
    width: 97rem;
    display: flex;
    justify-content: left;
  }
  .contents03 .style02 .style-txt01{
    width: 33rem;
  }
  .contents03 .style02 .style-left{
    position: absolute;
    right: 3.2rem;

  }
  .contents03 .style-right {
    margin-left: 1.1rem;
  }
  .contents03 .style02 .style-ttl{
    margin-right: 0.4rem;
  }
  .contents03 .style-txt01{
    padding-bottom: 3rem;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .contents03 .intro{
    margin-bottom: calc(31.57*(100vw / 375));
  }
  .contents03 .intro_ttl img{
    width: calc(146.37* (100vw / 375));
  }
  .contents03 .intro_ttl {
    padding-left: calc(3*(100vw / 750));
  }
  .contents03 .item-img {
    width: calc(313*(100vw / 375));
    margin-top: calc(20*(100vw / 375));
    margin-right: calc(7*(100vw / 375));
    margin-bottom: calc(-4*(100vw / 375));
  }
  .contents03 .item-txt {
    margin-bottom: calc(35*(100vw / 375));
  }
  .contents03 .item-name {
    margin-bottom: calc(25*(100vw / 375));
  }
  .contents03 .intro_img {
    position: relative;
    width: calc(383*(100vw / 375));
    top: calc(-11*(100vw / 375));
    left: calc(3*(100vw / 375));
  }
  .contents03 .style-img {
    width: calc(381.5*(100vw / 375));
  }
  .contents03 .style01,
  .contents03 .style02,
  .contents03 .style03 {
    margin-bottom: calc(44.65*(100vw / 375));
  }
  .contents03 .style02 {
    margin-bottom: calc(45.65*(100vw / 375));
  }
  .contents03 .style03 {
    margin-bottom: calc(51.65*(100vw / 375));
  }
}



/*
///////////////////////////////////////////////////////////////////////////////////////
  アニメーション
///////////////////////////////////////////////////////////////////////////////////////
*/
/* mainvisualフェード */
.mainVisual {
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}
.mainVisual01 {
  animation: catch_anime 1.4s forwards 1s;
}
.mainVisual02 {
  animation: catch_anime 1.4s forwards 2s;
  animation-delay: 2s;
}
.mainVisual03 {
  animation: catch_anime 1.4s forwards 3s;
  animation-delay: 3s;
}
.mainVisual04 {
  animation: catch_anime 1.4s forwards 4s;
  animation-delay: 4s;
}
.mainVisual05 {
  animation: catch_anime 1.4s forwards 4s;
  animation-delay: 5s;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* フェード */
.jsFade {
  opacity: 0;
  transform: translateY(20px);
}
.jsFade.isActive {
  opacity: 1;
  transform: translateY(0px);
  transition: all .7s;
}