@charset "utf-8";
/* CSS Document */
.all-page-main-photo-01{ background-image: url('../images/first-guide-top-main-01.png'); background-position: center;}
.first-guide-area-01 h2{ color: #ff4f58; font-size: 30px; line-height: 40px; margin-bottom: 60px; text-align: center;}
.first-guide-area-01 dd ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 100px; width: 100%;}
.first-guide-area-01 dd ul li:first-child{ width: 40%;}
.first-guide-area-01 dd ul li:last-child{ margin-left: 20px; width: calc(60% - 20px);}
.first-guide-area-01 dd p{ font-size: 14px; line-height: 24px;}
.first-guide-area-01 dd div{ width: 100%;}
.first-guide-area-02,.first-guide-area-03,.first-guide-area-04,.first-guide-area-05{ margin-bottom: 100px;}
.first-guide-area-02 h3,.first-guide-area-03 h3,.first-guide-area-04 h3,.first-guide-area-05 h3{ color: #ff4f58; font-size: 22px; line-height: 24px; margin-bottom: 20px; text-align: center;}
.first-guide-area-02 dd ul{ border-radius: 16px; border: 4px solid rgba( 243, 149, 0, .2); margin: 0 auto; padding: 20px 30px; width: 66%;}
.first-guide-area-02 dd ul p{ font-size: 18px; line-height: 30px; padding-left: 18px; position: relative;}
.first-guide-area-02 dd ul li{ margin-bottom: 10px;}
.first-guide-area-02 dd ul li:last-child{ margin-bottom: 0;}
.first-guide-area-02 dd ul p::before{ content: "〇"; display: inline-block; margin-left: -18px;}
.first-guide-area-03 ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 100%;}
.first-guide-area-03 ul li{ border: 4px solid rgba( 255, 79, 88, .2); padding: 20px 20px 20px 100px; position: relative; width: calc(50% - 144px);}
.first-guide-area-03 ul li::before{ color: #ff4f58; display: inline-block; font-family: serif; font-size: 80px; position: absolute; left: 30px; top: 0; transform: skewX(-10deg); opacity: .8;}
.first-guide-area-03 ul li:first-child:before{ content: "1";}
.first-guide-area-03 ul li:last-child:before{ content: "2";}
.first-guide-area-03 ul li p{ font-size: 16px; line-height: 26px;}
.first-guide-area-03 ul li p span{ display: block; font-size: 12px; line-height: 16px; margin-top: 4px;}
.first-guide-area-04 h3{ margin-bottom: 6px;}
.first-guide-area-04 > dd > p{ font-size: 14px; line-height: 24px; margin-bottom: 40px; text-align: center;}
.first-guide-area-04 ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 100%;}
.first-guide-area-04 ul li{ position: relative; width: 22%;}
.first-guide-area-04 ul li::before{ border-top: 3px solid rgba( 243, 149, 0, .6); border-right: 3px solid rgba( 243, 149, 0, .6); bottom: calc(50% - 6px); content: ""; display: inline-block; height: 12px; position: absolute; right: -11%; transform: rotate(45deg); width: 12px;}
.first-guide-area-04 ul li:last-child:before{ display: none;}
.first-guide-area-04 ul li dt p{ color: #ff4f58; font-size: 18px; font-weight: bold; line-height: 28px; text-align: center;}
.first-guide-area-04 ul li dt p span{ font-size: 14px; line-height: 24px;}
.first-guide-area-04 ul li dt div{ background-image: url('/images/first-guide-icon-01.png'); background-position: center 0; background-repeat: no-repeat; height: 200px; text-indent: -9999px;}
.first-guide-area-04 ul li:nth-child(2) dt div{ background-position: center -250px;}
.first-guide-area-04 ul li:nth-child(3) dt div{ background-position: center -500px;}
.first-guide-area-04 ul li:nth-child(4) dt div{ background-position: center -750px;}
.first-guide-area-04 ul li dd p{ font-size: 14px; line-height: 24px; text-align: justify;}
.first-guide-area-05 ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 100%;}
.first-guide-area-05 ul li{ margin-bottom: 40px; width: calc(50% - 20px);}
.first-guide-area-05 ul li div{ background-color: #dedede; margin-bottom: 10px; padding-top: 60%; text-indent: -9999px; width: 100%;}
.first-guide-area-05 ul li dt p{ font-size: 18px; line-height: 28px; font-weight: bold; text-align: center;}
.first-guide-area-05 ul li dd p{ font-size: 14px; line-height: 24px; text-align: justify;}

@media screen and (max-width: 904px){
    .first-guide-area-02 dd ul{ width: calc(100% - 66px);}
}
@media screen and (max-width: 818px){
    .first-guide-area-04 ul li{ margin: 0 8% 40px 0; width: 42%;}
}
@media screen and (max-width: 708px){
    .first-guide-area-03 ul li{ width: calc(100% - 144px);}
    .first-guide-area-03 ul li:first-child{ margin-bottom: 20px;}
}
@media screen and (max-width: 599px){
    .first-guide-area-01 dd ul li:first-child{ order: 2; width: 100%;}
    .first-guide-area-01 dd ul li:last-child{ margin: 0 0 10px; order: 1; width: 100%;}
}
@media screen and (max-width: 576px){
    .first-guide-area-05 ul li{ width: 100%;}
}
@media screen and (max-width: 529px){
    .first-guide-area-04 ul li{ margin-right: 0; width: 100%;}
    .first-guide-area-04 ul li::before{ bottom: -22px; right: calc(50% - 6px); transform: rotate(135deg);}
}
@media screen and (max-width: 475px){
    .all-page-main-photo-01 h2 br{ display: none;}
}