@charset "UTF-8";

/*==================================
common
==================================*/
body {
  color: #320000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.25em;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

a {
  color: #1558d6;
}

a:visited {
  color: #681da8;
}

.l-wrapper {
  width: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
  .l-wrapper {
    font-size: 1.6rem;
  }
}

.l-wrap {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

.l-wrap90 {
  width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .l-wrap90 {
    width: 100%;
  }
}

button {
  letter-spacing: 0.1em;
}

/*==================================
Utility
==================================*/
/* position */
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}

/* Text */
.u-strong {
  font-weight: 700;
}

.u-small {
  font-size: 90%;
}

.u-smaller {
  font-size: 60%;
}

.u-big {
  font-size: 110%;
}

.u-bigger {
  font-size: 140%;
}

.u-sup {
  font-size: 1.2rem;
  letter-spacing: 0;
}

/* adjustment */
.pc_none {
  display: none;
}
.pc_space {
  margin-left: 1em;
}

@media only screen and (max-width: 767px) {
  .pc_none {
    display: block;
  }
  .pc_space {
    margin: auto;
  }
}

/* Margin */
.u-mt0 {
  margin-top: 0 !important;
}
.u-mt20 {
  margin-top: 20px;
}
.u-mt40 {
  margin-top: 40px;
}
.u-mt60 {
  margin-top: 60px;
}
.u-mt80 {
  margin-top: 80px;
}
.u-mt100 {
  margin-top: 100px;
}
.u-mt120 {
  margin-top: 120px;
}
.u-mt160 {
  margin-top: 160px;
}

@media only screen and (max-width: 767px) {
  .u-mt20 {
    margin-top: 10px;
  }
  .u-mt40 {
    margin-top: 20px;
  }
  .u-mt60 {
    margin-top: 30px;
  }
  .u-mt80 {
    margin-top: 40px;
  }
  .u-mt100 {
    margin-top: 50px;
  }
  .u-mt120 {
    margin-top: 60px;
  }
  .u-mt160 {
    margin-top: 80px;
  }
}

/* Padding */
.u-pd80 {
  padding: 80px 0;
}
.u-pd120 {
  padding: 120px 0;
}
.u-pt120 {
  padding-top: 120px;
}
.u-pb120 {
  padding-bottom: 120px;
}

@media only screen and (max-width: 767px) {
  .u-pd80 {
    padding: 40px 0;
  }
  .u-pd120 {
    padding: 60px 0;
  }
  .u-pt120 {
    padding-top: 60px;
  }
  .u-pb120 {
    padding-bottom: 60px;
  }
}

/*==================================
Scrollin
==================================*/
.scrollin,
.scrollins__item {
  opacity: 0;
  transform: translate(0, 30px);
}

.scrollin.is-visible,
.scrollins__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*==================================
共通パーツ
==================================*/
.c-secTtl_box {
  text-align: center;
  position: relative;
  padding-bottom: 30px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  z-index: 1;
}
.c-secTtl {
  font-size: 4.8rem;
  line-height: 1.2;
}
.c-secTtl__sub {
  font-size: 2.4rem;
}
.c-secTtl_box::after {
  content: "";
  background: url(/kosodate/assets/images/sec_title.svg) no-repeat center/cover;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 240px;
  aspect-ratio: 100 / 23;
  z-index: -1;
}

@media only screen and (max-width: 767px) {
  .c-secTtl_box {
    padding-bottom: 20px;
  }
  .c-secTtl {
    font-size: 3rem;
  }
  .c-secTtl__sub {
    font-size: 1.6rem;
  }
  .c-secTtl_box::after {
    width: 160px;
  }
}

.sec-img::before {
  content: "";
  width: min(21%, 400px);
  aspect-ratio: 1;
  position: absolute;
}
.sec-img::after {
  content: "";
  width: min(10%, 240px);
  aspect-ratio: 4 / 3;
  position: absolute;
}
@media only screen and (max-width: 767px) {
  .sec-img::before {
    width: 240px;
  }
  .sec-img::after {
    width: 120px;
  }
}

.c-btn {
  width: min(100%, 320px);
  padding: 20px 30px;
  background: #ff9484;
  border-radius: 33px;
  font-weight: 700;
  line-height: 1;
}
.c-btn:hover {
  opacity: 0.7;
}

.c-btn__wh {
  background: #fff;
}

.font_zenmaru {
  font-family: "Zen Maru Gothic", serif;
}

.u-relative {
  position: relative;
}

.bg_cream {
  background-color: #fffaeb;
}
.bg_red {
  background-color: #ff644b;
}

.c-def > dt {
  font-size: 2.8rem;
  font-weight: 900;
}

@media only screen and (max-width: 767px) {
  .c-def > dt {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

/*==================================
header
==================================*/
.p-MainVisual {
  padding: 0 0 280px;
  margin-bottom: calc(-160px - 50px);
  position: relative;
}
@media only screen and (max-width: 767px) {
  .p-MainVisual {
    padding: 0 0 140px;
    margin-bottom: calc(-80px - 50px);
  }
}

.p-ttlWrap {
  width: max(23%, 240px);
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 767px) {
  .p-ttlWrap {
    width: 55%;
    top: 10%;
  }
}
.mv_wrap img {
  width: 100%;
}

/*==================================
outline
==================================*/
.p-outline__lead {
  font-weight: 900;
  font-size: 4.2rem;
  line-height: 2.4;
  display: inline;
  border-bottom: 10px dotted #ff634b;
  padding: 0 0.5rem;
}
@media only screen and (max-width: 767px) {
  .p-outline__lead {
    font-size: 2.8rem;
  }
}

/*==================================
navigation
==================================*/
.sec-img01::before {
  top: -5%;
  right: 11%;
  background: url(/kosodate/assets/images/sec_img01.png) no-repeat center/cover;
  z-index: 1;
}
.sec-img01::after {
  top: 3%;
  left: 28%;
  background: url(/kosodate/assets/images/sec_illust01.svg) no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .sec-img01 {
    padding-top: 100px;
  }
  .sec-img01::before {
    top: 6%;
  }
  .sec-img01::after {
    top: 2%;
    left: 5%;
  }
}

.bg_clip {
  position: relative;
  padding: 110px min(14%, 240px);
  max-width: 1680px;
  margin: 0 auto;
  margin-top: 50px;
}
.bg_clip::before {
  content: "";
  background: #ff644b;
  clip-path: polygon(33% 0, 93% 11%, 100% 52%, 86% 97%, 16% 100%, 0 80%, 4% 12%);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

.bg_navi {
  position: relative;
}
.bg_navi::before,
.bg_navi::after {
  content: "";
  width: max(26%, 260px);
  aspect-ratio: 25 / 43;
  position: absolute;
  top: 0;
  z-index: 1;
}
.bg_navi::before {
  background: url(/kosodate/assets/images/bg_navi01.png) no-repeat center/cover;
  left: 0;
}
.bg_navi::after {
  background: url(/kosodate/assets/images/bg_navi02.png) no-repeat center/cover;
  right: 0;
}
@media only screen and (max-width: 767px) {
  .bg_clip {
    padding: 60px 20px;
    margin-top: 180px;
  }
  .bg_clip::before {
    clip-path: polygon(73% 0%, 99% 11%, 100% 95%, 29% 100%, 0% 96%, 2% 12%, 12% 6%);
  }
  .bg_navi::before {
    left: 0;
  }
  .bg_navi::after {
    right: -14%;
  }
}

.tab {
  position: relative;
  z-index: 1;
}

.tab-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tab-list__item {
  background: #fffaeb;
  padding: 14px 0;
  text-align: center;
  border-radius: 30px 30px 0 0;
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .tab-list__item {
    font-size: 1.8rem;
  }
}

.tab-list__item[aria-selected="false"] {
  background: #320000;
  color: #fff;
}

.tab-list__item span {
  position: relative;
  padding-bottom: 18px;
}
.tab-list__item span::before {
  content: "";
  background: #320000;
  width: 130px;
  height: 4px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.tab-content {
  background: #fffaeb;
  padding: 40px 3.4%;
  border-radius: 0 0 20px 20px;
}

.tab-content[aria-hidden="true"] {
  display: none;
}

.search-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media only screen and (max-width: 1199px) {
  .search-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.search-list__item {
  position: relative;
  background: #ffffff;
  border-radius: 30px;
}
.search-list__item::before {
  content: "";
  width: 27%;
  aspect-ratio: 5 / 7;
  display: block;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.search-list__item--1::before {
  background: url(/kosodate/assets/images/age01.svg) no-repeat center/cover;
}
.search-list__item--2::before {
  background: url(/kosodate/assets/images/age02.svg) no-repeat center/cover;
}
.search-list__item--3::before {
  background: url(/kosodate/assets/images/age03.svg) no-repeat center/cover;
}
.search-list__item--4::before {
  background: url(/kosodate/assets/images/age04.svg) no-repeat center/cover;
}
.search-list__item--5::before {
  background: url(/kosodate/assets/images/age05.svg) no-repeat center/cover;
}
.search-list__item--6::before {
  background: url(/kosodate/assets/images/age06.svg) no-repeat center/cover;
}
.search-list__item--7::before {
  background: url(/kosodate/assets/images/service01.svg) no-repeat center/cover;
}
.search-list__item--8::before {
  background: url(/kosodate/assets/images/service02.svg) no-repeat center/cover;
}
.search-list__item--9::before {
  background: url(/kosodate/assets/images/service03.svg) no-repeat center/cover;
}
.search-list__item--10::before {
  background: url(/kosodate/assets/images/service04.svg) no-repeat center/cover;
}
.search-list__item--11::before {
  background: url(/kosodate/assets/images/service05.svg) no-repeat center/cover;
}
.search-list__item--12::before {
  background: url(/kosodate/assets/images/service06.svg) no-repeat center/cover;
}

.search-list__item a {
  text-align: center;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2rem;
  font-weight: 700;
  padding: 0 20px 0 calc(27% + 30px);
  transition: 0.4s;
  color: #320000;
  text-decoration: none;
}

.search-list__item a span {
  border-bottom: 4px solid #ff644b;
  width: 140px;
}

@media only screen and (max-width: 767px) {
  .search-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .search-list__item::before {
    width: 50px;
  }
  .search-list__item a {
    height: 80px;
    padding: 0 20px 0 calc(10% + 50px);
  }
}

/*==================================
news
==================================*/
.bg_news {
  position: relative;
}
.bg_news::before {
  content: "";
  background: url(/kosodate/assets/images/bg_news.png) no-repeat top center/contain;
  width: min(100%, 1920px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.sec-img02::before {
  top: -15%;
  left: 10%;
  background: url(/kosodate/assets/images/sec_img02.png) no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .sec-img02 {
    padding-top: 180px;
  }
  .sec-img02::before {
    top: -2%;
    left: 8%;
  }
}

.c-newsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;
  position: relative;
}
.c-newsList_item_box {
  background: #fffaeb;
  padding: 40px;
  border-radius: 0 80px 0 80px;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .c-newsList {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .c-newsList_item_box {
    padding: 20px;
    border-radius: 0 40px 0 40px;
  }
}

/*==================================
place to play
==================================*/
.sec-img03::after {
  top: -5%;
  right: 25%;
  background: url(/kosodate/assets/images/sec_illust02.svg) no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .sec-img03::after {
    top: -3%;
    right: 5%;
  }
}

.bg_play {
  position: relative;
}
.bg_play::before {
  content: "";
  background: url(/kosodate/assets/images/bg_play.png) no-repeat center/cover;
  width: min(100%, 1920px);
  height: 105%;
  position: absolute;
  top: -3%;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .bg_play::before {
    background: url(/kosodate/assets/images/bg_play.png) left/contain;
  }
}

.c-play_link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5vw;
}

.c-play_link__item {
  position: relative;
  padding-top: calc(75% + 40px);
}
.c-play_link__item::before {
  content: "";
  width: 100%;
  aspect-ratio: 550 / 413;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 60px;
}
.play01::before {
  background: url(/kosodate/assets/images/play01.jpg) no-repeat center/cover;
}
.play02::before {
  background: url(/kosodate/assets/images/play02+.jpg) no-repeat center/cover;
}

@media only screen and (max-width: 767px) {
  .c-play_link {
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
  .c-play_link__item {
    padding-top: calc(75% + 20px);
  }
}

/*==================================
event info
==================================*/
.sec-img04::before {
  top: -5%;
  right: 10%;
  background: url(/kosodate/assets/images/sec_img03.png) no-repeat center/cover;
}
.sec-img04::after {
  top: 5%;
  left: 21%;
  background: url(/kosodate/assets/images/sec_illust03.svg) no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .sec-img04 {
    padding-top: 200px;
  }
  .sec-img04::before {
    top: -1%;
    right: 4%;
  }
  .sec-img04::after {
    top: 7%;
    left: 8%;
  }
}

.bg_event {
  position: relative;
}
.bg_event::before {
  content: "";
  background: url(/kosodate/assets/images/bg_event.png) no-repeat center/cover;
  width: min(100%, 1920px);
  height: 100%;
  position: absolute;
  top: 2%;
  left: 0;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .bg_event::before {
    background: url(/kosodate/assets/images/bg_event.png) repeat center/contain;
  }
}

.c-eventList {
  display: grid;
  gap: 40px;
}
.c-eventList_item {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: 20px 60px;
}
.c-eventList_item:nth-child(even) {
  direction: rtl;
}
.c-eventList_item .c-def:nth-child(even) {
  direction: ltr;
}

@media only screen and (max-width: 767px) {
  .c-eventList_item {
    grid-template-columns: 1fr;
  }
  .c-eventList_item > figure {
    text-align: center;
  }
}

/*==================================
footer copy
==================================*/
.bg_copy {
  background: url(/kosodate/assets/images/footer_img.jpg) no-repeat center/cover;
  width: 100%;
  aspect-ratio: 3 / 1;
}
@media only screen and (max-width: 767px) {
  .bg_copy {
    height: 300px;
  }
}

.sec-img05::after {
  top: -15%;
  right: 22%;
  background: url(/kosodate/assets/images/sec_illust04.svg) no-repeat center/cover;
}
@media only screen and (max-width: 767px) {
  .sec-img05::after {
    top: -15%;
    right: 4%;
  }
}

.bg_copy .l-wrap {
  position: relative;
  height: 100%;
}

.c-copy {
  font-size: max(2.5vw, 2.6rem);
  font-weight: 900;
  position: absolute;
  right: 0;
  bottom: 10%;
}
.c-copy span {
  background: #fff;
}

/*==================================
footer
==================================*/
.footer_inr {
  padding: 60px 0 10px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .footer_inr {
    padding: 40px 0 120px;
  }
}
.footer_logo {
  width: 200px;
  display: inline-block;
}

/* pagetop */
#page_top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 10;
}
#page_top a {
  display: block;
  width: 90px;
  aspect-ratio: 55 / 71;
}
@media only screen and (max-width: 767px) {
  #page_top {
    right: 20px;
    bottom: 20px;
  }
  #page_top a {
    width: 60px;
  }
}