@charset "utf-8";

/*----------親ページ----------*/
.plain-language-medical-terms .intro,
.plain-language-medical-termstest .intro {
	display: flex;
	align-items: center;
	gap: 4rem;
}

.intro img {
    width: 40%;
	max-width: 300px;
	height: auto;
}

/* 外枠の調整 */
.step-container {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5%;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
}

/* ステップの箱 */
.step-box {
    background-color: var(--bg-color, #ccc);
    color: #fff;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 0 0 auto; 
    min-width: 0; 
    min-height: 70px;

    padding: 0 1.5%;
    border-radius: 12px;
    
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: 500;
    line-height: 1.4;
}

.step-box span {
    display: block;
    white-space: nowrap;
}
.step-arrow {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 15px solid var(--bg-color); 
}
.step-container .step-arrow:last-of-type {
    display: none;
}

@media screen and (max-width: 800px) {
    .step-container {
        flex-direction: column;
        gap: 8px;
    }
    .step-box {
        flex-direction: row;
        width: 70%;
        min-width: 0; 
        min-height: 60px;
        padding: 0 1.5%;
        font-size: inherit;
    }
    .step-box span {
        display: inline;
    }
    .step-arrow {
        border-top: 15px solid var(--bg-color);
        border-right: 22px solid transparent;
        border-left: 22px solid transparent; 
        border-bottom: 0;
    }
}
@media screen and (max-width: 468px) {
    .step-container {
        gap: 5px;
    }
    .step-box {
        width: 90%;
        min-height: 50px;
}
    .step-arrow {
        border-top: 10px solid var(--bg-color);
        border-right: 15px solid transparent;
        border-left: 15px solid transparent; 
    }
}
/*
.pc-only {
    max-width: fit-content;
    height: auto;
    margin: auto;
}
.smp-only {
    display: none;
}*/
@media screen and (max-width: 768px) {
    .plain-language-medical-terms .intro {
        flex-direction: column;
    }
    .intro img {
        width: 100%;
        margin: auto;
    }
/*    .pc-only {
        display: none;
    }
    .smp-only {
        display: block;
        max-width: fit-content;
        height: auto;
        margin: auto;
    }*/
}

/*----------共通----------*/
h3 {
    width: 100%;
    color: #fff;
    background: #148ecf;
    font-size: 2.7rem;
    padding: 1.4rem 2.0rem !important;
    border-radius: 27px;
}
h3::before{
    display: none;
}
@media screen and (max-width: 425px) {
    #invention h3 ,
    #joined-students h3 {
        font-size: 2.7rem !important;
}
}
/*----------用語ページ----------*/
.invention-inner {
    margin-top: 5rem;
    padding: 0 3rem 5rem 3rem;
    background-color: #f3f3f3;
}
/*----------優秀表現：学校名----------*/
.invention-inner h4 { 
    display: flex; 
    align-items: center; 
    margin: 2rem -3rem 0 -3rem !important; 
    padding: 2rem;
    color: #fff !important;
}

.area-yellow { --area-color: #fabe00; }
.area-pink   { --area-color: #fc83a3; }
.area-green  { --area-color: #82ca3f; }
.area-blue   { --area-color: #43b3f0; }

.invention-inner h4 {
    background: var(--area-color) !important;
}
.invention-inner .section-divider {
    border: none; 
    border-top: 3px dotted var(--area-color); 
    margin: 4rem 0 3rem 0;
    width: 100%; 
}
h5.label , 
.disc > li::before { color:var(--area-color) !important;}

/*-----優秀表現-----*/
/*.invention-inner h4 span.excellent {
    font-size: 2.8rem;
    margin-right: 1.6rem;
    padding-right: 2rem;
    position: relative;
}

.invention-inner h4 span.excellent::before {
    content: '優秀表現';
    letter-spacing: .3rem;
    color: #fff;
}

.invention-inner h4 span.excellent::after {
    content: "";
    height: 32px;
    width: 6px;
    background: #fff;
    position: absolute;
    top: 55%;
    right: 0;
    transform: translateY(-50%);
}*/

/*----------表現・こだわり・工夫----------*/

.invention-inner h5::before {
    display: none !important;
    content: none !important;
}
.invention-inner h5.label {
    font-weight: 500;
    border-bottom: 2px dotted var(--area-color);
    width: fit-content;
    padding-bottom: 6px;
    margin-bottom: 1rem;
}

/*---------画像-----------*/

.invention-inner img {
    max-width: 500px;
    height: auto;
    margin-top: 2rem;
}

/*----------研究参加校----------*/
.school-list {
    margin-top: 1.8rem;
}
.school-list p {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #148ecf;
}
.school-list p span.date {
    font-size: 1.5rem;
}
.school-list ul {
    margin-left: 0.5rem;
}

@media screen and (max-width: 425px) { 

    /*----------優秀表現：学校名----------*/
    /*.invention-inner h4 {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
    }

    .invention-inner h4 span.excellent {
        display: inline-flex; 
        align-items: center;
        width: 100%; 
        margin-bottom: 0.5rem;
        padding-right: 0;
    }

    .invention-inner h4 span.excellent::before {
        display: inline-block;
        margin-right: 1rem;
    }

    .invention-inner h4 span.excellent::after {
        position: static;  
        display: inline-block;
        transform: none;
        width: 6px;
        height: 24px;
    }

    .invention-inner h4 span:not(.excellent) {
        display: block;
        padding-left: 0;
        margin-top: 0.6rem;
    }*/

}

/* 以下北詰 */

#invention.invention-link {
    margin: 50px auto;
}

#invention.invention__place {
    margin: 0;
}

.graphic-recording {
    width: 335px;
    display: block;
    margin: 30px auto 0;
}

/* =============== */
.plainModal,
.modal-img {
    display: none;
}

@media screen and (min-width: 767px) { 
    .graphic-recording {
    cursor: pointer;
    }

    .plainModal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }

    .modal-img {
        display: block;
        max-width: 60%;
        max-height: 90%;
    }
}
/* =============== */

/* その他の表現 ページ*/
.invention-inner_other {
    padding: 3.5rem 3rem 5rem;
}

.invention-inner_other img {
    height: 350px;
    width: auto;
    margin-top: 6px;
}

.other-lstyle2 li {
    display: table;
    padding: 1.0rem 0 1.0rem 2.0rem;
    position: relative;
    transition: color .25s ease;
    z-index: 1;
    margin-right: 2.0rem;
}


.other-lstyle2 li a::before {
    left: 0;
    content: "\f107";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    padding-top: .1rem;
    transition: color .25s ease;
    position: absolute;
}