@charset "utf-8";

/*=============== 全体にかかわる設定 ===============*/
html *,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-size: 17px;
  letter-spacing: 0.2em;
}

@media (max-width: 768px) {
	html {
		font-size: 17px;
	}
}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
	--color_text: #333333;
	--color_base: #F5F5F5;
	--color_main: #5e686e;
/*	--color_main: #71797E;*/
	--color_sub: #E5E4E2;
	--color_sub-2: #C0C0C0;
	--color_ac: #00B16B;
	--color_link: #3E6C99;
	line-height: 1.6;
	letter-spacing: 0.05em;
  color: var(--color_text);
	background: var(--color_base);
}



a {
	color: var(--color_link);
	transition: all 0.6s;
}
a:hover {
	opacity: 0.6;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.level1-heading {
	text-align: center;
	margin: 0;
	font-weight: normal;
}


  .level2-heading span {
      position: relative;
      font-size: 50px;
      color: var(--color_main);
      line-height: 1.8;
      font-weight: bold;
      z-index: 2;
  }

 .level2-heading {
      font-size: 18px;
      margin-bottom: 60px;
      color: var(--color_main);
  }

 .text-center {
 	text-align: center;
 }




@media (max-width: 768px) {
  .level2-heading span {
      position: relative;
      font-size: 28px;
      color: var(--color_main);
      line-height: 1.8;
      font-weight: bold;
      z-index: 2;
  }

 .level2-heading {
      font-size: 14px;
      margin-bottom: 60px;
      color: var(--color_main);
  }
}







.footer {
    padding: 0;
 	position: relative;
 	height: 500px;
 	color: var(--color_base);
}


.footer__img {
	position: absolute;
	background-image: url(../images/footer.jpg);
    background-image: image-set(url(../images/footer.jpg) 1x, url(../images/footer@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/footer.jpg) 1x, url(../images/footer@2x.jpg) 2x);
	background-size: cover;
	background-repeat: no-repeat, no-repeat; /*それぞれの画像に対して繰り返しをキャンセル*/
	background-position: 60% 0%;
	object-fit: cover;
	position: relative;	  
	top: 0;
	height: 100%; 
	filter: brightness(0.8);
}



.footer__container {
	top: 0;
	position: absolute;
    width: 100%;
    margin-bottom: 60px;
    padding: 120px 5% 20px;
    height: 100%;
}

.footer__logo {
	width: 240px;
    margin-bottom: 20px;
}

.footer__info {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
            color: #fff;
}

.footer__nav {
	padding-top: 60px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-size: 12px;
}

.footer__nav-item {
    color: var(--color_base);
    text-decoration: none;
}

.copyright {
    text-align: center;
    font-size: 10px;
    padding: 28px 0;
    color: var(--color_main);
}


@media (max-width: 768px) {
	.footer__nav {
	    justify-content: flex-start;
	}
}



@media (max-width: 520px) {
	.footer__nav {
	    flex-direction: column;
	}
	.footer__container {
		padding-top: 70px;
	}
}






/* ==================== メインビジュアル ==================== */
.mv {
	margin-bottom: 144px;
}

.mv__img {
	height: calc(100svh);	
	position: relative;
    background-image: url(../images/mv.jpg);
    background-image: image-set(url(../images/mv.jpg) 1x, url(../images/mv@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/mv.jpg) 1x, url(../images/mv@2x.jpg) 2x);
	background-size: cover;
	background-repeat: no-repeat, no-repeat; /*それぞれの画像に対して繰り返しをキャンセル*/
	background-position: 60% 0%;
	object-fit: cover;
	filter: brightness(0.7);
}

.mv__text {
	position: absolute;
	bottom: 20%;
	left: 60px;
  	border: none;
  	font-size: 34px;
  	letter-spacing: 6px;
  	max-height: 90vh;
  	color: var(--color_base);
}

.mv__open {
	max-width: 600px;
	position: absolute;
	bottom: 60px;
	left: 60px;
	background: rgba(255,255,255,0.5);
	padding: 24px 28px;
}

@media (max-width: 1000px) {
	.mv__text {
		bottom: 32px;
		right: 32px;
	}
	.mv__open {
		bottom: 32px;
		left: 32px;
	}
}

@media (max-width: 900px) {
	.mv__open {
		display: none;
	}
	.mv__text {
		bottom: 48px;
		left: 5%;
	  	writing-mode: horizontal-tb;
	  	letter-spacing: 3px;
	}
	.mv__text p {
		font-size: 28px;
		padding: 6px 16px;
	}
	.mv__text p:first-of-type {
		margin-bottom: 10px;
	}
}


@media (max-width: 705px) {
	.mv__text p {
/*		font-size: 34px;*/
	}
}



@media (max-width: 490px) {
	.mv__text p {
		font-size: 20px;
		padding: 4px 10px;
		white-space: nowrap
	}
}





/*=============== service ===============*/

.service {
	margin-bottom: 144px;
}

.service__item {
	display: flex;
	justify-content: start;
/*	padding: 20px;*/
	margin: 40px 3%;
	height: 450px;
	background: url(../images/service_1.jpg) no-repeat center center / cover;
}

.service__container {
	max-width: 1000px;
/*	margin-left: 15%;*/
	margin-left: 0%;
	display: flex;
	position: relative;
/*	height: 100%;*/
	align-items: stretch;

}

.service__container--reverse {
	margin-left: 0;
	margin: 0 0 0 auto;
}



.service__content {
	color: var(--color_base);
	text-decoration: none;
	background-color: var(--color_main);
	padding: 25px 50px;
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.service__content:hover {
}

.service__title {
	margin: 0;
	margin-bottom: 50px;
	font-size: 24px;
	font-weight: normal;
	position: relative;
}


.service__text {
	margin: 10px 0 24px;
	font-size: 15px;
}
.service__btn {
	margin-bottom: 10px;
	font-size: 15px;
}



.service__item--room {

}
.service__item--spa {
	background: url(../images/service_2.jpg) no-repeat center center / cover;
}
.service__item--food {
	background: url(../images/service_3.jpg) no-repeat center center / cover;
}

@media (max-width: 768px) {
	.service__item {
		height: 600px;
		flex-direction: column;
		justify-content: flex-end;
	}
	.service__content {
		max-width: 100%;
	}
	.service__container {
/*		padding: 0 3%;*/
	}
	.service__container {
/*		margin-left: 2.5%;*/
	}

	.service__container--reverse {
/*		margin: 0 2.5% 0 auto;*/
	}
}



@media (max-width: 550px) {
	.service__container {
		margin-left: auto;
		margin-right: auto;
	}

	.service__container--reverse {
		margin: 0 auto;
	}
}



/*=============== 数字で見る ===============*/

.number {
	margin-bottom: 144px;
}

.number__heading {
	font-size: 28px;
	text-align: center;
	color: var(--color_main);
	margin-bottom: 60px;
}

.number__container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.number__text {
	text-align: left;
	margin-top: 40px;
}

.number__item {
    width: 27%;
    border-radius: 10px;
    padding: 0 3%;
    border-radius: 41px;
}
.number-item p {
    text-align: left;
}

.countUp {
    font-variant-numeric: tabular-nums;
    font-size: 60px;
    color: var(--color_ac);
    padding: 0 4px;
}



@media (max-width: 1160px) {
 .number__item {
 	width: 30%;
 }
}




@media (max-width: 1080px) {
	.number__container {
		flex-direction: column;
		
		align-items: center;
	}
	.number__item {
		width: 100%;
		max-width: 500px;
	}
	.number__item:not(:last-child)  {
		margin-bottom: 60px;
	}
}







/*=============== news ===============*/
.news {
		padding: 80px 5% 106px;

}

.news__inner {
		padding: 40px;
}

.news__heading {
	text-align: center;
	margin-bottom: 50px;
}

.news__wrapper {
	margin: 0 auto;
	max-width: 960px;
	border-top: 1px solid var(--color_main);
}

.news__item {
	text-decoration: none;
	color: var(--color_text);
	font-size: 14px;
}

.news__item-inner {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color_main);
	padding: 10px 0;
}

.news__item-inner:hover {

}

.news__time {
	margin-right: 60px;
}

@media (max-width: 768px) {
	.news {
		padding: 50px 3%;
	}
	.news__inner {
		padding: 0;
	}
	.news__item-inner {
		flex-direction: column;
		align-items: start;
		padding: 12px 0;
	}
	.news__item-inner p {
		margin: 6px 0 0;
	}

}




/*================子ページ================*/





.child-heading-wrapper {
	margin-bottom: 144px;
	position: relative;
}

.child-heading__img {
	height: 280px;	
  background-image: radial-gradient(#a1a1a1, #5e686e);
	background-size: cover;
	background-repeat: no-repeat, no-repeat; /*それぞれの画像に対して繰り返しをキャンセル*/
	background-position: 60% 0%;
	object-fit: cover;
	filter: brightness(0.7);
}




.child-heading {
	position: absolute;
	bottom: 8%;
	left: 50%;
	color: var(--color_base);
	transform: translate(-50%, -50%);
	font-weight: normal;
	text-align: center;
	font-size: 28px;
	line-height: 1.2;
}
.child-heading span {
	font-size: 12px;
}


.child-container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto 80px;
	padding: 120px 3%;
}

.child-container p {
	margin-bottom: 28px;
}



.child-container h2 {
	background-color: var(--color_main);
	color: var(--color_base);
	font-weight: normal;
	padding: 12px 15px;
	margin-bottom: 32px;
}



.child-service-detail h3 {
    padding: 10px 0;
    margin-bottom: 28px;
    border-bottom: 3px dotted var(--color_main);
    font-size: 22px;
}


.child-service-explain {
	margin-bottom: 0 !important;
	font-style: italic;
}

.child-section {
	margin-bottom: 100px;
}

.child-marginbtm {
	margin-bottom: 100px;
}



.article__heading {
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 60px;
}

.article__time {
	font-size: 12px;
}

.article__text p {
	margin-bottom: 28px;
}

/*子ページプロフィール*/

@media (max-width: 768px) {
}



/*採用情報*/

.recruit-text {
	width: 100%;
	max-width: 630px;
	background-color: var(--color_sub);
	padding: 17px 40px;
	margin: 0 auto;
}



/*事業内容*/

.child-service-detail {
	margin-top: 80px;
}



.child-service-detail h3 {

}






/*会社概要*/



  table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      border: 1px solid var(--color_sub);
  }

  th {
/*  	width: 50%;*/
  }
  
  th, td {
      padding: 18px 15px;
      text-align: left;

  }
  
  tr:nth-child(odd) {
      background-color: var(--color_sub);
  }
  
  tr:nth-child(even) {
      background-color: var(--color_base);
  }
  
  
  /* レスポンシブスタイル */
  @media screen and (max-width: 600px) {
      table, thead, tbody, th, td, tr {
          display: block;
      }
      
      tr {
          margin-bottom: 15px;
          border: 1px solid #ddd;
      }
      
      th, td {
          border: none;
          border-bottom: 1px solid #ddd;
          position: relative;
      }
      
      td:last-child {
          border-bottom: none;
      }
  }





/*=============== animation ===============*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}





/*=============== お問い合わせ ===============*/
.contact {
	margin: 0 auto;
}

.contact p , form {
	font-size: 14px;
}

.contact__items {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 52px;
}

label {
	width: 300px;
	text-align: left;
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	margin-left: 20px;
	height: 45px;
	border: 1px solid #E5E5E5;
	padding: 10px;
}

textarea {
	height: 300px;
}

.contact-submit {
	text-align: center;
}

input[type="submit"] {
	padding: 10px 20px;
	border: none;
	background: var(--color_main);
	color: var(--color_base);
	margin: 0 auto;
}

input[type="submit"]:hover {
	opacity: 0.5;
}

.contact__info {
	margin-bottom: 40px;
	text-align: left;
}


@media (max-width: 768px) {
	.contact__items {
		flex-direction: column;
		align-items: start;
	}
	input[type="text"],
	input[type="email"],
	textarea {
		margin: 0;
	}
}






/*=============== news ===============*/
.news {
		padding: 80px 5% 106px;

}

.news__inner {
		padding: 40px;
}

.news__heading {
	text-align: center;
	margin-bottom: 50px;
}

.news__wrapper {
	margin: 0 auto;
	max-width: 960px;
	border-top: 1px solid var(--color_main);
}

.news__wrapper p {
	margin: 20px 0;
}

.news__item {
	text-decoration: none;
	color: var(--color_text);
	font-size: 14px;
}

.news__item-inner {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color_main);
	padding: 10px 0;
}

.news__item-inner:hover {

}

.news__time {
	margin-right: 60px;
}

@media (max-width: 768px) {
	.news {
		padding: 50px 3%;
	}
	.news__inner {
		padding: 0;
	}
	.news__item-inner {
		flex-direction: column;
		align-items: start;
		padding: 12px 0;
	}
	.news__item-inner p {
		margin: 6px 0 0;
	}
	

}


/* ==================== ヘッダー ==================== */
.header {

	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	position: absolute;
}

.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: inherit;
		padding: 28px 20px;
}

.header__logo-wrapper {
	width: 300px;
	display: flex;
	align-items: center;
}

.header__logo-wrapper:hover {
	opacity: 1;
}

.header__logo {
}


.header-nav {
	padding: 0;
}

.header-nav ul {
	display: flex;
	align-items: center;
	text-align: center;
	list-style: none;
	font-size: 14px;
	margin: 0;
	}

.header-nav a {
	text-decoration: none;
	color: var(--color_base);
	}


 
#g-nav-list {
	display: flex;
}


.header-nav li:not(:last-of-type) {
	margin-right: 40px;
}

.header__open-sp {
	display: none;
}

.header__logo--active {
	display: none;
}



@media (max-width: 1000px) {
.header__logo-wrapper {
	width: 240px;
}

.header__inner {
	padding: 10px;
}

	.header-nav {
		padding: 0;
	}

	.header-nav ul {
		flex-direction: column;

	}
	.header-nav li:not(:last-of-type) {
		margin-right: 0;
	}

	#g-nav{
	    position: absolute;
	    z-index: 999;
    	/*ナビのスタート位置と形状*/
		top:0;
	  	right: 0;	
		width:100vw;
    	height: 100vh;/*ナビの高さ*/
		background:var(--color_main);
    	/*動き*/
		transition: all 0.6s;
		opacity: 0;
		z-index: -1;
		visibility: hidden
	}

	#g-nav-list {
		flex-direction: column;
		justify-content: center;
	}

	#g-nav ul {
		margin-right: 0;
		margin-bottom: 40px;
		padding-left: 0;
	}

	/*リストのレイアウト設定*/
	#g-nav li a{
		padding:12px;
		display: block;
	}


	/*アクティブクラスがついたら位置を0に*/
	#g-nav.panelactive{
	    opacity: 1.0;
	    z-index: 999;
	    visibility: visible;
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{
	    /*ナビの数が増えた場合縦スクロール*/
	    position: fixed;
	    z-index: 999; 
	    width: 100%;
	    height: 100vh;/*表示する高さ*/
	    overflow: auto;
	    -webkit-overflow-scrolling: touch;
	}


	#g-nav.panelactive .header__logo--active {
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		display: block;
	}


	.reservation-btn--header {
		padding: 10px 60px;
		max-width: 280px;
		margin: 0 auto;
	}

	.header__open-sp {
		width: 90%;
		max-width: 360px;
		display: block;
	}


/*========= ボタンのためのCSS ===============*/
	/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
	.openbtn{
		/*ボタン内側の基点となるためrelativeを指定。
		追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
		position: relative;
		right: 0px;
		top: 0px;
/*		right: 7px;
		top: 7px;
*/		
		background:var(--color_main);
		cursor: pointer;
	    width: 50px;
	    height:50px;
/*	    width: 70px;
	    height:70px;
*/	    
		z-index: 9999;
		border-radius: 4PX;
		color: var(--color_base);
	}

	/*ボタン内側*/
	.openbtn span{
	    display: inline-block;
	    transition: all .4s;/*アニメーションの設定*/
	    position: absolute;
	    left: 13px;
		background: var(--color_base);
	  	width: 48%;
	  }

	.openbtn span:nth-of-type(1) {
		top:18px;	
	    height: 1px;
	}

	.openbtn span:nth-of-type(2) {
		top:32px;
	    height: 1px;
	}

	/*activeクラスが付与されると線が回転して×*/

	.openbtn.active span:nth-of-type(1) {
	    top: 20px;
	    left: 17px;
	    transform: translateY(6px) rotate(-45deg);
	    width: 38%;
	    height: 1px;
	}

	.openbtn.active span:nth-of-type(2){
	    top: 32px;
	    left: 17px;
	    transform: translateY(-6px) rotate(45deg);
	    width: 38%;
	}
}



@media (max-width: 500px) {
	.header__logo-wrapper {
		width: 200px;
	}

}






/*================サステナビリティ================*/


.partition {
  width: 100%;
  height: 850px;
  overflow: hidden;
  position: relative;
  border-top-right-radius: 1000px 350px;
  border-top-left-radius: 1000px 350px;
  }



.partition__text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: inset(0);
  z-index: -1;
  text-align: left;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
  color: var(--color_base);
  font-size: 18px;
  max-width: 450px;

 }

.partition__title{
	font-size: 27px;
	margin-bottom: 60px;
	text-align: center;
}

.partition__img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  z-index: -1;
 }



.partition__img::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/partition.jpg") no-repeat;
  background-size: cover;
  background-position: top center;
  filter: brightness(0.7);
	}

@media (max-width: 768px) {
	.partition__text {
		  width: 100%;
	}

}


@media (max-width: 500px) {
	.partition__text {
		  width: 100%;
		  padding-left: 20px;
	}
}




/*================コンセプト================*/




.about {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 500px;
		margin-bottom: 144px;            
}

/* コンテンツ側 */
.about__content {
    position: relative;
    width: 50%;
    padding: 80px 60px;
    z-index: 2;
}



.about__text {
    margin-bottom: 40px;
}




/* 画像側 */
.about__image-container {
    position: relative;
    width: 50%;
    height: 400px;
    overflow: hidden;
    z-index: 2;
}

.about__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 背景要素 */
.about__background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 79%;
    background-color: var(--color_sub);
    z-index: 1;
}

/* レスポンシブ対応 */
@media (max-width: 1183px) {
    .about {
        flex-direction: column;
    }
    
    .about__content {
        width: 100%;

    }


    
    .about__image-container {
        height: 350px;
        margin-left: auto;
        width: 70%;
        order: -1;
        position: relative;
    }
    
    .about__image {
        position: absolute;
    }
    
    .about__background {
        width: 100%;
        height: 90%;
    }
}


@media (max-width: 769px) {
    .about__content {
      padding: 80px 20px;

    }

}





/* ボタン共通設定 */

.btn-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 60px;
	margin-bottom: 80px;
}


.btn {
    /*線の基点とするためrelativeを指定*/
	display:inline-block;
  	padding:14px 30px;
	color:var(--color_base);
	background: var(--color_main);
    text-decoration: none;
 	font-size: 16px;
}