@charset "UTF-8";


#contents {
    overflow-x: clip;
}
.inner {
    width: 1060px;
    margin: 0 auto;
}
/* p {
    font-size: 18px;
    line-height: 1.889;
} */
a:link, a:visited {
    color: #245FBB;
    text-decoration: none;
}

/* ========================================
    トップ
========================================= */
.topArea {
    width:100%;
    height:540px;
    background: url(../img/article26_toparea_bg.png) no-repeat;
    background-size: 100% 494px;
    background-position: top center;
    position: relative;
}
.topArea_inner {
    position:relative;
    margin:0 auto;
    width: 1440px;
    height: 540px;
}
.topArea_inner h1 {
    position:absolute;
    top: 62px;
    left: 67px;
    font-size: 55px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 71.5px */
    letter-spacing: -1.1px;
    z-index: 1;
}
.topArea_inner h1 span {
    font-size: 68px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 88.4px */
    letter-spacing: -1.36px;
    text-shadow:
        0 0 4px #fff,
        0 0 6px #fff,
        0 0 6px #fff,
        0 0 8px #fff,
        0 0 10px #fff,
        0 0 14px #fff,
        0 0 18px #fff;
        margin-left: -10px;
}
.topArea_inner h1 .adjust {
    letter-spacing: -1.36px;
    margin-left: -20px;
}
.topArea_inner h1 img {
    width: 495px;
    display: block;
    margin-bottom: -30px;
}
.toparea_img {
    position:absolute;
    top: 0;
    right: 0;
    width: 921px;
    height: 540px;
}
.toparea_report {
    position:absolute;
    top: 0;
    left: 67px;
    width: 340px;
    height: 65px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px 0 rgba(73, 16, 16, 0.30);
}


.lead {
    padding: 100px 0;
}
h2.lead_title {
    font-size: 42px;
    font-weight: bold;
    line-height: 72px;
    text-align: center;
}
.lead p {
    font-size: 18px;
    line-height: 1.8889;
}
.lead p.topmargin45 {
    margin-top: 16px !important;
}

/* ========================================
    総コストの比較
========================================= */
.lead .comparison {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}
.comparison .comparison_title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #333;
}
.comparison_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #000;
}
.comparison_table th,
.comparison_table td {
    height: 70px;
    padding: 10px;
    vertical-align: middle;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: bold;
    box-sizing: border-box;
}
.comparison_table tr > :last-child {
    border-right: none;
}
.comparison_table tbody tr:last-child th,
.comparison_table tbody tr:last-child td {
    border-bottom: none;
}
.comparison_table thead th {
    background: #333;
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.36px;
    text-align: center;
    border-right-color: #fff;
}
.comparison_table tbody th {
    background: #fff;
    color: #333;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-align: center;
}
.comparison_table tbody td {
    background: #fff;
    color: #333;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-align: right;
    padding-right: 50px;
}
.comparison_table td.is-highlight {
    background: #fefde4;
}
.comparison_table td.comparison_save {
    padding: 10px 35px;
    color: #c6000a;
    text-align: right;
    white-space: nowrap;
}
.comparison_save_label,
.comparison_save_num,
.comparison_save_unit {
    display: inline-block;
    vertical-align: bottom;
}
.comparison_save_label {
    width: 18px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-align: left;
    margin-right: 2px;
}
.comparison_save_num {
    font-size: 43px;
    line-height: 1;
    letter-spacing: -0.86px;
    margin-right: 2px;
}
.comparison_save_unit {
    width: 60px;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-align: left;
}
.comparison .comparison_note {
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    color: #333;
}

/* ========================================
    つまずきどころ
========================================= */
.tips {
    padding: 0 0 100px;
}
.tips_intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 40px;
    border: 1px solid #a8a8a8;
    border-radius: 16px;
    color: #333;
}
.tips_intro_title {
    margin: 0;
    font-size: 42px;
    font-weight: bold;
    line-height: 72px;
    text-align: center;
    white-space: nowrap;
}
.tips_intro p {
    width: 100%;
}
.issue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-top: 100px;
}
.issue_title {
    margin: 0;
    font-size: 42px;
    font-weight: bold;
    line-height: 60px;
    color: #333;
    text-align: center;
    white-space: nowrap;
}
.issue_list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.issue_list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #a8a8a8;
}
.issue_list li:last-child {
    border-bottom: 1px solid #a8a8a8;
}
.issue_num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 92px;
    height: 48px;
    border-radius: 12px;
    background: #c6000a;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
}
.issue_num span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
}
.issue_list a {
    margin: 0;
    color: #0062ff;
    font-size: 28px;
    font-weight: bold;
    line-height: 60px;
    white-space: nowrap;
}

/* ========================================
    課題
========================================= */
.assignment {
    padding: 100px 0;
}
.assignment_bg {
    background: #F9F5F5;
}
.stack {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.assignment_head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 32px;
    border-bottom: 1px solid #c6000a;
}
.assignment_title {
    margin: 0;
    color: #333;
    font-size: 50px;
    font-weight: bold;
    line-height: 72px;
}
.assignment_voice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.assignment_voice_label {
    position: relative;
    z-index: 2;
    margin: 0 0 -18px;
    padding: 6px 24px;
    border: 4px solid #c6000a;
    border-radius: 999px;
    color: #c6000a;
    font-size: 18px;
    font-weight: bold;
    line-height: 46px;
    background: #fff;
}
.assignment_voice_text {
    position: relative;
    z-index: 1;
    align-self: center;
    width: 1000px;
    margin: 0;
    padding: 30px 60px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(73, 16, 16, 0.2);
    color: #333;
    font-size: 34px;
    font-weight: bold;
    line-height: 46px;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
}
.assignment_profile,
.assignment_tips_lead {
    display: flex;
    align-items: center;
    gap: 42px;
    width: 100%;
}
.assignment_avatar {
    width: 192px;
}
.assignment_profile_body,
.assignment_tips_body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.assignment_profile_body {
    gap: 24px;
}
.assignment_tips_body {
    gap: 18px;
}
.assignment_name {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 39px;
    margin: 0;
    color: #333;
    font-weight: bold;
}
.assignment_name_initial {
    width: 33px;
    font-size: 50px;
    line-height: 34px;
}
.assignment_name_text {
    font-size: 26px;
    line-height: 34px;
}
.text {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: normal;
    line-height: 34px;
}
.assignment_tips_text {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
}
.assignment_tips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 80px;
    padding: 80px;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(73, 16, 16, 0.2);
    background: #fff;
}
.assignment_tips_title {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin: 0;
    color: #c6000a;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
}
.assignment_tips_title::before {
    content: "\f4a5";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    line-height: 1.1;
}
.block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.assignment_method_title {
    margin: 0;
    color: #c6000a;
    font-size: 32px;
    font-weight: bold;
    line-height: 34px;
}
.assignment_point {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.assignment_point_title {
    margin: 0;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    line-height: 34px;
}
.assignment_point_title span {
    color: #c6000a;
}
.block_title {
    margin: 0;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid #c6000a;
    color: #333;
    font-size: 34px;
    font-weight: bold;
    line-height: 72px;
}
.assignment_step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.assignment_step_num {
    flex-shrink: 0;
    width: 34px;
    border-radius: 999px;
    background: #c6000a;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
}
.assignment_step_text {
    flex: 1;
    min-width: 0;
}
.assignment_group,
.assignment_figure {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.assignment_group {
    gap: 80px;
}
.assignment_figure {
    gap: 40px;
}
.assignment_frame {
    width: 100%;
}
.assignment_frame img {
    display: block;
    width: 100%;
    height: auto;
}


section.cost {
    padding: 100px 0 0;
    background: #F5F5F5;
}
section.cost .stack {
    align-items: center;
}
section.cost .text,
section.cost .block {
    width: 100%;
}
.cost_catch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.cost_catch p {
    margin: 0;
    font-weight: bold;
    line-height: 60px;
    white-space: nowrap;
}
.cost_catch p:first-child {
    color: #333;
    font-size: 40px;
}
.cost_catch p:last-child {
    color: #c6000a;
    font-size: 54px;
}

.cost_img {
    max-width: 1440px;
    margin: 60px auto 0;
}

#contents .bnr_switchtoeditor {
    margin: 110px auto 100px;
}
#contents .bnr_switchtoeditor img {
    display: block;
    width: 100%;
    height: auto;
}