@charset "UTF-8";
/* CSS Document */

:root {
  --color-red: #e90d41;
  --color-blue: #5883d2;
  --color-black: #1d1d1f;
  --color-txt: #6e6e73;
  --color-gradation: linear-gradient(90deg, #0066b4 18%, #317bc0 40%, #6aaee0 100%);
  --color-main-light: #82c7fb;
  --color-main: #4b9cd8;
  --color-em: #0066b4;
  --area-color: #a37dac;
  --bg-dark: #2a2b3f;
  --swiper-theme-color: #0066b4;
  --basic-range: min(100%, 1260px);
}

html {
  color: #000;
  /* overflow-y: scroll; */
}
/* --BODY-- */
body {
  /* font: 14px/1.5 Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; */
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 350;
  font-size: 14px;
  margin: 0;
  overflow: visible;
  padding: 0;
  color: var(--color-black);
}

/*!! --OTHER TAGS-- */
:where(a img, fieldset, img) {
  border: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: top;
}
:where(picture, figure) {
  display: block;
  margin: 0;
}
:where(blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, select, span, textarea, td, th, ul) {
  margin: 0;
  padding: 0;
}
:where(abbr, acronym) {
  border: 0;
}
:where(address, caption, cite, code, dfn, em, th, strong, var) {
  font-style: normal;
  font-weight: normal;
}
:where(caption, th) {
  text-align: left;
}
:where(code, kbd, pre, samp, tt) {
  font-family: monospace;
  line-height: 100%;
}
/* for IE7設定 */
:where(* + html code, kbd, pre, samp, tt) {
  font-size: 108%;
}
:where(h1, h2, h3, h4, h5, h6) {
  font-size: 100%;
  font-weight: normal;
}
:where(input, select, textarea) {
  font-size: 100%;
  font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
:where(ol, ul) {
  list-style: none;
}
:where(q:before, q:after) {
  content: "";
}
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}

.emergency {
  width: min(calc(100% - 20px), 1260px);
  margin: 10px auto auto;
  text-align: center;

  a.txt-link {
    color: #f01;
    text-decoration: underline;
    letter-spacing: 1px;
    transition: all 0.3s;
    text-align: center;
    font-size: 16px;
  }

  a.txt-link:hover {
    text-decoration: none;
    transition: all 0.3s;
  }
}
@media (width < 969px) {
  .emergency {
    display: none;
  }
}

/*!! ========== flex box ========== */

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-D__column {
  display: flex;
  flex-direction: column;
}

@media (width < 969px) {
  .top-order01 {
    order: 1;
  }
  .top-order02 {
    order: 2;
  }
  .top-order03 {
    order: 3;
  }
}

.gap20 {
  gap: 20px;
}

.gap30 {
  gap: 30px;
}

.gap40 {
  gap: 40px;
}

.gap50 {
  gap: 50px;
}

@media (width < 969px) {
  .gap20_sp {
    gap: 20px;
  }

  .gap30_sp {
    gap: 30px;
  }

  .gap40_sp {
    gap: 40px;
  }

  .gap50_sp {
    gap: 50px;
  }
}

/*!! ========== Clearfix ========== */
/* For modern browsers */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom: 1;
}

/*!! ========== basic configurations ========== */
* {
  margin: 0;
  padding: 0;
  /* line-height: 1.66; */
}
html {
  background: #fff;
  /* letter-spacing: .1em; */
  -webkit-text-size-adjust: 100%;
}

/* link basis */
:where(a, a:where(:link, :visited)) {
  color: #0c59b8;
  text-decoration: none;
}

:where(a:where(:hover, :focus, :active)) {
  color: #0c59b8;
  text-decoration: underline;
}
:where(a:hover) {
  cursor: pointer;
}
:where(a.hover img) {
  transition: all 0.3s;
}
:where(a.hover:hover img) {
  opacity: 0.8;
  filter: alpha(opacity=80);
  transition: all 0.3s;
}
a.no_link {
  pointer-events: none;
  cursor: default;
  color: #333 !important;
}

/*!! common */
body {
  position: relative;
}

.indent {
  text-indent: -1em;
  padding-left: 1em;
}

.disp_pc {
  display: block;
}
.disp_sp {
  display: none;
}
@media screen and (max-width: 969px) {
  .disp_pc {
    display: none;
  }
  .disp_sp {
    display: block;
  }
}

/* ===============================================
 PC・タブレット・SPの表示切り替え 重ね掛けOK こちらをなるべく使う
=============================================== */
.d-sp {
  display: none;
}
@media (width <= 640px) {
  .d-sp {
    display: block;
  }
}

.d-pc,
.d-tb {
  display: none;
}

@media (width >= 969px) {
  .d-pc {
    display: block;
  }
}
@media (641px <= width <= 968px) {
  .d-tb {
    display: block;
  }
}

/* インラインブロック版 */
.d-sp-ib {
  display: none;
}
@media (width <= 640px) {
  .d-sp-ib {
    display: inline-block;
  }
}

.d-pc-ib,
.d-tb-ib {
  display: none;
}

@media (width >= 969px) {
  .d-pc-ib {
    display: inline-block;
  }
}
@media (641px <= width <= 968px) {
  .d-tb-ib {
    display: inline-block;
  }
}

/* ===============================================
 PC・タブレット・SPの表示切り替え 重ね掛けOK こちらをなるべく使う
=============================================== */

.legend_stripe {
  background: url(/images/lineup/legendBg.gif) repeat 50% 50%;
  width: min(100%, 1260px);
  margin-inline: auto;
}

/* pc map and list */
.mapWrapper {
  display: block;
  width: 1260px;
  margin: 10px auto 0 auto;
}
.mapL {
  float: left;
  width: 761px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/*!!!!!!!!!!!!! 品川アネックス公開後のコード !!!!!!!!!!!!!*/
.mapL_header {
  display: block;
  width: 100%;
  background: url(../images/top/mapL_header_bg.jpg) no-repeat 0 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 60px;
}
/*!!!!!!!!!!!!! 品川アネックス公開後のコード !!!!!!!!!!!!!*/

.mapL_header h2 {
  margin-left: 10px;
  font-size: 171.4285714%;
  font-weight: bold;
}
.mapL_header h2 span {
  padding: 0 0 0 35px;
  background: url(../images/top/top_pin_title-em.svg) no-repeat 0 50%;
  background-size: 25px 34px;
}
.areaTab {
  display: flex;
  flex-wrap: wrap;
  /* margin: 10px 0 0 0; */
  box-sizing: border-box;
}
.areaTab li {
  /* width: 182px;
	height: 25px; */
  width: calc(100% / 4 - 1px);
}

.areaTab li a {
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 240px;
  color: #313131;
  transition: 0.1s ease-in-out;
  font-weight: 600;
  background: #eee;
  overflow: hidden;
  box-sizing: border-box;
  text-decoration: none;
}

.areaTab li a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 1px;
  color: #313131;
  transform: rotate(-45deg);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid #555555;
  border-bottom: 0;
  transition: all 0.3s;
}

.areaTab li a:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 500%;
  content: "";
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
  background: var(--color-main);
  opacity: 0.2;
}
.areaTab li a:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.areaTab li a.selected {
  background: var(--color-main);
  color: #fff;
  transition: all 0.3s;
  text-decoration: none;
}

.areaTab li a.selected::after {
  content: "";
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: all 0.3s;
}

.areaTab li a:hover {
  text-decoration: none;
  /* color: #fff; */
}
.areaTab li:nth-child(n + 2):nth-child(-n + 4),
.areaTab li:nth-child(n + 6) {
  border-left: solid 1px #ccc;
}
.areaTab li:nth-child(n + 4) {
  border-bottom: solid 1px #ccc;
}
.areaTab li:nth-child(n + 5) {
  /* margin-top: 5px; */
  border-top: solid 1px #ccc;
}

.areaTab01 a,
.areaTab02 a,
.areaTab03 a,
.areaTab04 a {
  display: block;
  width: 182px;
  height: 25px;
  transition: all 0.3s;
}

.areaTabPanelWrapper {
  display: block;
  width: 100%;
  /* height: 524px; */
  height: 511px;
  border-top: 1px solid #ccc;
}
.areaTabPanel {
  width: 761px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.panelPane {
  display: none;
  width: 100%;
  /* height: 524px; */
  height: 511px;
  position: relative;
}
.panelPane:first-child {
  display: block;
}
#areaTab01 {
  background: url(../images/top/areaBg01.jpg) no-repeat 50% 0;
  background-size: cover;
}
#areaTab02 {
  background: url(../images/top/areaBg02.jpg) no-repeat 50% 0;
  background-size: cover;
}
#areaTab03 {
  background: url(../images/top/areaBg03.jpg) no-repeat 50% 0;
  background-size: cover;
}
#areaTab04 {
  background: url(../images/top/areaBg04.jpg) no-repeat 50% 0;
  background-size: cover;
}
#areaTab05 {
  background: url(../images/top/areaBg05.jpg) no-repeat 50% 0;
  background-size: cover;
}

#areaTab06 {
  background: url(../images/top/areaBg06.jpg) no-repeat 50% 0;
  background-size: cover;
}

#areaTab07 {
  background: url(../images/top/areaBg07.jpg) no-repeat 50% 0;
  background-size: cover;
}

.map_vc_shinjuku {
  /*!! shinjuku */
  display: block;
  width: 144px;
  height: 127px;
  position: relative;
  top: 4px;
  left: 137px;
}
.map_vc_shinjuku a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_vc_shinjuku_bg.png) no-repeat 0 0;
}
.map_vc_shinjuku a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_shinjuku a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_nishishinjuku {
  /*!! nishishinjuku */
  display: block;
  width: 128px;
  height: 128px;
  position: relative;
  top: 118px;
  left: 246px;
}
.map_vc_nishishinjuku a {
  display: block;
  width: 128px;
  height: 128px;
  background: url(../images/top/map/map_vc_nishishinjuku_bg.png) no-repeat 0 0;
  background-size: cover;
}
.map_vc_nishishinjuku a img {
  opacity: 0;
  transition: all 0.3s;
  width: 128px;
  height: 128px;
  object-fit: cover;
}
.map_vc_nishishinjuku a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_nagatacho {
  /*!! nagatacho */
  display: block;
  width: 144px;
  height: 128px;
  position: absolute;
  top: 350px;
  left: 349px;
}
.map_vc_nagatacho a {
  display: block;
  width: 144px;
  height: 128px;
  background: url(../images/top/map/map_vc_nagatacho_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_nagatacho a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_nagatacho a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_aka_ichi {
  /*!! ichigaya top */
  display: block;
  width: 144px;
  height: 127px;
  position: absolute;
  top: 104px;
  left: 397px;
  transform: translate(-50%);
}
.map_vc_aka_ichi a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_vc_aka_ichi_bg.png) no-repeat 0 0;
  background-size: cover;
}
.map_vc_aka_ichi a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_aka_ichi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vr_yotsuya {
  /*!! yotsuya */
  display: block;
  width: 144px;
  height: 127px;
  position: relative;
  top: 17px;
  left: 601px;
}
.map_vr_yotsuya a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_vr_yotsuya_bg.png) no-repeat 0 0;
}
.map_vr_yotsuya a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vr_yotsuya a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tora_shin {
  display: block;
  position: absolute;
  width: 149px;
  height: 121px;
  position: absolute;
  top: 49%;
  left: 63.5%;
  transform: translate(-50%);
}
.map_vc_tora_shin a {
  display: block;
  width: 149px;
  height: 121px;
  background: url(../images/top/map/map_vc_tora_shin-areas_bg.png) no-repeat 0 0;
  background-size: 149px;
}
.map_vc_tora_shin a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 121px;
}
.map_vc_tora_shin a:hover img {
  opacity: 1;
}

.map_vc_shinjuku-mayndstower {
  /*!! shinjuku-mayndstower */
  display: block;
  width: 217px;
  height: 102px;
  position: absolute;
  top: 194px;
  left: 322px;
}
.map_vc_shinjuku-mayndstower a {
  display: block;
  width: 217px;
  height: 102px;
  background: url(../images/top/map/map_vc_shinjuku-mayndstower_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_shinjuku-mayndstower a img {
  opacity: 0;
  transition: all 0.3s;
  object-fit: contain;
  width: 217px;
  height: 102px;
}
.map_vc_shinjuku-mayndstower a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tamachi {
  /*!! tamachi */
  display: block;
  width: 103px;
  height: 131px;
  position: relative;
  top: 48px;
  left: 321px;
}
.map_vc_tamachi a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tamachi_bg.png) no-repeat 0 0;
}
.map_vc_tamachi a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tamachi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_yokohama {
  /*!! yokohama */
  display: block;
  width: 169px;
  height: 135px;
  position: relative;
  top: 50px;
  left: 55px;
}
.map_vc_yokohama a {
  display: block;
  width: 169px;
  height: 135px;
  background: url(../images/top/map/map_vc_yokohama_bg.png?261001) no-repeat 0 0;
  background-size: contain;
}
.map_vc_yokohama a img {
  opacity: 0;
  transition: all 0.3s;
  width: 169px;
  height: 135px;
}
.map_vc_yokohama a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_yokohama_mi {
  /*!! 横浜みなとみらい */
  display: block;
  width: 144px;
  height: 137px;
  position: relative;
  top: 46px;
  left: 317px;
}
.map_vc_yokohama_mi a {
  display: block;
  width: 144px;
  height: 137px;
  background: url(../images/top/map/map_vc_yokohama_mi_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_yokohama_mi a img {
  opacity: 0;
  transition: all 0.3s;
  width: 144px;
  height: 137px;
}
.map_vc_yokohama_mi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_yokohama_k-arena {
  /*!! 横浜駅東口（Kアリーナ前）*/
  display: block;
  width: 151px;
  height: 143px;
  position: absolute;
  top: 85px;
  left: 235px;
}
.map_vc_yokohama_k-arena a {
  display: block;
  width: 172px;
  height: 143px;
  background: url(../images/top/map/map_vc_yokohama_k-arena_bg.png?260530) no-repeat 0 0;
  background-size: contain;
}
.map_vc_yokohama_k-arena a img {
  opacity: 0;
  transition: all 0.3s;
  width: 172px;
  height: 143px;
}
.map_vc_yokohama_k-arena a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_yokohama_mi-v2 {
  /*!! 横浜みなとみらい V2 */
  display: block;
  width: 223px;
  height: 101px;
  position: absolute;
  top: 209px;
  left: 353px;
}
.map_vc_yokohama_mi-v2 a {
  display: block;
  width: 223px;
  height: 101px;
  background: url(../images/top/map/map_vc_yokohama_mi_bg-v2.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_yokohama_mi-v2 a img {
  opacity: 0;
  transition: all 0.3s;
  width: 223px;
  height: 101px;
}
.map_vc_yokohama_mi-v2 a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_t-hamamatsucho {
  /*!! vc グランデ東京浜松町 */
  display: block;
  width: 149px;
  height: 138px;
  position: absolute;
  top: 107px;
  left: 450px;
}
.map_vc_t-hamamatsucho a {
  display: block;
  width: 149px;
  height: 138px;
  background: url(../images/top/map/map_vc_t-hamamatsucho_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_t-hamamatsucho a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 138px;
}
.map_vc_t-hamamatsucho a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_hamamatsucho {
  /*!! vc hamamatsucho */
  display: block;
  width: 149px;
  height: 129px;
  position: relative;
  top: 206px;
  left: 423px;
}
.map_vc_hamamatsucho a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_hamamatsucho_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_hamamatsucho a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_hamamatsucho a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_shinagawa {
  /*!! vc shinagawa */
  display: block;
  width: 149px;
  height: 129px;
  position: relative;
  top: 122px;
  left: -8px;
  z-index: 20;
}
.map_vc_shinagawa a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_shinagawa_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_shinagawa a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_shinagawa a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_shinagawa_anex {
  /*!! vc shinagawa_anex */
  display: block;
  width: 149px;
  height: 129px;
  position: relative;
  top: -73px;
  left: 48px;
  z-index: 10;
}
.map_vc_shinagawa_anex a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_shinagawa_anex_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_shinagawa_anex a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_shinagawa_anex a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tameikesanno {
  /*!! tameikesanno */
  display: block;
  width: 149px;
  height: 129px;
  position: absolute;
  top: 2%;
  left: 23%;
  transform: translate(-50%);
}
.map_vc_tameikesanno a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_tameikesanno_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_tameikesanno a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 129px;
}
.map_vc_tameikesanno a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_toranomonhills {
  /*!! toranomonhills */
  display: block;
  width: 149px;
  height: 129px;
  position: absolute;
  top: 30%;
  left: 35%;
  transform: translate(-50%);
}
.map_vc_toranomonhills a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_toranomonhills_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_toranomonhills a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 129px;
}
.map_vc_toranomonhills a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_shinbashi_tora {
  /*!! toranomonhills */
  display: block;
  width: 149px;
  height: 129px;
  position: absolute;
  top: 24%;
  left: 90%;
  transform: translate(-50%);
}
.map_vc_shinbashi_tora a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_shinbashi_tora_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_shinbashi_tora a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 129px;
}
.map_vc_shinbashi_tora a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_shimbashi {
  /*!! shimbashi */
  display: block;
  width: 149px;
  height: 129px;
  position: relative;
  top: -495px;
  left: 576px;
}
.map_vc_shimbashi a {
  display: block;
  width: 149px;
  height: 129px;
  background: url(../images/top/map/map_vc_shinbashi_tora_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_shimbashi a img {
  opacity: 0;
  transition: all 0.3s;
  width: 149px;
  height: 129px;
}
.map_vc_shimbashi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_hibiya {
  /*!! hibiya */
  display: block;
  width: 115px;
  height: 140px;
  position: absolute;
  transform: translate(-50%);
  top: 350px;
  left: 12%;
}
.map_vc_hibiya a {
  display: block;
  width: 115px;
  height: 140px;
  background: url(../images/top/map/map_vc_hibiya_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_hibiya a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_hibiya a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo {
  /*!! tokyo */
  display: block;
  width: 103px;
  height: 131px;
  position: relative;
  top: -64px;
  left: 285px;
}
.map_vc_tokyo a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo_bg.png) no-repeat 0 0;
}
.map_vc_tokyo a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo-ekimae {
  /*!! tokyo-ekimae */
  display: block;
  width: 103px;
  height: 131px;
  position: absolute;
  transform: translate(-50%);
  top: 96px;
  left: 378px;
}
.map_vc_tokyo-ekimae a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo-ekimae_bg.png) no-repeat 0 0;
}
.map_vc_tokyo-ekimae a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo-ekimae a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo-nihonbashi {
  /*!! tokyo-nihonbashi */
  display: block;
  width: 103px;
  height: 131px;
  position: relative;
  top: -5px;
  left: 533px;
}
.map_vc_tokyo-nihonbashi a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo-nihonbashi_bg.png) no-repeat 0 0;
}
.map_vc_tokyo-nihonbashi a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo-nihonbashi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo-yurakucho {
  /*!! tokyo-yurakucho */
  display: block;
  width: 103px;
  height: 131px;
  position: relative;
  top: -67px;
  left: 285px;
}
.map_vc_tokyo-yurakucho a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo-yurakucho_bg.png) no-repeat 0 0;
}
.map_vc_tokyo-yurakucho a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo-yurakucho a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_area_yaesu {
  /*!! area yaesu */
  display: block;
  width: 144px;
  height: 127px;
  position: relative;
  /* top: -82px;
	left: 535px; */
  top: -102px;
  left: 540px;
}
.map_area_yaesu a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_area_yaesu_bg.png) no-repeat 0 0;
}
.map_area_yaesu a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_area_yaesu a:hover img {
  opacity: 1;
  transition: all 0.3s;
}
.map_area_hamamatsucho {
  /*!! area hamamatsucho */
  display: block;
  width: 144px;
  height: 127px;
  position: relative;
  top: 4px;
  left: 312px;
}
.map_area_hamamatsucho a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_area_hamamatsucho_bg.png) no-repeat 0 0;
}
.map_area_hamamatsucho a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_area_hamamatsucho a:hover img {
  opacity: 1;
  transition: all 0.3s;
}
.map_area_shinjuku {
  /*!! area shinjuku */
  display: block;
  width: 144px;
  height: 127px;
  position: relative;
  top: 84px;
  left: 15px;
}
.map_area_shinjuku a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_area_shinjuku_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_area_shinjuku a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_area_shinjuku a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_area_yokohama {
  /* yokohama */
  display: block;
  width: 131px;
  height: 118px;
  position: relative;
  top: 248px;
  left: 35px;
}
.map_area_yokohama a {
  display: block;
  width: 131px;
  height: 118px;
  background: url(../images/top/map/map_area_yokohama_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_area_yokohama a img {
  width: 131px;
  height: 118px;
  opacity: 0;
  transition: all 0.3s;
}
.map_area_yokohama a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_kyobashi {
  /*!! kyobashi */
  display: block;
  width: 103px;
  height: 131px;
  position: absolute;
  transform: translate(-50%);
  top: 266px;
  left: 59%;
}
.map_vc_kyobashi a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_kyobashi_bg.png) no-repeat 0 0;
}
.map_vc_kyobashi a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_kyobashi a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo-nihonbashi-yaesu {
  /*!! tokyo-nihonbashi-yaesu */
  display: block;
  width: 103px;
  height: 131px;
  position: absolute;
  transform: translate(-50%);
  top: 142px;
  left: 65%;
}
.map_vc_tokyo-nihonbashi-yaesu a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo-nihonbashi-yaesu_bg.png) no-repeat 0 0;
}
.map_vc_tokyo-nihonbashi-yaesu a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo-nihonbashi-yaesu a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_tokyo-nihonbashi-1chome {
  /*!! tokyo-nihonbashi-1chome */
  display: block;
  width: 103px;
  height: 131px;
  position: absolute;
  transform: translate(-50%);
  top: -11px;
  left: 62.5%;
}
.map_vc_tokyo-nihonbashi-1chome a {
  display: block;
  width: 103px;
  height: 131px;
  background: url(../images/top/map/map_vc_tokyo-nihonbashi-1chome_bg.png) no-repeat 0 0;
}
.map_vc_tokyo-nihonbashi-1chome a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_tokyo-nihonbashi-1chome a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_ichigaya-ekimae {
  width: 144px;
  height: 139px;
  position: absolute;
  top: 82px;
  left: 179px;
  z-index: 2;
}

.map_vc_ichigaya-ekimae a {
  display: block;
  width: 144px;
  height: 139px;
  background: url(../images/top/map/map_vc_ichigaya-ekimae_bg.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_ichigaya-ekimae a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_ichigaya-ekimae a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_ichigaya {
  width: 144px;
  height: 127px;
  position: absolute;
  top: 5px;
  left: 266px;
}
.map_vc_ichigaya a {
  display: block;
  width: 144px;
  height: 127px;
  background: url(../images/top/map/map_vc_ichigaya_bg.png) no-repeat 0 0;
}
.map_vc_ichigaya a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_ichigaya a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

.map_vc_ichigaya-v2 {
  width: 144px;
  height: 139px;
  position: absolute;
  top: 5px;
  left: 266px;
}
.map_vc_ichigaya-v2 a {
  display: block;
  width: 144px;
  height: 139px;
  background: url(../images/top/map/map_vc_ichigaya_bg-v2.png) no-repeat 0 0;
  background-size: contain;
}
.map_vc_ichigaya-v2 a img {
  opacity: 0;
  transition: all 0.3s;
}
.map_vc_ichigaya-v2 a:hover img {
  opacity: 1;
  transition: all 0.3s;
}

/* .map_vc_nagatacho {
	display: block;
	width: 144px;
	height: 127px;
	position: absolute;
	top: 350px;
	left: 349px;
}
.map_vc_nagatacho a {
	display: block;
	width: 144px;
	height: 127px;
	background: url(../images/top/map/map_vc_nagatacho_bg.png) no-repeat 0 0;
}
.map_vc_nagatacho a img {
	opacity: 0;
	transition: all 0.3s;
}
.map_vc_nagatacho a:hover img {
	opacity: 1.0;
	transition: all 0.3s;
} */

.mapR {
  float: right;
  width: 472px;
}

.pc_slider {
  display: block;
  width: 472px;
  height: 182px;
  position: relative;
  /* top: 431px; */
  top: 4px;
}
#panoramaPC {
  display: block;
  width: 472px;
  margin: 5px auto 0 auto;
}
#slideshowPC {
  display: block;
  width: 472px;
}
#slideshowPC div,
#slideshowPC div img {
  display: block;
  width: 472px;
  max-width: 100%;
  height: auto;
}

.mapR_list {
  width: 470px;
  margin-top: -188px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding-bottom: 8px;
}
.mapR_header {
  padding-top: 10px;
  background: url(../images/top/mapR_header_bg.jpg) no-repeat 0 0;
  border-radius: 3px;
}
.mapR_header h2 {
  margin-left: 10px;
  font-size: 171.4285714%;
  font-weight: bold;
  line-height: 38px;
}
.mapR_header h2 span {
  padding: 10px 0 5px 35px;
  background: url(../images/top/top_list_title-em.svg) no-repeat 0 50%;
  background-size: 25px 38px;
}
.mapR_lineup {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(100% - 20px);
  margin: 5px auto 0 auto;
}
.mapR_lineup li {
  /* float: right; */
  display: block;
  width: calc(((100% - 11px) / 2) - 2px);
  /* margin-left: 10px; */
  margin-bottom: 7px; /* 9rows */
  /* margin-bottom: 7px; 8rows */
  /*margin-bottom: 11px;  7rows */
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  line-height: 1em;
}
/* .mapR_lineup li:nth-child(2n) {
	margin-left: 0;
} */
.mapR_lineup li a {
  display: block;
  width: calc(100% - 4px);
  /* padding: 4px 0 4px 4px; */
  /* padding: 5px 0 5px 4px; */
  /* padding: 8px 0 8px 4px; */
  padding: 6px 0 6px 4px;
  /* padding: 12px 0 12px 4px; */
  color: #000;
  /* font-size: 92.8571428%; */
  transition: all 0.3s;
  line-height: 1em;
  position: relative;
}

.mapR_lineup li a.slide_action {
  position: relative;
  overflow: hidden;
}

.mapR_lineup li a.slide_action::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 600%;
  content: "";
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
  background: #6eb42f;
  opacity: 0.2;
}
.mapR_lineup li a.slide_action:hover::before {
  -webkit-transform: translateX(-20%) translateY(-25%) rotate(45deg);
  transform: translateX(-20%) translateY(-25%) rotate(45deg);
}

.mapR_lineup {
  li.list_yaesu a.slide_action::before {
    background: #d9c0da;
  }
  li.list_shinjuku a.slide_action::before {
    background: #f6cc8c;
  }
  li.list_toranomonhills a.slide_action::before {
    background: #6ab3e7;
  }

  li.list_hamamatsucho a.slide_action::before {
    background: #4be5ff;
  }

  li.list_nagatacho a.slide_action::before {
    background: #f3e785;
  }

  li.list_yokohama a.slide_action::before {
    background: #3effcd;
  }
}

.mapR_lineup li a.new {
  background: url(../images/top/top_list_new.svg) no-repeat 100% 50%;
  background-size: 29px 14px;
}
.mapR_lineup li a:hover {
  text-decoration: none;
}
.list_yaesu,
.list_hamamatsucho,
.list_shinjuku,
.list_toranomonhills {
  background: #fff;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_yaesu.hilight {
  background: #f1f0fe;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_hamamatsucho.hilight {
  background: #dff7fb;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_shinjuku.hilight {
  background: #fdefda;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_toranomonhills.hilight {
  background: #bce3ff;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_yokohama.hilight {
  background: #dcfff6;
  transition: all 0.3s;
  border-radius: 3px;
}

.list_nagatacho_vc.hilight {
  background: #fffce3;
  transition: all 0.3s;
  border-radius: 3px;
}

.list_yaesu.hilight:hover {
  background: #f4f3fe;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_hamamatsucho.hilight:hover {
  background: #e5f9fc;
  transition: all 0.3s;
  border-radius: 3px;
}
.list_shinjuku.hilight:hover {
  background: #fef4e5;
  transition: all 0.3s;
  border-radius: 3px;
}

/*!! sp header and list */
@media screen and (max-width: 969px) {
  .slider_sp {
    display: block;
    width: 100%;
    height: 38.461538vw;
  }
  .sliderSPWrapper {
    display: block;
  }
  #panorama {
    display: block;
    width: 100%;
    margin: 10px auto 0 auto;
  }
  #slideshow {
    display: block;
    width: 100%;
  }
  #slideshow div,
  #slideshow div img {
    display: block;
    width: 100%;
  }
  .list_sp {
    margin-top: 15px;
    /* margin-top: calc((100vw * 250 / 650) + 20px); */
    /* margin-top: 300px; */
    /* background: #fee; */
  }
  .list_sp h2 {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto;
    font-size: 160.7142857%;
    font-weight: bold;
  }
  .list_sp h2 span {
    padding-left: 22px;
    background: url(../images/top/top_list_title.svg) no-repeat 0 50%;
    background-size: 15px 21px;
  }
  .list_sp ul {
    /* display: block; */
    width: calc(100% - 20px);
    margin: 0 auto;
  }

  .list_sp ul li {
    /* display: block; */
    width: calc(((100% - 10px) / 2) - 2px);
    /* margin-left: 10px; */
    margin-bottom: 10px;
    border: 1px solid #d3d3d3;
  }
  /* .list_sp ul li:nth-child(2n) {
		margin-left: 0;
	} */
  .list_sp ul li a {
    position: relative;
    display: block;
    width: calc(100% - 4px);
    padding: 6px 0 6px 4px;
    color: #000;
    /* font-size: 92.8571428%; */
  }
  .list_sp ul li a.new {
    background: url(../images/top/top_list_new.svg) no-repeat 100% 50%;
    background-size: 27px 14px;
  }
  .list_sp ul li a:hover {
    text-decoration: none;
  }
}

.list_sp ul li a i.smt {
  font-size: 78.57142%;
  font-style: normal;
}

.list_sp ul li.grande a i.smt {
  font-size: 68%;
}

ul.mapR_lineup li a span {
  padding: 6px 0 6px 23px;
}

.list_sp ul li a span {
  padding: 6px 0 6px 23px;
}

.list_yaesu_vc a span {
  background: url(../images/top/yaesu_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_yaesu_vr a span {
  background: url(../images/top/yaesu_vr.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_shinjuku_vc a span {
  background: url(../images/top/shinjuku_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_shinjuku_vr a span {
  background: url(../images/top/shinjuku_vr.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_kanda_vc a span {
  background: url(../images/top/kanda_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_toranomonhills_vc a span {
  background: url(../images/top/toranomonhills-vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}

.list_hamamatsucho_vc a span {
  background: url(../images/top/hamamatsucho_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_hamamatsucho_vr a span {
  background: url(../images/top/hamamatsucho_vr.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_nagatacho_vc a span {
  background: url(../images/top/nagatacho_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_yokohama_vc a span {
  background: url(../images/top/yokohama_vc.svg) no-repeat 0 50%;
  background-size: 17px 17px;
  line-height: 1.4em;
}
.list_shinjuku_vc a i.smt {
  font-style: normal;
}
@media screen and (max-width: 450px) {
  .list_shinjuku_vc a i.smt {
    font-size: 78.57142%;
  }
}
@media screen and (max-width: 320px) {
  .list_sp ul li a {
    font-size: 80%;
  }
  .list_sp ul li a.new {
    background: url(../images/top/top_list_new.svg) no-repeat 100% 50%;
    background-size: 19px 8px;
  }
}

/* 閉館のアイコン */
.close-icon {
  background: #cd2b3e;
  color: #fff;
  border-radius: 30px 0 0 30px;
  font-size: 9px;
  padding-inline: 8px 6px;
  padding-bottom: 1px;
  letter-spacing: 1px;
  border: solid 1px #ccc;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
}

/*!! lightslider */
.lightSliderTitle {
  margin-top: 50px;
}
.lightSliderTitle .disp_pc {
  display: block;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  border-top: 1px solid #000;
}
.lightSliderTitle .disp_pc h2 {
  text-align: center;
  font-size: 185.71428%;
  line-height: 1em;
}
.lightSliderTitle .disp_pc h2 span {
  padding: 0 1rem;
  background: #fff;
  line-height: 1em;
  position: relative;
  top: -0.5em;
}
@media screen and (max-width: 969px) {
  .lightSliderTitle {
    margin-top: 20px;
  }
  .lightSliderTitle .disp_pc {
    display: none;
  }
  .lightSliderTitle .disp_sp {
    display: block;
  }
  .lightSliderTitle_sp {
    display: block;
    padding: 20px 0;
    background: #e9e9e9;
  }
  .lightSliderTitle_sp h2 {
    color: #595656;
    font-size: 142.85714%;
    text-align: center;
  }
  .lightSliderTitle_sp h2 img {
    display: inline-block;
    width: auto;
    height: 16px;
  }
  .lightSliderTitle_sp h2 span {
    display: block;
    margin-top: 3px;
    color: #000;
  }
  .utility_spWrapper {
    display: table;
    width: calc(100% - 20px);
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    background: #e9e9e9;
  }
  .utility_sp {
    display: table-cell;
    width: 50%;
    padding-right: 15px;
  }
  .utility_spWrapper .utility_sp:last-child {
    padding-right: 0;
  }
  .utility_sp a {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    background: #000;
    border-radius: 5px;
    color: #fff;
    font-size: 114.28571%;
    text-align: center;
  }
  .legend_sp .legendWrapper {
    width: calc(100% - 20px);
    margin: 10px auto;
  }
  .legend_sp .legend {
    display: table;
    width: 100%;
    margin-bottom: 10px;
    background: url(/images/lineup/legendBg.gif) repeat 0 0;
  }
  .legend_sp .legend_icon {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    padding: 3px 5px 3px 44px;
  }
  .legend_sp .legend_icon img {
    display: block;
    width: 30px;
    height: 30px;
  }
  .legend_sp .legend_let {
    display: table-cell;
    vertical-align: middle;
  }
}

.lightSliderWrapper {
  width: 100%;
  margin: 10px auto 20px auto;
  padding: 0;
}
@media screen and (max-width: 969px) {
  .lightSliderWrapper {
    margin: 0 auto;
    padding: 25px 0;
    background: #e9e9e9;
  }
}
.offer-swiper {
  overflow-x: hidden;
  width: min(100%, 1260px);
  position: relative;
  padding-block: 10px 20px;
}
@media screen and (max-width: 969px) {
  .offer-swiper {
    background: #e9e9e9;
    padding-block: 25px;
  }
}

.offer-swiper li {
  width: 244px;
}
.offer-swiper li a {
  display: block;
  width: 244px;
  height: 361px;
}

.offer-swiper li a img {
  display: block;
  width: 244px;
  height: 361px;
}

.offer-swiper li a span {
  display: block;
  width: 240px;
  height: 160px;
  overflow: hidden;
  position: relative;
  z-index: 1000;
  top: 18px;
  left: 2px;
}
.offer-swiper li a span img {
  display: block;
  width: 240px;
  height: 160px;
  transition-duration: 0.3s;
}
.offer-swiper li a:hover span img {
  transform: scale(1.15);
  transition-duration: 0.3s;
}

.offer-swiper li a .buildingBg {
  display: block;
  width: 244px;
  height: 361px;
  margin-top: -160px;
}

.lSPager {
  /*!! bottom bit */
  display: none;
}

/* .offer-swiper {
		left: calc((100% - 1036px) / 2);
	} */

@media screen and (max-width: 1035px) {
  /* 3cols */
  .offer-swiper {
    min-width: 772px;
    width: 100%;
    /* width: max(100%, 772px); */
  }
}
@media screen and (max-width: 771px) {
  /* 2cols */
  .offer-swiper {
    min-width: 508px;
    width: 100%;
    /* width: max(100%, 508px); */
  }
}
@media screen and (max-width: 507px) {
  /* 1col */
  .offer-swiper {
    width: 100%;
    min-width: 320px;
    /* width: max(100%, 320px); */
  }
}
.offer-swiper {
  .swiper-button-prev::after {
    content: "";
    width: 52px;
    display: block;
    top: 50%;
    left: -3px;
    height: 52px;
    background-image: url(../js/lightslider/controls2.png);
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -32px;
  }
  .swiper-button-next::after {
    content: "";
    width: 52px;
    display: block;
    top: 50%;
    right: -3px;
    height: 52px;
    background-image: url(../js/lightslider/controls2.png);
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -32px;
    background-position: -52px 0;
  }

  .swiper-button-prev,
  .swiper-button-next {
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
  }

  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    opacity: 1;
    transition: opacity 0.35s linear 0s;
  }

  .slider-wrapper:hover .swiper-slide {
    animation-play-state: paused;
  }
}

.legend_pc {
}
.legend_pc .legend {
  display: table;
  padding: 14px 0;
  margin: 0 auto;
}
.legend_pc .legend .legend_icon {
  display: table-cell;
  vertical-align: middle;
  width: 28px;
  padding-right: 10px;
}
.legend_pc .legend .legend_icon img {
  display: block;
  width: 28px;
  height: 28px;
}
.legend_pc .legend .legend_content {
  display: table-cell;
  vertical-align: middle;
  padding-right: 40px;
  font-size: 100%;
  font-weight: normal;
}
.legend_pc .legend .legend_content:last-child {
  padding-right: 0;
}
.topUtility {
  display: table;
  width: 800px;
  /* margin: 22px auto 22px auto; */
  margin: 10px auto 40px auto;
}
.button_utility {
  display: table-cell;
  width: 380px;
  padding-right: 40px;
}
.button_utility:last-child {
  padding-right: 0;
}
.button_utility a {
  display: block;
  width: 380px;
  color: #fff;
  padding: 10px 0;
  background: #000 url(../images/top/utility_icon.png) no-repeat 0 50%;
  border-radius: 5px;
  font-size: 114.28571%;
  text-align: center;
  line-height: 1em;
  transition: all 0.3s;
}
.button_utility a:hover {
  background-color: #333;
  transition: all 0.3s;
  text-decoration: none;
}
.button_utility a span {
  display: block;
  width: 100%;
  background: url(../images/top/utility_bit.png) no-repeat 362px 50%;
}
.top_choki {
  display: block;
  width: min(100%, 1920px);
  margin: auto;
  background: url(../images/top/top_chokiBg.jpg) no-repeat 50% 50%;
  background-position: 10% 50%;
  background-size: cover;
}
.top_choki_frame {
  width: min(100%, 1260px);
  margin-inline: auto;
  padding: 28px 0 28px 0;
  background:
    url(../images/top/choki_stripe_top.gif) left top repeat-x,
    url(../images/top/choki_stripe_right.gif) right top repeat-y,
    url(../images/top/choki_stripe_top.gif) right bottom repeat-x,
    url(../images/top/choki_stripe_right.gif) left top repeat-y;
}

.top_choki1b,
.top_choki1c {
  width: 970px;
  margin: 0 auto;
}
@media screen and (max-width: 969px) {
  .top_choki1b,
  .top_choki1c {
    width: 100%;
  }
}
.top_choki1b a {
  display: block;
  width: 970px;
  height: 190px;
}
@media screen and (max-width: 969px) {
  .top_choki1b a {
    width: 100%;
    height: auto;
  }
}
.top_choki1b a img {
  display: block;
  width: 970px;
  height: 190px;
  transition: all 0.3s;
}
@media screen and (max-width: 969px) {
  .top_choki1b a img {
    width: 100%;
    height: auto;
  }
}
.top_choki1c img {
  display: block;
  width: 970px;
  height: 240px;
  transition: all 0.3s;
}
.top_choki1b a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  transition: all 0.3s;
}

.inq_gold {
  width: min(100%, 1260px);
  margin-inline: auto;
  background: #fee8ae; /* Old browsers */
  background: -moz-linear-gradient(top, #fee8ae 1%, #b48c36 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fee8ae 1%, #b48c36 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fee8ae 1%, #b48c36 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee8ae', endColorstr='#b48c36',GradientType=0 ); /* IE6-9 */
}
.inq_goldWrapper {
  width: 640px;
  margin: 0 auto;
  padding: 27px 0 23px 0;
}
.inq_goldWrapper h3 {
  text-align: center;
}
.inq_goldBottom {
  width: 640px;
  display: table;
  margin-top: 10px;
}
.inq_goldBottomL {
  display: table-cell;
  vertical-align: middle;
  width: 390px;
}
.inq_goldBottomL img {
  display: block;
  width: 358px;
  height: 65px;
  margin-left: 0;
}
.inq_goldBottomR {
  display: table-cell;
  vertical-align: middle;
  width: 250px;
}
.inq_goldBottomR a {
  display: block;
  width: 250px;
  height: 45px;
  background: #fff;
  border-radius: 5px;
}
.inq_goldBottomR a img {
  display: block;
  width: 250px;
  height: 45px;
}
@media screen and (max-width: 989px) {
  .top_choki_frame {
    background: none;
  }
}
@media screen and (max-width: 969px) {
  .top_choki {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto;
    padding: 0 10px 20px 10px;
    background: #e9e9e9 !important;
  }
  .top_choki a,
  .top_choki a img {
    display: block;
    width: 100%;
  }
}

.top_list_pc {
  padding: 60px 0 60px 0;
  background: #e9e9e9;
}
.top_list_pc h2 {
  color: #595656;
  font-size: 185.71428%;
  text-align: center;
  line-height: 1em;
}
.top_list_pc h2 img {
  display: inline-block;
  width: auto;
  height: 18px;
}
.top_list_pc h2 span {
  display: block;
  margin-top: 5px;
  color: #000;
}
.legend_white {
  width: min(100%, 1110px);
  margin: 25px auto 30px auto;
  background: #fff;
}
.top_listWrapper {
  width: 1110px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (width <= 1140px) {
  .top_listWrapper {
    width: 98%;
  }
}

.top_list__content {
  width: 540px;
  margin-bottom: 20px;
}
@media (width <= 1140px) {
  .top_list__content {
    width: clamp(28.75rem, 7.353rem + 35.29vw, 32.5rem);
  }
}

.top_list__content:nth-of-type(odd) {
  margin-right: 30px;
}
@media (width <= 1140px) {
  .top_list__content:nth-of-type(odd) {
    margin-right: 10px;
  }
}
.top_list__content:first-of-type {
  margin-left: 0;
  margin-right: auto;
}

.top_list__content:nth-child(2n) {
  margin-right: 0;
}
/*!! 最後の横浜を左寄せ */
/*
.top_list__content:nth-child(15) {
	margin-left: 0;
	margin-right: 500px;
}
 */
.top_list__content h4 {
  font-size: 107.14285%;
  color: #fff;
  line-height: 1em;
}
.top_list__content h4 span {
  padding: 1px 15px 3px 10px;
  line-height: 1em;
}

.area_yaesu h4 span {
  /* background: #a37dac; */
  background: url(../images/top/area_yaesu_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_shinjuku h4 span {
  /* background: #f0a200; */
  background: url(../images/top/area_shinjuku_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_kanda h4 span {
  /* background: #0c4aa2; */
  background: url(../images/top/area_kanda_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_shinbashi-toranomon h4 span {
  /* background: #033e8a; */
  background: url(../images/top/area_shinbashi-toranomon_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_tamachi h4 span {
  /* background: #39c0de; */
  background: url(../images/top/area_tamachi_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_nagatacho h4 span {
  /* background: #d7cb00; */
  background: url(../images/top/area_nagatacho_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.area_yokohama h4 span {
  /* background: #2fab94; */
  background: url(../images/top/area_yokohama_titleBg.png) no-repeat 100% 50%;
  background-size: cover;
}
.top_list_Frame {
  display: block;
  width: 505px;
  margin-top: -10px;
  padding: 18px 17px;
  background: #fff;
}
@media (width <= 1140px) {
  .top_list_Frame {
    width: clamp(26.875rem, 9.044rem + 29.41vw, 30rem);
  }
}
.area_yaesu .top_list_Frame {
  border: 3px solid #a37dac;
}
.area_shinjuku .top_list_Frame {
  border: 3px solid #f0a200;
}
.area_kanda .top_list_Frame {
  border: 3px solid #0c4aa2;
}
.area_shinbashi-toranomon .top_list_Frame {
  border: 3px solid #033e8a;
}
.area_tamachi .top_list_Frame {
  border: 3px solid #39c0de;
}
.area_nagatacho .top_list_Frame {
  border: 3px solid #d7cb00;
}
.area_yokohama .top_list_Frame {
  border: 3px solid #2fab94;
}
.top_list_title {
  display: block;
}
.top_list_Photo {
  float: left;
  width: 160px;
  margin-right: 15px;
}
.top_list_Photo a {
  display: block;
  width: 160px;
  height: 170px;
  overflow: hidden;
}
.top_list_Photo a img {
  display: block;
  width: 160px;
  height: 170px;
  transition-duration: 0.3s;
}
.top_list_Photo a:hover img {
  transform: scale(1.15);
  transition-duration: 0.3s;
}
.top_list_titleR {
  float: left;
  width: 300px;
}
@media (width <= 1140px) {
  .top_list_titleR {
    width: clamp(15.938rem, -0.11rem + 26.47vw, 18.75rem);
  }
}
.top_list_icon {
  display: block;
  width: 100%;
  height: 45px;
  position: relative;
  top: 125px;
  z-index: 2;
}
.top_list_icon span {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin-right: 10px;
}
.top_list_icon span img {
  display: block;
  width: 45px;
  height: 45px;
}
.top_list_titleR h3 {
  margin-top: -45px;
  /* font-size: 171.42857%; */
  font-size: 166.42857%;
  font-weight: bold;
  line-height: 1.1em;
}
@media (width <= 1140px) {
  .top_list_titleR h3 {
    font-size: 140%;
  }
}
.top_list_titleR h3 span {
  font-size: 83.3333%;
  line-height: 1.1em;
}
.top_list_titleR h3 br {
  line-height: 1.1em;
}
.top_list_titleR p {
  margin-top: 5px;
  line-height: 1.4em;
}
.top_list_caption {
  display: block;
  height: 7.5em;
  margin-top: 15px;
  font-size: 14px;
}
@media (width <= 1140px) {
  .top_list_caption {
    font-size: 12px;
  }
}
.top_list_caption p {
  font-size: 100%;
  line-height: 1.3em;
  margin-bottom: 0.2em;
}
.top_list_caption p:before {
  content: "●";
  margin-right: 0.2em;
  font-size: 80%;
}
.top_list_indetail {
  display: block;
  margin-top: 15px;
}
.top_list_indetail a {
  display: block;
  color: #fff;
  background: var(--color-main) url(../images/top/indetail.svg) no-repeat 475px 50%;
  background-size: 16px;
  border-radius: 5px;
  transition: all 0.3s;
  font-size: 114.28571%;
  text-align: center;
}
.top_list_indetail a:hover {
  opacity: 0.8;
  transition: all 0.3s;
  text-decoration: none;
}

.relatedServices {
  width: 100%;
  padding: 0 0 20px;
  /* background: #f4f4f4; */
}
.relatedServices.campaign {
  margin-block: 30px;
  overflow: hidden;
}
.relatedServices h2 {
  display: block;
  text-align: center;
  font-size: 171.42857%;
  line-height: 1em;
}
.relatedServices h2 span {
  display: block;
  color: var(--color-main);
}
.servicesWrapper {
  width: 920px;
  margin: 25px auto 0 auto;
}
.serviceCol {
  float: left;
  width: 200px;
  margin-right: 40px;
}
.serviceCol.sp {
  display: none;
}
.servicesWrapper .serviceCol:last-child {
  margin-right: 0;
}
.serviceCol h3 {
  padding: 5px 0;
  background: #333;
  color: #fff;
  font-size: 114.28571%;
  text-align: center;
}
.serviceCol a {
  display: block;
  width: 200px;
  height: 221px;
  margin-top: 16px;
}
.serviceCol a img {
  display: block;
  width: 200px;
  height: 221px;
}
@media screen and (max-width: 920px) {
  .relatedServices h2 {
    font-size: 142.85714%;
  }
  .relatedServices h2 span {
    margin-top: 5px;
    font-size: 75%;
  }
  .servicesWrapper {
    width: calc(100% - 20px);
    margin: 20px auto 0 auto;
  }
  .serviceCol {
    float: left;
    width: calc((100% - 10px) / 2);
    margin-right: 10px;
    margin-bottom: 25px;
  }
  .serviceCol.sp {
    display: block;
  }
  .serviceCol.pc {
    display: none;
  }
  .servicesWrapper .serviceCol:nth-child(2n) {
    margin-right: 0;
  }
  .serviceCol h3 {
    padding: 5px 0;
    font-size: 92.85714%;
  }
  .serviceCol a {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 10px auto 0 auto;
  }
  .serviceCol a img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 320px) {
  .serviceCol h3 {
    padding: 5px 0;
    font-size: 80%;
  }
}

.news {
  display: block;
  width: 970px;
  margin: 0 auto;
}
.news h2 {
  display: none;
}
.newsContentWrapper {
  /* border-top: 1px solid #000; */
}
.newsContentInner {
  display: block;
  height: 300px;
  margin-top: 20px;
  overflow-y: scroll;
}
@media (970px <= width) {
  .newsContentInner {
    border: solid 1px #eee;
    padding: 15px;
  }
}
.news dl {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dotted #ccc;
}
.news dl dt {
  color: #aaa;
}
.news dl dd {
}
.news dl dd span {
}
.news dl dd span:before {
  content: "【";
}
.news dl dd span:after {
  content: "】";
}
.news dl dd a {
  color: #0099ff;
}
@media screen and (max-width: 970px) {
  .news {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto;
  }
  .newsContentInner {
    height: 150px;
  }
}

.topInq {
}
.side_sticky {
  display: block;
  width: 50px;
  height: 412px;
  background: #fff;
  position: fixed;
  right: 0;
  /* bottom: 400px; */
  top: 50px;
}
.side_sticky a,
.side_sticky a img {
  display: block;
  width: 50px;
  height: 412px;
}
.topInq .disp_sp {
  margin-top: 20px;
  padding-top: 20px;
  background: #f2ecd8;
}
.topInq .disp_sp p {
  font-size: 114.28571%;
  line-height: 1.3em;
  text-align: center;
}
.topInq .disp_sp .header_sp_closing {
  padding: 20px 0 10px 0;
}

/*!! 20200309 */
.campaignBanner {
  display: block;
  width: 970px;
  margin: 40px auto 0 auto;
}
.campaignBanner a {
  display: block;
  width: 970px;
}
.campaignBanner span.sp {
  display: none;
}
.campaignBanner a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
@media screen and (max-width: 969px) {
  .campaignBanner {
    display: block;
    width: calc(100% - 20px);
    margin: 20px auto 40px auto;
  }
  .houjinbanner a,
  .houjinbanner a img,
  .campaignBanner a {
    width: 100%;
    height: auto;
  }
  .campaignBanner span.pc {
    display: none;
  }
  .campaignBanner span.sp {
    display: block;
    width: 100%;
    height: auto;
  }
  .campaignBanner span.sp img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.top_bnr {
  width: min(calc(100% - 20px), 1260px);
  margin: 20px auto;
}

.headBanner202012sp {
}
@media screen and (max-width: 969px) {
  .headBanner202012sp {
    display: block;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
}
.headBanner202012 img,
.headBanner202012sp img {
  display: block;
  width: 100%;
}

/*!! 20210331 head banner */
.headBanner202103 {
  width: 1260px;
  margin: 20px auto;
}
.headBanner202103sp {
}
@media screen and (max-width: 969px) {
  .headBanner202103sp {
    display: block;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
}
.headBanner202103 img,
.headBanner202103sp img {
  display: block;
  width: 100%;
}

/* 20220712 head banner */
.headBanner202207 {
  width: 970px;
  margin: 20px auto;
}
.headBanner202207sp {
}
@media screen and (max-width: 969px) {
  .headBanner202207sp {
    display: block;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
}
.headBanner202207 img,
.headBanner202103sp img {
  display: block;
  width: 100%;
}

.flex_vertical-order {
  display: flex;
  flex-direction: column-reverse;
}

/*!! 2024.04.30 新規追加 タイマー*/

.viewTimer {
  display: none !important;
}
.viewTimerVisible {
  display: block !important;
}

.timer_inline .viewTimer {
  display: none !important;
}
.timer_inline .viewTimerVisible {
  display: inline-block !important;
}

/*!! 10周年記念キャンペーン !!*/
.pickup-service__figure.pickup-service__figure--10th {
  /* background: #f5fff4; */

  .pickup-service__figcaption {
    background: #fff;
  }

  img {
    object-fit: contain;
    aspect-ratio: 640 / 340;
    margin: auto;
    padding-block: 10px;
    box-sizing: border-box;
    display: block;
  }

  .marker {
    background: linear-gradient(180deg, rgba(109, 177, 49, 0) 75%, rgb(116 193 107) 35%);
  }
}
/*!! .pickup-service__figure--10th 閉じタグ !!*/

/*!! キャンペーンスライダー*/

/* lightslider */
.campaign {
  margin-block: 80px 40px;
}
@media screen and (max-width: 969px) {
  .campaign {
    margin-block: 60px 20px;
  }
}
:is(.campaign, .new-open) .campaign__title {
  display: block;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  border-top: 1px solid #000;
}
:is(.campaign, .new-open) .campaign__title h2 {
  text-align: center;
  font-size: 185.71428%;
  font-weight: 500;
  line-height: 1em;
}
@media screen and (max-width: 969px) {
  :is(.campaign, .new-open) .campaign__title h2 {
    font-size: 142.85714%;
  }
}
:is(.campaign, .new-open) .campaign__title h2 span {
  padding: 0 1rem;
  background: #fff;
  line-height: 1em;
  position: relative;
  top: -0.8em;
}
:is(.campaign, .new-open) .campaign__title h2 b {
  position: relative;
  bottom: 15px;
  font-weight: normal;
  font-size: 95%;
  display: block;
  color: var(--color-main);
}

.top_choki_frame {
  .campaign {
    margin-block: 40px;
  }
  @media screen and (max-width: 969px) {
    .campaign {
      margin-block: 20px;
    }
  }

  :is(.campaign, .new-open) .campaign__title {
    border-top: none;
  }
  :is(.campaign, .new-open) .campaign__title h2 span {
    background: transparent;
    font-weight: bold;
  }
  @media screen and (max-width: 969px) {
    :is(.campaign, .new-open) .campaign__title h2 span {
      line-height: 1.3em;
    }
  }

  :is(.campaign, .new-open) .campaign__title h2 b {
    font-size: 67%;
    bottom: 0;
    font-weight: bold;
  }
}

/*!! top_choki_fram */

/*!!!!!!!!!!!!!! 貸し会議室ビジョンセンターの特徴 /*!!!!!!!!!!!!!!*/

.features {
  background: url(../images/top/bg_features.jpg) no-repeat 50% 100%;
  background-size: cover;
  position: relative;
  padding: 60px 10px 0;
  width: min(100%, 1530px);
  /* margin: 60px auto auto; */
  margin: 80px auto auto;
  box-sizing: border-box;
  line-height: 166%;

  h2 {
    display: block;
    text-align: center;
    font-size: 171.42857%;
    line-height: 1em;
    position: relative;
    z-index: 2;
    color: #fff;
    margin-bottom: 100px;

    span {
      display: block;
      color: var(--color-main);
      text-transform: uppercase;
    }
  }
  @media (width < 640px) {
    h2 {
      margin-bottom: 80px;
    }
  }
}
@media (width < 640px) {
  .features {
    background: url(../images/top/bg_features.jpg) no-repeat 69% 100%;
    background-size: cover;
    margin: 60px auto auto;
    padding: 60px 10px 60px;
  }
}
/** features */

.features__inner {
  width: min(100%, 1260px);
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* gap: 0 60px; */
  gap: 0 150px;
  color: #fff;
  position: relative;
  z-index: 2;
  font-size: 0.9em;
}
@media (width < 640px) {
  .features__inner {
    gap: 0 20px;
  }
}

.features-box {
  width: 205px;
  margin-bottom: 120px;

  .f-icon01,
  .f-icon02,
  .f-icon03,
  .f-icon04,
  .f-icon05,
  f-icon04_sub {
    position: relative;
    color: #fff;
  }

  .f-icon01::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\e533";
    font-size: 50px;
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -50px;
  }

  .f-icon02::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f4ce";
    font-size: 50px;
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -50px;
  }

  .f-icon03::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1eb";
    font-size: 50px;
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -50px;
  }

  .f-icon04::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f4ff";
    font-size: 35px;
    position: absolute;
    transform: translate(-50%);
    left: 38%;
    top: -50px;
  }
  @media (width < 640px) {
    .f-icon04::before {
      left: 31%;
    }
  }

  .f-icon04_sub::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\e594";
    font-size: 35px;
    position: absolute;
    transform: translate(-50%);
    left: 63%;
    top: -50px;
  }
  /* 	@media (width < 640px)  {
		.f-icon04_sub::before {
			left: 75%;
			top: -50px;
		}
	} */

  .f-icon05::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f56d";
    font-size: 50px;
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    top: -55px;
  }

  dt {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  @media (width < 640px) {
    dt {
      font-size: 14px;
    }
  }
  dd {
    /* letter-spacing: 1px; */
    line-height: 1.7;
  }
}
@media (width < 640px) {
  .features-box {
    margin-bottom: 100px;
  }
}
/*** features-box */

.features-box:nth-last-of-type(2) {
  margin-bottom: 80px;
}

.features-box:last-of-type {
  margin-bottom: 80px;
}
@media (width < 640px) {
  .features-box {
    width: calc(50% - 20px);
  }

  .features-box:nth-last-of-type(2) {
    margin-bottom: 100px;
  }

  .features-box:last-of-type {
    margin-bottom: 0;
  }
}

.features::after {
  background: rgb(0, 0, 0, 0.4) url(../images/top/dot.png) repeat 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
  z-index: 1;
}

/*!!!!!!!!!! トップバナー !!!!!!!!!!1*/

.bnner_top {
  width: min(calc(100% - 20px), 1260px);
  margin: 20px auto auto;
  transition: all 0.3s;

  img {
    display: block;
  }
}

.bnner_top:hover {
  transition: all 0.3s;
  opacity: 0.8;
}

/* ?????? リニューアル後 確実に残すCSS ???????*/

/*!!!!!!! swiper オープン情報 !!!!!!!*/

.open-swiper,
.cp-swiper {
  --swiper-navigation-size: 28px;
  --swiper-theme-color: #0066b4;
  --swiper-sub-theme-color: #f0a200;

  .swiper-button-prev,
  .swiper-button-next {
    background: rgb(255, 255, 255, 0.8);
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    top: 50%;
    border-radius: 50%;
  }
  @media (width < 969px) {
    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;
      top: 57%;
    }
  }
  .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto;
    left: 0;
  }

  .swiper-button-next {
    right: 0;
    left: auto;
  }

  .swiper-button-prev:after {
    margin-left: -3px;
  }

  .swiper-button-next:after {
    margin-right: -3px;
  }

  .swiper-pagination {
    bottom: 0;
  }

  .swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, var(--swiper-sub-theme-color));
  }
}
@media (width < 969px) {
  .open-swiper,
  .cp-swiper {
    --swiper-navigation-size: 20px;
  }
}

/*オープン情報が3個以下なら復活 */
/* @media (970px <= width) {
		.open-swiper .swiper-button-prev,.open-swiper .swiper-button-next{
				display: none;
		}
	} */

/**　↑ open-swiper,cp-swiper共通 **/

.open-swiper {
  margin: 20px auto auto;
  overflow: hidden;
  width: min(100%, 1260px);
  position: relative;
  padding-bottom: 30px;
}
@media (width < 969px) {
  .open-swiper {
    margin-top: 0;
  }
}

@media (970px <= width) {
  .open-swiper .swiper-wrapper {
    /* justify-content: center; */
  }
}

.open-swiper a {
  transition: all 0.3s;
}

.open-swiper a:hover {
  opacity: 0.8;
  transition: all 0.3s;
}

/*!! open-swiper info-card */
.info-card {
  display: flex;
  flex-direction: column;
  background: #fdfdfd;
  border: 1px solid #eee;
  height: 100%;
  box-sizing: border-box;
  color: #333;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;

  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
}
.info-card:hover {
  background: #fff;
  text-decoration: none;
  /* box-shadow: 0 0 10px rgba(0,0,0,.05); */
  transition: all 0.3s;
}

/* .info-card::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	background: rgba(255, 255, 255, 0.8);
} */

.info-card__caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

.info-card__title {
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
  line-height: 1.4;
  color: #fff;
  background: rgba(233, 13, 65, 0.8);
  text-align: center;
  span {
    margin-left: 1em;
  }
}
@media (width < 640px) {
  .info-card__title {
    font-size: 14px;
  }
}

.info-card__desc {
  font-family: "Noto Serif JP", serif;
  /* font-size: clamp(2rem, 1.37rem + 1.31vw, 2.625rem); */
  font-size: clamp(1.125rem, 1.003rem + 0.52vw, 1.5rem);
  /* font-size: 24px; */
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-red);
  text-align: center;
  position: absolute;
  top: 35%;
  left: 53%;
  transform: translate(-50%);
  z-index: 2;
  width: fit-content;
  /* 2カラム時 */
  /* padding: 0 34px 0 10px; */
  /* 3カラム時 */
  padding: 0 14px 0 10px;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 17%, rgba(255, 255, 255, 0.7) 76%, rgba(255, 255, 255, 0.3) 91%, rgba(255, 255, 255, 0.01) 98%);

  span {
    font-size: 1.5em;
    line-height: 0;
  }
}
@media (width < 640px) {
  .info-card__desc {
    font-size: 20px;
    padding: 0 20px 0 5px;
  }

  .info-card__desc.one_column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.info-card__arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.info-card__arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--color-red);
  border-right: 0;
  transform: translateX(1px);
}

/*!!!!!!! swiper オープン情報 !!!!!!!*/

/*!!!!!!! swiper キャンペーン !!!!!!!*/

/* Swiper初期表示のチラつき防止（FOUC対策） */
.cp-swiper .swiper-slide {
  width: calc((100% - 10px) / 1.5);
  /* slidesPerView: 1.5, spaceBetween: 20 */
  margin-right: 20px;
}

@media (min-width: 767px) {
  .cp-swiper .swiper-slide {
    width: calc((100% - 40px) / 3);
    /* slidesPerView: 3, spaceBetween: 20 */
  }
}

@media (min-width: 969px) {
  .cp-swiper .swiper-slide {
    width: calc((100% - 40px) / 4);
    /* slidesPerView: 5, spaceBetween: 10 */
    margin-right: 10px;
  }
}

.cp-swiper {
  position: relative;
  width: min(100%, 1260px);
  margin: 15px auto auto;
  overflow-x: hidden;
}
@media screen and (max-width: 969px) {
  .cp-swiper {
    width: 100%;
    margin: 10px auto auto;
  }
}
.cp-swiper {
  .pickup-service__figure {
    border: solid 1px #eee;
    transition: all 0.3s;
  }

  .pickup-service__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    /* color: rgba(109, 177, 49, .9); */
  }

  .pickup-service__figcaption {
    padding: 5px 10px 20px;
    color: #3d3d3d;
    font-weight: 500;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
    position: relative;
  }

  .pickup-service__figcaption p {
    min-height: 3em;
    line-height: 1.5;
  }

  /** 三角の矢印 */
  .pickup-service__arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* background: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
  .pickup-service__arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
  }

  .pickup-service__arrow--right-green::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid rgba(109, 177, 49, 0.9);
    /* border-left: 9px solid #fff; */
    border-right: 0;
    transform: translateX(1px);
  }

  .pickup-service__arrow--right-green-em::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid rgb(51 115 53);
    /* border-left: 9px solid #fff; */
    border-right: 0;
    transform: translateX(1px);
  }

  .pickup-service__arrow--right::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid var(--color-main);
    /* border-left: 9px solid #fff; */
    border-right: 0;
    transform: translateX(1px);
  }

  .pickup-service__arrow--right-em::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid var(--color-em);
    /* border-left: 9px solid #fff; */
    border-right: 0;
    transform: translateX(1px);
  }

  .pickup-service__item {
    transition: all 0.3s;
  }

  .pickup-service__item:hover {
    opacity: 0.7;
    transition: all 0.3s;
  }

  .pickup-service__item[data-campaign="time-limited"] {
    .pickup-service__arrow--right::before {
      border-left-color: #d40303;
    }
  }

  /*!!!!!! 夏割 2026 終了 !!!!!!!*/
  .pickup-service__item[data-campaign="summer"] {
    display: none;

    .pickup-service__arrow--right::before {
      border-left-color: #2e3192;
    }
  }
  /*!!!!!! 夏割 2026 終了 !!!!!!!*/

  .pickup-service__item[data-campaign="gorgeous"] {
    .pickup-service__arrow--right::before {
      border-left-color: rgb(200 182 97);
    }
  }

  /** キャンペーンが2つの時のスマホの調整 **/
  @media (width < 640px) {
    .pickup-service--two-items {
      max-width: 308px;
      margin: auto;
    }
  }

  .campaign {
    .swiper-wrapper {
      height: auto !important;
    }

    .swiper-wrapper .swiper-slide {
      height: 100%;
    }
  }
  .short-img img {
    height: 220px;
    object-fit: cover;
  }
  @media screen and (min-width: 970px) {
    .short-img img {
      height: 200px;
      object-fit: cover;
    }
  }

  .swiper-slide {
    min-height: 300px;
    height: auto;
  }
  @media screen and (max-width: 391px) {
    .swiper-slide {
      min-height: 290px;
    }
  }

  .swiper-slide a,
  .swiper-slide article {
    height: 100%;
    display: block;
  }
  .swiper-slide a:hover {
    text-decoration: none;
  }
  .swiper-slide a img {
    transition: all 0.2s;
  }
  .swiper-slide a:hover img {
    /* transform: scale(1.11); */
    transition: all 0.2s;
  }
  .ov_h {
    overflow: hidden;
    line-height: 0;
  }
  .cp-lead {
    font-size: 18px;
    line-height: 1.5;
    margin-block: 10px 5px;
    color: #9e9e9e;
    text-align: center;
    color: #f01;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .cp-lead.thanks {
    color: #69a833;
  }

  .cp-lead {
    .fs_big {
      font-size: 1.3em;
    }
    .add_txt {
      font-size: 11px;
      color: #333;
      position: relative;
      bottom: 0.8em;
    }
  }

  .cp-title {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    position: relative;
    /* color: #9e9e9e; */
    color: #333;
    line-height: 1.3;

    li:empty {
      display: block;
      height: 19px;
    }
  }

  .cp-title {
    .add_txt {
      font-size: 11px;
      color: #f01;
      display: block;
    }
  }

  .cp-title::after {
    position: absolute;
    content: "";
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #69a833;
  }
}
/*!! cp-swiper */

/*!!!!!!! swiper キャンペーン情報 !!!!!!!*/

/* ?????? リニューアル後 確実に残すCSS ???????*/

/* ?????? リニューアル用 追加 CSS ???????*/

.txt-red {
  color: var(--color-red) !important;
  font-weight: 500;
}

:where(strong) {
  font-weight: 500;
}

.marker {
  background: linear-gradient(180deg, rgba(109, 177, 49, 0) 75%, rgb(171 230 97) 35%);
}

.marker-em {
  background: linear-gradient(0deg, rgb(255 21 77 / 50%) 27%, rgba(234, 13, 66, 0) 27%);
}

.marker_blue {
  background: linear-gradient(180deg, rgba(109, 177, 49, 0) 75%, rgba(46, 49, 146, 0.5) 35%);
}

.marker_main-blue {
  background: linear-gradient(180deg, rgba(109, 177, 49, 0) 75%, rgba(0, 153, 255, 0.8) 35%);
}

.marker-gold {
  background: linear-gradient(0deg, rgba(203, 185, 100, 0.7) 27%, rgba(234, 13, 66, 0) 27%);
}

/*!!!!! コンテンツ !!!!!!*/

.mv + .contents {
  margin: 30px auto auto;
}

@media (970px <= width) {
  .contents[data-category="campaign"] {
    margin: 60px auto auto;
  }
}

.contents {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  width: var(--basic-range);
  margin: 80px auto auto;
}
@media (width < 969px) {
  .contents {
    margin: 60px auto auto;
  }
}

@media (width < 969px) {
  .contents__inner {
    padding-inline: 10px;
    box-sizing: border-box;
  }
}

/*!!!!! タイトル !!!!!!*/

.section-title {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: clamp(1.375rem, 1.334rem + 0.17vw, 1.5rem);
  font-weight: 600;
  width: 100%;
  margin-bottom: 30px;
  line-height: 1.66;
  box-sizing: border-box;
  padding-bottom: 6px;
  background: #6db132;
  background: var(--color-gradation);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left bottom;
  em {
    font-weight: 600;
  }
}
@media (width < 969px) {
  .section-title {
    padding-inline: 10px;
  }
}
@media (width < 640px) {
  .section-title {
    padding-bottom: 10px;
    background-size: 100% 8px;
  }
}
.section-title i {
  color: #6eb42f;
  font-style: normal;
  font-size: 130%;
  line-height: 1em;
}

.section-title-detail {
  /* font-size: clamp(1rem, 0.568rem + 0.71vw, 1.25rem); */
  font-size: 16px;
  font-weight: 600;
}

.section-title-detail::before {
  content: "■";
  color: #ccc;
  margin-right: 0.2em;
}

.stripe-block {
  position: relative;
  padding-left: 20px;
}
.stripe-block::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  display: block;
  width: 0.5em;
  height: 1.25em;
  background-image: repeating-linear-gradient(45deg, var(--color-em), var(--color-em) 3px, transparent 3px, transparent 6px);
}
/* @media (width < 769px) {
  .stripe-block::before{
    top: .1em;
  }
} */

/*!!!!! タイトル !!!!!!*/

/*!!!!!!!!!!!!!! contact section !!!!!!!!!!!!*/

.black-button__box {
  display: flex;
  justify-content: center;

  .contact-cta__button--form {
    background-image: linear-gradient(90deg, rgba(163, 125, 172, 1) 0%, rgba(176, 141, 176, 1) 50%, rgba(51, 51, 51, 1) 50%, rgba(56, 56, 56, 1) 75%, rgba(74, 74, 74, 1) 100%);
    /* width: 380px; */
  }

  .contact-cta__button--form::after {
    bottom: auto;
    width: 0.9em;
    height: 0.9em;
    top: 1.55em;
  }
}

.contact-cta * {
  line-height: 1.2;
}

.contact-cta {
  position: relative;
}

.contact-cta {
  width: min(100%, var(--basic-range));
  margin: 60px auto 60px;
  padding: 40px 30px;
  background-color: var(--bg-dark);
  box-sizing: border-box;
}

.contact-cta__title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 30px;
  color: #fff;
  border-bottom: solid 1px var(--color-main);
}

@media (width < 969px) {
  .contact-cta__title {
    font-size: 22px;
    text-align: left;
  }
}
@media (width < 640px) {
  .contact-cta__title {
    margin-bottom: 20px;
  }
}

.contact-cta__text {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

@media (width < 640px) {
  .contact-cta__text {
    text-align: left;
  }
}

.contact-cta__links {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 20px;
}

.contact-cta__link-item {
  width: auto;
}
@media (width < 969px) {
  .contact-cta__link-item {
    width: 100%;
  }
}

.contact-cta__link-item a {
  color: #fff;
}

.contact-cta__button {
  display: flex;
  align-items: center;
  padding: 20px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
  width: 370px;
  box-sizing: border-box;
  position: relative;
}

@media (width < 820px) {
  .contact-cta__button {
    width: min(100%, 350px);
    margin: auto;
  }
}

.contact-cta__button--phone {
  color: #fff;
  padding: 0;
}

.contact-cta__button--form {
  padding: 15px 10px;
  background-image: linear-gradient(90deg, rgba(163, 125, 172, 1) 0%, rgba(176, 141, 176, 1) 50%, var(--color-main) 50%, var(--color-main) 100%);
  background-size: 200% auto;
  background-position: right center;
  color: #fff;
  justify-content: center;
  transition: background-position 0.4s ease-in-out;
}

@media (970px <= width) {
  .contact-cta__button--form:hover {
    background-position: left center;
  }
}

.contact-cta__button--form::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 3px solid #fff;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
  position: absolute;
  right: 15px;
  bottom: 1.75em;
}

.contact-cta__button:hover,
.contact-cta__button:visited {
  text-decoration: none;
}

.contact-cta__icon {
  font-size: 30px;
  margin-right: 10px;
}

.contact-cta__button--form .contact-cta__icon {
  color: #fff;
  margin-left: -20px;
}

.contact-cta__text-wrapper {
  display: flex;
  flex-direction: column;
}

.contact-cta__label {
  font-size: 14px;
  font-weight: 500;
}

.contact-cta__main-text {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.contact-cta__main-text_tel {
  font-size: 34px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .contact-cta__main-text_tel {
    font-size: 30px;
  }
  .contact-cta__main-text {
    font-size: 22px;
  }
}

.contact-cta__main-text_tel span {
  color: var(--color-blue);
  font-weight: 700;
}

.contact-cta__sub-text {
  font-size: 14px;
  margin-left: 5.5em;
}

@media (max-width: 640px) {
  .contact-cta__sub-text {
    margin-left: 0;
    margin-top: 5px;
  }
}

.contact-cta__arrow {
  font-size: 24px;
  margin-left: auto;
  color: #fff;
}

@media (max-width: 640px) {
  .contact-cta {
    margin: 40px auto;
    padding: 30px 20px;
  }

  .contact-cta__link-item:last-of-type {
    margin-top: 20px;
  }

  .contact-cta__links {
    flex-direction: column;
    gap: 0;
  }
}

/** よくあるご質問・資料ダウンロードリンク **/

.contact-cta__support-links {
  width: 100%;
  margin: 30px auto 10px;
}

@media (820px <= width) {
  .contact-cta__support-title,
  .contact-cta__support-list {
    width: 370px;
  }
}

.contact-cta__support-title {
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.contact-cta__support-list {
  display: flex;
  gap: 20px;
}

.contact-cta__support-link {
  color: #fff;
  font-weight: 400;
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-block;
}

.contact-cta__support-link::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054";
  text-align: center;
  font-size: 9px;
  background: #7cc53c;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 57%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.3s;
  line-height: 1.6;
}

.contact-cta__support-link:hover {
  text-decoration: none;
}

.contact-cta__support-link:hover::before {
  background: var(--area-color);
}

.contact-cta__support-list {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 80px;
}
@media (width < 640px) {
  .contact-cta__support-list {
    width: 350px;
    margin: auto;
  }
}

.contact-cta__support-item {
  display: none;
}

/* .contact-cta__support-item:first-of-type{
    margin-left: -3em;
  }

  @media (width < 640px) {
  .contact-cta__support-item:first-of-type{
        margin-left: 0;
    }
  } */

.c-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*!!!!!!!!!!!!!! contact section !!!!!!!!!!!!*/

/*!!!!!!! 関連サービス !!!!!!!!*/

.tone-shifter {
  filter: brightness(110%);
}

.tone-shifter[data-tone="115"] {
  filter: brightness(115%);
}

.img-pos[data-pos="upper70"] {
  object-position: 0 -70px;
}

.rel-services::-webkit-scrollbar {
  height: 8px;
}

.rel-services::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.rel-services::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.rel-services {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
@media (width < 821px) {
  .rel-services {
    width: calc(100% - 10px);
    margin: auto;
  }
}

a.rel-services__link {
  width: 100%;
  display: block;
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

a.rel-services__link:hover .rel-services__figure img {
  /* opacity: .6; */
  transition: all 0.3s;
}

.rel-services__item {
  width: calc(50% - 15px);
  color: #333;
  border: solid 1px #eee;
  transition: all 0.3s;
}
@media (width < 821px) {
  .rel-services__item {
    width: 100%;
  }
}

.rel-services__item :is(article, div[data-campaign="rel-service"], .rel-services__figure) {
  height: 100%;
}

.rel-services__item :where(.f-big) {
  font-size: 1.25em;
  font-weight: 600;
  margin-bottom: 5px;
  display: inline-block;
}

.rel-services__item:hover {
  text-decoration: none;
  /* border: solid 1px #a37dac; */
}

.rel-services__item:hover img {
  /* opacity: .7; */
  transition: all 0.3s;
  filter: brightness(100%);
}

.rel-services__figure {
  display: flex;
  flex-direction: row-reverse;
  /* overflow: hidden; */
  width: 100%;
}
@media (width < 768px) {
  .rel-services__figure {
    display: block;
    position: relative;
  }
}

.rel-services__figure img {
  object-fit: cover;
  /* aspect-ratio: 640 / 340; */
  width: 40%;
  filter: brightness(80%);
}
@media (width < 768px) {
  .rel-services__figure img {
    width: auto;
    aspect-ratio: 640 / 300;
    filter: brightness(100%);
  }
}

.rel-services__figcaption {
  padding: 10px;
  color: #3d3d3d;
  font-weight: 500;
  width: 70%;
  position: relative;
}
@media (width < 768px) {
  .rel-services__figcaption {
    width: auto;
    padding: 0;
    position: static;
  }
}

.rel-services__title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  padding: 4px 10px 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 67%, rgba(0, 0, 0, 0.6) 100%);
  width: min(100%, 350px);
  margin-bottom: 10px;
  box-sizing: border-box;
}
@media (width < 768px) {
  .rel-services__title {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
    width: 100%;
  }
  .rel-services__title:last-of-type {
    font-size: 15px;
  }
}

.rel-services__title[data-title="choki"] {
  background: linear-gradient(90deg, rgba(0, 153, 0, 1) 28%, rgba(0, 153, 0, 0.8) 82%, rgba(0, 153, 0, 0.6) 100%);
}

.rel-services__title[data-title="kikan"] {
  background: linear-gradient(90deg, rgba(32, 180, 175, 1) 82%, rgba(32, 180, 175, 0.6) 100%);
}

.rel-services__title[data-title="owner"] {
  background: linear-gradient(90deg, rgba(225, 64, 118, 1) 67%, rgba(225, 64, 118, 0.6) 100%);
}

.rel-services__figcaption-inner {
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
}
@media (width < 768px) {
  .rel-services__figcaption-inner {
    padding: 0 5px 10px;
  }
}

.rel-service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.rel-service-features li {
  border: solid 1px #333;
  padding-inline: 7px;
  width: 130px;
  font-size: 12px;
  text-align: center;
}
@media (width < 768px) {
  .rel-service-features li {
    width: auto;
    min-width: 95px;
    padding-inline: 3px;
  }
}

.pickup-service__area,
.rel-services__area {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
}

.rel-services__center-name {
  font-size: 16px;
  font-weight: 600;
  margin-top: 3px;
}

.rel-services__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 7px;
}

.rel-services__note {
  margin-top: 7px;
}

/** 三角の矢印 */
.rel-services__arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* background: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.rel-services__arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

.rel-services__arrow--right::before {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid #6eb42f;
  /* border-left: 9px solid #fff; */
  border-right: 0;
  transform: translateX(1px);
}

[data-arrow="choki-color"].rel-services__arrow--right::before {
  border-left-color: #009900;
}

[data-arrow="kikan-color"].rel-services__arrow--right::before {
  border-left-color: #20b4af;
}

[data-arrow="shukuhaku-color"].rel-services__arrow--right::before {
  border-left-color: #000;
}

[data-arrow="owner-color"].rel-services__arrow--right::before {
  border-left-color: #e14076;
}

/*!!!!!!! 料金改定のお知らせ !!!!!!!!*/
.pricing-update-notice-container {
  width: min(1260px, 98%);
  max-width: 100%;
  margin: 40px auto;
}

.pricing-update-notice {
  border: 2px solid #e90d43;
  font-size: clamp(1rem, 0.801rem + 0.74vw, 1.25rem);
}

.pricing-update-notice a {
  text-decoration: none;
  display: block;
  position: relative;
  transition: opacity 0.5s;
}

.pricing-update-notice a:hover {
  opacity: 0.8;
}

.pricing-update-notice__header {
  background-color: #e90d43;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #fff;
  padding: 6px 10px 10px;
  font-weight: bold;
}

.pricing-update-notice__icon {
  justify-self: start;
  position: relative;
  text-align: center;
}

.pricing-update-notice__icon p {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background-color: #e90d43;
  width: clamp(3.75rem, 2.154rem + 5.94vw, 5.75rem);
  height: clamp(3.75rem, 2.154rem + 5.94vw, 5.75rem);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 0.601rem + 1.48vw, 1.5rem);
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 0 rgba(192, 10, 55, 0.75),
    0 6px 10px rgba(122, 8, 35, 0.1);
}

.pricing-update-notice__icon img {
  max-width: 80px;
}

.pricing-update-notice__title {
  font-size: clamp(1.125rem, 0.676rem + 1.67vw, 1.688rem);
  justify-self: center;
  text-align: center;
  position: relative;
}

.price-update-notice__body {
  padding: 10px clamp(0.75rem, 0.351rem + 1.48vw, 1.25rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #000;
  font-weight: 500;
  column-gap: 20px;
}

.price-update-notice__body-text {
  justify-self: center;
  color: #b39f38;
}

.price-update-notice__body-more {
  justify-self: end;
  padding: 3px 20px 5px;
  background-color: #e90d43;
  border-radius: 100vmax;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(0.875rem, 0.775rem + 0.37vw, 1rem);
}

.price-update-notice__body-more span {
  font-size: 85%;
}

.price-update-notice__body-more span:nth-child(n + 2) {
  margin-left: -6px;
}

.pricing-update-notice__title p span:nth-of-type(4) {
  margin-left: -10px;
}

.pricing-update-notice__title p span:nth-of-type(1) {
  margin-right: -10px;
}

@media (max-width: 969.9px) {
  .pricing-update-notice__header {
    grid-template-columns: 1fr;
  }

  .pricing-update-notice__title {
    margin-top: -24px;
  }

  .pricing-update-notice__icon {
    justify-self: start;
    left: 50%;
    transform: translateX(-50%);
    top: -24px;
  }

  .pricing-update-notice__icon p {
    position: relative;
    transform: none;
    top: 0;
  }

  .price-update-notice__body {
    grid-template-columns: 1fr;
  }

  .price-update-notice__body-text {
    margin-bottom: 10px;
  }

  .pricing-update-notice__icon img {
    max-width: 55px;
  }
}

/*!!!!!!! 関連サービス !!!!!!!!*/

/*!!!!!!! 簡単検索 アコーディオン !!!!!!*/

@media (width < 969px) {
  .search-box {
    margin: 20px auto auto !important;
  }
}

.four-column {
  width: calc(100% / 4 - 50px);
}

@media (769px <=width < 970px) {
  .four-column {
    width: calc(100% / 4 - 30px);
  }
}

.search-box {
  width: min(calc(100% - 20px), 1260px);
  margin: 20px auto 10px;
}

@media (width < 969px) {
  .search-box {
    margin: -20px auto auto;
  }
}

.top_search-bg {
  background-color: #f2f2f2;
  /* border-radius: 10px; */
  box-sizing: border-box;
}

.site_message {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 900;
  display: inline-block;
  color: #0066b4;
  line-height: 1.3;
  letter-spacing: 2px;
  /* background: linear-gradient(90deg, #5cc400 18%, #35be96 40%, #8d85e0 100%); */
  background: linear-gradient(90deg, #0066b4 18%, #317bc0 40%, #6aaee0 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  position: relative;
  top: 17px;
  left: 22px;
  z-index: 2;
  /* opacity: 0; */
  /* animation: fadevertical .6s forwards;
      animation-delay: .6s; */

  em {
    font-size: 1.3em;
    letter-spacing: 0;
    padding-inline: 6px;
    line-height: 1;
    display: inline-block;
    font-weight: 800;

    .f-meirio {
      font-family: meirio;
      line-height: 0;
    }
  }
}

@media (width < 969px) {
  .site_message {
    width: 16em;
    font-size: 28px;
    background: linear-gradient(90deg, #0066b4 18%, #317bc0 40%, #6aaee0 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    top: 11px;
    left: 7px;
  }
}

@keyframes fadeside {
  0% {
    left: -10px;
    /* top: 27px; */
    opacity: 0;
  }

  100% {
    margin-left: 0;
    /* top: 17px; */
    opacity: 1;
  }
}

.search-box__column {
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  background: #f2f2f2;
  padding-block: 32px 30px;
  padding-inline: 10px;
  /* border-radius: 10px; */
  /* z-index: 0; */

  .four-column:nth-of-type(1) {
    /* margin-left: 20px; */
    margin-left: 10px;
  }
}

@media (821px <=width < 969px) {
  .search-box__column {
    padding-block: 24px;
  }
}

@media (width < 820px) {
  .search-box__column {
    padding-inline: 0;
    justify-content: center;
    gap: 10px;

    .four-column:nth-of-type(1) {
      margin-left: 0;
    }
  }
}

.top-search-title {
  width: 100%;
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

@media (width < 969px) {
  .top-search-title {
    margin-left: 10px;
    font-size: 18px;
  }
}

.top-search-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f002";
  font-size: 24px;
  padding-right: 10px;
  color: #4ab0a8;
}

@media (width < 969px) {
  .top-search-title::before {
    font-size: 20px;
  }
}

.four-column[data-category="top_search"] {
  .sort_select-box summary span {
    line-height: 1.66;
  }
}

@media (width < 640px) {
  .four-column[data-category="top_search"] {
    .sort_select-box select,
    .sort_select-box summary span {
      padding-left: 3.25em;
    }
  }
}

.accordion-item {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border: none;
  /* border-radius: 7px; */
  position: relative;
  background-color: #fff;
  z-index: 10;
}

/* タイトルの背景色 */
.accordion-item {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border: none;
  /* border-radius: 7px; */
  position: relative;
  background-color: #fff;
  z-index: 10;
}

/* 矢印 */
.accordion-title {
  color: #333;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 20px 10px 40px;
  position: relative;
}

.accordion-title::after {
  border-right: solid 3px #333;
  border-top: solid 3px #333;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 15px;
  top: 15px;
  transform: rotate(135deg);
  transition:
    transform 0.3s ease-in-out,
    top 0.3s ease-in-out;
  width: 8px;
}

.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

.accordion-content {
  display: none;
  padding: 0 20px 10px 40px;
}

.icon-area::before,
.icon-layout::before,
.icon-seat::before {
  left: 24px;
  top: 10px;
  z-index: 0;
}

@media (width < 640px) {
  .icon-area::before,
  .icon-layout::before,
  .icon-seat::before {
    left: 16px;
  }
}

.four-column[data-category="top_search"] {
  position: relative;
  height: 43px;
}

.accordion-link li a {
  color: #333;
  text-decoration: none;
  padding-block: 5px;
  display: block;
}

.accordion-link li:first-of-type a {
  padding-top: 0;
}

.accordion-link li a:hover {
  color: #0c59b8;
  text-decoration: underline;
}

.icon-address,
.icon-area,
.icon-seat,
.icon-layout,
.icon-time_start,
.icon-time_end,
.icon-search {
  position: relative;
}

.icon-address::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 10px;
  transform: translate(-50%);
  color: var(--color-main);
  font-size: 1.5em;
}

.icon-layout::before {
  content: "\f4ce";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: var(--color-main);
  font-size: 1.5em;
  z-index: 2;
}

.icon-area::before {
  content: "\f5fd";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: var(--color-main);
  font-size: 1.5em;
  z-index: 2;
}

.icon-seat::before {
  content: "\f6c0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.25em;
  top: 20%;
  transform: translate(-50%);
  color: var(--color-main);
  font-size: 1.5em;
  z-index: 2;
}

.icon-area::before,
.icon-layout::before,
.icon-seat::before {
  left: 24px;
  top: 10px;
  z-index: 0;
}

/*!!!!!!! 簡単検索 アコーディオン !!!!!!*/

/*!!!!!!! スマホ MV !!!!!!*/
.mv-sp {
  position: relative;
}

.sf-txt--sp {
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  position: absolute;
  right: 5px;
  top: 7px;
  /* bottom: 5px; */
  z-index: 1;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
}

/*!!!!!!! スマホ MV !!!!!!*/