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

.content{
	display: block;
	width: 90%;
	margin: 0 auto;
}

/*========= レイアウトのためのCSS ===============*/
.container {
/*background: linear-gradient(-135deg, #F86460,#E36D9E, #57C2E2,#BDDCE5)!important;*/
	background: #1E1E1B!important;
z-index: 10;
}

.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{
	max-width: 100%;
letter-spacing : 0.1em;
font-family: 'Kiwi Maru', serif!important;
margin: 0;
padding: 0;
}


main{
	margin-bottom: 300px;
}

.area{
	display: block;
	margin: 0 auto;
	padding-top: 200px;
	width: 700px;
}
.area:first-child{
	display: block;
	margin: 0 auto;
	padding-top: 50px!important;
	width: 700px;
}

.area div{
	display: block;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 50px;
	width: 700px;
}

h1{
  font-size:2em;
	color: #22303B;
	text-align: center;
	margin-top: 50px;
}

h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 30px 0;
}

p{
  margin-top:20px;  
}



.page-link{
	padding: 0;
	margin: 0;
	display: flex;
  justify-content: center;
	margin-top: 2.5em;
}

.area img{
	 border-radius: 20px;
	display: block;
	box-shadow: 0.5px 1px 3px #B1BFC8;
}

.page-link li{
  list-style: none;
}

.page-link li a{
	display: block;
  color: #333;
	width: 100px;
  text-decoration: none;
	text-align: center;
	padding: 10px 0px;
	margin: 0 70px;
	olor:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
}



.page-link li a:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}


.four img{
	padding: 50px 20px;
	display: block;
	width: 500px;
margin: 0 auto;
}

.size{
padding: 50px 80px!important;
}

.four  a{
text-decoration: none;
}

.four p{
font-size: 1.5em;
margin-top: 1em;
text-align: center;

color: #000;
}

.four a:hover{
text-decoration: underline!important;
color: #000;

}


.four img:hover{
color: #06233E;
box-shadow: 0.5px 1px 3px #82A7B6 inset;
background-color: #fff;
opacity: 0.8;
}


@media (max-width: 767px){

.content{
width: 90%;
margin: 0 auto;
}

.area{
display: block;
margin: 0 auto;
padding-top: 200px;
width: 	100%;
}
	
	
.area:first-child{
display: block;
margin: 0 auto;
padding-top: 50px!important;
width: 100%;
}

.area div{
display: block;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
width: 100%;
}

.four img{
padding: 20px;
display: block;
width: 100%;
margin: 0 auto;
}


	
.page-link li a{
	display: block;
  color: #333;
	width: 100px;
  text-decoration: none;
	text-align: center;
	padding: 10px 0px;
	margin: 5px;
	color:  #06233E;
border-radius: 5px;
box-shadow: 0.5px 1px 3px #B1BFC8;
}

	.size{
padding: 10px 60px!important;
}
	
	h1, .area p{
		font-size: 1.2em;
	}	
	
}