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

body {
	margin: 0;
	font-family:sans-serif;
	color:#252525;
	font-size:16px;
	line-height: 1.7;
	background-color: #fff;
}

.container {
	margin: 0 auto;
	max-width: 960px;
	padding: 30px;
}

header {
	padding: 20px;
	text-align: center;
	margin-bottom: 30px;
	background-color: #164a84;
}

footer {
	padding: 15px;
	background:#164a84;
	color: #fff;
	margin-top: 30px;
	text-align: center;
}

h1{
color:#fff;
font-size: 2em;
}

h2 {
border-bottom: solid 3px #008db7;
text-align: center;
max-width: 400px;
margin-left: auto;
margin-right: auto;
color: #008db7;
}

h3 {
padding: 5px 20px;
border-radius: 10px;
background-color:#0073a8;
color: #ffffff;
margin: 30px 0;
}

h4 {
padding: 5px 20px;
background-color:#223a70;
color: #ffffff;
margin: 60px 0 20px;
font-size: 20px;
}

/* 画像レスポンシブ*/
img{
max-width:100%;
height:auto;
}

/* 回り込み指定　*/
.migi{
margin:0 0 25px 25px;
float:right;
}

.hidari{
margin: 0 25px 25px 0;
float: left;
}

@media only screen and (max-width:767px){
img.migi, img.hidari{
display:block;margin:5px auto;
}
.migi,.hidari{
float:none;
}
}

/* 斜めBG　*/
.slant-bg {
width: 100%;
padding: 50px 0;
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
background-image:url("img/water.jpg");
background-size: cover;	
text-align: center;
font-size: 18px;
}


/* 逆三角　*/
.sankaku {
    width: 60px;
	height: 40px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
background-color: #82cddd;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}


/* anime-fuwafuwa　*/
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background: url("img/unchi.png") no-repeat center center / 100px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 100px;
height: 95px;
}

@keyframes fuwafuwa {
0% {
transform:translate(0, 0) rotate(-7deg);
}
50% {
transform:translate(0, -7px) rotate(0deg);
}
100% {
transform:translate(0, 0) rotate(7deg);
}
}

/* テキスト */
.aomoji{
	font-size: 20px;
	color:#0073a8;
}



/* ナビゲーション */
.menu {
margin: 40px 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.menu li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
text-align: center;
background: #ed6d35;
margin-right: 10px;
border-radius: 5px;
}
.menu li a:hover {
background: #ff8c00;
color: #fff;
}
/* スムーススクロール */
html{
scroll-behavior: smooth;
}

/* 説明CSS */

.kakomi1{
	background-color: crimson;
	color: white;
	padding: 0 10px;
}

.kakomi2{
	background-color:#3366cc;
	color: white;
	padding: 0 10px;
}

.bl-box {
 padding: 15px;
 background: #bce2e8;
margin: 10px 0;
}

.pk-box {
 padding: 15px;
 background: #ffe4e1;
margin: 10px 0;
}

.dai20{
	font-size: 20px;
}

.futoji{
	font-weight: bold;
}

.naraberu{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
}