@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600&family=Noto+Sans+JP:wght@300&family=Shippori+Mincho:wght@600&display=swap');

body, .font_sans-serif{font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

.cate_title, .box_title1, .box_title, #intro .intro_txt h2, #top_contents1 .contents1_txt h3, #top_contents2 h3{font-family: 'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"}

#page_title, #main_nav, .sc_nav, .shop_link, #footer_links, #page10, a[href^="tel:"], #intro .intro_title, #top_cms .top_cms_title, .more, #menu_wrap{font-family: 'EB Garamond', 'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"}

h1 img{max-width: 180px}
#main_img img, #intro img, #top_contents1 img, #top_contents2 img{filter: none}
#page_title{filter: none;position: relative;width: calc(100% - 40px)}
#page_title .page_wrap{top: 50%;transform: translateY(-50%);left: -50px;background-color: #333;color: #fff;padding: 30px 50px;padding-right: 200px}
#page_title h2{font-size: 40px;line-height: 1;letter-spacing: 3px}
.top_wrap::before{position: absolute;content: "";width: 100%;height: calc(100% - 50px);left: 0;bottom: 0;background-image: url(./Dup/img/bg_img.png);background-size: 500px;z-index: -1}

header #header{padding-top: 30px;padding-bottom: 30px}
#main_nav ul{justify-content: center;letter-spacing: 3px;font-size: 18px}
#main_nav ul li{padding-left: 10px;padding-right: 10px}
#main_nav ul li a{padding-left: 20px;padding-right: 20px}
#menu_wrap{text-align: center}
#menu_bt{width: 30px}
#menu_bt > div span{height: 2px;margin-bottom: 7px}
#menu_bt.active > div span:nth-of-type(1){transform: translateY(9px) rotate(45deg);}
#menu_bt.active > div span:nth-of-type(3){transform: translateY(-9px) rotate(-45deg);}
.sc_nav{letter-spacing: 3px;transform: translateY(-160px)}
.sc_nav .grid_8{width: 100%!important}
.sc_nav .logo{width: auto!important;position: absolute;background-color: #fff;top: 0;left: 0;padding: 20px}
.sc_nav .logo img{max-width: 120px}
.sc_nav .shop_link a{padding-bottom: 13px;opacity: 1}
.sc_nav .shop_link a:hover{opacity: 0.7}

#intro{margin-bottom: 150px}
#top_contents1, #top_contents2{margin-bottom: 100px}
#intro{position: relative}
#intro::before{position: absolute;content: "";width: 100%;height: 100px;left: 0;bottom: 100px;background-image: url(./Dup/img/intro_bg1.png);background-size: 1200px;background-position: top 0 left 0;background-repeat: repeat-x;animation: anime1 30s linear infinite;z-index: 1}
#intro::after{position: absolute;content: "";width: 100%;height: 100px;left: 0;bottom: 100px;background-image: url(./Dup/img/intro_bg2.png);background-size: 1200px;background-position: top 0 left 0;background-repeat: repeat-x;animation: anime1 15s linear infinite;z-index: 1}
@keyframes anime1 {
0% {background-position: top 0 left 0}
100% {background-position: top 0 left -1200px}
}

#intro .slick-dots{display: none!important}
#intro .intro_img{margin-bottom: 0}
#intro .intro_txt{width: 60%!important;margin-top: -50px;background-color: #fff;padding: 50px;position: relative}
#intro .intro_txt h2{transform: none;padding: 0;padding-bottom: 20px;background-color: transparent;margin-bottom: 30px;font-size: 30px;line-height: 1.5}
#intro .intro_txt h2::before{position: absolute;content: "";width: 100px;height: 3px;background-color: #eee;left: 0;right: 0;bottom: 0;margin: auto}
#intro .intro_txt h2, #intro .intro_txt p{width: 100%!important;position: relative;z-index: 2}
.intro_txt p{padding: 0}
#top_contents1{margin-top: 0!important;background-image: url(./Dup/img/bg_img2.png);background-size: 300px;background-repeat: no-repeat;background-position: top -50px right -80px}
#top_contents1 .contents1_txt h3{transform: none}
#top_contents1 figure{bottom: 50px}

#top_cms .top_cms_title h4{font-size: 40px}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;text-align: left;padding-bottom: 10px!important;margin-bottom: 50px;border-bottom: solid 2px #eee;color: #333;position: relative}
.cate_title::before{position: absolute;content: "";width: 100px;height: 2px;background-color: #afc3dd;left: 0;bottom: -2px}

footer{background-image: url(./Dup/img/bg_img.jpg);background-size: cover}

#cate2 .box_h h3{cursor: pointer;border-color: #333}
#cate2 .box_h h3 .close{width: 30px;height: 30px;left: 0;top: 18px;border-radius: 50%;background-color: #333}
#cate2 .box_h h3 .close::before, #cate2 .box_h h3 .close::after{position: absolute;content: "";width: 15px;height: 1px;background-color: #fff;top: 0;left: 0;right: 0;bottom: 0;margin: auto}
#cate2 .box_h h3 .close::after{transform: rotate(90deg);transition: 0.3s}
#cate2 .box_h h3.trans .close::after{transform: rotate(180deg)}

#copyright{padding-bottom: 100px;}
.foot_banner{right: 70px;bottom: 20px;z-index: 9}
#page-top{transform: translateY(-15px);}

/** tablet 780 **/
@media screen and (max-width: 768px){
header #header{padding-top: 20px;padding-bottom: 20px}
#loader .logo{max-width: 200px}
h1 img{max-width: 150px}
#page_title{margin-bottom: 100px}
#page_title .page_wrap{left: -20px;padding: 30px 40px;padding-right: 100px}
#page_title h2{font-size: 30px;letter-spacing: 1px}
.top_wrap::before{height: 100%;top: 30px}
#intro{margin-bottom: 100px}
#intro .intro_txt h2{font-size: 20px}
#intro .intro_txt{padding: 30px}
#top_contents1 figure{bottom: 0}
#top_contents1 .contents1_txt{margin-left: auto;margin-right: auto}
#top_contents1{background-position: bottom -50px right -80px}
#cate2 .box_h h3:hover{color: #333}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#intro h3{text-align: center;margin-bottom: 30px}
h1 img{max-width: 120px}
#page_title{min-height: inherit}
#page_title .page_wrap{left: 0;right: 0;margin: auto;width: calc(100% - 40px);padding: 30px 0;text-align: center}
#intro .intro_txt{margin-top: -30px;width: 80%!important;padding: 30px 20px}
.foot_banner{right: 60px;bottom: 10px;max-width: 400px;width: calc(100% - 70px)!important}
#page-top {transform: translateY(-40px);}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
.sc_nav .shop_link a{padding-bottom: 13px}
}