@charset "UTF-8";
/* 下層ページ共通 */

h2 {
    font-size: 3em;
}

.logoImg {
    width: 62px;
    height: 62px;
    margin-left: 10px;
}

.logoText {
    margin-left: 28px;
}

.pageTitle {
    margin-top: 20px;
}

.pageTitleJPbox {
    width: 150px;
    padding-top: 10px;
    margin: 0 auto;
    border-top: 1px solid;

}

.pageTitleJP {
    text-align: center;
}

/* 下層ページ共通　PC */
@media screen and (min-width: 1025px) {
    /* --px以上に適用されるCSS（PC用） */
    h2 {
        font-size: 4em;
    }

    .logoG {
        margin-top: 15px;
        align-items: flex-start;
        padding-top: 0;
    }

    .logoImg {
        width: 75px;
        height: 75px;
        margin-left: 45px;
        margin-top: 7.5px;
    }

    .logoText {
        margin-left: 30px;
        margin-top: 7.5px;
        font-size: 1.25em;
        line-height: 150%;
        font-weight: 300;
    }

    .brSP {
        display: none;
    }

    .nav__item {
        font-size: 1.25em;
        line-height: 150%;
    }
}

/* メイン下部プランリスト */
/* プランリスト */
#planList {
    padding: 35px 0px;
}

.planList__items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 234px;
    margin: 0 auto;

}

.planListTitle {
    font-size: 1.25em;
    font-family: "lato";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.planListTitle::before,
.planListTitle::after {
    border-top: 1px solid;
    content: "";
    width: 30px;
    margin: 0 5px;
}

.planList__item {
    display: flex;
    justify-content: flex-start;
    font-size: 1.25em;
    border-bottom: 1px dashed rgba(124, 107, 89, 0.50);
    width: 100%;
    height: 86px;
    padding: 20px 15px 10px;

}

.itemBtn {
    display: flex;
    align-items: center;
}


.studioIcon {
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.jinjaIcon {
    width: 40px;
    height: 37px;
    margin-right: 10px;
}

.parkIcon {
    width: 43px;
    height: 42px;
    margin-right: 6px;
}

.babyIcon {
    width: 43px;
    height: 43px;
    margin-right: 10px;
}

.profileIcon {
    width: 34px;
    height: 34px;
    margin-right: 10px;
}

/* プランリスト下線＆背景色SP */
/*===============================
　左から右に背景色が伸びる
===================================*/
/*背景の設定*/
.gnaviPlan li a {
    /*背景色の基点とするためrelativeを指定*/
    position: relative;
}

.gnaviPlan li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    z-index: -1;
    bottom: -10%;
    left: -5%;
    /*背景の形状*/
    width: 0;
    height: 130%;
    background: #EBDDD5;
    border-radius: 15px;
    /*アニメーションの指定*/
    transition: all .5s;
    opacity: 0;
    /*はじめは透過0*/
}

/*現在地とhoverの設定*/
.gnaviPlan li.currentPlan a::after,
.gnaviPlan li a:hover::after {
    /*背景の形状*/
    width: 120%;
    /*横幅を伸ばす*/
    opacity: 1;
    /*不透明に*/
}

/* プランリストPC */
@media screen and (min-width: 1025px) {
    /* --px以上に適用されるCSS（PC用） */
    #planList {
        padding-bottom: 0px;
    }

    #planList h2 {
        display: none;
    }

    .planList__items {
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
    }

    .planList__item {
        width: 20%;
        border-left: 1px dashed #7C6B59;
        border-bottom: 0;
        padding: 0px;
        height: 95px;
    }

    .planList__item:first-of-type {
        border-left: 0;
    }

    .itemBtn {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 95px;
        justify-content: space-between;
        padding: 10px 0;
    }

    .itemBtn span {
        display: block;
        margin-top: 5px;
    }

    .itemBtn p {
        margin-top: 5px;
    }

    /* プランリスト背景色PC */
    .gnaviPlan li a::after {
        bottom: 0%;
        left: 5%;
        height: 95px;
    }

    /*現在地とhoverの設定*/
    .gnaviPlan li.currentPlan a::after,
    .gnaviPlan li a:hover::after {
        width: 90%;
    }
}

/* gallery全体 */
main {
    width: 96%;
    margin: 0 auto;
}

/* gallery全体PC */
@media screen and (min-width: 1025px) {

    /* --px以上に適用されるCSS（PC用） */
    main {
        width: 73.6%;
        margin: 0 auto;
    }

    .pageTitle {
        font-size: 4em;
    }
}

/* ギャラリーSP */
.gallery__category {
    margin-top: 45px;
}

.gallery__category:first-of-type {
    margin-top: 20px;
}

.gallery__container {
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
}

.gallery__titleG {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 10px;
}

.gallery__categoryTitle {
    margin-left: 10px;
}

/* ギャラリーPC */
@media screen and (min-width: 1025px) {
    /* px以上に適用されるCSS（PC用） */
    .stSP {
        margin-top: 45px;
        font-size: 4em;
    }

    .gallery__container {
        width: 100%;
        /* display: flex; */
        /* flex-direction: column; */
        padding-bottom: 45px;
        /* justify-content: center; */
        /* align-items: flex-start; */
        /* gap: 20px ; */
    }

    .gallery__category:first-of-type {
        margin-top: 0px;
    }

    .gallery__categoryTitle {
        font-size: 1.5em;
    }

    .gallery__item {
        margin: 10px auto 0;
    }

}

/* スライダー */
.slider {
    width: 100%;
    height: auto;
}

.slider img {
    width: 100%;
    height: auto;
}

.slider .slick-slide {
    margin: 0 10px;
}

/* スライダー下部ドットナビの設定 */

.slick-dotted.slick-slider {
    padding-bottom: 30px;
}

.slick-dots {
    text-align: center;
    margin: 20px 0 0 0 !important;
}

.slick-dots li {
    display: inline-block;
    margin: 0 10px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: #ebddd5 !important;
}

.slick-dots .slick-active button {
    background: #7C6B59 !important;
}

.slick-dots li button:before
{
    content: '';
}

/* スライダー両横矢印設定 */
.slick-prev,
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #7C6B59;
    border-right: 2px solid #7C6B59;
    height: 15px;
    width: 15px;
}

.slick-prev {
    left: 0;
    transform: rotate(-135deg);
    translate: -80% 0;

}

.slick-next {
    right: 0;
    transform: rotate(45deg);
    translate: 100% 0;
}

@media screen and (min-width: 769px) {

    /* 769px以上に適用されるCSS（PC用） */
    .slick-prev,
    .slick-next {
        height: 30px;
        width: 30px;
    }

    .slick-prev {
        left: 0;
        transform: rotate(-135deg);
        translate: -150% 0;

    }

    .slick-next {
        right: 0;
        transform: rotate(45deg);
        translate: 200% 0;
    }

}
/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
    display: none;
}

/* /モーダルのボタンの色を変更*/
*/ .modaal-close:after,
.modaal-close:before {
    background: var(--color-base);
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: var(--color-text);
}

.modaal-image .modaal-inner-wrapper img {
    max-height: 100%;
    max-width: 100%;
    /* width: auto; */
    /* height:  ; */
    object-fit: contain!important;
    display: block;
    background-color:transparent; 
}

.modaal-image .modaal-inner-wrapper img[style] {
  width: auto !important;
}

.modaal-container {
    background: transparent;
    box-shadow: none;
  }
 
.modaal-gallery-control {
    background-color: #EBDDD5;
    /* padding: 8px 12px; */
    /* font-size: 14px; */
}

.modaal-gallery-control {
    bottom: -65px;
}