@charset "shift_jis";
/* Updated 2026/07/23.T */

/*-------------------------------
layout
-------------------------------*/
body {
  overflow: hidden;
  min-width: auto;
}
#header-wrap {
  z-index: 4;
}
.cpEndTxt {
  z-index: 4;
}
#containment-area {
  margin-bottom: 0;
}
#footer-area {
  position: relative;
  z-index: 3;
}
#footer-content {
  margin-top: 0;
}
.section-main{
  position: relative;
  overflow: visible;
  margin: 0 auto;
  max-width: 500px;
  background: #FEF5E4;
  box-shadow: 0 0 30px 0 rgba(101, 101, 101, 0.10);
}
.layout-container01 {
  position: relative;
  overflow: visible;
  margin: 0 auto;
  max-width: 500px;
}


/*-----------------------
nav-area01
------------------------*/
.nav-area01{
  position: relative;
  padding: 0 16px 65px;
  background-color: #8CE2F1;
}
.nav-area01 > .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.nav-area01 > .list > .item > a{
  position: relative;
  display: block;
  padding: 0 0 0 18px;
  color: #006AB5;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-decoration-line: underline;
  text-align: center;
}
.nav-area01 > .list > .item > a:before{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  width: 12px;
  height: 7px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_ico_arrow_01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: invert(23%) sepia(98%) saturate(1993%) hue-rotate(188deg) brightness(93%) contrast(102%);
}

.nav-area01 > .list > .item._btn{
  width: calc((100% / 2) - 6px);
}
.nav-area01 > .list > .item._btn > a{
  width: 100%;
  padding: 12px 10px 12px 10px;
  color: #00563A;
  line-height: 1.3;
  text-decoration: none;
  background-color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 3px 4px 0 0 #00563A;
}
.nav-area01 > .list > .item._btn > a:before{
  left: 11px;
  filter: invert(25%) sepia(15%) saturate(3635%) hue-rotate(119deg) brightness(93%) contrast(102%);
}


/*-----------------------
intro-area01
------------------------*/
.intro-area01{
  position: relative;
  z-index: 1;
  background-color: #F3D708;
}
.intro-area01 > .inner{
  position: relative;
  z-index: 1;
  padding: 34px 16px 0;
}
.intro-area01 > .inner:before{
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  min-width: 375px;
  width: 100%;
  height: 51px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_intro_01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.intro-area01 > .inner > .link-area01{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px 0;
  padding: 20px 14px 9px;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}
.intro-area01 > .inner > .link-area01 > .btn01{
  position: relative;
  display: block;
  width: 100%;
  padding: 11px 16px;
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  background-color: #FF5F04;
  border: 1px solid #FFF;
  border-radius: 40px;
  box-shadow: 0 6px 8px 0 rgba(193, 93, 0, 0.30);
}
.intro-area01 > .inner > .link-area01 > .btn01 > .inner > .bubble{
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 4px 8px 5px 11px;
  color: #000000;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.202em;
  text-align: center;
  background-color: #FFF;
  border-radius: 91px;
}
.intro-area01 > .inner > .link-area01 > .btn01 > .inner > .bubble:before{
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 4px solid #ffffff;
  border-bottom: 0;
}

.intro-area01 > .inner > .anchor-area01{
  margin-top: 10px;
}
.intro-area01 > .inner > .anchor-area01{
  text-align: center;
}
.intro-area01 > .inner > .anchor-area01 > a{
  color: #141D1D;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.07em;
}



/*-----------------------
section-area01
------------------------*/
.section-area01{
  position: relative;
}
.section-area01:before{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  min-width: 375px;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.section-area01.-type01{
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_kv_dot_01_sp.png');
  background-size: 14px 24px;
  background-repeat: repeat;
}
.section-area01.-type02{
  background-color: #F3D708;
}
.section-area01.-type03{
  background-color: #8CE2F1;
}

.section-area01.-type01:before{
  top: -6px;
  height: 77px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_section_01.svg');
}
.section-area01.-type02:before{
  top: -48px;
  height: 77px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_section_02.svg');
}
.section-area01.-type03:before{
  top: -67px;
  height: 67px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_section_03.svg');
}

.section-area01.-type01 > .inner{
  padding: 159px 16px 72px;
}
.section-area01.-type02 > .inner{
  padding: 117px 16px 119px;
}
.section-area01.-type03 > .inner{
  padding: 27px 16px 93px;
}

.section-area01 > .inner > .ttl01{
  padding: 12px 10px 15px 10px;
  color: #00563A;
  font-feature-settings: 'palt' on;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-align: center;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 12px;
}
.section-area01 > .inner > .ttl01 > span{
  padding: 0 6px;
  background: linear-gradient(transparent 60%, #BAECFF 40%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.section-area01 > .inner > .ttl01 + *{
  margin-top: 40px;
}
.section-area01 > .inner > .ttl02{
  color: #004831;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.section-area01 > .inner > .banner-area01{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 0;
}
.section-area01 > .inner > .banner-area01 > .item{
  position: relative;
}
.section-area01 > .inner > .banner-area01 > .item > .entry{
  position: absolute;
  top: -17px;
  left: 5px;
  z-index: 1;
}

.section-area01 > .inner > .text-layout01{
  margin-top: 32px;
}
.section-area01 > .inner > .text-layout01 + *{
  margin-top: 25px;
}
.section-area01 > .inner > .text-layout01 > .text{
  color: #00563A;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.07em;
}
.section-area01 > .inner > .text-layout01 > .text > em{
  position: relative;
  display: inline-block;
  padding: 0 26px;
  font-size: 1.8rem;
  font-weight: 700;
}
.section-area01 > .inner > .text-layout01 > .text > em:before,
.section-area01 > .inner > .text-layout01 > .text > em::after{
  position: absolute;
  top: 58%;
  content: '';
  width: 27px;
  height: 2px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_border_01.svg');
  background-size: 8px 2px;
  background-repeat: repeat-x;
  background-position: top center;
}
.section-area01 > .inner > .text-layout01 > .text > em:before{
  left: -4px;
  transform: translateY(-50%) rotate(64deg);
}
.section-area01 > .inner > .text-layout01 > .text > em:after{
  right: -4px;
  transform: translateY(-50%) rotate(-64deg) scale(-1,1);
}

.section-area01 > .inner > .text-layout01 > .text > em._large:before,
.section-area01 > .inner > .text-layout01 > .text > em._large:after{
  top: 46%;
  width: 39px;
}
.section-area01 > .inner > .text-layout01 > .text > em._large:before{
  left: -12px;
  transform: translateY(-50%) rotate(70deg);
}
.section-area01 > .inner > .text-layout01 > .text > em._large:after{
  right: -12px;
  transform: translateY(-50%) rotate(-70deg) scale(-1,1);
}

.section-area01 > .inner > .text-layout01 > .text > span{
  display: block;
  margin-top: 5px;
}


/*-----------------------
merit-area01
------------------------*/
.merit-area01{
  position: relative;
  z-index: 1;
  margin-top: -29px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_kv_dot_01_sp.png');
  background-size: 14px 24px;
  background-repeat: repeat;
  border-radius: 32px 32px 0 0;
}
.merit-area01 > .inner{
  padding: 80px 16px 80px;
}

.merit-area01 > .inner > .ttl01{
  color: #141D1D;
  font-feature-settings: 'palt' on;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
}
.merit-area01 > .inner > .ttl01 > span{
  padding: 0 7px;
  background: linear-gradient(transparent 60%, #FFFFFF 40%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.merit-area01 > .inner > .ttl01 > span > img{
  vertical-align: bottom;
}
.merit-area01 > .inner > .ttl02{
  position: relative;
  margin-top: 24px;
  padding: 26px 0;
  color: #004831;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}
.merit-area01 > .inner > .ttl02:before,
.merit-area01 > .inner > .ttl02:after{
  position: absolute;
  content: '';
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.merit-area01 > .inner > .ttl02:before{
  top: 0;
  left: 12px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_ico_quot_01.svg');
}
.merit-area01 > .inner > .ttl02:after{
  bottom: 0;
  right: 3px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_ico_quot_02.svg');
}

.merit-area01 > .inner > .text-block01{
  margin-top: 50px;
  text-align: center;
}

.merit-area01 > .inner > .list01{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0 48px;
  margin-top: 30px;
}
.merit-area01 > .inner > .list01 > .item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px 0;
  min-width: 100px;
}
.merit-area01 > .inner > .list01 > .item > .text{
  color: #004831;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.merit-area01 > .inner > .btn-type01{
  width: 100%;
  margin-top: 40px;
}

.merit-area01 > .inner > .picture-img{
  display: block;
  margin-top: 40px;
}

.merit-area01 > .inner > .vpoint-area01{
  margin-top: 47px;
}
.merit-area01 > .inner > .vpoint-area01 > .ttl01{
  padding: 5px 0;
  color: #141D1D;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-align: center;
}
.merit-area01 > .inner > .vpoint-area01 > .ttl01 > span{
  position: relative;
  padding-left: 51px;
}
.merit-area01 > .inner > .vpoint-area01 > .ttl01 > span:before{
  position: absolute;
  top: 54%;
  left: 2px;
  transform: translateY(-50%);
  content: '';
  width: 40px;
  height: 40px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_ico_03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.merit-area01 > .inner > .vpoint-area01 > .text{
  margin-top: 10px;
  color: #141D1D;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}
.merit-area01 > .inner > .vpoint-area01 > .text > em{
  color: #004831;
  font-size: 1.8rem;
  font-weight: 700;
}
.merit-area01 > .inner > .vpoint-area01 > .text > em > .num{
  font-size: 2.4rem;
}
.merit-area01 > .inner > .vpoint-area01 > .list01{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 16px;
}
.merit-area01 > .inner > .vpoint-area01 > .list01 > .item{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px 0;
  width: 100%;
}
.merit-area01 > .inner > .vpoint-area01 > .list01 > .item > .text{
  color: #004831;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.046em;
  text-align: center;
}
.merit-area01 > .inner > .vpoint-area01 > .btn-type01{
  width: 100%;
  margin-top: 40px;
}
.merit-area01 > .inner > .vpoint-area01 > .list-notice01{
  margin-top: 16px !important;
  color: #56635F;
}


/*-----------------------
layout-bg01
------------------------*/
.layout-bg01{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -5;
  display: flex;
  width: 100vw;
  height: 100vh;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_kv_dot_01.png');
  background-size: 28px 48px;
  background-repeat: repeat;
}
.layout-bg01:before{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  min-width: 1920px;
  width: 100%;
  height: 379px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_bg_kv_01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


/*-----------------------
menu-area01
------------------------*/
.menu-area01{
  position: fixed;
  top: 50%;
  right: calc(50vw - 789px);
  transform: translate(0, -44%);
  width: 380px;
  padding: 23px 24px 24px 28px;
  background: #FFF;
  border-radius: 16px;
  box-shadow: 0 9px 0 0 #F3D708;
}
.menu-area01 > .ttl01{
  position: relative;
  padding-bottom: 3px;
  color: #00563A;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}
.menu-area01 > .ttl01:after{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 29px;
  height: 2px;
  background: #F3D708;
  border-radius: 24px;
}
.menu-area01 > .list01{
  display: flex;
  flex-direction: column;
  gap: 4px 0;
  margin-top: 18px;
}
.menu-area01 > .list01 > .item > a{
  position: relative;
  display: block;
  padding: 8px 20px 8px 27px;
  color: #B3C8C1;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.5;
  text-decoration: none;
}
.menu-area01 > .list01 > .item > .js-navi01.is-current{
  padding-left: 24px;
  color: #00563A;
}
.menu-area01 > .list01 > .item > .js-navi01.is-current:before{
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  content: '';
  width: 12px;
  height: 12px;
  background-color: #F3D708;
  border-radius: 100%;
}
@media screen and (max-width: 1678px) {
  .menu-area01{
    right: 50px;
  }
}
@media screen and (max-width: 1460px) {
  .menu-area01{
    right: 30px;
    width: 305px;
    padding: 24px;
  }
}
@media screen and (max-width: 1230px) {
  .menu-area01{
    right: 10px;
    width: 281px;
    padding: 24px 12px;
  }
}


/*-----------------------
page-top
------------------------*/
.page-top{
  position: absolute;
  bottom: 24px;
  right: 90px;
}
.page-top._active{
  position: fixed;
}
.page-top > .foot-btn01{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  padding: 10px 10px 21px;
  color: #FFF;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  background-color: #F86801;
  border-radius: 100%;
}
.page-top > .foot-btn01 > span{
  position: relative;
  padding-top: 26px;
}
.page-top > .foot-btn01 > span:before{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('/kojin/olive/special/campaign/summer2026/imgs/index_ico_arrow_02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1678px) {
  .page-top{
    right: 50px;
  }
}
@media screen and (max-width: 1460px) {
  .page-top{
    right: 30px;
  }
}
@media screen and (max-width: 1230px) {
  .page-top{
    right: 10px;
  }
}



/*-----------------------
cmn
------------------------*/

/*-----------------------
modal
------------------------*/

/*-----------------------
general parts
------------------------*/

/*-----------------------
module
------------------------*/