@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

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

#intro h2, #contents1 h2, #contents2 h3, #contents3 h3, #top_cms .top_cms_title h3, #page_title h2, .cms_4-a .box_title, #cms_4-a .box_title, #main_nav, .cate_title{font-family: dnp-shuei-4gob-std, "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";font-weight: 700}

.linkStyle{display: inline-block;transition: 0.3s;color: #65a304}
.linkStyle:hover{opacity: 0.7}

#top_cms .top_cms_title p{font-weight: normal;opacity: 1;padding-left: 7px}
#intro, #loader, #main_nav{background-image: url(./Dup/img/bg_img1.png);background-size: 200px;background-position: top left}
#top_cms .top_cms_box .top_cms_title{background-image: url(./Dup/img/bg_img6.png), url(./Dup/img/bg_img7.png), url(./Dup/img/bg_img1.png);background-size: 100px, 100px, 200px;background-position: bottom 50% right calc(50% + 100px), bottom 50% left calc(50% + 100px), top left;background-repeat: no-repeat, no-repeat, repeat}
#page_title{background-image: url(./Dup/img/bg_img5.png), url(./Dup/img/bg_img6.png), url(./Dup/img/bg_img7.png), url(./Dup/img/bg_img1.png);background-size: 100%, 100px, 100px, 200px;background-position: bottom center, bottom 50% right calc(50% + 100px), bottom 50% left calc(50% + 100px), top left;background-repeat: no-repeat, no-repeat, no-repeat, repeat}
#page_title span{padding-left: 7px;display: inline-block}
#main_img::before{position: absolute;content: "";width: 100%;height: 100%;top: 0;left: 0;pointer-evetns: none;background-image: url(./Dup/img/bg_img3.png);background-size: 100%;background-position: bottom center;background-repeat: no-repeat;z-index: 1}
#intro, #intro > div{position: relative}
#intro::before{position: absolute;content: "";width: 100%;height: 30%;top: 0;left: 0;background: linear-gradient(to bottom, rgba(244,178,12,1), rgba(244,178,12,0));}
#intro::after{position: absolute;content: "";width: 200px;height: 148px;background-image: url(./Dup/img/bg_img12.png);background-repeat: no-repeat;left: 100px;bottom: -100px;background-size: contain}
#contents1{background-image: url(./Dup/img/bg_img10.png);background-size: 500px;background-position: top right;background-repeat: no-repeat}
#contents1 h2{background-image: url(./Dup/img/bg_img11.png);background-size: 150px;background-position: right top;background-repeat: no-repeat}
#contents1 p{text-align: left;max-height: inherit;width: 100%!important}
#contents1 p span{-webkit-writing-mode: horizontal-tb;-ms-writing-mode: lr-tb;writing-mode: horizontal-tb;}
#contents2::after{background-image: url(./Dup/img/bg_img4.png), url(./Dup/img/bg_img5.png);background-position: top center, bottom center;background-size: 100%;background-repeat: no-repeat}
#contents2{min-height: inherit;padding-top: 10vw;padding-bottom: 10vw}
#contents2 h3{font-size: 30px;text-align: center;width: 100%;margin-left: 0;background-image: url(./Dup/img/bg_img8.png), url(./Dup/img/bg_img9.png);background-size: 300px;background-position: left bottom, right bottom;background-repeat: no-repeat}
#contents2 p{max-width: 100%;width: 100%!important;max-height: inherit}
#contents2 p span{-webkit-writing-mode: horizontal-tb;-ms-writing-mode: lr-tb;writing-mode: horizontal-tb;text-align: left}
#contents3{padding-top: 100px;padding-bottom: 100px}
#contents3 h3{font-size: 30px;}
#contents3 h3:first-letter{font-size: 34px;color: #f4b20c}
#contents3, #footer{background-image: url(./Dup/img/bg_img2.png);background-size: 400px;background-position: top left}
.more a{font-weight: normal}
#top_cms .top_cms_box .top_cms_title{margin-bottom: 0}

.cms_4-a .box_open, #cms_4-a .box_open{background-color: rgba(234,213,160,0.8);top: 0;left: 0;z-index: 1000;overflow-y: auto}
.cms_4-a .box_open .close, #cms_4-a .box_open .close{right: 10px;top: 10px}
.cms_4-a .box_open .open_con, #cms_4-a .box_open .open_con{background-position: right -10% top -10%}
.cms_4-a .cate_box:first-child, #cms_4-a .cate_box:first-child{width: 100%!important;padding-left: 100px;padding-right: 100px;position: relative}
.cms_4-a .cate_box:first-child .box_sam img, #cms_4-a .cate_box:first-child .box_sam img{border: solid 5px #f4b20c}
.cms_4-a .cate_box:first-child::before, #cms_4-a .cate_box:first-child::before, .cms_4-a .cate_box:first-child::after, #cms_4-a .cate_box:first-child::after{position: absolute;content: "";height: 100%;width: 250px;background-size: 100%;background-repeat: no-repeat;background-position: bottom center;pointer-events: none;bottom: 0;z-index: 1}
.cms_4-a .cate_box:first-child .box_sam .box_title, #cms_4-a .cate_box:first-child .box_sam .box_title{padding-top: 20px;padding-left: 140px;background-image: url(./Dup/img/rank1.png);background-position: left top;background-size: contain;background-repeat: no-repeat}
.cms_4-a .cate_box:first-child::before, #cms_4-a .cate_box:first-child::before{left: -30px;background-image: url(./Dup/img/bg_img13.png)}
.cms_4-a .cate_box:first-child::after, #cms_4-a .cate_box:first-child::after{right: -30px;background-image: url(./Dup/img/bg_img14.png)}
.cms_4-a .cate_box:first-child .box_sam .box_title, #cms_4-a .cate_box:first-child .box_sam .box_title{font-size: 30px}
.cms_4-a .cate_box:nth-child(2), .cms_4-a .cate_box:nth-child(3), #cms_4-a .cate_box:nth-child(2), #cms_4-a .cate_box:nth-child(3){width: 50%!important}
.cms_4-a .box_sam, .cms_4-a .box_open .close, #cms_4-a .box_sam, #cms_4-a .box_open .close{cursor: pointer}
.cms_4-a .cate_box:nth-child(2) .box_sam .box_title, #cms_4-a .cate_box:nth-child(2) .box_sam .box_title, .cms_4-a .cate_box:nth-child(3) .box_sam .box_title, #cms_4-a .cate_box:nth-child(3) .box_sam .box_title{padding-top: 20px;padding-left: 110px;background-position: left top;background-size: contain;background-repeat: no-repeat}
.cms_4-a .cate_box:nth-child(2) .box_sam .box_title, #cms_4-a .cate_box:nth-child(2) .box_sam .box_title{background-image: url(./Dup/img/rank2.png)}
.cms_4-a .cate_box:nth-child(3) .box_sam .box_title, #cms_4-a .cate_box:nth-child(3) .box_sam .box_title{background-image: url(./Dup/img/rank3.png)}

#page7 > div{justify-content: space-between;}
#page10 ul li a{color: #333}
#page10 ul li a span{color: #f4b20c}

.cate_list a img{display: none}
.shop_banner{z-index: 997;right: 20px;top: 120px;width: 80px}
#footer_menu a, #sns_links li a{opacity: 1}
#footer_menu a:hover, #sns_links li a:hover{opacity: 0.7}

/** tablet 780 **/
@media screen and (max-width: 768px){
#intro::after{left: 50px}
#contents1 h2{background-size: 70px}
#contents2{padding: 15vw 20px}
#contents2 h3{font-size: 24px}
#contents2 h3{background-size: 200px}
#contents3 h3{font-size: 20px}
#contents3 h3:first-letter{font-size: 24px}

.cms_4-a .cate_box:first-child::before, #cms_4-a .cate_box:first-child::before, .cms_4-a .cate_box:first-child::after, #cms_4-a .cate_box:first-child::after{width: 200px}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#intro::after{width: 100px;height: 74px;left: auto;right: 20px;bottom: -50px;}
#contents1 h2{background-size: 100px;background-position: left bottom}
#contents1{background-size: 300px;}
#contents2 h3{background-image: none}
#contents2 .d_flex{padding-bottom: 100px;background-image: url(./Dup/img/bg_img8.png), url(./Dup/img/bg_img9.png);background-size: 150px;background-position: left bottom, right bottom;background-repeat: no-repeat}
#top_cms .top_cms_title h3, #contents3 h3{font-size: 20px}
.cms_4-a .cate_box:first-child, #cms_4-a .cate_box:first-child{padding: 0 0 30px}
.cms_4-a .cate_box:first-child::before, #cms_4-a .cate_box:first-child::before, .cms_4-a .cate_box:first-child::after, #cms_4-a .cate_box:first-child::after{width: 100px}
.cms_4-a .cate_box:nth-child(2), .cms_4-a .cate_box:nth-child(3), #cms_4-a .cate_box:nth-child(2), #cms_4-a .cate_box:nth-child(3){width: 100%!important}
.shop_banner{right: 10px;top: 80px;width: 60px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
body, .font_sans-serif, .font_serif{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
#top_cms .top_cms_title h3{padding-right: 15px}
}