@charset "utf-8";

@media screen and (max-width: 599px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 901px) {}

/*----------------------------------------------------------
   normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
----------------------------------------------------------*/
/* Document */
html{line-height:1.15;-webkit-text-size-adjust:100%}
/* Sections */
body{margin:0}
main{display:block}
/* Grouping content */
hr{box-sizing:content-box;height:0}
pre{font-family:monospace,monospace;font-size:1em}
/* Text-level semantics */
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
/* Embedded content */
img{border-style:none}
/* Forms */
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button; appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:0.35em 0.75em 0.625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield; appearance:textfield; outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* Interactive */
details{display:block}
summary{display:list-item}
/* Misc */
template{display:none}
[hidden]{display:none}

/* reset
----------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p,table,th,td,time{margin:0;padding:0;font-size:inherit}
h1,h2,h3,h4,h5,h6,em,b{font-weight:inherit}
em,b,i{font-style:inherit}
li{list-style:none}
figure{margin:0}
img{vertical-align:top;background-color:rgba(255,255,255,.01)}
table{border-collapse:collapse;border-spacing:0}
input,textarea{font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}
select{font-size:16px}
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder{color:transparent}
input:focus::-moz-placeholder,textarea:focus::-moz-placeholder{color:transparent}
input:focus::-ms-input-placeholder,textarea:focus::-ms-input-placeholder{color:transparent}
input:focus::placeholder,textarea:focus::placeholder{color:transparent}
button{margin:0;padding:0;border:0;outline:none;background:transparent;box-shadow:0 0 0 0 transparent;cursor:pointer}

/*----------------------------------------------------------
   base
----------------------------------------------------------*/
:root {--w_sp:375;--w_max:1024}
html{position:relative;height:-webkit-fill-available;font-size:min(2.6667vw,62.5%);font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Droid Sans", "Yu Gothic", YuGothic, "\30E1\30A4\30EA\30AA", Meiryo, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN", "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif;-webkit-font-smoothing:antialiased}
body{text-align:center;position:relative;min-height:100dvh;min-height:-webkit-fill-available;background-color:#fff;color:#0d0000;font-size:1.6rem;line-height:1.75;-webkit-tap-highlight-color:transparent}
a,
button{display:inline-block;color:inherit;text-decoration:none;outline:none;opacity:1;transition:all .3s;backface-visibility:hidden}
a:hover,
button:hover{opacity:.5}
a::after,
a::before,
button::after,
button::before{transition:all .3s;backface-visibility:hidden}
a img{vertical-align:top;background-color:rgba(255,255,255,.01)}
#sp-flg,
#tb-flg{display:block;width:0;height:0;font-size:0;line-height:0}
.sp-show{display:block}
.tb-show{display:none}
.pc-show{display:none}
.pc-hide{display:block}
.noscript-text{padding:1em}
@media screen and (min-width: 768px) {
	html{font-size:clamp(53.13%,calc(53.13% + ((1vw - 0.48em) * 0.5879)),62.5%)/* 768px => 1023px | 8.5px => 10px */}
	#sp-flg{display:none}
	.sp-show{display:none}
	.pc-show{display:block}
}
@media screen and (min-width: 902px) {
	#tb-flg{display:none}
	.tb-show{display:block}
	.pc-hide{display:none}
}

/* loading */
#contentArea{opacity:0;transition:opacity 1.0s cubic-bezier(.4,0,.2,1)}
#l-loading{z-index:998;display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#fff;visibility:visible;opacity:1;transition:visibility .5s linear 0s,opacity .5s cubic-bezier(.4,0,.2,1)}
#l-loading .loading-inner{text-align:center;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);height:10px}
.is-loaded #contentArea{opacity:1}
.is-loaded #l-loading{visibility:hidden;opacity:0}
.loading-animation,
.loading-animation::before,
.loading-animation::after{display:inline-block;width:10px;height:10px;background-color:#c00;border-radius:50%;transform-origin:center center}
.loading-animation{position:relative;opacity:1;animation:loading_anime 1s infinite linear}
.loading-animation::before,
.loading-animation::after{content:'';position:absolute;top:0;opacity:.25}
.loading-animation::before{left:20px;animation:loading_anime_before 1s infinite linear}
.loading-animation:after{left:-20px;animation:loading_anime_after 1s infinite linear}

/*----------------------------------------------------------
   slick
----------------------------------------------------------*/
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,
.slick-slider .slick-track{transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:after,
.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}

.slick-dotted.slick-slider{margin-bottom:3.6rem}
.slick-dots{position:absolute;bottom:-3.6rem;left: 0;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;font-size:0}
.slick-dots li{position:relative;display:inline-block;width:1.2rem;height:1.2rem;margin:0 6px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:1.2rem;height:1.2rem;padding:0;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,
.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,
.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{position:absolute;top:0;left:0;width:1.2rem;height:1.2rem;content:'';text-align:center;background-color:#867f7f;border-radius:50%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li.slick-active button:before{opacity:1;background-color:#c00}

/*----------------------------------------------------------
   common layout
----------------------------------------------------------*/
#contentArea{position:relative}
#contentArea::after{content:'';position:absolute;bottom:0;left:calc(50% - 3.2rem);width:6.4rem;height:2px;background-color:#e57f7f}
#mainArea{overflow: hidden;min-height:40.0rem;padding:9.6rem 0 1.2rem}
section{position:relative;display:block}
section::after{clear:both;content:'';display:block}
.wrap,
.sectionA,
.sectionB,
.sectionC{text-align:left;position:relative;margin-right:auto;margin-left:auto}
.wrap,
.sectionA,
.sectionC{max-width:1024px;padding-left:min(5.333%,26px);padding-right:min(5.333%,26px)}
.sectionB{max-width:1076px}
.sectionC{padding-top:4.8rem}
.sectionC::before{content:'';position:absolute;top:0;left:min(5.333%,26px);width:calc(100% - min(5.333%,26px) - min(5.333%,26px));height:2px;background-color:#e57f7f}
.wrap *,
.sectionA *,
.sectionB *,
.sectionC *{box-sizing:border-box}

/* header
----------------------------------------------------------*/
#headWrap{z-index:999;position:fixed;top:0;left:0;width:100%;height:48px;background-color:#312626}
#headWrap::before{content:'';z-index:99;position:fixed;top:0;left:0;width:calc(var(--vw,1vw) * 100);height:100dvh;visibility:hidden;opacity:0}
.is-opened #headWrap::before{visibility:visible;opacity:1}
#top{float:left;display:inline}
#top a{display:block;text-indent:-9999px;width:58px;height:48px;background:url(../img/common/logo_hd.png) no-repeat 0 17px}
#top a:hover{opacity:1}

@media screen and (max-width: 901px) {
	#header-btn{z-index:550;position:fixed;top:0;right:15px;display:block;width:48px;height:48px;cursor:pointer}
	#header-btn span{text-indent:100%;font-size:0;overflow:hidden}
	#header-btn span,
	#header-btn::before,
	#header-btn::after{content:'';position:absolute;top:calc(50% - 1px);right:0;left:0;display:block;width:28px;height:2px;margin:auto;border-radius:1px;background-color:#fff}
	#header-btn::before{margin-top:8px}
	#header-btn::after{margin-top:-8px}
	#header-btn.is-active span{display:none}
	#header-btn.is-active::before{width:38px;transform:translate(0,-8px) rotate(-45deg);background-color:#c00}
	#header-btn.is-active::after{width:38px;transform:translate(0,8px) rotate(45deg);background-color:#c00}
	#headWrap .js-menu_target{z-index:100;overflow-y:auto;position:fixed;top:0;right:0;bottom:0;width:min(100vw,220px);height:100dvh;box-shadow:-10px 0 8px -2px rgba(10,10,10,0.1);background-color:#fff;color:#0d0000;visibility:visible;transform:translate3d(105vw,0,0);transition:transform .5s cubic-bezier(.4,0,.2,1);-webkit-overflow-scrolling:touch}
	#headWrap .js-menu_target.is-active{transform:translate3d(0,0,0)}
	#hdMenu{margin:8.0rem 2.0rem 6.0rem 4.0rem;line-height:2;font-weight:700}
	#hdMenu li+li{margin-top:.5em}
	#hdMenu ul+ul{margin-top:2em;font-size:1.5rem}
}
@media screen and (min-width: 902px) {
	#header-btn{display:none}
	#header-wrap{padding-left:94px}
	#hdMenu{display:flex;justify-content:space-between;align-items:center;width:100%;height:48px}
	#hdMenu ul{display:flex;color:#e6e6e6;font-size:1.4rem;line-height:1.2;font-weight:700}
	#hdMenu #hdproducts li{margin-right:24px}
	#hdMenu #hdcommons{flex-direction:row-reverse}
	#hdMenu #hdcommons li{margin-left:36px}
}

/* footer
----------------------------------------------------------*/
#footerWrap{margin-top:11.8rem;padding-top:2.4rem;background:url(../img/common/bg_ft.png) repeat 0 0}
#ftlogo a{display:block;text-indent:-9999px;width:13.2rem;height:4.8rem;background:url(../img/common/logo_ft.png) no-repeat 0 0 / cover}
#ftlogo a:hover{opacity:1}
#ftMenu{position:relative;margin:3.7rem 0 1.8rem}
#ftMenu ul:nth-of-type(1){margin-bottom:2.4rem}
#ftMenu ul li{font-size:1.4rem;line-height:3.6rem}
#footerWrap .supportcontact{margin-top:.6rem;line-height:2.2rem}
#footerWrap .supportcontact dt{width:5.8rem}
#footerWrap .supportcontact dd{margin:-2.2rem 0 2px 6rem;font-weight:700}
#footerWrap .copyright{text-align:right;padding:1.2rem 0 2rem;font-size:1.2rem}
@media screen and (min-width: 600px) {
	#ftMenu ul:nth-of-type(1){position:absolute;top:0;left:0}
	#ftMenu ul:nth-of-type(2),#ftMenu ul:nth-of-type(3){margin-left:min(40vw,25.6rem)}
}
@media screen and (min-width: 768px) {
	#footerWrap{padding-top:0}
	#ftlogo{position:absolute;top:4.8rem}
	#ftMenu{display:flex;padding-left:min(calc(256 / var(--w_max) * 100vw),25.6rem)}
	#ftMenu ul:nth-of-type(1){position:relative}
	#ftMenu ul:nth-of-type(1),
	#ftMenu ul:nth-of-type(2),
	#ftMenu ul:nth-of-type(3){width:min(calc(256 / var(--w_max) * 100vw),25.6rem);margin:3.7rem 0 0}
}

#pagetop{text-align:left;position:relative;margin-right:auto;margin-left:auto;max-width:1076px}
#pagetop a{position:absolute;top:0;right:16px;display:block;text-indent:-9999px;width:27px;height:24px;background:url(../img/common/ico_sprite.png) no-repeat 0 0;transition:none}
#pagetop a:hover{background-position:100% 0;opacity:1}

/* module
----------------------------------------------------------*/
.image img,
.photo img,
figure img,
picture img { width: 100%; height: auto;}

.skip { position: absolute; left: -9999px;}
.hide { display: none!important;}
.show { display: block!important;}
.show-fx { display: flex!important;}
.left { float: left; display: inline;}
.right { float: right; display: inline;}
.clear { clear: both;}
.clearfix::after { clear: both; content: ''; display: block;}
.txtr { text-align: right;}
.txtc { text-align: center;}
.ib { display: inline-block;}

.sp01 { margin-top: .4rem;}
.sp02 { margin-top: .8rem;}
.sp03 { margin-top: 1.3rem;}
.sp04 { margin-top: 1.5rem;}
.sp05 { margin-top: 1.8rem;}
.sp06 { margin-top: 2.8rem;}

.note{font-size:1.2rem;line-height:1.5}
.caption{margin-top:.5rem;font-size:1.2rem;line-height:1.5}
.grid{display:flex;flex-wrap:wrap;}

/* title */
.pagetitle{position:relative;padding-top:4.2rem;padding-bottom:2.8rem;font-size:2.8rem;line-height:1.3;font-weight:700}
.pagetitle::before{content:'';position:absolute;top:0;left:0;width:6.4rem;height:2px;background-color:#e57f7f}
.sectionA.pagetitle::before{left:min(5.333%,26px)}
.titleA{padding-bottom:3.0rem;font-size:2.4rem;line-height:1.3;font-weight:700}
.titleB{padding-bottom:2.8rem;font-size:2.0rem;line-height:1.4;font-weight:700}
.titleC{padding-bottom:1.0rem;font-size:1.2rem;line-height:1.3}

/* list */
.col03,
.col04{display:flex;flex-wrap:wrap}
.col03>li,
.col04>li{width:100%}
@media screen and (min-width: 600px) {
	.col03{margin-right:max(-5.333%,-2.6rem);margin-left:max(-5.333%,-2.6rem)}
	.col03>li{width:calc(50% - min(calc(32 / var(--w_max) * 100vw),3.2rem));margin-right:min(calc(16 / var(--w_max) * 100vw),1.6rem);margin-left:min(calc(16 / var(--w_max) * 100vw),1.6rem)}
	.col04>li{width:calc(100% / 2)}
}
@media screen and (min-width: 768px) {
	.col03>li{width:calc((100% / 3) - min(calc(32 / var(--w_max) * 100vw),3.2rem))}
	.col04>li{width:calc(100% / 3);}
}
@media screen and (min-width: 902px) {
	.col04>li{width:calc(100% / 4);}
}

ul.disc{padding:0 0 0 1.8rem}
ul.disc li{list-style:disc}

/* btn */
a.boxbtn{text-align:center;display:block;height:4.8rem;background-color:#312626;color:#fff;line-height:4.8rem;border-radius:2px}
a.boxbtn span{position:relative;display:inline-block;margin:0 4rem;padding:0 10px;font-weight:700}
a.boxbtn span::before{content:'';position:absolute;top:0;bottom:0;left:0;margin:auto;background:#fff;height:6px;width:4px;clip-path:polygon(0 0,100% 50%,0 100%)}

/* table */
.table-wrap{position:relative;overflow-x:auto;white-space:nowrap;padding-bottom:1rem}
.js-scroll-hint{position:absolute;top:2.5rem;left:50%;transform:translate(-50%,0);padding:1rem;background:rgba(0,0,0,0.5);color:#fff;font-size:1.6rem;font-weight:700;line-height:1.4;display:none}
.js-scroll-hint.is-show{display:block}
table.tableA{width:max(100%,970px);border-bottom:1px solid #bfbfbf}
table.tableA th{padding:.7rem;border-top:1px solid #bfbfbf;background-color:#fff;font-weight:400}
table.tableA td{padding:.7rem .5rem;border-top:1px solid #bfbfbf}
.table-wrap+span{display:inline-block;margin-top:1em;}

/* youtube */
.youtube{position:relative;width:min(100%,720px);margin:0 auto}
.youtube::before{content:'';display:block;padding-top:56.25%}
.youtube iframe,
.youtube .ytPlayerReady{position:absolute;top:0;right:0;width:100%;height:100%}
.youtube .ytPlayerReady img{width:100%;height:100%}
.youtube .ytPlayerReady::after{z-index:5;content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(../img/detail/fig_movie.png) no-repeat 50% 50% / cover;cursor:pointer}

/* js
----------------------------------------------------------*/
/* fade */
.js-fade{opacity:0;transform:translate3d(0,15px,0);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)}
.js-fade.is-active{opacity:1;transform:translate3d(0,0,0)}

/* keyframes
----------------------------------------------------------*/
@keyframes loading_anime {
	0%{opacity:1}
	33%{opacity:.25}
	66%{opacity:.25}
	100%{opacity:1}
}
@keyframes loading_anime_before {
	0%{opacity:.25}
	33%{opacity:1}
	66%{opacity:.25}
}
@keyframes loading_anime_after {
	33%{opacity:.25}
	66%{opacity:1}
	100%{opacity:.25}
}
@keyframes show {
	0%{opacity:0;visibility:hidden}
	100%{opacity:1;visibility:visible}
}
@keyframes hide {
	0%{opacity:1;visibility:visible}
	100%{opacity:0;visibility:hidden}
}