@charset "utf-8";

body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    color: #000;
}

input,
select {
    vertical-align: middle;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

textarea {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

html {
    font-size: 62.5%;
}

.wrapper {
    line-height: 1.7647058823;
    margin: 0 auto;
}

*,
:after,
:before {
    box-sizing: border-box;
}

p,
ul {
    margin: 0;
}

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

p {
    font-size: 1.5rem;
}

address {
    font-style: normal;
}

small {
    font-size: 1.2rem;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
}

/************* partslist *************/
.pt_10 {
    padding-top: 1rem;
}

.pt_20 {
    padding-top: 2rem;
}

.pb_10 {
    padding-bottom: 1rem;
}

/* header */
header {
    position: sticky;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

.headertop,
.headerbtm {
    width: 960px;
    margin: 0 auto;
}

.headerbtm .header_app {
    display: none;
}

.logoarea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.logoarea p:first-child {
    width: 145px;
    margin-right: 2.5rem;
}

.logoarea p:last-child {
    font-size: 1.7rem;
}

.logoarea img {
    width: 100%;
    height: auto;
    display: block;
}

.header_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.header_nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-top: 8px;
    padding-left: 0;
}

.header_nav li {
    display: inline-block;
    margin: 0 2.4rem;
}

.header_nav li:first-child {
    margin-left: 0;
}

.header_current {
    border-bottom: 3px solid #1069c4;
}

.header_app {
    width: 14rem;
    height: 4rem;
}

.header_app a {
    position: relative;
    display: block;
    font-size: 1.5rem;
    color: #fff;
    background-color: #faaf18;
    height: 100%;
    line-height: 2.5;
    border-radius: 4px;
}

.header_app a::after {
    position: absolute;
    right: 1.5rem;
    top: 37%;
    content: '';
    display: inline-block;
    background: url(../img/right_arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: .7rem;
    height: 1rem;
}

.header_app a span {
    margin-left: 1.7rem;
}

.header_app a:hover {
    opacity: 0.7;
}

.is-shadow {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.05);
}

/* header end */

/* breadcrumbs */
.breadcrumbs {
    width: 960px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.breadcrumbs ol {
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
}

.breadcrumbs li a {
    position: relative;
    font-size: 1.2rem;
    padding-right: 2.5rem;
    color: #1069c4;
}

.breadcrumbs li:last-child a {
    color: #000;
}

.breadcrumbs li:not(:last-child) a::after {
    position: absolute;
    content: '';
    display: inline-block;
    background: url(../img/breadcrumbs_arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: .5rem;
    height: .6rem;
    top: 50%;
    margin-top: -.2rem;
    right: .9rem;
}

/* breadcrumbs end */

/* h1 title */
.main_ttl_wrap {
    width: 100%;
    background-color: #dcf4ff;
}

.main_ttlcategory .main_ttl {
    font-size: 4rem;
    margin: 0;
    padding-bottom: 4rem;
}

/* h1 title end */

.conts_in8,
.conts_in7,
.conts_in6,
.conts_in5,
.conts_in4,
.conts_in3,
.conts_in {
    width: 960px;
    margin: 0 auto;
}

.conts_in3 {
    padding-bottom: 3rem;
}

.conts_in4 {
    padding-bottom: 4rem;
}

.conts_in5 {
    padding-bottom: 5rem;
}

.conts_in6 {
    padding-bottom: 6rem;
}

.conts_in7 {
    padding-bottom: 7rem;
}

.conts_in8 {
    padding-bottom: 8rem;
}

/* lead text */
.lead p {
    font-size: 1.7rem;
    margin: 5rem 0;
}

/* lead text end */

/* flow */
.flow_wrap {
    width: 100%;
    position: relative;
    border: solid 8px #bee6f9;
    padding: 1.5rem 3rem 3rem 3rem;
    min-height: 351px;
    margin-bottom: 4.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flow_wrap:last-child {
    margin-bottom: 0;
}

.flow_wrap:not(:last-child):after {
    position: absolute;
    content: '';
    background: url(../img/flow_arrow.png) no-repeat;
    background-size: contain;
    display: block;
    bottom: -4.5rem;
    left: 50%;
    width: 4.7rem;
    height: 2.5rem;
    transform: translateX(-50%);
}

.flow_wrap .flow_img {
    margin-left: 3.5rem;
    margin-top: 6.5rem;
}

.flow_wrap .flow_img img {
    max-width: 300px;
}

.flow_text_wrap {
    width: 63%;
}

.flow_text_wrap .flow_num {
    font-size: 3rem;
    color: #0e69c4;
    font-weight: 700;
    margin: 0;
}

.thir_ttl {
    font-size: 2rem;
    line-height: 1.3;
    border-left: solid 5px #0e69c4;
    padding-left: 1.4rem;
    margin: 1.5rem 0;
}

.flow_text_wrap .flow_text {
    margin-bottom: 1rem;
}

/* .dk-header-login .annotation {
    padding-top: 1rem;
    font-size: 1.3rem;
    color: #e6201a;
    background-color: #fff;
} */

.annotation {
    max-width: calc(960px + 3rem);
    font-size: 1.3rem;
    color: #e6201a;
    background-color: #fff;
    margin: 0 auto;
    padding: 10px 0;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    position: relative;
    z-index: 1;
}

.annotation::before {
    content: "";
    display: inline-block;
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #fff;
    transform: translateX(-50%);
    z-index: -1;
}

.annotation:empty {
    padding: 0;
}


/* flow end */

/* balloon */
.conts_wrap {
    background-color: #eff1f1;
}

.balloon_wrap {
    padding-top: 7rem;
}

.seco_ttl_center,
.seco_ttl_center_w {
    position: relative;
    font-size: 3rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 4rem;
}

.seco_ttl_center::before {
    position: absolute;
    content: '';
    background: url(../img/h2left.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.1rem;
    height: 4.3rem;
    bottom: 0;
}

.seco_ttl_center::after {
    position: absolute;
    content: '';
    background: url(../img/h2right.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.1rem;
    height: 4.3rem;
    bottom: 0;
}

.balloon_wrap .seco_ttl_center::before {
    left: 35%
}

.balloon_wrap .seco_ttl_center::after {
    right: 35%;
}

.shidou .seco_ttl_center::before {
    left: 18%
}

.shidou .seco_ttl_center::after {
    right: 19%;
}

.balloon {
    margin-bottom: 5.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.balloon:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.balloon:last-of-type {
    margin-bottom: 0;
}

.balloon_left,
.balloon_right {
    position: relative;
    display: inline-block;
    padding: 2rem 3rem;
    background: #FFF;
    border: solid 4px #7dcdf4;
    border-radius: 5px;
}

.balloon_left {
    margin-left: 3rem;
}

.balloon_right {
    margin-right: 3rem;
}

.balloon_left::before,
.balloon_right::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -12px;
    border: 12px solid transparent;
    z-index: 2;
}

.balloon_left::before {
    left: -24px;
    border-right: 12px solid #FFF;
}

.balloon_right::before {
    right: -24px;
    border-left: 12px solid #FFF;
}

.balloon_left::after,
.balloon_right::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -14px;
    border: 14px solid transparent;
    z-index: 1;
}

.balloon_left::after {
    left: -31px;
    border-right: 14px solid #7dcdf4;
}

.balloon_right:after {
    right: -31px;
    border-left: 14px solid #7dcdf4;
}

.balloon_img img {
    max-width: 190px;
}

/* balloon end*/

/* support */
.support_wrap {
    padding-top: 6rem;
}

.seco_ttl_left {
    font-size: 3rem;
    border-bottom: solid 4px #7dcdf4;
    padding-bottom: 1rem;
    margin-top: 0;
    margin-bottom: 3rem;
}

.bg_blue .thir_ttl {
    margin-top: 0;
}

.bg_blue {
    background-color: #edfaff;
    padding: 2.5rem 3rem;
    margin: 2rem 0;
    border-radius: 5px;
}

.bg_blue:last-child {
    margin-bottom: 0;
}

.support:last-of-type {
    margin-bottom: 0;
}

.bg_blue_img {
    margin-top: 2.5rem;
    max-width: 62.8rem;
}

/* support end*/

/* dues */
table {
    table-layout: fixed;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 2px solid #d9d9d9;
    font-size: 1.5rem;
    margin: 2rem auto 0 auto;
}

table thead {
    background-color: #1069c4;
    color: #fff;
}

table tbody th {
    background-color: #eff1f1;
}

th,
td {
    border: 1px solid #d9d9d9;
    padding: 2rem 0;
}

.annotation_bk_wrap {
    padding-bottom: 2rem;
}

.annotation_bk {
    text-indent: -1em;
    padding-left: 1em;
    font-size: 1.3rem;
}

.annotation_bk:first-child {
    padding-top: 2rem;
}

.bg_blue ul {
    padding-left: 2rem;
}

.dues_list ul li {
    font-size: 1.5rem;
    padding-bottom: .5rem;
}

/* dues end */

.text_link {
    font-size: 1.5rem;
    color: #1069c4;
    border-bottom: solid 1px #1069c4;
}

.text_link.word-break {
    word-break: break-all;
}

.thir_ttl_text_link p:nth-of-type(2) {
    padding-top: 1.5rem;
}

.thir_ttl_text_anno .annotation_bk {
    padding-top: 1.5rem;
}

.text_link_add {
    padding-bottom: 1.5rem;
}

.text_link_add+.annotation {
    padding-top: 0;
}

h4 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
}

h4.brackets {
    margin-left: -.8rem;
}

/* primary */
.workbook {
    width: 16%;
    display: inline-block;
    vertical-align: top;
}

.primary_text {
    display: inline-block;
    margin-left: 2.5rem;
    width: 80%;
}

.reproduction {
    position: relative;
    padding: 2.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.reproduction:not(:first-of-type) {
    border-top: 1px dotted #d9d9d9;
}

.reproduction:first-of-type {
    padding-top: 1rem;
}

.listen_btn {
    position: relative;
    cursor: pointer;
    background-color: #fff;
    border-radius: 40px;
    border: 1px solid #0e69c4;
}

.listen_btn a {
    color: #0e69c4;
    font-size: 1.3rem;
    display: block;
    padding: .7rem 3.5rem .7rem 1.5rem;
}

.listen_btn a::after {
    position: absolute;
    content: '';
    background: url(../img/reproduction.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 1.5rem;
    height: 1.3rem;
    right: 1rem;
    bottom: 30%;
}

/* primary end */

/* faq */
/************* tab *************/
.faq li {
    list-style: none;
}

.tab-container {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    padding: 0 2.5rem 4rem 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.tab-container li {
    width: 100%;
}

.tab {
    position: relative;
    padding: 1em;
    background-color: #eff1f1;
    transition: all .2s;
    cursor: pointer;
}

.tab:first-of-type {
    border-radius: 4px 0 0 4px;
}

.tab:last-of-type {
    border-radius: 0 4px 4px 0;
}

.tab:not(:last-of-type) {
    margin-right: .5em;
}

/* tab current */
.current {
    color: #eaeaea;
    background-color: #1069c4;
}

.current::before {
    content: "";
    position: absolute;
    border-left: 6px dashed transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1069c4;
    left: 50%;
    margin-left: -6px;
    bottom: -6px;
}

/* tab menu */
.menu-box {
    width: 100%;
    padding: 0;
    font-size: 2rem;
    display: none;
}

.menu-box.is-show {
    display: block;
}

.accArea {
    border-radius: 4px;
    transition: all .2s;
    cursor: pointer;
    background-color: #edfaff;
    padding: 0 3.5rem;
    margin-bottom: 2rem;
}

.accBtn {
    display: block;
    padding: 2rem 7.5rem 2rem 5rem;
    font-size: 18px;
    position: relative;
    font-weight: bold;
    line-height: 1.4;
}

.qaArea .txtQ::before {
    position: absolute;
    content: '';
    background: url(../img/faq.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    left: 0;
    top: 1.6rem;
}

.accBtn:after {
    content: "";
    display: inline_block;
    position: absolute;
    top: 50%;
    background-image: url(../img/plus.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.1rem;
    height: 2.1rem;
    right: 0;
    margin-top: -1.1rem;
}

.open.accBtn:after {
    background-image: url(../img/minus.png);
    margin-top: 0;
}

.accIn {
    border-top: 1px dotted #d9d9d9;
}

.txtA {
    position: relative;
    padding: 2rem 7.5rem 2rem 5rem;
}

.txtA::before {
    position: absolute;
    content: '';
    background: url(../img/fqa_a.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    left: 0;
    top: 1.6rem;
}

.by {
    padding: 2rem 0;
    text-align: right;
}

.btn-more {
    display: block;
    margin: 3rem 0 0 auto;
    position: relative;
    color: #0e69c4;
    font-size: 1.3rem;
    background-color: #fff;
    border: 1px solid #0e69c4;
    border-radius: 4px;
    padding: 1rem 3rem 1rem 1.5rem;
}

.btn-more::after {
    position: absolute;
    right: 1.3rem;
    top: 50%;
    margin-top: -.5rem;
    content: '';
    display: inline-block;
    background: url(../img/btn_more_icon.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
}

.accArea.is-hidden {
    display: none;
    opacity: 0;
}

/* faq end */

/* benefits */
.conts_wrap_blue {
    background-color: #7dcdf4;
    position: relative;
    z-index: -2;
}

.benefits_wrap {
    padding-top: 6rem;
}

.seco_ttl_center_w {
    color: #fff;
}

.benefits_ttl .seco_ttl_center_w {
    max-width: 49%;
    width: 100%;
    margin: 0 auto 2rem auto;
}

.benefits_ttl {
    position: relative;
}

.annotation_w {
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
}

.seco_ttl_center_w::before {
    position: absolute;
    content: '';
    background: url(../img/h2White_left.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.1rem;
    height: 4.3rem;
    bottom: 0;
}

.seco_ttl_center_w::after {
    position: absolute;
    content: '';
    background: url(../img/h2White_right.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 3.1rem;
    height: 4.3rem;
    bottom: 0;
}

.benefits_wrap .seco_ttl_center_w::before {
    transform: translateX(-100%);
    left: 0;
}

.benefits_wrap .seco_ttl_center_w::after {
    transform: translateX(100%);
    right: 0;
}

.benefits {
    margin-top: 4.5rem;
    position: relative;
}

.benefits::before {
    position: absolute;
    content: '';
    background: url(../img/left_woman.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 11.6rem;
    height: 14.2rem;
    top: -13rem;
    left: 10%
}

.benefits::after {
    position: absolute;
    content: '';
    background: url(../img/right_woman.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 11.6rem;
    height: 14.2rem;
    top: -13rem;
    right: 10%;
    z-index: -1;
}

.bg_white {
    background-color: #fff;
    padding: 2.5rem 3rem;
    margin: 2rem 0;
    border-radius: 5px;
}

.benefits_conts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.benefits_conts.bg_white {
    padding-right: 0;
    position: relative;
}

.benefits_conts>div:first-of-type {
    width: 35%;
    border-left: 1px dotted #d9d9d9;
}

.benefits_text {
    width: 65%;
    padding-right: 3.5rem;
}

.benefits_conts figure {
    width: 42.5%;
    margin: auto;
}

.benefits_conts:nth-of-type(4) figure {
    width: 60.5%;
}

.benefits_conts figcaption {
    text-align: center;
    margin-top: 1rem;
}

/* benefits end*/

/* test */
.page_test {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* gap: 10px 15px; */
    padding: 2rem 2rem;
    background-color: #edfaff;
    border-radius: 4px;
    margin-top: 3rem;
    margin-bottom: 6rem;
}

.test_btn:nth-of-type(3),
.test_btn:nth-of-type(6) {
    margin-right: 0;
}

.test_btn:first-of-type,
.test_btn:nth-of-type(2),
.test_btn:nth-of-type(3) {
    margin-top: 0;
}

.test_btn {
    width: calc(100% / 3 - 10px);
    margin-right: 15px;
    margin-top: 10px;
}

.test_btn a {
    text-align: center;
    font-size: 1.5rem;
    background-color: #1069c4;
    padding: 1rem 0;
    color: #fff;
    width: 100%;
    display: block;
    border-radius: 5px;
    position: relative;
}

.test_btn a:hover {
    opacity: 0.7;
}

.test_btn a::after {
    position: absolute;
    content: '';
    top: 50%;
    background-image: url(../img/test_btn.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.4rem;
    height: 1.2rem;
    right: 12px;
    margin-top: -5px;
}

.test_text {
    width: 100%;
    margin-left: 0;
}

.reproduction:last-of-type {
    padding-bottom: 1rem;
}

.primary_test {
    margin: 3rem 0 6rem 0;
}

.anchor h2 {
    padding-top: 132px;
    margin-top: -132px;
}

.question {
    font-size: 1.7rem;
}

/* test end */

/* subject */
.subject_tab_wrap {
    margin-bottom: 3rem;
}
.subject_tab {
    display: flex;
    background-color: #fff;
    position: relative;
    border-radius: 5px 5px 0 0;
}
.subject_tab div {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 2.0rem;
    cursor: pointer;
    position: relative;
}
.subject_tab div:first-of-type {
    border-radius: 5px 0 0 0;
}
.subject_tab div:last-of-type {
    border-radius: 0 5px 0 0;
}
.subject_tab div:hover {
    opacity: 0.7;
}
.subject_tab div.active {
    color: #fff;
    background-color: #6667ab;
}
.subject_tab div.active:hover {
    opacity: 0.7;
}

.subject_tab_content-wrapper {
    overflow: hidden;
    position: relative;
    margin-top: 25px;
}
.subject_tab_content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.subject_tab_content.active {
    left: 0;
    opacity: 1;
}
/* subject end */

/* inquiry */
.inquiry_wrap {
    padding-top: 5rem;
}

.inquiry_ttl {
    font-size: 3rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: .5rem;
}

.inquiry_text {
    text-align: center;
}

.inquiry {
    margin-top: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
}

.inquiry .mail,
.inquiry .tel {
    position: relative;
    width: 50%;
}

.inquiry .mail {
    padding: 5rem 0;
}

.inquiry .mail p,
.inquiry .tel p {
    display: inline-block;
}

.inquiry .mail p {
    padding-left: 5rem;
    font-size: 2rem;
    max-width: 233px;
    width: 100%;
    position: relative;
}

.inquiry .mail p::before {
    position: absolute;
    content: '';
    background: url(../img/mail.png) no-repeat;
    background-size: contain;
    width: 3.8rem;
    height: 2.7rem;
    left: 35px;
    top: 50%;
    margin-top: -1.5rem;
    transform: translateX(-100%);
}

.inquiry .tel {
    padding: 2rem 0 3rem 0;
}

.inquiry .tel::before {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(171, 173, 174, 1)), color-stop(20%, rgba(171, 173, 174, 1)), color-stop(20%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))) 0% 0%;
    background: -o-linear-gradient(top, rgba(171, 173, 174, 1), rgba(171, 173, 174, 1) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%) 0% 0%;
    background: linear-gradient(to bottom, rgba(171, 173, 174, 1), rgba(171, 173, 174, 1) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%) 0% 0%;
    background-size: 1px 5px;
    width: 1px;
    height: 70%;
    position: absolute;
    top: 15%;
    left: 0;
}

.inquiry .tel p:first-child {
    font-size: 4rem;
    padding-left: 5rem;
    max-width: 353px;
    width: 100%;
    position: relative;
}

.inquiry .tel p:first-child:before {
    position: absolute;
    content: '';
    background: url(../img/tel.png) no-repeat;
    background-size: contain;
    width: 5.4rem;
    height: 3rem;
    left: 62px;
    top: 32%;
    transform: translateX(-100%);
}

.inquiry .tel p:last-child {
    padding-left: 9rem;
    display: block;
}

/* inquiry end*/
/* footer */
footer {
    background-color: #edfaff;
    border-top: 4px solid #7dcdf4;
    padding-top: 1.5rem;
    position: relative;
}

.footertop,
.footermiddle,
.footerbtm {
    width: 960px;
    margin: auto;
}

.footertop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 5.5rem;
}

footer .logoarea {
    display: block;
    width: 17rem;
}

footer .logoarea p:last-child {
    padding-top: 1.5rem;
}

.footer_address_wrap {
    padding-right: 3.5rem;
}

.footer_address {
    padding-left: 1.5rem;
    width: 65%;
}

.company {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.footer_right_top {
    padding-left: 2.5rem;
}

.footer_right_top .footer_accBtn {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.7647058823;
    font-weight: 500;
    padding: 0;
}

.footer_right_top .footer_accBtn::after {
    content: none;
}

.address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 2rem;
}

.oosaka,
.tokyo {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.address div:last-of-type {
    font-size: 1.2rem;
    padding-left: 2rem;
}

.footer_left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer_left,
.footer_right {
    width: 50%;
}

.footer_right {
    border-left: 1px solid #abadae;
    margin-top: 2rem;
}

.activities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 2rem;
}

.activities.footer_accIn {
    border: none;
}

.activities_l,
.activities_r {
    width: 50%;
    padding-left: 2.5rem;
}

.actibities_item:not(:last-child) {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.actibities_item a {
    position: relative;
    padding-right: 2rem;
}

.actibities_item a::after {
    position: absolute;
    content: '';
    top: 5px;
    background-image: url(../img/footer_icon_rectangle.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.2rem;
    height: 1.2rem;
    right: 0;
}

.footermiddle {
    padding-bottom: 2rem;
}

.footer_nav ul {
    list-style: none;
    padding: 0;
}

.footer_nav li {
    display: inline-block;
    border-right: 1px solid #abadae;
}

.footer_nav li:first-child {
    border-left: 1px solid #abadae;
}

.footer_nav li a {
    padding: .5rem 1.5rem;
    font-size: 1.2rem;
}

.footerbtm {
    padding: 1.4rem 0;
    text-align: center;
}

.footer_blue {
    z-index: 0;
}

/* footer end*/

/* pagetop */
.page_top {
    position: fixed;
    bottom: 8rem;
    right: 7rem;
}

.page_top a {
    display: block;
}

.page_top a:hover {
    opacity: 0.7;
}

.absolute {
    position: absolute;
    right: 7rem;
    bottom: 28rem;
}

.footer-nav {
    display: none;
}

.footer-quick-menu {
    display: none;
}

/* pagetop end */

@media screen and (max-width: 960px) {

    .wrapper,
    .headertop,
    .headerbtm,
    .breadcrumbs,
    .conts_in,
    .conts_in3,
    .conts_in4,
    .conts_in5,
    .conts_in6,
    .conts_in7,
    .conts_in8,
    .footertop,
    .footermiddle,
    .footerbtm {
        width: 100%;
    }

    header,
    .wrap,
    .main_ttl_wrap,
    .lead_wrap,
    .conts_wrap,
    .conts_wrap_blue,
    .footer_left,
    .footermiddle {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .address:first-of-type {
        width: 49%;
    }

    .flow_wrap {
        height: auto;
    }
}

@media screen and (min-width: 884px) {

    .header_handle,
    .sp-bottom-btn,
    .no_pc {
        display: none;
    }
}

@media screen and (max-width: 883px) {

    body.noscroll {
        overflow: hidden;
    }

    p,
    h4 {
        font-size: 1.4rem;
    }

    header {
        padding: 0;
    }

    .header_nav ul {
        flex-direction: column;
    }

    .no_sp {
        display: none;
    }

    /* ハンバーガーメニュー */
    .ham_btn {
        cursor: pointer;
        background-color: #6667ab;
        width: 55px;
        height: 55px;
        margin-left: 20px;
    }

    .openbtn1 {
        position: relative;
        cursor: pointer;
        width: 20px;
        height: 20px;
    }

    /*ボタン内側*/
    .openbtn1 span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 0;
        height: 3px;
        border-radius: 2px;
        background: #fff;
        width: 100%;
    }

    .openbtn1 span:nth-of-type(1) {
        top: 0;
    }

    .openbtn1 span:nth-of-type(2) {
        top: 8px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 16px;
    }

    .header_handle {
        padding: 0;
        border: none;
        background-color: transparent;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .header_handle.show span:nth-of-type(1) {
        top: 4px;
        left: 0;
        transform: translateY(100%) rotate(-45deg);
    }

    .header_handle.show span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .header_handle.show span:nth-of-type(3) {
        top: 4px;
        left: 0;
        transform: translateY(100%) rotate(45deg);
    }

    .menu_btn {
        font-size: 1rem;
        line-height: 1;
        font-weight: 500;
        bottom: 3px;
        left: 50%;
        color: #fff;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }

    /* .header_handle {
        padding: 0;
        border: 0;
        background: 0 0;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 22px;
        height: 22px;
    }

    .header_handle span {
        position: absolute;
        width: 22px;
        height: 2px;
        background-color: #fff;
        transition: all .2s 0s ease;
    }

    .header_handle span:nth-child(2) {
        top: 50%;
        transform: translate(0, -50%);
        margin: auto;
    }

    .header_handle span:nth-child(3) {
        bottom: 0;
    }

    .header_handle.show span:nth-child(1) {
        top: 50%;
        transform: translate(0, -50%) rotate(45deg);
    }

    .header_handle.show span:nth-child(2) {
        opacity: 0;
    }

    .header_handle.show span:nth-child(3) {
        top: 50%;
        transform: translate(0, -50%) rotate(-45deg);
    } */

    .logoarea {
        /* padding: 1.2em 0em 1.2em 1.5em; */
    }

    .logoarea p:first-child {
        width: 82px;
        margin-right: 1.4rem;
    }

    .logoarea p:last-child {
        font-size: 1.3rem;
        line-height: calc(46 / 26);
    }

    .logoarea p:last-child span {
        display: block;
    }

    .headerbtm {
        position: fixed;
        background-color: #fff;
        height: 100vh;
        padding: 0 1.5rem;
        left: 100%;
        transition: all 0.3s linear;
    }

    .headerbtm.show {
        left: 0;
    }

    .header_nav,
    .header_nav li {
        display: block;
        margin: 0;
    }

    .header_nav li {
        border-bottom: solid 1px #dedffb;
        letter-spacing: 0.04em;
    }

    .header_nav li a {
        position: relative;
        padding: 2.05rem 3rem 2.05rem 0;
        font-size: 1.5rem;
        line-height: 1.5333333333;
    }

    .header_nav li a::after {
        position: absolute;
        content: '';
        display: inline-block;
        background: url(../img/dk-right_arrow_darkblue.png) no-repeat;
        background-size: contain;
        vertical-align: middle;
        width: 1.2rem;
        height: 1.5rem;
        top: 50%;
        margin-top: -.6rem;
        right: 0rem;
    }

    .headerbtm .header_app {
        display: block;
    }

    .header_app {
        width: 100%;
        margin: 2rem 0;
        height: 4.3rem;
        text-align: center;
    }

    .header_app a {
        line-height: 2.7;
    }

    #header-inner02 {
        left: 100%;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .breadcrumbs {
        display: none;
    }

    .main_ttlcategory .main_ttl {
        padding: 2.5rem 0;
        font-size: 3rem;
    }

    .lead p {
        font-size: 1.6rem;
        margin: 4rem 0;
    }

    .flow {
        padding-bottom: 5rem;
    }

    .flow_wrap {
        display: block;
        padding: 1.5rem;
        margin-bottom: 3.7rem;
    }

    .flow_wrap:not(:last-child):after {
        width: 3.6rem;
        bottom: -4.3rem;
    }

    .flow_wrap .flow_img {
        width: 100%;
        margin: auto;
        text-align: center;
    }

    .flow_wrap .flow_img img {
        max-width: 100%;
    }

    .flow_text_wrap {
        width: 100%;
    }

    .flow_text_wrap .flow_num {
        font-size: 2.2rem;
    }

    .annotation,
    .annotation_bk,
    .annotation_w {
        font-size: 1.2rem;
    }

    .thir_ttl {
        margin: 1rem 0;
        padding-left: 1rem;
        font-size: 1.8rem;
    }

    .seco_ttl_center {
        font-size: 2.2rem;
        max-width: 58%;
        width: 100%;
        margin: 0 auto 4rem auto;
    }

    .balloon_wrap {
        padding-top: 4rem;
    }

    .balloon_wrap .seco_ttl_center::before {
        transform: translateX(-100%);
        left: 0;
    }

    .balloon_wrap .seco_ttl_center::after {
        transform: translateX(100%);
        right: 0;
    }

    .balloon_left,
    .balloon_right {
        width: 70%;
        padding: 1.5rem;
    }

    .balloon_left {
        margin-left: 2.5rem;
    }

    .balloon_right {
        margin-right: 2.5rem;
    }

    .balloon_img {
        width: 30%;
        align-self: flex-start;
    }

    .balloon_img img {
        max-width: 100%;
    }

    .balloon_left::before {
        left: -21px;
    }

    .balloon_right::before {
        right: -21px;
    }

    .balloon_left::before,
    .balloon_right::before {
        top: 27px;
        margin: 0;
    }

    .balloon_left::after,
    .balloon_right::after {
        top: 25px;
        margin: 0;
    }

    .balloon_left::after {
        left: -29px;
    }

    .balloon_right:after {
        right: -29px;
    }

    .seco_ttl_center_w {
        font-size: 2.2rem;
        max-width: 70.7%;
        width: 100%;
        margin: 0 auto 4rem auto;
    }

    .benefits_wrap .seco_ttl_center_w::before {
        transform: translateX(-100%);
        left: 0;
    }

    .benefits_wrap .seco_ttl_center_w::after {
        transform: translateX(100%);
        right: 0;
    }

    .benefits_conts figcaption {
        margin-top: .5rem;
    }

    .seco_ttl_left {
        font-size: 2.0rem;
    }

    .bg_blue {
        padding: 2rem;
    }

    .support_wrap {
        padding-top: 5rem;
    }

    .bg_blue_img {
        max-width: 100%;
        width: 100%;
    }

    table {
        font-size: 1.4rem;
    }

    th {
        padding: .5rem 2rem;
    }

    .annotation_bk:first-child {
        padding-top: 1.5rem;
    }

    .annotation_bk_wrap {
        padding-bottom: .5rem;
    }

    .bg_blue ul li {
        font-size: 1.4rem;
    }

    .bg_blue ul li:last-child {
        padding-bottom: 0;
    }

    .text_link {
        font-size: 1.4rem;
    }

    .thir_ttl_text_link p:nth-of-type(2) {
        padding-top: .8rem;
    }

    .thir_ttl_text_anno .annotation_bk {
        padding-top: .5rem;
    }

    .shop .bg_blue:first-of-type {
        margin-top: 0;
    }

    .text_link_add {
        padding-bottom: .8rem;
    }

    .bg_blue .pt_20 {
        padding-top: 1rem;
    }

    .workbook {
        display: block;
        margin: 0 auto 1rem auto;
        width: 38%;
    }

    .primary_text {
        width: 100%;
        margin: 0;
    }

    .reproduction {
        padding: 1.3rem 0;
    }

    .faq_wrapper {
        padding-bottom: 5rem;
    }

    .tab-container {
        font-size: 1.2rem;
        padding: 0 0 2.5rem 0;
        line-height: 1.167;
    }

    .current::before {
        bottom: -5px;
    }

    .tab {
        padding: 1rem .5rem;
    }

    .accArea {
        padding: 0 2rem;
    }

    .accBtn,
    .txtA {
        padding: 2rem 3rem 2rem 4rem;
    }

    .qaArea .txtQ::before,
    .txtA::before {
        width: 3rem;
        height: 3rem;
        top: 1.8rem;
    }

    .benefits_wrapper {
        padding-bottom: 6rem;
    }

    .benefits_ttl {
        line-height: 1.364;
    }

    .benefits_ttl .annotation_w {
        display: none;
    }

    .benefits_wrap {
        padding-top: 4rem;
    }

    .benefits_ttl .seco_ttl_center_w {
        max-width: 70.3%;
        margin-bottom: 7rem;
    }

    .benefits::before,
    .benefits::after {
        width: 6rem;
        height: 7.5rem;
        top: -6.5rem;
    }

    .benefits::before {
        left: 19%;
    }

    .benefits::after {
        right: 19%;
    }

    .benefits_conts {
        display: block;
    }

    .benefits_conts.bg_white {
        padding: 2rem;
    }

    .benefits_conts>div:first-of-type {
        width: 100%;
        border-left: none;
        border-bottom: 1px dotted #d9d9d9;
        padding-bottom: 1.9rem;
        margin-bottom: 1.9rem;
    }

    .benefits_conts figure {
        width: 27%;
    }

    .benefits_conts:nth-child(2) figure,
    .benefits_conts:nth-child(3) figure {
        width: 32%;
    }

    .benefits_text {
        width: 100%;
        ;
    }

    .test_btn {
        width: calc(100% / 2 - 3px);
        margin-right: 5px;
        margin-top: 5px;
    }

    .test_btn:nth-of-type(even) {
        margin-right: 0;
    }

    .test_btn:nth-of-type(3),
    .test_btn:nth-of-type(6) {
        margin-right: 5px;
    }

    .test_btn a {
        font-size: 1.2rem;
        padding: 1rem 3.5rem 1rem 1rem;
        line-height: 1.167;
    }

    .test_btn:nth-of-type(3) {
        margin-top: 5px;
    }

    .test_seco_ttl {
        margin-bottom: 1.5rem;
    }

    .anchor h2 {
        padding-top: 65px;
        margin-top: -65px;
    }

    .question {
        font-size: 1.6rem;
    }

    .reproduction {
        display: block;
        padding-top: 1rem;
    }

    .reproduction:first-of-type {
        padding-top: 0;
    }

    .reproduction>p {
        padding-bottom: 1rem;
    }

    .listen_btn {
        display: inline-block;
    }

    .primary_test {
        margin-bottom: 5rem;
    }

    .test_wrapper {
        padding-bottom: 6rem;
    }

    .inquiry_wrapper {
        padding-bottom: 4rem;
    }

    .inquiry_wrap {
        padding-top: 2.5rem;
    }

    .inquiry_ttl {
        font-size: 2.2rem;
    }

    .inquiry_text {
        text-align: left;
    }

    .inquiry {
        display: block;
        padding: 2rem;
    }

    .inquiry .mail,
    .inquiry .tel {
        width: 100%;
    }

    .inquiry .tel::before {
        content: none;
    }

    .inquiry .tel {
        border-top: 1px dotted #d9d9d9;
        padding: 2rem 0 0 0;
    }

    .inquiry .mail {
        padding: 0 0 2rem 0;
    }

    .inquiry .mail p {
        font-size: 1.8rem;
        padding-left: 3rem;
    }

    .inquiry .mail p::before {
        height: 2.4rem;
        width: 3.5rem;
        margin-top: -1rem;
        left: 18%;
    }

    .inquiry .tel p:first-child {
        font-size: 3rem;
        max-width: 260px;
    }

    .inquiry .tel p:first-child:before {
        width: 4.5rem;
        height: 2.7rem;
        left: 46px;
    }

    .inquiry .tel p:last-child {
        padding-left: 0;
    }

    /* footer-quick-menu */
    .footer-quick-menu {
        display: block;
        position: fixed;
        width: calc(100% - 30px);
        left: 50%;
        bottom: 15px;
        transform: translateX(-50%);
        border: 2px solid #eff1f1;
        border-radius: 5px;
        background-color: #dedffb;
        padding: 8px;
        z-index: 200;
    }

    .footer-quick-menu-outer {
        background-color: #fff;
        border-radius: 5px;
    }

    .footer-quick-menu-nav-list {
        display: flex;
        gap: 10px;
    }

    .footer-quick-menu-nav-list+.footer-quick-menu-nav-list {
        margin-top: 10px;
    }

    .footer-quick-menu-nav-list a {
        width: 100%;
        border: 1px solid #6667ab;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .footer-quick-menu-img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        overflow: hidden;
        min-height: 46px;
        background-color: #dedffb;
        border-radius: 5px 5px 0 0;
    }

    .footer-quick-menu-img-wrapper img {
        position: relative;
        bottom: -3.5px;
    }

    .footer-quick-menu-text-wrapper {
        text-align: center;
        padding: 11px 10px;
    }

    .footer-quick-menu-text-wrapper span {
        color: #000;
        font-size: 1.4rem;
        line-height: calc(46 / 28);
        font-weight: bold;
        position: relative;
    }

    .footer-quick-menu-text-wrapper span::after {
        position: absolute;
        content: "";
        display: inline-block;
        background: url(../img/dk-right_arrow_darkblue.png) no-repeat;
        background-size: contain;
        width: 7px;
        height: 10px;
        margin-left: 9px;
        top: 50%;
        transform: translateY(-50%);
    }

    .footer-quick-menu-nav-bottom {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #dedffb;
    }

    .footer-quick-menu.show .footer-quick-menu-nav-bottom {
        padding: 10px 0 0;
    }

    .footer-quick-menu-nav-bottom a {
        width: 100%;
        font-size: 1.4rem;
        line-height: calc(28 / 28);
        color: #fff;
        background-color: #faaf18;
        border-radius: 5px;
        margin-left: 10px;
        padding: 13px 10px;
    }

    .footer-quick-menu-nav {
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: all .3s cubic-bezier(.19, 1, .22, 1);
        padding: 0 10px;
    }

    .footer-quick-menu.show .footer-quick-menu-nav {
        transition: all .3s cubic-bezier(.19, 1, .22, 1);
        height: 321px;
        padding: 10px;
    }

    .footer-quick-menu-nav-bottom-menu {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 41px;
        padding: min(5.71%, 9px) min(5.08%, 8px);
        border-radius: 5px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
    }

    .footer-quick-menu.show .footer-quick-menu-nav-bottom-menu::before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 10px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-100%);
    }

    .footer-quick-menu.show .footer-quick-menu-nav-bottom-menu {
        border-radius: 0;
    }

    .footer-quick-menu .footer-quick-menu-nav-bottom-inner.-open {
        width: 100%;
        opacity: 1;
        transition: all .6s cubic-bezier(.19, 1, .22, 1);
    }

    .footer-quick-menu.show .footer-quick-menu-nav-bottom-inner.-open {
        opacity: 0;
        transform: translateY(-100%);
    }

    .footer-quick-menu .footer-quick-menu-nav-bottom-inner.-close {
        opacity: 0;
        transition: all .6s cubic-bezier(.19, 1, .22, 1);
    }

    .footer-quick-menu.show .footer-quick-menu-nav-bottom-inner.-close {
        opacity: 1;
        transform: translateY(-100%);
    }

    .footer-quick-menu-nav-bottom-inner.-open span::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 18.5px;
        background-image: url(../img/icon-three-border.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 10px;
        margin-right: min(6.35%, 10px);
    }

    .footer-quick-menu-nav-bottom-inner.-close span::before {
        content: "";
        display: inline-block;
        width: 16.5px;
        height: 16.5px;
        background-image: url(../img/icon-close.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: 10px;
    }

    .footer-quick-menu-nav-bottom-inner span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        font-size: min(3.3vw, 1.3rem);
        line-height: calc(46 / 28);
        color: #6667ab;
        font-weight: bold;
    }

    .footer-quick-menu-login.footer-quick-menu {
        border: 2px solid #faaf18;
        background-color: #fff9d8;
    }

    .footer-quick-menu-login .footer-quick-menu-nav-bottom {
        background-color: #fff9d8;
    }

    .footer-quick-menu-login .footer-quick-menu-img-wrapper {
        background-color: #81d5fa;
    }

    .footer-quick-menu-login.footer-quick-menu.show .footer-quick-menu-nav {
        height: 216px;
    }

    .footer-quick-menu-login .quick-menu-app-mypage {
        width: 100%;
        font-weight: bold;
        text-align: left;
        margin-left: 14px;
    }

    .footer-quick-menu-login .quick-menu-app-mypage .welcome {
        font-size: 1.2rem;
        line-height: calc(46 / 24);
    }

    .footer-quick-menu-login .quick-menu-app-mypage .member-name {
        font-size: 1.4rem;
        line-height: calc(46 / 28);
    }

    /* footer-nav */
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-nav li {
        width: calc(50% - (10px / 2));
        list-style: none;
    }

    .footer-nav li.long {
        width: 100%;
    }

    .footer-nav li.long a {
        justify-content: center;
        text-align: center;
    }

    .footer-nav li a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        min-height: 68px;
        font-size: 1.6rem;
        line-height: calc(48 / 32);
        background-color: #6667ab;
        color: #fff;
        border-radius: 5px;
        padding: 10px 30px 10px 15px;
        position: relative;
    }

    .footer-nav li a::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translateY(-50%) rotate(45deg);
        position: absolute;
        top: 50%;
        right: 10px;
    }

    .footertop,
    .footer_left,
    .footer_right {
        display: block;
        width: 100%;
    }

    .footertop {
        padding-bottom: 3rem;
    }

    .footertop .logoarea {
        display: block;
        width: 100%;
    }

    .footertop .logoarea .logoarea-top {
        padding: 1rem 0 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        width: 100%;
    }

    .footertop .logoarea .logoarea-top p:first-child {
        width: 120px;
    }

    .footertop .logoarea .logoarea-top p:last-child {
        font-size: 1.6rem;
        padding: 0;
    }

    .footerbtm {
        padding-bottom: 1.5rem;
    }

    .footerbtm_inner {
        display: block;
        margin-bottom: 3rem;
    }

    .footer_address,
    .footer_address_wrap {
        width: 100%;
    }

    .footer_address {
        padding-left: 0;
    }

    .company {
        margin-top: 4rem;
        font-size: 1.4rem;
        margin-bottom: 0;
    }

    .footer_right {
        border: none;
        margin-top: 3rem;
    }

    .footer_right_top {
        background-color: #fff;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        padding: 0;
    }

    .footer_right_top .footer_accBtn {
        font-size: 1.4rem;
        padding: 1.6rem 3.5rem 1.6rem 1.5rem;
        line-height: 1.7647058823;
        font-weight: 500;
        margin: 0;
        display: block;
        position: relative;
    }

    .footer_right_top .footer_accBtn::after {
        content: '';
        top: 50%;
        background-image: url(../img/plus.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 2.1rem;
        height: 2.1rem;
        margin-top: -1.1rem;
        right: 1.5rem;
        position: absolute;
    }

    .activities {
        display: block;
        padding-top: 0;
    }

    .activities_l,
    .activities_r {
        width: 100%;
        padding-left: 0;
    }

    .actibities_item:not(:last-child) {
        margin: 0;
    }

    .actibities_item a {
        display: block;
        padding: 1.6rem 2.5rem 1.6rem 3rem;
        background-color: #fff;
        border-bottom: 1px solid #cccccc;
    }

    .actibities_item a::after {
        top: 50%;
        right: 2.5rem;
        margin-top: -6px;
    }

    .activities.footer_accIn {
        display: none;
    }

    .footer_right_top .footer_accBtn.open::after {
        background-image: url(../img/minus.png);
        margin-top: 0;
    }

    .footermiddle {
        text-align: center;
        font-size: 1.1rem;
    }

    .footer_nav li:nth-child(3) a {
        padding-left: 0;
        font-size: 1.05rem;
    }

    .footer_nav li a {
        padding: .5rem 1.3rem;
        font-size: 1.1rem;
    }

    .footer_nav li:nth-child(3),
    .footer_nav li:nth-child(4) {
        margin-top: 1.5rem;
    }

    /* .footer_list {
        text-align: left;
    }
    .footer_list ul {
        padding-left: 0;
        padding-top: 1.5rem;
    }
    .footerbtm .footer_list li {
        display: inline-block;
        margin-right: 1.5rem;
        margin-top: 1rem;
    }
    .footer_list li a::after {
        margin-top: -.3rem;
    }*/
    small {
        font-size: 1rem;
    }

    .page_top {
        right: 2rem;
        bottom: 9rem;
    }

    .page_top img {
        width: 4.5rem;
        height: 4.5rem;
    }

    .absolute {
        position: absolute;
        right: 2rem;
        bottom: 39rem;
    }
}

@media screen and (max-width: 450px) {
    .absolute {
        position: absolute;
        right: 2rem;
        bottom: 43rem;
    }
}

@media screen and (max-width: 350px) {
    th {
        padding: .5rem 1rem;
    }

    .inquiry .tel p:last-child {
        font-size: 1.2rem;
    }

    .absolute {
        position: absolute;
        right: 2rem;
        bottom: 59rem;
    }
}

/************* partslist end *************/

/* mypage */
.header_nav_mypage {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-top: -1.6rem;
}

.header_nav_mypage li {
    margin: 0 2rem;
}

.welcome,
.member_num {
    display: inline-block;
}

.member_num {
    padding-left: 1rem;
    color: #0e69c4;
}

.welcome,
.member_name span {
    font-size: 1.3rem;
}

.member_name {
    font-size: 1.3rem;
}

.header_app_mypage_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem;
    background-color: #fff9d8;
    border-radius: 4px;
    border: 2px solid #faaf18;
}

.header_app_mypage_inner a:hover {
    opacity: 0.7;
}

.logout,
.member_num {
    font-size: 1rem;
}

.logout {
    padding: .5rem;
    background-color: #faaf18;
    color: #fff;
    border-radius: 4px;
    margin-left: 1.5rem;
}

.main_ttl_mypage span {
    font-size: 1.5rem;
    color: #1069c4;
    vertical-align: middle;
    margin-left: 1.5rem;
}

.not_completed_wrap {
    padding-top: 5rem;
}

.not_conpleted_inner {
    text-align: center;
    background-color: #fff1f1;
    border: 3px solid #e6201a;
    border-radius: 10px;
    padding: 2.5rem 2.5rem 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
}

.not_conpleted_inner p:first-child {
    font-size: 2rem;
    color: #e6201a;
    padding-bottom: .5rem;
}

.not_conpleted_inner p:last-of-type {
    padding-bottom: 2rem;
}

.not_conpleted_inner div:first-of-type {
    font-size: 1.6rem;
    background-color: #faaf18;
    width: 40%;
    margin: auto auto 0 auto;
    border-radius: 25px;
    position: relative;
}

.not_conpleted_inner div:first-of-type a {
    color: #fff;
    padding: 1rem 0;
    display: block;
}

.not_conpleted_inner div:first-of-type a::after,
.center_btn_red::after,
.center_btn_blue::after {
    position: absolute;
    right: 1.5rem;
    top: 35%;
    content: '';
    display: inline-block;
    background: url(../img/right_arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: 1rem;
    height: 1.5rem;
}

.not_conpleted_inner div:first-of-type:hover,
.center_btn_red:hover,
.center_btn_blue:hover {
    opacity: 0.7;
}

.not_conpleted {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.center_btn_red {
    font-size: 1.6rem;
    background-color: #e6201a;
    margin: 4.5rem auto;
    border-radius: 25px;
    position: relative;
    max-width: 269px;
    width: 100%;
}

.center_btn_red a {
    color: #fff;
    padding: 1rem 4.5rem;
    display: block;
}

.block-articles-list__date {
    font-size: 1.5em;
    ;
}

.block-articles-list__title {
    margin-top: 1rem;
}

.block-articles-list-item {
    border-bottom: 1px dotted #d9d9d9;
    margin-bottom: 3rem;
}

.block-articles-list-item a {
    display: block;
    padding-bottom: 3rem;
}

.center_btn_blue {
    background-color: #81d5fa;
    margin: 4.5rem auto 8rem auto;
    border-radius: 25px;
    position: relative;
    max-width: 250px;
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
}

.center_btn_blue a {
    color: #fff;
    padding: 1rem 4.5rem;
    display: block;
}

.procedure_wrap {
    padding-top: 5rem;
}

.procedure_item_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 4rem;
}

.procedure_item {
    width: 48.5%;
    margin-top: 3rem;
}

.procedure_item_title {
    font-size: 1.7rem;
    color: #fff;
    background-color: #1069c4;
    border-radius: 5px 5px 0 0;
    padding: .8rem 0 .8rem 3rem;
    display: flex;
    align-items: center;
}

.procedure_item_title .title_word {
    width: 70%;
}

.procedure_item_contents {
    background-color: #fff;
    padding: 1.5rem 0;
    border-radius: 0 0 5px 5px;
    min-height: 111px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.procedure_item_contents>ul,
.procedure_item_contents_inner {
    width: 73.5%;
    padding-right: 4.5rem;
}

.procedure_item_contents li {
    font-size: 1.5rem;
}

.procedure_item_contents_inner .annotation_bk {
    padding-left: 4rem;
    padding-top: .5rem;
}

.procedure_item_btn {
    position: relative;
    width: 30%;
    text-align: center;
    line-height: 30px;
    font-size: 1.5rem;
    padding-right: 2rem;
}

.procedure_item_btn a {
    display: block;
    background-color: #fff;
    border-radius: 5px;
}

.procedure_item_btn a span {
    padding-right: 1rem;
}

.procedure_item_btn::after {
    position: absolute;
    content: '';
    background: url(../img/right_arrow_blue.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 1rem;
    height: 1.5rem;
    right: 20%;
    bottom: 23%;
}

.procedure_item_bottom {
    background-color: #fff;
    padding: 2rem 2.5rem;
    border: 3px solid #0e69c4;
    border-radius: 10px;
}

.explanation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.explanation:not(:last-child) {
    margin-bottom: 1.5rem;
}

.type {
    background-color: #eff1f1;
    font-size: 1.5rem;
    padding: .3rem 1rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

@media screen and (max-width: 960px) {
    .header_nav_mypage li {
        margin: 0 1.7rem;
    }

    .header_nav_mypage li a {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 883px) {
    .main_ttl_mypage span {
        font-size: 1.4rem;
    }

    .header_nav_mypage {
        margin-top: 0;
    }

    .header_nav_mypage li {
        margin: 0;
    }

    .header_app_mypage {
        margin-top: 2.5rem;
    }

    .header_app_mypage_inner {
        width: 25.6rem;
    }

    .not_conpleted {
        display: block;
    }

    .not_conpleted_inner {
        width: 100%;
    }

    .not_conpleted_inner p:not(:first-child) {
        text-align: left;
    }

    .not_conpleted_inner p:first-child {
        font-size: 1.8rem;
    }

    .not_conpleted_inner div:first-of-type {
        font-size: 1.5rem;
        width: 100%;
        max-width: 28.5rem;
    }

    .question {
        margin-bottom: 2rem;
    }

    .center_btn_red {
        max-width: 28.5rem;
        margin: 4rem auto 3rem auto;
    }

    .topics_wrap .seco_ttl_left {
        margin-bottom: 2.2rem;
    }

    .block-articles-list__date {
        font-size: 1.4rem;
    }

    .block-articles-list__title {
        margin-top: .5rem;
    }

    .block-articles-list-item {
        margin-bottom: 2.2rem;
    }

    .block-articles-list-item a {
        padding-bottom: 2.2rem;
    }

    .center_btn_blue {
        margin: 4rem auto 5rem auto;
    }

    .procedure_wrapper {
        padding-bottom: 4rem;
    }

    .procedure_wrap {
        padding-top: 3.5rem;
    }

    .procedure_item_wrap {
        display: block;
        padding-bottom: 3rem;
    }

    .procedure_item {
        width: 100%;
        margin-top: 2.5rem;
    }

    .procedure_item:not(:first-child) {
        margin-top: 2rem;
    }

    .procedure_item_title {
        padding-left: 2rem;
    }

    .procedure_item_contents {
        display: block;
        min-height: 0;
    }

    .procedure_item_contents>ul,
    .procedure_item_contents_inner {
        width: 100%;
    }

    .procedure_item_btn a span {
        position: relative;
        padding-right: 1rem;
    }

    .procedure_item_btn a span::after {
        position: absolute;
        content: '';
        background: url(../img/right_arrow_blue.png) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 1rem;
        height: 1.5rem;
        right: -1rem;
        bottom: 8%;
    }

    .procedure_item_bottom {
        padding: 1.5rem 2rem;
    }

    .type {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 419px) {
    .logoarea p a {
        display: block;
        font-size: 11px;
        padding: 0.7em 0em 0.7em 0em;
        margin: 0.8
    }
}

@media screen and (max-width: 350px) {
    .not_conpleted_inner:nth-child(2) div:first-of-type {
        font-size: 1.2rem;
    }

    .main_ttl_mypage span {
        margin-left: 0;
    }

    .procedure_item_title {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 1.6rem;
    }
}

/* mypage end */

/* terms */
.thir_ttl_text_list {
    padding-bottom: 7.8rem;
}

.terms_wrap {
    padding-bottom: 5rem;
}

.blue_num {
    list-style: none;
    counter-reset: li;
    padding-left: 0;
}

.blue_num>li {
    font-size: 1.5rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.blue_num>li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    color: #1069c4;
    counter-increment: li;
    content: counter(li)'.';
}

.brackets_num {
    list-style-type: none;
    /* counter-reset: cnt; */
    padding-left: 0;
}

.brackets_num li,
.blue_num .bg_blue li {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 2em;
    text-indent: -2em;
}

/* .brackets_num > li::before {
    counter-increment: cnt;
    content: "（" counter(cnt) ")";
} */
.list_style_none li {
    list-style-type: none;
    padding-left: 3.5rem;
}

.brackets_num ul li:last-child {
    margin-bottom: 0;
}

.terms {
    table-layout: auto;
    width: 100%;
    margin-bottom: 1.5rem;
}

.terms th,
.terms td {
    padding: 1.5rem 2rem;
}

.terms th {
    width: 25.3%;
}

.terms td {
    text-align: left;
}

.right-txt {
    font-size: 1.5rem;
    text-align: right;
}

@media screen and (max-width: 883px) {
    .thir_ttl_text_list {
        padding-bottom: 5.5rem;
    }

    .terms_wrap {
        padding-bottom: 4rem;
    }

    .terms_wrap li {
        font-size: 1.4rem;
    }

    .terms {
        font-size: 1.4rem;
    }

    .terms th {
        width: 27.5%;
    }

    .terms th,
    .terms td {
        padding: 1.5rem;
    }

    .right-txt {
        font-size: 1.4rem;
    }
}

/* terms end */

/* topics-list */
.topics_first {
    padding-top: 3rem;
    margin-top: 5rem;
    border-top: 1px dotted #d9d9d9;
}

.pagination {
    list-style: none;
    text-align: center;
    padding: 0;
    margin-bottom: 7rem;
}

.pagination li {
    display: inline-block;
    background-color: #eff1f1;
    margin: 0 0.5rem;
    border-radius: 2px;
}

.pagination li a {
    display: block;
    padding: 0.9rem 1.4rem;
}

.pagination li.pager_on a {
    background-color: #0e69c4;
    color: #fff;
    cursor: auto;
    border-radius: 2px;
}

.topics_last {
    margin-bottom: 4.5rem;
}

@media screen and (max-width: 883px) {
    .topics_first {
        margin-top: 4rem;
        padding-top: 2.2rem;
    }

    .topics_last {
        margin-bottom: 4rem;
    }

    .pagination {
        margin-bottom: 6rem;
    }
}

/* topics-list end */

/* topics */
.topics_detail_header {
    border-bottom: 1.5px solid rgba(217, 217, 217, 0.5);
    padding: 4rem 0 3rem 0;
    margin-bottom: 3.5rem;
}

.topics_detail_header h2 {
    font-size: 3rem;
    margin-bottom: 0;
}

.topics_detail_text {
    margin-bottom: 7.5rem;
}

.topics_detail_text p {
    padding-bottom: 1rem;
    font-size: 1.7rem;
}

.topics_detail_text_photo1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
    margin-bottom: 5rem;
}

.topics_detail_text_photo1 p {
    width: 68.5%;
}

.detail_photo1_img {
    margin-left: 3rem;
    width: 31.5%;
}

.detail_photo2_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 4rem;
}

.detail_photo2_img {
    width: 31.5%;
}

.detail_photo2_img:first-child {
    margin-right: 3rem;
}

.qr_p {
    margin-bottom: 2.5rem;
}

.qr_text {
    font-size: 1.5rem;
}

.bg_blue_qr {
    max-width: 14rem;
    margin-top: 1rem;
}

@media screen and (max-width: 883px) {
    .topics_detail_header {
        padding: 3.5rem 0 2.5rem 0;
        margin-bottom: 3rem;
    }

    .topics_detail_header h2 {
        font-size: 2.2rem;
    }

    .topics_detail_text {
        margin-bottom: 4.5rem;
    }

    .topics_detail_text p {
        font-size: 1.6rem;
    }

    .topics_detail_text_photo1 {
        display: block;
        margin-bottom: 4.5rem;
    }

    .detail_photo1_img,
    .topics_detail_text_photo1 p {
        width: 100%;
    }

    .detail_photo1_img {
        margin: 0 0 1.5rem 0;
    }

    .detail_photo2_wrap {
        display: block;
        margin-top: 2.5rem;
    }

    .detail_photo2_img {
        width: 100%;
    }

    .detail_photo2_img:first-child {
        margin: 0 0 2rem 0;
    }

    .detail_btn_more {
        margin: 3rem auto 6rem auto;
    }

    .qr_p {
        margin-bottom: 2.5rem;
    }

    .qr_p p,
    .qr_text {
        font-size: 1.4rem;
    }
}

/* topics end */

/* top */
.mv_wrap {
    max-width: 1250px;
    margin: auto;
}

.mv {
    width: 100%;
    height: 0;
    padding-top: 36%;
    background: url(../img/mv-pc.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

.is-button-fixed-1 .side-btn {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.side-btn {
    width: 5.5rem;
    display: block;
    position: fixed;
    right: 0;
    top: 175px;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    z-index: 10;
}

.important_notices {
    padding: 1.5rem;
    background-color: #fff1f1;
    border: 3px solid #e6201a;
    margin-top: 2.5rem;
}

.important_notices_type {
    color: #fff;
    background-color: #e6201a;
    font-size: 1.3rem;
}

.important_notices_date {
    font-size: 1.3rem;
}

.important_notices_text {
    font-size: 1.3rem;
    padding-top: .5rem;
}

.top_lead {
    margin: 4rem 0 7rem 0;
}

.top_lead_blue_ttl {
    font-size: 2.6rem;
    color: #1069c4;
    text-align: center;
}

.top_read_text {
    font-size: 1.7rem;
    text-align: center;
    padding: 0 11.1rem;
}

@media screen and (max-width: 883px) {
    header {
        z-index: 300;
    }

    .mv {
        background: url(../img/mv-sp.png);
        width: 100%;
        height: 0;
        padding-top: 93.47%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
    }

    .important_notices {
        margin-top: 1.5rem;
    }

    .is-button-fixed-1 .side-btn {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }

    .is-button-fixed-1 .sp-bottom-btn {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    .sp-bottom-btn {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
        text-align: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 301;
        transition: .3s;
    }

    .sp-bottom-btn a {
        font-size: 1.5rem;
        color: #fff;
        padding: 2rem 0;
        background-color: #81d5fa;
        display: block;
    }

    .sp-bottom-btn span {
        position: relative;
        padding-left: 3rem;
    }

    .sp-bottom-btn span::before {
        position: absolute;
        content: '';
        background: url(../img/sp-bottm-btn.png) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 2.5rem;
        height: 2.6rem;
        left: 0;
    }

    .top_lead {
        margin: 2.5rem 0 4.5rem 0;
    }

    .top_lead_blue_ttl {
        font-size: 2rem;
    }

    .top_read_text {
        padding: 0;
        font-size: 1.5rem;
    }
}

/* top end */

/* d-1 */
.tomonokai {
    margin: 1rem 0 .5rem 0;
}

.navidial {
    font-size: 2rem;
}

.navidial span {
    font-size: 1.5rem;
}

.bold {
    font-weight: bold;
}

.margin_no li {
    margin: 0;
}

/* d-1end */

/* m-1 */
.lead_anno {
    padding-bottom: 5.5rem;
}

.lead_anno p {
    margin-bottom: 1rem;
}

.lead_anno .annotation_bk {
    font-size: 1.5rem;
}

@media screen and (max-width: 883px) {
    .lead_anno .annotation_bk {
        font-size: 1.4rem;
    }
}

/* m-1 end */

/* ここから headerのトグルボタン（btn-group）の新規追加したcss */
.btn-group {
    display: flex;
    align-items: center;
}

.toggle-btn-wrap {
    border-radius: 2.15rem;
    border: 0.3rem solid #f3f3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.45rem;
    min-width: 28.6rem;
    height: 4.9rem;
    box-sizing: border-box;
    text-align: center;
    margin: 0 2rem 0 0;
}

.sp-toggle-btn-wrap {
    display: none;
}

.sp-white-learning {
    display: none;
}

.sp-blue-learning {
    display: none;
}

.logoarea-group {
    display: flex;
    justify-content: space-between;
    padding-top: 2.2rem;
    padding-bottom: 1.6rem;
}

.white-learning {
    width: 13.05rem;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6428571428;
    color: #1e1e1e;
    padding: 0.6rem 1.625rem;
    box-sizing: border-box;
}

.blue-learning {
    width: 13.05rem;
    font-size: 1.4rem;
    line-height: 1.6428571428;
    color: #fff;
    border-radius: 1.75rem;
    background-color: #81d5fa;
    padding: 0.6rem 1.625rem;
    box-sizing: border-box;
}

@media screen and (max-width: 883px) {
    .logoarea-group {
        padding-top: 0;
        padding-bottom: 0;
        flex-grow: 1;
    }

    .btn-group {
        display: none;
    }

    .toggle-btn-wrap {
        display: none;
    }

    .sp-toggle-btn-wrap {
        max-width: 337px;
        border-radius: 2.15rem;
        border: 0.3rem solid #f3f3f3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.45rem;
        width: 100%;
        height: 4.9rem;
        box-sizing: border-box;
        text-align: center;
        margin: 1rem auto 0;
    }

    .sp-white-learning {
        width: 16.3rem;
        max-width: 100%;
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 1.6428571428;
        color: #1e1e1e;
        padding: 0.6rem 1.625rem;
        box-sizing: border-box;
        display: block;
    }

    .sp-blue-learning {
        width: 16.3rem;
        max-width: 100%;
        font-size: 1.4rem;
        line-height: 1.6428571428;
        color: #fff;
        border-radius: 1.75rem;
        background-color: #81d5fa;
        padding: 0.6rem 1.625rem;
        box-sizing: border-box;
        display: block;
    }
}

/* ここまで headerのトグルボタン（btn-group）の新規追加したcss */