@charset "UTF-8";
/* CSS Document */

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/*border: solid 1px #000;*/
	font-family: "Noto Sans JP", sans-serif;
}


/*// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name*/

.noto-sans-jp-{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


html{
	/*scrollbar-gutter: stable both-edges;*/
}


html,body{
	overflow-x: hidden;
	overflow-y: scroll;
}


body{
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	color: #232220;
	letter-spacing: .06rem;
	margin: 0;
	padding: 0;
}


img{
	max-width: 100%;/*これ以上大きくならないようにするため*/
	height: auto;
	vertical-align: bottom;/*行の下に揃うー文字とアイコンのずれ調整の際に使用する*/
}


header{
	/*display: flex;
	justify-content: space-between;
	align-items: center;*/
	position: sticky;
	top: 0;
	z-index: 1001;
	background: #fff;
	vertical-align: baseline;
}

@media(max-width:767px){
	header{
		top: 0;
		z-index: 1003;
		background: #fff;
		box-shadow: 2px 2px 10px rgba(0,0,0,.06);
	}
}

.container{
	/*width: 760px;*/
	width: 70%;
	margin: 0 auto;
}


@media(max-width:767px){
	.container{
		width: 90%;
	}
}


header .container{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90%;
}



.header__logo{
	width: 160px;
	margin: 0;
}


.header__nav{
	margin-left: auto;
}

.header__nav ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	right: auto;
}

@media(max-width:767px){
	.header__nav ul{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 100%;
		width: 100%;
		height: 100%;
		padding: 5%;
		transition: 1.5s;
		z-index: 3000;
	}
}


.header__nav.is-open ul{
	bottom: 0;
}


.header__nav a{
	font-size: 16px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #232220;
	/*background-color: #99f;*/
	padding: 8px 24px;
}


@media(max-width:767px){
	.header__nav a{
		padding: 28px;
		margin-bottom: 8px;
	}
}


.header__nav a:hover{
	/*background-color: #F2EFEF;*/
	transition: .3s;
	color: #C3C3C3;
}


.header__btn{
	background-color: #fff;
	width: 48px;
	height: 48px;
	border: none;
	position: sticky;
	right: 20px;
	top: 24px;
	flex-direction: column;
	justify-content: space-between;
	padding: 12px;
	display: none;
	z-index: 1000;
}


@media(max-width:767px){
	.header__btn{
		display: flex;
		z-index: 4000;
	}
}


.header__btn span,
.header__btn::before,
.header__btn::after{
	width: 100%;
	height: 2px;
	background-color: #232220;
	display: block;
	content: "";
	transition: .5s;
	border-radius: 9999px;
}



.header__btn::before{
	background-color: #232220;
	position: relative;
	top: 0;
}


.header__btn::after{
	background-color: #232220;
	position: relative;
	bottom: 0;
}



.header__btn:hover span{
	width: 0;
	opacity: 0;
}


/*.header__btn.is-open span{
	top: 50%;
	transform: translate(-50%, -50%);
}*/

.header__btn.is-open::before{
	transform: rotate(45deg);
	top: calc(50% - 1px);
}

.header__btn.is-open::after{
	transform: rotate(-45deg);
	bottom: calc(50%);
}


.header__btn.is-open span{
	width: 0;
	opacity: 0;
}


.main-visual{
  background-image: url("../images/main-img.jpg"); /* 1枚目を初期表示 */
  height: calc(100vh - 90px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media(max-width:767px){
  .main-visual{
    height: calc(100vh - 400px);
  }
}

/* スライド用のレイヤー（テキストより下に配置） */
.main-visual .slide2,
.main-visual .slide3{
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; の短縮 */
  background-size: cover;
  background-position: center;
  z-index: 0;             /* ← テキストより下 */
  pointer-events: none;   /* ← クリックをブロックしない */
  opacity: 0;             /* 初期は非表示 */
  transition: opacity 1.5s ease; /* フェード時間 */
}

/* 背景画像を割り当て */
.main-visual .slide2{ background-image: url("../images/main-img02.jpg"); }
.main-visual .slide3{ background-image: url("../images/main-img03.jpg"); }


/* テキストも最前面 */
.main-text{
  position: relative;
  /*top: 640px;
  left: 80px;*/
  /*width: 640px;*/
  /*height: auto;*/
  z-index: 40; /* ← 追加で前面固定 */
  background-color: rgba(255,255,255,0.75);
}

.main-text p{
  font-size: 48px;
  letter-spacing: .46rem;
  color: #000;
  /*animation: textColorSync 16s infinite;*/
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  text-align: center;
  /*padding: 4px 0;*/
  padding-left: 24px;
}

@media(max-width:767px){
  .main-text p{
    font-size: 28px;
    letter-spacing: .26rem;
  }
}

/* アニメで重ねる“動くレイヤー”は2つだけに限定 */
.main-visual::after,
.main-visual .slide2,
.main-visual .slide3{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  animation: fadeSlide 16s infinite, zoomSlide 16s infinite;
}

/* 2枚目・3枚目の画像とタイミング */
.main-visual::after {
	background-image: url("../images/main-img02.jpg");
	animation-delay: 4s;
}

.main-visual .slide2{
	background-image: url("../images/main-img03.jpg");
	animation-delay: 8s;
}

/* （必要なら）さらに増やすときは .slide3 を用意して delay をずらす */

.main-visual .slide3{
	background-image: url("../images/main-img04.jpg");
	animation-delay: 12s;
}


/* クロスフェード */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ゆっくり拡大 */
@keyframes zoomSlide {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.main-back{
	background-image: url("../images/english-background.svg");
	background-size: 480px;
	background-position: 40px -130px;
	background-repeat: no-repeat;
}

@media(max-width:767px){
	.main-back{
		background-size: 280px;
		background-position: -20px -46px;
	}
}

.main-copy{
	background-image: url("../images/living-icon.svg");
	background-repeat: no-repeat;
	background-position: right 56px top 32px; /* ← 右端基準にする */
    background-size: 140px;                   /* 少し小さめ */
    padding: 120px 16px 100px 32px;           /* ← 左右は16pxにする */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: auto;            /* 中央寄せ用 */
	margin-right: auto;           /* 中央寄せ用 */
	max-width: 640px;
}


@media(max-width:767px){
	.main-copy{
		background-position: right 16px top 46px;
		background-size: 96px;
		padding: 104px 0 84px 48px;
	}
}


.main-copy__h2{
	padding-bottom: 32px;
}


@media(max-width:767px){
	.main-copy__h2{
		padding-top: 0;
		padding-bottom: 32px;
	}
}


.main-copy__h2 h2{
	letter-spacing: .14rem;
	font-size: 32px;
	font-weight: 500;
	font-family: "Zen Kaku Gothic New", sans-serif;
}


.main-copy__p p{
	font-size: 18px;
	letter-spacing: .05rem;
	padding: 2px 0;
	color: #393939;
}


@media(max-width:767px){
	.main-copy__h2 h2{
	font-size: 22px;
}
	.main-copy__p p{
	font-size: 16px;
	}
}


h3{
	/*font-size: 32px;
	padding: 32px 0;
	letter-spacing: .2rem;*/
	text-align: center;
	/*margin: 28px auto 0 auto;*/
	padding: 40px 0 32px;
}


h3 img{
	width: auto;
	height: 100px;
}

@media(max-width:767px){
	h3 img{
		height: 80px;
	}
}



h3 span{
	color: #C59C70;
	display: block;
	font-size: 18px;
	margin-top: 4px;
	font-weight: 500;
	padding-top: 4px;
	/*padding-left: 16px;*/
}


.news h3 img{
	width: auto;
	height: 72px;
}


.news{
	background-image: url("../images/washi-02.png");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 40px 0;
	background-attachment: fixed;
}

@media(max-width:767px){
	.news{
		padding: 28px 0;
	}
}


/* 見出し左右に二重線（上） */
.news h3{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;          /* 文字と線の間隔 */
  margin: 0 0 16px;   /* 下の余白 */
}

@media(max-width:767px){
	.news h3{
		gap: 24px;
	}
}


/* 左右の二重線を擬似要素で描画 */
.news h3::before,
.news h3::after{
  content: "";
  flex: 1;
  width: 460px;      /* 線の長さ（→お好みで）*/
  height: 6px;        /* 二重線の全高 */
  border-top: 2px solid #8FBE4F;   /* 線の色・太さ */
  border-bottom: 2px solid #8FBE4F;
}

/* スマホは少し短く */
@media (max-width: 767px){
  .news h3::before,
  .news h3::after{ 
	  width: 160px; 
	}
}


/* 一覧の下に二重線（下） */
.news-solid{
  position: relative;
  padding-bottom: 40px;   /* 線との間隔 */
}


/* セクション末尾に二重線を引く */
.news-solid::after{
  content: "";
  display: block;
  width: calc(100% - 30%);  /* 左右に余白を持たせる。全幅にしたいなら 100% */
  margin: 24px auto 0;       /* 中央寄せ */
  height: 6px;
  border-top: 2px solid #8FBE4F;
  border-bottom: 2px solid #8FBE4F;
  border-radius: 2px;
}

@media(max-width:767px){
	.news-solid::after{
		width: calc(100% - 60px);
	}
}


.card__pc{
	display: flex;
	justify-content: center;
	margin-bottom: 64px;
	padding: 0 16px;
    align-items: center;
}

@media(max-width:1042px){
	.card__pc{
		padding: 0 32px;
	}
}

@media(max-width:767px){
	.card__pc{
		display: block;
		padding: 0;
		margin-left: auto;
	}
}


.card{
	display: block;
	flex-direction: column;
	flex-wrap: wrap;
	/*margin: 0 0 28px;*/
	/*padding: 4px;*/
	/*margin: 0 16px;*/
	border-radius: 8px;
	margin: 0 24px;
}

@media(max-width:767px){
	.card{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px;
		gap: 16px;
		flex-direction: row;
		margin: 0 40px 16px;
        background-color: rgba(255,255,255,0.80);

	}
}


.card__image{
	padding: 28px 0 16px;
	text-align: center;
}


@media(max-width:767px){
	.card__image{
		padding: 0;
		margin: 0;
	}
}


.card__image img{
	width: 180px;
	height: auto;
	border-radius: 10px;
}


@media(max-width:767px){
	.card__image img{
		width: 130px;
		height: auto;
	}
}

.card__text{
	margin-bottom: 16px;
	padding: 0 24px;
    width: 200px;
}

@media(max-width:767px){
	.card__text{
		margin-bottom: 0;
		padding: 0;
        width: 160px;
	}
}


.card__text small{
	display: block;
	padding: 6px 0;
	color: #9B9B9B;
	font-size: 14px;
}


.card__text p{
	padding: 6px 0;
	color: #000;
	font-size: 16px;
}


/*.card__text p:last-child{
	margin-bottom: 0;
}*/

.advantage{
	display: flex;
	flex-direction: column;
	position: relative;
}


@media(max-width:767px){
	.advantage{
		display: block;
	}
}


/*@media(max-width:1024px){
	.advantage{
		align-items: center;
	}
}*/


.advantage h3{
	padding: 96px 0 8px;
}


.advantage-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

@media(max-width:767px){
	.advantage-inner{
		align-items: flex-start;
        margin-left: 16px;
	}
}

/*@media(min-width:1024px){
	.advantage-inner{
		margin-left: 40px;
	}
}*/

.adavntage__main{
	display: flex;
	justify-content: center;
	gap: .5em;
	padding: 0 0 48px 0;
	/*float: left;
	width: 300px;*/
}


@media(max-width:767px){
	.adavntage__main{
		padding: 0 0 32px 0;
		flex-direction: column;
		align-items: flex-start;
		/*float: none;*/
	}
}


.adavntage__main p{
	font-size: 32px;
	font-weight: 400;
	-webkit-text-stroke: .8px #232220;
	font-family: "Zen Kaku Gothic New", sans-serif;
	/*text-shadow: .2px 0 #232220,-.2px 0 #232220,0 .2px #232220,0 -.2px #232220;*/
	
}


@media(max-width:767px){
	.adavntage__main p{
		text-align: left;
		font-size: 28px;
	}
}

.a_pc{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: wrap;
}


@media(max-width:767px){
	.a_pc{
		display: block;
	}
}


.adavntage__image{
	/*width: 100%;*/
	/*justify-self: end;*/
	flex: 0 0 clamp(420px, 36vw, 540px);
	/*float: right;*/
	/*height: auto;
	margin: 0 auto;*/
	/*flex: 0 0 40%;
	text-align: right;*/
}

@media(max-width:767px){
	.adavntage__image{
		height: auto;
		margin: 0 auto;
		/*float: none;*/
	}
}


.adavntage__image img{
	max-width: 480px;
	/*width: 560px;*/
	height: auto;
}


@media(max-width:767px){
	.adavntage__image img{
		width: 100%;
		max-width: 400px;
	}
}


.adavntage__setsumei{
	border-left: double 5px #232220;
	text-align: justify;/*中の文字を、幅いっぱいに広げる方法！隙間がなくなるので、長文に使用する*/
	/*float: left;*/
	padding: 4px 0 4px 20px;
	flex: 0 0 clamp(280px, 48vw, 360px);
}

@media(max-width:767px){
	.adavntage__setsumei{
		margin-top: 32px;
		max-width: 380px;
	}
}


.adavntage__setsumei p{
    font-size: 16px;
}

.a__background01{
	background-image: url("../images/background-ad01.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 90px;/*横　縦*/
	padding: 56px 0 80px;
	margin-bottom: 16px;
	position: relative;
	/*min-height: 100vh;*/
}

.a__background02{
	background-image: url("../images/background-ad02.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100px;/*横　縦*/
	padding: 64px 0 80px;
	margin-bottom: 16px;
	position: relative;
	/*min-height: 100vh;*/
}

.a__background03{
	background-image: url("../images/background-ad03.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100px;/*横　縦*/
	padding: 64px 0 80px;
	margin-bottom: 96px;
	position: relative;
	/*min-height: 100vh;*/
}

@media(max-width:767px){
	.a__background01,
	.a__background02,
	.a__background03{
		background-position: 0 90px;/*横　縦*/
		/*padding: 32px 0 80px;*/
		/*border-radius: 0 80px 0 80px;*/
	}
}

@media(max-width:767px){
	.a__background03{
		margin-bottom: 104px;
	}
}


@keyframes swingTwice {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(3deg); }   /* ゆっくり右 */
  40%  { transform: rotate(-3deg); }  /* ゆっくり左 */
  60%  { transform: rotate(2deg); }   /* 小刻み右 */
  80%  { transform: rotate(-2deg); }  /* 小刻み左 */
  100% { transform: rotate(0deg); }   /* 元に戻る */
}

.hanataba {
  width: 200px;
  position: absolute;
  top: 420px;
  right: 40px;
  transform-origin: top center; /* 下重心で揺れる */
  animation: swingTwice 6s ease-in-out 2; /* 6秒間 × 2回 */
  z-index: 1010;
}

@media(max-width:767px){
    .hanataba{
        width: 188px;
        top: 760px;
        right: 40px;
    }
}

@media(prefers-reduced-motion: reduce){
  .hanataba {
    animation: none;
  }
}


@media(max-width:767px){
	.hanataba{
		top: 660px;
		right: 40px;
	}
}


.hanataba img{
	width: 100%;
}


.timeschare{
	width: 180px;
	height: auto;
	position: absolute;
	top: 440px;
	left: 80px;
	animation: chairTilt 1.5s ease-in-out 1;
    z-index: 1011;
}

@media(max-width:767px){
	.timeschare{
		top: 680px;
		left: 238px;
		width: 140px;
	}
}

@keyframes chairTilt {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-5deg); }
  40%  { transform: rotate(3deg); }
  60%  { transform: rotate(-3deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}


.timeschare img{
	width: 100%;
}


.shokubutu{
	width: 200px;
	height: auto;
	position: absolute;
	top: 420px;
	right: 16px;
	transform-origin: top center; /* 下重心で揺れる */
	animation: swingTwice 6s ease-in-out 2; /* 6秒間 × 2回 */
    z-index: 1013;
}

@media(max-width:767px){
	.shokubutu{
		width: 170px;
		top: 680px;
		right: 16px;
	}
}


.shokubutu img{
	width: 100%;
}


.safety{
	background-image: url("../images/washi-02.png");
	background-size: cover;
	background-attachment: fixed;
	padding: 40px 0 64px;
}


.safety-inner{
	/*margin-bottom: 40px;*/
}


.safety__text{
	/*padding: 28px 0;*/
	margin: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.safety__text p{
	font-size: 18px;
	font-weight: 400;
	-webkit-text-stroke: .2px #232220;
	text-align: left;
}


.safety__image{
	display: grid;/* ← flex指定を無効化 */
	grid-template-columns: repeat(4,1fr);/* PC：4列 */
	/*gap: 14px;*/
	justify-content: center;/* 子の中央揃え */
	align-items: center;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px;/* 画面端の余白（任意） */
	min-width: 0;
}

@media(max-width:767px){
	.safety__image{
		grid-template-columns: repeat(2, minmax(120px, 1fr));
		width: 380px;
		height: auto;
		gap: 0;
        padding: 0;
	}
}


.safety__image img{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	display: block;
	max-width: 240px;
	/*box-shadow: 4px 4px 8px rgba(0,0,0,.04);*/
}


@media(max-width:767px){
	.safety__image img{
		padding: 8px;
	}
}


.ourprocess{
	/*margin: 40px 0;*/
	/*background-color: antiquewhite;*/
	padding: 40px 0 72px;
}


.process-left{
	display: flex;
	position: relative;
	padding-top: 48px;
	/*background-image: url("../images/pro_01.png");
	background-repeat: no-repeat;
	background-size: 88px;
	background-position: right 16px top 8px;*/
	/*justify-content: flex-start;*/
}


.pro-01{
	position: absolute;
	top: 64px;
	right: 520px;
	/*left: -16px;*/
	width: 108px;
	height: auto;
}

@media(max-width:767px){
	.pro-01{
		position: absolute;
		top: 64px;
		right: 48px;
	}
}



.pro-03,.pro-05{
	position: absolute;
	top: 64px;
	right: 500px;
	/*left: -16px;*/
	width: 112px;
	height: auto;
}

@media(max-width:1024px) and (min-width:768px){
	.pro-01,.pro-03,.pro-05{
		top: 64px;
		right: 280px;
	}
}

@media(max-width:767px){
	.pro-03,.pro-05{
		top: 64px;
		right: 48px;
	}
}


.process-right{
	display: flex;
	padding-top: 64px;
	position: relative;
	/*justify-content: flex-end;*/
}


.pro-02,.pro-04,.pro-06{
	position: absolute;
	top: 68px;
	left: 720px;
	width: 112px;
	height: auto;
}

@media(max-width:1024px) and (min-width:768px){
	.pro-02,.pro-04,.pro-06{
		top: 68px;
		left: 400px;
	}
}

@media(max-width:767px){
	.pro-02,.pro-04,.pro-06{
		top: 68px;
		left: 64px;
	}
}


.pro-01 img,
.pro-02 img,
.pro-03 img,
.pro-04 img,
.pro-05 img,
.pro-06 img{
	width: 100%;
	height: auto;
}


@media(max-width:767px){
	.process-left,
	.process-right{
		display: block;
	}
}


.process-left .process-inner{
	margin-right: auto;
}

@media(max-width:767px){
	.process-left .process-inner{
		align-items: flex-start;
	}
}


.process-right .process-inner{
	margin-left: auto;
}

@media(max-width:767px){
	.process-right .process-inner{
		align-items: flex-end;
		text-align: right;
	}
}


.process-inner{
	/*margin-bottom: 28px;*/
	display: flex;
	text-align: left;
	align-items: flex-start;
	justify-content: center;
	max-width: 1000px;
	height: auto;
	/*width: min(100%, 1000px);*/
	min-width: 0;
	flex-direction: column;
	/*padding: 0 200px;*/
}


@media(max-width:767px){
	.process-inner{
		width: 100%;
		height: auto;
		flex-direction: column;
		padding: 0;
	}
}


.pro__main{
	font-size: 24px;
	letter-spacing: .18rem;
	width: 280px;
	margin: 0 0 16px 0;
}

@media(max-width:767px){
	.pro__main{
		width: 70%;
	}
}


.process-img-p{
	display: flex;
	gap: 28px;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1000px;
}


@media(max-width:767px){
	.process-img-p{
		/*display: grid;*/
		flex-direction: column;
		width: 70%;
		height: auto;
	}
}


/*.process__image{
	max-width: 460px;
}*/


.process__text{
	width: 240px;
	height: auto;
	text-align: left;
}

@media(max-width:767px){
	.process__text{
		width: 320px;
	}
}

.process-right .process__text{
	margin-bottom: 16px;
}

@media(max-width:767px){
	.process__image,
	.process__text{
		width: 100%;
	}
}


/* 画像の枠サイズは固定。中身だけ動かす */
.process__image{
  /* 枠の比率（例：6:4）を固定。幅はレイアウト任せ、縦は比率から決まる */
  aspect-ratio: 6 / 4;
  overflow: hidden;       /* はみ出しを隠す */
  max-width: 460px;
  height: auto;
}

/* 画像は枠いっぱいに収め、見せたい位置をobject-positionで指定 */
.process__image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* 枠を満たしつつトリミング */
  object-position: 50% 50%; /* ←見せる位置（横% 縦%） */
  /* 例：左寄りなら 20% 50%、上寄りなら 50% 20% などに変更 */
}

/* スマホだけ見せる位置を変えたい場合 */
@media (max-width: 767px){
  .process__image{
    aspect-ratio: 4 / 4;  /* ※比率もそのままにしたいならPCと同じ値のまま */
  }
  .process__image img{
    object-position: 20% 40%; /* ←スマホ時の見せたい位置に調整 */
  }
}


.process__text p{
	line-height: 1.6;
	font-size: 18px;
}

@media(max-width:767px){
	.process__text p{
		font-size: 16px;
	}
}

.works{
	padding: 88px 0 48px;
	background-image: url("../images/washi.png");
	background-repeat: repeat;
	background-size: contain;
}

.works h3{
	padding: 0;
	margin: 0;
}


.gallery__slider .slick-slide{
	max-width: 100%;
	margin: 0 48px;
	padding: 0;
}

@media(max-width:767px){
	.gallery__slider .slick-slide{
		margin: 0 24px;
	}
}

.gallery__slider{
	margin: 24px 0;
}

.gallery__slider img{
	width: 560px;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 16px;
	
}

@media(max-width:768px){
	.gallery__slider img{
		width: 100% !important;
		height: auto !important;
		max-width: 340px;
		margin: 0 auto;
		display: block;
	}
}


.gallery__slider li{
	list-style: none;
}

/*@media(max-width:767px){
	.gallery__slider li{
		margin-bottom: 32px;
	}
}*/


.slider-reserved{
	min-height: clamp(280px,40vw,520px);
}


.gallery__slider p{
	text-align: center;
	font-size: 18px;
	margin-top: 12px;
	margin-bottom: 16px;
}

@media(max-width:767px){
	.gallery__slider p{
		font-size: 16px;
	}
}

.gallery__slider .slick-dots{
	position: static;
	margin-top: 8px;
	text-align: center;
}


.call-namber{
	width: 220px;
	height: auto;
	padding: 16px 20px;
	background-color: #AD866C;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	border-radius: 28px;
}


.checkbox{
	padding: 16px 0 32px;
	/*border-bottom: dotted 2px #ad866c;*/
	width: 60%;
	height: auto;
	margin: 0 auto;
}

@media(max-width:767px){
	.checkbox{
		width: auto;
	}
}


.form__name .soudannaiyou{
	padding-top: 32px;
}

@media(max-width:767px){
	.form__name .soudannaiyou{
		padding-top: 32px;
	}
}


h4{
	font-size: 18px;
	margin-bottom: 8px;
	margin-top: 20px;
}

@media(max-width:767px){
	h4{
		font-size: 16px;
	}
}


.form{
	padding: 80px 0;
	background-image: url("../images/washi-02.png");
	background-size: cover;
	background-repeat: repeat;
	background-attachment: fixed;
}

@media(max-width:767px){
    .form{
        padding: 40px 0;
    }
}


.form h3{
	padding: 28px 0 0;
}


.form h3 span{
	padding: 16px 0 24px;
}


.container .form-white{
	padding: 0;
}

@media(max-width:767px){
	.container .form-white{
		padding: 0 28px;
	}
}


.form-white{
	background-color: #fff;
    border-radius: 20px;
}


.form-white h3 img{
	margin-top: 56px;
}

@media(max-width:767px){
	.form-white h3 img{
		margin-top: 40px;
	}
}


.form__name{
	display: flex;
	justify-content: flex-start;
	gap: 16px;
	align-items: baseline;/*文字の下揃えができる！ align-items:centerは、箱の中心を揃える時に使用する*/
}

@media(max-width:767px){
	.form__name{
		display: flex;
		justify-content: space-between;
	}
}


.form__name span{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 24px;
	background-color: #EE4A18;
	text-align: center;
	padding: 2px;
	border-radius: 8px;
	color: #fff;
}


.form__name span small{
	font-size: 12px;
	line-height: 1;
}


.checkbox__group{
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 8px;
}

@media(max-width:767px){
	.checkbox__group{
		display: flex;
		flex-direction: column;
		margin: 0 0 0 28px;
	}
}


.checkbox__group input[type="checkbox"]{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin-right: 8px;
	width: 18px;
	height: 18px;
	/*color: #9E9E9E;*/
	border: 2px solid #9E9E9E;
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
}


/* チェックマーク */
.checkbox__group input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border-right: 3px solid #333;
  border-bottom: 3px solid #333;
  transform: rotate(45deg);
  pointer-events: none; /* ← クリックを邪魔しない */
}


.checkbox__group label{
	display: flex;
	align-items: center;
	margin: 0 16px 8px 0;
	cursor: pointer;
}


.name{
	display: block;
}


input[type="text"],
input[type="email"]{
	width: 320px;
	height: 40px;
	border: 2px solid #9E9E9E;
	border-radius: 4px;
	margin-top: 4px;
}

@media(max-width:767px){
	input[type="text"],
	input[type="email"]{
	width: 280px;
}
}


.name__group{
	display: flex;
	flex-direction: column;
	margin: 0 0 0 28px;
}


textarea{
    width: 320px;
    height: 280px;
    resize: none;/*変更不可*/
    resize: both;/*初期値　リサイズ両方可能*/
    resize: vertical;/*縦方向のみの変更*/
    min-height: 160px;/*160px以上縮まらない*/
    max-height: 420px;/*420px以上大きくならない*/
	border: solid 2px #9E9E9E;
    border-radius: 6px;
}

@media(max-width:767px){
	textarea{
		width: 280px;
        height: 200px;
	}
}


.form-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 0;
}

@media(max-width:767px){
	.form-btn{
		padding: 40px 0;
	}
}


button[type="submit"]{
	background-color: #242220;
	border-radius: 10px;
	border: none;
	color: #fff;
	width: 180px;
	height: 48px;
	
}

button[type="submit"]:disabled{
	background-color: #ccc;
	cursor: not-allowed;
}

#toTopBtn {
  position: fixed;       /* 常に画面に固定 */
  right: 20px;           /* 右端から20px */
  bottom: 20px;          /* 下端から20px */
  padding: 10px 8px;
  background-color: #E2D29A;
  /*border: solid 1px #232220;*/
  border: none;
  color: #232220;
  /*border: none;*/
  border-radius: 9999px;
  /*font-size: 14px;*/
  cursor: pointer;
  /*display: none; */        /* 初期状態は非表示 */
  z-index: 9999;         /* 他要素の上に出す */
  width: 64px;
  height: 64px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.09);
	/* ▼ ここを追加：中央寄せにする */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media(max-width:767px){
	#toTopBtn{
		bottom: 72px;
	}
}

#toTopBtn:hover {
  opacity: 0.8;
}


#toTopBtn.scrolling{
	opacity: .2;
	transition: opacity 0.3s;
}


footer{
	background-image: url("../images/washi.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	width: auto;
	height: 560px;
}


.footer-inner{
	padding-top: 64px;
}


.footer__img{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 300px;
	height: auto;
	margin: 0 auto;
	/*padding-top: 80px;*/
}

footer img{
	width: 100%;
}


.footer__p{
	display: flex;
	justify-content: center;
	margin: 24px auto 32px;
    width: 800px;
}

@media(max-width:767px){
	.footer__p{
		flex-wrap: wrap;
        width: 400px;
	}
}


.footer__p p{
	padding: 0 24px;
	border-left: solid 1px #363636;
	border-right: solid 1px #363636;
    margin-left: -1px;
    border-color: #707070;
}

.footer__p a{
	text-decoration: none;
	color: #232220;
}

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


.footer__small{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
}

.footer__adress p, .footer__small{
	color: #7B7B7B;
}


.soudan-btn{
    display: flex;
    /*margin: 48px 0 0 0;*/
	/*padding: 16px 0 0 0;*/
    justify-content: space-between;
    align-items: center;
}

@media(max-width:767px){
    .soudan-btn,.soudan-btn02{
        display: block;
    }
}


.section-btn{
    /*padding: 8px;*/
    background-color: #fff;
    width: 340px;
    height: 72px;
    margin: 24px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #232220;
    border-radius: 16px 0 16px 0;
	list-style: none;
	/*background-color: aqua;*/
}


.section-btn a{
    color: #232220;
	text-decoration: none;
}

.section-btn a:hover{
    color: #C7C7C7;
}

.soudan-btn ul{
	list-style: none;
}


/* 共通トークン */
:root{
  --cta-z: 5000;
  --cta-radius: 9999px;
  --cta-gap: 12px;
  --cta-shadow: 0 10px 24px rgba(0,0,0,.14);
  --cta-safe: env(safe-area-inset-bottom, 0px);
}

/* === モバイル：固定2ボタンバー === */
.cta-bar{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--cta-safe));
  z-index: var(--cta-z);
  display: none; /* PCでは非表示、SPのみ表示 */
  gap: var(--cta-gap);
  /*background: rgba(255,255,255,.9);
  padding: 10px;
  border-radius: 16px;
  box-shadow: var(--cta-shadow);*/
  backdrop-filter: blur(8px);
}
@media (max-width: 767px){
  .cta-bar{ display: flex; }
}

.cta-btn{
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  padding: 14px 12px;
  /*border-radius: 12px;*/
  border: 1px solid #e5e5e5;
  transition: transform .06s ease, opacity .2s ease;
}
.cta-btn:active{
	transform: scale(.98);
}

.cta-primary{
  color: #fff;
  background: #8FBE4F;       /* サイトの基調色に合わせてOK */
  border-color: #8FBE4F;
}
.cta-phone{
  color: #8FBE4F;
  background: #ffffff;
}

/* ===== 共通トークン（あなたのまま） ===== */
:root{
  --cta-z: 5000;
  --cta-radius: 9999px;
  --cta-gap: 12px;
  --cta-shadow: 0 10px 24px rgba(0,0,0,.14);
  --cta-safe: env(safe-area-inset-bottom, 0px);
}

/* ===== SP：下固定バー（あなたのを踏襲 ※見た目だけ少し整形案） ===== */
.cta-bar{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--cta-safe));
  z-index: var(--cta-z);
  display: none; /* PCでは非表示、SPのみ表示 */
  gap: var(--cta-gap);
  border-radius: 16px;
  background: rgba(255,255,255,.9);   /* ← 透過でOK（非表示にしたいならコメントアウト可） */
  /*padding: 10px;
  box-shadow: var(--cta-shadow);
  backdrop-filter: blur(8px);*/
}
@media (max-width: 767px){
  .cta-bar{
	  display: flex;
	}
}

.cta-btn{
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  padding: 14px 12px;
  border: 1px solid #e5e5e5;
  transition: transform .06s ease, opacity .2s ease;
}
.cta-btn:active{ transform: scale(.98); }

.cta-primary{
  color: #fff;
  background: #8FBE4F;   /* サイト基調色 */
  border-color: #8FBE4F;
}
.cta-phone{
  color: #8FBE4F;
  background: #ffffff;
}

/* ===== 使わないので削除：右下FAB関連 ===== */
/* .cta-fab { ... } も @media (min-width:768px) の .cta-fab も丸ごと削除 */

/* ドロワー展開時にSPバーを隠す（ヘッダーより後に .cta-bar を置くこと） */
.header__nav.is-open ~ .cta-bar{
  display: none !important;
}

/* ===== PCナビ右端CTA用：新規追加 ===== */
.header__nav .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 500;
  border-radius: 9999px;
  padding: 10px 16px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .06s ease, opacity .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.header__nav .btn:active{ transform: scale(.98); }

.header__nav .cta-primary{
  background: #8FBE4F;
  color: #fff;
  border-color: #8FBE4F;
}
.header__nav .cta-primary:hover{ opacity: .9; }

.header__nav .cta-phone{
  background: #fff;
  color: #8FBE4F;
  border-color: #8FBE4F;
}
.header__nav .cta-phone:hover{ background: #f7fffb; }

/* PC：ナビ右端に寄せて横並び */
@media (min-width: 768px){
  .header__nav ul{
    display: flex;          /* 既にflexならOK。未指定なら有効化 */
    align-items: center;
    /*gap: 32px;*/              /* 通常メニュー間隔 */
  }
	
  .header__nav .nav-actions{
    margin-left: auto;      /* 右端へ */
    display: flex;
    gap: 12px;              /* CTA間隔 */
  }
  /* PCで電話ボタンを隠したい場合は次を有効化 */
  /* .header__nav .cta-phone{ display: none; } */
}

/* SP：ドロワー内では縦並び・幅いっぱい */
@media (max-width: 767px){
  .header__nav .nav-actions{
    width: 100%;
    display: grid;
    gap: 24px;
    margin-top: 16px;
  }
  .header__nav .nav-actions .btn{
    width: 80%;
    padding: 24px 20px;
    font-size: 16px;
    border-radius: 12px;
	margin: 0 auto;
	  text-align: center;
  }
}

/* アクセシビリティ＆省モーション */
.header__nav .btn:focus-visible,
.cta-btn:focus-visible{
  outline: 3px solid #92d3bf;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .header__nav .btn,
  .cta-btn{ transition: none; }
}

.material-symbols-outlined{
  font-family: "Material Symbols Outlined" !important;
  font-weight: 400;           /* 100..700 */
  font-style: normal;
  font-size: 26px;            /* 見た目サイズ */
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: .35em;        /* テキストとの間隔 */
  font-variation-settings:
    "FILL" 0,                 /* 0=アウトライン / 1=塗りつぶし */
    "wght" 400,               /* 太さ */
    "GRAD" 0,                 /* コントラスト調整 */
    "opsz" 24;                /* 最適化サイズ */
}

.icon-top {
  font-size: 36px;   /* 任意の大きさ */
  line-height: 1;
}

#toTopBtn .material-symbols-outlined{
	font-size: 50px;
	font-variation-settings:
		"FILL" 0,
		"wght" 50,
		"GRAD" 0,
		"opsz" 24;
}