@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background-color: #fff;
    color: #000;
    height: 100%;
    font-size: 10px;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.6;
    font-family: 'Noto Sans Japanese' , sans-serif;
    text-align: center;
    word-break : break-all;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: subpixel-antialiased;
}
a {
  text-decoration: none;
}
#contents-wrap {
    display: flex;
    flex-wrap: nowrap;
}
#pc-bg {
    text-align: left;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -1;
    left: 0;
    overflow: hidden;

}
#pc-bg video {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0 auto 0 0;
}

#body-wrap {
    margin: 70px auto 0 ;
    padding: 0;
    max-width: 480px;
    background: #fff;
    min-height: 100%;
    height: 100%;
}

/* -- ヘッダー -- */
header {
  background: url(../img/main-bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: fit-content;
}

header #main-copy {
  margin: auto;
  padding: 180px 0 0;
  width: 80%;
}

header #main-copy img {
  width: 100%;
}

header #main-sub {
  background-color: #000;
  width: 40%;
  margin: 20px 0 0 auto;
  padding: 15px 30px;
  line-height: 0;
}
header #main-sub img {
  width: 100%;
}

header #main-text {
  margin: 90px auto 0;
  width: 80%;
  font-size: 12px;
  font-size: 1.2rem;
  text-shadow: 2px 2px 2px #fff;
}

header #main-text span {
  display: block;
}

header #main-instagram {
 margin: 60px auto;
}

header #main-instagram img {
  width: 100%;
}


/* -- main -- */
main h1 {
  margin: 0 auto 60px;
}

/* -- ニュース -- */

#news-wrap {
  margin: 0 auto 120px;
}

#news-wrap h1 {
  margin: 0 auto;
}

#news-wrap h1 img {
  width: 100%;
}

#news-wrap dl {
  display: flex;
  width: 90%;
  margin: 30px auto;
}

#news-wrap dt {
  width: 120px;  
}

#news-wrap dt img {
  width: 100%;
}

#news-wrap dd {
  margin: 0 0 0 4%;
}


#news-banner {
  width: 90%;
  margin: 60px auto 5px;
}

#news-banner img {
  width: 100%;
}

#news-banner p {
  font-size: 8px;
  font-size: 0.8rem;
}

.button {
  background: #000;
  color: #fff;
  text-decoration: none;
  width: 60%;
  margin: 30px auto;
  padding: 4%;
  box-sizing: border-box;
  border-radius:4px;
}

/* ---- 外部ニュースリスト ---- */
.ext-news-list {
  list-style: none;
  width: 90%;
  margin: 20px auto 0;
  padding: 0;
  text-align: left;
}
.ext-news-item + .ext-news-item {
  margin-top: 30px;
}
.ext-news-item a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  color: #000;
}
.ext-news-date {
  font-size: .9rem;
  opacity: .7;
  min-width: 110px;
}
.ext-news-title {
  font-size: 1.1rem;
  line-height: 1.4;
}

/* -- ギャラリー -- */

#gallery-wrap {
  margin: 0 auto 120px;
}

#gallery-wrap h1 {
  margin: 0 auto;
}

#gallery-wrap h1 img {
  width: 100%;
}

/*ビフォーアフター*/
/* サムネ一覧 */
.thumb-list{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
}
.ba-thumb{border:0;background:transparent;padding:0;cursor:pointer}
.ba-thumb img{display:block;width:100%;height:auto;}

/* ライトボックス */
.ba-lightbox[hidden]{display:none}
.ba-lightbox{position:fixed;inset:0;z-index:9999}
.ba-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.ba-modal{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:24px;
}
.ba-stage{
  position:relative; width:min(100%,1200px); height:min(100%,calc(96vw*0.66));
  background:#111; border-radius:12px; overflow:hidden;
}

/* 画像はボックスに収めて表示（比率バラバラでもOK） */
.ba-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#111;
}
.ba-after{ z-index:1; }
.ba-before{ z-index:2; clip-path: inset(0 50% 0 0); }

/* スライダーUI */
.ba-range{
  position:absolute; inset:0; opacity:0; cursor:ew-resize; z-index:4;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35);
  z-index:3;
}

/* ナビ＆クローズ */
.ba-close, .ba-nav{
  position:absolute; top:16px;
  background:rgba(0,0,0,.5); color:#fff; border:0; cursor:pointer;
  width:40px; height:40px; border-radius:50%; font-size:22px; line-height:40px;
}
.ba-close{ right:16px; }
.ba-prev{ 
    left: 16px;
    top: 25%;
    transform: translateY(-25%);
    z-index: 90;
 }
.ba-next{ 
    right: 16px;
    top: 25%;
    transform: translateY(-25%);
    z-index: 90;
}

.ba-caption{ color:#eee; margin-top:10px; text-align:center; font-size:14px; }

/* GALLERY: サムネを常に2列固定に */
.ba-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;              /* 余白は好みで */
  width: 94%;
  margin: 0 auto;
}

.ba-thumb{
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 1 / 1;    /* 正方形で統一 */
}

.ba-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 縦横混在でもトリミングで揃う */
  display: block;
}

/* aspect-ratio未対応ブラウザの軽いフォールバック（任意） */
@supports not (aspect-ratio: 1 / 1) {
  .ba-thumb{ position: relative; }
  .ba-thumb::before{
    content:""; display:block; padding-top:100%;
  }
  .ba-thumb img{
    position:absolute; inset:0;
  }
}

/* ---- Lightbox: スマホでも常に中央に配置 ---- */
.ba-modal{
  display: flex;                 /* Grid→Flexへ */
  align-items: center;           /* 垂直センター */
  justify-content: center;       /* 水平センター */
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));      /* iOSノッチ対策 */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* ステージは画面に収まる最大サイズに。画像は object-fit:contain なので比率は画像任せでOK */
.ba-stage{
  width: min(96vw, 1200px);
  height: min(80svh, calc(96vw * 0.75));  /* どちらか小さい方に合わせる */
}

/* svh未対応ブラウザ用フォールバック */
@supports not (height: 100svh) {
  .ba-stage{ height: min(80vh, calc(96vw * 0.75)); }
}

/* 前後ナビは中央に（上寄りが気になる場合） */
.ba-prev,
.ba-next{
  top: 50%;
  transform: translateY(-50%);
}
/* ---- Lightbox キャプションを画像の下に配置 ---- */
.ba-modal {
  flex-direction: column;        /* 中身を縦並びに */
  align-items: center;
  justify-content: center;
}

.ba-stage {
  margin-bottom: 12px;           /* 画像と文字の間に少し余白 */
}

.ba-caption {
  display: block;
  text-align: center;
  color: #eee;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
  max-width: min(96vw, 1200px);  /* 画像幅と揃える */
}

/* -- アーティスト -- */

#artist-wrap {
  margin: 0 auto 120px;
}

#gartist-wrap h1 {
  margin: 0 auto;
}

#artist-wrap h1 img {
  width: 100%;
}

/* 2カラム固定（端末問わず） */
.artist-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;              /* 余白はお好みで */
  width: 94%;
  margin: 0 auto;
}

/* カード */
.artist-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  /* box-shadow関連・transformは削除 */
}

.artist-card:hover{
  transform:none;
  box-shadow:none;
}

/* 画像は正方形でトリミング */
.artist-card img{
  width:100%; height:auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
}

.artist-card-photo {

}
.artist-card-photo img {

}

.artist-info{ padding:10px 8px 14px; }
.artist-info h3{
  font-size: 1rem; margin: 6px 0 10px; font-weight:600;
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* SNSアイコン */
.artist-links{ display:flex; justify-content:center; gap:12px; }
.artist-links a img{ width:22px; height:22px; opacity:.85; transition:opacity .2s; }
.artist-links a:hover img{ opacity:1; }

/* -- HotoWroks -- */

#howto-wrap {
  margin: 0 auto 120px;
}

#horto-wrap h1 {
  margin: 0 auto;
}

#howto-wrap h1 img {
  width: 100%;
}

#howto-wrap dl {
  width: 90%;
  margin: 30px auto;
}

#howto-wrap dt {
  width: 90%;
  margin: auto;
}

#howto-wrap dt img {
  width: 100%;
}

#howto-wrap dd {

}

#howto-wrap dd span {
  font-size: 80%;
  margin: 0 0 0 1em;
}

#howto-wrap p {
  width: 50%;
  margin: 30px auto;
}
#howto-wrap p img {
  width: 100%;
}

/* -- Past -- */

#past-wrap {
  margin: 0 auto 120px;
}

#past-wrap h1 {
  margin: 0 auto;
}

#past-wrap h1 img {
  width: 100%;
}

#past-wrap dl {
  margin: 30px auto 0;
  display: flex;
  width: 90%;
}

#past-wrap dt {
  width: 30%;
}

#past-wrap dd {
  width: 70%;
  margin: 0 auto 0 4%;
  text-align: left;
}


/* -- Founder -- */

#founder-wrap {
  margin: 0 auto 120px;
}

#founder-wrap h1 {
  margin: 0 auto;
}

#founder-wrap h1 img {
  width: 100%;
}

#founder-wrap dl {
  display: flex;
  width: 90%;
  margin: 30px auto;
}

#founder-wrap dt {
  width: 220px;  
}

#founder-wrap dt img {
  width: 100%;
}

#founder-wrap dd {
  width: 70%;
  margin: 0 auto 0 4%;
  text-align: left;
}

/* -- Sponsor -- */

#sponsor-wrap {
  margin: 0 auto 120px;
}

#sponsor-wrap h1 {
  margin: 0 auto;
}

#sponsor-wrap h1 img {
  width: 100%;
}

#sponsor-wrap ul {
  list-style: none;
  width: 90%;
  margin: 30px auto;
  display: flex;
  flex-wrap:wrap;

}

#sponsor-wrap li {
  width: 48%;
  margin: 30px auto;
  box-sizing: border-box;
}

#sponsor-wrap li img {
  width: 100%;
}


/* -- Contact -- */

#contact-wrap {
  margin: 0 auto 120px;
}

#contact-wrap h1 {
  margin: 0 auto;
}

#contact-wrap h1 img {
  width: 100%;
}

#contact-wrap p {
  width: 90%;
  margin: auto;
}

/* -- 固定ナビ -- */
#fixed-navi {
  background: #000;
  height: 60px;
  padding: 20px 4%;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
	z-index: 90;
}

#fixed-navi #logo {
  display: block;
  height: 100%;
  margin: 0 auto 0;
}

#fixed-navi #logo img {
  height: 100%;
}


.menu-wrapper {
  position: relative;
}

.menu-icon {
  width: 40px;
  height: 30px;
  position: fixed; /* ← fixedにして常に左上固定 */
  top: 13px;
  right: 20px;
  cursor: pointer;
  z-index: 102;
  display: inline-block;
}

.menu-icon span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #fff;
  border-radius: 2px;
  transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background: #fff;
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background: #fff;
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 10;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

#trigger ~ #navigation { display: none; }
#trigger:checked ~ #navigation { display: block; }

/* メニュー本体（左から出す） */
.menu {
  position: fixed;
  top: 0;
  right: -250px; /* ← 初期位置を左へ */
  width: 250px;
  height: 100%;
  background: #000;
  transition: right 0.4s ease;
  z-index: 12;
}

#menu-toggle:checked ~ .menu {
  right: 0; /* ← 開いたときは左0へ */
}

.menu ul {
  list-style: none;
  padding: 60px 20px;
}

.menu li {
  margin: 20px 0;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.menu a:hover {
  color: #fff;
}

html { scroll-behavior: smooth;}


/* ---- Contact Form 7 (共通リセット) ---- */
.wpcf7 form {
  width: 90%;
  max-width: 420px;
  margin: 40px auto 0;
  font-size: 1rem;
  text-align: left;
  color: #000;
}

.wpcf7 form p {
  margin-bottom: 18px;
}

.wpcf7 label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #000;
}

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  border: 1px solid #000;
  background: #fff;
  padding: 10px;
  font-size: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  color: #000;
}

.wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  border: none;
  background: #000;
  color: #fff;
  font-weight: bold;
  padding: 12px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .2s;
}

.wpcf7 input[type="submit"]:hover {
  opacity: 0.8;
}

/* 成功・エラーのメッセージ */
.wpcf7-response-output {
  border: none !important;
  margin-top: 20px !important;
  padding: 10px !important;
  font-size: 0.9rem;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: #0c0;
}

.wpcf7 form.invalid .wpcf7-response-output {
  color: #c00;
}

/* スマホ調整 */
@media (max-width: 480px) {
  .wpcf7 form {
    width: 94%;
  }
}