@charset "utf-8";
/* CSS Document */
/* 空室状況 */


/* ページタイトル */
h2{
    color: #fff;
}

/* 小タイトル */
h3{
    font-size: 2rem;
    color: #B81649;
    margin-bottom: 10px;
}
h2 ,h3 {
    text-align: center;
}
/*------------↓↓↓ブルー背景↓↓↓-------------*/
.availability h2{
    width: 100%;
    padding: 5% 0;
    background-image: url(../image/background/bg_blue.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
    margin-top: 50px;
}

.bg_availability{
    margin: -10px 0;
    background-color: #446F99;
    /* padding-top: 100px; */
    /* transform: translateY(-100px); */
}

/*------------↑↑↑ブルー背景↑↑↑-------------*/

/*------------↓↓↓白角丸背景↓↓↓-------------*/

.box1 ,.box2 ,.box3{
    margin: 0 5vh;
}
.box1{
    transform:translateY(1px)
}
.box3{
    margin-top: 40px;
    transform:translateY(1px)
}
.vacancy1 ,.vacancy2{
    margin: 0 5vh;
    background-color: #fff;
}
/*------------↑↑↑白角丸背景↑↑↑-------------*/


/* 2ブロック目のフォント類 */
.vacancy2 p{ text-align: center;
    padding: 0 20px;
    font-size: 2rem;
    font-family: 'Kaisei Opti', serif;
}

/* 間取り図 */
.flex_madorizu{
  margin: 2vw 3vw 8vw;
}
.madorizu{
    margin: 0 auto;
    padding: 0 10px;
}

/*------------↓↓↓間取り図の下の〇✕表示↓↓↓-------------*/

.grid-wrapper{
    display: grid;
    margin: 5px;
}

.grid-wrapper2{
  display: grid;
  margin: 5px;
}
.room{
    background-color: #ECB481;
    border-radius: 50vh;
    text-align: center;
    font-size: 1rem;
    padding: 5px 20px;
    margin-bottom: 5px;
    font-weight:bold;
}

.nyukyo{
    background-color: #D9D9D9;
    border-radius: 100vh;
    text-align: center;
    font-size: 1rem;
    padding: 5px 20px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-weight:bold;
}

/*------------↓↓↓間取り図の下の〇✕表示のグリッド↓↓↓-------------*/

.room_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:2;
}

.nyukyo_1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:1;
    grid-row-end:2;
}

.room_2{
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:1;
    grid-row-end:2;
}
.nyukyo_2{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:1;
    grid-row-end:2;
}

/*------------↓↓↓ホームの紹介&料金のリンクボタン↓↓↓-------------*/

a.btn_01 {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 28vw;
	margin: auto;
	padding: 20px 20px;
	border-radius: 30px;
	border-bottom: 7px solid #76401e;
	background: #914E25;
	color: #fff;
}
a.btn_01:hover {
    transform: translateY(4px);
	margin-top: 6px;
	border-bottom: 1px solid #914E25;
	color: #fff;
}

a.btn_02 {
	display: block;
	text-align: center;
	text-decoration: none;
	width: 28vw;
	margin: auto;
	padding: 20px 20px;
	border-radius: 30px;
	border-bottom: 7px solid #95113b;
	background: #B81649;
	color: #fff;
}

a.btn_02:hover {
    transform: translateY(4px);
	margin-top: 6px;
	border-bottom: 1px solid #B81649;
	color: #fff;
}

.button{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-top: 40px;
}
/*------------↑↑↑ホームの紹介&料金のリンクボタン↑↑↑-------------*/



/*--------↓レスポンシブ700以上--------*/

@media screen and (min-width:700px) {

/* ページタイトル */
h2{
    font-size: 4vw;
}

/* PC表示★間取り図を横並びにする */ 
.flex_madorizu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3vw 8vw 8vw;
}

.madorizu{
max-width: 500px;
margin: 0 5vw;
}

.availability h2 {
    text-align: center;
    margin-top: 0px;
}


/*------------↓↓↓PC表示★間取り図の下の〇✕表示のグリッド↓↓↓-------------*/
.room{
    background-color: #ECB481;
    border-radius: 30px;
    text-align: center;
    font-size: 1.8rem;
    padding: 5px 20px;
    margin-bottom: 5px;
    font-weight:bold;
}

.nyukyo{
    background-color: #D9D9D9;
    border-radius: 30px;
    text-align: center;
    font-size: 1.8rem;
    padding: 5px 20px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-weight:bold;
}


/*------------↓↓↓PC表示★間取り図の下の〇✕表示のグリッド↓↓↓-------------*/
.room_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:2;
}

.nyukyo_1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:1;
    grid-row-end:2;
}

.room_2{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
}
.nyukyo_2{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:2;
    grid-row-end:3;
}

.grid-wrapper{
    grid-template-columns:12vw 12vw;
    grid-template-rows:60px 60px 60px 60px 60px 60px;
}
.grid-wrapper2{
  grid-template-columns:12vw 12vw;
  grid-template-rows:60px 60px 60px 60px;
}
/*------------↓↓↓PC版ホームの紹介&料金のリンクボタン↓↓↓-------------*/
.a.btn_01{
    width:  30vw;
    padding: 1.5rem 2rem;
    font-size: 25px;
    }

.a.btn_02{
    width:  30vw;
    padding: 1.5rem 2rem;
    font-size: 25px;
}   

.button{
    font-size: 25px;
}
}

/*--------↓レスポンシブ1200以上--------*/
@media screen and (min-width:1200px) {


/*-------PC表示（大）★間取り図の下の〇✕表示---------*/
.room{
    line-height: 80px;
} 

.nyukyo{
    line-height: 80px;
}

.grid-wrapper{
    grid-template-columns:12vw 12vw;
    grid-template-rows:100px 100px 100px 100px 100px 100px;
}
.grid-wrapper2{
  grid-template-columns:12vw 12vw;
  grid-template-rows:100px 100px 100px 100px;
}

.flex_madorizu{
    margin: 3vw 8vw 8vw;
}

}