@charset "utf-8";

/* 装飾をしたら変わらないベーシックな個所のCSS */
/* header,footer,mainの基本設定 */

/* font-family: "Zen kaku Gothic New",  sans-serif; */
/* font-family: "Zen Kaku Gothic Antique", sans-serif; */
/* font-family: "Zen Old Mincho", serif; */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");

/*=====ボディ設定*/
html {
  font-size: 62.5%;
  line-height: 1.4;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

body {
  font-size: 1.6rem;
  overflow: hidden;
  margin: 0 auto;
}

/*=====ヘッダー*/
header {
}

.ttl_header {
  width: 920px;
  margin: 0 auto;
  padding: 51px 0 25px 0;
}

/* グローバルナビゲーション */

.nav_grobal {
  border-top: 1px solid #3f59b2;
  border-bottom: 2px solid #3f59b2;
}

/* スマホ用トグルメニュー */
.nav_con {
  display: none;
}

.list_nav_1 {
  text-align: center;
  width: 920px;
  margin: 0 auto;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(5, 192px);
  justify-content: space-between;
}

.list_nav_1 a {
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  line-height: 1.5;
  text-decoration: none;
  display: block;
  padding: 14px 0 9px 0;
}

.list_nav_1 a span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: #3f59b2;
}

.list_nav_1 a:hover,
.list_nav_1 a.is_current {
  background-color: #3f59b2;
  color: #fff;
}

.list_nav_1 a:hover span,
.list_nav_1 a.is_current span {
  background-color: #3f59b2;
  color: #fff;
}

/*=====ヘッダーここまで*/

/*=====メイン*/
main {
}

.contents_width {
  width: 920px;
  margin: 0 auto;
  position: relative;
}

/*=====アサイド*/
aside {
}

/*=====フッター*/
footer {
  border-top: 1px solid #3f59b2;
  background-color: #e7ecfc;
}

footer h2 {
  text-align: center;
  padding: 58px 0 15px 0;
}

.list_address {
  font-size: 1.4rem;
  line-height: 2.5;
  text-align: center;
  padding-bottom: 39px;
}

.copyright {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background-color: #3f59b2;
  margin: 0 auto;
  padding: 9px 0;
  text-align: center;
}

/*=====フッターここまで*/

/* タイトルー共通 */
.ttl_cmn_1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
}

.ttl_cmn_2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #3f59b2;
}

.ttl_cmn_b {
  border-bottom: 2px solid #3f59b2;
  background-color: #e7ecfc;
  line-height: 1.4;
  margin-bottom: 21px;
  padding: 11px 0 14px 20px;
}

.list_cmn_1 {
  margin: 0 0 0 20px;
}

.tel {
  text-decoration: none;
}

/* ボタンをつくるときaタグに対して指定する。aタグにclassをつけることが可能 */
.btn_news a {
  display: block;
  width: 280px;
  text-align: center;
  color: #3f59b2;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #3f59b2;
  padding: 16px;
  position: relative;
  margin: 0 auto;
}

.btn_news img {
  position: absolute;
  right: 3px;
}

/* ブレークポイント＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width: 768px) {
  /*ここにcssを書く*/
  /*イメージ設定*/
  img {
    max-width: 100%;
    height: auto;
  }

  /*=====ヘッダー*/
  header {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .ttl_header {
    height: 60px; /* 高さ固定 */
    margin: 0; /* 中央寄せ解除 */
    padding: 0 60px 0 15px; /* 上下は0、左右だけ確保 */
    display: flex; /* 中央揃え用 */
    align-items: center; /* 縦中央 */
  }

  .ttl_header img {
    width: clamp(230px, 40vw, 320px);
    height: auto;
  }

  /* スマホ用トグルメニュー */
  /* ナブコン右側三本線 */
  .nav_con {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    display: block;
    width: 60px;
    height: 60px;
    background-image: url(../images/common/sp_nav_con_open.png);
    background-position: center center;
    background-color: #3f59b2;
  }

  /* ナブコンを開いた時 */
  .nav_con.is_open {
    background-image: url(../images/common/sp_nav_con_close.png);
  }

  /* グローバルナビゲーション */
  .nav_grobal {
    display: none;
    border-top: none;
    border-bottom: none;
  }

  /* ナビ本体 */
  .list_nav_1 {
    position: absolute;
    display: block;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #3f59b2;

    padding: 20vw 8vw;
    margin: 0 auto;
  }

  /* ナビリンク */
  .list_nav_1 a {
    display: flex;
    justify-content: space-between; /* ← 左右に分ける */
    align-items: center; /* ← 縦中央 */
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 20px 0;
    text-decoration: none;
  }

  .list_nav_1 a span {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
  }

  .list_nav_1 a:hover,
  .list_nav_1 a.is_current {
    background-color: #3f59b2;
    color: #fff;
  }

  .list_nav_1 a:hover span,
  .list_nav_1 a.is_current span {
    background-color: #3f59b2;
    color: #fff;
  }

  /*=====ヘッダーここまで*/

  /*=====メイン*/
  main {
    width: 100%;
  }

  .contents_width {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }

  /*=====アサイド*/
  aside {
  }

  /*=====フッター*/
  footer {
    border-top: 1px solid #3f59b2;
    background-color: #e7ecfc;
  }

  footer h2 {
    text-align: center;
    padding: 58px 0 15px 0;
  }

  .list_address {
    text-align: left;
    padding: 24px;
    list-style: none;
  }

  .copyright {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background-color: #3f59b2;
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
  }

  /*=====フッターここまで*/

  /* タイトルー共通 */
  .ttl_cmn_1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
  }

  .ttl_cmn_2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3f59b2;
  }

  .ttl_cmn_b {
    border-bottom: 2px solid #3f59b2;
    background-color: #e7ecfc;
    line-height: 1.4;
    margin-bottom: 21px;
    padding: 11px 0 14px 20px;
  }

  .list_cmn_1 {
    margin: 0 0 0 20px;
  }

  .tel {
    text-decoration: none;
  }

  /* ボタンをつくるときaタグに対して指定する。aタグにclassをつけることが可能 */
  .btn_news a {
    display: block;
    width: 280px;
    text-align: center;
    color: #3f59b2;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #3f59b2;
    padding: 16px;
    position: relative;
    margin: 0 auto;
  }

  .btn_news img {
    position: absolute;
    right: 3px;
  }
}