@charset "UTF-8";

/* =========================================================
  promotion
========================================================= */

/* loading
----------------------------------------------- */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #00a0e9;
}

#loading img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* site layout
----------------------------------------------- */
body[id^="page-promotion"], #container, #main, #content {
  background: none !important;
  pointer-events: none;
}

#content > * {
  pointer-events: auto;
}

#pageHeader {
  position: fixed;
}

#main {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#pageFooter {
  pointer-events: auto;
}

/* mainVisual
----------------------------------------------- */
#mainVisual {
  position: relative;
  margin-bottom: 60px;
}

#mainVisual::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

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

/* noticeSlider
----------------------------------------------- */
#noticeSlider .slick-slider {
  min-width: 0;
}

#noticeSlider .slick-track {
  display: flex;
}

#noticeSlider .slick-slide {
  height: auto;
  padding: 0 10px;
}

#noticeSlider .slick-slide li {
  vertical-align: bottom;
}

#noticeSlider .slick-slide a {
  outline-offset: -4px;
  transition: opacity 0.25s ease-in-out;
}

#noticeSlider .slick-slide a:hover {
  opacity: 0.6;
}

#noticeSlider .slick-prev {
  left: 1vw;
}

#noticeSlider .slick-next {
  right: 1vw;
}

#noticeSlider .slick-btn-wrapper {
  position: relative;
  padding-top: 18px;
}

#noticeSlider .slick-btn-wrapper::before {
  content: "";
  position: absolute;
  top: -5.1vw;
  left: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1600/282;
  background: url(/_themes/site/images/promotion/bg-map_top.svg) center bottom / 100% auto no-repeat;
  pointer-events: none;
}

#noticeSlider .slick-btn-wrapper .slick-btn {
  justify-content: flex-end;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
}

@media only screen and (max-width: 767px) {
  #noticeSlider .slick-btn-wrapper::before {
    top: 0;
    background-size: 140% auto;
  }
}

@media only screen and (max-width: 535px) {
  #noticeSlider .slick-slide {
    padding: 0 30px;
  }

  #noticeSlider .slick-prev {
    left: 12px;
  }

  #noticeSlider .slick-next {
    right: 12px;
  }

  #noticeSlider .slick-btn-wrapper {
    padding-top: 7px;
  }

  #noticeSlider .slick-btn-wrapper .slick-btn {
    padding: 0 30px;
  }
}

/* cityMap
----------------------------------------------- */
#cityMap {
  position: relative;
  z-index: -2;
  margin-bottom: 65px;
  padding-top: 5.1vw;
  padding-bottom: 1.5vw;
  background: #bbe2f1 !important;
}

#cityMap::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  aspect-ratio: 1600/170;
  background: url(/_themes/site/images/promotion/bg-map_bottom.svg) center top / 100% auto no-repeat;
  pointer-events: none;
}

#cityMap img {
  width: 100%;
  transition: opacity 0.25s ease-in-out;
}

#cityMap img:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  #cityMap {
    min-height: 80vw;
    margin-bottom: 10px;
  }

  #cityMap::before {
    background-size: 140% auto;
  }

  #cityMap img {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 125%;
    max-width: none;
  }
}

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

#introMenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 35px;
}

#introMenu li {
  text-align: center;
}

#introMenu a {
  transition: opacity 0.25s ease-in-out;
}

#introMenu a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  #introMenu ul {
    gap: 35px 15px;
  }

  #introMenu li {
    flex-basis: calc((100% - 30px) / 3);
  }
}

@media only screen and (max-width: 534px) {
  #introMenu {
    padding: 0 10px;
  }
}

/* narutoyaken
----------------------------------------------- */
#narutoyaken {
  position: relative;
  background: #f2eeeb;
}

#narutoyaken::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  transform: scale(-1, -1);
  width: 100%;
  aspect-ratio: 1600/170;
  background: url(/_themes/site/images/promotion/bg-map_bottom.svg) center top / 100% auto no-repeat;
}

#narutoyaken .pieceContainer {
  position: relative;
  max-width: 1230px;
  margin: 0 auto 125px;
  padding: 8% 15px 30px;
}

#narutoyaken h2 {
  margin-bottom: 25px;
  max-width: 273px;
  aspect-ratio: 273/80;
  background: url(/_themes/site/images/promotion/tl-naruto.svg) left top / cover no-repeat !important;
  font-size: 0;
}

#narutoyaken ul {
  display: flex;
  gap: 3.33%;
}

#narutoyaken li {
  flex-basis: 22.5%;
  text-align: center;
}

#narutoyaken li a {
  transition: opacity 0.25s ease-in-out;
}

#narutoyaken li a:hover {
  opacity: 0.6;
}

#narutoyaken .more {
  display: flex;
  justify-content: center;
  padding-top: 44px;
}

#narutoyaken .more a {
  padding: 10px 65px 10px 60px;
  border: 1px solid #604c3f;
  border-radius: 4px;
  background: url(/_themes/site/images/promotion/ic-button01.svg) right 10px center no-repeat #604c3f;
  color: var(--mono-color-9);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

#narutoyaken .more a:hover {
  background-image: url(/_themes/site/images/promotion/ic-button02.svg);
  background-color: var(--mono-color-9);
  color: #604c3f;
}

@media only screen and (max-width: 767px) {
  #narutoyaken {
    margin-top: 20px;
  }

  #narutoyaken::before {
    background-size: 140% auto;
  }

  #narutoyaken .pieceContainer {
    margin-bottom: 35px;
    padding-top: max(5%,40px);
  }

  #narutoyaken h2 {
    height: 60px;
  }

  #narutoyaken ul {
    gap: 35px;
    margin-right: -15px;
    padding-right: 15px;
    padding-bottom: 15px;
    overflow-y: hidden;
  }

  #narutoyaken ul::-webkit-scrollbar {
    height: 4px;
  }

  #narutoyaken ul::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  #narutoyaken ul::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  #narutoyaken li {
    flex-shrink: 0;
    flex-basis: 240px;
  }

  #narutoyaken .more {
    padding-top: 15px;
  }
}

/* parenting, emigration
----------------------------------------------- */
#parenting,
#emigration {
  position: relative;
  max-width: 1230px;
  margin: 0 auto;
  padding: 54px 15px 0;
}

#parenting::before,
#emigration::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: 50vw;
  height: 415px;
}

#parenting .box,
#emigration .box {
  display: flex;
  justify-content: space-between;
}

#parenting .box .txt,
#emigration .box .txt {
  flex-basis: 43.4%;
}

#parenting .box h2,
#emigration .box h2 {
  margin-bottom: 35px;
}

#parenting .box p,
#emigration .box p {
  line-height: 2;
}

#parenting .box .btn,
#emigration .box .btn {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

#parenting .box .btn a,
#emigration .box .btn a {
  padding: 10px 15px;
  border: 1px solid #604c3f;
  border-radius: 4px;
  background-color: #604c3f;
  color: var(--mono-color-9);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

#parenting .box .btn a:hover,
#emigration .box .btn a:hover {
  background-color: var(--mono-color-9);
  color: #604c3f;
}

#parenting .box .btn a, #emigration .box .btn a[target="_blank"] {
  padding-right: 40px;
  background-image: url(/_themes/site/images/promotion/ic-targetblank01.svg);
  background-position: right 20px center;
  background-repeat: no-repeat;
}

#parenting .box .btn a[target="_blank"]:hover,
#emigration .box .btn a[target="_blank"]:hover {
  background-image: url(/_themes/site/images/promotion/ic-targetblank02.svg);
}

#parenting .box .img,
#emigration .box .img {
  flex-basis: 48.4%;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #parenting,
  #emigration {
    padding-top: 0;
  }

  #parenting::before,
  #emigration::before {
    top: unset;
    bottom: 10%;
    height: 65vw;
  }

  #parenting .box,
  #emigration .box {
    display: block;
  }

  #parenting .box h2,
  #emigration .box h2 {
    margin-bottom: 20px;
  }

  #parenting .box h2 img,
  #emigration .box h2 img {
    height: 60px;
  }

  #parenting .box .btn,
  #emigration .box .btn {
    margin-bottom: 20px;
  }
}

/* parenting
----------------------------------------------- */
#parenting {
  margin-bottom: 200px;
}

#parenting::before {
  left: 83%;
  background-color: #ffe3db;
}

@media only screen and (max-width: 767px) {
  #parenting {
    margin-bottom: 40px;
  }

  #parenting::before {
    left: 65%;
  }
}

/* emigration
----------------------------------------------- */
#emigration {
  margin-bottom: 100px;
}

#emigration::before {
  right: 83%;
  background-color: #e5f2c4;
}

#emigration .box {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 767px) {
  #emigration {
    margin-bottom: 40px;
  }

  #emigration::before {
    right: 65%;
  }
}

/* column-block sns
----------------------------------------------- */
.column-block.sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px 32px;
  max-width: 1230px;
  margin: 0 auto 115px;
  padding: 0 15px;
}

.column-block.sns h2 {
  margin-bottom: 20px;
  font-size: 0;
}

@media only screen and (max-width: 767px) {
  .column-block.sns {
    gap: 30px;
    margin-bottom: 40px;
  }

  .column-block.sns h2 {
    height: 60px;
  }
}

/* youtube
----------------------------------------------- */
#youtube {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 63.4%;
}

#youtube h2 {
  max-width: 244px;
  aspect-ratio: 244/80;
  background: url(/_themes/site/images/promotion/tl-youtube.svg) left top / cover no-repeat !important;
}

#youtube iframe {
  width: 100%;
}

#youtube .more {
  display: flex;
  justify-content: center;
  padding: 40px 0 25px;
}

#youtube .more a {
  padding: 10px 65px 10px 60px;
  border: 1px solid #604c3f;
  border-radius: 4px;
  background: url(/_themes/site/images/promotion/ic-button01.svg) right 10px center no-repeat #604c3f;
  color: var(--mono-color-9);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

#youtube .more a:hover {
  background-image: url(/_themes/site/images/promotion/ic-button02.svg);
  background-color: var(--mono-color-9);
  color: #604c3f;
}

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

  #youtube .more {
    padding-top: 20px;
  }
}

/* event
----------------------------------------------- */
#event {
  flex-basis: 380px;
  min-width: 0;
}

#event .pieceContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#event h2 {
  max-width: 194px;
  aspect-ratio: 194/80;
  background: url(/_themes/site/images/promotion/tl-event.svg) left top / cover no-repeat !important;
}

#event .pieceBody {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 25px;
  background: #fff3da;
}

#event .calendarEvents {
  max-width: 100%;
  margin: auto;
}

#event .calendarEvents table,
#event .calendarEvents table thead,
#event .calendarEvents table tbody,
#event .calendarEvents table tr,
#event .calendarEvents table th,
#event .calendarEvents table td {
  display: block;
}

#event .calendarEvents .image {
  margin-bottom: 10px;
}

#event .calendarEvents .image img {
  width: auto;
}

#event .calendarEvents .title_link {
  margin-bottom: 10px;
  font-size: 1.125rem;
}

#event .calendarEvents .date > span {
  display: inline-block;
  margin-bottom: 5px;
  padding: 4px 9px;
  border: 1px solid var(--mono-color-0);
  font-size: 0.875rem;
  line-height: 1;
}

#event .calendarEvents .date p span {
  display: block;
  text-align: center;
}

#event .calendarEvents .date:has(p:nth-of-type(2)) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  overflow-y: hidden;
}

#event .calendarEvents .date:has(p:nth-of-type(2))::-webkit-scrollbar {
  height: 4px;
}

#event .calendarEvents .date:has(p:nth-of-type(2))::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#event .calendarEvents .date:has(p:nth-of-type(2))::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

#event .calendarEvents .date:has(p:nth-of-type(2)) > * {
  flex-shrink: 0;
}

#event .calendarEvents .date:has(p:nth-of-type(2)) > p + p::before {
  content: "/";
  margin-right: 10px;
}

#event .calendarEvents .date:has(p:nth-of-type(2)) > p span {
  display: inline;
}

#event .slick-track {
  display: flex;
  align-items: center;
}

#event .slick-arrow {
  width: 30px;
  height: 30px;
}

#event .slick-prev {
  left: -15px;
}

#event .slick-next {
  right: -15px;
}

#event .slick-btn-wrapper {
  padding-top: 18px;
}

#event .links {
  margin: auto auto 0;
  padding-top: 10px;
}

#event .links a {
  display: block;
  padding: 10px 40px 10px 55px;
  border: 1px solid #604c3f;
  border-radius: 4px;
  background: url(/_themes/site/images/promotion/ic-event01.svg) 19px center no-repeat #604c3f;
  color: var(--mono-color-9);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

#event .links a:hover {
  background-image: url(/_themes/site/images/promotion/ic-event02.svg);
  background-color: var(--mono-color-9);
  color: #604c3f;
}

@media only screen and (max-width: 767px) {
  #event {
    flex-basis: 100%;
    margin: 0 -15px;
  }

  #event .pieceBody {
    margin: 0 -15px;
  }
}

/* column-block goods
----------------------------------------------- */
.column-block.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px 27px;
  position: relative;
  max-width: 1230px;
  margin: 0 auto 115px;
  padding: 0 15px;
}

.column-block.goods::before {
  content: "";
  position: absolute;
  top: 0;
  left: 83%;
  z-index: -1;
  width: 50vw;
  height: 415px;
  background-color: #d6ecff;
}

.column-block.goods .piece {
  flex: 1 1 400px;
}

.column-block.goods h2 {
  margin-bottom: 20px;
  font-size: 0;
}

#goods h2 {
  max-width: 394px;
  background: url(/_themes/site/images/promotion/tl-nyaruhige.svg) left top / cover no-repeat !important;
  aspect-ratio: 394/80;
}

#furusato h2 {
  max-width: 310px;
  aspect-ratio: 310/80;
  background: url(/_themes/site/images/promotion/tl-furusato.svg) left top / cover no-repeat !important;
}

.column-block.goods .banner {
  text-align: center;
}

.column-block.goods .banner ~ .banner {
  margin-top: 20px;
}

.column-block.goods a {
  transition: opacity 0.25s ease-in-out;
}

.column-block.goods a:hover {
  opacity: 0.6;
}

.column-block.goods img {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .column-block.goods {
    gap: 30px;
    margin-bottom: 40px;
  }

  .column-block.goods h2 {
    height: 60px;
  }

  .column-block.goods::before {
    top: unset;
    bottom: -5%;
    left: 65%;
    height: 46vw;
  }
}