@charset "UTF-8";
/*
Theme Name: worpla-movie
Description: 教育サポートテーマ
*/

/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- common */

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height: 100%;overflow-x: hidden;font-size: 62.5%;}
body {
 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;font-size: 1.5rem;font-weight: 400;line-height: 2;letter-spacing: 0.1em;color: #4d4d4d;
 font-feature-settings: "palt";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;scroll-behavior: smooth;overflow-x: hidden;
}
@media only screen and (max-width: 896px) {body {min-width: initial;line-height: 1.8;}}
@media only screen and (max-width: 568px) {body {font-size: 1.4rem;}}
img, input[type="image"] {max-width: 100%;width:auto;height: auto;backface-visibility: hidden;-webkit-backface-visibility: hidden;}
select {width: 100%;height: 100%;padding: 0 1%;appearance: none;-moz-appearance: none;-webkit-appearance: none;background: none;border: none;}
input[type="checkbox"] {margin: 0;padding: 0;background: none;border: none;border-radius: 0;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
a {color: #f29100;text-decoration: underline;}
a:hover, a img:hover, button:hover {opacity: 0.7;transition: opacity .3s ease-out;}
a.disabled {pointer-events: none;}

.pc {display: inherit;}
.tab, .sp {display: none;}
.inner {width: auto;max-width: 1210px;margin: auto;}
.flex {display: -webkit-box;display: -moz-box;display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;flex-wrap: wrap}
.Acenter {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
@media only screen and (max-width: 1209px) {.inner {width: 95%;}}
@media only screen and (max-width: 896px) {.tab {display: block;}}
@media only screen and (max-width: 568px) {
.pc, .tab {display: none;}
.sp {display: block;}
.inner {width: 90%;}
}

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {}
#cboxOverlay{position: fixed;width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxContent{width: 100%!important;background:#000;line-height: 0;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}

.movieBox {width: 100%;margin: 0 auto;padding: 0;background: #fff;line-height: 0;}
.movieBox .video {width: 100%!important;height: auto!important;}
@media only screen and (max-width: 568px) {
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrap {min-height: 100vh;position: relative;padding: 0 0 180px;}
@media only screen and (max-width: 568px) {
#wrap {padding: 0 0 250px;}
}

header {width: 100%;padding: 1% 0;}
header p#logo {max-width: 260px;line-height: 0;}
@media only screen and (max-width: 568px) {
header {padding: 5% 0 3%;}
header p#logo {max-width: 180px;}
}

footer {width: 100%;padding: 2% 0 0;position: absolute;bottom: 0;background: #fffaeb;}
footer ul {justify-content: space-between;align-items: center;}
footer ul li:nth-child(1) p {color: #33ad37;font-size: 1.7rem;font-weight: 600;}
footer ul li:nth-child(1) address {line-height: 1.5;}
footer ul li:nth-child(2) {line-height: 0;}
footer ul li:nth-child(2) img {max-width: 425px;margin: 0;}
footer p#copy {width: 100%;margin: 2% auto 0;padding: 1.5% 0;text-align: center;background: #33ad37;color: #fff;line-height: 0;}
@media only screen and (max-width: 568px) {
footer {padding: 5% 0 0;}
footer ul {flex-direction: column-reverse;align-items: flex-start;}
footer ul li:nth-child(1) address {font-size: 1.3rem;}
footer ul li:nth-child(2) {margin: 0 0 2%;}
footer ul li:nth-child(2) img {max-width: 250px;}
footer p#copy {margin: 3% auto 0;padding: 4% 0;font-size: 1.3rem;}
}

#mv {margin: 0 auto;position: relative;top: -50px;z-index: -1;text-align: center;line-height: 0;}
#mv img {width: 100%;}
#mv h1 {margin:  0 auto 5%;}
@media only screen and (max-width: 568px) {}

#support {padding: 0 0 5%;}
#support h2 {margin: 0 auto 6%;}
#support ul {}
#support ul li {width: calc(90% / 3);margin: 0 5% 3% 0;}
#support ul li:nth-child(3n) {margin: 0;}
#support ul li img {border: 1px solid #ccc;border-radius: 8px;line-height: 0;}
#support ul li h3 {margin: 3% auto 0;padding: 0 0 0 5%;position: relative;font-size: 2.2rem;font-weight: 600;line-height: 1.2;}
#support ul li h3::before {content: "";width: 5px;height: 100%;position: absolute;left: 0;display: block;background: #f29100;border-radius: 10px;}
@media only screen and (max-width: 568px) {
#support h2 {width: 90%;}
#support ul li {width: 100%;margin: 0 auto 15%;}
#support ul li:nth-child(3n) {margin: 0 auto 15%;}
#support ul li h3 {margin: 5% auto 0;font-size: 1.8rem;}
}

#movie {padding: 5% 0;text-align: center;background: #f5f5f5;}
#movie h2 {margin: 0 auto 3%;padding: 2% 2%;display: inline-block;background: #33ad37;border-radius: 30px;color: #fff;font-size: 2.6rem;font-weight:700;line-height: 0;}
#movie ul {margin: 0 auto 5%;text-align: left;}
#movie ul li {width: calc(90% / 3);margin: 0 5% 3% 0;cursor: pointer;}
#movie ul li:nth-child(3n) {margin: 0;}
#movie ul li .thumb, #movie ul li .nomovie {width: 100%;height: 250px;position: relative;display: block;border: 3px solid #fff;border-radius: 10px;line-height: 0;}
#movie ul li .thumb::before, #movie ul li .nomovie::before {content: "";width: 80px;height:80px;position: absolute;top: 50%;left: 50%;z-index: 1;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);display: block;background: url("images/i-play.svg") no-repeat center / cover;}
#movie ul li .thumb img {width: 100%;height: 250px;object-fit: cover;position: relative;border: 3px solid #fff;border-radius: 10px;line-height: 0;}
#movie ul li .nomovie {position: relative;background:#ccc;}
#movie ul li .nomovie::after {content: "No image";position: absolute;top: 50%;left: 50%;z-index: 1;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);display: block;color: #f29100;font-size: 4rem;font-weight: 600;}
#movie ul li p {margin: 5% auto 0;}
@media only screen and (max-width: 568px) {
#movie {padding: 10% 0 5%;}
#movie h2 {margin: 0 auto 5%;padding: 5% 10%;font-size: 2rem;}
#movie ul li {width: 100%;margin: 0 auto 8%;}
#movie ul li:nth-child(3n) {margin: 0 auto 8%;}
#movie ul li img, #movie ul li .nomovie {height: 200px;}
}

.login, .register, .mypage {width: auto;max-width: 500px;margin: auto;padding: 5% 0 10%;}
.link-text {margin: 2% auto 0;font-size: 1.3rem;line-height: 1.5;}
.login .buttons {margin: 5% auto;}
.register p.register_status {width: auto;max-width: 500px;margin: auto;padding: 5% 0 10%;}
.register ul.register_links {display: flex;flex-wrap: wrap;}
.register ul.register_links li:nth-child(1) {margin: 0 10% 0 0;}
#wpmem_login {margin: 0 auto 10%;}
.form legend {margin: 0 0 2%;font-size: 2rem;font-weight: 700;}
.form input[type="text"], .form input[type="password"] {width: 100%;margin: 0 0 2%;padding: 1%;background: #fff;border: 1px solid #afafaf;border-radius: 3px;}
.form input[type="submit"] {width: 100%;padding: 20px 0;display: block;text-align: center;background: #f29100;border-radius: 3px;color: #fff;font-size: 2rem;font-weight: 700;letter-spacing: 0.1em;line-height: 0;}
input[type="checkbox"] {padding: 0 0 0 30px;position: relative;cursor: pointer;vertical-align: middle;}
input[type="checkbox"]::before, input[type="checkbox"]::after {content: "";position: absolute;display: block;}
input[type="checkbox"]::before {width: 20px;height: 20px;top: 50%;left: 5px;transform: translateY(-50%);background-color: #fff;border-radius: 0%;border: 1px solid #afafaf;}
input[type="checkbox"]::after {width: 11px;height: 6px;top: -5px;left: 10px;transform: rotate(-45deg);border-bottom: 3px solid #afafaf;border-left: 3px solid #afafaf;opacity: 0;}
input[type="checkbox"]:checked::after {opacity: 1;}
@media only screen and (max-width: 568px) {
.login, .register, .mypage {width: 90%;max-width: auto;padding: 10% 0;}
#wpmem_register_form legend {font-size: 2rem;}
.form input[type="submit"] {padding: 8% 0;font-size: 1.8rem}
}

#login {max-width: 300px;height: 400px;margin: 10% auto 0;position: relative;}
#login #loginform-custom {}
#login #loginform-custom input[type="text"], #login #loginform-custom input[type="password"] {width: 100%;margin: 0 0 5%;padding: 2%;background: #fff;border: 1px solid #afafaf;border-radius: 3px;}
#login #loginform-custom button {width: 100%;padding: 20px 0;display: block;text-align: center;background: #f29100;border-radius: 3px;color: #fff;font-size: 2rem;font-weight: 700;letter-spacing: 0.1em;line-height: 0;}
#login #loginform-custom input[type="submit"] {width: 100%;padding: 20px 0;display: block;text-align: center;background: #f29100;border-radius: 3px;color: #fff;font-size: 2rem;font-weight: 700;letter-spacing: 0.1em;line-height: 0;}
#login p {margin: 3% auto 0;font-size: 1.3rem;line-height: 1.5;}
#login p a {color: #f29100;text-decoration: underline;mrgin: 10px 0;}
@media only screen and (max-width: 568px) {
#login {height: 350px;}
#login #loginform-custom button {font-size: 1.8rem;}
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */