@charset "utf-8";
/* CSS Document */
:root {
	--color-orange: rgb(242, 148, 29);
	--color-blue: rgb(64, 189, 211);
	--color-green: rgb(0, 153, 61);
}
.puzzle_area {
	max-width: 1000px;
	margin: 0 auto;
}
.puzzle_area * {
	font-family: "Noto Sans JP", sans-serif;
}
.puzzle_area p {
	font-size: min(4.102vw, 16px);
	line-height: 2;
}
.puzzle_area span {
		font-weight: 600;
}
.puzzle_area img {
	align-items: center;
	height: auto;
}
.puzzle_wrap {
	background-image: linear-gradient(0deg, transparent 41px, rgb(193, 213, 198) 42px),linear-gradient(90deg,  transparent 41px, rgb(193, 213, 198) 42px);
	background-color: rgb(253, 252, 241);
	background-size: 42px 42px;
	background-attachment: fixed;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.puzzle_orange {
	color: var(--color-orange);
	font-size: 1.3em;
	padding: 0 5px;
}
.puzzle_blue {
	color: var(--color-blue);
	font-size: 1.3em;
	padding: 0 5px;
}
.puzzle_green {
	color: var(--color-green);
	font-size: 1.3em;
	padding: 0 5px;
}
.puzzle_under_orange {
	background: rgba(242, 148, 29, .2);
    padding: 0 5px;
	margin: 0 5px;
}
.puzzle_under_blue {
	background: rgba(64, 189, 211, .2);
    padding: 0 5px;
	margin: 0 5px;
}
.puzzle_under_yellow {
	background: rgba(241, 202, 0, .2);
    padding: 0 5px;
	margin: 0 5px;
}
.puzzle_red {
	color: #FF191D;
}

/*====================
puzzle_fv
====================*/
.puzzle_fv {
	background-color: rgb(253, 252, 241);
	position: relative;
	aspect-ratio: 1/1;
}

.puzzle_title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	height: 68%;
}
.puzzle_bg {
	display: block;
	background-image: url("../img/puzzle_title.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
}
.puzzle_title .pa {
	display: block;
	background-image: url(../img/letter_pa.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20%;
	height: 20%;
	position:absolute;
	top: 46%;
	left: 0;
	animation: 1.5s fade-in__letter_pa ease-out;
}
@keyframes fade-in__letter_pa {
	0% {
		opacity: 0;
		transform: rotate(-20deg);
	}
	20% {
		opacity: .5;
		transform: rotate(-10deg);
	}
	40% {
		opacity: 1;
		transform: rotate(0deg);
	}
}

.puzzle_title .zu {
	display: block;
	background-image: url(../img/letter_zu.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20%;
	height: 20%;
	position:absolute;
	top: 46%;
	left: 22%;
	animation: 1.5s fade-in__letter_zu ease-out;
}
@keyframes fade-in__letter_zu {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
		transform: rotate(-20deg);
	}
	40% {
		opacity: .5;
		transform: rotate(-10deg);
	}
	60% {
		opacity: 1;
		transform: rotate(0deg);
	}
}
.puzzle_title .ru {
	display: block;
	background-image: url(../img/letter_ru.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20%;
	height: 20%;
	position:absolute;
	top: 47%;
	left: 42%;
	animation: 1.5s fade-in__letter_ru ease-out;
}
@keyframes fade-in__letter_ru {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
		transform: rotate(-20deg);
	}
	60% {
		opacity: .5;
		transform: rotate(-10deg);
	}
	80% {
		opacity: 1;
		transform: rotate(0deg);
	}
}
.puzzle_nanpure {
	position: absolute;
	content: url("../img/puzzle_nanpure.png");
	top: 5%;
	right: 5%;
	width: 48%;
	animation: zoomout 4s ease-out infinite;
	opacity: 1;
}

@keyframes zoomout {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.puzzle_quo {
	position: absolute;
	content: url("../img/puzzle_quo.png");
	bottom: 0;
	left: 0;
	width: 35%;
}

.puzzle_puzzle {
	position: absolute;
	content: url("../img/puzzle_puzzle.png");
	bottom: 4%;
    right: 5%;
    width: 13%;
}

/*====================
puzzle_dis
====================*/
.puzzle_dis {
	padding-top: 80px;
	padding-bottom: 80px;
}
.puzzle_dis p,
.puzzle_dis p span {
	font-weight: 600;
}
.puzzle_top {
	margin-top: 20px;
}

/*====================
puzzle_sec
====================*/
.puzzle_sec h1 {
	font-size:min(6.923vw, 27px);
	font-weight: 600;
	display: inline-block;
	position: relative;
}
.puzzle_sec h1::before,
.puzzle_sec h1::after {
	content: "";
	width: 35px;
	height: 35px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.puzzle_sec h1::before {
	left: min(-35px - .5em);
}
.puzzle_sec h1::after {
	right: min(-35px - .5em);
}
.puzzle_01 h1::before {
	background-image: url(../img/illust_puzzle01.png);
}
.puzzle_01 h1::after {
	background-image: url(../img/illust_puzzle02.png);
}
.puzzle_02 h1::before {
	background-image: url(../img/illust_puzzle03.png);
}
.puzzle_02 h1::after {
	background-image: url(../img/illust_puzzle04.png);
}
.puzzle_03 h1::before {
	background-image: url(../img/illust_flag01.png);
}
.puzzle_03 h1::after {
	background-image: url(../img/illust_flag02.png);
}
.puzzle_03 h1 {
	color: var(--color-orange);
}

.puzzle_sec div {
	max-width: 95%;
	margin: 20px auto 50px auto;
	background-color: #fff;
	border: solid 2px rgb(0, 153, 61 );
	padding: 15px;
}
.puzzle_sec div p {
    text-align: left;
}


/*====================
puzzle_btn
====================*/
.puzzle_btn a {
	font-size: min(5.384vw, 21px);
    font-weight: 600;
    color: #fff;
    padding: 15px 15px 15px 25px;
    background-color: rgb(64, 189, 211);
    border-radius: 9999px;
    text-align: center;
    border: solid 2px var(--color-blue);
    transition: 0.3s;
    letter-spacing: 1px;
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    gap: 10px;
	box-shadow: 0px 5px #0a7a8d;
}
.puzzle_btn a .icon_arrow {
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	-webkit-mask-image: url(../img/icon__arrow.svg);
	-webkit-mask-size: cover;
	mask-image: url(../img/icon__arrow.svg);
	mask-size: contain;
	transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
	.puzzle_btn a:hover {
		opacity: 1;
		box-shadow: none;
		transform: translateY(5px);
	}
}

/*====================
puzzle_contact
====================*/
.puzzle_contact {
	margin-top: 80px;
}
.puzzle_contact h2 {
	width: fit-content;
	background-color: var(--color-green);
	padding: .5em 1rem;
	font-size: min(5.384vw, 24px);
	font-weight: 700;
	text-shadow: none;
	color: #fff;
	margin-left: 7%;
}
.puzzle_contact_wrap {
	background-color: var(--color-green);
	padding: 2em 1em;
}
.puzzle_contact_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}
.puzzle_contact h3 {
	font-size: min(4.615vw, 21px);
	font-weight: 600;
	color: #fff;
	margin-bottom: 10px;
}
.puzzle_contact_inner {
	color: #fff;
	line-height: 1.5;
}
.puzzle_anu {
	margin-top: 25px;
	color: #fff;
}

/*====================
min-width: 768px
====================*/
	
@media (min-width: 768px) {
	
	.puzzle_area p {
		font-size: min(2.343vw, 18px);
	}
	/*== puzzle_fv ==*/
	.puzzle_fv {
		aspect-ratio: 4/2.5;
	}
	.puzzle_title {
		width: 60%;
		height: 78%;
	}
	.puzzle_quo {
		width: 27%;
	} 
	.puzzle_nanpure {
		width: 35%;
		top: 8%;
		right: 9%;
	}
	.puzzle_puzzle {
		width: 10%;
	}
	
	/*== puzzle_sec ==*/
	.puzzle_sec h1 {
		font-size: min(4.166vw, 32px);
	}
	.puzzle_sec div {
		max-width: 90%;
		margin: 20px auto 80px auto;
	}
	.puzzle_sec div p {
    text-align: center;
	}
	
	/*== puzzle_contact ==*/
	.puzzle_contact_inner {
		flex-direction: row;
		gap: 110px;
	}
	.puzzle_contact_inner {
		line-height: 1.5;
	}
	
}