@charset "UTF-8";

/* ========================================
   全体設定
   ======================================== */
body {
  margin: 0;
  padding: 0;
  background-color: #fae6ed; /* 画面全体の非常に薄いピンク色 */
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: #333;
  opacity: 0; 
  animation: fadeIn 1.2s ease-out forwards; 
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.lp-container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* ========================================
   左右のカラム（装飾エリア）
   ======================================== */
.column {
  flex: 1;
  box-sizing: border-box;
}

.col-left, .col-right {
  min-width: 150px; 
  max-width: 300px; 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 150px; 
}

.sticky-deco {
  position: sticky;
  top: 150px; 
  display: flex;
  justify-content: center;
  width: 100%;
}

.deco-img {
  width: 75%; 
  max-width: 150px; 
  height: auto;
  display: block;
  animation: sway 4s ease-in-out infinite; 
}

/* ========================================
   ゆらゆらアニメーション（ふわふわ浮遊）
   ======================================== */
@keyframes sway {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(4deg); } 
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes sway-reverse {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-4deg); } 
  100% { transform: translateY(0px) rotate(0deg); }
}

.deco-fairy {
  width: 25%;
  max-width: 120px;
  bottom: -35px;
  left: -20px;
  animation: sway 5s ease-in-out infinite; 
}

.deco-butterfly {
  width: 22%;
  max-width: 100px;
  top: -20px;
  right: -15px;
  animation: sway-reverse 4.5s ease-in-out infinite; 
}

/* ========================================
   中央カラム（メインコンテンツ）
   ======================================== */
.col-center {
  width: 100%;       
  max-width: 500px;  
  background-color: #f6d2df; 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.main-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.full-width-img {
  width: 100%;       
  height: auto;      
  display: block;    
}

/* ========================================
   アーティスト紹介
   ======================================== */
.artist-intro {
  padding: 40px 30px;
  text-align: center;
  box-sizing: border-box;
}

.artist-profile-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.artist-photo {
  width: 100%;
  max-width: 400px; 
  height: auto;
  border-radius: 4px;
  display: block;
  position: relative;
  z-index: 2; 
}

.sub-deco {
  position: absolute;
  height: auto;
  z-index: 3; 
}

.artist-name {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 15px;
  letter-spacing: 0.05em;
}

.artist-desc {
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  padding: 0 15px;
}

/* ========================================
   アートギャラリー（トップページ）
   ======================================== */
.art-gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; 
  padding-bottom: 60px;
}

.art-item {
  width: 100%;
  max-width: 450px;
  padding: 0 30px;
  box-sizing: border-box;
}

.art-img-wrapper {
  width: 100%;
}

.art-img {
  width: 100%;
  height: auto;
  display: block;
}

.art-info {
  display: flex;
  justify-content: flex-start; 
  align-items: baseline;       
  gap: 20px;                   
  padding-top: 15px;           
  color: #584a68;              
}

.art-title {
  font-size: 16px;             
  font-weight: bold;
  letter-spacing: 0.05em;
}

.art-price {
  font-size: 13px;             
  font-weight: normal;
  letter-spacing: 0.05em;
}

/* ========================================
   下層ページ（カテゴリー詳細：fantasy.html等）
   ======================================== */
.page-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 15px;
  padding: 40px 0 20px;
  color: #584a68;
}

.page-subtitle {
  font-size: 11px;
  letter-spacing: 0.05em;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0;
}

.sub-gallery {
  width: 100%;
  padding: 0 40px; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

.sub-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; 
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   区切りアイコン
   ======================================== */
.section-separator {
  text-align: center;
  margin: 10px 0 30px; 
}

.colored-icon {
  display: inline-block;
  width: 80px;   
  height: 80px;  
  background-color: #E0A1BF; 
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon-star {
  -webkit-mask-image: url('../img/icon-separator_star.png');
  mask-image: url('../img/icon-separator_star.png');
  animation: sway 4s ease-in-out infinite; 
}

.icon-butterfly {
  -webkit-mask-image: url('../img/icon-separator_butterfly.png');
  mask-image: url('../img/icon-separator_butterfly.png');
  animation: sway-reverse 4.5s ease-in-out infinite; 
}

/* ========================================
   下層ページ（作品詳細：fantasy-01.html等）
   ======================================== */
.detail-content {
  width: 100%;
  padding: 60px 40px 0; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back-link {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
}

.back-link a {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.detail-main-img {
  width: 100%;
  max-width: 420px; 
  height: auto;
  display: block;
  margin: 0 auto 30px;
}

.detail-info {
  width: 100%;
  max-width: 420px;
  color: #584a68;
  text-align: left; 
}

.detail-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 15px 0;
  letter-spacing: 0.05em;
}

.detail-description {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.detail-price {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.detail-main-visual {
  width: 100%;
}

/* インフォバー */
.info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 40px;
  color: #584a68;
  position: relative;
}

.info-bar .colored-icon {
  width: 50px;
  height: 50px;
}

.info-bar-center {
  flex-grow: 1;
  padding-left: 20px;
  text-align: left;
}

.info-subtitle {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.info-size {
  font-size: 11px;
  letter-spacing: 0.05em;
}

.info-number {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.info-bar.is-soldout {
  background-color: #b184a2; 
  color: #3f2a49;            
  padding-right: 70px;       
}

.sold-out-label {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #7b4260; 
  color: #fff;
  writing-mode: vertical-rl; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.2em;
}

/* サムネイル一覧 */
.detail-thumb-section {
  width: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
}

.detail-cat-title {
  color: #584a68;
  font-size: 14px;
  margin: 0 0 15px 0;
  text-align: left;
}

.detail-thumb-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
  gap: 5px; 
}

.detail-thumb-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* お問い合わせ先エリア */
.contact-section {
  margin-top: 200px; 
  width: 100%;
  background-color: #590a2a; 
  color: #fae6ed;
  padding: 30px 40px;
  box-sizing: border-box;
}

.contact-title {
  font-size: 11px;
  text-align: center;
  margin: 0 0 20px 0;
  letter-spacing: 0.1em;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  justify-content: space-between; 
  font-size: 10px;
  letter-spacing: 0.05em;
}

/* お問い合わせ先とフッターの連結 */
.contact-section + .col-footer {
  margin-top: 0;
}

/* ========================================
   フッター
   ======================================== */
.col-footer {
  margin-top: 200px;         
  width: 100%;
  background-color: #a8627e; 
  padding: 40px 30px;
  box-sizing: border-box;
}
   
.footer-title {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  margin: 0 0 20px 0;
  letter-spacing: 0.05em;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 15px;
  max-width: 250px;
  margin: 0 auto;
}

.footer-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

/* サムネイル画像をデザイン通りのサイズに固定 */
.footer-thumb {
  width: 40px !important;  /* サイズをデザインに合わせて固定（効かない場合があるため!importantを付与） */
  height: 40px !important;
  object-fit: cover;
  background-color: #e0e0e0; 
  flex-shrink: 0; /* 画像が潰れるのを防ぐ */
}

/* ========================================
   レスポンシブ（スマートフォン表示）
   ======================================== */
@media (max-width: 768px) {
  .lp-container {
    flex-direction: column;
    align-items: center;
  }
  
  .col-left, .col-right {
    display: none;
  }
  
  .col-center {
    width: 100%;
    max-width: 100%;
  }
  
  .art-item {
    padding: 0 20px;
  }
}

/* ========================================
   サイト全体のリンクホバー演出（PC・スマホ最適化）
   ======================================== */
/* ▼ ギャラリーアイテムの基本設定 ▼ */
.art-item a,
.grid-item,
.back-link a,
.footer-title a,
.footer-nav-item {
  display: block;           
  text-decoration: none;    
  color: inherit;           
  -webkit-tap-highlight-color: transparent; /* ★追加：タップした時のグレーの四角い影を消す */
}

/* ▼ 1. ベースのトランジション設定（全デバイス共通） ▼ */
.art-img,
.grid-item img,
.detail-thumb-grid img,
.back-link a,
.footer-title a,
.footer-nav-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ▼ 2. PC（マウス操作）の場合のみ、ホバー演出を適用する ▼ */
@media (hover: hover) and (pointer: fine) {
  .art-item a:hover .art-img,
  .grid-item:hover img,
  .detail-thumb-grid img:hover {
    opacity: 0.8;
    transform: scale(1.02);
  }
  
  .back-link a:hover,
  .footer-title a:hover,
  .footer-nav-item:hover {
    opacity: 0.6;
  }
}

/* ▼ 3. スマホ（タッチ操作）の場合、指で触れた瞬間（アクティブ）に反応させる ▼ */
@media (hover: none) {
  /* トップページのアートギャラリー（静的要素）のみ、タップ時の凹み演出を残す */
  .art-item a:active .art-img {
    opacity: 0.8;
    transform: scale(0.98); 
    transition: opacity 0.1s ease, transform 0.1s ease; 
  }
  
  /* テキストリンク等のタップ時の透け演出のみ残す */
  .back-link a:active,
  .footer-title a:active,
  .footer-nav-item:active {
    opacity: 0.6;
    transition: opacity 0.1s ease;
  }

  /* 
   * ★ 以下の要素（詳細ページ等の動的要素）は、スマホでのトランジション演出を無効化します。
   * a.grid-item (カテゴリーギャラリー)
   * .detail-thumb-grid (詳細ページ内の共通サムネイル)
   */
}

/* ========================================
   iOS Safariの電話番号自動リンク（青色）をリセットする
   ======================================== */
a[href^="tel:"] {
  color: inherit !important; /* 親要素の文字色（白/ピンク系）を引き継ぐ */
  text-decoration: none !important; /* 下線を消す */
}