* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    border: 0;
    font-family: 'Times New Roman', Times, serif;
    color: #b3b386;
}

ul {
    list-style: none;
}

.container-fluid {
    padding: 50px;
}

/* ↓ローディング画面 */
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: #9a9a79;
    text-align: center;
    color: #fff;
}

#splash-logo {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#splash-logo img {
    width: 90vw;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ↑ローディング画面 */
.top-wrapper {
    position: relative;
    background-image: url(../images-under-sm/top-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100vw;
    height: 1106px;
}

.top-area {
    position: absolute;
    top: 35%;
    left: 50px;
}

.top-area p {
    font-size: 8vw;
    line-height: 11.3vw;
    margin-bottom: 7vw;
}

.top-area span {
    font-size: 12.8vw;
}

#g-nav a {
    color: #b3b386;
    text-decoration: none;
}

/* ↓ハンバーガーメニュー */
@media(max-width:767px) {
    .openbtn {
        position: relative;
        width: 9.3vw;
        height: 9.3vw;
    }

    .openbtn span {
        display: inline-block;
        transition: all 0.4s;
        position: absolute;
        left: 0;
        height: 5px;
        background-color: #ffffbf;
        z-index: 2;
    }

    .openbtn span:first-child {
        top: 0;
        width: 9.3vw;
    }

    .openbtn span:last-child {
        top: 4.2vw;
        width: 5.3vw;
    }

    /* ボタン変形 */
    .openbtn.active span:first-child {
        transform: translateY(2vw) rotate(45deg);
    }

    .openbtn.active span:last-child {
        transform: translateY(-2vw) rotate(-45deg);
        width: 100%;
    }

    /* ボタン変形ここまで */

    .accordion-area {
        width: 80%;
        margin-bottom: 0;
    }

    .g-nav-list li span {
        font-size: 9.6vw;
    }

    .Works {
        position: relative;
    }

    .Works::before,
    .Works::after {
        content: "";
        position: absolute;
        width: 4vw;
        height: 0.6vw;
        background-color: #b3b386;
    }

    .Works::before {
        top: 8vw;
        left: 30vw;
        transform: rotate(0deg);
    }

    .Works::after {
        top: 8vw;
        left: 30vw;
        transform: rotate(90deg);
    }

    /* ボタン変形 */
    .Works.close-btn::after {
        background-color: transparent;
    }

    /* ボタン変形ここまで */
    li {
        margin-top: 25px;
    }

    .box a {
        padding-left: 13vw;
        padding-top: 40px;
        font-size: 6.4vw;
        display: block;
    }

    .box {
        display: none;
    }

    #g-nav {
        background-color: #fad8de;
        padding-left: 50px;
        padding-top: 130px;
        width: 100%;
        height: 1106px;
        position: fixed;
        top: 0;
        left: -200%;
        z-index: 1;
        transition: all 0.6s;
    }

    .g-nav-list {
        height: 100%;
        overflow: auto;
    }

    #g-nav.panelactive {
        left: 0;
    }
}

/* ハンバーガーメニューここまで */

h2 {
    font-size: 9.6vw;
    text-shadow: 2px 2px 6px #9a9a79;
}

.site h3 {
    font-size: 6.4vw;
}

main {
    text-align: center;
}

.demo-list p {
    font-size: 5.3vw;
    font-weight: bold;
}

.head-border {
    display: flex;
    align-items: center;
}

.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #b3b386;
}

.head-border:before {
    margin-right: 1rem;
}

.head-border:after {
    margin-left: 1rem;
}

.head-short-boder {
    position: relative;
    display: inline-block;
    padding: 0 35px;
    margin-bottom: 1vw;
    margin-top: 3vw;
}

.head-short-boder:before,
.head-short-boder:after {
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: #b3b386;
}

.head-short-boder:before {
    left: 0;
}

.head-short-boder:after {
    right: 0;
}

.contents-area {
    padding-top: 7vw;
}

.row {
    position: relative;
}

.pc-md {
    display: none;
}

.coment {
    padding-top: 10vw;
}

.coment p {
    text-align: left;
    color: black;
    font-size: 4.8vw;
    word-break: break-all;
}

.coment p:nth-child(2) {
    padding-top: 6.5vw;
}

img {
    width: 100%;
}

@media(max-width:767px) {
    .head-short-boder {
        font-size: 5vw;
    }

    .site img {
        padding-top: 13vw;
        width: 100%;
    }

    .top-sakura {
        position: absolute;
        top: 5vw;
        right: 0;
        z-index: -1;
        width: 35vw;
    }

    .middle-sakura {
        position: absolute;
        top: 30vw;
        left: 3vw;
        z-index: -1;
        width: 26vw;
    }

    .under-sakura {
        position: absolute;
        top: 125vw;
        right: 5vw;
        z-index: -1;
        width: 16.6vw;
    }
}

footer {
    height: 15vw;
    background-color: #fad8de;
}

footer p {
    font-size: 4.8vw;
    text-align: center;
    line-height: 15vw;
}

.modal-dialog {
    font-size: 22px;
}

.modal-dialog p {
    color: black;
    margin: 0 0 4vw 0;
}

.modal-body {
    padding: 8vw 1rem 8vw 1rem;
}

.modal-body a {
    font-size: 30px;
    text-decoration: underline;
}

.modal-header {
    flex-grow: 1;
}

.modal-title {
    margin: 0 auto;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
.close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

.trip-modal-header {
    background-color: #b8e9f1;
}

.trip-modal-title {
    color: #f5a500;
}

.gourmet-modal-header {
    background-color: #a87144;
}

.gourmet-modal-title {
    color: #f6dfc5;
}

.portfolio-modal-header {
    background-color: #fad8de;
}

.portfolio-modal-title {
    color: #b3b386;
}

.hospital-modal-header {
    background-color: #309aaa;
}

.hospital-modal-title,
.shrine-modal-title,
.jobbanner-modal-title {
    color: white;
}

.summer-trip-modal-header {
    background-color: #daf0f2;
}

.summer-trip-modal-title {
    color: #7fc5e3;
}

.shrine-modal-header {
    background-color: #b76a25;
}

.practice-modal-header {
    background-color: bisque;
}

.practice-modal-title {
    color: rgb(208, 145, 145);
}

.sale-modal-title {
    color: rgb(205, 31, 31);
}

.sale-modal-header {
    background-color: gold;
}

.newlife-modal-title {
    color: rgb(14, 14, 90);
}

.newlife-modal-header {
    background-color: rgb(234, 142, 234);
}

.goodtrip-modal-title {
    color: darkblue;
}

.goodtrip-modal-header {
    background-color: #93fff8;
}

.apperelbanner-modal-header {
    background-color: rgb(168, 152, 125);
}

.apperelbanner-modal-title {
    color: #283822;
}

.schoolbanner-modal-header {
    background-color: rgb(230, 44, 143);
}

.schoolbanner-modal-title {
    color: #0d606d;
}

.jobbanner-modal-header {
    background-color: #57d062;
}

.illustration-modal-header {
    background-color: #2c0a9c;
}

.illustration-modal-title {
    color: yellow;
}

.bakery-modal-title {
    color: #b76a25;
}

.bakery-modal-header {
    background-color: rgb(215, 173, 45);
}

.taiyaki-modal-title {
    color: antiquewhite;
}

.taiyaki-modal-header {
    background-color: #b74c28;
}

.camp-modal-header {
    background-color: #fedfe1;
}

.camp-modal-title {
    color: #656765;
}