@charset "utf-8";

/* google font */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

/* 初期設定 */
html {
    font-size: 100%;
}

body {
    background-color: #fff;
    color: #484848;
}

ul,
dl,
ol {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #484848;
}

.wrapper {
    width: 1100px;
    margin: 0 auto;
}


/* ヘッダー */
#header-in {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.header-sub {
    background-color: #ccc;
}

/* ロゴ */
#header-in .logo {
    width: 100px;
}

/* 電話のアイコン */
#address .tel {
    font-size: 2rem;
    line-height: 1.5;
}

#address .tel::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 1.5rem;
    background-image: url(../img/icon-tel.png);
    background-position: center;
    background-size: contain;
    margin-right: 10px;
}

/* メールのアイコン */
#address .mail {
    font-size: 1rem;
}

#address .mail::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1rem;
    background-image: url(../img/icon-mail.png);
    background-position: center;
    background-size: contain;
    margin-right: 10px;
}

/* メインビジュアル */
#mainvisual {
    height: 400px;
    position: relative;
}

#mainvisual .main-logomark {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 中央配置の補正 */
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* ヘッダーの背景ループ */
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    height: 380px;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

.scroll-infinity__item {
    /* width: calc(100vw / 1.6); */
    min-width: 1200px;
    margin-left: -180px;
}

.scroll-infinity__item>img {
    width: 100%;
    height: 380px;
    object-fit:contain;
    /* object-fit: cover; */
}



/* グローバルナビ */
#g-nav {
    border-bottom: solid 4px #663366;
}

#g-nav ul {
    display: flex;
    justify-content: space-between;
    align-items: end;
    list-style: none;
    padding-top: 20px;
}

#g-nav li {
    font-size: 1.25rem;
    min-width: 128px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    position: relative;
}

#g-nav li a {
    padding-left: 31px;
    height: 40px;
    line-height: 40px;
    position: relative;
    color: #663366;
}

#g-nav li a::before {
    content: url(../img/nav-over.png);
    position: absolute;
    top: -3px;
    left: 0;
    opacity: 0;
}

#g-nav li a:hover::before {
    opacity: 1;
    transition: .5s;
}

/* サブページのナビのcurrent設定 */
#g-nav .current {
    background-image: url(../img/nav-current.png);
}

#g-nav .current::before {
    content: "▲";
    font-size: 50px;
    color: #E0D6E0;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%);
}

#g-nav .current span {
    display: block;
    font-size: 1.5rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #663366;
    font-weight: bold;
    position: absolute;
    top: 90px;
    left: -50px;
    width: 220px;
}

/* トップページだけのナビ設定 */
#index-page #g-nav .current {
    background-image: none;
}

#index-page #g-nav .current::before {
    content: "";
}

#index-page #g-nav .current span {
    display: none;
}

/* サブページのページタイトル */
#page-title {
    background-color: #E0D6E0;
    border-radius: 20px;
    margin: 38px auto 100px;
    height: 160px;
    padding: 30px 20px;
    width: 98%;
}

#page-title img {
    width: 400px;
}

/* サブページタイトル pc版では非表示 */
#page-title p {
    display: none;
}

/* セクションタイトル */
.section-title {
    text-align: center;
    margin-bottom: 30px;
}

h2 {
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 10px;
}

/*===== フッター =====*/
footer {
    background-color: #484848;
    color: #fff;
    padding: 30px 0;
}

footer a {
    color: #fff;
}

#footer-in {
    display: flex;
    justify-content: space-between;
}

/* フッターナビ */
#footer-nav {
    display: flex;
    list-style: none;
}

#footer-nav li {
    margin: 0 10px;
}

#footer-nav li::before {
    content: "|";
    padding-right: 10px;
}

#footer-nav li:last-child::after {
    content: "|";
    padding-left: 10px;
}

#footer-nav a:hover {
    color: #f1c182;
}

/* 社名 */
#company {
    font-size: 0.875rem;
}

.company {
    font-size: 1.125rem;
    font-weight: bold;
}

/* コピーライト */
.copyright {
    font-size: 0.75rem;
    text-align: center;
    padding-top: 30px;
}

/* トップへ戻るボタン */
#pagetop {
    background-color: rgba(102, 51, 102, 0.7);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    line-height: 32px;
    transform: rotate(-90deg);
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
    cursor: pointer;
}

/*====================*/
/* レスポンシブ */
/*====================*/
@media screen and (max-width:1100px) {

    /* 枠の設定 */
    .wrapper {
        width: 90%;
    }

    /* メインビジュアル */
    #mainvisual .main-logomark img {
        width: 60%;
        height: auto;
    }

    /* 背景ループの高さを300pxに */
    #mainvisual {
        height: 300px;
    }

    .scroll-infinity__wrap {
        height: 300px;
    }

    .scroll-infinity__item {
        /* width: calc(100vw / 1); */
        min-width: 1000px;
        margin-left: -250px;
    }

    .scroll-infinity__item>img {
        height: 300px;
    }

    /*===== フッター =====*/
    #footer-in {
        flex-direction: column;
    }

    /* フッターナビ */
    #footer-nav {
        flex-direction: column;
    }

    #footer-nav {
        list-style-type: disc;
        padding-left: 10px;
        margin-left: 20px;
    }

    #footer-nav li::before {
        content: "";
    }

    #footer-nav li:last-child::after {
        content: "";
    }

    /* 社名 */
    #company {
        margin-top: 50px;
        margin-left: auto;
    }
}

@media screen and (max-width:767px) {

    /* ヘッダー */
    #header-in {
        flex-direction: column;
    }

    /* ロゴ */
    #header-in .logo {
        width: 80px;
        margin-bottom: 20px;
    }

    #mainvisual .main-logomark img {
        width: 100%;
        height: auto;
    }

    /* 背景ループの高さを380pxに */
    #mainvisual {
        height: 380px;
    }

    .scroll-infinity__wrap {
        height: 380px;
    }

    .scroll-infinity__item {
        width: calc(100vw / 0.5);
    }

    .scroll-infinity__item>img {
        height: 380px;
    }

    #address{
        margin: 0 auto;
    }

    /* 電話のアイコン */
    #address .tel {
        line-height: 1;
    }

    /* メインビジュアルのロゴマーク */
    #mainvisual .main-logomark {
        flex-direction: column;
    }

    /* サブページのページタイトル */
    #page-title {
        height: 100%;
    }

    /* サブページタイトル sp版のみ表示 */
    #page-title p {
        display: block;
        color: #663366;
        text-align: center;
        padding-top: 50px;
        font-family: "M PLUS Rounded 1c", sans-serif;
    }

    /* グローバルナビ */
    #g-nav {
        border-bottom: none;
        background-color: rgba(102, 51, 102, 0.9);
        color: #fff;
    }

    #g-nav ul {
        flex-direction: column;
        align-items: start;
        padding-left: 20px;
    }

    #g-nav li {
        padding-left: 50px;
    }

    #g-nav li a {
        color: #fff;
    }

    #g-nav li a span {
        color: #fff;

    }

    #g-nav li a::before {
        content: "";
    }

    #g-nav .current {
        background-image: url(../img/nav-current_sp.png);
        /* width:50px; */
        height: 30px;
        background-size: contain;
        padding-left: 40px;
        margin: 20px 0;
    }

    #g-nav .current::before {
        content: "";
    }

    #g-nav .current span {
        color: #fff;
        position: static;
        width: fit-content;
        padding-left: 20px;
    }

    /* トップページだけのナビ設定 */
    #index-page #g-nav .current {
        background-image: url(../img/nav-current_sp.png);
    }

    #index-page #g-nav .current span {
        display: block;
    }

    #index-page #g-nav img {
        display: none;
    }

    /*-------------------------------------------
  ハンバーガーメニュー 追加
  -------------------------------------------*/
    .btn-nav {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 24px;
        z-index: 6;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transition: all 400ms;
        transition: all 400ms
    }

    .btn-nav span {
        position: absolute;
        width: 30px;
        height: 4px;
        background: #000;
        border-radius: 10px;
        -webkit-transition: all 400ms;
        transition: all 400ms
    }

    /* 三本線の設定 */
    .btn-nav span:nth-child(1) {
        top: 0;
    }

    .btn-nav span:nth-child(2) {
        top: 10px;
    }

    .btn-nav span:nth-child(3) {
        top: 20px;
    }

    /* クリックされた時の設定 */
    .btn-nav.open {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .btn-nav.open span {
        background: #fff;
    }

    .btn-nav.open span:nth-child(1) {
        width: 24px;
        -webkit-transform: translate(-5px, 18px) rotate(45deg);
        transform: translate(-5px, 19px) rotate(45deg)
    }

    .btn-nav.open span:nth-child(3) {
        -webkit-transform: translate(-7px, -17px) rotate(-45deg);
        transform: translate(-8px, -19px) rotate(-45deg)
    }

    #g-nav {
        position: fixed;
        top: 0;
        right: -390px;
        width: 390px;
        height: 100%;
        padding-top: 50px;
        font-size: 16px;
        box-sizing: border-box;
        z-index: 5;
    }

}