@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;700&family=Righteous&display=swap');

:root {
	--bg-color1: #ff283c;
	--bg-color2: #00b0ff;

	--font-color1: #fff;
	--font-color2: #444;

	--sns-color1: #111111; /* X */
	--sns-color2: #1877f2; /* F */
	--sns-color3: #00b900; /* L */
}

html {
	scroll-behavior: smooth;
}

html,body {
	height: 100%
	background: var(--bg-color1);
}

body {
	margin: 0 auto;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
	background: var(--bg-color1) url("../img/k25/bg.png");
	color: var(--font-color2);
}

* {
	/*margin: 0 auto;*/
	/*-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	user-drag: none;
	-webkit-user-drag: none;*/
}

a {
	text-decoration: none;
	color: var(--font-color2);
}

hr {
	width:100%;
	border: 0px;
	border-top: solid .2rem var(--font-color2);
}

img {
	pointer-events: none;
}

#container {
	margin: 0 auto;
	min-width: 640px;
	max-width: 960px;
	height: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 1rem;
	grid-auto-columns: 100%;
	font-size: 1.6rem;
}

#container > div {
	width: 100%;
	min-width: 640px;
}

#container > div > * {
	transform: rotate(.05deg);
}


/* ------------------------------------------------------------------------- */

#header {
	background:#fff;
	border-radius: 0 0 2rem 2rem;
	box-shadow: 0 .4rem 0 0 rgba(0, 0, 0, .2);
	padding-bottom:1rem;
	margin-bottom:4rem;
}

#header > img {
	width: 100%;
	object-fit: none;
	object-position:50% 50%;
}

#header ul {
	width:90%;
	list-style: none;
	display:flex;
	flex-wrap: wrap;
	gap:.2em;
	justify-content: space-evenly;
	padding:0;
	margin:0 auto;
	font-size: .8em;
}

#header li:before {
	content: '\f138  ';
	font-family: "Font Awesome 5 Free",'M PLUS Rounded 1c', sans-serif;
	font-weight: 900;
}

#header li {
	cursor: pointer;
	flex-wrap: wrap;
}

#header li:hover, li>a:hover {
	color: var(--bg-color2);
}


/* ------------------------------------------------------------------------- */

#main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*gap: 12rem;*/
	margin: 4rem 0;
}

.contents {
	position: relative;
	background: #fff;
	margin-top: 6rem;
	padding: 2rem 0 4rem 0;
	border-radius: 2rem;
	box-shadow: 0 .4rem 0 0 rgba(0, 0, 0, .2);
	text-align:center;
}

.contents > div {
	font-size: .9em;
}

.contents > span {
	font-size: 1.5em;
	border-bottom: solid .4rem var(--bg-color1);
	display: inline-flex;
	margin: 1rem 0;
}

.contents .line{
	width:95%;
	border: .1em solid var(--bg-color1);
	border-radius: 100vh;
	background: var(--bg-color1);
	margin: 0 auto;
}


/* ------------------------------------------------------------------------- */

.back {
	text-align:right;
	font-size: .7em;
	color: #fff;
	margin-top: .4rem;
	margin-bottom: 12rem;
	transform: rotate(.05deg);
}

.back >a {
	color: var(--bg-color2);
	margin:0 1rem;
}

.back >a:hover {
	color: var(--font-color1);
}

/* ------------------------------------------------------------------------- */

.banner {
	display: grid;
	grid-template-columns:repeat(2,1fr);
	justify-items:center;
	align-items:center;
}
.banner > * {
	font-size: .8em;
	text-align:center;
}

.banner a:hover {
	color: var(--bg-color2);
}

.banner a:hover img{
	opacity: .6;
	transition-duration: .3s;
}

/* ------------------------------------------------------------------------- */

.wall {
	display: inline-flex;
	width:100%;
	justify-content: space-evenly;
	margin-top:1em;
}

.wall > div {
	/*background: #ff0;*/
	display: flex;
	flex-direction: column;
	justify-content: space-around;

}

/* ------------------------------------------------------------------------- */

.btn2 {
	display:inline-block;
	background: var(--bg-color1);
	color:#fff;
	cursor: pointer;
	transition: .3s;
	border-radius: 100vh;
	padding:.5rem 1.2rem;
	box-shadow: 0 .2rem 0 0 rgba(0, 0, 0, .2);
}

.btn2:hover {
	transform: translateY(.2rem);
	background: var(--bg-color2);
	box-shadow: none;
}

.sns {
	display: flex;
	justify-content: space-evenly;
}

.sns > a {
	display: flex;
	justify-content:center;
	align-items: center;
	width:10em;
	cursor: pointer;
	color:#fff;
	transition: .3s;
	border-radius: .3em;
	padding:.4em;
}

.sns > a:hover {
	opacity: .8;
}

.pre_txt {
	width:96%;
	white-space: pre-line;
	margin:0 auto;
}

.pre_txt > a:hover {
	color: var(--bg-color2);
}

/* ------------------------------------------------------------------------- */

#footer {
	width:100%;
	height: auto;
	text-align:center;
	font-size: .6em;
	background:#fff;
	border-radius: 2rem 2rem 0 0;
	margin-top:6em;
	padding:.6em 0;
}

/* ------------------------------------------------------------------------- */

#pagetop {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	font-size: 3rem;
	line-height: 3rem;
	background: #fff;
	color: var(--bg-color2);
	padding: .2rem;
	border: solid 0;
	border-radius: 50%;
	z-index:10;
}

#pagetop:hover {
	color: var(--bg-color1);
}

/* ------------------------------------------------------------------------- */

.headline {
	position: relative;
}

.pr_img {
	position: relative;
	width: 100%;
	max-width: 746px;
	object-fit: cover;
}

.ribbon_img {
	position: relative;
	z-index: 6;
	width: 90%;
	height: 64px;
	object-fit: cover;
	margin-top:6px;
}

/* ------------------------------------------------------------------------- */

.c_img2 {
	position: absolute;
	/*width: 592px;*/
	height: 284px;
	top: 4.6rem;
	left: 50%;
	transform: translate(-50%, -284px);
	-webkit-transform: translate(-50%, -284px);
	-ms-transform: translate(-50%, -284px);
	overflow : hidden;
}


.fadeIn {
	opacity: 0;
	transform:translatey(100px);
	animation-timing-function:cubic-bezier(0,1.3,1,1.2);
	animation-duration: .3s;
	animation-delay: 0s;
	animation-fill-mode: both;
}

@keyframes fadeIn-animation {
	0% {
		opacity: 0;
		transform:translatey(100px);
	}
	100% {
		opacity: 1;
		transform:translatey(10px);
	}
}

@keyframes fadeIn-animation-r {
	0% {
		opacity: 1;
		transform:translatey(10px);
	}
	100% {
		opacity: 0;
		transform:translatey(100px);
	}
}

.fadeIn.is-animated {
	animation-name: fadeIn-animation;
}
.fadeIn.is-animated-r {
	animation-name: fadeIn-animation-r;
}

/* ------------------------------------------------------------------------- */

#c0 > .pre_txt > div {
	white-space: normal;
}

#c0 > .pre_txt > div > img {
	padding: .2rem;
	width: 400px;
}

/* ------------------------------------------------------------------------- */

.nenga {
	width:80%;
	margin:0 auto;
	display: flex;
	justify-content: space-evenly;
	flex-wrap:wrap;
	gap:3rem;
	align-items: center;
}

.nenga > a{
	transition: transform .1s ease-out;
}

.nenga > a:hover{
	transform:scale(1.2);
}

.contents > .nenga:last-child > a > img {
	max-width: 128px;
	max-height: 128px;
}


/* ------------------------------------------------------------------------- */

.souvenir {
	width:90%;
	margin:3rem auto;
	display: flex;
	justify-content: space-evenly;
	flex-wrap:wrap;
	gap: 7rem 1rem;
}

.souvenir > div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.souvenir > div a{
	font-size: .8em;
	margin: .6em auto;
}

.souvenir > div > img{
	flex-grow: 1;
	max-width: 300px;
	max-height: 300px;
	object-fit: scale-down;
}


/* ------------------------------------------------------------------------- */


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