@charset "utf-8";

*{
    box-sizing: border-box;
}

body.data section{
	width:100%;
	font-size:16px;
}

.lead {
    margin: 40px 0 50px;
    line-height: 1.9;
    font-size:16px;
}
.voice_lead {
    margin-bottom: 26px;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.9;
}
@media screen and (max-width:640px) { 
    .lead {
        margin: 28px 0 30px;
    }
    .voice_lead {
        font-weight: normal;
        font-size: 21px;
        line-height: inherit;
    }
}
/*** structure ***/
.comment {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 462px;
}
.c_box {
    margin-bottom: 44px;
}
.chart_center {
    margin: 0 auto;
    display: block;
}
/*** adjust ***/
.chart_p_02 {
    margin-bottom: 66px;
}
.chart_eval_01 {
    margin-bottom: 66px;
}

@media screen and (min-width:641px) {
    .chart_p_01 {
        margin-bottom: 46px;
    }
    .chart_s_01 {
        margin-top: -20px;
    }
    .chart_s_02 {
        margin-left: 24px;
        width: 94%;
    }
    .chart_circle {
        margin: -16px 0 0 10px;
    }
}
.chart_after_03 {
    display: flex;
    align-items: center;
}
.row_chart_after_03 {
    margin-bottom: 100px;
}
@media screen and (min-width:641px) {
    .chart_after_02 {
        margin-left: -10px;
    }
    .chart_after_03_img {
        margin-top: -17px;
        margin-left: 30px;
    }
}
.row.chart_eval_01 {
    display: flex;
    justify-content: center;
}

@media screen and (max-width:640px) {
    .c_box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    } 
    .chart_p_01 img,
    .chart_p_02 img {
        width: 100%;
    }
    .chart_eval_01 {
      margin-bottom: 36px;
    }
    .chart_s_01 {
        margin-bottom: 24px;
    }
    .chart_s_02 {
        margin: 0 auto 34px;
        padding-left: 20px;
        display: block;
        width: 95%;
    }
    .chart_after_01 {
        margin-bottom: 24px;
    }
    .chart_after_02 {
        margin-bottom: 22px;
    }
    .chart_after_03_img {
        margin: 0 auto 36px;
        max-width: 92%;
    }
    .row_chart_after_03 {
        margin-bottom: 56px;
    }
}
/*** parts ***/
hr {
  height: 0;
  margin: 0;
  margin-bottom: 54px;
  padding: 0;
  border: 0;
  border-top: 4px solid #ededed;
}
.hr_dotted {
    border-top: 1px dotted #ccc;
}
.heading01 {
    margin-bottom: 54px;
    padding-left: 45px;
    position: relative;
    font-weight: bold;
    font-size: 30px;
}
.heading01::before {
    content: '';
    background: no-repeat url(/data/img/check_orange_01.svg);
    width: 38px;
    height: 29px;
    position: absolute;
    left: 0;
    top: 15px;
}
.heading01_attention {
    font-size: 130%;
    background: linear-gradient(transparent 65%, #ffca83 65%, #ffca83 87%, transparent 87%);
}
.voice_heading {
    margin-bottom: 26px;
}
@media screen and (max-width:640px) { 
    .heading01 {
        margin: 0 auto 26px 0;
        padding-left: 33px;
        font-size: 20px;
    }
    .heading01::before {
        background-size: contain;
        width: 28px;
        height: 22px;
        top: 11px;
    }
    .heading01.with_circle {
        margin-bottom: 20px;
    }
    .heading01.about_instructor {
        margin-bottom: 10px;
    }
    .heading01.about_after {
        margin-bottom: 8px;
    }
    hr {
        margin-bottom: 30px;
    }
    .hr_before_voice {
        margin-bottom: 48px;
    }
}
/* baloon */
.baloon01 {
    margin-bottom: 26px;
    display: flex;
    align-items: center;
}
.baloon01:last-of-type{
    margin-bottom: 0;
}
.baloon01_body {
    padding: 16px 34px 14px 20px;
    width: 440px;
    border-radius: 20px;
    background-color: #ededed;
    font-size: 18px;
    line-height: 1.3;
}
.baloon01_tri {
    content: url(/data/img/triangle_to_left_gray_01.svg);
    width: 18px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
}

/* link to detail page */
.link_detail {
    margin-top: 30px;
    width: 372px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ec7e00;
    border-radius: 9.6px;
    font-weight: bold;
    font-size: 24px;
    position: relative;
}
.link_detail:hover {
    opacity: .8;
}
.link_detail.wider_mt {
    margin-top: 34px;
}
a.link_detail {
    color: #fff;
    text-decoration: none;
}
.link_detail::after {
    content: url(/data/img/arrow_white_01.svg);
    width: 13px;
    height: 19px;
    position: absolute;
    right: 22px;
    top: 9px;
}

/* link to users voice */
.link_voice {
    margin-bottom: 28px;
    padding: 20px 32px 20px 24px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 156px;
    border: 3px solid #00AF28;
    border-radius: 20px;
}

a.link_voice {
    color: #000;
    text-decoration: none;
}

.link_voice_txt {
    margin-left: 40px;
    width: 100%;
}

.link_voice_head {
    display: inline-block;
    font-weight: bold;
    font-size: 32px;
}

.link_voice_desc {
    display: inline-block;
    font-weight: 400;
    font-size: 18px;
}

.link_voice_arrow {
    width: 33px;
    height: 36px;
    background-image: url(/data/img/arrow_01.svg);
    background-repeat: no-repeat;
}

.link_voice:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}

@media screen and (max-width:640px) {
    .chart_circle {
        width: 80%;
        margin-bottom: 15px;
    }
    .baloon01 {
        margin-bottom: 18px;
    }
    .baloon01_body {
        padding: 20px 14px 20px 20px;
        width: auto;
        position: relative;
        font-size: inherit;
        line-height: 1.7;
    }
    .link_detail {
        margin-bottom: 12px;
        width: 100%;
        font-size: 21px;
    }
    .link_detail::after {
        top: 13px;
    }

    /* link_voice */
    .link_voice {
        padding: 12px 8px 16px 8px;
        height: auto;
    }
    .link_voice img {
        width: 96px;
    }
    .link_voice_txt {
        margin: 0 0 0 8px;
    }
    .link_voice_head {
        font-size: 18px;
    }
    .link_voice_desc {
        font-size: 14px;
        width: 94%;
        display: inline-block;
    }
    .link_voice_arrow {
        width: 17px;
        height: 17px;
    }
}
/*** PC ***/
@media screen and (min-width:641px) { 
    .row {
        padding-left: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}


/*** small screen ***/
@media screen and (max-width:640px) { 


body.data .data_area{
     margin:0 3%;
}

body.data section {
    width: 100%;
    margin: 0 0 30px 0;
    font-size: 16px;
}



}

/* current directory鐃緒申鐃緒申鐃緒申 */
body.data.index section#column_nav p.index {display:none;}