@charset "UTF-8";

/* =========================================================
  top
========================================================= */

/* layout
----------------------------------------------- */
#container {
  background: none;
}

#container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ac-color-pink-5);
  z-index: -3;
}

#pageHeader {
  margin-bottom: 0;
}

#pageHeader::before,
#pageHeader::after {
  display: none;
}

#pageFooter {
  margin-top: 17vw !important;
}

/* headMenu
----------------------------------------------- */
@media only screen and (min-width: 835px) {
  #headMenu {
    padding-bottom: 20px;
  }
}

/* globalNavi
----------------------------------------------- */
#globalNavi {
  display: none;
}

/* mainVisual
----------------------------------------------- */
#mainVisual {
  position: relative;
  max-width: 1210px;
  margin: -6px auto 20px;
  padding: 0 15px;
  pointer-events: none;
}

#mainVisual::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -33%;
  bottom: 0;
  left: -18%;
  z-index: -2;
  background:
   url(/_themes/kosodate/site/images/liquid-shape01.svg) left 23% / 22% auto no-repeat,
   url(/_themes/kosodate/site/images/liquid-shape01.svg) right top / 22% auto no-repeat;
}

#mainVisual::after {
  content: "";
  position: absolute;
  top: -5%;
  right: -9%;
  bottom: 0;
  left: -10%;
  z-index: -1;
  background:
   url(/_themes/kosodate/site/images/bg-blue_purple.png) left top / 18% auto no-repeat,
   url(/_themes/kosodate/site/images/bg-purple.png) right 20px top 14% / 19% auto no-repeat;
  mix-blend-mode: multiply;
}

#mainVisual .pieceContainer::before {
  content: "";
  position: absolute;
  top: 0;
  right: -21%;
  bottom: -26%;
  left: -21%;
  z-index: -2;
  background:
   url(/_themes/kosodate/site/images/liquid-shape02.svg) left 0 bottom 5% / 24% auto no-repeat,
   url(/_themes/kosodate/site/images/liquid-shape02.svg) right bottom / 24% auto no-repeat;
}

#mainVisual .pieceContainer::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5.5%;
  bottom: -1.5%;
  left: -3%;
  z-index: 1;
  background:
   url(/_themes/kosodate/site/images/bg-green.png) left bottom / 13% auto no-repeat,
   url(/_themes/kosodate/site/images/bg-pink.png) right bottom / 15% auto no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

#mainVisual .pieceBody {
  mask-image: url(/_themes/kosodate/site/images/keyvisual-frame.svg);
  mask-position: center;
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  aspect-ratio: 2/1;
}

@media only screen and (max-width: 834px) {
  #mainVisual {
    margin-bottom: 0;
  }
}

/* block news
----------------------------------------------- */
.block.news {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px 28px;
  position: relative;
  padding: min(130px,8vw) 0 20px;
}

.block.news::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  aspect-ratio: 1440/250;
  background: url(/_themes/kosodate/site/images/wave-purple.svg) center top / 100% auto no-repeat;
}

.block.news::after {
  content: "";
  position: absolute;
  top: 17vw;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--ac-color-purple-3);
}

@media only screen and (max-width: 834px) {
  .block.news {
    gap: 30px;
  }
}

/* docTab
----------------------------------------------- */
#docTab {
  flex-grow: 1;
  flex-basis: 510px;
  max-width: 892px;
}

#docTab .tabs ul {
  display: flex;
  gap: 8px;
  padding: 20px 16px 0;
  border-bottom: 2px solid var(--ac-color-purple-1);
  border-radius: 8px 8px 0 0;
  background: var(--ac-color-purple-2);
}

#docTab .tabs li {
  flex: 1 1 0;
}

#docTab .tabs li a {
  display: block;
  position: relative;
  height: 100%;
  padding: 14px 5px;
  border-radius: 8px 8px 0 0;
  background: #FFF9F3;
  color: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: center;
}

#docTab .tabs li.current a {
  background: var(--mono-color-9);
}

#docTab .tabs li a::before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0 0 -2px 0;
  border: 2px solid var(--ac-color-purple-1);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

#docTab .tabs li a:hover::before,
#docTab .tabs li.current a::before {
  opacity: 1;
}

#docTab .tabs li.current a::before {
  border-bottom-color: var(--mono-color-9);
}

#docTab .wrapper {
  padding: 10px 16px 28px;
  border-radius: 0 0 8px 8px;
  background: var(--mono-color-9);
}

#docTab .content {
  margin-bottom: 24px;
}

#docTab .content li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px dotted var(--mono-color-7);
  color: inherit;
}

#docTab .content li a .update_date {
  color: #676767;
}

#docTab .content li a:hover .title {
  text-decoration: underline;
}

#docTab .links > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#docTab .more {
  flex-grow: 1;
  max-width: 228px;
}

#docTab .more a {
  display: block;
  position: relative;
  padding: 10px 32px 10px 48px;
  border: 1px solid var(--ac-color-purple-1);
  border-radius: 4px;
  background:
   url(/_themes/kosodate/site/images/ic-more.svg) 16px center no-repeat,
   url(/_themes/kosodate/site/images/arrow-calendar.svg) right 10px center no-repeat;
  color: inherit;
  text-align: center;
}

#docTab .more a::before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: -1px;
  border: 2px solid var(--ac-color-purple-1);
  border-radius: 4px;
  transition: opacity 0.25s ease-in-out;
}

#docTab .more a:hover::before {
  opacity: 1;
}

@media only screen and (max-width: 834px) {
  #docTab {
    flex-basis: 100%;
  }

  #docTab .tabs ul {
    padding: 20px 8px 0;
  }

  #docTab .tabs li a {
    font-size: 1rem;
  }

  #docTab .wrapper {
    padding: 10px 10px 24px;
  }

  #docTab .more {
    max-width: 150px;
  }
}

/* calendarFrame
----------------------------------------------- */
#calendarFrame {
  flex-grow: 1;
  flex-basis: 662px;
  max-width: 892px;
  border-radius: 8px;
}

/* purpose
----------------------------------------------- */
#purpose {
  position: relative;
  padding: min(150px,9vw) 0 20px;
}

#purpose::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  aspect-ratio: 1440/223;
  background: url(/_themes/kosodate/site/images/wave-white_yellow.svg) center top / 100% auto no-repeat var(--ac-color-purple-3);
}

#purpose::after {
  content: "";
  position: absolute;
  top: 15vw;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--mono-color-9);
}

#purpose .pieceHeader {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

#purpose .pieceHeader h2 {
  padding: 0 90px;
  background:
   url(/_themes/kosodate/site/images/tl-left.svg) left center no-repeat,
   url(/_themes/kosodate/site/images/tl-right.svg) right center no-repeat;
  font-weight: 700;
  font-size: 2rem;
}

#purpose ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

#purpose li {
  flex-basis: 276px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  min-height: 276px;
  padding: 17px 28px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

#purpose li .img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 172px;
  aspect-ratio: 172/178;
  background: url(/_themes/kosodate/site/images/mokuteki/bg-mokuteki.svg) center center / cover no-repeat;
}

#purpose li a {
  color: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 1px  1px 0 #fff, -1px  1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

#purpose li a::before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: -1px;
  border: 4px solid;
  border-radius: 8px;
  background: none !important;
  transition: opacity 0.25s ease-in-out;
}

#purpose li:hover a::before {
  opacity: 1;
}

#purpose li a span {
  display: block;
  padding-top: 3px;
  font-weight: 400;
  font-size: 1rem;
}

#purpose li.ninshin-mukete {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-ninshin.svg);
  background-color: #FFE2EA;
}

#purpose li.ninshin-mukete img {
  transform: scale(1.25);
}

#purpose li.ninshin-mukete a::before {
  border-color: #F5B2C6;
}

#purpose li.ninshin-shussan {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-syusan.svg);
  background-color: #FFEEB3;
}

#purpose li.ninshin-shussan img {
  transform: scale(1.3);
}

#purpose li.ninshin-shussan a::before {
  border-color: #E4CA71;
}

#purpose li.kenshin-iryo {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-kenshin.svg);
  background-color: #DFF5FB;
}

#purpose li.kenshin-iryo img {
  transform: scale(1.3);
}

#purpose li.kenshin-iryo a::before {
  border-color: #96C6D3;
}

#purpose li.teate-josei {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-hoiku.svg);
  background-color: #EDF2B6;
}

#purpose li.teate-josei img {
  transform: scale(1.3);
}

#purpose li.teate-josei a::before {
  border-color: #C7CE7C;
}

#purpose li.kyoshitsu-sodan {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-soudan.svg);
  background-color: #EAE0F2;
}

#purpose li.kyoshitsu-sodan img {
  transform: scale(1.3);
}

#purpose li.kyoshitsu-sodan a::before {
  border-color: #CEB5E4;
}

#purpose li.asobu-manabu {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-asobu.svg);
  background-color: #E3F4C6;
}

#purpose li.asobu-manabu img {
  transform: scale(1.2);
}

#purpose li.asobu-manabu a::before {
  border-color: #B4D77D;
}

#purpose li.bosai-keikaku {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-bosai.svg);
  background-color: #FEE5D3;
}

#purpose li.bosai-keikaku img {
  transform: scale(1.3);
  transform-origin: 38% 60%;
}

#purpose li.bosai-keikaku a::before {
  border-color: #F3B78A;
}

#purpose li.tennyu-tenshutsu {
  background-image: url(/_themes/kosodate/site/images/mokuteki/arrow-tennyu.svg);
  background-color: #D7F3EA;
}

#purpose li.tennyu-tenshutsu img {
  transform: scale(1.3);
  transform-origin: center 62%;
}

#purpose li.tennyu-tenshutsu a::before {
  border-color: #9BD3CB;
}

@media only screen and (max-width: 834px) {
  #purpose {
    padding-top: 10vw;
  }

  #purpose .pieceHeader {
    margin-bottom: 20px;
  }

  #purpose .pieceHeader h2 {
    font-size: 1.625rem;
  }

  #purpose ul {
    gap: 13px;
  }

  #purpose li {
    flex-basis: calc((100% - 13px) / 2);
    min-height: 0;
    padding: 10px 5px 30px;
  }

  #purpose li .img {
    max-width: 112px;
  }

  #purpose li a {
    font-size: max(1rem,3vw);
  }

  #purpose li a span {
    font-size: max(0.875rem,2vw);
  }

  #purpose li.kenshin-iryo,
  #purpose li.teate-josei {
    padding-bottom: 10px;
  }
}

/* relationBanner
----------------------------------------------- */
#relationBanner {
  max-width: 1230px;
  margin: 0 auto 40px;
  padding: 0 15px;
}

#relationBanner ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px;
  background: var(--mono-color-9);
}

#relationBanner li {
  flex-basis: 240px;
}

#relationBanner a {
  display: block;
  transition: opacity 0.25s ease-in-out;
}

#relationBanner a:hover {
  opacity: 0.7;
}

@media only screen and (max-width: 834px) {
  #relationBanner {
    max-width: 300px;
    margin-bottom: 20px;
  }
}