@charset "UTF-8";

@media (min-width: 1400px) {
	.con_max_xl {
		max-width: 1200px;
	}
}
@media (min-width: 1200px) {
	.con_max_lg {
		max-width: 992px;
	}
}
@media (min-width: 992px) {
	.con_max_md {
		max-width: 768px;
	}
}
@media (min-width: 768px) {
	.con_max_sm {
		max-width: 576px;
	}
}

.w_min_100 {
	min-width: 100px;
}
.w_min_125 {
	min-width: 125px;
}
.w_min_150 {
	min-width: 150px;
}
.w_min_200 {
	min-width: 200px;
}
.w_min_300 {
	min-width: 300px;
}
.w_min_500 {
	min-width: 500px;
}
.w_max_200 {
	max-width: 200px;
}
.w_max_300 {
	max-width: 300px;
}
.w_max_500 {
	max-width: 500px;
}

.mt-2em {
	margin-top: 2em;
}

.box01 {
	border: 4px solid #FFF4F4;
	background-color: #FFF4F4;
	margin-bottom: 1.6rem;
	padding: 1.6rem;
}

.box_cont {
	font-size: clamp(2rem, calc(2rem + ((1vw - 0.36rem) * 0.5435)), 2.5rem);
  min-height: 0vw;
	margin: 2em 0 0;
	display: inline-block;
	position: relative;
	top: 2px;
	padding: 0.2em 0.5em 0.2em 2em;
	line-height: 1.5em;
	color: #ffffff;
	background: #C3B68F;
	font-weight: bold;
	text-align: center;
	border-radius: 2px 2px 0 0;
}
.box_cont::before {
  font-family: "Font Awesome 6 Free";
	font-weight: 900;
  content: "\f0ca";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
}

.box_cont_inner {
	background: #FFF;
	border: solid 2px #C3B68F;
	border-radius: 0 5px 5px;
	padding: 20px 30px 10px;
	margin-bottom: 2em;
}
.box_cont_inner a {
	color: #343435;
	display: block;
	border-bottom: 1px solid #C3B68F;
	text-decoration: none;
}
.box_cont_inner a:hover {
	border-bottom-color: #FFF;
	text-decoration: none;
	color: #827346;
	position:relative;
	top:1px;
	left:1px;
}

.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}
 
.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.matrix .bg-wrap .inn.large {
	font-size: clamp(1.8rem, calc(1.8rem + ((1vw - 0.36rem) * 0.5435)), 2rem);
  font-weight: bold;
	display: block;
	padding: 0.5em 0 0.7em;
}
.matrix .bg-wrap .inn.large:before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #c6c8c8;
	position: absolute;
	left: 0;
	bottom: 0;
}
.matrix .bg-wrap .inn.large:after {
	content: "";
	width: 20%;
	height: 3px;
	background-color: #827346;
	position: absolute;
	left: 0;
	bottom: 0;
}

.matrix .bg-wrap .inn.small {
  line-height: 1.8em;
	font-size: 1.6rem;
}
 
.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.matrix.is-animated .bg-wrap {
  opacity: 1;
}
 
.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* jQueryでスクロール時に要素をフェードイン */
.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(70px);
  transition: opacity 2s, visibility 1s, transform 1s;
}

.zoom_in {
  /* 最初は非表示 */
  opacity: 0;
  overflow: hidden;
  transform-origin: top center;
  animation: loading_zoom_in 3s;
	z-index: 1000;
	position: relative;
}
@keyframes loading_zoom_in {
  0% {opacity: 0;transform: scale(0.8);}
  100% {opacity: 1;transform: scale(1);}
}

/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* その場で */
.fadeIn {
animation-name:fadeInAnime;
animation-duration:5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.main {
  /*overflow-x: hidden;*/
  transform-origin: top center;
  animation: loading 3s;
	line-height: 1.7em;
	font-family: "BIZ UDPGothic", sans-serif;
}
@keyframes loading {
  0% {opacity: 0;transform: scale(1);}
  100% {opacity: 1;transform: scale(1);}
}

.scale01 {
  overflow-x: hidden;
  transform-origin: top center;
  animation: loading_scale01 3s;
}
@keyframes loading_scale01 {
  0% {opacity: 0;transform: scale(1.3);}
  100% {opacity: 1;transform: scale(1);}
}

/* 丸が背景になるボタン */
.circle_btn03 {
  position: relative;
  padding: 1em 1em;
  transition: all 0.2s ease;
  border: none;
  background: none;
  text-decoration: none;
  display: inline-block;
	margin: 0 auto;
	white-space: nowrap;
}

.circle_btn03:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  display: block;
  border-radius: 100vh;
  background: #DBEAF2; /* 背景色 */
  width: 3em; /* 丸の横幅 */
  height: 3em; /* 丸の高さ */
  transition: all 0.3s ease;
}
.circle_btn03 > span {
  position: relative;
  color: #000; /* 文字色 */
}
.circle_btn03 svg {
  position: relative;
  top: -1px;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #000; /* 矢印の色 */
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.circle_btn03:hover:before { /* マウスオーバーした際のデザイン */
  width: 100%;
}
.circle_btn03:hover svg {
  transform: translateX(0);
}
.circle_btn03:active {
  transform: scale(0.95);
}

/* 次へ・前へボタン */
.post-nav {
	position: fixed;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	display: table;
	margin: 0 auto 10px;
	transition: 1.8s;
	padding: 0;
}
.post-nav li {
	display: table-cell;
	line-height: 1.2;
	background: #fff;
	border: 1px solid #C3B68F;
}
.post-nav li:nth-child(1) {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	overflow: hidden;
}
.post-nav li:nth-child(2) {
	border-left: 0 none;
	border-right: 0 none;
}
.post-nav li:nth-child(3) {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow: hidden;
}
.post-nav li.end {
	display: block;
	padding: 10px 2em;
	text-align: center;
	color: #CCC;
	background: #EFEFEF;
	text-decoration: none;
}
.post-nav li a {
	display: block;
	padding: 10px 2em;
	text-align: center;
	color: #827346;
	background: #F2F0E9;
	text-decoration: none;
}
.post-nav li a:hover {
	background: #C3B68F;
	color: #FFF;
	text-decoration: none;
}

.post-nav a:empty {
	display: none;
}

@media print, screen and (max-width: 992.98px) {
	.post-nav {
		left: 25%;
		transform: translateX(0%);
	}
}
@media print, screen and (max-width: 575.98px) {
	.post-nav {
		position: relative;
		left: inherit;
		bottom: inherit;
		margin-top: 1em;
		transition: 0s;
		/* 常に表示にする */
		opacity: 1;
	}
}

@media print, screen and (max-width: 992.98px) {
	@keyframes loading_pht_top {
		0% {opacity: 0;transform: scale(1.2);}
		100% {opacity: 1;transform: scale(1);}
	}
}

/* 表示領域が767.98px以下の場合に適用するスタイル
-----------------------------------------------------*/
@media print, screen and (max-width: 767.98px) {
	.conf_btn01 {
		width: 17em;
	}
	.circle_btn03 {
		display: block;
	}
	.circle_btn03 svg {
		position: absolute;
		top: 45%;
		right: 10px;
	}
}

/* 四角く一色で塗りつぶしたボタン */
a.background_btn01,
a.background_btn01a,
a.background_btn01b {
  display: inline-block;
  width: 100%;
  position: relative;
  background: #000; /* 背景色 */
  border: 2px solid #000;
  padding: 1em 2em;
  font-weight: 500;
  color: #fff; /* 文字色 */
  text-decoration: none;
  text-align: center;
  transition-duration: 0.3s;
}
a.background_btn01b {
  padding: 1em;
}
a.background_btn01 {
  max-width: 350px; /* ボタン幅 */
}
a.background_btn01:before,
a.background_btn01a:before,
a.background_btn01b:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色 */
  border-right: 2px solid #fff; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 51%;
  left: 25px;
  margin-top: -6px;
}
a.background_btn01b:before {
  left: 15px;
}

/* マウスオーバーした際のデザイン */
a.background_btn01:hover,
a.background_btn01a:hover,
a.background_btn01b:hover,
a.background_btn02:hover {
  background: #fff; /* 背景色 */
  color: #000; /* 文字色 */
}
a.background_btn01:hover:before,
a.background_btn01a:hover:before,
a.background_btn01b:hover:before {
  border-top: 2px solid #000; /* 矢印の色 */
  border-right: 2px solid #000; /* 矢印の色 */
}

a.background_btn02 {
  display: inline-block;
  width: 100%;
  position: relative;
  background: #000; /* 背景色 */
  border: 2px solid #000;
  padding: 0.5em 1em;
  font-weight: 500;
  color: #fff; /* 文字色 */
  text-decoration: none;
  text-align: center;
  transition-duration: 0.3s;
}

/* 吹き出し本体 */
.balloon {
  position: relative;
  padding: 20px;
  border: 2px solid #107b5e;
  border-radius: 10px;
	background: #FFF;
}
.balloon p:last-of-type {
	margin-bottom: 0;
}

/* 吹き出し */
.balloon_bs,
.balloon_bc,
.balloon_bs_lg {
	margin-bottom: 20px;
}
.balloon_bs:before,
.balloon_bs:after,
.balloon_bs_lg:before,
.balloon_bs_lg:after {
	position: absolute;
	top: 100%;
	left: 50px;
	height: 0;
	width: 0;
	border: solid transparent;
	content: "";
}
.balloon_bc:before,
.balloon_bc:after {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	height: 0;
	width: 0;
	border: solid transparent;
	content: "";
}
.balloon_bs:before,
.balloon_bs_lg:before,
.balloon_bc:before {
	margin-left: -15px;
	border-color: transparent;
	border-top-color: #107b5e;
	border-width: 15.5px;
}
.balloon_bc:before {
	margin-left: -14px;
}
.balloon_bs:after,
.balloon_bs_lg:after,
.balloon_bc:after {
	margin-left: -13px;
	border-color: transparent;
	border-top-color: white;
	border-width: 13.5px;
}
.balloon_bc:after {
	margin-left: -13.5px;
}

/* 表示領域が767.98px以下の場合に適用するスタイル
-----------------------------------------------------*/
@media print, screen and (min-width: 991.98px) {
	.balloon_bs_lg:before,
	.balloon_bs_lg:after {
		display: none;
	}
}
.image-container {
	display: flex;
	align-items: stretch;
}
.image-container img {
	max-height: 100%;
	object-fit: contain;
	width: auto;
}