@charset "utf-8";


.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:25px 0 10px;
}
.button-container p{
  padding: 12px 0px 12px 0px;
	font-size:clamp(17px,2vw,20px);
  background-color: #fff;
  color: #6f9c71;
  border: 1px solid #ccc;
  border-radius: 10px; 
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  outline: none;
  width:70%;
  text-align:center;
  font-weight:700;
   position:relative;
}
.arrow_s_b {
  position: relative;
  display: inline-block;
  padding-left: 0px;
}

.arrow_s_b:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #6f9c71;
  position: absolute;
  top: 0;
  right: 13px;
  bottom: 0;
  margin: auto;
}
.indentnone{
	text-decoration:none;
}

.new-lbl_inner{
	position:absolute;
	left:0;
	top:0;
}
.new-lbl {
  display: inline-block;
  position: relative;
  height: 30px;/*高さ*/
  line-height: 30px;/*高さ*/
  text-align: center;
  padding: 0 20px 0 10px;/*文字の左右の余白*/
  font-size: 12px;/*文字サイズ*/
  background: #d1101a;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10px) 50%, 100% 100%, 0% 100%);
}
/*-------------------------------------------------

地域の画像

---------------------------------------------------*/
.plan_map_body{
	background:#f7f6f4;
	padding:2rem 0;
	margin:0px 0 0;
	border-bottom:1px solid #ccc;
}
@media screen and (min-width: 769px) {
.plan_map_body{
	padding:3rem 0;
	}
}

.stage{
	text-align:center;
	max-width:90%;
	margin:0 auto;
}
.plan_map_body ul{
	display:flex;
	justify-content:center;
	gap:0 30px;
	font-size:clamp(14px,2vw,16px);
	margin:20px 0 0;
}
.plan_map_body ul li:nth-child(1) span{
	background:#E4EDE6;
	border:1px solid #222;
	padding:0px 10px;
	margin:0 5px 0 0;
}
.plan_map_body ul li:nth-child(2) span{
	background:#D1D1D1;
	border:1px solid #222;
	padding:0px 10px;
	margin:0 5px 0 0;
}

.plan_sumnail_body_main{
	background:#f7f6f4;
	padding:1rem 0;
}

.plan_sumnail_body{
	width:var(--spwidth);
	margin: 0px auto 60px;
	display:flex;
	gap: 40px 20px;
/*	flex-direction:column;*/


}
@media screen and (min-width: 769px) {
.plan_sumnail_body{
	width:var(--pcwidth);
	flex-direction:row;
	flex-wrap: wrap; 
	justify-content: flex-start;
	margin: 60px auto;
	}
}
@media screen and (max-width: 767px) {
  .plan_sumnail_body {
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
  }

  .item_box {
    flex: 0 0 100%; 
    scroll-snap-align: start;
  }
.plan_sumnail_body::-webkit-scrollbar {
    height: 8px;
  }

  /* スクロールバーの背景部分（トラック） */
  .plan_sumnail_body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  /* スクロールバーのつまみ部分（サム） */
  .plan_sumnail_body::-webkit-scrollbar-thumb {
    background-color: #28a745; 
    border-radius: 4px; 
    border: 2px solid #f1f1f1;
  }

  /* つまみをホバーした時の色 */
  .plan_sumnail_body::-webkit-scrollbar-thumb:hover {
    background-color: #218838; 
  }
}
.sp-scroll_hint{
	width:180px;
	margin: 20px 0 10px 4%;
	font-size:12px;
	border:1px solid #ccc;
	padding:3px 10px;
	text-align:center;
	background:#fff;
	
}
@media screen and (min-width: 769px) {
.sp-scroll_hint{
	display:none;
	}
}

/*-------------------------------------------------

箱の構成

---------------------------------------------------*/
.item_box{
	padding:20px;
	background:#fcfcfc;
	position:relative;
	/*background: linear-gradient(45deg, #fcfcfc 0%, #fcfcfc 80%, rgba(231,231,231,.5) 80%, rgba(231,231,231,.5) 100%);*/
	background:#6f9c71;
	transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
.item_box{
	width: calc((100% - 20px) / 2);
	box-sizing: border-box;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	}
}


.item_box a{
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 0px; /* テキスト（間取りを見る）を飛ばして見えなくする */
  z-index: 8; /* 最前面に */
}
.styled-button {
  display: inline-block;
  transition: transform 0.3s ease;

}
.item_box:hover .button-container {
  transform: translateY(5px); /* 少し下に下がる */
}
.item_box:hover figure img {
  filter: grayscale(100%); /* 3. 画像を白黒にする */
}
.item_box figure{
	margin: 0 0 20px;
	position:relative;
}
.item_box figure img {
  transition: filter 0.3s ease;
  display: block;

}
.item_box figcaption{
	position:absolute;
	right:5px;
	bottom:5px;
	color:#fff;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.house_number dl{
	display:flex;
	gap: 40px 20px;
	justify-content:center;
	align-items:center;
	padding:0px 15px;
	margin:0 0 0px;
	color:#fff;
}
.house_number dl dt{
	font-size:clamp(37px,2vw,40px);
	padding:0 0px 0 0;
	text-align:center;
	font-weight:700;
}
.house_number dl dt span{
	font-size:clamp(15px,2vw,18px);
	display:block;
	text-align:center;
	margin:0 0 -10px;
	font-weight:500;
}

.house_number dl dd{
	font-size:clamp(14px,2vw,16px);
}
.house_number dl dd span{
	font-size:clamp(18px,2vw,22px);
	display:inline-block;
}
.house_text{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:10px 0px;
	margin: 0 auto;
	text-align:center;
	color:#fff;
	font-size:clamp(18px,2vw,22px);
	letter-spacing:1px;
	line-height:1.6;
}

.modelhouse_text .on,
.modelhouse_text .off{
	text-align:center;
	font-size:clamp(13px,2vw,14px);
	padding:4px 0;
	max-width:200px;
	margin: 0 auto;
}
.modelhouse_text .on{
	border:1px solid #ccc;
}
/*-------------------------------------------------

詳細の構成

---------------------------------------------------*/
.plan-detail{
	background:#f7f6f4;
}

h3.plan_copy{
	font-size:clamp(23px,2vw,30px);
	text-align:center;
	width:var(--spwidth);
	margin: 0 auto 0px;
	letter-spacing:var(--spacing);
}

.floor_map_sp{
	margin:0 0 40px;
}
.floor_map{
	display:none;
}

.plan-detail{
	background:#f7f6f4;
}

.plan-detail_body{
	width:var(--spwidth);
	margin: 0 auto;
	display:flex;
	gap:30px 0;
	flex-direction: column;
	padding:0px 0 30px;
	margin:10px auto 0px;
}
@media screen and (min-width: 769px) {
.plan-detail_body{
	width:var(--pcwidth);
	display:flex;
	gap:0 30px;
	align-items: flex-start;
	position: relative;
	margin:10px auto 0px;
	padding:30px 0 30px;
	flex-direction: row;
}
.plan-detail_map {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; 
    width: 60%;
    height: auto;
  }
  .plan-detail_inner {
    width:50%;
    flex-grow: 1;
  }
  .floor_map{
  display:block;
  }
  .floor_map img {
    width: 100%;
    height: auto;
    display: block;
  }
.floor_map_sp{
	display:none;
	}
}

.click_pc{
	text-align:right;
	margin:15px 0 0;
	display:block;
}
@media screen and (max-width: 767px) {
.click_pc{
	display:none;
	}
}
.click_sp{
	text-align:right;
	margin:15px 0 0;
	display:block;
}


/* モーダル全体の背景（オーバーレイ） */
.mdl-fp-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease; 
  pointer-events: none; 
}

/* --- 追加：開いた時の状態 --- */
.mdl-fp-overlay.is-open {
  opacity: 1; /* 不透明にする */
  pointer-events: auto; /* クリックできるようにする */
}

/* 画像を包むラッパー */
.mdl-fp-wrapper {
  position: relative;
  width: 90%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  background:#fff;
  padding:0px 0;
  transition: transform 0.4s ease; /* 背景と同じ時間で変化 */
  height: auto;
  border-radius:10px;
}



.mdl-fp-body{
		height: 70vh; /* 少し高さを出すと見やすい */
		overflow-x: auto; /* 横スクロールを許可 */
		overflow-y: auto; /* 縦スクロールを許可 */
    /* iOSでの慣性スクロールを有効にする */
    -webkit-overflow-scrolling: touch;
    /* 意図しないブラウザの挙動を抑制 */
    touch-action: pan-x pan-y;
}
@media screen and (min-width: 769px) {
.mdl-fp-body{
	height:auto ;
	overflow:hidden;
  padding:10px 0;
	}
}
.mdl-fp-body::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}
.mdl-fp-body::-webkit-scrollbar-thumb {
  background: #509600;
  border-radius: 20px;
}
.mdl-fp-body::-webkit-scrollbar-track {
  background: #fafafa;
  border-radius: 20px;
}

/* モーダル内の画像 */
.mdl-fp-image {
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  /* --- 追加：ズームインのアニメーション設定 --- */
  transform: scale(0.9); /* 初期状態は少し小さく */
  padding:15px ;
}
@media screen and (min-width: 769px) {
.mdl-fp-image {
	max-width: 100%;
  max-height: 95vh;
  padding:0px 0;
	}
}


/* --- 追加：開いた時の画像の状態 --- */
.mdl-fp-overlay.is-open .mdl-fp-image {
  transform: scale(1); /* 元のサイズに戻る */
}

/* 閉じるボタン */
.mdl-fp-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #111;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  transition: opacity 0.2s;
}
@media screen and (min-width: 769px) {
.mdl-fp-close-btn {
  top: 0px;
	font-size: 50px;
	}
}

/*-------------------------------------------------

詳細の号棟+間取り

---------------------------------------------------*/
.plan_area_number{
	display:flex;
/*	background:rgba(80,150,0,.05);*/
	background:#6E9C70;
	align-items:center;
	justify-content:center;
	letter-spacing:var(--spacing);
	padding:10px 0;
	flex-direction:column;
	color:#fff;	
}
.plan_area_number dt{
	font-size:clamp(30px,2vw,33px);
	padding:10px 0 15px;
	border-bottom:1px solid #fff;
	font-weight:500;
	width:90%;
	text-align:center;

}
.plan_area_number dd{
	font-size:clamp(16px,2vw,18px);
	padding:10px 0 10px;
}
.plan_area_number dd span{
	font-size:clamp(23px,2vw,26px);
}
/*-------------------------------------------------

詳細の延床面積等

---------------------------------------------------*/
.plan_area_m{
	border-top:1px solid #ccc;
	display:flex;
	gap: 40px 10px;
	justify-content:space-between;
	align-items:center;
	padding:10px 0px;
	border-top:none;
	max-width:100%;
	margin: 0 auto;
}
@media screen and (min-width: 769px) {
.plan_area_m{
	max-width:100%;

	}
}

.plan_area_m dl{
	display:flex;
	gap: 0px 10pxpx;
	align-items:center;
	padding:5px 0px;
	flex-direction:row;
}
@media screen and (min-width: 769px) {
.plan_area_m dl{
	gap: 10px 0px;
	align-items:center;
	padding:5px 5px;
	}
}

.plan_area_m dl dt{
	font-size:clamp(13px,2vw,16px);
	text-align:center;
}

.plan_area_m dl dt span{
	font-size:clamp(11px,2vw,12px);
	text-align:center;
	display:block;
}

.plan_area_m dl dd{
	font-size:clamp(14px,2vw,18px);
	line-height:1;
	font-weight:500;
}
.plan_area_m dl dd span{
	font-size:clamp(22px,2vw,28px);
}

/*-------------------------------------------------

トータル

---------------------------------------------------*/
.total_inner{
	margin:0 0 20px;
}
.total_inner .total{
	width:100%;
	margin: 0 auto;
	font-size:clamp(14px,2vw,15px);
}
.total_inner dl{
	margin: 10px 0 0 auto;
	text-align:right;
}

.total_inner dt{
	padding:5px 0 ;
	border-bottom:1px solid #414141;
	font-size:clamp(12px,2vw,13px);
}
.total_inner dd{
	padding:3px 0 ;
	font-weight:500;
}
/*-------------------------------------------------

間取りのポイント

---------------------------------------------------*/
.point_inner{
	margin:0 0 40px;
}
.point_inner .point-title{
	background:#6E9C70;
	text-align:center;
	letter-spacing:var(--spacing);
	padding:10px 0;
	flex-direction:column;
	color:#fff;
	font-size:clamp(18px,2vw,20px);
	border-radius:10px;
	margin:0 0 15px;
}
.point_inner dl{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	margin: 5px auto;
}

.point_inner dt{
	font-size:clamp(20px,2vw,20px);
	color:#6E9C70;
}
.point_inner dd{
	font-size:clamp(16px,2vw,18px);	
	font-weight:500;
}
/*-------------------------------------------------

詳細の床

---------------------------------------------------*/

.floor_inner{
	padding:15px 0;
	display:grid;
	align-items:center;
	grid-template-columns:1fr 1fr;
}
.floor_inner div{
	padding:10px 0 ;
}
.floor_inner .floor_item01 {

	grid-column: 1 / span 2;
}
.floor_inner .floor_item01 p{
	letter-spacing:var(--spacing);
	font-size:clamp(16px,2vw,18px);
	border-bottom:1px solid #ccc;
}
.floor_inner .floor_item02 {
}
.floor_inner .floor_item03{
	grid-column: 1 / span 2;
}
.floor_inner .floor_item03 .floor_img{
	position:relative;
}
.floor_inner .floor_item03 .floor_img figcaption{
	position:absolute;
	right:5px;
	bottom:3px;
	color:#fff;
}
.floor_inner .floor_item04{
	grid-column: 1 / span 2;
}

.floor_item04 dl{letter-spacing:var(--spacing);}
.floor_item04 dt{
	font-size:clamp(18px,2vw,18px);
	margin:0 0 5px;
}
.floor_item04 dd{
	font-size:clamp(15px,2vw,15px);
}

/*-------------------------------------------------

詳細のスペック

---------------------------------------------------*/
.spec_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    width: 100%;
   font-size:clamp(12px,2vw,13px);
  }

  .spec_item {
    width: calc((100% - 3px) / 4); 
    display: flex;
    flex-direction:column;
    justify-content: center;
    padding: 5px 5px;
    box-sizing: border-box;
    text-align: center;
    border-radius:5px;
    min-height: 90px;
  }
@media screen and (min-width: 769px) {
  .spec_item {
   width: calc((100% - 3px) / 4); 
	}
}
  .spec_item p{
  margin:5px 0 0;
  height:40px;
  }
/*-------------------------------------------------

アイコンの設定

---------------------------------------------------*/
.icon_inner {
    display: flex;
    flex-wrap: wrap;
    gap:10px 5px;
    width: 100%;
   font-size:clamp(13px,2vw,13px);
/*
    padding:20px 0 ;

    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
    */
    margin:40px auto;
  }
.icon_inner dl{
    width: calc((100% - 10px) / 2); 
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap:0 5px;
}
@media screen and (min-width: 769px) {
.icon_inner dl{
	width: calc((100% - 10px) / 3); 
	}
}
.plan_notice li{
	text-indent:-1em;
	padding-left:1em;
	font-size:clamp(12px,2vw,14px);
	letter-spacing:.5px;
}
.plan_notice li:before{
	content:"※";
}
/*-------------------------------------------------

PLANページメインの共通部分

---------------------------------------------------*/
.plan-block_body{
	width:var(--spwidth);
	margin: 80px auto 0;
}

@media screen and (min-width: 769px) {
.plan-block_body{
	width:var(--pcwidth);
	margin: 100px auto 0;
	}
}

.h2-block {
	text-align:center;
}
.h2-block h2{
   font-size:clamp(30px,3vw,45px);
   font-weight:600;
}
.h2-block p{
   font-size:clamp(15px,2vw,20px);
   color:var(--green-color);
   font-weight:500;
   letter-spacing:1px;
}
.plan-comment_text{
   font-size:clamp(20px,2vw,22px);
   font-weight:500;
   text-align:center;
   margin:40px auto;
}
.line-style{
	width:min(60%, 450px);
	margin: 0 auto 40px;
}
.plan-block_inner{
	display:flex;
	gap: 40px 0px;
	flex-direction:column;
}
.h4-lbl{
   font-size:clamp(18px,2vw,20px);
   font-weight:500;
   text-indent:-1em;
   padding:20px 0 1em 20px ;
   
}
.h4-lbl:before{
	content:"■";
	color:var(--green-color);
}
.wh-text{color:#fff;}



/*-------------------------------------------------

Wood texture

---------------------------------------------------*/
.texture_flex_three{
	display:flex;
	gap: 0px 5px;
	flex-direction:row;
}
.texture_flex_three dt{
	position:relative;
}
.tx-notice{
	position:absolute;
	right:5px;

}
.tops{
	top:5px;
}
.bottoms{
	bottom:3px;
}
.bottoms{
	bottom:0px;
}
.texture_flex_three .tx-bg_texture{
	color:#fff;
	width:100%;
	background:rgba(0,0,0,.6);
	text-align:center;
	padding:.2em 0 .4em;
	font-size:clamp(15px,2vw,22px);
	position:absolute;
	left:0px;
	bottom:0px;
	font-weight:500;
	line-height:1.1;
}
.texture_flex_three .tx-bg_texture span{
	font-size:clamp(11px,2vw,13px);
	display:block;
}
@media screen and (min-width: 769px) {
.texture_flex_three .tx-bg_texture span{
	display:inline-block;
	margin:0 3px;
	}
}

.texture_flex_three dd{
	font-size:clamp(13px,2vw,17px);
	margin:5px 0 0;
	text-align:center;
	font-weight:500;
}
/*----2mm厚の天然木挽き板に隠された魅力----*/
.texture_flex_charm dl{
	display:flex;
	gap: 0px 15px;
	flex-direction:row;
}
.texture_flex_charm dt{
	font-size:clamp(13px,2vw,17px);
	font-weight:500;
	flex:1;
}
.texture_flex_charm dd{
	flex:1;
	position:relative;
}
/*----こだわったトータルな空間コーディネート----*/
.texture_flex_coordination dl{
	display:flex;
	gap: 0px 15px;
	flex-direction:column;
}
.texture_flex_coordination dt{
	font-size:clamp(13px,2vw,16px);
	font-weight:500;
	margin: 0 0 10px;
}
.texture_flex_coordination dd{
	flex:1;
	position:relative;
}
.texture_material{
	padding:40px 0 10px;
}
.texture_material ul{
	padding:0px 0 0;
	display:flex;
	gap: 10px;
	flex-direction:row;
	flex-wrap:wrap;
}
.texture_material ul li{
	width: calc(50% - 5px); 
	box-sizing: border-box;
	position:relative;
}
.texture_material ul li span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background:rgba(0,0,0,.6);
	font-size:clamp(16px,2vw,18px);
	font-weight:500;
	padding:5px 10px;
	color:#fff;
}

/*-------------------------------------------------

Design and Planning

---------------------------------------------------*/

.Design-space{
	margin:60px 0 0;
}
@media screen and (min-width: 769px) {
.Design-space{
	margin:120px 0 0;
	}
}

.one-img{
	position:relative;
}
.center-p{
	text-align:center;
}

.center-p img{
	max-width:90%;

}
.one-img_space{
	position:relative;
	margin:40px 0 10px;
	text-align:center;
}

.number-body{
	display:flex;
	gap: 40px;
	flex-direction:column;
}
@media screen and (min-width: 769px) {
.number-body{
	gap: 70px;
	}
}

.number-inner{
	display:flex;
	gap:0 10px;
	flex-direction:row;
	align-items:center;
	margin:0 0 20px;

}
.number-icon{
	background:var(--green-color);
	color:#fff;
	font-size:clamp(14px,2vw,20px);
	padding:4px 12px;
	font-weight:700;
	border-radius:3px;
}
.number-text{
	font-size:clamp(20px,2vw,26px);
	font-weight:500;
}
.number-text_main{
	font-size:clamp(15px,2vw,18px);
	margin:0px 0 40px;
}
.number-flex_inner {
	display:flex;
	gap: 20px;
	flex-direction:row;

}
.number-flex_inner dl{
	display:flex;
	gap: 10px;
	flex-direction:column;
	flex:1;
}
.number-flex_inner dt{
	position:relative;
}

.number-flex_inner dl dd{
	font-size:clamp(14px,2vw,17px);

}
.number-flex_inner dl dd span{
	display:block;
	font-weight:700;
	letter-spacing:1px;
	
}
.side-style {
	display:flex;
	gap:0 15px;
	flex-direction:row;
	margin:10px 0 0;
	justify-content:space-between;
}
.side-style div{
	flex:1;
}
@media screen and (min-width: 769px) {
.side-style {
	margin:20px 0 0;
	gap:0 40px;
	
	}
}
/*-------------------------------------------------

住むほどに実感できる確かな品質

---------------------------------------------------*/
.quality_body_plan{
	margin:60px 0 15px;
	padding:40px 0 ;
	border-top:1px solid #414141;
	border-bottom:1px solid #414141;
	
}
.quality_inner_plan{
	background:#B1D0C7;
	padding:0px 0px 30px;
}

.quality_inner_plan dl{
	text-align:center;
	margin:30px 0 0;
	padding:0 20px;
}
.quality_inner_plan dt{
	font-size:clamp(22px,2vw,25px);
	margin:15px 0;
	font-weight:700;
}

.quality_inner_plan dd{
	font-size:clamp(16px,2vw,17px);
}

.more-btn {
	margin: 20px auto 0;
	text-align:center;
	background:#fff;
	width:min(50%, 400px);
	border-radius:100px;
}

.more-btn a{
	color:var(--base-color);
	text-decoration:none;
	display:block;
	padding:13px 0;
	border-radius:100px;
	font-size:clamp(16px,2vw,17px);
}
.more-btn a:hover{
	background:#f1f1f1;
	border-radius:100px;
}




/*-------------------------------------------------

住友林業のこだわり

---------------------------------------------------*/
.ancstyle{
	background:#fff;
	height:5px;

}
@media screen and (min-width: 769px) {
.ancstyle{
	background:#fff;
	height:60px;

	}
}


.anchor_body{
	letter-spacing:1px;
	padding:40px 0;
	display:flex;
	flex-direction: column;
	gap:80px 0;
}
.anchor_body div{
	padding:0px 0 20px;
}
@media screen and (min-width: 769px) {
.anchor_body div{
	padding:0px 0 60px;
	}
}

.anchor_img,
.m-anchor_img{
	position:relative;
}


.anchor_dl{
	margin: 0 auto;
	width:min(90%, 500px);
	padding:100px 0 50px;
}
.anchor_dl dt{
	text-align:center;
	margin:0 auto 10px;
	width:min(25%, 130px);
}
.anchor_dl dd{
	text-align:center;
	font-size:clamp(22px,2vw,32px);
	font-weight:500;
}
.anchor_dl dd sup{
	font-size:clamp(12px,2vw,12px);
}
.anchor_text{
	margin: 0 auto;
	width:min(90%, 550px);
	font-size:clamp(15px,2vw,18px);
	line-height:2;
}
.anchor_span{
	display:block;
	font-size:clamp(13px,2vw,16px);
}
.anchor_ul{
	margin: 20px auto 0;
	width:min(90%, 550px);
}
.anchor_ul li{
	font-size:clamp(12px,2vw,13px);
	text-indent:-1em;
	padding-left:1em
}
.anchor_ul li:before{
	content:"※";
}
.anchor_ul_sub{
	margin: 20px auto 0;
	width:min(90%, 450px);
	text-align:left;
}
.anchor_ul_sub li{
	font-size:clamp(12px,2vw,13px);
	text-indent:-1em;
	padding-left:1em
}
.anchor_ul_sub li:before{
	content:"※";
}


.more-btn_c {
	margin: 60px auto 0;
	text-align:center;
	background:#fff;
	width:min(50%, 300px);
	border-radius:100px;
	border:1px solid #ccc;
}

.more-btn_c a{
	color:var(--base-color);
	text-decoration:none;
	display:block;
	padding:13px 0;
	border-radius:100px;
	font-size:clamp(16px,2vw,17px);
}
.more-btn_c a:hover{
	background:#f1f1f1;
	border-radius:100px;
}

/*----アンカー先の詳細-----*/
.anchor01_img{
	text-align:center;
	margin: 60px auto 0;
	width:min(90%, 550px);
}
.anchor03_img{
	text-align:center;
	margin: 60px auto 0;
	width:min(90%, 550px);
}
.anchor_main{
	letter-spacing:1px;
	padding:0px 0;
	display:flex;
	flex-direction: column;
	gap:30px 0;
	margin:0px 0 0;
}
.anchor_inner{
	padding:0px 0 0px;
	margin: 0px auto 0px;
}
.anchor_title{
	margin: 0px auto 0px;
	text-align:center;
	padding:50px 0 40px;
	border-bottom:2px solid #ccc;
	width:min(90%, 550px);
}
.anchor_title dt{
	margin:0 auto 15px;
	width:min(25%, 100px);
}
.anchor_title dd{
	text-align:center;
	font-size:clamp(22px,2vw,32px);
	font-weight:500;
}
.anc-main{
	padding:40px 0;
}
.anc-main .anc-main-dl{
	width:min(90%, 550px);
	margin: 0 auto;
}
.anc-main .anc-main-dl dt{
	text-align:center;
	margin:0 0 40px;
	font-size:clamp(20px,2vw,26px);
	font-weight:500;
}
.anc-main .anc-main-dl dd{
	text-align:left;
	font-size:clamp(15px,2vw,16px);
	letter-spacing:2px;
	line-height:2;
}
.border-on{
	border-bottom:2px solid #ccc;
	width:min(90%, 550px);
	margin: 0 auto;
}
.wall-lbl{
	color:#7aa77c;
	border:1px solid #7aa77c;
	border-radius:100px;
	padding:8px;
	width:min(70%, 230px);
	margin: 0 auto 30px;
	font-size:clamp(17px,2vw,20px);
	font-weight:500;
	text-align:center;
}

.anc-main .anc-main-dl-lbl{
	margin: 0 auto;
	padding:60px 0 0;
	width:min(90%, 550px);	
}
.anc-main .anc-main-dl-lbl dt{
	text-align:center;
	margin:0 auto 20px;
	font-size:clamp(17px,2vw,20px);
	font-weight:500;
	color:#fff;
	background:#7aa77c;
	padding:10px 0;
}
.anc-main .anc-main-dl-lbl dd{
	font-size:clamp(15px,2vw,16px);
	letter-spacing:2px;
	line-height:2;
}
.anc-main .anc-main-dl-sub{
	margin: 0 auto;
}
.anc-main .anc-main-dl-sub dt{
	text-align:center;
	margin:0 0 20px;
	font-size:clamp(18px,2vw,23px);
	font-weight:500;
}
.anc-main .anc-main-dl-sub dd{
	font-size:clamp(15px,2vw,16px);
	letter-spacing:2px;
	line-height:2;
}

.comm_inner{
	background:url(../images/commitment/bg.png) no-repeat 59% 45% #8AABA4!important;
	background-size:10%;
	position:relative;
	padding:4em 0 4em;
	text-align:center;
}
@media screen and (min-width: 769px) {
.comm_inner{
	padding:10em 0 ;
	background:url(../images/commitment/bg.png) no-repeat -0% -80% #8AABA4 fixed!important;
	background-size:10%;
	}
}

.comm{
	width:min(90%, 1000px);
	margin: 0 auto;
}
.comm_title{
	font-size:clamp(35px,3vw,45px);
	font-weight:500;
	color:#fff;
	text-align:left;
	letter-spacing:15px;
	text-shadow: 2px 2px 4px #8AABA4;
	
}
.commitment-list{
	letter-spacing:1px;
	padding:5em 0 ;
	text-align:left;
	color:#fff;
	text-shadow: 2px 2px 4px #8AABA4;

}
@media screen and (min-width: 769px) {
.commitment-list{
	padding:3em 0 ;
	}
}

.commitment-list dt{
	font-size:clamp(22px,2vw,30px);
	font-weight:500;
	margin:0 0 20px;
}
.commitment-list dd{
	font-size:clamp(16px,2vw,18px);
	width:min(90%, 500px);
}



.ment-box{
	margin: 30px auto 0;
	width:min(90%, 550px);
	display:flex;
	flex-direction: column;
	gap:30px 0;
}
.ment-box_inner{
  padding: 20px 0;
  box-sizing: border-box;
  letter-spacing:2px;
}

.ment-grid{
	display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1, 1fr);
    gap: 0px;
}
@media screen and (min-width: 769px) {
.ment-grid{
	display:grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 0px;
	}
}

.ment-grid .gbox1{
 background:#d5c9a1;
  padding: 0px 0 7px;
  box-sizing: border-box;
  text-align:center;
}
@media screen and (min-width: 769px) {
.ment-grid .gbox1{
  padding: 15px 0 15px;
	}
}

.ment-grid .gbox1 dt{
	font-size:clamp(25px,2vw,30px);
	font-weight:500;
	margin:0 0 0px;
}
.ment-grid .gbox1 dd{
	font-size:clamp(13px,2vw,13px);
}
.ment-grid .gbox2{
	grid-row: span 2 / span 2;
}
.ment-grid .gbox2 .ment-title{
	font-size:clamp(16px,2vw,20px);
	font-weight:500;
	padding:20px 0px 10px;
	border-bottom:1px solid #d5c9a1;
}
@media screen and (min-width: 769px) {
.ment-grid .gbox2 .ment-title{
	padding:20px 20px 10px;

	}
}
.ment-grid .gbox2 .ment-title_sub{
	font-size:clamp(14px,2vw,15px);
	padding:10px 0px 20px;
	text-align:left;
}
@media screen and (min-width: 769px) {
.ment-grid .gbox2 .ment-title_sub{
	padding:10px 20px 20px;
	}
}


.anchor_ment_img{
	text-align:center;
	margin: 20px auto 0;
}

@media screen and (min-width: 769px) {
.anchor_ment_img{
	margin: -30px auto 0;
	}
}


/*-------------------------------------------------

ページバナー設置

---------------------------------------------------*/
.banner_body{
	margin:0px auto 0px;
	width:min(90%, 1000px);
	display:flex;
	flex-direction: column;
	gap:30px 0;
	background:#fff;
}
@media screen and (min-width: 769px) {
.banner_body{
	flex-direction: row;
	gap:30px;
	}
}
.banner_body div{
	display:flex;
	flex-direction: column;
	gap:10px;
	align-items:center;
	flex: 1;
	padding:15px;
}
.banner_body div figure,
.banner_body div dl {
	flex: 1;
	margin: 0; /* ブラウザのデフォルトマージンをリセット */
}

@media screen and (min-width: 769px) {
.banner_body div{
	flex-direction: row;
	align-items:center;
	flex: 1;
	}
}

/* 画像がコンテナいっぱいに綺麗に収まるようにする場合（必要に応じて） */
.banner_body div figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner_body dl{
	margin:10px auto 20px;
	letter-spacing:1px;
	
}
.banner_body dl dt{
	font-size:clamp(18px,2vw,23px);
	padding:10px 0px 10px;
	text-align:center;
	font-weight:700;
}
.banner_body dl dd{
	font-size:clamp(14px,2vw,18px);
}
@media screen and (min-width: 769px) {
.banner_body dl dd{
	text-align:center;
	}
}

.banner_body dl dd span{
	display:block;
	margin:20px auto 0;
	width:min(70%, 300px);
}
.banner_body dl dd a{
	background:#fff;
	border-radius:100px;
	border:1px solid #509600;
	padding:10px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#509600;
}

.banner_limited{
	margin:50px auto -40px;
	color:#fff;
	background:url(../images/bg.png) no-repeat 0 50% ;
	padding:30px 0 ;
	letter-spacing:1px;
}
@media screen and (min-width: 769px) {
.banner_limited{
	background:url(../images/bg.png) no-repeat 0 50% fixed;
	background-size:100%;
	}
}

.banner_limited dl{
	margin:0px auto 30px;
	text-align:center;
}
.banner_limited dl dt{
	font-size:clamp(26px,2vw,40px);
	padding:0px 0px 0px;
	font-weight:700;
	color:#fff;
	letter-spacing:3px;
}
.banner_limited dl dd{
	font-size:clamp(13px,2vw,18px);
	font-weight:300;
	letter-spacing:3px;

}
.banner_limited dl dd span{
	display:block;
	margin:20px auto 0;
	width:min(80%, 350px);
	font-size:clamp(18px,2vw,20px);
	letter-spacing:1px;
}
.banner_limited dl dd a{
	background:#509600;
	border-radius:0px;
	border:1px solid #509600;
	color:#fff;
	padding:15px 0;
	display:block;
	text-align:center;
	text-decoration:none;
}
.limited-text{
	text-align:center;
	margin:20px auto 0;

}
.banner_limited dl dd a:hover,
.banner_body dl dd a:hover{
	opacity:.6;
}
.arrow_r-l {
  position: relative;
}
.arrow_r-l:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.plan-title_end{
	text-align:center;
	margin:50px auto 10px;
	font-size:clamp(20px,2vw,26px);
	font-weight:700;
	letter-spacing:3px;
}