@charset 'utf-8';

/* header
---------------------------------------------------------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: background .3s;
}

.header.is-stuck {
	background: rgba(0,0,0,0.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.no-backdropfilter .header.is-stuck {
	background: rgba(0,0,0,0.8);
}

.header .header-inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 736px;
	margin: auto;
}

.header .header-siteroot {
	order: 2;
	width: 125px;
	margin-right: auto;
}

.header .header-sammy {
	order: 1;
	width: 58px;
	margin-left: 10px;
	margin-right: auto;
}

.header .header-gnav {
	order: 3;
	margin-right: -5px;
}

.is-nav-open .header {
	z-index: 100;
	background: #090331;
	transition: none;
}

.is-nav-open .header .header-inner {
	position: static;
}

.is-nav-open .header .header-siteroot,
.is-nav-open .header .header-sammy,
.is-nav-open .header .header-audio {
	display: none;
}

.is-nav-open .header .header-gnav {
	margin-left: auto;
}

.siteroot > a,
.siteroot > span {
	display: block;
	transition: opacity .3s;
}

.siteroot > a:before,
.siteroot > span:before {
	content: '';
	display: block;
	padding-top: 62.32%;
	background: url(../img/logo.png) no-repeat center;
	background-size: contain;
}

.siteroot > a:hover {
	opacity: 0.7;
}

.sammy > a {
	display: block;
	transition: opacity .3s;
}

.sammy > a:before {
	content: '';
	display: block;
	padding-top: 26%;
	background: url(../img/logo_sammy.png) no-repeat center;
	background-size: contain;
}

.sammy > a:hover {
	opacity: 0.7;
}

.gnav .gnav-toggle > a {
	display: block;
	width: 48px;
	padding: 18px 15px;
	box-sizing: content-box;
	background: url(../img/icon_menu.png) no-repeat center;
	background-size: 48px auto;
}

.gnav.is-open .gnav-toggle > a{
	background-image: url(../img/icon_menu_close.png);
	background-size: 50px auto;
}

.gnav .gnav-toggle > a:before {
	content: '';
	display: block;
	padding-top: 82%;
}

.gnav .gnav-body {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: calc(100vh - 78px);
	z-index: 100;
	background: #090331;
	overflow-y: scroll;
}

.gnav-body-inner {
	max-width: 716px;
	margin: auto;
	padding: 0 20px 30px;
}

.gnav.is-open .gnav-body {
	display: block;
}

.gnav .mod-separator {
	margin: 0 auto;
	opacity: 0.2;
}

.gnav .gnav-primary-item {
	color: #c8f4fe;
	font-size: 2.4rem;
	line-height: 1.2;
	text-align: center;
	font-weight: bold;
}

.gnav .gnav-primary-item > a {
	display: block;
	padding: 18px 10px;
	transition: opacity .3s;
}

.gnav .gnav-primary-item > a:hover {
	opacity: 0.7;
}

.gnav .gnav-primary-item > a > span {
	position: relative;
	display: inline-block;
}

.gnav .gnav-primary-item.new > a > span:before {
	content: 'NEW';
	position: absolute;
	top: 50%;
	right: 100%;
	display: inline-block;
	min-width: 54px;
	margin-right: 12px;
	padding: 5px 10px;
	font-size: 1.2rem;
	line-height: 1;
	color: #fff;
	background: #8c00cd;
	border-radius: 10px;
	transform: translateY(-50%);
}

.gnav .gnav-primary-item img {
	width: auto;
	height: 30px;
}

.gnav .gnav-secondary {
	padding: 20px 0;
	overflow: hidden;
}

.gnav .gnav-secondary-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 -7px;
} 

.gnav .gnav-secondary-item {
	width: calc(50% - 14px);
	margin: 0 7px;
}

.gnav .gnav-secondary-item a {
	display: block;
	transition: opacity .3s;
}

.gnav .gnav-secondary-item > a:hover {
	opacity: 0.7;
}

.gnav .gnav-tertiary {
	padding: 20px 0 0;
}

.gnav .feature-banners-viewer {
	max-width: 100%;
}
.gnav .feature-banners .slick-list {
    overflow: hidden;
}

@media only screen and (min-width: 767px) {
	.header .header-inner {
		padding: 0;
	}

	.header .header-sammy {
		width: 113px;
	}

	.header .header-siteroot {
		width: 215px;
	}

	.gnav .gnav-toggle > a {
		width: 96px;
		background-size: 96px auto;
	}

	.gnav.is-open .gnav-toggle > a{
		background-size: 103px auto;
	}

	.gnav .gnav-body {
		padding: 20px 42px 50px;
		height: calc(100vh - 114px);
	}
	
	.gnav .gnav-primary-item {
		font-size: 4.8rem;
	}

	.gnav .gnav-primary-item > a {
		padding: 26px 20px;
	}

	.gnav .gnav-primary-item img {
		width: auto;
		height: auto;
	}

	.gnav .gnav-primary-item.new > a > span:before {
		min-width: 108px;
		margin-right: 24px;
		padding: 10px 20px;
		font-size: 2.4rem;
		border-radius: 20px;
	}

	.gnav .gnav-secondary-items {
		margin: 0 -15px;
	} 

	.gnav .gnav-secondary-item {
		width: calc(50% - 30px);
		margin: 0 15px;
	}
}


/* feature banners
---------------------------------------------------------- */
.feature-banners {
	margin: 0 -8px;
}

.feature-banners .feature-banners-viewer {
	position: relative;
	margin: auto;
}

.feature-banners .feature-banners-item a {
	display: block;
	transition: opacity .3s;
}

.feature-banners .feature-banners-item a:hover {
	opacity: 0.7;
}

.feature-banners .slick-track {
	display: flex;
	align-items: center;
}

.feature-banners .slick-slide {
	float: none;
	margin: 0 -8px;
    padding: 0 16px;
	opacity: 0.5;
	transition: opacity .3s;
}

.feature-banners .slick-slide.slick-active {
	opacity: 1;
	transition-delay: .15s;
}

.feature-banners .slick-dots {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

.feature-banners .slick-dots li {
	margin: 0 5px;
	font-size: 0;
}

.feature-banners .slick-dots li button {
	width: 16px;
	height: 16px;
	background: url(../img/bg_dots_off.png) no-repeat center;
	background-size: contain;
}

.feature-banners .slick-dots li.slick-active button {
	background-image: url(../img/bg_dots_on.png);
}

.feature-banners .feature-banners-prev {
	position: absolute;
	top: 50%;
	left: -8px;
	z-index: 1;
	width: 35px;
	font-size: 0;
	transform: translateY(-50%);
}

.feature-banners .feature-banners-next {
	position: absolute;
	top: 50%;
	right: -8px;
	z-index: 1;
	width: 35px;
	font-size: 0;
	transform: translateY(-50%);
}

.feature-banners .feature-banners-prev button,
.feature-banners .feature-banners-next button {
	display: block;
	width: 100%;
}

.feature-banners .feature-banners-prev button:before {
	content: '';
	display: block;
	padding-top: 222%;
	background: url(../img/btn_feature_banner_prev.png) no-repeat center;
	background-size: contain;
}

.feature-banners .feature-banners-next button:before {
	content: '';
	display: block;
	padding-top: 222%;
	background: url(../img/btn_feature_banner_next.png) no-repeat center;
	background-size: contain;
}

@media only screen and (min-width: 767px) {
	.feature-banners .slick-dots li {
		margin: 0 10px;
	}

	.feature-banners .slick-dots li button {
		width: 32px;
		height: 32px;
	}

	.feature-banners .feature-banners-prev {
		width: 70px;
		left: -35px
	}

	.feature-banners .feature-banners-next {
		width: 70px;
		right: -35px
	}
}

/* main / structure
---------------------------------------------------------- */
.structure {
	padding: 0 16px;
}

.structure .structure-container {
	max-width: 670px;
	margin: auto;
}

.structure .structure-container.full {
	max-width: none;
	margin: 0 -16px;
}

/* backtotop
---------------------------------------------------------- */
.backtotop {
	position: relative;
	height: 55px;
	margin-top: 22px;
	margin-bottom: 30px;
	box-sizing: content-box;
}

.backtotop .backtotop-inner {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	height: 0;
	padding: 0 20px;
	text-align: right;
	opacity: 0;
	transition: opacity .3s;
}

.backtotop.is-show .backtotop-inner {
	opacity: 1;
}

.backtotop.is-stuck .backtotop-inner {
	position: fixed;
	bottom: 30px;
}

.backtotop .backtotop-body {
	position: relative;
	max-width: 756px;
	margin: 0 auto;
}

.backtotop .backtotop-body > a {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 55px;
	margin-top: -55px;
}

.backtotop .backtotop-body > a:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 5px;
	background: #090331;
	border-radius: 50%;
}

.backtotop .backtotop-body > a:after {
	content: '';
	position: relative;
	z-index: 1;
	display: block;
	padding-top: 100%;
	background: url(../img/btn_pagetop.png) no-repeat center;
	background-size: contain;
}

@media only screen and (min-width: 767px) {
	.backtotop {
		margin-top: 45px;
		margin-bottom: 75px;
	}
}

/* footer
---------------------------------------------------------- */
.footer {
	padding: 0 20px;
	background: #040022;
}

.footer .footer-inner {
	max-width: 756px;
	margin: 0 auto;
	padding: 20px 0;
}

.footer .copyright {
	text-align: right;
	color: #e2faff;
	font-size: 1.2rem;
}

/* 汎用グリッド
---------------------------------------------------------- */
.grid .grid-inner {
	padding-left: 5px;
	padding-right: 5px;
	margin-left: -5px;
	margin-right: -5px;
	overflow: hidden;
}

.grid .grid-items {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -10px;
}

.grid .grid-item {
	margin: 0 5px 10px;
}

.grid.twoUp .grid-item {
	width: calc(50% - 10px);
}

.grid.threeUp .grid-item {
	width: calc(33.33% - 10px);
}

.grid.fourUp .grid-item {
	width: calc(25% - 10px);
}


@media only screen and (min-width: 767px) {
	.grid .grid-inner {
		padding-left: 10px;
		padding-right: 10px;
		margin-left: -10px;
		margin-right: -10px;
	}

	.grid .grid-items {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px -20px;
	}

	.grid .grid-item {
		margin: 0 10px 20px;
	}

	.grid.twoUp .grid-item {
		width: calc(50% - 20px);
	}

	.grid.threeUp .grid-item {
		width: calc(33.33% - 20px);
	}

	.grid.fourUp .grid-item {
		width: calc(25% - 20px);
	}
}


/* banners
---------------------------------------------------------- */
.banners {
	max-width: 700px;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
	overflow: hidden;
}

.banners.large {
	max-width: 1075px;
}

.banners + .banners {
	margin-top: -35px;
}

.banners .banners-item {
	margin-bottom: 15px;
	text-align: center;
}

.banners .banners-item a {
	display: block;
}

.banners .banners-item img {
	width: 100%;
	height: auto;
}

.banners:not(.large) .banners-items {
	display: flex;
	margin: 0 -10px;
}

.banners:not(.large) .banners-item {
	width: calc(50% - 20px);
	margin: 0 10px 20px;
}

.banners:not(.large) .banners-item:nth-child(odd) {
	text-align: right;
}

.banners:not(.large) .banners-item:nth-child(even) {
	text-align: left;
}


@media only screen and (min-width: 767px) {
	.banners {
		max-width: 670px;
		margin-top: 70px;
		margin-bottom: 70px;
	}

	.banners + .banners {
		margin-top: -50px;
	}

	.banners.large {
		max-width: 670px;
		margin-left: auto;
		margin-right: auto;
	}

	.banners.large .banners-items {
		margin-bottom: -20px;
	}

	.banners.large .banners-item {
		width: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
}