@charset "UTF-8";
/* CSS Document */
/*========= レイアウトのためのCSS ===============*/
.container {
/*background: linear-gradient(-135deg, #F86460,#E36D9E, #57C2E2,#BDDCE5)!important;*/
background: linear-gradient(-135deg, #6694a0,#62a7a4, #9fd2be,#a8c77d)!important;
z-index: 9999!important;
	animation-name: out;
animation-duration: 3.9s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

#mobile_header{
	background: linear-gradient(-135deg, #6694a0,#62a7a4, #9fd2be,#a8c77d)!important;
	padding:1px; 
}

.container .menu__single>a{
color: #fff!important;
}

.container .menu__second-level a{
color: #000!important;
}

.container .menu__second-level_2 a{
color: #000!important;
}

.box1:after{
	content:"　toppics!";
	color: #fff!important;
	font-size: 1.2em;
	font-family: 'Staatliches', cursive;
}

.box2 a{
	display: inline-block;
	position: relative;
	color: #fff!important;
 	text-decoration: none;
}
.box2 a:before{
	content: "";
	position: absolute;
	 left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: #fff!important;
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.2s;
}
.box2 a:hover:before {
	transform: scale(1);
}

.box3 a{
	color: #fff!important;
}

.box3 li{
border-left: solid 2px #fff!important;
}




body{
display: block;
margin: 0 auto;
width: 100%;
/*background: #EDF0F2!important;*/
font-family: 'Kiwi Maru', serif!important;
}

.anime{
position: fixed;
z-index: 9!important;
width: 100%;
background-color: #EDF0F2;
top: 0;
animation-name: fadein-out;
animation-duration: 3.9s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
padding: 0;
margin: 0;
}
@keyframes fadein-out {
0% {
opacity: 1;
}

90%{
opacity: 1;
}

100% {
opacity: 0;
display: none;
}
}

.anime_contents{
position: relative;
display: block;
width: 1200px;
height: 1200px;
margin: 0 auto;
background-color: #fff;
}


.anime_contents h1{
display: block;
position: absolute;
font-family: 'Tulpen One', cursive;
letter-spacing: 0.7em;
font-size: 10em;
text-align: center;
top: 230px;
left: 370px;
animation-name: col2022 ;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

@keyframes col2022 {
0% {
opacity: 1;
color:#f4a894;

}

50% {
opacity: 1;
color: #f7cbde;
}
100% {
opacity: 1;
color:#ea617c;
}
}

svg {
position: relative;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
z-index: 10!important;
}



.st0
{
fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
}


svg {
max-width: 100%;
}

#outline{
opacity: 0.01;
}

#stroke {
stroke-dasharray:3000 3000;
}


.shindan{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 1;
width: 500px;
background-color:aliceblue;
opacity: 0.9;
padding: 20px;
	border: solid 3px #000;
padding-bottom: 150px;
	animation-name: out;
animation-duration: 3.9s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

.shindan h3{
opacity: 1!important;
font-family: 'Hurricane', cursive;
text-align: center;
font-size: 2em;
margin: 0.5em;
padding: 0;
}

.shindan p{
text-align: center;
}

/*------------slickcode-----------------*/


.diary-slider{
top: 10%;
left: 0;
margin: 0;
padding: 0;
	opacity: 0.8;
}
/* Slider */

.slick-slide{
margin-right: 1vw!important;
margin-left: 1vw!important;
}


.slick-slider
{
position: fixed;
display: block;
padding: 0;
height: 100vh;
width: 100%;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}

.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}



.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}


.slick-prev,
.slick-next,
.slick-dots
{
display: none;
opacity: 0;
}

footer{
display: none;
opacity: 0;
}

.frame {
width: 90%;
margin: 40px auto;
text-align: center;
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 1;
animation-name: out;
animation-duration: 3.9s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

@keyframes out {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}



@keyframes n_out {
0% {
opacity: 1;
}
}


.custom-btn {
width: 200px;
height: 50px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position:relative;
display: inline-block;
outline: none;
z-index: 999;
}


/* 8 */
.btn-8 {
background-color: #000;
padding: 0;
border: none;
position: relative;
z-index: 999;
}
.btn-8 span {
position: relative;
display: block;
width: 100%;
height: 100%;
	font-size: 13px;
}
.btn-8:before,
.btn-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #000;
transition: all 0.3s ease;
z-index: 999;
}
.btn-8:before{
height: 0%;
width: 2px;
}
.btn-8:after {
width: 0%;
height: 2px;
}
.btn-8:hover:before {
height: 100%;
}
.btn-8:hover:after {
width: 100%;
}
.btn-8:hover{
background: transparent;
background-color: aliceblue;
position: relative;
z-index: 999;
}
.btn-8 span:hover{
color: #000;
}
.btn-8 span:before,
.btn-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #000;
transition: all 0.3s ease;
z-index: 999;
}
.btn-8 span:before {
width: 2px;
height: 0%;
}
.btn-8 span:after {
height: 2px;
width: 0%;
}
.btn-8 span:hover:before {
height: 100%;
}
.btn-8 span:hover:after {
width: 100%;
}
.frame a{
	text-decoration-color: #000;
}


.frame {
	z-index: 10;
}

.frame p{
	display: block;
	margin: 0 auto;
	color: #000;
	font-size: 13px;
	width: 100px;
	margin-top: 1em;
}

.frame a:hover{
	text-decoration-color: #ccc;
}

.frame p:hover{
	color: #ccc;
}

.ichiran{
	width: 100%;
	background-color: #4BA694;
	z-index: 9999;
	position: absolute;
	bottom: 0;
	padding: 20px 0 10px 0;
	animation-name: out;
	animation-duration: 3.9s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}


.ichiran p{
text-align: center;
	font-size: 10px;
	color: #fff;
}


@media (max-width: 767px){
	
	.anime{
		display: none;
	}
	
	
.frame,.ichiran,.shindan {
animation-name: n_out;
}
	
	
	.shindan,.frame{
		z-index: 1;
	}	
	
	
.shindan{
width: 90%;

}	
	
.shindan h3{
		font-size: 1.5em;
	}
	
	.shindan br{
		display:none;
	}
	
	.shindan p{
		text-align: left;
		font-size: 0.8em;
	}	
	
}