@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
    font-size: 16px;
}
.overlay.open:before, .sf_access:before {
    content: "";
    background-image: url(../img/leaf.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    aspect-ratio: 11 / 8;
    pointer-events: none;
}
.sf_access:before {
    filter: brightness(0.5);
    opacity: 0.3;
    transform: translateY(10%);
}
.shadow {
    box-shadow: 7px 7px 0px #b8b6e0a3;
}
#logo {
    max-width: 300px;
}
#header .h_box_tel {
    display: none;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.overlay.open:before, .sf_access:before {
    width: 70%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.sf_access:before {
    transform: translateY(30%);
}
.font_100per_sp {
    font-size: 16px;
}
#logo {
    max-width: 230px;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img {
    padding: 0;
    padding-top: 55px !important;
}
#main_img .box_img {
    position: relative;
}
#main_img .box_img:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/fv_img.png), url(../img/catch.png);
    background-repeat: no-repeat;
    background-position: 20% 50%, 77% 50%;
    background-size: max(400px, 30%), max(180px, 14%);
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img {
    padding-top: 65px !important;
    height: 55vh!important;
}
#main_img .box_img:before {
    background-position: 15% 50%, 85% 50%;
    background-size: auto 90%, auto 70%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img {
        padding-top: 55px !important;
        height: 90vh !important;
}
     #main_img .box_img:before {
        background-image: url(../img/fv_img_sp.png);
        background-position: 50% 50%;
        background-size: auto 90%;
    }

}

/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.section {
    background: linear-gradient(151deg, #f9dce3 70%, #f1e1f7);
}
.intro_img a span {
    filter: opacity(0.7);
}
.cms_box .cms_box_bg {
    background: transparent;
}
.title, .top_cms_title h2 {
    font-size: clamp(1.5rem, 1.8vw, 3rem);
}
#pp-nav span {
    left: 7px!important;
}
.pp-scrollable {
    overflow-y: auto!important;
}
#pp-nav {
    display: none;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.title, .top_cms_title h2 {
    font-size: clamp(2.5rem, 1.8vw, 3rem);
    line-height: 1.5;
}
#s_content2 .title {
    font-size: clamp(1.8rem, 1.8vw, 3rem);
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.title {
    font-size: 6vw;
}
#s_content2 .title {
    font-size: 5.8vw;
}
.top_cms_title h2 {
    font-size: 8vw;
}
#s_content2 .title {
    margin-top: 7%;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title .title_box {
    border-top: none;
    border: 1px solid var(--color1);
    box-shadow: 5px 5px 1px var(--color1);
}
.cate_list a {
    font-size: 16px;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#page2 .blog_list a {
    border-color: var(--color1);
}
#s_footer {
    background: var(--color2);
}
#page4 .box_txt1 {
    font-weight: unset;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#cms_3-e .box_title2, #cms_3-e .box_title1 {
    color: var(--color3);
    font-weight: bold;
}
}