html {
  scroll-behavior: smooth;
}

/* LP全体の幅を指定し、中央寄せ */
.wrap {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
}

/* デフォルトのcssを削除 */
ul.itemw li {
  margin-bottom: 0px;
}


/* トップ */
.mv{
  position: relative;
  margin-bottom: min(45px, calc(45 / 750 * 100vw));
}

.mv_btns{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 2% 10%;
}

.mv_chirashiBtn a{
  transition: 0.6s ease;
  transition-property: opacity;
}

.mv_chirashiBtn a:hover{
  opacity: 0.7;
  transition: 0.6s ease;
  transition-property: opacity;
}


/* タブ全体 */
.tab{
  max-width: 750px;
  width: 100%;
  z-index: 1000;
  top: 0;
}

/* タブリスト全体のベース */
.tab_list{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: min(5px, calc(5 / 750 * 100vw));
}


/* 各タブ（通常時） */
.tab_listItem{
  position: relative;
  width: calc(100% / 3);
  max-height: 86px;
  background-color: #fff;
  padding: min(16px, calc(16 / 750 * 100vw)) clamp(16px, calc(32 / 750 * 100vw), 32px);
  border-top: min(4px, calc(4 / 750 * 100vw)) solid #808080;
  border-left: min(4px, calc(4 / 750 * 100vw)) solid #808080;
  border-right: min(4px, calc(4 / 750 * 100vw)) solid #808080;
  border-radius: clamp(18px, calc(24 / 750 * 100vw), 24px) clamp(18px, calc(24 / 750 * 100vw), 24px) 0 0;
  line-height: 1;
  cursor: pointer;
}

/* タブ内コンテンツ */
.tab_txt{
  display: flex;
  align-items: center;
  justify-content: center;
  /* アプリ */
  gap: 0.3em;

  /* サービスサイト */
  /* gap: 0.2em; */

  width: 100%;
  font-size: clamp(18px, calc(28 / 750 * 100vw), 28px);
  font-weight: 700;
  color: #4d4d4d;
  text-align: center;
}

/* タブ内コンテンツ */
.tab_icon{
  display: none;
  width: clamp(20px, calc(30 / 750 * 100vw), 30px) !important;
  height: clamp(20px, calc(30 / 750 * 100vw), 30px) !important;
  object-fit: contain;
  flex-shrink: 0;
}


/* -----------------------------------
  　タブアクティブ時のスタイル
----------------------------------- */

/* 各タブ共通 */
.tab_listItem.is-active {
  border-top: 4px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

/* 店舗タブ */
.tab_listItem:nth-child(1).is-active {
  background-color: #3fa9f5;
}

.tab_listItem:nth-child(1).is-active .tab_icon {
  /* アプリ */
  margin-bottom: min(3px, calc(3 / 750 * 100vw));

  /* サービスサイト */
  /* padding-top: 4px; */
}


/* セールタブ */
.tab_listItem:nth-child(2).is-active {
  background-color: #f7931e !important;
}

.tab_listItem:nth-child(2).is-active .tab_icon {
  /* サービスサイトでは削除 */
  margin-bottom: min(5px, calc(5 / 750 * 100vw));
  width: min(20px, calc(20 / 750 * 100vw)) !important;
}


/* サービスタブ */
.tab_listItem:nth-child(3).is-active {
  background-color: #004179 !important;
  padding: min(16px, calc(16 / 750 * 100vw)) min(5px, calc(5 / 750 * 100vw));
}

/* サービスサイトのみ */
/* .tab_listItem:nth-child(3).is-active .tab_icon {
  padding-top: 2px;
} */



/* 文字色変更 */
.tab_listItem.is-active .tab_txt {
  color: #fff;
}

/* アイコンを表示 */
.tab_listItem.is-active .tab_icon {
  display: block;
}


/* -----------------------------------
  　ボタン共通スタイル
----------------------------------- */

.tab_contents_btn{
  padding: 2% 4%;
}

.tab_contents_btn.--point{
  padding: 5% 2% 6%;
}

.tab_contents_btn.--sale{
  padding: 0 2% 5%;
}

.tab_contents_btn.--service{
  padding: 4% 2%;
  text-align: center;
}

.tab_contents_btnLink{
  width: min(708px, 100%);
  margin: 0 auto;
  display: block;
  opacity: 1;
  transition: 0.6s ease;
  transition-property: opacity;
}

.tab_contents_btnLink a:hover{
  opacity: 0.7;
  transition: 0.6s ease;
  transition-property: opacity;
}


.tab_contents_btnTxt{
  width: min(603px, calc(603 / 750 * 100vw));
  margin: 0 auto;
}

/* -----------------------------------
  　タブ　コンテンツ
----------------------------------- */

.tab_contents_body.--shop{
  background-color: #3fa9f5;
}

.tab_contents_body.--sale{
  background-color: #f7931e;
}

.tab_contents_body.--service{
  background-color: #004179;
}


.tab_contents_img{
  text-align: center;
}

.js-tab_contents_body{
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: 0.8s ease;
  transition-property: opacity, visibility;
}

/* タブアクティブ時 */
.js-tab_contents_body.is-active{
  opacity: 1;
  visibility: visible;
  height: auto;
}

/* タブ固定時 */
#flyer.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  width: 100%;  /* 横幅が崩れないように指定 */

}

/* -----------------------------------
    スライダー
----------------------------------- */
.tab_sliderArea{
  margin: -1px 2% 0;
  padding: 4% 0;
  background-color: #fff;
}

.service_slider{
  height: fit-content;
  margin-bottom: 6%;
}

.service_slide_txtImg{
  padding-inline: 4%;
  text-align: center;
}


/* -----------------------------------
  　共通フッター
----------------------------------- */

.tab_footer{
  padding-bottom: 10%;
  background-color: #fff;
}

.tab_footer_img{
  padding: 2% 4% 0;
  text-align: center;
}

.tab_footer_img a{
  display: block;
  opacity: 1;
  transition: 0.6s ease;
  transition-property: opacity;
}

.tab_footer_img a:hover{
  opacity: 0.7;
  transition: 0.6s ease;
  transition-property: opacity;
}


/* トップに戻るボタン */
.rollbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  border: 0;
  background: #224db3;
  transition: .3s ease;
  transition-property: opacity;
  border-radius: 100vmax;
  z-index: 88;
}