@charset "utf-8";

/*------------------------------------------------------------
	emergency
------------------------------------------------------------*/
* {
    box-sizing: border-box;
}

#conts .sec01 .txt01 {
    margin-bottom: 40px
}

#conts .sec01 .headLine {
    margin-bottom: 30px;
    border-bottom: 5px solid #5fa5dc;
    color: #195b94;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#conts .sec01 .banner {
    display: block;
    margin: min(10.66vw, 40px) auto;
}

#conts .sec01 .banner img {
    width: 100%;
    height: auto;
}

#conts .sec01 .textUl {
    margin-bottom: 40px;
    font-size: min(3.73vw, 14px);
}

#conts .sec01 .textUl li {
    padding: 15px 0;
    border-bottom: .5px dotted var(--color-gray);
    position: relative;
}

#conts .sec01 .textUl li:last-child {
    border: none;
}

#conts .sec01 .textUl li span {
    padding-left: min(4.26vw, 16px);
    position: relative;
    display: block;

    &:before {
        content: "●";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--color-gold);
        display: inline-block;
    }
}

#conts .sec01 .borderBox {
    padding: min(8.53vw, 40px) min(4.26vw, 32px);
    border: 3px solid var(--color-gray-light02);
    font-size: min(3.73vw, 14px);
}

#conts .sec01 .borderBox ul {}

#conts .sec01 .borderBox ul li {
    margin-bottom: min(10.66vw, 40px);
    padding-bottom: min(10.66vw, 40px);
    border-bottom: .5px dashed var(--color-gray);
    display: flex;
    justify-content: space-between;

    .nagaokakyo p {
        background-color: var(--color-nagaokakyo);
    }

    .katsura p {
        background-color: var(--color-katsura);
    }

    .saiin p {
        background-color: var(--color-saiin);
    }

    &:last-child {
        border-bottom: 0;
    }
}

#conts .sec01 .borderBox ul li:last-child {
    margin-bottom: 0
}

#conts .sec01 .borderBox ul li .icon {
    width: 150px;
}

#conts .sec01 .borderBox ul li .icon p {
    width: 100%;
    padding: min(2.13vw, 8px);
    margin: 0 auto min(5.33vw, 20px);
    text-align: center;
    color: var(--color-white);
    border-radius: min(6.4vw, 24px);
}

#conts .sec01 .borderBox ul li .textBox {
    width: 70%;
}

#conts .sec01 .borderBox ul li .textBox .ttl {
    font-weight: 500;
    color: var(--color-gold-dark);
}

#conts .sec01 .borderBox ul li .textBox .txt {}

#conts .sec01 .borderBox ul li .textBox .link {
    width: 100%;
}

#conts .sec01 .borderBox ul li .textBox .link a {
    color: var(--color-gold-dark);
    text-decoration: underline;
    position: relative;
    padding-left: min(3.46vw, 14px);

    &:before {
        content: "▶";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        font-size: min(3.2vw, 12px);
    }
}

#conts .sec01 .borderBox ul li .textBox .link a:hover {
    text-decoration: none;
}


#conts .sec02 .borderBox {
    padding: min(8.53vw, 40px) min(4.26vw, 32px);
    border: 3px solid #c7d9e5;
    font-size: min(3.73vw, 14px);
}

#conts .sec02 .borderBox .photoBox {}

#conts .sec02 .borderBox .photoBox ul {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
}

#conts .sec02 .borderBox .photoBox ul li {}

#conts .sec02 .borderBox .photoBox ul li img {
    width: 100%;
}

#conts .sec02 .borderBox .textBox {
    p {
        margin-bottom: 24px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

#conts .sec02 .borderBox .textBox .txt {
    margin-bottom: 35px;
}

#conts .sec02 .borderBox .textBox .name {
    margin-top: min(10.66vw, 40px);
    padding-top: min(10.66vw, 40px);
    border-top: .5px solid var(--color-gray);
    text-align: center;
    font-weight: 500;
    font-family: var(--font-serif);
}

#conts .sec02 .borderBox .textBox .name span {
    font-size: min(5.33vw, 20px);
}


@media all and (min-width: 0) and (max-width: 767px) {

    #conts .sec01 .borderBox ul li {
        display: block;
    }

    #conts .sec01 .borderBox ul li .icon {
        width: 100%;
    }

    #conts .sec01 .borderBox ul li .textBox {
        width: 100%;
    }

    #conts .sec02 .borderBox .photoBox {}

    #conts .sec02 .borderBox .photoBox ul {
        margin-bottom: 50px;
        display: block;
    }

    #conts .sec02 .borderBox .photoBox ul li {
        width: 175px;
        margin: 0 auto 15px;
    }

    #conts .sec02 .borderBox .photoBox ul li img {
        width: 100%;
        height: auto;
    }

    #conts .sec02 .borderBox .textBox .txt {
        margin-bottom: 35px;
    }

    #conts .sec02 .borderBox .textBox .name {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
    }
}