@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

:root{--font_kiwi: 'Kiwi Maru','Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
    　
.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6,.hannari,.date_box p,div#pc_nav a, #top_pc_nav li a, #footer_nav li a,.cate_title,.box_txt1{font-family:var(--font_kiwi);}
body, .font_sans-serif{font-family:var(--font_zenkaku);}

.date_box p,#pc_nav li a, #top_pc_nav li a, #footer_nav li a{color: var(--black);}
.font_14 {font-size: 15px;}



/*毎回いる*/

.swiper-button-next, .swiper-button-prev { z-index: 2 !important;}
#top_cms.back1:before {z-index: -1;}
.nav_menu_more a span::before {
    display: none !important;}
.nav_menu_more.mg_t-10px a span::before {
    display: block !important;}
div#contents2_wrap {margin-top: 8%;}

/*タブレット*/
@media screen and (max-width: 768px){
#cms_1-a .pager li {margin-right: 0px;}
}

@media screen and (max-width: 667px){
#contents1 .line:before, #contents2 .line:before {
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);}
}
/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#8d6548;
    --color2:#e3d2c6;
    --color3:#b0927c;
    --color4:#f6efe9;
    --color5:#f6efe9;    
    --white:#ffffff;
    --black:#48403c;
    --gray:#8b817c;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}


header.scr_header {background-color: rgb(246 239 233 / 0.8) !important;}

.linkStyle{color: var(--color3);
          border-bottom:solid 1px;
}
body#body {
    background: var(--white);
}
/* color ---------------------------------------------------------------------------------------------*/
#wrap {
    position: relative;
    background-color: var(--white);
    background-image: url(dup/img/bg_img.jpg);
    background-size: 30%;
}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,#contents,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,#contents::before,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
/*装飾に便利な疑似クラス設定*/
/*フィルター外す*/
#main_img:before{background:transparent;}
/*フィルター外す*/


/*メインビジュアルロゴ＆メニュー消す＋ヘッダー常に表示*/
#main_img .menu {
    display: none;}
/*↑↑↑↑↑メインビジュアルロゴ＆メニュー消す↑↑↑↑*/
.top header {
    opacity: 1 !important;
    z-index: 5;}
div#pc_nav {display: block !important;}
/*1280*/
@media screen and (max-width: 1280px){div#pc_nav{display:none !important;}}
/*メインビジュアルロゴ＆メニュー消す＋ヘッダー常に表示*/


/*.video {*/
/*    width: 80%;*/
/*    padding: 3.5% 0 !important;*/
/*    box-sizing: border-box;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    min-width: inherit;*/
/*    min-height: inherit;*/
/*    -webkit-transform: translate(0%, 0%);*/
/*    -ms-transform: translate(0%, 0%);*/
/*    transform: translate(0%, 0%);*/
/*    top: 0%;*/
/*    left: 0%;*/
/*}*/

div#main_img {
    background-image: url(dup/img/item01.png);
    background-size: auto 50%;
    background-position: top right;
    background-repeat: no-repeat;
}

span.catch img {
    z-index: 1;
    max-width: 600px;
    width: 50%;
    top: 40%;
    right: 6%;
    transform: translate(0%, -50%);
}

#main_img::after {
    background-image: url(dup/img/item02.png);
    width: 12vw;
    height: 18%;
    right: calc(20% - 6vw);
    z-index: 2;
    bottom: 3.5%;
    background-size: contain;
}

#main_img:before {
    background-image: url(dup/img/item04.png);
    background-color: transparent;
    width: 19%;
    height: 38%;
    background-size: contain;
    bottom: -4%;
    right: -10%;
    top: auto;
    left: auto;
    transform: rotate(348deg);
    background-repeat: no-repeat;
}
.num{display:none;}


#intro_wrap {
    padding-top: 4%;
    padding-bottom: 7%;}
    
span.intro {
    max-width: 200px;
    width: 50%;
    display: block;
    margin: 0 auto 20px;}
    
img.con01, img.con02 {
    width: 85px;
    display: block;
    margin-bottom: 15px;
    margin-left: -10px;
}
img.con02 {width: 75px;}

img.con03 {
    width: 80px;
    display: block;
    margin: -40px auto 20px;
}

div#contents3_wrap .con_title {margin-bottom: 60px;}

#contents3 .line:before {
    background-image: url(dup/img/item03.png);
    width: 93px !important;
    height: 30px;
    bottom: -43px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
}

#info_contact .con_img:before {background-color: rgb(141 101 72 / 30%);}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pager li a {background-color: var(--color3) !important;}
.pager li a:hover {background-color: var(--color1) !important;}
#cms_2-f .box_title1::after {top: 20px;}

#page_title:before {background-color: rgb(246 239 233 / 20%);}

#page_title .page_title_box {
    padding-bottom: 28px;
    background: rgb(141 101 72 / 60%);
    backdrop-filter: blur(2px);}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after {
    height: 1px;
    background: var(--color3);
    bottom: -6px;}
    
#fakeloader:before {background-color: var(--color4);}

@media screen and (max-width: 1300px){
    .button_container span:nth-of-type(1) {background-color: transparent !important;}
    .button_container span {
        color: var(--color3) !important;
        background: var(--color3) !important;}
    .button_container.active span:nth-of-type(1) {background-color: transparent !important;}
    .button_container.active span {
        color: var(--white) !important;
        background: var(--white) !important;}    
}
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
    
/*ページタイトル一枚に*/
div#page_left {width: 100% !important;}
div#page_right {display: none;}
/*ページタイトル一枚に*/

@media screen and (max-width: 768px){
#page_title .page_title_box {backdrop-filter: blur(0px); }

#page_title .page_title_box { width: 45%;}
}
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width: 768px){
section#cms_2-f .grid_6 {
    width: 100% !important;
    padding: 0;}
section#cms_2-f .grid_6.mg_b-20px_sp {margin-bottom: 20px !important;}

#main_img:before{display:none;}
/*div#video {*/
/*    width: 100%;*/
/*    height: 60vh;}*/
/*.video {*/
/*    width: 100%;*/
/*    padding: 0 !important;*/
/*    -webkit-transform: translate(-50%, -50%);*/
/*    -ms-transform: translate(-50%, -50%);*/
/*    transform: translate(-50%, -50%);*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    position: absolute;}*/
span.catch img {
    z-index: 1;
    max-width: 350px;
    width: 50%;
    top: 33%;
    right: 5%;
    transform: translate(0%, -50%);}
#main_img::after {
    background-image: url(dup/img/item02.png);
    width: 17vw;
    height: 16%;
    right: 3%;
    z-index: 2;
    bottom: -1.5%;
    background-size: contain;}
section#intro {margin-bottom: 12%;}
#contents2 .con_box {margin-top: 0%;}
div#contents2_wrap {margin-top: 0%;}
#contents3 .line:before {
    width: 80px !important;
    height: 30px;
    bottom: -47px;}
img.con03 {
    width: 75px;
    display: block;
    margin: -11px auto 17px;}
}

@media screen and (max-width: 667px){
    /*.video {object-fit: contain;}*/
    #main_img::after {
        background-image: url(dup/img/item02.png);
        width: 19vw;
        height: 14%;}span.catch img {right: 4%;}

img.con01, img.con02{
    width: 70px;
    display: block;
    margin: 0 auto;
    margin-bottom: 15px;
}
#contents3 .line:before {
    width: 70px !important;
    height: 30px;
    bottom: -44px;}
#wrap {
    position: relative;
    background-color: var(--white);
    background-image: url(dup/img/bg_img.jpg);
    background-size: 100%;}
    
#cms_2-f .box_title1::after {top: 16px;}
}



/*バナー-------------------*/

/*a.cms_bnr {margin-top: -30px;}*/
#fix_bnr {
    bottom: 36px;
    right: 84px;
    z-index: 10;
    width: 160px;
}
    
@media screen and (max-width: 1280px){
div#h1txt {padding-bottom: 120px;}
#fix_bnr {
    bottom: 45px;
    right: 79px;
    z-index: 10;
    width: 139px;
}
}

@media screen and (max-width: 768px){
#fix_bnr {
    bottom: 35px;
    right: 60px;
    z-index: 10;
    width: 130px;
}
div#h1txt {padding-bottom: 100px;}
}

@media screen and (max-width: 667px){
div#h1txt {padding-bottom: 30px;}
#fix_bnr {
    bottom: 0px;
    right: auto;
    left: 0;
    width: 100%;
    text-align: center;
}
#fix_bnr span {
    padding: 10px 0;
    background: var(--color1);
    border-top: solid 1px var(--color2);
}

p#copyright {
    padding-bottom: 50px;
    background: var(--color2);
    color: var(--black);}
p#copyright a {
    color: var(--black);
}
}


/*20221226--------------------------------------------------------*/
div#main_img {height: 100vh;}
.top_img01 {
    position: absolute;
    width: 80%;
    padding: 3.5% 0 !important;
    box-sizing: border-box;
    height: 100%;
    object-fit: cover;
    min-width: inherit;
    min-height: inherit;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    top: 0%;
    left: 0%;
}

/*div#video02 {height: 60vh !important;}*/
div#contents2_wrap {margin-top: 0%;}
#contents2 .con_img {margin-bottom: -7%;}
video {
    min-width: 100% !important;
    width: 170% !important;
    min-height: inherit;}


@media screen and (max-width: 768px){
    
div#main_img {
    width: 100%;
    height: 60vh;}
.top_img01 {
    width: 100%;
    padding: 0 !important;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;}
video {
    min-width: inherit !important;
    width: 130% !important;
    min-height: inherit !important;}
#contents2 .con_img {min-width: inherit;}

}

@media screen and (max-width: 667px){
#contents2 .con_img {margin-bottom: 7%;}
video {width: 100% !important;}
}