@charset "utf-8";

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

/* 丸ゴシック */
.jp02{font-family: 'Zen Maru Gothic', sans-serif;	}

/* 丸文字 */
.jp03{font-family: "Mochiy Pop P One", sans-serif;}

/* ----------------------------------------------------
  Google font　英字
---------------------------------------------------- */
/* バブル文字 */
.en01{
  font-style: italic;
  font-family: "Modak", system-ui;
}

/* 縦長 */
.en02{font-family: "Oswald", sans-serif;}

.font_waku_01{
  color: #f6f4f1;
  -webkit-text-stroke: 0.2px #11ba48;
  font-weight: bold;
}
.font_waku_02{
  color: #fff;
  -webkit-text-stroke: 1px #222;
  font-weight: bold;
}
.font_waku_03{
  color: #ff6825;
  -webkit-text-stroke: 1px #222;
  font-weight: bold;
} 
.font_waku_04{
  color: #11ba48;
  -webkit-text-stroke: 1px #222;
  font-weight: bold;
} 
.font_waku_05{
  color: #4282e0;
  -webkit-text-stroke: 1px #222;
  font-weight: bold;
} 

/* ----------------------------------------------------
  テキスト高さ
---------------------------------------------------- */
.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;}}


/* ----------------------------------------------------
  背景色と文字色
---------------------------------------------------- */
/* 背景色
---------------------------------------------------- */
/* 単色 */
.bg-white{background: #fff;}
.bg-black{background: #222;}
.bg-gray{background: #eee;}
.bg-orange{background: #f66423;}
.bg-blue{background: #4282e0;}
.bg-green{background: #11ba48;}
.bg-cream{background: #f6f4f1;}
.bg-cream02{background: #f3e8d6;}
.bg-red{background: #de2121;}

/* パキっと分かれる */
.bg-separate01{background: linear-gradient(to bottom, #f6f4f1 19px, #f3e8d6 19px);}
@media print, screen and (min-width: 768px) {.bg-separate01{background: linear-gradient(to bottom, #f6f4f1 20px, #f3e8d6 20px);}}
@media print, screen and (min-width: 992px) {.bg-separate01{background: linear-gradient(to bottom, #f6f4f1 35px, #f3e8d6 35px);}}

/* 文字色
-------------------------- */
.white{color:#fff}
.red{color:#de2121}
.orange{color: #ff6825;}
.blue{color:#4282e0}
.green{color:#11ba48}

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

/* ----------------------------------------------------
  枠線
---------------------------------------------------- */
.waku_01{
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;  
}

@media print, screen and (min-width: 768px) {
.waku_02{
  border-left: 2px solid #222;
  }
}

/* ----------------------------------------------------
  見出し
---------------------------------------------------- */
/* 見出し01
---------------------------------------------------- */
.midasi01{
	font-size: 30px;
	line-height: 32px;
  margin-bottom: 20px;
  letter-spacing: 1px;
	}
.midasi01 span{
  font-weight: 600;
	font-size: 50px;
  letter-spacing: 2px;
}
@media print, screen and (min-width: 768px) {
.midasi01{
	font-size: 40px;
	line-height: 43px;
  margin-bottom: 30px;
	}
.midasi01 span{
	font-size: 65px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi01{
	font-size: 40px;
	line-height: 43px;
  }
.midasi01 span{
	font-size: 65px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi01{
	font-size: 35px;
	line-height: 40px;
  margin-bottom: 40px;
	}
.midasi01 span{
	font-size: 70px;
	}
}
@media print, screen and (min-width: 1400px) {
.midasi01{
	font-size: 40px;
	line-height: 50px;
	}
.midasi01 span{
	font-size: 80px;
	}
}

/* 見出し02
---------------------------------------------------- */
.midasi02{
	font-size: 25px;
	line-height: 28px;
  margin-bottom: 20px;
  letter-spacing: 1px;
	}
.midasi02 span{
	font-size: 25px;
  letter-spacing: 2px;
  font-weight: 600;  
}
@media print, screen and (min-width: 768px) {
.midasi02{
	font-size: 25px;
	line-height: 28px;
  margin-bottom: 25px;
  }
.midasi02 span{
	font-size: 25px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi02{
	font-size: 30px;
	line-height: 33px;
  margin-bottom: 30px;
  }
.midasi02 span{
	font-size: 30px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi02{
	font-size: 35px;
	line-height: 33px;
	}
.midasi02 span{
	font-size: 35px;
	}
}

/* 見出し03
---------------------------------------------------- */
.midasi03{
	font-size: 20px;
	line-height: 35px;
  margin-bottom: 10px;
  letter-spacing: 1px;
	}
@media print, screen and (min-width: 768px) {
.midasi03{
	font-size: 25px;
	line-height: 40px;
  margin-bottom: 25px;
	}
}
@media print, screen and (min-width: 992px) {
.midasi03{
	font-size: 30px;
	line-height: 45px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi03{
	font-size: 35px;
	line-height: 50px;
	}
}

/* 見出し04
---------------------------------------------------- */
.midasi04 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 10px;
    letter-spacing: 1px;  
}

@media print, screen and (min-width: 768px) {
.midasi04 {
    font-size: 18px;
    line-height: 28px;
  }
}

/* 見出し05
---------------------------------------------------- */
.midasi05{
	font-size: 20px;
  line-height: 30px;
	letter-spacing: 2px;
  margin-bottom: 15px;
	}
.midasi05 span{
 	font-size: 16px;
}
.midasi05 small{
 	font-size: 16px;
}

@media print, screen and (min-width: 768px) {
.midasi05{
	font-size: 35px;
  line-height: 40px;
	}
.midasi05 span{
	font-size: 20px;
	}
.midasi05 small{
	font-size: 22px;
	}
}

/* 見出し06
---------------------------------------------------- */
.midasi06{
	font-size: 35px;
  line-height: 45px;  
	}
@media print, screen and (min-width: 768px) {
.midasi06{
	font-size: 50px;
  line-height: 60px;
	}
}

/* 見出し07
---------------------------------------------------- */
.midasi07 {
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 2px;
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .midasi07 {
    font-size: 23px;
    line-height: 43px;
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 992px) {
  .midasi07 {
    font-size: 25px;
    line-height: 40px;
    margin-bottom: 60px;
  }
}

.midasi07::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 70px;
  height:3px;
  background-color: #222;
}
@media print, screen and (min-width: 768px) {
.midasi07::after {
    bottom: -18px;
  }
}

/* ----------------------------------------------------
  お知らせ
---------------------------------------------------- */
#information-area_01 {
  height: 300px;
  overflow: scroll; /* 常にスクロールバーを表示 */
  overflow-x: hidden;
  padding-right: 20px; /* 右側に余白を追加してスクロールバーがかぶらないようにする */
}
@media print, screen and (min-width: 768px) {
#information-area_01 {
  height: 230px;
  }
}

/*スクロールバー表示させる*/
#information-area_01::-webkit-scrollbar{ 
   width: 10px;
   border-radius: 5px;  
}
#information-area_01::-webkit-scrollbar-thumb{ 
   background: #222;
   border-radius: 5px;
}
#information-area_01::-webkit-scrollbar-track-piece:start{
   background: #e0d8cd;
   border-radius: 5px;   
}
#information-area_01::-webkit-scrollbar-track-piece:end{
   background: #e0d8cd;
   border-radius: 5px;   
}

.news_table_01 .new{
	color: #de2121;
	font-size: 14px;
	margin-left: 10px;
}
.news_table_01{
	width:98%;
	border-collapse: collapse;
	position: relative;
}
.news_table_01 th{
	padding:10px 0 3px 0;
	display: block;
	font-weight: normal;
	text-align: left;
	letter-spacing: 0.1em;
}

.news_table_01 td{
	padding:0 0 12px 0;
	display: block;
	text-align: left;
}

@media print, screen and (min-width: 768px) {
.news_table_01 th{
	width: 200px;
	padding:5px 0;
	vertical-align:top;
	display:table-cell;
	}
.news_table_01 td{
	padding:5px 0;
	vertical-align:top;
	display:table-cell;
	}
}
@media print, screen and (min-width: 1200px) {
.news_table_01 th{
	width: 220px;
	}
}

.news_table_01 a:link,
.news_table_01 a:visited{
  text-decoration:underline;
  color: #222;
}
.news_table_01 a:hover,
.news_table_01 a:active{
  text-decoration:none;
  color: #222;
}

/* ----------------------------------------------------
  h2
---------------------------------------------------- */
/* 左寄せ　背景画像あり　文字アニメーション
---------------------------------------------------- */
.h2_02{background: url("../images/h2_02.jpg") no-repeat scroll 50% 0% / cover;}
.h2_03{background: url("../images/h2_03.jpg") no-repeat scroll 50% 0% / cover;}
.h2_04{background: url("../images/h2_04.jpg") no-repeat scroll 50% 0% / cover;}
.h2_05{background: url("../images/h2_05.jpg") no-repeat scroll 50% 0% / cover;}
.h2_06{background: url("../images/h2_06.jpg") no-repeat scroll 50% 0% / cover;}
.h2_07{background: url("../images/h2_07.jpg") no-repeat scroll 50% 0% / cover;}
.h2_08{background: url("../images/h2_08.jpg") no-repeat scroll 50% 0% / cover;}

.h2_midasi_01_bgimg {
  position: relative;
  color: white;
  z-index: 0;
  overflow: hidden;
}

.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* ここで暗さを調整 */
  z-index: -1; /* 背景の後ろに来ないように注意 */
}

.h2_midasi_01{
	padding:80px 0 40px 0;
	text-align: center;
}
@media print, screen and (min-width: 768px) {.h2_midasi_01{padding:160px 0 80px 0;}}
@media print, screen and (min-width: 992px) {.h2_midasi_01{padding:140px 0 100px 0;}}
@media print, screen and (min-width:1200px) {.h2_midasi_01{padding:140px 0 120px 0;}}

.h2_midasi_01 p{
	font-size: 30px;
	line-height:40px;
	letter-spacing:2px;
	}
.h2_midasi_01 h2{
	font-size: 20px;
	letter-spacing:2px;
}
@media print, screen and (min-width: 768px) {
.h2_midasi_01 p{
	font-size: 60px;
	line-height:70px;
	}
.h2_midasi_01 h2{
	font-size: 35px;
	letter-spacing:5px;
	}
}
@media print, screen and (min-width: 992px) {
.h2_midasi_01 p{
	font-size: 70px;
	line-height:80px;
	}
.h2_midasi_01 h2{
	font-size: 40px;
	}
}

/* h2アニメ
---------------------------------------------------- */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}	

/* ----------------------------------------------------
  ボタン
---------------------------------------------------- */
/* ----------------------------------------------------
  inline-block
---------------------------------------------------- */
/* btn01_in　白背景色＋黒文字　
---------------------------------------------------- */
.btn01_in {
  display: inline-block;
  width: 270px;
  padding: 20px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #333 !important;
  background: #fff;
  border: 1px solid #333;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.btn01_in:visited {
  color: #333 !important;
}

.btn01_in:hover,
.btn01_in:active {
  background: #eee;
  letter-spacing: 3px;
  color: #333 !important;
  text-decoration: none !important;
}

.btn01_in i {
  font-size: 16px;
  margin: 0 0 0 5px;
}

/* btn02_in　黒背景色＋白文字　inline-block
---------------------------------------------------- */
.btn02_in {
  display: inline-block;
  width: 270px;
  padding: 20px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #fff !important;
  background: #333;
  border: 0px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn02_in:visited {
  color: #fff !important;
}

.btn02_in:hover,
.btn02_in:active {
  color: #fff !important;  
  background: #000;
  letter-spacing: 3px;
  text-decoration: none !important;
}

.btn02_in i {
  font-size: 16px;
  margin: 0 0 0 5px;
}

/* btn03_in　メイン背景色＋黒文字　inline-block
---------------------------------------------------- */
.btn03_in {
  display: inline-block;
  width: 250px;
  padding: 8px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  border: 2px solid #222;
  background: #f66423;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222
}

.btn03_in:visited {
  color: #fff !important;
}

.btn03_in:hover,
.btn03_in:active {
  color: #fff !important;  
  background: #f66423;
  letter-spacing: 3px;
  text-decoration: none !important;
}

.btn03_in i {
  font-size: 16px;
  margin: 0 5px;
}

/* btn04_in　緑
---------------------------------------------------- */
.btn04_in {
  display: inline-block;
  width: 250px;
  padding: 8px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  border: 2px solid #222;
  background: #11ba48;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222
}

.btn04_in:visited {
  color: #fff !important;
}

.btn04_in:hover,
.btn04_in:active {
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 2px;  
}

.btn04_in i {
  margin-right: 10px;
}

/* btn04_in_b オレンジ
--------------------------- */
.btn04_in_b {
  display: inline-block;
  width: 250px;
  padding: 8px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  border: 2px solid #222;
  background: #f66423;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222
}

.btn04_in_b:visited {
  color: #fff !important;
}

.btn04_in_b:hover,
.btn04_in_b:active {
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 2px;  
}

/* btn04_in_c 青
--------------------------- */
.btn04_in_c {
  display: inline-block;
  width: 250px;
  padding: 8px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  border: 2px solid #222;
  background: #4282e0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222
}

.btn04_in_c:visited {
  color: #fff !important;
}

.btn04_in_c:hover,
.btn04_in_c:active {
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 2px;  
}

/* btn05_in　白背景＋黒文字＋黒枠
---------------------------------------------------- */
.btn05_in {
  display: inline-block;
  width: 200px;
  padding: 6px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #222 !important;
  background: #fff;
  border: 2px solid #222;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222;
}

.btn05_in:visited {
  color: #222 !important;
}

.btn05_in:hover,
.btn05_in:active {
  background: #eee;
  letter-spacing: 2px;
  color: #222 !important;
  text-decoration: none !important;
}

.btn05_in i {
  font-size: 16px;
  margin: 0 5px 0 0;
}

/* btn06_in　白背景＋オレンジ
---------------------------------------------------- */
.btn06_in {
  display: block;
  width: 100%;
  padding: 15px 5px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  background: #f66423;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
}

@media print, screen and (min-width: 768px) {
.btn06_in {
  display: inline-block;
  width: 400px;
  padding: 20px;  
  }
}

.btn06_in:visited {
  color: #fff !important;
}

.btn06_in:hover,
.btn06_in:active {
  background: #f66423;
  letter-spacing: 2px;
  color: #fff !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------
  block
---------------------------------------------------- */
/* btn01　白背景色＋黒文字　block
---------------------------------------------------- */
.btn01 {
  display: block;
  width: 100%;
  padding: 20px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #222 !important;
  background: #fff;
  border: 2px solid #222;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222;
}

.btn01:visited {
  color: #222 !important;
}

.btn01:hover,
.btn01:active {
  background: #eee;
  letter-spacing: 3px;
  color: #222 !important;
  text-decoration: none !important;
}

.btn01 i {
  font-size: 16px;
  margin: 0 0 0 5px;
}

/* btn05　黒背景色＋黒文字　block
---------------------------------------------------- */
.btn02 {
  display: block;
  width: 100%;
  padding: 20px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #fff !important;
  background: #333;
  border: 0px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn02:visited {
  color: #fff !important;
}

.btn02:hover,
.btn02:active {
  color: #fff !important;  
  background: #000;
  letter-spacing: 3px;
  text-decoration: none !important;
}

.btn02 i {
  font-size: 16px;
  margin: 0 0 0 5px;
}

/* btn03　メイン背景色＋黒文字　block
---------------------------------------------------- */
.btn03 {
  display: block;
  width: 100%;
  padding: 20px 2px;
  text-align: center;
  letter-spacing: 2px;
  color: #fff !important;
  background: #33b7d1;
  border: 0px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 20px
}

.btn03:visited {
  color: #fff !important;
}

.btn03:hover,
.btn03:active {
  color: #fff !important;  
  background: #008da9;
  letter-spacing: 3px;
  text-decoration: none !important;
}

.btn03 i {
  font-size: 16px;
  margin: 0 0 0 5px;
}


/* btna
---------------------------------------------------- */
.btna::before,
.btna::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	}
.btna,
.btna::before,
.btna::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	transition: all .5s;
	}

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

/* シンプル　棒
---------------------------------------------------- */
.table1{width:100%; border-collapse:collapse; border-bottom:1px solid #E5DDD2;}
.table1 th{
	padding:10px 20px;
	vertical-align:top;
	display: block;
	border-top:1px solid #E5DDD2;
	border-left:0px;
	border-right:0px;
	font-size: 100%;
	text-align: left;
	font-weight: normal;
  color:#9A8A78;
  background: #f6f4f1;
	}
.table1 td{
	padding:10px 20px;
	display: block;
	text-align: left;
	border-top:1px solid #E5DDD2;
	border-left:0px;
	border-right:0px;
  background: #fff;
  word-break: break-word;
	}
@media print, screen and (min-width: 768px) {
.table1{ border-top:0px; border-bottom:0px;}
.table1 th{
	padding:23px 0;
  color: #222;
	border-top:1px solid #222;
	border-left:0px;
	border-right:0px;
	border-bottom:1px solid #222;
	vertical-align:middle;
	display:table-cell;
	width: 30%;
  background: transparent;
  text-align: center;
	}
.table1 td{
	padding:23px 0 23px 30px;
	border-top:1px solid #D5C8B6;
	border-right:0px;
	border-left:0px;
	border-bottom:1px solid #D5C8B6;
	text-align: left !important;
	display:table-cell;
  background: transparent;
	}
}

@media only screen and (max-width: 767px) {
.table1 span{
	text-decoration:underline;
	color:#222;
	}
}

/* ----------------------------------------------------
  table2
---------------------------------------------------- */
.table2{
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid #222;
	background: #fff;
}

@media only screen and (max-width: 767px) {
.table2 th{
	width: 25%;
	padding: 5px 10px;  
	text-align: center;
	display: table-cell;
	font-weight: normal;
  vertical-align: middle;
	background-color: #eee;	
	border-top: 0px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}
.table2 td{
	padding: 5px 10px;
	display: table-cell;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}
}

@media print, screen and (min-width: 768px) {
.table2 th{
	width: 35%;  
	text-align: center;
	padding: 15px;
	display: table-cell;
  vertical-align: middle;
	font-weight: normal;
	background-color: #eee;	
	border-top: 0px;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}
.table2 td{
	padding: 15px;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #ccc;
	}
}

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

/* ----------------------------------------------------
  下部　電話ボタン
---------------------------------------------------- */
.contact_bottom_tel_01{
	display:block;
	color:#fff;	
	background-color: #222;
	font-size:120%;	
	padding:15px 5px;
	text-align:center;
	font-weight: normal;
	margin-bottom: 8px;
  border-radius: 100px;
	}
	
.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{
	background-color:transparent;
	padding:0;
	color: #222;
	font-size:24px;
	margin-bottom: 10px;
	}
.contact_bottom_tel_01 i{margin:0 5px 0 0; color:#222;}
}

@media print, screen and (min-width: 992px) {
.contact_bottom_tel_01{font-size:35px;}
.contact_bottom_tel_01 i{margin:0 8px 5px 0; font-size: 25px;}
}

/* ----------------------------------------------------
   お問い合わせ
---------------------------------------------------- */
.mail-box{
	padding: 15px 10px;
	background: #fff;
	text-align: center;
	border:2px solid #222;
  border-radius: 10px;
	}
.mail-box h3{
	color:#222;
  font-weight: 600;
	font-size: 20px;
	margin-bottom: 20px;
	}
.mail-box h3 span{
	padding-bottom: 5px;
	border-bottom: 1px solid #222;
	}

@media print, screen and (min-width: 768px){
.mail-box{
	padding: 40px 10px;
	}
.mail-box h3{
	font-size: 30px;
	margin-bottom: 30px;
	}
}

/* 電話
------------------------ */
.contact_btn_tel{
	display:block;
	color:#fff;	
	background-color: #222;
	font-size:120%;	
	padding:15px 5px;
	text-align:center;
	font-weight: normal;
	margin-bottom: 8px;
  border-radius: 100px;
	}
	
.contact_btn_tel a:link,
.contact_btn_tel a:visited,
.contact_btn_tel a:hover,
.contact_btn_tel a:active{color:#fff}
.contact_btn_tel i{font-size:80%; margin:0 5px 0 0; color:#fff; vertical-align: middle;}

@media print, screen and (min-width: 768px) {
.contact_btn_tel{
	display:inline;
	background-color:transparent;
	padding:0;
	color: #222;
	font-size:24px;
	margin-bottom: 0;
	}
.contact_btn_tel i{margin:0 5px 0 0; color:#222;}
}

@media print, screen and (min-width: 992px) {
.contact_btn_tel{font-size:35px;}
.contact_btn_tel i{margin:0 8px 5px 0; font-size: 25px;}
}

/* FAX
------------------------ */
.contact_btn_fax{
	font-weight:lighter;		
	display:block;
	font-size:120%;	
	text-align:center;
	}

.contact_btn_fax a:link,
.contact_btn_fax a:visited,
.contact_btn_fax a:hover,
.contact_btn_fax a:active{color:#fff}
.contact_btn_fax i{font-size:90%; margin:0 5px 5px 0; vertical-align: middle;}

@media print, screen and (min-width: 768px) {
.contact_btn_fax{
	display:inline;
	background-color:transparent;
	padding:0;
	text-align:left;
	font-size:24px;
	margin-bottom: 0;
	}
.contact_btn_fax i{margin:0 5px 0 0; color:#222;} /* アイコンの色変更 */
}

@media print, screen and (min-width: 992px) {
.contact_btn_fax{font-size:35px;}
.contact_btn_fax i{margin:0 8px 5px 0; font-size: 25px;}
}

/* ----------------------------------------------------
   余白（左右）
---------------------------------------------------- */
@media print, screen and (min-width: 768px) {.wide01{ padding:0 1%;}}
@media print, screen and (min-width: 1200px) {.wide01{ padding:0 5%;}}

@media print, screen and (min-width: 768px) {.wide02{ padding:0 1%;}}
@media print, screen and (min-width: 1200px) {.wide02{ padding:0 5%;}}
@media print, screen and (min-width: 1600px) {.wide02{ padding:0 10%;}}

@media print, screen and (min-width: 768px) {.wide03{ padding:0 1%;}}
@media print, screen and (min-width: 1200px) {.wide03{ padding:0 5%;}}
@media print, screen and (min-width: 1600px) {.wide03{ padding:0 15%;}}

@media print, screen and (min-width: 768px) {.wide04{ padding:0 1%;}}
@media print, screen and (min-width: 1200px) {.wide04{ padding:0 4%;}}

/* ----------------------------------------------------
   余白（上下）
---------------------------------------------------- */
.pp00 {padding: 0 !important;}
@media print, screen and (min-width: 768px) {.pp00-2 {padding: 0 !important;}}

.part30{padding:20px 0;}
@media print, screen and (min-width: 768px) {.part30{padding:30px 0}}

.part40{padding:20px 0;}
@media print, screen and (min-width: 768px) {.part40{padding:40px 0}}

.part60{padding:30px 0;}
@media print, screen and (min-width: 768px) {.part60{padding:60px 0}}

.part80{padding:30px 0;}
@media print, screen and (min-width: 768px) {.part80{padding:80px 0}}

.part100{padding:20px 0 30px 0;}
@media print, screen and (min-width: 768px) { .part100{padding:60px 0}}
@media print, screen and (min-width: 992px) { .part100{padding:80px 0}}
@media print, screen and (min-width: 1200px) {.part100{padding:100px 0}}

.part120{padding:30px 0;}
@media print, screen and (min-width: 768px) { .part120{padding:60px 0}}
@media print, screen and (min-width: 992px) { .part120{padding:100px 0}}
@media print, screen and (min-width: 1200px) {.part120{padding:120px 0}}

.part150{padding:30px 0;}
@media print, screen and (min-width: 992px) { .part150{padding:100px 0}}
@media print, screen and (min-width: 1200px) {.part150{padding:150px 0}}

.part170{padding:30px 0;}
@media print, screen and (min-width: 768px) { .part170{padding:60px 0}}
@media print, screen and (min-width: 992px) { .part170{padding:100px 0}}
@media print, screen and (min-width: 1200px) {.part170{padding:170px 0}}

.part200{padding:30px 0;}
@media print, screen and (min-width: 768px) { .part200{padding:60px 0}}
@media print, screen and (min-width: 992px) { .part200{padding:100px 0}}
@media print, screen and (min-width: 1200px) {.part200{padding:170px 0}}
@media print, screen and (min-width: 1400px) {.part200{padding:200px 0}}

.part_side60{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side60{ padding:0 0 60px 0}}

.part_side80{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side80{ padding:0 0 80px 0}}

.part_side100{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side100{ padding:0 0 80px 0}}
@media print, screen and (min-width: 992px) { .part_side100{ padding:0 0 100px 0}}

.part_side120{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side120{padding:0 0 60px 0}}
@media print, screen and (min-width: 992px) { .part_side120{padding:0 0 100px 0}}
@media print, screen and (min-width: 1200px) {.part_side120{padding:0 0 120px 0}}

.part_side150{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side150{ padding:0 0 80px 0}}
@media print, screen and (min-width: 992px) { .part_side150{ padding:0 0 100px 0}}
@media print, screen and (min-width: 1200px) {.part_side150{padding:0 0 150px 0}}

.part_side170{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side170{ padding:0 0 80px 0}}
@media print, screen and (min-width: 992px) { .part_side170{ padding:0 0 100px 0}}
@media print, screen and (min-width: 1200px) {.part_side170{padding:0 0 170px 0}}

.part_side200{padding:0 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_side200{ padding:0 0 80px 0}}
@media print, screen and (min-width: 992px) { .part_side200{ padding:0 0 100px 0}}
@media print, screen and (min-width: 1200px) {.part_side200{padding:0 0 170px 0}}
@media print, screen and (min-width: 1400px) {.part_side200{padding:0 0 200px 0}}


.part_side80_b{padding:30px 0 0 0;}
@media print, screen and (min-width: 768px) { .part_side80_b{ padding:60px 0 0 0}}
@media print, screen and (min-width: 992px) { .part_side80_b{ padding:80px 0 0 0}}

.part_skew_01{padding:10px 0 30px 0;}
@media print, screen and (min-width: 768px) { .part_skew_01{ padding:10px 0 80px 0}}
@media print, screen and (min-width: 992px) { .part_skew_01{ padding:20px 0 100px 0}}

/* ----------------------------------------------------
    画像並び替え
---------------------------------------------------- */
/* モバイル時 */
@media only screen and (max-width: 767px) {
.area-first{order:1;}
.area-last{order:2;}
}

/* タブレット時 */
.area-first02{order:1;}
.area-last02{order:2;}

@media print, screen and (min-width: 992px) {
.area-first02{order:2;}
.area-last02{order:1;}
}

/* ----------------------------------------------------
    左右端に画像
---------------------------------------------------- */
.text-section {
  position: relative;
  padding: 25px 2rem;
  text-align: center;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  }
@media print, screen and (min-width: 768px) {
.text-section {
  position: relative;
  padding: 4rem 3rem;
  text-align: center;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  }
}
.text-section::before,
.text-section::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}
.text-section::before {
  left: 10px;
  background-image: url("../images/slash-l.png");
}
.text-section::after {
  right:10px;
  background-image: url("../images/slash-r.png");
}
@media print, screen and (min-width: 768px) {
.text-section::before {
  left: 0;
  }
.text-section::after {
  right: 0;
  }
}
.text-section::before,
.text-section::after {
    width: 23px;
    height: 42px;
}
@media print, screen and (min-width: 768px) {
  .text-section::before,
  .text-section::after {
    width: 43px;
    height: 62px;
  }
}
@media print, screen and (min-width: 1200px) {
  .text-section::before,
  .text-section::after {
    width: 53px;
    height: 72px;
  }
}

/* ----------------------------------------------------
   レイアウト
---------------------------------------------------- */
/* ボックス3つ並び（白ボックス） bootstrap
---------------------------------------------------- */
.box_yohakubox_01{
  padding:60px 20px 20px 20px;
  background-color: #f6f4f1;
  border:2px solid #222;
  border-radius: 10px;
  position:relative;
}
@media print, screen and (min-width: 768px) {
  .box_yohakubox_01{
    padding:75px 30px 30px 30px;
  }
}
@media print, screen and (min-width: 992px) {
  .box_yohakubox_01{
    padding:75px 20px 20px 20px;
  }
}
@media print, screen and (min-width: 1200px) {
  .box_yohakubox_01{
    padding:90px 30px 30px 30px;
    margin:0 10px;
  }
}
@media print, screen and (min-width: 1400px) {
  .box_yohakubox_01{
    padding:100px 40px 40px 40px;
    margin:0 20px;
  }
}

.box_yohakubox_01 .midasi_number{
  font-size: 30px;
  line-height: 23px;
  padding:7px 14px 10px 10px;
  top:-15px;
  left:20px;
  color: #fff;
  display: inline-block;
  position:absolute;
  text-align: center;
  border-radius: 10px;
}
.box_yohakubox_01 .midasi_number span{
  font-size: 14px;
  margin-left: 5px;
}

@media print, screen and (min-width: 768px) {
  .box_yohakubox_01 .midasi_number{
    font-size: 40px;
    line-height: 30px;
    padding:7px 21px 14px 15px;
    top:-30px;
    left:30px;
  }
.box_yohakubox_01 .midasi_number span{
  font-size: 16px;
  }
}

@media print, screen and (min-width: 992px) {
  .box_yohakubox_01 .midasi_number{
    font-size: 40px;
    line-height: 27px;    
    padding:7px 21px 14px 15px;
    top:-30px;
    left:20px;
  }
.box_yohakubox_01 .midasi_number span{
  font-size: 16px;
  }
}

@media print, screen and (min-width: 1200px) {
  .box_yohakubox_01 .midasi_number{
    font-size: 45px;
    line-height: 32px;
    padding:7px 21px 14px 15px;    
    top:-20px;
    left:-20px;
  }
.box_yohakubox_01 .midasi_number span{
  font-size: 18px;
  }
}

.box_yohakubox_01 h4 {
  font-size: 30px;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
.box_yohakubox_01 h4 {
  font-size: 30px;
  margin-bottom: 15px;
  }
}
@media print, screen and (min-width: 1200px) {
  .box_yohakubox_01 h4 {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 1800px) {
  .box_yohakubox_01 h4 {
    font-size: 31px;
  }
}

.box_yohakubox_01 .text01 {
  margin-bottom: 15px;
}
@media print, screen and (min-width: 768px) {
  .box_yohakubox_01 .text01 {
    margin-bottom: 20px;
  }
}

/* ----------------------------------------------------
   レイアウト
---------------------------------------------------- */
/* 左右配置　グリッド（２：２）左画像
---------------------------------------------------- */
.box_sayu_03 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px ;
}

@media print, screen and (min-width: 768px) {
  .box_sayu_03 {
    grid-template-columns: 1fr 2fr;    
    gap: 40px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_sayu_03 {
    grid-template-columns: 2fr 3fr;   
    gap: 50px ;
  }
}

@media print, screen and (min-width: 1400px) {
  .box_sayu_03 {
    grid-template-columns: 1fr 1fr;    
    gap: 100px ;
  }
}

.box_sayu_03_box { 
  display: grid;
  grid-template-rows: subgrid;
}

/* テキストエリア */
.box_sayu_03_text{
  padding:0 20px 10px 20px;
  }
@media print, screen and (min-width: 768px) {
.box_sayu_03_text{
  padding:0 40px 0 0;
  }
}
@media print, screen and (min-width: 992px) {
.box_sayu_03_text{
  padding:0 60px 0 0;
  }
}
@media print, screen and (min-width: 1200px) {
.box_sayu_03_text{
  padding:0 100px 0 0;
  }
}

/* 画像を縦長にする
------------------------------------ */
/* 768px〜991px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .tatenaga_chosei_img_03 {
    aspect-ratio: 1 / 2;
    overflow: hidden;
  }

  .tatenaga_chosei_img_03 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 992px〜1399px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tatenaga_chosei_img_03 {
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }

  .tatenaga_chosei_img_03 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 992px〜1399px */
@media screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .tatenaga_chosei_img_03 {
    aspect-ratio: 1.7 / 1.7;
    overflow: hidden;
  }

  .tatenaga_chosei_img_03 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 1600px以上 */
@media print, screen and (min-width: 1600px) {
  .tatenaga_chosei_img_03 {
    aspect-ratio: auto;
    overflow: visible;
  }

  .tatenaga_chosei_img_03 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
}

/* ----------------------------------------------------
   レイアウト
---------------------------------------------------- */
/* 左右配置　グリッド（２：２）右画像
---------------------------------------------------- */
.box_sayu_04 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px ;
}

@media print, screen and (min-width: 768px) {
  .box_sayu_04 {
    grid-template-columns: 2fr 1fr;    
    gap: 40px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_sayu_04 {
    grid-template-columns: 3fr 2fr;   
    gap: 50px ;
  }
}

@media print, screen and (min-width: 1400px) {
  .box_sayu_04 {
    grid-template-columns: 1fr 1fr;    
    gap: 100px ;
  }
}

.box_sayu_04_box { 
  display: grid;
  grid-template-rows: subgrid;
}

/* box_sayu_04_text */
.box_sayu_04_text{
  padding:0 20px 10px 20px;
  }
@media print, screen and (min-width: 768px) {
.box_sayu_04_text{
  padding:0 0 0 40px;
  }
}
@media print, screen and (min-width: 992px) {
.box_sayu_04_text{
  padding:0 0 0 60px;
  }
}
@media print, screen and (min-width: 1200px) {
.box_sayu_04_text{
  padding:0 0 0 100px;
  }
}

/* 画像を縦長にする
------------------------------------ */
/* 768px〜991px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .tatenaga_chosei_img_04 {
    aspect-ratio: 1 / 2;
    overflow: hidden;
  }

  .tatenaga_chosei_img_04 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 992px〜1399px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .tatenaga_chosei_img_04 {
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }

  .tatenaga_chosei_img_04 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 992px〜1399px */
@media screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .tatenaga_chosei_img_04 {
    aspect-ratio: 1.7 / 1.7;
    overflow: hidden;
  }

  .tatenaga_chosei_img_04 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 1600px以上 */
@media print, screen and (min-width: 1600px) {
  .tatenaga_chosei_img_04 {
    aspect-ratio: auto;
    overflow: visible;
  }

  .tatenaga_chosei_img_04 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
}

/* ----------------------------------------------------
   レイアウト
---------------------------------------------------- */
/*    左右画像配置　余白ボックス
---------------------------------------------------- */
.bg_photo_01{background: url("../images/bg_photo_01.jpg") no-repeat scroll 50% 0% / cover;}
.bg_photo_02{background: url("../images/bg_photo_02.jpg") no-repeat scroll 50% 0% / cover;}

.space_box01{
    padding:30px 0;
}
@media print, screen and (min-width: 768px) {
  .space_box01{
    padding: 60px 40px;
  }
}
@media print, screen and (min-width: 992px) {
  .space_box01{
    padding: 80px 70px;
  }
}
@media print, screen and (min-width: 1400px) {
  .space_box01{
    padding: 80px;
  }
}

/* ----------------------------------------------------
   レイアウト
---------------------------------------------------- */
/*    左右配置　グリッドレイアウト（１：２）
---------------------------------------------------- */
.box_arrangement_01 {
  width: 100%;
  margin: 0 auto;
  display: grid;/* グリッドレイアウトを指定  親要素・子要素両方にdisplay:gridを命令 */   
  grid-template-columns: 1fr;/* グリッドの列の幅を指定 */
  gap: 10px ;/* グリッドの列・行両方の間の余白を指定 */
}

@media print, screen and (min-width: 768px) {
  .box_arrangement_01 {
    gap: 20px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_arrangement_01 {
    gap: 40px ;
    grid-template-columns: 1fr 2fr;     
  }
}

@media print, screen and (min-width: 1200px) {
  .box_arrangement_01 {
    grid-template-columns: 1fr 2fr; 
    gap: 80px ;
  }
}

/*    左右配置　グリッドレイアウト（２：１）
---------------------------------------------------- */
.box_arrangement_02 {
  width: 100%;
  margin: 0 auto;
  display: grid;/* グリッドレイアウトを指定  親要素・子要素両方にdisplay:gridを命令 */   
  grid-template-columns: 1fr;/* グリッドの列の幅を指定 */
  gap: 10px ;/* グリッドの列・行両方の間の余白を指定 */
}

@media print, screen and (min-width: 768px) {
  .box_arrangement_02 {
    gap: 20px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_arrangement_02 {
    grid-template-columns: 2fr 1fr;     
    gap: 40px ;
  }
}

@media print, screen and (min-width: 1200px) {
  .box_arrangement_02 {
    grid-template-columns: 2fr 1fr; 
    gap: 80px ;
  }
}


/* ----------------------------------------------------
	   カテゴリ　タイトル
---------------------------------------------------- */
.ctgr_title{
	font-size: 28px;
  line-height: 38px;
  margin-bottom: 10px;
	letter-spacing: 2px;
	}

@media print, screen and (min-width: 768px) {
.ctgr_title{
	font-size: 35px;
  line-height: 45px;
  margin-bottom: 20px; 
	}
}

@media print, screen and (min-width: 768px) {
.ctgr_title{
  text-align: center;
	}
}

@media print, screen and (min-width: 1200px) {
.ctgr_title{
	font-size: 40px;
  line-height: 45px;
  margin-bottom: 30px;
	}
}

/* ----------------------------------------------------
    カテゴリ　ボックス3並び
---------------------------------------------------- */
.grid_ctgr_01 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 40px;
}

@media print, screen and (min-width: 768px) {
  .grid_ctgr_01 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media print, screen and (min-width: 992px) {
  .grid_ctgr_01 {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* ----------------------------------------------------
    カテゴリ　アイテム
---------------------------------------------------- */
.grid_ctgr_box_01 {
  padding: 15px;
  border: 2px solid #222;
  background-color: #f9f9f9;
  border-radius: 10px;
  transition: box-shadow 0.3s;
}
@media print, screen and (min-width: 992px) {
.grid_ctgr_box_01 {
  padding: 30px;
  }
}

.grid_ctgr_box_01 .photo-ofi {
  margin-bottom: 15px;
}

.grid_ctgr_box_01 h4 {
  font-size: 18px;
  line-height: 28px;
  color: #11ba48;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
.grid_ctgr_box_01 h4 {
  font-size: 20px;
  line-height: 30px;
  }
}

.grid_ctgr_box_text{
  margin-bottom: 10px;
}

.grid_ctgr_box_btn {
  display: inline-block;
  width: 200px;
  padding: 8px 2px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff !important;
  border: 2px solid #222;
  background: #11ba48;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
  box-shadow:5px 5px #222
}

.grid_ctgr_box_btn:visited {
  color: #fff !important;
}

.grid_ctgr_box_btn:hover,
.grid_ctgr_box_btn:active {
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 2px;  
}


/* ----------------------------------------------------
	   ページング
---------------------------------------------------- */
.part_paging{padding:30px 0 0 0}
@media print, screen and (min-width: 992px) {.part_paging{padding:40px 0 0 0}}

.paging { text-align: center; font-size: 90%;}
.paging span.current,
.paging span.paging-text{
	margin:0px 0.5px;
	color:#333;
	border:2px solid #333;
	zoom:1;
	display:inline-block;
	overflow:hidden;
	text-decoration:none;
	background: #fff;
  border-radius: 5px;  
}
.paging span.paging-text a{
	padding:5px 8.5px;
	display:block;
	color: #333;
}
.paging span.current{
	background: #333;
	border:2px solid #333;
	color:#fff;
	zoom:1;
	padding:5px 8.5px;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
  border-radius: 5px;
}
.paging span.paging-text a:hover{
	background: #333;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	opacity: 1;
}

@media print, screen and (min-width: 768px) {
	.paging { font-size: 100%;}
	.paging span.current,
	.paging span.paging-text{margin:0px 2px;}
	.paging span.paging-text a{padding:10px 15px;}
	.paging span.current{padding:10px 15px;}
}

/* ----------------------------------------------------
  detail.html
---------------------------------------------------- */
.news_days .news_day{
  float: left;
  display: inline-block;
  margin:0 0 15px 0;
}

.news_days .news_ctgr{
  float: left;
  display: inline-block;
  text-align: center;
  color: #fff;
  background:#333;
  font-size: 16px;
  padding:5px 18px 6px 20px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.news_title{
  font-size: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #222;
  }
@media print, screen and (min-width: 768px) {
.news_title{
  font-size: 25px;
  padding-bottom: 15px;
  }
}

.news_info{
  font-size: 18px;
  margin-bottom: 10px;
  color: #E43437;
  }
@media print, screen and (min-width: 768px) {
.news_info{
  font-size: 20px;
  margin-bottom: 15px;
  }
}

/* ----------------------------------------------------
 works detail.html
---------------------------------------------------- */
.works_info{margin-bottom: 10px;}

/* ----------------------------------------------------
    ボックス並び
---------------------------------------------------- */
.seiton_01 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 40px;
}

@media print, screen and (min-width: 768px) {
  .seiton_01 {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media print, screen and (min-width: 992px) {
  .seiton_01 {
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }
}
@media print, screen and (min-width: 1200px) {
  .seiton_01 {
    gap: 60px 80px;
  }
}
@media print, screen and (min-width: 1400px) {
  .seiton_01 {
    gap: 80px 100px;
  }
}

/* seiton_box_01
----------------------------- */
.seiton_box_01 p {
  margin-bottom: 10px;
}

.seiton_box_01 h4 {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 5px;
}
@media print, screen and (min-width: 768px) {
.seiton_box_01 h4 {
  font-size: 20px;
  line-height: 30px;
  }
}


/* 左右配置　グリッドレイアウト（１：２）
------------------------------------ */
.box_sayu_01 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px ;
}

@media print, screen and (min-width: 768px) {
  .box_sayu_01 {
    grid-template-columns: 1fr 2fr;    
    gap: 40px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_sayu_01 {
    grid-template-columns: 1fr 2fr;   
    gap: 40px ;
  }
}

@media print, screen and (min-width: 1200px) {
  .box_sayu_01 {
    grid-template-columns: 4fr 5fr;      
    gap: 60px ;
  }
}

@media print, screen and (min-width: 1400px) {
  .box_sayu_01 {
    grid-template-columns: 2fr 3fr;   
    gap: 120px ;
  }
}

.box_sayu_01_box { 
  display: grid;
  grid-template-rows: subgrid;
}
/* 左右配置　グリッドレイアウト（１：２）
------------------------------------ */
.box_sayu_02 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media print, screen and (min-width: 768px) {
  .box_sayu_02 {
    grid-template-columns: 2fr 1fr;
    gap: 40px ;
  }
}

@media print, screen and (min-width: 992px) {
  .box_sayu_02 {
    grid-template-columns: 2fr 1fr;   
    gap: 40px ;
  }
}

@media print, screen and (min-width: 1200px) {
  .box_sayu_02 {
    grid-template-columns: 5fr 4fr;      
    gap: 60px ;
  }
}

@media print, screen and (min-width: 1400px) {
  .box_sayu_02 {
    grid-template-columns: 3fr 2fr;   
    gap: 120px ;
  }
}

.box_sayu_02_box { 
  display: grid;
  grid-template-rows: subgrid;
}


/* 左右配置した際の画像縦長にしたりする
------------------------------------ */
/* 768px〜991px：細長い */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .tatenaga_chosei_img {
    aspect-ratio: 1 / 3.1;
    overflow: hidden;
  }

  .tatenaga_chosei_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 992px〜1399px：やや縦長 */
@media screen and (min-width: 992px) and (max-width: 1399.98px) {
  .tatenaga_chosei_img {
    aspect-ratio: 2 / 3.7;
    overflow: hidden;
  }

  .tatenaga_chosei_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
}

/* 1400px以上：元のアスペクト比に戻す */
@media print, screen and (min-width: 1400px) {
  .tatenaga_chosei_img {
    aspect-ratio: auto;
    overflow: visible;
  }

  .tatenaga_chosei_img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
}

/* ----------------------------------------------------
    Before / After
---------------------------------------------------- */
.ba_area{
  background: #fff;
  border:2px solid #222;
  padding: 20px;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
.ba_area{
  padding: 40px;
  }
}
@media print, screen and (min-width: 1200px) {
.ba_area{
  padding: 50px;
  }
}

.works-arrow02{
	width: 100%;
	padding: 10px 0 15px 0;
	}
.works-arrow02 i{
	font-size: 30px;
	color:#222;
  margin: 0 auto !important;
	}

.works-box03
{position: relative;}
.works-box04
{position: relative;}


@media print, screen and (min-width: 768px){
.works-box03{
	float: left;
	width: 44%;
	}
.works-arrow02{
	float: left;
	width: 2%;
	padding: 14% 0 0 4.5%;
	}
.works-box04{
	float: right;
	width: 44%;
	}
.works-arrow02 i{
	font-size: 25px;
	}
}
@media print, screen and (min-width: 1200px){
.works-box03{
	float: left;
	width: 44%;
	}
.works-arrow02{
	float: left;
	width: 2%;
	padding: 14% 0 0 5%;
	}
.works-box04{
	float: right;
	width: 44%;
	}
.works-arrow02 i{
	font-size: 25px;
	}
}

@media print, screen and (min-width: 1400px){
.works-box03{
	width: 44%;
	}
.works-arrow02{
	width: 2%;
	padding: 15% 0 0 4.5%;
	}
.works-box04{
	width: 44%;
	}
.works-arrow02 i{
	font-size: 40px;
	}
}

.item-text{
	margin-bottom: 20px;
}

.before{
	position:absolute;
	left:0;
	top:0;
	color: #fff;
	background: #222;
	padding:10px 30px 11px 30px;
	z-index: 1;
	}

.after{
	position:absolute;
	left:0;
	top:0;
	color: #fff;
	background: #222;
	padding:10px 30px 11px 30px;
	z-index: 1;
	}