@charset "utf-8";

#main .mainImg {
    position: relative;
    background-image: url("../pc_ma/img/main_img.jpg");
}

#main .mainImg:before {
    margin-left: -1px;
    position: absolute;
    left: 50%;
    bottom: -42px;
    background: url("../img/common/icon01.png") no-repeat bottom center;
    background-size: auto 155px;
    content: "";
    width: 26px;
    height: 118px;
}

#main .sec01 {
    padding: 0 15px 0px;
    background-color: #EBEBEB;
}

#main .sec01 .bgBox {
    max-width: 1700px;
    margin: 0 auto;
    padding-top: 62px;
    background: url("../img/common/bg03.png") no-repeat left top;
    background-size: 614px auto;
}

#main .sec01 .txtBox {
    max-width: 1000px;
    margin: 0 auto 30px;
}

#main .sec01 .txtBox p {
    line-height: 1.94;
    letter-spacing: 0.1em;
    text-align: center;
}

#main .sec01 .txtBox .ttl {
    margin-bottom: 34px;
    text-align: center;
    line-height: 1.46;
    font-size: 2.8rem;
    color: #003CBE;
    font-weight: bold;
}

#link_box {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.pagelink {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px 2%;
}

.pagelink li {
    width: 23.5%;
}

.pagelink li a {
    text-decoration: none;
    color: black;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    background: white;
    position: relative;
    transition: all 0.2s;
    padding-right: 40px;
    box-sizing: border-box;
}

.pagelink li a:hover {
    background: #ddf1fc;
}

.pagelink li a:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 16px;
    height: 10px;
    background-image: url(../download/img/link_btn.svg);
    transition: all 0.2s;
}

.pagelink li a:hover:after {
    top: 60%;
    right: 15px;
    transform: translateY(-60%);
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
}

@media all and (max-width: 999px) {
    #main .mainImg .headLine01 {
        font-size: 4.5rem !important;
    }

    #main .mainImg:before {
        bottom: -35px;
        background-size: auto 77px;
        width: 14px;
        height: 77px;
    }

    #main .sec01 {
        padding: 0 15px;
    }

    #main .sec01 .bgBox {
        max-width: inherit;
        padding-top: 50px;
        background-size: 307px auto;
    }

    #main .sec01 .txtBox {
        width: auto;
    }

    #main .sec01 .txtBox p {
        line-height: 1.6;
        letter-spacing: 0;
    }

    #main .sec01 .txtBox .ttl {
        margin-bottom: 10px;
        font-size: 2rem;
    }
    
    #link_box {
        padding-bottom: 50px;
    }
    
    .pagelink {
        gap: 15px 2%;
    }
    
    .pagelink li {
        width: 49%;
    }
    
    .pagelink li a {
        font-size: 14px;
        height: 40px;
    }
}

@media all and (max-width: 768px) {
    .pagelink {
        gap: 15px 0%;
    }
    
    .pagelink li {
        width: 100%;
    }
}

/*----- content -----*/
.bl{background: #ddf1fc;}

.gr{background: #EDFBEB;}

.or{background: #FBEFDC;}

.pu{background: #F1EBFB;}

.next {color:darkgray; }

.content {
    padding: 50px 20px;
    box-sizing: border-box;
}

.content:nth-child(2n) {
    background: #eff6f9;
}

.content {
	background: url("../img/common/bg02.png") no-repeat left top,url("../img/common/bg02.png") no-repeat right bottom;
	background-size: 500px auto,500px auto;
}

.content .wrap {
    max-width: 1200px;
    margin: 0 auto;
}

h3.head_ttl {
    margin-bottom: 40px;
    text-align: center;
    color: #eff6f9;
    font-size: 9rem;
    line-height: 1;
    position: relative;
    font-family: 'Avenir';
    font-weight: normal;
}

.content:nth-child(2n) h3.head_ttl {
    color: #fff;
}

h3.head_ttl span {
    margin-top: -14px;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #231815;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.white_box {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.white_box > div {
    width: calc(33.33% - 27px);
    background: white;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    gap: 30px 0;
}

.white_box.wide > div {
    width: 100%;
}

.white_box .head_txt {
    text-align: left;
    font-weight: bold;
    color: #333;
    font-size: 18px;
    width: 100%;
}

.white_box dt {
    padding: 0.5em 1em;
	font-weight: bold;
	text-indent : -1.5em;
}

.white_box dd {
    width: calc(100% - 6em);
    padding: 0.5em 1em;
    text-align: justify;
	text-indent : -1.0em;
}



@media all and (max-width: 999px) {
    h3.head_ttl {
        margin-bottom: 20px !important;
        font-size: 5.5rem;
    }

    h3.head_ttl span {
        margin-top: -11px;
        font-size: 2rem;
        letter-spacing: 0;
    }
    
    .content {
        padding: 30px 20px;
    }

    .content {
        background-size: 400px auto, 400px auto;
    }

    h3.head_ttl {
        margin-bottom: 30px;
        font-size: 7rem;
    }

    h3.head_ttl span {
        font-size: 2rem;
    }

    .white_box {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .white_box > div {
        width: 100%;
        padding: 20px;
        gap: 30px 0;
    }

    .white_box .head_txt {
        font-size: 16px;
    }

}

@media all and (max-width: 768px) {
    .content {
        padding: 30px 15px;
    }

    .content {
        background-size: 300px auto, 300px auto;
    }

    h3.head_ttl {
        margin-bottom: 20px;
        font-size: 5rem;
        line-height: 1.2;
    }

    h3.head_ttl span {
        font-size: 2rem;
    }

    .white_box {
        gap: 20px;
    }

    .white_box > div {
        padding: 15px;
        gap: 20px 0;
    }

    .white_box .head_txt {
        font-size: 14px;
    }

}

/*----- footer -----*/
.contact {
    background: #003CBE;
    padding: 50px 20px;
    box-sizing: border-box;
}

.contact p {
    text-align: center;
    font-size: 16px;
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.contact > div {
    display: flex;
    justify-content: center;
}

.contact > div a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 50px;
    border: 1px solid #ddd;
    background: white;
    position: relative;
    transition: all 0.2s;
    padding-right: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    font-weight: bold;
}

.contact > div a:hover {
    background: #ddf1fc;
}

.contact > div a:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 10px;
    height: 16px;
    background-image: url(../download/img/contact_btn.svg);
    transition: all 0.2s;
}

.contact > div a:hover:after {
    right: 5px;
}

.fLogo {
    margin: 0 auto!important;
}

@media all and (max-width: 768px) {
    .contact {
        padding: 30px 15px;
    }

    .contact p {
        font-size: 14px;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

    .contact > div a {
        font-size: 14px;
        width: 250px;
        height: 40px;
    }
    
    .fLogo {
        width: 100%!important;
    }
    
    .fLogo img {
        max-width: 250px;
    }
    
    .fLogo span {
        max-width: 90%;
        margin: 10px 5% 0!important;
        font-size: 10px!important;
        text-align: justify;
    }
}