@charset "UTF-8";
    * {
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}   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;
line-height: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border: 0;
border-top: 1px solid;
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] {
border-bottom: none; text-decoration: underline; 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: -0.25em;
}
sup {
top: -0.5em;
}   img {
border-style: none;
vertical-align: bottom;
}
embed,
object,
iframe {
border: 0;
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
} [type=checkbox] {
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
appearance: radio;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
cursor: default;
} button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
} select::-ms-expand {
display: none;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
} legend {
color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } 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; } label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable] {
outline: none;
}  table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}   template {
display: none;
} [hidden] {
display: none;
}
.vegas-overlay,
.vegas-content-scrollable,
.vegas-timer,
.vegas-slide,
.vegas-slide-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
}
.vegas-content-scrollable {
position: relative;
height: 100%;
overflow: auto;
}
.vegas-overlay {
opacity: 0.2;
background: transparent url(http://www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/css/images/overlays/02.png) center center repeat;
}
.vegas-timer {
top: auto;
bottom: 0;
height: 2px;
}
.vegas-timer-progress {
width: 0%;
height: 100%;
background: #999;
transition: width ease-out;
}
.vegas-timer-running .vegas-timer-progress {
width: 100%;
}
.vegas-slide,
.vegas-slide-inner {
margin: 0;
padding: 0;
background: transparent center center no-repeat;
transform: translateZ(0);
will-change: transform, opacity;
}
body .vegas-container {
overflow: hidden !important;
position: relative;
}
.vegas-video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
body.vegas-container {
overflow: auto;
position: static;
z-index: -2;
}
body.vegas-container > .vegas-timer,
body.vegas-container > .vegas-overlay,
body.vegas-container > .vegas-slide {
position: fixed;
z-index: -1;
}    .vegas-transition-blur,
.vegas-transition-blur2 {
opacity: 0;
-webkit-filter: blur(32px) brightness(1.01);
filter: blur(32px) brightness(1.01);
}
.vegas-transition-blur-in,
.vegas-transition-blur2-in {
opacity: 1;
-webkit-filter: blur(0px) brightness(1.01);
filter: blur(0px) brightness(1.01);
}
.vegas-transition-blur2-out {
opacity: 0;
}   .vegas-transition-burn,
.vegas-transition-burn2 {
opacity: 0;
-webkit-filter: contrast(1000%) saturate(1000%);
filter: contrast(1000%) saturate(1000%);
}
.vegas-transition-burn-in,
.vegas-transition-burn2-in {
opacity: 1;
-webkit-filter: contrast(100%) saturate(100%);
filter: contrast(100%) saturate(100%);
}
.vegas-transition-burn2-out {
opacity: 0;
-webkit-filter: contrast(1000%) saturate(1000%);
filter: contrast(1000%) saturate(1000%);
}   .vegas-transition-fade,
.vegas-transition-fade2 {
opacity: 0;
}
.vegas-transition-fade-in,
.vegas-transition-fade2-in {
opacity: 1;
}
.vegas-transition-fade2-out {
opacity: 0;
}   .vegas-transition-flash,
.vegas-transition-flash2 {
opacity: 0;
-webkit-filter: brightness(25);
filter: brightness(25);
}
.vegas-transition-flash-in,
.vegas-transition-flash2-in {
opacity: 1;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.vegas-transition-flash2-out {
opacity: 0;
-webkit-filter: brightness(25);
filter: brightness(25);
}   .vegas-transition-negative,
.vegas-transition-negative2 {
opacity: 0;
-webkit-filter: invert(100%);
filter: invert(100%);
}
.vegas-transition-negative-in,
.vegas-transition-negative2-in {
opacity: 1;
-webkit-filter: invert(0);
filter: invert(0);
}
.vegas-transition-negative2-out {
opacity: 0;
-webkit-filter: invert(100%);
filter: invert(100%);
}   .vegas-transition-slideDown,
.vegas-transition-slideDown2 {
transform: translateY(-100%);
}
.vegas-transition-slideDown-in,
.vegas-transition-slideDown2-in {
transform: translateY(0%);
}
.vegas-transition-slideDown2-out {
transform: translateY(100%);
}   .vegas-transition-slideLeft,
.vegas-transition-slideLeft2 {
transform: translateX(100%);
}
.vegas-transition-slideLeft-in,
.vegas-transition-slideLeft2-in {
transform: translateX(0%);
}
.vegas-transition-slideLeft2-out {
transform: translateX(-100%);
}   .vegas-transition-slideRight,
.vegas-transition-slideRight2 {
transform: translateX(-100%);
}
.vegas-transition-slideRight-in,
.vegas-transition-slideRight2-in {
transform: translateX(0%);
}
.vegas-transition-slideRight2-out {
transform: translateX(100%);
}   .vegas-transition-slideUp,
.vegas-transition-slideUp2 {
transform: translateY(100%);
}
.vegas-transition-slideUp-in,
.vegas-transition-slideUp2-in {
transform: translateY(0%);
}
.vegas-transition-slideUp2-out {
transform: translateY(-100%);
}   .vegas-transition-swirlLeft,
.vegas-transition-swirlLeft2 {
transform: scale(2) rotate(35deg);
opacity: 0;
}
.vegas-transition-swirlLeft-in,
.vegas-transition-swirlLeft2-in {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.vegas-transition-swirlLeft2-out {
transform: scale(2) rotate(-35deg);
opacity: 0;
}   .vegas-transition-swirlRight,
.vegas-transition-swirlRight2 {
transform: scale(2) rotate(-35deg);
opacity: 0;
}
.vegas-transition-swirlRight-in,
.vegas-transition-swirlRight2-in {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.vegas-transition-swirlRight2-out {
transform: scale(2) rotate(35deg);
opacity: 0;
}   .vegas-transition-zoomIn,
.vegas-transition-zoomIn2 {
transform: scale(0);
opacity: 0;
}
.vegas-transition-zoomIn-in,
.vegas-transition-zoomIn2-in {
transform: scale(1);
opacity: 1;
}
.vegas-transition-zoomIn2-out {
transform: scale(2);
opacity: 0;
}   .vegas-transition-zoomOut,
.vegas-transition-zoomOut2 {
transform: scale(2);
opacity: 0;
}
.vegas-transition-zoomOut-in,
.vegas-transition-zoomOut2-in {
transform: scale(1);
opacity: 1;
}
.vegas-transition-zoomOut2-out {
transform: scale(0);
opacity: 0;
}   .vegas-animation-kenburns {
-webkit-animation: kenburns ease-out;
animation: kenburns ease-out;
}
@-webkit-keyframes kenburns {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes kenburns {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}   .vegas-animation-kenburnsDownLeft {
-webkit-animation: kenburnsDownLeft ease-out;
animation: kenburnsDownLeft ease-out;
}
@-webkit-keyframes kenburnsDownLeft {
0% {
transform: scale(1.5) translate(10%, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDownLeft {
0% {
transform: scale(1.5) translate(10%, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsDownRight {
-webkit-animation: kenburnsDownRight ease-out;
animation: kenburnsDownRight ease-out;
}
@-webkit-keyframes kenburnsDownRight {
0% {
transform: scale(1.5) translate(-10%, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDownRight {
0% {
transform: scale(1.5) translate(-10%, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsDown {
-webkit-animation: kenburnsDown ease-out;
animation: kenburnsDown ease-out;
}
@-webkit-keyframes kenburnsDown {
0% {
transform: scale(1.5) translate(0, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsDown {
0% {
transform: scale(1.5) translate(0, -10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsLeft {
-webkit-animation: kenburnsLeft ease-out;
animation: kenburnsLeft ease-out;
}
@-webkit-keyframes kenburnsLeft {
0% {
transform: scale(1.5) translate(10%, 0);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsLeft {
0% {
transform: scale(1.5) translate(10%, 0);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsRight {
-webkit-animation: kenburnsRight ease-out;
animation: kenburnsRight ease-out;
}
@-webkit-keyframes kenburnsRight {
0% {
transform: scale(1.5) translate(-10%, 0);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsRight {
0% {
transform: scale(1.5) translate(-10%, 0);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUpLeft {
-webkit-animation: kenburnsUpLeft ease-out;
animation: kenburnsUpLeft ease-out;
}
@-webkit-keyframes kenburnsUpLeft {
0% {
transform: scale(1.5) translate(10%, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUpLeft {
0% {
transform: scale(1.5) translate(10%, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUpRight {
-webkit-animation: kenburnsUpRight ease-out;
animation: kenburnsUpRight ease-out;
}
@-webkit-keyframes kenburnsUpRight {
0% {
transform: scale(1.5) translate(-10%, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUpRight {
0% {
transform: scale(1.5) translate(-10%, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}   .vegas-animation-kenburnsUp {
-webkit-animation: kenburnsUp ease-out;
animation: kenburnsUp ease-out;
}
@-webkit-keyframes kenburnsUp {
0% {
transform: scale(1.5) translate(0, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
}
@keyframes kenburnsUp {
0% {
transform: scale(1.5) translate(0, 10%);
}
100% {
transform: scale(1) translate(0, 0);
}
} @font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Bold.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Bold.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Bold.ttf) format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-BoldItalic.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-BoldItalic.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-BoldItalic.ttf) format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Regular.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Regular.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Regular.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Italic.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Italic.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Italic.ttf) format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Light.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Light.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-Light.ttf) format("truetype");
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: "dseg7classic";
src: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-LightItalic.woff) format("woff"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-LightItalic.woff2) format("woff2"), url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/fonts/DSEG7Classic-LightItalic.ttf) format("truetype");
font-weight: lighter;
font-style: italic;
}
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
min-width: 1024px;
font-size: 16px;
color: #555;
}
@media screen and (max-device-width: 840px) {
body {
min-width: 320px;
font-size: 12.5px;
}
}
body.customize-support .firstimg {
max-height: calc(100vh - 92px);
}
body.customize-support .main-nav {
top: 32px;
}
@media screen and (max-device-width: 840px) {
body.customize-support .main-nav {
top: 96px;
height: calc(100vh - 96px);
}
}
body.customize-support .sub-nav {
top: 32px;
}
#wpadminbar {
position: fixed !important;
}
* {
box-sizing: border-box;
}
.inner {
width: 100%;
margin: auto;
display: block;
}
@media screen and (min-width: 1080px) {
.inner {
max-width: 1080px;
}
}
@media screen and (min-device-width: 841px) {
.inner {
min-width: 1024px;
}
}
@media screen and (max-device-width: 840px) {
.inner {
min-width: 320px;
max-width: 100vw;
}
}
.shadow {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
}
@media screen and (max-device-width: 840px) {
.sp-only {
display: inline-block;
}
.sp-only-block {
display: block;
}
.sp-none {
display: none;
}
}
@media screen and (min-device-width: 841px) {
.sp-only {
display: none;
}
}
main {
padding-top: 60px;
}
@media screen and (max-device-width: 840px) {
main {
padding-top: 50px;
}
}
main section {
padding-top: 100px;
}
main section:nth-of-type(1) {
border-top: none;
}
@media screen and (max-device-width: 840px) {
main section {
padding-top: 30px;
}
}
main.subpage {
padding-top: 50px;
}
main.subpage section {
padding-bottom: 100px;
}
main.single, main.page {
padding-top: 0;
}
main.single section, main.page section {
padding-top: 0;
}
main.noeyecatch {
padding-top: 100px;
}
@media screen and (max-device-width: 840px) {
main.noeyecatch {
padding-top: 50px;
}
}
main.notfound {
padding-top: 60px;
}
@media screen and (max-device-width: 840px) {
main.notfound {
padding-top: 50px;
}
}
main.notfound section {
padding-top: 100px;
}
main.notfound section .section-inner p {
text-align: center;
}
@media screen and (min-width: 1080px) {
.section-inner {
padding: 20px 0;
}
}
@media screen and (min-device-width: 841px) {
.section-inner {
padding: 20px 1em;
}
}
@media screen and (max-device-width: 840px) {
.section-inner {
padding: 20px 10px;
}
}
.section-inner .section-img img {
max-height: 320px;
object-fit: cover;
}
h2 {
font-size: 36px;
text-align: center;
font-weight: bold;
margin: 1em auto;
color: #000;
font-feature-settings: "palt";
}
@media screen and (max-device-width: 840px) {
h2 {
font-size: 28px;
}
}
h2 span {
display: none;
}
h2 span.inline-block, h2 span.d-quot, h2 span.s-quot {
display: inline-block;
}
h2 span.d-quot, h2 span.s-quot {
font-family: sans-serif;
vertical-align: bottom;
line-height: 1;
}
h2 span.s-quot {
font-style: italic;
letter-spacing: 0.1em;
margin-left: -0.1em;
}
h3 {
font-size: 24px;
text-align: center;
font-weight: bold;
margin-bottom: 1em;
}
@media screen and (max-device-width: 840px) {
h3 {
font-size: 16px;
}
}
p {
line-height: 2em;
}
p[class=""] {
text-align: justify;
}
p + p, p + h2, p + h3, p + h4 {
margin-top: 1.5em;
}
img {
object-fit: cover;
pointer-events: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}
.ojf {
font-family: "object-fit: cover;";
}
.ojf img {
height: 100%;
width: 100%;
}
footer {
text-align: center;
padding: 60px 0 20px;
}
@media screen and (max-device-width: 840px) {
footer {
padding: 50px 0 10px;
}
}
footer small {
font-size: 12px;
color: #555;
}
@media screen and (max-device-width: 840px) {
footer small {
font-size: 11.5px;
}
}
footer small span {
color: #FFCC33;
} .load {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
opacity: 1;
visibility: visible;
z-index: 1000;
transition: all 1s ease-in-out 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
min-width: 100%;
background-color: #fff;
}
.load.loaded {
opacity: 0;
visibility: hidden;
}
.header {
display: block;
position: fixed;
top: -60px;
left: 0;
width: 100%;
z-index: 999;
background-color: rgb(255, 255, 255);
}
@media screen and (max-device-width: 840px) {
.header {
top: -50px;
border-bottom: 1px solid #e0e0e0;
}
}
.header.loaded {
transition: top 0.5s ease-in-out 0.15s;
top: 0;
}
@media screen and (max-device-width: 840px) {
.header.loaded {
transition: top 0.5s ease-in-out 0.15s;
}
}
.header .header-inner {
display: flex;
justify-content: center;
}
@media screen and (max-device-width: 840px) {
.header .header-inner {
padding: 0 5px;
justify-content: space-between;
}
}
.header .header-inner .header-side {
width: 100px;
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-side {
width: 50px;
}
}
.header .header-inner .header-left-btn {
pointer-events: none;
padding: 10px;
display: none;
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-left-btn {
pointer-events: auto;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
display: block;
}
.header .header-inner .header-left-btn.sp_menu_button .menu_icon {
display: block;
float: left;
cursor: pointer;
transition: all 0.2s ease-in;
}
.header .header-inner .header-left-btn.sp_menu_button .menu_icon span {
display: block;
width: 25px;
height: 2px;
background: #606060;
margin-bottom: 4px;
transition: all 0.4s ease-out;
}
.header .header-inner .header-left-btn.sp_menu_button.open .menu_icon {
transform: rotate(-45deg);
}
.header .header-inner .header-left-btn.sp_menu_button.open .menu_icon .bar1 {
transform: rotate(0deg) translateY(8px);
}
.header .header-inner .header-left-btn.sp_menu_button.open .menu_icon .bar2 {
opacity: 0;
}
.header .header-inner .header-left-btn.sp_menu_button.open .menu_icon .bar3 {
transform: rotate(-90deg) translateX(4px);
}
}
.header .header-inner .header-right-btn {
padding: 10px;
display: none;
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-right-btn {
padding: 0;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
display: block;
}
}
.header .header-inner .header-right-btn a {
display: block;
width: 60px;
height: 60px;
padding: 10px;
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
}
.header .header-inner .header-right-btn a.header-btn-instagram {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/btn-instagram.svg);
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-right-btn a {
padding: 0;
width: 50px;
height: 50px;
background-size: 30px;
padding: 10px;
}
}
.header .header-inner .header-center-logo {
width: 100%;
min-width: 150px;
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-center-logo {
padding: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
.header .header-inner .header-center-logo a {
width: 100%;
height: 60px;
min-width: 150px;
display: block;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/logo-1row-long.svg);
background-position: center center;
padding: 0 10px;
background-origin: content-box;
background-size: 100%;
background-repeat: no-repeat;
}
@media screen and (max-device-width: 840px) {
.header .header-inner .header-center-logo a {
height: 50px;
background-size: auto 30px;
}
}
@media screen and (max-device-width: 840px) {
.top-header .header .header-inner .header-center-logo a {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/logo-2row.svg);
}
}
@media screen and (min-device-width: 841px) {
.sub-header .header {
display: none;
}
}
@media screen and (max-device-width: 840px) {
.sub-header .header .header-inner .header-center-logo a {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/logo-2row-gray.svg);
}
}
.sub-header .header .header-inner .header-right-btn a.backbtn {
display: none;
}
@media screen and (max-device-width: 840px) {
.sub-header .header .header-inner .header-right-btn a.header-btn-instagram {
display: none;
}
.sub-header .header .header-inner .header-right-btn a.backbtn {
display: flex;
justify-content: center;
align-items: center;
}
.sub-header .header .header-inner .header-right-btn a.backbtn span {
display: block;
position: relative;
width: 18px;
height: 18px;
border-bottom: 2px solid #555;
border-left: 2px solid #555;
}
.sub-header .header .header-inner .header-right-btn a.backbtn span.header-btn-to-referer, .sub-header .header .header-inner .header-right-btn a.backbtn span.header-btn-to-archive, .sub-header .header .header-inner .header-right-btn a.backbtn span.header-btn-to-front {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.customize-support .header.loaded {
top: 32px;
}
@media screen and (max-device-width: 840px) {
.customize-support .header.loaded {
top: 46px;
}
}
.firstimg {
height: calc(100vh - 60px);
width: 100%;
position: relative;
}
@media screen and (max-device-width: 840px) {
.firstimg {
height: 100vh;
}
}
.firstimg .first-content {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/front/palmtree.svg);
background-repeat: no-repeat;
background-size: 72.5vh;
position: absolute;
height: 100%;
width: 100%;
}
@media screen and (max-device-width: 840px) {
.firstimg .first-content {
min-width: 320px;
background: none;
padding: 0;
}
}
@media screen and (min-device-width: 841px) {
.firstimg .first-content {
padding-left: 500px;
background-position: left -100px bottom -100px;
}
}
@media screen and (min-width: 1080px) {
.firstimg .first-content {
min-width: 1024px;
padding-left: 50%;
background-position: left 1.5% bottom -100px;
}
}
.firstimg .first-content p {
color: #fff;
text-align: center;
font-size: 45px;
position: absolute;
top: calc(50% - 1.5em);
}
@media screen and (max-device-width: 840px) {
.firstimg .first-content p {
width: 100%;
font-size: 24px;
}
}
.firstimg a {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
text-align: center;
pointer-events: none;
}
.firstimg a::before {
content: "";
transition: all ease-in-out 0.5s;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
opacity: 0;
}
.firstimg a:hover::before {
opacity: 1;
}
.firstimg a span {
display: block;
margin: auto;
animation: blink 1s linear 0s infinite alternate-reverse;
color: #fff;
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.parallax {
background-attachment: fixed;
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
} .nav {
position: relative;
}
.main-nav {
width: 100%;
background-color: #fff;
z-index: 998;
display: block;
}
@media screen and (min-device-width: 841px) {
.main-nav {
border-bottom: 1px solid #e0e0e0;
}
}
.main-nav .inner {
display: flex;
}
@media screen and (max-device-width: 840px) {
.main-nav .inner {
display: block;
}
}
@media screen and (max-device-width: 840px) {
.main-nav {
position: fixed;
height: calc(100vh - 50px);
top: 50px;
right: -100vw;
transition: opacity ease-in-out 0.3s, right ease 0.3s;
opacity: 0;
}
.main-nav.open {
opacity: 1;
right: 0;
}
}
.main-nav ul {
display: flex;
width: calc(100% - 50px);
}
@media screen and (max-device-width: 840px) {
.main-nav ul {
width: 100%;
flex-direction: column;
}
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.main-nav ul {
flex-direction: row;
flex-wrap: wrap;
}
}
.main-nav ul li {
width: 12.5%;
overflow: hidden;
}
@media screen and (max-device-width: 840px) {
.main-nav ul li {
width: 100%;
}
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.main-nav ul li {
width: 50%;
}
.main-nav ul li:nth-of-type(odd) {
border-right: 1px solid #e0e0e0;
}
}
.main-nav ul li a {
color: #555;
padding: 10px 0;
display: block;
text-align: center;
font-size: 14px;
background-color: #fff;
transition: background-color ease-in-out 0.15s;
}
@media screen and (max-device-width: 840px) {
.main-nav ul li a {
height: 45px;
padding-top: 0;
line-height: 45px;
border-bottom: 1px solid #e0e0e0;
text-align: left;
display: flex;
}
.main-nav ul li a span.nav-title {
width: 50%;
padding-left: 2em;
}
.main-nav ul li a span.nav-title::before {
content: "";
display: inline-block;
height: 0;
width: 0;
border-left: 0.8em solid #000;
border-bottom: 0.4em solid transparent;
border-top: 0.4em solid transparent;
margin-right: 1em;
}
}
@media screen and (min-device-width: 841px) {
.main-nav ul li a:hover {
color: #000;
}
.main-nav ul li a:hover span.nav-subtitle {
border-top: 1px solid #000;
}
}
.main-nav ul li a span.nav-subtitle {
display: inline-block;
width: 85%;
border-top: 1px solid #555;
padding-top: 0.5em;
margin-top: 0.2em;
font-size: 12px;
transition: border-top ease-in-out 0.15s;
}
@media screen and (max-device-width: 840px) {
.main-nav ul li a span.nav-subtitle {
width: auto;
border-top: none;
padding-top: 0;
margin-top: 0;
color: #c0c0c0;
text-align: center;
width: 50%;
}
}
@media screen and (min-device-width: 841px) {
.main-nav ul li a.current {
color: #000;
}
.main-nav ul li a.current span.nav-subtitle {
border-top: 1px solid #000;
}
}
@media screen and (max-device-width: 840px) {
.main-nav ul li a.current span.nav-title::before {
border-left: 0.8em solid #28B7F3;
}
}
.main-nav .nav-right-btn {
padding: 10px;
display: block;
}
@media screen and (max-device-width: 840px) {
.main-nav .nav-right-btn {
display: none;
}
}
.main-nav .nav-right-btn a {
display: block;
width: 60px;
height: 60px;
padding: 10px;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/btn-instagram.svg);
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-device-width: 841px) {
.main-nav {
position: absolute;
top: 0;
}
.main-nav .nav-instagram {
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/btn-instagram.svg);
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
transition: all ease-in-out 0.3s;
opacity: 0.7;
}
.main-nav .nav-instagram:hover {
opacity: 1;
}
.main-nav.fixed-menu {
position: fixed;
border-bottom: 1px solid #e0e0e0;
}
.main-nav.fixed-menu.hidden-menu {
transition: all ease-in-out 0.1s;
}
.main-nav.fixed-menu.visible-menu {
transition: all ease-in-out 0.3s 0.15s;
}
.main-nav.fixed-menu .inner {
display: flex;
}
.main-nav.fixed-menu .inner .nav-logo {
padding: 0 10px;
width: 150px;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/logo-2row-gray.svg);
background-size: 140px;
background-repeat: no-repeat;
background-position: center;
transition: all ease-in-out 0.15s;
}
.main-nav.fixed-menu .inner .nav-logo:hover {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/logo-2row.svg);
}
.main-nav.fixed-menu .inner .nav-instagram {
display: block;
width: 50px;
height: 50px;
padding: 10px;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/btn-instagram.svg);
background-size: 30px;
background-position: center;
background-repeat: no-repeat;
transition: all ease-in-out 0.15s;
opacity: 0.7;
}
.main-nav.fixed-menu .inner .nav-instagram:hover {
opacity: 1;
}
.main-nav.fixed-menu .inner ul {
margin: 0 20px;
width: calc(100% - 150px);
min-width: 110px;
justify-content: space-around;
}
.main-nav.fixed-menu .inner ul li {
width: auto;
overflow: hidden;
display: flex;
align-items: center;
}
.main-nav.fixed-menu .inner ul li a {
transition: all ease-in-out 0.15s;
}
.main-nav.fixed-menu .inner ul li a:hover span.nav-subtitle {
border-top: none;
}
.main-nav.fixed-menu .inner ul li a span.nav-subtitle {
display: inline-block;
width: 90%;
border-top: none;
padding-top: 0;
margin-top: 0;
font-size: 10px;
font-weight: 500;
}
.main-nav.fixed-menu .inner ul li a span.nav-subtitle br {
display: none;
}
.main-nav.fixed-menu .inner ul li a span.nav-subtitle .sp-only {
display: inline;
}
.main-nav.fixed-menu .inner ul li a.current span.nav-subtitle {
border-top: none;
}
}
@media screen and (min-device-width: 841px) {
#sub-nav .inner {
max-width: 100%;
}
#sub-nav .inner .nav-logo {
background-image: none;
margin-left: 14px;
width: auto;
font-weight: bold;
font-stretch: ultra-condensed;
font-size: 1.75em;
color: #555;
display: flex;
align-items: center;
white-space: nowrap;
padding: 0;
}
#sub-nav .inner .nav-logo:hover {
background-image: none;
color: #000;
}
#sub-nav .inner .nav-logo::before {
content: "JUO KINDERGARTEN";
}
#sub-nav .inner ul {
justify-content: flex-end;
margin-left: 0;
}
#sub-nav .inner ul li {
margin-left: 0.75em;
}
}
@media screen and (min-device-width: 841px) and (min-width: 1080px) {
#sub-nav .inner ul li {
margin-left: 1.5em;
}
}
@media screen and (min-device-width: 841px) {
#sub-nav .inner ul li:first-of-type {
margin-left: 0;
}
}
@media screen and (min-device-width: 841px) {
#sub-nav .inner ul li .nav-subtitle {
display: none;
}
}
@media screen and (min-device-width: 841px) {
#sub-nav .inner .nav-instagram {
margin-right: calc(1em - 10px);
}
} .front-contents {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.front-contents#information {
border-bottom: 1px solid #e0e0e0;
padding-bottom: 108px;
}
@media screen and (min-device-width: 841px) {
.front-contents#information {
min-height: calc(100vh - 118px);
}
}
@media screen and (min-device-width: 841px) {
.front-contents#blog {
min-height: calc(100vh - 218px);
}
}
.front-contents h2 {
margin-top: 0;
}
.front-contents ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.front-contents ul li {
width: 22%;
margin-top: 20px;
position: relative;
}
@media screen and (max-device-width: 840px) {
.front-contents ul li {
margin-top: 40px;
}
}
@media screen and (max-device-width: 840px) and (orientation: portrait) {
.front-contents ul li {
width: 45%;
}
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.front-contents ul li {
width: 30%;
margin-bottom: 1em;
}
.front-contents ul li:nth-of-type(4) {
display: none;
}
}
.front-contents ul li a {
position: relative;
width: 100%;
height: 0;
padding-bottom: 141%;
display: block;
}
.front-contents ul li .binder {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/front/binder-board_colk.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-clip: border-box;
padding: 10px;
width: 100%;
height: 100%;
padding: 20% 7.5%;
position: absolute;
border-radius: 4px;
filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}
@media screen and (max-device-width: 840px) {
.front-contents ul li .binder {
margin: 0 auto 20px;
}
}
.front-contents ul li .binder::after {
content: "";
position: absolute;
top: -15%;
left: 15%;
width: 70%;
height: 0;
padding-top: 35%;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/front/binder-clip_gold.svg);
filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}
.front-contents ul li .binder .news-title h3 {
border-bottom: 1px solid #000;
padding: 5px 0;
font-weight: bold;
font-size: 18px;
line-height: 30px;
transition: all ease-in-out 0.3s;
transform-origin: left bottom;
text-align: left;
margin-bottom: 0;
}
@media screen and (max-device-width: 840px) {
.front-contents ul li .binder .news-title h3 {
font-size: 13px;
}
}
.front-contents ul li .binder .news-title p {
line-height: 1.75em;
text-align: justify;
margin-top: 0.5em;
font-size: 12px;
}
@media screen and (max-device-width: 840px) {
.front-contents ul li .binder .news-title p {
font-size: 10px;
}
}
.front-contents ul li .binder .news-title p.news-date {
text-align: right;
}
.front-contents ul li .binder .blog-img {
position: relative;
width: 100%;
display: block;
transition: all ease-in-out 0.3s;
background: #000;
height: 0;
padding-bottom: 100%;
}
.front-contents ul li .binder .blog-img img {
position: absolute;
display: block;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 1;
transition: all ease-in-out 0.3s;
}
.front-contents ul li .binder .blog-img h3 {
position: absolute;
display: block;
width: 100%;
height: 1em;
text-align: center;
font-size: 26px;
font-weight: bold;
color: #fff;
top: 50%;
margin-top: -0.5em;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}
.front-contents .more-link {
display: table;
text-align: center;
width: auto;
margin: 90px auto 0;
font-size: 18px;
color: #555;
transition: all ease-in-out 0.3s;
}
.front-contents .more-link:hover {
color: #000;
}
.front-contents .more-link .more-link-text {
display: inline-block;
} .content-nav {
overflow: hidden;
}
@media screen and (min-device-width: 841px) {
.content-nav {
min-width: 1024px;
}
}
.content-nav .content-nav-wrap {
overflow: visible;
margin-bottom: 50px;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide {
position: relative;
display: block;
overflow: hidden;
opacity: 0.5;
transition: opacity 0.5s ease-in-out 0s;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-wrap {
position: relative;
height: 0;
padding-top: 120%;
display: block;
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-wrap {
padding-top: 45%;
}
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-wrap .content-nav-slide-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-wrap .content-nav-slide-inner img {
height: 100%;
width: 100%;
object-fit: cover;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-text {
display: block;
width: 100%;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease-in-out 0s;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide .content-nav-slide-text span {
display: block;
width: 100%;
text-align: center;
font-size: 16px;
color: #555;
padding-top: 10px;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide.swiper-slide-active {
opacity: 1;
}
.content-nav .content-nav-wrap .content-nav-slide .swiper-slide.swiper-slide-active .content-nav-slide-text {
opacity: 1;
}
.content-nav .content-nav-wrap .swiper-pagination {
bottom: -120px;
}
.sub-nav-wrap {
width: 100%;
position: fixed;
display: block;
top: 50px;
z-index: 997;
}
@media screen and (max-device-width: 840px) {
.sub-nav-wrap {
display: none;
}
}
.sub-nav-wrap .sub-nav {
position: absolute;
width: 100%;
top: 0;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.sub-nav-wrap .sub-nav .inner {
max-width: 100%;
}
.sub-nav-wrap .sub-nav ul {
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 50px;
padding: 0 calc(1em - 5px);
}
.sub-nav-wrap .sub-nav ul li {
margin-left: 1em;
display: flex;
align-items: center;
}
.sub-nav-wrap .sub-nav ul li a {
padding: 5px;
align-items: center;
color: #555;
font-size: 14px;
transition: all 0.5s ease-in-out 0s;
}
.sub-nav-wrap .sub-nav ul li a:hover {
color: #000;
}
.sub-nav-wrap .sub-nav ul li a span:nth-of-type(2)::before {
content: "・";
}
.dynamic_layout {
width: 100%;
position: relative;
}
@media screen and (min-device-width: 841px) {
.dynamic_layout {
display: flex;
}
.dynamic_layout:nth-of-type(odd) {
justify-content: flex-start;
}
.dynamic_layout:nth-of-type(odd) .dynamic_image_mask .dynamic_image {
transform: skewX(10deg);
transform-origin: bottom right;
}
.dynamic_layout:nth-of-type(odd) .dynamic_image_mask .dynamic_image img {
transform: skewX(-10deg);
transform-origin: bottom right;
}
.dynamic_layout:nth-of-type(odd) .dynamic_content {
justify-content: flex-end;
}
.dynamic_layout:nth-of-type(even) {
justify-content: flex-end;
}
.dynamic_layout:nth-of-type(even) .dynamic_image_mask .dynamic_image {
transform: skewX(-10deg);
transform-origin: bottom left;
}
.dynamic_layout:nth-of-type(even) .dynamic_image_mask .dynamic_image img {
transform: skewX(10deg);
transform-origin: bottom left;
}
.dynamic_layout:nth-of-type(even) .dynamic_content {
justify-content: flex-start;
}
}
.dynamic_layout .dynamic_image_frame {
width: 53.15%;
padding-bottom: 35.45%;
position: relative;
}
@media screen and (max-device-width: 840px) {
.dynamic_layout .dynamic_image_frame {
width: 100%;
padding-bottom: 55.45%;
}
}
.dynamic_layout .dynamic_image_frame .dynamic_image_mask {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.dynamic_layout .dynamic_image_frame .dynamic_image_mask .dynamic_image {
height: 100%;
width: 100%;
overflow: hidden;
}
.dynamic_layout .dynamic_content {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
@media screen and (max-device-width: 840px) {
.dynamic_layout .dynamic_content {
position: relative;
display: block;
}
}
.dynamic_layout .dynamic_content .dynamic_content_inner {
width: 50%;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
@media screen and (max-device-width: 840px) {
.dynamic_layout .dynamic_content .dynamic_content_inner {
width: 100%;
}
}
.dynamic_layout .dynamic_content .dynamic_content_inner .dynamic_text {
width: 65%;
text-align: center;
padding-bottom: 4em;
}
.dynamic_layout .dynamic_content .dynamic_content_inner .dynamic_text p {
display: inline-block;
text-align: justify;
}
@media screen and (max-device-width: 840px) {
.dynamic_layout .dynamic_content .dynamic_content_inner .dynamic_text {
width: 100%;
padding: 1em 10px 2em;
}
}
:root {
--swiper-theme-color: #fff!important;
}
.swiper-button-next, .swiper-button-prev {
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
}
.swiper-pagination-bullet {
opacity: 0.7;
box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 0.7);
margin: 0 10px !important;
}
.swiper-pagination-bullet-active {
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.6);
} .history h2 {
text-align: left;
margin-bottom: 0;
}
@media screen and (max-device-width: 840px) {
.history .section-inner {
padding: 10px 10px;
}
}
.history .history-table {
display: flex;
}
@media screen and (max-device-width: 840px) {
.history .history-table {
font-size: 1em;
}
}
.history .history-table dt {
display: block;
min-width: 3.5em;
}
.history .history-table dd {
margin-left: 0.9em;
display: block;
text-align: justify;
}
.history .history-table dd span {
display: block;
}
.history .history-table dd span:nth-child(n+2) {
margin-top: 10px;
}
.history .history-img img {
max-height: 240px;
}
@media screen and (max-device-width: 840px) {
.history .history-img img {
max-height: 100px;
}
}
.purpose h3 span {
display: inline-block;
}
.purpose p {
text-align: justify;
}
.schedule ol.schedule-monthly {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: stretch;
margin-top: 5em;
}
.schedule ol.schedule-monthly li.schedule-block {
width: 100%;
margin-bottom: 6em;
display: flex;
align-items: flex-start;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block {
margin-bottom: 2em;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-april {
color: #FF66FF;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-april .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #FF66FF;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-may {
color: #FF6699;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-may .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #FF6699;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-june {
color: #CC6767;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-june .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #CC6767;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-july {
color: #FF6936;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-july .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #FF6936;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-august {
color: #ADAD1C;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-august .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #ADAD1C;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-september {
color: #8CBE58;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-september .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #8CBE58;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-october {
color: #33CC66;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-october .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #33CC66;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-november {
color: #56BFBC;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-november .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #56BFBC;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-december {
color: #54B3DE;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-december .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #54B3DE;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-january {
color: #709FCD;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-january .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #709FCD;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-february {
color: #9B699A;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-february .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #9B699A;
}
}
.schedule ol.schedule-monthly li.schedule-block.schedule-march {
color: #CC6799;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block.schedule-march .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px #CC6799;
}
}
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap {
width: 40%;
}
@media screen and (min-device-width: 841px) {
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap .schedule-image {
box-shadow: 80px 80px 0px -50px rgba(255, 255, 255, 0.8), 80px 80px 0px -50px;
}
}
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap .schedule-image .schedule-image-block .schedule-image-slide-wrap {
position: relative;
width: 100%;
padding-bottom: 80%;
height: 0;
display: block;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap .schedule-image .schedule-image-block .schedule-image-slide-wrap {
padding-bottom: 100%;
}
}
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap .schedule-image .schedule-image-block .schedule-image-slide-wrap .schedule-image-slide-inner {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.schedule ol.schedule-monthly li.schedule-block .schedule-image-wrap .schedule-image .schedule-image-block .schedule-image-slide-wrap .schedule-image-slide-inner img {
object-fit: cover;
width: 100%;
height: 100%;
}
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap {
width: 60%;
display: flex;
flex-direction: column;
}
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap p {
font-weight: bold;
font-size: 120px;
line-height: 0.5em;
padding-left: 0.75em;
padding-top: 0.2em;
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: 20px;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap p {
font-weight: bold;
font-size: 60px;
padding-left: 0;
padding-right: 40%;
margin-bottom: 0;
text-align: right;
}
}
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap p span {
font-size: 36px;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap p span {
font-size: 20px;
}
}
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap ul.monthly {
list-style: disc;
padding-left: 7em;
align-self: flex-start;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap ul.monthly {
padding-left: 2em;
align-self: flex-start;
}
}
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap ul.monthly li {
font-size: 22px;
line-height: 2em;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-monthly li.schedule-block .schdule-text-wrap ul.monthly li {
font-size: 14px;
line-height: 1.5em;
}
}
.schedule .schedule-daily-wrap {
display: flex;
justify-content: space-between;
}
@media screen and (max-device-width: 840px) {
.schedule .schedule-daily-wrap {
display: block;
}
}
.schedule .schedule-daily-wrap .schedule-daily-block {
width: 100%;
}
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-first {
margin-right: 2.5em;
}
@media screen and (max-device-width: 840px) {
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-first {
margin-right: 0;
margin-bottom: 2em;
}
}
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-first .schedule-daily-description {
background-color: #FFA726;
}
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-third {
margin-left: 2.5em;
}
@media screen and (max-device-width: 840px) {
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-third {
margin-left: 0;
margin-bottom: 2em;
}
}
.schedule .schedule-daily-wrap .schedule-daily-block.schedule-daily-third .schedule-daily-description {
background-color: #FF6699;
}
.schedule .schedule-daily-description {
display: flex;
align-items: center;
justify-content: center;
height: 3em;
font-size: 24px;
font-weight: bold;
color: #fff;
}
@media screen and (max-device-width: 840px) {
.schedule .schedule-daily-description {
font-size: 20px;
}
}
.schedule .schedule-daily-description span {
display: block;
}
.schedule ol.schedule-daily {
display: table;
}
.schedule ol.schedule-daily li {
display: table-row;
width: 100%;
}
.schedule ol.schedule-daily li .schedule-daily-time {
font-family: "dseg7classic";
font-size: 36px;
display: table-cell;
font-weight: bold;
font-style: italic;
color: #555;
text-align: right;
padding-top: 30px;
border-bottom: 1px solid;
vertical-align: bottom;
white-space: nowrap;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-daily li .schedule-daily-time {
font-size: 22px;
}
}
.schedule ol.schedule-daily li .schedule-daily-content {
font-size: 18px;
display: table-cell;
justify-content: flex-start;
align-items: flex-end;
padding-left: 1em;
border-bottom: 1px solid;
vertical-align: bottom;
width: 100%;
}
@media screen and (max-device-width: 840px) {
.schedule ol.schedule-daily li .schedule-daily-content {
font-size: 16px;
}
}
.temporary-flex {
display: flex;
}
@media screen and (max-device-width: 840px) {
.temporary-flex {
display: block;
}
}
.temporary-flex .temporary-table {
display: flex;
flex-direction: column;
width: 40%;
margin: 0 auto 2em;
}
@media screen and (max-device-width: 840px) {
.temporary-flex .temporary-table {
width: 100%;
}
}
.temporary-flex .temporary-table thead, .temporary-flex .temporary-table tbody {
font-size: 22px;
display: block;
}
@media screen and (max-device-width: 840px) {
.temporary-flex .temporary-table thead, .temporary-flex .temporary-table tbody {
font-size: 18px;
}
}
.temporary-flex .temporary-table thead {
order: 1;
font-weight: bold;
border-bottom: 1px solid #555;
}
.temporary-flex .temporary-table tbody {
order: 2;
}
@media screen and (max-device-width: 840px) {
.temporary-flex .temporary-table tbody {
padding-left: 1em;
padding-right: 1em;
}
}
.temporary-flex .temporary-table tr {
display: flex;
width: 100%;
padding: 0.25em 0;
justify-content: space-around;
border-bottom: 1px solid #e0e0e0;
}
@media screen and (max-device-width: 840px) {
.temporary-flex .temporary-table tr.tabletitle-row {
display: block;
}
.temporary-flex .temporary-table tr.tabletitle-row th, .temporary-flex .temporary-table tr.tabletitle-row td {
display: block;
text-align: center;
}
.temporary-flex .temporary-table tr.tabletitle-row th .temporary-ruler, .temporary-flex .temporary-table tr.tabletitle-row td .temporary-ruler {
display: none;
}
}
.temporary-flex .temporary-table tr th, .temporary-flex .temporary-table tr td {
display: flex;
align-items: stretch;
justify-content: flex-end;
}
.temporary-flex .temporary-table tr th.temporary-timetable, .temporary-flex .temporary-table tr td.temporary-timetable {
min-width: 6em;
font-weight: normal;
}
.temporary-flex .temporary-table tr th.temporary-pricetable, .temporary-flex .temporary-table tr td.temporary-pricetable {
width: 50%;
}
.temporary-flex .temporary-table tr th.temporary-tabletitle, .temporary-flex .temporary-table tr td.temporary-tabletitle {
white-space: nowrap;
}
.temporary-flex .temporary-table tr th span, .temporary-flex .temporary-table tr td span {
display: block;
}
.temporary-flex .temporary-table tr th span.temporary-for, .temporary-flex .temporary-table tr td span.temporary-for {
white-space: nowrap;
}
.temporary-flex .temporary-table tr th span.temporary-time, .temporary-flex .temporary-table tr td span.temporary-time {
width: 2.5em;
text-align: right;
}
.temporary-flex .temporary-table tr th span.temporary-middle, .temporary-flex .temporary-table tr td span.temporary-middle {
width: 1em;
text-align: center;
}
.temporary-flex .temporary-table tr th span.temporary-price, .temporary-flex .temporary-table tr td span.temporary-price {
white-space: nowrap;
text-align: right;
}
.temporary-notice {
display: block;
text-align: center;
}
.temporary-notice p {
display: inline-block;
margin: auto;
text-align: left;
}
.facility .bubbles-wrap {
position: relative;
padding: 5%;
text-align: justify;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/facility.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
background-clip: border-box;
}
@media screen and (max-device-width: 840px) {
.facility .bubbles-wrap {
background-image: none;
padding: 0;
}
}
.facility .bubbles-wrap::after {
content: "";
width: 100%;
display: block;
height: 0;
clear: both;
}
.facility .bubbles-wrap .bubble-position {
position: relative;
width: auto;
display: inline-block;
margin: 1em;
font-feature-settings: "palt";
}
.facility .bubbles-wrap .bubble-position:nth-of-type(1) {
min-width: 620px;
vertical-align: top;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(1) .bubble {
background-color: #ff8000;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(2) {
min-width: 420px;
vertical-align: top;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(2) .bubble {
background-color: #33b496;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(3) {
min-width: 490px;
vertical-align: bottom;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(3) .bubble {
background-color: #ffcd19;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(4) {
min-width: 300px;
vertical-align: top;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(4) .bubble {
background-color: #50b4f8;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(5) {
min-width: 380px;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(5) .bubble {
background-color: #ff1a39;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(6) {
min-width: 240px;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(6) .bubble {
background-color: #00b2b5;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(7) {
min-width: 480px;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(7) .bubble {
background-color: #31882c;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(8) {
min-width: 320px;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(8) .bubble {
background-color: #6432c7;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(9) {
min-width: 260px;
vertical-align: top;
}
.facility .bubbles-wrap .bubble-position:nth-of-type(9) .bubble {
background-color: #ff61be;
}
@media screen and (max-device-width: 840px) {
.facility .bubbles-wrap .bubble-position {
display: block;
min-width: auto !important;
width: 100%;
margin: 0;
}
}
.facility .bubbles-wrap .bubble-position .bubble {
position: relative;
width: 100%;
height: 0;
display: block;
padding-bottom: 100%;
border-radius: 100%;
box-shadow: 0 0 10px 10px #fff;
}
@media screen and (max-device-width: 840px) {
.facility .bubbles-wrap .bubble-position .bubble {
height: auto;
padding: 0;
border-radius: 0;
box-shadow: none;
}
}
.facility .bubbles-wrap .bubble-position .bubble .bubble-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: 10% 15% 15%;
color: #fff;
}
@media screen and (max-device-width: 840px) {
.facility .bubbles-wrap .bubble-position .bubble .bubble-inner {
position: relative;
padding: 2em 1em;
}
}
.facility .bubbles-wrap .bubble-position .bubble .bubble-inner dt {
text-align: center;
font-size: 1.25em;
line-height: 3em;
}
.facility .bubbles-wrap .bubble-position .bubble .bubble-inner dd {
text-align: justify;
line-height: 2em;
}
.facility .bubbles-wrap .bubble-position .bubble .bubble-inner dd span {
display: block;
text-align: justify;
}
.extra .dynamic_text table {
display: inline-table;
width: 100%;
}
.extra .dynamic_text table tr th, .extra .dynamic_text table tr td {
padding-top: 1em;
vertical-align: middle;
}
.extra .dynamic_text table tr th {
text-align: right;
white-space: nowrap;
padding-right: 0.5em;
}
.extra .dynamic_text table tr td:nth-of-type(1) {
text-align: left;
}
.extra .dynamic_text table tr td:nth-of-type(3) {
margin: 0 -0.5em;
}
.extra .dynamic_text table tr.blank th, .extra .dynamic_text table tr.blank td {
padding-top: 0em;
}
.extra .dynamic_text table span {
font-size: 0.8em;
display: inline-block;
}
.extra .dynamic_text p {
text-align: center;
} @media screen and (min-device-width: 841px) {
.objective p {
text-align: center;
}
}
.objective p span {
display: block;
}
.training .training-block {
width: 100%;
}
.training .training-block:first-of-type {
margin-top: 4em;
}
.training .training-block .training-block-wrap {
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap {
flex-direction: column;
}
}
.training .training-block .training-block-wrap .training-image-wrap {
width: 50%;
position: relative;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-image-wrap {
width: 100%;
height: 30vh;
}
}
.training .training-block .training-block-wrap .training-image-wrap .training-image {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.training .training-block .training-block-wrap .training-image-wrap .training-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
}
.training .training-block .training-block-wrap .training-image-wrap.commandments-image-wrap {
order: 2;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-image-wrap.commandments-image-wrap {
order: 1;
}
}
.training .training-block .training-block-wrap .training-image-wrap.mentalities-image-wrap {
order: 1;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-image-wrap.mentalities-image-wrap {
order: 2;
}
}
.training .training-block .training-block-wrap .training-list-wrap {
width: 50%;
display: block;
padding-top: 2em;
padding-left: 1em;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap {
width: 100%;
}
}
.training .training-block .training-block-wrap .training-list-wrap h3 {
width: 100%;
max-width: 540px;
text-align: left;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap h3 {
text-align: center;
padding: 0 1em;
}
}
.training .training-block .training-block-wrap .training-list-wrap.commandment-list-wrap {
order: 1;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap.commandment-list-wrap {
order: 2;
}
}
.training .training-block .training-block-wrap .training-list-wrap.commandment-list-wrap h3 {
margin-left: auto;
}
.training .training-block .training-block-wrap .training-list-wrap.mentality-list-wrap {
order: 2;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap.mentality-list-wrap {
order: 2;
}
}
.training .training-block .training-block-wrap .training-list-wrap.mentality-list-wrap h3 {
margin-right: auto;
padding-left: 0.5em;
}
.training .training-block .training-block-wrap .training-list-wrap .training-list {
width: 100%;
display: flex;
}
.training .training-block .training-block-wrap .training-list-wrap .training-list.commandment-list {
justify-content: flex-end;
}
.training .training-block .training-block-wrap .training-list-wrap .training-list.mentality-list {
justify-content: flex-start;
}
.training .training-block .training-block-wrap .training-list-wrap .training-list ol {
list-style-type: decimal;
margin-left: 2.5em;
width: 100%;
max-width: 540px;
padding: 0 2em 2em;
font-size: 1.125em;
font-weight: bold;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap .training-list ol {
padding: 0px 1em 2em 2em;
font-size: 1em;
font-weight: bold;
text-align: justify;
margin-left: 0;
}
}
.training .training-block .training-block-wrap .training-list-wrap .training-list ol li {
line-height: 2em;
}
.training .training-block .training-block-wrap .training-list-wrap .training-list ul {
list-style-type: disc;
margin-left: 0.5em;
width: 100%;
max-width: 540px;
padding: 0 0.5em 2em 2em;
font-size: 1.125em;
font-weight: bold;
}
@media screen and (max-device-width: 840px) {
.training .training-block .training-block-wrap .training-list-wrap .training-list ul {
padding: 0px 1em 2em;
font-size: 1em;
font-weight: bold;
text-align: justify;
margin-left: 0;
}
}
.training .training-block .training-block-wrap .training-list-wrap .training-list ul li {
line-height: 2em;
}
.training .training-block .center {
display: block;
text-align: center;
padding-top: 5em;
}
.training .training-block .center p {
display: inline-block;
text-align: justify;
}
.recreation .title {
height: 120px;
}
.recreation .title h2 {
display: none;
}
@media screen and (max-device-width: 840px) {
.recreation .title {
height: 40px;
}
}
.english .inner img {
object-fit: unset;
max-width: 100%;
height: auto;
} .information-archive-section {
padding-top: 0;
}
.information-archive-section .information-archives {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2em;
}
@media screen and (max-device-width: 840px) {
.information-archive-section .information-archives {
padding: 0;
}
}
.information-archive-section .information-archives li {
width: 22%;
margin-top: 50px;
position: relative;
}
@media screen and (max-device-width: 840px) and (orientation: portrait) {
.information-archive-section .information-archives li {
width: 45%;
}
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.information-archive-section .information-archives li {
width: 30%;
margin-bottom: 1em;
}
.information-archive-section .information-archives li:nth-of-type(4) {
display: none;
}
}
.information-archive-section .information-archives li.blank {
height: 0;
visibility: hidden;
}
.information-archive-section .information-archives li a {
position: relative;
width: 100%;
height: 0;
padding-bottom: 141%;
display: block;
}
.information-archive-section .information-archives li .news-thumb {
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/front/binder-board_colk.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-clip: border-box;
padding: 10px;
width: 100%;
height: 100%;
padding: 20% 7.5%;
position: absolute;
border-radius: 4px;
filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}
@media screen and (max-device-width: 840px) {
.information-archive-section .information-archives li .news-thumb {
margin: 0 auto 20px;
}
}
.information-archive-section .information-archives li .news-thumb::after {
content: "";
position: absolute;
top: -15%;
left: 15%;
width: 70%;
height: 0;
padding-top: 35%;
background-image: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/front/binder-clip_gold.svg);
filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}
.information-archive-section .information-archives li .news-thumb h3 {
border-bottom: 1px solid #000;
padding: 5px 0;
font-weight: bold;
font-size: 18px;
line-height: 30px;
transition: all ease-in-out 0.3s;
transform-origin: left bottom;
text-align: left;
margin-bottom: 0;
}
@media screen and (max-device-width: 840px) {
.information-archive-section .information-archives li .news-thumb h3 {
font-size: 13px;
}
}
.information-archive-section .information-archives li .news-thumb p {
line-height: 1.75em;
text-align: justify;
margin-top: 0.5em;
font-size: 12px;
}
@media screen and (max-device-width: 840px) {
.information-archive-section .information-archives li .news-thumb p {
font-size: 10px;
}
}
.information-archive-section .information-archives li .news-thumb p.news-date {
text-align: right;
}
.blog-archive-section {
padding-top: 0;
}
.blog-archive-section .blog-archives {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 50px auto;
padding: 2em;
max-width: 1280px;
}
@media screen and (max-device-width: 840px) {
.blog-archive-section .blog-archives {
margin: 0 auto 50px;
padding: 0;
}
}
.blog-archive-section .blog-archives li {
width: calc(16.6666666667% - 20px);
margin: 10px 0;
}
@media screen and (max-device-width: 840px) and (orientation: portrait) {
.blog-archive-section .blog-archives li {
width: 45%;
margin: 1em 5px;
}
}
@media screen and (max-device-width: 840px) and (orientation: landscape) {
.blog-archive-section .blog-archives li {
width: 30%;
margin: 1em 5px;
}
.blog-archive-section .blog-archives li:nth-of-type(4) {
display: none;
}
}
.blog-archive-section .blog-archives li.blank {
height: 0;
visibility: hidden;
margin: 0;
}
.blog-archive-section .blog-archives li .blog-thumb {
border-radius: 4px;
position: relative;
width: 100%;
height: 0px;
padding-bottom: 100%;
display: block;
}
.blog-archive-section .blog-archives li .blog-thumb a {
position: absolute;
width: 100%;
height: 100%;
display: block;
transition: all ease-in-out 0.3s;
background: #000;
}
.blog-archive-section .blog-archives li .blog-thumb a img {
position: relative;
display: block;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 1;
transition: all ease-in-out 0.3s;
}
.blog-archive-section .blog-archives li .blog-thumb a h3 {
position: absolute;
display: block;
width: 100%;
height: 1em;
text-align: center;
font-size: 26px;
font-weight: bold;
color: #fff;
top: 50%;
margin-top: -0.5em;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}
.blog-archive-section .blog-archives li .blog-thumb a:hover img {
opacity: 0.7;
}
.blog-archive-section .blog-archives li h4 {
width: 100%;
overflow: hidden;
margin: 0.5em 0;
font-size: 0.8em;
}
@media screen and (max-device-width: 840px) {
.blog-archive-section .blog-archives li h4 {
overflow: visible;
}
}
.blog-archive-section .blog-archives li h4 a {
white-space: nowrap;
display: inline-block;
min-width: 100%;
}
@media screen and (max-device-width: 840px) {
.blog-archive-section .blog-archives li h4 a {
white-space: normal;
}
}
.blog-archive-section .blog-archives li .blog-categolies {
font-size: 0.9em;
}
.blog-archive-section .blog-archives li .blog-categolies a {
font-weight: bold;
}
@media screen and (min-device-width: 841px) {
.blog-archive-section .blog-archives li:hover h4 a {
animation: scrollSample01 10s linear 0.5s infinite;
}
}
@keyframes scrollSample01 {
0% {
transform: translateX(0);
}
49% {
transform: translateX(-100%);
opacity: 1;
}
50% {
transform: translateX(-100%);
opacity: 0;
}
51% {
transform: translateX(100%);
opacity: 0;
}
52% {
transform: translateX(100%);
opacity: 1;
}
100% {
transform: translateX(0%);
}
}
.archives-pagination ul {
display: flex;
margin: auto;
flex-direction: row;
justify-content: center;
margin-bottom: 4em;
}
@media screen and (min-device-width: 841px) {
.archives-pagination ul .page-numbers {
font-size: 1.3em;
width: 2.5em;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease-in-out 0s;
border-right: 1px solid #555;
}
.archives-pagination ul .page-numbers:hover {
color: #000;
}
.archives-pagination ul .page-numbers:last-of-type {
border-right: none;
}
.archives-pagination ul .page-numbers.next, .archives-pagination ul .page-numbers.prev {
font-size: 1.3em;
font-family: sans-serif;
}
}
@media screen and (max-device-width: 840px) {
.archives-pagination ul {
padding: 0 10px;
}
.archives-pagination ul .page-numbers {
font-size: 1.5em;
width: 2.5em;
height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #555;
border-bottom: 1px solid #555;
border-left: 1px solid #555;
}
.archives-pagination ul .page-numbers.before-numbers, .archives-pagination ul .page-numbers.after-numbers, .archives-pagination ul .page-numbers.first, .archives-pagination ul .page-numbers.last {
display: none;
}
.archives-pagination ul .page-numbers:last-of-type {
border-right: 1px solid #555;
}
}
.archives-pagination ul .current {
color: #000;
font-weight: bold;
}
@media screen and (min-device-width: 841px) {
.archive-area {
display: table;
margin: 150px auto 0;
max-width: 1280px;
}
}
@media screen and (max-device-width: 840px) {
.archive-area {
display: block;
margin-top: 2em;
}
}
@media screen and (min-device-width: 841px) {
.archive-area .archive-area-block {
display: table-row;
max-width: 1280px;
}
.archive-area .archive-area-block h3 {
display: table-cell;
text-align: left;
padding-right: 1.5em;
}
}
@media screen and (max-device-width: 840px) {
.archive-area .archive-area-block {
display: block;
}
.archive-area .archive-area-block h3 {
margin-bottom: 0;
font-size: 1.5em;
}
}
@media screen and (min-device-width: 841px) {
.archive-area .archive-area-block .monthly-archives {
display: table-cell;
}
.archive-area .archive-area-block .monthly-archives .year {
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 1.3em;
padding: 0.5em 0;
}
.archive-area .archive-area-block .monthly-archives .year a {
display: flex;
justify-content: center;
align-items: center;
height: 1.5em;
}
.archive-area .archive-area-block .monthly-archives .year a:hover {
color: #000;
}
.archive-area .archive-area-block .monthly-archives .year .monthly-list {
display: flex;
margin-left: 1.5em;
flex-direction: row;
}
.archive-area .archive-area-block .monthly-archives .year .monthly-list li a {
margin-right: 1em;
}
}
@media screen and (max-device-width: 840px) {
.archive-area .archive-area-block .monthly-archives {
display: block;
width: 100%;
padding: 10px;
margin: 0;
font-size: 1.5em;
}
.archive-area .archive-area-block .monthly-archives .year {
display: flex;
flex-direction: column;
margin-bottom: 1em;
}
.archive-area .archive-area-block .monthly-archives .year a {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
height: 2em;
font-weight: bold;
}
.archive-area .archive-area-block .monthly-archives .year > a {
pointer-events: none;
}
.archive-area .archive-area-block .monthly-archives .year .monthly-list {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.archive-area .archive-area-block .monthly-archives .year .monthly-list li {
width: 8.3333333333%;
}
.archive-area .archive-area-block .monthly-archives .year .monthly-list li a {
display: flex;
height: 100%;
width: 100%;
}
}
@media screen and (min-device-width: 841px) {
.archive-area .archive-area-block .category-archives {
display: table-cell;
padding: 50px 0;
}
.archive-area .archive-area-block .category-archives ul {
display: flex;
}
.archive-area .archive-area-block .category-archives ul li:nth-of-type(n+2)::before {
content: "|";
margin: 0 1em;
}
.archive-area .archive-area-block .category-archives ul li a:hover {
color: #000;
}
}
@media screen and (max-device-width: 840px) {
.archive-area .archive-area-block .category-archives {
display: block;
}
.archive-area .archive-area-block .category-archives ul {
display: block;
margin-top: 0.5em;
}
.archive-area .archive-area-block .category-archives ul li {
display: block;
font-size: 1.25em;
height: 2em;
display: flex;
justify-content: center;
align-items: center;
}
} .single {
margin-top: 0;
padding-top: 0;
}
.single section {
padding-top: 0;
border-top: 0;
}
.single section a:hover {
color: #000;
}
.single section a:hover img {
opacity: 0.7;
}
.eyecatch {
position: relative;
margin-top: 100px;
width: 100%;
height: 0;
padding-top: 32%;
}
.eyecatch.eyecatch-posts {
margin-top: 50px;
}
@media screen and (max-device-width: 840px) {
.eyecatch {
margin-top: 50px;
}
}
.eyecatch img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.eyecatch.page {
margin-top: 50px;
}
.post .section-inner, .information .section-inner {
max-width: 720px;
min-width: auto;
}
.post .section-inner.post-title .date, .post .section-inner.post-content .date, .information .section-inner.post-title .date, .information .section-inner.post-content .date {
font-size: 1.25em;
}
.post .section-inner.post-title h2, .post .section-inner.post-content h2, .information .section-inner.post-title h2, .information .section-inner.post-content h2 {
font-size: 24px;
text-align: left;
margin: 0;
color: #555;
}
@media screen and (max-device-width: 840px) {
.post .section-inner.post-title, .post .section-inner.post-content, .information .section-inner.post-title, .information .section-inner.post-content {
font-size: 3vw;
}
.post .section-inner.post-title h2, .post .section-inner.post-content h2, .information .section-inner.post-title h2, .information .section-inner.post-content h2 {
font-size: 14px;
}
.post .section-inner.post-title img, .post .section-inner.post-content img, .information .section-inner.post-title img, .information .section-inner.post-content img {
max-width: 100%;
height: auto;
object-fit: unset;
}
}
.post .section-inner.post-control, .information .section-inner.post-control {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.post .section-inner.post-control div.prev-btn, .information .section-inner.post-control div.prev-btn {
justify-self: flex-start;
text-align: left;
}
.post .section-inner.post-control div.next-btn, .information .section-inner.post-control div.next-btn {
justify-self: flex-end;
text-align: right;
}
.post .section-inner.post-metadata, .information .section-inner.post-metadata {
border-top: 1px solid #e0e0e0;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.post .section-inner.post-metadata a, .information .section-inner.post-metadata a {
margin: 0 1em;
}
.post .section-inner.post-metadata a:last-of-type, .information .section-inner.post-metadata a:last-of-type {
margin-right: 0;
}
.post .post-content {
font-size: 16px;
}
.post img {
width: 100%;
height: auto;
margin: auto;
display: block;
object-fit: unset;
}
.post .nodrag {
position: relative;
}
.post .nodrag::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//www.juo-youchien.jp/cms/wp-content/themes/juokindergarten/images/common/transparent.png);
background-position: top left;
background-size: 100% 100%;
}
.aligncenter {
text-align: center;
}
.alignnone {
text-align: left;
}
.admission p, .recruit p {
margin-bottom: 1.5em;
}
.admission table, .recruit table {
width: 100%;
margin: 0 auto 30px;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.admission table tr th, .admission table tr td, .recruit table tr th, .recruit table tr td {
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
}
.admission table tr th span, .admission table tr td span, .recruit table tr th span, .recruit table tr td span {
display: inline-block;
}
.admission table tr th, .recruit table tr th {
padding: 0.7em 0.2em;
text-align: center;
width: auto;
background-color: #efefef;
white-space: nowrap;
}
.admission table tr td, .recruit table tr td {
padding: 0.7em 0.5em;
}
.admission table tr td .price-table, .recruit table tr td .price-table {
display: table;
}
.admission table tr td .price-table .price-row, .recruit table tr td .price-table .price-row {
display: table-row;
}
.admission table tr td .price-table .price-row .price, .recruit table tr td .price-table .price-row .price {
display: table-cell;
text-align: right;
}
.admission table tr td .price-table .price-row .age, .recruit table tr td .price-table .price-row .age {
display: table-cell;
text-align: left;
}
.admission .flow-flex, .recruit .flow-flex {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
@media screen and (max-device-width: 840px) {
.admission .flow-flex, .recruit .flow-flex {
display: block;
}
}
.admission .flow-flex dl, .recruit .flow-flex dl {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
margin-bottom: 3em;
}
.admission .flow-flex dl dt, .recruit .flow-flex dl dt {
padding-bottom: 1em;
}
.admission .flow-flex dl dd, .recruit .flow-flex dl dd {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.admission .flow-flex dl dd ul, .recruit .flow-flex dl dd ul {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.admission .flow-flex dl dd ul li, .recruit .flow-flex dl dd ul li {
padding-bottom: 0.5em;
}
.question dl, .recruit dl {
margin-bottom: 3em;
}
.question dl dt, .recruit dl dt {
color: #000;
}
.question dl dd, .recruit dl dd {
color: #555;
}
.question dl dt, .question dl dd, .recruit dl dt, .recruit dl dd {
display: table;
line-height: 1.5em;
font-weight: normal;
margin-bottom: 0.5em;
}
@media screen and (min-device-width: 841px) {
.question dl dt, .question dl dd, .recruit dl dt, .recruit dl dd {
font-size: 16px;
}
}
.question dl dt span, .question dl dd span, .recruit dl dt span, .recruit dl dd span {
display: table-cell;
}
.question dl dt span:first-of-type, .question dl dd span:first-of-type, .recruit dl dt span:first-of-type, .recruit dl dd span:first-of-type {
text-align: right;
}
.question dl dt span:last-of-type, .question dl dd span:last-of-type, .recruit dl dt span:last-of-type, .recruit dl dd span:last-of-type {
padding-left: 0.5em;
text-align: justify;
}
.recruit .recruit-faq {
display: flex;
align-items: stretch;
margin-bottom: 50px;
}
@media screen and (max-device-width: 840px) {
.recruit .recruit-faq .recruit-faq-img {
display: none;
}
}
.recruit .recruit-faq .recruit-faq-img img {
width: 100%;
height: 100%;
}
.recruit .recruit-faq .recruit-faq-content {
padding-left: 2em;
}
@media screen and (max-device-width: 840px) {
.recruit .recruit-faq .recruit-faq-content {
padding-left: 0;
}
}
form input, form textarea {
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 0.5em;
}
form textarea {
width: 100%;
}
@media screen and (max-device-width: 840px) {
form table tr td {
display: flex;
width: 100%;
}
form table tr td input, form table tr td textarea {
width: 100%;
}
}
form table tr td div {
display: flex;
}
form table tr td div label {
display: flex;
justify-content: flex-start;
margin-right: 1em;
width: 30%;
}
@media screen and (max-device-width: 840px) {
form table tr td div label {
width: auto;
}
}
form table tr td div label span.label {
padding-right: 0.25em;
display: flex;
align-items: center;
justify-content: flex-end;
}
form table tr td div label input {
width: 100%;
}
form .wpcf7-form-control-wrap {
width: 100%;
}
form .wpcf7-submit {
display: block;
margin: auto;
padding: 0.5em 2em;
border-radius: 100px;
color: #fff;
background-color: #555;
}
.class-content {
line-height: 2em;
margin-bottom: 2em;
}
.class-content dl dt {
font-weight: normal;
}
.class-content dl dd table tr th {
text-align-last: justify;
font-weight: normal;
white-space: nowrap;
width: 3em;
}
.contact-content {
display: flex;
justify-content: space-between;
}
.contact-content .contact-content-text {
margin-bottom: 2em;
}
@media screen and (max-device-width: 840px) {
.contact-content {
display: block;
}
}
.contact-content #srm_gmp_embed_1 {
display: block;
}
@media screen and (min-device-width: 841px) {
.contact-content #srm_gmp_embed_1 {
max-width: 600px;
}
}