/***************************************

math_olympiad.css

***************************************/

/* top */

.br_sp {display: none;}
.br_pc {display: block;}

.f_s {font-size: 90%;}

.f_dblue {color: #00578a;}

.f_bold {font-weight: bold;}

.f_lspace_3 {letter-spacing: .3rem;}

.asta {font-size: .9rem; text-indent: -1rem; margin-left: 1rem; letter-spacing: .05rem;}
.asta::before {content: "※"; margin-right: .1rem;}

h1.h1ttl {
    background: #00578A;
    background: linear-gradient(90deg,rgba(0, 87, 138, 1) 0%, rgba(97, 194, 255, 1) 70%, rgba(3, 110, 184, 1) 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-style: italic;
    transform: rotate(-5deg);
    font-size: 3rem;
    display: flex;
    justify-content: center;
    border-bottom: 3px solid #f8ab00;
    margin-bottom: 2rem;
    letter-spacing: .05rem;
}

h2.h2ttl {
    background: #00578A;
    background: linear-gradient(90deg,rgba(0, 87, 138, 1) 0%, rgba(111, 162, 193, 1) 50%, rgba(3, 110, 184, 1) 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-style: italic;
    transform: rotate(-5deg);
    font-size: 2rem;
    letter-spacing: .3rem;
    margin: 1rem 0 1rem 6rem;
}

h2.h2ttl span {
    font-size: 150%;
    font-weight: bold;
}

h3.h3ttl {
    font-size: 1.2rem;
    letter-spacing: .15rem;
    color: #00578a;
}

section.top_kv {
    position: relative;
}

figure.top_image {
    position: absolute;
    top: 46%;
    right: 9%;
}

figure.top_image img {
    width: 250px;
}


@media screen and (orientation: portrait) and (max-width: 767px){
    
    .br_sp {display: block;}
    .br_pc {display: none;}

    h1.h1ttl {
        background: linear-gradient(90deg,rgba(0, 87, 138, 1) 0%, rgba(97, 194, 255, 1) 30%, rgba(3, 110, 184, 1) 100%);
        -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
        display: block;
    transform: rotate(-8deg);
    font-size: 2rem;
    margin-bottom: 0rem;
        margin-left: 1rem;
        padding-bottom: .5rem;
        letter-spacing: .0rem;
}
    
    h2.h2ttl {
    transform: rotate(-8deg);
    font-size: 1.4rem;
    letter-spacing: .1rem;
    margin: 0rem 0 0rem 1.5rem;
}
    
    h2.h2ttl span {
        letter-spacing: .25rem;
    }
    
    h3.h3ttl {
        font-size: 1.15rem;
    margin-left: 1rem;
        letter-spacing: .1rem;
}
    
    figure.top_image {
        top: 80%;
    right: 0%;
}

figure.top_image img {
    width: 120px;
}
    
}

/* detail */

#main_content .detail {
    margin: 7rem 0 5rem 6.5rem;
    letter-spacing: .1rem;
} 

#main_content .detail dl {
    display: flex;
    column-gap: 3rem;
    margin-bottom: 1.5rem;
    align-items: flex-start
}

#main_content .detail dl dt {
    width: 15%;
    background-color: #00578a;
    border-radius: .5rem;
    color: #fff;
    padding: .1rem .5rem;
    text-align: center;
    font-size: 1rem;
    font-style: italic;
}

#main_content .detail dl dd {
    width: 85%;
    font-size: 1.1rem;
    font-weight: bold;
    color: #00578a;
}

#main_content .detail dl dd ul li {
    font-weight: bold;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    #main_content .detail {
    margin: 5rem auto 3rem;
    letter-spacing: .1rem;
        width: 90%;
} 
    
    #main_content .detail dl {
    display: flex;
    column-gap: 1rem;
    margin-bottom: 1rem;
}
    
    #main_content .detail dl dt {
    width: 20%;
    padding: .1rem .5rem;
    font-size: .9rem;
}
    
    #main_content .detail dl dd {
    width: 80%;
    font-size: 1rem;
}
    
}

/* triangle_area */

.triangle_area {
    margin: 3rem 0 0rem;
    display: flex;
    justify-content: center;
}

.triangle_area .triangle {
    width:0;
    height:0;
    border-style:solid;
    border-width: 35px 36.5px 0 36.5px;
    border-color: #1976D2 transparent transparent transparent;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    .triangle_area {
    margin: 2rem 0 0rem;
}
    
}

/* introduction */

#main_content .introduction {
    width: 90%;
    margin: 1rem auto;
    letter-spacing: .1rem;
}

#main_content .introduction dl dt {
    color: #00578a;
    font-size: 1.1rem;
    font-style: italic;
}

#main_content .introduction dl dd {
    border-bottom: 1px solid #555;
    border-top: 1px solid #555;
    margin-top: 1rem;
}


/* apply_button */

.apply_button {
    margin-top: 3rem;
}

@media screen and (orientation: portrait) and (max-width: 767px){
    
    .apply_button {
    margin-top: 2rem;
}
    
}

/*お問い合わせ*/

.contact_banner .phone_num li.phone_shibuya,
.contact_banner .phone_num li.phone_kichijoji {
    display: none;
}