@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 1100px) {
  html { scroll-behavior: smooth; scroll-padding-top: 105px; }
  .l-content { overflow: visible; }
}
@media screen and (max-width: 750px) {
  html { scroll-behavior: smooth; scroll-padding-top: 15vw; }
}

/* Common*/
#crayon2026 { font-family: -apple-system, BlinkMacSystemFont, Roboto, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; width: min(100%,750px); margin: 0 auto; }
#crayon2026 img { width: 100%; height: auto; }
#crayon2026 a img { cursor: pointer; }
.target {  }
#pc-bg { width: 100%; height: 100svh; position: absolute; background: url("../images/sky.jpg") no-repeat bottom center; background-size: cover; position: fixed; top: 0; left: 0; z-index: -1; }
#crayon2026 article { width: min(100%,750px); margin: 0 auto; position: relative; }
#skyblue { background: #7ECEF4; }
.inner-box { width: 86%; margin: 0 auto; border-radius: 2rem; }
@media screen and (max-width: 750px) {
  .inner-box { width: 92%; }
}

/* Side Area */
.side-area { width: calc((100% - 750px) / 2); height: 100svh; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; }
#side-left { left: 0; }
#side-right { right: 0; }
.side-area #side-image { width: min(90%,400px); margin: 0 auto; }
.side-area dl dt { width: min(90%,400px); margin: 0 auto; }
.side-area dl dd { width: 90%; margin: 0 auto; }
.side-area dl dd h3 { width: min(90%,300px); margin: 0 auto; padding: 2% 0 4% 0; }
.side-area dl dd ul { width: min(70%,240px); margin: 0 auto; }
.side-area dl dd ul li { padding-bottom: 0; }
.side-area dl dd ul li a { border-radius: .5rem; display: block; transition: 0s; cursor: pointer; }
.side-area dl dd ul li a span { display: none; visibility: hidden; }
.side-area dl dd ul li a:hover {  }
.side-area dl dd ul li a:hover strong { display: none; visibility: hidden; }
.side-area dl dd ul li a:hover span { display: block; visibility: visible; }
.side-area dl dd ul li#side-menu1.active a {}
.side-area dl dd ul li#side-menu2.active a strong, .side-area dl dd ul li#side-menu3.active a strong, .side-area dl dd ul li#side-menu4.active a strong, .side-area dl dd ul li#side-menu5.active a strong { display: none; visibility: hidden; }
.side-area dl dd ul li#side-menu2.active a span, .side-area dl dd ul li#side-menu3.active a span, .side-area dl dd ul li#side-menu4.active a span, .side-area dl dd ul li#side-menu5.active a span { display: block; visibility: visible; }
.side-area dl dd ul li a.active {  }
.side-item.hidden { opacity: 0; transition: opacity 0s; }
.side-item.show { opacity: 1; transition: opacity 0s; }
@media screen and (max-width: 1100px) {
  .side-area dl, .side-area div { width: 0; height: 0; display: none; visibility: hidden; }
}
@media screen and (max-width: 750px) {
  #pc-bg { width: 0; height: 0; display: none; visibility: hidden; }
}


/* Key Visual */
#keyvisual { width: 100%; height: 1100px; background: url("../images/key_bg.jpg") no-repeat center center; background-size: cover; }
#keyvisual #company { background: #FFF; }
#keyvisual #company ul { width: min(70%,190px); min-height: 55px; margin: 0 auto; padding: 3px 0; display: flex; align-items: center; justify-content: space-between; }
#keyvisual #company ul li { width: 20%; }
#keyvisual #company ul li:nth-child(2) { width: 40%; }
#key-box { width: 100%; height: 1045px; position: relative; overflow: hidden; }
#key-box img { min-height: 100%; object-fit: cover; }
@media screen and (max-width: 750px) {
  #keyvisual { height: 100svh; }
  #key-box { height: calc(100svh - 55px); }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #keyvisual { height: calc(100svh - 60px); }
  #key-box { height: calc(100svh - 115px); }
  #keyvisual h2 { width: 90%; padding: 3rem 0 1rem 0; }
  #keyvisual .shinchan { width: 100%; }
  #keyvisual h3 { width: 90%; }
}
@media only screen and (max-width: 440px) and (orientation: portrait) {
  #keyvisual { height: calc(82svh - 60px); }
  #key-box { height: calc(82svh - 115px); }
}
@media only screen and (max-height: 670px) and (orientation: portrait) {
  #keyvisual { height: calc(100svh - 60px); }
  #key-box { height: calc(100svh - 115px); }
  #key-box img { height: 100%; }
}


/* SP Menu */
#sp-menubox { width: 100%; display: none; }
#sp-menubox.sp-fix { position: sticky; top: 0; left: 0; box-shadow: 0 0 .3rem rgba(0,0,0,.2); z-index: 100; -webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.sp-menu { background: #FE0; }
.sp-menu ul { width: min(94%,550px); margin: 0 auto; padding: 1.5rem 0; display: flex; flex-wrap: wrap; justify-content: center; }
.sp-menu ul li { width: 32%; margin: 0 2% 1.5% 0; }
.sp-menu ul li:nth-child(3), .sp-menu ul li:last-child { margin-right: 0; }
.sp-menu ul li:nth-child(4), .sp-menu ul li:last-child { margin-bottom: 0; }
.sp-menu ul li a { border-radius: .5rem; box-shadow: .2rem .2rem .3rem rgba(0,0,0,.5); display: block; transition: .3s; cursor: pointer; }
.sp-menu ul li#sp01 a { background: rgba(0,152,68,1); }
.sp-menu ul li#sp02 a { background: rgba(229,0,18,1); }
.sp-menu ul li#sp03 a { background: rgba(146,0,131,1); }
.sp-menu ul li#sp04 a { background: rgba(236,108,0,1); }
.sp-menu ul li#sp05 a { background: rgba(0,148,215,1); }
.sp-menu ul li a:hover { box-shadow: .1rem .1rem .2rem rgba(0,0,0,.7); }
.sp-menu ul li#sp01 a:hover { background: rgba(0,152,68,.8); }
.sp-menu ul li#sp02 a:hover { background: rgba(229,0,18,.8); }
.sp-menu ul li#sp03 a:hover { background: rgba(146,0,131,.8); }
.sp-menu ul li#sp04 a:hover { background: rgba(236,108,0,.8); }
.sp-menu ul li#sp05 a:hover { background: rgba(0,148,215,.8); }
@media screen and (max-width: 1100px) {
  #sp-menubox { display: block; }
  .sp-menu ul { padding: 1rem 0; }
  .target { content: ""; margin-top: -10vw; padding-top: 10vw; display: block; visibility: hidden; }
}


/* Join */
#join .inner-box { margin-top: 3rem; padding: 2rem 0 3rem 0; background: rgba(0,152,68,1); }
#join h2 { width: 26%; margin: 0 auto; padding: .5rem 0 2rem 0; }
#join .column { width: 90%; margin: 0 auto; border-radius: 1rem; background: #FFF; position: relative; }
#join #pamphlet { margin: 0 auto 11% auto; padding: 2rem 3rem 1rem 3rem; }
#join #pamphlet::after { content: ""; width: 16.5%; aspect-ratio: 2 / 1.1; background: url("../images/join_arrow.png") no-repeat top center; background-size: cover; position: absolute; bottom: -12%; left: 50%; transform: translateX(-50%); }
.join-prize { width: 90%; margin: 1.5rem auto 0 auto; padding: 1.5% 0; border-radius: 1rem; background: #FFF; }
#join .prize-box { width: 96%; margin: 0 auto; padding: 2%; border-radius: .8rem; position: relative; }
#join .prize-box h3 { text-align: center; padding: .5rem 0; border-radius: .6rem; }
#join .prize-box h3 img { width: 34%; }
#join .wchance { padding-top: 12%; }
#join .prize-img { padding: 1rem 0; }
#prize-jre { border: solid 3px rgba(0,152,68,1); }
#prize-jre h3 { background: rgba(0,152,68,1); }
.prize-btn-jre a { text-align: center; padding: 4% 20%; border-radius: 4rem; background: rgba(0,152,68,1); box-shadow: .2rem .2rem .3rem rgba(0,0,0,.5); display: block; }
.prize-txt-jre { padding-top: 1rem; }
#wchance-jre { border: solid 3px rgba(0,152,68,1); }
#wchance-jre::before { content: ""; width: 40%; aspect-ratio: 4 / 1.1; background: url("../images/wchance_arrow_jre.png") no-repeat top center; background-size: cover; position: absolute; top: 0; left: 50%; transform: translate(-50%,-110%); }
#prize-tobu { border: solid 3px rgba(0,91,171,1); }
#prize-tobu h3 { background: rgba(0,91,171,1); }
#prize-akita { padding-top: 1rem; }
#prize-akita .prize-box { border: solid 3px rgba(229,0,18,1); }
#prize-akita h3 { background: rgba(229,0,18,1); }
#wchance-tobu { border: solid 3px rgba(233,85,4,1); }
#wchance-tobu::before { content: ""; width: 40%; aspect-ratio: 4 / 1.1; background: url("../images/wchance_arrow_tobu.png") no-repeat top center; background-size: cover; position: absolute; top: 0; left: 50%; transform: translate(-50%,-110%); }
#jrk-collabo { width: 96%; margin: 0 auto; padding-bottom: 1rem; }
#prize-jrk { border: solid 3px rgba(236,108,0,1); }
#prize-jrk h3 { background: rgba(236,108,0,1); }
@media only screen and (max-width: 750px) {
  #join .inner-box { margin-top: 2rem; }
  #join h2 { padding: 0 0 1.5rem 0; }
}


/* Stamp Storage */
#stamp-storage .inner-box { margin-top: 3rem; border: solid 3px rgba(229,0,18,1); background: #FFF; }
#stamp-storage .subtitle { text-align: center; margin-bottom: 2rem; padding: .8rem 0; border-radius: 1.6rem; background: rgba(229,0,18,1); }
#stamp-storage .subtitle img { width: 44%; }
.areamap { width: 90%; margin: 0 auto 1rem auto; position: relative; }
.areamap-frame { padding-top: 11%; border: solid 3px; border-radius: 1rem; }
.areamap h4 { text-align: center; width: 100%; padding: 2% 0; border: solid 3px; border-radius: 1rem; position: absolute; top: 0; left: 0; }
#stamp-storage .areamap h4 img { width: 55%; }
.areamap-img { padding: 2rem 1.5rem; }
#areamap-jre .areamap-frame, #areamap-jre h4 { border-color: rgba(230,0,18,1); }
#areamap-tobu .areamap-frame, #areamap-tobu h4 { border-color: rgba(0,92,172,1); }
#areamap-jrk .areamap-frame, #areamap-jrk h4 { border-color: rgba(237,108,0,1); }

#stamp-point { width: 90%; margin: 0 auto; padding: 2rem 0; }
#stamp-point h3 { width: 50%; margin: 0 auto; padding-bottom: 1rem; }
.stamppoint-box { margin-top: 1rem; border: solid 3px; border-radius: 1rem; }
.stamppoint-box h4 { text-align: center; padding: 1% 0 calc(1% + 3px) 0; border-radius: .6rem; }
#stamp-point .stamppoint-box h4 img { width: 55%; }
.stamppoint-box ul { width: 90%; margin: 0 auto; padding: 3rem 0 1rem 0; }
.stamppoint-box ul li { padding-bottom: 2rem; display: flex; flex-direction: column; align-items: flex-end; }
.stamppoint-box ul li strong { width: 30%; padding: 2rem 0 1rem 0; }
.stamppoint-box ul li strong a { display: block; }
.stamppoint-box ul li strong a:hover img { opacity: .8; }
#stamppoint-jre { border-color: rgba(0,152,68,1); }
#stamppoint-tobu { border-color: rgba(0,92,172,1); }
#stamppoint-akita { border-color: rgba(229,0,18,1); }
#stamppoint-jrk { border-color: rgba(237,108,0,1); }

#stamppoint-jre h4 { background: rgba(0,152,68,1); }
#stamppoint-tobu h4 { background: rgba(0,92,172,1); }
#stamppoint-akita h4 { background: rgba(229,0,18,1); }
#stamppoint-jrk h4 { background: rgba(237,108,0,1); }
@media only screen and (max-width: 750px) {
  #stamp-storage { margin-top: -.1rem; padding-top: .1rem; }
  #stamp-storage .inner-box { margin-top: 2rem; }
  .areamap { width: 94%; }
  #stamp-point { width: 94%; padding: 1rem 0; }
  #stamp-point h3 { width: 60%; padding-bottom: 0; }
  #stamp-point .stamppoint-box h4 img { width: 65%; }
  .stamppoint-box ul { width: 94%; margin: 0 auto; padding: 1rem 0 0 0; }
  .stamppoint-box ul li { padding-bottom: 1rem; }
  .stamppoint-box ul li strong { width: 40%; padding: .5rem 0 1rem 0; }
}

/* Prize Center */
#prize-center .inner-box { margin-top: 3rem; padding-bottom: 1rem; border: solid 3px rgba(146,0,131,1); background: #FFF; }
#prize-center .subtitle { text-align: center; margin-bottom: 2rem; padding: .8rem 0; border-radius: 1.6rem; background: rgba(146,0,131,1); }
#prize-center .subtitle img { width: 44%; }
.place-column { width: 90%; margin: 0 auto 1rem auto; border: solid 3px; border-radius: 1rem; }
.place-column h3 { text-align: center; padding: .3rem 0 calc(.3rem + 3px) 0; border-radius: .6rem; }
#prize-center .place-column h3 img { width: 34%; }
#place-jre { border-color: rgba(0,152,68,1); }
#place-tobu { border-color: rgba(0,92,172,1); }
#place-akita { border-color: rgba(229,0,18,1); }
#place-wchance { border-color: rgba(242,150,0,1); }
#place-jrk { border-color: rgba(236,108,0,1); }
#place-jre h3, #place-jre dt { background: rgba(0,152,68,1); }
#place-tobu h3, #place-tobu dt { background: rgba(0,92,172,1); }
#place-akita h3, #place-akita dt { background: rgba(229,0,18,1); }
#place-wchance h3, #place-wchance dt { background: rgba(242,150,0,1); }
#place-jrk h3, #place-jrk dt { background: rgba(236,108,0,1); }
.place-column .prize-img { padding: 1rem 2rem; }
#place-jre .prize-img { padding: 0 2rem 1rem 2rem; }
.place-column dl { width: 90%; margin: 0 auto; }
.place-column dt { text-align: center; margin-bottom: 1rem; padding: .5rem 0; border-radius: 1rem; }
#prize-center .place-column dt img { width: 40%; }
.place-column dd { padding: 1rem 0 1rem 0; }
.place-column dd ul li { padding-bottom: 1rem; display: flex; flex-direction: column; align-items: flex-end; }
.place-column dd ul li strong { width: 30%; padding: 1rem 0; }
.place-column dd ul li strong a:hover img { opacity: .8; }
.place-column dd div { padding: 0 2rem 2rem 2rem; }
@media only screen and (max-width: 750px) {
  #prize-center { margin-top: -.1rem; padding-top: .1rem; }
  #prize-center .inner-box { margin-top: 2rem; }
  .place-column, .place-column dl { width: 94%; }
  #prize-center .place-column h3 img { width: 40%; }
  .place-column dt { margin-bottom: 0; }
  .place-column dd { padding: 1rem 0 0 0; }
  .place-column dd ul li strong { width: 40%; padding: .5rem 0 1rem 0; }
}

/* Family City Project */
#family-city { }
#family-city .inner-box { margin: 3rem auto; padding: 3rem; background: #FFF; display: flex; flex-direction: column; align-items: flex-end; }
#family-city h2 { text-align: center; padding: 1.2rem 0; border-radius: 1rem; background: rgba(236,108,0,1); }
#family-city h2 img { width: 94%; }
#family-city dl { padding: 3rem 0 1rem 0; }
#family-city dl dt { padding-bottom: 2rem; }
#family-city .link-btn { width: 30%; }
#family-city .link-btn a:hover img { opacity: .8; }
@media only screen and (max-width: 750px) {
  #family-city { margin-top: -.1rem; padding-top: .1rem; }
  #family-city .inner-box { margin: 2rem auto; padding: 1.5rem 1.5rem 1rem 1.5rem; }
  #family-city dl { padding: 1rem 0 0 0; }
  #family-city dl dt { padding-bottom: 1rem; }
}

/* Movie Information */
#movie-info { padding: 3rem 0 2rem 0; background: #FE0; }
#movie-info .poster { width: 86%; margin: 0 auto; }
#movie-info .link-btn { width: 88%; margin: 0 auto; padding-top: 2rem; }
#movie-info .link-btn a:hover img { opacity: .8; }
@media only screen and (max-width: 750px) {
  #movie-info { padding: 2rem 1rem 1rem 1rem; }
  #movie-info .poster { width: 100%; }
  #movie-info .link-btn { width: 100%; padding-top: 1rem; }
}

/* Notes */
#notes { background: #FFF; }
#notes .inner-box { width: 86%; margin: 0 auto; padding: 4rem 0; }
#notes a { color: #08C; text-decoration: underline; }
#notes a:hover { color: #D00; }
#notes ul { padding-bottom: 1.5rem; }
#notes ul li { font-size: min(2.1vw,1.5rem); line-height: 1.4; font-weight: bold; text-align: justify; padding-bottom: .1rem; }
#notes ul.attention li { text-indent: -1em; padding-left: 1em; }
#notes ul li i { font-style: normal; }
#notes ul li i::before { content: "\A"; white-space: pre; }
#notes ul.overview li { padding-left: 3em; position: relative; }
#notes ul.overview li h4 { width: 2em; text-align-last: justify; position: absolute; left: 0; }
#notes ul.overview li span { position: absolute; left: 2em; }
#notes p { font-size: min(2.1vw,1.5rem); line-height: 1.4; font-weight: bold; }
#notes p.contact { padding-bottom: 1.5rem; }
@media screen and (max-width: 750px) {
  #notes .inner-box { width: 92%; margin: 0 auto; padding: 2rem 0; }
}


/* Modal Window */
html.modalset { overflow: hidden; }
.modalwindow { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; display: none; }
.modal-wrap { text-align: center; width: 100%; height: 100%; padding: 20px; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; overflow: -moz-scrollbars-none; white-space: nowrap; }
.modal-wrap::-webkit-scrollbar { display: none; }
.modal-wrap:after { content: ''; width: 1px; height: 100%; vertical-align: middle; display: inline-block; }
.modal-background { width: 100%; height: 100%; background: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; }
.modal-box { width: min(96%,600px); vertical-align: middle; display: inline-block; position: relative; }
.modal-box .inner { text-align: left; padding: 1rem; background: #FFF; border-radius: 2rem; }
.modal-box .inner > :first-child { margin-top: 0; }
#modal-image { position: relative; }
#modal-image a { width: 42%; height: 22%; display: block; position: absolute; top: 51%; left: 6% }
.modal-box .modal-close { width: 44px; height: 44px; position: absolute; top: -5px; right: -5px; }
.modal-box .modal-close ul { width: 100%; height: 100%; border: solid 2px #FFF; border-radius: 50%; background: #7A6A56; position: relative; }
.modal-box .modal-close ul li { width: 80%; height: 3px; background: #FFF; position: absolute; top: 50%; left: 50%; }
.modal-box .modal-close ul li:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.modal-box .modal-close ul li:last-child { transform: translate(-50%,-50%) rotate(-45deg); }