@charset "UTF-8";
/* --------------------------------------------------------- */
/* index.css */
/* --------------------------------------------------------- */
#wrap { background: url(../img/bg.jpg) repeat-y top center; background-size: 100% auto; position: relative; overflow: hidden; }

.section { width: 100%; margin: 0 auto; }

.content { width: 100%; margin: 0 auto; }

.layer { width: 100%; max-width: 960px; margin: 0 auto; }

.sp { display: none; }

a { display: block; color: inherit; }

span { color: inherit; }

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

/* KV
----------------------- */
/* メイン
----------------------- */
/* かながわこどもまんなかプロジェクトとは */
#about .layer:before, #about .layer:after { content: ''; display: block; width: 100%; margin: 0 auto; padding-top: 6.563%; background-repeat: no-repeat; background-size: 67.709% auto; }
#about .layer:before { background-image: url(../img/bg-about2.png); background-position: top center; }
#about .layer:after { background-image: url(../img/bg-about1.png); background-position: bottom center; }
#about h2 { width: 99.584%; margin: 6.25% auto 4.167%; }
#about .txt { margin-bottom: 5.73%; color: #2e2e2e; font-size: 2rem; line-height: 220%; }
#about .txt span { display: inline-block; }

/* information */
#information { text-align: center; width: 100%; max-width: 1240px; margin: 120px auto 60px; }
#information h2 { font-size: 43px; margin-bottom: 30px; text-align: center; color: #474747; }
#information ul { padding: 0 20px; }
#information ul li { background: #FFF; border-radius: 10px; margin-bottom: 10px; font-size: 21px; padding: 18px 38px; position: relative; }
#information ul li a { display: block; text-decoration: none; color: #474747; border: 1px solid #FFF; }
#information ul li a:focus { border: 1px solid #101010; }
#information ul li a:after { content: ""; position: absolute; right: 18px; top: 0; bottom: 0; margin: auto; display: block; width: 8px; height: 8px; border-top: 2px solid #474747; border-right: 2px solid #474747; transform: rotate(45deg); transition: all 1s ease; }
#information ul li a:hover span { color: #00699F; }
#information ul li span.info-day { display: inline-block; margin-right: 10px; width: 150px; color: #00699F; }
#information ul li span.info-contents { display: inline-block; width: calc(100% - 160px); color: #2e2e2e; }
#information ul li:hover { color: #474747; }

iframe { border: none; }

/* ACTION */
#movie { position: relative; /* action navi */ }
#movie * { color: #474747; }
#movie a:focus { border: 1px solid #fff; }
#movie .layer { max-width: 1280px; position: relative; z-index: 1; }
#movie .layer:after { content: ''; display: block; width: 100%; padding-top: 6.667%; }
#movie h2 { font-size: 43px; text-align: center; letter-spacing: 1px; margin: 0 auto; padding: 6% 0 4%; }
#movie #action-navi ul { display: flex; width: calc(100% - 80px); padding: 0 40px; margin-bottom: 60px; position: relative; justify-content: space-around; }
#movie #action-navi ul li { width: calc(33.33% - 34px); text-align: center; border: 2px solid #474747; border-bottom: none; border-radius: 10px 10px 0 0; padding: 8px 8px 0px; font-size: 2.8rem; font-weight: bold; cursor: pointer; position: relative; }
#movie #action-navi ul li:nth-child(3n) { margin-right: 0; }
#movie #action-navi ul li:after, #movie #action-navi ul li:before { content: ""; position: absolute; width: 3px; height: 9px; bottom: 1px; left: -2px; background: url(../img/bg.jpg) repeat-y center bottom; }
#movie #action-navi ul li .action-genre { display: block; padding: 12px 5px 14px; }
#movie #action-navi ul li:after { left: calc(100% - 1px); }
#movie #action-navi ul li:hover span, #movie #action-navi ul li:focus span { color: #FFF; }
#movie #action-navi ul li:hover:nth-child(1) .action-genre, #movie #action-navi ul li:focus:nth-child(1) .action-genre { background: #00699F; }
#movie #action-navi ul li:hover:nth-child(1) .action-genre:after, #movie #action-navi ul li:focus:nth-child(1) .action-genre:after { border-top: 15px solid #00699F; }
#movie #action-navi ul li:hover:nth-child(2) .action-genre, #movie #action-navi ul li:focus:nth-child(2) .action-genre { background: #DD7700; }
#movie #action-navi ul li:hover:nth-child(2) .action-genre:after, #movie #action-navi ul li:focus:nth-child(2) .action-genre:after { border-top: 15px solid #DD7700; }
#movie #action-navi ul li:hover:nth-child(3) .action-genre, #movie #action-navi ul li:focus:nth-child(3) .action-genre { background: #036666; }
#movie #action-navi ul li:hover:nth-child(3) .action-genre:after, #movie #action-navi ul li:focus:nth-child(3) .action-genre:after { border-top: 15px solid #036666; }
#movie #action-navi ul li:hover .action-genre, #movie #action-navi ul li:focus .action-genre { color: #FFF; background: #FFF; border-radius: 8px 8px 0 0; }
#movie #action-navi ul li:hover:after, #movie #action-navi ul li:hover:before, #movie #action-navi ul li:focus:after, #movie #action-navi ul li:focus:before { background: none; }
#movie #action-navi ul li.active { border-top: 2px solid #00699F; border-right: 2px solid #00699F; border-left: 2px solid #00699F; }
#movie #action-navi ul li.active .action-genre { background: #FFF; color: #FFF; border-radius: 8px 8px 0 0; position: relative; z-index: 2; }
#movie #action-navi ul li.active .action-genre:after { content: ""; position: absolute; top: calc(100% - 1px); right: 0; left: 0; margin: 0 auto; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #FFF; }
#movie #action-navi ul li.active .action-genre span { color: #FFF; }
#movie #action-navi ul li.active:after { width: 100%; bottom: -1px; height: 2px; left: 0px; z-index: 1; }
#movie #action-navi ul li.active:before { display: none; }
#movie #action-navi ul li.active:hover:after { background: url(../img/bg.jpg) repeat-y center; }
#movie #action-navi ul:before { content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #00699F; }
#movie #action-navi ul.prefecture .active .action-genre { background: #00699F; }
#movie #action-navi ul.prefecture .active .action-genre:after { border-top: 15px solid #00699F; }
#movie #action-navi ul.prefecture:before { background-color: #00699F; }
#movie #action-navi ul.prefecture li.active { border-color: #00699F; }
#movie #action-navi ul.municipality .active .action-genre { background: #DD7700; }
#movie #action-navi ul.municipality .active .action-genre:after { border-top: 15px solid #DD7700; }
#movie #action-navi ul.municipality:before { background-color: #DD7700; }
#movie #action-navi ul.municipality li.active { border-color: #DD7700; }
#movie #action-navi ul.company .active .action-genre { background: #036666; }
#movie #action-navi ul.company .active .action-genre:after { border-top: 15px solid #036666; }
#movie #action-navi ul.company:before { background-color: #036666; }
#movie #action-navi ul.company li.active { border-color: #036666; }
#movie .action-container { display: none; padding-top: 10px; margin-bottom: 60px; }
#movie .action-container.active { display: block; animation: slideinBottom 3s 1; }
#movie .action-container #meeting .layer { max-width: 524px; }
#movie .action-container #meeting .layer h2 { padding: 0; margin-bottom: 15px; }
#movie .action-container #meeting .layer:after { display: none; }
#movie .action-container .action-desc { width: 100%; margin-bottom: 73px; font-size: 21px; text-align: center; }
#movie .action-container .action-desc br { display: none; }
@keyframes slideinBottom { 0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; } }
#movie .action-item { display: flex; flex-wrap: wrap; justify-content: space-between; width: 86%; margin: 0 auto 5.834%; }
#movie .action-item.bd-btm { border-bottom: 1px solid #CCC; padding-bottom: 5.834%; }
#movie .action-item .movie { width: 50%; padding-top: 28.125%; background: url(../img/icon-movie.png) no-repeat center; background-size: 100% auto; position: relative; }
#movie .action-item .movie a, #movie .action-item .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#movie .action-item .txtbox { width: 45.834%; }
#movie .action-item .title { margin-bottom: 1.0em; font-size: 20px; font-weight: bold; line-height: 140%; }
#movie .action-item .txt { margin-bottom: 1.5em; font-size: 2.0rem; line-height: 140%; }
#movie .action-item .btn { width: max-content; text-align: center; border: 1px solid #00699F; border-radius: 10px; box-sizing: border-box; overflow: hidden; }
#movie .action-item .btn a { padding: 1.5em 1.5em; font-size: 16px; line-height: 140%; transition: ease 0.3s; transition-property: color,background; text-decoration: none; }
#movie .action-item .btn a:after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; transition: background ease 0.3s; -webkit-mask-image: url(../img/icon-moviebtn_ov.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(../img/icon-moviebtn_ov.png); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: #00699F; }
#movie .action-item .btn a:focus { border-radius: 10px; }
#movie .action-item .image { width: 50%; position: relative; }
#movie #prefecture .btn a { color: #00699F; }
#movie #prefecture .btn a:hover, #movie #prefecture .btn a:focus { color: #FFF; background: #00699F; }
#movie #prefecture .btn a:hover:after, #movie #prefecture .btn a:focus:after { background: #FFF; }
#movie #prefecture .btn a:after, #movie #prefecture .btn a:focus { background-color: #00699F; }
#movie #prefecture .movie a:hover { background: none; }
#movie #municipality a { color: #DD7700; }
#movie #municipality a:after { background-color: #DD7700; }
#movie #company { padding: 0 40px; }
#movie #company a { color: #DD7700; }
#movie #company #action-list-navi { margin-bottom: 40px; }
#movie #company #action-list-navi ul { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; }
#movie #company #action-list-navi ul li { background: #FFF; border-radius: 20px; width: 31%; margin-bottom: 30px; }
#movie #company #action-list-navi ul li a { display: block; padding: 0 5px; color: #FFF; position: relative; font-size: 19px; text-decoration: none; font-weight: bold; line-height: 40px; vertical-align: middle; border: 1px solid #036666; background: #036666; border-radius: 20px; transition: all 1s ease; }
#movie #company #action-list-navi ul li a:after { content: ""; position: absolute; right: 18px; top: 0; bottom: 0; margin: auto; display: block; width: 8px; height: 8px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: rotate(45deg); transition: all 1s ease; }
#movie #company #action-list-navi ul li a:hover, #movie #company #action-list-navi ul li a:focus { color: #036666; background: #FFF; }
#movie #company #action-list-navi ul li a:hover:after, #movie #company #action-list-navi ul li a:focus:after { border-top: 2px solid #036666; border-right: 2px solid #036666; }
#movie #company #action-list-navi ul li a:hover span, #movie #company #action-list-navi ul li a:focus span { color: #FFF; background: #036666; }
#movie #company #action-list-navi ul li a.casestudise { padding: 0 48px; }
#movie #company #action-list-navi ul li span { font-size: 16px; width: 30px; height: 30px; display: inline-block; background: #FFF; color: #036666; margin-right: 10px; text-align: center; line-height: 30px; border-radius: 50%; transition: all 1s ease; }
#movie #company #action-list { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; }
#movie #company #action-list .action-company { width: 31%; position: relative; color: #FFF; margin-bottom: 50px; }
#movie #company #action-list .action-company .company-image { margin-bottom: 20px; }
#movie #company #action-list .action-company .company-image img { width: 100%; height: auto; }
#movie #company #action-list .action-company .action-label { color: #036666; padding: 5px; border: 1px solid #036666; position: relative; font-size: 19px; text-decoration: none; line-height: 30px; vertical-align: middle; border-radius: 20px; text-align: center; margin-bottom: 15px; }
#movie #company #action-list .action-company .action-label span { width: 24px; height: 24px; display: inline-block; color: #FFF; background: #036666; margin-right: 10px; text-align: center; line-height: 24px; font-size: 14px; vertical-align: text-top; border-radius: 50%; font-weight: bold; }
#movie #company #action-list .action-company .company-name { margin-bottom: .7em; font-size: 18px; line-height: 140%; font-weight: bold; }
#movie #company #action-list .action-company .company-catch { margin-bottom: .7em; font-size: 18px; line-height: 140%; font-weight: bold; }
#movie #company #action-list .action-company .company-explanatory { font-size: 18px; line-height: 140%; }
#movie #company #action-list .action-company .btn-detail { margin-top: 2em; width: 100%; }
#movie #company #action-list .action-company .btn-detail a { position: relative; display: block; padding: 10px 40px 10px 20px; color: #036666; font-weight: bold; border: 1px solid #036666; border-radius: 10px; line-height: 1.4; font-size: 16px; text-decoration: none; transition: all 1s ease; min-height: 4.5em; }
#movie #company #action-list .action-company .btn-detail a span { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: #036666; width: calc(100% - 60px);  transition: all 1s ease; }
#movie #company #action-list .action-company .btn-detail a:after { content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(45deg); display: block; background: none; width: 8px; height: 8px; border-top: 2px solid #036666; border-right: 2px solid #036666; transition: all 1s ease; }
#movie #company #action-list .action-company .btn-detail a:hover, #movie #company #action-list .action-company .btn-detail a:focus { background: #036666; }
#movie #company #action-list .action-company .btn-detail a:hover span, #movie #company #action-list .action-company .btn-detail a:focus span { color: #FFF; }
#movie #company #action-list .action-company .btn-detail a:hover:after, #movie #company #action-list .action-company .btn-detail a:focus:after { border-color: #FFF; }
#movie #company #action-list .action-company .btn-detail a:focus { border-radius: 10px; }
#movie #company #companyMore { margin: 40px 0 80px; padding: 0 20px; }
#movie #company #companyMore a { width: calc(100% - 40px); max-width: 600px; margin: 0 auto; border-radius: 10px; text-align: center; padding: 20px 10px; font-weight: bold; font-size: 16px; color: #036666; text-decoration: none; border: 1px solid #036666; transition: all 1s ease; }
#movie #company #companyMore a span { display: inline-block; height: 1em; vertical-align: bottom; margin-left: 10px; }
#movie #company #companyMore a span:after { content: ""; display: block; background: none; width: 8px; height: 8px; border-top: 2px solid #036666; border-right: 2px solid #036666; transform: rotate(45deg); transition: all 1s ease; }
#movie #company #companyMore a:hover, #movie #company #companyMore a:focus { color: #FFF; background: #036666; }
#movie #company #companyMore a:hover span:after, #movie #company #companyMore a:focus span:after { border-top: 2px solid #FFF; border-right: 2px solid #FFF; }

#boxwrap { display: flex; flex-wrap: wrap; padding-bottom: 5%; }
#boxwrap h3 { width: 100%; margin-bottom: 1.5em; color: #fff; font-size: 2.6rem; line-height: 100%; text-align: center; }
#boxwrap .moviebox { width: 30.834%; /*370*/ margin-right: 3.749%; margin-top: 3.334%; }
#boxwrap .moviebox:nth-of-type(3n) { margin-right: 0; }
#boxwrap .moviebox:nth-of-type(-n+3) { margin-top: 0; }

.moviebox .movie { width: 100%; padding-top: 56.217%; background: #d7d7d7 url(../img/icon-movie.png) no-repeat center; background-size: 100% auto; position: relative; }
.moviebox .movie a, .moviebox .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.moviebox .title { margin: 1em auto 0; font-size: 20px; line-height: 140%; }

/* 各市町村からのメッセージ */
#countryMessage { display: none; }
#countryMessage.active { display: block; }
#countryMessage .layer { position: relative; }
#countryMessage .layer:before { content: ''; display: block; width: 135.417%; padding-top: 16.3%; background: url(../img/bg-country.png) no-repeat top left; background-size: 100% auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#countryMessage h2 { width: 54.375%; margin: 0 auto; padding: 8.334% 0 2.997%; }
#countryMessage .countryList { display: flex; flex-wrap: wrap; padding-bottom: 10.417%; }
#countryMessage .countryList li { width: 18.23%; margin: 2.2125% 2.2125% 0 0; }
#countryMessage .countryList li:nth-of-type(5n) { margin-right: 0; }

/*popup*/
#popupWrapper { position: relative; }
#popupWrapper.scriptOn { position: fixed; left: 0; width: 100%; top: -100%; height: 100%; margin-top: 0%; z-index: 150; }
#popupWrapper.scriptOn #popupMain { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
#popupWrapper.opened { top: 0%; }

.popupContents { position: relative; margin: 100px auto; background: #CB4B0B; z-index: 1; }

.popupBg { position: fixed; left: 0; width: 100%; top: 0; height: 0%; background-color: rgba(0, 0, 0, 0.45); z-index: 1; }

#popupWrapper.opened #popupMain .popupBg { height: 100%; }

.ps-scrollbar-y-rail { z-index: 2; }

.popupContents .popupBg { opacity: 0; }

#popupWrapper.scriptOn .perfectScroll { position: absolute; left: 0; width: 100%; top: 0; height: 100%; z-index: 2; overflow: hidden; }

.popup { width: 100%; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }

#popupWrapper.scriptOn .popup { display: none; }

body.popupOpen { position: fixed; width: 100%; }

#popupMain .ps-container > .ps-scrollbar-y-rail { opacity: 0.2; }

.popup .popupinner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 3.847%; box-sizing: border-box; }
.popup .image { width: 41.667%; /*500*/ }
.popup .txtbox { width: 50.834%; /*610*/ }
.popup .txtbox p, .popup .txtbox li { color: #fff; }
.popup .name { font-size: 4rem; font-weight: bold; line-height: 140%; }
.popup .head { margin: 1em 0 0.5em; font-size: 2.4rem; font-weight: bold; line-height: 137%; }
.popup .head span { display: inline; padding-bottom: 0.1em; background: url(../img/line-popup.png) repeat-x bottom left; background-size: auto 0.625em; }
.popup .head span small { color: #fff; }
.popup .txt { margin-bottom: 2em; font-size: 2rem; line-height: 220%; }
.popup .txt.txt li { position: relative; padding-left: 2em; box-sizing: border-box; }
.popup .txt.txt li span { position: absolute; left: 0; }
.popup .txt a { display: inline; text-decoration: none; word-break: break-all; }
.popup .txt a:hover { text-decoration: underline; }
.popup .btn { width: 100%; /*197*/ text-align: center; border: 1px solid #fff; border-radius: 10px; box-sizing: border-box; overflow: hidden; }
.popup .btn a { padding: 1.5em 0; font-size: 1.6rem; font-weight: bold; line-height: 100%; transition: ease 0.3s; transition-property: color,background; text-decoration: none; }
.popup .btn a:after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: 0.25em; background: url(../img/icon-popupbtn.png) no-repeat center; background-size: 100% auto; transition: background ease 0.3s; }
.popup .btn a:hover { color: #f46925; background: #fff; }
.popup .btn a:hover:after { background-image: url(../img/icon-popupbtn_ov.png); }
.popup .close { width: 3.077%; padding-top: 3.077%; background: url(../img/icon-close.png) no-repeat center; background-size: 100% auto; cursor: pointer; position: absolute; top: 0; right: 0; margin: 2.308% 3.847% 0 0; }
.popup.movie .popupinner { justify-content: center; }
.popup.movie .framewrap { width: 72%; padding-top: 40.5%; position: relative; }
.popup.movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* スライダー */
#sliderwrap { background: #f49b25; position: relative; }
#sliderwrap:before { content: ''; display: block; width: 100%; max-width: 960px; padding-top: 390px; background: url(../img/bg-slider.png) no-repeat top center; background-size: 100% auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

#slider .slideitem:before, #slider .slideitem:after { content: ''; display: block; padding-top: 50px; }
#slider .itemwrap { width: 91.837%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #CB4B0B; }
#slider .image { width: 50%; }
#slider .txtbox { width: 50%; /*450*/ padding: 0 4%; box-sizing: border-box; }
#slider .name { color: #fff; font-size: 3.8rem; font-weight: bold; line-height: 140%; text-align: center; }
#slider .head { margin: 1em 0 0; color: #fff; font-size: 2rem; font-weight: bold; line-height: 137%; }
#slider .head span { display: inline; padding-bottom: 0.1em; background: url(../img/line-popup.png) repeat-x bottom left; background-size: auto 0.625em; }
#slider .head span small { color: #fff; }
#slider .txt { margin-top: 0.5em; color: #fff; font-size: 2rem; line-height: 162%; }
#slider .txt a { display: inline; word-break: break-all; text-decoration: underline; }
#slider .txt a:hover { text-decoration: none; }

.slick-prev, .slick-next { width: 4.717%; padding-top: 4.717%; top: 50%; transform: translate(0%, -50%); z-index: 2; }
.slick-prev:before, .slick-next:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 1; }

.slick-prev { left: 0%; margin-left: 6.85%; }
.slick-prev:before { background: url(../img/icon-arrow-left.png) no-repeat center; background-size: 100% auto; }

.slick-next { right: 0%; margin-right: 6.85%; }
.slick-next:before { background: url(../img/icon-arrow-right.png) no-repeat center; background-size: 100% auto; }

/* 県民のみなさまへのメッセージ */
#message { background: #188295; /*21b0c9*/ position: relative; }
#message:after { content: ''; display: block; width: 100%; max-width: 1200px; padding-top: 670px; background: url(../img/bg-message.png) no-repeat bottom center; background-size: 100% auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0; }
#message h2 { width: 64.48%; margin: 0 auto; padding: 7.292% 0 4.167%; }
#message .txt { width: calc(100% + 1em); margin-left: -0.5em; padding-bottom: 12.5%; color: #fff; font-size: 2rem; line-height: 220%; position: relative; z-index: 1; }

#kids { width: 100%; margin: 0; position: relative; z-index: 1; }
#kids p { width: 100%; margin: 0; }

#carousel { position: relative; z-index: 1; }
#carousel .carousel-sp { display: none; }

/* フッター
----------------------- */
#footer { background: #2d2d2d; }
#footer a:focus { border: 1px solid #fff; }
#footer .layer:before { content: ''; display: block; padding-top: 2.084%; }
#footer .policywrap { padding: 3.125%; box-sizing: border-box; background: #525252; }
#footer .policy { height: 130px; overflow-y: scroll; }
#footer .policy p, #footer .policy li { color: #fff; font-size: 1.5rem; padding-left: 1em; box-sizing: border-box; position: relative; }
#footer .policy p span, #footer .policy li span { position: absolute; left: 0; }
#footer .policy a { display: inline; word-break: break-all; text-decoration: underline; }
#footer .policy a:hover { text-decoration: none; }
#footer .policy .head { margin-top: 1em; font-weight: bold; }
#footer .policy .head:first-of-type { margin-top: 0; }
#footer .sitepolicy { padding: 2.084% 0; font-size: 1.6rem; line-height: 100%; text-align: center; }
#footer .sitepolicy a { display: inline; color: #fff; text-align: center; text-decoration: underline; }
#footer .sitepolicy a:hover { text-decoration: none; }
#footer .accessibility { width: 100%; padding: 2.084% 3.125%; border: 1px dotted #fff; box-sizing: border-box; }
#footer .accessibility .head { color: #fff; font-size: 1.5rem; font-weight: bold; line-height: 146%; text-align: center; }
#footer .accessibility .txt { margin-top: 0.5em; color: #fff; font-size: 1.5rem; line-height: 146%; }
#footer .accessibility .txt a { display: inline; word-break: break-all; }
#footer .last { padding: 1.563% 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#footer .post { color: #fff; font-size: 1.2rem; }
#footer .cr { color: #fff; font-size: 1.2rem; }
#footer .sns { width: 100%; margin-top: 1.563%; text-align: center; }
#footer .sns li { width: 3.125%; display: inline-block; margin: 0 0.3125%; }

@media screen and (max-width: 1300px) { .layer { width: 92%; }
  #movie .action-container #meeting .layer { width: 100%; }
  /* かながわこどもまんなかプロジェクトとは */
  #about .txt { font-size: 1.539vw; }
  /* MOVIE */
  #movie { /* ACTION */ /* 参画企業の取り組み */ }
  #movie #prefecture .title { font-size: 1.539vw; }
  #movie #prefecture .txt { font-size: 1.539vw; }
  #movie #prefecture .btn a { font-size: 1.231vw; }
  #movie .more { font-size: 2vw; }
  #movie #action-navi ul li { font-size: 24px; }
  #movie #company #action-list-navi ul li a { font-size: 16px; }
  #movie #company #action-list .action-company { width: 48%; }
  #boxwrap h3 { font-size: 2vw; }
  .moviebox .title { font-size: 1.539vw; }
  /* 各市町村からのメッセージ */
  .popup .name { font-size: 3.077vw; }
  .popup .head { font-size: 1.847vw; }
  .popup .txt { font-size: 1.539vw; }
  .popup .btn a { font-size: 1.231vw; }
  /* スライダー */
  #slider .name { font-size: 2.924vw; }
  #slider .head { font-size: 1.539vw; }
  #slider .txt { font-size: 1.539vw; }
  /* こどもまんなかミーティング */
  #meeting h2 + .txt { font-size: 1.539vw; }
  .meetingbox h4 { font-size: 1.539vw; }
  .meetingbox .txt { font-size: 1.539vw; }
  .meetingbox li { font-size: 1.539vw; }
  .meetingbox .moviehead { font-size: 1.539vw; }
  .meetingbox .btn a { font-size: 2vw; }
  /* 県民のみなさまへのメッセージ */
  #message:after { padding-top: 51.539%; }
  #message .txt { font-size: 1.539vw; }
  /* フッター ----------------------- */
  #footer .policy p, #footer .policy li { font-size: 1.154vw; }
  #footer .policy a:hover { text-decoration: none; }
  #footer .sitepolicy { font-size: 1.231vw; }
  #footer .accessibility .head { font-size: 1.154vw; }
  #footer .accessibility .txt { font-size: 1.154vw; }
  #footer .post, #footer .cr { font-size: 0.924vw; } }
@media screen and (max-width: 1200px) { #movie #company #action-list-navi ul li { width: 48%; } }
@media screen and (max-width: 980px) { #movie #action-navi ul { margin-bottom: 40px; }
  #movie #action-navi ul li { font-size: 16px; }
  #movie #action-navi ul li .action-genre { padding: 10px 5px 20px; }
  #movie #company #action-list-navi ul li { width: 48%; } }
@media screen and (max-width: 750px) { .pc { display: none; }
  .sp { display: block; }
  /* KV ----------------------- */
  /* メイン ----------------------- */
  /* かながわこどもまんなかプロジェクトとは */
  #about .layer:before, #about .layer:after { width: 108.696%; margin-left: -4.348%; padding-top: 12.32%; background-size: 100% auto; }
  #about .layer:before { background-image: url(../img/sp-bg-about1.png); }
  #about .layer:after { background-image: url(../img/sp-bg-about2.png); }
  #about h2 { width: 101.45%; margin: 5.798% auto 4.348% -0.725%; }
  #about .txt { margin-bottom: 8.696%; font-size: 4.267vw; line-height: 192%; }
  #information h2 { width: 100%; padding: 9.421% 0 3.624%; font-size: 28px; margin-bottom: 0; }
  /* MOVIE */
  #movie #action-navi ul { padding: 0 20px; width: calc(100% - 40px); }
  #movie #action-navi ul li { font-size: 14px; padding: 5px 5px 0; width: calc(33.33% - 25px); }
  #movie #action-navi ul li:after { height: 10px; }
  #movie #action-navi ul li .action-genre { padding: 10px 5px 25px; }
  #movie #company { width: 100%; max-width: 420px; margin: 0 auto; }
  #movie #company #action-list-navi ul li { width: 100%; font-size: 14px; margin-bottom: 15px; }
  #movie #company #action-list .action-company { width: 100%; padding-bottom: 50px; }
  #movie #company #action-list .action-company .btn-detail { position: relative; width: 100%; text-align: center; margin-top: 20px; }
  #movie #company #action-list .action-company .btn-detail a { position: relative; }
  #movie #company #action-list .action-company .action-label { font-size: 14px; line-height: 24px; }
  #movie #company #action-list .action-company .action-label span { width: 18px; height: 18px; line-height: 18px; font-size: 13px; }
  #movie .action-item { display: block; }
  #movie .action-item .movie { width: 100%; aspect-ratio: 16 / 9; margin: 0 auto 20px; padding-top: 0; }
  #movie .action-item .txtbox { width: 100%; }
  #movie .action-item .image { width: 100%; margin-bottom: 20px; }
  #movie .action-item .btn { margin: 0 auto 30px; width: 100%; }
  #movie #prefecture .title { font-size: 16px; }
  #movie #prefecture .txt { font-size: 14px; }
  #movie #prefecture .btn a { font-size: 14px; }
  #movie:before { padding-top: 29.334; background-image: url(../img/sp-bg-movie.png); left: 0; transform: translateX(0); }
  #movie .layer:after { padding-top: 14.493%; }
  #movie h2 { width: 100%; padding: 9.421% 0 3.624%; font-size: 2.8rem; }
  #movie .mainmovie { width: 100%; margin: 0 auto 7.247%; }
  #movie .mainmovie .movie { width: 69.566%; margin: 0 auto; padding-top: 39.131%; }
  #movie .mainmovie .txtbox { width: 100%; }
  #movie .mainmovie .title { margin: 1.25em auto 0.5em; font-size: 4.267vw; }
  #movie .mainmovie .txt { margin-bottom: 1.5em; font-size: 4.267vw; line-height: 192%; }
  #movie .mainmovie .btn { width: 100%; }
  #movie .mainmovie .btn a { padding: 1em 0; font-size: 4.267vw; }
  #movie .mainmovie .btn a:hover { color: #fff; background: none; }
  #movie .mainmovie .btn a:hover:after { background-image: url(../img/icon-popupbtn.png); }
  #movie .more { width: 100%; font-size: 4.267vw; border-width: 2px; }
  #movie .more:hover { color: #fff; background: none; }
  #boxwrap .moviebox { width: 47.827%; margin-right: 4.346%; margin-top: 5.78%; }
  #boxwrap .moviebox:nth-of-type(3n) { margin-right: 4.346%; }
  #boxwrap .moviebox:nth-of-type(-n+3) { margin-top: 5.78%; }
  #boxwrap .moviebox:nth-of-type(2n) { margin-right: 0; }
  #boxwrap .moviebox:nth-of-type(-n+2) { margin-top: 0; }
  #boxwrap h3 { font-size: 4.267vw; }
  .moviebox .movie { padding-top: 56.061%; }
  .moviebox .title { margin-bottom: 0.75em; font-size: 4.267vw; }
  .moviebox .txt { font-size: 4.267vw; line-height: 192%; }
  /* 各市町村からのメッセージ */
  #countryMessage layer:before { width: 108.696%; padding-top: 18.12%; margin-left: -4.348%; background-image: url(../img/sp-bg-country.png); left: 0; transform: translateX(0); }
  #countryMessage h2 { width: 74.203%; padding: 11.595% 0 7.247%; }
  #countryMessage .countryList { padding-bottom: 13.044%; }
  #countryMessage .countryList li { width: 49.276%; margin: 2.896% 1.448% 0 0; }
  #countryMessage .countryList li:nth-of-type(5n) { margin-right: 1.448%; }
  #countryMessage .countryList li:nth-of-type(2n) { margin-right: 0; }
  /*popup*/
  .popupContents { margin: 4% auto; }
  .popup .popupinner { justify-content: center; padding: 14.667% 4%; }
  .popup .image { width: 72.464%; }
  .popup .txtbox { width: 100%; }
  .popup .name { margin-top: 1em; font-size: 5.334vw; text-align: center; }
  .popup .head { font-size: 4.267vw; line-height: 192%; }
  .popup .txt { font-size: 4.267vw; line-height: 227%; }
  .popup .txt a:hover { text-decoration: none; }
  .popup .btn { width: 100%; }
  .popup .btn a { padding: 1em 0; font-size: 4.267vw; }
  .popup .btn a:hover { color: #fff; background: none; }
  .popup .btn a:hover:after { background-image: url(../img/icon-popupbtn.png); }
  .popup .close { width: 8%; padding-top: 8%; margin: 4% 4% 0 0; }
  .popup.movie .framewrap { width: 100%; padding-top: 56.25%; }
  /* スライダー */
  #sliderwrap:before { padding-top: 40%; background-image: url(../img/sp-bg-slider.png); left: 0; transform: translateX(0); }
  #slider .slideitem:before, #slider .slideitem:after { padding-top: 6.667%; }
  #slider .itemwrap { width: 84.906%; }
  #slider .image { width: 100%; }
  #slider .txtbox { width: 100%; padding: 6.667% 7.778%; }
  #slider .name { font-size: 5.067vw; }
  #slider .head { font-size: 4.267vw; }
  #slider .txt { font-size: 4.267vw; line-height: 145%; }
  #slider .txt a:hover { text-decoration: underline; }
  .slick-prev, .slick-next { width: 6.667%; padding-top: 6.667%; }
  .slick-prev { margin-left: 11.334%; }
  .slick-next { margin-right: 11.334%; }
  /* こどもまんなかミーティング */
  #meeting .layer:before { width: 108.696%; padding-top: 18.12%; background-image: url(../img/sp-bg-meeting.png); }
  #meeting h2 { width: 69.566%; padding: 11.595% 0 4.348%; }
  #meeting .meetingbox { width: 100%; margin: 8.696% auto 0; }
  #meeting .meetingbox + .meetingbox { padding-bottom: 15.943%; }
  #meeting h2 + .txt { width: calc(100% + 1em); margin-left: -0.5em; font-size: 4.267vw; }
  .meetingbox h4 { padding-left: 1.75em; font-size: 4.267vw; line-height: 131%; box-sizing: border-box; }
  .meetingbox h4:before { width: 1.25em; padding-top: 1.25em; top: 0; transform: translate(0, -5%); }
  .meetingbox .txt { font-size: 4.267vw; line-height: 192%; }
  #meeting .meetingbox .image { width: 57.972%; margin-top: 4.348%; }
  .meetingbox .pictxt { margin: 4.348% 0 5.798%; justify-content: space-between; }
  .meetingbox li { font-size: 4.267vw; line-height: 192%; }
  #meeting .meetingbox ul + .image { width: 36.232%; margin: 0; }
  .meetingbox .moviehead { font-size: 4.267vw; line-height: 127%; }
  .meetingbox .movie { width: 81.16%; padding-top: 45.653%; }
  .meetingbox .btn { width: 100%; margin: 10.87% auto 0; }
  .meetingbox .btn a { padding: 0.6em 0; font-size: 4.267vw; }
  .meetingbox .btn a:hover { color: #e60024; background: none; }
  /* 県民のみなさまへのメッセージ */
  #message:after { width: 100%; padding-top: 80%; background-image: url(../img/sp-bg-message.png); }
  #message h2 { width: 100.435%; margin: 0 auto -0.2175; padding: 10.145% 0 4.348%; }
  #message .txt { width: 100%; padding-bottom: 7.247%; font-size: 4.267vw; line-height: 192%; }
  #carousel .carousel-pc { display: none; }
  #carousel .carousel-sp { display: block; }
  /* フッター ----------------------- */
  #footer .layer:before { padding-top: 7.247%; }
  #footer .policy { height: 34.667vw; }
  #footer .policywrap { padding: 4.348%; }
  #footer .policy p, #footer .policy li { font-size: 2.934vw; }
  #footer .policy a:hover { text-decoration: underline; }
  #footer .sitepolicy { padding: 1em 0; font-size: 2.934vw; }
  #footer .accessibility { padding: 4.348%; border-width: 4px; border-left: none; position: relative; }
  #footer .accessibility:before { content: ''; display: block; width: 4px; height: calc(100% + 8px); border-right: 4px dotted #fff; position: absolute; top: -4px; left: 0; box-sizing: border-box; }
  #footer .accessibility .head { font-size: 2.934vw; }
  #footer .accessibility .txt { font-size: 2.934vw; line-height: 163%; }
  #footer .last { padding: 4.348% 0; justify-content: center; }
  #footer .post { font-size: 2.667vw; text-align: center; }
  #footer .cr { font-size: 2.667vw; text-align: center; }
  #footer .sns { margin-top: 4.348%; }
  #footer .sns li { width: 8.696%; margin: 0 1.16%; } }
@media screen and (max-width: 580px) { #information { margin: 60px auto; }
  #information ul li a span.info-day, #information ul li a span.info-contents { display: block; width: 100%; font-size: 16px; }
  #movie #action-navi ul { margin-bottom: 40px; padding: 0; position: relative; width: 100%; }
  #movie #action-navi ul li { font-size: 12p; margin-right: 5px; width: calc(33.33% - 12px); padding: 3px 3px 0; border-radius: 5px 5px 0 0; }
  #movie #action-navi ul li:after, #movie #action-navi ul li:before { height: 5px; bottom: 0; }
  #movie #action-navi ul li .action-genre { padding: 5px 2px 8px; }
  #movie #action-navi ul li.active .action-genre { border-radius: 3px 3px 0 0; }
  #movie #action-navi ul:before { content: ""; width: 108%; height: 1px; background: #FFF; position: absolute; bottom: -1px; left: -4%; }
  #movie #company { padding: 0; max-width: 290px; }
  #movie #company #companyMore { padding: 0; }
  #movie #company #companyMore a { width: calc(100% - 20px); }
  #movie #company #action-list-navi ul { max-width: 290px; margin: 0 auto; }
  #movie #company #action-list-navi ul li { margin-bottom: 10px; }
  #movie #company #action-list-navi ul li a { font-size: 12px; line-height: 30px; }
  #movie #company #action-list-navi ul li span { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
  #movie #company #action-list .action-company .company-name, #movie #company #action-list .action-company .company-catch, #movie #company #action-list .action-company .company-explanatory { font-size: 14px; }
  #movie .action-container .action-desc { font-size: 14px; margin-bottom: 40px; }
  #movie .action-container .action-desc br { display: block; }
  .moviebox .title { font-size: 14px; } }
@media screen and (max-width: 460px) { .action-container .action-desc { font-size: 12px; }
  .action-genre span { display: none; } }
@media screen and (max-width: 330px) { #movie #action-navi ul li .action-genre { height: 3em; display: flex; align-items: center; justify-content: center; }
  #movie .action-container .action-desc br { display: none; } }