@charset "utf-8";

.access-top_text span{
	display:block;
	font-size:4rem;
	
}

.access-top_text{
	font-size:1.8rem;
	color:#1F264E;
	margin:130px auto 0;
	text-align:center;
	line-height:1.5;
}
@media (max-width: 768px) {
.access-top_text{
	font-size:1.4rem;
	margin:100px auto 0;
	}
}
/*-------------------------------------------------

地域の画像

---------------------------------------------------*/
.ldk{
	display:inline-block;
	font-size:1.3rem;
	margin:0 5px ;
}

.floor-img{
	background:#F1F3E9;
	padding:5rem 0;
	margin:60px 0 0;
}
.stage{
	text-align:center;
}
.floor-img ul{
	display:flex;
	justify-content:center;
	gap:0 40px;
	font-size:1rem;
	margin:20px 0 0;
}
.floor-img ul li:nth-child(1) span{
	background:#E4EDE6;
	border:1px solid #222;
	padding:0px 10px;
	margin:0 5px 0 0;
}
.floor-img ul li:nth-child(2) span{
	background:#D1D1D1;
	border:1px solid #222;
	padding:0px 10px;
	margin:0 5px 0 0;
}
/*-------------------------------------------------

間取りプラン

---------------------------------------------------*/
.floor-bg{
	background:url(../images/floor_bg.png) no-repeat 0% 0%;
	background-size:100%; 
	padding:5rem 0;
}

.plan-grid{
	margin:40px auto;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:0 20px;
	padding:20px 0;
}
@media (max-width: 768px) {
.plan-grid{
	max-width:90%;
	}
}

.plan-grid_detail{
	background:#F1F3E9;
	border-radius:0 20px 0 20px;
	padding:30px 20px;
	position:relative;
	margin:30px 0;
}
@media (max-width: 768px) {
.plan-grid_detail{
	padding:30px 20px;
	margin:20px 0;
	}
}
.plan-title{
	font-size:1.4rem;
	border-bottom:1px solid #8D932E;
	padding:0px 20px;
	text-align:center;
}
@media (max-width: 768px) {
.plan-title{
	font-size:1.2rem;
	line-height:1.2;
	}
}
.plan_detail{
	display:grid;
	grid-template-columns:1fr 1.5fr;
	margin:20px auto;
	gap:0 20px;
	align-items:center;
}
@media (max-width: 768px) {
.plan_detail{
	grid-template-columns:1fr 1fr;
	}
}

.plan_detail dl{
	background:#8D932E;
	border-radius:0 20px 0 20px;
	padding:20px 0px;
	color:#fff;
	font-size:1rem;
	text-align:center;
}
.plan_detail dl dt span{
	font-size:3rem;
}
.plan_detail dl dt{
	font-size:1.3rem;
	margin:0 0 -15px;
}
.plan_detail dd{
	font-size:1.1rem;
}
.plan_detail dd span{
	display:block;
	font-size:1.6rem;
	margin:0 0 -8px;
}
.plan_detail .plan-icon{
	background:#933F3D;
	color:#fff;
	text-align:center;
	font-size:1.1rem;
	border-radius:100px;
	margin:0 0 10px;
}
@media (max-width: 768px) {
.plan_detail .plan-icon{
	font-size:.9rem;
	}
}
.plan_detail ul li{
	font-size:1.1rem;

}
.plan_detail ul li:before{
	content:"■";
}

@media (max-width: 768px) {
.plan_detail ul li{
	font-size:1.05rem;
	line-height:1.3;
	margin:5px 0;
	padding-left:1em;
	text-indent:-1em;
	}
}


.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 5px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
    background:#21357E;
    border-radius:5px;
}
@media (max-width: 768px) {
.btn{
	width:100%;
	margin: 0 auto;
	}
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#333;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}
.click-btn{
	font-size:1.1rem;

}
@media (max-width: 768px) {
.click-btn{
	width:60%;
	margin: 0 auto;
	}
}


.absolute-left,
.absolute-right{
    position: absolute;
	bottom:-30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
@media (max-width: 768px) {
.order1{
	grid-column:1;
	}
.order2{
	grid-column: 2;
	grid-row: 1;
	}
}

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

間取りプラン(詳細)

---------------------------------------------------*/
.main-detail_plan{
	background:#fff;
	padding:2rem 0 0;
	margin:20px 0 ;
}
@media (max-width: 768px) {
.main-detail_plan{
	padding:0rem 0 0;
	margin:40px 0 ;
	}
}
.model_title{
	background:#933F3D;
	color:#fff;
	text-align:center;
	font-size:1.1rem;
	margin:0 0 10px;
	max-width:300px;
	padding:3px 0;
	border-radius:100px;
}
.copy_title{
	text-align:center;
	font-size:1.6rem;
	border-bottom:1px solid #333;
	padding:0px 0;
}
@media (max-width: 768px) {
.copy_title{
	font-size:1.3rem;
	}
}

.plan_main_detail{
	display:grid;
	grid-template-columns:1fr 2fr;
	border-bottom:1px solid #333;
	padding:0px 0;
	font-size:1.3rem;
	align-items:center;
}
.border-right{
	border-right:1px solid #333;
}
.plan_main_detail .goutou{
	font-size:1.5rem;
	padding:10px 0;
	text-align:center;
	color:#8D932E;
}

.plan_main_detail .goutou span{
	font-size:4rem;
}
@media (max-width: 768px) {
.plan_main_detail .goutou span{
	font-size:3rem;
	}
}
.plan_main_detail .room_detail{
	font-size:1.2rem;
	padding:10px 0;
	text-align:center;
}
.plan_main_detail .room_detail span{
	font-size:2.5rem;
	margin:0 10px;
}
@media (max-width: 768px) {
.plan_main_detail .room_detail span{
	font-size:2.1rem;
	display:block;
	margin:0 0 -10px;
	}
}

.room_m{
	margin:40px 0 10px;
	font-size:1.5rem;
	line-height:1.3;
}
@media (max-width: 768px) {
.room_m{
	font-size:1.1rem;
	}
}
.room_m li{
	margin:10px 0;
}
.room_m span{
	font-size:2.5rem;
}
@media (max-width: 768px) {
.room_m span{
	font-size:2rem;
	}
}

.room_notice{
	font-size:.9rem;
	margin:10px 0;
}

.room_notice:before{
	content:"※";
}
.room-icon{
	margin:30px 0;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:10px;
	align-items:center;
}
.room-icon li{
	background:#21357E;
	padding:10px 20px;
	color:#fff;
	text-align:center;
	font-size:1.3rem;
}
@media (max-width: 768px) {
.room-icon li{
	font-size:1rem;
	}
}

.location-notice{
	margin:20px 0 -45px;
	font-size:.9rem;
	padding:10px 0 0 ;
	
}
.location-notice li{
	padding-left:1em;
	text-indent:-1em;
}

.location-notice li::before{
	content:"※";
}
@media (max-width: 768px) {
.location-notice{
	margin:-20px 0 -80px;
	font-size:.8rem;
	}

}

.floor_map{
	margin:50px 0 10px;
	text-align:center;
}
.anc-link{
	margin-top:-160px;
	padding-top:160px;
}
@media (max-width: 768px) {
.anc-link{
	margin-top:-60px;
	padding-top:60px;
	}
}

.location-notice_detail{
	margin:20px 0 45px;
	font-size:.9rem;
	padding:10px 0 0 ;
	
}
.location-notice_detail li{
	padding-left:1em;
	text-indent:-1em;
}

.location-notice_detail li::before{
	content:"※";
}
@media (max-width: 768px) {
.location-notice_detail{
	margin:-20px 0 40px;
	font-size:.8rem;
	}

}

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

フロア(詳細)

---------------------------------------------------*/
.one-flooe-title{
	font-size:1.3rem;
	border-bottom:1px solid #222;
	margin:60px 0 30px;
}
@media (max-width: 768px) {
.one-flooe-title{
	font-size:1.1rem;
	}
}
.floor-detail{
	display:grid;
	grid-template-columns:1fr 2fr;
	margin:0px 0 60px;
	gap: 0 20px;
}
@media (max-width: 768px) {
.floor-detail{
	grid-template-columns:1fr;
	gap: 20px;
	}
}

.floor-detail div{
	position:relative;
}
.floor-detail .floor_notice{
	position:absolute;
	right:3px;
	bottom:3px;
	color:#fff;
	font-size:.8rem;
}
.floor-detail .floor-name{
	padding:0px 0 5px;
}
.floor-detail dt{
	font-size:1.3rem;
	padding:5px 0 0;
}
.floor-detail dd{
	font-size:1rem;
	padding:0px 0 0;
}


.icon-detail{
	display:grid;
	grid-template-columns: repeat(5,1fr);
	gap:0 10px;
	align-items: center;
	margin: 0 0 50px;
}
.icon-detail div{
}

.icon-detail div ul{
	display:flex;
	align-items:center;
	gap:0 10px;
	font-size:.85rem;
}
@media (max-width: 768px) {
.icon-detail{
	grid-template-columns:1fr 1fr;
	gap:10px;
	}
}


.materials a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:block;
}

.materials a:hover{
	background:rgba(0,0,0,.2);
}
.materials{
	position:relative;
	background:#717524;
	display:grid;
	grid-template-columns:1fr 1.2fr 1fr;
	align-items:center;
	max-width:1000px;
	margin: 60px auto;
}
@media (max-width: 768px) {
.materials{
	grid-template-columns:1fr;
	max-width:90%;
	}

}

.materials .photo img,
.materials .photo02 img{
	vertical-align:bottom;
}
.materials dl{
	background:#717524;
	color:#fff;
	padding:1.3rem 0;
	font-size:1.8rem;
	letter-spacing:3px;
	text-align:center;

}

.materials dd{
	font-size:1.2rem;
}

.topleft{
	position:absolute;
	left:5px;
	top:3px;
	font-size:.8rem;
	color:#fff;
	z-index:1;
}
.bottomright{
	position:absolute;
	right:5px;
	bottom:3px;
	font-size:.8rem;
	color:#fff;
	z-index:1;
}

.plan--btn{
	max-width:450px;
	margin:30px auto 0;
	display:flex;
	justify-content:space-between;
	font-weight:500;
}
@media (max-width: 768px) {
.plan--btn{
	max-width:90%;
	margin:-30px auto 0;
	}
}

.plan--btn a{
	text-decoration:none;
	color:#fff;
	font-size:1.4rem;
	letter-spacing:.1em;
	display:block;
	padding:5px 50px;
}
@media (max-width: 768px) {
.plan--btn a{
	font-size:1.2rem;
	padding:5px 30px;
	}
}

.plan--btn li:nth-child(1){
	background:#233157;
}
.plan--btn li:nth-child(2){
	background:#B20000;
}
.plan--btn a:hover{
	background:#f3f3f3;
	color:#333;

}