@charset "UTF-8";

/* ページ全体設定関連 */
body {
    background-color: #F8F4E6;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.8;
    font-size: 18px;
    color: #3F342F;
}



img {
    width: 100%;
    border-radius: 30px;

}

/* 画像の縮小サイズ設定 */
.sm {
    max-width: 50%;
}


header {
    margin: 0 auto;
    padding: 10px;
}



.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;

}


h2 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}

/* 食べ物の見出しを調整する */

.FOODSec h2 {
    max-width: 700px;

}


/* 太文字設定 */
.fb {
    font-weight: bold;
}

.ct {
    text-align: center;
}

.setumei {
    margin-top: 20px;
}


/*ヘッダー設定 */

header {
    position: relative;

}



.header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

header .header_fixed {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}


header img {
    max-width: 150px;
}


/* nav ハンバーガー*/

.hamburger {
    display: block;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;

}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    list-style: none;
    padding: 100px 20px 20px;
    margin: 0;
    background-color: rgba(255, 255, 255);
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    z-index: 1000;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.menu.open {
    display: block;
    transform: translateX(0);
}

.menu li a {
    display: block;
    padding: 10px;
    color: #3F342F;
    text-decoration: none;
    margin-bottom: 10px;
}

.menu li a:hover {
    background-color: rgba(90, 124, 107, 0.2);
}

#hamburger {
    background-color: #979797;
    color: #FFFFFF;
    padding: 5px 20px;
    border-radius: 100px;


}

/* トップ画設定 */

.mainG {
    display: block;
    border-radius: 0;
    max-height: 70%;
    /* max-height: 700px; */

}

.tabG {
    display: none;
}

.mobG {
    display: none;
}


.topSec {
    margin-bottom: 100px;
}

.topcopy {
    max-width: 1200px;
    position: relative;
}

.topSec .copy1 {
    font-size: clamp(16px, 4vw, 48px);
    padding: 10px;
    background-color: rgba(90, 124, 107, 0.7);
    color: #fff;
    position: absolute;
    z-index: 50;
    top: 200px;
    left: 100px;
    padding: 20px;
}




.topSec .copy span {
    margin-right: 2px;
}


/* コンセプトセクション設定 */

.conseptSec .conseptSec_grid1 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    margin-bottom: 10px;

}


.flex1,
.flex2,
.flex3 {

    display: flex;
    justify-content: space-between;
}

.item1 {
    flex-grow: 1;
}

.item2 {
    width: 18rem;
    margin-left: 10rem;
}

.flex2,
.flex3 {
    align-items: flex-end;

}

.flex2 {
    margin-bottom: 50px;
}

.item4 {
    margin-left: 50%;

}

.flex3 {
    margin-bottom: 200px;
}


.conseptSec .textbox {
    margin-top: 50%;
}

.conseptSec .textbox p {

    margin-bottom: 50px;
    letter-spacing: 0.5em;
    line-height: 2.5;
}


.conseptSec .fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.conseptSec .fade-up-active {
    opacity: 1;
    transform: translateY(0);

}

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

/* フードセクション */
.FOODSec {
    margin-bottom: 200px;

}



.FOODSec h2 {
    margin-bottom: 50px;
}



.FOODSec .carousel {
    max-width: 800px;
    margin: 0 auto;

}

/* カルーセル内設定の強制書き換え */
.bx-wrapper {
    background-color: #F8F4E6 !important;
    box-shadow: none !important;
    border: none !important;
}

.FOODSec dt {
    padding: 50px;
    margin: 0 auto;

}

.FOODSec .fb {
    margin-bottom: 20px;
}

.FOODSec .slider {
    padding: 0;
    text-align: center;
}



/* 猫セクション */
.CATSec {
    margin-bottom: 200px;
    text-align: center;
}

.CATSec ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;


}

.CATSec dt {
    margin-bottom: 20px;

}

.CATSec dd .ct {
    margin-bottom: 20px;
}

.CATSec img {
    max-width: 500px;
    max-height: 1000px;
    border-radius: 300px 300px 20px 20px;
}

/* 注意書きセクション */
.attentionSec {
    margin-bottom: 200px;


}


.attentionSec div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;

}

/* 猫の餌セクション */
.CATfoodSec {
    margin-bottom: 100px;
}

.CATfoodSec div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
}

.CATfoodSec dt {
    margin-bottom: 15px;
}

.CATfoodSec .shadow {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 230px;
}




.parallax {
    width: 100%;
    height: 340px;
    background-image: url(../images/para.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}




/* 料金セクション */

.priceSec {
    background-color: #5A7C6B;
    border-radius: 20px;
    padding-bottom: 130px;
    margin-top: 100px;
    margin-bottom: 200px;


}

.priceSec h2 img {
    max-width: 75%;
    margin-top: 50px;
    margin-bottom: 0;
    margin-right: 40%;
    margin-left: 10%;
}


.priceSec .table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: solid 2px #5A7C6B;
    background-color: #F8F4E6;
    border-radius: 20px;
    max-width: 1000px;
    margin: 0 auto;




}

.priceSec .table dl {
    border-right: solid 2px #5A7C6B;
    text-align: center;
}

.priceSec .table dt {
    border-bottom: solid 2px #5A7C6B;
    padding: 20px;
}

.priceSec .table dd {
    padding: 20px;
}

.priceSec p {
    color: #fff;
    text-align: center;

}



/* マップセクション */

.mapSec {
    margin-bottom: 150px;
}

.mapSec_grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}


.mapSec .matomari {
    margin-bottom: 30px;
}

footer {
    padding: 20px;
    text-align: center;
    background-color: #5A7C6B;
    color: #fff;
}



/* 発表資料ページデザイン */

.hp_shiryou h1 {
    margin-top: 150px;
    margin-bottom: 100px;
    font-size: 40px;
    text-align: center;
}

.hp_shiryou h2 {
    margin-bottom: 50px;
    font-size: 20px;
    text-align: center;
}

.hp_shiryou .shiryouSec {
    margin-bottom: 100px;
}




/* レスポンシブデザイン */

@media (max-width:778px) {
    .container {
        margin: 0 auto;
    }


    img {
        margin-bottom: 0;

    }

    h2 {
        max-width: 500px;
        margin-bottom: 0;
    }

    h2 img {
        vertical-align: bottom;
    }


    .menu {
        padding: 50px 20px 20px;


    }


    .menu li a {
        padding: 2px;

    }


    .topSec .copy1 {
        display: none;
    }


    .topSec .copy1 {
        display: none;
    }

    .conseptSec h2 img {
        margin-bottom: 100px;
    }

    .item2,
    .item4,
    .item5 {
        display: none;
    }



    .conseptSec .textbox {
        margin-top: 0;
        text-align: center;
    }

    .conseptSec .conseptSec_grid1 {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        text-align: center;

    }

    .flex2,
    .flex3 {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        text-align: center;
    }


    .conseptSec img {
        /* width: 90%; */
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 150px;
        text-align: center;
    }



    .CATSec h2 img {

        margin-bottom: 100px;
    }

    .CATSec ul {
        display: block;
    }

    .CATSec li {
        margin-bottom: 100px;
    }

    .CATSec img {
        text-align: center;
        max-width: 100%;
        padding: 0 40px;
    }

    .CATfoodSec .shadow {
        box-shadow: none;

    }

    .CATfoodSec div {
        display: block;
        margin-bottom: 0;
    }

    .attentionSec {
        margin-bottom: 0;
    }

    .attentionSec div {
        display: block;
        padding: 10px;

    }

    .conseptSec .conseptSec_grid2 {
        display: block;
    }

    .mapSec_grid {
        display: block;



    }


    .attentionSec div {
        background-color: initial;

    }


    .attentionSec dl {
        background-color: #fff;
        border-radius: 30px;
        /* border-radius: 100px; */
        margin-bottom: 100px;
        padding: 40px;
        text-align: center;


    }



    .CATfoodSec div {
        background-color: initial;
        padding: 20px;

    }

    .CATfoodSec dl {
        margin-bottom: 100px;
        border-radius: 30px;
        padding: 20px;
        background-color: #fff;
    }


    .parallax {
        background-image: url(../images/para_tab.jpg);


    }

    .priceSec {
        margin-top: 10px;
    }



    .priceSec {
        padding-bottom: 50px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .priceSec .tablegp .table {
        display: block;
        max-width: 500px;
        margin: 0 auto;
        font-size: 30px;
        background-color: initial;



    }

    .priceSec .tablegp dl {
        padding: 10px;
        background-color: #F8F4E6;
        border-radius: 20px;
        margin-bottom: 30px;
    }

    .priceSec .table dt {
        padding: 10px;
    }

    .priceSec .table dd {
        padding: 10px;

    }

    .priceSec .tablegp {
        margin-bottom: 0 !important;
    }

    .mapSec h2 {
        margin-bottom: 100px;
    }

    .mapSec .mapSec_grid div {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 50px;
    }

    .sm {
        display: none;
    }

    .mainG {
        display: none;

    }

    .priceSec h2 img {
        margin: 0 auto 50px;
        display: block;
    }

    .tabG {
        display: block;
        border-radius: 0;
    }

    .mobG {
        display: none;
    }

}

@media (max-width:440px) {

    .parallax {
        background-image: url(../images/para_mob3.jpg);
        background-attachment: scroll;
    }
}

@media (max-width:376px) {

    /* .attentionSec div 
{
    padding: 10px !important;
} */




    .mainG {
        display: none;

    }

    .tabG {
        display: none;
    }

    .mobG {
        display: block;
        border-radius: 0;
    }
}