#headermenu,
div.fs-l-header__drawerOpener label,
.fs-p-drawer.fs-l-sideArea{
    z-index: 10000;
}
.fs-preview-header {
	display: none !important;
}
.fs-l-pageMain {
    width: 100%;
    overflow: hidden;
    background: #fff;
    font-family: 'Poppins', Futura, 'Century Gothic', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    position: relative;
}
.fb_thumb {
    opacity: 0;
    position: absolute;
    z-index: -1;    
}

/*====================================================
//NOTE common
====================================================*/
#contents {
    width: 100%;
    overflow: hidden;
    min-height: 50vh;
	letter-spacing: .05em;
}
#contents * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#contents img {
    -webkit-transition: 0.4s ease-in-out;  
    transition: 0.4s ease-in-out;  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
	margin: auto;
    vertical-align: top
}
#contents figure {
    margin: 0;
	position: relative;
}
#contents dl , #contents dt , #contents dd ,
#contents ul , #contents li {
	margin: 0;
	padding: 0;
}
.flexBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.flexBox.flexWrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flexBox.flexCenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.gridBox {
    display: grid;
}
.innerBox{
    width: 92%;
    max-width: 1200px;
    padding: 70px 0;
    margin: auto;
    position: relative;
}
.inb {
    display: inline-block;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    .innerBox{
        padding: 50px 0;
    }
	.hidden-sp {
		display: none;
	}
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	.hidden-pc {
		display: none;
	}
}

/*====================================================
//NOTE リンク
====================================================*/
#contents a {
    text-decoration: none;
    color: #000;
}
#contents a:hover {
    color: #3790e8;
}
#contents .linkBtn {
    color: #fff;
    background: #fff;
    border: solid 3px;
    -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
    color: #00b900;
    font-size: 2.0rem;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    min-height: 60px;
    line-height: 1.3;
    padding: .8em .5em;
    margin: 50px auto;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    position: relative;
    cursor: pointer;
}
#contents .linkBtn:hover {
	background: #00b900;
	border-color: #00b900;
    color: #fff;
}
a:hover img {
    opacity: .8
}

.arrow {
    display: inline-block;
    width: 1.2em;
    height: 0;
    border-bottom: solid 2px #00b900;
    margin: .3em 0 0 .5em;
    position: relative;
    -webkit-transition: .2s all;
    transition: .2s all;
}
.arrow:after {
    position: absolute;
    content: '';
    width: .6em;
    height: 0;
    border-bottom: solid 2px #00b900;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    right: 1px;
    top: 0;
}
a:hover .arrow {
    margin: .3em -.3em 0 .8em;
    border-color: #fff;
}
a:hover .arrow:after {
    border-color: #fff;
}
/*====================================================
//NOTE テキスト・カラー
====================================================*/
#contents p {
    margin: 0 0 .8em;
}
#contents p:last-child ,
#contents p:last-of-type {
    margin: 0;
}
.txt-left {
	text-align: left;
}
.txt-right {
	text-align: right;
}
.txt-center {
	text-align: center;
}

.small {
    font-size: .7em;
}
.big {
    font-size: 1.3em;
}
strong {
    font-weight: bold;
}
.pink {
    color: #00b900;
}
.markerline {
    background: -prefix-linear-gradient(#fff 30%, #fbffa2 45%, #fbffa2 85%, #fff);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #fff), color-stop(50%, #fbffa2), color-stop(80%, #fbffa2), color-stop(90%, #fff));
    background: linear-gradient(#fff 40%, #fbffa2 50%, #fbffa2 80%, #fff 90%);
    padding: 0 0.3em;
}
#contents ul.markList li {
	position: relative;
	padding-left: 1.2em;
	line-height: 1.3;
	margin: .3em 0;
}
ul.markList li:before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
}
ul.markList.musicNote li:before {
	content: '\266A';
	font-size: 1.1em;
}
ul.markList.attentionMark li:before {
	content: '\203B';
}

/*====================================================
//Class .sa
====================================================*/
.sa {
    opacity: 0;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
}
.sa.show {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.sa-lr {
    -webkit-transform: translate(-80px, 0);
    transform: translate(-80px, 0);
}
.sa-rl {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0);
}
.sa-up {
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
}
.sa-down {
    -webkit-transform: translate(0, -80px);
    transform: translate(0, -80px);
}
.sa-scaleUp {
    -webkit-transform: scale(.7);
    transform: scale(.7);
}
.sa-scaleDown {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.sa-rotateL {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.sa-rotateR {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.delay-2 { -webkit-transition-delay: .2s; transition-delay: .2s;}
.delay-3 { -webkit-transition-delay: .3s; transition-delay: .3s;}
.delay-4 { -webkit-transition-delay: .4s; transition-delay: .4s;}
.delay-5 { -webkit-transition-delay: .5s; transition-delay: .5s;}
.delay-6 { -webkit-transition-delay: .6s; transition-delay: .6s;}
.delay-7 { -webkit-transition-delay: .7s; transition-delay: .7s;}
.delay-8 { -webkit-transition-delay: .8s; transition-delay: .8s;}
.delay-9 { -webkit-transition-delay: .9s; transition-delay: .9s;}
.delay-10 { -webkit-transition-delay: 1.0s; transition-delay: 1.0s;}
.delay-11 { -webkit-transition-delay: 1.1s; transition-delay: 1.1s;}
.delay-12 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s;}


/*====================================================
////ID #title
====================================================*/
#title {
	position: relative;
	z-index: 10;
}
#title .innerBox {
	padding: 0;
}
#title .innerBox .imgBox {
	height: 100%;
	margin: auto;
}
#title .innerBox .imgBox figure {
	width: 100%;
	height: 100%;
}
#title .headBox {
	background: #00B900;
	padding: 10px 4%;
}
#title .headBox h1 {
	margin: 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#title .innerBox {
		height: calc(80vh - 180px);
		max-height: 94vw;
		position: relative;
		z-index: 10;
	}
	#title .headBox {
		height: 20vh;
	}
	#title .headBox h1 {
		width: 100%;
		height: 100%;
	}
	#title .headBox img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
	}
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#title {
		position: relative;
	}
	#title:before ,
	#title:after {
		content: '';
		position: absolute;
		height: calc(100% - 160px);
		top: 0;
	}
	#title:before {
		background: url(../../img/contents/2020aw/202010_line/title_bg-1.png) no-repeat left / auto 100%;
		width: 60%;
		left: 50%;
	}
	#title:after {
		background: url(../../img/contents/2020aw/202010_line/title_bg-2.png) no-repeat right / auto 100%;
		width: 50%;
		right: 60%;
	}
	#title .innerBox {
		height: calc(100vh - 275px);
		min-height: 500px;
		position: relative;
		z-index: 10;
	}
	#title .headBox {
		height: 160px;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#title:before {
		left: 40%;
		opacity: .7;
	}
	#title:after {
		right: 50%;
		opacity: .7;
	}
}

@media screen and (min-width:1200px) {
}

@media screen and (min-width:1500px) {
	#title:before {
		left: 60%;
	}
	#title:after {
		right: 65%;
	}
}

/*====================================================
////ID #leadCopy
====================================================*/
#leadCopy .imgBox figcaption {
	position: absolute;
	width: 40%;
	bottom: 10%;
	right: -12%;
}
#leadCopy .txtBox p {
	font-size: 1.8rem;
	letter-spacing: .05em;
	line-height: 2;
	margin: 2em 0;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#leadCopy .innerBox {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#leadCopy .imgBox {
		width: 80%;
		max-width: 400px;
		margin: auto;
	}
}

@media screen and (max-width:480px) {
	#leadCopy .txtBox p {
		font-size: 4.5vw;
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#leadCopy .imgBox {
		width: 48%;
	}
	#leadCopy .txtBox {
		width: 48%;
		-webkit-transition-delay: .4s;
		transition-delay: .4s;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#leadCopy .imgBox figcaption {
		bottom: -13%;
		width: 50%
	}
	#leadCopy .txtBox p {
		font-size: 1.6rem;
	}
}

@media screen and (min-width:1200px) {
}

/*====================================================
////ID #detail
====================================================*/
#detail {
	background: #E5F8E5;
}
#detail .imgBox {
	background: #fff;
	border-radius: 100%;
	padding-top: 100%;
	position: relative;
	width: 100%;
}
#detail .imgBox figure {
	position: absolute;
	width: 75%;
	height: 60%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#detail .imgBox figure img {
	-o-object-fit: contain;
	object-fit: contain;
	width: 100%;
	height: 100%;
}
#detail dt {
	color: #00b900;
	font-size: 2.2rem;
	font-weight: bold;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#detail .innerBox {
		grid-gap: 30px;
	}
	#detail .item {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	#detail .imgBox {
		margin-right: 1.5em;
		width: 180px;
		height: 180px;
		padding: 0;
	}
	#detail dl {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	#detail dt {
		margin-bottom: .3em;
	}
}

@media screen and (max-width:480px) {
	#detail .item {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#detail .imgBox {
		margin: 0;
	}
	#detail dt {
		text-align: center;
		margin-top: .8em;
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#detail .innerBox {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 40px;
		max-width: 960px;
	}
	#detail .item {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	#detail .item:nth-child(2) {
		-webkit-transition-delay: .4s;
		transition-delay: .4s;
	}
	#detail .item:nth-child(3) {
		-webkit-transition-delay: .8s;
		transition-delay: .8s;
	}
	#detail dt {
		margin: 1em 0 .5em;
		text-align: center;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#detail .innerBox {
		grid-gap: 20px;
	}
}

@media screen and (min-width:1200px) {
}

/*====================================================
////ID #event
====================================================*/
#event .txtBox {
	border: solid 6px #00b900;
	max-width: 800px;
	margin: auto;
	position: relative;
}
#event .txtBox .ribbon {
	overflow: hidden;
	position: absolute;
	top: -10px;
	left: -10px;
	width: 300px;
	height: 300px;
}
#event .txtBox .ribbon p {
	background: #00b900;
	color: #fff;
	font-size: 3.2rem;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.1;
	margin: 12% 0 0 -35%;
	padding: .3em;
	text-align: center;
	-webkit-transform: rotate(-38deg);
	transform: rotate(-38deg);
}
#event .txtBox .headBox {
	background: #94e594;
}
#event .txtBox h2 {
	font-weight: bold;
	margin: 0;
	text-align: center;
	padding: 1em 0;
	width: 60%;
	margin: auto;
}
#event .txt-inner {
	padding: 20px 4%;
}
#event .coupon {
	color: #d30000;
	font-weight: bold;
	padding: 20px 0;
	text-align: center;
}
#event .coupon p.subTxt {
	margin-bottom: .5em;
}
#event .coupon p {
	margin: 0;
	line-height: 1.0;
}
#event .itemBox {
	grid-gap: 10px 20px;
}
#event .itemBox dl {
	border: solid 1px;
	border-color: #94e594;
}
#event .itemBox dt {
	color: #00b900;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 8px;
	text-align: center;
}
#event .itemBox dd {
	font-size: 1.6rem;
	position: relative;
	-webkit-transition: .2s all;
	transition: .2s all;
}
#event .itemBox dd:before {
	background: #00b900;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 30px;
	height: 1px;
}
#event .itemBox dd .accordion-inner {
	padding: 10px 15px;
}
#event .copy {
	margin-bottom: 30px;
}
#event .copy .big {
	font-size: 1.5em;
	margin: 0 .2em;
}
#event .copy .markList {
	margin-top: .5em;
}
#event figure {
	width: 300px;
}
#event figcaption.txt {
	font-size: 1.2rem;
	margin-top: .5em;
	text-align: center;
}

#event figcaption.keyword {
	position: absolute;
	top: 19.5%;
	left: 20%;
	line-height: 1;
}
#event .triangle span {
	border: solid transparent;
	border-width: 10px 0 10px 30px;
	border-left-color: #00b900;
	display: inline-block;
	width: 0;
	height: 0;
}
#event .attentionBox {
	color: #888;
	font-size: 1.2rem;
	margin-top: 30px;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#event .txtBox .ribbon {
		width: 40vw;
		height: 30vw;
	}
	#event .txtBox .ribbon p {
		font-size: 5vw;
		margin-top: 10%;
	}
	#event .txtBox h2 {
		margin: 0 0 0 auto;
		width: 90%;
		padding: 1.4em 0;
	}
	#event .coupon p.subTxt {
		font-size: 2.4rem;
	}
	#event .coupon p {
		font-size: 7rem;
	}
	#event .itemBox dt {
		cursor: pointer;
		position: relative;
	}
	#event .itemBox dt:after {
		border: solid #00b900;
		border-width: 0 2px 2px 0;
		content: '';
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: .2s all;
		transition: .2s all;
		width: 10px;
		height: 10px;
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	#event .itemBox .open dt:after {
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	#event .itemBox dd {
		height: 0;
		overflow: hidden;
		font-size: 1.4rem;
	}
	#event .sample {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	#event .triangle {
		margin: 20px
	}
	#event .triangle span {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@media screen and (max-width:480px) {
	#event .coupon p.subTxt {
		font-size: 5vw;
	}
	#event .coupon p {
		font-size: 12vw;
	}
	#event figure {
		width: 70vw;
	}
	#event figcaption.keyword {
/*		top: 18%;*/
	}
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#event .txtBox h2 {
		font-size: 3.4rem;
	}
	#event .coupon p.subTxt {
		font-size: 4rem;
	}
	#event .coupon p {
		font-size: 9rem;
	}
	#event .itemBox {
		grid-template-columns: 1fr 1fr;
	}
	#event .itemBox dl:last-child {
		grid-column: span 2;
	}
	#event .itemBox dl dd {
		height: auto !important;
	}
	#event .copy {
		text-align: center;
	}
	#event .sample {
		width: 660px;
		margin: auto;
	}
	#event .sample .triangle {
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
	}
	#event .sample .item:last-child {
		-webkit-transition-delay: .6s;
		transition-delay: .6s;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}

/*====================================================
////ID #link
====================================================*/
#link {
	background: #00b900;
	position: relative;
	text-align: center;
}
#link:before {
	background: url(../../img/contents/2020aw/202010_line/link_bg.jpg) no-repeat center /contain;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
}
#link h2 {
	color: #fff;
	font-weight: bold;
	font-size: 5rem;
	margin-top: 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#link:before {
		width: 100%
	}
	#link .linkBox {
		position: relative;
		padding: 0 0 40px;
	}
	#link .linkBox .linkBtn {
		width: 90%;
		margin: 0 auto;
	}
	#link .linkBox .logo {
		position: absolute;
		width: 35%;
		height: 80px;
		right: 0%;
		bottom: -40px;
	}
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
	#link .qr {
		max-width: 260px;
		margin: auto;
	}
	#link .qr figcaption {
		position: absolute;
		width: 50%;
		left: 105%;
		bottom: 5%;
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}

/*====================================================
////ID 
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (max-width:480px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}

@media screen and (min-width:1200px) {
}
