@charset "utf-8";

/* ----------------------------------------------------
  Google font　日本語
---------------------------------------------------- */
.jp01{font-family: 'Noto Sans JP', sans-serif;} /* ゴシック */
.jp04{font-family: "Klee One", cursive; letter-spacing: 2px;} /* 明朝 */

/* ----------------------------------------------------
  英字
---------------------------------------------------- */
.en04{font-family: "Cal Sans", sans-serif;} /* 太ゴシック */

/* ----------------------------------------------------
  テキスト高さ
---------------------------------------------------- */
.text01{line-height: 33px; letter-spacing: 1.5px;}
@media print, screen and (min-width: 992px) {.text01{line-height: 35px;}}

/* ----------------------------------------------------
  文字寄せ
---------------------------------------------------- */
/*　スマホ左寄せ　ほか中央
---------------------------------------------------- */
.ctr-text01{text-align: left;}
@media print, screen and (min-width: 768px) {.ctr-text01{text-align: center;}}

/*　スマホ中央　ほか左寄せ
---------------------------------------------------- */
.ctr-text02{text-align: center;}
@media print, screen and (min-width: 768px) {.ctr-text02{text-align: left;}}

/*　スマホtablet中央　ほか左寄せ
---------------------------------------------------- */
.ctr-text03{text-align: center;}
@media print, screen and (min-width: 992px) {.ctr-text03{text-align: left;}}

/*　スマホtablet中央　ほか右寄せ
---------------------------------------------------- */
.ctr-text04{text-align: center;}
@media print, screen and (min-width: 992px) {.ctr-text04{text-align: right;}}

/* ----------------------------------------------------
  背景色と文字色
---------------------------------------------------- */
/* 背景色
---------------------------------------------------- */
.bg_white{background: #fff;}
.bg_gray{background: #f4f5f6;}
.bg_blue{background: #254061}

.bg01{background: url("../images/square.jpg")}
@media print, screen and (min-width: 768px) {.bg01{background: url("../images/bg01.jpg") no-repeat scroll 50% 0% / cover}}

.bg02{background: url("../images/square.jpg")}

.bg_grd_01{background-image: linear-gradient(180deg, #e9f4ff, #e3e8fa, #c9d5f7, #e0eefe, #eaf4ff, #e9f4ff);}

/* 文字色
-------------------------- */
.white{color:#fff}
.blue{color: #254061}

/* ----------------------------------------------------
  テキストリンク
---------------------------------------------------- */
.text01 a:link,
.text01 a:visited,
.text01 a:hover,
.text01 a:active{
  text-decoration:underline;
  color: #2c3b52;
}

/* ----------------------------------------------------
    ナンバーボックス
---------------------------------------------------- */
.box_yohakubox_01{
  padding:20px 30px;
  background-color: #fff;
  border: 1px solid #254061;
  position:relative;
}
@media print, screen and (min-width: 768px) {
  .box_yohakubox_01{
    padding:30px 40px;
  }
}
@media print, screen and (min-width: 1200px) {
  .box_yohakubox_01{
    padding:40px 40px;
  }
}
@media print, screen and (min-width: 1600px) {
  .box_yohakubox_01{
    padding:50px 40px;
  }
}
@media print, screen and (min-width: 1800px) {
  .box_yohakubox_01{
    padding:50px 50px;
  }
}

/* 丸番号
------------------------------ */
.box_yohakubox_01 .midasi_number{
  padding:13px 16px 15px 18px;
  color: #fff;
  font-size: 20px;
  display: inline-block;
  border-radius: 1000px;
  background: #254061;
  position:absolute;
  top:-20px;
  left:20px;
}
@media print, screen and (min-width: 768px) {
  .box_yohakubox_01 .midasi_number{
    padding:20px 17px 23px 19px;
    font-size: 30px;
    top:-30px;
    left:-30px;
  }
}
@media print, screen and (min-width: 1200px) {
  .box_yohakubox_01 .midasi_number{
    padding:30px 23px 35px 23px;
    font-size: 40px;
    top:-40px;
    left:-40px;
  }
}
@media print, screen and (min-width: 1600px) {
  .box_yohakubox_01 .midasi_number{
    padding:41px 32px 45px 32px;
    font-size: 50px;
    top:-40px;
    left:-40px;
  }
}

/* タイトル
------------------------------ */
.box_yohakubox_01 h3 {
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #254061;
  border-bottom: 1px solid #254061;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 992px) {
.box_yohakubox_01 h3 {
    font-size: 22px;
    line-height: 32px;
  }
}
@media print, screen and (min-width: 1200px) {
.box_yohakubox_01 h3 {
  font-size: 25px;
  line-height: 35px;
  padding-bottom:30px;
  margin-bottom: 30px;    
  }
}
@media print, screen and (min-width: 1600px) {
.box_yohakubox_01 h3 {
  font-size: 28px;
  line-height: 38px;    
  }
}

/* タイトル
------------------------------ */
@media print, screen and (min-width: 1800px) {.box_yohakubox_01 p {text-align: center;}}

/* ----------------------------------------------------
  情報カード
---------------------------------------------------- */
.info-card {
  display: flex;
  flex-direction: column; /* スマホでは縦並び */
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
  background: #254061;
}

/* PCレイアウト
-------------------------- */
@media print, screen and (min-width: 768px) {
  .info-card {
    flex-direction: row; /* 横並び */
    align-items: stretch; /* 左右の高さを揃える */
    margin-bottom: 0;
  }

  /* テキストエリア（50%） */
  .info-card__body {
    flex: 0 0 55%;
    max-width: 55%;
  }

  /* 画像エリア（50%） */
  .info-card__img {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

@media print, screen and (min-width: 1400px) {
  /* テキストエリア（50%） */
  .info-card__body {
    flex: 0 0 55%;
    max-width: 55%;
  }

  /* 画像エリア（50%） */
  .info-card__img {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

/* テキストエリア
-------------------------- */
.info-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px;
  box-sizing: border-box;
}
@media print, screen and (min-width: 768px) {
  .info-card__body {
    padding: 20px;
  }
}
@media print, screen and (min-width: 1200px) {
  .info-card__body {
    padding: 40px;
  }
}

/* 見出し＋テキスト
-------------------------- */
.info-card__text {
  width: 100%;
}

.info-card__text,
.info-card__text span,
.info-card__title,
.info-card__text p {
  color: #fff;
}

.info-card__text span {
  color: #254061;
  background: #fff;
  font-size: 16px;
  padding: 1px 10px 2px 10px;
  display: inline-block;
  margin-bottom: 15px;
}
@media print, screen and (min-width: 768px) {
  .info-card__text span {
    font-size: 18px;
  }
}

.info-card__title {
  font-size: 23px;
  margin: 0 0 10px 0;
}
@media print, screen and (min-width: 768px) {
  .info-card__title {
    font-size: 20px;
  }
}
@media print, screen and (min-width: 1200px) {
  .info-card__title {
    font-size: 25px;
  }
}
@media print, screen and (min-width: 1600px) {
  .info-card__title {
    font-size: 28px;
  }
}


@media print, screen and (min-width: 768px) {
.info-card__text p{
  font-size: 18px;
  line-height: 36px;
  }
}

@media print, screen and (min-width: 992px) {
.info-card__text p{
  font-size: 13px;
  line-height: 30px;
  }
}

@media print, screen and (min-width: 1200px) {
.info-card__text p{
  font-size: 15px;
  line-height: 30px;
  }
}

@media print, screen and (min-width: 1400px) {
.info-card__text p{
  font-size: 16px;
  line-height: 35px;
  }
}

@media print, screen and (min-width: 1600px) {
.info-card__text p{
  font-size: 18px;
  line-height: 38px;
  }
}


/* 画像エリア＆角丸トリミング設定
-------------------------- */
.info-card__img {
  position: relative;
  width: 100%;
}

.mask_01 {
  display: block;
  line-height: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

@media print, screen and (min-width: 768px) {
  .mask_01 {
    border-radius: 0 10px 10px 0;
  }
}

.info-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------
  フロー
---------------------------------------------------- */
.box_workflow {
  list-style: none;
  padding: 0;
  margin: 0;
}

.box_workflow li {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

.box_workflow .box_workflow_number {
  width: auto;
  font-weight: none;
  padding-left: 24px; /* ●分のスペース */
  margin-right: 0;
  margin-bottom: 18px;
  position: relative;
  font-size: 30px;
  color: #254061;
}

.box_workflow .box_workflow_number:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -6px;
  top: 0.2em;
  font-size: 14px;
  color: #254061;
  z-index: 1;
}

.box_workflow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0px; /* ●の中心 */
  top: 22px;  /* ●の下から */
  bottom: -62px;
  width: 2px;
  background-color: #254061;
  z-index: 0;
}

.box_workflow .box_workflow_cont {
  flex: none;
  padding-left: 22px;
}

.box_workflow h2{
  font-size: 120%;
  margin-bottom: 10px;
  color: #254061;
}

/* 768以上
---------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .box_workflow li {
    flex-direction: row; /* 横並び */
    align-items: flex-start;
    margin-bottom: 60px;
  }

  .box_workflow .box_workflow_number {
    width: 250px;
    padding-left: 30px;
    margin-right: 20px;
    margin-bottom: 0;
    font-size: 35px;
    letter-spacing:2px;
    color: #254061;
  }

  .box_workflow .box_workflow_number:before {
    font-size: 18px;
    top: 1px;
    left: 205px;
  }

  .box_workflow li:not(:last-child)::after {
    left: 213px;
    top: 14px;
    bottom: -83px;
    width: 2px;
  }

  .box_workflow .box_workflow_cont {
    flex: 1;
  }
}

/* 768以上
---------------------------------------------------- */
@media print, screen and (min-width: 992px) {
  .box_workflow .box_workflow_number {
    font-size: 40px;
    color: #254061;
  }
}

/*　共通　内容の中にリストがある場合
------------------------------ */
/* 不要な ::after を完全無効化 */
.box_workflow_cont .inner_list li::after {
  content: none !important;
}

@media only screen and (max-width: 767px) {
  .box_workflow li {
    flex-direction: column !important; /* 縦並びに戻す */
    align-items: stretch !important;   /* 子要素を横いっぱいに伸ばす */
  }

  .box_workflow_cont {
    width: 100% !important;
    min-width: 0 !important; /* flex子の幅制限回避 */
  }

  .box_workflow_cont .inner_list {
    width: 100% !important;
    padding-left: 1.5em; /* ディスク分の余白 */
    margin-left: 3px;
    list-style: disc;
    box-sizing: border-box;
    flex: 1 1 100%;
  }

  .box_workflow_cont .inner_list li {
    display: list-item !important; /* flex無効化 */
    width: 100% !important;
    position: static !important;
    border-bottom: 1px solid #eee !important;
    padding: 5px 0 !important;
    margin-bottom: 0;
    box-sizing: border-box !important;
  }
}

@media print, screen and (min-width: 768px) {
  .box_workflow_cont .inner_list {
    padding-left: 1em;
    margin-left: 5px;
    list-style: disc;
  }

  .box_workflow_cont .inner_list li {
    display: list-item !important;
    position: static !important;
    border: none;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
  }
}

/* ----------------------------------------------------
  name
---------------------------------------------------- */
.name{text-align: right;}
.name span{
  display: inline-block;
  margin-left: 5px;
  font-size: 22px;
}
@media print, screen and (min-width: 768px) {
.name span{
  margin-left: 10px;
  font-size: 26px;
  }
}

/* ----------------------------------------------------
  テーブル
---------------------------------------------------- */
table{border-spacing:0;border-collapse:separate;}

/* テーブル1
---------------------------------------------------- */
.table1{
  width:100%;
  border-top:0px;
  border-bottom:0px;
  border-collapse:collapse;  
}

.table1 th{
	width: 30%;
  color: #254061;
	padding:20px 0;
  border: solid #254061;
  border-width: 1px 0;  
	vertical-align:middle;
	display:table-cell;
  font-weight: normal;
  background: transparent;
  text-align: center;
  word-break: break-word;
	}

@media print, screen and (min-width: 768px) {
.table1 th{
	width: 30%;
	}
}

.table1 td{
	padding:20px 0 20px 20px;
  border: solid #ccc;
  border-width: 1px 0;
	display:table-cell;
  background: transparent;
  word-break: break-word;
	}
@media only screen and (max-width: 767px) {
.table1 span{
	text-decoration:underline;
	color:#222;
	}
}

/* ----------------------------------------------------
  ボタン07
---------------------------------------------------- */
.btn_07 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* テキストを左、矢印を右に配置 */
  width: 270px;                   /* 幅 */
  padding-bottom: 12px;
  box-sizing: border-box;
  text-decoration: none;
  color: #254061;                    /* 文字色 */
  cursor: pointer;
}
.btn_07:link,
.btn_07:visited,
.btn_07:hover,
.btn_07:active {
  color: #254061;
}

/* 矢印 */
.btn_07__icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #254061;    /* 矢印の線の太さ */
  border-right: 2px solid #254061;  /* 矢印の線の太さ */
  transform: rotate(45deg);       /* 斜めに傾けて右矢印にする */
  margin-right: 4px;              /* 右端との間の余白（ホバーで動く分） */
  transition: transform 0.35s ease;
}

/* ホバー時に移動 */
.btn_07:hover .btn_07__icon {
  transform: rotate(45deg) translateX(2px) translateY(-2px); 
}

/* 下線 */
.btn_07::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 4px;                   /* 下線の太さ */
  background: #254061;              /* 下線の色 */
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

/* ホバーアニメーション */
.btn_07:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* ----------------------------------------------------
    タイトル01
---------------------------------------------------- */
.title01 {
  text-align: center;
  position: relative;
  display: block; /* 幅いっぱい */
  margin-top: 40px;
}

.title01::before {
  content: "";
  position: absolute;
  top: -40px;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 35px;
  background-color: #222;
  will-change: transform;
}

/* ----------------------------------------------------
    見出し01
---------------------------------------------------- */
.midasi01{
	font-size: 18px;
	line-height: 31px;
	}
.midasi01 span{
	font-size: 30px;
}
@media print, screen and (min-width: 768px) {
.midasi01{
	font-size: 20px;
	line-height: 35px;
	}
.midasi01 span{
	font-size: 45px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi01{
	font-size: 20px;
	line-height: 35px;
	}
.midasi01 span{
	font-size: 50px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi01{
	font-size: 25px;
	line-height: 40px;
	}
.midasi01 span{
	font-size: 55px;
	}
}

/* ----------------------------------------------------
    見出し04
---------------------------------------------------- */
.midasi04{
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 2px;
	}
@media print, screen and (min-width: 768px) {
.midasi04{
	font-size: 21px;
	line-height: 34px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi04{
	font-size: 22px;
	line-height: 36px;
	}
}

/* ----------------------------------------------------
  ★★★レイアウト（1:1）
---------------------------------------------------- */
.note_11 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_11 {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
  .note_11 {
    gap: 60px;
  }
}
@media screen and (min-width: 1200px) {
  .note_11 {
    gap: 80px;
  }
}
@media screen and (min-width: 1600px) {
  .note_11 {
    gap: 110px;
  }
}
.note_11:last-child { margin-bottom: 0;}
.note_11_box  {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------
  ★★★レイアウト（1:1）
---------------------------------------------------- */
.note_11_b {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 30px;  
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_11_b {
    gap: 20px;
  }
}
@media screen and (min-width: 992px) {
  .note_11_b {
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    margin-bottom: 50px;     
  }
}
@media screen and (min-width: 1200px) {
  .note_11_b {
    gap: 70px;
    margin-bottom: 70px;     
  }
}
@media screen and (min-width: 1600px) {
  .note_11_b {
    gap: 100px;
  }
}
.note_11_b:last-child { margin-bottom: 0;}
.note_11_b_box  {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------
  ★★★レイアウト（1:1:1）
---------------------------------------------------- */
.note_111 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  box-sizing: border-box;
  align-items: top; /* 上下中央配置 */
  justify-items: center; /* 左右中央配置 */
}
@media screen and (min-width: 768px) {
  .note_111 {
    gap: 30px;
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 768px) {
  .note_111 {   
    gap: 50px;
  }
}
@media screen and (min-width: 992px) {
  .note_111 {
    grid-template-columns: 1fr 1fr 1fr;    
    gap: 50px;
  }
}
@media screen and (min-width: 1400px) {
  .note_111 {
    gap: 100px;
    margin-bottom: 80px;    
  }
}
.note_111:last-child { margin-bottom: 0;}
.note_111_box  {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------
  ★★★レイアウト（3:1）
---------------------------------------------------- */
.note_31 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
  transition-duration: 300ms;
}
@media screen and (min-width: 768px) {
.note_31 {
    grid-template-columns: 2.8fr 1.2fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
.note_31 {
    grid-template-columns: 2.8fr 1.2fr;
    gap: 60px;
  }
}
@media screen and (min-width: 1200px) {
.note_31 {
    gap: 80px;
  }
}

.note_31:last-child { margin-bottom: 0;}
.note_31_box {
  box-sizing: border-box;
  width: 100%;
}