@charset "utf-8";
.is-pc .at-body { padding: 0;}
.at-body .at-container { overflow:visible;}


.main h2 { font-size: 35px; font-weight: 500; line-height: 1; }

.main article { padding: 70px 0 100px;}

@media (max-width:991px){
    
    .main article { padding: 60px 0 80px;}    
}
@media (max-width:768px){
    .main h2 { font-size: 33px }
    .main article { padding: 50px 0 60px;}
}
@media (max-width:576px){
    .main h2 { font-size: 31px }    
    .main article { padding: 40px 0 40px;}
}


.main .con1 {text-align: center; }
.main .con1 h2+p { padding: 15px 0 45px; line-height: 1;} 
.main .con1 .flex a { display: flex; align-items:center; justify-content: center; position: relative; width: 48.84%; height: 370px; background-repeat: no-repeat; background-size: cover; color: #fff;}
.main .con1 .flex a .wrap { position: relative; z-index: 2;}
.main .con1 .flex a .wrap h3 { padding: 30px 0 10px; font-size: 30px; font-weight: 500; }
.main .con1 .flex a .wrap span {  font-size: 14px;  }
.main .con1 .flex a .wrap p {margin: 45px  auto 0; width: 200px; height: 40px; font-size: 14px; line-height: 40px; text-align: center; border-radius: 20px; font-weight: 400;}
.main .con1 .flex a.receiving { background-image:url('/data/main/bg_m_con1_1.jpg');  }
.main .con1 .flex a.contact_me { background-image:url('/data/main/bg_m_con1_2.jpg');  }
.main .con1 .flex a.receiving p { background: #fc8902; }
.main .con1 .flex a.contact_me p { background: #08a0e0; }
.main .con1 .flex a:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); transition: all .2s;}
.main .con1 .flex a:hover:after { background: rgba(0,0,0,.3);}

@media (max-width:991px){
    .main .con1 h2+p { padding: 15px 0 35px; } 
}
@media (max-width:768px){
    .main .con1 h2+p { padding: 15px 0 35px; } 
    .main .con1 .flex a { height: 320px; } 
    .main .con1 .flex a .wrap h3 { padding: 25px 0 5px; font-size: 23px;}
    .main .con1 .flex a .wrap p { margin: 35px auto 0;}
    
}
@media (max-width:600px){
    .main .con1 .at-container {padding: 0;}
    .main .con1 .flex { flex-direction: column; }
    .main .con1 .flex a { padding: 30px 0px; width: 100%; height: auto;;}
    .main .con1 .flex a .wrap h3 { padding: 20px 0 5px;  }
    .main .con1 .flex a .wrap p { margin: 25px auto 0;}
}
@media (max-width:576px){
    .main .con1 h2+p { padding: 10px 0 25px; } 
}


.main .con2 { padding-bottom: 100px; background: url('/data/main/bg_m_con2.jpg') no-repeat center / cover; text-align: center; color: #fff;}
.main .con2  p { line-height: 1;}
.main .con2 .p1 { padding: 10px 0 0; font-size: 18px; font-weight: 500;}
.main .con2 .p2 { padding: 20px 0 ; font-size: 40px; font-weight: 700; }

@media (max-width:768px){
    .main .con2 .p2 { font-size: 38px;}
}

@media (max-width:480px){
    .main .con2 { padding-bottom: 90px;}
    .main .con2 .p2 { font-size: 32px;}
}
@media (max-width:480px){
    .main .con2 { padding-bottom: 60px;}
    .main .con2 .p2 { font-size: 26px;}
}


.main .con3 { padding: 0; margin: -40px 0 0;}
.main .con3 .flex a { flex:1; position: relative; padding: 0 3.846%;  height: 80px; font-size: 22px; font-weight: 500; line-height: 80px; color: #fff;}
.main .con3 .flex a:first-of-type {background: #08a0e0; }
.main .con3 .flex a:last-of-type {background: #333; }
.main .con3 .flex a:after { content:"\e90b";  display: block; position: absolute; right:7.69%; top: 50%; transform: translateY(-50%); font-size: 50px; font-family: xeicon!important; font-style: normal; font-weight: 400;}

@media(max-width:768px){
    .main .con3 { margin: -30px 0 0;}   
    .main .con3 .flex a { height: 60px; font-size: 20px; line-height: 60px;}
    .main .con3 .flex a:after { font-size: 40px;}
}
@media(max-width:576px){
    .main .con3 { margin: -27px 0 0;}   
    .main .con3 .flex a { height: 54px; font-size: 18px; line-height: 54px;}
    .main .con3 .flex a:after { font-size: 34px;}
}
@media(max-width:400px){
    .main .con3 .flex a:after { font-size: 30px; }   
}



.main .con4 { }
.main .con4 .flex > div { width: 48%;}
.main .con4 .flex .tit { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #999;}
.main .con4 .flex .tit h2 {}
.main .con4 .flex .tit h2 span { display: inline-block; padding: 0 0 0 20px; font-size: 18px; font-weight: 300; color: #555;}
.main .con4 .flex .tit a {  color: #555 }

@media(max-width:991px){
    .main .con4 .flex .tit h2 { font-size: 30px;}
}
@media(max-width:768px){
    .main .con4 > .flex { flex-direction: column;}
    .main .con4 .flex > div { width: 100%;}
    .main .con4 .flex > div:first-of-type { padding: 0 0 30px;}
}
@media(max-width:576px){
    .main .con4 .flex .tit { padding: 0 0 15px; align-items: flex-end;}
    .main .con4 .flex .tit h2 { font-size: 25px;}
    .main .con4 .flex .tit h2 span { display: none;}
    .main .con4 .flex .tit a { line-height: 1;}
}