@charset "utf-8";

/********************************************************************************

  01. forPC Layout  

********************************************************************************/

.font-middle {
    font-size: .9em;
}

.font-semi-large {
    font-size: 1.02em;
}

.font-url {
    word-break: break-all;
}

.ind-2_85 {
    text-indent: -2.85em;
    margin: 0 0 0 2.85em;
}

.ind-4 {
    text-indent: -4em;
    margin: 0 0 0 4em;
}

.ls-004 {
    letter-spacing: .04em;
}

.border_area_orange {
    border: 2px solid #f58505;
}

.border_area_blue {
    border: 2px solid #4b70b5;
}

.img_bg_20 {
 padding: 20px 6%;
 background: #f6f6f6;
}

.img_bg_20 .commentCenter {
    font-size: 1.8rem;
}

.img_radius {
    display: flex;
    overflow: hidden;
    border-radius: 50%;
}

.img_disc{
    position: relative;
    top: 2px;
    margin: 0 .1em;
}

.commentCenter.font-semi-large {
    font-size: 1.8rem;
}

/* フキダシ */
.episode_area {
    margin-top: 35px;
    position: relative;
    padding: 30px 15px 15px;
    /*background: #f8f1e9;
    border-radius: 20px;*/
}

.episode_area .row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 0 20px;
}

.episode_area .row_reverse {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin: 0 0 20px;
}

.episode_area .photo_zone_left {
    float: left;
    margin-right: 40px;
}

.episode_area .photo_zone_center {
    margin: 0 0 20px;
    text-align: center;
}

.episode_area .photo_zone_right {
    float: right;
    margin-left: 40px;
}

.episode_area .txt_zone_right {
    float: right;
    width: 450px;
}

.episode_area .txt_zone_left {
    float: left;
    width: 450px;
}

.episode_area img.photo {
    width: 450px;
}

.episode_area img.photo_portrait {
    width: 300px;
}

.episode_area img.photo_last {
    width: 100%;
    padding-top: 60px;
}

.episode_area span.icon {
    padding: 0 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.episode_area span.icon img {
    overflow: hidden;
    width: 60px;
}

.episode_area span.icon90 img {
    overflow: hidden;
    width: 90px;
}

.episode_area span.text {
    position: relative;
    display: inline-block;
    width: 778px;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
}

.episode_area span.text518 {
    position: relative;
    display: inline-block;
    width: 518px;
    padding: 20px 4%;
}

.episode_area .row span.text {
    margin: 20px 0 0 25px;
}

/*.episode_area .row span.text:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 11px;
    left: -4.55%;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-right: 20px solid white;
}*/

.episode_area .row span.text:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 11px;
    left: -5%;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-right: 20px solid #ffb580;
}

.episode_area .row_reverse span.text {
    margin: 20px 25px 0 0 ;
}

/*.episode_area .row_reverse span.text:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 11px;
    right: -4.55%;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-left: 20px solid white;
}*/

.episode_area .row_reverse span.text:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 11px;
    right: -5%;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-left: 20px solid #f0f6de;
}

.episode_area span.episode_area_orange {
    background:#fffae1;
}
.episode_area .row_reverse span.text.episode_area_orange:after {
    border-left: 20px solid #fffae1;
}

.episode_area span.episode_area_pink {
    background:#ffebde;
}
.episode_area .row span.text.episode_area_pink:after {
    border-right: 20px solid #fff3f3;
}
.episode_area .row_reverse span.text.episode_area_pink:after {
    border-left: 20px solid #ffebde;
}

.episode_area span.episode_area_lightgreen {
    background:#f0f6de;
}
.episode_area .row span.text.episode_area_lightgreen:after {
    border-right: 20px solid #f0f6de;
}

.episode_area span.episode_area_lightblue {
    background:#effcf7;
}
.episode_area .row span.text.episode_area_lightblue:after {
    border-right: 20px solid #effcf7;
}

.episode_area .mt10 {
    margin-top: 10px;
}

.episode_area .mt15 {
    margin-top: 15px;
}

.episode_area .mt5p15s {
    margin-top: 5px;
}

.episode_area .mt30p15s {
    margin-top: 30px;
}

.episode_area .mt40p15s {
    margin-top: 40px;
}

.episode_area .mb-50{
    margin-bottom: -50px;
}

.episode_area .mb-30{
    margin-bottom: -30px;
}

.episode_area .mb-20{
    margin-bottom: -20px;
}

.episode_area .mb-10{
    margin-bottom: -10px;
}

.episode_area .mb-5{
    margin-bottom: -5px;
}

.episode_area .mb0 {
    margin-bottom: 0;
}

/*Word, Excelなどのアイコン列*/
.nte_linkcell {
	/*padding: 11px 0 5px !important;*/
	text-align: left !important;
}
.nte_linkcell a {
	font-size: 75%;
	text-align: center;
	text-decoration: none;
}
.nte_linkcell a:hover {
	color: #000;
}
.nte_linkcell a:hover img {
	color: #000;
	/*background: #a5dce6;*/
}
.nte_linkcell img {
	padding: 0 16px;
	display: inline-block;
	text-align: center;
	/*border: 1px solid #cacaca;*/
}
.nte_linkcell span {
  display: block;
}

.mb-25 {
  margin-bottom: -25px;
}



/********************************************************************************

  02. forSP Layout
    *横幅が667px以下の場合
  

********************************************************************************/

@media screen and (min-width: 0px) and (max-width: 668px) {


.img_bg_20 .commentCenter {
    font-size: 1.6rem;
}

.img_disc{
    height: 14px;
    width: auto;
}

.commentCenter.font-semi-large {
    font-size: 1.6rem;
}

/* フキダシ */
    .episode_area {
        margin-top: 0;
        padding: 30px 3% 15px;
    }

    .episode_area .row {
    margin: 0 0 15px;
    }

    .episode_area .row_reverse {
    margin: 0 0 15px;
    }

    .episode_area span.icon90 img {
    width: 60px;
    }
    .episode_area .row span.text:before {
    left: -25px;
    }

    .episode_area .row span.text:after {
    left: -28px;
    }

    .episode_area .row_reverse span.text:before {
    right: -25px;
    }

    .episode_area .row_reverse span.text:after {
    right: -28px;
    }
    .episode_area .mb40_sp {
    margin-bottom: 40px !important;
}

/*Word, Excelなどのアイコン列*/
.nte_linkcell img {
  width: 60px;
  padding: 0 16px;
  display: inline-block;
  text-align: center;
}

.wid100_sp {
        width: 100px;
}


}