@import url("slick.css");
@import url("otherphot.css");
@import url("main-photo.css");
@import url("infobox.css");
@import url("slide.css");
@import url("customer.css");
@import url("reset.css");
@import url("icon.css");
@import url("nav.css");
@import url("animation.css");
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');

html {
    overflow-x: hidden;
}

body {
    /*background-image: url("/img/haikei5.jpg");*/
    background-color: rgba(78, 252, 212, 0.1);
    background-size: cover;
    background-position: center;
    width: 100%;

    color: rgb(37, 40, 46);
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-weight: bold;
    /* bodyエリアの余白を消す */
    margin: 0;
}

header {
    background-image: url("/img/header04.jpg");
    position: fixed;
    top: -200px;
    transition: top 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    z-index: 4;
    width: 100%;

    font-family: 'Georgia', sans-serif;
    color: rgb(255, 255, 255);

    /* 標準 */
    grid-row: 1;
    grid-column: 1/5;

}

header.show {
    top: 0;
}

h1 {
    margin: 4vh 5vh;
    font-size: calc(15px + 15 * (90vw - 10px)/400);
}

main {

    /* 標準 */
    grid-row: 3;
    grid-column: 1/4;

}

.sideBar {

    /* 標準 */
    grid-row: 3/4;
    grid-column: 4/5;
}

footer {
    background-color: rgba(255, 255, 255, 0.2);

    /* 標準 */
    grid-row: 4;
    grid-column: 1/5;

    padding-left: 20px;
}

.wave-gradation {
    position: relative;
    display: block;
    overflow: hidden;
    background: linear-gradient(to bottom, rgb(255, 222, 113, 0) 0%, rgba(255, 255, 255, 0) 100%);
}

.wave-text {
    background-image: url("/img/wave_0621.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    /* relativeでもOK */
    padding: 10px 10px;
    /* 上下左右の余白 */
    color: rgb(39, 39, 39);
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 11px;
    font-weight: bold;
    opacity: 0;
    animation: fadeInBg 1.5s ease-out forwards;
}

.wave-gradation .wave-text h2 {
    font-size: 3em;
    text-align: center;
}

.wave-gradation .wave-text h3 {
    font-size: 3em;
    text-align: center;
}

.photoArea {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列に分割 */
    gap: 10px;
    /* 写真の間隔 */
    margin: 0 auto;
    padding: 2vw;
    /*background-color: rgb(255, 222, 113);*/

    /* 標準 */
    grid-column: 1/5;
}

.photoArea img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}

.main-content0 {
    display: block;
    padding-top: 2vh;
    margin: 0;
}

.main-content1 {
    display: flex;
    /*background-color: rgba(252,252,252,0.3);*/
    padding-top: 5px;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-right: 2vw;
    margin-left: 1vw;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;

}

.main-content2 {
    display: flex;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2vw;
    margin-right: 1vw;
    padding: 10px;
    border-radius: 10px;
}

.main-content3 {
    display: flex;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2vw;
    margin-right: 1vw;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .3);
}

.main-content4 {
    display: block;
    background-color: rgba(252, 252, 252, 0.3);
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2vw;
    margin-right: 1vw;
    padding: 10px;
    border-radius: 10px;
}

.main-content5 {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 10px;
}

.cus {
    display: flex;
}

.cusimg {
    display: block;
    height: 100px;
    width: 100px;
    background-image: url("/img/cust.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

.custex {
    display: block;
    line-height: 100px;
}

.border {
    border: solid;
    border-width: thin;
    color: rgb(151, 151, 151);
}

.main-content4 a {
    color: #363535;
    text-decoration: underline dashed rgba(78, 78, 78, 0.493);
    margin-left: 2vw;
    display: block;
    font-size: 15px;
    font-weight: bold;
}

.main-content4 p {
    color: #363535;
    margin-left: 2vw;
    display: block;
    font-size: 15px;
    font-weight: bold;
}

.main-content4 a:hover {
    color: #9fb2b6;
    text-decoration: underline dashed #9fb2b6;
}

.main-content5 {
    display: block;
    background-color: rgba(252, 252, 252, 0.3);
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2vw;
    margin-right: 1vw;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.rogo-h {
    display: flex;
    align-items: center;
    /* 縦中央 */
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.rogo-h img {
    width: 85px;
    height: auto;
    margin: 20px;
}

.rogo-h h1 {
    margin-left: 0;
    justify-content: center;
    /* 横中央 */
    margin-top: 30px;
    padding: 0;
}

.content-title {
    color: rgb(44, 44, 44);
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 25px;
    font-weight: bold;
}

.main-content-title {
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-weight: bold;
    font-size: 45px;
}

.main-content-text {
    margin-left: 1vw;
    margin-right: 1vw;
}

.main-content-text-center {
    margin-left: 1vw;
    margin-right: 1vw;
    text-align: center;
}

.main-content-text-right {
    margin-left: 1vw;
    margin-right: 1vw;
    text-align: right;
}

.main-content-text h2 {
    color: rgb(44, 44, 44);
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 35px;
}

.main-content-text h3 {
    color: rgb(44, 44, 44);
    font-weight: bold;
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 30px;
}

.white-b {
    color: rgb(255, 255, 255);
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 35px;
}

.black-b {
    font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-size: 35px;
}

.main-content-sns img {
    width: 25%;
    text-align: center;
    border-radius: 10px;
}

.rogo-img {
    width: 200px;
    background-image: url(../rogo_en.png);
}

summary {
    position: relative;
    display: flex;
    /* 矢印を消す */
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
    /* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

/* オープン時 */
details[open] summary:after {
    transform: rotate(90deg);
    /* 90度回転 */
    left: 1.2em;
    top: 0.5em;
}

details {
    display: block;
    /* ← Flexではなく block に */
    background-color: rgba(255, 255, 255, 0.3);
    padding: 10px;
    margin: 2vw;
    border-radius: 10px;
}

summary {
    display: flex;
    /* 質問部は横並び */
    align-items: center;
    cursor: pointer;
}

.anstext {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.qicon,
.ansimg {
    width: 8vh;
    /* ← お好みで。たとえば16px, 20pxなども可 */
    height: auto;
    flex-shrink: 0;
}

.qtext {
    margin-left: 10px;
}

.ans {
    margin-left: 10px;
}


.qa-title {
    font-size: 25px;
    color: rgb(44, 44, 44);
}

.side-content {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding-top: 5px;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-right: 2vw;
    margin-left: 1vw;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    min-width: 150px;
}

.side-content p {
    font-weight: bold;
}

footer li {
    list-style: none;
}

footer li a {
    color: #333;
    text-decoration: underline dashed rgba(0, 0, 0, 0.493);
    padding-top: 1px;
    padding-bottom: 1px;
    display: block;
    font-size: 15px;
    font-weight: bold;
}

footer li a:hover {
    color: #9fb2b6;
    text-decoration: underline dashed #9fb2b6;
}

p {
    line-height: 1.8;
}

s {
    border: double;
}

/* PC表示時（幅768px以上）のみ、7枚目以降を非表示 */
@media screen and (min-width: 768px) {
    .photoArea img:nth-of-type(n+4) {
        display: none;
    }
}

@media screen and (max-width: 959px) {
    /* 959px以下に適用されるCSS（タブレット用） */

    p {
        font-size: 20px;
    }

    header {
        /* 標準 */
        grid-row: 1;
        grid-column: 1/5;
    }

    h1 {
        margin: 3vh 5vh;
        font-size: calc(25px + 15 * (90vw - 10px)/400);
    }

    main {
        /* 標準 */
        grid-row: 3;
        grid-column: 1/5;
    }

    .sideBar {
        /* 標準 */
        grid-row: 4;
        grid-column: 1/5;
    }

    footer {
        /* 標準 */
        grid-row: 5;
        grid-column: 1/5;
    }

    .photoArea {
        /* 標準 */
        grid-column: 1/5;
    }

    .main-content-text h2 {
        font-size: 35px;
    }

    .main-content1 {
        display: block;
        padding-top: 5px;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-right: 2vw;
        margin-left: 1vw;
        padding-left: 5px;
        padding-right: 5px;
    }

    .main-content2 {
        display: flex;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-left: 2vw;
        margin-right: 1vw;
        padding: 10px;
        border-radius: 10px;
    }

    .main-content-sns img {
        width: 40%;
        text-align: center;
        border-radius: 10px;
    }

    .content-title {
        color: rgb(44, 44, 44);
        font-size: 25px;
    }

    .main-content-title {
        font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
        font-weight: bold;
        font-size: 45px;
    }

    .main-content-text {
        margin-left: 1vw;
        margin-right: 1vw;
    }

    details {
        font-size: 1.2em;
    }

    .side-content {
        background-color: rgba(255, 255, 255, .3);
        border-radius: 10px;
        padding-top: 5px;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-right: 2vw;
        margin-left: 1vw;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        min-width: 150px;
    }

    footer li a {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 14px;
    }

    footer {
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */

    p {
        font-size: 13px;
    }

    header {
        /* 標準 */
        grid-row: 1;
        grid-column: 1/5;
    }

    h1 {
        margin: 2vh 5vh;
        font-size: calc(23px + 15 * (90vw - 10px)/400);
    }

    main {
        /* 標準 */
        grid-row: 3;
        grid-column: 1/5;
    }

    .sideBar {
        /* 標準 */
        grid-row: 4;
        grid-column: 1/5;
    }

    footer {
        /* 標準 */
        grid-row: 5;
        grid-column: 1/5;
    }

    .photoArea {
        /* 標準 */
        grid-column: 1/5;
    }

    .main-content-text h2 {
        font-size: 30px;
    }

    .main-content1 {
        display: block;

    }

    .white-b {
        font-size: 20px;
    }

    .black-b {
        font-size: 20px;
    }

    .main-content2 {
        display: flex;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-left: 2vw;
        margin-right: 1vw;
        padding: 10px;
        border-radius: 10px;
    }

    .rogo-h h1 {
        margin-left: 0;
        margin-top: 25px;
        padding: 0;
    }

    .rogo-h img {
        width: auto;
        height: 55px;
        margin: 16px;
    }

    .content-title {
        color: rgb(44, 44, 44);
        font-size: 20px;
    }

    .main-content-text {
        margin-left: 3vw;
        margin-right: 1.5vw;
    }

    .wave-text {
        font-size: 3.1vw;
    }

    .large {
        font-size: large !important;
    }

    .large-01 {
        font-size: 3.7vw !important;
    }

    .large-02 {
        font-size: 4.0vw !important;
    }

    .main-content-title {
        font-family: 'Georgia', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
        font-weight: bold;
        font-size: 45px;
    }

    .side-content {
        background-color: rgba(255, 255, 255, .3);
        border-radius: 10px;
        padding-top: 5px;
        margin-top: 2vw;
        margin-bottom: 2vw;
        margin-right: 2vw;
        margin-left: 1vw;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        min-width: 150px;
    }

    footer li a {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 12px;
    }

    footer {
        font-size: 10px;
    }
}