@charset "utf-8";

/* LP
----------------------------------------------------------------------------- */
.main{
    padding:50px 0;
}
.guidance-wrap{
    /*display: flex;*/
    margin-bottom: 50px;
}
.guidance-wrap p,
.guidance-wrap img{
    width: 49%;
    text-align: left;
    justify-content: space-between;
}
.point-logo{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
}
.point-logo img{
    width: 21%;
}
.guidance-point{
    text-align:center;
    margin:0 auto;
    margin-bottom:50px;
}
.flex{
    display: flex;
    align-items: center;
}
.guidance-point-inner{
    border-right:1px solid #bbb;
    padding-right:30px;
}
.guidance-point-inner:last-child{
    border-right:none;
    padding-right:0px;
    padding-left:30px;
}
.guidance-point ul li {
    display: inline-block;
    float: left;
    width: 50%;
    text-align:left;
    padding:0 15px;
}
.guidance-point ul li:last-child{
    margin-bottom:20px;
}
.guidance-point li::before{
    content: '';
    display: inline-block;
    position: relative;
    top: -2px;
    width: 8px;
    height: 8px;
    background: #fd9700;
    border-radius: 100%;
    margin-right: 10px;
}
.guidance-point ul li img {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 15px;
}

@media screen and (max-width:768px){
    .guidance-point-inner .flex{
        display: block;
    }
    .tag{
        width: 100%;
        margin-bottom:10px;
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .guidance-point-inner{
        border-right: none;
        margin-bottom: 30px;
    }
    .guidance-point ul li{
        float: revert;
        width: 100%;
    }
}

/* テキスト強調 */
.strong{
    font-size:18px;
    font-weight:bold;
}
.strong-border{
    background: linear-gradient(transparent 40%, #ffff66 40%);
    padding:0 5px;
    margin:0 5px;
}

/* 導入テキスト */
.txt-intro{
    text-align:center;
    font-weight:bold;
    font-size:23px;
    background-color:#fd9700;
    color:#fff;
    padding:5px;
    width:500px;
    margin:0 auto;
    margin-bottom:30px;
}
.txt-intoro-sub{
    text-align:center;
    font-weight:bold;
    font-size:20px;
}
/*.txt-intoro-sub::after{
    content: "";
    width: 500px;
    height: 2px;
    display: block;
    margin: 10px auto 30px;
    background: #fd9700;
}*/
.txt-intoro-sub .strong{
    font-size:25px;
    text-align:center;
    font-weight:bold;
    color:#fd9700;
}
.guidance-point-ttl{
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align:left;
}
.guidance-point-ttl::before{
    content: "▼";
    color:#fd9700;
    padding-right:5px;
}

/* 通常テキスト */
.txt-normal{
    font-size:16px;
    line-height: 1.8;
    padding:0 15px;
}

.guidance-point .txt-normal img{
    width:100px;
    height: auto;
    float: left;
    margin-right: 30px;
    vertical-align: middle;
}

@media screen and (max-width:768px){
    .txt-intro{
        width: 100%;
        font-size: 18px;
    }
    .txt-intoro-sub{
        font-size:18px;
    }
    .txt-intoro-sub .strong{
        font-size: 20px;
    }
    .txt-normal{
        padding: 0;
        margin-bottom: 50px!important;
    }
    .guidance-point .txt-normal img{
        display: block;
        margin:0 auto 20px;
        float: none;
    }
}

.btn-normal{
    width:350px;
}

@media screen and (max-width:768px){
    .btn-normal{
        width:90%;
    }    
}

.tag{
    height:30px;
    min-width:120px;
    line-height:30px;
    padding:0 20px;
    margin-left:0;
    margin-right:15px;
}
.guidance-point-flow{
    font-size: 16px;
    letter-spacing: 1px;
    width:100%;
    text-align: center;
    color: #333;
    background-color: #fff;
    text-decoration: none;
    border:2px solid #fd9700;
    border-radius: 10px;
    position: relative;
    margin:0 5px;
    padding: 5px 0;
}
.guidance-point-flow2{
    font-size: 16px;
    letter-spacing: 1px;
    width:50%;
    text-align: center;
    display: inline-block;
    color: #333;
    background-color: #fff;
    text-decoration: none;
    border:2px solid #fd9700;
    border-radius: 10px;
    position: relative;
    padding: 5px 0;
}
.guidance-point-next{
   font-size:20px;
   margin:0 auto;
   color:#fd9700;
   text-align:center;
   vertical-align:middle;
   padding: 20px 0;
}
.flow{
    width:60%;
    margin:0 auto;
}

@media screen and (max-width:768px){
    .flow{
        width: 100%;
    }
    .guidance-point-flow{
        margin: 0;
    }
    .guidance-point-flow2{
        font-size: 15px;
        margin: 0;
    }
    .guidance-point .ttl-M{
        margin-top: 50px!important;
    }
    .guidance-point-next{
        padding: 10px 0;
    }
}

/* ポイント１ */
.box-point1{
    margin: 0 auto 50px;
}
.box-point1 ul{
    display: table;
    width: 100%;
}
.box-point1 ul li{
    display:table-cell;
    width:calc(100% / 3);
    vertical-align: top;
    text-align: center;
    padding:0 15px;
    font-size: 18px;
    font-weight: bold;
}
.box-point1 ul li img{
    margin-bottom: 20px;
}

@media screen and (max-width:767px){
    .box-point1 ul{
        display: block;
    }
    .box-point1 ul li{
        display: block;
        width: 100%;
        padding: 0 0 20px;
    }
    .box-point1 ul li:last-child{
        padding-bottom: 0;
    }
}

/* ポイント２ */
.box-point2{
    margin-bottom: 30px;
    background-color: #f6f6f6;
    border:1px solid #d7d7d7;
    padding:50px 30px;
}
.box-point2-ttl{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}
.box-point2-ttl img{
    display: block;
    margin:0 auto 15px;
}
.box-point2-ttl::after{
    content:"";
    width: 150px;
    height:4px;
    display:block;
    margin:20px auto 30px;
    background: rgb(79,143,208);
    background: linear-gradient(90deg, rgba(79,143,208,1) 0%, rgba(164,235,194,1) 100%);
}
.box-point2 p{
    font-size:16px;
    line-height: 1.8;
    padding:0 20px;
}

@media screen and (max-width:768px){
    .box-point2 p{
        padding: 0;
    }
}

/* 料金表 */
.guidance-price{
    border:2px solid #fd9700;
    width:100%;
    margin-bottom: 50px;
}
.guidance-price th,
.guidance-price td{
    border:1px solid #fd9700;
    font-size:18px;
    padding: 20px;
    vertical-align: middle;
}
.guidance-price thead th{
    background-color:#fffae3;
    font-weight: bold;
}


/* 動画 */
@media screen and (max-width:768px){
    iframe{
        height: 50%;
    }
}

/* よくあるご質問 */
.guidance-faq{
    margin-bottom: 50px;
}

.guidance-faq dt{
    display: flex;
    padding:15px;
    border-bottom: 1px solid #ccc;
    cursor:pointer;
    position: relative;
}
.guidance-faq dt:before{
    content:"Q.";
    margin-right: 10px;
    font-size:18px;
    font-weight: bold;
    color:#fd9700;
}
.guidance-faq dd{
    padding:15px;
    background-color:#f5f5f5;
    display: none;
}
.guidance-faq dd span{
    margin-right: 10px;
    font-size:18px;
    font-weight: bold;
    color:#fd9700;
}
.guidance-faq dd .faq-list-answer{
    display: flex;
}

.arrow{  
    width: 12px;
    height: 12px;
    border: 3px solid;
    border-color: transparent transparent #565656 #565656;
    transform: rotate(-45deg);
    position: absolute;
    right: 20px;
}
.guidance-faq dt.is-open .arrow{
    width: 12px;
    height: 12px;
    border: 3px solid;
    border-color: #565656 #565656 transparent transparent;
    transform: rotate(-45deg);
    right: 20px;
    top: 25px;
}

@media screen and (max-width:768px){
    .guidance-faq dt{
        padding: 10px;
    }
    .guidance-faq dt p{
        width: 80%;
        padding: 5px;
    }
    .arrow{
        right: 10px;
        top: 15px;
    }
    .guidance-faq dt.is-open .arrow{
        right: 10px;        
    }
}

/* キャンペーン装飾 */
.txt-campaign{
    margin-top:50px;
    margin-bottom: 20px;
    background-position: top center;
    background-repeat: repeat-x;
    background-size: 50% auto;
    background-color:#fff9ec;
    padding:100px 20px 50px;
    background-image:url("/guidance/images/bg_campaign.png");
    background-size:100% auto;
    background-repeat: no-repeat;
    background-position: top center;
}