@charset "utf-8";
/* CSS Document */

/***************** 汎用 *****************/
/* PC・SP switch */
.pc-only{display: inline-block;}
.sp-only{display: none;}

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

/* text-align */
.t-center{text-align: center;}

/* font color */
.fs-c-blue{color:#000467;}

/* font weight */
.fs-bold{font-weight: bold;}

/* font size */
.fs-s-05{font-size: 0.5rem;}
.fs-s-1{font-size: 1rem;}
.fs-s-2{font-size: 2rem;}

/* font background */
.fs-bg-yellow{background-color: #f0ff00;}

/* margin */
.mb-5{margin-bottom: 5%;}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}



/***************** mv *****************/
@media screen and (max-width: 768px){
    #mv h3 img{
        width:100%;
    }
}
/***************** sec01 *****************/
#sec01 {
    margin: 0 3%;
    font-weight: bold;
}
#sec01 h3{
    text-align: center;
}
#sec01 .cont01{
    position: relative;
    margin: 5% 0 10%;
}

#sec01 .fir{
    position: absolute;
    top:7%;
    left:35%;
    padding:3% 3% 3% 11%;
    border:10px solid #000467;
    font-size: 2.6rem;
    letter-spacing: 0.3rem;
}
#sec01 .sec{
    position: absolute;
    bottom:13%;
    right:38%;
    padding:3% 9% 3% 3%;
    border:10px solid #000467;
    font-size: 2.6rem;
}
#sec01 .fir .fs-c-blue,
#sec01 .sec .fs-c-blue{
    font-size: 3rem;
}
@media screen and (max-width: 1180px){
    #sec01 .fir{
        border:5px solid #000467;
        letter-spacing: 0;
    }
    #sec01 .sec{
        border:5px solid #000467;
    }
}

@media screen and (max-width: 768px){
    #sec01 .fir{
        padding:3% 3% 3% 15%;
        border:5px solid #000467;
        font-size: 2.3rem;
        letter-spacing: 0;
    }
    #sec01 .sec{
        bottom:7%;
        padding:3% 14% 3% 3%;
        border:5px solid #000467;
        font-size: 2.3rem;
    }
    #sec01 .fir .fs-c-blue,
    #sec01 .sec .fs-c-blue{
        font-size: 2.6rem;
    }
}
@media screen and (max-width: 642px){
    #sec01 .fir{
        font-size: 1.6rem;
    }
    #sec01 .sec{
        font-size: 1.6rem;
    }
    #sec01 .fir .fs-c-blue,
    #sec01 .sec .fs-c-blue{
        font-size: 1.9rem;
    }
}
@media screen and (max-width: 510px){
    #sec01 .fir{
        padding:3% 2% 3% 14%;
        font-size: 1rem;
    }
    #sec01 .sec{
        padding:3% 15% 3% 3%;
        font-size: 1rem;
    }
    #sec01 .fir .fs-c-blue,
    #sec01 .sec .fs-c-blue{
        font-size: 1.2rem;
    }
}
/***************** sec02 *****************/
#sec02 {
    margin-top: -13px;
}
#sec02 h3{
    background-color: #000467;
    padding:3% 5%;
    margin: 0;
    text-align: center;
}
#sec02 .cont{
    background-color: #0043da;
    position: relative;
    padding: 2% ;
    color:#ffffff;
}
#sec02 .txt-box{
    position: absolute;
    top:15%;
    left:10%;
    font-size: 2.4rem;
}
#sec02 h4{
    width:39%;
    border-bottom: 4px solid #f0ff00;
    padding-bottom: 5px;
    color:#ffffff;
    font-size: 3.2rem;
    margin-bottom: 20px;
}
#sec02 .fir,
#sec02 .sec{
    width:39%;
    line-height: 4rem;
    letter-spacing: 0.1rem;
}
#sec02 .fir{
    margin-bottom: 7%;
}
#sec02 .ex{
    position: absolute;
    right:11%;
    bottom: 9%;
    color:#ffffff;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}
@media screen and (max-width: 1180px){
    #sec02 .txt-box{
        top:10%;
        font-size: 1.5em;
    }
    #sec02 h4{
        font-size: 2rem;
    }
    #sec02 .fir,
    #sec02 .sec{
        line-height: 3rem;
    }
    #sec02 .fir{
        margin-bottom: 4%;
    }
}
@media screen and (max-width: 768px){
    #sec02 .txt-box{
        top:7%;
        left:5%;
        font-size: 2.2em;
    }
    #sec02 h4{
        width:57%;
        border-bottom: 2px solid #f0ff00;
        font-size: 3rem;
    }
    #sec02 .cont img{
        width: 100%;
    }
    #sec02 .fir,
    #sec02 .sec{
        line-height: 3.5rem;
    }
    #sec02 .fir{
        width:57%;
        margin-bottom: 8%;
    }
    #sec02 .sec{
        width:95%;
    }
    #sec02 .ex{
        bottom: 4%;
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 720px){
    #sec02 .txt-box{
        font-size: 1.8em;
    }
    #sec02 h4{
        font-size: 2rem;
    }
    #sec02 .ex{
        font-size: 0.8rem;
    }
}
@media screen and (max-width: 642px){
    #sec02 {
        margin-top: -5px;
    }
    #sec02 .fir,
    #sec02 .sec{
        letter-spacing: 0.1rem;
        line-height: 2.5rem;
    }
    #sec02 .fir{
        width:57%;
        margin-bottom: 5%;
    }
    #sec02 .ex{
        right:3%;
        bottom: 3%;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 510px){
    #sec02 .txt-box{
        font-size: 1.1rem;
    }
    #sec02 h4{
        font-size: 1.3rem;
        margin-bottom: 3%;
    }
    #sec02 .fir{
        margin-bottom: 10%;
    }
    #sec02 .fir,
    #sec02 .sec{
        line-height: 1.5rem;
    }
}
@media screen and (max-width: 450px){
    #sec02 .txt-box{
        font-size: 1.1rem;
    }
    #sec02 h4{
        font-size: 1.3rem;
    }
}

/***************** CV / CV2 *****************/
#cv,#cv2{
    margin: 0 0 10% 0;
}
#cv .btn,#cv2 .btn{
    background: #ff6638;
    background: -moz-linear-gradient(45deg, #ff6638 0%, #ffc4b2 50%, #e43702 100%);
    background: -webkit-linear-gradient(45deg, #ff6638 0%,#ffc4b2 50%,#e43702 100%);
    background: linear-gradient(45deg, #ff6638 0%,#ffc4b2 50%,#e43702 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6638', endColorstr='#e43702',GradientType=1 );
    border-radius: 55px;
    padding:0.2%;
    width:54%;
    margin: 0 0 0 22.5%;
}
#cv .btn p,#cv2 .btn p{
    background: #ff6638;
    background: -moz-linear-gradient(top, #ff6638 0%, #ff6638 50%, #ff511c 51%, #ff511c 100%);
    background: -webkit-linear-gradient(top, #ff6638 0%,#ff6638 50%,#ff511c 51%,#ff511c 100%);
    background: linear-gradient(to bottom, #ff6638 0%,#ff6638 50%,#ff511c 51%,#ff511c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6638', endColorstr='#ff511c',GradientType=0 );
    border-radius: 55px;
    line-height: 10rem;
    width: 100%;
    font-size: 3rem;
    font-weight: bold;
}
#cv .btn p a,#cv2 .btn p a,
#cv .btn p a:hover,#cv2 .btn p a:hover{
    color:#ffffff;
    width:100%;
    display: block;
    text-decoration: none;
}
#cv .btn p a:hover,#cv2 .btn p a:hover{
    opacity: 0.7;
}

#cv .btn p a::after,#cv2 .btn p a::after{
    content: ">";
    color:#ffffff;
    margin-left: 35px;
    font-weight: normal;
    font-size: 4rem;
}
@media screen and (max-width: 1180px){
    #cv .btn p,#cv2 .btn p{
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 768px){
    #cv .ex{
        text-align: right;
        font-size: 1.4rem;
        margin-bottom: 3%;
        display: block;
        padding-right: 3%;
    }
    #cv .btn,#cv2 .btn{
        border-radius: 45px;
        width:90%;
        padding:0.5%;
        margin: 0 5%;
    }
    #cv .btn p,#cv2 .btn p{
        border-radius: 45px;
        line-height: 8rem;
        font-size: 3rem;
    }
    #cv .btn p a::after,#cv2 .btn p a::after{
        margin-left: 10px;
        font-size: 3.6rem;
    }
}
@media screen and (max-width: 642px){
    #cv .btn,#cv2 .btn{
        border-radius: 35px;
    }
    #cv .btn p,#cv2 .btn p{
        border-radius: 35px;
        line-height: 5rem;
        font-size: 1.6rem;
        font-weight: normal;
    }
    #cv .btn p a::after,#cv2 .btn p a::after{
        margin-left: 5px;
        font-size: 1.6rem;
    }
#cv .ex{
    font-size: 0.8rem;
}

}

/***************** sec03 *****************/
#sec03{
    margin: 0 0 10% 0;
}
#sec03 h3{
    background-color: #000467;
    padding:3% 5%;
    margin: 0;
    text-align: center;
}
#sec03 h4{
    text-align: center;
}
#sec03 .cont01{
    padding:3% 10%;
    font-size: 2.4rem;
    line-height: 4rem;
}
#sec03 sup{
    margin-left: -5px;
}
#sec03 .ex{
    font-size: 1.2rem;
    text-align: right;
}
#sec03 .cont02{
    padding:3% 10%;
    font-size: 2.4rem;
    line-height: 4rem;
}
#sec03 .cont02 .txt{
    width:43%;
    float: left;
}
#sec03 .cont02 .movie-box{
    background-color: #0043da;
    position: relative;
    margin: 0 2%;
    padding:2%;
    width:50%;
    float: right;
}
#sec03 .cont02 .movie{
    position: absolute;
    top:27%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
}
@media screen and (max-width: 768px){
    #sec03 h4{
        margin-bottom: 1%;
    }
    #sec03 .cont01,
    #sec03 .cont02{
        padding:3% 7%;
        font-size: 2.2rem;
        line-height: normal;
    }
    #sec03 .cont02 .txt{
        width:100%;
        float: none;
        margin-bottom: 3%;
    }
#sec03 .cont02 .movie{
    top:30%;
    }
    #sec03 .cont02 .movie-box{
        width:100%;
        float: none;
        margin: 0;
    }
    #sec03 .ex{
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 642px){
    #sec03 .cont01,
    #sec03 .cont02{
        font-size: 1.2rem;
    }
    #sec03 .ex{
        font-size: 0.8rem;
    }
}
/***************** sec04 *****************/
#sec04{
    margin: 0 0 6% 0;
}
#sec04 h3{
    background-color: #000467;
    padding:3% 5%;
    margin: 0;
    text-align: center;
}

#sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
    line-height: 4rem;
    font-size: 3rem;
}
#sec04 .cont{
    background-image: url(/sites/default/files/2022-02/sec04-cont-bg.png);
    padding:5%;
}
#sec04 .com01{
    background-image: url(/sites/default/files/2022-01/sec04-serif01-bg-pc.png);
    margin:0px 38% 0 12%;
    padding: 3% 2% 10% 3%;
}
#sec04 .com02{
    background-image: url(/sites/default/files/2022-01/sec04-serif02-bg-pc.png);
    margin:0 5% 0 26%;
    padding: 6% 2% 10% 3%;
}
#sec04 .com03{
    background-image: url(/sites/default/files/2022-01/sec04-serif03-bg-pc.png);
    margin:0 25% 0 5%;
    padding: 3% 2% 10% 3%;
}
#sec04 .com04{
    background-image: url(/sites/default/files/2022-02/sec04-serif04-bg-pc.png);
    margin:0 5% 0 27%;
    padding: 5% 3% 10% 3%;
}
#sec04 .com04 .ex{
    display: block;
    font-size: 1.2rem;
    margin-top: -5px;
    text-align: right;
}
#sec04 .com05{
    background-image: url(/sites/default/files/2022-01/sec04-serif05-bg-pc.png);
    margin:0 19% 0 18%;
    padding: 3% 2% 10% 5%;
}
@media screen and (max-width: 1180px){
    #sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
        font-size: 1.9rem;
    }
    #sec04 .com01{
        padding: 2% 2% 10% 3%;
    }
    #sec04 .com02{
        padding: 3% 2% 14% 3%;
    }
    #sec04 .com03{
        padding: 2% 2% 10% 3%;
    }
    #sec04 .com04{
        padding: 2% 3% 10% 3%;
    }
    
}

@media screen and (max-width: 768px){
    #sec04{
        margin: 0 0 10% 0;
    }
    #sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
        line-height: 3.5rem;
        font-size: 2.8rem;
    }
    #sec04 .com01{
        background-image: url(/sites/default/files/2022-02/sec04-serif01-bg-sp.png);
        padding: 5% 2% 12% 3%;
        margin:0 20% 0 0;
    }
    #sec04 .com02{
        background-image: url(/sites/default/files/2022-02/sec04-serif02-bg-sp.png);
        padding: 5% 5% 13% 5%;
        margin:0 0 0 20%;
    }
    #sec04 .com03{
        background-image: url(/sites/default/files/2022-02/sec04-serif03-bg-sp.png);
        padding: 6% 2% 10% 6%;
        margin:0 0 0 0;
        font-size: 2.6rem;
    }
    #sec04 .com04{
        background-image: url(/sites/default/files/2022-02/sec04-serif04-bg-sp.png);
        padding: 6% 5% 13% 6%;
        margin:0 5% 0 27%;
        text-align: left;
    }
    #sec04 .com04 .ex{
        font-size: 1.4rem;
        text-align: right;
    }
    #sec04 .com05{
        background-image: url(/sites/default/files/2022-02/sec04-serif05-bg-sp.png);
        padding: 6% 5% 10% 5%;
        margin: 0 0 0 0;
    }
}
@media screen and (max-width: 680px){
    #sec04{
        margin: 0 0 10% 0;
    }
    #sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
        line-height: 3rem;
        font-size: 2rem;
    }
    #sec04 .com01{
        padding: 4% 2% 9% 3%;
    }
    #sec04 .com02{
        padding: 4% 5% 10% 5%;
    }
    #sec04 .com03{
        padding: 4% 2% 10% 3%;
        font-size: 1.7rem;
        text-align: left;
    }
    #sec04 .com04{
        padding: 4% 4% 10% 3%;
    }
    #sec04 .com04 .ex{
        font-size: 0.8rem;
        text-align: right;
    }
    #sec04 .com05{
        padding: 4% 5% 10% 5%;
    }
}
@media screen and (max-width: 450px){
    #sec04{
        margin: 0 0 10% 0;
    }
    #sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
        line-height: 2.3rem;
        font-size: 1.5rem;
    }
    #sec04 .com03{
        font-size: 1.3rem;
    }
    #sec04 .com04 .ex{
        display: block;
        margin-top: -5px;
        text-align: left;
    }
}
@media screen and (max-width: 345px){
    #sec04 .cont,#sec04 .com01,#sec04 .com02,#sec04 .com03,#sec04 .com04,#sec04 .com05{
        font-size: 1.1rem;
    }
    #sec04 .com01{
        padding: 3% 5% 8% 6%;
    }
    #sec04 .com02{
        padding: 3% 5% 11% 8%;
    }
    #sec04 .com03{
        padding: 3% 2% 8% 6%;
        font-size: 1.1rem;
    }
    #sec04 .com04{
        padding: 3% 2% 11% 6%;
    }
    #sec04 .com04 .ex{
        font-size: 0.8rem;
    }
    #sec04 .com05{
        padding: 3% 2% 10% 6%;
    }
}

/***************** sec05 *****************/
#sec05{
    margin: 0 0 8% 0;
}
#sec05 h3{
    text-align: center;
    margin-bottom: 5%;
}
#sec05 .cont{
    margin: 0 9%;
}
#sec05 .cont div{
    margin: 0 8% 5% 0;
    float: left;
    width:46%;
}
#sec05 .cont div:nth-child(even){
    margin: 0 0 5% 0;
}
#sec05 .cont div .txt::before{
    content: "▼";
    color:#000467;
}
#sec05 .cont div .txt{
    font-size: 1.8rem;
}
@media screen and (max-width: 768px){
    #sec05{
        margin: 0 0 10% 0;
    }
    #sec05 h3{
        margin:0 25% 5%;
    }
    #sec05 .cont div{
        margin-bottom: 5%;
        float: none;
        width: 100%;
    }
    #sec05 .cont div .txt{
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 642px){
    #sec05 .cont div .txt{
        font-size: 1.3rem;
    }
}

/***************** to-top *****************/
#to-top{
    text-align: center;
    color:#000467;
}
#to-top a{
    background-image: url(/sites/default/files/2022-02/top-top.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center right;
    vertical-align: middle;
    color:#000467;
    padding-right: 50px;
    display: inline-block;
    line-height: 3rem;
}


/***************** 幅調整 *****************/
.main-col--shingle{
    margin: 0 !important;
    padding: 0 !important;
}