.tab, .tab_sns {
	width:346px;
  padding:0;
  margin:0;
  text-align:center;
  display:block;
  margin:0 auto;
}

.tab_sns {
  margin:6px auto;
}

.tab li, .tab_sns li {
	display:inline-block;
	background: #ffffff;
	color:#ffc547;
  width:100px;
  margin:0;
  padding: 10px;
  box-sizing:border-box;
  cursor: pointer;
  list-style: none;
  transition: .3s;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  border:1px solid #ffc547;
  border-radius: 6px 6px 0 0;
}

.tab_sns li{
padding:1px;
}

.tab_sns li img{
	width:100%;
}
.tab li.active {
  background: #ffc547;
color:white;
  cursor: auto;
}

.tab_sns li.active {
  background: #ffc547;
color:white;
  cursor: auto;
}

/*SNSアイコン*/
.tab_sns {
  background-color:#ffffff;
}
.tab_sns li {
  border:none;
  border-radius: 0 0 0 0;
}
.tab_sns li.active {
  background: #ffffff;
  cursor: auto;
}

/*切り替わりエリア*/
.area, .ara_sns{
	width:100%;
}

.area ul, .are_sns ul {
  display: none;
}

.area ul a, .area_sns ul a{
  text-decoration:none;
}

.area ul.show, .area_sns ul.show {
  display: block;
}

.area ul li, .area_sns ul li {
  margin: 4px;
  font-size:20px;
  padding: 10px;
  background: linear-gradient(0deg, #edbd69, #efda9e);
  cursor: pointer;
  list-style: none;
  transition: .3s;
  border-radius:4px;
  color:#af744b;
}

ul.affi_block{
width:100%;
margin:0 auto;
text-align:center;
background-color:rgba(255,0,0,0.0);
padding:0;
padding-top:2px;
}

.affi_block .affi_first, .affi_block .affi_banner{
position:relative;
display:inline-block;
box-sizing:border-box;
background-color:#f9f9f9;
height:180px;
width:160px;
text-align:center;
margin:10px auto;
}

.affi_banner2{
position:relative;
display:inline-block;
box-sizing:border-box;
background-color:rgba(255,0,0,0.0);
height:163px;
text-align:center;
}

.affi_block .affi_first img{
	width:100px;
	height:100px;
	margin-top:10px;
}

.affi_block .affi_banner img{
	height:90%;
}

.affi_banner2 img{
	height:80%;
}

.affi_block .affi_first .affi_text{
	position:absolute;
	width:90%;
	left:5%;
	top:110px;
	color:#333333;
	text-align:left;
	box-sizing: border-box;
	display:block;
	display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:0.9em;
}


.affi_block .affi a, .affi_block .affi_first a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent:-999px;
	z-index: 2;
}



/*SNSアイコン*/
.area_sns ul li {
  background: none;
}


@media (min-width: 768px) {
	.tab{
		width:100%;
	}
	.tab li{
		width:20%;
	}

	.affi_block .affi{
		width:48%;
		position:relative;
	}

	.affi_block .affi_first{
		width:96%;
	}

	.affi_block .affi .affi_text{
		width:60%;
		margin-left:36%;
		top:30px;
	}

	.affi_block .affi_first .affi_text{
		width:78%;
		top:30px;
		right:4%;
	}
	@media (min-width: 769px) {
	  .affi_block .affi_first .affi_text{
	  width:60%;
    left:180px;
	}
	}

	.affi_block .affi img, .affi_block .affi_first img{
	width:100px;
	height:100px;
	position:absolute;
	top:20px;
	left:15px;
}

}


/*背景枠*/
.menu_1{
	width: 90%;
	padding: 1%;
	margin: 3% auto;
	border-radius: 30px;
}

.tab_1{
	background-color: #fff7c1;
}

.tab_2{
	background-color: #ffe0d1;
}

.tab_3{
	background-color: #eccad1;
}

.tab_4{
	background-color: #b3b5d6;
}

.tab_5{
	background-color: #bde4f1;
}

.tab_6{
	background-color: #dbe9d7;
}

.tab_7{
	background-color: #eddaff;
}


.text7{
	margin: 5% 0;
	padding: 0 20px;
	font-family: "ヒラギノ丸ゴ Pro";
}

.p_text{
	word-break: break-all;
	padding: 0 5%;
	font-family: "ヒラギノ丸ゴ Pro";
	font-size: 90%;
}

.t_text{
	word-break: break-all;
	padding: 0 5%;
	font-family: "ヒラギノ丸ゴ Pro";
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	color: #ff3939;
}

.wapaper img{
	display: block;
	width: 85%;
	margin: 1% auto;
}

h5 {
  position: relative;
  overflow: hidden;
  padding: 0.5rem 0.5rem 0.5rem 5.5rem;
  word-break: break-all;
  border-top: 3px solid #0079e8;
  border-radius: 12px 0 0 0;
	margin-bottom: 0;
}

h5 span {
  font-size: 40px;
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 15px;
  color: #fff;
  border-radius: 10px 0 20px 10px;
  background: #0079e8;
}


h6 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
	font-size: 1em;
}

h6:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: 0.05em;
}

	h7 {
		position: relative;
		margin-bottom: 0;
		font-size:1rem;
		color: #1abd00;
		font-weight:bold;
	}

/*テキストの背景枠*/
.box1{
	/*padding: 8px 19px;*/
	/*margin: 2em 0;*/
	color: #2c2c2f;
	background: #ffffb3;
	border-top: solid 5px #ffd700;
	border-bottom: solid 5px #ffd700;
	text-align: center;
	font-size:0.6rem;
}
.box1 p {
margin: 0;
padding: 0;
}

.box2{
background: #fffde8;
box-shadow: 0px 0px 0px 5px #fffde8;/*線の外側*/
border: dashed 2px #ffb03f;/*破線*/
border-radius: 20px;
margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 2em;
margin-top: 27vw;
text-align: center;
font-size:0.6rem;
}
.box2 p {
margin: 0;
padding: 0;
}

.box3{
background: #ebffe8;
box-shadow: 0px 0px 0px 5px #ebffe8;/*線の外側*/
border: dashed 2px #28c800;/*破線*/
border-radius: 20px;
margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 2em;
text-align: center;
font-size:0.8rem;
}
.box3 p {
margin: 0;
padding: 0;
}

.box4{
background: #b4d9ff;
box-shadow: 0px 0px 0px 5px #b4d9ff;/*線の外側*/
border: dashed 2px #65affa;/*破線*/
border-radius: 20px;
margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 2em;
margin-top: 5vw;
text-align: center;
font-size:0.8rem;
}
.box4 p {
margin: 0;
padding: 0;
}

.box5{
background: #f2ffb5;
box-shadow: 0px 0px 0px 5px #f2ffb5;/*線の外側*/
border: dashed 2px #d6d400;/*破線*/
border-radius: 20px;
margin-bottom: 10px;
margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 0.5em;
text-align: center;
font-size:0.6rem;
}
.box5 p {
margin: 0;
padding: 0;
}

.box6 {
    position: relative;
    margin: 2em 2em 2em 2em;
    padding: 0.5em 0.9em 0.5em 0.9em;
    border: solid 3px #00d950;
    border-radius: 8px;
}
.box6 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #00d950;
    font-weight: bold;
}
.box6 p {
    margin: 0;
    padding: 0;
}

.box7 {
    margin: 8em 2em 2em 2em;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box7 .box-title {
    font-size: 1em;
    background: #ffb932;
    padding: 0.3em 6em 0.3em 3em;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box7 p {
	margin: 0 0 0 1em;
	padding: 0;
}

.vertical-scroll {height:5em;overflow-y:scroll}
.vertical-scroll>ol {margin-top:0;margin-bottom:0}


/*スクロール表示*/
.hide{
	animation: fadeout-anim 0.5s linear forwards;
}

.hide2{
	animation: fadeout-anim2 0.5s linear forwards;
}

@keyframes fadeout-anim{
	0% {
		opacity: 1;
		transform: translateY(0%);
	}

	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

@keyframes fadeout-anim2{
	0% {
		opacity: 0;
		transform: translateY(100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}