@charset "UTF-8";

/*Media-queries_____________________________________*/
.pc { display:block !important; }
.sp { display:none !important; }

@media only screen and (max-width:640px) {
.pc { display:none !important; }
.sp { display:block !important; }
}

/*smaller than 640-----------------------------*/
@media screen and (max-width:640px) {

html,body {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;/*横スクロール防止*/
}
#lp .wrapper {
    margin: 0 auto;
    max-width:85%;
    padding-top: 5rem;
    padding-bottom: 5rem;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#lp .wrapper2 {
    margin: 0 auto;
    max-width:85%;
    padding-top: 5rem;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#lp .wrapper3 {
    margin: 0 auto;
    max-width:85%;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#lp .wrapper4 {
    margin: 0 auto;
    max-width:100%;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#lp .wrapper h2{
    padding-bottom: 3rem;
}

/*=======================
.key
=======================*/ 
#lp .key {
    width:100%;
    height:auto;
    position:relative;
    background: url("../img/top_bg_sp.jpg") no-repeat;
    padding-top: 170,4%; /* (画像の高さ / 画像の横幅) × 100*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin: 0 auto;
    text-align:center;
    padding-bottom: 3rem;
}   
.key h2 img{
    width: 55%;
    margin: 0 auto;
    padding-top: 5rem;
}
.key h4 img{
    padding-top: 26rem;
}

/*=======================
.content1
=======================*/
.content1{
    text-align: left;
}
#ct1_box p img{
    width: 100%;
    padding-top: 2rem;
}
#ct1_box h4{
    padding-top: 2rem;
    padding-bottom: 0.5rem;
}
.ct1_txt{
    width: 80%;
    margin: 0 auto;
}

/*=======================
.content2
=======================*/ 
.content2 h2 img{
    width: 100%;
}
.content2 p img{
    width: 100%;
}

/*#ct2_ttl1*/ 
#ct2_ttl1{
    position: relative;
}
#ct2_ttl1 p img{
    position: absolute;
}
#ct2_img2_sp1 img{
    width: 28%;
    top: 11rem;
}
#ct2_img2_sp2 img{
    width: 25%;
    left: 70%;
}
#ct2_ttl1_txt h2 img{
    margin: 0 auto;
}
#ct2_ttl1_txt h3{
    margin: 0 auto; 
    padding-top: 1rem;
}
#ct2_ttl1_txt p{
    text-align: center;
}
#ct2_ttl1_txt h2 img{
    margin: 0 auto;
    padding-bottom: 2rem;
}

/*ct2_box_inner*/
.ct2_box_inner{
    text-align: center;
    padding-bottom: 2rem;
}
.ct2_box_inner img{
    text-align: center;
    padding-bottom: 1rem;
}
.ct2_box_inner p{
    text-align: center;
}
    
/*.example-slick*/
.example-slick{
    width: 100%;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 2rem;    
}
#ct2_ttl2_txt h2 img{
    margin: 0 auto;
}
#ct2_ttl2_txt h3{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 1rem;
}
.ct2_txt_sp{
    width: 85%;
    margin: 0 auto;
    text-align: left;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/*ct2_ttl2_sp*/
#ct2_ttl2_sp{
    position: relative;
    height: 25rem;
}
#ct2_ttl2_sp p img{
    position: absolute;
}  
#ct2_img6_sp img{
    width: 42%;
    top: 10rem;
    left: 5%;
} 
#ct2_img4_sp img{
    width: 13%;
    top: 5rem;
    left: 40%;
} 
#ct2_img8_sp img{
    width: 20%;
    top: 7rem;
    left: 60%;
} 
#ct2_img10_sp img{
    width: 18%;
    top: 15rem;
    left: 75%;
} 

/*ct2_image*/
#ct2_image{
    width:100%;
    height:auto;
    position:relative;
    background: url("../img/ct2_bg_sp.png") no-repeat;
    padding-top: 85%; /* (画像の高さ / 画像の横幅) × 100*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin: 0 auto;
}  
#ct2_image p img{
    position: absolute;
}  
#ct2_img7_sp img{
    width: 22%;
    top: 2rem;
    left: 15%;
}   

/*t2_ttl3_sp*/
#ct2_ttl3_sp{
    position: relative;
    height: 10rem;
    margin-top: 3rem;
}
#ct2_ttl3_sp p img{
    position: absolute;
}  
#ct2_img5_sp img{
    width: 26%;
    left: 15%;
} 
#ct2_img9_sp img{
    width: 26%;
    left: 60%;
}   

/*画像のループ*/
#roop {
    width: 100%;
    height: 88px;
    background: url("../img/ct2_roop_sp.png")repeat-x;
    background-position: 0 0;
    -webkit-animation: bgroop 20s linear infinite;
    animation: bgroop 20s linear infinite;
    padding-bottom: 2rem;
}

@-webkit-keyframes bgroop {
from {
    background-position: 0  0;
}
to {
    background-position: -1510px 0;
}
}
@keyframes bgroop {
from {
    background-position: 0 0;
}
to {
    background-position: -1510px 0;
}
}

/*=======================
.content3
=======================*/  
.content3{
    background: #EADFCD;
    padding-top: 5rem;
}
.content3_inner{
    margin: 0 auto;
    text-align: center;
}

/*#ct3_inner1*/
#ct3_inner1_sp{
    position: relative;
}
#ct3_inner1_sp h2{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
#ct3_inner1_sp p img{
    position: absolute;
    z-index: 100;
} 
.ct3_image{
    width: 100%;
}
#ct3_image1 img{
    width: 40%;
    padding-left: 55%;
}
#ct3_image2 img{
    width: 26%;
    padding-top: 69rem;
    padding-left: 8%;
}
.googlemap-map{
    margin-top: 15rem;
}
    
/*ct3_inner2*/
#ct3_inner2{
    position: relative;
}
#ct3_image3{
    width: 40%;
    padding-left: 60%;
}
#ct3_image4{
    width: 22%;
}

/*=======================
.content4
=======================*/ 
.content4{
    background: #1F6252;
    color: #fff;
}
#content4_inner h2{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.ct4_box{
    margin-top: 4rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.ct4_box p{
    width: 100%;
    margin-bottom: 2rem;
}
.ct4_box ul{
    list-style: disc;
}
.ct4_box li{
    line-height: 1.2;
    float: left;
    padding: 0.5rem;
    text-align: center;
    font-size: 95%;
}
.ct4_box em{
    font-size: 120%;
    font-style: normal;
}
.ct4_box strong{
    font-size:250%;
    font-style: normal;
    font-weight: bold;
}
.ct4_txt1{
    margin-top: 1.2rem;
    text-align: left;
}
.ct4_txt2{
    margin-top: 1.2rem;
    text-align: left;
}

/*=======================
.content4_bottom
=======================*/
.content4_bottom{
    background: linear-gradient(180deg, #1f6252 0%, #1f6252 50%, #fff 50%, #fff 100%);
}
#content4_bottom_inner{
    margin: 0 auto;
}
#content4_bottom_inner p{
    width: 22%;
    padding-left: 75%;
}

/*=======================
.content5
=======================*/
#content5_inner h2{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.content5 table {
    text-align: left;
    width: 100%;
    line-height: 1.5;
    margin-bottom: 5rem;
}
.content5 table th{
    width: 35%;
    color: #1F6252;
    border-bottom: 1px dashed #1F6252;
}
.content5 th,
.content5 td {
    border-bottom: 1px dashed #1F6252;
    padding: 2.5rem;
}

/*=======================
.content6
=======================*/
#content6_inner h2{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
#content6_inner p{
    text-align: center;
}
#content6_inner p img{
    width: 100%;
    text-align: center;
}
.btn_contact {
    width: 100%;
    height: 90px;
    cursor: pointer;
    margin-inline: auto;
    position: relative;
    margin-bottom: 4rem;
}
.btn_contact img {
    height: auto;
    left: 0;
    position: absolute;
    width: 100%;
}
.btn_contact img:last-of-type {
    opacity: 0;
    transition: opacity .7s;
}
.btn_contact:hover img {
    opacity: 1;
}

}