@charset "utf-8";
/*-------------全体背景カラー------------------------*/

.greeting {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    background-color: white;
    box-sizing: border-box;
}

.rco-photo {
    width: 30vw;
    margin: 5vw 1vw 0;
}

.rco-photo img {
    width: 30vw;
    border-radius: 1vw;
}

.main-text {
    width: 62vw;
    margin: 0 1vw 0;
}

/*-------
「ようこそ福知山駐屯地～」タイトル部分
------*/
.text01 {
    margin: 1vw 0 1vw;
    font-size: 2.5vw;
    font-family: 'hiraginokakugoW7';
}

/*------
本文設定
------*/
.text02 {
    font-size: 1.4vw;
    margin: 0 0 1em 1vw;
    text-indent: 1em;
    line-height: 1.6;
}

.text03 {
    margin: 2vw 5em 0 0;
    text-align: right;
    font-size: 1.6vw;
    font-weight: bold;
}

.text04 {
    margin: 0 0 3vw;
    text-align: right;
    font-size: 1.8vw;
    font-weight: bold;
}

#footer {
    width: 100vw;
    position: absolute;
    bottom: 0;
}

.border-line {
    height: .5vw;
    background: linear-gradient(to right, rgba(100, 100, 255, 0), rgba(100, 100, 255, 1), rgba(100, 100, 255, 0));
}

.rco-prof>dt:nth-of-type(1) {
    text-align: center;
    font-weight: bold;
    font-size: 2vw;
    margin-bottom: 2vw;
}

.rco-01,
.rco-02 {
    font-size: 1.4vw;
    line-height: 1.5;
    width: 16em;
    margin: 0 auto;
}

.rco-02 {
    margin-bottom: 1vw;
}

.rco-prof dd {
    display: flex;
}

.rco-prof dd>span {
    font-size: 1.4vw;
    line-height: 2;
}

.rco-prof dd>span:nth-of-type(1) {
    width: 8vw;
}

.rco-prof dd>span:nth-of-type(2) {
    width: 42vw;
}

/*--------------------------------------------------------------------------------
　最大サイズ到達時に適用
----------------------------------------------------------------------------------*/
@media screen and (min-device-width: 1040x) {
    .greeting {
        width: 1000px;
        padding: 20px;
    }

    .rco-photo {
        width: 297px;
        margin: 39px 7.8px 0;
    }

    .rco-photo img {
        width: 297px;
        border-radius: 7.8px;
    }

    .main-text {
        width: 620px;
        margin: 0 10px 0;
    }

    /*-------
    「ようこそ福知山駐屯地～」タイトル部分
    ------*/
    .text01 {
        margin: 10px 0 7.8px;
        font-size: 25px;
    }

    /*------
    本文設定
    ------*/
    .text02 {
        font-size: 14px;
        margin: 0 0 0 10px;
    }

    .text03 {
        margin: 20px 5em 0 0;
        font-size: 16px;
    }

    .text04 {
        margin: 0 0 30px;
        font-size: 18px;
    }

    .border-line {
        height: 4px;
    }

    .rco-prof>dt:nth-of-type(1) {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .rco-01,
    .rco-02 {
        font-size: 14px;
    }

    .rco-02 {
        margin-bottom: 10px;
    }

    .rco-prof dd>span {
        font-size: 14px;
    }

    .rco-prof dd>span:nth-of-type(1) {
        width: 80px;
    }

    .rco-prof dd>span:nth-of-type(2) {
        width: 400px;
    }
}

/*--------------------------------------------------------------------------------
　最大サイズ到達時に適用
----------------------------------------------------------------------------------*/
@media screen and (min-device-width: 1921px) {
    .greeting {
        width: 1280px;
        padding: 25px;
    }

    .rco-photo {
        width: 380px;
        margin: 50px 10px 0;
    }

    .rco-photo img {
        width: 380px;
        border-radius: 10px;
    }

    .main-text {
        width: 793.6px;
        margin: 0 12.8px 0;
    }

    /*-------
    「ようこそ福知山駐屯地～」タイトル部分
    ------*/
    .text01 {
        margin: 12.8px 0 10px;
        font-size: 32px;
    }

    /*------
    本文設定
    ------*/
    .text02 {
        font-size: 18px;
        margin: 0 0 0 12.8px;
    }

    .text03 {
        margin: 25.6px 5em 0 0;
        font-size: 20.48px;
    }

    .text04 {
        margin: 0 0 38.4px;
        font-size: 23px;
    }

    .border-line {
        height: 5px;
    }

    .rco-prof>dt:nth-of-type(1) {
        font-size: 25.6px;
        margin-bottom: 25.6px;
    }

    .rco-01,
    .rco-02 {
        font-size: 17.92px;
    }

    .rco-02 {
        margin-bottom: 12.8px;
    }

    .rco-prof dd>span {
        font-size: 17.92px;
    }

    .rco-prof dd>span:nth-of-type(1) {
        width: 102.4px;
    }

    .rco-prof dd>span:nth-of-type(2) {
        width: 512px;
    }
}