@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: 30px;
	background: #3366cc;
	text-align: center;
	margin-bottom: 30px;
}

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

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

h2 {
border-bottom: solid 3px red;
margin-bottom: 30px;
}

h3 {
padding: 5px 20px;
background-color:cornflowerblue;
color: #ffffff;
margin: 10px 0 20px;
}

h4 {
padding: 5px 20px;
background-color:#000;
color: #ffffff;
margin: 10px 0 20px;
font-size: 20px;
}

img{
max-width:100%;
height:auto;
}

.dai20{
	font-size: 20px;
}

.futoji{
	font-weight: bold;
}

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

/* そのた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;
}

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



/* 斜め1　*/
.slant-bg1{
    width: 100%;
    padding: 100px 0;
    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
    background-color: #f1c122;
}


/* 斜め2　*/
.slant-bg2 {
    width: 100%;
    padding: 100px 0;
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
    background-color:#ff6347;
}


/* 斜め3　*/
.slant-bg3 {
    width: 100%;
    padding: 100px 0;
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
background-image:url("img/bg.jpg");
background-size: cover;	
}


/* 斜め4　*/
.slant-bg4 {
    width: 100%;
    padding: 100px 0;
   clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
background-image:url("img/dot.png");
background-repeat: repeat;
}


/* 三角　*/
.sankaku5 {
    width: 100px;
	height: 80px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: red;
}

/* 逆三角　*/
.sankaku6 {
    width: 100px;
	height: 80px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
background-color: darkorange;
}

/* 矢印　*/
.arrow7 {
    width: 100px;
	height: 100px;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
background-image:url("img/dog.jpg");
}

/* メッセージ　*/
.message8 {
    width: 100px;
	padding: 20px;
	text-align: center;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
background-color:#87ceeb;
}