/* ============================================
   
   中国語ページ用 追加CSS（固定ページデザイン版）
   
   ※このファイルについて※
   - 元サイト（ortholens.jp）のCSSを読み込んだ上で、
     このページ固有のスタイルのみ記述しています
   - 固定ページのデザインを踏襲しています
   
   ============================================ */


/* ============================================
   【0】ページ全体の基本設定
   ============================================ */

/* ページ内リンクのスムーズスクロール */
html {
  scroll-behavior: smooth;
}


/* ============================================
   【1】ヘッダー部分のスタイル
   ============================================ */

.header .inner {
  max-width: 1150px !important;
}

.header .inner .logo {
  width: 32% !important;
}


/* ============================================
   【2】PC用ナビゲーションメニュー
   ============================================ */

.global_nav {
  width: 67% !important;
}

.global_nav ul {
  justify-content: flex-start !important;
  padding-left: 20px !important;
}

.global_nav a {
  width: auto !important;
  min-width: 6em !important;
  font-size: 14px !important;
  padding: 6px 15px !important;
  white-space: nowrap !important;
}

.global_nav li:not(:last-child) {
  margin-right: 10px !important;
}

@media screen and (max-width: 1200px) and (min-width: 971px) {
  .global_nav a {
    font-size: 13px !important;
    padding: 6px 12px !important;
  }
  .global_nav li:not(:last-child) {
    margin-right: 8px !important;
  }
}

@media screen and (max-width: 1100px) and (min-width: 971px) {
  .global_nav a {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-width: 5em !important;
  }
  .global_nav li:not(:last-child) {
    margin-right: 6px !important;
  }
}


/* ============================================
   【3】スマホ用ハンバーガーメニュー（ドロワーメニュー）
   ============================================ */

.drawer-nav {
  position: fixed;
  z-index: 101;
  top: 0;
  overflow: hidden;
  width: 16.25rem;
  height: 100%;
  color: #222;
  background-color: #fff;
}

body .drawer-nav {
  background-color: #00a99d !important;
}

.drawer--top .drawer-nav {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  -webkit-transition: top .6s cubic-bezier(.19, 1, .22, 1);
  transition: top .6s cubic-bezier(.19, 1, .22, 1);
  -webkit-overflow-scrolling: touch;
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
}

.drawer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-menu ul {
  padding: 0;
  list-style: none;
}

.drawer-nav .gnav {
  width: 94%;
  margin: 50px auto;
  text-align: left;
}

.drawer-nav .gnav li {
  margin: 0 0 5px 0;
  width: 12em;
  text-align: left;
}

.drawer-nav .gnav li a {
  display: block;
  padding: 8px 0;
  color: #333;
  text-decoration: none;
  font-size: 1.6rem;
}

body .drawer-menu .gnav li a.drawer-menu-item {
  display: block !important;
  width: 100% !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  padding: 9px 15px !important;
  text-align: left !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  border: none !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
}

body .drawer-menu .gnav li a.drawer-menu-item.supp {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

body .drawer-menu .gnav li a.drawer-menu-item.lower {
  font-size: 14px !important;
  padding-left: 45px !important;
}

body .drawer-menu .gnav li a.drawer-menu-item:hover,
body .drawer-menu .gnav li a.drawer-menu-item:active {
  color: #ffeb3b !important;
}

.drawer-nav .gnav li a:visited,
body .drawer-menu .gnav li a.drawer-menu-item:visited {
  color: #ffffff !important;
}

/* スマホ時の表示切り替え（970px以下） */
@media screen and (max-width: 970px) {
  .global_nav {
    display: none !important;
  }
  
  .header .inner {
    position: relative !important;
  }
  
  .header .inner .logo {
    width: 70% !important;
  }
}


/* ============================================
   【4】メインコンテンツ部分（固定ページスタイル）
   ============================================ */

/* 中国語フォント設定 */
.chinese_contents {
  font-family: "DengXian", "FangSong", "Microsoft YaHei", "SimSun", sans-serif;
}

/* ページタイトル */
.title_page {
  text-align: center;
  font-size: 2em;
  margin: 40px 0 30px;
  padding-bottom: 15px;
}

/* コンテンツエリア */
.wrap_m {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* イントロ画像 */
.mv_intro {
  text-align: center;
  margin-bottom: 30px;
}

.mv_intro img {
  max-width: 100%;
  height: auto;
}

/* イントロテキスト */
.intro_text {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 30px;
}


/* ============================================
   【5】目次ボックスのスタイル
   ============================================ */

.intro {
  margin: 30px 0 50px;
}

.intro .box {
  border: 2px solid #000;
  border-radius: 10px;
  padding: 20px 25px;
  background-color: #FFFCF5;
}

.intro .box h3 {
  font-size: 1.4em;
  text-align: center;
  margin: 0 0 15px;
}

.intro .box p {
  font-size: 1em;
  margin-bottom: 10px;
}

.intro .box a {
  color: #07b5b5;
}


/* ============================================
   【6】見出しのスタイル（固定ページ風）
   ============================================ */

/* セクション大見出し（h2） */
/* 波線は元サイトのCSSから背景画像として適用されるため、border-bottomは不要 */
.headline {
  font-size: 1.6em;
  text-align: center;
  margin: 80px 0 30px;
  padding-bottom: 15px;
  color: #333;
}

/* サブ見出し（h3） */
.sub_headline {
  font-size: 1.3em;
  margin: 50px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px dotted #ccc;
  color: #333;
}

/* 小見出し（h4） */
.chinese_contents h4 {
  font-size: 1.1em;
  margin: 30px 0 15px;
  color: #333;
}


/* ============================================
   【7】本文のスタイル
   ============================================ */

.chinese_contents p {
  line-height: 1.8;
  margin-bottom: 1.5em;
}

.chinese_contents img.aligncenter {
  display: block;
  margin: 30px auto;
  max-width: 100%;
  height: auto;
}

.chinese_contents figure {
  margin: 30px 0;
  text-align: center;
}

.chinese_contents figure img {
  max-width: 100%;
  height: auto;
}

/* 注釈 */
.note {
  font-size: 0.9em;
  color: #666;
}


/* ============================================
   【8】チェックリストのスタイル
   ============================================ */

.list_check {
  margin: 20px 0 30px;
  padding: 0;
  list-style: none;
}

.list_check li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.list_check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-image: url("https://ortholens.jp/assets_info/images/common/icon_check.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* 日付 */
.date {
  color: #666;
  font-size: 14px;
  margin-top: 50px;
  text-align: right;
}


/* ============================================
   【8】表（テーブル）のスタイル
   ============================================ */

.chinese_contents table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 14px;
}

.chinese_contents table th,
.chinese_contents table td {
  border: 1px solid #ccc;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.chinese_contents table thead th {
  background-color: #07b5b5;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.chinese_contents table tr.highlight td {
  background-color: #e6f7f7;
}


/* ============================================
   【9】Q&Aセクションのスタイル
   ============================================ */

.qa_section {
  margin-top: 30px;
}

.qa_section .question {
  font-size: 1.1em;
  color: #07b5b5;
  margin: 40px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.qa_section .answer {
  line-height: 1.8;
  margin-bottom: 20px;
}

.qa_section .answer.last {
  margin-bottom: 50px;
}


/* ============================================
   【10】フッターバナーのスタイル
   ============================================ */

.footer {
  position: relative;
}

.list_bnr {
  transition: opacity 0.3s ease;
  z-index: 100;
}

.list_bnr.is-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.list_bnr.is-stopped {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}


/* ============================================
   【11】スマホ用調整（970px以下）
   ============================================ */

@media screen and (max-width: 970px) {
  .title_page {
    font-size: 1.5em;
    margin: 30px 15px 20px;
  }
  
  .wrap_m {
    padding: 0 15px 40px;
  }
  
  .headline {
    font-size: 1.3em;
    margin: 60px 0 20px;
  }
  
  .sub_headline {
    font-size: 1.1em;
    margin: 40px 0 15px;
  }
  
  .chinese_contents table {
    font-size: 12px;
  }
  
  .chinese_contents table th,
  .chinese_contents table td {
    padding: 8px;
  }
  
  .intro .box p {
    white-space: nowrap;
  }
}