/* =========================================================
   Responsive overrides (PC safe + Mobile)
   ========================================================= */

/* PC/共通：SPメニューは基本非表示 */
#sp_menu_btn, .sp-nav, .sp-nav-backdrop { display: none; }

/* Yoshimi IWASAKI CSS FILE 2026.03.01 (style_responsive.css) */

/* =========================================================
   Global (PC/SP 共通で “安全なものだけ”)
   ========================================================= */
html { -webkit-text-size-adjust: 100%; }

/* ※ここで border-box を全体に掛けない（←PCの固定幅設計が崩れる原因） */
/* html, body { max-width: 100%; overflow-x: visible !important; } */
html, body { max-width: 100%; }

img, video { max-width: 100%; height: auto; }

body{
  font-size: 16px;
  line-height: 1.7;
}

/* デフォルトは隠す（PCでは出さない） */
.sp-nav { display: none; }


/* =========================================================
   SP (max-width: 768px)
   ========================================================= */
@media (max-width: 768px){

  /* SPでは border-box を使う（レスポンシブ安定） */
  *, *::before, *::after { box-sizing: border-box; }

  /* -------------------------
     最上段の空白対策
  ------------------------- */
  #block_top_img{
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
	
  #block_top_img img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* PC用メニューはスマホで隠す */
  #block_top_head_menu > ul.menu{
    display: none !important;
  }

  /* -------------------------
     固定幅ブロックをスマホで可変に（共通）
     ※左右余白は 6px
  ------------------------- */
  #block_top_head_item,
  #block_top_img,
  #block_top_hokkaidou,
  .block_top_takarakuji,
  #block_top_yamaha,
  .block_top_top,
  #block_top_kokuchi,
  #block_top_kokuchi_top,
  #block_top_kokuchi_postpone,
  #block_top_kokuchi2,
  #block_top_kokuchi3,
  #block_top_kokuchi_to_the_202112postpone,
  #block_top_kokuchi_to_the_202112postpone_b,
  .block_top_kokuchi_link,
  #block_top_img_mylife,
  .block_top_cd_release,
  #block_top_live_information,
  #block_top_img_information,
  #block_top_img_musicsite,
  #block_top_img_profile,
  #block_mid,
  .block_mid3,
  #block_bottom,
  #block_video,
  .block_video{
    width: 100% !important;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* 2カラムを縦積み */
  #block_mid_left,
  #block_mid_right,
  #block_video_left,
  #block_video_right,
  .block_video_left2,
  #block_bottom_left,
  #block_bottom_right{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 中段〜下に薄い枠 */
  #block_mid,
  .block_video,
  #block_bottom{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .topics_title{ margin-right: 0 !important; }

  /* 告知系の固定幅が残ると横切れの原因 */
  .block_top_kyouchou_blue,
  .block_top_kyouchou_green,
  .block_top_kyouchou,
  .block_top_postpone,
  .block_top_wakunashi,
  .block_top_newalbum,
  #block_top_meguro {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

   /* 2026.03.04 J-Souma  */
  .block_uchigawa_blue {
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* details/summary が長文で横にはみ出すのを防ぐ */
  summary{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  a, p, li, summary, div{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
	
	
  /* =========================
     SP: 点線枠ブロックの「左右ピタリ」を解消
     （#block_top_mid が存在しないので、枠そのものに余白を付ける）
   ========================= */
  .b_Latest,
  .b_Live,
  .b_Release,
  .b_Others,
  .block_top_newalbum{
    width: auto !important;           /* 100%固定をやめる */
    max-width: none !important;       /* 960px制限も外す */
    margin-left: 12px !important;      /* ←ここが効く */
    margin-right:12px !important;     /* ←ここが効く */
    box-sizing: border-box !important;
  }

  /* -------------------------
     ヘッダー（☰ + SNS）縦中央
  ------------------------- */
  #block_top_head{
    height: auto !important;
/*    min-height: 46px !important; 2026.03.10 sakura */
    display: flex !important;
    align-items: center !important;
  }

  .sp-nav{ display: block; }

  #block_top_head_item{
/*    min-height: 46px !important; 2026.03.10 sakura */
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #block_top_head_item .clear{ display: none !important; }

  #block_top_head_menu{
    width: auto !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
  }

  #block_top_head_menu .sp-nav{
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
    z-index: 9999;
  }

  /* ☰（角丸四角） */
  #block_top_head_menu .sp-nav > summary{
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  #block_top_head_menu .sp-nav > summary::-webkit-details-marker{
    display: none !important;
  }

  /* 三本線：完全中央 */
  #block_top_head_menu .sp-nav > summary::before{
    content: "" !important;
    width: 18px !important;
    height: 12px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background:
      linear-gradient(#333 0 0) 0 0/100% 2px no-repeat,
      linear-gradient(#333 0 0) 0 50%/100% 2px no-repeat,
      linear-gradient(#333 0 0) 0 100%/100% 2px no-repeat !important;
    opacity: .95 !important;
  }

  /* SNS：縦中央 + baseline沈み対策 */
  .social_btn{
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .social_btn .facebook{ display: none !important; }

  .social_btn .twitter{
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .social_btn img{
    display: block !important;
    height: 28px !important;
    width: auto !important;
  }

  /* ドロップダウン */
  #block_top_head_menu .sp-nav__panel{
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: min(92vw, 360px);
    max-height: 70vh;
    overflow: auto;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0,0,0,.16);
    z-index: 10000;
    transform: translateY(-6px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .16s ease, opacity .16s ease;
  }

  #block_top_head_menu .sp-nav[open] .sp-nav__panel{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  #block_top_head_menu .sp-nav__panel a{
    display: block;
    padding: 10px 14px;
    border-top: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    font-size: 15px;
    line-height: 1.25;
  }
  #block_top_head_menu .sp-nav__panel a:first-child{ border-top: 0; }
  #block_top_head_menu .sp-nav__panel a:active{ background: #f3f3f3; }

  #block_top_head_menu .sp-nav__sub > summary{
    cursor: pointer;
    padding: 10px 14px;
    border-top: 1px solid #f0f0f0;
    list-style: none;
    font-weight: 400;
    line-height: 1.25;
    position: relative;
  }
  #block_top_head_menu .sp-nav__sub > summary::-webkit-details-marker{ display:none !important; }
  #block_top_head_menu .sp-nav__sub > summary::after{
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .55;
    font-size: 20px;
  }
  #block_top_head_menu .sp-nav__sub[open] > summary::after{
    content: "⌄";
    font-size: 18px;
  }
  #block_top_head_menu .sp-nav__subpanel a{
    padding: 9px 14px 9px 26px;
    background: #fafafa;
  }

  /* 暗転 */
  #block_top_head_menu .sp-nav-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
  }
  #block_top_head_menu .sp-nav[open] + .sp-nav-backdrop{
    display: block;
  }
  /* ===============================
     2026 refresh: Top quick navigation
     =============================== */
  .container{
    padding-left: 12px;
    padding-right: 12px;
  }

  .top-hero{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .top-hero__nav{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .top-hero__hint{
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .75;
  }

  .btn-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }
  .btn-pill--ghost{
    background: transparent;
  }

  .archiveLink{
    margin: 6px 0 10px;
    font-size: 13px;
  }
  .archiveLink a{
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.18);
    padding-bottom: 2px;
  }

  /* URLが長い場合のはみ出し対策 */
  a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

}


/* =========================================================
   PC (min-width: 769px)  ※PCは“ヘッダー縦中央”のみ維持（最小）
   ========================================================= */

@media (min-width: 769px){

  .sp-nav,
  .sp-nav-backdrop{
    display: none !important;
  }

  /* ピンク帯：縦中央維持 */
  #block_top_head{
	  	  
/*    height: 38px; 2026.03.10 sakura */
    line-height: normal;
  }

  #block_top_head_item{

/*	width: 960px; */
	width: 1200px;
    
	margin: 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
  }

  #block_top_head_menu{
/*    width: 720px; 2026.03.10 sakura */
    float: none !important;
/*    height: 38px; 2026.03.10 sakura */
    display: flex;
    align-items: center;
  }

  #block_top_head_menu > ul.menu{
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
/*    height: 38px; 2026.03.10 sakura */
  }

  #block_top_head_menu > ul.menu li{
    float: none !important;
  }

  .social_btn{
    float: none !important;
    width: auto !important;

	/* height: 38px; 2026.03.10 sakura */
	/* height: 38px; */

	margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
  }

  .social_btn .facebook,
  .social_btn .twitter{
    float: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .social_btn img{ display: block; }

  #block_top_head_item .clear{ display:none; }
  /* ===============================
     2026 refresh: Top quick navigation (PC)
     =============================== */
  /* PCは既存レイアウトを優先：ボタンは“控えめなリンク”として整列のみ */
  .top-hero{ margin: 8px 0 14px; }
  .top-hero__nav{ display:flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .top-hero__hint{ display:none; }
  .btn-pill{ padding: 0; border: none; background: transparent; border-radius: 0; text-decoration:none; }
  .btn-pill:hover{ text-decoration: underline; }
  .btn-pill--ghost{ background: transparent; }
  .archiveLink{ margin: 6px 0 10px; font-size: 13px; }

	
	/* =========================
   Interview Q&A corner radius restore (PC)
   ========================= */
  .question,
  .answer,
  .question2,
  .answer2{
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
  }

}

/* =========================
   Music site (musicsite.html) SP
   ========================= */
@media (max-width: 768px){

  /* 中段の余白 */
  #block_mid{ padding: 12px 6px 40px !important; }

  /* タイトル帯：詰まりを解消 */
  .topics_title_music_site{
    margin: 12px 0 !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* リストを“カード”にして押しやすく */
  .block_music_site ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .block_music_site li{
    margin: 10px 0;
  }

  .block_music_site li a{
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 12px;
/*    border: 1px solid rgba(0,0,0,.10); */
	  border: none !important;
	  
    border-radius: 14px;
    background: #fff;

    text-decoration: none;
	  
	box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  }

  /* アイコンサイズを統一（縦に暴れない） */
  .block_music_site li a img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 40px;
  }

  /* 文字を読みやすく */
  .block_music_site li a{
    font-size: 15px;
    line-height: 1.4;
  }

  /* 注釈（※スマホ専用アドレス）を折り返しやすく */
  .block_music_site li{
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
/* =========================
   Music site header SP
   ========================= */
@media (max-width: 768px){

  #block_top_img_musicsite{
    height: 110px !important;
    min-height: 0 !important;
    max-height: 110px !important;

    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #bdbdbd !important;
  }

}
@media (max-width: 768px){

  .page-musicsite #block_mid{
    padding-bottom: 40px !important;
  }

}


/* =========================
   Information page SP
   ========================= */
@media (max-width: 768px){

  /* ページ見分け（他ページへ波及させない） */
  .page-information #block_mid{
    padding: 12px 6px 40px !important;
  }

  /* ヘッダー画像：高さを揃える */
  #block_top_img_information{
    height: 110px !important;
    min-height: 0 !important;
    max-height: 110px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #bdbdbd !important;
  }

  /* 見出し（topics_title_o）：帯を整理して読みやすく */
  .page-information .topics_title_o{
    margin: 14px 0 10px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    border-radius: 12px;
  }

  /* 本文ブロック（whatsnew）をカード化 */
  .page-information .whatsnew{
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 14px;
    background: #fff;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  }

  .page-information .whatsnew p{
    margin: 0 0 10px !important;
  }
  .page-information .whatsnew ul{
    margin: 10px 0 0 !important;
    padding-left: 1.1em;
  }
  .page-information .whatsnew li{
    margin: 6px 0;
  }

  /* 画像・lightbox画像がある場合の崩れ防止 */
  .page-information .whatsnew img,
  .page-information .whatsnew a img{
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px auto;
  }

  /* 過剰な <br> で間が空きすぎるのを軽減（完全に消さず、控えめに） */
  .page-information #block_mid > br{ display: none; }
  .page-information #block_mid p[id^="info"]{ margin: 0 !important; }

}

/* =========================
   Interview (interview.html / interview2.html) SP
   - PC用の float + 固定幅(300px + 800px) をスマホで解除
   ========================= */
@media (max-width: 768px){

  /* 画面横はみ出しの主因（固定幅＆float）を縦積みに */
  .question,
  .answer,
  .question2,
  .answer2{
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 余白をスマホ向けに調整 */
  .question,
  .question2{
    margin: 14px 0 8px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .answer,
  .answer2{
    margin: 0 0 16px !important;
    padding-left: 56px !important;   /* アイコン分の左余白 */
    border-radius: 16px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  }

  /* 画像・左右配置は縦積み */
  .float_left,
  .float_right{
    float: none !important;
    width: auto !important;
    margin: 10px 0 !important;
  }
  .photo_small,
  .photo_small_b{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================
   Interview: wrapper(.width920) & carousel fixed-width kill (SP)
   ========================= */
@media (max-width: 768px){

  /* ここが主犯：本文ラッパーが 960px 固定 */
  .width920,
  .width920_profile{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Interview 見出し画像も安全に */
  .width920 > img{
    display: block;
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- カルーセル（くるくる）固定幅を解除 --- */
  .roundabout-holder{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #carousel-descriptions{
    width: 100% !important;
    max-width: 100% !important;
  }

  #carousel-controls{
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  #carousel-controls span{
    width: auto !important;          /* 920px固定を解除 */
    display: block !important;
    white-space: normal !important;  /* 長文折り返し */
  }

  /* 念のため：横はみ出し最終保険 */
  html, body{
    overflow-x: hidden !important;
  }
}


/* =========================
   Release page (release.html) SP
   ========================= */
@media (max-width: 768px){

  /* ページの左右余白 */
  .page-release #block_mid{
    padding: 12px 6px 40px !important;
  }

  /* PC用固定幅ラッパー解除 */
  .width920,
  .width920_profile{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* 左画像＋右テキストを縦積み */
  .float_left,
  .float_right{
    float: none !important;
    width: auto !important;
    margin: 10px 0 !important;
  }

  /* CDジャケット */
  .photo_small,
  .photo_small_b{
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    display: block;
    margin: 0 auto 10px auto;
  }

  /* CD情報ブロックをカード化 */
  .release_block,
  .release_item{
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  }

  /* タイトル */
  .release_title{
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px;
  }

  /* 価格など */
  .release_info{
    font-size: 14px;
    line-height: 1.6;
  }

}
/* =========================
   Profile page (mobile)
   ========================= */
@media (max-width: 768px) {
  /* Mobile: SPメニューを表示 */
  #sp_menu_btn, .sp-nav { display: block; }
  .sp-nav-backdrop { display: block; }
  body.sp-nav-open { overflow: hidden; }

  /* 横はみ出し対策 */
  html, body { overflow-x: hidden; }


  /* 全体：左右の余白を少しだけ作って読みやすく */
  #block_mid{
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }

  /* イントロ（上のボタン3つ + 右側画像のエリア）を縦並びに */
  #profile_intro_img{
    margin-top: 10px;
  }
  #profile_intro_img_left,
  #profile_intro_img_right{
    float: none !important;
    width: 100% !important;
  }

  /* ボタン画像：中央寄せ + タップしやすいサイズ */
  #profile_intro_img_left p{
    margin: 10px 0;
    text-align: center;
  }
  #profile_intro_img_left img{
    max-width: 92%;
    height: auto;
  }

  /* 右側の飾り画像が背景の場合：高さだけ確保（無ければOK） */
  #profile_intro_img_right{
    margin-top: 10px;
    min-height: 120px;
    background-position: center;
    background-size: cover;
  }

  /* PDFボタン */
  #print_pdf{
    text-align: center;
    margin: 14px 0 8px;
  }
  #print_pdf img{
    max-width: 92%;
    height: auto;
  }

  /* プロフィール本文：読みやすさ最優先（行間・文字サイズ） */
  #profile{
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    padding: 14px 14px;
    margin: 10px 0 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    word-break: break-word;
  }

  /* 見出し “岩崎良美” を少し強調 */
  #profile .font_middle{
    font-size: 18px;
    font-weight: 700;
  }

  /* Discography見出し幅（.width920_profile をスマホで100%へ） */
  .width920_profile{
    width: 100% !important;
  }

  /* Discography：画像群をグリッド化（float解除） */
  #single_cd, #double_cd{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .discograpy .photo{
    float: none !important;
    width: calc(50% - 6px) !important; /* 2列 */
    margin: 0 !important;
    padding: 10px 10px 12px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    text-align: center;
  }

  /* ジャケット画像：カード内にフィット */
  .discograpy .image_s{
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
  }

  /* タイトル行：小さめ＆詰めすぎない */
  .discograpy .photo a{
    text-decoration: none;
    line-height: 1.4;
    font-size: 13px;
    display: block;
  }

  /* “ページ先頭へ” を見やすく */
  #block_mid > p a{
    display: inline-block;
    margin: 10px 0 18px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    text-decoration: none;
  }
}

/* さらに小さい端末は3列にすると小さすぎるので、2列のまま。
   ただし横幅が広いスマホ(例えばiPhone Pro Max等)では3列にしてもOKなら下をON:
@media (min-width: 520px) and (max-width: 768px) {
  .discograpy .photo{ width: calc(33.333% - 8px) !important; }
}
*/
/* ===== スマホの“切れ”対策の基本セット ===== */
@media screen and (max-width: 768px){

  /* はみ出し原因を潰す */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* 中央の枠（おそらく #block_mid 等）をスマホ幅に合わせる */
  #block_mid,
  #profile_intro,
  #profile,
  .discograpy,
  .width920_profile {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 左右余白を調整（枠が切れて見える対策） */
  #block_mid{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Discography の2列を1列に落とす（これが効きます） */
  #single_cd .photo,
  #double_cd .photo{
    float: none !important;
    width: 100% !important;
    margin: 0 0 18px 0 !important;
  }

  /* 画像そのものも親幅にフィット */
  #single_cd .photo img,
  #double_cd .photo img,
  img.image_s{
    display: block;
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 768px){

  /* release.html スマホ用：2列並び */
  #carousel{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    font-size: 0 !important;   /* inline-block の隙間対策 */
    line-height: 0 !important;
    text-align: center !important;
  }

  #carousel img.slide{
    display: inline-block !important;
    vertical-align: top !important;
    width: 48% !important;
    max-width: 48% !important;
    height: auto !important;
    margin: 0 1% 10px !important;
    border-radius: 10px !important;
  }

  /* Roundabout の残骸対策 */
  .roundabout-holder{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .roundabout-moveable-item{
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .roundabout-moveable-item img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  #carousel-descriptions{
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #carousel-descriptions li{
    display: none !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  #carousel-descriptions li.current{
    display: block !important;
  }

  #carousel-controls{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  #carousel-controls span{
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    background: #f3f3f3 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .width920{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .topics_title2{
    font-size: 24px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
}

@media (max-width: 768px){

  /* release.html の画像エリアはスマホでは“閲覧専用”にして、
     縦スクロールを最優先する */
  #carousel,
  #carousel img.slide,
  .roundabout-holder,
  .roundabout-moveable-item,
  .roundabout-moveable-item img{
    touch-action: pan-y !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
  }

  /* 画像側はタッチを取らせない */
  #carousel,
  #carousel img.slide,
  .roundabout-holder,
  .roundabout-moveable-item{
    pointer-events: none !important;
  }

  /* 文字一覧は必要なら触れるように残す */
  #carousel-controls,
  #carousel-controls span{
    pointer-events: auto !important;
  }
}

@media (max-width: 768px){
  #carousel-controls,
  #carousel-controls span{
    pointer-events: none !important;
  }
}

/* =========================
   Back to top button
   ========================= */

/* いったん非表示 */
.back-to-top{
  display: none;
}

/* スマホだけ表示 */
@media (max-width: 768px){

  .back-to-top{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 9999;

    min-width: 56px;
    height: 56px;
    padding: 0 14px;

    border-radius: 999px;
    background: rgba(51, 51, 51, 0.88);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;

    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    -webkit-tap-highlight-color: transparent;
  }

  .back-to-top:active{
    transform: scale(0.96);
  }

}

/* =========================================================
   profile.html スマホ専用 修正版
   ※ style_responsive.css の一番最後に追加
   ========================================================= */
@media (max-width: 768px){

  /* ---------------------------------
     ページ全体
  --------------------------------- */
  #block_mid{
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  #block_top_img_profile{
    width: 100% !important;
    max-width: 100% !important;
    height: 110px !important;
    min-height: 110px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden !important;
  }

  /* ---------------------------------
     上部説明＋ボタンエリア
  --------------------------------- */
  #profile_intro{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    box-sizing: border-box !important;
  }

  #profile_intro p{
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  #profile_intro_img{
    width: 100% !important;
    height: auto !important;
    margin-top: 10px !important;
    display: block !important;
    overflow: hidden !important;
  }

  #profile_intro_img_left,
  #profile_intro_img_right{
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 右の花画像はスマホでは下に回す */
  #profile_intro_img_right{
    display: block !important;
    min-height: 90px !important;
    margin-top: 12px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0.7;
  }

  /* 3つの画像ボタン */
  #profile_intro_img_left p{
    margin: 0 0 12px 0 !important;
    text-align: center !important;
  }

  #profile_intro_img_left p br{
    display: none !important;
  }

  #profile_intro_img_left img.print_pdf_img{
    display: inline-block !important;
    width: min(92%, 320px) !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* ---------------------------------
     PDFボタン
  --------------------------------- */
  #print_pdf{
    text-align: center !important;
    margin: 16px 0 14px !important;
  }

  #print_pdf img.print_pdf_img{
    display: inline-block !important;
    width: min(92%, 360px) !important;
    max-width: 360px !important;
    height: auto !important;
  }

  /* ---------------------------------
     プロフィール本文
  --------------------------------- */
  #profile{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;

    font-size: 15px !important;
    line-height: 1.95 !important;
    letter-spacing: 0.01em !important;

    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    -moz-border-radius: 24px !important;

    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #profile .font_middle{
    font-size: 18px !important;
    font-weight: 700 !important;
    font-style: normal !important;
  }

  #profile address{
    font-style: normal !important;
    line-height: 1.9 !important;
  }

  /* ---------------------------------
     「ページ先頭へ」
  --------------------------------- */
  #block_mid > p{
    margin: 10px 0 18px !important;
  }

  #block_mid > p a{
    display: inline-block !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
  }

  /* ---------------------------------
     Discography 共通枠
  --------------------------------- */
  .discograpy{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 18px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .width920_profile{
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    height: auto !important;
  }

  .topics_title2{
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
    word-break: break-word !important;
  }

  /* ---------------------------------
     Single / Album を2列グリッド化
  --------------------------------- */
  #single_cd,
  #double_cd{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #single_cd br,
  #double_cd br{
    display: none !important;
  }

  #single_cd .photo,
  #double_cd .photo{
    float: none !important;
    display: block !important;
    width: calc(50% - 7px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #single_cd .photo a,
  #double_cd .photo a{
    display: block !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  #single_cd .photo img,
  #double_cd .photo img,
  .discograpy .image_s{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 8px !important;
    border-radius: 18px !important;
  }

  /* かなり狭い端末だけ1列に落とす */
  @media (max-width: 380px){
    #single_cd .photo,
    #double_cd .photo{
      width: 100% !important;
    }
  }
}