/* 1. 外側の枠（画面全体の基準） */
.hero-container {
  display: flex;
  justify-content: center;
}



.masked-image {
  
  /* マスクの設定 */
  -webkit-mask-image: url('img/mask.png'); /* アップロードした画像のパス */
  mask-image: url('img/mask.png');
  
  /* マスクの調整（背景画像の設定と似ています） */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  /* 表示したい実際の画像 */
  object-fit: cover;
}



.video-wrap {
  
}

.video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.03) contrast(0.95) saturate(1.06);
  transform: scale(1.01); /* 圧縮の端ノイズ対策にも少し有効 */
}

/*
.video-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='black' opacity='0.5'/%3E%3Crect x='2' width='2' height='2' fill='none'/%3E%3C/svg%3E"); 
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}
*/


@media screen and (max-width: 767px) {
	.video-wrap {
	  position: relative;
	  margin: 5%;
	  border-radius: 30px;
	  overflow: hidden;
	  width: 100%;
	  height: 60vh
	}
	
	video.hero-video,
	.hero-poster {
	  width: 100%;
	  height: 100%;
	  aspect-ratio: 16 / 9;
	  object-fit: cover;
	}
	
	/* 4. 中央のロゴ */
	.hero-logo {
		position: relative;
	  margin: -100px auto 2em;
	  max-width: 300px;
	  z-index: 10;
	  bottom: 0;
	  left: 0;
	  right: 0;
	}

}	

@media print, screen and (min-width: 768px) {
	/* 1. 外側の枠（画面全体の基準） */
	.hero-container {
	  display: flex;
	  justify-content: center;
	}
	
	/* 2. 動画を包む箱（ここで余白と角丸を制御） */
	.video-wrap,
	.hero-poster {
	  position: relative;
	  margin: 5%;
	  border-radius: 30px;
	  overflow: hidden;
	  max-height: 600px;
	  width: 100%;
	}
	
	/* 3. 動画自体の設定 */
	video.hero-video {
	  width: 100%;
	  height: 100%;
	  aspect-ratio: 16 / 9;
	  object-fit: cover;
	}
	
	
	/* 4. 中央のロゴ */
	.hero-logo {
		position: relative;
	  margin: -12% auto 2em;
	  max-width: 400px;
	  z-index: 10;
	}


}	

@media print, screen and (min-width: 1024px) {}	



#video-mute-btn {
    /* 配置設定 */
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 20;

    /* ボタンの見た目 */
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2); /* 半透明の白 */
    backdrop-filter: blur(8px);           /* 背景をぼかす（モダンな手法） */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;                   /* 円形 */
    cursor: pointer;
    
    /* 中のSVGを中央寄せ */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* アニメーション */
    transition: all 0.3s ease;
}

#video-mute-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* SVGアイコンの共通設定 */
#video-mute-btn svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
    transition: opacity 0.3s ease;
}

/* 状態による表示・非表示の切り替え */
#video-mute-btn.is-muted .icon-on {
    display: none;
}
#video-mute-btn:not(.is-muted) .icon-off {
    display: none;
}





h2.sech2{
	text-align: center;
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	margin-bottom: 1.5em
}


h2.sech2::after{
	content: "";
	display: block;
	background: url(../img/h2_dot.svg) no-repeat center center;
	-moz-background-size:contain;background-size:contain;
	width: 80px;
	height: 30px;
	margin: 0 auto
}



h2.sech2 span{
	display: block;
	font-size: .6em;
	color: var(--color-point1);
	letter-spacing: .15em
}

@media screen and (max-width: 767px) {
	h2.sech2{margin:.5em auto 1.5em}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {}	

/* ------------------------------
 #rinen
------------------------------ */


#rinen{
	padding: 5% 0;
}

#rinen h2{
	background: var(--color-point2);
	padding: .5em 1em;
	line-height: 1;
	border-radius: 50px;
	position: relative;
	color: #fff;
	text-align: center;
	margin-bottom: 1em
}

.rinen_wrap{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

.rinen_wrap h3{
	color: var(--color-point1);
	text-align: center;
	margin-bottom: .3em
}

.rinen_wrap ul{
	color: var(--color-point1);
	text-align: center;
	
}

.rinen_wrap ul li{
	margin-bottom: .5em;
	font-size: 1.4rem
}

.tc{text-align: center;
	font-size: 1.4rem;
	margin-bottom: .6em
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	.rinen_wrap{
		display: flex;
		flex-direction: column;
		max-width: 500px;
		gap:40px
	}
	.rinen_wrap > div{
		flex: 1;
		margin-bottom: 2em
	}
	
}	

@media print, screen and (min-width: 1024px) {}	



/* ------------------------------
 #tokucho
------------------------------ */

#tokucho{
	padding: 6% 0;
	background: #fdfbf1
}


.tokushoku{
	max-width: 800px;
	margin: 0 auto 3em
}

.tokushoku h3{
	text-align: center;
	margin-bottom: .8em
}


.features_wrap{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto
}

.features_main{
	margin: 0 auto 3em
}

.fbox dl{
	margin: -1em .5em 0;
}
.fbox dt{
	background: var(--color-point1);
	color: #fff;
	border-radius: 50px;
	position: relative;
	text-align: center;
	padding: .5em 1em;
	margin-bottom: 1em;
}


@media screen and (max-width: 767px) {
	.fbox{
		margin-bottom: 1.5em
	}
}	

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

}	

@media print, screen and (min-width: 1024px) {}	


/* ------------------------------
 #setsubi
------------------------------ */

#setsubi{
	padding: 6% 0;
	
}

.setsubi_read{
	text-align: center;
	padding: 0 1em;
	margin-bottom: 2em
}

.setsubi_img{
	margin: 0 auto 3em;
	width: 90%;
	max-width: 900px;
	text-align: center;
}


.setsubi_gallery {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  width: 90%;
  margin: 0 auto
}

.setsubi_gallery figcaption{
	padding: 5px 0 0;
	text-align: center
}

@media screen and (max-width: 767px) {}	

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

@media print, screen and (min-width: 1024px) {}	




/* ------------------------------
 #daily
------------------------------ */
#daily{
	padding: 5%;
	background: rgba(var(--color-point2-rgb), 0.7);
}


#daily > div{
	padding: 5%;
	background: #fff;
	border-radius: 50px;
	position: relative;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto
}


/* ------------------------------
 #event
------------------------------ */

#event{
	padding: 6% 0;
}

.event_wrap{
	display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  margin: 0 auto;
  width: 90%;
}



.event_wrap dt{
	text-align: center;
	color: #fff;
	background: var(--color-point1);
	border-radius: 50px;
	position: relative;
	padding: .2em;
	margin-bottom: .8em
}

.event_wrap dl:nth-child(even) dt{
	background: var(--color-point2);
}



.event_wrap dd{
	text-align: center;
}

dd.guardian{
	color: var(--color-point1);
}


@media screen and (max-width: 767px) {
	.event_wrap dd{display: inline}
	.event_wrap dd:not(:last-child)::after{
		content: "/"
	}
}	

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

@media print, screen and (min-width: 1024px) {}	




/* ------------------------------
 #massage
------------------------------ */

#massage{
	padding: 6% 0;
	background: #fdfbf1
}

#massage h3{
	text-align: center;
	margin-bottom: 1em;
	color: var(--color-point1);
}

.massage_wrap,
.massage_wrap2{
	width: 86%;
	margin: 0 auto;
	max-width: 900px;
}
.massage_wrap p{
	line-height: 1.8em
}
.massage_wrap p + p{
	margin-top: 5px
}

.massage_img{
}

.massage_img figcaption{
	font-size: .9em;
	line-height: 1.3em;
	margin: 1em 0 0;
} 

@media screen and (max-width: 767px) {
	.massage_wrap{
		display: flex;
		flex-direction: column-reverse
	}
	.massage_img{
		max-width: 200px;
		margin: 0 auto 1em;
		text-align: center;
	}
}	

@media print, screen and (min-width: 768px) {
	.massage_wrap{
		display: flex;
		gap:30px;
	}
	#massage h3{
	}
	.massage_txt{
		flex: 2
	}
	.massage_img{
		border-radius: 10px;
		position: relative;
		flex: 1
	}
}	

@media print, screen and (min-width: 1024px) {}	

/* ------------------------------
 #gaiyo
------------------------------ */

#gaiyo{
	padding: 6% 0;
}

/* 1. 一番外側のコンテナ */
.history_wrap {
    width: 100%;
    padding: 2em 0;
    /* ここでは text-align: center は使わない */
}

/* 2. 全てのdlを包む「中身にフィットする箱」 */
.history_inner {
    display: table;    /* 中身の最大幅に自動で合わせる魔法のプロパティ */
    margin: 0 auto;    /* この箱ごと中央に寄せる */
    text-align: left;  /* 中の文字はすべて左揃え */
}

/* 3. 各行の設定 */
.history_wrap dl {
    display: flex;
    padding: 1em;
    line-height: 1.5;
    border-bottom: solid 1px #eee
}

/* 4. 日付：ここを固定すれば頭が揃う */
.history_wrap dt {
    width: 200px;
    flex-shrink: 0;
    font-weight: bold;
    text-align: left; /* 左揃えを徹底 */
    color: var(--color-point1);
}

/* 5. 内容 */
.history_wrap dd {
    margin: 0;
    padding-left: 20px;
    text-align: left;
}

/* スマホ用 */
@media screen and (max-width: 640px) {
    .history_inner {
        display: block;
        width: 90%;
    }
    .history_wrap dl {
        display: block;
        padding: .8em;
    }
    .history_wrap dt {
        width: 100%;
        margin-bottom: 5px;
    }
    .history_wrap dd {
        padding-left: 0;
    }
}

/* ------------------------------
 .gallery
------------------------------ */

.gallery{
	padding: 6%;
}

.workswiper .swiper-slide img{
	width: 100%;
	height: auto;
	border-radius: 10px;
	position: relative;
	
}



/* ------------------------------
 #add
------------------------------ */


.add_wrap{
	width: 90%;
	margin: 0 auto
}

.add_wrap .map img{
	border-radius: 10px;
	position: relative;
	
}

.address{
	text-align: center;
}

.kengaku{color: var(--color-point1);}


.address dt{
	font-size: 1.3rem;
	margin-bottom: .5em
}

@media screen and (max-width: 667px) {
	.add_wrap .map{
		margin-bottom: 1.5em
	}
}	

@media print, screen and (min-width: 668px) {
	.add_wrap{
	display: flex;
	gap:30px;
	max-width: 1000px;
	margin: 0 auto 3em;
	align-items: center
	}
	
	.add_wrap .map{width: 50%}
	.add_wrap .address{width: 50%}

}	

@media print, screen and (min-width: 1024px) {}	





/* ************************************************ 
*	はとぽっぽ
* ************************************************ */

/* ------------------------------
 #hato_gaiyo
------------------------------ */
#hato_gaiyo{
	padding: 5% 0;
	
}

.hato_gaiyo_wrap{
	width: 90%;
	margin: 0px auto
}
.intoro h3{
	margin-bottom: 1em
}

@media screen and (max-width: 767px) {
	#hato_gaiyo{
	background: url(../img/hato_gaiyo_bsp.jpg) no-repeat center top;
	-moz-background-size:100% auto;background-size:100% auto;
	}
	.hato_gaiyo_wrap{
		padding: 150px 0 0 0;
	}
	.intoro h3{text-align: center;}
	.intoro p br{
		display: none
	}
}	

@media print, screen and (min-width: 768px) {
	#hato_gaiyo{
	background: url(../img/hato_gaiyo_bg.jpg) no-repeat center top;
	-moz-background-size:100% auto;background-size:100% auto;
	}
	.hato_gaiyo_wrap{
		padding: 0 0 0 50%;
	}
}	

@media print, screen and (min-width: 1024px) {
	
}

/* ------------------------------
 #hato_vision
------------------------------ */

#hato_vision{
	background: #fdf9f1;
	padding: 7vh 0;
}

.goalwrap{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

ul.goal{
	margin: 0 auto 1em
}

ul.goal li{
	color: var(--color-point1);
	margin: 0 0 1em
}

ul.goal li span{
	font-size: 1.4em;
	padding: 0 3px 0 0
}


/* ------------------------------
 #hato_mokyhyo
------------------------------ */
#hato_mokyhyo{
	padding: 7vh 0;
}

#hato_mokyhyo h3{
	color: var(--color-point2-shade);
	text-align: center;
	padding: 0 1em;
}


.promise::before {
    display: block;
    content: "";
    background: url(../img/hato_intoro_back.png) no-repeat center top;
    width: 80%;
    
    /* 高さを自動にし、アスペクト比を指定する */
    height: auto; 
    aspect-ratio: 16 / 9; /* 画像の [横幅 / 縦幅] を指定 */
    
    background-size: contain;
    margin: 0 auto;
}

.promise_wrap {
  margin: 0 auto;
}



.promise dl{
	max-width: 800px;
	margin: 0 auto;
}

.promise dl dt {
    background: var(--color-point1);
    font-size: 1.1rem;
    color: #fff;
    padding: .6em;
    border-radius: 10px;
    position: relative;
    text-align: center;
    margin-bottom: 1em;
    /* 数字の丸がはみ出す場合は、ここに padding-left を追加して調整します */
}

.promise dl dt span {
    /* 丸のサイズと色 */
    width: 40px;
    height: 40px;
    background: var(--color-point2); /* 黄緑色 */
    color: #fff; /* 白文字 */
    border-radius: 50%; /* 正円にする */
    
    /* 文字を中央に寄せる */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 配置（左上に浮かせる例） */
    position: absolute;
    top: -10px;   /* 上の位置微調整 */
    left: -10px;  /* 左の位置微調整 */
    
    /* フォント調整 */
    font-weight: bold;
    font-size: 20px;
    z-index: 5;
}


@media screen and (max-width: 767px) {
	.promise dl{margin-bottom: 2em}
	#hato_mokyhyo h3 br{
		display: none
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {
	.promise_wrap {
		display: flex;
		flex-direction: column;
	  gap: 30px;
	  max-width: 500px;
	}
	.promise::before{width: 60%;}
	.promise dl dt{font-size: 1.2rem;}
}	

/* ------------------------------
 #howto_flow
------------------------------ */

#howto_flow{
	padding: 7vh 0;
}

.about{
	max-width: 600px;
	margin: 0 auto
}

.about h3{
	text-align: center;
	color: var(--color-point1);
	margin-bottom: .6em
}


.howto h3,
.flow h3{
	background: var(--color-point1);
	color: #fff;
	border-radius: 50px;
	position: relative;
	text-align: center;
	color: #fff;
	padding: 5px 1em;
	width:-moz-fit-content;
	width:fit-content;
	margin: 2em auto 1em;
}

.howto_flow_wrap{
	margin: 0 auto;
	max-width: 900px;
}

/* 全体を中央に寄せるためのコンテナ */
  .howto-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* リスト本体：中身の最大幅に合わせて縮まり、左揃えを維持 */
  .howto {
    display: inline-block;
    text-align: left;
  }

  .howto dl {
    display: flex;
    margin-bottom: 2px;
    background: #f2f2f1;
  }

  .howto dt {
    font-weight: bold;
    width: 120px;
    flex-shrink: 0;
    background: #dddddd;
    padding: 5px 1em;
    text-align: center;
    align-items: center;
  }

  .howto dd {
    padding: 5px 1em;
  }


.flow dl{
	text-align: center;
}

.flow dl + dl{
	margin-top: 1em;
}

.flow dl dt{
	border: solid 2px #ccc;
	border-radius: 50px;
	position: relative;
	margin:0 auto .6em;
	max-width: 300px
}

@media screen and (max-width: 767px) {
	.about p br{
		display: none
	}
}	

@media print, screen and (min-width: 768px) {
	.about p{
		text-align: center;
		font-size: 1.3em;
		line-height: 1.5em
	}
}	

@media print, screen and (min-width: 1024px) {
	.howto_flow_wrap{
		display: flex;
		gap:30px
	}
	
	.howto_flow_wrap > div{
		flex: 1
	}
}