/* ===slider=== */
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.slider li{
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:85vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
/*　背景画像設定　*/
/* mainutero */
.slider-item01 {
    background:url(../img/main/main1.jpg);
}

.slider-item02 {
    background:url(../img/main/main2.jpg);
}

.slider-item03 {
    background:url(../img/main/main3.jpg);
}

.slider-item04 {
    background:url(../img/main/main4.jpg);
}

.slider-item05 {
    background:url(../img/main/main5.jpg);
}

.slider-item06 {
    background:url(../img/main/main9.jpg);
}

.slider-item07 {
    background:url(../img/main/main8.jpg);
}
/* irumare */
.slider-item08 {
    background:url(../img/iruma/irumare1.jpg);
}
.slider-item09 {
    background:url(../img/iruma/irumare2.jpg);
}
.slider-item24 {
    background:url(../img/iruma/irumare3.jpg);
}
.slider-item25 {
    background:url(../img/iruma/irumare4.jpg);
}
.slider-item26 {
    background:url(../img/iruma/irumare5.jpg);
}
.slider-item27 {
    background:url(../img/iruma/irumare6.jpg);
}
.slider-item28 {
    background:url(../img/iruma/irumare7.jpg);
}

/* saron */
.slider-item10 {
    background:url(../img/saron/saron1.jpg);
}
.slider-item11 {
    background:url(../img/saron/saron2.jpg);
}
.slider-item12 {
    background:url(../img/saron/saron3.jpg);
}
.slider-item13 {
    background:url(../img/saron/saron4.jpg);
}
.slider-item14{
    background:url(../img/saron/saron5.jpg);
}
.slider-item15 {
    background:url(../img/saron/saron6.jpg);
}
.slider-item16 {
    background:url(../img/saron/saron7.jpg);
}
/* flower days */
.slider-item17 {
    background:url(../img/flower/f1.jpg);
}
.slider-item18 {
    background:url(../img/flower/f2.jpg);
}
.slider-item19 {
    background:url(../img/flower/f3.jpg);
}
.slider-item20 {
    background:url(../img/flower/f4.jpg);
}
.slider-item21 {
    background:url(../img/flower/f5.jpg);
}
.slider-item22 {
    background:url(../img/flower/f6jpg);
}
.slider-item23 {
    background:url(../img/flower/f7.jpg);
}
/* ===space=== */
#page-link{
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
}

#page-link li{
    list-style: none;
    display: inline-block;
    position:relative;
}

#page-link li a{
    color: #333;
    padding:0 3rem;
    text-decoration: none;
    font-size: 1.5rem;
}

#page-link li a::before{
    content:'';
    display:inline-block;
    position:absolute;
    top: 50%;
    left:0;
    transform: translateY(-50%);
    width:3px;
    height: 100%;
    background-color:lightcoral;
}

#page-link li:last-child::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    background-color: lightcoral; /* 線の色を指定 */
}

#page-link li a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px; /* テキストと矢印の間隔を調整 */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid lightcoral; /* 矢印の色を指定 */
}

/* ===space=== */
.split-container {
    /* 左右のセクション */
    display: grid;
    grid-template-columns: 1fr 1fr;
    width:100%; 
    height: 100%;
    margin-top: 100px;
}
.items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: 100%;
    gap: 10px;
    margin-right: 4rem;
}

.item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* アイテムが足りない列を補完する */
.items::after {
    content: "";
    grid-column: span 2;
}

.irumare-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    height: 100%;
    gap: 10px;
    margin-right: 4rem;
}

.block-container {
    /* 左右のセクション */
    display: grid;
    grid-template-columns: 1fr 1fr;
    width:100%; 
    height: 100%;
    margin-top: 100px;
}

.twoblock-container {
    /* 左右のセクション */
    display: grid;
    grid-template-columns: 1fr 1fr;
    width:100%; 
    height: 100%;
}


.right-block {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.right-block .title {
    margin-top: 1rem;
}
.right-block h4 {
    color: lightcoral;
}

.right-block h3{
    border-bottom: 1px solid lightcoral;
    margin-right: 4rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right-block p {
    margin: 0;
}

.right-block .equip-ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style-type: none;
}

/* detail */
.left-block h3{
    border-bottom: 1px solid lightcoral;
    margin-right: 4rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-block i{
    padding-right: 4rem;
}

.hidden-view{
    display: none;
}
.hidden-view.open{
    display: block;
}

.second-block{
    margin-top: 2rem;
}
.second-block ul li{
    margin: 0 4rem 5px 1rem;
    font-size: 14px;
    list-style: disc;
}

.space-button{
    position: relative;
	border: none;
	border-bottom: 1px solid lightcoral;
    width: 100%;
    text-align: right;
    background-color: transparent;
    margin-top: 2rem;
}
.space-button::before{
    content: "view more";
}
.hidden-view.open + .space-button::before{
    content: "close";
}
.space-button:hover{
    opacity: 0.5;
}

/* タイトル日本語 */
h3 span{
    font-size: 14px;
    top: 15px;
    right: 0;
    letter-spacing: .5px;
    margin-left: auto;
}

.space-section{
    margin-bottom: 7rem;
}

/* --- スペース紹介カード --- */
#selectmenu {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: flex-start;
  margin: 1.5em 0 1em 0;
  padding: 0;
  list-style: none;
}

#selectmenu > li {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 16px #f7b6b633, 0 1.5px 0 var(--main-color) inset;
  overflow: hidden;
  width: 340px;
  min-width: 260px;
  max-width: 100%;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 1;
  animation: fadeInCard 0.7s;
}
@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(30px);}
  to   { opacity: 1; transform: none;}
}
#selectmenu > li.hidden {
  display: none !important;
}

#selectmenu .flex-container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  margin: 0;
}

#selectmenu img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 2px 8px #f7b6b644;
  margin-bottom: 0;
  transition: filter 0.2s;
}
#selectmenu > li:hover img {
  filter: brightness(0.93) saturate(1.1);
}

#selectmenu .text {
  padding: 1.1em 1.2em 1.2em 1.2em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#selectmenu .font {
  font-size: 1.08em;
  color: var(--text-color);
  margin: 0.2em 0;
}
#selectmenu .bold {
  color: var(--main-color);
  font-weight: bold;
}
#selectmenu .indented {
  margin-left: 1.2em;
  color: #b85c5c;
  font-size: 0.98em;
}
#selectmenu ul.font {
  margin: 0.5em 0 0 0;
  padding: 0 0 0 1.2em;
}
#selectmenu .fa-user,
#selectmenu .fa-coins {
  color: var(--main-color);
  margin-right: 0.3em;
}

/* --- カードの遊び心のある装飾 --- */
#selectmenu > li::after {
  content: "☁";
  position: absolute;
  right: 1em;
  top: 1em;
  font-size: 2em;
  color: #fff0f0;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}
#selectmenu > li:hover {
  transform: translateY(-6px) scale(1.025) rotate(-1deg);
  box-shadow: 0 8px 24px #f7b6b666, 0 1.5px 0 var(--main-color) inset;
}

/* スペース紹介 新デザイン */
#spaces-showcase {
  margin: 2em 0 2em 0;
  padding: 0 0.5em;
}
.spaces-title {
  font-size: 1.5em;
  color: var(--main-color);
  margin-bottom: 1.2em;
  text-align: center;
  letter-spacing: 0.05em;
}
.spaces-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
}
.space-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px #f7b6b633, 0 1.5px 0 var(--main-color) inset;
  overflow: hidden;
  width: 320px;
  min-width: 220px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  position: relative;
  opacity: 1;
  animation: fadeInCard 0.7s;
}
.space-card.faded {
  opacity: 0.5;
  filter: grayscale(0.2) blur(0.5px);
}
@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(30px);}
  to   { opacity: 1; transform: none;}
}
.space-img-wrap {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}
.space-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 8px #f7b6b644;
  transition: filter 0.2s;
}
.space-card:hover img {
  filter: brightness(0.93) saturate(1.1);
}
.space-label {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--main-color);
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.4em 1.2em 0.4em 0.9em;
  border-radius: 0 12px 0 0;
  box-shadow: 0 2px 8px #f7b6b644;
  letter-spacing: 0.04em;
}
.space-info {
  padding: 1.1em 1.2em 1.2em 1.2em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.space-meta {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
  display: flex;
  gap: 1.2em;
  font-size: 1.05em;
  color: var(--main-color);
}
.space-meta li {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.space-price {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.5em;
  font-size: 0.98em;
}
.space-price li {
  margin-bottom: 0.2em;
  color: #b85c5c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.space-price span {
  color: var(--main-color);
  font-weight: bold;
  margin-left: 0.5em;
}
.space-card::after {
  content: "☁";
  position: absolute;
  right: 1em;
  top: 1em;
  font-size: 2em;
  color: #fff0f0;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}
.space-card:hover {
  transform: translateY(-6px) scale(1.025) rotate(-1deg);
  box-shadow: 0 8px 24px #f7b6b666, 0 1.5px 0 var(--main-color) inset;
  z-index: 2;
}

/* レスポンシブ */
@media (max-width: 900px) {
  #selectmenu {
    gap: 1em;
    justify-content: center;
  }
  #selectmenu > li {
    width: 90vw;
    min-width: 0;
    margin: 0 auto;
  }
  #selectmenu img {
    height: 140px;
  }
  .spaces-grid {
    gap: 1em;
  }
  .space-card {
    width: 90vw;
    min-width: 0;
    margin: 0 auto;
  }
  .space-img-wrap {
    height: 120px;
  }
}
@media (max-width: 600px) {
  #selectmenu {
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }
  #selectmenu > li {
    width: 98vw;
    min-width: 0;
    margin: 0 auto;
  }
  #selectmenu img {
    height: 110px;
  }
  #selectmenu .text {
    padding: 0.7em 0.7em 1em 0.7em;
  }
  .spaces-title {
    font-size: 1.1em;
  }
  .spaces-grid {
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }
  .space-card {
    width: 98vw;
    min-width: 0;
    margin: 0 auto;
  }
  .space-img-wrap {
    height: 90px;
  }
  .space-info {
    padding: 0.7em 0.7em 1em 0.7em;
  }
}

/* --- スペース紹介カードの画像ギャラリー対応CSS --- */

/* メイン画像（上部3枚など）を横並びで統一サイズに */
.space-img-wrap.multi-img {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  align-items: flex-start;
  background: #fff0f0;
  padding: 0.7em 0.7em 0.3em 0.7em;
  border-radius: 18px 18px 0 0;
  min-height: 110px;
}
.space-img-wrap.multi-img img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 1px 4px #f7b6b622;
  background: #fff;
  flex-shrink: 0;
  transition: filter 0.2s;
}
.space-img-wrap.multi-img img:first-child {
  margin-left: 0;
}
.space-img-wrap.multi-img img:last-child {
  margin-right: 0;
}

/* サブギャラリー（下部）も横並びで統一サイズに */
.space-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.7em;
  justify-content: flex-start;
}
.space-gallery img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 4px #f7b6b622;
  background: #fff;
  transition: filter 0.2s;
}
.space-gallery img:hover,
.space-img-wrap.multi-img img:hover {
  filter: brightness(0.92) saturate(1.1);
}

/* カード全体の調整 */
.space-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px #f7b6b633, 0 1.5px 0 var(--main-color) inset;
  overflow: hidden;
  width: 340px;
  min-width: 220px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  position: relative;
  opacity: 1;
  animation: fadeInCard 0.7s;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .space-card {
    width: 95vw;
    min-width: 0;
  }
  .space-img-wrap.multi-img img {
    width: 80px;
    height: 60px;
  }
  .space-gallery img {
    width: 60px;
    height: 45px;
  }
}
@media (max-width: 600px) {
  .space-card {
    width: 99vw;
    min-width: 0;
  }
  .space-img-wrap.multi-img {
    padding: 0.4em 0.2em 0.2em 0.2em;
    gap: 0.3em;
  }
  .space-img-wrap.multi-img img {
    width: 60px;
    height: 45px;
  }
  .space-gallery img {
    width: 40px;
    height: 30px;
  }
}

/* --- スペース紹介カードの画像・説明エリアを大きく＆おしゃれに --- */

/* 上部メイン画像を大きく1枚表示、サブ画像は下部ギャラリーに */
.space-img-wrap.multi-img {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff0f0;
  padding: 0;
  border-radius: 18px 18px 0 0;
  min-height: 200px;
  height: 240px;
  position: relative;
  overflow: hidden;
}
.space-img-wrap.multi-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 2px 8px #f7b6b644;
  background: #fff;
  transition: filter 0.2s;
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  z-index: 1;
}
.space-img-wrap.multi-img img:first-child {
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* サブギャラリー（下部）を大きめに横並び */
.space-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  margin-top: 1em;
  justify-content: flex-start;
}
.space-gallery img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 1px 6px #f7b6b622;
  background: #fff;
  transition: filter 0.2s;
}
.space-gallery img:hover,
.space-img-wrap.multi-img img:hover {
  filter: brightness(0.92) saturate(1.1);
}

/* カード全体の調整 */
.space-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 16px #f7b6b633, 0 1.5px 0 var(--main-color) inset;
  overflow: hidden;
  width: 480px;
  min-width: 260px;
  max-width: 98vw;
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  position: relative;
  opacity: 1;
  animation: fadeInCard 0.7s;
}

/* 説明部分をおしゃれに・読みやすく */
.space-info {
  padding: 1.5em 1.5em 1.2em 1.5em;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(120deg, #fff0f0 0%, #fff 100%);
  border-radius: 0 0 22px 22px;
}
.space-desc h3 {
  font-size: 1.3em;
  color: var(--main-color);
  margin-bottom: 0.3em;
  letter-spacing: 0.04em;
  font-weight: bold;
}
.space-desc p {
  font-size: 1.08em;
  color: #b85c5c;
  margin: 0.5em 0 1em 0;
  line-height: 1.7;
  background: #fff7f7;
  border-left: 5px solid var(--main-color);
  padding: 0.7em 1em 0.7em 1.2em;
  border-radius: 10px;
  box-shadow: 0 1px 4px #f7b6b122;
}
.space-detail-list {
  margin: 0.5em 0 1em 0.5em;
  padding: 0 0 0 1.2em;
  color: #6d3c3c;
  font-size: 0.98em;
  list-style: disc;
}
.space-detail-list li {
  margin-bottom: 0.2em;
  line-height: 1.5;
}
.space-meta {
  list-style: none;
  margin: 0.5em 0 0.5em 0;
  padding: 0;
  display: flex;
  gap: 1.2em;
  font-size: 1.05em;
  color: var(--main-color);
}
.space-meta li {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.space-section {
  margin: 1.2em 0 0.7em 0;
  background: #fff7f7;
  border-radius: 10px;
  padding: 0.8em 1em 0.8em 1.2em;
  box-shadow: 0 1px 4px #f7b6b122;
}

/* カードタイトルの装飾 */
.spaces-title {
  font-size: 1.7em;
  color: var(--main-color);
  margin-bottom: 1.5em;
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 1100px) {
  .space-card {
    width: 95vw;
    min-width: 0;
  }
  .space-img-wrap.multi-img {
    min-height: 160px;
    height: 180px;
  }
  .space-gallery img {
    width: 80px;
    height: 60px;
  }
}
@media (max-width: 700px) {
  .space-card {
    width: 99vw;
    min-width: 0;
  }
  .space-img-wrap.multi-img {
    min-height: 110px;
    height: 120px;
  }
  .space-gallery img {
    width: 60px;
    height: 45px;
  }
  .space-info {
    padding: 1em 0.5em 1em 0.5em;
  }
}

/* スペースナビゲーションボタン */
.spaces-nav-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin: 2em 0 1em 0;
}
.space-nav-btn {
  background: var(--main-color);
  color: #fff;
  font-weight: bold;
  border-radius: 18px;
  padding: 0.7em 2em;
  text-decoration: none;
  font-size: 1.08em;
  box-shadow: 0 2px 8px #f7b6b644;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  border: none;
  outline: none;
  cursor: pointer;
}
.space-nav-btn:hover,
.space-nav-btn.active {
  background: #fff0f0;
  color: var(--main-color);
  transform: scale(1.07);
  border: 2px solid var(--main-color);
}
@media (max-width: 700px) {
  .spaces-nav-btns {
    gap: 0.5em;
  }
  .space-nav-btn {
    padding: 0.5em 1em;
    font-size: 0.98em;
  }
}

/* space-galleryを画面いっぱいに表示（モーダル風ギャラリー） */
.space-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  margin-top: 1em;
  justify-content: flex-start;
}

/* サムネイル画像 */
.space-gallery img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 1px 6px #f7b6b622;
  background: #fff;
  transition: filter 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

/* モーダルのスタイル */
.space-gallery-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.space-gallery-modal.active {
  display: flex;
}
.space-gallery-modal img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 18px;
  box-shadow: 0 4px 24px #0008;
  background: #fff;
}
.space-gallery-modal .close-btn {
  position: absolute;
  top: 2vw;
  right: 3vw;
  font-size: 2.5em;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001;
  text-shadow: 0 2px 8px #000a;
  transition: color 0.2s;
}
.space-gallery-modal .close-btn:hover {
  color: var(--main-color, lightcoral);
}

/* スライダー用のスタイル */
.space-gallery-slider {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 1.5em auto 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #fff0f0;
  box-shadow: 0 2px 12px #f7b6b644;
}
.space-gallery-slider-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}
.space-gallery-slider img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 18px;
  flex-shrink: 0;
  background: #fff;
  user-select: none;
  pointer-events: none;
}
.space-gallery-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--main-color, lightcoral);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 2em;
  cursor: pointer;
  z-index: 2;
  opacity: 0.85;
  transition: background 0.2s, opacity 0.2s;
}
.space-gallery-slider-btn:hover {
  background: #fff;
  color: var(--main-color, lightcoral);
  opacity: 1;
  border: 2px solid var(--main-color, lightcoral);
}
.space-gallery-slider-btn.prev { left: 10px; }
.space-gallery-slider-btn.next { right: 10px; }
.space-gallery-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin: 0.7em 0 0.2em 0;
}
.space-gallery-slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f7b6b6;
  border: none;
  margin: 0 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.space-gallery-slider-dot.active {
  background: var(--main-color, lightcoral);
}

/* レスポンシブ */
@media (max-width: 900px) {
  .space-gallery-slider img { height: 260px; }
}
@media (max-width: 600px) {
  .space-gallery-slider img { height: 160px; }
}