@charset "utf-8";
/* CSS Document */

/* maki-nao.com */

* {
	margin: 0px;
	padding: 0px;
}
body {
	font-size: 80%;
	margin: 0;
	padding: 0;
	background: #2952e8;
}
header {
	width: 100%;
	font-size: 125%;
	background-color: #2952e8;
}
.pen {
	pointer-events: none;
}
img {
	border: 0;
}


#tw-1, #tw-2, #tw-3 {
	opacity: 0;
	animation: fadeIn 8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
}
@keyframes fadeIn { /* animetion-nameで設定した値を書く*/
 0% {
opacity: 0
} /*アニメーション開始時は不透明度0%*/
 100% {
opacity: 1
} /*アニメーション終了時は不透明度100%*/
}
nav {
	position: absolute;
	top: 0;
	left: 0;
}
#info {
	background: #FFFFFF;
	border-radius: 8px;
}
#info h3 {
	color: #2952e8;
}
#info hr {
	background-color: #2952e8;
}
.warning {
	color: #FF0000;
}
.rainbow-text {
    font-weight:bold;
    animation:rainbow 3s infinite;
    -webkit-animation:rainbow 3s infinite;
}
@keyframes rainbow{
    12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}
@-webkit-keyframes rainbow{
    12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}
main {
	display: grid;
	gap: 10px;
}
footer hr {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	margin: 50px 0 10px;
}
footer {
	color: #FFFFFF;
	font-size: 76%;
	text-align: center;
	padding-bottom: 14px;
}

/* ------------------------------ ◆ bootstrap media query (single) ◆ ---------------------------- */

/* ～575.98px */
 @media (max-width: 575.98px) {
	 #i-img {
	background-image: url(../img_1/toplogo_2020-s5a.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
#mn_img-s1 {
	display:none;
}
#mn_img-s5 {
	width: 100%;
}
#mn_img-s5 {
	opacity: 0;
	animation: fadeIn 8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
}
}

/* 576～767.98px */
 @media (min-width: 576px) and (max-width: 767.98px) {
}

/* 768～991.98px */
 @media (min-width: 768px) and (max-width: 991.98px) {
header {
	width: 100%;
	margin: 0 auto;
	background-color: #2952e8;
}
main {
	grid-template-columns: 320px calc(100% - 330px);
	grid-template-rows: 720px 270px;
	/* 330px: 320+10(gap)=330 */
	width: 100%;
	margin: auto;
}
#pub {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#pub img {
	width: 320px;
	margin-bottom: 4px;
}
#info {
	padding: 2%;
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	overflow-y: scroll;
}
#tw-1, #tw-3 {
	display: none;
}
#tw-2 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
}

/* 992～1199.98px */
 @media (min-width: 992px) and (max-width: 1199.98px) {
}
/* 1200px～ */
 @media (min-width: 1200px) {
#lc-logo {
	width: 304px;
	height: 70px;
}
}

/* ------------------------------ ◆ bootstrap media query (multi-2) ◆ ---------------------------- */

/* ～767.98 */
 @media (max-width: 767.98px) {
main {
	width: 100%;
	grid-template-columns: 100%;
	grid-template-rows: auto 240px auto;
	padding: 0 5%;
}
#info {
	width: 100%;
	padding: 2%;
	margin: 0 auto;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	overflow-y: hidden;
}
#tw-1, #tw-2 {
	display: none;
}
#tw-3 {
	width: 100%;
	margin: auto;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#pub {
	text-align: center;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}
#pub img {
	width: 320px;
}
}

/* 576～991.98px */
 @media (min-width: 576px) and (max-width: 991.98px) {
}

/* 768～1199.98px */
 @media (min-width: 768px) and (max-width: 1199.98px) {
}

/* 992px～ */
 @media (min-width: 992px) {
header {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #2952e8;
}
header nav {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
#logo img {
	margin-bottom: 20px;
}
main {
	width: 100%;
	max-width: 1200px;
	grid-template-columns: 380px calc(100% - 390px);
	grid-template-rows: 480px 320px;
	/* 390px: 380+10(gap)=390 */
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
#tw-1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#tw-2, #tw-3 {
	display: none;
}
#pub {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#pub img {
	margin-bottom: 4px;
}
#info {
	padding: 2%;
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	overflow-y: scroll;
}
}

/* ------------------------------ ◆ bootstrap media query (multi-3) ◆ ---------------------------- */

/* ～991.98px */
 @media (max-width: 991.98px) {
}

/* 576～1199.98px */
 @media (min-width: 576px) and (max-width: 1199.98px) {
}

/* 768px～ */
 @media (min-width: 768px) {
}

/* ------------------------------ ◆ bootstrap media query (multi-4) ◆ ---------------------------- */

/* 576px～ */
 @media (min-width: 576px) {
	 #i-img {
	background-image: url(../img_1/toplogo_2020-s1a.png);
	background-size: contain;
	background-repeat: no-repeat;
}
#mn_img-s1 {
	width: 100%;
}
#mn_img-s5 {
	display:none;
}
#mn_img-s1 {
	opacity: 0;
	animation: fadeIn 8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
}
}

/* ～1199.98 */
 @media (max-width: 1199.98px) {
#lc-logo {
	width: 152px;
	height: 35px;
}
}