@media screen and (max-width:767px){
.is-style-bg_grid {
	font-size:11px;
	text-align:left !important;
	
	}
	.is-style-bg_grid div p{
	text-align:left !important;
	}
}
.sbi_feedtheme_header_text h3::before {
display:none;
	
}
#sb_instagram #sbi_load .sbi_load_btn {
	    margin: 5px auto 0 !important;
}
/* ===========================
   写真エリア 全体
=========================== */
.js-photo-area {
  position: relative;
}

/* ===========================
   画像アイテム
=========================== */
.js-photo-item {
  width: 100%;
  height: 89vh;
  overflow: hidden;
  margin: 0;
}

/* スマホ */
@media (max-width: 768px) {
  .js-photo-item {
    height: 50vh;
  }
}

/* ===========================
   画像本体
=========================== */
.js-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面いっぱい */
  display: block;
}

/* ===========================
   画像エリア（重ねる土台）
=========================== */
.js-photo-area .swell-block-fullWide__inner{
  position: relative;
}

/* ===========================
   画像アイテム（重ねる）
=========================== */
.js-photo-item{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 89vh;
  overflow: hidden;
  margin: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity 1500ms ease; /* フェード速度 1500 */
}

@media (max-width: 768px){
  .js-photo-item{
    height: 50vh;
  }
}

/* 表示中のスライド */
.js-photo-item.is-active{
  opacity: 1;
  pointer-events: auto; /* luminousクリックも有効に */
  z-index: 2;
}

/* ===========================
   画像本体
=========================== */
.js-photo-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
}

/* 表示中だけズームイン（3秒） */
.js-photo-item.is-active img{
  animation: jsPhotoZoom 3000ms ease-in-out forwards;
}

@keyframes jsPhotoZoom{
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

/* ===========================
   画像エリア（高さを持たせて下と被らない）
=========================== */
.js-photo-area .swell-block-fullWide__inner{
  position: relative;
  height: 89vh;          /* ★これが重要 */
  overflow: hidden;
}

@media (max-width: 768px){
  .js-photo-area .swell-block-fullWide__inner{
    height: 50vh;        /* ★スマホ */
  }
}

/* ===========================
   画像アイテム（重ねる）
=========================== */
.js-photo-item{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;          /* ★親のheightに追従 */
  overflow: hidden;
  margin: 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity 1000ms ease;
}

.js-photo-item.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* 画像*

/* ===========================
  画像エリア：テキストを上に重ねる前提
=========================== */
.js-photo-area .swell-block-fullWide__inner{
  position: relative;
}

/* テキストブロックを前面に重ねて中央固定 */
.js-photo-area .wp-block-group{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;     /* 縦中央 */
  justify-content: center; /* 基準は中央 */
  margin: 0 !important;
  pointer-events: none;
}

/* ===========================
   テキスト本体（左寄せ＆少し右へ）
=========================== */
.js-photo-area .wp-block-group__inner-container{
  pointer-events: auto;
  text-align: left;
  max-width: 1000px;
  width: calc(100% - 40px);
  padding: 0;

  /* ★ 左から少しだけ右へ寄せる */
  transform: translateX(-8%);
}

/* ===========================
   テキスト色・可読性
=========================== */
.js-photo-area .wp-block-group,
.js-photo-area .wp-block-group p,
.js-photo-area .wp-block-group a{
  color: #fff;
}

/* 行間と余白の微調整 */
.js-photo-area .wp-block-group p{
  margin: 0.7em 0;
}

/* リンクだけ少し強調 */
.js-photo-area .wp-block-group a{
  display: inline-block;
  margin-top: 0.6em;
  text-decoration: underline;
}

/* スマホは中央寄せに戻す（可読性優先） */
@media (max-width: 768px){
  .js-photo-area .wp-block-group__inner-container{
    transform: translateX(0);
    text-align: center;
  }
}

/* スライド基本 */
.js-photo-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms ease; /* ←フェード速度 */
}

/* 表示中 */
.js-photo-item.is-active{
  opacity: 1;
  z-index: 2;
}

/* 消え中（is-activeは維持したまま、opacityだけ落とす） */
.js-photo-item.is-leaving{
  opacity: 0;
  z-index: 1;
}

/* ズームは「表示中」だけでOK（消え中も is-active が残るのでズーム維持される） */
.js-photo-item.is-active img{
  animation: jsPhotoZoom 3500ms ease-in-out forwards; /* ←ズーム速度 */
}

.c-filterLayer.-texture-brushed:after {
    background-image: url(https://tomphotoofficial.com/wp-content/themes/swell/assets/img/texture/white-brushed.png);
	height:100%;
    visibility: visible;
}

.c-filterLayer::before {
    background-color: #333;
    opacity: 0.2;
    content: "";
	height:100%;
}

.page-id-8.top #content {
    padding-top: 0em !important;
}

/* RESERVEリンクにアイコンを付ける */
.header-reserve a{
  display: inline-flex;
  align-items: center;
  gap: 10px;           /* アイコンと文字の間隔 */
  text-decoration: none;
}

/* カレンダーアイコン */
.header-reserve a::before{
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;

  /* SVGをマスクにして、色は currentColor で付ける */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm0 6H4v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8H7Zm9-2H8v1a1 1 0 1 1-2 0V6H5a1 1 0 0 0-1 1v1h16V7a1 1 0 0 0-1-1h-1v1a1 1 0 1 1-2 0V6Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm0 6H4v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8H7Zm9-2H8v1a1 1 0 1 1-2 0V6H5a1 1 0 0 0-1 1v1h16V7a1 1 0 0 0-1-1h-1v1a1 1 0 1 1-2 0V6Z'/%3E%3C/svg%3E") no-repeat center / contain;
}