@charset "utf-8";
/*共通設定*/
/*終わり*/  


/*<section class="single">*/
.single {
    position: relative;
    padding: 80px 5vw;
}

.single-in {
    max-width: 1072px;
    font-weight: 600;
}

.cate-date {
    display: flex;
    gap: 24px;
    font-size: 12px;
}

.cate-txt {
    color: #007cf3;
}

.single-title {
    position: relative;
    font-weight: 800;
    font-size: 32px;
    padding-bottom: 8px;
    margin-top: 8px;
}

.single-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 3px solid rgb(0,33,101);
    border-image: linear-gradient(90deg, rgba(0,33,101,1) 4%, rgba(0,172,245,0.9192051820728291) 80%) 1;
    z-index: 1;
}

.single-thumb-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 40px;
}

.single-thumb {
    width: 100%;
    height: auto;
}

.single-content-area {
    margin-top: 40px;
}

.single-content-area h2 {
    font-size: 24px;
    background-color: #f5f6f8;
    padding: 8px 16px;
    border-left: solid 8px #020065;
    color: #020065;
    margin: 40px 0 24px 0;
}

.single-content-area h3 {
    font-size: 18px;
    color: #020065;
    margin: 40px 0 24px 0;
    border-bottom: solid 1px #020065;
}

.archive-back-wrap {
    margin-top: 120px;
    text-align: center;
}

.archive-back-btn {
    background-image: radial-gradient(#002d9e, #020065);
    display: inline-block;
    padding: 16px 24px;
    text-align: center;
    font-weight: 600;
    border-radius: 50vh;
    font-size: 14px;
    color: #fff;
    max-width: 280px;
    width: 100%;
}

.hexagon-bg {
    opacity: 0.2;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
/*終わり*/  


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
/*終わり*/  


/*<section class="single">*/
    .single-title {
        font-size: clamp(calc(24px), calc(32 / 1024 * 100vw), 32px);
    }

    .single-content-area h2 {
        font-size: clamp(calc(20px), calc(24 / 1024 * 100vw), 24px);
    }
/*終わり*/ 
}
  
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
/*終わり*/  


/*<section class="single">*/
    .single {
        padding: 64px 5vw;
    }

    .cate-date {
        gap: 16px;
    }    

    .single-title {
        font-size: clamp(calc(18px), calc(24 / 599 * 100vw), 24px);
    }

    .single-content-area h2 {
        font-size: clamp(calc(18px), calc(20 / 599 * 100vw), 20px);
    }

    .single-content-area h3 {
        font-size: clamp(calc(16px), calc(18 / 599 * 100vw), 18px);
    }   
    
    .single-content-area p {
        font-size: 14px;
    }
/*終わり*/ 

}