@charset "utf-8";
/* -----
css Information
File name；concept.css
Description；index.html, about/, e-store/, services/
First time；2026-01
Editors；bukuyan
Last Editor；
Update；
----- */

#service {
background: transparent;
padding: 0 8px;
}

.service-title {
margin-top: 64px;
padding: 0;
width: 90%;
}

.service-title span {
background: #e0ffff;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0, .3), 0 0 40px rgba(72,209,204, .5) inset;
display: block;
font-size: 2.0rem;
letter-spacing: 1.4rem;
line-height: 48px;
position: relative;
text-align: center;
}

.service-title span::after,
.service-title span::before {
content: '';
left: 0.4em;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.service-title span::before {
background: #fff;
border-radius: 50%;
height: 48px;
width: 48px;
}

.service-title span::after {
border: 4px solid;
border-color: transparent transparent #ff5722 #ff5722;
height: .6em;
transform: translate(16px,-8px) rotate(-45deg);
width: 1.2em;
}

.service-area {
margin-bottom: 64px;
padding: 0;
max-width: 1000px;
}

.service-area .more {
background: #fff;
display: block;
flex-direction: column;
margin: 20px 0;
outline: 1px solid #696969;
}

.service-area .more .item {
padding: 20px;
width: 100%;
}

.service-area .more h3,
.service-area .more .title {
font-size: 2.0rem;
}

.service-area .more .inner {
clip-path: none;
width: 100%;
}

.service-area .more.daysvc img {
margin: 0 0 0 auto;
}

.information {
margin-top: -16px;
padding: 0 16px 0 24px;
}

.information .inner h2,
.information .title {
font-size: 2.0rem;
margin-bottom: 16px;
}

.information ul li {
font-size: 1.8rem;
margin-top: 16px;
padding-left: .5rem;
}

.information .inner {
margin-top: 40px;
}

.btn-pii {
background: rgba(255,255,255, .5);
border: 1px solid #ebebeb;
box-shadow: 0 2px 2px rgba(254,189,23, .5), 0 0 8px rgba(0,0,0, .1) inset;
color: #333;
display: inline-block;
font-size: 1.8rem;
margin: 40px 0;
padding: 4px;
position: relative;
text-align: center;
transition: all .3s ease-in-out;
width: 75%;
}

.btn-pii::after,
.btn-pii::before {
border: solid #333;
content: '';
height: 12px;
position: absolute;
transition: all .3s ease-in-out;
width: 12px;
}

.btn-pii::before {
border-width: 1px 0 0 1px;
left: -8px;
top: -8px;
}

.btn-pii::after {
border-width: 0 1px 1px 0;
bottom: -8px;
right: -8px;
}

.btn-pii-out::after,
.btn-pii-out::before {
border: solid #333;
content: '';
height: 12px;
position: absolute;
transition: all .3s ease-in-out;
width: 12px;
}

.btn-pii-out::before {
border-width: 1px 0 0 1px;
left: -8px;
top: -8px;
}

.btn-pii-out:after {
border-width: 0 1px 1px 0;
bottom: -8px;
right: -8px;
}

.about-us {
margin: 40px auto;
padding: 0 16px 0 24px;
}

.about-us h2 {
font-size: 2.0rem;
margin-bottom: 16px;
}

.about-us h3,
.about-us p {
font-size: 1.8rem;
margin-bottom: 4px;
}

.about-us ul {
margin: 24px 0 8px;
}

.about-us ul li {
font-size: 1.8rem;
padding-left: .5rem;
}

.privacy-policy {
margin: 80px 0;
padding: 0 16px 0 24px;
}

.privacy-policy h2 {
font-size: 2.0rem;
}

.privacy-policy ul li {
font-size: 1.8rem;
list-style: url(../images/daycare/lsm2.gif);
margin-top: 24px;
padding-left: .5rem;
}

.privacy-policy .inner li {
list-style: none;
list-style-type: decimal;
margin: 8px 0 0 16px;
}

.map-boxouter {
padding: 0 8px;
position: relative;
width: 100%;
}

.outer-box .map-box {
height: 240px;
margin-top: 16px;
padding: 0;
width: 100%;
}

@media screen and (min-width:768px) {
.wrapper {
margin: 0;
} 

.service-title {
width: 60%;
}

.information {
margin-top: -16px;
}

.btn-pii {
width: 38%;
}

.about-us {
padding: 0 16px 0 32px;
}

.about-us  ul h2 {
margin: 8px 0 4px;
}

.privacy-policy {
padding: 0 16px 0 32px;
}

.privacy-policy h2 {
padding-left: .8rem;
}

.outer-box .map-box {
height: 320px;
}
}

@media screen and (min-width:1024px) {
.wrapper {
margin: auto;
max-width: 1600px;
}

#service {
background: transparent;
margin-bottom: 80px;
padding-bottom: 32px;
}

.service-title {
margin-bottom: 64px;
width: 30%;
}

.service-title span {
box-shadow: 0 2px 8px rgba(0,0,0, .3), 0 0 48px rgba(72,209,204, .5) inset;
font-size: 2.6rem;
letter-spacing: 2.4rem;
line-height: 64px;
padding-left: 21%;
text-align: center;
}

.service-title span::before {
box-shadow: 0 4px 4px 0 rgba(0,0,0, .5);
}

.service-title span::after {
transform: translate(16px,-12px) rotate(-45deg);
}

.service-area {
margin: auto;
padding: 24px;
max-width: 80%;
}

.service-area .more {
align-items: center;
box-shadow: 4px 4px 24px #ccc;
display: flex;
flex-direction: row;
margin-bottom: 64px;
width: 82%;
}

.service-area .more.daysvc {
align-items: center;
flex-direction: row-reverse;
margin-left: 17%; 
}

.service-area .more .item {
padding: 1% 2%;
width: 50%;
z-index: 30; 
}

.service-area .more.daysvc h3,
.service-area .more.daysvc .title,
.service-area .more h3,
.service-area .more .title {
background: transparent;
font-size: 2.3rem;
margin: 0 0 0 -46%;
padding: 0 8px;
position: relative;
top: -48px;
width: 158%;
}

.service-area .more.daysvc h3,
.service-area .more.daysvc .title {
background: transparent;
margin-left: 0;
top: 48px;
}

.service-area .more h3 {
text-align: center;
}

.service-area .more.daysvc h3 {
text-align: center;
}

.service-area .more .inner {
clip-path: polygon(20% 0,100% 0,100% 100%,0 100%);
overflow: hidden;
width: 60%;
}

.service-area .more.daysvc .inner {
clip-path: polygon(0 0,100% 0,60% 100%,0 100%);
}

.service-area .more .inner img {
margin: 0;
transition: transform .8s ease;
}

.service-area .more:hover .inner img {
transform: scale(1.1);
}

.information ul li {
font-size: 1.8rem;
}

.btn-pii {
width: 28%;
}

.btn-pii:hover {
box-shadow: none;
}

.privacy-policy ul li {
font-size: 1.8rem;
}

.outer-box .map-box {
height: 600px;
margin: 0;
padding: 4px;
}
}