.indexSec .banner a img {box-shadow:0px 3px 3px 0px rgba(0,0,0,0.25);}
.indexSec .green-tiles {background:#5BBB24;padding-top: 10px;    padding-bottom: 10px;transition: all .2s;    margin-top: 15px;}
.indexSec .green-tiles > div {max-width:1100px;width:94%;margin:auto;}
.indexSec .table-type {    display: table;    background: #fff;    padding: 8px 15px 15px;    width: 100%;}
.indexSec .green-tiles .table-type .table-cell.vert-pc {    padding-right: 25px;}
.indexSec .green-tiles .table-type .table-cell {    padding: 0 10px 12px;}
.indexSec .table-type .table-cell {    vertical-align: bottom;    display: table-cell;    padding: 0 12px 12px;    text-align: center;}

.caseSec {box-sizing:border-box;position:relative;overflow:hidden;}
.caseSec * {box-sizing:border-box;}
.caseSec a {text-decoration:underline;}
.caseSec .innerarea{max-width: 1100px;margin: auto;background:#f9f9f9;overflow: hidden;/*max-width:1100px;*/margin:auto;	display: flex;	flex-wrap: wrap;	justify-content: space-between;	align-items:stretch;}
.caseSec .inner {position:relative;z-index:10;padding:40px 40px ;box-sizing:border-box;position:relative;}
.caseSec .inner:nth-child(1) {width:50%;z-index:10;background:#f9f9f9; transform: translate(0, -100%);transition: all 0.5s ease 0s;}
.caseSec .innerarea.bgwh {background:#fff;display:block;position:relative; padding:20px 0;}
.caseSec .inner:nth-child(2) {width:50%;color:#fff;z-index:11;background:#A3A599; transform: translate(0,100%);transition: all 0.5s ease 0s;}
.caseSec .inner:nth-child(2) a {color:#fff;}
.caseSec .inner.active {transform: translate(0, 0);  transition: all 0.5s ease 0.5s; }
.caseSec .inner.active:after {transform: translate(0, 0);  }
.caseSec .cloud1,.caseSec .cloud2 {transform: translate(0, -140%);transition: all 0.5s ease 0s;}
.caseSec .cloud1.active {transform: translate(0, 0);  transition: all 0.2s ease 0.1s; }
.caseSec .cloud2.active {transform: translate(0, 0);  transition: all 0.5s ease 0.1s; }
.caseSec .inner .inner-p {min-height:300px;margin-bottom:10px;background-size:cover;}
.caseSec .table-type {max-width:1400px;margin:auto;position:relative;z-index:10;background:none;}
.caseSec h2 {width:100%;position:relative;z-index:10;font-size: 26px;    margin-bottom: 0;   /* border-top: 3px solid #000;    border-bottom: 3px solid #000; */   padding: 15px 0;    font-weight: bold;}
.caseSec h3 {font-size: 18px;font-weight: bold;    line-height: 1.5;}
.caseSec p {font-size: 16px;line-height: 2;}
.caseSec  a{color:#000;}
.caseSec.active:before,.caseSec.active:after {  transform: translate(0px, 0px);  transition: all 0.5s ease 0.5s;  margin: 0;  line-height: 0;}
.caseSec .case-btn {width:100%;margin:40px 0;}
.caseSec a.casebtn {display:block;border:2px solid #f56c57;color:#fff;background:#f56c57;position:relative;z-index:10;margin:auto;border-radius:5px;padding:10px;font-size:16px;max-width:300px;width:90%;text-align:center;
	text-decoration:none;}
.caseSec a.casebtn:hover {color:#f56c57;background:#fff;}



.datas {
    margin-top: 24px;
    background: rgba(163,165,153,0.1);
    padding: 24px;
}
.datas p {
    margin-top: 0;
    margin-bottom: 1rem;
		font-size: 16px;
}

.datas ul li span.red {color:#CF3721;    font-weight: bold;}
.datas {background:rgba(163,165,153,0.1);}
.datas ul li,.datas .data-inner {background:none;padding:20px;}
.datas ul li {

    padding: 15px 15px 15px 75px;
    border-radius: 5px;
    margin-bottom: 15px;
    line-height: normal;
    position: relative;
font-size:24px;}

.datas .data-inner img {
    margin-bottom: 25px;
    margin-top: 9px;
}
.datas ul li:before {
    content: "";
    background: url(../images/check-icon.png);
    height: 21px;
    width: 30px;
    display: block;
    left: 25px;
    position: absolute;
    background-size: 30px;
    top: 50%;
    height: 30px;
    transform: translate(0, -50%);
}
.datas .withimg {
    display: block;
    text-align: center;
    color: #000;
    margin-bottom: 20px;
    text-decoration:underline;
}
.datas .withimg img {
margin-bottom:0;
}
.datas .data-inner .withimg span {
    display: block;
    text-decoration: underline;
}


.bb-bookblock {
    width: 100px;
    height: 77px;
    float: left;
    margin-right: 10px;
}

h2.book, .inner h2.book, .content .caseSec .innerarea h2.book {
    background: none;
    margin-bottom: 0;
    padding: 23px 20px 15px 110px;
    font-size: 27px;
    position: relative;
    font-weight: bold;
    line-height: 1.3;
}

.mkanime {   font-family: "Sawarabi Gothic";position: relative;color:#ccc;}
.mkanime strong {color:transparent;display:inline;}
.mkanime2 {
    font-family: "Sawarabi Gothic";
    position: relative;
    color: #ccc;
}

h2.book > span {
    display: inline-block;
}
.body .mainpart .inner {
    margin-bottom: 20px;
}
.datas .data-inner .desc {
    float: left;
    width: 58%;
}
.datas .data-inner .photo {
    float: right;
    width: 35%;
}
.datas .data-inner .mores {
    clear: both;
}
.topmedia {
    background: #f1f1f1;
    padding: 24px;
    margin-top: 24px;
}

.topmedia ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.topmedia ul li {
    width: 30%;
}

.mkanime {   font-family: "Sawarabi Gothic";position: relative;color:#ccc;}
.mkanime strong {color:transparent;display:inline;}

.mkanime span {
	background:url(../images/mk.png);
    background-size: 0% 12px;
  background-repeat: no-repeat;
  background-position:0 100%;
  transition: background-size .5s ease-out  2s;
}

.mkanime::before {
	content:"";
	background:url(../images/marker-pen.png);
	width:24px;
	height:24px;
	background-size:100%;
    position: absolute;
    display:block;
    left:0;
   bottom: -20px;
    z-index:11;
   transition: all .5s linear 2s;
}
.mkanime::after {
    content: attr(data-txt);
    position: absolute;
    left:0;
    top:0;
    color: #000;
    clip: rect(0,0,100px,0);
    transition: clip .5s linear 1s;
}
.mkanime.active strong {width:100%;overflow: visible;}
.mkanime.active::after { clip: rect(0,800px,100px,0);}
.mkanime.active::before {left:100%; }
.mkanime.active span{  background-size: 100% 12px; color:#000;}


.mkanime2 {   font-family: "Sawarabi Gothic";position: relative;color:#ccc;}
.mkanime2 strong {color:transparent;display:inline;}

.mkanime2 span {
    background:url(../images/mk2.png);
    background-size: 0% 12px;
    background-repeat:no-repeat;
    background-position:0 100%;
    transition: background-size .5s ease-out  2s;
}
.mkanime2::before {
	content:"";
	background:url(../images/marker-pen2.png);
	width:24px;
	height:24px;
	background-size:100%;
    position: absolute;
    display:block;
    left:0;
   bottom: -20px;
    z-index:11;
   transition: all .5s linear 2s;
}
.mkanime2::after {
    display: block;
    content: attr(data-txt);
    position: absolute;
    left:0;
    top:0;
   color: #000;
    clip: rect(0,0,100px,0);
    transition: clip .5s linear 1s;
}
.mkanime2.active strong {width:100%;overflow: visible;}
.mkanime2.active::after { clip: rect(0,700px,100px,0);}
.mkanime2.active::before {left:100%; }
.mkanime2.active span{  background-size: 100% 12px; color:#000;}


@media screen and (max-width: 767px){
.indexSec .green-tiles .table-type .table-cell.vert-pc {
    display: none;
}
.green-tiles .sp-view .table-type {
    padding: 15px 5px 0;
}
}

@media screen and (max-width: 767px) {


.banner.container {max-width:100%;}
.caseSec .inner {width:100%;padding:20px ;}
.caseSec .table-type {    margin-bottom: -8px;    padding-bottom: 0;}
.caseSec .case-section .table-type .vert-mid {    display: none;}
.caseSec .case-section .table-type h2 {    font-size: 20px;}
.caseSec .inner2 h2.book, 
.inner h2.book,.caseSec .innerarea h2.book {   padding-top:5px;font-size: 19px;padding-left:100px;}
.caseSec .inner h2.nopdtop,
.caseSec .innerarea h2.nopdtop {padding-top:0;}
.bb-bookblock {    width: 80px;     height: 62px;    margin-left:10px;}
.content {overflow:hidden;}
#flowbtn {display:none !important;}
.topmedia {padding:14px;}
.datas .data-inner .desc {float:none;width:100%;}
.datas .data-inner .photo {float:none;width:100%;}
.caseSec .inner:nth-child(1) {width:100%;}
.caseSec .inner:nth-child(2) {width:100%;}
.mkanime::before,.mkanime2::before {width:20px;height:20px;}
.mkanime span,.mkanime2 span {    background-size: 0% 6px;}
.mkanime.active span,.mkanime2.active span {    background-size: 100% 6px; color:#000;}
.datas ul li {font-size:20px;}


}
.indexSec .table-type{
	max-width: 1100px;
	width: 94%;
	margin: auto;
	table-layout:fixed;
}
.indexSec .table-type .table-cell:first-child{
	width:30%;
}
@media screen and (max-width: 767px) {
.indexSec .table-type .table-cell:first-child{
	width:100%;
}	
}

.banaftxt{
	/*padding:10px 10px 0;*/
	font-size:1.3em;
	font-weight:bold;
	text-align:center;
}

		  .banaftxt{
			  background: #f1faec;
			 /* background: #F6F6F5;*/
			  padding:1.5em 0;
			  margin:1em 0;
		  }
		  .banaftxt em{
			  font-style: normal;
			  font-size: 1.3em;
			  background:linear-gradient(transparent 60%, #FBCD4B 60%);
			  margin:0 0.2em;
		  }
		  @media screen and (max-width: 728px) {
			  .banaftxt{margin:0;}
		  }