@charset 'UTF-8';
div.wpcf7 {
margin: 0;
padding: 0;
}
div.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: 0;
padding: 0;
border: 0;
}
div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #ff0000;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
border: 2px solid #f7e700;
}
.wpcf7-form-control-wrap {
position: relative;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
border: 1px solid #ff0000;
background: #fff;
padding: .2em .8em;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-display-none {
display: none;
}
div.wpcf7 .ajax-loader {
visibility: hidden;
display: inline-block;
background-image: url(//social-kids-action.jp/wp/wp-content/plugins/contact-form-7/images/ajax-loader.gif);
width: 16px;
height: 16px;
border: none;
padding: 0;
margin: 0 0 0 4px;
vertical-align: middle;
}
div.wpcf7 .ajax-loader.is-active {
visibility: visible;
}
div.wpcf7 div.ajax-error {
display: none;
}
div.wpcf7 .placeheld {
color: #888;
}
div.wpcf7 .wpcf7-recaptcha iframe {
margin-bottom: 0;
}
div.wpcf7 input[type="file"] {
cursor: pointer;
}
div.wpcf7 input[type="file"]:disabled {
cursor: default;
}
div.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
 html {
box-sizing: border-box;
overflow-y: scroll;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,
::before,
::after { box-sizing: inherit;}
::before,
::after { text-decoration: inherit; vertical-align: inherit;}
* {
background-repeat: no-repeat;
line-height: 1;
outline: 0;
margin: 0;
padding: 0;
} audio:not([controls]) { display: none; height: 0;}
hr { overflow: visible;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { display: block;}
table { border-spacing: 0; border-collapse: collapse;}
ul { list-style: none;}
summary { display: list-item;}
small { font-size: 80%;}
[hidden],
template { display: none;}
abbr[title] { border-bottom: 1px dotted; text-decoration: none;}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:active,
a:hover { outline-width: 0;}
code,
kbd,
pre,
samp { font-family: monospace, monospace;}
b,
strong { font-weight: bolder;}
dfn { font-style: italic;}
mark { background-color: #ff0; color: #000;}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub { bottom: -0.25em;}
sup { top: -0.5em;} input { border-radius: 0;}
button,
[type="button"],
[type="reset"],
[type="submit"]
[role="button"] { cursor: pointer;}
[disabled] { cursor: default;}
[type="number"] { width: auto;}
[type="search"] { -webkit-appearance: textfield;}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
textarea { overflow: auto; resize: vertical;}
button,
input,
optgroup,
select,
textarea { font: inherit;}
optgroup { font-weight: bold;}
button { overflow: visible;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: 0; padding: 0;}
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { outline: 1px dotted ButtonText;}
button,
html [type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button;}
button, select { text-transform: none;}
button, input, select, textarea, label { -webkit-tap-highlight-color: rgba(0,0,0,0);}
button, input, select, textarea {
background-color: transparent;
border-style: none;
color: inherit;
}
select { -moz-appearance: none; -webkit-appearance: none;}
select::-ms-expand { display: none;}
select::-ms-value { color: currentColor;}
legend {
border: 0;
color: inherit;
display: table;
max-width: 100%;
white-space: normal;
}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;} img { border-style: none;}
progress { vertical-align: baseline;}
svg:not(:root) { overflow: hidden;}
audio,
canvas,
progress,
video { display: inline-block;} @media screen {
[hidden~="screen"] { display: inherit;}
[hidden~="screen"]:not(:active):not(:focus):not(:target) { position: absolute !important; clip: rect(0 0 0 0) !important;}
}
[aria-busy="true"] { cursor: progress;}
[aria-controls] { cursor: pointer;}
[aria-disabled] { cursor: default;} ::-moz-selection {
background-color: #b3d4fc;
color: #000;
text-shadow: none;
}
::selection {
background-color: #b3d4fc;
color: #000;
text-shadow: none;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide { float: left;}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
} .swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide { height: auto;}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
} .swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
} .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y;}
.swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x;} .swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
} .swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden { opacity: 0;} .swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 32px;
left: 0;
width: 100%;
} .swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #fff;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer;}
.swiper-pagination-white .swiper-pagination-bullet { background: #fff;}
.swiper-pagination-bullet-active { background: #38beef;}
.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff;}
.swiper-pagination-black .swiper-pagination-bullet-active { background: #231815;}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 8px 0; display: block;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 8px;} .swiper-pagination-progress { background: rgba(0, 0, 0, 0.25); position: absolute;}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #38beef;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-progress.swiper-pagination-white { background: rgba(255, 255, 255, 0.5);}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff;}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #231815;} .swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper { -ms-perspective: 1200px;} .swiper-container-cube,
.swiper-container-flip { overflow: visible;}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none;}
.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto;}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
} .swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible;}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #231815;
opacity: .2;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
} .swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none;}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto;}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
} .swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag { cursor: move;} .swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% { -webkit-transform: rotate(360deg);}
}
@keyframes swiper-preloader-spin {
100% { transform: rotate(360deg);}
}
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #000;
opacity: .8;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 16px;
box-sizing: border-box;
}
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before { display: none;}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { cursor: auto; width: 100%;}
.mfp-ajax-cur { cursor: progress;}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content { cursor: auto;}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure { display: none;}
.mfp-hide { display: none !important;}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a { color: #CCC;}
.mfp-preloader a:hover { color: #FFF;}
.mfp-s-ready .mfp-preloader { display: none;}
.mfp-s-error .mfp-content { display: none;}
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}
button::-moz-focus-inner { border: 0; padding: 0;}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: .65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover, .mfp-close:focus { opacity: 1;}
.mfp-close:active { top: 1px;}
.mfp-close-btn-in .mfp-close { color: #333;}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: #FFF;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
opacity: .65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active { margin-top: -54px;}
.mfp-arrow:hover, .mfp-arrow:focus { opacity: 1;}
.mfp-arrow:before, .mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: .7;
}
.mfp-arrow-left { left: 0;}
.mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px;}
.mfp-arrow-left:before { border-right: 27px solid #3F3F3F; margin-left: 25px;}
.mfp-arrow-right { right: 0;}
.mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px;}
.mfp-arrow-right:before { border-left: 27px solid #3F3F3F;}
.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px;}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close { top: -40px;}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, .6);
background: #000;
}
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
.mfp-figure { line-height: 0;}
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, .6);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure { margin: 0;}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px;
}
.mfp-image-holder .mfp-content { max-width: 100%;}
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer;}
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all .6s;
transition: all .6s;
}
.mfp-fade.mfp-bg.mfp-ready { opacity: .8;}
.mfp-fade.mfp-bg.mfp-removing { opacity: 0;}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all .6s;
transition: all .6s;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1;}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0;}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
.mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0;}
.mfp-img-mobile img.mfp-img { padding: 0;}
.mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0;}
.mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px;}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, .6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty { padding: 0;}
.mfp-img-mobile .mfp-counter { right: 5px; top: 3px;}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, .6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(.75);
transform: scale(.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.mfp-container { padding-left: 6px; padding-right: 6px; }
}
@font-face {
font-family: "MyYuMinchoM";
font-weight: normal;
src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
}
@font-face {
font-family: "MyYuMinchoM";
font-weight: bold;
src: local("YuMincho-Bold"), local("Yu Mincho");
}
@font-face {
font-family: "MyYuGothicM";
font-weight: normal;
src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}
@font-face {
font-family: "MyYuGothicM";
font-weight: bold;
src: local("YuGothic-Bold"), local("Yu Gothic");
}
@font-face {
font-family: "icomoon";
src: url(//social-kids-action.jp/wp/wp-content/themes/skap/font/icomoon.eot?kk4zy8);
src: url(//social-kids-action.jp/wp/wp-content/themes/skap/font/icomoon.eot?kk4zy8#iefix) format("embedded-opentype"),
url(//social-kids-action.jp/wp/wp-content/themes/skap/font/icomoon.ttf?kk4zy8) format("truetype"),
url(//social-kids-action.jp/wp/wp-content/themes/skap/font/icomoon.woff?kk4zy8) format("woff"),
url(//social-kids-action.jp/wp/wp-content/themes/skap/font/icomoon.svg?kk4zy8#icomoon) format("svg");
font-weight: normal;
font-style: normal;
}
html, body { width: 100%; height: 100%;}
html {
background-color: #fff;
color: #555;
font-family: MyYuMinchoM, YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-family: -apple-system, BlinkMacSystemFont, Roboto, MyYuGothicM, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
font-size: 14px;
letter-spacing: 0em;
overflow-wrap: break-word;
word-wrap: break-word;
}
#svg, #svg-program { display: none;}
#screen {
background-color: #fff;
min-width: 100%;
height: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
font-weight: bold;
margin: 0 auto;
}
h1:not(:last-child) { margin: 0 auto 16px;}
h2:not(:last-child), h3:not(:last-child),
h4:not(:last-child), h5:not(:last-child), h6:not(:last-child) { margin: 0 auto 32px;}
h1, h2 { text-align: center;}
h1 { font-size: 1.999rem; line-height: 1.4;}
h2 { font-size: 1.414rem; line-height: 1.6;}
h3, h4, h5, h6 { font-size: 1rem; line-height: 1.6;}
table, tbody, tr, th, td { display: block;}
table {
box-sizing: border-box;
table-layout: fixed;
width: 100%;
}
table:not(:last-child), tr:not(:last-child) { margin: 0 auto 32px;}
th, td { line-height: 2;}
th {
color: #000;
font-weight: normal;
text-align: left;
vertical-align: top;
margin-bottom: 8px;
}
td {
background-color: #f4f4f4;
border-bottom: solid 2px #fff;
position: relative;
padding: 8px 16px;
}
p, address { line-height: 2; text-align: justify;}
address, small { font-size: .75rem;}
address, em { font-style: normal;}
strong, em { font-weight: bold;}
svg, img {
display: inline-block;
width: 100%;
height: auto;
}
a, a:visited, a:hover { color: #00afa0; text-decoration: none;}
a, a:before, a:after { transition: all .3s cubic-bezier(.86, 0, .07, 1) 0s;}
p:not(:last-child) { margin: 0 0 32px;}
address { text-align: center;}
svg { vertical-align: middle;}
img { vertical-align: bottom;}
.img-H {
font-size: 1rem;
line-height: 1;
margin: -13px 0 27px;
}
.img-H svg { width: auto; height: 2.6875rem;}
.color-G { color: #00afa0;}
.color-R { color: #e5495f;}
.color-B { color: #000;}
.color-D { color: #555;}
.color-W { color: #fff;}
.font-XL { font-size: 2.827rem;}
.font-L { font-size: 1.999rem;}
.font-M { font-size: 1.414rem;}
.font-S { font-size: .75rem;}
.font-B { font-weight: bold;}
.txt-C { text-align: center;}
.txt-L { text-align: left;}
.txt-R { text-align: right;}
.sp { display: block;}
.pc { display: none;}
.clearfix:after {
content: " ";
clear: both;
display: block;
}
tbody, tr { display: block;}
@media screen and (min-width: 768px){
html { font-size: 16px;}
#screen { min-width: 960px;}
h1:not(:last-child) { margin: 0 auto 32px;}
table { display: table;}
tbody { display: table-row-group;}
tr:not(:last-child), th { margin: 0;}
tr { display: table-row;}
th, td { display: table-cell; padding-top: 32px; padding-bottom: 8px;}
th { border-bottom: solid 1px #00afa0; width: 25%;}
td {
background-color: transparent;
border-bottom: solid 1px #e4e4e4;
padding-left: 0;
padding-right: 0;
}
.img-H { margin: -22px 0 24px;}
.img-H svg { height: 3.85625rem;}
.sp { display: none;}
.pc { display: block;}
} [class^="icon-"], [class*=" icon-"] {
font-family: "icomoon" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-transform: none;
text-decoration: inherit;
speak: none;
}
.icon-arrow-down:before { content: "\e900";}
.icon-arrow-left:before { content: "\e901";}
.icon-arrow-right:before { content: "\e902";}
.icon-arrow-up:before { content: "\e903";}
.icon-close:before { content: "\e904";}
.icon-error:before { content: "\e905";}
.icon-mail:before { content: "\e906";}
.icon-menu:before { content: "\e907";}
.icon-phone:before { content: "\e908";}
.icon-place:before { content: "\e909";}
.icon-play:before { content: "\e90a";}  @-webkit-keyframes openBounce {
0% { -webkit-transform: rotate(135deg);}
40% { -webkit-transform: rotate(-16deg);}
80% { -webkit-transform: rotate(8deg);}
100% { -webkit-transform: rotate(0deg);}
}
@keyframes openBounce {
0% { transform: rotate(135deg);}
40% { transform: rotate(-16deg);}
80% { transform: rotate(8deg);}
100% { transform: rotate(0deg);}
}
@-webkit-keyframes closeBounce {
0% { -webkit-transform: rotate(0deg);}
40% { -webkit-transform: rotate(151deg);}
80% { -webkit-transform: rotate(128deg);}
100% { -webkit-transform: rotate(135deg);}
}
@keyframes closeBounce {
0% { transform: rotate(0deg);}
40% { transform: rotate(151deg);}
80% { transform: rotate(128deg);}
100% { transform: rotate(135deg);}
} @-webkit-keyframes hoverBounce {
0%, 100% { -webkit-transform: scale(1, 1);}
25% { -webkit-transform: scale(.92, 1.08);}
50% { -webkit-transform: scale(1.08, .92);}
75% { -webkit-transform: scale(.96, 1.04);}
}
@keyframes hoverBounce {
0%, 100% { transform: scale(1, 1);}
25% { transform: scale(.92, 1.08);}
50% { transform: scale(1.08, .92);}
75% { transform: scale(.96, 1.04);}
} @-webkit-keyframes fadeIn {
0% { opacity: 0; top: 32px;}
100% { opacity: 1; top: 0;}
}
@keyframes fadeIn {
0% { opacity: 0; top: 32px;}
100% { opacity: 1; top: 0;}
} @-webkit-keyframes upBounce {
0% { border: solid 1px #e4e4e4; -webkit-transform: scale(.75, .75);}
25% { -webkit-transform: scale(.92, 1.08);}
50% { -webkit-transform: scale(1.08, .92);}
75% { -webkit-transform: scale(.96, 1.04);}
100% { border: solid 2px #00afa0; -webkit-transform: scale(1, 1);}
}
@keyframes upBounce {
0% { border: solid 1px #e4e4e4; transform: scale(.75, .75);}
25% { transform: scale(.92, 1.08);}
50% { transform: scale(1.08, .92);}
75% { transform: scale(.96, 1.04);}
100% { border: solid 2px #00afa0; transform: scale(1, 1);}
}
@-webkit-keyframes downBounce {
0% { border: solid 2px #00afa0; -webkit-transform: scale(1, 1);}
100% { border: solid 1px #e4e4e4; -webkit-transform: scale(.75, .75);}
}
@keyframes downBounce {
0% { border: solid 2px #00afa0; transform: scale(1, 1);}
100% { border: solid 1px #e4e4e4; transform: scale(.75, .75);}
} @-webkit-keyframes checkBounce {
0% { -webkit-transform: scale(0) rotate(45deg);}
75% { -webkit-transform: scale(1.32) rotate(45deg);}
100% { -webkit-transform: scale(1) rotate(45deg);}
}
@keyframes checkBounce {
0% { transform: scale(0) rotate(45deg);}
75% { transform: scale(1.32) rotate(45deg);}
100% { transform: scale(1) rotate(45deg);}
}
@-webkit-keyframes uncheckBounce {
0% { -webkit-transform: scale(1) rotate(45deg);}
100% { -webkit-transform: scale(0) rotate(45deg);}
}
@keyframes uncheckBounce {
0% { transform: scale(1) rotate(45deg);}
100% { transform: scale(0) rotate(45deg);}
} #header, #main, #footer { position: relative; width: 100%;}
#header { padding-top: 53px;}
#footer .container {
padding-top: 32px;
padding-bottom: 32px;
padding-left: 16px;
padding-right: 16px;
}
.section { border-bottom: solid 1px #e4e4e4;}
.section-header, .section-content {
position: relative;
padding-left: 16px;
padding-right: 16px;
}
.section-header { margin: 0 auto 34px;}
.section-header h2 {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
transition: all .9s cubic-bezier(.23, 1, .32, 1) 0s;
}
.section-header h2:not(:last-child) { margin: 0 auto 16px;}
.section-header.animation h2 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.container, .container-min { margin: 0 auto;}
@media screen and (min-width: 768px){
#header { padding-top: 73px;}
.section-header { margin: 0 auto 64px;}
.section-header h2:not(:last-child) { margin: 0 auto 32px;}
.container { width: 960px;}
.container-min { width: 640px;}
} .flex, .flex-R {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
margin: 0 auto 16px;
padding-left: 8px;
padding-right: 8px;
}
.flex-1, .flex-2, .flex-3, .flex-4, .flex-5, .flex-6, .flex-7, .flex-8,
.flex-9, .flex-10, .flex-11, .flex-12 {
flex: 0 0 auto;
position: relative;
padding-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
}
.flex-1, .flex-2, .flex-3 { width: 50%;}
.flex-4, .flex-5, .flex-6, .flex-7, .flex-8,
.flex-9, .flex-10, .flex-11, .flex-12 { width: 100%;}
@media screen and (min-width: 768px){
.flex, .flex-R {
justify-content: flex-start;
margin: 0 auto 32px;
padding-left: 0;
padding-right: 0;
}
.flex-R { flex-flow: row-reverse wrap;}
.flex-1, .flex-2, .flex-3, .flex-4, .flex-5, .flex-6, .flex-7, .flex-8,
.flex-9, .flex-10, .flex-11, .flex-12 {
padding-bottom: 32px;
padding-left: 16px;
padding-right: 16px;
}
.flex-1 { width: 8.33333333%;}
.flex-2 { width: 16.66666666%;}
.flex-3 { width: 25%;}
.flex-4 { width: 33.33333333%;}
.flex-5 { width: 41.66666667%;}
.flex-6 { width: 50%;}
.flex-7 { width: 58.33333333%;}
.flex-8 { width: 66.66666667%;}
.flex-9 { width: 75%;}
.flex-10 { width: 83.33333333%;}
.flex-11 { width: 91.66666667%;}
.flex-12 { width: 100%;}
} .hwrap {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} .btn-G, .btn-W, .btn-C, .btn-H { margin: 0 auto;}
.btn-G, .btn-W, .btn-C, .btn-H a { text-align: center; display: block;}
.btn-G, .btn-W, .btn-H { width: 288px;}
.btn-G, .btn-W, .btn-H a {
font-weight: bold;
padding-top: 16px;
padding-bottom: 16px;
}
.btn-G, .btn-C, .btn-H a {
background-color: rgba(0, 175, 160, .8);
border: solid 2px #fff;
color: #fff !important;
}
.btn-G, .btn-W { border-radius: 128px;}
.btn-W { background-color: #fff;}
.btn-C {
line-height: 52px;
border-radius: 50%;
font-size: 1.999rem;
width: 56px;
height: 56px;
}
.btn-H:after {
content: " ";
clear: both;
display: block;
}
.btn-H li { float: left;}
.btn-H a { width: 144px;}
.btn-H li:first-child a { border-right: solid 1px #fff; border-radius: 128px 0 0 128px;}
.btn-H li:last-child a { border-left: solid 1px #fff;border-radius: 0 128px 128px 0;}
a:hover .btn-G, a:hover .btn-W, a:hover .btn-C, .btn-G:hover, .btn-W:hover, .btn-C:hover, .btn-H a:hover {
-webkit-animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
}
@media screen and (min-width: 768px){
.btn-G, .btn-C, .btn-H a { border: solid 4px #fff;}
.btn-C { line-height: 48px;}
.btn-H li:first-child a { border-right: solid 2px #fff;}
.btn-H li:last-child a { border-left: solid 2px #fff;}
} #intro h1, #intro-bg, #intro-swiper { transition: all 1.5s cubic-bezier(.23, 1, .32, 1) 0s;}
#intro.animation h1, #intro.animation #intro-bg, #intro.animation #intro-swiper { -webkit-transform: scale(1); transform: scale(1);}
#intro.animation h1, #intro.animation #intro-swiper { opacity: 1;}
#intro-logo, #intro-notice, #intro-bg {
position: absolute;
left: 0;
right: 0;
}
#intro-logo, #intro-title, #intro-notice { z-index: 2;}
#intro, #intro-title { position: relative;}
#intro-logo, #intro-title { padding-left: 16px; padding-right: 16px;}
#intro-notice, #intro-bg { bottom: 0;}
#intro-bg, #intro-swiper { -webkit-transform: scale(1.08); transform: scale(1.08);}
#intro-bg, #intro-swiper .swiper-slide { background-position: center; background-size: cover;}
#intro { overflow: hidden;}
#intro h1 {
opacity: 0;
-webkit-transform: scale(.96);
transform: scale(.96);
}
#intro-logo { top: 32px;}
#intro-logo h1 { width: 256px; max-width: 50%;}
#intro-title { padding-top: 64px; padding-bottom: 64px;}
#intro-title p { text-shadow: 0px 0px 16px #fff;}
#intro-title a { font-weight: bold;}
#intro-notice { background-color: rgba(0, 175, 160, .8); border: solid 2px #fff;}
#intro-notice .flex { padding-top: 16px; margin: 0;}
#intro-notice p { text-align: center;}
#intro-bg { opacity: .5; top: 0;}
#intro-swiper { height: calc(100vh - 53px);}
#intro-swiper .swiper-slide { min-width: 100%;}
@media screen and (min-width: 768px){
#intro-title { padding-top: 128px; padding-bottom: 128px;}
#intro-notice { border: solid 4px #fff;}
#intro-notice .flex { padding-top: 32px;}
#intro-notice p { text-align: left;}
#intro-swiper { height: calc(100vh - 73px);}
#intro-swiper .swiper-slide:first-child { background-position: center top;}
} #nav {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
#nav a {
text-align: center;
display: block;
position: relative;
padding-left: 16px;
padding-right: 16px;
}
#nav h2 {
font-size: 1rem;
line-height: 1rem;
float: left;
margin: 0;
}
#nav h2 a { line-height: 52px; height: 52px;} #nav-toggle {
border: solid 2px #fff;
background-color: rgba(0, 175, 160, .8);
overflow: hidden;
position: relative;
float: right;
width: 52px;
height: 52px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
background-color: #fff;
content: "";
display: block;
position: absolute;
width: 32px;
height: 2px;
}
#nav-toggle span {
top: calc(50% - 1px);
left: 8px;
-webkit-animation: openBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: openBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
}
#nav-toggle span:before, #nav-toggle span:after {
left: 0;
transition: all .3s cubic-bezier(.86, 0, .07, 1) 0s;
}
#nav-toggle span:before { top: calc(50% - 9px);}
#nav-toggle span:after { top: calc(50% + 7px);}
#nav-toggle.active span {
-webkit-animation: closeBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: closeBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: calc(50% - 2px);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
} #nav-list {
background-color: rgba(244, 244, 244, .8);
border: solid 2px #fff;
position: fixed;
top: 53px;
bottom: 0;
left: 0;
right: 0;
z-index: 98;
}
#nav-list li { border-bottom: solid 2px #fff;}
#nav-list a {
background-color: rgba(0, 175, 160, .8);
padding-top: 32px;
padding-bottom: 32px;
}
#nav-list a.active { background-color: transparent;}
#nav-list svg {
fill: #fff;
opacity: 0;
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
transition: all .3s cubic-bezier(.86, 0, .07, 1) 0s;
}
#nav-list svg.active {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#nav-list a.active svg { fill: #000;}
.nav-logo { width: 16.49375rem}
.nav-home { width: 3.90736rem;}
.nav-programdetail { width: 9.41199rem;}
.nav-reportlist { width: 7.9107rem;}
.nav-presenlist { width: 10.86272rem;}
.nav-contact { width: 8.22879rem;}
@media screen and (min-width: 768px){
#nav h2 a, #nav-list a { line-height: 72px; height: 72px;}
#nav-list {
background-color: transparent;
border: none;
float: right;
position: static;
}
#nav-list li { border-bottom: none; float: left;}
#nav-list a {
background-color: transparent;
padding-top: 0;
padding-bottom: 0;
}
#nav-list a:before {
background-color: rgba(0, 175, 160, .8);
content: "";
display: block;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 0;
height: 2px;
margin: 0 auto;
}
#nav-list a.active:before, #nav-list a:hover:before { width: 100%;}
#nav-list svg {
fill: #000;
opacity: 1;
-webkit-transform: none;
transform: none;
}
#nav-list a.active svg { fill: #000;}
.nav-home { width: 2.7627rem;}
.nav-programdetail { width: 6.65625rem;}
.nav-reportlist { width: 5.4942rem;}
.nav-presenlist { width: 7.68125rem;}
.nav-contact { width: 5.8194rem;}
} #skap { padding-top: 64px; padding-bottom: 48px;}
#skap-title { position: relative; z-index: 2;}
#skap-title h2, #skap-title figure { opacity: 0; transition: all .9s cubic-bezier(.23, 1, .32, 1) 0s;}
#skap-title.animation h2, #skap-title.animation figure {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#skap-title h2 {
-webkit-transform: translateY(32px);
transform: translateY(32px);
width: 100%;
margin: 0 0 -5%;
padding: 0 16px;
}
#skap-title figure {
position: relative;
z-index: -1;
-webkit-transform: translateY(-32px);
transform: translateY(-32px);
}
#skap-title h3 {
background-color: rgba(0, 175, 160, .8);
border: solid 2px #fff;
margin: -32px 16px 16px;
padding: 16px;
}
#skap-txt { margin: 0 0 16px;}
.skap-img { width: 50%;}
@media screen and (min-width: 768px){
#skap { padding-top: 128px; padding-bottom: 64px;}
#skap-title h2 {
width: 18rem;
margin: 0 0 32px;
padding: 210px 0 0;
}
#skap-title figure {
position: absolute;
top: 0;
right: 0;
width: 768px;
}
#skap-title h3 {
width: 288px;
margin: 0;
padding: 32px;
}
#skap-txt { margin: 0;}
.skap-img.flex-4 { width: 33.33333333%;}
#skap p { padding-left: 160px;}
} #program-info { padding-top: 64px; padding-bottom: 32px;}
#program-info .section-header { padding: 0;}
#program-info figure {
opacity: 0;
width: 288px;
max-width: 50%;
margin: 0 auto 32px;
transition: all .3s cubic-bezier(.23, 1, .32, 1) .3s;
}
#program-info.animation figure {
opacity: 1;
-webkit-animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
}
#program-info img { border-radius: 50%;}
#program-mov { padding-bottom: 48px;}
#program-mov a {
background-image: url(//social-kids-action.jp/wp/wp-content/themes/skap/img/program/program-mov.png);
background-position: center;
background-size: cover;
display: block;
position: relative;
padding-top: 70.72135%;
}
#program-mov a:hover { opacity: .8;}
#program-mov a:before {
border: solid 2px #fff;
content: "";
display: block;
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
}
#program-mov a:hover:before {
top: 16px;
bottom: 16px;
left: 16px;
right: 16px;
}
#program-mov button {
position: absolute;
top: calc(50% - 28px);
left: 0;
right: 0;
}
#program-mov-modal {
position: relative;
width: 100%;
max-width: 928px;
margin: 0 auto;
}
#program-mov-modal video { display: block; width: 100%;}
#program-mov-modal button {
background-color: rgba(0, 175, 160, .8);
border: solid 2px #fff;
line-height: 52px;
opacity: 1;
position: absolute;
top: -28px;
right: -28px;
}
@media screen and (min-width: 768px){
#program .flex-R { margin: 0;}
#program-info { padding-top: 128px; padding-bottom: 128px;}
#program-info figure { max-width: 288px; margin: 0 auto 64px;}
#program-mov { padding-bottom: 0;}
#program-mov a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
padding-top: 0;
} #program-mov button {
line-height: 70px;
font-size: 2.827rem;
width: 78px;
height: 78px;
}
#program-mov-modal button { border: solid 4px #fff; line-height: 48px;}
} #programdetail { padding-top: 64px; padding-bottom: 64px;}
#programdetail h2 {
background-color: rgba(0, 175, 160, .8);
color: #fff;
text-align: center;
margin: 0 16px 32px;
padding: 16px;
}
.programdetail-txt { margin-bottom: 16px;}
.programdetail-card { position: relative; padding-top: 1.534375rem;}
.programdetail-card h3 {
position: absolute;
top: 0;
left: 16px;
width: 7.425rem;
}
.programdetail-card h4 {
text-align: center;
position: relative;
padding-top: 16px;
padding-bottom: 10px;
}
.programdetail-card h4:after {
background-color: #00afa0;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 64px;
height: 2px;
margin: 0 auto;
}
.programdetail-card-inner { border: solid 1px #e4e4e4; height: 100%;}
.programdetail-card-txt { position: relative; padding: 16px;}
.programdetail-card-txt:before, .programdetail-card-txt:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
z-index: 1;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
}
.programdetail-card-txt:before { border: solid 18px transparent; border-bottom-color: #e4e4e4;}
.programdetail-card-txt:after { border: solid 16px transparent; border-bottom-color: #fff;}
#programdetail-post .container-min { margin: 0 auto 32px;}
@media screen and (min-width: 768px){
.programdetail-txt { margin-bottom: 0; padding-top: 1.534375rem;}
.programdetail-txt div {
background-color: #f4f4f4;
border: solid 1px #e4e4e4;
height: 100%;
padding: 16px;
}
} #report, #report-list, #report-post { position: relative; padding-top: 64px;}
#report, #report-post { padding-bottom: 64px;}
#report-tab {
position: absolute;
top: -48px;
width: 100%;
padding-left: 16px;
padding-right: 16px;
z-index: 2;
}
#report-tab .swiper-container {
position: relative;
border: solid 2px #fff;
border-radius: 8px 8px 0 0;
}
#report-tab .swiper-slide {
border-left: solid 1px #fff;
border-right: solid 1px #fff;
width: 30%;
}
#report-tab .swiper-slide:first-child { border-left: solid 2px #fff; margin-left: -2px;}
#report-tab .swiper-slide:last-child { border-right: solid 2px #fff; margin-right: -2px;}
#report-tab a {
background-color: rgba(0, 175, 160, .8);
color: #fff;
font-weight: bold;
text-align: center;
line-height: 46px;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
overflow: hidden;
height: 46px;
padding-left: 8px;
padding-right: 8px;
}
#report-tab a:hover, #report-tab .active { background-color: #fff; color: #555;}
.report-article {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
transition: all .6s cubic-bezier(.23, 1, .32, 1) .3s;
}
.report-article.animation {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.report-article a, .report-thumb time { display: block;}
.report-article a, .report-thumb { position: relative;}
.report-article a {
background-color: #fff;
border: solid 1px #e4e4e4;
border-radius: 8px;
height: 100%;
}
.report-article a:hover { opacity: .8;}
.report-thumb {
background-position: center;
background-size: cover;
border-radius: 8px 8px 0 0;
padding-top: 70.72135%;
}
.report-thumb time, .report-thumb button { position: absolute;}
.report-thumb time, .report-content { padding: 16px;}
.report-thumb time {
background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.report-thumb button {
right: 16px;
bottom: -28px;
z-index: 2;
}
.report-content h3, .report-content .report-cat { margin: 0 0 16px;}
.report-content p { color: #555; font-size: .75rem;}
.report-content .report-cat { color: #00afa0;}
#report-pagenation { margin-bottom: 64px;}
#report-pagenation ul {
background-color: #f4f4f4;
overflow: hidden;
border-radius: 8px;
}
#report-pagenation li { float: left; width: 16.66666%;}
#report-pagenation a, #report-pagenation span {
box-sizing: content-box;
border-left: solid 1px #fff;
border-right: solid 1px #fff;
font-weight: bold;
text-align: center;
line-height: 46px;
display: block;
height: 46px;
}
#report-pagenation li:nth-child(n + 7) a, #report-pagenation li:nth-child(n + 7) span { border-top: solid 2px #fff;}
#report-pagenation li:nth-child(6n + 1) a, #report-pagenation li:nth-child(6n + 1) span { border-left: none;}
#report-pagenation li:nth-child(6n) a, #report-pagenation li:nth-child(6n) span { border-right: none;}
#report-pagenation a { background-color: rgba(0, 175, 160, .8); color: #fff;}
#report-pagenation a:hover, #report-pagenation .active,
#report-pagenation span { background-color: #fff; color: #555;}
#report-prevnext { padding-bottom: 64px;}
#report-prev, #report-next {
border: solid 1px #e4e4e4;
overflow: hidden;
width: 50%;
float: left;
}
#report-prev { border-radius: 8px 0 0 8px;}
#report-next { border-radius: 0 8px 8px 0; border-left: none;}
#report-prev .report-prevnext-link { padding-left: 2.827rem;}
#report-next .report-prevnext-link { padding-right: 2.827rem;}
.report-prevnext-link {
pointer-events: auto;
position: relative;
display: block;
padding: 8px;
}
a.report-prevnext-link:hover { opacity: .8}
a.report-prevnext-link { background-color: #fff;}
div.report-prevnext-link { background-color: #f4f4f4;}
.report-prevnext-left, .report-prevnext-right { float: left;}
.report-prevnext-left {
position: relative;
width: 25%;
padding: 8px;
}
.report-prevnext-right { width: 100%; padding: 8px;}
#report-prev .report-prevnext-right { padding-left: 0;}
#report-next .report-prevnext-right { padding-right: 0;}
.report-prevnext-img {
background-position: center;
background-size: cover;
padding-top: 70.72135%;
}
.report-prevnext-info {
color: #555;
display: inline-block;
margin-bottom: 8px;
}
#report-prevnext i {
font-size: 2.827rem;
text-align: center;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#report-prev i { left: 0;}
#report-next i { right: 0;}
@media screen and (min-width: 568px){
#report-tab .swiper-slide { width: 19%;}
#report-tab a { padding-left: 16px; padding-right: 16px;}
}
@media screen and (min-width: 768px){
#report { padding-top: 128px; padding-bottom: 128px;}
#report-tab { top: -52px;}
#report-tab .swiper-container { border: solid 4px #fff;}
#report-tab .swiper-slide {
border-left: solid 2px #fff;
border-right: solid 2px #fff;
width: 15.5%;
}
#report-tab .swiper-slide:first-child { border-left: solid 4px #fff; margin-left: -4px;}
#report-tab .swiper-slide:last-child { border-right: solid 4px #fff; margin-right: -4px;}
#report-tab a { line-height: 48px; height: 48px;}
#report-pagenation li { width: 6.25%;}
#report-pagenation a, #report-pagenation span {
border-left: solid 2px #fff;
border-right: solid 2px #fff;
line-height: 48px;
height: 48px;
}
#report-pagenation li:nth-child(n + 7) a, #report-pagenation li:nth-child(n + 7) span { border-top: none;}
#report-pagenation li:nth-child(6n + 1) a, #report-pagenation li:nth-child(6n + 1) span { border-left: solid 2px #fff;}
#report-pagenation li:nth-child(6n) a, #report-pagenation li:nth-child(6n) span { border-right: solid 2px #fff;}
#report-pagenation li:nth-child(n + 17) a, #report-pagenation li:nth-child(n + 17) span { border-top: solid 4px #fff;}
#report-pagenation li:nth-child(16n + 1) a, #report-pagenation li:nth-child(16n + 1) span { border-left: none;}
#report-pagenation li:nth-child(16n) a, #report-pagenation li:nth-child(16n) span { border-right: none;}
#report-prevnext .report-prevnext-right { width: 75%; padding: 16px 8px;}
#report-prevnext i { width: 46px;}
} #presen-list { padding-top: 64px;}
.presen-article {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
transition: all .6s cubic-bezier(.23, 1, .32, 1) .3s;
}
.presen-article.animation {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.presen-article a, .presen-content time { display: block;}
.presen-article a, .presen-thumb { position: relative;}
.presen-article a {
background-color: #fff;
border: solid 1px #e4e4e4;
border-radius: 8px;
height: 100%;
}
.presen-article a:hover { opacity: .8;}
.presen-thumb {
background-position: center;
background-size: cover;
border-radius: 8px 8px 0 0;
padding-top: 70.72135%;
}
.presen-thumb time, .presen-thumb button { position: absolute;}
.presen-thumb time, .presen-content { padding: 16px;}
.presen-thumb time {
background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.presen-thumb button {
right: 16px;
bottom: -28px;
z-index: 2;
}
.presen-content .presen-cat {
color: #00afa0;
font-size: .75rem;
margin: 0 0 16px;
}
#presendetail { padding-top: 64px; padding-bottom: 64px;}
#presendetail-over { position: relative; margin-bottom: 32px;}
#presendetail-txt { padding-left: 16px; padding-right: 16px;}
#presendetail-swiper {
position: relative;
margin: 0 16px 32px;
padding-top: 70.72135%;
}
#presendetail-swiper .swiper-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#presendetail-swiper .swiper-slide { background-position: center; background-size: cover;}
#presendetail-swiper .swiper-pagination-bullets {
text-align: right;
bottom: 16px;
left: auto;
right: 8px;
width: auto;
padding: 0 16px;
}
#presendetail-swiper .swiper-pagination-bullet {
background-color: #fff;
border: solid 4px #fff;
width: 16px;
height: 16px;
}
#presendetail-swiper .swiper-pagination-bullet-active { background-color: #00afa0;}
#presendetail-txt { padding-left: 16px; padding-right: 16px;}
#presendetail-mov, #presendetail-sponsor { margin: 0 16px 32px;}
#presendetail-mov { position: relative; padding-top: 56.25%;}
#presendetail-mov video {
background-color: #000;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#presendetail-sponsor {
background-color: #f4f4f4;
border-radius: 8px;
padding: 32px 0;
}
#presendetail-sponsor h2, #presendetail-sponsor h3, #presendetail-sponsor p { padding-left: 16px; padding-right: 16px;}
#presendetail-sponsor .container-min { margin-bottom: 32px;}
.flex { justify-content: flex-start;}
#presendetail-sponsor .flex-3 { width: 50%;}
#presendetail-sponsor .flex-3 h3, #presendetail-sponsor .flex-3 figure {
border: solid 2px #fff;
position: relative;
padding-top: calc(50% - 4px);
}
#presendetail-sponsor .flex-3 span, #presendetail-sponsor .flex-3 img { display: block; position: absolute;}
#presendetail-sponsor .flex-3 span {
text-align: center;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#presendetail-sponsor .flex-3 img {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#presendetail-relation {
background-color: #f4f4f4;
border: solid 1px #e4e4e4;
border-radius: 8px;
overflow: hidden;
margin: 0 16px;
}
#presendetail-relation h2 {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
padding: 32px 16px;
margin: 0;
}
.relation {
border-bottom: solid 1px #e4e4e4;
overflow: hidden;
position: relative;
top: 1px;
float: left;
width: 50%;
}
.relation:nth-child(even) { border-right: solid 1px #e4e4e4;}
.relation a {
background-color: #fff;
pointer-events: auto;
position: relative;
display: block;
padding: 8px;
padding-right: 2.827rem;
}
.relation a:hover { opacity: .8}
.relation-left, .relation-right { float: left; padding: 8px;}
.relation-left { position: relative; width: 25%;}
.relation-right { width: 100%; padding-right: 0;}
.relation-img {
background-position: center;
background-size: cover;
padding-top: 70.72135%;
}
.relation-info {
color: #555;
display: inline-block;
margin-bottom: 8px;
}
.relation i {
font-size: 2.827rem;
text-align: center;
display: block;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (min-width: 568px){
#presendetail-sponsor .flex-3 { width: 33.33333%;}
}
@media screen and (min-width: 768px){
#presendetail-over { min-height: 453px; margin-bottom: 64px;}
#presendetail-swiper {
position: absolute;
top: 0;
right: 0;
width: 66.66666667%;
margin-bottom: 0;
padding-top: 47.147519%;
}
#presendetail-txt {
position: relative;
width: 50%;
z-index: 1;
padding-top: 215px;
}
#presendetail-txt span { background-color: #fff; padding: 2px;}
#presendetail-mov, #presendetail-sponsor { margin: 0 16px 64px;}
#presendetail-sponsor { padding: 32px 16px;}
#presendetail-sponsor .flex { margin: 0 auto;}
#presendetail-sponsor .flex-3 { width: 25%;}
#presendetail-sponsor .flex-3 h3, #presendetail-sponsor .flex-3 figure { border: solid 4px #fff; padding-top: calc(50% - 8px);}
.relation-right {
width: 75%;
padding: 16px 8px;
padding-right: 0;
}
.relation i { width: 46px;}
} #voice {
background-image: url(//social-kids-action.jp/wp/wp-content/themes/skap/img/index/voice-bg.png);
background-position: center;
background-size: cover;
padding-top: 64px;
padding-bottom: 64px;
}
#voice-txt {
background-color: #fff;
border: solid 1px #e4e4e4;
border-radius: 8px;
opacity: 0;
position: relative;
margin: 0 16px 16px;
padding: 16px;
transition: all .3s cubic-bezier(.23, 1, .32, 1) .3s;
}
#voice-txt.animation {
opacity: 1;
-webkit-animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
}
#voice-txt:before, #voice-txt:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
z-index: 1;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
}
#voice-txt:before { border: solid 18px transparent; border-top-color: #e4e4e4;}
#voice-txt:after { border: solid 16px transparent; border-top-color: #fff;}
#voice-img { position: relative; padding: 0 32px;}
#voice-img .swiper-slide { width: 33.33333%; padding-top: 16px;}
.voice-img-spc {
background-position: center;
background-size: cover;
border: solid 1px #e4e4e4;
border-radius: 50%;
box-sizing: border-box;
-webkit-transform: scale(.75);
transform: scale(.75);
width: 72px;
height: 72px;
margin: 0 auto 16px;
-webkit-animation: downBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: downBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
}
.swiper-slide-active .voice-img-spc {
-webkit-animation: upBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: upBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
}
#voice-img p { line-height: 1.6;}
#voice-img .swiper-prev, #voice-img .swiper-next { background-color: transparent; top: 32.5px;}
@media screen and (min-width: 568px){
#voice-img .swiper-slide { width: 20%;}
}
@media screen and (min-width: 768px){
#voice { padding-top: 128px; padding-bottom: 128px;}
#voice-txt {
width: 608px;
margin: 0 auto 32px;
padding: 32px;
}
.voice-img-spc { width: 128px; height: 128px;}
#voice-img .swiper-prev, #voice-img .swiper-next { top: 49.5px;}
} #manage { padding-top: 64px; padding-bottom: 64px;}
#manage figure { position: relative;}
#manage-info { margin: 0 auto 32px;}
#manage-info figure, #manage-info div { opacity: 0; transition: all .9s cubic-bezier(.23, 1, .32, 1) .3s;}
#manage-info figure {
-webkit-transform: translateY(-32px);
transform: translateY(-32px);
}
#manage-info div {
-webkit-transform: translateY(32px);
transform: translateY(32px);
}
#manage-info.animation figure, #manage-info.animation div {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#manage-info h3 {
background-color: rgba(0, 175, 160, .8);
border: solid 2px #fff;
margin: -32px 16px 32px;
padding: 16px;
}
#manage-info h3 span { font-size: 1rem;}
#manage-logo { margin: 0 auto;}
#manage-logo li {
float: left;
width: 50%;
padding-left: 16px;
padding-right: 16px;
}
#manage-logo a { display: block;}
#manage-logo a:hover { opacity: .8;}
#manage-logo figure { height: 40px;}
#manage-logo figure img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
@media screen and (min-width: 768px){
#manage { padding-top: 128px; padding-bottom: 128px;}
#manage-info {
position: relative;
height: 371px;
margin: 0 auto 64px;
}
#manage-info figure, #manage-info div {
position: absolute;
width: 480px;
height: 339px;
}
#manage-info figure { bottom: 0; right: 0;}
#manage-info div {
background-color: rgba(0, 175, 160, .8);
border: solid 4px #fff;
top: 0;
left: 0;
padding: 32px;
}
#manage-info h3 {
background-color: transparent;
border: none;
margin: 0 auto 32px;
padding: 0;
}
#manage-info h3 span { font-size: 1.414rem;}
#manage-info p { color: #fff;}
#manage-logo { width: 640px;}
} #company {
background-image: url(//social-kids-action.jp/wp/wp-content/themes/skap/img/index/company-bg.png);
background-position: center;
background-size: cover;
padding-top: 64px;
padding-bottom: 64px;
}
#company .flex-3 {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px);
transition: all .6s cubic-bezier(.23, 1, .32, 1) .3s;
}
#company .flex-3.animation {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#company h3, #company figure {
border: solid 2px #fff;
position: relative;
padding-top: calc(50% - 4px);
}
#company h3 { background-color: rgba(244, 244, 244, .8);}
#company h3 span, #company figure img { display: block; position: absolute;}
#company h3 span {
text-align: center;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#company figure img {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@media screen and (min-width: 768px){
#company { padding-top: 128px; padding-bottom: 128px;}
#company h3, #company figure { border: solid 4px #fff; padding-top: calc(50% - 8px);}
#company h3 { height: 108px;}
} #contact {
position: relative;
padding-top: 64px;
padding-bottom: 64px;
}
#contact-tab, #contact-tab .swiper-pagination { width: 100%;}
#contact-tab, #contact-tab span { padding-left: 16px; padding-right: 16px;}
#contact-tab {
position: absolute;
top: -48px;
z-index: 2;
}
#contact-tab .swiper-pagination, #contact-tab span { overflow: hidden;}
#contact-tab .swiper-pagination {
border: solid 2px #fff;
border-radius: 8px 8px 0 0;
position: static;
}
#contact-tab .swiper-pagination-bullet {
background-color: transparent;
border-radius: 0;
position: relative;
display: block;
float: left;
width: 50%;
height: auto;
}
#contact-tab .swiper-pagination-bullet:first-child { border-right: solid 1px #fff;}
#contact-tab .swiper-pagination-bullet:last-child { border-left: solid 1px #fff;}
#contact-tab span {
background-color: rgba(0, 175, 160, .8);
color: #fff;
font-weight: bold;
text-align: center;
line-height: 46px;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
height: 46px;
transition: all .3s cubic-bezier(.86, 0, .07, 1) 0s;
}
#contact-tab .swiper-pagination-bullet:hover span, #contact-tab .swiper-pagination-bullet-active span {
background-color: #fff;
color: #555;
}
.contact-notice {
border: solid 1px #e4e4e4;
position: relative;
min-height: 88px;
padding: 16px 16px 16px 88px;
}
.contact-notice i {
background-color: #e5495f;
position: absolute;
top: calc(50% - 28px);
left: 16px;
opacity: 0;
transition: all .3s cubic-bezier(.23, 1, .32, 1) .3s;
}
.contact-notice.animation i {
opacity: 1;
-webkit-animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) .3s both;
}
.contact-form { padding-left: 16px; padding-right: 16px;}
.contact-form th, .contact-form td { line-height: 1;}
.contact-form td { padding: 0;}
.contact-form p { line-height: 1; margin-bottom: 0;}
.contact-form .contact-form-text {
line-height: 2;
margin-bottom: 0;
padding: 16px 16px 0;
}
.contact-form .contact-form-submit { margin: 0;}
.contact-form-required, .contact-form-any {
border-radius: 4px;
color: #fff;
font-size: .75rem;
display: inline-block;
position: relative;
top: -1px;
margin: 0 0 0 8px;
padding: 4px 8px;
}
.contact-form-required { background-color: #e5495f;}
.contact-form-any { background-color: #ccc;}
#contact-swiper .btn-G { line-height: 1;}
#contact-swiper .btn-disabled { background-color: #f4f4f4; pointer-events: none;}
#contact-swiper .wpcf7-form-control-wrap { display: inline-block; width: 100%;}
#contact-swiper .wpcf7-form-control-wrap.agree, #contact-swiper .wpcf7-form-control-wrap.media { width: auto;}
#contact-swiper .wpcf7-not-valid-tip, #contact-swiper .wpcf7-response-output {
background-color: #e5495f;
color: #fff;
font-weight: bold;
}
#contact-swiper .wpcf7-not-valid-tip {
border-radius: 4px;
font-size: .75rem;
position: absolute;
top: 15px;
left: -10px;
padding: 4px 8px;
}
#contact-swiper .wpcf7-response-output {
border-radius: 8px;
border: none;
text-align: center;
margin: 16px 16px 0;
padding: 16px;
}
#contact-swiper .wpcf7-mail-sent-ok { background-color: rgba(0, 175, 160, .8);}
@media screen and (min-width: 768px){
#contact-tab { top: -52px;}
#contact-tab .swiper-pagination { border: solid 4px #fff;}
#contact-tab .swiper-pagination-bullet:first-child { border-right: solid 2px #fff;}
#contact-tab .swiper-pagination-bullet:last-child { border-left: solid 2px #fff;}
#contact-tab .swiper-pagination-bullet span { line-height: 48px; height: 48px;}
.contact-form {
padding-left: 0;
padding-right: 0;
margin: 0 !important;
}
.contact-form th, .contact-form td {
border-bottom: none;
padding-bottom: 32px;
padding-left: 16px;
padding-right: 16px;
}
.contact-form th {
text-align: right;
width: 33.33333%;
padding-top: 8px;
}
.contact-form .contact-txtcell { line-height: 2; padding-top: 16px;}
.contact-form .contact-form-text {
background-color: #f4f4f4;
border-radius: 8px;
margin-bottom: 24px;
padding: 16px;
}
#contact-swiper .wpcf7-not-valid-tip { top: 6px; left: -24px;}
} :placeholder-shown { color: #ccc;}
::-webkit-input-placeholder { color: #ccc;}
::-moz-placeholder { color: #ccc; opacity: 1;}
:-ms-input-placeholder { color: #ccc;}
input[type=radio], input[type=checkbox] { display: none;}
.linetext, .textarea, .select, .checkbox, .radio { padding: 16px;}
.linetext, .textarea, .select {
border-bottom: solid 1px #e4e4e4;
width: 100%;
transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
}
.linetext:focus, .textarea:focus, .customSelectFocus { border-bottom: solid 1px #00afa0;}
.select {
box-sizing: border-box;
cursor: pointer;
position: relative;
padding-right: 48px;
}
.select:after {
background-color: rgba(0, 175, 160, .8);
color: #fff;
content: "\e900";
font-family: "icomoon" !important;
font-size: 1.414rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 40px;
padding-top: 13px;
}
.hasCustomSelect {
width: 100% !important;
height: 47px !important;
z-index: 1;
}
.checkbox, .radio {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
position: relative;
width: calc(50% - 2px);
padding-left: 42px;
}
.checkbox:before, .radio:before, .checkbox:after, .radio:after {
content: "";
display: block;
position: absolute;
top: 50%;
}
.checkbox:before, .radio:before {
background-color: #fff;
border: solid 1px #e4e4e4;
left: 16px;
margin-top: -9px;
width: 18px;
height: 18px;
}
.checkbox:before { border-radius: 4px;}
.radio:before { border-radius: 50%;}
.checkbox:after, .radio:after {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
-webkit-animation: uncheckBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: uncheckBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
}
.checkbox.active:after, .radio.active:after {
-webkit-animation: checkBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: checkBounce .3s cubic-bezier(.86, 0, .07, 1) 0s both;
}
.checkbox:after {
border-bottom: solid 2px #00afa0;
border-right: solid 2px #00afa0;
left: 23px;
width: 5px;
height: 9px;
margin-top: -6px;
}
.radio:after {
background-color: rgba(0, 175, 160, .8);
border-radius: 50%;
left: 21px;
width: 8px;
height: 8px;
margin-top: -4px;
}
@media screen and (min-width: 768px){
.linetext, .textarea, .select, .checkbox, .radio { margin-bottom: 24px; padding: 8px 0;}
.linetext, .select { width: 288px;}
.select { padding-right: 48px;}
.select:after { border-radius: 4px 4px 0 0; padding-top: 5px;}
.hasCustomSelect { width: 288px !important; height: 33px !important;}
.checkbox, .radio {
width: auto;
margin-right: 16px;
padding-left: 26px;
}
.checkbox:before, .radio:before { left: 0;}
.checkbox:after { left: 7px;}
.radio:after { left: 5px;}
} .post .flex-6 { padding-bottom: 32px;}
.post-video {
position: relative;
padding-top: 56.25%;
margin: 0 auto 32px;
}
.post-video video {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post h3:not(:first-child), .post h4:not(:first-child) { margin-top: 64px;}
.post h3, .post h4 { text-align: center;}
.post h3 {
border: solid 1px #e4e4e4;
font-size: 1.414rem;
padding: 8px 16px;
}
.post h4 { border-bottom: solid 1px #e4e4e4; padding-bottom: 8px;}
.post ul:not(:last-child), .post ol:not(:last-child) { margin-bottom: 32px;}
.post ol { counter-reset: num; list-style-type: none;}
.post li {
line-height: 2;
position: relative;
padding-left: calc(1.414rem + 8px);
}
.post li:not(:last-child) { margin-bottom: 8px;}
.post ul li:before, .post ol li:before {
background-color: rgba(0, 175, 160, .8);
border-radius: 50%;
color: #fff;
font-size: .75rem;
font-weight: bold;
text-align: center;
white-space: nowrap;
overflow: hidden;
display: inline-block;
position: absolute;
}
.post ul li:before {
content: "";
top: .5rem;
left: .207rem;
width: 1rem;
height: 1rem;
}
.post ol li:before {
counter-increment: num;
content: counters(num, "");
line-height: 1.439rem;
top: .293rem;
left: 0;
width: 1.414rem;
height: 1.414rem;
}
.post img { display: block;}
.post img:not(:last-child) { margin: 0 0 32px;}
.post strong { color: #000;}
.post a:not([class*="btn-"]) {font-weight: bold; word-break: break-all;}
.post a:not([class*="btn-"]):hover { opacity: .8;}
@media screen and (min-width: 768px){
.post .flex { padding-top: 32px;}
.post .flex h3 { margin: 0 auto;}
} #back {
position: fixed;
left: calc(50% + 496px);
bottom: 32px;
z-index: 99;
}
#back:hover {
-webkit-animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
animation: hoverBounce .6s cubic-bezier(.86, 0, .07, 1) 0s both;
} #transition {
visibility: hidden;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
}
#transition.animation { visibility: visible;}
.transition-bar {
background-color: #00afa0;
opacity: 0;
position: absolute;
width: 0;
height: 20%;
transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
transform: scale(.8);
}
#transition.animation .transition-bar { opacity: 1; width: 100%; transform: scale(1.02);}
.transition-bar:nth-child(odd) { right: 0;}
.transition-bar:nth-child(even) { left: 0;}
.transition-bar:nth-child(1) { top: 0; transition-delay: 0s;}
.transition-bar:nth-child(2) { top: 20%; transition-delay: .09s;}
.transition-bar:nth-child(3) { top: 40%; transition-delay: .18s;}
.transition-bar:nth-child(4) { top: 60%; transition-delay: .27s;}
.transition-bar:nth-child(5) { top: 80%; transition-delay: .36s;} #loader {
background-color: #fff;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
#loader-bar {
background-color: #00afa0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
transition: all .03s cubic-bezier(.23, 1, .32, 1) 0s;
}
#loader-txt {
color: #fff;
font-size: 1.414rem;
font-weight: bold;
line-height: 1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} .swiper-slide { box-sizing: border-box; font-feature-settings: normal;}
.swiper-prev, .swiper-next {
background-color: #fff;
color: #00afa0;
font-size: 2.827rem;
text-align: center;
cursor: pointer;
position: absolute;
top: calc(50% - 19.5px);
z-index: 1;
}
.swiper-prev { left: 0px;}
.swiper-next { right: 0px;}
.swiper-button-disabled { color: #555;}
.mfp-container { padding-left: 32px; padding-right: 32px;}
.mfp-bg { background: #f4f4f4;}
@media screen and (min-width: 768px){
.swiper-prev, .swiper-next {
top: calc(50% - 30.5px);
padding-top: 8px;
padding-bottom: 8px;
}
.mfp-container { padding-left: 16px; padding-right: 16px;}
}