/* ==========================================================
   site-policy.css
   ----------------------------------------------------------
   サイトポリシーページ専用CSS
   ========================================================== */

@import url(common.css);

/* ==========================================================
   メイン
   ========================================================== */

main {
  padding-top: 120px;
}

/* ==========================================================
   ページタイトル
   ========================================================== */

.site-policy-visual {
  width: 100%;
}

.site-policy-visual-inner {
  max-width: 1200px;

  margin: 0 auto;

  padding: 50px 30px 55px;

  box-sizing: border-box;

  text-align: center;
}

/* ==========================================================
   英語タイトル
   ----------------------------------------------------------
   TOPページの見出しデザインに合わせる
   ========================================================== */

.site-policy-en {
  margin: 0 0 10px;

  color: #eaa317;

  font-size: 13px;
  font-weight: 600;

  line-height: 1.5;

  letter-spacing: 0.2em;
}

/* ==========================================================
   日本語タイトル
   ========================================================== */

.site-policy-visual h2 {
  display: inline-block;

  position: relative;

  margin: 0;
  padding: 0;

  color: #333;

  font-size: 38px;
  font-weight: 600;

  line-height: 1.5;

  letter-spacing: 0.08em;
}

/* ==========================================================
   オレンジの下線
   ----------------------------------------------------------
   TOPページと同じ仕様
   ・幅 48px
   ・高さ 2px
   ・上余白 20px
   ========================================================== */

.site-policy-visual h2::after {
  content: "";

  display: block;

  width: 48px;
  height: 2px;

  margin: 20px auto 0;

  background: #eaa317;

  border-radius: 10px;
}

/* ==========================================================
   本文エリア
   ========================================================== */

.site-policy-section {
  width: 100%;

  background: #fff;

  color: #333;

  padding-bottom: 0;
}

.site-policy-container {
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 30px 100px;

  box-sizing: border-box;
}

/* ==========================================================
   導入文
   ========================================================== */

.site-policy-lead {
  margin-bottom: 65px;

  font-size: 16px;

  line-height: 2;
}

.site-policy-lead p {
  margin: 0 0 25px;
}

.site-policy-lead p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   各項目
   ========================================================== */

.site-policy-item {
  margin: 0 0 60px;
}

.site-policy-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   見出し
   ========================================================== */

.site-policy-item h3 {
  margin: 0 0 25px;

  padding: 13px 20px;

  background: #fff7e6;

  border-left: 5px solid #eaa317;

  color: #333;

  font-size: 22px;
  font-weight: bold;

  line-height: 1.6;
}

/* ==========================================================
   本文
   ========================================================== */

.site-policy-item p {
  margin: 0 0 25px;

  color: #333;

  font-size: 16px;

  line-height: 2;
}

.site-policy-item p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   箇条書き
   ========================================================== */

.site-policy-item ul {
  margin: 0 0 25px;

  padding-left: 30px;

  list-style-type: disc;
}

.site-policy-item li {
  margin-bottom: 10px;

  padding-left: 5px;

  color: #333;

  font-size: 16px;

  line-height: 1.9;
}

.site-policy-item li:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   箇条書きのマーカー
   ========================================================== */

.site-policy-item li::marker {
  color: #eaa317;

  font-size: 0.8em;
}

/* ==========================================================
   PC表示
   ========================================================== */

@media screen and (min-width: 769px) {
  .site-policy-container {
    min-height: 500px;
  }
}

/* ==========================================================
   スマートフォン
   ----------------------------------------------------------
   TOPページの見出しと同じサイズに統一
   ========================================================== */

@media screen and (max-width: 768px) {
  /* ========================================================
     メイン
     ======================================================== */

  main {
    padding-top: 90px;
  }

  /* ========================================================
     ページタイトル内部
     ======================================================== */

  .site-policy-visual-inner {
    width: 100%;

    padding: 45px 20px 50px;

    box-sizing: border-box;
  }

  /* ========================================================
     英語タイトル
     ======================================================== */

  .site-policy-en {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.18em;

    line-height: 1.5;
  }

  /* ========================================================
     日本語タイトル
     ======================================================== */

  .site-policy-visual h2 {
    width: 100%;

    font-size: 28px;
    font-weight: 600;

    letter-spacing: 0.08em;

    line-height: 1.5;
  }

  /* ========================================================
     オレンジライン
     --------------------------------------------------------
     TOPページのスマホ版と同じ
     ======================================================== */

  .site-policy-visual h2::after {
    width: 42px;
    height: 2px;

    margin-top: 17px;
  }

  /* ========================================================
     本文コンテナ
     ======================================================== */

  .site-policy-container {
    width: 100%;

    max-width: none;

    padding: 0 20px 70px;
  }

  /* ========================================================
     導入文
     ======================================================== */

  .site-policy-lead {
    margin-bottom: 45px;

    font-size: 14px;

    line-height: 1.9;
  }

  .site-policy-lead p {
    margin-bottom: 15px;
  }

  /* ========================================================
     各項目
     ======================================================== */

  .site-policy-item {
    margin-bottom: 45px;
  }

  /* ========================================================
     見出し
     ======================================================== */

  .site-policy-item h3 {
    margin-bottom: 20px;

    padding: 11px 14px;

    border-left-width: 4px;

    font-size: 17px;

    line-height: 1.6;
  }

  /* ========================================================
     本文
     ======================================================== */

  .site-policy-item p {
    margin-bottom: 18px;

    font-size: 14px;

    line-height: 1.9;
  }

  /* ========================================================
     箇条書き
     ======================================================== */

  .site-policy-item ul {
    margin-bottom: 20px;

    padding-left: 25px;
  }

  .site-policy-item li {
    margin-bottom: 8px;

    padding-left: 3px;

    font-size: 14px;

    line-height: 1.8;
  }
}