@charset "UTF-8";

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* 上下 | 左右 */
/* 上 | 左右 | 下 */
/* 上 | 右 | 下 | 左 */

/*================================================
 *  ヘッダー
 ================================================*/

.no-splash #header{
    height: 500px;
}
@media screen and (max-width: 400px) {
	.no-splash #header{
    height: 280px;
	}
}
.lead{
    height: 400px;
    border-bottom-right-radius: 30px;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 400px) {
	.lead{
    	height: 200px;
	}
}
/*================================================
 *  ページタイトル
 ================================================*/
 
.lead h1{
	color:#fff;
	margin-left: 20px;
}
.lead .main-title::before {
  background-color: #fff; /* 横線の色 */
}
.lead .sub-title {
  color: #fff;
  font-weight: 400;
}

@media screen and (max-width: 400px) {
	.lead .main-title {
		  font-size: 1.7rem;
		}
	.lead .main-title::before {
	  width: 20px;
	}
	.lead .sub-title {
	  /* 横線の長さ(100px) ＋ 余白(12px) ＝ 42px 左にずらして位置を揃える */
	  padding-left: 32px; 
	}
}

/*小見出し*/
.heading_2 {
	font-size: 1.75rem;/* 28px */
	padding-left:1rem;
	border-left: 5px solid #F28C28;
    margin:50px 0;/* 上下 | 左右 */
}
@media (max-width: 400px) {
  .heading_2 { font-size: 1.4rem;
    margin:20px 0;/* 上下 | 左右 */
    }
}
/*================================================
 *  センターハウス
 ================================================*/

.floor-guide-container {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    gap: 30px; /* 左右のエリアの間隔 */
    padding:0px 0 50px;/* 上 | 左右 | 下 */
    border-bottom:1px solid #000;
}

/* 左側：メイン写真エリア（全体の5割の幅） */
.main-photo-area {
    flex: 5;
}
.main-photo-area img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* 右側：案内エリア（全体の5割の幅） */
.info-box-area {
    flex: 5;
    display: flex;
    flex-direction: column;
}

/* 各階のボックス */
.floor-box {
    display: flex;
    padding:20px 0;/* 上下 | 左右 */
}
.floor-box:first-child {
    border-bottom:1px solid #000;
}
/* ボックス内の案内文（左側） */
.floor-text {
    flex: 6;
    padding: 25px;
}

.floor-text h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #000;
	font-weight: 700;
}

.floor-text p {
    line-height: 1.6;
    color: #555;
    margin-bottom: 0.5rem;
}
.floor-text ul {
	padding-left:1rem;
}
.floor-text ul li {
	position: relative;
	padding-left:0.5rem;
}
.floor-text ul li::before {
	content: "";
	position: absolute;
	left: -1em;
	top: 0.5rem;
	width: 1rem;
	height: 1rem;
	background-color: #F28C28;
	border-radius: 50%;
}
/* ボックス内の写真（右側） */
.floor-photo {
    flex: 4;
    min-width: 180px; /* 画像が潰れすぎないように最低幅を設定 */
}

.floor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて綺麗にトリミング */
    display: block;
}
/* レスポンシブ対応（スマホ表示のとき縦並びにする） */

@media screen and (max-width: 1200px) {
    .floor-guide-container {
        flex-direction: column;
    }	
}
@media screen and (max-width: 500px) {

	.floor-guide-container {
	    margin: 0 auto;
	    gap: 0px; 
	    padding:0px 0 10px;/* 上 | 左右 | 下 */
	}
    .floor-box {
        flex-direction: column;
    }	    
    .floor-photo {
        height: 200px; /* スマホ時の写真の高さ */
    }
}
.margin_bottom {
	margin-bottom: 1.5rem;
}

/*================================================
 * エリアマップ
 ================================================*/
.area-item {
	max-width: 1200px;
	margin-left:auto;
	margin-right:auto;
}
.area-item img {
	width: 100%;
}
/* 834px以下に適用(max-width) タブレット*/
@media screen and (max-width: 834px) {
	area-item {
		width: 100%;
		padding-top:50px;
		padding-bottom:50px;
	}
	area-item img {
		width: 80%;
	}
}
.rule, #access .rule  {
	padding-left:1rem;
}
.rule li, #access .rule li {
	position: relative;
	padding-left:0.5rem;
	margin-bottom: 1rem;
}
.rule li::before, #access .rule li::before  {
	content: "";
	position: absolute;
	left: -1em;
	top: 0.5rem;
	width: 1rem;
	height: 1rem;
	background-color: #F28C28;
	border-radius: 50%;
}
.rule_text {
	padding: 20px 10px 20px 2rem;/* 上 | 右 | 下 | 左 */
     background:url("../img/area/icon_rule.png") no-repeat left center;
    background-size:20px 20px;
}
.red_text {
	color:#ff0000;
}

/*================================================
 * アクセス
 ================================================*/
.map-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
  padding-bottom: 50px;
  border-bottom: 1px solid #000;
}
/* 左側*/
.map-info {
  /*flex: 1;   利用可能な幅を等分に分ける */
  min-width: 280px;
}
.map-info .heading_2 {
    margin:0 0 50px;/* 上 | 左右 | 下 */
}
/* 右側 */
.map-map {
  flex: 1; /* 利用可能な幅を等分に分ける */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* マップの縦横比を固定 */
}

/* iframeをレスポンシブにフィットさせる */
.map-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 834px) {
  .map-container {
    flex-direction: column;
    gap: 24px;/* 縦並び時の間隔 */
  }
  .map-map {
    aspect-ratio: 4 / 3;  /* スマホ時は少し縦幅を持たせる */
  }
}
/*交通アクセス*/
.access-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
}
/* 左側*/
.access-info {
}
.access-info h3{
	padding: 20px 10px 20px 2rem;/* 上 | 右 | 下 | 左 */
	background:url("../img/access/icon_car.png") no-repeat left center;
	background-size:20px 20px;
	margin-top:1.2rem;
}
#access .rule  {
	margin-top:1.2rem;
}
#access .rule li {
	margin-bottom: 0rem;
}
.root {	
	line-height: 1.2;
	margin-left: 1rem;
}
/* 右側 */
.access-map {
}
.access-map img {
	width: 100%;
}

@media (max-width: 834px) {
  .access-container {
    flex-direction: column;
    gap: 24px;/* 縦並び時の間隔 */
  }
}

/*================================================
 * フォーム
 ================================================*/
#formWrap {
	width:800px;
	margin:50px auto;
	color:#555;
}
table#form{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table#form td,table#form th{
	padding:10px;
}
table#form th{
	width:30%;
	font-weight:normal;
	text-align:left;
	font-weight:700;
}

.form-text {
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    border: 1px solid #ddd;
    outline: none;
    background-color: #f6f6f6;
}
/* フォーカス時 */
.form-text:focus {
    outline: 1px solid #aaa;
}

/* テキストエリア固有（高さ・自動リサイズ） */
.form-text--textarea {
    min-height: 150px;
    field-sizing: content;
}
.btn {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 50px;/* 上 | 左右 | 下 */
}

/* ボタン共通のシンプルデザイン */
.btn input[type="submit"],
.btn input[type="reset"], 
.btn input[type="button"]{
  /* ブラウザ固有のデフォルトスタイルをリセット */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn input[type="submit"] {
  background-color: #27347D;
  color: #ffffff;
}
.btn input[type="submit"]:hover {
  background-color: #cbd5e1;
  color: #4a5568;
}

.btn input[type="reset"], .btn input[type="button"] {
  background-color: #e2e8f0;
  color: #4a5568;
}
.btn input[type="reset"]:hover, .btn input[type="button"]:hover {
  background-color: #cbd5e1;
}
@media screen and (max-width:834px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table#form th, table#form td {
	width:auto;
	display:block;
}
table#form th {
	margin-top:5px;
	border-bottom:0;
}
#form input[type="text"], #form textarea {
	/*width:80%;*/
	padding:5px;
	font-size:110%;
	display:block;
}
}