@charset "utf-8";

:root{
    --main-color:#3888b0;
    --sub-color:#2f9471;
    --base-color-01:#ffffff;
    --base-color-02:#f0f0f0;
    --accent-color:#225588;
    --font-color:#333;

    --survice-color_SYSTEM:#3888b0;
    --survice-color_HP:#77cc22;
    --survice-color_SUPPORT:#FF7F27;
    --survice-color_SCHOOL:#991155;
}

/* --------
共通ヘッダー
-------- */
.forty-th_logo{
    display: block;
    z-index: 100;
    & img{height:2rem;}
}
@media screen and (max-width: 500px){ /*一定幅で表示/非表示*/
    .forty-th_logo{display: none;}
}

/* ==============
40周年メッセージ(40th.html)
============== */
#Fortyth-Page .main-page{padding:0 0;}

/* MV */
#Fortyth-Page #mainvisual-page .page-title .en{
    line-height: 0.9em;
    margin-bottom:15px;
}

/* --------
top-message
-------- */
#top-message{
    margin:100px 0 80px;
    width:100%;
    height:80vh;
    max-height: 750px;
    background-image: url(../img/40th_bg_top.png),url(../img/40th_bg_bottom.png);
    background-repeat: no-repeat;
    background-size:85%;
    background-position: center top, center bottom;
    position: relative;
    & .sec-content{
        position: absolute;
        top:50%;
        left:50%;
        translate: -50% -50%;
        width:100%;
        margin:0;
    }
}

#top-message .image-area{
    max-width: 750px;
    width:100%;
    margin:auto;
    text-align: center;
    & img{
        width:100%;
        object-fit: contain;
    }
    & p{
        margin:0;
        text-align: center;
        font-family: 'Zen Maru Gothic', serif;
        font-size:2.5rem;
        color:var(--sub-color);
        user-select: none;
        letter-spacing: 2.5px;
        text-shadow:
            0 -1px 0 #49dfae,
            0 1px 0 #085439;
    }
}

#top-message .text-area{
    text-align: center;
    padding:40px 0 0;
    line-height: 1;
    font-size:1.35rem;
    & br{display: none;}
}

/* 大きさ調整 */
@media screen and (max-width: 1030px){
    #top-message .image-area{
        & img{width:80%;}
        & p{font-size:2.25rem;}
    }
    #top-message .text-area{font-size:1.125rem;}
}

/* --------
fortyth-history
-------- */
#fortyth-history{
    padding:80px 0 0;
    background-color: #f9f9f9;
}

.fortyth-timeline{
    padding:40px 0 60px;
    & .timeline{
        position: relative;
        max-width: 100%;
        padding:0;
        &::after{ /* 縦線 */
            content:"";
            background-color:#555;
            width:5px;
            height:100%;
            position: absolute;
            top:0;
            left:50%;
            translate: -50% 0;
            z-index: 1;
        }
        & li{
            position: relative;
            height:100%;
            margin-bottom:100px; /* 間隔 */
            &:last-child{margin-bottom:0;}
            &:first-child::before,&:last-child::after{ /* 縦線(はみ出し) */
                content:"";
                background-color:#555;
                width:5px;
                position: absolute;
                left:50%;
                z-index: 1;
            }
            &:first-child::before{
                height:50px;
                top:0;
                translate: -50% -100%;
            }
            &:last-child::after{
                height:30px;
                bottom:0;
                translate: -50% -50%;
                border-radius: 0%;
            }
            /* 沿革(about)の●消し */
            &:not(:last-child)::after{display: none;}
        }
    }
}

/* ● */
li .timeline-dot{
    width:25px;
    height:25px;
    border:3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px #000;
    position: absolute;
    top:0;
    left:50%;
    translate: -50% -50%;
    z-index: 20;
}
li:nth-child(odd) .timeline-dot{background-color: var(--accent-color);}
li:nth-child(even) .timeline-dot{background-color: #639ED8;}

/* ふきだし */
li .timeline-text{
    background-color: #ddd;
    border-radius: 10px;
    width:45%;
    position: absolute;
    top:0;
    translate: 0 -50%;
}
li:nth-child(odd) .timeline-text{left:0;}
li:nth-child(even) .timeline-text{right:0;}

.timeline li{ /* 吹き出しツノ */
    &:nth-child(odd) .timeline-text::before,
    &:nth-child(even) .timeline-text::before{
        content:"";
        background-color: #ddd;
        width:5%;
        height:25px;
        position: absolute;
        top:50%;
    }
    &:nth-child(odd) .timeline-text::before{ /* 奇数(右) */
        right:0;
        translate: 100% -50%;
        clip-path: polygon(100% 50%, 0 0, 0 100%);
    }
    &:nth-child(even) .timeline-text::before{ /* 偶数(左) */
        left:0;
        translate: -100% -50%;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }
}

.timeline-text-content{
    padding:30px 20px;
    & :where(h3,p){margin:0;}
    & p{margin-top:0.5em;}
    & span{font-weight: bold; text-decoration: underline;}
}

/* --------
president-message
-------- */
#president-message{
    padding:80px 0;
    & .sec-content-body{
        display: flex;
        flex-direction: row-reverse;
    }
}

#president-message .image-area{
    width:calc( 50% - 40px );
    margin-left:40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    & img{
        width:100%;
        border-radius: 25px;
    }
    & .name{
        margin-top:10px;
        & :where(p,h3){margin:0; display: inline-block;}
        & p{font-size:0.9rem;}
        & h3{font-size:1.6rem;}
    }
}

#president-message .text-area{
    width:50%;
    & p{
        margin:0;
        line-height: 1.75;
    }    
}

/* --------
employee-message
-------- */
#employee-message{
    padding:80px 0;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M27.26 5.415c-.55 0-.9.55-.65 1l2.45 4.75c.2.5.85.5 1.15.1l3.15-4.5c.3-.4 0-1.05-.55-1.1zM10.689 8.068c-.406-.051-.822.31-.778.748l.5 5.3c.05.5.6.8 1.05.5l4.55-3.05c.45-.3.4-.95-.05-1.15l-5.1-2.3a.605.605 0 0 0-.172-.048zM2.406 24.584a.635.635 0 0 0-.345.081l-4.75 2.4c-.45.2-.5.85-.1 1.15l4.45 3.15c.4.3 1 0 1.1-.5l.3-5.55c0-.412-.31-.712-.655-.73zm40 0a.635.635 0 0 0-.345.081l-4.75 2.4c-.45.2-.5.85-.1 1.15l4.45 3.15c.4.3 1 0 1.1-.5l.3-5.55c0-.412-.31-.712-.655-.73zm-22.17 3.108a.744.744 0 0 0-.675.723l.4 5.55c.05.5.6.8 1.05.5l4.45-2.95c.45-.25.4-.9-.05-1.15l-4.8-2.6a.702.702 0 0 0-.376-.073z'  stroke-width='1' stroke='none' fill='hsla(159, 52%, 38%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    & .sec-content-body{
        display: flex;
        flex-direction: column;
    }
}

.employee-item{
    width:100%;
    &:not(:first-child) .employee-item-content{margin:20px 0 0 0;}
}

.employee-item-content{
    padding:20px;
    border:#ccc solid 3px;
    border-radius: 10px;
    background-color: #fff;
}

.employee-item .name{
    & :where(p,h3){margin:0; display: inline-block;}
    & p{font-size:0.9rem;}
    & h3{font-size:1.4rem;}
}

.employee-item .text{margin-top:0.9rem;}

/*==============
SP
==============*/
@media screen and (max-width: 768px){
    /* ==============
    40周年メッセージ(40th.html)
    ============== */
    /* MV */
    #Fortyth-Page #mainvisual-page .page-title .en{margin-bottom:10px;}

    /* --------
    top-message
    -------- */
    #top-message{
        margin:60px 0 40px;
        background-size:90%;
    }

    #top-message .image-area{
        & img{width:80%;}
        & p{letter-spacing: 1.5px;}
    }
    
    #top-message .text-area{
        padding:20px 0 0;
        line-height: 1.75;
        & br{display: block;}
    }

    /* --------
    fortyth-history
    -------- */
    #fortyth-history{padding:60px 0 0;}
    
    .fortyth-timeline{
        padding:60px 0 100px;
        & .timeline{
            &::after{ /* 縦線 */
                left:5%;
                translate: 0;
            }
            & li{
                margin-bottom:120px; /* 間隔 */
                &:first-child::before,
                &:last-child::after{ /* 縦線(はみ出し) */
                    left:5%;
                }
                &:first-child::before{translate: 0 -100%;}
                &:last-child::after{translate: 0 25%;}
            }
        }
    }

    /* ● */
    li .timeline-dot{
        left:5.25%;
        translate: -50% -50%;
    }

    /* ふきだし */
    li .timeline-text{width:85%;}
    li:nth-child(odd) .timeline-text{left:auto; right:0;}
    li:nth-child(even) .timeline-text{right:0;}

    .timeline li:nth-child(odd) .timeline-text::before,
    .timeline li:nth-child(even) .timeline-text::before{ /* 吹き出しツノ */
        width:5%;
        height:25px;
    }
    .timeline li:nth-child(odd) .timeline-text::before{ /* 奇数(右) */
        right:auto;
        left:0;
        translate: -100% -50%;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .timeline-text-content{padding:20px 20px;}

    /* --------
    president-message
    -------- */
    #president-message{
        padding:60px 0 40px;
        & .sec-content-body{flex-direction: column;}
    }

    #president-message .image-area{
        width:100%;
        margin-left:0;
        margin-bottom:40px;
        & img{
            max-width:400px;
            width:100%;
            max-height:500px;
            height:100%;
            object-fit: cover;
            object-position: center 10%;
            margin:auto;
        }
        & .name{margin:10px auto 0;}
    }

    #president-message .text-area{
        width:100%;
        & p{margin:0 40px;}
    }

    /* --------
    employee-message
    -------- */
    #employee-message{padding:40px 0;}
    .employee-item-content{padding:20px 25px;}
}/* SP(中) end */

/*==============
より小さい場合
==============*/
@media screen and (max-width: 410px){
    /* ==============
    40周年メッセージ(40th.html)
    ============== */
    /* MV */
    #Fortyth-Page #mainvisual-page .page-title .en{font-size: 2.25rem;}

    /* --------
    top-message
    -------- */
    #top-message{
        margin:40px 0 40px;
        background-size:95%;
        height:60vh;
    }

    #top-message .image-area{
        & img{width:85%;}
        & p{font-size:1.65rem;}
    }

    #top-message .text-area{
        padding:5px 0 0;
        font-size: 1rem;
    }

    /* --------
    fortyth-history
    -------- */
    #fortyth-history{padding:40px 0 0;}

    .fortyth-timeline{
        padding:60px 0 80px;
        & .timeline{
            &::after{ left:2.5%; } /* 縦線 */
            & li{
                margin-bottom:120px; /* 間隔 */
                &:first-child::before,
                &:last-child::after{left:2.5%;} /* 縦線(はみ出し) */
            }
        }
    }

    /* ● */
    li .timeline-dot{
        width:20px;
        height:20px;
        left:3.5%;
    }

    /* ふきだし */
    li .timeline-text{width:85%;}
    .timeline-text-content{
        padding:15px;
        & h3{font-size:1.125rem;}
        & p{font-size:0.9rem;}
    }

    /* --------
    president-message
    -------- */
    #president-message .image-area{
        & img{
            max-height:240px;
            object-position: center 10%;
        }
        & .name{
            margin-top:10px;
            & :where(p,h3){margin:0; display: inline-block;}
            & p{font-size:0.9rem;}
            & h3{font-size: 1.4rem;}
        }
    }

    #president-message .text-area{ & p{margin:0 20px;} }

    /* --------
    employee-message
    -------- */
    .employee-item-content{padding:20px;}
    .employee-item:not(:first-child) .employee-item-content{margin:15px 0 0 0;}
    .employee-item .name{ & h3{font-size:1.25rem;} }

}/* SP(小) end */