@charset "utf-8";
/* -----
css Information
File name；service.css
Description；services/
First time；2026-01
Editors；bukuyan
Last Editor；
Update；
----- */

.main-area {
padding: 0 8px;
}

.hero-daycare {
margin: 72px auto 0;
position: relative;
width: 100%;
}

.hero-daycare img {
width: 100%;
}

.lead-topinner {
margin: 40px 0 0 -8px;
width: calc(100% + 16px);
}

.lead-top .title {
color: #ff4500;
font-size: 2.0rem;
line-height: 1.8em;
margin-top: -20%;
padding: 8px 0 8px 8px;
text-shadow: 2px 0 1px rgba(0,0,0, .4);
}

.lead-top p {
font-size: 1.8rem;
padding: 8px;
}

.lead-top .spotLight {
background: #ffe4c4;
border-radius: 4px;
box-shadow: 0 2px 0 0 #ed812b;
color: #171515;
font-size: 2.0rem;
letter-spacing: 0.3rem;
line-height: 2.2;
margin: 40px auto 32px;
padding-left: 80px;
position: relative;
width: 90%;
}

.lead-top .inner-1 {
display: inline-block;
left: 16px;
letter-spacing: 0;
position: absolute;
top: -20px;
transform: rotate(320deg);
}

.lead-top .inner-1::first-letter {
background: #fff;
border-radius: 50%;
color: #1e90ff;
font-size: 3.2rem;
text-shadow: 2px 0 0 rgba(0,0,205, .8);
}

.lead-top p.item {
padding-left: 28px;
}

.lead-top .itemize {
padding-left: 16px;
}

.lead-top .itemize li {
font-size: 1.8rem;
list-style: url(../images/daycare/lsm2.gif);
margin-bottom: 8px;
padding-left: 1.0rem;
}

#concept {
margin-top: 40px;
}

#concept .pickup h2,
#concept h2 {
font-size: 2.0rem;
letter-spacing: 1.0rem;
text-align: center;
}

#concept .concept-area {
padding: 80px 0;
position: relative;
}

#concept .concept-img {
margin: 0 auto;
width: 50%;
}

#concept .concept-area ul {
margin-top: 24px;
padding-left: 16px;
}

#concept .concept-area ul li {
font-size: 1.8rem;
list-style: url(../images/daycare/lsm.gif);
margin-bottom: 8px;
padding-left: 1.0rem;
}

#concept .pickup {
background: #fff;
margin: 0 auto 48px;
outline: 2px solid #00af81;
padding: 8px;
position: relative;
width: 98%;
}

#concept .pickup::before {
border: solid 8px transparent;
border-bottom-color: #00af81;
content: "";
height: 0;
left: 0;
position: absolute;
top: -16px;
width: 100%;
}

#concept .pickup h2 {
padding-top: 8px;
}

#concept .pickup p {
font-size: 1.8rem;
padding-top: 16px;
}

.product li {
margin-bottom: 64px;
}

.product h3 {
font-size: clamp(1.8rem, calc(.65rem + 1vw), 2.0rem);
padding: 0 8px;
}

.product .explains {
font-size: 1.8rem;
padding: 8px;
}

.model-course50 {
height: 120px;
margin: -16px 0 40px 16px;
position: relative;
width: 120px;
}

.model-course50 .inner {
background: rgba(0,255,127, .5);
border: 2px solid #ebebeb;
border-radius: 50%;
box-shadow: 0 0 5px rgba(000,000,000, .3);
box-sizing: border-box;
color: #1c1c1c;
display: block;
font-size: 2.0rem;
height: 120px;
line-height: 1.8;
padding: 1.87rem 0;
text-align: center;
text-decoration: none;
transition: .8s;
width: 120px;
}

.model-course50 .inner span {
display: inline;
left: -24px;
position: absolute;
top: 38%;
width: 320px;
}

.main-area .announce {
margin-bottom: 40px;
}

.main-area .announce p {
padding: 8px;
}

.info .contact .e-mail {
margin: 8px 0 40px;
padding: 0 2px;
}

.info .dayservice-qr {
height: 160px;
margin: 0 0 24px 24px;
width: 160px;
}

.info .dayservice-qr img {
width: 100%;
}

.info .contact .space {
padding-left: 1.0rem;
}

#service-area {
color: #343434;
margin: 24px auto 48px;
padding: 0 8px;
}

#service-area h2 {
font-size: 2.0rem;
}

#service-area p {
font-size: 1.8rem;
}

.service-item {
color: #343434;
line-height: 1.5;
margin: 24px auto;
}

.service-item ul li [class^="innerbox"] {
font-size: 1.8rem;
margin: 32px 0;
}

.service-item ul li [class^="innerbox"] li {
margin: 16px 0 0;
}

.service-item ul li [class^="innerbox"] li.subject {
position: relative;
}

.service-item ul li [class^="innerbox"] li.subject::after {
content: url(../images/daycare/lsm3a.png);
left: -16px;
top: -16px;
position: absolute;
}

.service-item ul li [class^="itemize"] {
font-size: 2.0rem;
padding-left: 16px;
position: relative;
}

.service-item ul li .itemize-s {
border-bottom: 2px solid #1769ff;
font-size: 1.8rem;
padding-left: 0;
}

.steps {
margin: 0;
padding: 0;
}

.steps span {
color: #000;
border-color: transparent;
display: block;
margin: 32px 0 40px;
padding: 8px;
position: relative;
text-align: center;
width: 96px;
}

.steps span::after {
border-color: transparent;
border-style: solid;
border-width: 24px 16px 0 64px;
bottom: -24px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
z-index: 1;
}

.steps span.ins {
background: #ffd3a8;
font-size: 2.0rem;
letter-spacing: .5rem;
}

.steps span.ins::after {
border-color: #ffc184 transparent transparent transparent;
}

.service-provision {
margin-top: 40px;
}

.service-outer {
margin: 80px 8px 16px;
outline: 1px solid #228b22;
padding: 0;
position: relative;
}

.service-outer .inner {
color: #000;
font-size: 2.2rem;
letter-spacing: .8rem;
margin: 0;
padding: 8px 8px 8px 16px;
text-align: left;
}

.service-outer::after {
border-color: transparent transparent #98fb98 transparent;
border-style: solid;
border-width: 40px 280px 28px 72px;
content: '';
display: block;
left: 0;
position: absolute;
top: -68px;
z-index: 1;
}

.service-provision p {
font-size: 1.8rem;
margin-top: 0;
}

.service-provision .businesstime h3,
.service-provision h3 {
font-size: 2.0rem;
margin-top: 24px;
}

.blockquote-outer {
margin: 40px 0 40px;
}

blockquote {
position: relative;
}

blockquote::before {
color: #0000e6;
content: "“";
font-size: 3.5rem;
left: -0.15em;
position: absolute;
top: -0.5em;
}

blockquote::after {
bottom: -0.85em;
color: #0000e6;
content: "”";
font-size: 3.5rem;
position: absolute;
right: 0.15em;
}

blockquote ul {
padding-left: 16px;
}

blockquote ul li {
font-size: 1.8rem;
list-style: url(../images/daycare/lsm2.gif);
margin-bottom: 20px;
padding-left: .5rem;
}

.blockquote-outer p {
margin-top: 24px;
}

.blockquote-outer cite {
background: #e3ffff;
display: inline-block;
font-style: normal;
height: 40px;
line-height: 40px;
margin-bottom: 8px;
padding: 0;
}

.service-provision .businesstime,
.service-provision .businessday {
line-height: 1.6;
}

.service-provision .notes {
color: #ff8c00;
margin: 8px 0 8px;
}

.main-area .news {
margin: 16px 0 40px;
padding: 0 8px;
}

.main-area .news h2 {
font-size: 2.0rem;
}

.main-arean .news p {
font-size: 1.8rem;
}

.main-area .news .next {
background: #f8f8ff;
border-radius: 8px;
box-shadow: 2px 2px 4px #696969;
color: #1c1c1c;
display: block;
font-size: 2.0rem;
line-height: 48px;
margin: 24px auto;
padding: 0;
text-align: center;
width: 90%;
}

.main-area .news .next span {
padding-right: 1.0rem;
}

.br_mob50 {
display: none;
}

@media screen and (min-width:768px) {
.lead-top .spotLight {
letter-spacing: 1.0rem;
padding-left: 120px;
width: 60%;
}

.lead-top .inner-1::first-letter {
font-size: 3.2rem;
}

.lead-top .itemize {
padding-left: 80px;
}

.lead-top .itemize li {
font-size: 1.8rem;
margin-bottom: 8px;
padding-left: .5rem;
}

.inner-section {
margin: 0 auto;
padding: 70px 30px;
width: 100%;
}

#concept .concept-img {
width: 30%;
}

#concept .concept-area ul li {
font-size: 2.3rem;
list-style: none;
position: absolute;
margin-bottom: 0;
}

#concept .concept-area ul li:nth-child(1) {
left: 7%;
top: 12%;
transform: rotate(16deg);
}

#concept .concept-area ul li:nth-child(2) {
left: 4%;
top: 37%;
transform: rotate(10deg);
}

#concept .concept-area ul li:nth-child(3) {
left: 8%;
top: 65%;
transform: rotate(-16deg);
}

#concept .concept-area ul li:nth-child(4) {
right: 10%;
top: 12%;
transform: rotate(-15deg);
}

#concept .concept-area ul li:nth-child(5) {
right: 7%;
top: 37%;
transform: rotate(-10deg);
}

#concept .concept-area ul li:nth-child(6) {
right: 9%;
top: 67%;
transform: rotate(15deg);
}

#concept .pickup {
margin: 0 auto 80px;
padding: 16px;
position: relative;
width: 98%;
}

#concept .pickup::before {
width: 100%;
}

#concept .pickup p {
font-size: 1.8rem;
}

.product li {
margin-bottom: 80px;
}

.product .explains {
font-size: 1.8rem;
}

.model-course50 {
margin: -24px 0 -8px 16px;
}

.model-course50 .inner span {
left: -24px;
position: absolute;
}

.info .dayservice-qr {
left: 56%;
position: absolute;
top: 320px;
}

.main-area .news .next {
letter-spacing: .5rem;
margin: 24px 0;
width: 58%;
}

.br_mob51 {
display: none;
}
}

@media screen and (min-width:1024px) {
.hero-daycare  {
margin: 168px auto 0;
width: 80%;
}

.lead-top .title {
line-height: 2.0em;
margin-top: -20%;
}

.lead-top .letter span,
.lead-top .letter::first-letter {
background: #fff;
border-radius: 50%;
font-size: 4.2rem;
margin-right: .8rem;
padding: .5rem;
text-shadow: 2px 2px 0 rgba(0,0,0, .4);
}

.lead-top .letter span {
margin: 0 .8rem;
}

.lead-top .spotLight {
letter-spacing: 1.0rem;
margin: 80px auto 40px;
padding-left: 160px;
width: 60%;
}

.lead-top .inner-1 {
left: 16px;
position: absolute;
top: -28px;
}

.lead-top .inner-1::first-letter {
font-size: 3.8rem;
}

.lead-top .itemize {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 16px;
padding-left: 160px;
}

.lead-top .itemize li {
font-size: 1.8rem;
margin-bottom: 8px;
padding-left: .5rem;
}

#concept .pickup h2,
#concept h2 {
font-size: 2.5rem;
letter-spacing: .8rem;
}

.inner-section {
margin: 0 auto;
padding: 70px;
width: 100%;
}

#concept .concept-area ul li {
font-size: 2.3rem;
}

#concept .concept-area ul li:nth-child(1) {
left: 14%;
top: 12%;
transform: rotate(15deg);
}

#concept .concept-area ul li:nth-child(2) {
left: 10%;
top: 37%;
transform: rotate(10deg);
}

#concept .concept-area ul li:nth-child(3) {
left: 12%;
top: 65%;
transform: rotate(-15deg);
}

#concept .concept-area ul li:nth-child(4) {
right: 17%;
top: 12%;
transform: rotate(-15deg);
}

#concept .concept-area ul li:nth-child(5) {
right: 12%;
top: 37%;
transform: rotate(-10deg);
}

#concept .concept-area ul li:nth-child(6) {
right: 12%;
top: 65%;
transform: rotate(15deg);
}

#concept .pickup {
padding: 16px;
position: relative;
width: 98%;
}

#concept .pickup p {
font-size: 1.8rem;
}

.product {
margin: 0 auto 0 -44px;
width: calc(100% + 88px);
}

.product ul {
display: grid;
gap: 24px;
grid-template-columns: repeat(3, 1fr);
margin-top: 16px;
}

.product li {
margin-bottom: 40px;
}

.product h3 {
text-align: center;
}

.product .explains {
font-size: 1.8rem;
}

#concept .model-cours30,
#concept .model-course {
margin: 24px 0 0;
width: 42%;
}

.model-course50 {
margin: 8px 0 -8px 16px;
}

.model-course50 .inner {
transition: .8s;
}

.model-course50 .inner span {
left: -88px;
position: absolute;
}

.model-course50 .inner:hover {
border-radius: 8px;
border: 0;
box-shadow: 0 0 0 rgba(000,000,000,0);
height: 140px;
padding: 3.12rem 0;
width: 400px;
}

.main-area .announce p {
padding: 16px;
}

.info .contact .e-mail {
left: 1.5%;
position: absolute;
top: 320px;
}

.info .dayservice-qr {
left: 25%;
position: absolute;
top: 416px;
}

.service-item {
margin-top: 120px;
padding-bottom: 16px;
}

.service-item ul {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, 1fr);
}

.service-item ul li [class^="innerbox"] {
display: grid;
grid-template-columns: repeat(1, 1fr);
margin: 0;
}

.service-item ul li .innerbox2 {
margin: 0 24px 0 -24px;
}

.service-item ul li .innerbox1 .subject {
margin-top: 52px;
}

.steps span.ins {
font-size: 2.0rem;
}

.service-provision {
margin: 16px 0 16px 120px;
}

.service-outer {
background: linear-gradient(90deg,#228b22,#fff);
box-shadow: 0 1px 0 rgba(0,0,0,0);
margin: 80px 0 40px -160px;
outline: 0;
padding: 8px 0;
position: relative;
width: calc(100% + 1.3%);
}

.service-outer .inner {
background: linear-gradient(150deg,#fff,#fff,#98fb98,#fff,#fff);
color: #000;
font-size: 2.6rem;
letter-spacing: 1.8rem;
margin: 0;
padding: 16px 80px;
width: 100%;
}

.service-outer::before,
.brand-outer::before {
border: none;
border-bottom: solid 32px transparent;
border-right: solid 24px #006400;
content: '';
left: 0;
position: absolute;
top: 100%;
}

.main-area .news {
margin: 16px 0 64px 120px;
padding: 0 8px;
}

.main-area .news .next {
width: 42%;
}

.br_mob70,
.br_mob51,
.br_mob50 {
display: block;
}

.pageheader-outer {
-webkit-animation: bgs-color 24s infinite;
animation: bgs-color 24s infinite;
-webkit-clip-path: polygon(100% 80%,100% 0%,0 0,0 100%);
clip-path: polygon(100% 80%,100% 0,0 0,0 100%);
background: linear-gradient(90deg,transparent,#ffe2c6,transparent);
font-size: 0;
height: 600px;
left: 0;
position: absolute;
top: 20px;
width: 100%;
}

@-webkit-keyframes bgs-color {
0% {background: linear-gradient(90deg,transparent,#ffe2c6,transparent);}
12.5% {background: linear-gradient(90deg,transparent,#ffffc6,transparent);}
25% {background: linear-gradient(90deg,transparent,#c6ffc6,transparent);}
37.5% {background: linear-gradient(90deg,transparent,#c6ffff,transparent);}
50% {background: linear-gradient(90deg,transparent,#c6e2ff,transparent);}
62.5% {background: linear-gradient(90deg,transparent,#c6c6ff,transparent);}
75% {background: linear-gradient(90deg,transparent,#e2c6ff,transparent);}
87.5% {background: linear-gradient(90deg,transparent,#ffc6e2,transparent);}
100% {background: linear-gradient(90deg,transparent,#ffe2c6,transparent);}
}
@keyframes bgs-color {
0% {background: linear-gradient(90deg,transparent,#ffe2c6,transparent);}
12.5% {background: linear-gradient(90deg,transparent,#ffffc6,transparent);}
25% {background: linear-gradient(90deg,transparent,#c6ffc6,transparent);}
37.5% {background: linear-gradient(90deg,transparent,#c6ffff,transparent);}
50% {background: linear-gradient(90deg,transparent,#c6e2ff,transparent);}
62.5% {background: linear-gradient(90deg,transparent,#c6c6ff,transparent);}
75% {background: linear-gradient(90deg,transparent,#e2c6ff,transparent);}
87.5% {background: linear-gradient(90deg,transparent,#ffc6e2,transparent);}
100% {background: linear-gradient(90deg,transparent,#ffe2c6,transparent);}
}
}