@charset "utf-8";

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

.container {
	margin: 0 auto;
	max-width: 1000px;
}

/* 
各パートにパディング、背景、テキスト色などを指定する
<div class="container">の子要素に指定する
*/

header {
	padding: 10px 10px 5px 10px;
	background: #ffe4e1;
}

footer {
	padding: 20px 16px 10px 16px;
	background: #565656;
	color: #fff;
}


main {
	padding: 20px 10px 20px 10px;
}

/* ビューポート */
@media only screen and (min-width: 768px) {
	.container {
		padding: 0 20px;
	}
	main {
		padding: 20px 30px;
	}

}	

/* post */
.post1 {
	padding:30px 0;
}

.post2 {
	padding:30px 0;
}

.post2a {
	padding:30px 0;
}

.post3 {
	padding:30px 0;
}

.post4 {
	padding:30px 0;
}

.post5 {
	padding:30px 0;
}

.post6 {
	padding:30px 0;
}

.post7 {
	padding:30px 0;
}

.post8 {
	padding:30px 0;
}

.post9 {
	padding:30px 0;
}

.post10 {
	padding:30px 0;
}


.post11 {
	padding:30px 0;
}

.post12 {
	padding:30px 0;
}

.post13 {
	padding:30px 0;
}

.post13a {
	padding:30px 0;
}

.post14 {
	padding:30px 0;
}

.post15 {
	padding:30px 0;
}

.post16 {
	padding:30px 0;
}

.post17 {
	padding:30px 0;
}

.post18 {
	padding:30px 0;
}

.post19 {
	padding:30px 0;
}


/* 見出し各ポスト */
.post1 h2 {
  border-bottom: solid 3px red;
}

.post1a h2 {
  border-bottom: solid 3px red;
text-align: center;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.post2 h2 {
  color: #3366cc;
  padding: 0.5em 0;
  border-top: solid 3px #3366cc;
  border-bottom: solid 3px #3366cc;
}

.post2a h2 {
  color: #3366cc;
  padding: 0.5em 0;
  border-top: solid 3px #3366cc;
  border-bottom: solid 3px #3366cc;
  text-align: center;
  max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.post3 h2 {
  padding: .25em 0 .25em .75em;
  border-left: 6px solid #669900;
}

.post4 h2 {
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #3366cc;
  border-bottom: 1px solid #ccc;
}

.post5 h2 {
    padding: 5px 20px;
  border: 1px solid #dc143c;
border-radius: 15px;
}

.post5a h2 {
    padding: 5px 20px;
  border: 1px solid #dc143c;
border-radius: 15px;
text-align: center;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.post6 h2 {
  padding: 5px 20px;
  background-color: #cc3366;
  color: #ffffff;
}

.post7 h2 {
  padding: 10px;
  color: #364e96;
  background: #eaf3ff;
  border-bottom: solid 3px #516ab6;
}

.post8 h2{
  color: #2f4f4f;
  line-height: 1.3;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

.post9 h2{
 position: relative;
 color: white;
padding:0.3em 0.3em 0.3em 1.5em;
 background-color: #b44c97;
border-radius: 5px;
}
.post9 h2::after {
 position: absolute;
 top: 50%;
 left:0.7em;
 transform:translateY(-50%);
 content: '';
 width: 5px;
 height:30px;
 background-color:#ff9900;
}

.post10 h2{
  position: relative;
  padding: 0.3em 0.7em;
  background: #007bbb;
color:#ffffff;
}

.post10 h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #007bbb;
  width: 0;
  height: 0;
}


.post11 h2 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  background-color: #96514d;
  box-shadow: 4px 4px 5px #a0a0a0;
  padding: 6px 20px;
  border-radius: 10px;
}


.post12 h2 {
padding: 1rem 1rem;
border-top: 4px dotted #6b8e23;
border-bottom: 4px dotted #6b8e23;
}

.post13 h2 {
    position: relative;
    padding: 7px 15px;
    box-shadow: 5px 5px #212121;
    border: 3px solid #212121;
    border-radius: 10px;
    background-color: #9acd32;
    color: #212121;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
	margin-bottom: 20px;
}

.post13a h2 {
    padding: 7px 15px;
    box-shadow: 0 7px #212121;
    border: 3px solid #212121;
    border-radius: 10px;
    background-color:gold;
    color: #212121;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.post14 h2 {
    position: relative;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, #a8c97f 3px 6px);
    background-repeat: no-repeat;
    background-size: 100% 0.5rem;
    background-position: bottom;
    font-weight: bold;
    font-size: 24px;
    color: #554738;
}

.post15 h2 {
    margin-bottom: 0.2rem;
    padding: 0.2rem;
    border-bottom: 10px double;
    background-color:cornflowerblue;
    color: white;
    font-weight: bold;
    font-size: 24px;
	text-align: center;
}

.post16 h2 {
    padding: 0.2rem 1rem 0.2rem 1.5rem;
    margin-bottom: 0.2rem;
    background-image:
        linear-gradient(#24809A 50%, #f7bc33 50%);
    background-repeat: no-repeat;
    background-size: 0.5rem 100%;
    font-weight: bold;
    font-size: 24px;
}


.post17 h2 {
    position: relative;
    padding: 0.6rem 0.5rem;
    margin-bottom: 0.5rem;
    border-top: 3px solid #726250;
    font-weight: bold;
    font-size: 24px;
    color: #5a544b;
	text-align: center;
}

.post17 h2:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: repeating-linear-gradient(45deg, #726250 0 2px, transparent 2px 4px);
    content: '';
}

.post18 h2 {
    position: relative;
    padding: 0.6rem 0.5rem;
    margin-bottom: 0.5rem;
    border-top: 3px solid #5c9291;
	 border-bottom: 10px double #5c9291;
    font-weight: bold;
    font-size: 24px;
    color: #2c4f54;
	text-align: center;
}


.post19 h2 {
  color: #252525;
  border-bottom:double 6px orange; 
}

.post19 h2.bl {
  color: #007199;
  border-bottom:solid 6px #00afcc;
}

/* そのたCSS */

header h1{
	font-size: 24px;
	color: #e9546b;
}

.copyright {
	margin: 0;
	text-align: center;
}

.point {
	color:crimson;
}

.point2{
	color: dodgerblue;
}

.center-t {
	text-align: center;
}

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

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

h3 {
	padding: 5px 20px;
	background-color: #e9546b;
	margin-top:40px;
	margin-bottom: 25px;
	color: white;
}


.ao{
	color:#3366cc;
	font-size:18px;
}

.pink-box {
 padding: 20px;
 background: #ffe4e1;
 width:320px;
 box-shadow: 3px 3px 5px gray;
}

/* フレックスボックスで横ならび */

.b-box {
	display:flex;
	justify-content:space-between;
    flex-wrap: wrap;
}

.s-box {
	width:45%;
}

.s2-box {
	width:50%;
}

@media screen and (max-width: 767px) {
  .b-box {
    flex-direction: column;
  }
  .b-box .s-box {
    width: 100%;
  }
	
  .b-box .s2-box {
    width: 100%;
  }
}

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


/* スマホＰＣ切り替え
----------------------------------*/

@media screen and (min-width: 768px) {
.sp {display:none;} /*PCで閲覧したら非表示にするスマホ用コンテンツ*/
}
 
@media screen and (max-width: 768px) {
.pc {display:none;} /*スマホで閲覧したら非表示にするPC用コンテンツ*/
}