@charset "UTF-8";
/* CSS Document */

@import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Noto+Serif+JP:wght@400;500;600&display=swap');
@import url("../js/slick/slick.css");
@import url("../js/slick/slick-theme.css");

/*Remodal*/
html.remodal-is-locked {overflow: hidden;touch-action: none;}
.remodal,[data-remodal-id] {display: none;}
.remodal-overlay {position: fixed;z-index: 9999;top: -5000px;right: -5000px;bottom: -5000px;left: -5000px;display: none;}
.remodal-wrapper {position: fixed;z-index: 10000;top: 0;right: 0;bottom: 0;left: 0;display: none;overflow: auto;text-align: center;-webkit-overflow-scrolling: touch;}
.remodal-wrapper:after {display: inline-block;height: 100%;margin-left: -0.05em;content: "";}
.remodal-overlay,
.remodal-wrapper {backface-visibility: hidden;}
.remodal {position: relative;outline: none;text-size-adjust: 100%;}
.remodal-is-initialized {display: inline-block;}

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {filter: blur(3px);}
.remodal-overlay {background: rgba(43, 46, 56, 0.9);}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {animation-duration: 0.3s;animation-fill-mode: forwards;}
.remodal-overlay.remodal-is-opening {animation-name: remodal-overlay-opening-keyframes;}
.remodal-overlay.remodal-is-closing {animation-name: remodal-overlay-closing-keyframes;}
.remodal-wrapper {padding: 10px 10px 0;}
.remodal {box-sizing: border-box;width: 100%;margin-bottom: 10px;padding: 35px;transform: translate3d(0, 0, 0);color: #222;background: #fff;}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {animation-duration: 0.3s;animation-fill-mode: forwards;}
.remodal.remodal-is-opening {animation-name: remodal-opening-keyframes;}
.remodal.remodal-is-closing {animation-name: remodal-closing-keyframes;}
.remodal,
.remodal-wrapper:after {vertical-align: middle;}
.remodal-close {position: absolute;top: 0;left: 0;display: block;overflow: visible;width: 35px;height: 35px;margin: 0;padding: 0;cursor: pointer;transition: color 0.2s;text-decoration: none;color: #95979c;border: 0;outline: 0;background: transparent;}
.remodal-close:hover,
.remodal-close:focus {color: #2b2e38;}
.remodal-close:before {font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;font-size: 25px;line-height: 35px;position: absolute;top: 0;left: 0;display: block;width: 35px;content: "\00d7";text-align: center;}
.remodal-confirm,
.remodal-cancel {font: inherit;display: inline-block;overflow: visible;min-width: 110px;margin: 0;padding: 12px 0;cursor: pointer;transition: background 0.2s;text-align: center;vertical-align: middle;text-decoration: none;border: 0;outline: 0;}
.remodal-confirm {color: #fff;background: #81c784;}
.remodal-confirm:hover,
.remodal-confirm:focus {background: #66bb6a;}
.remodal-cancel {color: #fff;background: #e57373;}
.remodal-cancel:hover,
.remodal-cancel:focus {background: #ef5350;}
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {padding: 0;border: 0;}

@keyframes remodal-opening-keyframes {
	from {transform: scale(1.05);opacity: 0;}
	to {transform: none;opacity: 1;}
}
@keyframes remodal-closing-keyframes {
	from {transform: scale(1);opacity: 1;}
	to {transform: scale(0.95);opacity: 0;}
}
@keyframes remodal-overlay-opening-keyframes {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes remodal-overlay-closing-keyframes {
	from {opacity: 1;}
	to {opacity: 0;}
}
@media only screen and (min-width: 641px) {
	.remodal {max-width: 700px;}
}


body {margin:0;padding:0;font-family: 'Noto Serif JP', serif;overflow-x: hidden;-webkit-text-size-adjust: 100%;word-wrap: break-word;width:100%;letter-spacing: .05em;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0;padding:0;}
b {font-weight:500;}
a , a img { overflow: hidden; color:#c71010;text-decoration:none;border:none;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
a:hover,a:active {border:none;outline:none;opacity:1;}
a:hover img , a:active img {opacity:1;border:none;outline:none;}

h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:normal;}
img {max-width: 100%;width:auto;display:block;}
* {box-sizing:border-box;outline:none;}
button {font-family: 'Noto Serif JP', serif;background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;font-size:1em;}
.pc {display:none;}

pre {white-space: pre-wrap;font-family: 'Noto Serif JP', serif;}

body {font-size:3.6vw;line-height:1.7;color: #222;display: block;font-weight: 400;background:#222;font-feature-settings: "palt";}

#loader-bg {display: none;position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;background: #fff;z-index: 10;}
#loader {display: none;position: fixed;top: 50%;left: 50%;width: 32px;height: 32px;text-align: center;color: #fff;z-index: 11;}

.header {position: fixed;top: 0;left: 0;width: 100%;z-index: 10;height: 80px;}
.header h1 {width: 50%;left: 5%;top: 20px;position: absolute;/*filter: brightness(0) invert(1);*/max-width: 250px;}
.header.fixed + .fix_menu span {background-color: #000;}

.menu_on body {height:100%;overflow: hidden;}
.menu_on #wrap {height:100%;}
.gnavi {display:none;overflow: auto;height:100dvh;background: rgb(28 28 28 / 85%);backdrop-filter: blur(10px);position:fixed;top:0;left:0;width:100%;z-index:900;-webkit-overflow-scrolling: touch;padding:0 10%;}
.gnavi > div {height: 100%;display: flex;justify-content: center;align-items: center;}
.gnavi .menu {width:100%;}
.gnavi .menu li {font-size: 1.5em;line-height: 1;font-family: 'Crimson Text', serif;font-weight: 500;margin-bottom:1.5em;}
.gnavi .menu li:last-child {margin-bottom:0;}
.gnavi .menu li a {color:#fff;background:none;letter-spacing: .1em;position:relative;display:block;}
.gnavi .menu li a span {font-size: .5em;margin-left:1em;}
.share_icon {text-align:center;padding: 5em 0;display: flex;justify-content: center;}
.share_icon li {margin: 0 1em;}
.share_icon li a {display: block;line-height: 1;}
.share_icon li a svg {fill: #fff;width: 1.5em;height: 1.5em;}
.share_icon li a span {width: 1.5em;height: 1.5em;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
.gnavi_logo {width:80%;margin:7em auto 4em;max-width: 300px;}

.fix_menu {display:block;width: 60px;height: 60px;position:fixed;right: 5px;top: 8px;z-index:910;}
.menu-trigger,
.menu-trigger span {display: inline-block;transition: all .2s;box-sizing: border-box;}
.menu-trigger {width: 60px;height: 60px;position: relative;}
.menu-trigger span {position: absolute;left: 0;right:0;margin: 0 auto;width: 40px;height: 1px;background-color: #fff;}
.menu-trigger span:nth-of-type(1) {top: 18px;}
.menu-trigger span:nth-of-type(2) {top: 28px;}
.menu-trigger span:nth-of-type(3) {bottom: 20px;}
.menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(10px) rotate(-45deg);transform: translateY(10px) rotate(-45deg);background-color:#fff;}
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {webkit-transform: translateY(-10px) rotate(45deg);transform: translateY(-10px) rotate(45deg);background-color:#fff;}

.inview {opacity: 0;transform: translate(0, 20px) ;transition : all 1000ms ease-out;}
.inview.in {opacity: 1;transform: translate(0, 0) ;}

.slidein_left {opacity: 1;transform: translate(30px, 0) ;transition : all 1000ms ease-out;}
.slidein_left.in {opacity: 1;transform: translate(0, 0) ;}
 
.slidein_right {opacity: 1;transform: translate(-30px, 0) ;transition : all 1000ms ease-out;}
.slidein_right.in {opacity: 1;transform: translate(0, 0) ;}
 
.fade {opacity: 0;transition : opacity 600ms ease-in;}
.fade.in {opacity: 1;}

.slick-track {margin: 0 auto;}
.slick-dots {text-align:center;}
.slick-dots li {display:inline-block; vertical-align:middle;width: 40px;height: 2px;margin: 0;}
.slick-dots li button {font-size: 0;background: none;border: none;outline: none;margin: 0;padding: 0;width: 100%;height: 2px;}
.slick-dots li button:before {content: "";width: 100%;height: 2px;background: #ccc;display: block;opacity: 1;}
.slick-dots li.slick-active button:before {background:#ef4b30;}
.slick-prev, .slick-next {width: 20px;height:auto;font-size: 0;line-height: 1;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);padding: 0;cursor: pointer;border:none;display:block;z-index: 10;}
.slick-prev {background: none;left: 5px;outline:none;}
.slick-next {background:none;right: 5px;outline:none;}
.slick-prev:before {content:"\f3d2";}
.slick-next:before {content:"\f3d3"; }
.slick-prev:before,.slick-next:before {font-family: ionicons;font-size:8vw;color:#fff;display:block;opacity:.5;}
.slick-disabled.slick-prev:before , .slick-disabled.slick-next:before {display:none;}
.slick-slide a {outline:none;}
.slide_list {padding-bottom: 4em;}
.slide-arrow {position: absolute;bottom: 0;left: 0;width: 3em;height: 3em;background: #000;display: flex;justify-content: center;align-items: center;font-size: .9em;}
.slide-arrow.next-arrow {left:calc(3em + 2px);}
.slide-arrow:before {content:"";font-family: "ionicons";font-size: 1.8em;color: #fff;line-height: 1;}
.slide-arrow.prev-arrow:before {content:"\f3d2";}
.slide-arrow.next-arrow:before {content:"\f3d3"; }
.slide-arrow.slick-disabled {background:#aaa;}

.remodal-wrapper {padding: 0;}
.remodal-overlay {background: rgba(255,255,255,.9);}
.remodal {padding:0;background:none;max-width: 880px;overflow: hidden;transform: none;margin:0;}
.remodal-close {top: 2.5%;left: 2%;}
.remodal_in {padding: 4em 4%;text-align:left;background:none;color:#fff;position: relative;}
.remodal-is-locked #wrap {filter: blur(5px);display:block;}
.close_icon {position: fixed;right: 15px;top: 20px;z-index: 1;border: none;background: none;outline: none;cursor: pointer;width: 40px;height: 30px;padding: 0;}
.close_icon span {position: absolute;right:0;top:0;margin: 0 auto;width: 40px;height: 0.15em;max-height:2px;background-color: #fff;border-radius:0;}
.close_icon span:nth-of-type(1) {-webkit-transform: translateY(15px) rotate(-45deg);transform: translateY(15px) rotate(-45deg);}
.close_icon span:nth-of-type(2) {webkit-transform: translateY(15px) rotate(45deg);transform: translateY(15px) rotate(45deg);width: 40px;}

.main {position: relative;}
.mainimg {width:100%;height:100dvh;background:#222;position:relative;display: flex;justify-content: center;align-items: center;}
.mainimg .kv {width: 100%;height:100%;position:relative;position:absolute;top:0;left:0;opacity: .4;}
.mainimg .kv .item {background-repeat: no-repeat;background-position:center 0;background-size:cover;width: 100%;height:100dvh;}
.mainimg .kv .img01 {background-image:url(../images/kv/kv_sp01.jpg);}
.mainimg .kv .img02 {background-image:url(../images/kv/kv_sp02.jpg);}
.mainimg .kv .img03 {background-image:url(../images/kv/kv_sp03.jpg);}
.mainimg .kv .img04 {background-image:url(../images/kv/kv_sp04.jpg);}
.top_header {position: relative;z-index: 1;}
.top_header .logo_top {width:50%;margin:0 auto 2em;max-width:300px;}
.top_header h2 {color: #fff;text-align: center;font-size: 1.1em;letter-spacing: .2em;}
.top_footer {position: absolute;bottom: 2em;left: 0;color: #fff;width:100%;display: flex;flex-flow: row-reverse;justify-content: space-between;padding:0 5%;}
.top_footer .share_icon {padding: 0;text-align: right;}
.top_footer .share_icon li {margin: 0 0 0 1em;}
.top_footer .copy {font-size: .8em;}

.subpage {background:#fff;}
.subpage .menu-trigger span {background-color: #222;}
.subpage .header {background: rgb(255 255 255 / 90%);backdrop-filter: blur(2px);}
.subpage .header h1 {filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(136deg) brightness(93%) contrast(91%);}
.subpage .main {padding-top: 80px;}
.subpage .gnavi {background: rgb(16 16 16 / 85%);backdrop-filter: blur(10px);}

.page_header {height: 15em;display: flex;justify-content: center;align-items: center;color: #fff;margin-bottom: 2em;position:relative;background:#222;}
.page_header h2 {font-family: 'Crimson Text', serif;font-weight: 400;font-size: 1.6em;text-align: left;line-height: 1;position:relative;z-index:1;letter-spacing:.1em;}
.page_header span {content:"";background-repeat:no-repeat;background-position:center;background-size:cover;background-color:#000;display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity: .5;}
.page_body {padding: 0 5%;}

.catlist {margin-bottom: 2em;padding: 0 5%;display: flex;font-size:1.05em;}
.catlist li {margin-right: 2em;}
.catlist li a {display:block;position:relative;line-height:2.5;padding-right:1em;color:#222;}
.catlist li a:after {content: "\f3d4";font-family: 'ionicons';position: absolute;right:0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}

/*INFORMATION*/
.information .page_header {padding: 2em 5% 0;height: auto;display: block;background: none;color: #222;}
.information .page_header h2 {font-family: 'Crimson Text', serif;font-weight: 400;font-size: 1.6em;text-align: left;line-height: 1;}
.information .page_header h2:after {content:"";border:solid #222;border-width:1px 0 0 0;width:1em;display:block;margin:1em 0;}
.info_list li {padding-bottom: 2em;margin-bottom: 2em;border-bottom: 1px solid #ddd;}
.info_list li:last-child {border-bottom:none;}
.info_list li h3 {font-weight: 500;font-size: 1.1em;}
.info_list li .date {font-size:.8em;} 
.info_list li .details {margin-top: 1em;}
.viewmore a {color:#222;display:block;font-family: 'Crimson Text', serif;font-weight:600;padding-right:2em;position:relative;line-height: 1;display: inline-block;}
.viewmore a .arrow {right:0;}
.viewmore_box {margin-top: 1em;}
.viewmore_box a {display: inline-block;background: #fff;color: #333;line-height: 3;padding: 0 4em;font-family: 'Crimson Text', serif;font-weight: 600;border: 1px solid #222;position:relative;z-index: 1;}

/*PRODUCT*/
.product .page_body h2{background: #222;color: #fff;padding: .5em 1em;font-size: 1.2em;margin-bottom: 1em;}
.product_list li {padding-bottom: 2em;margin-bottom: 2em;border-bottom: 1px solid #ddd;}
.product_list li:last-child {border-bottom:none;}
.product_list li h3 {font-weight: 500;font-size: 1.3em;}
.product_list li .details {margin-top: 1em;position: relative;padding-bottom: 3em;}
.product_list li .details .img {width: 75%;margin: 1em auto 0;}
.product_list li .details .img span {display:block;background-repeat:no-repeat;background-position:center 0;background-size:cover;padding-top:100%;}
.product_list li .details .text {white-space: pre-line;}
.product_list li .details .viewmore {text-align: right;margin-top: 2em;font-size: 1.1em;position: absolute;bottom: 0;right: 0;}
.arrow {position:absolute;right:1em;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);margin-top: .1em;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);}
.arrow:before {content:"";border:solid #222;border-width:1px 0 0 0;width:1.5em;display: block;}
.arrow:after {content:"";border:solid #222;border-width:1px 0 0 0;width:.5em;display: block;transform: rotate(45deg);position: absolute;right: 0;top: -.2em;}

/*ブログページ*/
.blog_page {margin-bottom: 5em;}
.blog_page img {width: 100%;height: auto;}
.blog_page * {max-width:100%;}
.blog_page h2 {background: #000;color: #fff;padding: .8em 1em;font-size: 1.2em;margin-bottom: 1em;margin-top: 2em;}
.blog_page h3 {font-weight: 500;border-left: 3px solid #222;font-size: 1.1em;padding-bottom: .5em;margin-bottom: .5em;background: #f3f3f3;padding: .5em 1em;margin-top: 2em;}
.wp-caption-text {font-size: .9em;margin-top:.5em;;}
.wp-caption {margin:1em 0;}

.footer {padding: 3em 5%;}
.footer_bottom {width: 100%;display: flex;flex-flow: row-reverse;justify-content: space-between;}
.footer_bottom .share_icon {padding: 0;text-align: right;}
.footer_bottom .share_icon li {margin: 0 0 0 1em;}
.footer_bottom .share_icon li a svg {fill: #222;}
.footer_bottom .copy {font-size: .8em;}
.footer_menu {display: flex;flex-wrap: wrap;margin: 3em 0;font-family: 'Crimson Text', serif;text-align: center;}
.footer_menu li {width:50%;}
.footer_menu li a {color:#222;}
.footer_menu li a span {display:none;}
.footer_logo {width: 35%;max-width: 130px;margin: 0 auto;filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(136deg) brightness(93%) contrast(91%);}
@media screen and (min-width:375px) {
}

@media screen and (min-width:568px) {
body {font-size:2.4vw;}
}

@media screen and (min-width:768px) {
.pc {display:block;}
.sp {display:none;}

body {font-size:15px;line-height: 1.7;}

.header {height:80px;}
.fix_menu {transform: scale(1.1);transform-origin: top right;}
.header h1 {max-width: 230px;}
.gnavi .menu {width: 25em;margin: 0 auto;font-size: 1.1em;}
.gnavi .share {padding: 2em 0;font-size: 1.1em;}

.page_header h2 {font-size: 2em;}
.page_header {height: 20em;}

/*INFORMATION*/
.information .page_header {padding: 3em 5% 0;}
.info_list li {padding-bottom: 3em;margin-bottom: 3em;}
.info_list li h3 {font-size: 1.2em;}

/*PRODUCT*/
.product .page_body {margin-bottom: 3em;}
.product_list {display: flex;flex-wrap: wrap;width: 104%;margin-left: -2%;}
.product_list li {border-bottom: none;width: 50%;padding: 0 2%;}

/*ブログページ*/
.blog_page {max-width: 960px;margin: 0 auto 8em;}
.blog_page h2 {font-size: 1.3em;}
.blog_page h3 {font-size: 1.2em;}

.footer {display: flex;justify-content: space-between;flex-wrap: wrap;}
.footer_logo {margin: 0;}
.footer_menu {margin: 0;text-align:left;width: 18em;}
.footer_bottom {margin-top:3em;}
}
@media screen and (min-width:1024px) {
.mainimg .kv .img01 {background-image:url(../images/kv/kv_pc01.jpg);background-position:0 bottom}
.mainimg .kv .img02 {background-image:url(../images/kv/kv_pc02.jpg);}
.mainimg .kv .img03 {background-image:url(../images/kv/kv_pc03.jpg);}
.mainimg .kv .img04 {background-image:url(../images/kv/kv_pc04.jpg);}
.top_footer {padding: 0 3%;}
}
@media screen and (min-width:1025px) {

.viewmore a {overflow:unset;}
.viewmore a:after {content:"";border:solid #000;border-width:1px 0 0 0;width:0;display:block;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);position:absolute;bottom: -.5em;left:0;}
.viewmore a:hover:after {width:100%;}

}

@media screen and (min-width:1200px) {
body {font-size: 16px;}
.sp_navi {display:none;}
.pc_navi {display:block;}

.top_header {font-size: 1.1em;}

.subpage .main {padding-top:80px;display:block;}
.page_header h2 {font-size:2.4em;}
.page_body {padding: 0 5%;}
.catlist {padding: 0 5%;}

/*INFORMATION*/
.subpage .main.information {padding-top: 160px;display: flex;}
.information .page_header {padding: 0 0 0 5%;}
.information .page_body {padding: 0 5% 0 10%;}

.product_list li .details .img {width: 100%;}
.product_list li {width: 33.33%;}

/*ブログページ*/
.blog_page {padding-right:0;padding-left:0;}
}
@media screen and (min-width:1600px) {
.product_list li {width:25%;}
}

@media (orientation: landscape) and (max-width: 900px) {
.gnavi > div {height: auto;}
}