@charset "utf-8";
/*
Theme Name: zwel
Description: 
Author: Sonicgrow×COSMICGEAR
Version: 1.0
*/
/*-root*/ :root {
  --head2: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem); /*20-28*/
  --head3:clamp(1rem, 0.909rem + 0.45vw, 1.25rem);/*16-20*/
  --fs-mid16: min(1.1429em, 3.8vw);
  --fs-mid18: min(1.2857em, 4vw);
  --clr-grn: #5DB18A;
  --wall-wblu: #7DD9DD;
  --wall-gry:#F8F6F6;
  --bdr-gry: #D9D9D9;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transition: .3s var(--easing);
}
/*base=====*/
body {
  font-family: "noto-sans-cjk-jp", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: min(3.6vw, 14px);
  width: 100%;
  overflow-x: hidden;
  background: var(--wall-gry);
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl.jc_c {
  justify-content: center;
}
.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.fl_c.ai_c {
  -ms-align-items: center;
  align-items: center;
}
figure {
  margin-bottom: 0 !important;
}
/*container
========================================================*/
#container {
  width: 100%;
  min-height: 100vh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}
#container > * {
  width: 100%;
}
a.cvr {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
/*hum
=====================================*/
#hum-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: min(76px, 15vw);
  aspect-ratio: 1/1;
  background: var(--clr-grn);
  z-index: 100;
  cursor: pointer;
  -webkit-transition:all var(--transition);
  -o-transition: all var(--transition);
  transition:all var(--transition);
}
#hum-btn button {
  width: 57%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  -webkit-transition:all var(--transition);
  -o-transition: all var(--transition);
  transition:all var(--transition);
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  
}
#hum-btn button::before {
  content: "";
  width: 57%;
  height: 2px;
  border-radius: 2px;
  position: absolute;
  right: 0;
  background: #fff;
  -webkit-transition: transform var(--transition);
  -o-transition: transform var(--transition);
  transition: transform var(--transition);
  transform-origin: center;
  top: 14px;
}
#hum-btn.open{
  background: #fff;
}
#hum-btn.open button {
  background: #a59670;
  top: 50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
#hum-btn.open button::before {
  background: #a59670;
  width: 100%;
  top: 0;
  transform:rotate(90deg);
}
#l-nav {
  position: fixed;
  width: min(400px,100%);
  max-height:100vh ;
  top: 0;
  right: 0;
  background: var(--wall-gry);
  z-index: 99;
/*
  visibility: hidden;
  opacity: 0;
*/
  transform: translateX(100%);
  -webkit-transition: all var(--transition);
  -o-transition: all var(--transition);
  transition: all var(--transition);
}
.l-nav-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.4);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all var(--transition);
  -o-transition: all var(--transition);
  transition: all var(--transition);
}
.l-nav-wrapper.open{
  opacity: 1;
  visibility: visible;
}
#l-nav.is-view {
  transform: translateX(0);
}
.l-nav_inner {
  width: 100%;
  min-height: 100vh;
  padding: min(100px, 20vw) min(20px,4vw) 150px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(40px,10vw);
}
.l-nav-item{
  width: min(310px,100%);
}
.l-nav-title{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  
}
.l-nav-title p{
  font-size: var(--head3);
  padding-bottom: 16px;
}
.l-nav-title p::after{
      content: "";
    width: 1.71em;
    height: 3px;
    background: linear-gradient(90deg, #2BA27E, #356080);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.l-nav-menu
,.l-pick-banner{
  margin-top: min(15px,4vw);
}
.l-nav-menu li{
  border-top: 1px solid #DECBAA;
}
.l-nav-menu li:last-child{
  border-bottom: 1px solid #DECBAA;
}
.l-nav-menu li a{
  display: block;
  font-size: var(--fs-mid16);
  text-align: center;
  padding: 10px;
  letter-spacing: .1em;
}
  
/*header
=====================================*/
header {
  /*
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
*/
  background: #fff;
}
.head-inner {
  width: 100%;
  padding: 10px min(80px, 14vw) 10px min(25px, 4vw);
  min-height: min(76px, 15vw);
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
}
/*
header .logo {
  width: 32px;
}
*/
header .logo a{
    gap: 10px;
    align-items: center;
    line-height: 1.3;
}
header .logo a img{
    width: 32px;
}
header .logo a p{
    width: calc(100% - 32px);
}
/*main
=====================================*/
.index-wrapper {
  padding-bottom: min(150px, 20vw);
}
.inner {
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
}
/*#key
============================*/
#key.index-key {
  background: url("images/key-wall.png") no-repeat 80% 20%/auto 150%, linear-gradient(180deg, #7DD9DD, #97E4E8, #9BE8EB);
}
.page-female #key.index-key{
  background: url("images/key-wall-female.png") no-repeat 80% 20%/auto 150%, linear-gradient(180deg, #F8BAC9, #FFCCCC, #F8BAC9);
}
.key-inner {
  width: min(1380px, 100%);
  padding-left: min(50px, 4vw);
  padding-right: min(50px, 4vw);
  margin-left: auto;
  margin-right: auto;
  min-height: 360px;
  justify-content: center;
}
.key-title {
  background: url("images/wall_title.png") no-repeat center/cover;
  width: min(656px, 52%);
  aspect-ratio: 1/0.3902;
  justify-content: center;
  font-weight: 700;
  font-size:clamp(0.875rem, 0.375rem + 2.5vw, 2.25rem); /*14-36*/
  gap: 13px;
}
.page-female .key-title{
  background: url("images/wall_title-female.png") no-repeat center/cover;
}
.key-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 3px solid #fff;
  width: calc(100% - max(15px, 2.5vw));
  height: calc(100% - max(15px, 2.5vw));
  transform: translate(-50%, -50%);
}
.key-title .min {
  width: min(272px, calc(100% - 40px));
  background: #fff;
  color: var(--clr-grn);
  padding: 10px;
  text-align: center;
}
.page-female .key-title .min{
  color: #F66C6C;
}
.key-title .main {
  font-size:min(1.3333em,5vw);
  color: #fff;
}
/*top
=====================================*/
.index-btn{
    align-items: center;
    column-gap: 10px;
}
.index-btn a{
    background: var(--clr-grn);
    color: #fff;
    padding: 1em;
    max-width: 280px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}
/*#index content
============================*/
.index-contents {
  margin-top: min(40px, 10vw);
  padding-bottom: min(60px, 10vw);
}
.wht-box-wrap {
  background: #fff;
  border-radius: 20px;
  padding: min(45px, 10vw) min(40px, 4vw);
}
.sec-title {
  font-size: var(--head2);
  font-weight: 700;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.sec-title span {
  padding-bottom: 16px;
}
.sec-title span::after {
  content: "";
  width: 1.8571em;
  height: 3px;
  background: linear-gradient(90deg, #2BA27E, #356080);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.in-text {
  line-height: 1.71;
}
/*button setting*/
/*index banner
===================================*/
#banner-slider {
  overflow: hidden;
}
.banner-item {
  background: #fff;
  aspect-ratio: 1/0.5107;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--bdr-gry);
}
.banner-item img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.top-banner-blc .banner-pagination {
  bottom: 0 !important;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.banner-pagination .swiper-pagination-bullet {
  background: #666;
  opacity: 1;
}
.banner-pagination .swiper-pagination-bullet-active {
  background: var(--clr-grn);
}
/*button setting*/
.btn-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  margin-top: min(80px, 10vw);
}
.round-btn {
  width: min(260px, 100%);
}
.round-btn.more {
  width: min(230px, 100%);
}
.round-btn a {
  color: #fff;
  display: block;
  text-align: center;
  padding: min(15px, 5vw) 2em;
  border-radius: 2em;
  overflow: hidden;
}
.round-btn a::before, .round-btn a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity var(--transition);
  -o-transition: opacity var(--transition);
  transition: opacity var(--transition);
}
.round-btn a::before {
  background: linear-gradient(90deg, #2BA07E, #356080);
}
.round-btn a::after {
  opacity: 0;
  background: linear-gradient(90deg, #356080, #2BA07E);
}
.round-btn a span {
  display: block;
  z-index: 1;
}
.round-btn a span::before, .round-btn a span::after {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(35deg) translateX(-50%);
  transform-origin: 50% 50%;
}
.round-btn a span::after {
  transform: rotate(-35deg) translateX(-50%);
}
@media(hover) {
  .round-btn a:hover::after {
    opacity: 1;
  }
}
/*index pickup
===================================*/
.index-pickup-blc {
  margin-top: min(80px, 10vw);
}
.index-pickup_cat {
  -ms-align-items: center;
  align-items: center;
  margin-top: min(40px, 5vw);
}
.index-pickup_cat > * {
  width: 50%;
}
.index-pickup_cat .comming-soon {
  width: 100%;
  text-align: center;
  font-size: var(--fs-mid16);
  font-weight: 700;
  letter-spacing: .2em;
  opacity: .5;
}
.index-pickup_cat .thumb {
  aspect-ratio: 1/0.5125;
  overflow: hidden;
border: 1px solid var(--bdr-gry);
}
.index-pickup_cat .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.index-pickup_cat .detail {
  padding-left: min(40px, 5vw);
}
.index-pickup_cat .detail .round-btn {
  margin-left: auto;
  margin-top: min(40px, 10vw);
}
/*index campaign
===================================*/
.index-campaign-blc {
  margin-top: min(80px, 15vw);
}
.index-campaign-list {
  width: 100%;
  margin-top: min(20px, 5vw);
}
.index-campaign_box {}
/*タブ*/
.tab-container{
    width: 100%;
}
.tab-panel{
  display: none;
  width: 100%;
}
.tab-panel__inner{
    align-items: center;
}
.tab_switch_title{
    gap: 15px;
    width: 100%;
    justify-content: flex-start;
    margin-top: min(40px, 5vw);
    align-items: center;
}
.tab_title{
    color: var(--clr-grn);
    font-weight: 700;
    word-break: keep-all;
    padding-bottom: 15px;
}
.tab-switch{
    gap: 5px;
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
}
.tab-switch li{
    cursor: pointer;
    border: 1px solid var(--clr-grn);
    padding: 5px 15px;
    border-radius: 2em;
    -webkit-transition:all var(--transition);
    -o-transition: all var(--transition);
    transition:all var(--transition);
    display: block;
}
.tab-switch li:hover,
.tab-switch li.active{
    background-color: var(--clr-grn);
    color: #fff;
}

/*キャンペーン一覧*/
.acv_post .thumb img {
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.acv_post .detail {
  margin-top: min(10px, 2vw);
}
.pr-cmnt{
    text-align: right;
    font-size: .875em;
}
.acv_post .detail .tag{
  gap:5px 10px;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 8px;
}
.acv_post .detail .tag span{
  font-size: min(.875em,3.4vw);
  color: var(--clr-grn);
  border: 1px solid var(--clr-grn);
  padding: 3px 8px;
  border-radius: 2em;
}
.acv_post .detail .acv_title {
  font-size: var(--fs-mid16);
  line-height: 1.4;
  margin-top: 5px;
  font-weight: 600;
}
.acv_post .detail .in-text {
  margin-top: 10px;
  border-top: 1px solid var(--bdr-gry);
  padding-top: 10px;
  font-size: .85rem;
  line-height: 1.6;
}
.index-campaign-list {
  width: 100%;
  gap: min(25px, 3vw);
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.index-campaign-list .acv_post {
  width: calc((100% - min(75px, 9vw))/4);
}
.index-campaign-list .acv_post .thumb {
  width: 100%;
  aspect-ratio: 1/0.7813;
  overflow: hidden;
  border: 1px solid var(--bdr-gry);
}
.index-campaign_box .round-btn {
  margin-top: min(40px, 10vw);
}
.index-campaign_box .comming-soon {
  width: 100%;
  text-align: center;
  font-size: var(--fs-mid16);
  font-weight: 700;
  letter-spacing: .2em;
  opacity: .5;
  margin-top: min(40px, 10vw);
}
/*index benefits
===================================*/
.index-benefits-blc {
  margin-top: min(80px, 15vw);
}
.benefits-banner {
  margin-top: min(40px, 5vw);
  border: 1px solid var(--bdr-gry);
}
/*footer
=====================================*/
footer {
  margin-top: auto;
}
.foot-inner {
  padding-top: min(60px, 10vw);
  padding-bottom: min(100px, 15vw);
  text-align: center;
}
.foot-logo {
  width: min(197px, 30%);
}
footer p.copy {
  margin-top: min(40px, 3vw);
}
footer p.attention {
  margin-top: min(20px, 2vw);
  line-height: 1.5;
}