@charset "utf-8";



/* bt1 */
.bt1 {
display: block;
width: 160px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #ec407a;
border: 2px solid #ec407a;
border-radius: 3px;
transition: .4s;
}
.bt1:hover {
background: #ec407a;
color: #fff;
}

/* bt2 */
.bt2 {
  display: inline-block;
  padding: 0.8em 1.5em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.bt2:hover {
  background: #67c5ff;
  color: white;
}

/* bt3 */
.bt3 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00bcd4;
  background: #ececec;
  transition: .4s;
}

.bt3:hover {
  background: #00bcd4;
  color: white;
}

/* panda */
.panda {
margin: 0;
padding: 0;
list-style-type: none;
}
.panda li a {
display: block;
padding: 10px 8px;
color: #fff;
background: #008b8b;
text-decoration: none;
width:300px;
border-bottom: solid 1px yellow;
}
.panda li a:hover {
background: #40e0d0;
color: #565656;
}


/* cat　横並び */
.cat {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.cat li a {
display: block;
padding: 8px 20px;
color: #fff;
background: #008b8b;
text-decoration: none;
border-right: solid 1px;
}
.cat li a:hover {
background: #40e0d0;
color: #565656;
}


/* bearクマ */
.bear {
margin: 0;
padding: 0;
list-style-type: none;
}
.bear li a {
display: block;
background: #ff6347;
padding: 10px 8px;
color: #fff;
text-decoration: none;
text-align: center;
border: 1px solid #800000;
margin: 5px;
width: 300px;
border-radius: 5px;
}
.bear li a:hover {
background: #b22222;
color: #fff;
}

/* lion 横並びメニュー */
.lion {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.lion li a {
display: block;
padding: 10px 20px;
color: #003300;
text-decoration: none;
width: 150px;
background: #9acd32;
border-right: dotted 1px;
}
.lion li a:hover {
background: #6b8e23;
color: #fff;
}

/* tiger 横並びメニュー  */
.tiger {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.tiger li a {
display: block;
padding: 10px 20px;
color: #003300;
text-decoration: none;
text-align: center;
background: #9acd32;
margin-right: 10px;
border-radius: 5px;
}
.tiger li a:hover {
background: #6b8e23;
color: #fff;
}





/* ベース */
body {
	margin: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:#252525;
	font-size:16px;
	background-color: #fff;
}

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

header {
	padding: 10px 10px 5px 10px;
	background: #ffe4e1;
	margin-bottom: 80px;
}

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

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

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

.aka {
	color: red;
}
hr {
	margin-top: 20px;
	margin-bottom: 20px;
}

h3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

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

.narabi {
	display:flex;
	justify-content:space-between;
    flex-wrap: wrap;
	margin-bottom: 30px;
    margin-top: 15px;
	padding: 10px 5px 15px;
}

.half-box {
	width:45%;
	background-color: #f0f8ff;
	padding: 15px;
}

.half-box2 {
	width:44%;
	background-color: #ffe4e1;
	padding: 15px;
}

@media screen and (max-width: 767px) {
  .narabi {
    flex-direction: column;
  }
  .narabi .half-box{
    width: 100%;
  }
  .narabi .half-box2{
    width: 100%;
  }
}

.bl-box {
	width:95%;
	background-color: #bce2e8;
	padding: 15px;
}

.pk-box {
	width:95%;
	background-color: #ffe4e1;
	padding: 15px;
}

/* SNS1 */
.sns1 {
  margin: 5px;
  padding: 0px;
  text-align: center;
}
.sns1 a {
  text-decoration: none;
color:white;
}
/* 各 SNS ボタンのボックス */
.sns1 li {
  display: inline-block;  /* 水平に並べる */
  list-style-type: none;  /* 先頭のポッチを消す */
  margin: 2px;
  padding: 6px 10px;
  width: 100px;
  color: white;
  border-radius: 4px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
/* マウスカーソルを重ねたとき */
.sns1 li:hover {
  opacity: 0.7;
}

.sns1_twitter  { background: #1da1f2; }
.sns1_facebook { background: #3b5998; }
.sns1_pocket   { background: #ee4056; }


/* fontawesomeを使ってSNS */
.fas_sns_iconcolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_iconcolor li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_sns_iconcolor li:last-child{
	margin: 0 0 0 0;
}
.fas_sns_iconcolor li a{
	text-decoration: none;
	display: inline-block;
}
.fas_sns_iconcolor li a i{
	display: inline-block;
	width: 30px;
	height: 30px;	
	color: #333;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}
.fas_sns_iconcolor li a i.fa-twitter{ color: #66ccff; }
.fas_sns_iconcolor li a i.fa-facebook-square{ color: #3366cc; }
.fas_sns_iconcolor li a i.fa-line{ color: #33cc33; }
.fas_sns_iconcolor li a i.fa-question-circle{ color: #3399cc; }
.fas_sns_iconcolor li a i.fa-get-pocket{ color: #ff0000; }
.fas_sns_iconcolor li a i.fa-rss-square{ color: #ff9900; }