@charset "Shift_JIS";
html {
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
  font-size: 62.5%;
}

h1 {
    margin: unset;
}

.header {
  z-index: 1000;
}

.content__inner {
  overflow: visible;
}

.wrapper {
    position: relative;
    width: 100%;
    min-width: 1212px;
    padding-top: 80px;
    overflow: hidden;
    text-align: left;
}

/* -------------------------------------------
 * kampot-gokochi
 * ------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

 .kampot-gokochi{
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
  color: #000;
  position: relative;
}
.kampot-gokochi .main__inner{
  width: 1212px;
  margin: auto;
  box-sizing: border-box;
}
.kampot-gokochi img{
  max-width: 100%;
}

/* kampot-gokochi__mv */
.kampot-gokochi__mv{
  width: 100%;
  position: relative;
  text-align: center;
}
.kampot-gokochi__mv::after{
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: 0.14;
  position: absolute;
  top: 0;
  left: 0;
}

/* kampot-gokochi__cv */
.kampot-gokochi__cv{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transform: translateY(100px);
  transition: all 0.3s;
}
.kampot-gokochi__cv.is-animated{
  transform: translateY(0);
}
.kampot-gokochi__cv__text{
  background-color: #d4b01f;
  width: calc(100% - 44%);
  text-align: right;
}
  .kampot-gokochi__cv__text img{
    max-width: 831px;
    width: auto;
    height: 70px;
  }
.kampot-gokochi__cv__button{
  width: 44%;
  background-color: #c21708;
  transition: all 0.3s;
}
  .kampot-gokochi__cv__button a{
    display: block;
  }
  .kampot-gokochi__cv__button:hover{
    opacity: 0.9;
  }
  .kampot-gokochi__cv__button a img{
    max-width: 669px;
    width: auto;
    height: 70px;
  }

/* kampot-gokochi__intro */
.kampot-gokochi__intro{
  background: url(/images/kampot-gokochi/bg01.jpg);
  padding-top: 78px;
  padding-bottom: 234px;
}
.kampot-gokochi__intro01 .intro01__title{
  margin-bottom: 7px;
}
.kampot-gokochi__intro01 .intro01__inner{
  display: flex;
  margin-right: -120px;
}
.kampot-gokochi__intro01 .intro01__cont{
  flex-shrink: 0;
}
.kampot-gokochi__intro01 .intro01__text01{
  margin-top: 138px;
}
.kampot-gokochi__intro01 .intro01__text02{
  font-size: 20px;
  letter-spacing: 1.8px;
  line-height: 2;
  margin-top: 32px;

}

.kampot-gokochi__intro02 .intro02__title{
  margin-top: 110px;
}
.kampot-gokochi__intro02 .intro02__inner{
  display: flex;
  margin-left: -140px;
}
.kampot-gokochi__intro02 .intro02__img01{
  margin-top: -50px;
  margin-right: 90px;
  position: relative;
}
.kampot-gokochi__intro02 .intro02__cont{
  flex-shrink: 0;
  margin-top: 86px;
}
.kampot-gokochi__intro02 .intro02__read{
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1.8px;
}
.kampot-gokochi__intro02 .intro02__text01{
  margin-top: 28px;
}
.kampot-gokochi__intro02 .intro02__text02{
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1.8px;
  margin-top: 4px;
}
.kampot-gokochi__intro02 .intro02__img02{
  margin-top: 100px;
}

/* kampot-gokochi__step */
.kampot-gokochi__step{
  background: url(/images/kampot-gokochi/bg02.jpg) center top no-repeat;
  background-size: cover;
  padding-top: 230px;
  margin-top: -130px;
  clip-path: polygon(0px 112px, 100% 0px, 100% 100%, 0px 100%);

}

.kampot-gokochi__step01{
  margin-top: 74px;
  display: flex;
}
.kampot-gokochi__step01 .step01__cont{
  flex-shrink: 0;
}
.kampot-gokochi__step01 .step01__title{
  margin-top: 68px;
}
.kampot-gokochi__step01 .step01__text{
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1.8px;
  color: #fff;
  margin-top: 15px;
  margin-left: 130px;
}
.kampot-gokochi__step01 .step01__img{
  margin-left: 30px;
}
.kampot-gokochi__step02{
  margin-top: 20px;
  margin-bottom: 23px;
  display: flex;
}
.kampot-gokochi__step02 .step02__cont{
  margin-left: 30px;
  flex-shrink: 0;
}
.kampot-gokochi__step02 .step02__title{
  margin-top: 52px;
}
.kampot-gokochi__step02 .step02__text{
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1.8px;
  color: #fff;
  margin-top: 7px;
  margin-left: 130px;
}
.kampot-gokochi__step03{
  margin-top: 82px;
  display: flex;
}
.kampot-gokochi__step03 .step03__cont{
  margin-left: 77px;
  margin-top: 66px;
}
.kampot-gokochi__step03 .step03__img{
  flex-shrink: 0 ;
  padding-left: 30px;
}
.kampot-gokochi__step03 .step03__text{
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1.8px;
  color: #fff;
  margin-top: 24px;
}

/* kampot-gokochi__feature */
.kampot-gokochi__feature{
  background-image: linear-gradient(90deg, #eada9d, #fcf8e8, #eada9d);
  background-size: 100% auto;
  padding: 110px 0;
}
.kampot-gokochi__feature__inner{
  background-color: #fff;
  box-shadow:0 0 0 2px #f1e7c7, 0 0 0 8px #fff, 0px 2px 6px 0 rgb(172 128 31 / 61%);
  padding-top: 82px;
  padding-bottom: 91px;
  text-align: center;
  max-width: 1188px;
  margin: auto;
}
@media screen and (max-width:1200px) {
  .kampot-gokochi__feature__inner{
    width: 1100px;
  }
}
.kampot-gokochi__feature__logo{
  margin-bottom: 30px;
}
.kampot-gokochi__feature__title{
  font-size: 36px;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: 1.8px;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.kampot-gokochi__feature__title::after{
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #a6760e;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.kampot-gokochi__feature__text{
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1.8px;
  margin-bottom: 2em;
}
.kampot-gokochi__feature__img01{
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 67px;
  margin-top: 40px;
}

/* kampot-gokochi__product */
.kampot-gokochi__product{
  padding-top: 70px;
  padding-bottom: 70px;
  background: url(/images/kampot-gokochi/bg03.jpg);
}
.kampot-gokochi__product__inner{
  background-color: #fff;
  box-shadow:0 0 0 2px #f1e7c7, 0 0 0 8px #fff, 0px 2px 6px 0 rgb(172 128 31 / 61%);
  position: relative;
  padding-top: 82px;
  padding-bottom: 90px;
}
@media screen and (max-width:1200px) {
  .kampot-gokochi__product__inner.main__inner{
    width: 1100px;
  }
}
.kampot-gokochi__product__badge{
  position: absolute;
  top: -43px;
  left: -52px;
}
.kampot-gokochi__product__cont{
  display: flex;
  justify-content: space-between;
}
.kampot-gokochi__product__cont .cont__img{
  margin-left: 95px;
}
.kampot-gokochi__product__cont .cont__inner{
  margin-right: 90px;
}
.kampot-gokochi__product__cont .cont__head{
  margin-bottom: 40px;
}
  .kampot-gokochi__product__cont .cont__text{
  font-size: 20px;
}
.kampot-gokochi__product__cont .cont__price{
  margin-top: 30px;
}
.kampot-gokochi__product__cont .cont__button{
  margin-top: 34px;
}
  .kampot-gokochi__product__cont .cont__button a{
    transition: all 0.3s;
  }
  .kampot-gokochi__product__cont .cont__button a:hover{
    opacity: 0.75;
  }



/* -------------------------------------------
 * Scroll Animation
 * ------------------------------------------- */
.an_true,
.an_delay_item {
  transition: opacity 0.8s, transform 0.8s;
}


.si_fade,
.si_top,
.si_bottom,
.si_left,
.si_right{
  opacity: 1;
}
.si_fade.scrollin,.scrollin .si_fade {opacity: 1;}
.si_top {transform: translate(0, -50px);}
.si_bottom {transform: translate(0, 100px);}
.si_left {transform: translate(-50px, 0);}
.si_right {transform: translate(50px, 0);}
.si_diagonal {transform: translate(50px, 50px);}
.si_top.scrollin,.scrollin .si_top,
.si_bottom.scrollin,.scrollin .si_bottom,
.si_left.scrollin,.scrollin .si_left,
.si_right.scrollin,.scrollin .si_right,
.si_diagonal.scrollin,.scrollin .si_diagonal{
  opacity: 1;
  transform : translate(0, 0);
}


/* 繧､繝ｳ繝医Ο繝壹ャ繝代�諡｡螟ｧ */
.intro01__img{
  position: relative;
}
.an_true.si_intro01_pepper{
  transform: scale(0);
  position: absolute;
  transition: ease-out;
}
.an_true.si_intro01_pepper.scrollin{
  animation-name: zoomInAnime;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.0);
  }

  to {
    transform: scale(1);
  }
}

/* 繧､繝ｳ繝医Ο邊偵�繝�ヱ繝ｼIN */
.intro02__img {
  position: relative;
}

.an_true.si_intro02_pepper {
  transform: scale(0);
  position: absolute;
  transition: ease-out;
  bottom: 0;
  right: 0;
}

.an_true.si_intro02_pepper.scrollin {
  animation-name: bottomToTopAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes bottomToTopAnime {
  from {
    transform: translate(-50px, 0);
  }

  to {
   transform: translate(0px, 0);
  }
}

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

}