@charset "utf-8";

/* safety */

#safety{
/* padding: 10% 0 10% 15%; */
padding: 0 0 5% 0;
}

#safety .safety-area{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding:7% 0 0 10%;
position: relative;
}
#safety .safety-area::after{
opacity: 0;
}
#safety .safety-area.startwd::after{
content:'';
position: absolute;
top:10%;
right:0;
width:80%;
height: 60vh;
background:rgba(0, 171, 148,.2);
z-index: -1;
animation-name:sevicebgRLextendAnime;
animation-duration:.9s;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
}
@keyframes sevicebgRLextendAnime{
0% {
opacity: 0;
width:0;
}
100% {
opacity: 1;
width:80%;
}
}
#safety .safety-area section{
width:30%;
}
#safety .safety-area section h2{
line-height:1.35;
}
#safety .safety-area .midashi{
font-size:2.5rem;
line-height:1.35;
font-weight:bold;
word-break:break-all;
text-align:justify;
margin-bottom:20px;
}
#safety .safety-area section h3{
font-size:clamp(1.2rem, 1.14rem + 0.3vw, 1.5rem);
line-height:1.5;
margin-bottom:30px;
}
#safety .safety-area section .tips {
width:100%;
margin:20px 0;
}
#safety .safety-area section li{
width:100%;
padding:15px 30px;
margin: 15px 0;
border-radius:50px;
}
#safety .safety-area section li p{
font-size:1.2rem;
line-height:1.5;
text-align:center;
font-weight:bold;
}
/* #safety .safety-area section li::before{
font-size:0.85rem;
line-height:2;
margin-right:10px;
opacity:0.7;
content:"ポイント▶︎";
} */
#safety .safety-area section li:nth-child(1){
background:#ffb663;
}
#safety .safety-area section li:nth-child(2){
background:#ff9cfa;
}
#safety .safety-area section li:nth-child(3){
background:#9cd7ff;
}


#safety .safety-img-wrapper{
position:relative;
overflow: hidden;
/* width: calc(70% - 30px); */
width: calc(60vw - 30px);
height: 60vh;
}
#safety .safety-img{
height: 60vh;
background:url("../../safety/img/4401744_m.jpg") no-repeat center;
background-size: cover;
background-position: 0 -30px;
}

/* page-gallery */

#page-gallery{
margin: 0 0 5% 0;
}
#page-gallery li{
width:100%;
overflow: hidden;
}
#page-gallery li .orange{
background:#ffb663;
padding:10px 20px;
}
#page-gallery li .pink{
background:#ff9cfa;
padding:10px 20px;
}
#page-gallery li .blue{
background:#9cd7ff;
padding:10px 20px;
}
#page-gallery li p{
font-size:1rem;
line-height:1.5;
font-weight:bold;
text-align:center;
}
@media screen and (max-width:440px) {
#page-gallery{
padding:0 8vw;
}
}
@media screen and (max-width:1280px) {
#safety .safety-area{
justify-content: space-evenly;
padding:8% 0 0 5%;
}
}

@media screen and (max-width:1024px) {
#safety .safety-area{
padding:10% 0 0 3%;
}
#safety .safety-area section h3 br{
display:none;
}
#safety .safety-img-wrapper{
width: calc(60vw - 30px);
height: 35vh;
}
#safety .safety-img{
height: 35vh;
background-position: 0 50%;
}
}

@media screen and (max-width:960px) {
#safety .safety-area{
justify-content: space-evenly;
padding:10% 5% 0;
}
#safety .safety-area.startwd::after{
top:10%;
right:0;
width:80%;
height:50vh;
}
#safety .safety-area section{
width:100%;
margin: 5% auto 25px;
padding: 0 12%;
text-align:center;
}
#safety .safety-area .midashi{
text-align:center;
}
#safety .safety-area .midashi br{
display:none;
}
#safety .safety-area section .tips .w1024-block{
display:none;
}
#safety .safety-img-wrapper,
#safety .safety-img{
width:100%;
height: 40vh;
}
#safety .safety-img-wrapper{
margin:0 0 50px 0;
}
#page-gallery li p{
font-size:0.85rem;
line-height:1.5;
}
}

@media screen and (max-width:820px) {
/* #safety .safety-area.startwd::after{
height: 73vh;
} */
#page-gallery li .orange,
#page-gallery li .pink,
#page-gallery li .blue {
padding:10px;
}
}
@media screen and (max-width:768px) {
/* #safety .safety-area.startwd::after{
height: 78vh;
} */
}

/* 端末横向き処理 */
@media (orientation: landscape) and (max-width: 1024px){
#safety .safety-img-wrapper,
#safety .safety-img{
height: 50vh;
background-position: 0 50%;
}
}
@media (orientation: landscape) and (max-width: 960px){
#safety .safety-img-wrapper,
#safety .safety-img{
height: 400px;
background-position: 0 25%;
}
}

@media screen and (max-width:640px) {
#safety{
padding: 0;
}
#safety .safety-area section{
margin: 20% auto 25px;
padding: 0 5%;
}
#safety .safety-area section h3{
/* font-size:1.5rem; */
line-height:1.5;
}
#safety .safety-area section h3 br{
display:block;
}
#safety .safety-area .midashi br{
display:block;
}
#safety .safety-area section .tips .w1024-block{
display:block;
}
#safety .safety-img-wrapper,
#safety .safety-img{
height: 300px;
background-position: bottom 0px right -50px;
}
}

@media screen and (max-width:400px) {
#safety .safety-area section h3 br{
display:none;
}
#safety .safety-img-wrapper,
#safety .safety-img{
height: 270px;
}
}