@charset "utf-8";
/* CSS Document */

#homemain{
width: 100%;
/*margin-top: 134px;*/
position: relative;
}
.main_wrap{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.fantastic_story_wrap{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.fantastic_story_wrap img{max-width: 100%;}
.fantastic_story_wrap p{
font-size: 3em;
font-weight: bold;
color: #fff;
}
.main_wrap img{width: 100%;}

.main01img{background:url("/common/img/top/main01img.jpg") center center no-repeat;}
.main02img{background:url("/common/img/top/main02img.jpg") center center no-repeat;}
.main03img{background:url("/common/img/top/main03img.jpg") center center no-repeat;}
.main04img{background:url("/common/img/top/main04img.jpg") center center no-repeat;}
.main05img{background:url("/common/img/top/main05img.jpg") center center no-repeat;}
.main06img{background:url("/common/img/top/main06img.jpg") center center no-repeat;}
.main07img{background:url("/common/img/top/main07img.jpg") center center no-repeat;}
.main08img{background:url("/common/img/top/main08img.jpg") center center no-repeat;}

.main01img,.main02img,.main03img,.main04img,.main05img,.main06img,.main07img,.main08img{
width: 25%;              /* 横幅を画面の25%に設定 */
aspect-ratio: 1 / 1;      /* 正方形を維持 */
background-color: #ccc;   /* 画像の代わりのグレー背景 */
box-sizing: border-box;
background-size: cover;
background-position: center;
opacity: 0;
animation: fadeIn 3.0s ease forwards;
position: relative;
}


/* アニメーション定義 */
@keyframes fadeIn {
to {opacity: 1;}
}

/* ランダムな遅延を画像ごとに設定 */
.main01img{ animation-delay: 1.2s; }
.main02img{ animation-delay: 2.2s; }
.main03img{ animation-delay: 1.8s; }
.main04img{ animation-delay: 1.5s; }
.main05img{ animation-delay: 1.6s; }
.main06img{ animation-delay: 2.0s; }
.main07img{ animation-delay: 1.3s; }
.main08img{ animation-delay: 2.5s; }

.bk01,.bk02,.bk03,.bk04,.bk05,.bk06,.bk07,.bk08{
position: absolute;
width: 25%; 
aspect-ratio: 1 / 1; 
/*display: none;*/
}
.bk01{background-color: rgba(0,0,0,0.0);}
.bk02{background-color: rgba(0,0,0,0.0);}
.bk03{background-color: rgba(0,0,0,0.1);}
.bk04{background-color: rgba(0,0,0,0.1);}
.bk05{background-color: rgba(0,0,0,0.0);}
.bk06{background-color: rgba(0,0,0,0.0);}
.bk07{background-color: rgba(0,0,0,0.0);}
.bk08{background-color: rgba(0,0,0,0.0);}



.toppage #content section#service{
margin-top: 5em;
}
.service_info_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1150px;
margin: 0em auto;
align-items: center;
}

.service_info_text{width: 39%;font-size: 1.2em;}
.toppage #content section#service div .service_info_text p{
margin-bottom: 0;
}
.service_info_text .p1,.service_info_text .p2{
font-weight: bold;
font-size: 1.2em !important;
margin-bottom: 0.5em !important;
}
.service_info_text .p2{padding-left: 1em;}
.service_info_img{width: 57%;}
.service_info_img img{max-width: 100%;}
.service_wrap{
display: flex;
flex-wrap: wrap;
width: 1200px;
margin: 3em auto 2em;
}
.service_wrap a{
background: #0085a5;
width: calc(100% / 4 - 1em );
aspect-ratio: 1 / 1;
margin: 0 0.5em 1em;
padding: 4em 3em;
text-align: center;
border-radius: 10px;
border: solid 3px #0085a5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.service_wrap a::before {
font-family: "Font Awesome 5 Free";
font-weight: normal;
content: "\f35a";
position: absolute;
left: 50%;
font-size: 3em;
bottom: 15px;
transform: translate(-50%, -50%);
color: #0ab7b7;
}
.toppage #content section#service div.service_wrap a h3{
font-weight: bold;
font-size: 2em;
margin: -0.5em 0 0;
line-height: 1;
}
.toppage #content section#service div.service_wrap a h3 span{
font-family: 'Poppins', sans-serif;
display: block;
font-size: 16px;
font-weight: normal;
margin-top: 0.7em;
padding: 0;
line-height: 1.2;
}
.toppage #content section#service div.service_wrap a h3.h3_color,
.toppage #content section#service div.service_wrap a h3.h3_color span{color: #fff;}
.service_wrap a:hover{background: #fff;}
.toppage #content section#service div.service_wrap a:hover h3.h3_color,
.toppage #content section#service div.service_wrap a:hover h3.h3_color span{color: #0085a5;}

.pt_btn{
width: 700px;
margin:0 auto 8em;
}
.pt_btn a{
display: block;
font-size: 1.8em;
font-weight: bold;
text-align: center;
padding:0.8em;
border-radius:100px;
position: relative;
color: #ff420e;
background:#fff;
border:solid 3px #ff420e;
}
.pt_btn a span{
display: block;
line-height: 2.2;
color: #ff420e;
font-size: 0.8em;
}
.pt_btn a:before{
font-family: "Font Awesome 5 Free";
content: "\f35a";
font-weight: 900;
position: absolute;
font-size: 1.3em;
transform: translate(-50%, -50%);
top: 50%;
right: 0.3em;
}
.pt_btn a:hover{
background: #ff420e;
color: #fff;
}
.pt_btn a:hover span{color: #fff;}

@media screen and (max-width: 767px){
#homemain{margin-top: 81px;}
.main_wrap{}
.fantastic_story_wrap{width: 90%;margin:0 auto;}
.fantastic_story_wrap p{font-size: 1.8em;text-align: center;}
.main_wrap img{}

.main05img,.main06img{display: none;}
.main01img{order:1;}
.main02img{order:2;}
.main03img{order:3;}
.main04img{order:5;}
.main07img{order:6;}
.main08img{order:4;}

.main01img,.main02img,.main03img,.main04img,.main05img,.main06img,.main07img,.main08img{width: 50%;}
.bk01,.bk02,.bk03,.bk04,.bk05,.bk06,.bk07,.bk08{width: 50%;}

.toppage #content section#service{}
.service_info_wrap{width: 94%;}
.service_info_text{width: 100%;font-size: 1.1em;}
.toppage #content section#service div .service_info_text p{}
.service_info_text .p1,.service_info_text .p2{}
.service_info_text .p2{}
.service_info_img{width: 100%;margin:1em auto;}
.service_info_img img{}
.service_wrap{width: 94%;margin:1em auto 1em;}
.service_wrap a{
width: 48%;
margin:0 0 1em;
height: auto;
padding:2em 1em;
border: solid 2px #0085a5;
}
.service_wrap a::before {font-size: 2.3em;bottom: 5px;}
.toppage #content section#service div.service_wrap a h3{font-size: 17px;}
.toppage #content section#service div.service_wrap a h3 span{font-size: 13px;}
.service_wrap a:hover{}

.pt_btn{width: 98%;margin:0 auto 4em;}
.pt_btn a{
width: 96%;
margin:0 auto;
font-size: 17px;
border:solid 3px #ff420e;
padding:0.6em;
}
.pt_btn a:before{font-size: 1.8em;right: 0em;}

}