@charset "UTF-8";
body {
  font-family: sans-serif , "yu-gothic-pr6n" ,"sans-serif", "游ゴシック体";
  display: unset;
  margin: 0px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  opacity: 0.7;
  transition: 0.2s;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow-clip-margin: unset;
  overflow: unset;
}
p {
  font-size: 1.5rem;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
h2 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 2.5rem;
}
#fs_CustomPage .fs-l-pageMain {
  max-width: 100%;
  padding: 0px;
}
#fs_CustomPage .fs-l-main {
  max-width: unset;
  padding: 0px;
}
.fs-l-footer {
  margin-top: 0px;
}
section.fs-l-pageMain {
  max-width: 100%;
  padding: 0px;
}

main.fs-l-main {
  padding: 0px;
  max-width: 100%!important;
}

section.fs-l-pageMain {
  max-width: 100%!important;
  padding: 0!important;
  margin: 0;
}

main.fs-l-main {
  padding: 0!important;
}

.sp_br {
display: none;
}
.pc_br {
  display: block;
}
.sp_br02 {
  display: none;
  }



/*メインタイトル*/
.mainArea {
  /* max-width: 1200px; */
  margin: 0 auto;
  height: auto;
  width: 100%;
  /* padding-top: 30px; */
}
/*
.mainArea_title {
  text-align: center;
  color: #035a36;
  position: absolute;
  width: 100%;
  border-right: solid 3px #035a36; 
  border-left: solid 3px #035a36; 
}
.mainArea_title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0px;
  left: -12px;
  right: -12px;
  border-right: solid 7px #035a36; 
  border-left: solid 7px #035a36; 
  z-index: -1;
}
.union_logo {
  position: absolute;
  top: 0;
}
.mainArea_title h1 {
  font-size: 5rem;
}
.mainArea_text {
  padding: 0 30px;
  font-size: 2rem;
}
*/
.mainArea_img {
  padding-bottom: 30px;
}
.buyBtn {
  max-width: 350px;
  margin: 0 auto;
}





/*緑 模様*/
.title_moyou {
  max-width: 100px;
  margin: 0 auto;
  /* padding-top: 30px; */
}
.title_moyou.title_moyou02 {
  max-width: 200px;
}



/*クーラーバッグ*/
p.newText {
    color: #055936;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    font-size: 2rem;
}

p.newText span {
    background-color: #055936;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 100px;
}
.newCooler {
  width: 90%;
  margin: 0 auto;
  /* margin: 10px; */
  /* text-align: center; */
  padding: 10px;
}



/*オンラインストアOPEN*/
.clumArea {
  margin: 0 auto;
  height: auto;
  width: 100%;
  background-image: url(https://keikyustore.itembox.design/item/LP/2024ecobag/images/bg02.jpg);
  /*position: relative;*/
  z-index: -10;
  padding: 30px 0;
}
.clumArea_Box {
  max-width: 1000px;
  margin: 0 auto;
  width: 90%;
  background-image: url(https://keikyustore.itembox.design/item/LP/2024ecobag/images/bg01.jpg);
  padding: 20px 50px;
  background-repeat: repeat;
  clip-path: inset(0 0 round 20px 20px 20px 20px);
}
.clumTitle {
  text-align: center;
  color: #035a36;
  padding: 10px 0;
  width: 90%;
  margin: 0 auto;
}
.clumText {
  text-align: center;
  padding: 20px 0;
}
.clumArea_Box_bg {
  max-width: 1200px;
  text-align: center;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -80px;
  position: absolute;
  z-index: -1;
}
.clumTitle span {
  display: block;
  font-size: 1.5rem;
}
.green_border02 {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}
.green_border03 {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 150px;
}
.charmBox01 {
  padding-top: 30px;
  display: flex;
  width: 90%;
  margin: 0 auto;
  align-items: center;
}
.charmBoxImg {
  width: 100%;
}
p.charmBoxText {
  width: 100%;
  text-align: justify;
}
.charmBoxText02 {
  text-align: center !important;
}
.charmBox02 {
  display: flex;
  width: 92%;
  margin: 0 auto;
}
.charmBox02_clum {
  margin: 10px;
}




/*一覧*/
.lineupArea {
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
  width: 90%;
  padding: 30px 0;
}
.clumText.clumTextBox {
  border: solid 1px #035a36;
  padding: 0;
  width: 70%;
  margin: 0 auto;
  color: #035a36;
  margin-bottom: 30px;
}

.title_line{
  text-align: center;
  color: #035a36;
  position: absolute;
  width: 100%;
  border-bottom: solid 4px #035A37; /* 外枠のスタイル */
  top: 25px;
  margin: 0 auto;
  right: 0;
  left: 0;
}
.title_line::before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: 6px;
  left: 0px;
  right: 0px;
  border-bottom: solid 2px #035A36; /* 外枠のスタイル */
  margin: 0 auto;
  right: 0;
  left: 0;
}
.lineupTitleBox {
  position: relative;
  /* padding: 30px 0; */
}
.lineupTitle span {
  display: block;
  font-size: 1.5rem;
}

.lineupTitle {
  z-index: 1;
  display: block;
  position: relative;
  background-color: #fff;
  width: 20%;
  margin: 0 auto;
  text-align: center;
  font-size: 2.5rem;
  color: #035a36;
  line-height: 25px;
}
.lineup_ClumBox {
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
  width: 100%;
  padding: 30px 0;
}
.lineup_Clum {
  width: calc(100% / 3);
  margin: 15px;
  flex-direction: column;
  display: flex;
  position: relative;
}
.lineup_clumTitle {
  color: #035A36;
  background-image: linear-gradient(to right, #035A36 2px, transparent 2px);
  background-size: 9px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding: 5px 0;
  font-size: 2rem;
  font-weight: bold;
}
.lineup_clumText {
  text-align: justify;
  padding: 5px 0;
  flex-grow: 1;
}
.lineup_clumText span {
  display: block;
  padding: 10px 0;
}
.lineup_clumPrice {
  color: #035A36;
  font-weight: bold;
  font-size: 2rem;
  line-height: 25px;
}
.lineup_clumPrice span {
  font-size: 2.5rem;
}
.lineup_clumPrice {
  text-align: end;
}
.lineup_clumPrice02 {
  text-align: end;
  padding-bottom: 20px;
}
.lineup_ClumIcon {
  position: absolute;
  max-width: 100px;
  right: -20px;
  top: -25px;
}
p.lineup_clumText span {
  font-size: 1.3rem;
}





/*機能性*/
.funArea {
  margin: 0 auto;
  height: auto;
  width: 100%;
  background-image: url(https://keikyustore.itembox.design/item/LP/2024ecobag/images/bg02.jpg);
  /*position: relative;*/
  padding: 0 0 30px 0;
  background-size: cover;
    background-repeat: no-repeat;
}
.funArea_Box {
  max-width: 1000px;
  margin: 0 auto;
  width: 90%;
  background-image: url(https://keikyustore.itembox.design/item/LP/2024ecobag/images/bg01.jpg);
  padding: 20px 50px;
  background-repeat: repeat;
  clip-path: inset(0 0 round 20px 20px 20px 20px);
}
.funTitleBox {
  position: relative;
  padding: 30px;
}
.funTitle span {
  display: block;
  font-size: 1rem;
}
.funtitle_line{
  top: 17px;
}
.funTitle {
  width: 50%;
}
.funTitle {
  z-index: 1;
  display: block;
  position: relative;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 2.3rem;
  color: #035a36;
}
.funtitle_line{
  text-align: center;
  color: #035a36;
  position: absolute;
  width: 25%;
  border-bottom: solid 4px #035A37; /* 外枠のスタイル */
  top: 50px;
  margin: 0 auto;
  right: 30px;
}
.funtitle_line::before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: 6px;
  left: 0px;
  right: 0px;
  border-bottom: solid 2px #035A36; /* 外枠のスタイル */
  margin: 0 auto;
  right: 0;
}
.funtitle_line02{
  text-align: center;
  color: #035a36;
  position: absolute;
  width: 25%;
  border-bottom: solid 4px #035A37; /* 外枠のスタイル */
  top: 50px;
  margin: 0 auto;
  left: 30px;
}
.funtitle_line02::before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: 6px;
  left: 0px;
  right: 0px;
  border-bottom: solid 2px #035A36; /* 外枠のスタイル */
  margin: 0 auto;
  left: 0;
}
p.clumText.clumText02 {
  background-image: linear-gradient(to right, #035A36 2px, transparent 2px);
  background-size: 9px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding: 10px 0;
}






/*緑囲い*/
.green_border {
  border: 10px solid;
  padding: 30px 0;
  border-image-source: url(https://keikyustore.itembox.design/item/LP/2024ecobag/images/border.png);
  border-style: solid;
  border-image-slice: 100;
  border-image-width:50px;
  border-image-repeat:round;
  position: relative;
  margin-bottom: 20px;
}
p.bagSize {
  font-size: 1.5rem;
  text-align: end;
  padding: 0 20px;
}
.bg_repeatBox {
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}



/*swiper ベース ここから*/
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.swiper-slide img {
  display: block;
  width: 90%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide.swiper-slide02 img {
  border: solid 1px #000;
  margin: 5px;
}
.swiper-button-next {
  background-color: #888888;
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
  right: 3px;
  padding: 25px 25px;
  --swiper-navigation-size: 38px;
}
.swiper-button-prev {
  background-color: #888888;
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: #fff;
  left: 3px;
  padding: 25px 25px;
  --swiper-navigation-size: 38px;
}
.swiper {
  width: 90%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
.mySwiperA1 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA1 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA1 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB1 {
  height: 80%;
  width: 100%;
}
/*swiper ベース ここまで*/
/*swiper 複製 ここから*/
.mySwiperA2 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA2 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA2 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB2 {
  height: 80%;
  width: 100%;
}
/*swiper 複製 ここまで*/
/*swiper 複製 ここから*/
.mySwiperA3 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA3 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA3 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB3 {
  height: 80%;
  width: 100%;
}
/*swiper 複製 ここまで*/
/*swiper 複製 ここから*/
.mySwiperA4 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA4 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA4 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB4 {
  height: 80%;
  width: 100%;
}
/*swiper 複製 ここまで*/
/*swiper 複製 ここから*/
.mySwiperA5 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA5 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA5 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB5 {
  height: 80%;
  width: 100%;
}
/*swiper 複製 ここまで*/
/*swiper 複製 ここから*/
.mySwiperA6 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.mySwiperA6 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.mySwiperA6 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiperB6 {
  height: 80%;
  width: 100%;
}
/*swiper 複製 ここまで*/




@media screen and (max-width:1000px) {
.clumArea_Box {
  width: 90%;
}
.clumText.clumTextBox {
  width: 80%;
}
.funArea_Box {
  width: 90%;
}
.lineupTitle {
  width: 40%;
}
.mainArea_title h1 {
  font-size: 4rem;
}
.mainArea_text {
  font-size: 1.7rem;
}
}

@media screen and (max-width:900px) {
.funtitle_line {
  width: 20%;
}

.funtitle_line02 {
  width: 20%;
}
}

@media screen and (max-width:765px) {
.sp_br {
  display: block;
}
  .pc_br {
    display: none;
  }
  .buyBtn {
    width: 70%;
    max-width: 100%;
    margin: 0 auto;
  }
  .buyBtn.buyBtn02 {
    width: 82%;
}
  .mainArea {
    width: 100%;
  }
  .funArea_Box {
    padding: 30px;
  }
  .charmBox01 {
    display: block;
}
.charmBox01 {
  display: block;
  width: 85%;
}
.charmBox02 {
  display: block;
  text-align: center;
  width: 85%;
  justify-content: center;
}
.charmBox02_clum {
  width: 90%;
}
.charmBox02_clum {
  text-align: center;
  margin: 0 auto;
  padding: 10px 0px;
  width: 100%;
  padding-top: 20px;
}
.clumArea_Box {
  padding: 30px;
}
.lineup_ClumBox {
  width: 90%;
  display: block;
  margin: 0 auto;
}
.lineup_Clum {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
}
.lineup_ClumIcon {
  max-width: 140px;
}
.funTitleBox {
  padding: 10px 20px;
}
.funtitle_line {
  width: 15%;
  top: 30px;
  right: 22px;
}
.funtitle_line02 {
  width: 15%;
  top: 30px;
  left: 22px;
}
.swiper-wrapper02 {
  flex-wrap: wrap;
}
.swiper-button-next {
  padding: 20px 20px;
}
.swiper-button-prev {
  padding: 20px 20px;
}
.swiper-slide02 {
  width: 40%!important;
  margin: 0 auto;
}
.mainArea_text {
  padding: 0 20px;
}
p.newText {
  font-size: 1.5rem;
}
.newCooler {
  width: 100%;
  margin: 0 auto;
  /* margin: 10px; */
  /* text-align: center; */
  padding-top: 10px;
}
}

@media screen and (max-width:650px) {
.funtitle_line {
  width: 15%;
}
.funtitle_line02 {
  width: 15%;
}
.funTitle {
  font-size: 2rem;
}
.buyBtn {
  width: 100%;
}
}

@media screen and (max-width:600px) {
  p.newText span {
    display: block;
    max-width: 100px;
    margin: 0 auto;
    margin-bottom: 10px;
    }
}


@media screen and (max-width:550px) {
  .funtitle_line {
    width: 10%;
  }
  .funtitle_line02 {
    width: 10%;
  }
  .mainArea {
    width: 100%;
  }
  .buyBtn.mainArea_Btn {
    width: 80%;
}
  .lineupTitle {
    width: 60%;
  }
  }

@media screen and (max-width:500px) {
  #fs_CustomPage .fs-l-main {
    margin: 0!important;
}
.lineup_ClumIcon {
  max-width: 110px;
}
.mainArea_title h1 {
  font-size: 3rem;
}
.mainArea_text {
  font-size: 1.5rem;
}
.clumArea_Box {
  padding: 20px;
}
.funArea_Box {
  padding: 20px;
}
.clumText.clumTextBox {
  width: 90%;
}
.funTitle {
  width: 90%;
}
.funtitle_line {
  width: 7%;
}
.funtitle_line02 {
  width: 7%;
}
#fs_CustomPage .fs-l-main {
  margin: 0;
}
p.bagSize {
  text-align: center;
  padding: 0 20px;
}
}

@media screen and (max-width:450px) {
.sp_br02 {
  display: block;
  }
p.funTitle {
  line-height: 24px;
}
.clumTitle {
  font-size: 2rem;
}
.green_border03 {
  top: 180px;
}
.funtitle_linePlus {
  top: 23px;
}
.funtitle_linePlus02 {
  top: 23px;
}
.lineup_ClumIcon {
  max-width: 100px;
  top: -10px;
}

.lineup_Clum {
  padding: 20px 0;
}
.lineup_clumPrice span {
  font-size: 3rem;
}
p.lineup_clumPrice02 {
  font-size: 1.7rem;
}
.funtitle_line {
  width: 10%;
}
.funtitle_line02 {
  width: 10%;
}
p.lineupTitle {
  font-size: 2rem;
}
.title_line{
  top: 23px;
}
p.bagSize {
  font-size: 1.3rem;
}
}

@media screen and (max-width:400px) {
.sp_br03 {
  display: none;
  }
}