@charset "UTF-8";
/*共通部分---------------*/
html{
	font-size:100%;
}
body{
	font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", sans-serif;
	line-height:1.7;
	color:#ff6600;
}
a{
	text-decoration: none;
}
img{
	max-width: 100%;
}
/*appeal*/
.appeal h2
{
	margin: 10px 0 42px;
	font-size: 5rem;
	text-align: center;
}

.appeal p
{
	font-size: 2rem;
	text-align: center;
	margin-bottom: 60px;
	font-weight: bold;
}

/*slid------------------*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_cssslider {
	background:#cccccc;
	border: 10px solid #ffffff;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:700px;
	width:1000px;
	margin:2rem auto;
	overflow:visible;
	position:relative;
}
.cp_cssslider .mask {
	overflow:hidden;
	height:680px;/* ボーダー分を差し引く */
}
.cp_cssslider ul {
	margin:0;
	padding:0;
	position:relative;
}
/* tooltip */
.cp_cssslider .tooltip {
	background:rgba(0,0,0,0.7);
	width:200px;
	height:auto;
	position:relative;
	bottom:95px;
	left:-300px;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.cp_cssslider .tooltip h1 {
	color:#fff;
	padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
	left:0px;
}
.cp_cssslider:hover li,
.cp_cssslider:hover .cp_progressbar {
	-webkit-animation-play-state:paused;
	animation-play-state:paused;
}
.cp_cssslider li {
	width:1000px;
	height:700px;
	position:absolute;
	top:-200px;
	list-style:none;
}
.cp_cssslider li:nth-child(1){
	-webkit-animation:cycle1 25s linear infinite;
	animation:cycle1 25s linear infinite;
}
.cp_cssslider li:nth-child(2){
	-webkit-animation:cycle2 25s linear infinite;
	animation:cycle2 25s linear infinite;
}
.cp_cssslider li:nth-child(3){
	-webkit-animation:cycle3 25s linear infinite;
	animation:cycle3 25s linear infinite;
}
.cp_cssslider li:nth-child(4){
	-webkit-animation:cycle4 25s linear infinite;
	animation:cycle4 25s linear infinite;
}
.cp_cssslider li:nth-child(5){
	-webkit-animation:cycle5 25s linear infinite;
	animation:cycle5 25s linear infinite;
}
.cp_cssslider li:nth-child(6){
	-webkit-animation:cycle5 25s linear infinite;
	animation:cycle5 25s linear infinite;
}
@keyframes cycle1 {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; }
	20% { top:200px; opacity:0; z-index:0; }
	21% { top:-200px; opacity:0; z-index:-1; }
	50% { top:-200px; opacity:0; z-index:-1; }
	92% { top:-200px; opacity:0; z-index:0; }
	96% { top:-200px; opacity:0; }
	100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
	0%  { top:-200px; opacity:0; }
	16% { top:-200px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; }
	36% { top:0px; opacity:1; z-index:0; }
	40% { top:200px; opacity:0; z-index:0; }
	41% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
	0%  { top:-200px; opacity:0; }
	36% { top:-200px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; z-index:0; }
	60% { top:200px; opacity:0; z-index:0; }
	61% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
	0%  { top:-200px; opacity:0; }
	56% { top:-200px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:200px; opacity:0; z-index:0; }
	81% { top:-200px; opacity:0; z-index:-1; }
	100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
	0%  { top:-200px; opacity:0; }
	76% { top:-200px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:200px; opacity:0; z-index:0; }
}
@keyframes cycle6 {
	0%  { top:-200px; opacity:0; }
	76% { top:-200px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:200px; opacity:0; z-index:0; }
}
/* progressbar */
.cp_progressbar {
	position:relative;
	top:-5px;
	width:680px;
	height:5px;
	background:#000000;
	-webkit-animation:progressbar 25s ease-out infinite;
	animation:progressbar 25s ease-out infinite;
}
/* animation */
@keyframes progressbar {
	0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; z-index:2; }
	4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; z-index:2; }
	16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; z-index:2; }
	18%, 38%, 58%, 78%, 98% { width:100%; opacity:0;  z-index:2; }
}
/*HEADER----------------*/
.logo{
	width: 210px;
	margin-top: 14px;
}
.main-nav{
	display: flex;
	font-size:1.25rem;
	text-transform: uppercase;
	margin-top: 34px;
	list-style: none;
}
.main-nav li{
	margin-left: 36px;
}
.main-nav a{
	color: #432;
}
.main-nav a:hover{
	color: #0bd;
}
.page-header{
	display: flex;
	justify-content: space-between;
}
.wrapper{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4%;
}
/*HOME-----------------*/
#pr {
	background-image: url(../images/06.jpg);
	min-height: 100vh;
}
.home-content {
	text-align: center;
	padding-bottom:100px;
}
.home-content p{
	font-size: 1.125rem;
	margin: 10px 0 42px;
}
/*見出し*/
.page-title{
	font-size:5rem;
	font-family: 'Rowdies', cursive;
	text-transform:uppercase;
	font-weight:normal;
}
/*ボタン*/
.button{
	font-size:1.375rem;
	background:#0bd;
	color:#fff;
	border-radius:5px;
	padding:18px 32px;
}
.button:hover{
	background:#0090aa;
}
/*大きな背景画像*/
.big-bg{
	background-size:cover;
	background-position:center top;
}
#home .page-title{
	text-transform:none;
}

/*モバイル版---------*/
@media(max-width:600px){
	.page-title{
		font-size:2.5rem;
	}
	/*HEADER*/
	.main-nav{
		font-size:1rem;
		margin-top:10px;
	}
	.main-nav li{
		margin:0 20px;
	}
	/*HOME*/
	.home-content{
		margin-top:20%;
	}
	.page-header{
		flex-direction:column;
		align-items:center;
	}
	/*NEWS*/
	.news-contents{
		flex-direction:column;
	}
	article,
	aside{
		width:100%;
	}
	#news .page-title{
		margin-top:30px;
	}
	aside{
		margin-top:60px
	}
	.post-info{
		margin-bottom:30px;
	}
	.post-date{
		width:70px;
		height:70px;
		font-size:1rem;
	}
	.post-date span{
		font-size:0.875rem;
		padding-top:2px;
	}
	.post-title{
		font-size:1.375rem;
	}
	.post-cat{
		font-size:0.875rem;
		margin-top:10px;
	}
	.post-title,
	.post-cat{
		margin-left:80px;
	}
	/*MENU*/
	.menu-content{
		margin-top:20%;
	}
}

/* Cat
------------------------------- */
#cat {
	background-image: url(../images/c0.jpg);
	min-height: 100vh;
}
.cat-content {
	max-width: 600px;
	margin-top: 10%;
}
.cat-content .page-title {
	text-align: center;
}
.cat-content p {
	font-size: 1.125rem;
	margin: 20px 0 0;
}

/* Penguin
------------------------------- */
#pengin {
	background-image: url(../images/0.jpg);
	min-height: 100vh;
}
.pengin-content {
	max-width: 600px;
	margin-top: 10%;
}
.pengin-content .page-title {
	text-align: center;
}
.pengin-content p {
	font-size: 1.125rem;
	margin: 20px 0 0;
}

/* Rabbit
------------------------------- */
#rabbit {
	background-image: url(../images/menu-bg.jpg);
	min-height: 100vh;
}
.rabbit-content {
	max-width: 600px;
	margin-top: 10%;
}
.rabbit-content .page-title {
	text-align: center;
}
.rabiit-content p {
	font-size: 1.125rem;
	margin: 20px 0 0;
}
.grid{
	display:grid;
	gap:26px;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	margin-top:6%;
	margin-bottom:50px;
}