@charset "utf-8";

@media screen and (max-width: 1379px) {
	.g-naviMenu__item {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}
}
@media screen and (max-width: 1319px) {
	.g-naviMenu__item {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}
}
@media screen and (max-width: 1269px) {
	.g-naviMenu__item {
		padding-right: 11px !important;
		padding-left: 11px !important;
	}
	
	.g-naviMenu__name {
		font-size: 1.4rem !important;
		letter-spacing: 0 !important;
	}
}
@media screen and (max-width: 1169px) {
	.g-naviMenu__item {
		padding-right: 9px !important;
		padding-left: 9px !important;
	}
}
@media screen and (max-width: 1129px) {
	.g-naviMenu__item {
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
}

@media screen and (max-width: 1200px) and (min-width: 960px) {
	ul.slide > li {
		transform-origin: center center;
	}
}

@media screen and (min-width: 961px) {
	section.p3 img.btn_close,
	section.p4,
	section.p5 {
		display: none !important;
	}
	section.p5 {
		z-index: -9999 !important;
		visibility: hidden !important;
	}
}
@media (orientation: landscape) and (max-width: 960px) {
	section.p4 {
		opacity: 0;
		visibility: hidden;
	}
	ul.slide {
		transform: scale(1) !important;
	}
}
@media (orientation: portrait) and (max-width: 600px) {
	section.p4 {
		opacity: 1;
		visibility: visible;
	}
}
@keyframes rotate {
	0% {transform: rotate(0)}
	10% {transform: rotate(0)}
	18% {transform: rotate(90deg)}
	92% {transform: rotate(90deg)}
	100% {transform: rotate(0)}
}
@keyframes color {
	0% {fill: #c2c7c7}
	10% {fill: #c2c7c7}
	18% {fill: #dc000c}
	92% {fill: #dc000c}
	100% {fill: #c2c7c7}
}

@media screen and (max-width: 960px) {

	aside.header,
	section.p1,
	section.p3 {
		display: none !important;
	}
	section.p1 {
		z-index: -9999 !important;
		visibility: hidden !important;
	}
	html,body {
		width: 100vw !important;
		height: 120vh !important;
	}
	section {
		width: 100vw;
		height: 100vh;
	}
	.p2 ul.slide {
		height: 100vh;
	}
	.p2 ul.slide > li {
		height: calc(100% - 30px) !important;
	}

/* .p4 (SP opening) */

	.p4 {
		z-index: 10;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 !important;
		padding: 0 0 10vh;
		text-align: center;
	}
	.p4 h2 {
		display: none !important;
	}

	.p4 p.img {
		position: relative;
		width: 140px;
		height: 140px;
		width: 58vw;
		height: 58vw;
		margin: 0 auto;
	}

	.p4 p.img svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 58vw;
		height: 58vw;
	}
	.p4 p.img svg {
		animation: rotate 5s infinite;
	}
	.p4 p.img svg .circle {
		animation: color 5s infinite;
	}

	.p4 .txt_1 {
		margin: 20px 0 15px;
		line-height: 1.6;
		font-size: 1.8rem;
		color: #dc000c;
	}
	.p4 .txt_2 {
		line-height: 1.6;
		font-size: 1.2rem;
		color: #000;
	}
	.p4 .copy {
		position: fixed;
		bottom: 20px;
		left: 0;
		width: 100vw;
		font-size: 1.1rem;
		color: #717071;
	}

/* .p5 (SP start) */

	.p5 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 !important;
		align-items: center;
		transition: opacity 0.5s;
		visibility: visible;
	}
	.p5.fade {
		opacity: 0;
	}
	.p5 h2 {
		margin: 20px 0 0;
	}
	.p5 h2 img {
		width: auto;
		height: 14vh;
	}
	.p5 li.txt {
		margin: 25px 0 20px;
		text-align: center;
		line-height: 2;
		font-size: 3.4vh;
		color: #dc000c;
	}
	.p5 li.txt small {
		display: block;
		margin: 5px 0 0;
		text-align: center;
		font-size: 3vh;
		color: #000;
	}
	.p5 li.btn a {
		display: none;
		justify-content: center;
		align-items: center;
		width: 26vw;
		height: 10vh;
		margin: 0 auto;
		border-radius: 30px;
		border: solid 1px #dc000c;
		color: #dc000c;
		font-size: 3.6vh;
		transition: none !important;
	}
	.p5 li.btn span {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 26vw;
		height: 10vh;
		margin: 0 auto;
		border-radius: 30px;
		border: solid 1px #999;
		color: #999;
		font-size: 3.6vh;
		transition: none !important;
	}
	.p5 li.btn.m1.m2 a {
		display: flex;
	}
	.p5 li.btn.m1.m2 span {
		display: none;
	}

/* .p2 (SP slide) */

	.p2 {
		margin-top: 0 !important;
	}
	.p2 ul.slide {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: initial;
		min-width: initial;
		padding: 15px;
		background: #f4f4f4 !important;
	}
	.p2 ul.slide > li {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 15px;
		left: 15px;
		padding: 0 0 2vh;
		width: calc(100% - 30px);
		max-width: initial;
		min-width: initial;
	}
	.p2 ul.slide dl {
	}
	.p2 ul.slide dt {
		position: absolute;
		top: 5vh;
		left: 15px;
		width: calc(100% - 30px);
		text-align: center;
		font-size: 4vh;
	}
	.p2 ul.slide dt::after {
		margin: 5px auto 0;
	}
	.p2 ul.slide dl {
	}
	.p2 ul.slide dd.copy {
		margin: 0 0 3vh !important;
		font-size: 5vh;
	}
	.p2 ul.slide dd.link,
	.p2 ul.slide a.link {
		display: none;
	}
	.p2 ul.slide dd.btn {
		bottom: 5vh;
		left: 15px;
		width: calc(100% - 30px);
		max-width: initial;
		min-width: initial;
	}
	.p2 ul.slide dd.btn a {
		width: 34vh;
		height: 7vh;
		font-size: 3.4vh;
	}

	.p2 ul.slide dd.img {
		width: auto !important;
		margin: 0 !important;
	}
	.p2 ul.slide dd.img img {
		width: auto !important;
		margin: 0 auto !important;
	}
	.p2 ul.slide dd.img img.pc {display: none;}
	.p2 ul.slide dd.img img.sp {display: block;}

	.p2 .L01 img {height: 46vh;}
	.p2 .L02 img {height: 44vh;}
	.p2 .L03 img {height: 44vh;}
	.p2 .L04 img {height: 41vh;}
	.p2 .L05 img {height: 34vh;}
	.p2 .L06 img {height: 46vh;}
	.p2 .L07 img {height: 46vh;}
	.p2 .L08 img {height: 46vh;}
	.p2 .L09 img {height: 46vh;}
	.p2 .L10 img {height: 46vh;}
	.p2 .L11 img {height: 46vh;}
	.p2 .L12 img {height: 46vh;}
	.p2 .L13 img {height: 46vh;}

	.p2 ul.slide dd.img span {
		display: none !important;
	}
	.p2 ol.pager_alt {
		top: 15px;
		right: 30px;
		height: calc(100% - 30px);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.p2 ol.pager_alt li {
		margin: 4px 0;
		width: 6px;
		height: 6px;
	}
	.p2 ol.pager_alt a {
		display: none;
	}
	.p2 .L01 ol.pager_alt li:nth-child(1),
	.p2 .L02 ol.pager_alt li:nth-child(1),
	.p2 .L03 ol.pager_alt li:nth-child(2),
	.p2 .L04 ol.pager_alt li:nth-child(3),
	.p2 .L05 ol.pager_alt li:nth-child(3),
	.p2 .L06 ol.pager_alt li:nth-child(4),
	.p2 .L07 ol.pager_alt li:nth-child(5),
	.p2 .L08 ol.pager_alt li:nth-child(6),
	.p2 .L09 ol.pager_alt li:nth-child(7),
	.p2 .L10 ol.pager_alt li:nth-child(8),
	.p2 .L11 ol.pager_alt li:nth-child(8),
	.p2 .L12 ol.pager_alt li:nth-child(9),
	.p2 .L13 ol.pager_alt li:nth-child(10) {
		background: url(/_assets/img/hayawakari/dot_current.svg) no-repeat center right;
		background-size: 6px 6px;
	}
	.p2 img.btn_close {
		position: fixed;
		top: 30px;
		right: 30px;
		width: 21px;
		height: 21px;
	}

	/* video */
	
	ul.video {
		top: 0;
	}

	html:lang(en) ul.slide dt {
		font-size: 1.4rem;
	}
	html:lang(en) ul.slide dd.copy {
		line-height: 1.3;
		font-size: 1.5rem;
	}
	html:lang(en) ul.slide a.link {
		font-size: 1.2rem;
	}
	html:lang(en) .p2 .L03 img {
		height: 38vh;
	}
	html:lang(en) .p2 .L05 img {
		height: 28vh;
	}
	html:lang(en) .p5 h2 img {
		height: 12vh;
	}
	html:lang(en) .p5 li.txt {
		margin: 15px 0 20px;
	}

}