@charset "utf-8";
/* CSS Document */

html{
  font-size: 100%;
}

body{
  font-family: sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #faf0e6;
  overflow-x: hidden;
  font-family: 'BIZ UDGothic', sans-serif;
}

h1, h2, h3, h4, h5,h6{
  font-family: 'Kaisei Opti', serif;
}

h2{
  margin-top: 10%;
  font-size: 2.5rem;
}

h6{
  text-align: center;
  font-size: 5vw;
  margin-bottom: 10px;
  color: #B81649
}





/*** フェードインアニメーション ***/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/*** bodyに反映させる ***/
body{
  animation: fadeIn 2s forwards;
}
/**************↑↑フェードインアニメーション *****************/



/************** ↓ヘッダー（モバイル）↓ ************/

/*--------↓TOP固定の旗↓--------*/
.flag{
  position: fixed;
  top: 0;
  margin-left: 5px;
  max-width: 20vw;
  z-index: 99;
}
/*--------↓ナビの公式LINE&空室状況(PC版)非表示↓--------*/
.nav_connect_pc{
  display:none;
}
/*----------↓ハンバーガー↓-------------*/

/**ドロワーメニューCSS
********************************/
#btn_open{
    display: none;
}
  
/*ハンバーガーボタン*/ 
.btn_menu{
  display: block;
  width: 50px;
  height: 50px;
  background-color: #faf0e600;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 100;
  position: fixed;
}
.btn_menu span{
  display: block;
  width: 70%;
  height: 4px;
  background-color: #B81649;
  border-radius: 5px;
  position: absolute;
  left: 20%;
  transition: .2s ;
}

.btn_menu span:nth-of-type(1){
  top: 10px;
  transform: rotate(0);
}
.btn_menu span:nth-of-type(2){
  top: 23px;
  transform: scale(1);
}
.btn_menu span:nth-of-type(3){
  bottom: 10px;
  transform: rotate(0);
}


/*ハンバーガーメニュー変化後の状態*/
#btn_open:checked + .btn_menu span:nth-of-type(1){
  top: 23px;
  transform: rotate(-45deg);
}
#btn_open:checked + .btn_menu span:nth-of-type(2){
  transform: scale(0);
}
#btn_open:checked + .btn_menu span:nth-of-type(3){
  bottom: 23px;
  transform: rotate(45deg);
}

#btn_open:checked + .btn_menu{
  background-color: hsla(0, 0%, 100%, 0);
}

#btn_open:checked +.btn_menu span{
  background-color: #004C97;
}

/* .navの色々 */
.nav{
  /* height: calc(100vh - 70px); */
  border-radius:  5vh 0 5vh 5vh;
  margin-top: 0;
  background-color: #fff;
  overflow: hidden;
  position: fixed;
  top: -100%;
  right: 0%;
  transition: top .5s;
  z-index: 99;
}

#btn_open:checked ~ .nav{
  top: 0;
}

.nav_flex {
  padding: 0.5rem 3rem;
  text-align: left;
  margin-top: 30px;
}

.nav_flex li a p:hover{
  transform: scale(1.1,1.1); /*画像の拡大*/
}

.nav_flex li{
  border-bottom: 3px dotted #B81649;
  padding: 5px 0;
}

.nav_flex li a {
  text-decoration: none;
  color:#4A4A4A;
  font-size: 1.2rem;
}

.nav_flex li a p{
  padding-top: 10px;
}

/*ナビ内の会社ロゴ*/
.nav_logo{
  position: static;
  max-width: 140px;
  margin-left: 30px;
  margin-top: 20px;
}

.nav_logo:hover{
  transform: scale(1.2,1.2); /*画像の拡大*/
}

/*↓ハンバーガーメニュー内のLINEと空室状況のボタン*/

.nav_connect{

  display: flex;
  justify-content: space-between;
  margin: 2.5vh 1vw;
}
/*↓LINE*/
.nav_line{
    display: block;
	text-align: center;
	text-decoration: none;
	width: 24vw;
	margin: auto;
	padding: 0.5rem 0.8rem;
	border-radius: 100vh;
	border-bottom: 7px solid #95113b;
	background: #B81649;
	color: #fff;
}
.nav_line:hover {
    transform: translateY(4px);
	margin-top: 6px;
	border-bottom: 1px solid #95113b;
	color: #fff;
}

/*↓空き室状況*/
.nav_availability{
  display: block;
text-align: center;
text-decoration: none;
width: 24vw;
margin: auto;
padding: 0.5rem 0.8rem;
border-radius: 100vh;
border-bottom: 7px solid #2b5075;
background: #437BB3;
color: #fff;
}

.nav_availability{
    margin-left: 15px;
}

.nav_availability:hover {
  transform: translateY(4px);
margin-top: 6px;
border-bottom: 1px solid #437BB3;
color: #fff;
}


/*↑↑↑ハンバーガーメニュー内LINEと空室状況↑↑↑*/
/*----------ハンバーガー-------------*/




/*------------↓↓↓フッターの色々↓↓↓-------------*/

/*--背景グラデーション部分--*/
.bg_footer1{
  background: linear-gradient(#446F99, #446F99);
  width: 100vw;
  height: 20vh;
}

/*--背景砂浜と海--*/
.bg_footer2{
  width: 100vw;
  height: 50vh;
  padding: 10% 0;
  background-image:url(../image/foot_background.png);
  background-size: 100% 100%;
  background-position: center bottom;
  position: relative;
  margin: 0 auto;
  text-align: center;
}
/*--背景砂浜だけ--*/
.bg_footer3{
  margin-top: -2px;
  background-color: #FFE178;
  background-size: 100% 100%;
}

.footer_logo{
  width: 200px; /*画像の幅*/
  transition-duration: 0.3s; /*変化の時間*/
}
.footer_logo:hover {
  transform: scale(1.2,1.2); /*画像の拡大*/
}


/*--フッター内の雲・お日様・家のイラスト--*/
.footer_img{
  width: 20vw;
}

.footer_img_1{
  position: absolute;
  top: 0vh; right: 10vw;
}

.footer_img_2{
  position: absolute;
  top: 2vh; left: 10vw;
}

.footer_img_3{
  position: absolute;
  top:8vh; left: 40vw;
}

.footer_img_4{
  position: absolute;
  bottom:17vh; right: 20vw;
}


.copyright{
text-align: center;
margin-top: 150px;
}

.copy{
  margin-top: 20px;
  }

/*------------↑↑↑フッターの色々↑↑↑-------------*/


/*------------↓↓↓フッター内のリンクボタン↓↓↓-------------*/
.footer_contact_flex{
  display: flex;
  justify-content:space-between;
  margin: 0 4vw;
  padding-bottom: 20px;
}

/*--フッター内のラインのリンクボタン--*/
.footer_line{
  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;
}

.footer_line a{
  text-decoration: none;
  color: #fff;
}

.footer_line:hover {
  transform: translateY(4px);
  margin-top: 6px;
  border-bottom: 1px solid #95113b;
  color: #fff;
}

/*--フッター内の電話のリンクボタン--*/
.footer_tel{
  display: block;
  text-align: center;
  text-decoration: none;
  width: 25vw;
  margin: auto;
  padding: 20px 20px;
  border-radius: 30px;
  border-bottom: 7px solid #335f8a;
  background: #437BB3;
  color: #fff;
  font-size: clamp(0.75rem,0.381rem + 1.58vw, 1.563rem);
}

.footer_tel a{
  text-decoration: none;
  color: #fff;
}

.footer_tel:hover {
  transform: translateY(4px);
  margin-top: 6px;
  border-bottom: 1px solid #335f8a;
  color: #fff;
} 
.tel-link{
  text-decoration: none;}

/*--フッター内の採用情報ボタン--*/

.recruitment_all{
  position: relative;
  margin-top: 50px;
}

.footer_recruitment{
  display: block;
  text-align: center;
  text-decoration: none;
  width: 28vw;
  margin: auto;
  padding: 20px 20px;
  border-radius: 30px;
  border-bottom: 7px solid #878787;
  background: #fff;
  color: #4A4A4A;
}
.footer_recruitment a{
  text-decoration: none;
  color: #fff;
}
.footer_recruitment:hover {
  transform: translateY(9px);
  border-bottom: 1px solid #878787;
  color: #4A4A4A;
}
.footer_brochure{
  display: block;
  text-align: center;
  text-decoration: none;
  width: 28vw;
  margin: auto;
  padding: 20px 20px;
  border-radius: 30px;
  border-bottom: 7px solid #543100;
  background: #914E25;
  color: #fff;
}

.footer_brochure a{
  text-decoration: none;
  color: #fff;
}

.footer_brochure:hover {
  transform: translateY(4px);
  margin-top: 6px;
  border-bottom: 1px solid #95113b;
  color: #fff;
}
/* .recruitment{
  position: absolute;
  top: 0%;
  left: 30%;
}

.recruitment_img{
  position: absolute;
  top: 0%;
  left: 60vw;
  max-width: 100px;
} */

/*------------↑↑↑フッターのリンクボタン↑↑↑-------------*/

/*------------↓↓↓フッターのページトップボタン↓↓↓-------------*/

#topBtn a {
  display: table-cell;
  width: 2em;
  height: 2em;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 1em;
  line-height: 1;
  border-radius: 50%;
  background: #437BB3;
  behavior: url(PIE/PIE.htc);
  text-decoration: none;
  }

#topBtn a:before {
      font-weight:bold;
      content: '';
      width: 13px;
      height: 13px;
      border: 0;
      border-top: solid 3px #FFFBEB;
      border-right: solid 3px #FFFBEB;
      position: absolute;
      top: 48%;
      left: 28%;
      margin-top: -5px;
      transform: rotate(-45deg);
      }

#topBtn {
      position: fixed;
      bottom: 40px;
      right: 20px;
      margin: 0 auto;
      z-index: 200;
}

/*--------↓レスポンシブ350以下--------*/

@media screen and (max-width:350px) {

  h2{
    font-size: 2.4rem;
  }
}

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

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

h2{
    font-size: 3.3rem;
}

}

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

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

h2{
    font-size: 2rem;
    margin-top: 0px;
}



/*--------↓共通フッター--------*/

.footer_img{
  width: 14vw;
}

.footer_img_4{
  position: absolute;
  bottom:10vh; right: 20vw;
}

.bg_footer2{
  height: 70vh;
}

.copyright{
  display:flex;
  padding: 100px 20px 20px 20px;
  justify-content:space-between;
  align-items:flex-end;
}


/*--------↓PC版★フッター内のリンクボタン類--------*/

.footer_line{
width:  30vw;
  padding: 1.5rem 2rem;
  font-size: 25px;
}
.footer_tel{
width:  30vw;
  padding: 1.5rem 2rem;
  font-size: 25px;
}
.footer_recruitment{
width:  30vw;
  padding: 1.5rem 2rem;
  font-size: 25px;
}
.footer_brochure{
  width:  30vw;
    padding: 1.5rem 2rem;
    font-size: 25px;
  }

/* .recruitment_img{
  position: absolute;
  top: 0%;
  left: 58vw;
  max-width: 150px;
} */

/*------------↓↓↓PC版★フッターのページトップボタン↓↓↓-------------*/
#topBtn {
  position: fixed;
  bottom: 50px;
  right: 20px;
  margin: 0 auto;
  z-index: 200;
  }

#topBtn a {
      display: table-cell;
      width: 4em;
      height: 4em;
      text-align: center;
      vertical-align: middle;
      color: #fff;
      font-size: 1em;
      line-height: 1;
      border-radius: 50%;
      background: #437BB3;
      behavior: url(PIE/PIE.htc);
      text-decoration: none;
      }
  
#topBtn a:before {
          content: '';
          width: 24px;
          height: 24px;
          border: 0;
          border-top: solid 3px #FFFBEB;
          border-right: solid 3px #FFFBEB;
          position: absolute;
          top: 48%;
          left: 29%;
          margin-top: -5px;
          transform: rotate(-45deg);
          }

}

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

/*--------↓共通ヘッダー（PC表示）--------*/



.nav{
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10000;
  background-color: #fff;
  width: 100%;
  border-radius: 0vh;
}

.faq{
  margin-right: 5vw;
}

.nav_about{
  margin-left: 10vw;
}

.nav_flex li{
  padding: 0px 0px;
}

.nav_flex li a {
font-size: 1.5vw;
}

.nav_flex li a p:hover{
  transform: scale(1.2,1.2); /*画像の拡大*/
}

.nav_flex{
  text-align: left;
  padding: 0rem 0rem;
  margin-top: 0px;
  margin-left: 120px;
}

.nav_flex ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  text-align: center;
}

.nav_flex ul li{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-left: 5vw;
  margin-bottom: 1.5vh;
}

/*--------↓ヘッダーのロゴ--------*/

.nav_logo{
margin-top: 5px;
position: fixed;
max-width: 100px;
}

.nav_logo{
position: absolute;
}

.nav_logo:hover {
  transform: scale(1.2,1.2); /*画像の拡大*/
}

/*--------↓ヘッダーのトリコロール下線↓--------*/
.border_line{
background: url(../image/border_line.png) repeat-x;
height: 10px;
width: 100vw;
}

/*--------↓TOP固定の旗非表示↓--------*/
.flag{
  display: none;
}

/*--------↓ヘッダーの公式LINE&空室状況(PC版)表示↓--------*/

.nav_connect{
display:none;
}

.nav_connect_pc{
display: block;
/* margin-top: 120px; */
padding-top: 110px;
height: 100px;
}

.nav_line_pc{
  display: block;
  position: fixed;
  z-index: 10000;
  border-radius: 100vh;
  right: 140px;
  text-align: center;
  text-decoration: none;
  width: 90px;
  height: 50px;
  padding: 1.2rem 0.4rem;
  border-bottom: 7px solid #95113b;
  background: #B81649;
  color: #fff;
}
.nav_line_pc:hover {
  transform: translateY(4px);
  margin-top: 6px;
  border-bottom: 1px solid #95113b;
  color: #fff;
}

.nav_availability_pc{
  display: block;
  position: fixed;
  z-index: 10000;
  right: 2vw;
  text-align: center;
  text-decoration: none;
  width: 90px;
  height: 50px;
  padding: 1.2rem 0.4rem;
  border-radius: 100vh;
  border-bottom: 7px solid #2b5075;
  background: #437BB3;
  color: #fff;
}

.nav_availability_pc:hover {
  transform: translateY(4px);
  margin-top: 6px;
  border-bottom: 1px solid #437BB3;
  color: #fff;
}

/*--------↑共通ヘッダー（PC表示）--------*/

  h2{
    font-size: 6rem;
  }

  .nav_connect_pc{
    display: block;
    padding-top: 90px;
    height: 100px;
    }

    h6{
      font-size: 3vw;
      margin-bottom: 20px;
    }

}