@charset "utf-8";
/* ==========================================================================
   responsive.css  — スマートフォン／タブレット対応用スタイル
   ・PC表示（幅960px以上）には一切影響しないよう、全ルールを max-width の
     メディアクエリ内に記述しています。
   ・既存HTMLのコンテンツ／既存のインラインCSSは変更せず、本ファイルを
     後から読み込むことで上書きしています。
   ・画像パスは本ファイル(css/)からの相対パスです（日本語版・英語版共通）。
   ブレイクポイント
     Tablet : 768px – 959px
     SP     : – 767px
   ========================================================================== */

/* メニューボタン（JSで生成）はスマートフォン幅でのみ表示 */
.rwd-menu-btn {
  display: none;
}

/* ==========================================================================
   共通（959px以下：タブレット＋スマートフォン）
   ========================================================================== */
@media screen and (max-width: 959px) {

  /* --- 横スクロール防止・画像の可変化 --- */
  html {
    overflow-y: auto;
  }
  body {
    min-width: 0;
  }
  #main img {
    max-width: 100%;
    height: auto;
  }
  /* 見出しバナー画像・トップ画像：自然幅(610px)より画面が広い場合でも
     幅いっぱいに拡大する（例: iPad mini縦向き744pxなど、
     自然幅〜959pxの間で右側に空白ができるのを防ぐ） */
  #main h2 img,
  #i_img img {
    width: 100%;
    height: auto;
  }
  #main iframe {
    max-width: 100%;
  }
  /* YouTube 埋め込み：16:9 を保ったまま縮小 */
  #main iframe[src*="youtube.com"] {
    width: 560px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  /* 長いURL・英単語のはみ出し防止 */
  #main p,
  #main li,
  #main h3,
  #main h4,
  #main h5,
  #main blockquote,
  .bcard-wrapper {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  #main a {
    overflow-wrap: anywhere;
  }
  .bcard-wrapper {
    box-sizing: border-box;
  }

  /* --- レイアウト枠の固定幅を解除 --- */
  .layout,
  #wrap {
    width: auto;
  }
  #hd_con {
    width: auto;
  }
  #nav_con {
    width: auto;
    float: none;
  }
  #main {
    width: auto;
    float: none;
  }
  #ft {
    width: auto;
    padding: 10px 16px 15px;
  }

  /* --- ヘッダー：縦長ロゴを横長バーに再構成 ---
     既存のロゴ画像(img2.png)の各パーツを背景として切り出して表示し、
     <img> 自体は代替テキスト(alt)を保持したまま視覚的にのみ隠します。 */
  #hd {
    float: none;
    width: auto;
    height: 76px;
    position: relative;
    background: #C30552;
  }
  #hd header,
  #hd h1,
  #hd h1 a {
    display: block;
    height: 100%;
  }
  #hd h1 a {
    position: relative;
    overflow: hidden;
  }
  #hd h1 a img {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* 「應研究室」（縦書き部分）元画像 x105-144 / y0-160 を 0.42倍 */
  #hd h1 a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 4px;
    width: 17px;
    height: 68px;
    background: url(../images/img2.png) no-repeat;
    background-size: 73.92px auto;          /* 176px × 0.42 */
    background-position: -44.1px 0;         /* -105px × 0.42 */
  }
  /* 「Ying Laboratory」（回転文字部分）元画像 x49-75 / y2-239 を -90度回転して横書き化 */
  #hd h1 a::after {
    content: "";
    position: absolute;
    left: 46px;
    top: 24px;
    width: 27px;
    height: 238px;
    background: url(../images/img2.png) no-repeat;
    background-size: 176px auto;
    background-position: -49px -2px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(27px) rotate(-90deg);
    transform: translateY(27px) rotate(-90deg);
  }
}

/* ==========================================================================
   タブレット（768px – 959px）
   ヘッダーを上部の横長バーにし、ナビ（150px）＋本文（可変）の2カラム構成
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

  /* 所属表記（元画像 y558-630）をヘッダー右側に表示 */
  #hd header::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 176px;
    height: 73px;
    margin-top: -36px;
    background: url(../images/img2.png) no-repeat 0 -558px;
    background-size: 176px auto;
  }

  #nav {
    float: left;
  }
  #main {
    margin-left: 150px;
    /* 本文内の clear:both（.crr / .pagetop）が左ナビの float まで
       回り込み解除して大きな空白ができるのを防ぐ（BFC化） */
    display: flow-root;
  }
}

/* ==========================================================================
   スマートフォン（〜767px）
   ========================================================================== */
@media screen and (max-width: 767px) {

  body {
    font-size: 15px;
  }

  /* --- ハンバーガーメニュー（ボタンは js/responsive.js が生成） --- */
  .rwd-menu-btn {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .rwd-menu-btn span {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: #FFF;
    -webkit-transition: transform 0.2s, opacity 0.2s, top 0.2s;
    transition: transform 0.2s, opacity 0.2s, top 0.2s;
  }
  .rwd-menu-btn span:nth-child(1) { top: 14px; }
  .rwd-menu-btn span:nth-child(2) { top: 21px; }
  .rwd-menu-btn span:nth-child(3) { top: 28px; }
  .rwd-nav-open .rwd-menu-btn span:nth-child(1) {
    top: 21px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .rwd-nav-open .rwd-menu-btn span:nth-child(2) {
    opacity: 0;
  }
  .rwd-nav-open .rwd-menu-btn span:nth-child(3) {
    top: 21px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .rwd-menu-btn:focus-visible {
    outline: 3px solid #FFF;
    outline-offset: 2px;
  }

  /* --- ナビゲーション：既存の画像ナビ（150px幅・背景スプライト）を
         そのまま中央に縦並びで表示。JS有効時は開閉式 --- */
  #nav {
    float: none;
    margin: 0 auto;
  }
  #nav li {
    float: none;
  }
  .rwd-js #nav {
    display: none;
  }
  .rwd-js.rwd-nav-open #nav {
    display: block;
  }
  #nav_con {
    background: #DCDCDC;
  }

  /* --- 本文 --- */
  #main {
    margin-left: 0;
  }
  #text_area {
    padding: 0 16px;
    min-height: 0;
  }
  #main ol,
  #main ul {
    padding-left: 22px;
  }
  blockquote {
    margin: 1em 0;
  }

  /* 見出しh3：固定幅(585px)の背景画像枠を、同じ見た目のCSS枠に置き換え */
  h3 {
    background: #FFF;
    border: 1px solid #362630;
    border-radius: 6px;
    box-shadow: -5px 6px 0 #362630;
    padding: 0.45em 0.6em;
    margin: 0.8em 0 calc(0.4em + 6px) 5px;
  }

  /* メンバー（代表者）枠：固定幅の背景画像を、同じ線構成のCSSに置き換え */
  .member_box_start {
    width: auto;
    height: auto;
    min-height: 163px;
    box-sizing: border-box;
    padding: 5px 0;
    overflow: hidden;
    background:
      linear-gradient(#C40552, #C40552) left top / 100% 5px no-repeat,
      linear-gradient(#C40552, #C40552) left bottom / 100% 5px no-repeat,
      linear-gradient(#C40552, #C40552) 126px 0 / 5px 100% no-repeat;
  }
  .member_box_start > img {
    max-width: 119px;
    height: auto;
  }
  .member_txt_R {
    float: none;
    width: auto;
    margin: 10px 0 0 141px;
  }

  /* --- フッター：所属表記（元画像 y558-630）をコピーライトの上に表示 --- */
  #ft {
    text-align: center;
  }
  #ft::before {
    content: "";
    display: block;
    height: 85px;
    margin: -10px -16px 12px;
    background: #C30552 url(../images/img2.png) no-repeat center -552px;
    background-size: 176px auto;
  }
}

/* --- 小さい端末（〜359px）：ロゴ英字を少し縮小 --- */
@media screen and (max-width: 359px) {
  #hd h1 a::after {
    left: 42px;
    top: 26px;
    -webkit-transform: translateY(24px) rotate(-90deg) scale(0.88);
    transform: translateY(24px) rotate(-90deg) scale(0.88);
  }
}

/* --- 動きを抑える設定のユーザーにはアニメーションを無効化 --- */
@media (prefers-reduced-motion: reduce) {
  .rwd-menu-btn span {
    -webkit-transition: none;
    transition: none;
  }
}