/** font **/

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Quicksand:wght@550&display=swap');

:root{
    --font-jp: 'Quicksand', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp)!important;
}
.font_bold{
    font-weight: normal;
}

/** color **/

:root{
    --color1: #F2C32F;
    --color1s: #EAB213;
    --color2: #F7F5ED;
    --color3: #49442E;
    --color4: #E5DABD;
    --black: #302D28
}

.bg_color1{
    background-image: url('./Dup/img/bg_img4.jpg');
    background-size: 1200px;
}
.bg_color3{
    background-image: url('./Dup/img/bg_img4.jpg');
    background-size: 1200px;
}

/** other **/

.square_img, .rectangle_img, .normal_img img{
    border-radius: 10px;
}

#wrap{
    background-image: url('./Dup/img/bg_img2.jpg');
    background-size: 1200px;
    background-position: top left;
    background-repeat: repeat-x;
}

html, body, .font_14{
    font-size: 16px;
}

body, .more a::after, .cate_list li a::after, #page10 ul li a .title::after, #tel_contact > div > .d_inline_b > div p span{
    background-color: #fff;
}

header{
    box-shadow: none;
}
header nav{
    background-color: transparent!important;
}
header .tel a{
    color: var(--color1s);
}

nav li a{
    border: none!important;
    color: var(--black)!important;
}
nav li a:hover{
    color: var(--color1s)!important;
}
nav li:not(:last-of-type){
    background-image: linear-gradient(to bottom, var(--color4), var(--color4));
    background-size: 1px 40px;
    background-repeat: no-repeat;
    background-position: right center;
}
nav li a .txt_color3{
    color: var(--color1s);
}

.pc_sc_nav{
    background-color: rgba(255,255,255,0.9)!important;
    box-shadow: 0 0 20px rgba(0,0,0,0.05)!important;
}

#main_img{
    padding: 0;
    margin-top: 50px;
    width: calc(100% - 40px)!important;
}
#main_img .catch{
    top: -50px;
    left: 0;
    margin: 0;
    z-index: 1;
}
#main_img::before{
    position: absolute;
    content: "";
    width: 300px;
    height: 150px;
    background-image: url('./Dup/img/bg_img7.png');
    background-size: contain;
    background-repeat: no-repeat;
    right: -50px;
    bottom: 0;
    z-index: 1;
}

#top_cms1{
    margin-bottom: 50px;
}

#intro{
    background-image: url('./Dup/img/bg_img5.png'), url('./Dup/img/bg_img6.png'), url('./Dup/img/bg_img.jpg');
    background-size: 100%, 100%, 1200px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top center, bottom center, top left;
    padding-bottom: 150px;
    margin-bottom: 0;
}
#intro::before, #intro::after{
    position: absolute;
    content: "";
    background-color: transparent;
    width: 300px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    top: -20px;
    pointer-events: none;
}
#intro::before{
    background-image: url('./Dup/img/bg_img8.png');
    left: 0;
}
#intro::after{
    background-image: url('./Dup/img/bg_img9.png');
    right: 0;
    bottom: auto;
    left: auto;
}
#intro .txt_white{
    color: var(--black);
}
#intro .intro_title{
    display: none;
}

#contents1{
    padding-top: 0;
    margin-top: -100px;
    margin-bottom: 100px;
}
#contents1 #contents1_txt h3{
    font-size: 24px;
}

#contents2_h .con2_wrap{
    background-image: linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, var(--color1), var(--color1));
    background-repeat: no-repeat;
    background-size: 50px 2px, 2px 50px, 50px 2px, 2px 50px;
    background-position: bottom left, bottom left, top right, top right;
}
#contents2_h .con2_wrap::before, #contents2_h .con2_wrap::after{
    position: absolute;
    content: "";
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
#contents2_h .con2_wrap::before{
    background-image: url('./Dup/img/bg_img10.png');
    top: -40px;
    left: -40px;
}
#contents2_h .con2_wrap::after{
    background-image: url('./Dup/img/bg_img11.png');
    bottom: -40px;
    right: -20px;
}
#contents2_h h3{
    padding-bottom: 10px;
    background-image: linear-gradient(to bottom, var(--color1), var(--color1));
    background-repeat: no-repeat;
    background-size: 50px 2px;
    background-position: bottom center;
}

.top_cms_wrap{
    background-image: url('./Dup/img/bg_img5.png'), url('./Dup/img/bg_img.jpg');
    background-size: 100%, 1200px;
    background-repeat: no-repeat, repeat;
    background-position: top center, top left;
}
#top_cms .top_cms_box > .cms_wrap{
    padding: 50px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
#top_cms .top_cms_title p{
    background-color: var(--color1);
    color: #fff;
}
#top_cms .top_cms_title p span{
    opacity: 1;
}

#page_title {
    z-index: 0;
    background-color: transparent;
    background-image: none;
}
#page_title::before, #page_title::after{
    position: absolute;
    content: "";
    background-color: transparent;
    width: 300px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -50px;
    pointer-events: none;
    animation: none!important;
}
#page_title::before{
    background-image: url('./Dup/img/bg_img8.png');
    left: 0;
}
#page_title::after{
    background-image: url('./Dup/img/bg_img9.png');
    right: 0;
}
#page_title h2{
    color: var(--black);
}

#tel_contact > div > .d_inline_b > div{
    border-color: var(--color1);
}
#tel_contact > div > .d_inline_b > div p span{
    padding: 10px 20px;
    background-color: var(--color1);
    color: #fff;
    background-image: none;
    border-radius: 50px;
}

#contact_bar{
    background-image: url('./Dup/img/bg_img4.jpg');
    background-size: 1200px;
    box-shadow: none;
}
#contact_bar .mail p{
    background-color: #fff;
    background-image: none;
    color: var(--color1);
}
#contact_bar .mail a{
    color: #fff;
}

footer{
    background-color: #fff!important;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#wrap {
    background-position: top -150px left;
}
.bg_color1, .bg_color3, #wrap, .top_cms_wrap{
    background-size: 1200px;
}
#main_img::before{
    width: 160px;
    height: 80px;
    right: -30px;
}
#intro::before, #intro::after, #page_title::before, #page_title::after{
    width: 200px;
    height: 100px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#wrap {
    background-position: top -200px left;
}
#main_img .catch{
    width: 120px;
    top: -30px;
}
#intro::before, #intro::after, #page_title::before, #page_title::after{
    width: 150px;
    height: 80px;
}
.sp_tel p{
    font-size: 14px;
}
#contents1 #contents1_txt h3{
    font-size: 20px;
}
#contents2_h .con2_wrap::before, #contents2_h .con2_wrap::after{
    width: 100px;
    height: 100px;
}
#contents2_h .con2_wrap::before{
    top: -50px;
    left: -30px;
}
#contents2_h .con2_wrap::after{
    bottom: -50px;
    right: -20px;
}
#top_cms .top_cms_box > .cms_wrap{
    padding: 50px 20px;
}
}