@charset "utf-8";



/*------------------------------------------
ページトップボタン
------------------------------------------*/
#pagetop {
  opacity: 1;
  position: fixed;
  bottom: 30px;
  right: 55px;
  transition: opacity .5s;
  z-index: 2;
}

#pagetop a {
  background-color: rgba(51, 51, 51, .8);
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #pagetop {
      bottom: 3%;
      right: 6%;
  }
}

/*------------------------------------------
キャンペーン全体
------------------------------------------*/
:root{
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(50px, 1.989rem + 5.68vw, 100px);
}

html {
  scroll-behavior: smooth;
}

.campaign-list {
  position: relative;
  display:block;
  text-align:center;
  width:100%;
  padding:var(--gap-l) 0;
}

.campaign-list .campaign-inner{
  position: relative;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
}

.campaign-wrap{
  position: relative;
}


/*------------------------------------------
ヘッダ
------------------------------------------*/
.campaign-list h1{
  font-weight:700;
  font-size:clamp(18px, 0.625rem + 2.5vw, 40px);
  margin-bottom:var(--gap-m);
}

.campaign-list h2{
  font-weight:900;
  font-size:clamp(16px, 0.682rem + 1.59vw, 30px);
  margin-bottom:var(--gap-m);
  text-align:left;
  color: #001e60;
}

.campaign-list h3{
  font-weight:700;
  font-size:clamp(14px, 0.739rem + 0.68vw, 20px);
  margin-bottom:var(--gap-m);
  text-align:left;
  color: #001e60;
}



/*------------------------------------------
ナビ
------------------------------------------*/
.fix-anchor {
  margin-top: -55px;
  padding-top: 55px;
}

/* --- タブボタンをまとめる領域 --- */
.categorys-wrap {
  width: 100%;
  height:55px;
  padding:10px 0;
  top:0;
  left:0;
  position: sticky;
  background:rgba(255,255,255,0.8);
  z-index:10;
}
.categorys {
  width: calc(100% - 30px);
  max-width:1140px;
  margin:auto;
  display:grid;
  gap:20px;
  grid-template-columns: repeat(4, 1fr);
}

/* --- タブラベル --- */
.category {
  position: relative;
  padding: 0.5em 0;
  text-align: center;
  background: #f6f6f6;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  font-weight: 700;
  border-radius:2em;
  font-size:clamp(10px, 0.489rem + 0.68vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category::after {
  position: absolute;
  content:'';
  bottom:calc(50% - 4px);
  right:1em;
  width:8px;
  height:8px;
   -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #999;
}

.category:hover {
  background: #ddd;
}


/* --- コンテンツ部分 --- */
.category-content {
  display: none;
  padding:var(--gap-m) 0;
}

/* --- 選択された時 --- */
.category.active {
  background: #3498db;
  color: #fff;
}
.category.active::after {
  border-color: #fff;
}
.category-content.active {
  display: block;
}


@media screen and (max-width: 767px) {
  
  .categorys-wrap {
    padding:5px 0;
  }
  .categorys {
    gap:5px;
  }
  .category {
    padding: 0.5em 0 1.5em 0;
    border-radius:10px;
  }
  .category::after {
    width:6px;
    height:6px;
    bottom:0.7em;
    right:calc(50% - 3px);
  }
}

@media screen and (max-width: 428px) {
  .fix-anchor {
    margin-top: -45px;
    padding-top: 45px;
  }
  .categorys-wrap {
    height:45px;
  }
  .category {
    padding: 0.5em 0;
  }
  .category::after {
    display:none;
  }
}
/*------------------------------------------
バナー表示エリア
------------------------------------------*/

.campaign-wrap {
  padding:var(--gap-m) 0;
}

.campaing-special {
  background:#f6f6f6;
}

.content-block + .content-block{
  margin-top:var(--gap-m);
  padding-top:var(--gap-m);
  border-top:1px dotted #eee;
}
.content-block.top-line{
  padding-top:var(--gap-m);
  border-top:1px dotted #eee;
}

.campaign-panels{
  width:100%;
  display:grid;
  gap:clamp(15px, 0.597rem + 1.7vw, 30px);
  grid-template-columns: repeat(4, 1fr);
  text-align:left;
}
.campaign-panels a{
  display: flex;
  width:100%;
  height:100%;
  letter-spacing: 0.05em;
  flex-direction: column;
  justify-content: space-between;
}

.campaign-panels a:hover{
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

.campaign-img {
  width:100%;
  aspect-ratio: 1 / 1;
}
.campaign-panels img{
  width:100%;
  object-fit: contain;
}

.campaign-name {
  font-weight: 600;
  line-height: 1.3;
  margin: 10px 0;
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
}
.campaign-period {
  font-size: clamp(12px, 0.705rem + 0.23vw, 14px);
}
.campaign-period + .campaign-period {
  margin-top: 5px;
}
.campaign-period.period::before {
  content: "期間：";
}

@media screen and (max-width: 767px) {
  .campaign-panels{
    grid-template-columns: repeat(2, 1fr);
  }
}

/*---------------------------
ページ下部リンク
---------------------------*/
.campaign-link{
  width:100%;
}
.campaign-link .morelink{
  width:100%;
}
.campaign-link ul{
  width:100%;
  display:grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 767px) {
  .campaign-link ul{
    grid-template-columns: repeat(1, 1fr);
  }
}