@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #51605e;
  font-family: 'Yu Gothic','TsukuARdGothic-Regular','ヒラギノ角ゴシック','Hiragino Sans','sans-serif';
  background-image: url('../img/paper-bg.jpg');
  background-repeat: repeat;
}
.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a {
  text-decoration: none;
  color: #4e746d;
}
a:hover
{color: #73b576;}
img {
  max-width: 100%;
}
li {
  list-style: none;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto 0 auto;
  font-size: 0.9rem;
  padding: 4% 4%;
}
.site-title {
  line-height: 1px;
}
.site-title a {
  display: block;
}
.sec-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 65px;
  
}
.content-title{
  margin: 10px auto 10px auto;
  font-size: 1.1rem;
}
.tagbnt{
  position: relative;
  display: inline-block;
  padding: 0.4rem 1rem 0.4rem 2rem;
  margin: 0.5rem 0.5rem 0rem 3rem;
  border-radius: 100vh 0 0 100vh;
  background: #ffffff;
}
.tagbnt:before {
  position: absolute;
  top: calc(50% - 6px);
  left: 10px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 50%;
  background: #c9e2c9;
}
.tagbntflex{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 画面幅が 600px 以下の場合 */
@media screen and (max-width: 600px) {
  .tagbntflex {
    display: block; /* Flexbox を解除して縦並びにする */
  }
  .tagbnt{
    margin: 0.5rem 0.5rem 0rem 0.5rem;
  }
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 270px;
  margin: 0 auto;
  padding: 0 4%;
}
#header ul {
  display: flex;
  padding: 10px 0;
}
#header li {
  font-size: 0.9rem;
  margin-left: 30px;
}
#header li a {
  color: #24292e;
}
#header li a:hover {
  opacity: 0.7;
}
#header li img.icon {
  width: 20px;
}
*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

/*-------------------------------------------
Contact
-------------------------------------------*/
.icon-snail {
  padding-left: 1.5em; /* アイコン分の左paddingを設定（調整してください） */
  position: relative; /* 擬似要素の基準となる */
}
.icon-snail::before{
    content: "";
    display: inline-block; /* 幅や高さを有効にする */
    background-image: url('../img/icon-snail.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    position: absolute; /* タイトルに対して絶対配置 */
    left: 38%; /* 左端に配置 */
    top: 50%; /* 縦方向中央に配置 */
    transform: translateY(-50%); /* 縦方向中央に配置するための調整 */
    margin-right: 0.5em; /* タイトルとの右側の間隔（ここでは直接指定しない） */
}
#contact {
  background-color: #b6f3de63;
  max-width: unset;
}
#contact .button {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center;    /* 垂直方向の中央揃え */
  margin-bottom: 2em;
}
#contact .button a {
  text-align: center;
  width: fit-content;
  color: #51605e;
  padding: 1rem 4rem 1rem 2rem;
  border: solid 2px #f79e1d;
  border-radius: 40px;
  font-weight: bold;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  background-color: #ffffeb;
  margin: 0 5px;
}
#contact .button a:hover {
  background: #fff;
  color: #41cbb0;
  box-shadow: none;
}
#contact .button a:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: 1px;/*線を消す*/
}
.btn-c a {
  font-size: 1rem;
  position: relative;
  border-radius: 100vh;
}

.btn-c a i.fa {
  margin-right: 1rem;
}

.btn-c a:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.2rem;
  line-height: 1;
  position: absolute;
  top: calc(58% - .8rem);
  right: 2rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}
.fa,.far,.fas {
  font-family: "Font Awesome 5 Free"
}

.fa,.fas {
  font-weight: 900;
  font-style: normal;
  font-size: 1.2rem;
}
.fa-envelope:before {
  content: "\f0e0"
}
.mobile-break {
  display: none; /* デフォルトは非表示 */
}
.zen-kurenaido-regular{
  text-align: center;
  margin-bottom: 10px;
  font-size: 1rem;
  display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

}
.zen-kurenaido-regular::before,
.zen-kurenaido-regular::after {
	content: '';
	width: 1px;
	height: 25px;
	background-color: #51605e;
}

.zen-kurenaido-regular::before {
	margin-right: 20px;
	transform: rotate(-25deg)
}
.zen-kurenaido-regular::after {
	margin-left: 8px;
	transform: rotate(25deg)
}
.privacy {
  text-align: center;
}
/* flowボタン */
.ct {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.btn-flat-logo {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 2em;
  text-decoration: none;
  color: #FFF;
  background: #f79e1d;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  border: solid 2px #d27d00;
  border-bottom: solid 3px #bd6565;
  transition: .4s;
}
.btn-flat-logo:hover {
  background: #ffe16a;
  color: #FFF;
}
.fa-chevron-right:before {
    content: "\f054"
}

/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  background-color: #51605e;
  color: #fff;
  font-size: 0.5rem;
  padding: 10px 20px;
  text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 820px) {
  .wrapper {
    margin-bottom: 50px;
    padding: 4% 10%;
  }
  .site-title {
    margin:40px 80px 20px 20px;
  }
  .sec-title {
    margin-bottom: 40px;
  }
  .sec-title2 {
    font-size: 1.5rem;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    max-width: 100%;
    height: auto;
    flex-direction: column;
  }
  #header li {
    font-size: 0.8rem;
    margin-left: 20px;
  }
  #header li:first-child {
    margin-left: 0;
  }
  /*-------------------------------------------
  Contact
  -------------------------------------------*/
  #contact dl {
    flex-direction: column;
  }
  #contact dt {
    width: 100%;
  }
  #contact dd {
    width: 100%;
  }
  #contact .button {
  flex-direction: column;
}
#contact .button a {
  margin: 15px 0;
}
.icon-snail::before{
    left: 22%;
  }
/* header（ハンバーガーメニュー） */
.demobox-header{
	background: #ddd;
	height: 64px;
	padding: 1em;
}
.demobox-sitename{
	font-weight: 700;
	font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
	font-size: 16px;
}
.hamburger-demo-menubox li{
	font-size: 14px;
}
/* hamburgerここから */
	/* input非表示 */
.input-hidden{
	display: none;
}
	/* label */
  .hamburger-demo-switch{
    cursor: pointer;
    position: fixed; /* ← absoluteからfixedに変更 */
    right: 3%;
    top: 1em; /* 調整しました。0だとヘッダーに隠れる可能性があります。 */
    z-index: 9999;
    width: 4em;
    height: 4em;
  }
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo4:checked ~ .hamburger-demo-switch{
	position: fixed;
}
/* 円を用いたハンバーガーデザイン */
	/* 外側の円 */
.hamburger-demo-switch4:before{
	content: "";
	position: absolute;
	width: 3em;
	height: 3em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
  background-color: #f9fff0;
}
	/* 真ん中の円 */
.hamburger-switch-circle{
	height: 3px;
	width: 25px;
	background: #51605e; /* 真ん中の線（円）の色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: .3s;
}
	/* 上下の線 */
.hamburger-switch-circle:before, .hamburger-switch-circle:after{
	content: "";
	position: absolute;
	width: 25px;
	top: 50%;
	left: 50%;
	transition: .3s;
}
.hamburger-switch-circle:before{
	border-top: 3px solid #51605e; /* ハンバーガーアイコン上側の線の色 */
	transform: translate(-50%, -300%);
}
.hamburger-switch-circle:after{
	border-bottom: 3px solid #51605e; /* ハンバーガーアイコン下側の線の色 */
	transform: translate(-50%, 200%);
}
/* アイコン･アニメーション */
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle{
	height: 25px;
	border-radius: 50%;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle:before{
	width: 0;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch .hamburger-switch-circle:after{
	width: 0;
}
	/* 真ん中の×印 */
.hamburger-demo-switch4:after{
	content: "×";
	font-size: 0px;
	position: absolute;
	color: #fff; /* ハンバーガーの"×"マークの色 */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: .2s;
}
#hamburger-demo4:checked ~ .hamburger-demo-switch4:after{
	font-size: 25px;
}
/* メニューエリア */
.hamburger-demo-menuwrap{
	position: fixed;
	height: 100%;
	background: #f8f8f8; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロール */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合あり */
	list-style: none;
  display: block; /* 各リストアイテムをブロック要素にする */
	margin-bottom: 5px; /* 必要に応じて、リストアイテム間の余白を設定 */
	border-radius: 2em; /* 現在の角丸を維持 */
  flex-direction: column;
}
.hamburger-demo-menulist li a{
	text-decoration: none;
	color: #51605e; /* メニューエリアの文字色 */
  display: block; /* リンク要素もブロック要素にし、li全体をクリック可能にする */
	padding: .5em 2.5em .5em 1em; /* 現在のpaddingを維持 */
	position: relative; /* 現在のrelativeを維持 */
}
.hamburger-demo-menulist li a span{
  font-size: 0.7rem;
  padding-left: 1em;
  color: #aac182;
}
	/* 円を用いたメニューリスト */
.hamburger-menulist-circle li{
	border: 1px solid;
	margin-bottom: 15px;
	border-radius: 2em;
  background-color: #f9fff0;
	border: solid 2px #d4f1a2;
  font-weight: bold;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.hamburger-menulist-circle li a{
	padding: .5em 2.5em .5em 2em;
	position: relative;
}
.hamburger-menulist-circle a:before{
	content: "";
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	background: #d4f1a2; /* メニューリスト矢印背景（円）の色 */
	border-radius: 50%;
	top: 50%;
	right: .5em;
	transform: translate(0, -50%);
}
.hamburger-menulist-circle a:after{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2.5px solid;
	border-color: #fff #fff transparent transparent; /* メニューリスト矢印の色（#fffのみ変更） */
	top: 50%;
	right: .5em;
	transform: translate(-80%, -50%) rotate(45deg);
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo4:checked ~ .hamburger-demo-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo4:checked ~ .hamburger-demo-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
.square-banner {
  width: 220px;  /* バナーの幅 */
  height: 220px; /* バナーの高さ (幅と同じ値にすることで正方形になる) */
  margin-top: 20px; /* メニューボックスとの間に少しスペースを空ける場合 */
  /* 必要に応じて、中央寄せや配置の調整 */
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  display: flex; /* Flexboxコンテナにする */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ (もし必要なら) */
}

.square-banner img {
  width: 100%;  /* 親要素の幅に合わせて画像を拡大・縮小 */
  height: 100%; /* 親要素の高さに合わせて画像を拡大・縮小 */
  object-fit: cover; /* 画像が要素を埋めるように調整（はみ出た部分は切り取られる） */
  display: block; /* 画像の下に余白ができないようにする */
  border-radius: 20px; 
}
html {
  scroll-behavior: smooth;
}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #acd1be;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #acd1be;
  border-right: 3px solid #acd1be;
  transform: translateY(20%) rotate(-45deg);
}
  }
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 15px; 
  padding: 20px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

/* PCではハンバーガーメニューを表示しない */
@media (min-width: 820px){
	.hamburger-demo-menubox{
		display: none;
	}
}
.sub-slider {
  background-color: #ffffff;
}