@charset "utf-8";


/*項目分けは下記*/

/*=======================================
　特大項目
====================================== */

/*------------------------------
　大項目
----------------------------- */

/*----- 中項目 -----*/

/* 小項目 */



/*=======================================
　全体設定
====================================== */


/*------------------------------
　フォントサイズ
------------------------------ */

/*ルートのフォントのサイズ*/
/*基本はフォントサイズにはremを使用。640px-320pxの間で5段階（画面幅60px区切り、20%ずつの縮小）で切り替わるようにする*/
html {
  /*overflow-x: hidden;*/
  font-size: 10px;
}

@media screen and (max-width: 580px) {
  html {
    font-size: 9px;
  }
}

@media screen and (max-width: 520px) {
  html {
    font-size: 8px;
  }
}

@media screen and (max-width: 460px) {
  html {
    font-size: 7px;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 6px;
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: 5px;
  }
}

/*全体のデフォルトのフォント・サイズ・色・行間*/
body {
  color: #000;
  font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*通常使うゴシック*/
  /*font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  /*丸ゴシック系*/
  font-size: 1.6rem;
  line-height: 1.2;
  /*font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", Meiryo, serif;*/
  /*明朝系*/
  /*font-family: YuGothic,"游ゴシック",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  zoom: 1;*/
  /*游ゴシック系*/

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 640px) {
  body {
    font-size: 2.4rem;
  }
}

/*テキストをよく入れるものに対して共通のline-height設定*/
dt,
dd,
p {
  line-height: 1.6;
}

/*line-heightを1にしておかないと
画像にリンクを貼った際隙間ができることがあるので*/
a {
  line-height: 1;
}



/*------------------------------
　表示の切り替えでまとめて隠すもの・表示するもの
------------------------------ */

/*----- PCサイズのとき非表示 -----*/
.pc_hide {
  display: none !important;
}


/*----- スマートフォンサイズのとき非表示 -----*/
@media screen and (max-width: 640px) {
  .pc_hide {
    display: block !important;
  }

  br.pc_hide {
    display: inline !important;
  }

  .sp_hide {
    display: none !important;
  }
}


/*------------------------------
　スマホ時とPCサイトタップON/OFF切り替え
------------------------------ */
/*----- PCサイズのとき -----*/
.pointer_events_switch {
  pointer-events: none;
}

.pointer_events_switch a {
  text-decoration: none;
}

/*----- スマートフォンサイズのとき -----*/
@media screen and (max-width: 640px) {
  .pointer_events_switch {
    pointer-events: auto;
  }

  .pointer_events_switch a {
    text-decoration: underline;
  }
}


/*------------------------------
　サイト幅（タブレット時隙間防止）
------------------------------ */

/*----- 幅1220px -----*/
body {
  overflow: auto;
  position: relative;
  min-width: 1220px;
  /*ページ幅に合わせて変更*/
  background: #fff;
}

/*共通のページ幅*/
.basic_contents_width {
  width: 1220px;
  /*ページ幅に合わせて変更*/
  margin: 0 auto;
}

/*狭めの共通のページ幅（ヘッダー等に一部使用）*/
.basic_contents_width_small {
  width: 1180px;
  /*ページ幅に合わせて変更*/
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  body {
    min-width: 0;
    background: #fff;
  }

  .basic_contents_width,
  .basic_contents_width_small {
    overflow: hidden;
    width: 92.5%;
    margin: 0 auto;
  }
}


/*------------------------------
　float解除（micro clearfix）
全体に使いまわすものはまとめて解除
他は基本的にはoverflow:hidden;を使用。
------------------------------ */
.basic_contents_width::before,
.basic_contents_width::after,
.basic_contents_width_small::before,
.basic_contents_width_small::after,
.contents_main::before,
.contents_main::after,
.contents_section::before,
.contents_section::after,
.paragraph::before,
.paragraph::after,
.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

.basic_contents_width::after,
.basic_contents_width_small::after,
.contents_main::after,
.contents_section::after,
.paragraph::after,
.clearfix::after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.basic_contents_width,
.basic_contents_width_small,
.contents_main,
.contents_section,
.paragraph,
.clearfix {
  zoom: 1;
}


/*------------------------------
　リンク
------------------------------ */

/*----- リンク（スタイル未適用時） -----*/
a,
a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*画像リンクホバー*/
a:hover>img {
  opacity: .8;
  transition: .3s;
}

/*アンダーライン有リンク*/
.link_underline {
  text-decoration: underline;
}

.link_underline:hover {
  text-decoration: none;
}

/*----- アンカーリンク -----*/
.link_page_anchor li {
  display: inline-block;
  margin: 0 20px 0 0;
  line-height: 1;
}

.link_page_anchor a {
  font-size: 1.2rem;
  text-decoration: none;
  vertical-align: top;
}

.link_page_anchor li a:before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 5px 0 0;
  background: url(../images/template/link_page_anchor.png) no-repeat left center;
  background-size: cover;
  vertical-align: top;
  content: "";
}

@media screen and (max-width: 640px) {
  .link_page_anchor li {
    display: block;
    margin: 0 2% 2% 0;
  }

  .link_page_anchor a {
    font-size: 2.2rem;
  }
}

/*----- PDFリンク -----*/
.link_pdf {
  color: #cd170e;
  text-decoration: none;
}

.link_pdf:after {
  display: inline-block;
  width: 16px;
  height: 20px;
  margin: 0 0 0 5px;
  background: url(../images/template/link_pdf.png) no-repeat left center;
  content: "";
}

/*----- テキストリンク -----*/
.link_txt {
  color: #cd170e;
  text-decoration: none;
}

.link_txt:before {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 5px 0 0;
  background: url(../images/template/link_txt.png) no-repeat left bottom;
  content: "";
}

/*----- 別ウィンドウリンク -----*/
.link_openwindow {
  color: #cd170e;
  text-decoration: none;
}

.link_openwindow:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 0 0 5px;
  background: url(../images/template/link_openwindow.png) no-repeat left center;
  content: "";
}

/*----- 装飾リンク共通 -----*/
.link_page_anchor li a:hover,
.link_pdf:hover,
.link_txt:hover,
.link_openwindow:hover {
  text-decoration: underline;
}

.link_page_anchor li a:visited,
.link_pdf:visited,
.link_txt:visited,
.link_openwindow:visited {
  color: #cd170e;
}

/*------------------------------
　見出し
※タグに直接スタイルを記載しない形にしてるので、コーディングの際注意が必要
------------------------------ */
.title_basic_h2 {
  clear: both;
  margin: 0 0 30px;
  padding: 20px;
  border-top: 1px solid #cd170e;
  border-bottom: 2px solid #cd170e;
  font-size: 2.2rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .title_basic_h2 {
    margin: 0 0 7%;
    padding: 3%;
    font-size: 3.1rem;
  }
}

.title_basic_h3 {
  clear: both;
  margin: 0 0 30px;
  padding: 9px 16px;
  border-left: 4px solid #cd170e;
  font-size: 2.1rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .title_basic_h3 {
    margin: 0 0 7%;
    padding: .8% 2.5%;
    font-size: 3rem;
  }
}

.title_basic_h4 {
  clear: both;
  margin: 0 0 30px;
  padding: 12px 16px;
  border-left: 4px solid #cd170e;
  background: #f5f5f5;
  font-size: 1.6rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .title_basic_h4 {
    margin: 0 0 7%;
    padding: 2.2%;
    font-size: 2.8rem;
  }
}

.title_basic_h5 {
  clear: both;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-bottom: 1px solid #bbb;
  border-left: 4px solid #cd170e;
  font-size: 1.4rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .title_basic_h5 {
    margin: 0 0 7%;
    padding: 2.2%;
    font-size: 2.4rem;
  }
}

.title_basic_h6 {
  clear: both;
  margin: 0 0 15px;
  padding: 12px 16px;
  background: url(../images/template/title_basic_h6.png) no-repeat left 5px center;
  font-size: 1.4rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .title_basic_h6 {
    padding: 2.2% 16px;
    font-size: 2.4rem;
  }
}

.title_basic_h3,
.title_basic_h4,
.title_basic_h5,
.title_basic_h6 {
  line-height: 1.2;
}

/*hタグ内に入れる補足テキスト用*/
.title_note {
  display: block;
  margin: 5px 0 0;
  font-size: 45%;
  font-weight: normal;
}

/*------------------------------
　画像位置・装飾
------------------------------ */
/*----- display属性変更 -----*/
.disp_block {
  display: block;
}

.disp_inline {
  display: inline;
}

.disp_inlineblock {
  display: inline-block;
}

/*----- floatさせた画像の次のテキストを回り込みさせたくないとき -----*/
.release_txt_overflow {
  overflow: hidden;
}

/*----- 右寄せ・左寄せ・中央寄せ・装飾用のフレーム -----*/
.img_left {
  float: left;
  margin: 0 20px 20px 0;
}

.img_right {
  float: right;
  margin: 0 0 20px 20px;
}

.img_center {
  margin: 0 auto 20px;
  text-align: center;
}

.img_center img {
  display: inline-block;
  width: auto;
}

img.img_frame {
  padding: 2px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

/*→寄せ左寄せの共通スタイルよりサイズを大きめにしたいとき*/
.img_55per {
  max-width: 55%;
}

.img_55per img {
  width: 100%;
}

.img_left,
.img_right {
  max-width: 45%;
}

.img_left img,
.img_right img {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 640px) {
  img {
    max-width: 100%;
  }

  /* 右寄せ・左寄せの画像を中央寄せに */
  .img_left,
  .img_right {
    float: none;
    width: 100%;
    margin: 0;
  }

  .img_55per {
    max-width: 100%;
  }

  .img_left img,
  .img_right img,
  .img_center img {
    max-width: 100%;
    width: auto;
  }

  .img_left,
  .img_right,
  .img_center {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 10px;
    text-align: center;
  }

  /* 一定の幅を保ちたい場合 */
  img.img_scale {
    width: 60%;
  }

  /* 元画像を引き延ばしても100％表示が必要な場合 */
  img.img_fit {
    width: 100%;
  }
}

/*------------------------------
　マージン設定
------------------------------ */
.mb30 {
  margin-bottom: 3em;
}

/*------------------------------
　テキスト設定・装飾
------------------------------ */

/*----- pタグごとに1行空ける -----*/
.paragraph p {
  margin-bottom: 1em;
}

.paragraph p:last-child {
  margin-bottom: 0;
}

/*----- テキスト装飾 -----*/
/*大きさ*/
.txt_xxl {
  font-size: 3rem;
}

.txt_xl {
  font-size: 2rem;
}

/* h1〜h3のテキストに使用するテキストサイズ */
.txt_l {
  font-size: 1.6rem;
}

/* h4〜h5のテキストに使用するテキストサイズ */
.txt_s {
  font-size: 1.4rem;
}

/* h6のテキストに使用するテキストサイズ */
.txt_xs {
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .txt_xxl {
    font-size: 4.6rem;
  }

  .txt_xl {
    font-size: 3.8rem;
  }

  .ulst.txt_xl {
    font-size: 2.8rem;
  }

  .txt_l {
    font-size: 3rem;
  }

  /* h4〜h5のテキストに使用するテキストサイズ */
  .txt_s {
    font-size: 2.4rem;
  }

  /* h6のテキストに使用するテキストサイズ */
  .txt_xs {
    font-size: 2rem;
  }
}

/*行間*/
.txt_lineheightA {
  line-height: 1.5em;
}


/*色*/
/*企業カラーの赤のカラーコードを指定*/
.txt_atn {
  color: #cd170e;
}

.txt_pointA {
  color: #a59ffc;
}

/*太さ*/
.txt_bold {
  font-weight: 900;
}

.txt_normal {
  font-weight: normal;
}

/*位置*/
.txt_center {
  text-align: center;
}

.txt_right {
  text-align: right;
}

.txt_l {
  font-size: 2rem;
}

/*書体*/
.txt_signature {
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", Meiryo, serif;
  font-size: 140%;
}


/*レスポンシブ記述*/
@media screen and (min-width: 641px) {

  /*PCのときだけセンター揃え*/
  .txt_center_pc {
    text-align: center;
  }

  /*PCのときだけ右揃え*/
  .txt_right_pc {
    text-align: right;
  }
}

/*レスポンシブ記述*/
@media screen and (max-width: 640px) {

  /*スマホのときだけセンター揃え*/
  .txt_center_sp {
    text-align: center;
  }

  /*スマホのときだけ右揃え*/
  .txt_right_sp {
    text-align: right;
  }
}

/*----- 2列に同じ大きさの画像を並べる -----*/
.img_two_rows {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: -10px;
}

.img_two_rows li {
  box-sizing: border-box;
  max-width: 406px;
  margin-bottom: 10px;
  padding: 10px 10px 20px;
  background: #f3f3f3;
}

.img_two_rows li img {
  display: block;
  width: 100%;
}

.img_two_rows .img_caption {
  padding: 20px 0 0;
  font-size: 1.8rem;
  text-align: center;
}

.img_two_rows .img_caption span {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid #cd170e;
}

@media screen and (max-width: 640px) {
  .img_two_rows li {
    max-width: 100%;
    width: 100%;
    padding: 3% 3% 5%;
  }

  .img_two_rows .img_caption {
    padding: 3% 0 0;
  }

  .img_three_rows .img_caption p {
    font-size: 2.4rem;
  }

  .img_caption p {
    font-size: 2.8rem;
  }
}


/*----- 3列に同じ大きさの画像を並べる -----*/

.img_three_rows {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: -10px;
}

.img_three_rows li {
  box-sizing: border-box;
  width: 32%;
  margin-bottom: 10px;
  padding: 10px 10px 20px;
  background: #f3f3f3;
}

.img_three_rows li img {
  display: block;
  width: 100%;
}

.img_three_rows .img_caption {
  padding: 20px 0 0;
  font-size: 1.2rem;
}

@media screen and (max-width: 640px) {
  .img_three_rows li {
    display: flex;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    padding: 3.75%;
  }

  .img_three_rows li img {
    width: 42.2%;
    height: 100%;
  }

  .img_three_rows .img_caption {
    padding: 0 3%;
  }

  .img_three_rows .img_caption p {
    font-size: 2.4rem;
  }
}


/*------------------------------
　レイアウト用のボックス
------------------------------ */

/*----- 画像周りのテキストの回り込み解除用ボックス -----*/
.wraparound_reset_box {
  overflow-y: hidden;
}

/*----- 幅半分にして横並びにするボックス -----*/
.half_box {
  width: 49%;
}

.half_box:nth-child(odd) {
  float: left;
}

.half_box:nth-child(even) {
  float: left;
}

@media screen and (max-width: 640px) {

  .layout_box_half:first-child,
  .layout_box_half:last-child {
    float: none;
  }
}



/*------------------------------
　基本テーブル
------------------------------ */

/*----- 通常テーブル -----*/
/*基本使用するテーブル*/

/*上部に見出しがあるテーブル*/
.tblA {
  table-layout: fixed;
  width: 100%;
}

.tblA th,
.tblA td {
  padding: 10px 5px;
  border: 1px solid #898989;
  font-size: 1.4rem;
  font-weight: normal;
  vertical-align: middle;
}

.tblA thead th {
  border-bottom: 2px solid #cd170e;
  background: #3c3c3c;
  color: #fff;
}

@media screen and (max-width: 640px) {

  .tblA th,
  .tblA td {
    padding: 3% 1%;
    font-size: 2rem;
  }
}

/*左に見出しがあるテーブル*/
.tblB {
  table-layout: fixed;
  width: 100%;
}

.tblB th,
.tblB td {
  padding: 20px;
  border: 1px solid #898989;
  /* font-size: 1.6rem; */
  font-weight: normal;
}

.tblB th {
  border-right: 2px solid #cd170e;
  background: #3c3c3c;
  color: #fff;
}

@media screen and (max-width: 640px) {

  .tblB th,
  .tblB td {
    padding: 3% 1%;
  }
}



/*----- 枠線なしのシンプルなテーブル（主にレイアウト用） -----*/
.tbl_simple {
  border: none;
}

.tbl_simple th {
  font-weight: 100;
  text-align: left;
}

/*------------------------------
　ボタン
------------------------------ */
/*文章中のボタンを囲うエリア*/
.txt_btn_area {
  margin: 30px 0 0;
}

/*----- ボタン共通 -----*/
.btn_base {
  display: inline-block;
  min-width: 300px;
  max-width: 300px;
  margin: 0 0 1em;
  transition: .3s;
}

.btn_base:hover {
  opacity: .8;
}

.btn_base>a,
.btn_base>span {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 0;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn_base>a>span,
.btn_base>span>span {
  display: inline-block;
  padding: 0 0 0 18px;
  background: url(../images/template/btn_baseicon.png) no-repeat left center;
}


@media screen and (max-width: 640px) {
  .btn_base {
    min-width: 100%;
    max-width: 100%;
  }

  .btn_base>a,
  .btn_base>span {
    padding: 8% 1%;
    font-size: 2.4rem;
  }
}

/*----- ボタンAタイプ -----*/
.btn_base.btnA {
  background: #000;
}

/*----- ボタンBタイプ -----*/
.btn_base.btnB {
  background: #616161;
}

/*----- ボタンCタイプ -----*/
.btn_base.btnC {
  min-width: 400px;
  max-width: 400px;
  background: #cd170e;
}

.btn_base.btnC>a,
.btn_base.btnC>span {
  padding: 24px 0;
}

/*----- ボタンDタイプ -----*/
.btn_base.btnD {
  background: #cd170e;
}

@media screen and (max-width: 640px) {

  .btnA,
  .btnB,
  .btnD {
    min-width: 48%;
    max-width: 48%;
    width: 48%;
  }

  .btn_base.btnC {
    display: block;
    min-width: 90%;
    max-width: 90%;
    width: 90%;
    margin: 0 auto;
  }

  .btn_base.btnC>a,
  .btn_base.btnC>span {
    padding: 4% 1%;
  }
}


/*----- ボタン共通 -----*/
.btnE {
  display: inline-block;
  min-width: 200px;
  max-width: 300px;
  margin: 0 0 1em;
  background: #cd170e;
  transition: .3s;
}

.btnE:hover {
  opacity: .8;
}

.btnE>a,
.btnE>span {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btnE>a>span,
.btnE>span>span {
  display: inline-block;
  padding: 0 0 0 18px;
  background: url(../images/template/btn_baseicon.png) no-repeat left center;
}


@media screen and (max-width: 640px) {
  .btnE {
    min-width: 100%;
    max-width: 100%;
  }

  .btnE>a,
  .btnE>span {
    padding: 4% 1%;
  }
}



/*------------------------------
　リスト
------------------------------ */

/*----- 順不同リスト -----*/
.ulst {
  list-style: disc;
  padding-left: 2em;
  margin-top: 10px;
}

.ulst>li {
  margin-bottom: 15px;
  line-height: 1.2;
}

.ulst>li:last-child {
  margin-bottom: 0;
}

.ulst>li li {
  margin-bottom: 5ppx;
}

/*----- 順不同リスト（横並び） -----*/
.ulst_side {
  margin-left: 19px;
}

.ulst_side>li {
  display: inline-block;
  margin: 0 30px 15px 0;
  text-indent: -19px;
  line-height: 1.2;
}

.ulst_side>li::before {
  color: #c0db99;
  content: "● ";
}

@media screen and (max-width: 640px) {
  .ulst_side>li {
    display: block;
    margin-right: 0;
  }
}

.ulst_side>li:last-child {
  margin-bottom: 0;
}


/*----- 序列リスト -----*/
.olst {
  margin: 0 0 0 25px;
}

.olst>li {
  list-style-type: decimal;
  margin-bottom: 10px;
  line-height: 1.2;
}

.olst>li:last-child {
  margin-bottom: 0;
}

/*----- 囲み数字つき序列リスト -----*/

.olstA li {
  box-sizing: border-box;
  position: relative;
  margin: 0 0 2%;
  padding: 0 0 0 1.6em;
  line-height: 1.6;
}

.olstA li:last-child {
  margin: 0;
}

.olstA_num {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  padding: 0 1px 3px;
  border-radius: 3px;
  background: #d80d0d;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  vertical-align: top;
  line-height: 1em;
}

@media screen and (max-width: 640px) {
  .olstA_num {
    font-size: 2.4rem;
  }
}

.olstA_sec {
  clear: both;
  display: block;
  position: absolute;
  left: 0;
  margin: -5px 0 5px 0;
  padding: 5px;
  border-radius: 3px;
  background: #d80d0d;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1em;
}

@media screen and (max-width: 640px) {
  .olstA_sec {
    font-size: 2.4rem;
  }
}

/*----- 順不同リスト -----*/
.ulpp {
  list-style: disc;
  padding-left: 2em;
  margin: 15px 0;
}

.ulpp>li {
  margin-bottom: 10px;
  line-height: 1.2;
  padding-left: 0px;
}

.ulpp>li:last-child {
  margin-bottom: 0;
}

.ulpp>li li {
  margin-bottom: 5px;
}

/*----- 定義リスト -----*/
.dlst>dt {
  color: #999;
  font-weight: 700;
  letter-spacing: .1em;
}

.dlst>dt::before {
  color: #b2b0d6;
  content: "● ";
}

.dlst>dd {
  margin-bottom: 10px;
  padding-left: 1.5em;
}

.dlst>dd:last-child {
  margin-bottom: 0;
}

/*----- 間に▼などを挟んだフローなどに使用するリスト -----*/
.dlst_arrow>dt {
  padding: 5px 15px;
  border: 1px solid #ffbb72;
  border-top: none;
  background: #ffbb72;
  font-weight: 700;
}

.dlst_arrow>dd {
  padding: 10px;
  border: 1px solid #ffbb72;
}

.dlst_arrow>dd.arrow {
  border: none;
  text-align: center;
}

/*----- 上下のテキストとの間隔 -----*/
.ulst+p,
p+.ulst,
.ulst_side p,
p .ulst_side,
.olst+p,
p+.olst,
.olstA+p,
p+.olstA,
.dlst+p,
p+.dlst,
.dlst_arrow+p,
p+.dlst_arrow {
  margin-top: 2em;
}

/*------------------------------
　装飾ボックス
------------------------------ */

div.deco_boxA {
  box-sizing: border-box;
  padding: 20px;
  background: #f3f3f3;
}

.deco_boxA_title {
  margin: 0 0 20px;
  padding: 0 0 020px;
  border-bottom: 1px solid #e1baba;
  font-size: 2rem;
}

div.deco_boxB {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #e1baba;
  background: transparent;
}

.deco_boxB_title {
  margin: 0 0 20px;
  padding: 0 0 020px;
  border-bottom: 1px solid #e1baba;
  font-size: 2rem;
}

@media screen and (max-width: 640px) {

  .deco_boxA_title,
  .deco_boxB_title {
    font-size: 2.8rem;
  }
}


/*------------------------------
　関連コンテンツ
------------------------------ */
.contents_field {
  padding: 40px 20px;
  background: #000;
}

.contents_field_title {
  margin: 0 0 40px;
  color: #fff;
  font-size: 2rem;
}

@media screen and (max-width: 640px) {
  .contents_section_field {
    background: #000;
  }

  .contents_field {
    padding: 0;
    padding: 10% 0;
  }

  .contents_field_title {
    margin: 0 0 6%;
    font-size: 3.6rem;
  }
}

.contents_field_lst {
  display: flex;
  justify-content: space-between;
}

.contents_field_lst li {
  width: 32%;
}

.contents_field_lst>li>a {
  display: block;
  padding: 40px 15px;
  background: url(../images/template/contents_field_icon.png) no-repeat left 20px center, #fff;
  text-align: center;
  transition: .3s;
}

.contents_field_lst>li>a:hover {
  opacity: .8;
}

.contents_field_lst_title {
  display: inline-block;
  color: #000;
  font-size: 2rem;
  font-weight: bold;
}

.contents_field_lst_title span {
  display: block;
  margin: 10px 0 0;
  color: #cd170e;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
}

@media screen and (max-width: 640px) {
  .contents_field_lst {
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
  }

  .contents_field_lst li {
    width: 100%;
    margin: 0 0 7%;
  }

  .contents_field_lst>li>a {
    padding: 5%;
    background: url(../images/template/contents_field_icon.png) no-repeat left 3% center, #fff;
  }

  .contents_field_lst li:last-child {
    margin: 0;
  }

  .contents_field_lst_title {
    font-size: 2.8rem;
  }

  .contents_field_lst_title span {
    font-size: 1.6rem;
  }
}


@media screen and (min-width: 641px) {
  .contents_section_field {
    margin: 0 0 60px;
  }
}

/*------------------------------
　ご挨拶、企業理念など
------------------------------ */
.contents_menu {
  padding: 20px 25px;
  background: #f3f3f3;
}


.contents_menu_lst {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 -15px;
}

.contents_menu_lst li {
  box-sizing: border-box;
  position: relative;
  width: 49%;
  margin: 0 0 15px;
  border-bottom: 3px solid #cd170e;
  background: #fff;
  text-align: center;
  transition: .3s;
}

.contents_menu_lst li:hover {
  opacity: .8;
}

.contents_menu_lst li>a {
  display: block;
  box-sizing: border-box;
  padding: 20px 20px 10px;
  color: 000;
  text-decoration: none;
  transform: .3s;
}

.contents_menu_lst_title {
  display: inline-block;
  margin: 0 0 40px;
  margin: 0 0 20px;
  color: #fff;
  color: #000;
  font-size: 2.2rem;
  font-size: 2rem;
  font-weight: bold;
}

.contents_menu_lst_title span {
  display: block;
  margin: 10px 0 0;
  color: #cd170e;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
}

.contents_menu_lst_txt {
  margin: 0 0 45px;
}

.contents_menu_lst_link {
  position: absolute;
  right: 20px;
  bottom: 10px;
  width: 100%;
  text-align: right;
}

.contents_menu_lst_link span {
  padding: 0 0 0 15px;
  background: url(../images/template/contents_menu_lst_link_icon.png) no-repeat left center;
  font-size: 1.2rem;
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .contents_section_menu {
    padding: 10% 0;
    background: #f3f3f3;
  }

  .contents_menu {
    padding: 0;
  }

  .contents_menu_lst {
    justify-content: center;
    margin: 0 auto -5%;
  }

  .contents_menu_lst li>a {
    padding: 5%;
  }

  .contents_menu_lst li {
    width: 100%;
    margin: 0 0 5%;
  }

  .contents_menu_lst_title {
    margin: 0 0 3%;
    font-size: 3.4rem;
  }

  .contents_menu_lst_title span {
    font-size: 2rem;
  }

  .contents_menu_lst_txt {
    margin: 0 0 5%;
  }

  .contents_menu_lst_link {
    font-size: 2rem;
  }
}

@media screen and (min-width: 641px) {
  .contents_section_menu {
    margin: 0 0 60px;
  }
}


/*------------------------------
　ヘッダ
------------------------------ */
header {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  background: #484848;
}

.header_info_pc {
  padding: 8px;
  background: #000;
}

.header_info_pc_lst {
  display: flex;
  justify-content: flex-end;
  float: right;
  width: 70%;
}

.header_info_pc_lst li {
  align-self: flex-end;
  margin-left: 10px;
  font-size: 1.1rem;
  line-height: 1;
}

.header_info_pc_lst a {
  color: #a7a7a7;
  text-decoration: none;
}

.header_info_pc_lst a:before {
  display: inline-block;
  margin: 0 5px 0 0;
  content: ">";
}

.header_info_pc_lst a:hover {
  text-decoration: underline;
}

.header_info_pc_lst.home_link {
  justify-content: flex-start;
  float: left;
  width: 20%;
}

@media screen and (max-width: 640px) {
  .header_info_pc {
    display: none;
  }

  header {
    border-top: 10px solid #000;
    background: transparent;
  }

  header .basic_contents_width {
    width: 100%;
    height: 100%;
  }
}


.header_logo {
  float: left;
  width: 154px;
  margin: 20px 0 0 5px;
  line-height: 1;
  transition: .3s;
}

.header_logo a {
  display: block;
  height: 48px;
  background: url(../images/template/header_logo.png) no-repeat left top;
  background-size: cover;
  font-size: 0;
  line-height: 0;
}

.header_logo a span {
  display: none;
}

.header_logo img {
  width: 100%;
}

.header_logo:hover {
  opacity: .7;
}

@media screen and (max-width: 640px) {
  .header_box {
    position: relative;
    padding: 3% 3%;
    background: #484848;
  }

  .header_logo {
    float: none;
    width: 24.1%;
    margin: 0;
  }

  .header_logo a {
    height: 0;
    padding-bottom: 31.2%;
  }
}

@media screen and (max-width: 480px) {
  .header_logo {
    float: none;
    width: 30%;
    margin: 0;
  }
}

@media screen and (max-width: 420px) {
  .header_logo {
    float: none;
    width: 35%;
    margin: 0;
  }
}



/*------------------------------
　グローバルナビ
------------------------------ */

/* Toggle Button */
#nav-toggle {
  display: none;
}

@media screen and (max-width: 640px) {
  #nav-toggle {
    display: block;
    position: absolute;
    z-index: 1;
    top: 35%;
    right: 3%;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  #nav-toggle div {
    position: relative;
  }

  #nav-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
  }

  #nav-toggle span:nth-child(1) {
    top: 0;
  }

  #nav-toggle span:nth-child(2) {
    top: 8px;
  }

  #nav-toggle span:nth-child(3) {
    top: 16px;
  }

  /* #nav-toggle 切り替えアニメーション */
  .menu_open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }

  .menu_open #nav-toggle span:nth-child(2) {
    left: 50%;
    width: 0;
  }

  .menu_open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
}

.gnavi_wrap {
  float: right;
  width: 1046px;
}

.gnavi {
  width: 100%;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}

.gnavi>li {
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 145px;
  height: 90px;
  border-right: 2px solid #484848;
  background: #3c3c3c;
  text-align: center;
  transition: .3s;
}

.gnavi>li:hover {
  background: #fff;
}

.gnavi>li:hover a {
  color: #000;
}

.gnavi>li>a {
  display: block;
  height: 100%;
  padding: 34px 0 30px;
  color: #fff;
  font-size: 1.35rem;
  text-decoration: none;
}

.gnavi>li>a>span {
  display: block;
  margin: 8px 0 0;
  color: #cd170e;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
}

@media screen and (max-width: 640px) {
  .gnavi_wrap {
    display: none;
    float: none;
    width: auto;
    height: 100%;
  }

  .gnavi>li {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #fff;
    opacity: .95;
    text-align: left;
  }

  .gnavi>li:first-child {
    border-top: 1px solid #fff;
  }

  .gnavi>li>a {
    padding: 2% 3%;
    font-size: 2.4rem;
  }

  .gnavi>li>a>span {
    font-size: 1.6rem;
  }

  .spmenu img {
    display: inline-block;
    width: 1.2rem;
    height: auto;
    margin: 0 0 0 5px;
  }

  /*メニュー表示時のオーバーレイ*/
  .menu_open .gnavi_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: #000;
    opacity: .60;
  }
}


/*------------------------------
　メインコンテンツ設定・配置
------------------------------ */
.contents_wrap {
  background: transparent;
}

@media screen and (min-width: 641px) {
  .contents_wrap {
    min-height: 700px;
  }
}

.contents_main {
  float: left;
  width: 840px;
}

.contents_section {
  margin: 0 0 60px 0;
  background: #fff;
}

.contents_section.subpage_title_img {
  margin: 0 0 20px;
  padding: 0;
}

.paragraph {
  margin: 0 0 40px 0;
}

.paragraph:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {

  .subpage_title .basic_contents_width,
  .contents_section .basic_contents_width,
  .contents_section_field .basic_contents_width,
  .contents_section_menu .basic_contents_width {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .basic_contents_width.subpage_main_wrap {
    width: 100%;
  }

  .contents_main {
    float: none;
    width: 100%;
    padding: 6% 0 0;
  }

  .contents_section {
    margin: 0 auto 12%;
  }


  .paragraph {
    margin: 0 auto 8%;
  }
}



/*------------------------------
　サイドメニュー
------------------------------ */
aside {
  float: right;
  width: 320px;
  margin-bottom: 30px;
}

@media screen and (max-width: 640px) {
  aside {
    width: 100%;
    margin: 0 0 10%;
  }
}

/*----- サブナビ -----*/
.aside_nav {
  display: none;
  border: 1px solid #cbcbcb;
  border-bottom: none;
  font-family: "NotoSansCJKjpRegular";
  font-size: 1.6rem;
}

/*bodyにつけるクラスと合わせ階層別で表示される*/
.ultimate .dir_ultimate,
.company .dir_company,
.business .dir_business,
.csr .dir_csr {
  display: block;
}


.aside_nav li {
  border-bottom: 1px solid #cbcbcb;
}

.aside_nav li:hover a {
  color: #cd170e;
}

.aside_nav a,
.aside_navB .aside_linknone {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 22px 15px 22px 45px;
  color: #000;
  text-decoration: none;
  transition: .3s;
}

.aside_nav a:hover .aside_linkinner {
  border-bottom: 1px solid #cd170e;
}

li.aside_navA {
  border-bottom: 2px solid #cd170e;
  background: #3c3c3c;
  transition: .3s;
}

li.aside_navA:hover {
  background: #666;
}

.aside_navA a {
  background: url(../images/template/aside_navA.png)no-repeat left 15px center;
  color: #fff;
  transform: .3s;
}

li.aside_navA:hover a {
  color: #fff;
}

.aside_navB {
  background: #fff;
}

.aside_navB .aside_linknone {
  background: url(../images/template/aside_navB.png)no-repeat left 15px center;
}

.aside_navC {
  background: #f5f5f5;
}

.aside_navC a {
  padding-left: 60px;
  background: url(../images/template/aside_navC.png)no-repeat left 30px center;
}

.aside_navD {
  background: #fff;
}

.aside_navD a {
  background: url(../images/template/aside_navD.png)no-repeat left 15px center;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .aside_nav {
    font-size: 2.8rem;
  }

  .aside_nav a,
  .aside_nav .aside_linknone {
    padding: 4% 3% 4% 10%;
    background-position: left 3% center;
  }

  .aside_navC a {
    padding-left: 12%;
    background-position: left 6% center;
  }
}

/*------------------------------
　pagetopボタン
------------------------------ */
.pagetop {
  display: inline-block;
  position: fixed;
  right: 30px;
  bottom: 150px;
  width: 60px;
  height: 60px;
}

.pagetop:hover img {
  transform: translateY(-10px);
}

.pagetop img {
  width: 100%;
  transition: all 300ms 0s ease;
}

@media screen and (max-width: 640px) {
  .pagetop {
    right: 5%;
    bottom: 5%;
    width: 12%;
    height: auto;
  }
}

/*------------------------------
　フッタ
------------------------------ */
footer {
  padding: 35px 0 40px;
  background: #000;
}

footer .basic_contents_width {
  box-sizing: border-box;
  padding: 0 40px;
}

@media screen and (max-width: 640px) {
  footer {
    padding: 10% 0 3%;
    background: #000;
  }

  footer .basic_contents_width {
    width: 90%;
    padding: 0;
  }
}

/*----- フッターロゴ -----*/
.footer_logo {
  float: left;
  width: 154px;
}

.footer_logo img {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .footer_logo {
    box-sizing: border-box;
    float: none;
    width: 100%;
    margin: 10% auto 3%;
    padding: 3% 34% 0 2%;
    border-top: 1px solid #fff;
    text-align: center;
  }
}

/*----- フッターメニュー -----*/
.footer_menu {
  float: right;
  width: 880px;
  margin: 20px 0 0;
}

.footer_nav {
  clear: both;
  width: 880px;
  font-size: 0;
  text-align: right;
}

.footer_nav>li {
  display: inline-block;
  margin: 0 20px 0 0;
  font-size: 1.4rem;
  line-height: 1.2;
}

.footer_nav>li:before {
  display: inline-block;
  margin-right: 5px;
  color: #cd170e;
  content: ">";
}

.footer_nav>li>a {
  color: #fff;
  transition: .3s;
}

@media screen and (max-width: 640px) {

  .footer_menu,
  .footer_nav {
    float: none;
    width: 100%;
  }

  .footer_menu {
    float: none;
    width: 100%;
    margin: 0;
  }

  .footer_nav>li {
    display: block;
    margin: 0 0 1em;
    font-size: 2.4rem;
    text-align: left;
  }
}


/*----- コピーライト -----*/
.copyright {
  clear: both;
  padding: 35px 0 0;
  float: left;
}

.copyright p {
  color: #fff;
  font-size: 1.4rem;
}

.copyright a {
  color: #fff;
  text-decoration: none;
}

.pisms {
  float: right;
  padding: 20px 20px 0 0;
}

@media screen and (max-width: 640px) {
  .copyright {
    float: none;
    clear: both;
    padding: 0;
  }

  .pisms {
    float: none;
    clear: both;
  }
}

/*------------------------------
　googleMap
------------------------------ */

/*----- iframe埋め込み版（普通の埋め込み） -----*/
#mapcanvas {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 300px;
  /*※マップの高さ*/
  border: 1px solid #ccc;
  background: #ececec;
  /*※読み込みまでの間の背景色*/
}

#mapcanvas iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

#mapcanvas:hover {
  cursor: pointer;
}

/*------------------------------
　医院概要
------------------------------ */
.summary_detail {
  float: left;
  width: 340px;
}

.dlst_summary>dt {
  margin: 0 0 5px;
  border-bottom: 1px solid #002f6f;
  color: #002f6f;
  font-weight: 700;
}

.dlst_summary>dt.border_none {
  margin: 0;
  border-bottom: none;
}

.dlst_summary>dd {
  margin-bottom: 30px;
}

.summary_map {
  float: right;
  width: 350px;
}

.summary #mapcanvas {
  padding-bottom: 350px;
  /*※マップの高さ*/
}


/*=======================================
　トップページ（bodyに「.index」）
====================================== */

/*------------------------------
　キービジュアル
------------------------------ */
.keyvisual {
  width: 100%;
  min-height: 450px;
  max-height: 800px;
  border-bottom: 3px solid #cd170e;
  background: url(../images/top/keyvisual01.jpg) no-repeat center bottom;
  background-size: cover;
}

.keyvisual_txt {
  margin: 95px 0 20px;
  float: left;
}

@media screen and (max-width: 640px) {
  .keyvisual {
    min-height: auto;
  }

  .keyvisual_txt {
    width: 80%;
    margin: 13% 0;
  }

  .keyvisual img {
    width: 100%;
    float: left;
    padding-bottom: 20px;
  }
}

/*------------------------------
　Facebook
------------------------------ */
.FB_link {
  position: relative;
  overflow: hidden;

  display: inline-block;
  float: right;
  margin: 50px 0px 30px 0px;
  width: 110px;
}

@media screen and (max-width: 640px) {
  .FB_link {
    width: 10%;
    margin: 10% 10% 10% 0;
  }
}


/*------------------------------
　note
------------------------------ */
.WTL_embed {
  position: relative;
  display: inline-block;
  float: right;
  margin: 200px 30px 50px 0;

}

.WTL_embed #rss-feed {
  width: 300px;
  min-height: 360px;
  background: #FFF;
  padding: 10px;
  border-radius: 10px;
}

.WTL_embed #rss-feed div {
  margin: 0 0 20px 0;
}

.WTL_embed #rss-feed div p {
  font-size: 0.8em;
  color: #666;
}

@media screen and (max-width: 640px) {
  .WTL_embed {
    margin: 0px 5% 30px 2%;
  }
}



/*------------------------------
　エクスモーションの強み
------------------------------ */
.index_topics {
  padding: 0 0 20px;
  border-top: 3px solid #3c3c3c;
  background: url(../images/top/index_topics_bg.jpg) no-repeat center top;
  background-size: cover;
}

@media screen and (max-width: 640px) {
  .index_topics {
    padding: 0;
    background: url(../images/top/index_topics_bg.jpg) no-repeat left top;
    background-size: auto 50%;
  }
}

.index_topics_title {
  margin: 70px 0 0;
  color: #fff;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
}

.index_topics_txt {
  margin: 40px 0 0;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  line-height: 2em;
}

.index_topics_txt .txt_atn {
  text-shadow: 0 2px 2px #fff, 0 0 2px #fff, 2px 0 2px #fff, 0 -2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff;
  /*display: inline-block;
background: rgba(255,255,255,.5);*/
}

@media screen and (max-width: 640px) {
  .index_topics_title {
    margin: 10% 0 0;
    font-size: 3.6rem;
  }

  .index_topics_txt {
    margin: 6% 0 0;
    font-size: 2.8rem;
    line-height: 1.6;
  }
}

/*----- エクスモーションの強み　画像 -----*/
.index_topic_item {
  display: flex;
  justify-content: space-around;
  width: 1220px;
  margin: 70px auto 0;
}

.index_topic_item li {
  display: block;
  overflow: hidden;
  width: 31%;
  background: #fff;
  color: #fff;
  text-decoration: none;
}

.index_topic_item li:hover {
  transition: .3s;
}

.index_topic_item_img {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.index_topic_item_img img {
  width: 100%;
  margin: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.index_topic_item_img:hover img {
  opacity: .9;
  transform: scale(1.1);
}

.index_topic_item_txt {
  position: absolute;
  top: 23%;
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #fff;
  font-size: 2.7rem;
  text-align: center;
}

.index_topic_item_txt::after {
  display: block;
  width: 1px;
  height: 55px;
  margin: 0 auto;
  background: #fff;
  content: "";
}

.index_topic_item_txt span {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 4rem;
}

@media screen and (max-width: 640px) {
  .index_topic_item {
    display: block;
    width: 100%;
    margin: 10% 0 0;
    padding: 8% 0;
    background: #000;
  }

  .index_topic_item li {
    display: block;
    overflow: hidden;
    width: 90%;
    margin: 0 auto 5%;
    background: transparent;
  }

  .index_topic_item_img {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .index_topic_item_txt {
    font-size: 3rem;
    line-height: 1.2;
  }
}

@media screen and (max-width: 570px) {
  .index_topic_item_txt::after {
    height: 20px;
  }
}



/*------------------------------
　エクスモーションについて
------------------------------ */
.index_about {
  padding: 60px 0 50px;
  background: #c6c6c6;
}

.index_about a {
  text-decoration: none;
}

.index_about_title {
  padding: 0 0 50px;
  font-size: 3.6rem;
  text-align: center;
}

.index_about .null {
  background-color: transparent;
}

@media screen and (max-width: 640px) {
  .index_about {
    padding: 10% 0;
  }

  .index_about_title {
    padding: 0 0 8%;
    font-size: 3.6rem;
  }
}


/*----- エクスモーションについて　画像 -----*/
.index_about_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1060px;
  margin: 0 auto 4em;
}

.index_about_item li {
  position: relative;
  width: 32%;
  margin: 0 0 20px;
  padding: 0 0 25px;
  background: #fff;
}

.index_about_item li .icon {
  position: absolute;
  top: -20px;
  right: 10px;
  z-index: 2;
}

.index_about_item li:nth-last-child(3),
.index_about_item li:nth-last-child(2),
.index_about_item li:last-child {
  margin: 0;
}

.index_about_item_img {
  overflow: hidden;
  position: relative;
}

.index_about_item_img img {
  width: 100%;
  margin: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.index_about_item>li:hover img {
  opacity: .95;
  transform: scale(1.1);
}

.index_about_item_txt {
  margin: 25px 0 0;
  color: #000;
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
}

.index_about_item_txt span {
  display: block;
  color: #cd170e;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .index_about_item {
    width: 90%;
    margin: 0 auto 10%;
  }

  .index_about_item li {
    width: 48%;
    padding: 0 0 5%;
  }

  .index_about_item li:nth-last-child(3) {
    margin: 0 0 20px;
  }

  .index_about_item_txt {
    margin: 5% 0 0;
    font-size: 2.2rem;
  }

  .index_about_item_txt span {
    font-size: 1.6rem;
  }
}


/*----- バナー -----*/
.index_about_bnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1060px;
  margin: 20px auto 50px;
}

.index_about_bnr li {
  width: 48%;
  background: #fff;
}

.index_about_bnr li>a {
  display: flex;
  justify-content: space-between;
}

.index_about_bnr_img {
  overflow: hidden;
  position: relative;
  width: 64.6%;
}

.index_about_bnr_img img {
  width: 100%;
  margin: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.index_about_bnr>li:hover img {
  opacity: .95;
  transform: scale(1.1);
}

.index_about_bnr_txt {
  display: flex;
  width: 35.4%;
  color: #000;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.index_about_bnr_txt p {
  align-self: center;
  margin: 0 auto;
  line-height: 1.2;
}

.index_about_bnr_txt span {
  display: block;
  margin: 8px 0 0;
  color: #cd170e;
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
}

@media screen and (max-width: 640px) {
  .index_about_bnr {
    width: 90%;
    margin: 0 auto;
  }

  .index_about_bnr li {
    width: 100%;
    margin: 20px 0 0;
  }

  .index_about_bnr_img {
    width: 51.8%;
  }


  .index_about_bnr_txt {
    width: 48.2%;
    font-size: 2.2rem;
  }

  .index_about_bnr_txt span {
    font-size: 1.6rem;
  }
}


/*------------------------------
　ニュースリリース
------------------------------ */
.index_news {
  padding: 55px 0 60px;
  background: #565757;
}

.index_news_title {
  color: #fff;
  font-size: 3.6rem;
  text-align: center;
}

.index_news_tbl {
  width: 1024px;
  margin: 55px auto;
}

.index_news_tbl th,
.index_news_tbl td {
  padding: 20px 0;
  border: 1px dashed #fff;
  border-right: none;
  border-left: none;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: left;
}

.index_news_tbl th {
  width: 7em;
  white-space: nowrap;
}

.index_news_tbl a {
  color: #fff;
  text-decoration: none;
}

.index_news_tbl a:hover {
  color: #fff;
  text-decoration: underline;
}

@media screen and (max-width: 640px) {
  .index_news_title {
    font-size: 3.6rem;
    text-align: center;
  }

  .index_news {
    padding: 10% 0;
    background: #565757;
  }

  .index_news_tbl {
    width: 90%;
    margin: 8% auto;
  }

  .index_news_tbl th,
  .index_news_tbl td {
    font-size: 2.4rem;
  }
}


/*----- ニュースリリースボタン -----*/
.index_news_btn a {
  display: block;
  box-sizing: border-box;
  width: 320px;
  margin: 0 auto;
  padding: 15px 0;
  border: 2px solid #fff;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  text-align: center;
  transition: .3s;
}

.index_news_btn a:hover {
  background: #fff;
  color: #666;
}

@media screen and (max-width: 640px) {
  .index_news_btn {
    text-align: center;
  }

  .index_news_btn a {
    display: inline-block;
    width: auto;
    padding: 15px;
    font-size: 2.4rem;
  }
}

/*　追記2023/9/19 IRニュース登録　*/
.irmail {
  display: block;
  justify-content: space-around;
  width: 1024px;
  height: 20px;
  margin: 0 auto;
}

.irmail-button {
  display: block;
  align-items: center;
  justify-content: center;
  line-height: 1.8;
  font-size: 18px;
  width: 300px;
  height: 35px;
  font-weight: bold;
  border: 2px solid #ffffff;
  transition: 0.3s;
  background-color: rgba(219, 3, 25, 1);
  float: right;
  margin: -50px 0 0 0;
  text-align: center;
}

.irmail-button::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f0e0';
  font-weight: 900;
  padding-right: 10px;
  color: #fff;
}

.irmail-button:hover {
  background-color: rgba(219, 3, 25, 0.8);
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .irmail {
    width: 100%;
    height: 60px;
  }

  .irmail-button {
    float: inherit;
    margin: 5px auto 10px;
  }

  .irmail-button::after {
    margin-bottom: 10px;
  }
}

/*=======================================
　下層ページ（bodyに「.subpage」）
====================================== */

/*------------------------------
　下層ページ共通
------------------------------ */

/*----- パンくずリスト -----*/
@media screen and (min-width: 641px) {
  .breadcrumb_wrap {
    padding: 0 0 40px;
  }

  .breadcrumb_inner {
    position: relative;
    width: 840px;
  }
}


.breadcrumb_lst {
  height: 26px;
  margin: 40px 0 0;
}

.breadcrumb_lst li {
  display: inline-block;
  font-size: 1.2rem;
}

.breadcrumb_lst li:after {
  display: inline-block;
  margin: 0 0 0;
  content: "＞";
}

.breadcrumb_lst li:last-child:after {
  content: "";
}

.breadcrumb_lst a {
  color: #626262;
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .breadcrumb_wrap {
    display: none;
  }
}


.subpage_title {
  background: transparent;
}

/*印刷ボタン*/
.print_btn {
  display: inline-block;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  transition: .3s;
}

.print_btn:hover {
  opacity: .8;
}

.print_btn a {
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .print_btn {
    display: none;
  }
}

/*ページタイトル*/
.subpage_title h1.pagetitle_h1 {
  position: relative;
  margin: 0 0 40px;
  padding: 0 0 17px 20px;
  border-bottom: solid 2px #cbcbcb;
  font-size: 2.5rem;
  font-weight: bold;
}

.subpage_title h1.pagetitle_h1:after {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 16.4%;
  border-bottom: solid 2px #cd170e;
  content: " ";
}

/*ページタイトル（画像）*/
.subpage_title_img .basic_contents_width {
  position: relative;
}

.subpage_title_img h1.pagetitle_h1 {
  position: absolute;
  top: 41%;
  right: 0;
  left: 6%;
  /*text-shadow:
        1px 1px 1px #333,
        0 0 22px #fff;*/
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .5),
    1px 1px 5px rgba(0, 0, 0, .5),
    1px 1px 10px rgba(0, 0, 0, .5),
    1px 1px 20px rgba(0, 0, 0, .5),
    1px 1px 30px rgba(0, 0, 0, .7),
    1px 1px 40px rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 3.6rem;
  font-weight: normal;
  ;
}

.sales_copy {
  font-size: 2.3rem;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .subpage_title h1.pagetitle_h1 {
    padding: 0 2% 3%;
    font-size: 3.4rem;
  }

  .sales_copy {
    font-size: 3.4rem;
    text-align: left;
  }
}


/*------------------------------
　会社概要：会社概要（outline）
------------------------------ */
.outline_business_tbl td div.txt_bold {
  margin: 0 0 10px;
}

.outline_business_tbl td .ulst {
  margin-bottom: 30px;
}

.outline_business_tbl td .ulst:last-child {
  margin-bottom: 0;
}


.point_month {
  display: block;
  width: 100%;
  text-align: right;
  line-height: 3rem;
}


/*------------------------------
　ニュースリリース
------------------------------ */
.newsRelease .breadcrumb_inner {
  width: 100%;
}






/*================================================
　サイドナビなしページ
============================================== */
/*サイドナビなしのページ中央寄せ対応*/
.contact .breadcrumb_inner,
.contact .contents_main,
.terms .breadcrumb_inner,
.terms .contents_main,
.privacy .breadcrumb_inner,
.privacy .contents_main,
.notice .breadcrumb_inner,
.notice .contents_main,
.sitemap .breadcrumb_inner,
.sitemap .contents_main {
  float: none;
  margin: 0 auto;
}

/*------------------------------
　メールフォーム
------------------------------ */
.contact_step_img.img_center {
  width: 80%;
}

.contact_step_img.img_center {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .contact_step_img.img_center {
    width: 100%;
  }
}

.err {
  color: #cd170e;
  font-size: 80%;
}

.err:first-of-type {
  margin: 10px 0 0;
}

.required {
  color: #cd170e;
}

.tblB.form_tbl {
  table-layout: auto;
}

.tblB.form_tbl th,
.tblB.form_tbl td {
  text-align: left;
  vertical-align: middle;
}

.tblB.form_tbl th {
  width: 32%;
}

.tbl_contact td p {
  margin-bottom: 5px;
  font-size: 90%;
}

input[type="text"],
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
}

textarea {
  height: 10em;
}

select {
  box-sizing: border-box;
  padding: 3px 5px;
  border: 1px solid #ccc;
}

.contact_btn_area {
  margin-top: 20px;
  text-align: center;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  opacity: .9;
  cursor: pointer;
}

.form_name input[type="text"],
.form_name_kana input[type="text"],
.form_postal_code input[type="text"] {
  width: 35%;
}

.form_postal_code input[type="text"] {
  min-width: 4rem;
  width: 30%;
}

.form_tel input[type="text"],
.form_fax input[type="text"],
.form_mail input[type="text"] {
  width: 60%;
}



/*------------------------------
　印刷対応
------------------------------ */
@media print {

  header,
  .breadcrumb_wrap,
  aside,
  .aside_nav,
  footer {
    display: none !important;
  }

  #contents,
  .contents_main html,
  body,
  .basic_contents_width_small,
  .basic_contents_width {
    float: none !important;
    min-width: auto !important;
    max-width: 100%;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html,
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/*------------------------------
　動画ライブラリー 20260901
------------------------------ */


.cm-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.cm-slider__viewport {
  overflow: hidden;
}

.cm-slider__track {
  display: flex;
  transition: transform 0.4s ease;
}

.cm-slider__slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 8px;
  text-align: center;
}

.cm-slider__title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 16px;
}

.cm-slider__video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.cm-slider__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cm-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cm-slider__btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.cm-slider__btn--prev {
  left: -4px;
}

.cm-slider__btn--next {
  right: -4px;
}

.cm-slider__btn:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
}

.cm-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.cm-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
}

.cm-slider__dot.is-active {
  background: #333;
}

.cm-slider__dot:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .cm-slider__btn {
    display: none;
  }
}