﻿/********** font **********/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@500&family=Shippori+Mincho+B1:wght@500&display=swap');

:root{
    --font-jp: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-jp2: 'Shippori Mincho B1', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-en: 'Cormorant Infant', 'Shippori Mincho B1', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"
}
body, .font_sans-serif{
    font-family: var(--font-jp);
}
.font_jp, a[href^="tel:"]{
    font-family: var(--font-jp2);
}
.font_en{
    font-family: var(--font-en);
}
.font_bold{
    font-weight: normal;
}

/********** color **********/

:root{
    --color1: #AECC33;
    --color1s: #75B200;
    --color2: #F4F4F4;
    --color3: #EAD11C;
    --color4: #DDDAD7;
    --black: #222222;
}

/********** all **********/

.button_container.active .top, .button_container.active .bottom{
    background-color: var(--color1s);
}

header{
    background-image: linear-gradient(to right, var(--color1s), var(--color1));
}

/********** top **********/

#main_img{
    padding: 0;
}
#main_img .main_img_wrap{
    background-image: url('./Dup/img/fv4.jpg'), url('./Dup/img/fv3.png'), url('./Dup/img/fv1.png');
    background-size: auto 100%, 50% auto, auto 100%;
    background-position: right top, left top, left top;
    background-repeat: no-repeat;
}
#main_img .catch{
    left: 10%;
    bottom: 10%;
}

.intro_box h2{
    color: var(--black);
    font-family: var(--font-jp2);
}
.intro_img a span, .intro_img a::before{
    display: none;
}

.more_btn {
    font-family: var(--font-en);
    font-size: 16px;
}
.more_btn .more_box{
    max-width: 300px;
}
.cms_box .cms_box_bg{
    display: none;
}
.cms_box .more_btn {
    padding-bottom: 50px;
    margin-top: 50px;
}
.cms_box .top_cms_title{
    font-family: var(--font-en);
}
.cms_box .top_cms_title p{
    font-size: 18px;
}

.sf_contact h3, .sf_access h3{
    font-family: var(--font-jp2);
}

.modal_wrap .modal_bg{
    background-color: var(--color1s);
}
.modal_wrap h2{
    font-family: var(--font-jp2);
}

.c2_box_bg::before{
    display: none;
}

.contents_no{
    display: none;
}

/********** under_page **********/

.s_footer_info_l::before{
    display: none;
}
#s_footer .s_footer_copy{
    padding: 15px 0;
}

#page_title .title_box{
    border-top: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    font-family: var(--font-en);
}
#page_title .title_box p{
    font-size: 18px;
}
#page_title .title_box h2{
    font-size: 30px;
}

.cate_title, .box_title, .box_title1{
    font-family: var(--font-jp2);
    color: var(--black);
}

#cms_2-a .box_title1{
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-size: 30px 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
}


/********** tablet 780 **********/
@media screen and (max-width: 768px){
.overlay{
    top: 0;
}
#main_img .catch {
    left: 20px;
    bottom: 20px;
}
.cms_box .more_btn {
    padding-bottom: 0;
}
}

/********** mobile 750 **********/
@media screen and (max-width: 667px){
#main_img {
    height: 180vw!important;
}
#main_img .main_img_wrap{
    background-image: url('./Dup/img/fv4_sp.jpg'), url('./Dup/img/fv3_sp.png'), url('./Dup/img/fv1.png');
    background-size: 100% auto, 80% auto, auto 42%;
    background-position: right bottom, right top, left top;
}
#main_img .catch {
    top: 8%;
    bottom: auto;
}
#page_title .title_box{
    width: calc(100% - 40px)!important;
    padding-left: 0;
    padding-right: 0;
}
#page_title .title_box h2{
    font-size: 24px;
}
}