@charset "UTF-8";

/* ===============================
	変数定義
=============================== */
:root {
	--color-white-gray: #f5f5f5;
	--color-light-gray: #d9d9d9;
	--color-gray: #959595;
	--color-blue: #002d4e;
	--bg-color: #f4f2f0;
	--margin-large: 6rem;
	--margin-medium: 4rem;
	--margin-small: 2rem;

	/* フォント */
	--arial: "arial", sans-serif;
	--gothic: "Zen Kaku Gothic New", sans-serif;
	--helvetica: "helvetica-neue-lt-pro", sans-serif;
}

/* ===============================
	共通スタイル
=============================== */
/* マージン */
.mts {
	margin-top: var(--margin-small);
}

.mtm {
	margin-top: var(--margin-medium)
}

.mtl {
	margin-top: var(--margin-large);
}

.mt1em {
	margin-top: 1em;
}

/* フレックスコンテナ */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	inline-size: 100%;
}

/* 共通 */
article {
	font-weight: 400;
	background-color: var(--bg-color);
}

.white-border {
	border: 2px solid #fff;
}

/* MV */
.guinness-mv {
	padding-block: 3rem 1rem;
	background-color: #002d4e;
	overflow: hidden;
}

.guinness-mv-container {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 5rem;
	padding-inline: 5%;
}


/* スプライド */

.mv-splide {
	position: relative;
	margin-top: 4rem;
}

.splide__slide {
	inline-size: 41%;
	max-inline-size: 620px;
}

.splide__slide img {
	border-radius: 30px;
}

.icon-splide-play,
.icon-splide-pause {
	display: block;
	inline-size: 22px;
	block-size: 22px;
	color: #c79d10;
}

.icon-active {
	color: #ece9e3;
}

.splide-pagenation-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0%);
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
	margin: 1rem auto 0;
	padding: 5px 20px;
	inline-size: 100px;
	block-size: 40px;
	background-color: #fff;
	border-radius: 5px;
}


/* ギネス：イントロ部分 */

.guinness-intro {
	padding-block: 12rem;
	font-family: var(--gothic);
}

.base-intro {
	position: relative;
}

.logo-link-btn {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-50%, -110%) scale(0);
	display: flex;
	justify-content: center;
	align-items: center;
	inline-size: 190px;
	block-size: 190px;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	animation: zoom-in 1s forwards;
}

.logo-link-btn img {
	inline-size: 130px;
	animation: zoom-in-logo 1.5s forwards;
	opacity: 0;
}

@keyframes zoom-in {
	0% {
		opacity: 0;
		transform: translate(-50%, -110%) scale(0);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -110%) scale(1);
	}
}

@keyframes zoom-in-logo {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.intro-title {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
}

.intro-title span {
	display: block;
}

.intro-text {
	margin-top: 1.5em;
	font-size: 1.8rem;
	font-weight: 500;
	margin-inline: auto;
	text-align: center;
}

.guinness-date {
	margin-top: 10rem;
	text-align: center;
	font-weight: bold;
	line-height: 1.7;
}

.certification-area {
	margin-top: 10rem;
}

.certification-text {
	font-size: 2rem;
	text-align: center;
}

.certification-text em {
	position: relative;
	color: #002D4E;
	font-size: 3rem;
}

.certification-attention {
	inline-size: 7rem;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
}

.certification-img {
	position: relative;
	inline-size: 575px;
	margin-inline: auto;
	margin-top: 4rem;
	box-shadow: 0px 0px 0px 10px #fff;
}

.certification-icon {
	position: absolute;
	top: 0;
	right: 0;
	inline-size: 165px;
	transform: translate(45%, -20%);
	filter: drop-shadow(-2px 5px 0px #fff);
}

.guinness-movie-area {
	margin-top: 10rem;
}

.ginness-movie {
	transition: .4s;
}

.guinness-movie-title {
	display: flex;
	justify-content: center;
	align-items: center;
}

.guinness-movie-title span {
	font-size: 2.5rem;
	font-weight: bold;
}

.guinness-movie-title img {
	inline-size: 5rem;
	block-size: 5rem;
}

.movie-container {
	position: relative;
	inline-size: 575px;
	margin-top: 2rem;
	margin-inline: auto;
}

.guinness-movie-img {
	border-radius: 30px;
	box-shadow: 0px 0px 0px 10px #c4cdd4;
}

.movie-flag {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	inline-size: 280px;
	z-index: 2;
}

.guinness-message-area {
	margin-top: 12rem;
}

.guinness-message-text {
	font-size: 2.8rem;
	text-align: center;
	font-weight: bold;
	line-height: 1.7;
}

/* その他のコンテンツ */




/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {



	/* MV */
	.guinness-mv-container {
		column-gap: 0rem;
	}

	.guinness-mv {
		padding-block: 2rem 1rem;
	}


	/* スプライド */

	.mv-splide {
		margin-top: 1rem;
	}

	.splide__slide {
		inline-size: 70%;
	}

	.splide__slide img {
		border-radius: 20px;
	}

	.splide-pagenation-wrap {
		inline-size: 80px;
		block-size: 30px;
	}

	.splide__play img,
	.splide__pause img {
		display: block;
		inline-size: 17px;
	}



	/* ギネス：イントロ部分 */

	.guinness-intro {
		padding-block: 5rem;
		font-family: var(--gothic);
	}

	.logo-link-btn {
		top: 0;
		right: 0;
		transform: translate(-10%, -110%) scale(0);
		inline-size: 100px;
		block-size: 100px;
	}

	@keyframes zoom-in {
		0% {
			opacity: 0;
			transform: translate(-10%, -110%) scale(0);
		}

		100% {
			opacity: 1;
			transform: translate(-10%, -110%) scale(1);
		}
	}

	.logo-link-btn img {
		inline-size: 65px;
	}

	.certification-img {
		inline-size: 90%;
	}

	.certification-icon {
		position: absolute;
		top: 0;
		right: 0;
		inline-size: 100px;
		transform: translate(25%, -25%);
	}

	.certification-area {
		margin-top: 6rem;
	}

	.movie-container {
		inline-size: 90%;
	}

	.movie-flag {
		transform: translate(-25%, -25%);
		inline-size: 180px;
	}

	.intro-title {
		font-size: 1.6rem;
		line-height: 1.5;
		text-align: left;
	}

	.intro-title span {
		display: inline;
	}

	.intro-text {
		font-size: 1.4rem;
		text-align: left;
	}

	.guinness-date {
		margin-top: 4rem;
	}

	.guinness-message-area {
		margin-top: 5rem;
	}

	.guinness-message-text {
		font-size: 1.6rem;
		text-align: left;
	}

	.guinness-movie-area {
		margin-top: 5rem;
	}

	.certification-attention {
		inline-size: 4rem;
	}

	.certification-text {
		font-size: 1.8rem;
		line-height: 1.5;
	}


	.guinness-movie-title span {
		font-size: 1.8rem;
	}

	.guinness-movie-title img {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {
	:root {
		--margin-large: 8rem;
		--margin-medium: 6rem;
		--margin-small: 4rem;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {

}

/* ====================================
	PC専用スタイル（1080px～）
===================================== */
@media print,
screen and (1080px <=width) {}


/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {

	a:hover {
		text-decoration: none;
	}

	.contents-box:hover .contents-img {
		opacity: .7;
	}

	.contents-box:hover .contents-btn p {
		text-decoration: underline;
	}

	.ginness-movie:hover {
		opacity: .8;

	}
}