@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url("../../../en/css/mtg.css");
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
@import url("../../../en/css/howto.css");
body, img {
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

body {
  -webkit-text-size-adjust: 100%;
}

img {
  -webkit-touch-callout: none;
}

/* MTG */
/*------ how to temporary ------*/
/*------ reset ------*/
body,div,pre,p,blockquote,form,fieldset,input,textarea,select,option,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object{margin: 0;padding: 0;vertical-align: baseline;}
h1,h2,h3,h4,h5,h6 {font-style: normal;font-weight: normal;font-size: 100%;}
table{border-spacing:0;}
* html table{border-collapse:collapse;}
*:first-child+html table{border-collapse:collapse;}
caption,th{text-align:left; font-weight:normal;}
table,th,td,img {border:0;}
img,input{vertical-align:top;}
q:before,q:after{content:'';}
strong,em,address{font-weight:normal;font-stretch:normal;font-style:normal;}
ul{list-style:none;}
img, div { behavior: url(../../../en/css/iepngfix.htc) }
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}


/*--- default(forRefa) ---*/
table{font-weight:normal;line-height:1.5;}

/*--- elements ---*/
.elInline {display: inline;}
.elBlock {display: block;}

/*--- text-align ---*/
.center{text-align: center;}
.left {text-align:left;}
.right {text-align:right;}

/*--- float---*/
.fl {float: left;}
.fr {float: right;}

/*--- color---*/
.red   {color: #f00;}
.blue  {color: #ff0;}
.green {}

/*--- clear ---*/
.clear {clear: both;}
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {min-height: 1px;}
* html .clearfix {zoom:1;}
*:first-child+html .clearfix {zoom:1;}

/*--- margin ---*/
.m0  {margin: 0px!important;}
.m5  {margin: 5px!important;}
.m10 {margin:10px!important;}
.m15 {margin:15px!important;}
.m20 {margin:20px!important;}
.m25 {margin:25px!important;}
.m30 {margin:30px!important;}
.m35 {margin:35px!important;}
.m40 {margin:40px!important;}
.m45 {margin:45px!important;}
.m50 {margin:50px!important;}

.mt0  {margin-top: 0px!important;}
.mt5  {margin-top: 5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt35 {margin-top:35px!important;}
.mt40 {margin-top:40px!important;}
.mt45 {margin-top:45px!important;}
.mt50 {margin-top:50px!important;}

.mb0  {margin-bottom: 0px!important;}
.mb5  {margin-bottom: 5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px!important;}
.mb30 {margin-bottom:30px!important;}
.mb35 {margin-bottom:35px!important;}
.mb40 {margin-bottom:40px!important;}
.mb45 {margin-bottom:45px!important;}
.mb50 {margin-bottom:50px!important;}
.mb60 {margin-bottom:60px!important;}
.mb70 {margin-bottom:70px!important;}

.ml0  {margin-left: 0px!important;}
.ml5  {margin-left: 5px!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml25 {margin-left:25px!important;}
.ml30 {margin-left:30px!important;}
.ml35 {margin-left:35px!important;}
.ml40 {margin-left:40px!important;}
.ml45 {margin-left:45px!important;}
.ml50 {margin-left:50px!important;}

.mr0  {margin-right: 0px!important;}
.mr5  {margin-right: 5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}
.mr25 {margin-right:25px!important;}
.mr30 {margin-right:30px!important;}
.mr35 {margin-right:35px!important;}
.mr40 {margin-right:40px!important;}
.mr45 {margin-right:45px!important;}
.mr50 {margin-right:50px!important;}

.ma  {margin-left: auto!important; margin-right: auto!important;}
.mar {margin-right: auto!important;}
.mal {margin-left: auto!important; }

/*--- padding ---*/
.p0  {padding: 0px!important;}
.p5  {padding: 5px!important;}
.p10 {padding:10px!important;}
.p15 {padding:15px!important;}
.p20 {padding:20px!important;}
.p25 {padding:25px!important;}
.p30 {padding:30px!important;}
.p35 {padding:35px!important;}
.p40 {padding:40px!important;}
.p45 {padding:45px!important;}
.p50 {padding:50px!important;}

.pt0  {padding-top: 0px!important;}
.pt5  {padding-top: 5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt20 {padding-top:20px!important;}
.pt25 {padding-top:25px!important;}
.pt30 {padding-top:30px!important;}
.pt35 {padding-top:35px!important;}
.pt40 {padding-top:40px!important;}
.pt45 {padding-top:45px!important;}
.pt50 {padding-top:50px!important;}

.pb0  {padding-bottom: 0px!important;}
.pb5  {padding-bottom: 5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!important;}
.pb20 {padding-bottom:20px!important;}
.pb25 {padding-bottom:25px!important;}
.pb30 {padding-bottom:30px!important;}
.pb35 {padding-bottom:35px!important;}
.pb40 {padding-bottom:40px!important;}
.pb45 {padding-bottom:45px!important;}
.pb50 {padding-bottom:50px!important;}

.pl0  {padding-left: 0px!important;}
.pl5  {padding-left: 5px!important;}
.pl10 {padding-left:10px!important;}
.pl15 {padding-left:15px!important;}
.pl20 {padding-left:20px!important;}
.pl25 {padding-left:25px!important;}
.pl30 {padding-left:30px!important;}
.pl35 {padding-left:35px!important;}
.pl40 {padding-left:40px!important;}
.pl45 {padding-left:45px!important;}
.pl50 {padding-left:50px!important;}

.pr0  {padding-right: 0px!important;}
.pr5  {padding-right: 5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr20 {padding-right:20px!important;}
.pr25 {padding-right:25px!important;}
.pr30 {padding-right:30px!important;}
.pr35 {padding-right:35px!important;}
.pr40 {padding-right:40px!important;}
.pr45 {padding-right:45px!important;}
.pr50 {padding-right:50px!important;}



body{
    height:100%;
}


ol, ul{
    list-style:none;
}


/*以下明朝体にアンチエイリアスをかけるハック*/
.itemTxt, .itemSpecTtl, .storySubTtl, .itemInfoTtl, .otherPageTtl, .otherPageSubTtl, .relationTtl, .itemNavBtn li a {
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1.01);
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1.01);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
-o-transform-origin: 0 0;
-o-transform: scale(1, 1.01);
font-weight:bold;
}
.lineNavTtl, .faqTtl, .pinkTxt {

}


header,footer{
    font-family: "Noto Sans Japanese", sans-serif;
}
/* =========================================================

 header

========================================================= */

/* sp
......................................................... */
@media screen and (max-width: 766px) {

    /* header */
    header {
        background-color: #fff;
    }
    .headerOtl {
        margin: 0 0 20px;
        height: 50px;
        border-bottom: solid 1px #616161;
    }
    #header {
        width: 960px;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
    }
    /* globalNav */
    #globalNav {
        display: none;
    }
    /* modal */
    .modalNavTtl {
        font-family: "Times New Roman", serif!important;
        font-size: 22px;
        font-weight: bold;
        padding: 10px;
        height: 30px;
        border-bottom: solid 1px #616161;
    }
    #modalNav {
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;
    }
    #modalNav li {
        border-bottom: solid 1px #d5d6d8;
        background: #e7e6e4;
    }
    #modalNav li a {
        display: block;
        padding: 15px;
    }
    #modalNav li a:link {
        color: #1d1d1d;
        text-decoration: none;
    }
    #modalNav li a:hover {
        color: #ccc;
        text-decoration: none;
    }
    #modalNav li a:visited {
        color: #1d1d1d;
        text-decoration: none;
    }
    /* layout */
    .spLogo {
        position: absolute;
        top: 12px;
        left: 50%;
        margin: 0 0 0 -32px;
    }
    .spLogo img {
        width: 64px;
        height: 23px;
    }
    .menuBtn {
        position: absolute;
        top: 17px;
        left: 15px;
    }
    .menuBtn img {
        width: 24px;
    }
    .mobile .remodal{
        height:100%;
        overflow: scroll;
    }
        /* online */
    .top_link {
        display: none;
    }
    .menuRt {
		font-size:11px;
		font-family:'Times New Roman', Times, serif;
        position: absolute;
        top: 15px;
        right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
    }
	.section .menuRt {
		font-size:11px;
		font-family:'Times New Roman', Times, serif;
        position: absolute;
        top: 15px;
        right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
	}
	.actualsize_link .menuRt {
		font-size:11px;
		font-family:'Times New Roman', Times, serif;
        position: absolute;
        top: 15px;
        right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
	}
}

/* tab
......................................................... */
@media screen and (min-width: 767px) and (max-width: 1279px) {
    /* header */
    header {
        background-color: #fff;
    }
    .headerOtl {
        margin: 0 0 50px;
        height: 50px;
        border-bottom: solid 1px #616161;
    }
    #header {
        width: 960px;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
    }
    /* globalNav */
    #globalNav {
        display: none;
    }
    /* modal */
    .modalNavTtl {
        font-family: "Times New Roman", serif!important;
        font-size: 22px;
        font-weight: bold;
        padding: 10px;
        height: 30px;
        border-bottom: solid 1px #616161;
    }
    #modalNav {
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;
    }
    #modalNav li {
        border-bottom: solid 1px #d5d6d8;
        background: #e7e6e4;
    }
    #modalNav li a {
        display: block;
        padding: 15px;
    }
    #modalNav li a:link {
        color: #1d1d1d;
        text-decoration: none;
    }
    #modalNav li a:hover {
        /* color: #ccc; */
        text-decoration: none;
    }
    #modalNav li a:visited {
        /* color: #1d1d1d; */
        text-decoration: none;
    }
    /* layout */
    .spLogo {
        position: absolute;
        top: 12px;
        left: 50%;
        margin: 0 0 0 -32px;
    }
    .spLogo img {
        width: 64px;
        height: 23px;
    }
    .menuBtn {
        position: absolute;
        top: 17px;
        left: 15px;
    }
    .menuBtn img {
        width: 24px;
    }
    .mobile .remodal{
        height:100%;
        overflow: scroll;
    }
        /* online */
    .top_link {
        display: none;
    }
    .menuRt {
	font-size: 11px;
	font-family: 'Times New Roman', Times, serif;
	position: absolute;
    top: 14px;
	right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
    }
	.section .menuRt {
		font-size:11px;
		font-family:'Times New Roman', Times, serif;
        position: absolute;
    top: 14px;
        right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
	}
	.actualsize_link .menuRt {
		font-size:11px;
		font-family:'Times New Roman', Times, serif;
        position: absolute;
    top: 14px;
        right: 2%;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
	}
}



/* pc
......................................................... */

@media screen and (min-width: 1280px) {
    /* header */
    header {
        background-color: #fff;
    }
    .headerOtl {
        margin: 0 0 100px;
        padding: 20px 0;
        border-bottom: solid 1px #616161;
    }
    #header {
        width: 960px;
        max-width: 100%;
        height: 40px;
        margin: 0 auto;
    }
    /* globalNav */
    #globalNav {
        width: 100%;
        font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;
        font-size: 13px;
        font-weight: bold;
        position: relative;
    }
    #globalNav li {
        position: absolute;
        top: 29px;
        line-height: 1;
    }
    #globalNav #navBrandstory{
        /*left: 80px;*/
	left: 30px;
    }
    #globalNav #navItem{
        /*left: 284px;*/
	left: 156px;
	/*left: 50px;*/
    }
    #globalNav #navLogo{
        left:50%;
        margin-left: -52px;
        top: 4px;
    }
    #globalNav #navNews{
        /*left: 597px;*/
	/*left: 300px;*/
	left: 790px;
    }
    #globalNav #navFaq{
        /*left: 717px;*/
	/*left: 615px;*/
	left: 590px;
    }
	#globalNav #navHowto{
        /*left: 717px;*/
	/*left: 717px;*/
	left: 285px;
    }
    #globalNav #navStore{
        /*left: 823px;*/
	/*left: 870px;*/
	left: 680px;
    }
    #globalNav li a{
        font-weight: normal;
    }
    #globalNav li a:link {
        color: #1d1d1d;
        text-decoration: none;
    }
    #globalNav li a:visited {
        color: #1d1d1d;
        text-decoration: none;
    }
    #globalNav li a:hover {
        color: #cccccc;
        text-decoration: none;
    }
    #globalNav li.logo a:hover {
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
    }
    /* layout */
    .spLogo {
        display: none;
    }
    .menuBtn {
        display: none;
    }
    /* header EC Link */
    /* online */
    .top_link {
	/*width: 1100px;*/
	margin: 0px 20px;
	padding:0;
	font-size: 15px;
	font-family: "Noto Sans Japanese", sans-serif;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
    }
	.top_link li {
	float:right;
	font-size: 12px;
	font-family: 'Times New Roman', Times, serif;
	margin-top: 10px;
	}
	.faq .top_link {
	width: 1100px;
	margin: 0px auto;
	padding:0;
	font-size: 15px;
	font-family: "Noto Sans Japanese", sans-serif;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
    }
	.section .top_link li {
	float:right;
	font-size: 12px;
	font-family: 'Times New Roman', Times, serif;
	margin-top: 10px;
	}
	.actualsize_link .top_link li {
	/*width: 1100px;*/
	margin: 0px;
	padding:0;
	font-size: 15px;
	font-family: "Noto Sans Japanese", sans-serif;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	line-height: 200%;
	}
	.actualsize_link .top_link li {
	float:right;
	font-size: 12px;
	font-family: 'Times New Roman', Times, serif;
	margin-top: 10px;
	}
    .menuRt {
        display: none !important;
    }
}

.top_link img {
	margin-right:5px;
	vertical-align:middle;
}

.top_link a:link { color: #333333; text-decoration: none; }
.top_link a:visited { color: #333333; }
.top_link a:hover { color: #cccccc;filter: alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5; }
.top_link a:active { color: #cccccc; }

.menuRt a:link { color: #333333; text-decoration: none; }
.menuRt a:visited { color: #333333; }
.menuRt a:hover { color: #cccccc;filter: alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5; }
.menuRt a:active { color: #cccccc; }

/* ----------------------------------------
  スライダー 前後ボタン
---------------------------------------- */
.btn-slider-pager {
  border: none;
  width: 8px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: url("/images/common/icon-slider-arrow.svg") no-repeat 0 50%;
  background-size: 8px auto;
  cursor: pointer;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.btn-slider-pager--prev {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.btn-slider-pager:hover {
  opacity: 0.6;
}

.btn-slider-pager.slick-disabled {
  opacity: 0;
  cursor: inherit;
  pointer-events: none;
}

@media all and (min-width: 767px), print {
  .btn-slider-pager {
    width: 10px;
    background-size: 10px auto;
  }
}

/* ----------------------------------------
  スライダー 前後ボタン
---------------------------------------- */
.btn-slider-pager-square {
  margin: -15px 0 0;
  padding: 0;
  border: none;
  width: 30px;
  height: 30px;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 50%;
  z-index: 1;
  background-image: url("/images/common/btn-slider-arrow.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #222;
  background-size: 30px 30px;
  cursor: pointer;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  text-indent: 100%;
  white-space: nowrap;
}

.btn-slider-pager-square--prev {
  left: 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.btn-slider-pager-square--next {
  right: 0;
}

.btn-slider-pager-square.slick-disabled {
  opacity: 0;
  cursor: inherit;
  pointer-events: none;
}

@media all and (min-width: 767px), print {
  .btn-slider-pager-square {
    margin-top: -22px;
    width: 44px;
    height: 44px;
    background-size: 44px 44px;
  }
  .btn-slider-pager-square:hover {
    background-color: #b71254;
  }
  .btn-slider-pager-square--prev {
    left: 0;
  }
  .btn-slider-pager-square--next {
    right: 0;
  }
}

/* =========================================================

 footer

========================================================= */
@media screen and (max-width: 766px) {
    /* pageTop */
    .pageTopOtl {
        padding: 0;
    }
	/*2020*/
    .pageTop {
		position:relative;
		z-index:3;
		top:-18px;
        text-align: center;
    }
    .pageTop img {
        width: 60px;
    }
    /* footer */
    .footerOtl {
        background: #3d3e3e;
        min-height: 240px;
        position: relative;
    }
    #footer {
        padding: 25px 15px 0;
        font-size: 10px;
        line-height: 100%;
        text-align: center;
        font-weight: 300;
    }
    #footerSubNav {
        margin: 0 auto 0px;
        width: 95%;
        display: inline-block;
    }
    #footerSubNav li {
        display: inline-block;
        margin-right: 8px;
        height: 50px;
        width: 48%;
        max-width: 148px;
    }
    #footerSubNav li:last-child {
        margin-right: 0;
    }
    #footerSubNav li a {
        padding: 7px 10px;
        border: solid 1px #fff;
        color: #fff;
        text-align: center;
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-decoration: none;
    }
    #footerNav {
        margin: 0 auto;
        width: 100%;
        display: inline-block;
        margin-bottom: 22px;
    }
    #footerNav li {
        display: inline-block;
        margin: 0 0 0;
    }
    #footerNav li {
        border-right: 1px #fff solid;
        margin-right: 5px;
        padding-right: 5px;
    }
    #footerNav li.end {
        border: none;
        margin-right: 0;
        padding-right: 0;
    }
    #footerNav li a:link {
        color: #fff;
        text-decoration: none;
    }
    #footerNav li a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footerNav li a:visited {
        color: #fff;
        text-decoration: none;
    }
    .snsNavOtl {
        position: relative;
    }
    #snsNav {
        float: left;
        left: 50%;
        position: relative;
        margin: 0 0 30px;
    }
    #snsNav li {
        float: left;
        left: -50%;
        position: relative;
        margin: 0 15px;
    }
    #snsNav li img {
        width: 20px;
    }
    .region {
        text-align: center;
        color: #fff;
        font-size: 13px;
        margin: 0 0 30px;
    }
    .region img {
        width: 20px;
    }
    .copyRight {
        text-align: center;
        padding: 0 0 25px;
        color: #c8c9c9;
        font-size: 10px;
    }
    #footeRegion {
        position: relative;
        clear: both;
        margin-bottom: 17px;
    }
    #footeRegion li {
        display: inline-block;
        padding: 0 30px;
        border-right: solid 1px #fff;
    }
    #footeRegion a {
        color: #fff;
        text-decoration: none;
    }
    #footeRegion a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footeRegion #lang-cn {
        /* padding-right: 0; */
        border-right: none;
    }
    .btn-mtg {
        /* position: absolute; */
        /* top: 40px; */
        /* left: 0; */
        width: 100%;
        text-align: center;
        margin-bottom: 13px;
    }
    .btn-mtg img {
        width: 93px;
        height: auto;
    }
}

@media screen and (min-width: 767px) and (max-width: 1279px) {
    /* pageTop */
    .pageTopOtl {
        padding: 0 25px;
    }
    /*2020*/
    .pageTop {
		position:relative;
		top:-15px;
        text-align: center;
    }
    .pageTop img {
        width: 60px;
    }
    /* footer */
    .footerOtl {
        background: #3d3e3e;
        min-height: 180px;
        position: relative;
    }
    #footer {
        padding: 25px 25px 0;
        font-size: 13px;
        line-height: 100%;
    }
    .footerBox {
        margin: 0 0 0;
        position: relative;
    }
    .footerLeft {
        position: relative;
    }
    #footerSubNav {
        float: left;
        margin: 0 0 40px 0;
    }
    #footerSubNav li {
        float: left;
        margin-right: 15px;
    }
    #footerSubNav li a {
        padding: 7px 30px;
        border: solid 1px #fff;
        color: #fff;
        text-align: center;
        width: 200px;
        text-decoration: none;
    }
    .no-touch #footerSubNav li a:hover {
        background: #B71254;
        border-color: #B71254;
        text-decoration: none;
    }
    #footerNav {
        float: left;
        margin: 0 0 0 -20px;
    }
    #footerNav li {
        float: left;
        padding: 0 20px;
        border-right: solid 1px #fff;
    }
    #footerNav li.end {
        border: none;
        padding: 0 0 0 30px;
    }
    #footerNav li a:link {
        color: #fff;
        text-decoration: none;
    }
    #footerNav li a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footerNav li a:visited {
        color: #fff;
        text-decoration: none;
    }
    #snsNav {
        float: right;
        margin-top: -60px;
        position: relative;
    }
    #snsNav li {
        float: left;
        margin: 0 0 0 20px;
    }
    #snsNav li img {
        width: 20px;
    }
    .region {
        color: #fff;
        font-size: 13px;
        text-align: right;
        margin-top: -13px;
    }
    .region img {
        width: 20px;
    }
    .copyRight {
        position: absolute;
        right: 20px;
        bottom: 5px;
        color: #c8c9c9;
        font-size: 10px;
    }
    #footeRegion {
        position: absolute;
        bottom: 0;
        right: 0;
        float: right;
    }
    #footeRegion li {
        float: left;
        padding: 0 20px;
        border-right: solid 1px #fff;
    }
    #footeRegion a {
        color: #fff;
        text-decoration: none;
    }
    #footeRegion a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footeRegion #lang-cn {
        padding-right: 0;
        border-right: none;
    }
    .btn-mtg {
        position: absolute;
        bottom: -76px;
        left: 0px;
    }
}

@media screen and (min-width: 1280px) {
    /* pageTop */
    .pageTopOtl {
		position: relative;
		z-index: 3;
        width: 960px;
        margin: 0 auto;
    }
    /*2020*/
    .pageTop {
		padding-bottom:40px;
        text-align: center;
    }
    .pageTop img {
        width: 60px;
    }
    /* footer */
    footer {
        overflow: hidden;
    }
    .footerOtl {
        background: #3d3e3e;
        height: 180px;
        position: relative;
    }
    #footer {
        width: 960px;
        margin: 0 auto;
        padding: 30px 0 0;
        font-size: 13px;
        line-height: 100%;
        font-weight: 300;
    }
    .footerBox {
        margin: 0 0 0;
        position: relative;
    }
    .footerLeft {
        float: left;
        position: relative;
    }
    #footerSubNav {
        float: left;
        margin: 0 0 40px -10px;
    }
    #footerSubNav li {
        float: left;
        margin-right: 15px;
    }
    #footerSubNav li a {
        padding: 7px 30px;
        border: solid 1px #fff;
        color: #fff;
        text-align: center;
        width: 200px;
        text-decoration: none;
    }
    .no-touch #footerSubNav li a:hover {
        background: #B71254;
        border-color: #B71254;
        text-decoration: none;
    }
    #footerNav {
        float: left;
        margin: 0 0 0 -40px;
    }
    #footerNav li {
        float: left;
        padding: 0 30px;
        border-right: solid 1px #fff;
    }
    #footerNav li.end {
        border: none;
        padding: 0 0 0 30px;
    }
    #footerNav li a:link {
        color: #fff;
        text-decoration: none;
    }
    #footerNav li a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footerNav li a:visited {
        color: #fff;
        text-decoration: none;
    }
    #snsNav {
        float: right;
    }
    #snsNav li {
        float: left;
        margin: 0 0 0 20px;
    }
    #snsNav li img {
        width: 20px;
    }
    .region {
        color: #fff;
        font-size: 13px;
        text-align: right;
        margin-top: -13px;
    }
    .region img {
        width: 20px;
    }
    .copyRight {
        position: absolute;
        right: 20px;
        bottom: 5px;
        color: #c8c9c9;
        font-size: 10px;
        line-height: 30px;
    }
    .btn-mtg {
        position: absolute;
        bottom: -70px;
        left: -10px;
    }
    #footeRegion {
        position: absolute;
        top: 55px;
        right: 0;
        float: right;
    }
    #footeRegion li {
        float: left;
        padding: 0 30px;
        border-right: solid 1px #fff;
    }
    #footeRegion a {
        color: #fff;
        text-decoration: none;
    }
    #footeRegion a:hover {
        color: #fff;
        text-decoration: underline;
    }
    #footeRegion #lang-cn {
        padding-right: 0;
        border-right: none;
    }
}


/*========================================

  20170803追加 その他汎用クラス

========================================*/
.cmHide {
	display: none !important;
}
.cmTbHide {
	display: block !important;
}
.cmTbShow {
	display: none !important;
}
.cmSpHide {
	display: block !important;
}
.cmSpHideInline {
    display: inline-block !important;
}
.cmSpShow {
	display: none !important;
}
@media screen and (max-width:1024px){
	.cmTbHide {
		display: none !important;
	}
	.cmTbShow {
		display: block !important;
	}
}
@media screen and (max-width:767px){
	.cmSpHide {
		display: none !important;
	}
    .cmSpHideInline {
        display: none !important;
    }
	.cmSpShow {
		display: block !important;
	}
}

/* ----------------------------------------
  スクリーンサイズに応じて出し分け
---------------------------------------- */
@media all and (min-width: 767px), print {
  [data-show-width="narrow"] {
    display: none;
  }
}

[data-show-width="medium"] {
  display: none;
}

@media all and (min-width: 767px), print {
  [data-show-width="medium"] {
    display: block;
  }
}

@media all and (min-width: 767px), print {
  [data-show-width="narrow-inline"] {
    display: none;
  }
}

[data-show-width="medium-inline"] {
  display: none;
}

@media all and (min-width: 767px), print {
  [data-show-width="medium-inline"] {
    display: inline;
  }
}


/* ----------------------------------------
  フッタ上バナー
---------------------------------------- */
.banner-02 {
  margin-top: 55px;
  margin-bottom: -14px;
  background-color: #f8f8f8;
}

.banner-02 img {
  max-width: 100%;
  height: auto;
}

.banner-02 + .banner {
  margin-top: 94px;
}

@media all and (min-width: 767px), print {
	/*2020*/
  .banner-02 {
    margin-top: 90px;
	padding-bottom:40px;
    margin-bottom: -97px;
    margin-right: auto;
    margin-left: auto;
  }
  .banner-02 + .banner {
    margin-top: 117px;
  }
}

.banner-02-list {
  padding: 50px 15px 90px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media all and (min-width: 767px), print {
  .banner-02-list {
    margin-right: auto;
    margin-left: auto;
    padding: 100px 68px;
    max-width: 960px;
  }
}

.banner-02-list__target {
  display: block;
  text-align: center;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.banner-02-list__target:hover {
  text-decoration: none;
  opacity: 0.6;
}



/* ----------------------------------------
  body
---------------------------------------- */

@media all and (min-width: 767px), print {
  #htop {
    padding-top: 100px;
  }
}
@media all and (max-width: 766px) {
  #htop {
	  padding-top: 70px;
  }
}
@media all and (min-width: 960px) {
  #htop {
    margin-top: 0;
    padding-top: 0;

  }
}

/* ----------------------------------------
  ヘッダ
---------------------------------------- */
.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1001;
  background-color: #fff;
}

.l-header img, .l-header svg {
  max-width: 100%;
  height: auto;
}

.l-header a {
  color: #000;
  text-decoration: none;
}

.l-header a:hover {
  text-decoration: none;
}

@media all and (min-width: 960px) {
  .l-header {
    margin-bottom: 0px;
    border-bottom: solid 1px #dedede;
    position: fixed;
  }
}

@media all and (min-width: 960px) {
  .l-header__inner {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 960px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }
}

.l-header-top {
  border-bottom: solid 1px #dedede;
  width: 100%;
  height: 49px;
  position: relative;
  z-index: 1001;
  background-color: #fff;
}

@media all and (min-width: 960px) {
  .l-header-top {
    border-bottom: none;
    position: static;
    background-color: transparent;
  }
}

@media all and (min-width: 960px) {
  .l-header-top__inner {
    display: none;
  }
}

.l-header-logo {
  margin-right: auto;
  margin-left: auto;
  padding-top: 13px;
  padding-bottom: 15px;
  width: 62px;
}

.l-header-logo img[src$=".svg"] {
  width: 100%;
}

@media all and (min-width: 960px) {
  .l-header-logo {
    padding-top: 16px;
    padding-bottom: 24px;
    width: 90px;
  }
}

.l-header-menu-btn {
  margin: 0;
  padding: 0;
  border: none;
  width: 54px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
}

.l-header-menu-btn__bar {
  width: 24px;
  height: 1px;
  display: block;
  position: absolute;
  left: 15px;
  background-color: #000;
  -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.l-header-menu-btn__bar:nth-child(1) {
  top: 17px;
}

.l-header-menu-btn__bar:nth-child(2) {
  top: 24px;
}

.l-header-menu-btn__bar:nth-child(3) {
  top: 31px;
}

[aria-expanded="true"] .l-header-menu-btn__bar:nth-child(1) {
  top: 24px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

[aria-expanded="true"] .l-header-menu-btn__bar:nth-child(2) {
  opacity: 0;
}

[aria-expanded="true"] .l-header-menu-btn__bar:nth-child(3) {
  top: 24px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.l-header-btn {
  position: absolute;
  top: 7.5px;
  right: 8px;
}

@media all and (min-width: 767px), print {
  .l-header-btn {
    top: 8px;
    right: 4px;
  }
}

.l-header-btn-list::before, .l-header-btn-list::after {
  display: table;
  content: ' ';
}

.l-header-btn-list::after {
  clear: both;
}

.l-header-btn-list__item {
  float: left;
}

.l-header-btn-list__item:first-child {
  margin-right: 8px;
}

@media all and (min-width: 767px), print {
  .l-header-btn-list__item {
    margin-right: 10px;
  }
}

.l-header-btn-list__target {
  border-width: 1px;
  border-style: solid;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 10px;
  -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.l-header-btn-list__target svg {
  display: block;
}

.l-header-btn-list__target--journal {
  border-color: #787878;
  width: 40px;
  height: 33px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}

.l-header-btn-list__target--shop {
  border-color: #000;
  background-color: #000;
  width: 43px;
  height: 33px;
}

.l-header-btn-list__target:hover {
  border-color: #b71254;
  color: #fff;
  background-color: #b71254;
}

@media all and (min-width: 767px), print {
  .l-header-btn-list__target {
    font-size: 10.72px;
    line-height: 30px;
  }
  .l-header-btn-list__target::after {
    margin-top: -3px;
    top: 50%;
    right: 10px;
    bottom: 0;
    content: '';
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    border-top: solid 1px #787878;
    border-right: solid 1px #787878;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .l-header-btn-list__target--journal, .l-header-btn-list__target--shop {
    width: 118px;
    height: 30px;
  }
  .l-header-btn-list__target--journal {
    padding-left: 25px;
  }
  .l-header-btn-list__target--shop {
    padding-left: 18px;
    color: #fff !important;
  }
  .l-header-btn-list__target--shop::after {
    border-top-color: #fff;
    border-right-color: #fff;
  }
}

.l-header-btn-list__svg--journal {
  fill: #000;
  -webkit-transition: fill 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: fill 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a:hover .l-header-btn-list__svg--journal {
  fill: #fff;
}

.l-header-btn-list__svg--shop {
  fill: #fff;
}

/* ----------------------------------------
  メニュー
---------------------------------------- */
.l-header-menu {
  width: 100%;
  position: absolute;
  top: 49px;
  z-index: 1000;
}

@media all and (min-width: 960px) {
  .l-header-menu {
    position: static;
    top: 0;
  }
}

.l-header-menu__body {
  padding: 6px 10px 66px;
  background-color: #fff;
}

.l-header-menu__body[aria-hidden="true"] {
  display: none;
}

[data-menu="open"] .l-header-menu__body {
  -webkit-animation: menuOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: menuOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-menu="fade-out"] .l-header-menu__body {
  -webkit-animation: menuClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: menuClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media all and (min-width: 960px) {
  .l-header-menu__body {
    padding: 0;
  }
}

@-webkit-keyframes menuOpen {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes menuOpen {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes menuClose {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}

@keyframes menuClose {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
}

[data-menu-back-layer] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}

[data-menu="open"] [data-menu-back-layer] {
  display: block;
  -webkit-animation: menuBgOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: menuBgOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-menu="fade-out"] [data-menu-back-layer] {
  display: block;
  -webkit-animation: menuBgClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: menuBgClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media all and (min-width: 960px) {
  [data-menu-back-layer] {
    display: none !important;
  }
}

@-webkit-keyframes menuBgOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes menuBgOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes menuBgClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes menuBgClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

body[data-menu="open"] #container {
  z-index: auto;
}

@media all and (min-width: 960px) {
  .l-header-menu__list {
    margin: 24px auto 16px;
    width: 100%;
  }
  .l-header-menu__list::before, .l-header-menu__list::after {
    display: table;
    content: ' ';
  }
  .l-header-menu__list::after {
    clear: both;
  }
}

.l-header-menu__list-item {
  border-bottom: solid 1px #dedede;
  line-height: 1;
}

@media all and (min-width: 960px) {
  .l-header-menu__list-item {
    border-bottom: none;
    float: left;
    width: 16%;
    text-align: center;
  }
}

.l-header-menu__list-target {
  padding: 20px 30px 20px 13px;
  display: block;
  position: relative;
  font-size: 13px;
  font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;
  line-height: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.l-header-menu__list-target:hover {
  opacity: 0.6;
  text-decoration: none;
}

.l-header-menu__list-target::after {
  margin-top: -4px;
  position: absolute;
  top: 50%;
  right: 14px;
  bottom: 0;
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  border-top: solid 1px #787878;
  border-right: solid 1px #787878;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media all and (min-width: 960px) {
  .l-header-menu__list-target {
    padding: 0;
    display: inline;
    position: static;
    font-size: 14px;
  }
  .l-header-menu__list-target::after {
    display: none;
  }
}

.l-header-menu-sub {
  display: none;
}

.l-header-menu-sub img {
  max-width: 100%;
  height: auto;
}

.l-header-menu-sub a {
  text-decoration: none;
}

.l-header-menu-sub a:hover {
  text-decoration: none;
}

@media all and (min-width: 960px) {
  .l-header-menu-sub {
    border-bottom: solid 1px #dedede;
    width: 100%;
    display: block;
    position: absolute;
    top: 105px;
    z-index: 1000;
    background-color: #fff;
  }
  [data-header-pos="fixed"] .l-header-menu-sub {
    position: fixed;
  }
}

@media all and (min-width: 960px) {
  .l-header-menu-sub[aria-hidden="true"] {
    display: none;
  }
  .l-header-menu-sub[data-header-menu-sub-animation="open"] {
    -webkit-animation: menuOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: menuOpen 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub[data-header-menu-sub-animation="fade-out"] {
    -webkit-animation: menuClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: menuClose 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub__inner {
    margin-right: auto;
    margin-left: auto;
    padding: 29px 20px 36px;
    padding-right: 20px;
    padding-left: 20px;
    width: 960px;
  }
  .l-header-menu-sub__inner::before, .l-header-menu-sub__inner::after {
    display: table;
    content: ' ';
  }
  .l-header-menu-sub__inner::after {
    clear: both;
  }
  .l-header-menu-sub__products {
    padding-left: 10px;
    float: left;
    width: 620px;
  }
  .l-header-menu-sub__products-block:not(:last-child) {
    margin-bottom: 14px;
  }
  .l-header-menu-sub__products-hdg {
    margin-bottom: 8px;
    clear: both;
    font-size: 14px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
    line-height: 1;
  }
  .l-header-menu-sub__products-hdg > a {
    color: #b71254;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub__products-hdg > a:hover {
    opacity: 0.6;
  }
  .l-header-menu-sub__products-inner::before, .l-header-menu-sub__products-inner::after {
    display: table;
    content: ' ';
  }
  .l-header-menu-sub__products-inner::after {
    clear: both;
  }
  .l-header-menu-sub__products-item {
    margin-bottom: 32px;
    float: left;
    width: 220px;
  }
  .l-header-menu-sub__products-item:nth-child(odd) {
    margin-right: 40px;
    clear: left;
  }
  .l-header-menu-sub__products-name {
    margin-bottom: 15px;
    position: relative;
  }
  .l-header-menu-sub__products-name::after {
    margin-top: -4px;
    top: 50%;
    right: 0;
    bottom: 0;
    content: '';
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    border-top: solid 1px #787878;
    border-right: solid 1px #787878;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .l-header-menu-sub__products-name-target {
    border-bottom: solid 1px #787878;
    width: 100%;
    display: table;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub__products-name-target:hover {
    opacity: 0.6;
  }
  .l-header-menu-sub__products-name-image {
    width: 60px;
    max-width: 60px;
    display: table-cell;
    vertical-align: middle;
  }
  .l-header-menu-sub__products-name-text {
    padding-left: 15px;
    display: table-cell;
    color: #1a1a1a;
    font-size: 13px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
    line-height: 1.53846;
    vertical-align: middle;
  }
  .l-header-menu-sub__products-list-item {
    margin-top: 8px;
    line-height: 1.1;
  }
  .l-header-menu-sub__products-list-item > a {
    padding-left: 14px;
    display: inline-block;
    position: relative;
    color: #1a1a1a;
    font-size: 11px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub__products-list-item > a:hover {
    opacity: 0.6;
  }
  .l-header-menu-sub__products-list-item > a::before {
    content: '';
    width: 6px;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #787878;
  }
  .l-header-menu-sub__banner {
    padding-right: 10px;
    float: right;
    width: 300px;
  }
  .l-header-menu-sub__banner-item:not(:last-child) {
    margin-bottom: 37px;
  }
  .l-header-menu-sub__banner-item a {
    display: block;
    -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-menu-sub__banner-item a:hover {
    opacity: 0.6;
  }
  .l-header-menu-sub__banner-image {
    margin: 0;
  }
  .l-header-menu-sub__banner-caption {
    margin-top: 16px;
    display: block;
    color: #1a1a1a;
    font-size: 13px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
    line-height: 1;
    text-align: center;
  }
}

@media all and (min-width: 960px) {
  .l-header-menu__extra-wrapper {
    position: absolute;
    top: 13px;
    right: 20px;
  }
}

@media all and (min-width: 1024px) {
  .l-header-menu__extra-wrapper {
    right: 0;
  }
}

.l-header-menu__extra {
  margin-top: 25px;
  padding-right: 13px;
  padding-left: 13px;
}

@media all and (min-width: 960px) {
  .l-header-menu__extra {
    margin-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .l-header-menu__extra::before, .l-header-menu__extra::after {
    display: table;
    content: ' ';
  }
  .l-header-menu__extra::after {
    clear: both;
  }
}

.l-header-menu__extra-item:not(:last-child) {
  margin-bottom: 11px;
}

@media all and (min-width: 960px) {
  .l-header-menu__extra-item {
    float: left;
    width: 150px;
  }
  .l-header-menu__extra-item:not(:last-child) {
    margin-right: 11px;
    margin-bottom: 0;
  }
}

.l-header-menu__extra-target {
  border: solid 1px #787878;
  height: 43px;
  line-height: 43px;
  display: block;
  position: relative;
  font-size: 13px;
  text-align: center;
  -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.l-header-menu__extra-target:hover {
  border-color: #b71254;
  background-color: #b71254;
  color: #fff;
}

.l-header-menu__extra-target::after {
  margin-top: -4px;
  display: block;
  top: 50%;
  right: 9px;
  bottom: 0;
  -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  border-top: solid 1px #787878;
  border-right: solid 1px #787878;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.l-header-menu__extra-target:hover::after {
  border-color: #fff;
}

.l-header-menu__extra-target--journal {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}

.l-header-menu__extra-target--shop {
  border-color: #000;
  background: #000;
  letter-spacing: 0.04em;
}

.l-header-menu__extra-target--shop::after {
  border-top-color: #fff;
  border-right-color: #fff;
}

.l-header-menu__extra-target--shop:link, .l-header-menu__extra-target--shop:visited, .l-header-menu__extra-target--shop:hover, .l-header-menu__extra-target--shop:active {
  color: #fff;
}

@media all and (min-width: 960px) {
  .l-header-menu__extra-target {
    height: 34px;
    line-height: 34px;
    font-size: 12px;
  }
  .l-header-menu__extra-target::after {
    margin-top: -3px;
    right: 11px;
  }
  .l-header-menu__extra-target--shop {
    font-size: 11px;
  }
}

.l-header-clone .l-header {
  display: none;
}

@media all and (min-width: 960px) {
  .l-header-clone .l-header {
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
    z-index: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .l-header-clone .l-header[aria-hidden="true"] {
    display: none;
  }
  .l-header-clone .l-header[data-header-clone="show"] {
    -webkit-animation: header-clone-show 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: header-clone-show 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-clone .l-header[data-header-clone="hide"] {
    -webkit-animation: header-clone-hide 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation: header-clone-hide 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  .l-header-clone .l-header .l-header__inner {
    padding-left: 0;
  }
  .l-header-clone .l-header .l-header-top {
    width: auto;
    position: absolute;
    top: 16px;
    left: 20px;
  }
  .l-header-clone .l-header .l-header-logo {
    margin-right: 0;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .l-header-clone .l-header .l-header-menu__list {
    margin: 0;
    padding: 26px 0 26px 113px;
    width: 600px;
  }
  .l-header-clone .l-header .l-header-menu__list-item {
    margin-left: 30px;
    width: auto;
  }
  .l-header-clone .l-header .l-header-menu__extra-wrapper {
    right: 20px;
  }
  .l-header-clone .l-header .l-header-menu__extra-item {
    width: 140px;
  }
}

@media all and (min-width: 1024px) {
  .l-header-clone .l-header .l-header-top {
    left: 0;
  }
  .l-header-clone .l-header .l-header-menu__list {
    padding-left: 93px;
    width: 700px;
  }
  .l-header-clone .l-header .l-header-menu__list-item {
    margin-left: 40px;
  }
  .l-header-clone .l-header .l-header-menu__extra-wrapper {
    right: 0;
  }
}

@-webkit-keyframes header-clone-show {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes header-clone-show {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes header-clone-hide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes header-clone-hide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

/* ----------------------------------------
  商品ピックアップ
---------------------------------------- */
.pickup {
  padding: 27px 22px 35px;
  background-color: #f4f4f4;
}

@media all and (min-width: 767px), print {
  .pickup {
    padding: 45px 20px 49px;
  }
}

.pickup__hdg {
  margin-bottom: 17px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  line-height: 1.33333;
  text-align: center;
}

@media all and (min-width: 767px), print {
  .pickup__hdg {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.33333;
  }
}

@media all and (min-width: 767px), print {
  .pickup__image {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .pickup__image::before, .pickup__image::after {
    display: table;
    content: ' ';
  }
  .pickup__image::after {
    clear: both;
  }
}

.pickup__image-item {
  background-color: #fff;
}

.pickup__image-item:not(:last-child) {
  margin-bottom: 10px;
}

.pickup__image-item > a {
  display: block;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.pickup__image-item > a:hover {
  opacity: 0.6;
}

.pickup__image-item img {
  width: 100%;
}

@media all and (min-width: 767px), print {
  .pickup__image-item {
    width: 47.91667%;
    float: left;
  }
  .pickup__image-item:not(:last-child) {
    margin-bottom: 0;
  }
  .pickup__image-item:nth-child(odd) {
    margin-right: 4.16667%;
  }
  .pickup__image--center .pickup__image-item {
    margin-right: auto;
    margin-left: auto;
    float: none;
  }
  .pickup__image--center .pickup__image-item:nth-child(odd) {
    margin-right: auto;
  }
}

/* ----------------------------------------
  PDF アイコン
---------------------------------------- */
.icon-pdf {
  padding: 2px 4px;
  display: inline-block;
  overflow: hidden;
  background-color: #787878;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

/*202107*/

/* ----------------------------------------
  ボタン 01
---------------------------------------- */
.btn-01 {
  padding: 14px 15px;
  border: solid 1px #787878;
  display: block;
  position: relative;
  background-color: #fff;
  font-size: 13px;
  line-height: 1.15385;
  letter-spacing: 0.04em;
  text-align: center;
  -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.btn-01:link, .btn-01:visited, .btn-01:active {
  color: #1e1e1e;
  text-decoration: none;
}

.btn-01:hover {
  border-color: #b71254;
  color: #fff;
  background-color: #b71254;
}

.btn-01::after {
  margin-top: -2px;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  border-top: solid 1px #787878;
  border-right: solid 1px #787878;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-01:hover::after {
  border-color: #fff;
}

.btn-01[target="_blank"]::before, .btn-01[target="_blank"]::after {
  content: "";
  margin-top: 0;
  border: none;
  width: 7px;
  height: 6px;
  background-repreat: no-repeat;
  background-position: 0 0;
  background-size: 7px auto;
  position: absolute;
  top: auto;
  right: 5px;
  bottom: 3px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.btn-01[target="_blank"]::before {
  background-image: url("/common/room/images/icon-blank.svg");
}

.btn-01[target="_blank"]::after {
  background-image: url("/common/room/images/icon-blank-white.svg");
  opacity: 0;
}

.btn-01[target="_blank"]:hover::before {
  opacity: 0;
}

.btn-01[target="_blank"]:hover::after {
  opacity: 1;
}

@media all and (min-width: 767px), print {
  .btn-01 {
    padding: 19px 15px;
    font-size: 14px;
  }
  .btn-01--s {
    padding: 13px 15px;
  }
  .btn-01::after {
    right: 14px;
  }
}

/* ----------------------------------------
  ボタン 02
---------------------------------------- */
.btn-02 {
  padding: 15px;
  display: block;
  position: relative;
  background: #000;
  color: #fff;
  font-size: 13px;
  line-height: 1.15385;
  letter-spacing: 0.04em;
  text-align: center;
  -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.btn-02:link, .btn-02:visited, .btn-02:hover, .btn-02:active {
  color: #fff;
  text-decoration: none;
}

.btn-02:hover {
  background-color: #b71254;
}

.btn-02::after {
  margin-top: -4px;
  position: absolute;
  top: 50%;
  right: 10px;
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media all and (min-width: 767px), print {
  .btn-02 {
    padding: 13px 15px;
  }
  .btn-02::after {
    right: 14px;
  }
}

/*pick up*/
.pick-up .title-text {
    text-align: center;
    font-size: 24px;
    font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
    font-weight: bold;
}
.pick-up .bgcolor {
    padding: 30px 0 40px;
    background-color: #fafafa;
	margin-bottom: 55px;
}
.howto-video-detail{
	background-color: #fafafa;
    margin-bottom: 0px;
    padding: 10px 0 0;
}
.mb80 {
    margin-bottom: 80px !important;
}