@charset "utf-8";




/* ========================================================================================== */
.is-grandia {
	border-top: 3px solid #ff2b05;
	position: relative;
}

.is-grandia * {
	font-feature-settings : 'palt';
	box-sizing: border-box;
}

.is-grandia em {
	font-style: normal !important;
}

.is-grandia img {
	max-width: 100%;
	height: auto;
	backface-visibility: hidden;
	transition: .2s ease;
}

.is-grandia a,
.is-grandia a:before,
.is-grandia a:after {
	transition: .2s ease;
}

.is-grandia a:hover,
.is-grandia a:hover img {
	opacity: .8;
}

.u-grandia-button {
	text-align: center;
	padding: 40px 0 0;
	display: block;
}

.u-grandia-button .button {
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: .15em;
	padding: 12.5px 40px 12.5px 30px;
	display: inline-block;
	border: 1px solid #000;
	position: relative;
}

.u-grandia-button .button:hover {
	opacity: 1;
}

.u-grandia-button .button:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 14px;
	border-color: transparent transparent transparent #000;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
}

.u-grandia-button .button:hover {
	color: #fff;
	background: #000;
}

.u-grandia-button .button:hover:after {
	border-color: transparent transparent transparent #fff;
	right: 15px;
}

.u-grandia-button.is-white .button {
	color: #fff;
	border-color: #fff;
}

.u-grandia-button.is-white .button:hover {
	color: #000;
	background: #fff;
}

.u-grandia-button.is-white .button:after {
	border-color: transparent transparent transparent #fff;
}

.u-grandia-button.is-white .button:hover:after {
	border-color: transparent transparent transparent #000;
}

.u-show-pc {
	display: inline-block !important;
}

.u-show-tablet {
	display: none !important;
}

.u-show-mobile {
	display: none !important;
}




/* ========================================================================================== */
.l-grandia-menu {
	background: #000;
	z-index: 100;
}


.l-grandia-menu__items {
	padding: 12px 0;
	display: flex;
	justify-content: center;
}

.l-grandia-menu__item {
	padding: 0 40px;
	border-right: 1px solid #fff;
}

.l-grandia-menu__item:nth-of-type(1) {
	border-left: 1px solid #fff;
}

.l-grandia-menu__item a {
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: .1em;
}




/* ========================================================================================== */
.l-main {
	background: #f1f1f1;
	position: relative;
}

.l-main__slide {
	overflow: hidden;
}

.l-main__slide-items {
	margin: 0;
}

.l-main__slide-item {
	margin: 0;
	transition: 1s ease;
	opacity: 0;
}

.l-main__slide-item img {
	width: 100%;
	max-width: none;
}

.l-main__slide-item.slick-initialized{
	opacity: 1;
}

.l-main .slick-dots {
	bottom: 20px;
}

.l-main .slick-dots li button:before {
	color: #fff;
	opacity: 1;
}

.l-main .slick-dots li.slick-active button:before {
	color: #646464;
}




/* ========================================================================================== */
.l-grandia-video {
	position: relative;
}

.l-grandia-video img {
	width: 100%;
	max-width: none;
}

.l-grandia-video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}




/* ========================================================================================== */
.l-zero {
	padding: 120px 0;
}

.l-zero__title {
	padding: 0 0 5%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.l-zero__title-logo {
	max-width: 8.25%;
	margin: 0 2.5% 0 0;
}

.l-zero__title-copy {
	max-width: 34.5%;
}

.l-zero__read {
	font-size: 1.6rem;
	line-height: 2.25em;
	letter-spacing: .15em;
	text-align: justify;
	text-justify: inter-ideograph;
}

.l-zero h5 {
	text-align: center;
	letter-spacing: .15em;
	padding: 0 0 3%;
}

.l-zero h5 em {
	font-size: 2.2rem;
	font-style: normal;
	padding: 0 0 1.5%;
	display: block;
}

.l-zero h5 span {
	font-size: 1.6rem;
	font-style: normal;
	display: block;
}

.l-zero h5 mark {
	color: #ff2b04;
	font-weight: 700;
	font-style: normal;
	background: transparent;
}




/* ========================================================================================== */
.l-function__title {
	text-align: center;
	padding: 0 0 3.5%;
}

.l-function__title img {
	width: 40.5%;
}

.l-function__title.is-etc {
	padding: 7% 0 3.5%;
}

.l-function__title.is-etc img {
	width: 31.5%;
}

.l-function__wrap {
	position: relative;
}

.l-function__corner-title {
	text-align: center;
	width: 50%;
	padding: 8.5% 0 0;
	position: absolute;
}

.l-function__corner-title img {
	max-width: 60%;
}

.l-function__corner-button {
	text-align: center;
	width: 50%;
	padding: 15% 0 0;
	position: absolute;
	z-index: 10;
}

.l-function__wrap:nth-of-type(even) .l-function__corner-title,
.l-function__wrap:nth-of-type(even) .l-function__corner-button {
	/*padding-left: 7.5%;*/
	right: -75px;
}

.l-function .u-grandia-button .button {
	transition: .2s ease;
	cursor: pointer;
}




/* ========================================================================================== */
.l-grandia-relation-video {
	padding: 160px 0 0;
}

.l-grandia-relation-video .e-video {
	/*padding: 56.25% 0 0;*/
	position: relative;
}

.l-grandia-relation-video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.l-grandia-relation-video .e-video-wrap {
	margin: 0 -10px;
	padding: 30px 0 0;
	display: flex;
}

.l-grandia-relation-video .e-video-wrap .e-video {
	width: 50%;
	margin: 0 10px;
	/*padding: 26.75% 0 0;*/
}





/* ========================================================================================== */
.l-lineup {
	padding: 160px 0 0;
}

.l-lineup__inner {
	padding: 0 0 15%;
	position: relative;
}

.l-lineup__inner a {
	display: block;
}

.l-lineup__title {
	text-align: center;
	margin: 0 0 100px;
}

.l-lineup__title img {
	max-width: 16.5%;
}

.l-lineup__title-grandia {
	max-width: 27%;
	margin: 0 0 4%;
	padding: 4% 2.5%;
	border: 6px solid #f07e01;
}

.l-lineup__text-catch {
	color: #414141;
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: .125em;
	padding: 0 0 0 1%;
}

.l-lineup__text-name {
	color: #414141;
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: .125em;
	padding: 0 0 1% 1%;
}

.l-lineup__text-number {
	color: #414141;
	font-size: 1.6rem;
	letter-spacing: .125em;
	padding: 0 0 0 1%;
}

.l-lineup__image {
	max-width: 62%;
	position: absolute;
	top: 0;
	right: 0;
}




/* ========================================================================================== */
.l-banner__items {
	padding: 0 0 5%;
}

.l-banner__item {
	padding: 0 0 5%;
}

.is-modal {
	height: 100vh;
	overflow: hidden;
}

.l-modal {
	max-width: 75%;
	margin: 0 auto 120px;
	padding: 60px 30px;
	background: #fff;
	display: none;
}

.l-modal-cover {
	width: 100%;
	height: 100%;
	padding: 60px 0 0;
	background-color: rgba(0,0,0,.8);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.is-modal .l-modal-cover {
	display: block;
}

.l-function__modal {
	position: relative;
}

.l-function__modal-title {
	color: #fff;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
	padding: .75em 0 .55em;
	position: relative;
	z-index: 10;
}

#FUNCTION-1 .l-function__modal-title { background: #000;}

#FUNCTION-2 .l-function__modal-title { background: #696b71;}

#FUNCTION-3 .l-function__modal-title { background: #1e1a34;}

#FUNCTION-4 .l-function__modal-title { background: #9598a8;}

.l-function__modal-catch {
	font-size: 2rem;
	font-weight: 700;
	margin: -8% 0 0;
	padding: 20% 0 0 0;
	position: relative;
}

#FUNCTION-1 .l-function__modal-catch {
	/*background: url("/images/grandia/func-img-01.jpg") no-repeat left 5% bottom 0 / auto 100%;*/
}

#FUNCTION-2 .l-function__modal-catch {
	/*background: url("/images/grandia/func-img-03.jpg") no-repeat left 5% bottom 0 / auto 100%;*/
}

#FUNCTION-3 .l-function__modal-catch {
	/*background: url("/images/grandia/func-img-04.jpg") no-repeat left 5% bottom 0 / auto 100%;*/
}

#FUNCTION-4 .l-function__modal-catch {
	/*background: url("/images/grandia/func-img-05.jpg") no-repeat left 5% bottom 0 / auto 100%;*/
}

.l-function__modal-catch em {
	font-style: normal;
	display: block;
	position: absolute;
	top: 60%;
	/*left: 40%;*/
	width:100%;
	text-align:center;
}

.l-function__modal-inner {
	margin: 0 0 5.5%;
	display: flex;
	position: relative;
	flex-direction:row-reverse;
}

.l-function__modal-inner:after {
	content: '';
	width: 45px;
	height: 69px;
	display: block;
	background: url("/images/grandia/func-img-02.png") no-repeat center / 100% auto;
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.l-function__modal-description {
	width: calc(100% / 2);
	padding: 120px 0 0 20px;
}

.l-function__modal-description h5 {
	font-size: 2.6rem;
	letter-spacing: .075em;
	margin: 0 0 20px;
}

.l-function__modal-description p {
	font-size: 1.6rem;
	letter-spacing: .05em;
	line-height: 2.25;
}

.l-function__modal-description p.note {
	font-size: 1.6rem;
}

/*
.l-function__modal-slide {
	margin-top: -1px;
	padding: 47% 0 0;
	background: #f1f1f1;
	position: relative;
	z-index: 10;
}

.l-function__modal-slide .slick-list {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
*/

.l-function__modal-slide img {
	margin: 0;
	outline: none;
	opacity: 0;
}

.l-function__modal-slide img.slick-initialized{
	opacity: 1;
}

.l-function__modal-slide .slick-dots {
	margin-top: -40px;
	bottom: auto;
}

.l-function__modal-slide .slick-dots li {
	margin: 0 10px;
}

.l-function__modal-slide .slick-dots li button:before {
	color: #fff;
	font-size: 20px;
	opacity: 1;
}

.l-function__modal-slide .slick-dots li.slick-active button:before {
	color: #a0a0a0;
}

.l-function__modal-image {
	width: calc(100% / 2);
	padding: 125px 0 0 5%;
	box-sizing: border-box;
}

.l-function__modal-link {
	text-align: center;
	position: relative;
}

.l-function__modal-pager {
	font-size: 1.2rem;
	position: absolute;
	top: 50%;
	right: 100px;
	transform: translate(0,-50%);
}

.modal_switch {
	color: #414141;
	font-size: 1.4rem;
	font-weight: 700;
	min-width: 120px;
	margin: 0 10px;
	padding: 10px 30px 10px 40px;
	border: 1px solid #414141;
	display: inline-block;
	position: relative;
	cursor: pointer;
	transition: .2s ease;
}

.modal_switch:hover {
	color: #fff;
	background: #414141;
}

.modal_switch:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 14px 7px 0;
	border-color: transparent #414141 transparent transparent;
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	transition: .2s ease;
}

.modal_switch:hover:after {
	border-color: transparent #fff transparent transparent;
}

.modal_switch:nth-of-type(even) {
	padding: 10px 50px 10px 30px;
}

.modal_switch:nth-of-type(even):after {
	left: auto;
	right: 20px;
	transform: translateY(-50%) scale(-1,1);
}

.l-modal-close {
	width: 70px;
	height: 70px;
	display: block;
	background: url("/images/grandia/button-close-01.png") no-repeat center / 100% auto;
	position: fixed;
	top: 10px;
	right: calc(50% - 43%);
	transform: translateX(-50%);
	z-index: 100;
	cursor: pointer;
}




/* ========================================================================================== */
.l-voice-main {
	text-align: center;
	background: url("/images/grandia/main-bg-01.png") no-repeat center / auto 100%;
	position: relative;
}

.l-voice-main__breadcrumb {
	font-size: 1.2rem;
	text-align: left;
	min-width: 1000px;
	max-width: 1000px;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
}

.l-voice-main__title {
	padding: 10% 0 0;
}

.l-voice-main__title img {
	max-width: 27.5%;
}

.l-voice-main__catch {
	padding: 5% 0 0;
}

.l-voice-main__catch img {
	max-width: 66%;
}

.l-voice-main__logo {
	padding: 5% 0;
}

.l-voice-main__logo img {
	max-width: 13.5%;
}

.l-voice-video__inner {
	position: relative;
}

.l-voice-video__inner iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}




.l-voice-lineup {
	padding: 160px 0 0;
	background: #f1f1f1;
}

.l-voice-lineup h3 {
	text-align: center;
	margin: 0 0 80px;
}

.l-voice-lineup h3 img {
	max-width: 320px;
}

.l-voice-lineup h4 {
	text-align: center;
	margin: 0 0 80px;
	padding: 20px 0;
	background: #fff;
}

.l-voice-lineup .u-inner {
	max-width: 800px;
	margin: 0 auto;
}

.l-voice-lineup__items {
	margin: 0 -10px;
	padding: 0 0 30px;
	display: flex;
	flex-wrap: wrap;
}

.l-voice-lineup__items h5 {
	width: calc(50% - 20px);
	min-height: 550px;
	margin: 0 10px 30px;
	background: #000018;
	box-shadow: 2px 2px 0 0 #b6b6b6;
	position: relative;
}

.l-voice-lineup__items h5 img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.l-voice-lineup__items div {
	width: calc(50% - 20px);
	min-height: 550px;
	margin: 0 10px 30px;
	padding: 0 25px 20px;
	box-shadow: 2px 2px 0 0 #b6b6b6;
	background: #fff;
}

.l-voice-lineup__items div figure:nth-of-type(1) {
	margin: 0 -25px 20px;
}

.l-voice-lineup__items div figure:nth-of-type(2) {
	display: flex;
	align-items: center;
	margin: 0 0 15px;
}

.l-voice-lineup__items div figure:nth-of-type(2) img {
	max-width: 120px;
}

.l-voice-lineup__items div figure:nth-of-type(2) figcaption {
	font-size: 18px;
	font-weight: 700;
	padding: 0 0 0 30px;
}

.l-voice-lineup__items div p {
	font-size: 13px;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}




/* ========================================================================================== */
.l-voice-insta {
	padding: 120px 0 60px;
}

.l-voice-insta h3 {
	text-align: center;
	margin: 0 0 30px;
}

.l-voice-insta p {
	text-align: center;
	margin: 0 0 30px;
}

.l-voice-insta .row {
	max-width: 840px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.l-voice-insta .row > div{
	width: calc(100% / 3);
	padding: 0 10px 10px;
}





/* インスタ テスト設定 ========================================================================================== */
._instagram {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

._instagram a {
	width: calc(100% / 3);
}

._instagram-btn {
	text-align: center;
	padding: 30px 0 60px;
}

.l-voice-insta__wrap {
	max-width: 800px;
	margin: 0 auto;
}

.l-voice-insta__items {
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

.l-voice-insta__items li {
	width: calc(100% / 3 - 20px);
	margin: 0 10px 20px;
	border: 1px solid #dbdbdb;
}

.l-voice-insta__items li:nth-child(n + 7) {
	display: none;
}

.is-more-open .l-voice-insta__items li:nth-child(n + 7) {
	display: inline-block;
}

.l-voice-insta__items a {
	word-wrap: break-word;
	padding: 0 0 20px;
	display: block;
}

.l-voice-insta__items img {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 20px;
}

.l-voice-insta__items span {
	font-size: 12px;
	font-weight: 700;
	padding: 10px 20px;
	display: block;
}

.l-voice-insta__items em {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.75;
	padding: 0 20px 10px;
	display: block;
}

.l-voice-insta__items .video {
	margin: 0 0 20px;
	padding: 100% 0 0;
	background: #f1f1f1;
	position: relative;
}

.l-voice-insta__items video {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.l-voice-insta .u-grandia-button .button {
	font-weight: 700;
	padding: 11px 40px 11px 50px;
}

.is-more-open .l-voice-insta .u-grandia-button .button {
	display: none;
}




/* ========================================================================================== */
.is-grandia.is-grandia-reservation {
	border-top: 0;
}

.l-grandia-reservation__main {
	margin-bottom: 100px;
}

.l-grandia-reservation__product-title {
	line-height: 1;
	text-align: center;
}

.l-grandia-reservation__product-title span {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 20px;
	padding: 3px 14px;
	display: inline-block;
	background: #ff0e0a;
}

.l-grandia-reservation__product-title em {
	letter-spacing: 0.07em;
	font-size: 2.9rem;
	display: block;
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #999;
}

.l-grandia-reservation__product p {
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 2.2;
	text-align: justify;
	margin-bottom: 50px;
	padding: 0 130px;
}

.l-grandia-reservation__product ul {
	text-align: center;
	letter-spacing: -.5em;
	padding: 0 30px;
	display: block;
	transform: scale(.8);
}

.l-grandia-reservation__product li {
	letter-spacing: 0;
	display: inline-block;
}

.is-grandia-reservation .u-grandia-button {
	text-align: center;
	padding: 100px 0 0;
	display: block;
}

.is-grandia-reservation .u-grandia-button a {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	width: 210px;
	padding: 11px 0 11px 20px;
	display: inline-block;
	border: 1px solid #000;
	position: relative;
}

.is-grandia-reservation .u-grandia-button a:hover {
	opacity: 1;
}

.is-grandia-reservation .u-grandia-button a:hover {
	color: #fff;
	background: #000;
}

.l-grandia-reservation__spec {
	padding: 0 0 10%;
}

.l-grandia-reservation__spec ul {
	padding: 50px 16% 0;
}

.l-grandia-reservation__spec li {
	padding: 50px 0 0;
}

.l-grandia-reservation__topics {
	padding: 130px 0;
}

.l-grandia-reservation__topics .p-section__headline__ttl,
.l-grandia-reservation__topics .p-section__headline__txt {
	text-align: center;
}




/* ========================================================================================== */
.l-magazine-main {
	padding: 20% 0 0;
	position: relative;
}

.l-magazine-main .u-inner {
	text-align: center;
	width: 100%;
	padding: 20% 0 0;
	background: rgba(255,255,255,.95) url("/images/grandia/main-bg-01.png") no-repeat center / auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

.l-magazine-main__breadcrumb {
	font-size: 1.2rem;
	text-align: left;
	min-width: 1000px;
	max-width: 1000px;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.l-magazine-main__title {
	width: 100%;
	padding: 9.5% 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

.l-magazine-main__title img {
	max-width: 27.5%;
	margin: 0 auto;
}

.l-magazine-main__catch {
	width: 100%;
	padding: 14.5% 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

.l-magazine-main__catch img {
	max-width: 66%;
	margin: 0 auto;
}

.l-magazine-main__logo {
	padding: 5% 0;
}

.is-fixed .u-inner {
	padding: 6% 0 0;
	position: fixed;
}

.is-fixed .l-magazine-main__breadcrumb {
	opacity: 0;
}

.is-fixed .l-magazine-main__title {
	padding: 1.25% 0 0;
}

.is-fixed .l-magazine-main__title img {
	max-width: 17.5%;
}

.is-fixed .l-magazine-main__catch {
	padding: 3.75% 0 0;
}

.is-fixed .l-magazine-main__catch img {
	max-width: 35%;
}