@charset 'utf-8';
/* CSS Document */
.top { 	float:right; 	font-size:10px; }


.episodeBox_noheart {  
  background: #F3F1ED;  
  margin: 25px 0 20px;  
}  
.episodeBox_noheart .main {  
  width: 100%;  
}  
.episodeBox_noheart .inr > p {  
  font-weight: bold;  
  font-size: 20px;  
  margin-top: 0;  
  color: #FF7272;  
  text-align: center;  
  line-height: 120%;  
}  
.episodeBox_noheart_inr {  
  padding: 20px;  
}  
.episodeBox_noheart_box {  
  margin-top: 10px;  
  border-radius: 4px;  
  padding: 20px 20px 10px 20px;  
  background: 20px 20px no-repeat #FCFBFA;  
  -webkit-background-size: 22px auto ;  
  background-size: 22px auto ;  
    
}  
.episodeBox_noheart p {  
  font-size: 14px;  
  margin-bottom: 0;  
}

.frame-wrapper_video {  
  position: relative;  
  width: 100%;  
  height: 0;  
  padding-bottom: 56.25%;  
  overflow: hidden;  
  margin-bottom: 20px;  
}  
  
.frame-wrapper_video iframe {  
  width: 100%;  
  height: 100%;  
  position: absolute;  
  top: 0;  
  left: 0;  
}



#btn{  
    width:550px;  
    /*スマフォでは 
    width:97%; 
    に変更して使用*/     
}  
  
#btn .btn01 img{  
    float:left;  
    width:46%;  
    margin:15px 0;  
    padding:0 2%;  
}  
  
#btn .btn02 img{  
    float:left;  
    width:46%;  
    margin:15px 0;  
    padding:0 2% 0 0;  
}  
  
.clear{  
    clear:both;  
}
.top
{
	float:right;
	font-size:10px;
}

#comic_viewer #comic {
    height: 480px;
    margin: 2.5px auto;
    position: relative;
    width: 480px;
	padding:0 -1px;
}
.view_btns img {
    margin: 5px 7px;
    float: left;
}
.view_check_btn {
    float: left;
    margin: 20px 0 0 6px;
    width: 290px;
}
.mrg_btm_15 {
    margin-bottom: 15px;
}
.back_btn_01 {
    float: left;
    margin: 200px 15px 0 10px;
}
.back_btn_01 img:hover {
    cursor: pointer;
    opacity: 0.5;
}
.fwd_btn_01 {
    float: left;
    margin: 200px 10px 0 15px;
}
.fwd_btn_01 img:hover {
    cursor: pointer;
    opacity: 0.5;
}

.comic_area .viewer img{
	padding:0 -1px !important;
}


/* マッサージ方法 */
.media {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

.media-body {
    -ms-flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 70%;
}

._p-steps__media.media {
    padding: 1.5rem;
    border: 1px solid #b7ebda;
    background: #f2fdf9;
    color: #4b4b4b;
    margin-bottom: 0.75rem;
}
._p-steps__media.media .figure {
    max-width: 242px;
    margin-left: 1rem;
    margin-bottom: 0;
    padding: 6px;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
    text-align: center;
    display: block;
}

.figure-img:only-child, .figure:only-child, .figure>a:only-child {
    margin-bottom: 0;
}
._p-steps__media .media-body {
    -ms-flex-order: -1;
    order: -1;
}
.media-body:after, .media-body:before {
    display: table;
    content: " ";
}
._p-steps__badge {
    padding-left: 10px;
    border-left: 2px solid #54c09c;
    color: #54c09c;
    font-size: 1.25rem;
    margin-bottom: 20px;
}
._p-steps__media.media ._c-media__text {
    font-size: 16px;
}

._c-figure--margin-photo img {
    margin-bottom: 15px;
}