@charset "UTF-8";
/* Scss Document */
/*---------mixin設定-------------*/
/*ブレイクポイント*/
/*-------------------------------

 //共通パーツ

-------------------------------*/
html {
  width: 100%;
}
* {
  box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, table, th, td, figure {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
fieldset, img {
  border: 0 none;
}
object, embed, img {
  vertical-align: top;
}
img {
  width: 100%;
  height: auto;
}
.kitte-page {
  overflow: hidden;
}
.kitte-page h3 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.kitte-page h4 {
  text-align: center;
  font-size: 0.95rem;
}
.kitte-page h5 {
  text-align: left;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 20px;
}
.kitte-page h6 {
  text-align: center;
  margin: 20px;
}
.kitte-page .small {
  font-size: 0.6rem;
  vertical-align: middle;
}
.kitte-page .left {
  margin: 0 20px;
}
.kitte-page .font {
  font-size: 1.7rem;
  font-weight: 500;
}
.pc_none {
  display: none;
}
.top_cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1; /* 比率指定。ない場合は height: 〇〇px; で */
  overflow: hidden;
}
.top_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* coverで全体に敷き詰める */
  z-index: 0;
}
.top_img_content {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 25%;
  z-index: 1;
  text-align: left;
  padding: 0;
}
.top_img_content .logo img, .top_img_content .ann img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2.5rem;
}
.top_img_content .date {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.top_img_content .heading {
  font-size: 0.9rem;
  line-height: 1.6;
}
.kitte-page .message .message_back {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  background-image: url(/lp/kitte_1st_Ann/img/back_pc.jpg?v=20250714);
  background-size: cover; /* ←ここを追加 */
  background-repeat: no-repeat;
  background-position: center center;
  padding: 3% 6%;
}
.kitte-page .message .message_p {
  font-size: 1rem;
  padding: 50px;
  line-height: 1.6;
}
.kitte-page .message .right {
  font-size: 1rem;
  text-align: right;
}
.kitte-page .campaign {
  padding: 120px 20px;
}
.kitte-page .campaign .campaign_top {}
.kitte-page .campaign .campaign_inner {
  display: flex;
  flex-wrap: wrap; /* スマホで折り返せるようにする */
  gap: 16px; /* 背景画像の間に隙間 */
  margin: 50px 0;
  padding: 0;
  width: 100%;
  aspect-ratio: auto; /* 画面比に固定しないように調整 */
}
.kitte-page .campaign .campaign_inner .detail_wrap {
  position: relative;
  flex: 1 1 calc(25% - 12px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.kitte-page .campaign .campaign_inner .detail_wrap::before {
  content: "";
  display: block;
  padding-top: 100%; /* 正方形を作る */
}
.kitte-page .campaign .campaign_inner .detail_wrap a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.kitte-page .campaign .campaign_inner .detail_wrap:hover {
  transform: translateY(-8px);
  transition-duration: .5s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
/* 中央のテキストの位置 */
.kitte-page .campaign .campaign_inner .campaign_detail {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  z-index: 1;
  width: 90%; /* 幅を制限して中央揃えしやすくする */
}
.kitte-page .campaign .campaign_inner .campaign_detail h4 {
  white-space: nowrap; /* 改行させない */
  overflow: hidden; /* はみ出した部分を隠す */
  text-overflow: ellipsis; /* 省略記号（...）を付ける */
  font-size: 1rem; /* 必要に応じて調整 */
}
/* 各背景画像 */
.kitte-page .campaign .campaign_inner .detail1 {
  background-image: url(/lp/kitte_1st_Ann/img/circle_01.jpg?v=20250710);
}
.kitte-page .campaign .campaign_inner .detail2 {
  background-image: url(/lp/kitte_1st_Ann/img/circle_02.jpg?v=20250710);
}
.kitte-page .campaign .campaign_inner .detail3 {
  background-image: url(/lp/kitte_1st_Ann/img/circle_03.jpg?v=20250710);
}
.kitte-page .campaign .campaign_inner .detail4 {
  background-image: url(/lp/kitte_1st_Ann/img/circle_04.jpg?v=20250710);
}
.kitte-page .center {
  text-align: center;
}
.kitte-page .campaign_bottom_detail {
  display: flex;
  gap: 20px;
  margin-bottom: 50px;
}
.kitte-page .campaign_bottom_detail > div {
  width: 50%;
}
.kitte-page .reverse {
  flex-direction: row-reverse;
}
.kitte-page .campaign_bottom_detail .flex {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 0;
  gap: 5px;
}
.kitte-page .campaign_bottom_detail .flex a {
  flex: 1 1 calc(25% - 5px); /* PCで4列（gap考慮） */
}
.kitte-page .store {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  background-image: url(/lp/kitte_1st_Ann/img/back_pc.jpg?v=20250714);
  background-size: cover; /* ←ここを追加 */
  background-repeat: no-repeat;
  background-position: center center;
  padding: 3% 6%;
}
.kitte-page .store .flex {
  display: flex;
}
.kitte-page .store .store_img {
  margin: 50px 20px;
}
@media (max-width: 768px) {
  div.wrapper_ {
    margin: 80px auto 0;
    padding: 0;
  }
  html {
    width: 100%;
  }
  .pc_none {
    display: block;
  }
  .top_cover {
    aspect-ratio: 128 / 141; /* 比率指定。ない場合は height: 〇〇px; で */
  }
  /*.kitte-page .fv .fv_back {
    background-image: url(/lp/kitte_1st_Ann/img/top_sp.jpg?v=20250714_2);
    padding: 40px 0 440px;
  }*/
  .top_img_content {
    top: 12%;
    left: 8%;
    width: 40%;
  }
  .top_img_content .logo img, .top_img_content .ann img {
    margin-bottom: 1.7rem;
  }
  .top_img_content .date {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .top_img_content .heading {
    line-height: 1.4;
    font-size: 0.8rem;
  }
  .kitte-page h3 {
    font-size: 1.1rem;
  }
  .kitte-page .center {
    text-align: left;
  }
  .kitte-page .message .message_p {
    padding: 20px 0px;
  }
  .kitte-page .message .message_back {
    margin-bottom: 0;
    background-image: url(/lp/kitte_1st_Ann/img/back_sp.jpg?v=20250714);
    padding: 6%;
    font-size: 0.8rem;
  }
  .kitte-page .campaign {
    padding: 50px 15px;
  }
  .kitte-page .campaign .campaign_inner {
    margin: 20px 0 30px;
    gap: 5px;
  }
  .kitte-page .campaign .campaign_inner .detail_wrap {
    flex: 1 1 calc(50% - 5px); /* 2列構成 */
    aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
  }
  .kitte-page .campaign .campaign_inner .campaign_detail h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
  }
  .kitte-page .font {
    font-size: 1.3rem;
  }
  .kitte-page .campaign_bottom_detail {
    display: block;
    margin-bottom: 30px;
  }
  .kitte-page .campaign_bottom_detail > div {
    width: 100%;
    padding: 0px;
  }
  .kitte-page h5 {
    margin: 5px 0;
    font-size: 1.1rem;
  }
  .kitte-page .left {
    margin: 0 0 10px;
    font-size: 0.9rem;
  }
  .kitte-page .campaign_bottom_detail .flex a {
    flex: 1 1 calc(50% - 5px); /* 2列構成 */
  }
  .kitte-page .store .flex {
    display: block;
  }
  .kitte-page .store .store_img {
    margin: 20px 20px;
  }
  .kitte-page h6 {
    margin: 0px 20px;
  }
  footer.global {
    clear: both;
    margin: 0;
}
}