@charset "utf-8";
@keyframes zoomUp{0%{transform:scale(1);} 100%{transform:scale(1.2);}}
@keyframes pathmove{0%{height:0px;top:0px;opacity:0;} 30%{top:0px;height:120px;opacity:1;} 100%{height:0px;top:120px;opacity:0;}}
header{animation:fade 0.8s linear 1s 1 normal both;}
html:not([lang="zh"]) #topNewsBar .newsTxt,
html:not([lang="zh"]) #newsBlog .fxList,
html:not([lang="zh"]) #newsBlog .newsList{font-family:'Noto Sans JP',sans-serif;}
html[lang="zh"] #topNewsBar .newsTxt,
html[lang="zh"] #newsBlog .fxList,
html[lang="zh"] #newsBlog .newsList{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;}


#mainFV{
	width:100%;
	position:relative;
	background-color:#000;
	overflow:hidden;
}
#mainFV video{
    display:block;
    width:100%;
    object-fit:cover;
    object-position:center center;
}
#mainFV figcaption{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
	color:#fff;
	text-align:center;
}
#mainFV figcaption .fvLead{
	line-height:2.0;
    opacity:0;
    transition:opacity 2.0s ease 1.0s;
}
#mainFV.passing figcaption .fvLead{opacity:1;}
#mainFV .scrollBar{
	position:absolute;
	width:56px;
	height:120px;
	z-index:2;
}
#mainFV .scrollBar img{
	position:absolute;
	left:13px;
	top:0;
	width:11px;
}
#mainFV .scrollBar:before{
	content:"";
	position:absolute;
	top:0;
	width:1px;
	height:120px;
	background:#eee;
	transform-origin:left top;
	animation:pathmove 1.4s ease-in-out infinite;
	opacity:0;
}
#mainContents{
	width:100%!important;
	overflow:hidden;
}
#mainContents > section{margin:0 auto;}
.leadBox{line-height:1.4;}
.leadBox figure{
	grid-row:1 / 5;
	position:relative;
}
.leadBox figure img{
	display:block;
	max-width:initial;
	filter:grayscale(100%);
	transition:all 0.8s;
}
.leadBox.show figure img{filter:grayscale(0%);}
.leadBox .leadTtl{font-weight:bold;}
.leadBox .leadSttl{
	margin-top:12px;
	font-weight:bold;
}
.leadBox .leadTxt{
	margin-top:24px;
    line-height:2.1;
}
.leadBox .leadTxt *+*{margin-top:16px;}
#bnrGr figure{
	display:block;
	width:100%;
}
#bnrGr figure a{
	position:relative;
	display:block;
	color:#fff;
}
#bnrGr figure img{
	width:100%;
	max-width:initial;
	vertical-align:top;
}
#bnrGr figcaption{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:6px 30px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,0.8);
	line-height:1.4;
	transition:opacity 0.4s;
	opacity:0;
}
#bnrGr a:hover,
#bnrGr a:hover figcaption{opacity:1;}
#bnrGr figcaption h3{
	margin-bottom:12px;
	font-size:2.2rem;
}
#bnrGr figcaption p{
    font-size:1.2rem;
    line-height:1.6;
}
#newsBlog h2 > *,
#onlineShop h2 > *{
	display:block;
	line-height:1.0;
}
#newsBlog h2 small,
#onlineShop h2 small{margin-top:12px;}
#newsBlog .fxList{
  padding:28px 0;
  border-top:0.5px solid #868686;
}
#newsBlog .fxList li:nth-child(n+3){margin-top:28px;}
#newsBlog .fxList a{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#newsBlog .fxList figure{width:32.26%;}
#newsBlog .fxList figure img{
  display:block;
  aspect-ratio:4 / 3;
  object-fit:cover;
  width:100%;
  height:auto;
}
#newsBlog .fxList p{
  width:62%;
  padding-right:10%;
  font-size:1.2rem;
}
#newsBlog .newsList{
    border-bottom:0.5px solid #868686;
}
#newsBlog .newsList li{
	display:flex;
	padding:28px 0;
	border-top:0.5px solid #868686;
	font-size:1.3rem;
	line-height:1.6;
}
#newsBlog .newsList li > *{display:block;}
#newsBlog .newsList .catTag{
	border:0.5px solid #777;
	font-size:1.1rem;
	text-align:center;
}
#newsBlog .newsList .catTag a{
	display:block;
	transition:all 0.4s;
}
#newsBlog .newsList .catTag a:hover{
	background-color:#777;
	color:#fff;
}
#newsBlog .arrowLink{text-align:right;}
#newsBlog .arrowLink a{margin-left:auto;}
#onlineShop h2{text-align:center;}
#onlineShop .shopLinks{
    max-width:980px;
    margin:0 auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
#onlineShop .shopLinks li,
#onlineShop .shopLinks a{display:block;}
#onlineShop .shopLinks li{width:48.943%;}
#onlineShop .shopLinks li:nth-child(n+3){margin-top:25px;}
#floatBnr{
    position:fixed;
    right:0;
    transform:translateX(0px);
    transition:all 0.8s;
}
#floatBnr.none,
#floatBnr.hide,
#floatBnr.hide2{
    opacity:0;
    transform:translateX(500px);
    pointer-events:none;
}
#floatBnr a{
    display:block;
    background-color:#232323;
    color:#fff;
}
#floatBnr a *{
    display:block;
    line-height:1.0;
}
#floatBnr figure{
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
}
#floatBnr .boxBtn{
    display:table;
    margin:0 auto;
    border:1px solid #fff;
}
#floatBnr .closeBtn{
    display:block;
    position:absolute;
    right:0;
    top:0;
    cursor:pointer;
}
#floatBnr svg{display:block;}
#floatBnr use{fill:#fff;}
#magazineBnr{text-align:center;}
#magazineBnr h2{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	margin:0 auto;
	text-align:center;
}
#magazineBnr h2 > *{
	display:block;
	line-height:1.0;
}
#magazineBnr h2 img{margin:0 auto;}
#magazineBnr a{
	display:block;
	width:92vw;
	max-width:980px;
	margin:0 auto;
}
@media screen and (max-width:1239.98px){
	#bnrGr{
		width:100%;
		margin:120px auto;
	}
  #bnrGr a,
  #bnrGr a figcaption{opacity:1;}
  #bnrGr figcaption{background:rgba(0,0,0,0.25);}
	#mainContents > section{margin:120px 4vw;}
	.leadBox figure{
		max-width:720px;
		width:80%;
		margin:0 auto 36px;
	}
    .leadBox[data-dir="right"] figure{margin-right:-4vw;}
    .leadBox[data-dir="left"] figure{margin-left:-4vw;}
    .leadBox[data-dir="right"] > *:not(figure):not(.arrowLink){margin-left:1.333vw;}
    .leadBox[data-dir="left"] > *:not(figure):not(.arrowLink){margin-right:1.333vw;}
    .leadBox .leadTtl{
        font-size:2.0rem;
        letter-spacing:0.2rem;
    }
    .leadBox .leadSttl{
        font-size:1.7rem;
        letter-spacing:0.2rem;
    }
    .leadBox .leadTxt{
        font-size:1.4rem;
        letter-spacing:0.1rem;
    }
	.leadBox .arrowLink{margin-top:24px;}
    .leadBox .arrowLink a{margin-left:0;}
    .leadBox .arrowLink a > *{display:inline-block;}
    .leadBox .arrowLink a span{padding-right:8px;}
    #newsBlog h2 strong,
    #onlineShop h2 strong{font-size:2.0rem;}
    #newsBlog h2 small,
    #onlineShop h2 small{
        margin-top:10px;
        font-size:1.6rem;
    }
	#newsBlog h2,
	#onlineShop h2{
		margin-bottom:40px;
		text-align:center;
	}
	#newsBlog .newsList li{flex-wrap:wrap;}
	#newsBlog .newsList .catTag{
		min-width:60px;
		margin:0 12px;
	}
	#newsBlog .newsList .catTag a{padding:2px 4px;}
	#newsBlog .newsList li > a{
		width:100%;
		margin-top:16px;
	}
	#newsBlog .arrowLink{margin-top:30px;}
    #floatBnr{
        width:250px;
        bottom:40px;
    }
    #floatBnr figure img{width:40%;}
    #floatBnr figcaption{
		width:60%;
        font-size:1.2rem;
    }
    #floatBnr h3{margin-top:8px;}
    #floatBnr .boxBtn{
        margin-top:12px;
        padding:6px 14px 8px;
    }
    #floatBnr .closeBtn{
        width:22px;
        padding:10px 10px 0 0;
    }
	#magazineBnr{margin:80px auto 100px;}
	#magazineBnr h2{margin-bottom:55px;}
	#magazineBnr h2 img{
		width:204px;
		transform:translateX(-6px);
	}
	#magazineBnr h2 small{font-size:1.2rem;}
}
@media screen and (max-width:767.98px){
  #topNewsBar{min-height:70px;}
  #topNewsBar .newsTxt a{
      line-height:1.4;
      font-size:1.1rem;
  }
  #topNewsBar .newsTxt a strong{display:none;}
  #topNewsBar #newsClose{height:68px;}
  #mainFV video{height:100vh;}
  #mainFV figcaption .fvLead{font-size:1.6rem;}
  #mainFV .scrollBar{display:none;}
  #newsBlog .fxList{
    display:block;
    width:100%;
  }
  #newsBlog .fxList li+li{
    margin-top:16px;
    padding-top:16px;
    border-top:0.5px solid #868686;
  }
}
@media screen and (max-width:479.98px){
    .leadBox figure{width:calc(80% + 8vw);}
    .leadBox[data-dir="right"] > *:not(figure):not(.arrowLink){margin-right:12vw;}
    .leadBox[data-dir="left"] > *:not(figure){margin-left:12vw;}
}
@media screen and (min-width:768px){
	*[data-type="spS"]{display:none!important;}
	#mainFV video{height:100vh;}
    #mainFV figcaption .fvLead{font-size:2.2rem;}
	#mainFV .scrollBar{
		top:calc(100vh - 120px);
		left:78px;
	}
  #newsBlog .fxList{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  #newsBlog .fxList li{
    display:block;
    width:50%;
  }
}
@media screen and (min-width:480px) and (max-width:1239.98px){
    .leadBox figure{width:80vw;}
    .leadBox[data-dir="right"] > *:not(figure):not(.arrowLink){margin-right:10vw;}
    .leadBox[data-dir="left"] > *:not(figure){margin-left:10vw;}
}
@media screen and (min-width:768px) and (max-width:1239.98px){
    /*#topNewsBar .newsTxt a span:nth-child(3){display:none;}
    #topNewsBar .newsTxt a span:nth-child(2):after{content:"…";}*/
}
@media screen and (min-width:1240px){
	#mainContents > section{width:1136px;}
	#mainContents > section.leadBox{margin-top:200px;}
	#mainContents > section.leadBox:first-child{margin-top:110px;}
	.leadBox{
		display:grid;
		grid-template-columns:515px 515px;
		grid-template-rows:auto auto auto 1fr;
		grid-column-gap:106px;
	}
	.leadBox .leadTtl{
        grid-row:1 / 2;
        font-size:3.2rem;
        letter-spacing:0.2rem;
    }
	.leadBox .leadSttl{
        grid-row:2 / 3;
        font-size:2.2rem;
        letter-spacing:0.2rem;
    }
	.leadBox .leadTxt{
        grid-row:3 / 4;
        font-size:1.5rem;
        letter-spacing:0.1rem;
    }
	.leadBox .arrowLink{
		grid-row:4 / 5;
		margin-top:50px;
	}
	.leadBox[data-dir="right"] figure{grid-column:2 / 3;}
	.leadBox[data-dir="right"] > *:not(figure){grid-column:1 / 2;}
	.leadBox[data-dir="left"] figure{grid-column:1 / 2;}
	.leadBox[data-dir="left"] > *:not(figure){grid-column:2 / 3;}
	#bnrGr{
		width:100%;
		margin:315px 0 200px;
		display:flex;
		justify-content:space-between;
	}
	#bnrGr figure{flex-grow:1;}
	#newsBlog{
		display:grid;
    grid-template-areas:
       "ttl fix"
       "ttl list"
       "ttl link";
    grid-template-rows:auto auto;
    grid-template-columns:auto auto auto;
  }
  #mainContents > section#newsBlog{width:1030px;}
	#newsBlog h2{
    width:320px;
    grid-area:ttl;
  }
  #newsBlog h2 strong{font-size:3.0rem;}
  #newsBlog h2 small{
    margin-top:12px;
    font-size:1.6rem;
  }
  #onlineShop h2 strong{font-size:3.2rem;}
  #onlineShop h2 small{
    margin-top:12px;
    font-size:1.8rem;
  }
  #newsBlog .fxList{
    width:694px;
    grid-area:fix;
  }
  #newsBlog .newsList{
    width:694px;
    grid-area:list;
  }
	#newsBlog .newsList li{align-items:center;}
	#newsBlog .newsList .catTag{
		min-width:42px;
		margin:0 12px;
	}
	#newsBlog .newsList .catTag a{padding:2px 4px;}
	#newsBlog .arrowLink{
		width:100%;
    grid-area:link;
		margin-top:38px;
	}
	#mainContents > section#onlineShop{margin-top:240px;}
	#onlineShop h2{margin-bottom:120px;}
    #floatBnr{
        width:320px;
        bottom:25px;
    }
    #floatBnr figure img{width:104px;}
    #floatBnr figcaption{
        width:216px;
        font-size:1.2rem;
    }
    #floatBnr .boxBtn{
        margin-top:16px;
        padding:9px 21px 10px;
    }
    #floatBnr .closeBtn{
        width:30px;
        padding:13px 18px 0 0;
    }
	#bnrGr a figcaption{
		opacity:1;
		background:rgba(0,0,0,0);
		transition:all 0.4s;
	}
	#bnrGr a:hover figcaption{
		background:rgba(0,0,0,0.8);
	}
	#bnrGr a figcaption h3{text-shadow: 0px 0px 4px rgba(0,0,0,0.3);}
	#bnrGr a figcaption p{
		opacity:0;
		transition:all 0.4s;
	}
	#bnrGr a:hover figcaption p{opacity:1;}
	#magazineBnr{margin:180px auto 200px;}
	#magazineBnr h2{margin-bottom:110px;}
	#magazineBnr h2 img{
		width:345px;
		transform:translateX(-6px);
	}
	#magazineBnr h2 small{font-size:1.7rem;}
}
@media screen and (min-width:1240px) and (max-width:1541.98px){
	.leadBox figure img{
		width:50vw;
		object-fit:cover;
		object-position:center center;
	}
	.leadBox[data-dir="left"] figure img{margin-left:calc(-50vw + 568px);}
}
@media screen and (min-width:1542px){
	.leadBox figure img{width:720px;}
	.leadBox[data-dir="right"] figure img{margin-right:-200px;}
	.leadBox[data-dir="left"] figure img{margin-left:-200px;}
}