@charset "UTF-8";

/* ///////////////////////////// */
/**** スムーススクロール ****/
html {
 scroll-behavior: smooth;
}

/* ///// variable ///////////////////////////////// */
:root {
 --f-font-base: "dnp-shuei-gothic-gin-std", sans-serif;
 --c-txt-base: #000000;
 --c-bg: #ffffff;
 --c-bg-main: #fbf8c5;
 --c-bg-foot: #d9e021;
 --c-prim: #ffffff;
 --c-prim-con: #0000009a;
}

/* ///// founfation /////////////////////////////////  ****/
html {
 font-size: clamp(14px, 1.1vw, 22px);
 color: var(--c-txt-base);
 letter-spacing: 0.05em;
 font-family: var(--f-font-base);
 line-height: 1.8;
 background-color: #fff;
}

* {
 box-sizing: border-box;
}

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


a {
 text-decoration: none;
 font-size: inherit;
 cursor: pointer;
 transition: 0.3s;
}

a:hover {
 opacity: 0.5;
}

a[href=""] {
 pointer-events: none;
 /* filter: grayscale(1) opacity(0.5); */
 position: relative;
}

a[href=""]::before {
 content: "準備中";
 display: flex;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.469);
 color: #fff;
 top: 0;
 left: 0;
 justify-content: center;
 align-items: center;
 font-size: 1em;
}

[data-lity] {
 cursor: pointer;
 transition: 0.3s;
}

[data-lity]:hover {
 opacity: 0.5;
}

/* ///// layout /////////////////////////////////  ****/
main {
 overflow: hidden;
}

section {
 position: relative;
 margin: 0 auto;
 width: 80%;
}

.l_header img {
 width: 100%;
}

.l_left {
 margin-left: calc(50% - 50vw);
}

.l_flex_circre {
 display: flex;
 gap: 1.5rem;
 width: 75%;
 margin-inline: auto;
 flex-wrap: wrap;
 justify-content: center;
}

.l_flex_circre a {
 width: calc(93.2%/3);
}

@media (max-width: 768px) {
 .l_flex_circre a {
  width: min(calc(92.2%/2), 200px);
 }

 .l_flex_circre {
  width: 100%;
 }
}

.l_flex_company {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
 width: 50%;
 margin-inline: auto;
}

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



/* ↓スケジュール↓ */

.p_schedule_detail {
 display: grid;
 margin: 1% auto;
 width: fit-content;
 max-width: 90%;
 grid-template-columns: repeat(2, 1fr);
 font-size: 1.3rem;
 gap: 0.5em;
}

.p_schedule_detail dd,
.p_schedule_detail dt {
 font-weight: bold;
 padding: 0.5em 1em;
}

.p_schedule_detail dt {
 background-color: #D9E021;
 padding: 0.5em 3em;
}

.p_schedule_detail dd {
 text-align: left;
}

.p_schedule:has(.p_schedule_disable) {
 position: relative;

 h2,
 .p_schedule_detail {
  opacity: 0.5;
 }
}

.p_schedule_disable {
 left: 0%;
 top: 0%;
 position: absolute;
 font-weight: bold;
 font-size: clamp(11px, 8vw, 57px);
 letter-spacing: 0.05em;
 background-color: #000000b7;
 color: #fff;
 line-height: 1.2;
 padding: 0.2em 0.5em;
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

@media (max-width: 768px) {

 .p_schedule_detail {
  grid-template-columns: 1fr;
 }

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



/* ↓アイコンつきリンク↓ */

.l_flex_btn {
 width: 75%;
 margin-inline: auto;
 padding-bottom: 2%;
}

.menu {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.menu li {
 font-size: 0.8rem;
 padding: 0.5em;
}

.menu li a {
 display: flex;
 align-items: center;
}

.menu li a::before {
 content: "";
 display: block;
 width: 1em;
 height: 1em;
 background-position: center;
 background-repeat: no-repeat;
 background-size: contain;
 margin-right: 0.5em;
}

/* ↓アイコン設定↓ */
.icon_01::before {
 background-image: url("../images/icon/icon_01.webp");
}

.icon_02::before {
 background-image: url("../images/icon/icon_02.webp");
}

.icon_03::before {
 background-image: url("../images/icon/icon_03.webp");
}

.icon_04::before {
 background-image: url("../images/icon/icon_04.webp");
}

.icon_05::before {
 background-image: url("../images/icon/icon_05.webp");
}

.icon_06::before {
 background-image: url("../images/icon/icon_06.webp");
}

.icon_07::before {
 background-image: url("../images/icon/icon_07.webp");
}



/* ///// component ///////////////////////////////// */
/**** 準備中 ****/
.c_reserve {
 display: flex;
 position: relative;
}

.c_reserve::after {
 display: flex;
 position: absolute;
 top: 50%;
 left: 50%;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: var(--c-prim-con);
 color: var(--c-prim);
 content: "準備中";
 letter-spacing: 0.3em;
 font-weight: bold;
 font-size: 2em;
 transform: translate(-50%, -50%);
}

@media (max-width: 769px) {
 .c_reserve::after {
  font-size: 1em;
 }
}

.c_reserve a {
 filter: brightness(0.4);
}

.c_reserve-b {
 position: relative;
}

.c_reserve-b::after {
 display: flex;
 position: absolute;
 top: 50%;
 left: 50%;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: var(--c-prim-con);
 color: var(--c-prim);
 content: "準備中";
 letter-spacing: 0.1em;
 font-weight: bold;
 font-size: 1em;
 transform: translate(-50%, -50%);
}

@media (max-width: 769px) {
 .c_reserve-b::after {
  font-size: 0.7em;
 }
}

/**** text-align ****/
.p_text_c {
 text-align: center;
}

/**** font-size ****/
.p_text_s {
 font-size: clamp(8px, 1vw, 14px);

}

.p_text_m {
 font-size: clamp(9px, 1.8vw, 25px);
}

.p_text_m {
 font-size: clamp(10px, 2vw, 27px);
}



/* ///// project ///////////////////////////////// */

/**** allmenu ****/
.p_allmenu {
 padding: 2% 0 5%;
 text-align: center;
}

.p_allmenu h2 {
 margin: 5% auto;
 width: fit-content;
 word-break: keep-all;
 margin-inline: auto;
 border: solid 2px #dae021;
 padding: 0.5em 1em;
 font-size: max(1.7vw, 18px);
 font-weight: bold;
}

.l_flex_circre a:has(.p_allmenu_disable) {
 pointer-events: none;
 position: relative;

 img {
  filter: brightness(50%);
 }
}

.p_allmenu_disable {
 width: 100%;
 height: 85%;
 left: 0;
 bottom: 0;
 display: flex;
 position: absolute;
 color: #fff;
 font-weight: bold;
 justify-content: center;
 align-items: center;
 font-size: clamp(11px, 7vw, 36px);
 letter-spacing: 0.05em;
}


.p_schedule {
 background-color: #DDECD2;
 width: 100%;
 padding-bottom: 8%;
}

.p_schedule h2 {
 width: 50%;
 max-width: 180px;
 border: none;
 padding: 0;
}

.p_schedule h2 img {
 width: 100%;
}

@media (max-width: 769px) {
 .p_schedule h2 {
  width: 40%;
  padding: 3%;
 }
}

/**** circlemenu ****/
.p_circlemenu {
 display: flex;
 align-items: flex-end;
 flex-direction: column;
 padding-top: 2%;
 padding-bottom: 3%;
}

.p_circlemenu h2 {
 margin-right: 1%;
 margin-bottom: 2%;
 width: 25%;
}

/**** sammary ****/
.p_sammarybtn {
 display: flex;
 gap: 1.5%;
 position: absolute;
 top: 67%;
 width: 98%;
 left: 91%;
}

.p_sammarybtn a {
 width: 12%;
}

/**** participation 参加****/
.p_participationbtn {
 display: flex;
 gap: 1.5%;
}

.p_participationbtn .p_btn01 {
 position: absolute;
 width: 12%;
 top: 68%;
 right: 94%;
}

.p_participationbtn .p_btn02 {
 position: absolute;
 width: 12%;
 top: 68%;
 left: 46.6%;
}

.p_participationbtn a {
 width: 12%;
}

/**** campaign キャンペーン****/
.p_campaignbtn {
 position: absolute;
 top: 57%;
 left: 51%;
 width: 53%;
}

/**** carrying 搬入****/
.p_carryingbtn {
 position: absolute;
 top: 57%;
 left: -5%;
 width: 53%;
}

/**** link ****/
.p_link {
 padding: 5% 0;
}

/**** footer ****/

/* ↓footer上のリンク集↓ */

.l_flex_link {
 width: 80%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 margin-inline: auto;
 padding: 2%;
}

/* ↓住所の余白↓ */
.l_flex_link div:nth-child(2) {
 margin-left: 2rem;
 width: 36%;
 font-size: 0.8rem;
}

.l_flex_parent {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(2, 3vw);
 grid-gap: 1rem;
 width: 60%;
 align-items: baseline;
}

.l_flex_parent a {
 display: block;
 width: 100%;
 height: 100%;
}

.l_flex_parent img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.l_flex_parent a:nth-child(4) img {
 height: 85%;
}


@media (max-width: 768px) {
 .l_flex_link {
  padding-top: 3%;
  width: 90%;
  display: block;
  margin-inline: auto;
 }

 .l_flex_parent {
  width: 95%;
  grid-template: repeat(3, max-content) / repeat(2, 1fr);
  grid-row-gap: 1rem;
 }

 .l_flex_link div:nth-child(2) {
  margin: 2%;
  width: 100%;
  text-align: center;
 }

 .l_flex_parent a:nth-child(4) {
  grid-area: 1/2/2/3;
 }
}

.p_address {
 text-align: left;
}

.p_copylight {
 display: flex;
 align-items: center;
 flex-direction: column;
 font-size: 0.8rem;
 padding: 5% 0;
 background-color: var(--c-bg-foot);
}


/* ////////// nav //////////  */
/* color */
:root {
 --nav_bg: #DDECD2;
 --nav_clausearea: #24205667;
 --nav_color: #000000;
 --nav_shikiri: #d9e021;
}

/* チェックボックス非表示 */
#p_gnav_sp_trigger {
 display: none;
}

/* menu */
.l_gnav_wrap {
 width: 100%;
 background-color: var(--nav_bg);
}

.l_gnav_innner {
 display: flex;
 align-items: center;
 justify-content: center;
}

.l_gnav {
 padding: 1vw 0;
 width: 100%;
 display: block;
 padding: 1% 10%;
 background-color: #DDECD2;
}

.l_gnav div:nth-child(1) {
 display: flex;
 gap: 0 1.8%;
 flex-grow: 1;
 justify-content: space-between;
 padding-bottom: 2%;
}


.l_gnav div:nth-child(1) span {
 display: flex;
 align-items: center;
}

.l_gnav div:nth-child(1) span:nth-child(3) a {
 width: 100%;
 height: 100%;
}

.l_gnav div:nth-child(1) span:nth-child(3) a img {
 width: 100%;
 height: 88%;
 object-fit: contain;
}

.l_gnav_bottom {
 display: flex;
 align-items: flex-end;
 justify-content: space-evenly;
}

.l_gnav_bottom a {
 width: calc(100% / 7);
 padding: 0 0.5em;
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: max(1vw, 8px);
 font-weight: bold;
 justify-content: space-between;
}

.l_gnav_bottom .l_gnav_img {
 height: 6em;
 width: 6em;
 text-align: center;
 padding-bottom: 1em;
}

.l_gnav_bottom .l_gnav_img img {
 width: 84%;
 height: 100%;
 object-fit: contain;
 object-position: bottom;
}

.l_gnav a:hover {
 opacity: 0.5;
 transition: 0.3s;
}

.l_gnav img {
 max-width: 100%;
 max-height: 100%;
}

.l_nav_spbottom {
 display: none;
}

/* sp */
@media (max-width: 769px) {
 .l_gnav_wrap {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: initial;
  pointer-events: none;
 }

 .l_gnav_innner {
  display: block;
  position: sticky;
  top: 0;
  right: 0;
  width: 100vw;
  transition: 0.5s;
  pointer-events: auto;
 }

 /* sp */
 .l_gnav {
  display: flex;
  position: fixed;
  top: 0;
  left: 100%;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 40%;
  padding-top: 25%;
  width: 60%;
  height: 100%;
  overflow-y: auto;
  background-color: var(--nav_bg);
  transition: 0.5s;
  pointer-events: auto;
  padding: calc(45px + 3%) 3% 3%;
 }

 .l_gnav div:nth-child(1),
 .l_gnav div:nth-child(2) {
  display: none;
 }

 .l_gnav div:nth-child(1) a {
  width: 100%;
  padding: 1em 0;
  border-bottom: 1px solid #000;
 }

 .l_nav_spbottom {
  display: flex;
  align-items: center;
  flex-direction: column;
 }

 .l_gnav .l_nav_spbottom div:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  order: 1;
  padding-right: 0;
  width: 80%;
  max-width: 180px;
 }

 .l_gnav .l_nav_spbottom div:nth-child(1) {
  display: flex;
  flex-direction: column;
  order: 2;
  margin-top: 1em;
  width: 100%;
  align-items: center;
 }


 /* 閉じ状態 */
 .l_gnav_sp_headarea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  width: 100%;
  background-color: var(--nav_bg);
  transition: 0.5s;
 }

 #n_pagetop {
  padding-top: 40px;
 }

 /* ハンバーガーマーク */
 .p_gnav_sp_btn {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  height: 40px;
 }

 .p_gnav_sp_btn span,
 .p_gnav_sp_btn span::before,
 .p_gnav_sp_btn span::after {
  display: block;
  margin-right: 10px;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--nav_color);
  transition: 0.3s;
 }

 .p_gnav_sp_btn span::before,
 .p_gnav_sp_btn span::after {
  position: absolute;
  content: "";
 }

 .p_gnav_sp_btn span::before {
  top: 10px;
 }

 .p_gnav_sp_btn span::after {
  top: 28px;
 }

 /* 閉じるマーク */
 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .l_gnav_sp_head {
  opacity: 0;
 }

 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) :is(.l_gnav_sp_headarea, .p_gnav_sp_btn span) {
  background-color: initial;
 }

 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::before,
 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::after {
  top: 25px;
  right: 0;
 }

 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::before {
  transform: rotate(45deg);
 }

 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn span::after {
  transform: rotate(-45deg);
 }

 /* 閉じるマーク位置 */
 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .p_gnav_sp_btn {
  position: fixed;
  top: 0;
  right: 0;
  background-color: inherit;
 }

 /* 閉じるエリア */
 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .l_gnav_spclosearea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--nav_clausearea);
  opacity: 1;
  transition: 0.5s;
 }

 /* メニュー開閉アニメーション用 */
 .l_gnav_innner:has(#p_gnav_sp_trigger:checked) .l_gnav {
  left: 0;
 }
}


[id^=n_]:target {
 scroll-margin: min(9.8vw, 55px);
}

@media (max-width: 769px) {
 [id^=n_]:target {
  scroll-margin: 40px;
 }
}

/* /////////////////////////////////////////////////// */
/* topbtn */
.c_pagetop {
 display: flex;
 position: fixed;
 right: clamp(20px, 2vw, 50px);
 bottom: clamp(20px, 2vw, 50px);
 z-index: 90;
 box-sizing: border-box;
 width: clamp(60px, 6vw, 100px);
 height: clamp(60px, 6vw, 100px);
 border-radius: 9999px;
 background-color: #86ab02;
 color: #ffffff;
 font-weight: bold;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 line-height: 1.2;
 font-size: clamp(15px, 1.6vw, 25px);
}

.c_pagetop:before {
 content: "▲";
 display: block;
}

.c_pagetop:hover {
 opacity: 0.5;
 transition: 0.5s;
}

/* ///////////////////////モーダルウィンドウ×ボタン//////////////////////////// */

.lity-close {
 z-index: 9994;
 width: 50px;
 height: 50px;
 position: fixed;
 right: 0;
 top: 0;
 -webkit-appearance: none;
 cursor: pointer;
 text-decoration: none;
 text-align: center;
 padding: 0;
 color: #fff;
 font-style: normal;
 font-size: 50px;
 font-family: Arial, Baskerville, monospace;
 line-height: 35px;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 border: 0;
 background: none;
 outline: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}




/* ///// responsive ///////////////////////////////// */
.sp {
 display: none;
}

.pc {
 display: block;
}

.br_pc {
 display: block;
}

@media (max-width: 769px) {
 .sp {
  display: block;
 }

 .pc {
  display: none;
 }

 .br {
  display: block;
 }

 .br_pc {
  display: none;
 }
}