@charset "utf-8";

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

  01. forPC Layout  

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

/* フキダシ */
.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: 10px 15px;
}

.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 #ffb580;
}

.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 .row_reverse span.text.episode_area_lightblue:after {
    border-left: 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;
}

.centerBox_x2_1 {
  flex-flow: row-reverse;
}

.centerBox_x2_1 p {
  width: 48%;
  margin: 0 1%;;
}

@media screen and (min-width: 0px) and (max-width: 820px) {
.centerBox_x2_1 {
    flex-flow: column;
    width: auto;
}
.centerBox_x2_1 p {
    width: 96%;
    margin: 0 2%;
}
}

.mt-15 {
    margin-top: -15px !important;
}


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

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

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

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

/* フキダシ */
    .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;
    }

.imgRight {
    float: right;
    margin: 0 -3% 25px;
}



}