@charset "utf-8";

/* ----------------------------------------------------
  Google font　日本語
---------------------------------------------------- */
.jp01{font-family: 'Noto Sans JP', sans-serif;} /* ゴシック */
.jp02{font-family: 'Noto serif JP', sans-serif;} /* 明朝 */

/* ----------------------------------------------------
  Google font　英字
---------------------------------------------------- */
.en01{font-family: "Cormorant Garamond", serif;} /* 明朝 */
.en02{font-family: "Libre Caslon Display", serif;} /* 明朝　数字 */
.en03{font-family: "Literata", serif;} /* 明朝　印字 */
.en04{font-family: "Cal Sans", sans-serif;} /* ゴシック */
.en05{font-family: "Allura", cursive;} /* 明朝　筆記 */

/* ----------------------------------------------------
  文字寄せ
---------------------------------------------------- */
/*　スマホ左寄せ　ほか中央
-------------------------- */
.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;}}

/* ----------------------------------------------------
  文字サイズ
---------------------------------------------------- */
@media print, screen and (min-width: 768px) {.fontsize_01{font-size: 20px; line-height: 30px;}}
@media print, screen and (min-width: 992px) {.fontsize_01{font-size: 23px; line-height: 43px;}}
@media print, screen and (min-width:1200px) {.fontsize_01{font-size: 26px; line-height: 46px;}}

.fontsize_02{font-size: 10px;}
@media print, screen and (min-width: 768px) {.fontsize_02{font-size: 11px;}}
@media print, screen and (min-width: 992px) {.fontsize_02{font-size: 12px;}}
@media print, screen and (min-width:1200px) {.fontsize_02{font-size: 13px;}}

/* ----------------------------------------------------
  背景色とフォント
---------------------------------------------------- */
/* 背景色
-------------------------- */
.bg_white{background: #fff;}
.bg_gray{background: #eee;}
.bg_ligthblue{background: #f4f7fe;}
.bg_ligthblue02{background: #e7edfb;}
.bg_blue{background: #185db3;}
.bg_grd_01{background-image: linear-gradient(150deg, #1450b0, #47a5c4);}

/* フォントカラー
-------------------------- */
.blue{color: #0549a6;}
.yellow{color:#ffea00;}
.mizuiro{color:#dce4f6;}
.mizuiro02{color:#4f82c9;}
.mizuiro03{color:#23b7e8;}
.pink{color: #ffc5cb;}
.pink02{color: #ff6699;}
.white{color: #fff;}

/* ----------------------------------------------------
  ナンバーボックス 02
---------------------------------------------------- */
.box_number_02 {
  position:relative;
  padding:20px;
  border-radius: 1000px;
  color: #0549a6;
  border:5px solid #0549a6;
}
@media print, screen and (min-width: 1200px) {
.box_number_02 {
  padding:25px 60px;
  }
}

/* ナンバー */
.box_number_02 .midasi_number{
  font-size: 10px;  
  padding:20px 2px 2px 2px;
  color: #fff;
  display: inline-block;
  border-radius: 1000px;
  background: #0549a6;
  position: absolute;
  text-align: center;
  width: 70px;
  height: 70px;
  top:-20px;
  left:20px;
}
@media print, screen and (min-width: 768px) {
.box_number_02 .midasi_number{
  font-size: 12px;
  padding:20px 2px 2px 2px;
  top:-20px;
  left:-20px;
  }
}

/* 見出し */
.box_number_02 h4 {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}
@media print, screen and (min-width: 992px) {
.box_number_02 h4 {
  font-size: 20px;
  line-height: 30px;
  }
}
@media print, screen and (min-width: 1200px) {
.box_number_02 h4 {
  font-size: 25px;
  line-height: 35px;
  }
}

/* ----------------------------------------------------
  画像　横並び
---------------------------------------------------- */
.banner-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.banner-row > p {
  width: calc((100% - 15px) / 2);
  margin: 0;
  display: flex;
  justify-content: center;
}
.banner-row > p > a {
  display: block;
  width: 100%;
}
.banner {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
}
@media print, screen and (min-width: 768px) {
  .banner-row {
    flex-wrap: nowrap;
    gap: 30px;
  }
  .banner-row > p {
    width: auto;
  }
  .banner-row > p > a {
    width: auto;
  }
  .banner {
    width: auto !important;
    max-width: 100%;
  }
}
@media print, screen and (min-width: 1200px) {
  .banner-row {
    gap: 70px;
  }
}

/* ----------------------------------------------------
  yokomoji_area
---------------------------------------------------- */
.yokomoji_area {
  transition-duration: 300ms;
  position: relative;
  overflow: hidden;
}
.yokomoji_area .box_message {
  position: absolute;
  left: -20px;
  top: 40%;
  transform: translateY(-50%);
  white-space: nowrap;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 80px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media print, screen and (min-width: 768px) {
.yokomoji_area .box_message {
  left: -40px;
  top: 50%;  
  font-size: 100px;
  }
}
@media print, screen and (min-width: 1200px) {
.yokomoji_area .box_message {
  font-size: 150px;
  }
}


/* 横文字以外の要素は各レイアウトによるので以下を変更する */
.yokomoji_area .quick_up_team_03 {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------
   左右端にフキダシ
---------------------------------------------------- */
.deco-title {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  padding:0 20px;
}
.deco-line {
  display: block;
  width: 7px;
  background-color: #185db3; /* 任意色 */
  border-radius: 100px;
  flex-shrink: 0;
  height: auto;
}
.deco-line--left {
  transform: rotate(-10deg);
}
.deco-line--right {
  transform: rotate(10deg);
}

@media print, screen and (min-width: 768px) {
.deco-title {
  gap: 120px;
  padding:0;
  }
.deco-line--left {
  transform: rotate(-40deg);
  }
.deco-line--right {
  transform: rotate(40deg);
  }
}

.deco-title__inner{
  padding:0 0 10px 0;
}

/* ----------------------------------------------------
  画像重ね
---------------------------------------------------- */
.image_kasane_box {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  width: 100%;
}

/* 全レイヤー共通設定：すべて1行目に重ねる */
.image_kasane_box .img-layer {
  grid-row: 1; 
  z-index: 1;
  transition: all 0.5s ease-in-out;
}

/* 【奥】横幅 */
.image_kasane_box .img-oku {
  grid-column: 2 / 12; 
  z-index: 1;
}
@media print, screen and (min-width: 768px) {
.image_kasane_box .img-oku {
  grid-column: 2 / 10;
  }
}

/* 【中間】横幅 */
.image_kasane_box .img-mid {
  grid-column: 6 / 13; 
  z-index: 2;
  margin-top: 60%; /* 縦方向のズレ */
}

/* 【手前】横幅 */
.image_kasane_box .img-front {
  grid-column: 1 / 5; 
  z-index: 3;
  margin-top: 180%; /* 縦方向のズレ */
}

/* ----------------------------------------------------
  ナンバーボックス 01
---------------------------------------------------- */
.box_number_01 {
  padding:20px;
  border-radius: 10px;
  color: #fff;
	background-image: linear-gradient(150deg, #1450b0, #47a5c4);
}
@media print, screen and (min-width: 1200px) {
.box_number_01 {
  padding:30px;
  }
}

/* ナンバー */
.box_number_01 .midasi_number{
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 2px;
  margin-bottom: 5px;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
.box_number_01 .midasi_number{
  margin-bottom: 10px;
  }
}
@media print, screen and (min-width: 992px) {
.box_number_01 .midasi_number{
  font-size: 60px;
  line-height: 70px;
  margin-bottom: 20px;
  }
}

/* 画像 */
@media only screen and (max-width: 767px) {
.box_number_01 p img {
  width: 150px;
  margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 768px) {
.box_number_01 p img {
  margin-bottom: 10px;
  }
}
@media print, screen and (min-width: 992px) {
.box_number_01 p img {
  margin-bottom: 20px;
  }
}

/* 見出し */
.box_number_01 h4 {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
.box_number_01 h4 {
  font-size: 17px;
  line-height: 27px;
  }
}
@media print, screen and (min-width: 992px) {
.box_number_01 h4 {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 1200px) {
.box_number_01 h4 {
  font-size: 22px;
  line-height: 32px;
  }
}

/* ----------------------------------------------------
  ふきだし
---------------------------------------------------- */
.sb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .sb-card {
    max-width: 90%;
  }
}
@media print, screen and (min-width: 992px) {
  .sb-card {
    text-align: center;
    max-width: 80%;  
  }
}
.sb-bubble {
  position: relative;
  margin-top: 20px; 
  background: linear-gradient(135deg, #b6dcff, #b9b6e5); /* 任意色 */
  border: none;
  border-radius: 10px;
  padding: 10px 15px 15px 15px;
  width: 100%;
}
@media print, screen and (min-width: 768px) {
.sb-bubble {
  padding: 20px;
  }
}
@media print, screen and (min-width: 1200px) {
.sb-bubble {
  border-radius: 1000px;
  padding: 30px;
  }
}
.sb-bubble p {
  font-size: clamp(0.95rem, 3.5vw, 1rem);
  line-height: 1.75;
}
.sb-bubble::after {
  content: '';
  position: absolute;
  top: -16px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 16px solid #b8cbf3;  /* 任意色 */
  z-index: 2;
}

/* ----------------------------------------------------
  ふきだし
---------------------------------------------------- */
.sb-card02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
/*@media print, screen and (min-width: 768px) {
  .sb-card02 {
    max-width: 90%;
  }
}
@media print, screen and (min-width: 992px) {
  .sb-card02 {
    text-align: center;
    max-width: 80%;  
  }
}*/
.sb-bubble02 {
  position: relative;
  margin-top: 20px; 
  background: linear-gradient(135deg, #b6dcff, #b9b6e5); /* 任意色 */
  border: none;
  border-radius: 10px;
  padding: 10px 15px 15px 15px;
  width: 100%;
}
@media print, screen and (min-width: 768px) {
.sb-bubble02 {
  padding: 20px;
  }
}
/*@media print, screen and (min-width: 1200px) {
.sb-bubble02 {
  padding: 30px;
  }
}*/
/*.sb-bubble02 p {
  font-size: clamp(0.95rem, 3.5vw, 1rem);
  line-height: 1.75;
}*/
.sb-bubble02::after {
  content: '';
  position: absolute;
  top: -16px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 16px solid #b8cbf3;  /* 任意色 */
  z-index: 2;
}

/* ----------------------------------------------------
  セクション内の電話
---------------------------------------------------- */
.contact_bottom_tel_01{
	display:block;
  width: 100%;
	color:#fff;	
	background-color: #222; /* 任意色 */
	font-size:20px;
  padding: 18px 2px;
	text-align:center;
	font-weight: normal;
	margin-bottom: 8px;
  border-radius: 10px;
	}
.contact_bottom_tel_01 a:link,
.contact_bottom_tel_01 a:visited,
.contact_bottom_tel_01 a:hover,
.contact_bottom_tel_01 a:active{color:#fff}
.contact_bottom_tel_01 i{font-size:80%; margin:0 5px 0 0; color:#fff; vertical-align: middle;}

@media print, screen and (min-width: 768px) {
.contact_bottom_tel_01{
  font-family: "Cal Sans", sans-serif;
	background-color:transparent;
	padding:0;
	color: #043eb3; /* 任意色 */
	font-size:30px;
  letter-spacing: 2px;
	margin-bottom: 10px;
	}
.contact_bottom_tel_01 i{
  margin:0 5px 0 0;
  color:#0549a6; /* 任意色 */
  }
}
@media print, screen and (min-width: 992px) {
.contact_bottom_tel_01{
  font-size:35px;
  }
}
@media print, screen and (min-width: 1200px) {
.contact_bottom_tel_01{
  font-size:40px;
  letter-spacing: 5px;
  }
}

/* ----------------------------------------------------
    チェックボックス
---------------------------------------------------- */
.check_box_01{
	background: #fff;
	padding: 15px 6px 15px 15px;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
  .check_box_01{
    padding:20px;
  }
}
@media print, screen and (min-width: 1400px) {
  .check_box_01{
    padding:20px;
  }
}
.check_box_01 i{
  color: #23b7e8;
  display: block;
  margin:0 auto;
  font-size: 25px;
  margin-bottom: 5px;
  }
.check_box_01 p{
  font-size: 16px;
  line-height: 26px;
  }
@media print, screen and (min-width: 768px) {
.check_box_01 i{
  font-size: 30px;
  margin-bottom: 10px;
  }
.check_box_01 p{
  font-size: 16px;
  line-height: 26px;
  }
}
@media print, screen and (min-width: 1200px) {
.check_box_01 i{
  font-size: 35px;
  margin-bottom: 10px;
  }
.check_box_01 p{
  font-size: 18px;
  line-height: 28px;
  }
}

/* ----------------------------------------------------
  フロー
---------------------------------------------------- */
.flow_box_01{
	position:relative;
	background: #fff;
	padding: 30px 20px 20px 20px;
	border-radius:0 10px 0 10px
}
@media print, screen and (min-width: 768px) {
  .flow_box_01{
    padding:60px 40px 40px 40px;
  }
}

/* 番号
------------------------- */
.flow_box_01 .bangou{
	position:absolute;
	top:-20px;
	width: 50px;
	height: 50px;
	font-size: 20px;
	display:block;
	color:#fff;
	background-image: linear-gradient(150deg, #22d3ee, #8b5cf6);
	padding:10px;
	text-align:center;
	border-radius:10px	
	}
@media print, screen and (min-width: 768px) {
.flow_box_01 .bangou{
	top:-20px;
	left:-20px;
	width: 70px;
	height: 70px;
	font-size: 30px;
	padding: 18px 22px 20px 18px;
	}
}

/* 見出し
------------------------- */
.flow_box_01 h3{
	font-size: 20px;
	margin-bottom: 10px;
	}
@media print, screen and (min-width: 768px) {
.flow_box_01 h3{
	font-size: 22px;
	margin-bottom: 15px;
	}
}

/* ----------------------------------------------------
  お知らせ
---------------------------------------------------- */
/* 高さ指定
------------------------- */
#news_area_01 {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100px;
  max-height: 300px;
  background: #fff; /* 任意色 */
  padding:0 20px 20px 20px;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px)  {
#news_area_01 {
  min-height: 100px;
  max-height: 400px;  
  padding: 20px 20px;
  }
}
@media print, screen and (min-width: 1200px) {
#news_area_01 {
  min-height: 100px;
  max-height: 500px;
  padding: 30px 40px; 
  }
}

/* 高さ指定02
------------------------- */
#news_area_02 {
/*  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100px;
  max-height: 400px;*/
  background: #fff; /* 任意色 */
  padding:0 20px 20px 20px;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px)  {
#news_area_02 {
/*  min-height: 100px;
  max-height: 600px;  */
  padding:10px 20px 20px 20px;
  }
}
@media print, screen and (min-width: 1200px) {
#news_area_02 {
/*  min-height: 100px;
  max-height: 1000px;*/
  padding:20px 30px 40px 30px; 
  }
}

/* 余白
------------------------- */
@media print, screen and (min-width: 768px) { .wide_news{width: 90%; margin: 0 auto}}
@media print, screen and (min-width: 992px) { .wide_news{width: 70%;}}
@media print, screen and (min-width: 1200px) {.wide_news{width: 60%;}}
@media print, screen and (min-width: 1800px) {.wide_news{width: 55%;}}

/* テーブル
------------------------- */
.news_table_01{
	width:100%;
	border-collapse: collapse;
	position: relative;
}
.news_table_01 tr{
  border-bottom:solid 1px #d7e1f0; /* 任意色 */
}

.news_table_01 th{
  padding: 20px 0 0 0;
	font-weight: normal;
	display: block;
	text-align: left;
}
.news_table_01 td{
  padding: 0 0 20px 0;
	display: block;
}

@media print, screen and (min-width: 768px) {
.news_table_01 th{
  padding: 20px 0 0 0;  
	width: 100%;
	vertical-align:top;
	}
.news_table_01 td{
  padding: 0 0 25px 0;  
	width: 100%;
	vertical-align:top;
	}
}

/*  日付とタグ
-------------------------- */
.news_info{
  margin-bottom: 5px;
}
@media print, screen and (min-width: 768px) {
.news_info{
  display: flex;
  align-items: center;
  gap: 10px;
  }
}
.news_date{
  font-size: 16px;
  margin-bottom: 3px;
}
.news_ctrg{
  display: inline-block;
  font-size: 14px;  
  padding: 4px 15px;
  border-radius: 10px;
  margin-bottom: 3px;
}
@media print, screen and (min-width: 768px) {
.news_date{
  margin-bottom: 0;
}
.news_ctrg{
  display: inline-block;
  font-size: 14px;
  margin-bottom: 0;
  }
}
.news_btn {
  margin-top: 5px;
  font-size: 14px;
  text-align: left;
  display: inline-block;  
  color: #2c3b52; /* 任意色 */
  background: #fff;
  border: 2px solid #2c3b52; /* 任意色 */
  width: 180px;
  padding: 6px 40px 6px 14px; 
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
}
@media print, screen and (min-width: 768px) {
.news_btn {
  margin-top: 10px;
  }
}

/* 丸 */
.news_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2c3b52; /* 任意色 */
  transition: all 0.3s ease;
}

/* 矢印 */
.news_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  right: 22px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff; /* 任意色 */
  border-right: 1px solid #fff; /* 任意色 */
  z-index: 1;
  transition: all 0.3s ease;
}

.news_btn:visited {
  color: #2c3b52; /* 任意色 */
}
/* ホバー・アクティブ時 */
.news_btn:hover, .news_btn:active {
  color: #fff !important;
  background: #2c3b52; /* 任意色 */
  text-decoration: none !important;
}
/* ホバー時：丸 */
.news_btn:hover::after, .news_btn:active::after {
  background-color: #fff; /* 任意色 */
}
/* ホバー時：矢印 */
.news_btn:hover::before, .news_btn:active::before {
  border-top-color: #2c3b52; /* 任意色 */
  border-right-color: #2c3b52; /* 任意色 */
}

/* スクロールバー
-------------------------- */
#news_area_01::-webkit-scrollbar{width: 10px;}
#news_area_01::-webkit-scrollbar-thumb{ background: #064c94;}
#news_area_01::-webkit-scrollbar-track-piece:start{ background: #eee;}
#news_area_01::-webkit-scrollbar-track-piece:end{ background: #eee;}

/* ----------------------------------------------------
  block
---------------------------------------------------- */
/* btn03
---------------------------------------------------- */
.btn03 {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px 2px;
  color: #fff !important; /* 任意色 */
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, #1450b0, #47a5c4); /* 任意色 */
  transition: letter-spacing 0.3s ease;
  z-index: 0;
}
.btn03::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #47a5c4, #1450b0); /* 任意色 */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1; 
}
.btn03 > * {
  position: relative;
  z-index: 1;
}
.btn03:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------
  inline-block
---------------------------------------------------- */
/*  btn01_in
---------------------------------------------------- */
.btn01_in {
  display: block;
  width: 100%;
  padding: 15px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #2c3b52 !important;
  background: #fff;
  border: 2px solid #2c3b52;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}

@media print, screen and (min-width: 768px) {
.btn01_in {
  display: inline-block;
  width: 270px;
  }
}
@media print, screen and (min-width: 1200px) {
.btn01_in {
  display: inline-block;
  width: 350px;
  }
}
@media print, screen and (min-width: 1800px) {
.btn01_in {
  display: inline-block;
  width: 300px;
  }
}

.btn01_in:visited {
  color: #2c3b52 !important;
}
.btn01_in:hover,
.btn01_in:active {
  background: #2c3b52;
  color: #fff !important;
  text-decoration: none !important;
}

.btn01_in{margin: 10px 0 0 0}
@media print, screen and (min-width: 768px) {.btn01_in{margin: 5px 10px}}

.btn01_in i{
  margin-left: 5px;
  color:#23b7e8;
}

/* btn03_in
---------------------------------------------------- */
.mt20{margin-top: 20px;}

.btn03_in {
  color: #fff !important; /* 任意色 */
  background: #0549a6; /* 任意色 */
  display: block;
  width: 100%;
  padding: 18px 2px;
  border: 0;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}

@media print, screen and (min-width: 768px) {
.btn03_in {
  display: inline-block;  
  width: 270px;
  }
}

.btn03_in:visited {
  color: #fff !important; /* 任意色 */
}
.btn03_in:hover,
.btn03_in:active {
  color: #fff !important; /* 任意色 */
  background: #002f6f; /* 任意色 */
  text-decoration: none !important;
}

/*  btn04_in
---------------------------------------------------- */
.btn04_in {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px 2px;
  color: #fff !important; /* 任意色 */
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, #1450b0, #47a5c4); /* 任意色 */
  transition: letter-spacing 0.3s ease;
  z-index: 0;
}
@media print, screen and (min-width: 768px) {
.btn04_in {
  display: inline-block;
  width: 270px;
  margin: 0 4px;
  }
}
.btn04_in::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #47a5c4, #1450b0); /* 任意色 */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.btn04_in > * {
  position: relative;
  z-index: 1;
}
.btn04_in:hover::before {
  opacity: 1;
}

/* ----------------------------------------------------
  inst_btn
---------------------------------------------------- */
.inst_btn {
  color: #fff !important;
  background: #185db3 !important;
  display: inline-block;  
  width: 250px;
  padding: 15px 2px !important;
  letter-spacing: 2px;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 13px !important;
  box-shadow: none !important;
  border:0 !important;
}

@media print, screen and (min-width: 768px) {
.inst_btn {
  display: inline-block;  
  width: 350px;
  padding: 25px 2px !important;
  }
}

.inst_btn:visited {color: #fff !important;}
.inst_btn:hover, .inst_btn:active {
  color: #fff !important;  
  background: #002f6f !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------
  box_02
---------------------------------------------------- */
.box_02 {
  padding: 30px;
  border-radius:10px;
  background: #e7edfb;
  border:1px solid #c5d2f0;
}
@media print, screen and (min-width: 768px) {
.box_02{
  padding:30px;  
  }
}
@media print, screen and (min-width: 992px) {
.box_02{
  padding:40px;  
  }
}
@media print, screen and (min-width: 1200px) {
.box_02{
  padding:60px;  
  }
}

/* ----------------------------------------------------
  フロー（数字付き）
---------------------------------------------------- */
.flow_number_01 {
	margin: 0;
	padding: 0;
}

.flow_number_01 > li {
	list-style-type: none;
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-bottom: 40px;
}

.flow_number_01 > li:last-child{
	padding-bottom: 0px;
}

/* 線 */
.flow_number_01 > li:nth-of-type(even)::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	width: 0;
	height: 100%;
	border-left: 4px solid #d5ddf1; /* 任意色 */
}
@media print, screen and (min-width: 768px) {
.flow_number_01 > li:nth-of-type(even)::after {
	left: 34px;
  }
}

.flow_number_01 > li:nth-of-type(odd)::before {
	content: "";
	position: absolute;
	left: 50px;
	top: -40px;
	width: 20%;
	height: 40px;
}

.flow_number_01 > li:nth-of-type(odd)::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 3px;
	width: 20%;
	height: calc(100% - 4px);
	border-left: 4px solid #d5ddf1; /* 任意色 */
}
@media print, screen and (min-width: 768px) {
.flow_number_01 > li:nth-of-type(odd)::after {
	left: 34px;
  }
}

.flow_number_01 > li:first-of-type::before, 
.flow_number_01 > li:last-of-type::after {
	content: unset;
}

/* 数字 */
.flow_number_01 > li .marusuji {
	display: inline-block;
	position: relative;
	z-index: 1;
	font-size: 20px;
	border-radius: 100vh;  
	margin: 0 20px 0 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	padding-left: 0px;
	color: #fff; /* 任意色 */
	background-image: linear-gradient(130deg, #22d3ee, #8b5cf6); /* 任意色 */
	text-align: center;
	vertical-align: middle;
}
@media print, screen and (min-width: 768px) {
.flow_number_01 > li .marusuji {
	width: 70px;
	height: 70px;
	font-size: 30px;  
	line-height: 70px;
	padding-left: 2px;
  }
}

.flow_number_01 > li dl {
  flex: 1;
}

.flow_number_01 > li dt {
	display: inline-block;
	margin: 10px 0;
	font-size: 20px;
  font-weight: normal;
}
@media print, screen and (min-width: 768px) {
.flow_number_01 > li dt {
	margin: 20px 0;
	font-size: 25px;
  }
}

.flow_number_01 > li dd {
	margin: 0;
	font-weight: normal;
	line-height: 2;
}

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

/* テーブル2
---------------------------------------------------- */
.table2{
	width: 100%;
	border-collapse: collapse;
  border-top: 1px solid #c6d2f0; /* 任意色 */
	background: #f4f7fe; /* 任意色 */
}
.table2 th{
	width: 120px;
	padding: 10px 5px;  
	text-align: center;
	display: table-cell;
	font-weight: normal;
  vertical-align: middle;
	background-color: #e7edfb; /* 任意色 */
  border: 1px solid #c6d2f0; /* 任意色 */
  border-top: none;
}
.table2 td{
	padding: 10px 15px; 
	display: table-cell;
	border: 1px solid #c6d2f0; /* 任意色 */
	}

@media print, screen and (min-width: 768px) {
.table2 th{
	width: 200px;
	padding: 15px;
  border: 1px solid #c6d2f0; /* 任意色 */
  border-top: none;
}
.table2 td{
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #c6d2f0; /* 任意色 */
	}
}

@media print, screen and (min-width: 1200px) {
.table2 th{
	width: 250px;
	padding: 15px;
  border-top: none;
}
.table2 td{
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	}
}

.table2 a:link,
.table2 a:visited{text-decoration:underline !important;}
.table2 a:hover,
.table2 a:active{text-decoration:none !important;}

/* テーブル5
---------------------------------------------------- */
.table5{
	width: 100%;
	border-collapse: collapse;
  border-top: 1px solid #7ea2dc; /* 任意色 */
	background: #fff; /* 任意色 */
}
.table5 th{
	width: 120px;
	padding: 10px 5px;  
	text-align: center;
	display: table-cell;
	font-weight: normal;
  vertical-align: middle;
  color: #fff; /* 任意色 */
	background-color: #185db3; /* 任意色 */
  border: 1px solid #7ea2dc; /* 任意色 */
  border-top: none;
}
.table5 td{
	padding: 10px 15px; 
	display: table-cell;
	border: 1px solid #7ea2dc; /* 任意色 */
	}

@media print, screen and (min-width: 768px) {
.table5 th{
	width: 200px;
	padding: 15px;
  border-top: none;
}
.table5 td{
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	}
}

@media print, screen and (min-width: 1200px) {
.table5 th{
	width: 250px;
	padding: 15px;
  border-top: none;
}
.table5 td{
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	}
}

.table5 a:link,
.table5 a:visited{text-decoration:underline !important;}
.table5 a:hover,
.table5 a:active{text-decoration:none !important;}

/* ----------------------------------------------------
  カタログ　 詳細ページ
---------------------------------------------------- */
/* 余白
------------------------- */
@media print, screen and (min-width: 768px) { .wide_ctlg{width: 90%; margin: 0 auto}}
@media print, screen and (min-width: 992px) { .wide_ctlg{width: 70%;}}
@media print, screen and (min-width: 1200px) {.wide_ctlg{width: 60%;}}
@media print, screen and (min-width: 1800px) {.wide_ctlg{width: 45%;}}

/* 日付とタグ（横並び）
------------------------- */
.detail_area {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  gap: 6px;
  margin-bottom: 5px;
}
@media print, screen and (min-width: 768px) {
.detail_area {
  flex-direction: row;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;  
  }
}

/* タグ
------------------------- */
.detail_area02 {
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
.detail_area02 {
  margin-bottom: 20px;  
  }
}

/* 日付
------------------------- */
.detail_date{font-size: 18px;}

/* タグ
------------------------- */
.detail_ctgr {
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  border-radius: 5px;
  padding: 7px 10px 8px 10px;
  letter-spacing: 0;
}
.color_001{
  color: #fff;
  background: #0549a6; /* 青 */
}
.color_002{
  color: #fff;
  background: #6aca29; /* 緑 */
}
.color_003{
  color: #fff;
  background: #b99dc9; /* 紫 */
}
.color_004{
  color: #fff;
  background: #ff9696; /* ピンク */
}
.color_005{
  color: #fff;
  background: #fcb843; /* オレンジ */
}

/* 記事 タイトル
------------------------- */
.detail_title{
  font-size: 20px;
  padding-bottom: 5px;
  border-bottom: 2px solid #2c3b52; /* 任意色 */
  margin-bottom: 15px;  
  }
@media print, screen and (min-width: 768px) {
.detail_title{
  font-size: 22px;
  padding-bottom: 10px;
  }
}

/* 記事 テキスト
------------------------- */
.detail_text_01{
  margin-bottom: 10px;  
}
@media print, screen and (min-width: 768px) {
.detail_text_01{ 
  margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 992px) {
.detail_text_01{
  margin-bottom: 20px;
  }
}

/* ファイルボタン
------------------------- */
.flie_01{
  background-image: url("../images/icon_pdf.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  background-size: 20px auto;
}
.flie_02{
  background-image: url("../images/icon_word.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  background-size: 20px auto;
}
.flie_03{
  background-image: url("../images/icon_excel.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  background-size: 20px auto;
}
.btn_file {
  font-size: 14px;
  display: block;
  width: 100%;
  padding: 15px 50px 15px 15px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #222 !important;
  background-color: #fff; /* 任意色 */
  border: 2px solid #222; /* 任意色 */
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
}
@media print, screen and (min-width: 768px) {
.btn_file {
  display: inline-block;
  width: 200px;
  margin:0 4px 20px 4px;
  }
}
@media print, screen and (min-width: 992px) {
.btn_file {
  display: inline-block;
  width: 200px;
  margin:0 4px 20px 4px;
  }
}
@media print, screen and (min-width: 1200px) {
.btn_file {
  width: 200px;
  margin:0 5px 25px 5px;
  }
}
@media print, screen and (min-width: 1800px) {
.btn_file {
  width: 260px;
  margin:0 6px 25px 6px;
  }
}

.btn_file:visited {color: #222 !important;} /* 任意色 */
.btn_file:hover,
.btn_file:active {
  background-color: #f7f5f4; /* 任意色 */
  color: #222 !important; /* 任意色 */
  text-decoration: none !important;
}

/* 戻るボタン
------------------------- */
.btn_backapge {
  color: #fff !important; /* 任意色 */
  background: #0549a6; /* 任意色 */
  display: inline-block;
  width: 250px;
  padding: 15px 2px;
  letter-spacing: 2px;
  border: 0;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}
@media only screen and (max-width: 767px) {
.btn_backapge {
    margin-top: 15px;
  }
}
.btn_backapge:visited {
  color: #fff !important; /* 任意色 */
}
.btn_backapge:hover,
.btn_backapge:active {
  color: #fff !important;  
  background: #002f6f !important; /* 任意色 */
  text-decoration: none !important;
}
.btn_backapge i {
  font-size: 16px;
  margin-right:10px;
  color: #fff;
}

/* ----------------------------------------------------
    カタログ　詳細　
---------------------------------------------------- */
/* テキスト
------------------------- */
.detail_text_02{
  margin-bottom: 10px;  
}
@media print, screen and (min-width: 768px) {
.detail_text_02{ 
  margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 992px) {
.detail_text_02{
  margin-bottom: 20px;
  }
}

/* Word
------------------------- */
.detail_word{
  font-size: 25px;
  margin-bottom: 10px;
}

@media print, screen and (min-width: 768px) {
.detail_word{
  font-size: 30px;
  margin-bottom: 15px;
  }
}

.detail_word span{
  font-size: 16px;
}

/* ----------------------------------------------------
  box_01
---------------------------------------------------- */
.box_01{
  padding:10px 15px;
  background: #f4f7fe;
  border:1px solid #dce4f6;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) { .box_01{ padding:15px 20px;}}
@media print, screen and (min-width: 992px) { .box_01{ padding:25px 30px;}}

/* ボタン01
------------------------- */
.btn_ctlg01 {
  color: #fff !important; /* 任意色 */
  background: #0549a6; /* 任意色 */
  display: block;
  width: 100%;
  padding: 15px 2px;
  margin:5px 0;
  letter-spacing: 2px;
  border: 0;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
.btn_ctlg01 {
  display: block;
  width: 100%;
  margin:5px 0;
  }
}
@media print, screen and (min-width: 1200px) {
.btn_ctlg01 {
  display: inline-block;
  width: 48%;  
  margin:0 2px;
  }
}

.btn_ctlg01:visited {
  color: #fff !important; /* 任意色 */
}
.btn_ctlg01:hover,
.btn_ctlg01:active {
  color: #fff !important;  
  background: #002f6f !important; /* 任意色 */
  text-decoration: none !important;
}
.btn_ctlg01 i {
  font-size: 16px;
  margin-right:10px;
  color: #fff;
}

/* ボタン02
------------------------- */
.btn_ctlg02 {
  color: #2c3b52 !important; /* 任意色 */
  background: #fff; /* 任意色 */
  display: block;
  width: 100%;
  padding: 15px 2px;
  margin:5px 0;  
  letter-spacing: 2px;
  border: 1px solid #2c3b52;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
.btn_ctlg02 {
  display: block;
  width: 100%;
  margin:5px 0;
  }
}
@media print, screen and (min-width: 1200px) {
.btn_ctlg02 {
  display: inline-block;
  width: 48%;  
  margin:0 2px;
  }
}

.btn_ctlg02:visited {
  color: #2c3b52 !important; /* 任意色 */
}
.btn_ctlg02:hover,
.btn_ctlg02:active {
  color: #2c3b52 !important;  
  background: #c6d2f0 !important; /* 任意色 */
  text-decoration: none !important;
}
.btn_ctlg02 i {
  font-size: 16px;
  margin-right:10px;
  color: #2c3b52;
}

/* 戻るボタン
------------------------- */
.btn_backapge02 {
  color: #fff !important; /* 任意色 */
  background: #0549a6; /* 任意色 */
  display: inline-block;
  width: 250px;
  padding: 15px 2px;
  letter-spacing: 2px;
  border: 0;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}
.btn_backapge02:visited {
  color: #fff !important; /* 任意色 */
}
.btn_backapge02:hover,
.btn_backapge02:active {
  color: #fff !important;  
  background: #002f6f !important; /* 任意色 */
  text-decoration: none !important;
}
.btn_backapge02 i {
  font-size: 16px;
  margin-right:10px;
  color: #fff;
}

/* ----------------------------------------------------
    見出し01
---------------------------------------------------- */
.midasi01{
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 3px;
	}
.midasi01 span{
	font-size: 40px;
	letter-spacing: 2px;
}
@media print, screen and (min-width: 992px) {
.midasi01{
	font-size: 20px;
	line-height: 35px;
	}
.midasi01 span{
	font-size: 55px;
	letter-spacing: 3px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi01{
	font-size: 22px;
	line-height: 37px;
	}
.midasi01 span{
	font-size: 65px;
  letter-spacing: 4px;
	}
}

/* ----------------------------------------------------
    見出し03
---------------------------------------------------- */
.midasi03{
	font-size: 20px;
	line-height: 30px;
	}
@media print, screen and (min-width: 768px) {
.midasi03{
	font-size: 24px;
	line-height: 39px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi03{
	font-size: 26px;
	line-height: 41px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi03{
	font-size: 30px;
	line-height: 45px;
	}
}

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

/* ----------------------------------------------------
    見出し05
---------------------------------------------------- */
.midasi05{
	font-size: 16px;
  line-height: 26px;  
  padding:8px 15px;
	letter-spacing: 2px;  
  border-radius: 5px;
  color: #fff; /* 任意色 */
  background: #2c3b52; /* 任意色 */
}
@media print, screen and (min-width: 992px) {
.midasi05{
	font-size: 18px;
  line-height: 28px;  
  padding:10px 17px;
  }
}
@media print, screen and (min-width: 1200px) {
.midasi05{
	font-size: 20px;
  line-height: 30px;   
  padding:13px 20px;
  }
}

/* ----------------------------------------------------
    見出し06
---------------------------------------------------- */
.midasi06{
  color: #185db3; /* 任意色 */
	font-size: 20px;
  line-height: 25px;
  display: inline-flex;
  align-items: center;
}
@media print, screen and (min-width: 992px) {
.midasi06{
	font-size: 25px;
  line-height: 30px;
	}
}
.midasi06 i{
  color: #22addb; /* 任意色 */
  font-size: 8px;
  position: relative;
  top: -1px;
  margin-right: 8px;
}

/* ----------------------------------------------------
    見出し07
---------------------------------------------------- */
.midasi07{
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 2px;
	}
@media print, screen and (min-width: 768px) {
.midasi07{
	font-size: 25px;
	line-height: 35px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi07{
	font-size: 30px;
	line-height: 40px;
	}
}

/* ----------------------------------------------------
    見出し08
---------------------------------------------------- */
.midasi08{
	font-size: 18px;
  line-height:28px;
  border-left: 4px solid #185db2;
  padding:8px 0 8px 13px;
	}
.midasi08 span{
	font-size: 14px;
}

@media print, screen and (min-width: 768px) {
.midasi08{
	font-size: 20px;
  line-height: 30px;
  padding:10px 0 10px 15px
	}
.midasi08 span{
	font-size: 15px;
  }
}

/* ----------------------------------------------------
    見出し09
---------------------------------------------------- */
.midasi09{
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  font-weight: normal;
	letter-spacing: 2px;  
	}
.midasi09 span{
	font-size: 30px;
}
@media print, screen and (min-width: 768px) {
.midasi09{
  font-size: 18px;
  line-height: 28px;
	}
.midasi09 span{
	font-size: 35px;
  }
}
@media print, screen and (min-width: 992px) {
.midasi09{
  font-size: 20px;
  line-height: 30px;
	}
.midasi09 span{
	font-size: 40px;
  }
}
@media print, screen and (min-width: 1200px) {
.midasi09{
  font-size: 22px;
  line-height: 32px;
	}
.midasi09 span{
	font-size: 45px;
  }
}

/* 上につけるアイコン
--------------------------*/
.topno_icon {
  padding-top: 38px;
  position: relative;
  text-align: center;
}
.topno_icon::before {
  content: "\f21c";
	font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: 900;  
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  color: #0549a6;
}
@media print, screen and (min-width: 768px) {
.topno_icon {padding-top: 60px;}  
.topno_icon::before {font-size: 50px;}
}

/* ----------------------------------------------------
    見出し21
---------------------------------------------------- */
.midasi21{
	font-size: 16px;
  line-height: 26px;  
	letter-spacing: 2px;
  padding: 0 0 5px 0;  
  border-bottom: 2px solid #222;;
}
@media print, screen and (min-width: 768px) {
.midasi21{
	font-size: 18px;
  line-height: 28px;
  }
}
@media print, screen and (min-width: 992px) {
.midasi21{
	font-size: 20px;
  line-height: 30px;
  }
}
@media print, screen and (min-width: 1200px) {
.midasi21{
	font-size: 25px;
  line-height: 35px;
  }
}

/* ----------------------------------------------------
  ★★★レイアウト（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: 50px;
  }
}
@media screen and (min-width: 1200px) {
  .note_11 {
    gap: 60px;
  }
}
@media screen and (min-width: 1600px) {
  .note_11 {
    gap: 80px;
  }
}
.note_11:last-child { margin-bottom: 0;}
.note_11_box {box-sizing: border-box;}

/* ----------------------------------------------------
  ★★★レイアウト（1:3）
---------------------------------------------------- */
.note_13 {
  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_13 {
    grid-template-columns: 1.2fr 2.8fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
.note_13 {
    grid-template-columns: 1fr 3fr;  
    gap: 50px;
  }
}
@media screen and (min-width: 1200px) {
.note_13 {
    gap: 60px;
  }
}
@media screen and (min-width: 1600px) {
.note_13 {
    gap: 80px;
  }
}
.note_13:last-child { margin-bottom: 0;}
.note_13_box {box-sizing: border-box;}

/* ----------------------------------------------------
  レイアウト（3:2）
---------------------------------------------------- */
.note_32 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_32 {
    grid-template-columns: 3fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  .note_32 {
    grid-template-columns: 3fr 1fr;
    gap: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .note_32 {
    grid-template-columns: 3fr 2fr;
    gap: 40px;    
  }
}
.note_32:last-child {margin-bottom: 0;}
.note_32_box {box-sizing: border-box;}

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

/* ----------------------------------------------------
  ★★★レイアウト（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: 3fr 1fr;  
    gap: 50px;
  }
}
@media screen and (min-width: 1200px) {
.note_31 {
    gap: 60px;
  }
}
@media screen and (min-width: 1600px) {
.note_31 {
    gap: 80px;
  }
}
.note_31:last-child { margin-bottom: 0;}
.note_31_box {box-sizing: border-box;}

/* ----------------------------------------------------
  ★★★レイアウト（3:2）
---------------------------------------------------- */
.note_32 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_32 {
    gap: 20px;
    grid-template-columns: 2fr 0.9fr;    
  }
}
@media screen and (min-width: 992px) {
  .note_32 {
    gap: 30px;
    grid-template-columns: 3fr 1.5fr;    
  }
}
@media screen and (min-width: 1200px) {
  .note_32 {
    grid-template-columns: 3fr 1.5fr;
  }
}
.note_32:last-child { margin-bottom: 0;}
.note_32_box {box-sizing: border-box;}

/* ----------------------------------------------------
  ★★★レイアウト（4:3）
---------------------------------------------------- */
.note_43 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_43 {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
  }
}
@media screen and (min-width: 992px) {
  .note_43 {
    grid-template-columns: 2fr 1fr;
    gap: 60px;
  }
}
@media screen and (min-width: 1200px) {
  .note_43 {
    grid-template-columns: 4fr 3fr; 
    gap: 80px;
  }
}
.note_43:last-child { margin-bottom: 0;}
.note_43_box {box-sizing: border-box;}

/* ----------------------------------------------------
  ★★★レイアウト（1:1）　全てボックス
---------------------------------------------------- */
.zone_11 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 0;
  justify-items: center;
}
@media print, screen and (min-width: 768px) {
  .zone_11 {
    gap: 40px;
    grid-template-columns: 1fr 1fr;    
  }
}
@media print, screen and (min-width: 992px) {
  .zone_11 {
    gap: 50px;
    grid-template-columns: 1fr 1fr;    
  }
}
.zone_11_box {
  background: #f9f8f6;
  border:1px solid #ece8e2;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media print, screen and (min-width: 768px) {
.zone_11_box {
  padding: 40px;
  }
}