@charset "UTF-8";




/*スマホ*/
@media screen and (max-width:750px){
	
	/* ===== Swiper Pagination ===== */
.main-visual .swiper-pagination-bullet {
    width: 0.2rem;
    height: 0.2rem;
    background: #ffffff;
    opacity: 0.6;
}

.main-visual .swiper-pagination-bullet-active {
    background: #d4a373;
    opacity: 1;
}
	
.main-visual .swiper-pagination {
    bottom: 0.5% !important;
}
	
.cambg{width:100%;background-color:#f3f1ee;padding: 2rem 0px 2rem 0px;text-align: center;margin: 0px auto 0rem auto;}
.cam{max-width:1200px;width:90%;background-color:#f3f1ee;padding: 0% 0px 0% 0px;margin: 0px auto 0px auto;text-align: center}
.camcap{width:100%;height: auto;margin: 1rem auto 0px auto;padding: 0% 0px 1rem 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:0.5rem;}

.banner{max-width:500px;width:70%;padding: 2rem 0px 3rem 0px;margin: 0px auto 0px auto;text-align: center}
.pricebg{width:100%;background-color:#af6671;padding: 10px 0px 10px 0px;}
.price{width:78%;text-align: center;margin: 0% auto 0% auto;}
	
.formnavi {
    width: 80%; /* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px; /* 要素間の隙間 */
    margin: 0px auto 20px; /* 中央に配置 */z-index:5;
	padding: 0px 0px 30px;
	
}
	.seikyutop, .seikyu1top {
    max-width: calc(100% - 10px); /* 各要素の幅を50%に設定 */
    width: 80%;
    height: auto;
    display: flex; /* flexbox */
    flex-wrap: wrap; /* 折返し指定 */
    gap: 1px; /* 余白（縦 横） */
    margin: 10px auto 0px auto;
    padding: 10px 0px;z-index:5
}

.seikyutop {
    background-color: #8e8178;
    color: #fff;z-index:5
}

.seikyu1top {
    background-color: #1c243d;
    color: #fff;z-index:5
}
	

.seikyutop li, .seikyu1top li {
    margin: 0;
    padding: 0px;
    width: 100%; /* 全域をクリック可能に */
    display: flex; /* flexbox */
    justify-content: center;
    height: 25px;
    color: #ccc;
    text-align: center;
    line-height: 120%;
    align-items: center;
    font-size: 100%;
    font-weight: 400;
    letter-spacing: 2px;z-index:5
}

.seikyu1top li {
    color: #fff;
}

.seikyutop li a{
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
    color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}
.seikyu1top li a {
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
   color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}

.seikyu1top li a {
    color: #fff;z-index:5
}

.seikyutop li.current a, .seikyutop li a:hover {
color:#fff;z-index:5;
}

.seikyu1top li.current a, .seikyu1top li a:hover {
color: #fff;z-index:5;
}

.seikyu1top li.current a, .seikyu1top li a:hover {
    color: #fff;z-index:5;
}

.seikyutop li a::after, .seikyu1top li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -16px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 4px;
    background: #94783C;
    /*アニメーションの指定*/
    transition: all 1.0s;
    transform: scale(0.4, 1);/*X方向0.4、Y方向1*/
    transform-origin: center top;/*上部中央基点*/z-index:5
}

.seikyu1top li a::after {
    background: #7D1C20;z-index:5
}

/*現在地とhoverの設定*/
.seikyutop li.current a::after, .seikyutop li a:hover::after,
.seikyu1top li.current a::after, .seikyu1top li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/z-index:5
}

.hover {
    transition-property: opacity;
    transition-duration: 0.5s;z-index:5
}

.hover:hover {
    opacity: 0.5;z-index:5
}
	
.readmore1 {width:50%;margin: 0px auto 0px 40%;text-align: left}
.readmore2 {width:50%;margin: 0px 40% 0px auto;text-align: right}
.maintop2{width:100%;margin:60px 0 0}
.topobibg{width:100%;background-color:#1c243d;margin: 0px auto 0px auto;}
.topobi{max-width:1200px;width:60%;padding: 0px 0px 0px 0px;margin: 0px auto 0px auto;text-align: center}
.infoprice{width:100%;height:auto;margin: 0px auto 0px auto;padding: 20px 0px 20px 0px;text-align:center;background-color:#b43c50; font-weight: 400;letter-spacing:0px;}
.infoprice2{width:100%;height:auto;margin: 0px auto 0px auto;padding: 1.5rem 10% 1.5rem 10%;text-align:center;background-color:#8e8178; font-weight: 400;letter-spacing:0px;}
.infotop{max-width:800px;width: 70%;height: auto; margin: 0px auto 0px;}
.content{max-with:1200px;width:100%;background:#8e8178;}
.concept{width:100%;background:#8e8178;}
.concept-body{width:100%;background: #FFFFFF; margin: 0px auto 20px;padding: 5% 0px 20px 0px;line-height: 180%;}
/* ===== feature-list SP レイアウト ===== */

.feature-item {
  padding: 10% 0;
}

/* ===== コンセプト ===== SP用 ===== */
.concept {
  width: 100%;
  background: #8e8178;
  overflow: visible;
}

.concept .content {
  padding-top: 0;
}

.concept-upper {
  display: flex;
  flex-direction: column;
}

.concept-text {
  width: 70%;
  padding: 8% 0 5% 5%;
}

.concept-text img {
  width: 100%;
  height: auto;
  display: block;
}

.concept-img {
  width: 95%;
  margin-left: auto;
  margin-bottom: -10%;  /* ← 下へはみ出す */
  position: relative;
  z-index: 3;
}

.concept-img img {
  width: 100%;
  height: auto;
  display: block;
}
	

/* SP では通常・逆順ともに縦並び */
.feature-item__inner,
.feature-item__inner--reverse {
  flex-direction: column;
}

/* 写真は常に上 */
.feature-item__photo {
  flex: none;
  width: 100%;
  order: -1;
}

/* テキストは常に下 */
.feature-item__text {
  flex: none;
  width: 80%;
  padding: 3% 0 0;margin: 0 auto;
}

/* タイトル */
.feature-item__title {
  font-size: clamp(1.0rem, 4.5vw, 1.3rem);
  padding: 4% 8%;
  margin-bottom: 5%;
}

/* ボディテキスト */
.feature-item__body {
  font-size: clamp(0.85rem, 3.5vw, 1.0rem);
  margin-bottom: 6%;
}

/* VIEW MORE */
.feature-item__more {
  font-size: clamp(0.75rem, 3.0vw, 0.85rem);
}

/*
 * SP デコ円：各セクションの位置調整
 * 縦並びになるためY位置は中央寄りに統一
 */
.feature-item--access {
  --deco-x: 50%;
  --deco-y: 40%;
  --deco-size: 90%;
}

.feature-item--plan {
  --deco-x: 50%;
  --deco-y: 55%;
  --deco-size: 90%;
}

.feature-item--equipment {
  --deco-x: 50%;
  --deco-y: 40%;
  --deco-size: 90%;
}

	
	
.new-price {width:40%;border: 1px solid #fff;padding: 5px 0px;margin: 5px auto 5px auto;color:#fff;;letter-spacing:2px;font-weight: 400;font-size: clamp(16px, 3.4vw, 48px)}
.wrap{width:100%;overflow: hidden;}
	
.kansei{width:80%;height: auto;margin: 7% auto 2% auto;padding: 0px 0px 0px 0px;text-align:center;}
	
.banner{max-width: 1000px;width:80%;height: auto;margin: 35px auto 1% auto;padding: 0px 0px 0px 0px;}
	
.machi{width: 100%;height: auto;padding:9% 10% 8%;text-align: center;}
	
	
.content {width: 80%;margin:50px auto 0px auto; padding: 0px 0px 0px 0px;z-index: 2;}
	
.maintop {width: 100%;margin: 55px auto 0px auto; padding: 0px 0px 0px 0px;}
	
.cap{width:90%;height: auto;margin: 2% auto 0px auto;padding: 10px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:70%;}

.toptext{text-align:center;font-size: clamp(20px, 2.9vw, 22px);line-height: 160%;margin:20px auto 0px auto;z-index:1;letter-spacing:3px;}
	
 .textbox{color:#000;text-align:left;position: absolute;top: 10%;left: 12%;font-size: clamp(16px, 3.8vw, 50px);font-feature-settings: "palt";text-shadow:0 0 5px #FFf;}

.boxbg{width: 100%;height: auto;padding-top:0px;}
/*
.topobibg{width:100%;padding:20px 0px 15px 0px;margin: 0px auto 0px auto;background:#4A4A4A}*/
	

	
.topobi{width:80%;padding: 20px 0px 20px 0px;margin: 0px auto 0px auto;;text-align: center;}
    

.text1{text-align:center;font-size:180%;margin: 50px auto 0px auto;}
.text2{margin: 50px auto 70px auto;font-size:90%;text-align: center;line-height: 160%;}

.boxbg2 {
  width: 100%;
  height: auto;
  background: url("../img/top/topbg2.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  padding: 0px 0px 20px 0px;
  position: relative; z-index: 2
}

.img-wrapper {
  width: 70%;
  text-align: center;
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:-1; /* z-indexを1に変更 */
}

.img-wrapper img {
  max-width: 100%;
  height: auto; z-index:-1 ;
}

.location, .access, .design, .plan {
  width: 90%;
  margin: 15% auto;
  z-index: 5; /* z-indexを5から2に変更 */
  position: relative; /* 必要に応じてposition: relativeを追加 */
}

	

	
.info2{width:100%;height:auto;margin: 0px auto 0px auto;padding: 20px 0px 20px 0px;text-align:center;background-color:#bf9000; font-weight: 400;letter-spacing:0px;}
.infotext-1{margin: 0px auto 0px auto;font-size: clamp(16px, 3.0vw, 33px);padding: 0px 0px 10px 0px;text-align:center;font-feature-settings: "palt";line-height: 150%;color:#fff;}
.infotext1-1{margin: 0px auto 0px auto;font-size: clamp(19px, 3.4vw, 48px);padding: 0px 0px 0px 0px;text-align:center;font-feature-settings: "palt";line-height: 150%;color:#fff;font-weight: 400;}
.infotext1-2{margin: 0px auto 0px auto;font-size: clamp(12px, 1.7vw, 24px);padding: 0px 0px 0px 0px;text-align:center;font-feature-settings: "palt";line-height: 150%;color:#fff;}

.info{width:90%;margin: 40px auto 0px auto;padding: 10px 0px 3px 0px;text-align:center;}
.infotext1{width:94%;margin: 10px auto 0px auto;font-size:130%;padding: 20px 0px 0px 0px;text-align:center;background-color: #fff;line-height: 160%;}
.infotext{width:94%;margin: 10px auto 0px auto;font-size:100%;padding: 20px 0px 0px 0px;text-align:center;background-color: #fff;line-height: 160%;}
.infotext2{margin: 0px auto 0px auto;font-size:120%;text-align: center;letter-spacing:2px;font-weight: 300;}
.infotext3{margin: 30px auto 0px auto;font-size: clamp(14px, 2.0vw, 40px);text-align: center;letter-spacing:2px;font-weight: 300;}
.infotext4{width:90%;margin: 30px auto 30px auto;font-size:83%;text-align:left;line-height: 180%;font-weight: 300;}
.infotext5{width:100%;margin: 30px auto 10px auto;font-size:96%;text-align:left;line-height: 160%;font-weight: 700;}
.infotext6{width:100%;margin: 0px auto 20px auto;font-size:83%;text-align:left;line-height: 170%;font-weight: 300;}
.infotext7{width:94%;margin: 0px auto 0px auto;font-size:83%;padding: 20px 4% 10px 4%;text-align:left;background-color: #fff;line-height: 170%;}
	
	
.header li:nth-child(1) {color:#000;}
.fgnavi li:nth-child(1) {color:#fff;}
    
.imgs30{width:40%;height:auto;margin:0px auto 0px auto;}
.imgs65{width:65%;height:auto;margin:0px auto 0px auto;}
.imgs70{width:70%;height:auto;margin:0px auto 0px auto;}
.imgs75{width:75%;height:auto;margin:0px auto 0px auto;}
.imgs110{width:110%;height:auto;margin:0px auto 0px auto;}
.imgs40{width:40%;height:auto;margin:0px auto 0px auto;}
	
    

}


/*PC*/
@media print, screen and (min-width:751px){
	/* ===== Swiper Pagination ===== */
.main-visual .swiper-pagination-bullet {
    width: 0.3rem;
    height: 0.3rem;
    background: #ffffff;
    opacity: 0.6;
}

.main-visual .swiper-pagination-bullet-active {
    background: #d4a373;
    opacity: 1;
}
.main-visual .swiper-pagination {
    bottom: 0.1rem;
}

.cambg{width:100%;background-color:#f3f1ee;padding: 3.5% 0px 3.5% 0px;text-align: center}
.cam{max-width:1200px;width:80%;background-color:#f3f1ee;padding: 0% 0px 0% 0px;margin: 0px auto 0px auto;text-align: center}
.camcap{width:100%;height: auto;margin: 2% auto 0px auto;padding: 0% 0px 3% 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:70%;}
	
	

.banner{max-width:500px;width:70%;padding: 3rem 0px 3rem 0px;margin: 0px auto 0px auto;text-align: center}
	
.pricebg{width:100%;background-color:#af6671;padding: 1% 0px 1% 0px;}
.price{width:60%;text-align: center;margin: 0% auto 0% auto;}
	
.readmore1 {width:60%;margin: 5% auto 0px 40%;text-align: left}
.readmore2 {width:60%;margin: 5% 40% 0px auto;text-align: right}
	
.topobibg{width:100%;background-color:#1c243d;margin: 0% auto 0% auto;padding: 1% 0px 1% 0px;}
.topobi{max-width:1200px;width:60%;padding: 0px 0px 0px 0px;margin: 0px auto 0px auto;text-align: center}
.infoprice2{width:100%;height:auto;margin: 0px auto 0px auto;padding: 2rem 0px 2rem 0px;text-align:center;background-color:#8e8178; font-weight: 400;letter-spacing:0px;}
.infoprice3{max-width:900px;width:70%;height:auto;margin: 0px auto 0px auto;padding: 0px 0px 0px 0px;text-align:center; font-weight: 400;letter-spacing:0px;}
.infotop{max-width:800px;width: 70%;height: auto; margin: 0px auto 0px;}
	
	
.content{max-with:1200px;width:90%;}
	
/* ===== コンセプト ===== */
.concept {
  background: linear-gradient(to bottom, #8e8178 96%, #ffffff 4%);
  padding: 0;
  overflow: visible;
}
.concept .content {
  padding-top: 0;
}
.concept-upper {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 4%;
  overflow: visible;
}
.concept-text {
  flex: 0 0 36%;
  padding: 0 0 8% 2%;
  display: flex;
  align-items: flex-start;
}
.concept-text img {
  width: 100%;
  height: auto;
  display: block;
}
.concept-img {
  flex: 1;max-width:900px;
  margin-right: 1%; 
  margin-top: 1%;      /* ← 右画像を10%下げる */
  margin-bottom: -6%;  /* ← 白エリアへはみ出す */
  position: relative;
  z-index: 1;
}
.concept-img img {
  width: 100%;
  height: 100%;
  display: block;
}
.concept-body {
  background: #ffffff;
  padding-top: 2%;     /* ← 画像はみ出し分を吸収 */
  margin: 0 auto;
}
.concept-body p {
  font-family: var(--font-serif-ja);
  font-size: clamp(0.9rem, 1.0vw, 1.1rem);
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #000;
}

	
/* ----- 逆順レイアウト（Plan） ----- */
.feature-item__inner--reverse {
  flex-direction: row-reverse;
}
	

/* ===== CSS変数 ===== */
:root {
  --color-bg:      #f3f1ee;
  --color-text:    #333333;
  --color-border:  #333333;
  --color-caption: #888888;
  --content-max:   1200px;
  --content-width: 100%;
  --photo-ratio:   60%;   /* 写真エリアの割合（コンテンツ幅に対して） */
  --text-ratio:    40%;   /* テキストエリアの割合 */
}


/* ===== リセット ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



a {
  color: inherit;
  text-decoration: none;
}


/* ===== feature-list 共通ベース ===== */
.feature-list {
  width: 100%;
}

/* ----- feature-item：各セクション共通 ----- */
.feature-item {
  position: relative;
  overflow: hidden;
  padding: 0% 0;margin: 5% 0 5%;background: url("../img/top/bg1.webp");background:#f3f1ee;
}

/*
 * デコラティブ背景円
 * 位置は各セクションのカスタムプロパティで上書き可能
 *   --deco-x : 水平位置（例: 30% / 70%）
 *   --deco-y : 垂直位置（例: 40% / 60%）
 *   --deco-size : 円のサイズ（例: 60%）
 */


/* ----- 内部ラッパー ----- */
.feature-item__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  width:     var(--content-width);
  margin:    0 auto;
  display:   flex;
  align-items: stretch; /* 両カラムを同じ高さに揃える */
  gap: 0;
}


/* ----- 写真エリア ----- */
.feature-item__photo {
  flex: 0 0 var(--photo-ratio);
  width: var(--photo-ratio);
  display: flex;
  align-items: flex-end; /* 写真を下ピッタリに配置 */
}

.feature-item__photo figure {
  width: 100%;margin:10% auto 0;
}

.feature-item__photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.feature-item__caption {
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  color: var(--color-caption);
  margin-top: 1%;
  letter-spacing: 0.06em;
}


/* ----- テキストエリア ----- */
.feature-item__text {
  flex: 0 0 var(--text-ratio);
  width: var(--text-ratio);
  padding: 0 0%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* タイトルを上ピッタリに配置 */
}

/* タイトル（枠線ボックス） */
.feature-item__title {
  display: inline-block;
  border: 1px solid var(--color-border);
  padding: 4% 10%;
  font-size: clamp(1.0rem, 1.6vw, 1.4rem);
  font-weight: normal;
  letter-spacing: 0.06em;
  font-family: 'Georgia', 'Times New Roman', serif;
  margin-bottom: 6%;
  line-height: 1.4;
}

/* ボディテキスト */
.feature-item__body {
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 7%;
  letter-spacing: 0.06em;
}

/* VIEW MORE リンク */
.feature-item__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(0.7rem, 0.9vw, 0.82rem);
  letter-spacing: 0.15em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 2%;
  transition: opacity 0.2s;
}

.feature-item__more::after {
  content: '›';
  font-size: 1.1em;
  line-height: 1;
}

.feature-item__more:hover {
  opacity: 0.6;
}
	

	/* ===== feature-item--access 背景 ===== */
.feature-item--access {
  --deco-x: 50%;
  --deco-y: 40%;
  --deco-size: 90%;

  --access-bg-opacity: 0.5; /* 透過調整はここを変更 0.0〜1.0 */

  position: relative;
  overflow: hidden;
}

.feature-item--access::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/top/topbg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: var(--access-bg-opacity);
  z-index: 0;
}

/* 子要素を背景より前面に */
.feature-item--access .feature-item__inner {
  position: relative;
  z-index: 1;
}
	
	/* ===== feature-item--plan 背景 ===== */
.feature-item--plan {
  --deco-x: 50%;
  --deco-y: 55%;
  --deco-size: 90%;

  --plan-bg-opacity: 0.5; /* 透過調整はここを変更 0.0〜1.0 */

  position: relative;
  overflow: hidden;
}

.feature-item--plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/top/topbg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scaleX(-1); /* 左右反転 */
  opacity: var(--plan-bg-opacity);
  z-index: 0;
}

/* 子要素を背景より前面に */
.feature-item--plan .feature-item__inner {
  position: relative;
  z-index: 1;
}
	
		/* ===== feature-item--plan 背景 ===== */
	
	/* ===== feature-item--equipment 背景 ===== */
.feature-item--equipment {
  --deco-x: 50%;
  --deco-y: 40%;
  --deco-size: 90%;

  --equipment-bg-opacity: 0.5; /* 透過調整はここを変更 0.0〜1.0 */

  position: relative;
  overflow: hidden;
}

.feature-item--equipment::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/top/topbg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: var(--equipment-bg-opacity);
  z-index: 0;
}

/* 子要素を背景より前面に */
.feature-item--equipment .feature-item__inner {
  position: relative;
  z-index: 1;
}
	
	
.hichizu{width: 90%;height: auto; margin: 13px auto 0px;text-align: center}
	

.imghover {
  transition: opacity 0.3s ease; /* 半透明化のアニメーション */
}

/* ホバー時に半透明にする */
.imghover:hover {
  opacity: 0.6; /* 透明度を50%に設定 */
}
	
.kansei{max-width: 1000px;width:80%;height: auto;margin: 1% auto 3% auto;padding: 0px 0px 0px 0px;text-align:center;}
.banner{max-width: 1000px;width:80%;height: auto;margin: 2% auto 0% auto;padding: 0px 0px 0px 0px;}
.content {width: 65%;margin:70px auto 0px auto; padding: 0px 0px 0px 0px;z-index: 2;}
	
	
.machi{width: 100%;height: auto;padding:7% 20% 0;text-align: center;}


.wrap{width:100%;overflow: hidden;}


.boxbgtop{width: 100%;height: auto;padding-top:0px;}
.boxbg{width: 100%;height: auto;padding-top:50px;}

.textbox{color:#000;text-align:left;position: absolute;top: 20%;left: 12%;font-size: clamp(16px, 3.8vw, 50px);font-feature-settings: "palt";text-shadow:0 0 5px #FFf;}

.toptext{text-align:center;font-size: clamp(16px, 3.6vw, 26px);fline-height: 160%;margin:30px auto 0px auto;z-index:1;letter-spacing:3px;}
	
#line1{position: absolute;top: 70%;left:0%;width:100vw;text-align:left;}
#line2{position: absolute;top: 95%;left:0%;width:100vw;text-align:left;}
    
.text1{text-align:left;font-size:2.1vw;line-height: 140%;}
.text2{margin: 20px auto 0px auto;font-size:1.2vw;text-align: left;line-height: 160%;}

.cap{max-width: 1200px;width:90%;height: auto;margin: 5% auto 0px auto;padding: 10px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:70%;}
.boxbg2 {
  width: 100%;
  height: auto;
  background: url("../img/top/topbg2.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  padding: 40px 0px 20px 0px;
  position: relative; /* 追加 */
 z-index: 2
}

.img-wrapper {
  width: 58vw;
  height:auto;
  text-align: center; /* 横幅の真ん中に配置 */
  position: absolute; /* 絶対位置指定 */
  top: 50%; /* 垂直位置を50%に */
  left: 50%; /* 水平位置を50%に */
  transform: translate(-50%, -50%); /* 中央に配置 */
  z-index: -1;
}

.img-wrapper img {
  max-width: 100%; /* レスポンシブ対応 */
  height: auto; /* 縦横比を維持 */z-index: -1
}
	
	

.location {
width:65%;margin: 150px auto 0 auto; z-index: 5;text-align:center;}

.access {
 width:65%; margin: 0px auto; z-index: 5;text-align:center;
}

.design {
  width:65%;margin: 0px auto; z-index: 5;text-align:center;
}

.plan {
  width:65%;margin: 0px auto; z-index: 5;text-align:center;
}
	

.info{width:80%;height:auto;margin: 40px auto 70px auto;padding: 20px 0px 30px 0px;text-align:center;background-color: rgba(0, 0, 0, 0.2);font-size: clamp(14px, 2.3vw, 22px);font-weight: 600;letter-spacing:0px;font-weight: 400;}
	
.info2{width:100%;height:auto;margin: 0px auto 0px auto;padding: 25px 0px 35px 0px;text-align:center;background-color:#bf9000; font-weight: 400;letter-spacing:0px;}
.infoprice{width:100%;height:auto;margin: 0px auto 0px auto;padding: 25px 0px 25px 0px;text-align:center;background-color:#b43c50; font-weight: 400;letter-spacing:0px;}

	
.infotext-1{margin: 0px auto 0px auto;font-size: clamp(16px, 3.0vw, 33px);padding: 0px 0px 10px 0px;text-align:center;font-feature-settings: "palt";line-height: 150%;color:#fff;}
.infotext1-1{margin: 20px auto 10px auto;font-size: clamp(28px, 3.8vw, 56px);padding: 0px 0px 0px 0px;text-align:center;font-feature-settings: "palt";line-height: 120%;color:#fff;}
.infotext1-2{margin: 20px auto 0px auto;font-size: clamp(11px, 1.7vw, 24px);padding: 0px 0px 0px 0px;text-align:center;font-feature-settings: "palt";line-height: 130%;color:#fff;}
    
.infotext{width:75vw;margin: 20px auto 0px auto;font-size: clamp(16px, 3.0vw, 30px);padding: 40px 0px 10px 0px;text-align:center;background-color: #fff;;font-feature-settings: "palt";line-height: 150%;font-weight: 400;}
	
.infotext1{width:75vw;margin: 20px auto 0px auto;font-size: clamp(22px, 3.4vw, 34px);padding: 40px 0px 10px 0px;text-align:center;background-color: #fff;;font-feature-settings: "palt";line-height: 150%;}
    
.infotext2{width:100%;margin: 100px auto 0px auto;font-size: clamp(12px, 2.0vw, 40px);text-align: center;letter-spacing:2px;font-weight: 300;z-index:1}
    
.infotext4{width:100%;margin: 50px auto 70px auto;font-size: clamp(16px, 2.0vw, 20px);text-align: center;line-height: 260%;font-weight: 300;z-index:1}
    
.infotext3{margin: 30px auto 0px auto;font-size: clamp(12px, 2.0vw, 40px);text-align: center;letter-spacing:2px;font-weight: 300;}

.infotext7{width:75vw;margin: 0px auto 0px auto;font-size: clamp(12px, 1.4vw, 18px);padding: 2% 3% 2% 3%;text-align:center;background-color: #fff;;font-feature-settings: "palt";line-height: 150%;font-weight: 400;line-height: 160%;}
	


.img30{width:30%;height:auto;margin:0px auto 0px auto;}
.img65{width:65%;height:auto;margin:0px auto 0px auto;}
.img70{width:70%;height:auto;margin:0px auto 0px auto;}
.img78{width:78%;height:auto;margin:0px auto 0px auto;}
.img110{width:110%;height:auto;margin:0px auto 0px auto;}
.img40{width:40%;height:auto;margin:0px auto 0px auto;}

.formnavi {
    background-color: #fff;
    width:60vw;/* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px 10px; /* 要素間の隙間 */
    margin: 0 auto; /* 中央に配置 */z-index:5;padding: 0px 10% 30px 10%;
	
}

.seikyutop, .seikyu1top {
    max-width: calc(50% - 30px); /* 各要素の幅を50%に設定 */
    width: 100%;
    height: auto;
    display: flex; /* flexbox */
    flex-wrap: wrap; /* 折返し指定 */
    gap: 1px; /* 余白（縦 横） */
    margin: 30px auto 0px auto;
    padding: 20px 0px;z-index:5;
}

.seikyutop {
    background-color: #8e8178;
    color: #fff;z-index:5
}

.seikyu1top {
    background-color: #1c243d;
    color: #fff;z-index:5
}

.seikyutop li, .seikyu1top li {
    margin: 0;
    padding: 0px;
    width: 100%; /* 全域をクリック可能に */
    display: flex; /* flexbox */
    justify-content: center;
    height: 20px;
    color: #ccc;
    text-align: center;
    line-height: 120%;
    align-items: center;
    font-weight: 400;
    letter-spacing: 2px;z-index:5;font-size: clamp(14px, 2.0vw, 19px)
}

.seikyu1top li {
    color: #fff;
}

.seikyutop li a{
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
    color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}
.seikyu1top li a {
    width: 100%; /* 全体をクリック可能領域に */
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    position: relative;
    margin: 0px auto;
    display: inline-block;
   color: #fff;
    outline: none;
    -webkit-transition: all .3s;
    transition: all .5s;z-index:5
}

.seikyu1top li a {
    color: #fff;z-index:5
}

.seikyutop li.current a, .seikyutop li a:hover {
color:#fff;z-index:5;
}


.seikyu1top li.current a, .seikyu1top li a:hover {
color: #fff;z-index:5;
}

.seikyutop li a::after, .seikyu1top li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -20px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 3px;
    background: #531A00;color: #fff;
    /*アニメーションの指定*/
    transition: all 1.0s;
    transform: scale(0.4, 1);/*X方向0.4、Y方向1*/
    transform-origin: center top;/*上部中央基点*/z-index:5
}

.seikyu1top li a::after {
    background: #7D1C20;z-index:5
}

/*現在地とhoverの設定*/
.seikyutop li.current a::after, .seikyutop li a:hover::after,
.seikyu1top li.current a::after, .seikyu1top li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/z-index:5
}

.hover {
    transition-property: opacity;
    transition-duration: 0.5s;z-index:5
}

.hover:hover {
    opacity: 0.5;z-index:5
}
    


@media only screen and (min-width:1200px) and (max-width:1400px) {
	

.boxbg{width: 100%;height: auto;padding-top:50px;}
	
.formnavi {
    background-color: #fff;
    width:75vw;/* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px 10px; /* 要素間の隙間 */
    margin: 0 auto; /* 中央に配置 */z-index:5;padding: 0px 10% 30px 10%;
	
}
.img-wrapper {
width: 58vw;
  text-align: center; /* 横幅の真ん中に配置 */
  position: absolute; /* 絶対位置指定 */
  top: 50%; /* 垂直位置を50%に */
  left: 50%; /* 水平位置を50%に */
  transform: translate(-50%, -50%); /* 中央に配置 */
  z-index: -1;
}}
	

	

@media only screen and (min-width:751px) and (max-width:1200px) {

.boxbg{width: 100%;height: auto;padding-top:50px;}
.formnavi {
    background-color: #fff;
    width:75vw;/* 40% -> 80% に修正 */
    display: flex; /* フレックスボックスを使用 */
    flex-wrap: wrap; /* 要素を折り返し */
    gap: 10px 10px; /* 要素間の隙間 */
    margin: 0 auto; /* 中央に配置 */z-index:5;padding: 0px 10% 30px 10%;
	
}

	.img-wrapper {
  width: 80%;
  text-align: center; /* 横幅の真ん中に配置 */
  position: absolute; /* 絶対位置指定 */
  top: 50%; /* 垂直位置を50%に */
  left: 50%; /* 水平位置を50%に */
  transform: translate(-50%, -50%); /* 中央に配置 */
  z-index: -1;
}
	
.infotext2{width:100%;margin: 50px auto 0px auto;font-size:160%;text-align: center;}
.infotext4{width:100%;margin: 50px auto 0px auto;font-size: clamp(16px, 2.0vw, 20px);text-align: center;line-height: 260%;font-weight: 300;z-index:1}

.cap{max-width: 1200px;width:90%;height: auto;margin: 5% auto 0px auto;padding: 10px 0px 40px 0px;color:#000;text-align:left;letter-spacing:0px;line-height: 170%;font-weight: 400;font-size:60%;}

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.img-wrap {
  opacity: 1;
}

.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background:#fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;}

.location {
width:96%;margin: 100px auto 0 auto; z-index: 5/* ここで個別のマージンを設定 */
}

.access {
 width:96%; margin: 0px auto; z-index: 5/* ここで個別のマージンを設定 */
}

.design {
  width:96%;margin: 0px auto; z-index: 5/* ここで個別のマージンを設定 */
}

.plan {
  width:96%;margin: 0px auto; z-index: 5/* ここで個別のマージンを設定 */
}}

	
@media only screen and (min-width:751px) and (max-width:980px) {
.infotext2{width:100%;margin: 50px auto 0px auto;font-size:160%;text-align: center;}
.infotext4{width:100%;margin: 50px auto 0px auto;font-size: clamp(16px, 2.0vw, 20px);text-align: center;line-height: 260%;font-weight: 300;z-index:1}

.img-wrapper {
  width: 90%;
  text-align: center; /* 横幅の真ん中に配置 */
  position: absolute; /* 絶対位置指定 */
  top: 61%; /* 垂直位置を50%に */
  left: 50%; /* 水平位置を50%に */
  transform: translate(-50%, -50%); /* 中央に配置 */
  z-index: -1;
}}
	
	

@keyframes fadeUpAnime2{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}}


@keyframes img-opacity2 {
100% {opacity: 1;}}

@keyframes img-animation2 {100% {
transform: translateX(100%);}}
    
    
@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}}


@keyframes img-opacity {
100% {opacity: 1;}}

@keyframes img-animation {100% {
transform: translateX(100%);}}