@charset "UTF-8";

/* --------------------------------
  コテージ
 -------------------------------- */
.c-titleEng {
  line-height: 0.8;
  letter-spacing: 5px;
  font-weight: 900;
  font-size: min(6em, 16vw);
  font-family: Diamor, sans-serif;
}
@font-face {
  font-family: "Diamor";
  src: url("../img/cottage/Diamor.ttf") format("truetype");
}

/*--------- 全体 ----------*/

.p-cottage__note {
  line-height: 1.6;
  font-size: 0.845em;
  padding-left: 1em;
  text-indent: -1em;
}
.p-cottage__photo {
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.p-cottage__hero .c-underHero__logo {
  width: min(380px, 50vw);
  top: 50%;
  left: 55%;
}

/*--------- スペシャル ----------*/
.p-cottageSpecial {
  display: grid;
  gap: 2em;
  justify-items: center;
}
.p-cottageSpecial__image {
  width: clamp(250px, 40vw, 400px);
}
.p-cottageSpecial__image img {
  object-fit: contain;
  width: 100%;
}
.p-cottageSpecial__heading {
  font-size: min(6vw, 2em);
  font-weight: 900;
  text-align: center;
}

.p-cottageSpecial__read {
  text-align: center;
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .p-cottageSpecial__read {
    font-size: 0.9em;
  }
}

/*--------- 部屋情報 ----------*/

.p-cottageRoomInfo {
  display: flex;
  flex-wrap: wrap;
  background: url(../img/cottage/bgimg.webp) 0 0 repeat;
  background-size: 50%;
}
.p-cottageRoomInfo__image {
  flex: 1 1 clamp(300px, 50%, 500px);
}
.p-cottageRoomInfo__text {
  padding: min(50px, 5vw);
  flex: 1 1 clamp(300px, 50%, 500px);
  display: grid;
  gap: 1em;
}
@media screen and (max-width: 768px) {
  .p-cottageRoomInfo__title {
    text-align: center;
  }
  .p-cottageRoomInfo__image {
    overflow: hidden;
    aspect-ratio: 1/0.7;
  }
}

/*--------- SDGs ----------*/
.p-cottageSdgs {
  display: grid;
  justify-items: center;
  gap: 1em;
  margin-bottom: min(100px, 16vw);
}
.p-cottageSdgs__title {
  text-align: center;
  font-weight: 900;
  font-size: min(2em, 6vw);
}
.p-cottageSdgs__title .c-small {
  margin-left: 1em;
}
.p-cottageSdgs__read {
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.8;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-cottageSdgs__read {
    font-size: 1em;
  }
}

/*--------- 部屋 ----------*/
.p-cottageBedroom {
  padding: min(30px, 3vw) min(50px, 5vw);
  background: url(../img/cottage/bgimg.webp) 0 0 repeat;
  background-size: 50%;
  display: grid;
  justify-items: center;
  gap: 1em;
}
.p-cottageBedroom__title {
  margin-top: -0.7em;
  padding: 0.2em 0.5em;
  color: var(--color-white);
  background: url(../img/cottage/wood_short.jpg);
  background-size: 100%;
  margin-bottom: 0.2em;
}
.p-cottageBedroom__image {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 20px 5%;
}
.p-cottageBedroom__image li {
  overflow: hidden;
  aspect-ratio: 1/0.7;
  flex: 1 1 clamp(200px, 45%, 100%);
}

/*--------- 間取り ----------*/
.p-cottageLayout {
  display: grid;
  justify-items: center;
  gap: 3em;
  margin-bottom: min(100px, 16vw);
}
.p-cottageLayout__image {
  display: block;
  width: min(100%, 800px);
}
.p-cottageLayout__image img {
  object-fit: contain;
  width: 100%;
  margin: auto;
}
.p-cottageLayout__title {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-cottageLayout__image img {
    max-width: 280px;
  }
}
/*--------- 設備 ----------*/
.p-cottageFacility {
  padding: min(30px, 3vw) min(50px, 5vw) min(50px, 5vw);
  background: url(../img/cottage/bgimg.webp) 0 0 repeat;
  background-size: 50%;
  display: grid;
  justify-items: center;
  gap: 1em;
  margin-bottom: min(100px, 16vw);
}
.p-cottageFacility__title {
  margin-top: -0.7em;
  padding: 0.2em 0.5em;
  color: var(--color-white);
  background: url(../img/cottage/wood_short.jpg);
  background-size: 100%;
  margin-bottom: 0.2em;
}

.p-cottageFacility__dish {
  display: flex;
  flex-wrap: wrap;
}
.p-cottageFacility__dishImage {
  flex: 1 1 clamp(300px, 50%, 500px);
}
.p-cottageFacility__dishText {
  padding: min(50px, 5vw);
  flex: 1 1 clamp(200px, 50%, 500px);
  display: grid;
  gap: 30px 20px;
}

.p-cottageFacility__bathroom {
  display: grid;
  align-items: start;
  gap: 50px 3%;
  grid-template-columns: 1fr 1fr 1fr;
  margin: min(50px, 5vw) auto 0;
}
.p-cottageFacility__bathroomItem {
  display: grid;
  gap: 1em;
}
.p-cottageFacility__bathroomImage {
  aspect-ratio: 1/0.7;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-cottageFacility__bathroom {
    grid-template-columns: auto;
  }
  .p-cottageFacility__dishText {
    padding: 30px 0;
  }
  .p-cottageFacility__dishImage {
    max-width: 400px;
    margin: auto;
    overflow: hidden;
    aspect-ratio: 1/0.7;
  }
}

/*--------- 食事 ----------*/
.p-cottageDinner {
  padding: min(30px, 3vw) min(50px, 5vw) min(50px, 5vw);
  background: url(../img/cottage/bgimg.webp) 0 0 repeat;
  background-size: 50%;
  display: grid;
  justify-items: center;
  gap: min(50px, 5vw);
}
.p-cottageDinner__title {
  margin-top: -0.7em;
  padding: 0.2em 0.5em;
  color: var(--color-white);
  background: url(../img/cottage/wood_short.jpg);
  background-size: 100%;
  margin-bottom: 0.2em;
}
.p-cottageDinner__catch {
  display: grid;
  gap: 30px;
  justify-items: center;
}
.p-cottageDinner__catchImage {
  max-width: 700px;
  aspect-ratio: 1/0.5;
  overflow: hidden;
}
.p-cottageDinner__catchText {
  text-align: center;
  font-weight: 500;
}
.p-cottageDinner__menu {
  display: grid;
  gap: 30px;
}
.p-cottageDinner__menuItem {
  display: flex;
  flex-wrap: wrap;
}
.p-cottageDinner__menuItem:nth-of-type(even) {
  flex-direction: row-reverse;
}
.p-cottageDinner__menuImage {
  flex: 1 1 clamp(300px, 45%, 500px);
}
.p-cottageDinner__menuText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  padding: min(50px, 5vw);
  flex: 1 1 clamp(300px, 45%, 500px);
}
.p-cottageDinner__menuTitle {
  font-size: 1.2em;
  font-weight: 900;
}
.p-cottageDinner__about {
  display: grid;
  gap: 2em;
  justify-items: center;
}
.p-cottageDinner__aboutTitle {
  font-weight: 900;
  font-size: 1.5em;
}
.p-cottageDinner__aboutRead {
  border-block: 1px solid #ccc;
  font-size: 1.1em;
  text-align: center;
  padding-block: 1em;
}
.p-cottageDinner__prize {
  display: grid;
  gap: 1em;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  justify-items: center;
}
.p-cottageDinner__prize .p-cottageDinner__aboutTitle {
  text-align: center;
}
.p-cottageDinner__prize img {
  width: min(100px, 20vw);
}

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

@media screen and (max-width: 768px) {
  .p-cottageDinner__menuImage {
    aspect-ratio: 1/0.7;
    overflow: hidden;
  }
  .p-cottageDinner__catchText {
    text-align: left;
  }
  .p-cottageDinner__prize .p-cottageDinner__aboutTitle {
    font-size: 1.2em;
  }
  .p-cottageDinner__prizeRead {
    font-size: 0.9em;
  }
}

/*--------- インフォメーション ----------*/
.p-cottageInfo {
  padding: min(50px, 5vw);
  background: url(../img/cottage/bgimg.webp) 0 0 repeat;
  background-size: 50%;
  display: grid;
  justify-items: center;
  gap: 1em;
}
.p-cottageInfo__title {
  margin-bottom: 0.2em;
}
.p-cottageInfo__list {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 30px 5%;
}
.p-cottageInfo__item {
  display: grid;
  gap: 1em;
  flex: 1 1 clamp(200px, 45%, 500px);
}
.p-cottageInfo__menuImage {
  aspect-ratio: 1/0.7;
  overflow: hidden;
}
.p-cottageInfo__menuTitle {
  font-weight: 900;
  font-size: 1.2em;
  text-align: center;
}

/*--------- ご利用料金 ----------*/

.p-cottagePrice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 30px;
}
.p-cottagePrice__title {
  font-size: min(1.5em, 5vw);
  font-weight: 900;
  text-align: center;
}
.p-cottagePrice__calendarWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 5%;
  width: 100%;
}
.p-cottagePrice__calendarWrap .c-tableWrap {
  flex: 1 1 clamp(450px, 45%, 600px);
}
.p-cottagePrice__calendarWrap .c-tableWrap + .c-tableWrap {
  margin-top: 0;
}

/* ------ カレンダーベーススタイル ------- */
.p-cottagePrice__calendar {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.p-cottagePrice__calendar caption {
  background: #cbb9a0;
  font-weight: 600;
  font-size: 16px;
  padding-block: 6px;
  text-align: center;
}
.p-cottagePrice__calendar th {
  background: #f5ede3;
  text-align: center;
  border: 1px solid #cbb9a0;
  color: #5c4a38;
  font-weight: 600;
  padding-block: 4px;
}
.p-cottagePrice__calendar td {
  border: 1px solid #cbb9a0;
  height: 70px;
  vertical-align: middle;
  padding: 5px;
  font-weight: 500;
}

/* 日付・料金配置 */
.p-cottagePrice__calendar td {
  font-size: 1em;
}
.p-cottagePrice__plan {
  font-weight: 600;
  font-size: 1.2em;
}
.p-cottagePrice__price {
  font-size: 1em;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .p-cottagePrice__calendarWrap {
    gap: 30px 0;
  }
  .p-cottagePrice__calendar {
    width: fit-content;
    min-width: 100%;
  }
  .p-cottagePrice__calendar td {
    font-size: min(14px, 3.5vw);
    padding: 3px;
  }

  .p-cottagePrice__price{
    font-size: 0.7em;
  }
}

/* ------ 曜日別文字カラー ------- */
.p-cottagePrice__calendar th:nth-child(1),
.p-cottagePrice__calendar td:nth-child(1) {
  color: #d15a5a;
}
.p-cottagePrice__calendar th:nth-child(7),
.p-cottagePrice__calendar td:nth-child(7) {
  color: #3b69c5;
}
.p-cottagePrice__a {
  background: #c6f4fc !important;
}
.p-cottagePrice__b {
  background: #fcc8c8 !important;
}
.p-cottagePrice__c {
  background: #fce7bf !important;
}
.p-cottagePrice__d {
  background: #ffe86b !important;
}
.p-cottagePrice__e {
  background: #a1f3a1 !important;
}
.p-cottagePrice__calendar td:empty {
  background: #f5f5f5 !important;
}

/* ×印（予約不可） */
.p-cottagePrice__calendar td:contains("×") {
  color: #d00;
  font-weight: 700;
}

/* ------ 宿泊料金表デザイン ------ */
.p-cottagePrice__aboutText .c-small span {
  margin-right: 1.5em;
}

.p-cottagePrice__info {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
.p-cottagePrice__info th,
.p-cottagePrice__info td {
  border: 1px solid #e0d6c7;
  padding: 8px 10px;
  text-align: center;
}
.p-cottagePrice__info thead th {
  background: #f5ede3;
  font-weight: 600;
}
.p-cottagePrice__info td:first-child {
  font-weight: 600;
  width: 40px;
}
.p-cottagePrice__info td {
  background: #fff;
}
.p-cottagePrice__info .p-cottagePrice__d {
  font-weight: 600;
}
.p-cottagePrice__btnBox {
  display: grid;
  justify-items: center;
  gap: 1em;
}

@media screen and (max-width: 768px) {
  .p-cottagePrice__info td {
    white-space: nowrap;
    padding: 8px 5px;
    font-size: 12px;
  }
}

/*--------- アクセス ----------*/
.p-cottageAccess {
  display: grid;
  justify-items: center;
  gap: min(30px, 5vw);
}
.p-cottageAccess__title {
  font-size: min(1.5em, 5vw);
  font-weight: 900;
  text-align: center;
}
.p-cottageAccess__map {
  width: 100%;
}
.p-cottageAccess__map iframe {
  width: 100%;
  height: 500px;
}
.p-cottageAccess__text {
  text-align: center;
  font-size: 1.2em;
}
.p-cottageAccess__name {
  font-weight: 900;
}
.p-cottageAccess__read {
  margin-top: 5px;
  font-size: 0.875em;
}

@media screen and (max-width: 768px) {
  .p-cottageAccess__map iframe {
    height: 300px;
  }
  .p-cottageAccess__text {
    font-size: 1em;
  }
}