@charset "UTF-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
/***********************************
reset
common
ボタン
フォーム
ヘッダー
ボトムナビ
ページネーション
FV
フッター

アセット

広告掲載g
contents
職種タブ
top サービスを探す
top セミナーで学ぶ
top アンケート調査
サイドカラム
サービス資料、WP、セミナー、ニュース、動画、クイズ
ポイント


その他
    about_point
    guide
    associate_service
    ad
    rule
    faq
    inquiry
    questionnaire
    review
    qa
    admin
    resign
    hr
    bootstrap

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


/***********************************
** reset
***********************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/***********************************
** common
***********************************/
:root {
    /* 色指定 */
    --basic_color: #141415;
    --basic_color_light: #707070;
    --primary_color: #004986;
    --accent_color: #FE0000;
    --dark_color: #242429;
    --light_color: #F6F6F6;
    --light_color2: #E5E5E5;
    --water_color: #E5ECF3;
    /* フォント指定 */
    --font_size_xs: 1.2rem;
    --font_size_s: 1.4rem;
    --font_size_r: 1.6rem;
    --font_size_m: 2.0rem;
    --font_size_l: 2.6rem;
    --font_size_xl: 3.4rem;
    --font_size_2xl: 4.0rem;
    --font_size_3xl: 4.6rem;
    /* ボックスシャドウ指定 */
    --box_shadow: 0px 0px 15px 0px rgb(0 0 0 / 12%);
    /* spのコンテンツ幅調整指定 */
    --sp_inner: calc( 100% - 40px );
    --sp_inner2: calc( 100% - 60px );
}

/* spのフォント指定 */
@media screen and (max-width: 768px) {
    :root {
        --font_size_xs: 1.2rem;
        --font_size_s: 1.4rem;
        --font_size_m: 2.0rem;
        --font_size_l: 2.4rem;
        --font_size_xl: 2.8rem;
        --font_size_2xl: 3.2rem;
        --font_size_3xl: 3.6rem;
    }
}

html {
    font-size: 62.5%;
}

body {
    background: #fff;
    color: var(--basic_color);
    font-family: 'Roboto','Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    line-height: 1.5;
    font-size: 1.6rem;
}

img {
    width: 100%;
}

a,button {
    text-decoration: none;
    color: var(--basic_color);
    transition : all 0.3s ease 0s;
    cursor: pointer;
}

a:hover,button:hover {
    opacity: 0.6;
}

.bold {
    font-weight: bold;
    font-size: 1.2em;
}
.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.text_left {
    text-align: left;
}

.text_r {
    text-align: right;
}

.red {
    color: var(--accent_color);
}

h1 {
    font-size: var(--font_size_m);
    font-weight: bold;
    /* text-align: center; */
}

h2 {
    border-bottom: solid 1px var(--basic_color);
    font-size: clamp(26px, 2rem, 25px);
    display: inline-block;
    line-height: 1.5em;
    margin-bottom: 50px;
    position: relative;
}

h2::before {
    color: var(--primary_color);
    position: absolute;
    opacity: 0.2;
    left: -110px;
    top: 60px;
    width: 148px;
    transform: rotateZ(90deg);
}

h3 {
    border-bottom: solid 1px var(--primary_color);
    font-size: var(--font_size_m);
    font-weight: 600;
    color: var(--primary_color);
    display: inline-block;
    margin-bottom: 15px;
}

i[id*=i]{
    position: absolute;
    top: -150px;
}

.sp,.sp-hide {
    display: none !important;
}

.mt0 {
    margin-top: 0 !important;
}
.mb30 {
    margin-bottom: 30px;
}

.pb0 {
    padding-bottom: 0;
}

.w200 {
    width: 200px;
}

.w300 {
    width: 300px;
}

.w800 {
    width: 800px;
    margin: 0 auto;
}

.underline {
    text-decoration: underline;
}

.breadcrumb {
    margin-top: 15px;
    list-style: none;
    font-size: var(--font_size_xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb li {
    display: inline;
    list-style: none;
    font-weight: 500;
    position: relative;
    margin-right: 20px;
}

.breadcrumb li:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px var(--basic_color);
    border-right: solid 2px var(--basic_color);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: -15px;
    margin-top: -5px;
}

.breadcrumb li:last-child:after {
    content: none;
}

.breadcrumb li a {
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.thumb img {
    width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    border: solid 1px var(--light_color2);
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 6 / 4;
}

*[class*=clamp]{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.clamp3 {
    -webkit-line-clamp: 3;
}
.clamp4 {
    -webkit-line-clamp: 4;
}
.clamp5 {
    -webkit-line-clamp: 5;
}

p.page_back {
    text-align: right;
    margin-bottom: 20px;
}

p.page_back a {
    color: var(--primary_color);
    text-decoration: underline;
}

.nav_left,.nav_right {
    width: 70px;
    height: 70px;
    background: #00000000;
    border: solid 1px var(--basic_color);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
}

.nav_left {
    left: -10px;
    transform: rotateY(180deg);
}

.nav_left::before,.nav_right::before {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: 20px;
}

.nav_left a,.nav_right a {
    width: 70px;
    height: 70px;
}

#bar {
    height: 0%;
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    background: #004986;
    transition: all 0.3s ease;
}

.support {
    display: none;
    margin: -30px auto 50px;
}

.support p {
    text-align: left;
    line-height: 1.7em;
    margin: 3px 50px;
}

.support h4 {
    font-weight: bold;
    color: var(--base_color);
    display: flex;
    align-items: center;
    margin: 0 0 20px 50px;
    position: relative;
}

.support h4::before {
    content: url('/img/common/icon_support.png');
    position: absolute;
    top: -7px;
    left: -50px;
}

.support h4::after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--basic_color);
    margin-right: 50px;
}

.support h4::after {
    margin-left: 1rem;
}

.support .btn_inquiry {
    width: 450px;
    height: 45px;
    background: var(--primary_color);
    text-align: center;
    display: grid;
    place-items: center;
    position: relative;
    color: #fff;
    margin: 30px 0 0 50px;
}

.support .btn_inquiry::before {
    content: "\E0BE";
    font-size: 1.6rem;
    font-family: 'Material Icons';
    position: absolute;
    font-weight: normal;
    top: 10px;
    right: 20px;
}

.keyword_form.service_search {
    margin-top: 20px;
}
.search_container.service_search input[type="text"] {
    width: 38%;
}

@media screen and (max-width: 1024px) {
    /*.pc { display: none !important;}*/ /*.tb { display: block !important;}*/ .sp,.sp-hide {
        display: none !important;
    }

    .btn_secondary {
        /*
        display: grid !important;
        font-weight: normal;

        margin: 30px auto 40px;
        */
    }

    #wrapper {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .pc,.pc-hide {
        display: none !important;
    }

    /*.tb { display: none !important;}*/
    .sp,.sp-hide {
        display: block !important;
    }

    .sp_tab {
        display: block;
    }

    .sp-br {
        display: block;
    }

    .pc-br {
        display: none;
    }

    body {
        font-size: var(--font_size_r);
    }

    #wrapper {
        height: 100%;
        min-height: 100dvh;
        position: relative;
        box-sizing: border-box;
    }

    h2 {
        border-bottom: none;
        margin-bottom: 10px;
    }

    h2::before {
        content: none !important;
    }

    #mypage {
        white-space: nowrap;
    }

    .border {
        width: 100%;
        height: 5px;
        background: #ffffff;
    }

    .mtb10 {
        margin: 10px auto;
    }

    .mt25 {
        margin: 25px auto 0;
    }

    .breadcrumb {
        margin: 15px 0 15px;
        font-size: 13px;
    }

    .breadcrumb li {
        margin-right: 15px;
    }

    .breadcrumb li:after {
        width: 4.5px;
        height: 4.5px;
        border-top: solid 1.5px var(--basic_color);
        border-right: solid 1.5px var(--basic_color);
        right: -12px;
        margin-top: -4px;
    }

    form {
        /* width: 94%; */
        margin: 0 auto 40px;
    }
    form.search_container.service_search {
        margin: 0 auto;
    }
    .keyword_form form.search_container {
        display: flex;
    }

    .keyword_form {
        width: 100%;
        /* max-width: 300px; */
        margin: 0 auto 15px;
    }
    .keyword_form.service_search {
        width: var(--sp_inner);
        margin: 0 auto 20px;
    }
    .keyword_form.service_search {
        margin-top: 20px;
    }
    .search_container.service_search input[type="text"] {
        width: 93%;
    }
    .keyword.service_search_tag {
        width: var(--sp_inner);
        margin: 0 auto 20px;
    }
    .keyword_form .search_container input[type="text"] {
        height: 40px;
        margin: 0 4px 0 0;
    }
    .keyword {
        /* width: var(--sp_inner); */
        margin: 0 auto 20px;
        text-align: center;
    }

    .support {
        width: 90%;
        margin: 30px auto 0;
    }

    .support p {
        margin: 0 0 10px 0;
    }

    .support h4 {
        margin: 0 0 15px 50px;
    }

    .support h4::before {
        top: 5px;
        left: -47px;
    }

    .support h4::after {
        content: none;
    }

    .support .btn_inquiry {
        width: 300px;
        height: 40px;
        margin: 20px auto 25px;
    }

    .support .btn_inquiry::before {
        font-size: 1.4rem;
        top: 9px;
    }
}

/***********************************
** ステップ
***********************************/
ul.component-formStep {
    display: flex;
    overflow: hidden;
    margin: 20px 0 20px;
    background: #707070;
}
ul.component-formStep li {
    flex: 1;
    align-self: auto;
    text-align: center;
    color: #fff;
    line-height: 1.3em;
    position: relative;
    padding: 16px 8px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.component-formStep li:first-child {
    padding-left: 8px;
}
ul.component-formStep li:last-child {
    padding-right: 8px;
}
ul.component-formStep li.selected {
    background: #242429;
}
ul.component-formStep li:before {
    content: "";
    display: block;
    height: 100%;
    width: 20px;
    background: #fff;
    clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0% 100%, 0 50%, 0% 0%);
    position: absolute;
    top: 0;
    right: -13px;
    z-index: 10;
}
ul.component-formStep li:after {
    content: "";
    display: block;
    height: 100%;
    width: 20px;
    background: #707070;
    clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0% 100%, 0 50%, 0% 0%);
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 20;
}
ul.component-formStep li.selected:after {
    background: #242429;
}
ul.component-formStep li:last-child:before,
ul.component-formStep li:last-child:after {
    display: none;
}
ul.component-formStep li p {
    position: relative;
    z-index: 30;
}
/*
ul.component-formStep li:first-child {
    background: none;
}


ul.component-formStep li.selected:after {
    background: #242429;
}
ul.component-formStep li span {
    position: relative;
    z-index: 30;
}
@media screen and (max-width: 768px) {
    ul.component-formStep li span i {
        display: none;
    }
}

ul.component-formStep {
    display: flex;
    overflow: hidden;
    margin: 20px 0 20px;
    background: #707070;
}
ul.component-formStep li {
    flex: 1;
    align-self: auto;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    position: relative;
    padding: 16px 8px 16px 8px;
}


ul.component-formStep li:first-child {
    background: none;
}

ul.component-formStep li.selected {
    background: #242429;
}
ul.component-formStep li.selected:after {
    background: #242429;
}
ul.component-formStep li span {
    position: relative;
    z-index: 30;
}
@media screen and (max-width: 768px) {
    ul.component-formStep li span i {
        display: none;
    }
}
*/
/***********************************
** ボタン
***********************************/
.btn_primary,
.btn_secondary,
.btn_return {
    color: #fff;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    display: block;
    padding: 16px 32px;
    margin: 30px auto;
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 350px;
    /*
    height: 45px;
    display: grid;
    place-items: center;
    line-height: 3.6rem;
    */
}

.btn_primary::before,.btn_secondary::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -16px;
}

.btn_primary {
    background: var(--accent_color);
    border: none;
}

.btn_secondary {
    background: var(--primary_color);
    border: none;
}

.btn_return {
    color: var(--primary_color);
    background: none;
    border: solid 2px var(--primary_color);
}

.btn_return::before {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--primary_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -5px;
    transform: rotate(180deg);
}
.btn_white {
    background: #fff;
    border: none;
    color: var(--primary_color);
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    display: block;
    padding: 16px 32px;
    margin: 30px auto;
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 350px;
}
.btn_red {
    background: var(--accent_color);
    border: none;
    color: #fff;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    display: block;
    padding: 16px 32px;
    margin: 30px auto;
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 350px;
}


.btn_primary.w200 {
    max-width: 200px;
}

.btn_primary.bookmark {
    background: var(--primary_color);
}

.btn_secondary_light {
    width: 83%;
}
.topside_point {
    width: 200px;
}
.btn_move {
    width: 100%;
    height: 72px;
/*    margin-top: 16px;*/
    position: relative;
}

.btn_move a {
    display: flex;
    position: absolute;
    right: 0;
}

.btn_move p {
    align-items: center;
    display: grid;
    padding-right: 10px;
}

.btn_move_white p {
    color: #fff;
}

.btn_move_white .nav_right {
    border: solid 1px #fff;
}

.btn_move_white .nav_right::before {
    background: #fff;
    border: solid 1px #fff;
    top: 18px;
}

.btn_income,
.btn_inquiry,
.btn_faq,
.btn_about{
    width: calc(33% - 10px);
    background: #fff;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    position: relative;
}

.btn_inquiry::before,
.btn_faq::before {
    content: "\E0BE";
    font-size: var(--font_size_m);
    font-family: 'Material Icons';
    position: absolute;
    top: 0;
    right: 10px;
}
.btn_income::before {
    content: "";
    background: url("https://icongr.am/fontawesome/bar-chart.svg?size=128&color=00000000") no-repeat center center / 100% auto;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
}
.btn_about::before {
    content: "\e0f0";
    font-size: var(--font_size_m);
    font-family: "Material Icons";
    position: absolute;
    top: 0px;
    right: 10px;
}
.btn_faq::before {
    content: "Q";
    color: #ffffff;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    background: var(--basic_color);
    border-radius: 16px;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 10px;
    margin-top: -8px;
}

/***********************************
** service_document
***********************************/
.service_document {
    display: flex;
    padding: 0 16px;
    flex-wrap: wrap;
}

.document_area {
    display: flex;
    align-items: flex-start;
    position: relative;
    border-radius: 10px;
    padding: 30px;
    margin-top: 25px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, .25);

}

.document_img {
    padding-top: 0;
    min-width: auto;
    width: 30%;
    margin-right: 16px;
    border: solid 1px #efefef;
}

.document_area_checkbox {
    padding-top: 30px;
    padding-right: 10px;
}

.document_img img {
    display: block;
    width: 100%;
}

.document_img + div {
    flex: 1;
}

.document_area h2 {
    line-height: 1.4em;
    margin-bottom: 8px;
    border-bottom: 8px;
    font-size: var(--font_size_m);
    font-weight: bold;
}

.close_button {
    position: absolute;
    top: -15px;
    right: -15px;
}

.service_document.bookmark .close_button {
    position: absolute;
    top: 0px;
    right: 0;
}

.member_link {
    margin-top: 67px;
}

.btn_primary.quiz {
    background: var(--primary_color);
}

.btn_primary.login.point {
    padding: 16px 0 25px;
}

.btn_primary.point::before, .btn_secondary.point::before {
    top: 20px;
}

/* select#hopeJobCategory0 {
    width: 100%;
    height: 40px;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
} */
dt {
    margin-bottom: 10px;
    position: relative;
}

dt i {
    color: #ffffff;
    font-size: var(--font_size_xs);
    font-weight: 500;
    font-style: normal;
    line-height: 20px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0 3px;
    margin-left: 8px;
    background: #F41616;
    margin-top: -10px;
}

/* アンケート「任意」表示 */
dt i.any {
    background: var(--basic_color_light);
}

#inquiry_area dt i {
    vertical-align: text-bottom;
    position: static;
    margin: 0;
}

.primary_color {
    color: var(--primary_color);
    text-decoration: underline;
}

.download_button {
    margin-bottom: 70px;
}

.dark_color {
    color: white;
    padding: 15px 0;
    margin: 53px 0 44px;
    background: var(--dark_color);
}

.input_area {
    padding: 105px 45px 20px;
    margin-bottom: 40px;
    background: var(--light_color);
}

.input_area dl dd {
    margin: 5px 0 25px 0;
}

.input_title {
    font-size: var(--font_size_m);
    font-weight: bold;
    margin-bottom: 20px;
}

.btn_primary.download::before, .btn_secondary::before {
    right: 7px;
}

h2.member_link.text_center {
    line-height: 1.5;
}

.side_merit li {
    padding-left: 60px;
}

.side_merit.regist li::before {
    content: "Q";
    display: inline-block;
    font-size: 30px;
    font-family: Roboto;
    position: absolute;
    top: -13px;
    left: -30px;
}

/* .side_merit.regist li::after {
    content: "Q";
    color: #fff;
    font-size: clamp(12px, 1.5rem, 25px);
    left: 10px;
    top: 6px;
    position: absolute;
    transform: none;
}  */
.cart_img {
    width: 60%;
    margin: 40px auto 0;
}

.cart_img img {
    width: 100%;
}

.past_quizzes {
    color: var(--primary_color);
    text-decoration: underline;
}

.past_quizzes_area {
    margin-bottom: 160px;
}

h2.quiz {
    line-height: 1.5;
    margin-left: 10px;
}

p.quiz {
    padding-top: 14px;
    padding-left: 0px;
    font-size: 1.1rem;
}

.top_service_matter > article {
    display: none;
}

.top_service_matter > article.active {
    display: block;
}

.scroll {
    overflow-x: scroll;
}
.scroll ul {
    width: 2750px;
}
.scrollbar {
    border: solid 1px red;
}
.scrollbar i {
    display: block;
    border: solid 1px red;
}

.float_button {
    position: sticky;
    left: 1200px;
    bottom: 20px;
    width: 90px;
    height: 90px;
    z-index: 100;
}
.float_button span {
    position: absolute;
    top: -6px;
    right: -9px;
    background: var(--accent_color);
    padding: 2px 10px;
    border-radius: 25px;
    border: 2px solid #fff;
    color: #fff;
}

.float_button img {
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .float_button {
        right: 20px;
        bottom: 20px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .top_side_area {
        display: none;
    }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
    .side_merit {
        display: block;
    }
    .side_merit ul {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
    }
    .side_merit ul li {
        width: 50%;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 768px) {
    .attention {
        padding: 0 30px;
    }

    .download_button {
        /*padding: 0 30px;*/
    }

    .btn_primary.download::before, .btn_secondary::before {
        right: 20px;
    }

    .side_merit li {
        padding-left: 35px;
    }

    .past_quizzes_area {
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .quiz_detail .quiz_title {
        /* padding: 20px 0; */
    }
/*
    .quiz_detail .quiz_title::before {
        top: 8px;
    }
*/
    .service_document {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .document_img {
        min-width: 114px;
    }

    .close_button {
        right: -10px;
    }

    .float_button {
        right: 20px;
        bottom: 65px;
        margin-right: 20px;
    }
}

/***********************************
** フォーム関連、ブックマーク
***********************************/
input[type=checkbox] {
    display: none;
}

.checkbox00 {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    position: relative;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}

.checkbox01, .checkbox02 {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    position: relative;
    border: solid 2px var(--accent_color);
    background: var(--accent_color);
    border-radius: 3px;
    color:white;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
}

.checkbox00 span::before {
    background: var(--light_color2);
    content: '';
    display: block;
    height: 25px;
    margin-top: -8px;
    position: absolute;
    width: 25px;
    border-radius: 3px;
}

.checkbox01 span::before, .checkbox02 span::before {
    /* background: var(--accent_color); */
    background: var(--light_color2);
    content: '';
    display: block;
    /* height: 25px;
    margin-top: -8px;
    position: absolute;
    width: 25px; */
    border-radius: 3px;
}

input[type="text"], input[type="email"],input[type="tel"], input[type="password"] {
    line-height: 1.2em;
    width: 100%;
    padding: 1.2rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
}

input[type=checkbox]:checked + .checkbox00 span::before {
    background: #fff;
}

input[type=checkbox]:checked + .checkbox01 span::before, input[type=checkbox]:checked + .checkbox02 span::before {
    background: var(--light_color2);
}

input[type=checkbox] + .checkbox01 span::after,
input[type=checkbox] + .checkbox02 span::after {
    content: "する";
}

input[type=checkbox]:checked + .checkbox01 span::after,
input[type=checkbox]:checked + .checkbox02 span::after {
    content: "済み";
}

input[type=checkbox]:checked + .checkbox00 span {
    background: var(--primary_color);
    color: #fff;
}

input[type=checkbox]:checked + .checkbox01, input[type=checkbox]:checked + .checkbox02 {
    background:var(--light_color2);
    border: solid 2px var(--accent_color);
    color:var(--accent_color);
}

span.caution {
    font-size: var(--font_size_xs);
    display: block;
    margin-top: 10px;
}

.checkbox00::before {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 2;
}



 .checkbox01::before, .checkbox02::before {
    /* border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 2; */
}
.checkbox02:before, .checkbox02:after {
    display: block;
    content: '';
    background-color: #fff;
    position: absolute;
    width: 21px;
    height: 3px;
    top: 24px;
    right: 16px;
    border-radius:0px;
    transition:.0s;
  }
  .checkbox02:before {
    width: 3px;
    height: 21px;
    top: 15px;
    right: 25px;
    transition:.2s;
  }


/*
.checkbox01::before, .checkbox02::before{
    content: '';
    display: inline-block;
    width: 18px;
    height:  18px;
    background-image:url(/img/common/plus.svg);
    background-size: contain;
    vertical-align: middle;
    position:absolute;
    right:18px;
    top:16px;
    z-index:10;
}  */

input[type=checkbox]:checked + .checkbox00::before{
    opacity:0;
}


input[type=checkbox]:checked + .checkbox00::after {
    border-right: 3px solid #FE0000;
    border-bottom: 3px solid #FE0000;
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 3;
}

input[type=checkbox]:checked + .checkbox01::after, input[type=checkbox]:checked + .checkbox02::after {
    border-right: 3px solid var(--accent_color);
    border-bottom: 3px solid var(--accent_color);
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 3;
    background:transparent;
}
input[type=checkbox]:checked + .checkbox01::before, input[type=checkbox]:checked + .checkbox02::before{
    display:none;
}
.checkbox00 {
    padding: 9px 30px 9px 0;
    /* width: 360px; */
    height: 45px;
    margin: 0px auto 0 40px;
}

.checkbox00 span, input[type=checkbox]:checked + .checkbox00 span {
    cursor: pointer;
    margin-right: 40px;
    color: #fff;
    background: url(../img/common/icon_document.png) no-repeat 30px 10px;
    background-size: 8%;
    background-color: var(--accent_color);
    padding: 12px 15px 12px 70px;
}

input[type=checkbox]:checked + .checkbox00 span {
    background-color: var(--light_color2);
    color: var(--primary_color);
}

.checkbox00 span:after {
    position: absolute;
    top: calc(50% - 24px);
    right: 47px;
    width: 0;
    height: 0;
    content: '';
    border-width: 23px 0px 22px 23px;
    border-style: solid;
    border-color: transparent transparent transparent var(--accent_color);
}

input[type=checkbox]:checked + .checkbox00 span:after {
    border-color: transparent transparent transparent var(--light_color2);
}

.checkbox01 {
    padding: 9px 30px;
    width: 300px;
    height: 45px;
    margin: 30px auto 0;
}

.checkbox00 span::before {
    right: 10px;
    top: 15px;
}

.checkbox01 span::before {
    right: 10px;
    top: 15px;
}

.checkbox00::before {
    right: 17px;
    top: 13px;
}

.checkbox01::before {
    right: 17px;
    top: 13px;
}

input[type=checkbox]:checked + .checkbox00::after {
    right: 17px;
    top: 13px;
}

input[type=checkbox]:checked + .checkbox01::after {
    right: 17px;
    top: 13px;
}

.checkbox02 {
    padding: 15px 40px;
    width: 450px;
    height: 55px;
    margin: 40px auto;
}

.checkbox02 span::before {
    right: 15px;
    top: 20px;
}

.checkbox02::before {
    /* right: 22px;
    top: 18px; */
}

input[type=checkbox]:checked + .checkbox02::after {
    right: 22px;
    top: 18px;
}

select {
    width: 100%;
    padding-right: 1em;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    outline: none;
    background: #ffffff;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    padding: 15.4px 0 19.6px 14.4px;
    color: #707070;
    background-image: url(../img/regist/select_icon.png);
    background-repeat: no-repeat;
    background-size: 12px 10px;
    background-position: right 10px center;
}

select::before {
    position: absolute;
    top: 0.8em;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #707070;
    pointer-events: none;
}

textarea {
    font-size: var(--font_size_r);
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
    height: 7em;
}

.birth select, #regist .birth select {
    width: 125px;
    margin: 0 0 10px 0px;
    width: 24%;
}

#regist .birth select:first-of-type {
    margin-left: 0;
}

.login_area {
    max-width: 500px;
    margin: 0 auto 40px;
    padding: 40px 0 0;
}

#regist.login_area {
    padding: 0;
}

#regist.login_area .merit2 {
    border-left: 1px solid var(--light_color2);
    padding: 0 0 0 16px;
}

#regist.login_area .bootstrap {
    width: 40%;
    padding: 0 16px 0 0;
}

#regist.login_area .merit2 .inner {
    height: auto;
}

#regist.login_area .merit2 .inner .btn_primary {
    margin: 0 auto;
}

#regist.login_area h1 {
    font-size: var(--font_size_l);
    text-align: center;
    margin-bottom: 8px;
}

#regist.login_area h2 {
    font-size: clamp(12px, 1.4rem, 18px);
    margin: 10px 0 10px 0;
    color: var(--basic_color);
    border-bottom: none;
    display: block;
}

#regist.login_area .bootstrap hr {
    border: solid 1px var(--light_color2);
    margin: 24px 0;
}

#regist.login_area .bootstrap form .box {
    padding: 0;
}

#regist.login_area dt {
    margin-top: 0;
}
h2.sns.text_center {
    margin: 40px auto 10px;
}

i.fab.fa-facebook-square, i.fab.fa-twitter {
    position: absolute;
    left: 10%;
}

.btn_secondary.fb {
    background: #1877F2;
}

.btn_secondary.tw {
    background: #1E9AF1;
}

.login_area.flexbox {
    display: flex;
    max-width: 100%;
}

.login_area.flexbox .side_merit.regist {
    padding: 40px;
    margin-bottom: 30px;
    background: var(--light_color);
    border-radius: 50px;
    text-align: center;
}

.login_area.flexbox .side_merit li {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 0;
}

.login_area.flexbox .side_merit li::before {
    counter-increment: number;
    content: counter(number)"";
    font-size: var(--font_size_s);
    position: static;
    margin-right: 8px;
}
.login_area.flexbox .side_merit li p {
    flex: 1;
}
/*
.login_area.flexbox .side_merit li::before {
    content: "";
    left: 10px;
    background: var(--basic_color);
    width: 30px;
    height: 30px;
    clip-path: circle(46% at 50% 50%);
    position: absolute;
    top: -4px;
    left: 8px;
}
.login_area.flexbox .side_merit li::after {
    counter-increment: number;
    content: counter(number)"";
    color: #fff;
    font-size: clamp(12px, 1.4rem, 25px);
    left: 19px;
    top: 0;
    position: absolute;
    transform: skewX(-10deg);
}
*/

.login_area.flexbox .right_area .box {
    margin-bottom: 40px;
}

.login_area.flexbox .left_area {
    max-width: 480px;
    width: 60%;
    margin-right: 40px;
}

.login_area.flexbox .right_area {
    flex: 1;
    padding-left: 40px;
    border-left: 1px solid #ddd;
}

.login_area.flexbox .detail_title {
    margin: 0 auto;
}

.login_area.flexboxh1, .login_area.flexbox h2.sns.text_center {
    margin: 0px auto 10px
}

.login_area.flexbox h1 {
    /* font-size: 1.4rem; */
}

.login_area.flexbox h2.sns.text_center {
    /* font-size: 1.0rem; */
    margin-top: 30px;
}


@media screen and (max-width: 768px) {
    #regist.login_area {
        max-width: 400px;
        margin: 20px auto;
    }
    #regist.login_area .bootstrap {
        width: auto;
        padding: 0;
    }
    #regist.login_area .bootstrap form {
        margin: 0;
    }
    #regist.login_area .bootstrap form dt {
        margin-bottom: 4px;
    }
    #regist.login_area .bootstrap form dd {
        margin-bottom: 16px;
    }
    #regist.login_area .bootstrap .btn_secondary {
        margin: 16px auto;
    }
    #regist.login_area .merit2 {
        margin: 40px 0 0 0;
        padding: 0;
        border: none;
    }
    .login_area.flexbox .left_area {
        margin: 0;
        max-width: none;
    }

    .login_area.flexbox .side_merit.regist {
        text-align: center;
        padding: 20px;
    }

    .login_area.flexbox .side_merit.regist ul {
        display: inline-block;
    }

    .login_area.flexbox .side_merit.regist ul li {
        width: 100%;
    }
}

.agreement_area {
    max-width: 1300px;
    margin: 30px auto;
    padding: 15px;
}

.agreement_area .box.bg {
    padding: 30px 15px 5px;
}

.agreement_area .download_button {
    margin-bottom: 0px;
}

.agreement_area p.agree_text {
    margin-bottom: 20px;
}

.bookmark01, .seminar_bookmark01 {
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    border: solid 1px #cccccc;
    background: var(--light_color);
    color: #606060;
    font-weight: bold;
}

.bookmark01 {
    font-size: var(--font_size_xs);
    display: inline-block;
    padding-right: 15px;
    padding: 4px 8px;
    border-radius: 3px;
}

.seminar_bookmark01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 60px;
    border-radius: 3px;
}

.bookmark01 span, .seminar_bookmark01 span {
    display: inline-block;
}

input[type=checkbox]:checked + .bookmark01, input[type=checkbox]:checked + .seminar_bookmark01 {
    background: var(--primary_color);
    color: #fff;
    border: solid 1px var(--primary_color);
    padding: 3px 5px;
}

input[type=checkbox]:checked + .bookmark01 span::after, input[type=checkbox]:checked + .seminar_bookmark01 span::after {
    content: "済";
}

.bookmark01::after {
    content: url("../img/common/bookmark_off.png");
    position: relative;
    bottom: -3px;
    margin-left: 4px;
}

input[type=checkbox]:checked + .bookmark01::after {
    content: url("../img/common/bookmark_on.png");
}

.seminar_bookmark01::before {
    content: url("../img/common/bookmark_off.png");
    position: absolute;
    top: 20px;
    right: 12px;
}

input[type=checkbox]:checked + .seminar_bookmark01::after {
    content: url("../img/common/bookmark_on.png");
    position: absolute;
    top: 20px;
    right: 12px;
}

.term_check {
    width: 600px;
    margin: 25px auto 0;

}

.term {
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    font-weight: bold;
    text-align: left;
    font-size: 16px;
    padding: 0 0 0 32px;
    margin: 30px auto 0;
}

.term span::before {
    background: #ccc;
    content: '';
    display: block;
    height: 25px;
    margin-top: -8px;
    position: absolute;
    width: 25px;
    border-radius: 3px;
    left: 0;
    top: 5px;
}
.news_detail div[style*="display: flex"] > div .term{
    border: solid 1px rgba(220, 20, 60, 1);
    padding: 1rem 0.8rem;
    padding-left:40px;
    box-sizing: border-box;
    width: 100%;
    border-radius:8px;
    margin-bottom:2.4rem;
}

.news_detail div[style*="display: flex"] > div .term span::before{
    margin-top: 0px;
    left:8px;
}
.news_detail div[style*="display: flex"] > div .term::before{
    top: 13px;
    left:14px;
}
.news_detail div[style*="display: flex"] input[type=checkbox]:checked + .term::after{
display:none;
}
/*
.news_detail div[style*="display: flex"] > div:first-child{
    margin-bottom:1.6rem;
}
*/





input[type=checkbox]:checked + .term::after{
    margin-top: 2px;
}
input[type=checkbox]:checked + .term span::before {
    background: #FE0000;
}

.term::before {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 2;
    left: 6px;
    top: 4px;
}

input[type=checkbox]:checked + .term::after {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: '';
    display: block;
    height: 16px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 3;
    left: 6px;
    top: 4px;
}

.search_container input[type="text"] {
    display: inline-block;
    border: 1px solid var(--light_color2);
    padding: 3px 10px;
    border-radius: 3px;
    height: 45px;
    width: 85%;
    overflow: hidden;
    font-size: 16px;
    margin: 5px 0 15px;
}

.search_container input[type="text"]:focus {
    outline: 0;
    height: 45px;
}

.keyword_button {
    position: relative;
    background: var(--primary_color);
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: #fff;
    width: 45px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.keyword_button::before {
    content: url("../img/common/keyword_search.png");
    position: absolute;
    top: 5px;
    left: 5px;
}

.cp_ipselect {
    overflow: hidden;
    width: 180px;
    margin: 0 0 0 auto;
}

.cp_ipselect select {
    width: 100%;
    padding-right: 1em;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.cp_ipselect select::-ms-expand {
    display: none;
}

.cp_ipselect.cp_sl01 {
    position: relative;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    background: #ffffff;
}

.cp_ipselect.cp_sl01::before {
    position: absolute;
    top: 0.8em;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #707070;
    pointer-events: none;
}

.cp_ipselect.cp_sl01 select {
    padding: 8px 38px 8px 8px;
    color: #707070;
}

/* フォーム（Z）
------------------------------------------------- */
input[type="radio"] {
    display: none;
}

label.lbl03 {
    width: 32%;
    margin-right: 0;
    margin-bottom: 15px;
    display: inline-block;
}
label.term.questionnaire_radio  span::before {
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid #000;
}
input[type="radio"].questionnaire_radio:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 7px;
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}


input[type="radio"] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: solid 1px #666666;
    border-radius: 10px;
    margin: 0 9px -2px 0;
}

input[type="checkbox"] + .check01:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: solid 1px #666666;
    background: #ffffffff;
    margin-right: 10px;
}

input[type="radio"]:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: 23px;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.login_mail {
    color: var(--basic_color_light);
}

.login_link {
    font-weight: bold;
}

.box.bg {
    padding-top: 60px;
    padding-bottom: 30px;
    background: var(--light_color);
}

.sex > i {
    padding: 0.9rem 1.2rem 1rem 1rem;
    border: solid 1px #D4D8E0;
    border-radius: 5px;
}

.sex > i:not(:last-child) {
    margin-right: 10px;
}

.agree_check {
    padding: 15px;
    background: #F9F9FB;
}

#regist {
    display: flex;
}


#regist {
    margin: 20px 0;
}
#regist h1 {
    margin-bottom: 30px;
    position: relative;
}
#regist .merit2:after {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 18px;
    right: -20px;
    background: url(../img/regist/point_present.svg) no-repeat center center / 100% auto;
    animation: 1.2s linear 0s 1 poyon;
}

@keyframes poyon {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); opacity: 0; }
    15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
    30%  { transform: scale(1.3, 0.8) translate(0%, 10%); opacity: 1; }
    50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
    70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media screen and (max-width: 1024px) {
    #regist .merit2:after {
        width: 100px;
        height: 100px;
        top: 54px;
        right: -47px;
    }
}
@media screen and (max-width: 768px) {
    #regist .box.bg {
        overflow: inherit;
    }
    #regist .merit2:after {
        right: 50%;
        left: auto;
        margin-right: -214px;
        top: 30px;
    }
}
@media screen and (max-width: 480px) {
    #regist .merit2:after {
        width: 80px;
        height: 80px;
        margin-right: -180px;
        top: 34px;
    }
}
#regist .merit2 {
    text-align: center;
    width: 60%;
    padding: 0 8px;
    background: none;
    position: relative;
}
#regist .merit2 .inner {
    background: var(--water_color);
    height: 100%;
/*    padding: 24px;*/
    padding-bottom: 1px;
    box-sizing: border-box;
}
#regist .merit2 h2 {
    color: #ffffff;
    font-size: var(--font_size_m);
    line-height: 1.2em;
    display: block;
    width: 70%;
    background: var(--primary_color);
    margin: 0 auto;
    padding: 8px;
    border: none;
    border-radius: 100px;
}
#regist .merit2 ul {
    display: flex;
    flex-wrap: wrap;
    margin: 8px -8px;
}

#regist .merit2 li {
    width: 50%;
    padding: 8px;
    box-sizing: border-box;
}

#regist .merit2 li article {
    color: var(--primary_color);
    background: #ffffff;
    padding: 16px 0;
    height: 100%;
    box-sizing: border-box;
}

#regist .merit2 li article b {
    color: #ffffff;
    font-weight: bold;
    line-height: 1.2em;
    background: var(--primary_color);
    display: block;
    width: 50%;
    margin: 0 auto;
    padding: 8px 16px;
}
#regist .merit2 li article img {
    display: block;
    max-width: 176px;
    margin: 8px auto;
}
#regist .merit2 li article span {
    display: block;
    max-width: 176px;
    margin: 0 auto;
}

#regist .merit2 .help {
    text-align: center;
    margin: 0 auto;
    line-height: 2.0em;
}
#regist .merit2 .help br {
    display: none;
}
#regist .merit2 .help img {
    display: inline-block;
    width: 20px;
    margin-right: 4px;
    vertical-align: middle;
}
#regist .merit2 .help a {
    color: var(--primary_color);
    text-decoration: underline;
    margin: 0 8px 0 0;
}
#regist .bootstrap {
    flex: 1;
}
#regist .bootstrap form .box {
    padding: 24px;
}
#regist .bootstrap form h1 {
    text-align: center;
    margin: 0;
}
#regist .bootstrap form h2 {
    font-size: var(--font_size_r);
    font-weight: bold;
    text-align: center;
    display: block;
    margin: 24px 0 0 0;
    border: none;
}
#regist .bootstrap form hr {
    margin: 32px 0;
}
#regist .bootstrap form .btn_secondary {
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    #regist {
        display: block;
    }
    #regist .merit2 {
        width: auto;
        margin: 20px auto;
    }
    #regist .merit2 .inner {
        padding: 16px;
    }
    #regist .merit2 h2 {
        font-size: var(--font_size_s);
        font-weight: bold;
        width: 90%;
        padding: 4px;
        max-width: 300px;
    }
    #regist .merit2 ul {
        display: block;
    }
    #regist .merit2 ul li {
        width: auto;
        padding: 4px;
    }
    #regist .merit2 ul li:last-child {
        display: none;
    }
    #regist .merit2 ul li img {
        display: none;
    }
    #regist .merit2 ul li article {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background: none;
    }
    #regist .merit2 ul li article b {
        font-size: var(--font_size_s);
        line-height: 50px;
        width: 50px;
        height: 50px;
        margin: 0 16px 0 0;
        padding: 0;
        border-radius: 50px;
        position: relative;
    }
    #regist .merit2 ul li article b:after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        right: -4px;
        background: var(--primary_color);
        margin: 0;
        margin-top: -5px;
    }
    #regist .merit2 ul li article span {
        font-size: var(--font_size_s);
        font-weight: bold;
        text-align: left;
        width: auto;
        max-width: 240px;
        margin: 0;
        flex: 1;
    }
    #regist .bootstrap {
        width: auto;
    }
    #regist .bootstrap form .box {
        padding: 16px;
    }
    #regist .bootstrap dl:first-of-type dt {
        margin-top: 0;
    }
}

@media screen and (max-width: 480px) {
    #regist h1 {
        margin-bottom: 20px;
    }
    #regist .merit2 .help {
        line-height: 30px;
        margin-top: 8px;
    }
}

.radio_area label {
    position: relative;
    width: 40%;
    background: #ffffff;
    padding: 10px 0 10px 20px;
    margin-right: 20px;
    border-radius: 5px;
}

.radio_area label:nth-child(odd) {
    margin-right: 20px;
}

dl.check_area > p {
    padding-bottom: 20px;
}

.check_area {
    margin: 50px auto 50px;
}

.act {
    display: block!important;
}

.error {
    color: #ff3333;
    font-size: 14px;
    padding: 10px;
    border: solid 1px #ff3333;
    background: #ffffff;
}

.regist_area {
    max-width: 500px;
    margin: 0 auto 40px;
    padding: 20px;
}

.regist_area form {
    margin: 40px auto;
}

.regist_area input {
    margin: 0 auto;
}

input[type="text"], input[type="email"], input[type="password"] {
    /* box-sizing: border-box; */
}

.bg_gray {
    background: var(--light_color);
    border-radius: 0;
    overflow: hidden;
    padding: 50px 30px 30px 50px;
}

#regist select {
    width: 100%;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    padding: 8px 38px 8px 8px;
    padding: 15.4px 0 19.6px 14.4px;
    background-repeat: no-repeat;
}

#regist .chart-area {
    width: 62px;
    height: 62px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -33px;
}

.chart-area {
    width: 62px;
    height: 62px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -33px;
}

#regist .label-box {
    text-align: center;
    display: block;
    width: 100%;
    height: 62px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}

#regist .label-box .label {
    color: #003068;
    font-size: 24px;
    font-family: oswald;
    line-height: 62px;
    margin-top: 5px;
}

#regist .label-box .label .per {
    font-size: 15px;
}

#regist header {
    position: relative;
}

#regist header .inner {
    position: relative;
}

#regist #copy {
    background: none;
}

#regist .academic {
    max-width: 700px;
    margin: 0 auto;
}

#regist .top_service_matter h4 {
    display: grid;
}
#regist .top_service_matter h4 {
    color: var(--primary_color);
    border-bottom: solid 1px var(--primary_color);
}
#regist .top_service_matter .detail_title4 {
    background: var(--basic_color);
    color: #fff;
}
#regist dl {
    max-width: 660px;
    margin: 16px auto;
}

#regist dl:after {
    content: "";
    display: block;
    clear: both;
}

#regist dl.col2 > * {
    width: 48%;
    margin-right: 4%;
    float: left;
}

#regist dl.col2 > *:last-child {
    margin-right: 0;
}
#regist dl dt {
    margin: 0 0 4px 0;
}
#regist dl dt i {
    color: #ffffff;
    font-weight: 500;
    font-style: normal;
    line-height: 1.0em;
    display: inline-block;
    position: absolute;
    right: 3px;
    padding: 3px;
    margin-left: 8px;
    background: #F41616;
}

#regist dl dd {
    margin: 0;
}

#regist dl dd:after {
    content: "";
    position: absolute;
    display: block;
    clear: both;
}

#regist dl dd.col2 {
    display: flex;
}

#regist dl dd.col2 *:nth-child(2n-1) {
    width: 48%;
    float: left;
}

#regist dl dd.col2 *:nth-child(2n) {
    width: 4%;
    float: left;
    padding-top: 0.9rem;
}

#regist dl dd.col3 *:nth-child(2n-1) {
    width: 30%;
    float: left;
}

#regist dl dd.col3 *:nth-child(2n) {
    /* width: 5%; */
    float: left;
    padding-top: 0.9rem;
}

@media screen and (max-width: 768px) {
    #regist dl {
        margin: 16px 0;
    }
    #regist .top_service_matter_menu li {
        padding: 0;
    }
}
dt {
    position: relative;
    margin-top: 20px;
    text-align: left;
}

.col3.postcode {
    display: block;
}

.primary_color {
    color: var(--primary_color);
}

a.primary_color.text_login {
    font-size: var(--font_size_r);
}

.benefits {
    background-color: var(--basic_color);
    color: #ffffff;
    max-width: 450px;
    padding: 12px 30px 13px;
    margin: 40px auto 0;
}

#regist dl.company {
    margin-bottom: 25px;
}

#regist #kiyaku {
    color: #666666;
    font-size: 14px;
    line-height: 22px;
    height: 200px;
    padding: 20px;
    background: #f2f2f2;
    border-radius: 4px;
    overflow-y: scroll;
}

#regist .sticker01 {
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.0em;
    display: inline-block;
    padding: 3px;
    margin-left: 8px;
    background: #F41616;
}

#regist .lbl01 {
    margin: 13px 0;
    display: block;
}

#regist .lbl02 {
    margin: 13px 0;
    width: 50%;
}

#regist h2.line {
    margin-bottom: 10px;
    text-align: left;
}

#regist h3.ttl-in-box, #regist h3.ttl-in-box-mb-s, #regist h3.ttl-in-box-mini {
    font-size: 14px;
}

#regist h3.ttl-in-box {
    margin: 0 0 18px 0;
}

#regist h3.ttl-in-box-mb-s {
    margin: 0 0 4px;
}

#regist h3.ttl-in-box-mini {
    margin: 30px 0 10px 0;
}

#regist h3.ttl-in-box-mini:first-child {
    margin-top: 0;
}

#regist h3.ttl-in-box-mb-s .sticker01 {
    vertical-align: top;
}

#regist .box01 {
    margin-top: 0;
}

#regist .has-2col, #regist .has-4col {
    margin-bottom: 17px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#regist .inner-lang-ability {
    margin-bottom: 35px;
}

#regist .has-1col {
    margin: 0 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#regist .has-1col .lbl03 {
    margin-bottom: 20px;
    display: block;
}

#regist .has-2col .lbl02, #regist .has-4col .lbl02 {
    margin: 0 0 16px;
    line-height: 1.4em;
}

#regist .has-3col .lbl03 {
    margin-right: 0;
    margin-bottom: 5px;
    display: inline-block;
}

#regist .has-2col .lbl02.lbl-country-name {
    margin-left: 20px;
    font-size: 14px;
}

#regist input[type="text"].txt01 {
    margin-top: -10px;
    margin-bottom: 10px;
}

#regist input[type="text"].country-name {
    max-width: 200px;
}

#regist input[type="text"].period {
    margin: 0 4px;
    max-width: 120px;
}

#regist .row-income {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
}

#regist input[type="text"].income {
    margin-right: 10px;
    width: 91%;
    /*height: 60px; */
    font-size: 16px;
    text-align: right;
    vertical-align: baseline;
}

#regist input[type="text"].income + .yen {
    flex: none;
    color: #021F4B;
    font-size: 14px;
    font-weight: 500;
}

#regist .row-period {
    margin-bottom: 30px;
}

#regist .note-period {
    margin-bottom: 10px;
}

#regist .txt-period {
    font-size: 14px;
    vertical-align: bottom;
}

#regist .lang .lbl03 {
    margin-bottom: 12px;
}

#regist .txt-other-lang {
    max-width: 360px;
}

#regist .lbl04 {
    display: inline-block;
    width: 100px;
}

#regist .select01 {
    margin-bottom: 10px;
}

#regist .lang-score, #regist .lang-year {
    margin-right: 4px;
    width: 33%;
}

#regist .lbl-lang-year {
    margin-left: 17px;
}

#regist .txt-lang {
    vertical-align: bottom;
}

#regist .row01-sp {
    display: inline-block;
}

#regist .note-pr {
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
}

#regist .tarea01 {
    height: 300px;
}

#regist .tarea-moving {
    margin-top: 40px;
    height: 200px;
}

#regist .tbl-school {
    margin-bottom: 11px;
}

#regist .cell-h-confirm {
    padding-top: 24px;
    min-height: 60px;
}

#regist .cell-confirm {
    padding: 12px 11px 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    background-color: #F9F9F9;
    width: 750px;
}

#regist .box-confirm .row-btn-right {
    margin-top: -14px;
    padding-right: 11px;
    padding-bottom: 16px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#regist .btn-mod {
    margin-left: 20px;
    padding: 11px 17px;
    border: solid 1px #cccccc;
    border-radius: 4px;
    min-width: 100px;
    width: 100px;
    display: block;
    background-color: #FAFAFA;
    font-weight: 500;
    color: #021F4B;
    font-size: 16px;
    line-height: 1;
}

#regist .lbl-confirm {
    margin-top: 40px;
    display: block;
    padding: 19px 50px 18px 28px;
    border-bottom: 1px solid #C6CCD6;
    width: 100%;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    box-shadow: none;
    font-weight: 500;
    color: #021F4B;
    font-size: 16px;
    position: relative;
}

#regist .btn-registration {
    margin-top: 40px;
}

#regist .lbl-confirm::after {
    content: url(../img/btn-allow-navy.svg);
    transform: rotate(-180deg);
    display: block;
    position: absolute;
    top: 22px;
    right: 50px;
    transition: all 0.1s;
}

#regist .lbl-confirm.down-arrow {
    border-radius: 5px;
    box-shadow: 0px 3px 5px #00000026;
}

#regist .lbl-confirm.down-arrow::after {
    top: 17px;
    transform: rotate(0deg);
}

.box-confirm {
    margin-top: 0;
    border-radius: 0 0 5px 5px;
}

#regist .link01 {
    color: #021F4B;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    display: block;
    width: 100%;
    margin: 0 auto 10px;
    padding: 20px;
    background: #FAFAFA;
    border: 1px solid #AFAFAF;
    border-radius: 3px;
    position: relative;
}

#regist .link01:first-child {
    margin-top: 10px;
}

#regist .link01::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px;
    background: url(../img/btn-allow-navy-double.svg) no-repeat center center / 150% auto;
}

.other1 {
    text-align: center;
    color: #ff3333;
}

.pass {
    font-size: 12px;
}
.latest-sp-width {
    display: flex;
    align-items: center;
    width: 49%;
    background: var(--water_color);
}
.latest-sp-width > div {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .top_latest_area.top_latest_display {
        flex-wrap: wrap;
    }
    .latest-sp-width {
        width: 100%;
    }
    .latest-sp-width:last-child {
        margin-top: 16px;
    }
}
.latest-side-area {
    margin-top: 24px;
}
.latest-side-area .top_latest_content {
    padding: 5px 10px 20px;
}
.latest-side-area .top_latest_point,
.latest-side-area .btn_secondary {
    font-size: small;
}
.latest-side-area .top_latest_article {
    padding: 10px;
}
@media screen and (max-width: 768px) {
    .top_side_area .latest-side-area {
        display: none;
    }
}
.latest-side-mg {
    margin: 30px 0;
}
.top_latest_area.top_latest_display {
    display: none;
}
.top_latest_area {
    display: flex;
    justify-content: space-between;
}
.top_latest_side_noimage {
    display: none;
}
@media screen and (max-width: 1024px) {
    .top_latest_side_noimage {
        display: block;
    }
}
.top_latest_title {
    background: #000;
    padding: 5px 0;
}
.top_latest_title > p {
    color: #fff;
    text-align:center;
}
.top_latest_content {
    background: var(--water_color);
    padding: 5px 20px 20px;
}
.top_latest_content.top_latest_content_noasset {
    padding: 10px 20px 10px;
}
.top_latest_point {
    color: var(--accent_color);
    padding: 5px 0;
    text-align:center;
}
.top_latest_main {
    background: var(--water_color);
}
.top_latest_main.top_latest_main_noasset {
    /*width: 63.5%;*/
    max-width: 300px;
    margin: 0 auto;
}
.top_latest_main.top_latest_main_noasset a,
.top_latest_main.top_latest_main_noasset a img {
        display: block;
}
.latest-quiz-contents {
    width: 100%;
}
.top_latest_article {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
}
.top_latest_button_area {
    margin-top: 20px;
}
.top_latest_button_secondary {
    padding: 16px 10px;
}
@media screen and (max-width: 1024px) {
    .top_latest_button_secondary {
        padding: 16px 32px;
    }
}
.top_latest_button_area > a {
    margin: 5px auto;
}
.top_latest_other {
    margin-top: 5px;
}
.top_latest_other_text {
    position: relative;
    text-align: right;
    padding: 2px 15px 0 0;
    font-size:small;
}
.top_latest_other_text:before {
    content: "";
    width: 9px;
    height: 22px;
    background: #000;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -16px;
}
.top_latest_area_component.award {
    margin-top: 30px;
}
@media screen and (max-width: 768px) {
    .box.bg {
        overflow: hidden;
        position: relative;
        padding: 20px 15px;
    }

    .checkbox00, .checkbox01, .checkbox02 {
        padding: 9px 30px;
        width: 70%;
        min-width: 220px;
        height: 45px;
        margin: 20px auto;
    }

    .checkbox00 span::before, .checkbox01 span::before, .checkbox02 span::before {
        /* right: 10px;
        top: 15px; */
    }

    /* .checkbox00::before, .checkbox01::before,  */
    .checkbox02::before {
        right: 21px;
        top: 10px;
    }
.checkbox02:after{
        top: 19px;
        right: 12px;
    }
    input[type=checkbox]:checked + .checkbox00::after, input[type=checkbox]:checked + .checkbox01::after, input[type=checkbox]:checked + .checkbox02::after {
        right: 17px;
        top: 13px;
    }

    .service_contents .select_area {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .service_contents .category_top_sort-record {
        display: inline-block;
    }

    .service_contents .cp_ipselect {
        width: 40%;
        margin: 0 0 auto;
    }

    .checkbox00 span, input[type=checkbox]:checked + .checkbox00 span {
        padding: 12px 36px;
        color: #fff;
        background-position: 10px 12px;
    }

    .bookmark01 {
        padding: 4px 8px;
        height: 28px;
        float: right;
    }

    input[type=checkbox]:checked + .bookmark01 {
        padding: 2px 4px;
    }

    .bookmark01::before {
        top: 5px;
    }

    .seminar_bookmark01 {
        width: 100%;
        height: 40px;
    }

    .seminar_bookmark01::before {
        top: 11px;
        right: 17px;
    }

    input[type=checkbox]:checked + .seminar_bookmark01::after {
        top: 11px;
        right: 17px;
    }

    .checkbox00 span, input[type=checkbox]:checked + .checkbox00 span {
        padding: 12px 36px;
    }

    .cp_ipselect {
        width: 35%;
    }

    input[type="radio"]:checked + label:after {
        top: 13px;
        left: 23px;
        width: 12px;
        height: 12px;
    }

    .bg_gray {
        padding: 30px 0 0;
    }

    .radio_area label {
        position: relative;
        width: 94%;
    }
}

/***********************************
** タグ
***********************************/
.tag, .tag_pr {
    padding: 2px 10px;
    margin: 3px;
    border-radius: 15px;
    color: var(--primary_color);
    border: solid 1px var(--primary_color);
    display: inline-block;
    font-size: var(--font_size_xs);
    line-height: 1.2em;
    text-align: center;
    font-weight: 500;
}
/*
.tag:before {
    content: "#";
    display: inline-block;
}
*/
.tag_pr {
    color: #ccc;
    border: solid 1px #ccc;
}
/***********************************
** ダウンロードリスト
***********************************/
#dl_list {
    color: #ffffff;
    font-size: var(--font_size_m);
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    padding: 16px 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    box-sizing: border-box;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
#dl_list .category_top_list {
    width: 480px;
    margin: 0 30px;
    overflow: inherit;
}
#dl_list .category_top_list ul {
    background: #ffffff;
}
#dl_list .category_top_list ul .slick-list {
    overflow: hidden;
}
#dl_list .category_top_list ul .next-arrow {
    width: 26px;
    height: 40px!important;
    top: 50%!important;
    right: -26px;
    margin-top: -20px;
    bottom: auto;
    background: #000000;
    opacity: 1;
    border-radius: 0 20px 20px 0;
}
#dl_list .category_top_list ul .next-arrow:after {
    right: 10px;
}
#dl_list .category_top_list ul .prev-arrow {
    width: 26px;
    height: 40px!important;
    top: 50%!important;
    left: -26px;
    margin-top: -20px;
    bottom: auto;
    background: #000000;
    opacity: 1;
    border-radius: 20px 0 0 20px;
}
#dl_list .category_top_list ul .prev-arrow:after {
    left: 10px;
}
#dl_list .category_top_list ul .slide-arrow.movie:after {
    border-top: solid 3px #ffffff;
    border-right: solid 3px #ffffff;
    width: 10px;
    height: 10px;
}
#dl_list .category_top_list li {
    padding: 8px 4px;
}
#dl_list a.btn_primary {
    font-size: var(--font_size_r);
    text-align: center;
    margin: 0 0 0 8px;
    display: block;
    width: auto;
    min-width: 200px;
    height: auto;
    padding: 12px 24px 12px 8px;
}
#dl_list a.btn_primary:before {
    top: 50%;
    right: 10px;
    margin-top: -16px;
}
#dl_list a.btn_primary span {
    color: var(--accent_color);
    font-size: var(--font_size_r);
    background: #ffffff;
    padding: 0 8px;
    display: inline-block;
    margin-bottom: 4px;
}
#dl_list .category_top_list li span {
    position: relative;
    overflow: inherit;
    box-sizing: border-box;
}
#dl_list .category_top_list li span img {
    font-size: 4px;
    border-radius: 20%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    width: 40px;
    height: 40px;
}
#dl_list .category_top_list li span i {
    font-size: var(--font_size_m);
    line-height: 16px;
    text-align: center;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 24px;
    background: var(--basic_color_light);
    cursor: pointer;
}
#dl_list .category_top_list li span i:before {
    content: "×";
}
@media screen and (max-width: 1023px) {
    #dl_list .category_top_list {
        width: 360px;
    }
}
@media screen and (max-width: 768px) {
    #dl_list {
        padding: 8px;
        /* bottom: calc(52px + env(safe-area-inset-bottom, 0))!important; */
        bottom: 38px;
    }
    #dl_list .category_top_list {
        width: 260px;
    }
    #dl_list a.btn_primary {
        min-width: 140px;
    }
}
@media screen and (max-width: 479px) {
    #dl_list .category_top_list {
        width: 160px;
    }
    #dl_list a.btn_primary {
        width: 35%;
        margin-top: 0;
        margin-left: 8px;
        padding: 8px 24px 8px 8px;
    }
    #dl_list a.btn_primary span {
        margin-right: 4px;
    }
}
@media screen and (max-width: 379px) {
    #dl_list .category_top_list {
        width: 120px;
    }
    #dl_list a.btn_primary {
        min-width: 130px;
        padding-right: 12px;
    }
    #dl_list a.btn_primary:before {
        right: 5px;
    }

}
/*
#dl_list br {
    display: none;
}
#dl_list span {
    color: var(--dark_color);
    background: #ffffff;
    padding: 4px;
    margin-right: 8px;
}
#dl_list b {
    color: var(--accent_color);
    font-size: var(--font_size_xl);
    display: inline-block;
    margin-right: 4px;
    position: relative;
    bottom: -2px;
}
#dl_list .btn_primary {
    font-size: var(--font_size_r);
    line-height: 45px;
    width: 180px;
    height: auto;
    display: inline-block;
    margin: 0 0 0 16px;
    vertical-align: middle;
}
@media screen and (max-width: 768px) {
    #dl_list {
        font-size: var(--font_size_r);
        line-height: 1.8em;
    }
    #dl_list b {
        font-size: var(--font_size_l);
    }
    #dl_list .btn_primary {
        display: block;
        width: 240px;
        margin: 8px auto 0;
    }
}
@media screen and (max-width: 480px) {
    #dl_list br {
        display: inline;
    }
}*/
/***********************************
** ヘッダー
***********************************/
header {
    box-shadow: var(--box_shadow);
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
}

.header_inner {
    max-width: 1300px;
    width: calc(100% - 20px);
/*    height: 100px;*/
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}

.herder_logo {
    width: 300px;
    margin-right: 10px;
}

.herder_catch {
    color: #10497D;
    display: inline-block;
    font-weight: bold;
    vertical-align: top;
    line-height: 1.5;
}

.header_left {
    display: grid;
    place-items: center;
    padding: 24px 0;
}

.header_left a {
    display: flex;
    align-items: center;
}

.header_left a img {
    display: block;
}

.header_left.tab {
    width: 20%;
    display: flex;
}

.header_left_image {
    width: 70px;
    margin-right: 22px;
}

.header_center {
    max-width: 340px;
    display: flex;
    align-items: center;
    flex: 1;
}

.header_center.tab {
    width: 25%;
    margin-left: 30px;
}

.header_right {
    display: grid;
    place-items: center;
}

.header_right nav ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header_right nav li {
    width: 70px;
    text-align: center;
    font-size: var(--font_size_s);
    font-weight: bold;
    position: relative;
}

.header_right nav li a {
    display: block;
    padding: 16px 0;
    position: relative;
}

.header_right nav li a i {
    color: #ffffff;
    font-size: 8px;
    line-height: 1.0em;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 20px;
    position: absolute;
    top: 16px;
    right: 8px;
    background: var(--accent_color);
}

.header_right nav li.active:after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--primary_color);
}
/*
.header_right nav li:nth-child(6) {
    width: 100px;
}
*/
.header_right nav li img {
    width: 30px;
    display: block;
    margin: 8px auto;
}
.header_right nav .header_contents_login{
    margin-left: 5px;
    width: 75px;
}
.header_right nav .header_contents_login img{
    width: 26px;
}
.header_right nav .header_contents_login a{
    background: #004986;
    color: #fff;
    padding: 3px 0;
}
.header_right nav .header_contents_regist{
    margin-left: 0;
    width: 130px;
}
.header_right nav .header_contents_regist a{
    margin: 0 !important;
    background: none;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    background: #fe0000;
}
.header_right nav .header_contents_regist a .white_band{
    background: #fff;
    color: #fe0000;
    width: 80%;
    margin-top: 3px;
}
.header_right nav .header_contents_mypage{
    width: 85px;
}
.header_right nav .header_contents_mypage img{
    width: 22px;
}
.header_right nav .header_contents_login.active:after{
    background: none;
}
.header_right.tab.search {
    width: 48%;
    display: block;
}

.header_right.tab {
    width: 70%;
    display: block;
}

.header_inner a.txt_link {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    text-decoration: underline;
}

.point_notice2 {
    width: 100%;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
    text-align: center;
}

.point_notice2 > a {
    font-size: 2.0rem;
    /*line-height: 50px;*/
    display: flex;
    justify-content: center;
    background: var(--light_color);
    border-radius: 50px;
    color: var(--accent_color);
    font-weight: bold;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 10px;
}
.point_notice2 > a img {
    width: 26px;
    margin-right: 8px;
}
.point_notice2 > a b {
    color: var(--accent_color);
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 50px;
    overflow: hidden;
    vertical-align: baseline;
}

.point_notice2 .point_notice_head {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 20px;
    background: var(--accent_color);
    border-radius: 10px;
    font-size: var(--font_size_xs);
    position: absolute;
    left: 10px;
    top: -10px;
    padding: 0 8px;
    z-index: 20;
}

.point_notice2 > a .material-icons {
    color: #ffffff;
    line-height: 50px;
    height: 100%;
    text-align: center;
    background: var(--primary_color);
    border-radius: 50px 0 0 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.point_notice_body_info {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    display: block;
    z-index: +1;

    padding: 2% 0 0;
    border-bottom: 2px solid var(--primary_color);
    display: inline-block;
}

.point_notice_body_info a {
    line-height: 1.5em;
    display: inline;
    padding: 0;
}

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

    .top_latest_area.top_latest_display {
        display: flex;
        align-items: stretch;
        margin: 24px 0;
    }

    .point_notice2 > a {
        font-size: 1rem;
        /*line-height: 36px;*/
    }

    .point_notice2 > a img {
        width: 16px;
        margin-right: 4px;
    }

    .point_notice2 a b {
        font-size:1.6rem;
        line-height: 36px;
    }

    .point_notice2 .point_notice_head {
        font-size: 1.2rem;
        line-height: 16px;
        left: 5px;
        top: -5px;
        padding: 0 8px;
    }

    .point_notice2 a .material-icons {
        line-height: 36px;
        width: 36px;
    }

    .point_notice_body_info {
        top: 40px;
        font-size: 1rem;
        padding: 1% 0 0;
    }
    .top_spbanner_display {
        text-align: center;
    }
    .top_spbanner_display img {
        max-width: 300px;
    }

}
@media screen and (max-width: 1024px) {
    .header_right nav li.active:after {
        content: none;
    }
}
/*
.point_notice {
    display: flex;
    width: 100%;
    height: 50px;
    position: relative;
}

.point_notice_head {
    width: 46px;
    height: 48px;
    color: #fff;
    background: var(--primary_color);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    border-radius: 50% 0 0 50%;
    position: relative;
}

.point_notice_head::before {
    background: var(--accent_color);
    border-radius: 10px;
    content: "2000";
    font-size: var(--font_size_xs);
    position: absolute;
    left: 0;
    top: -5px;
    padding: 0 5px;
}

.point_notice_head span {
    display: block;
    transform: skewX(-10deg);
    margin: 12px 0 0 5px;
    color: #fff;
}

.point_notice_body {
    background: var(--light_color);
    border-radius: 0 50px 50px 0;
    color: var(--accent_color);
    display: inline-flex;
    font-weight: bold;
    flex: 1;
    place-items: center;
    position: relative;
}

.point_notice_body span {
    font-size: var(--font_size_xs);
    display: inline-block;
    transform: skewX(-5deg);
    margin-left: 5px;
    font-size: var();
}

.point_notice_body .size {
    font-size: var(--font_size_m);
}

.point_notice_body_info {
    position: absolute;
    background: var(--primary_color);
    color: #fff;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 160%;
    line-height: 1.5;
    padding: 5px 10px;
    z-index: +1;
    width: 150px;
}

.point_notice_body_info p {
    font-size: 0.8rem;
}

.point_notice_body_info p::before {
    background: var(--primary_color);
    content: "";
    left: 50%;
    top: -4px;
    transform: translate(-50%, -50%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    width: 11px;
    height: 11px;
}

.point_notice_body_info p::after {
    content: "\e14c";
    font-family: 'Material Icons';
    right: 4px;
    top: 2px;
    position: absolute;
}

.point_notice.tab {
    display: block;
}
*/
.header_nav_keyword .search_container input[type="text"] {
    width: 50%;
}

form.search_container.tab {
    display: flex;
}

.keyword_button.tab {
    margin-top: 5px;
    margin-left: 5px;
}

.header_nav_position{
    display: none;
    position: absolute;
    padding-right: 40px;
    background: var(--water_color);
    top: 100px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}
.header_nav_position .close{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999999;
    cursor: pointer;
}
.header_nav_position .close:before,
.header_nav_position .close:after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    background: var(--primary_color);
    transform: rotate(45deg);
}
.header_nav_position .close:after{
    transform: rotate(135deg);
}

.header_nav_absolute {
    position: relative;
    z-index: 10000;
    width: 100%;
}

.header_nav_bg {
    background: var(--water_color);
}

.header_nav_content {
    width: calc( 100% - 40px );
    max-width: 1300px;
    margin: auto;
    display: flex;
    padding: 20px 0;
}

.header_nav_flex {
    display: flex;
    align-items: center;
}

.header_nav_image {
    width: 40px;
    margin-right: 25px;
}

.header_nav_image img{
    height: 50px;
    width: auto;
    display: block;
}

form.search_container.header_nav_flex > input[type="text"] {
    margin: 0;
}

form.search_container.header_nav_flex > .keyword_button {
    margin-top: 3px;
}

.header_nav_title {
    color: var(--primary_color);
}

.header_nav_title p:first-child {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.header_nav_text {
    margin-left: 80px;
}

.header_nav_text div, .header_nav_mypage_image a {
    font-weight: bold;
    display: block;
}

.header_nav_text div {
    margin-right: 60px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--primary_color);
}

.header_nav_text div:last-child {
    margin-right: 0;
}

.header_nav_text div.header_nav_jing {
    background: var(--primary_color);
    padding-bottom: 0;
    padding: 10px 15px;
    text-align: center;
}

.header_nav_text div.new{
    position: relative;
}
.header_nav_text div.new::before{
    position: absolute;
    content: "NEW";
    background: var(--accent_color);
    color: #fff;
    font-size: var(--font_size_xs);
    letter-spacing: 0.05em;
    width: 35px;
    height: 18px;
    top: -10px;
    left: -5px;
}

.header_nav_text div.header_nav_jing {
    color: #ffffff;
}

.header_nav_keyword {
    margin-left: 30px;
}

.header_nav_keyword_button {
    margin-top: -8px;
    margin-left: 5px;
}

.header_nav_keyword .search_container input[type="text"] {
    width: 320px;
}

.header_nav_mypage_image {
    margin-right: 20px;
}

.header_nav_mypage {
    display: flex;
}

.header_nav_mypage_content > div {
    margin-left: 60px;
}

.header_nav_mypage_content > div:nth-child(1) {
    margin-left: 15px;
}

.header_nav_mypage_image a {
    padding-bottom: 10px;
}

.border_active:after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: var(--primary_color);
    z-index: 99999;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ======= WTC_DEV-9930 年末年始休暇のお知らせ ======= */
.header_notice details {
    background: #FFF6D2;
    margin: 0 auto;
}
.header_notice summary {
    cursor: pointer;
    padding: 10px 20px;
    color: #B19529;
    font-weight: bold;
    font-size: 1.4rem;
    margin: 0 auto;
    max-width: 1280px;
}
.header_notice .notice {
    overflow: hidden;
    margin: 0 auto;
    max-width: 1280px;
}
.header_notice .notice p {
    padding: 0 20px 10px;
    line-height: 1.5em;
    font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
    .header_notice details {
      width: 100%;
    }
    .point_notice_body_info {
      font-size: .6rem;
    }
}

@media screen and (max-width: 1335px) {
    .header_nav_keyword .search_container input[type="text"] {
        width: 100%;
    }

    .header_nav_text {
        margin-left: 60px;
    }
}

@media screen and (max-width: 1150px) {
/* ↑グロナビに「オフィス」が追加されたため、
小さめの表示にするブレイクポイントを1024から1150に変更 */

    .herder_logo {
        width: 100px;
    }

    .herder_catch {
        font-size: var(--font_size_xs);
    }

    .header_center {
        width: 24%;
    }

    .header_right nav li {
        width: 70px;
        font-size: 14px;
    }

    .header_right nav li:nth-child(5) {
        display: none;
    }

    .header_right nav li img {
        width: 25px;
    }

    .border_active {
        padding-bottom: 23px;
        margin-top: 24px;
        border-bottom: 5px solid var(--primary_color);
        z-index: 99999;
    }

    .header_nav_image {
        width: 50px;
        margin-right: 10px;
    }

    .header_nav_keyword .keyword_button::before {
        top: 5px;
        left: 1px;
        transform: scale(0.8);
    }

    .header_nav_title {
        font-size: 9px;
    }

    .header_nav_keyword {
        margin-left: 10px;
    }

    .header_nav_text_search {
        font-size: 10px;
    }

    .header_nav_text div {
        margin-right: 15px;
    }

    .header_nav_mypage_image:last-child {
        flex: 1;
    }

    .header_nav_text div, .header_nav_mypage_image a {
        /*font-size:0.8rem;*/
        padding: 20px 0;
    }

    .header_nav_text_search div {
        margin-right: 20px;
    }

    .header_nav_keyword .search_container input[type="text"] {
        width: 100%;
    }

    .header_nav_text_search {
        margin-left: 30px;
    }

    .header_nav_mypage_content > div {
        margin-left: 30px;
    }

    .header_nav_mypage_content > div:nth-child(1) {
        margin-left: 0;
    }

    .header_nav_mypage_image {
        margin-right: 0;
    }

    .header_nav_mypage_image img {
        padding-top: 5px;
        width: 60%;
    }

    .header_contents_menu li.career {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .header_right nav li:nth-child(-n+3) {
        width: 45px;
    }
}
@media screen and (max-width: 768px) {

    .header_left {
        padding: 0;
    }

    .herder_catch {
        font-size: 1.0rem;
    }

    .header_right {
        display: grid;
        place-items: flex-end;
    }

    .header_right nav ul {
        margin: 0;
    }

    .header_right nav li:nth-child(5) a,
    .header_contents_login > a > span {
        display: inline;
        font-size: 9px;
        white-space: nowrap;
    }

    header .header_inner {
        height: 70px;
    }

    .header_right {
        align-items: center;
        justify-content: center;
    }

    .header_right nav li:nth-child(6).border_active {
        padding-bottom: 0;
        margin-top: 0;
        border: none;
    }
/*
    .header_right li:nth-of-type(1),.header_right li:nth-of-type(2),.header_right li:nth-of-type(3),.header_right li:nth-of-type(4),.header_right li:nth-of-type(5),.header_right li:nth-of-type(6) {
        display: none;
    }
*/
    .header_right li {
        display: none;
    }

    .header_right nav li:nth-child(5),
    .header_right li.header_contents_login {
        display: block;
    }
    .header_right li.header_contents_login {
        margin: 0 0 0 10px;
        width: 54px;
    }
    .header_right li.header_contents_login a{
        padding: 5px 0 2px;
    }
    .header_right li.header_contents_login img{
        width: 18px;
    }
    .header_right li.header_contents_regist{
        margin: 0;
        width: 68px;
    }
    .header_right li.header_contents_regist a{
        padding: 8.2px 0;
    }
    .header_right li.header_contents_regist a .white_band{
        display: block;
        margin: 3px auto 0;
        width: 70%;
    }

    .header_right nav li {
        width: auto;
    }

    .header_right nav li:nth-child(6) {
        width: 100%;
    }

    .header_right nav li a {
        padding: 0;
    }

    .header_right nav li a:hover {
        opacity: 1;
    }

    .header_right nav li img {
        width: 20px;
        margin: 0 auto;
    }

    .header_center {
        width: 50%;
    }

    .material-icons {
        font-size: 18px;
    }

    .herder_logo {
        width: 75px;
        margin-right: 0;
    }

    .header_nav_position {
        display: none;
    }

    .header_nav_flex {
        display: flex;
        align-items: center;
        flex-flow: wrap;
        width: 100%;
        padding: 0;
    }

    .header_nav_mypage {
        height: auto;
        padding: 0;
    }

    .header_nav_mypage_content {
        padding: 0;
    }

    .header_nav_mypage_content > div:nth-child(1), .header_nav_mypage_content > div {
        margin: 0;
    }

    .header_nav_mypage_content > div:not(:last-child) {
        border-bottom: 1px solid #ffffff;
    }

    .border_active:after{
        display: none;
    }
    .point_notice2{
        padding: 0 10px;
    }

}
@media screen and (max-width: 768px) {/* スマホ閲覧時に「もらえる！」をヘッダーでプルダウン表示 */
    .sp_pulldown .header_nav_content {
        display: block;
        padding: 0;
    }
    .sp_pulldown .header_nav_flex {
        display: block;
    }
    .sp_pulldown .header_nav_image,
    .sp_pulldown .header_nav_title {
        display: none;
    }
    .sp_pulldown .header_nav_text {
        display: block;
        margin-left: 0;
    }
    .sp_pulldown .header_nav_text div {
        margin-right: 0;
        border-bottom: none;
        padding: 0;
    }
    .sp_pulldown .header_nav_text div a {
        display: block;
        padding: 20px 0;
    }
    .sp_pulldown .header_nav_text div:nth-child(n+2) {
        border-top: 1px solid #fff;
    }
}
@media screen and (max-width: 480px) {

    .herder_catch {
        display: none;
    }

}

/***********************************
** SP　ボトムナビ
***********************************/
.sp_tab.top_buttom_nav_tab nav {
    display: none;
}

@media screen and (max-width: 768px) {
    .top_bottom_nav {
        width: 100%;
        position: fixed;
        background: var(--light_color);
        bottom: 0;
        left: 0;
        z-index: 99999;
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(0 + env(safe-area-inset-bottom));
    }

    .top_bottom_nav ul {
        display: flex;
    }

    .top_bottom_nav li {
        width: 20%;
        font-size: 11px;
        text-align: center;
    }

    .top_bottom_nav li img {
        display: block;
        width: auto;
        height: 25px;
        margin: 0 auto 4px;
    }

    .top_bottom_nav li a {
        display: block;
        padding: 8px 0;
        position: relative;
    }

    .top_bottom_nav li a:hover {
        opacity: 1;
    }

    .top_bottom_nav li a.active:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--primary_color);
    }

    .top_bottom_nav li a p {
        font-size: 1.2rem;
        line-height: 1.0em;
    }

    .sp_tab.top_buttom_nav_tab {
        position: fixed;
        width: 100%;
        bottom: 57px;
        left: 0;
        z-index: 99999;
        background: var(--water_color);
    }

    .sp_tab.top_buttom_nav_tab nav ul {
        display: flex;
        text-align: center;
        align-items: center;
        border-top: 1px solid #ffffff;
    }

    .sp_tab.top_buttom_nav_tab nav ul li {
        flex: 1;
        border-right: 1px solid #ffffff;
        padding: 0 8px;
    }

    .sp_tab.top_buttom_nav_tab nav ul li a {
        font-size: var(--font_size_s);
        /*font-size: 12px;*/
        line-height: 1.2em;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: center;
    }/*
    .sp_tab.top_buttom_nav_tab nav ul li a i {
        display: inline-block;
    }*/

    .sp_tab.top_buttom_nav_tab nav ul li.jing {
        background: var(--primary_color);
    }

    .sp_tab.top_buttom_nav_tab nav ul li.jing a {
        color: #ffffff;
    }

    .sp_tab.top_buttom_nav_tab nav ul.sp_search {
        display: block;
    }

    .sp_tab.top_buttom_nav_tab nav ul.sp_search li {
        width: 100%;
        height: 120px;
        border-right: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sp_tab.top_buttom_nav_tab nav ul.sp_search li form {
        width: 60%;
        min-width: 260px;
        margin: 0;
        align-items: center;
    }

    .sp_tab.top_buttom_nav_tab nav ul.sp_search li form input,
    .sp_tab.top_buttom_nav_tab nav ul.sp_search li form button {
        margin: 0 4px;
    }

    .sp_tab.top_buttom_nav_tab nav ul.top_buttom_list_col3 li {
        width: 33.3%;
    }
    .sp_tab.top_buttom_nav_tab nav ul.top_buttom_list_col3 li.new{
        position: relative;
    }
    .sp_tab.top_buttom_nav_tab nav ul.top_buttom_list_col3 li.new::before{
        position: absolute;
        content: "NEW";
        background: var(--accent_color);
        color: #fff;
        font-size: 11px;
        letter-spacing: 0.05em;
        width: 33px;
        height: 15px;
        top: 0;
        left: 0;
    }

    .sp_tab.top_buttom_nav_tab nav ul.top_buttom_list_col2 li {
        width: 50%;
    }

    .sp_tab.top_buttom_nav_tab nav {
        display: none;
    }

    .sp_tab.top_buttom_nav_tab {
        display: block;
    }
}


.top_bottom_list li a i {
    color: #ffffff;
    font-size: 8px;
    line-height: 1.0em;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 20px;
    position: absolute;
    top: -2px;
    right: 10%;
    background: var(--accent_color);
}

@media screen and (max-width: 480px) {
    .top_bottom_nav {
        box-sizing: border-box;
    }

    .sp_tab.top_buttom_nav_tab {
        bottom: 52px;
    }

    .top_bottom_list li {
        padding: 0;
        height: auto;
    }

    .top_bottom_list li a {
        display: block;
    }

    .top_bottom_list li a img {
        height: 20px;
    }

    .top_bottom_nav #home {
        display: none;
    }

}


@media screen and (max-width: 480px) {
    .top_bottom_nav {
        box-sizing: border-box;
    }

    .sp_tab.top_buttom_nav_tab {
        bottom: 52px;
    }

    .top_bottom_list li {
        padding: 0;
        height: auto;
    }

    .top_bottom_list li a {
        display: block;
    }

    .top_bottom_list li a img {
        height: 20px;
    }

}

i.target {
    position: relative;
    top: -60px;
    display: none;
}
@media screen and (max-width: 768px) {
    i.target {
        display: block;
    }
}

/***********************************
** ページネーション
***********************************/
/*
#detail-contents-pager {
    bottom: 2em;
    padding: 0 0 1em 0;
    position: relative;
}
*/
.paginationjs-pages>ul>li>a {
    padding: .25em .75em;
    color: rgb(20, 20, 21);
    background-color: rgb(229, 229, 229);
    /* border: 1px solid darkcyan; */
}

li.paginationjs-prev.J-paginationjs-previous>a, li.paginationjs-next.J-paginationjs-next>a {
    color: rgb(26, 13, 171);
    background-color: rgba(229, 229, 229, 0);
}

.paginationjs-pages>ul>li>a:hover {
    color: black;
    background-color: white;
}

.paginationjs-pages>ul>li.active>a {
    color: black;
    background-color: white;
}

.paginationjs-pages>ul>li.disabled>a {
    color: black;
    background-color: white;
}

.paginationjs-prev {
    margin: 0 .375em 0 0;
}

.paginationjs-next {
    margin: 0 0 0 .375em;
}

.paginationjs-page {
    margin: 0 .25em;
}

.paginationjs-pages>ul {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin: 40px 0;
}

.paginationjs-pages>ul>li.paginationjs-ellipsis.disabled>a {
    border: none;
    color: black;
    margin: 0 .25em;
    padding: 0;
}
/*
span.page-found {
    font-size: 1.125rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-weight: 700;
}
span.page-count {
    font-size: 1.0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-weight: 600;
}
*/
@media screen and (max-width: 768px) {
    .paginationjs-pages>ul {
        margin: 20px 0;
    }
}
@media screen and (max-width: 480px) {
    #detail-contents-pager>div>div {
        margin-left: .5em;
        margin-bottom: 2.5em;
    }

    .paginationjs-pages>ul>li>a {
        padding: .175em .375em;
        color: rgb(20, 20, 21);
        background-color: rgb(229, 229, 229);
        /* border: 1px solid darkcyan; */
    }
}
/***********************************
** TOP FV
***********************************/

#fv_wrap {
    margin: 20px auto 0;
}

#fv_wrap .top_title img {
    width: auto;
}

#fv_wrap .top_title {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#fv_wrap .top_lead {
    font-size: small;
    padding: 2px 0 2px 10px;
    border-left: solid 2px var(--basic_color);
}

/* サイトジャック広告用
#fv_wrap .top_title img {
    width: 67%;
}
#fv_wrap .top_lead {
    font-size: 12px;
    padding: 5px 0 5px 15px;
    border-left: solid 2px var(--basic_color);
    letter-spacing: 0;
}*/
/* ここまで */

#fv_wrap .fv_content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

#fv_wrap .left {
    width: 580px;
    overflow: hidden;
}

#fv_wrap .company_logo img {
    width: 65px;
}

#fv_wrap .fv_service {
    background: var(--basic_color);
    margin: 10px 0 0 15px;
    padding: 5px 10px;
}

#fv_wrap .fv_service {
    color: #fff;
    font-size: small;
    font-weight: bold;
}

.fv_manegytv {
    background: var(--primary_color);
    margin: 10px 0 0 15px;
    padding: 8px;
    text-align: center;
    position: relative;
}

.fv_manegytv > img {
    width: 293px;
    display: block;
    margin: 0 auto;
}

.fv_manegytv .youtube {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
/*
.fv_manegytv .youtube:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    background: url(../img/common/fv_manegytv_play.svg) no-repeat center center / 100% auto;
}
*/
.fv_manegytv .youtube a {
    display: block;
    max-width: 200px;
    margin: 8px auto 0;
}
.fv_manegytv .youtube a img {
    display: block;
}
.fv_manegytv .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#fv_wrap .keyword_form.service_search {
    margin-top: 0;
}

#fv_wrap .search_container.service_search input[type="text"] {
    width: 85%;
}

#fv_wrap .search_container input[type="text"] {
    display: inline-block;
    border: 1px solid var(--light_color2);
    padding: 3px 10px;
    border-radius: 3px;
    height: 30px;
    width: 85%;
    overflow: hidden;
    font-size: 16px;
    margin: 5px 0;
}

#fv_wrap .search_container input[type="text"]:focus {
    outline: 0;
    height: 30px;
}

#fv_wrap .keyword_button {
    position: relative;
    background: var(--primary_color);
    cursor: pointer;
    border: solid 1px var(--primary_color);
    border-radius: 3px;
    color: #fff;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

#fv_wrap .keyword_button::before {
    content: url("../img/common/fv_keyword_search.png");
    position: absolute;
    top: 5px;
    left: 5px;
}

#fv_wrap .keyword {
    margin: 0 auto;
    text-align: left;
}

.modaal-inner-wrapper {
    display: flex!important;
    align-items: center;
    justify-content: center;
}
.modaal-video-wrap {
    width: 70%;
    margin: 0;
}

@media screen and (max-width: 1300px) {
    #fv_wrap .top_title img {
        max-width: 70%;
    }
    #fv_wrap .left {
        width: 55%;
    }
}

@media screen and (max-width: 768px) {
    .fv_manegytv {
        margin: 10px auto 15px;
        padding: 10px 0;
    }
    .fv_manegytv .youtube a {
        max-width: 600px;
        width: 90%;
    }
}

.top_side_point {
    background: var(--light_color);
    margin-top: 20px;
    padding-bottom: 2rem;
}
.top_side_point .title img {
    vertical-align: bottom;
}
.top_side_point .sentence {
    margin-top: 1rem;
    padding-inline: 20px;
    font-size: 1.2rem;
    font-weight: 600;

    span {
        color: #f20909;
    }
    @media screen and (max-width: 768px) {
        font-size: 1.3rem;
    }
}
.top_side_point .btn_primary {
    color: #fff;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    display: block;
    padding: 16px 32px;
    margin: 15px auto 0;
    position: relative;
    box-sizing: border-box;
    width: 85%;
    max-width: 350px;
    font-size: 14px;
    /*
    height: 45px;
    display: grid;
    place-items: center;
    line-height: 3.6rem;
    */
}
.top_side_point .benefit {
    width: max-content;
    margin: 1.6rem auto 0;
    border: 1px solid #004986;
    border-radius: 100vw;
    padding: 3px 25px 3px 15px;
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    background: #fff;
    color: #004986;
    cursor: pointer;
    transition: all 0.3s ease 0s;

    &:hover {
        opacity: 0.6;
    }
    &::after {
        width: 5px;
        height: 5px;
        margin-block: auto;
        border-right: 1.5px solid #004986;
        border-top: 1.5px solid #004986;
        position: absolute;
        top: 0;
        right: 16px;
        bottom: 0;
        transform: rotate(45deg);
        content: ""
    }
}
.point_popup {
    display: none;

    &.active {
        display: block;
    }
    .popupContents {
        width: min(95vw, 750px);
        height: max-content;
        margin: auto;
        padding: 50px;
        border-radius: 5px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        box-sizing: border-box;
        z-index: 100001;

        .sentence {
            margin-top: 1.5rem;
            font-weight: 600;

            span {
                color: #f20909;
            }
        }
        .btn_primary {
            margin-bottom: 0;
        }
        i {
            width: 48px;
            height: 48px;
            border: 2px solid #fff;
            border-radius: 50%;
            position: absolute;
            top: -26px;
            right: -26px;
            background: #111;
            cursor: pointer;
    
            &::before,
            &::after {
                width: 2px;
                height: 24px;
                position: absolute;
                top: 12px;
                left: 23px;
                background: #fff;
                content: "";
            }
            &::before {
                transform: rotate(45deg);
            }
            &::after {
                transform: rotate(135deg);
            }
        }    
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .8);
        z-index: 100000;
    
        &.active {
            display: block;
        }
    }
}
html, body {
    &:has(.point_popup.active) {
        overflow: hidden;
    }
}
@media screen and (max-width: 768px) {
    .point_popup {
        .popupContents {
            width: min(calc(100% - 30px), 400px);
            padding: 20px;

            .sentence {
                font-size: 1.4rem;
            }
            i {
                width: 29px;
                height: 29px;
                border-width: 1px;
                top: auto;
                right: 0;
                bottom: -44px;
        
                &::before,
                &::after {
                    width: 1px;
                    height: 15px;
                    top: 7px;
                    left: 14px;
                }
            }    
        }
    }
}
.top_news_title {
    margin: 0 auto 10px;
    padding: 0 0 5px 35px;
    border-bottom: solid 2px var(--light_color);
}

.top_news_title p {
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

.top_news_title p:before {
    content: url("../img/common/top_news_icon.png");
    position: absolute;
    top: 3px;
    left: -35px;
}

.top_news_title p span {
    font-size: small;
    font-weight: normal;
    margin-left: 15px;
    letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
    .top_news_title p span {
        display: inline-block;
        margin: 5px 0 0 0;
        letter-spacing: 0em;
    }
}

#top_fv_slider {
    overflow: hidden;
    margin: 40px 0 20px;
    position: relative;
}

#top_fv_slider ul {
    display: none;
    opacity: 0;
    transition: opacity .3s linear;
}
#top_fv_slider ul.slick-initialized{
    display: block;
    opacity: 1;
}
#top_fv_slider .slick-list li {
    width: 640px;
    padding: 0 20px;
}
#top_fv_slider .slick-list li a {
    display: block;
    overflow: hidden;
    border-radius: 20px;
}
#top_fv_slider .slick-list li a img {
    display: block;
}
#top_fv_slider .prev-arrow.movie,
#top_fv_slider .next-arrow.movie {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.7);
    border: solid 1px var(--basic_color);
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 15px;
    margin: auto auto;
    z-index: 10;
    opacity: 0;
    transform: scale(1.0);
    transition: all 0.3s;
    cursor: pointer;
}
#top_fv_slider .prev-arrow.movie:after,
#top_fv_slider .next-arrow.movie:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 10px;
    height: 12px;
    margin-left: 8px;
    background: var(--dark_color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}
#top_fv_slider .prev-arrow.movie:hover,
#top_fv_slider .next-arrow.movie:hover {
    transform: scale(0.9);
}
#top_fv_slider .prev-arrow.movie:after {
    transform: rotate(180deg);
}
#top_fv_slider:hover .next-arrow.movie,
#top_fv_slider:hover .prev-arrow.movie {
    opacity: 1;
}
#top_fv_slider .prev-arrow.movie {
    right: 640px;
}
#top_fv_slider .next-arrow.movie {
    left: 640px;
}
#top_fv_slider .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    opacity: 1;
}
#top_fv_slider .slick-dots li {
    background: #B4B4B4;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    cursor: pointer;
}
#top_fv_slider .slick-dots li.slick-active {
    background: var(--primary_color);
}

#top_fv_slider .movie {
    margin: 0;
}
#top_fv_slider .slick-dots button {
    display: none;
}

#fv_wrap #top_fv_slider {
    margin: 0 0 15px;
}
#fv_wrap #top_fv_slider .slick-list li {
    width: 370px;
    padding: 0 20px;
}
#fv_wrap #top_fv_slider .slick-list li a {
    border-radius: 0;
}
#fv_wrap #top_fv_slider .prev-arrow.movie {
    right: 370px;
}
#fv_wrap #top_fv_slider .next-arrow.movie {
    left: 370px;
    /* left: 310px; サイトジャック広告用*/
}
#fv_wrap #top_fv_slider .slick-dots li {
    border-radius: 3.5px;
    width: 7px;
    height: 7px;
    margin: 0 5px;
}
#fv_wrap #top_fv_slider .slick-dots li.slick-active {
    background: var(--primary_color);
}
#fv_wrap #top_fv_slider .slick-dots {
    margin-top: 10px;
}


@media screen and (max-width: 1024px) {
    #top_fv_slider {
        margin-top: 20px;
    }
    #top_fv_slider .prev-arrow.movie {
        right: auto;
        left: 20px;
    }
    #top_fv_slider .next-arrow.movie {
        left: auto;
        right: 20px;
    }

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

    #top_fv_slider .slick-list li {
        width: 460px;
        padding: 0 10px;
    }
}
@media screen and (max-width: 480px) {
    #top_fv_slider {
        margin: 0;
    }
    #top_fv_slider .slick-list li {
        padding: 0;
    }
    #top_fv_slider .slick-list li a {
        border-radius: 0;
    }
    #top_fv_slider .slick-dots {
        margin-top: 8px;
    }
    #top_fv_slider .slick-dots li {
        margin: 0 4px;
    }
}
/*

#fv {
    display: block;
    margin-bottom: 70px;
    max-width: 1300px;
    margin: 0 auto 40px;
}

#fv:after {
    content: "";
    display: block;
    clear: both;
}

#fv img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    height: 100%;
    width: auto;
}

#fv img[src*=fv_space] {
    position: static;
    width: 100%;
    height: auto;
}

#fv a {
    overflow: hidden;
}

#fv a img {
    transform: scale(1.0);
    transition: all 0.3s;
}

#fv a:hover img {
    transform: scale(1.05);
}

.fv-main {
    width: 66.66%;
    float: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.sliderArea {
    margin: 0;
    padding: 0;
    max-width: auto;
    position: static;
    opacity: 0;
}

.fv-slider a {
    display: block;
}

.progress {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background: #F6F6F6;
    z-index: 9999;
}

.bar {
    display: block;
    width: 0%;
    height: 8px;
    background: #141415;
}

.fv_side {
    float: right;
    width: 33.33%;
}

.fv_side a {
    display: block;
    position: relative;
}

.fv_side a:hover {
    opacity: 1;
}

.fv_side a img {
    display: block;
    height: 100%;
}

.slick-prev, .slick-next {
    width: 25px;
    height: 25px;
    border-radius: 60px;
    background: url(../img/top_slider/allow.svg) no-repeat center center,none;
    border: solid 1px #000;
    cursor: pointer;
    position: absolute;
    margin-top: -30px;
}

.slick-prev {
    z-index: 9999;
    bottom: 30px;
    left: 20px;
    top: 98%;
    transform: rotate(180deg);
}

.slick-next {
    z-index: 9999;
    bottom: 30px;
    left: 90px;
    top: 98%;
}
*/
#dl_list .slide-arrow.movie {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 35%;
    background: none;
    z-index: 100;
}
.category_top_list .slide-arrow.prev-arrow.movie:after {
    right: -8px;
    transform: rotate(-135deg);
}
.category_top_list .slide-arrow.next-arrow.movie {
    right: 0;
}
.category_top_list .slide-arrow.movie {
    width: 40px;
    height: 100%;
    position: absolute;
    top: 14px;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    cursor: pointer;
}

.category_top_list .slide-arrow.movie:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 6px;
    bottom: 0;
    margin: auto auto;
    border-top: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    transform: rotate(45deg);
}
#dl_list .slide-arrow.prev-arrow.movie {
    top: 22px;
    left: -30px;
}

#dl_list .slide-arrow.next-arrow.movie {
    top: 22px;
    right: -30px;
}

#dl_list #popularity-ulist .slide-arrow.prev-arrow.movie ,
#dl_list #popularity-ulist .slide-arrow.next-arrow.movie {
        top: 12px;
}

#dl_list .slide-arrow.prev-arrow.movie:after {
    transform: rotate(-135deg);
    left: 9px;
    right: 0;
}

.slick-track {
    display: flex;
}

.company_logo {
    margin: 0;
    display: flex;
    overflow: hidden;
    position: relative;
}

.top_service_contents + .infiniteslide_wrap:before {
    content: "";
    display: block;
    width: 40px;
    height: 115%;
    position: absolute;
    top: -10px;
    left: -4px;
    background: -moz-linear-gradient(left,  rgba(36,36,41,1) 0%, rgba(36,36,41,1) 20%, rgba(36,36,41,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(36,36,41,1) 0%,rgba(36,36,41,1) 20%,rgba(36,36,41,0) 100%);
    background: linear-gradient(to right,  rgba(36,36,41,1) 0%,rgba(36,36,41,1) 20%,rgba(36,36,41,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242429', endColorstr='#00242429',GradientType=1 );
    z-index: 2;
}


.top_service_contents + .infiniteslide_wrap:after {
    content: "";
    display: block;
    width: 40px;
    height: 115%;
    position: absolute;
    top: -10px;
    right: -4px;
    background: -moz-linear-gradient(left,  rgba(36,36,41,1) 0%, rgba(36,36,41,1) 20%, rgba(36,36,41,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(36,36,41,1) 0%,rgba(36,36,41,1) 20%,rgba(36,36,41,0) 100%);
    background: linear-gradient(to right,  rgba(36,36,41,1) 0%,rgba(36,36,41,1) 20%,rgba(36,36,41,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242429', endColorstr='#00242429',GradientType=1 );
    z-index: 2;
    transform: rotate(180deg);
}

.company_logo li {
    padding: 8px;

}

.company_logo li img {
    width: 80px;
    aspect-ratio: 1/1;
    object-fit: contain;
    object-position: 50% 50%;
    background: #ffffff;
    border-radius: 20px;
    margin: 0;
}

@media screen and (max-width: 768px) {
    #fv {
        display: block;
        margin-bottom: 20px;
    }

    .fv-main {
        width: 100%;
    }

    .fv_side {
        width: 100%;
        display: flex;
    }

    .fv_side > div {
        width: 50%;
    }

    .fv_main_nav {
        width: 100%;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .nav_left, .nav_right {
        width: 30px;
        height: 30px;
    }

    .nav_left::before, .nav_right::before {
        top: 0;
    }

    .nav_right {
        right: 30px;
    }

    .nav_left {
        margin-right: 78%;
        left: 10px;
    }

    .top_contents_menu {
        display: block;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .top_contents_menu, .top_contents_menu li, .top_contents_menu li:nth-child(9) {
        width: auto;
    }

    .slick-prev, .slick-next {
        width: 35px;
        height: 35px;
        top: 93%;
    }

    .slick-next {
        left: 70px;
    }

    .movie .slick-slide:not(.slick-center) {
        opacity: 0.5;
    }

    .slide-arrow.prev-arrow.movie:after {
        left: 0;
    }

    .slide-arrow.prev-arrow.movie {
        top: 14px;
        left: 0;
    }

    .slide-arrow.next-arrow.movie {
        top: 14px;
        right: 0;
    }

}
@media screen and (min-width: 600px) {
    .movie .slick-list.draggable {
        width: 100%;
    }
    .movie .slick-slide:not(.slick-center) {
        opacity: 1.0;
    }
}


/***********************************
** フッター
***********************************/
footer {
    width: 100%;
    background: var(--dark_color);
    color: #fff;
    display: flex;
}

footer .footer_left {
    width: 45%;
    display: flex;
    font-weight: bold;
    place-items: center;
}

footer .logo_area {
    background: #fff;
    width: 35%;
    height: 100%;
    position: relative;
}

footer .logo_area img {
    width: 67.8%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}

footer .footer_left p {
    font-size: var(--font_size_xs);
    height: 80%;
    border-right: solid 1px #fff;
    display: flex;
    padding: 0 30px 0 30px;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
}

footer .footer_left p br {
    display: none;
}

footer .footer_right {
    /*
    width: 52%;
    max-width: 620px;
    */
    padding: 60px 20px 40px 40px;
}

footer .footer_nav {
    color: #fff;
    font-size: var(--font_size_s);
    margin-bottom: 20px;
}

footer .footer_nav li {
    line-height: 1.2em;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 20px;
}

footer .footer_nav li:last-of-type {
    margin-right: 0;
}

footer .footer_nav a {
    color: #fff;
}

footer .copy {
    font-size: var(--font_size_xs);
}

footer .btn_inquiry_area {
    width: 100%;
    margin: 10px 0px 20px 0;
    text-align: center;
}

footer .btn_inquiry_area .btn_income,
footer .btn_inquiry_area .btn_inquiry,
footer .btn_inquiry_area .btn_faq,
footer .btn_inquiry_area .btn_about {
    width: 170px;
    margin-bottom: 16px;
    margin-right: 4px;
    box-sizing: border-box;
}

.scrolltop {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: var(--basic_color);
    cursor: pointer;
    display: none;
    z-index: 200;
}

.scrolltop:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: solid 1px #ffffff;
    border-left: solid 1px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}


/*@media screen and (max-width: 1024px) {
    footer {
        background: #fff;
        height: 310px;
    }
    footer .footer_left {
        color: var(--primary_color);
        display: block;
        width: 20%;
        padding: 10% 4%;
    }
    footer .logo_area,.footer_left p {
        height: auto;
        line-height: 1.5;
        margin-bottom: 10px;
        padding: 0;
        place-items: start;
    }
    footer .footer_right {
        background: var(--dark_color);
        width: 80%;
    }
    footer .btn_inquiry_area {
        text-align: inherit;
    }
    footer .btn_inquiry {
        width: 150px;
    }
    footer .btn_inquiry::before {
        font-size: 1rem;
        top: 3px;
        right: 15px;
    }
}*/

@media screen and (max-width: 1024px) {
    footer .btn_inquiry_area .btn_income,
    footer .btn_inquiry_area .btn_inquiry,
    footer .btn_inquiry_area .btn_faq,
    footer .btn_inquiry_area .btn_about {
        font-size: var(--font_size_s);
        width: 170px;
    }
}
@media screen and (max-width: 1024px) {

    footer .footer_left p br {
        display: inline;
    }

}
@media screen and (max-width: 768px) {
    footer {
        background: #fff;
    }

    footer .footer_left {
        color: var(--primary_color);
        display: block;
        width: 60%;
        padding: 10% 4%;
    }

    footer .footer_left p br.tb {
        display: none;
    }

    footer .logo_area, footer .footer_left p {
        font-size: 2.4vw;
        height: auto;
        line-height: 1.5;
        margin-bottom: 10px;
        padding: 0;
        place-items: start;
    }

    footer .footer_right {
        background: var(--dark_color);
    }

    footer .btn_inquiry_area {
        text-align: inherit;
    }

    footer .btn_inquiry {
        width: 150px;
    }

    footer .btn_inquiry::before {
        font-size: 1rem;
        top: 3px;
        right: 15px;
    }

    footer .footer_nav {
        font-size: inherit;
        display: block;
    }

    footer .footer_nav li {
        display: block;
        margin: 0 0 10px 0;
    }

    footer .copy {
        font-size: 0.6rem;
    }
}
@media screen and (max-width: 768px) {

    footer .footer_left {
        width: 30%;
        padding: 40px;
    }

    footer .logo_area {
        width: 100%;
        position: static;
    }

    footer .logo_area img {
        display: block;
        width: 100%;
        position: static;
    }

    footer .footer_left br {
        display: none;
    }

    footer .footer_right {
        width: 70%;
        padding: 40px;
    }

    footer .footer_nav li {
        margin-bottom: 30px;
    }

    footer .btn_inquiry_area {
        max-width: 240px;
        margin: 0 0 40px 0;
    }

    footer .btn_inquiry_area .btn_income,
    footer .btn_inquiry_area .btn_inquiry,
    footer .btn_inquiry_area .btn_faq,
    footer .btn_inquiry_area .btn_about {
        width: 100%;
    }

    footer .btn_inquiry::before {
        font-size: 1.5rem;
        top: 5px;
    }

}

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

    footer .footer_left {
        padding: 20px;
    }

    footer .footer_right {
        padding: 20px;
    }

    footer .btn_inquiry_area {
        margin: 0 0 20px 0;
    }

    footer .footer_nav li {
        margin-bottom: 20px;
    }

}

/***********************************
** アセット
***********************************/
body img.img_pc{display: block!important;}
body img.img_sp{display: none!important;}
@media screen and (max-width: 480px) {
    body img.img_pc{display: none!important;}
    body img.img_sp{display: block!important;}
}
/***************
** 一覧（サムネ＋タイトル）
***************/
.news_contents ul {
    margin: 24px;
}
.news_contents li a {
    align-items: center;
    display: flex;
    position: relative;
    border-bottom: solid 1px #E5E5E5;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.news_contents li:last-child a {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.news_contents .thumb {
    width: 20%;
    min-width: 128px;
    margin-right: 8px;
}

.news_contents .add_point {
    color: var(--accent_color);
    font-weight: 700;
    display: block;
    margin: 4px 0 0 0;
}

.news_contents .add_point i {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.1em;
    display: inline-block;
    width: auto;
    margin: 0 4px 0 0;
    padding: 4px;
    background: var(--accent_color);
    border-radius: 3px;
}

.news_contents .add_point i:after {
    content: "P";
    font-size: 9px;
    vertical-align: bottom;
    display: iline-block;
    margin-left: 2px;
}

.news_contents .add_point.geted {
    color: #a7a7a7;
}

.news_contents .add_point.geted i {
    color: #ffffff;
    background: #a7a7a7;
}


.news_contents li.pr a {
    padding: 15px 0;
    align-items: center;
}

.news_contents .newslist_num {
    padding: 15px 0;
}

@media screen and (max-width: 768px) {
    .news_contents ul {
        margin: 16px;
    }
    .news_contents li {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    .news_contents li a {
        align-items: flex-start;
    }
}


dl.contents_list {
    background: var(--light_color);
    margin: 24px 0;
}

dl.contents_list dt {
    color: #fff;
    font-size: var(--font_size_r);
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    background: var(--basic_color);
    margin: 0;
    padding: 8px;
}

dl.contents_list dd {
    padding: 16px;
}

dl.contents_list dd ul li {
    border-bottom: solid 1px #e5e5e5;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

dl.contents_list dd ul li:last-child {
    border: none;
    padding: 0;
    margin: 0;
}

dl.contents_list dd ul li a {
    font-size: var(--font_size_r);
    display: flex;
    align-items: center;
}

dl.contents_list dd ul li a .thumb {
    width: 20%;
    min-width: 128px;
    margin-right: 8px;
}

dl.contents_list dd ul li a .title {
    flex: 1;
}

dl.contents_list dd ul li a .title p {
    margin-bottom: 4px;
}

@media screen and (max-width: 768px) {
    dl.contents_list dd ul li {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 480px) {
    dl.contents_list dd ul li a {
        align-items: flex-start;
    }
    dl.contents_list dd ul li a div.thumb {
        min-width: 80px;
    }
}

/*-- サービス詳細＞ポップ --------- --*/
#service_modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    overflow: auto;
    display: none;
    transition: all 200ms ease;
}
#service_modal.open {
    display: flex;
    align-items: center;
}

#service_modal::-webkit-scrollbar {
    display: none;
}
#service_modal_contents {
    text-align: center;
    position: relative;
    max-width: 900px;
    width: 100%;
    height: auto;
    max-height: 740px;
    background: #ffffff;
    margin: 50px auto;
    overflow: hidden;
    overflow-y: auto;
    z-index: 100020;
}
#service_modal div.close {
    text-align: center;
    line-height: 50px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
#service_modal div.close:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    background: #cccccc;
    border-radius: 16px;
}


#service_modal div.close i:before,
#service_modal div.close i:after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}
#service_modal div.close i:before {
    transform: rotate(135deg);
}
#service_modal div.close i:after {
    transform: rotate(45deg);
}
#service_modal i.check {
    /*
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    */
    background: var(--primary_color);
    background: #fff;
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 0;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    border: solid 4px var(--primary_color);
    border-radius: 50%;
    left: 0;
    box-sizing: border-box;
}
#service_modal i.check:before {
    border-right: 4px solid var(--primary_color);
    border-bottom: 4px solid var(--primary_color);
    content: '';
    display: block;
    width: 25%;
    height: 50%;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 12%;
    margin: auto auto;
}
.service_modal_content {
    padding: 24px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.service_modal_content:after {
    content: "";
    display: block;
    clear: both;
}
.service_modal_content h2 {
    color: var(--primary_color);
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2em;
    margin: 32px 0;
    padding-left: 48px;
    border: none;
}
.service_modal_content h2:before {
    content: "";
    display: inline-block;
}
.service_modal_content h2 br {
    display: none;
}
#service_modal h2 i.check {
    background: var(--primary_color);
}
#service_modal h2 i.check:before {
    border-right: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
}
.service_modal_content h3 {
    color: var(--basic_color);
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin: 0 0 8px 0;
    border: none;
}

.service_modal_content h3 span {
    display: inline-block;
}
#service_modal .recommend {
    background: #efefef;
    padding: 16px;
}
#service_modal .service_modal_content {
    padding: 0;
}
.service_modal_content .service_document {
    padding: 0 40px;
    column-gap: 15px;
}
.service_modal_content .document_area.modal_document {
    padding: 10px;
    margin-top: 10px;
}
.service_modal_content .document_area_checkbox {
    padding-top: 0;
    padding-right: 10px;
}
.service_modal_content .document_img {
    min-width: auto;
    width: auto;
    margin-right: 0;
    padding-top: 0;
}

.service_modal_content .document_img img {
    max-width: 50px;
    width: 100%;
    height: auto;
    margin-right: 10px;
    display: block;
}

.service_modal_content .modal_detail p {
    font-size: var(--font_size_s);
}

.service_modal_content_title {
    text-align: center;
}
#service_modal ul.bookmark_area {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    text-align: left;
    display: flex;
    justify-content: center;
}
#service_modal ul.bookmark_area:last-of-type {
    justify-content: center;
}
@media screen and (max-width: 620px) {
    #service_modal ul.bookmark_area:last-of-type {
        justify-content: left;
        overflow-x: scroll;
    }
}
#service_modal ul.bookmark_area li {
    margin: 0 8px;
    width: 50%;
    box-sizing: border-box;
    position: relative;
}
#service_modal ul.bookmark_area li label {
    box-shadow: none;
    border-radius: 0;
    position: relative;
    padding: 0;
    display: flex;
    margin: 0;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}
#service_modal ul.bookmark_area li input:disabled + label {
    cursor: inherit;
}
#service_modal ul.bookmark_area li label .thumb {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    padding: 8px;
    background: #ffffff;
    border: solid 1px var(--light_color);
    border-radius: 20px;
    box-sizing: border-box;
}

#service_modal ul.bookmark_area li label .thumb img {
    border: none;
    height: 100%;
}
#service_modal ul li .thumb + a {
    color: var(--primary_color);
    font-size: 12px;
    text-align: center;
    text-decoration: underline;
    white-space: nowrap;
    display: inline-block;
    width: 120px;
    margin: 4px auto 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#service_modal ul.bookmark_area.other li {
    width: auto;
    margin: 0 8px;
}

#service_modal p {
    margin-bottom: 16px;
}
#service_modal p br {
    display: none;
}
#service_modal label i.check {
    border: 2px solid var(--primary_color);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    margin: 8px;
}
#service_modal label i.check:before {
    border-right: 2px solid var(--primary_color);
    border-bottom: 2px solid var(--primary_color);
}
#service_modal ul.bookmark_area li input:checked + label i.check {
    background: var(--primary_color);
}
#service_modal ul.bookmark_area li input:checked + label i.check:before {
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}
#service_modal ul.bookmark_area li input:checked + label .thumb {
    border: solid 2px var(--primary_color);
}
#service_modal ul.bookmark_area li label h4 {
    font-size: var(--font_size_m);
    line-height: 1.3em;
    display: block;
    padding: 0;
    border-bottom: none;
    font-weight: bold;
}
#service_modal ul.bookmark_area li label p {
    font-size: var(--font_size_s);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-bottom: 20px;
}
#service_modal ul.bookmark_area li label span {
    font-size: var(--font_size_r);
    display: block;
    margin: 8px 0;
}
#service_modal ul.bookmark_area li label a:after {
    content: none;
}
#service_modal a.txt_link {
    color: #ffffff;
    text-decoration: underline;
    margin: 0;
    width: auto;

    font-size: var(--font_size_s);
    font-weight: 700;
    background: var(--primary_color);
    padding: 16px 36px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    float: none;
    margin-top: 16px;
    max-width: 480px;

    box-shadow: var(--box_shadow);
    box-sizing: border-box;

}

#service_modal a.txt_link:after {
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    background: url(../img/service/check.svg) no-repeat center center;
}
#service_modal a.txt_link.return {
    color: var(--primary_color);
    font-weight: 400;
    box-shadow: none;
    text-decoration: underline;
    background: none;
    padding: 0;
}
#service_modal a.txt_link.return:after {
    display: none;
}
#service_modal a.btn_primary {
    margin: 16px auto;
    padding: 16px;
    box-sizing: border-box;
    height: auto;
    display: block;
}
#service_modal a.btn_primary span {
    color: var(--accent_color);
    background: #ffffff;
    display: inline-block;
    padding: 2px 4px;
    margin-right: 4px;
}
#service_modal .btn_primary,
#service_modal .btn_secondary {
    width: 400px;
}
#service_modal .btn_primary br,
#service_modal .btn_secondary br {
    display: none;
}
#service_modal .service_modal_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100010;
}
@media screen and (max-width: 768px) {
    .service_modal_content h2 {
        text-align: left;
        margin: 16px 0;
        font-size: 20px;
    }
    .service_modal_content h2 br {
        display: inline;
    }
    .service_modal_content h3 {
        font-size: 20px;
    }
    #service_modal p br {
        display: inline;
    }
    #service_modal ul.bookmark_area li {
        width: 100%;
    }
    #service_modal ul.bookmark_area li label .thumb {
        width: 100px;
        height: 100px;
    }
    #service_modal ul.bookmark_area li label .thumb + a {
        width: 100px;
    }
    #service_modal ul.bookmark_area li label p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }
    #service_modal a.txt_link {
        padding: 8px 36px;
    }
    #service_modal .btn_primary,
    #service_modal .btn_secondary {
        width: 300px;
    }
    #service_modal a.btn_primary br {
        display: none;
    }


}

/* 広告掲載をお考えの皆さまへ
------------------------------------------------- */
.top_bottom_outline {
    width: 90%;
    background: var(--water_color);
    margin-top: 30px;
    padding: 50px 5% 35px;
    line-height: 1.7em;
}

.top_bottom_outline h3 {
    color: var(--basic_color);
    border-bottom: solid 1px var(--basic_color);
    margin-left: 0;
}

.top_bottom_outline .advertise {
    max-width: 900px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.top_bottom_outline-guide .advertise .text {
    display: flex;
    flex-direction: column;
    margin-right: 2rem;
    flex-shrink: 0;
    width: 62%;
}

.top_bottom_outline .advertise p {
    text-align: left;
    font-size: var(--font_size_s);
    margin: 10px 30px 0 0;
}

.top_bottom_outline img {
    width: auto;
    margin: 15px 10px 0;
    overflow: hidden;
}
.top_bottom_outline .top_bottom_outline-banner_wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}
.top_bottom_outline .advertise_banner {
    margin: 0 auto;
    display: block;
    margin-top: 2rem;
    width: 100%;
}
.top_bottom_outline .advertise_banner02 {
    width: 100%;
    max-width: 440px;
}
.top_bottom_outline .top_bottom_outline-guide_banner {
    margin: 0;
    display: block;
    width: 100%;
    max-width: 440px;
    margin-top: auto;
    display: flex;
}
.top_bottom_outline .advertise_banner02 {
    margin: 0;
}
.top_bottom_outline-guide .btn_secondary {
    margin-bottom: 0;
}
#whitepaper .pager {
    margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
    .top_bottom_outline {
        width: 100%;
        padding: 40px 0 20px;
    }

    .top_bottom_outline .advertise {
        width: 80%;
        display: block;
    }

    .top_bottom_outline-guide .advertise .text {
        margin-right: 0;
        width: 100%;
    }

    .top_bottom_outline .top_bottom_outline-banner_wrapper {
        width: 80%;
    }

    .top_bottom_outline .top_bottom_outline-guide_banner {
        margin: 2rem auto 0;
    }

    .top_bottom_outline .advertise p {
        margin: 10px 0 0 0;
    }

    .top_bottom_outline-guide .advertise .image {
        margin: 1rem auto 0;
    }

    .top_bottom_outline img {
        display: block;
        margin: 15px auto 0;
    }

    .top_bottom_outline .advertise.about_advertise {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/***********************************
** トップcontents、共通contents
***********************************/
/*
.top_main_container {
    width: calc( 100% - 40px );
    max-width: 1300px;
    margin: auto;
    display: flex;
    position: relative;
}
*/
.top_main_container {
    max-width: 1340px;
    margin: auto;
    display: flex;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
}
.top_main_container.one_column {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 80px;
    display: block;
    justify-content: center;
    position: relative;
}

.top_main_container.one_column .top_main_area {
    margin: 0 auto;
    padding: 0;
    width: 76%;
}

@media screen and (max-width: 768px) {
    .top_main_container.one_column .top_main_area {
        width: auto;
    }
}

.top_main_area {
    width: 76%;
    flex: 1;
    width: 50%;
    /* padding: 0 20px 0 0; */
    padding: 0 20px 0 45px;
    margin: 0 0 40px 0;
}

 /*  =========================== サイトジャック広告用 =========================== */
.sitejack_wrap .top_main_area {
    max-width: 700px;
    margin: 0;
    padding: 0;
}
.sitejack_wrap .sitejack {
    margin-top: 20px;
}
.sitejack_wrap .sitejack img {
    position: fixed;
    width: auto;
    height: auto;
    z-index: 100;
    display: block;
}
.sitejack_wrap .sitejack.right {
    padding-left: 25px;
}
.sitejack_wrap .sitejack.left img {
    margin-left: -125px;
}
.sitejack_wrap .sitejack_top {
    margin-top: 15px;
}
#news .sitejack_wrap .sitejack_top {
    margin: 0 auto 15px;
}
.news_detail .sitejack_wrap .sitejack_top {
    margin: 0 auto 10px;
}
.top_main_container.one_column .sitejack {
    display: none;
}
@media screen and (min-width:1025px) and (max-width: 1300px) {
    .sitejack_wrap .top_main_container {
        max-width: 100%;
    }
    .sitejack_wrap .top_main_area {
        max-width: 50%;
    }
}
@media screen and (max-width: 1024px) {
    .sitejack_wrap .sitejack {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .sitejack_wrap .sitejack_top {
        margin: 0 auto 15px;
        width: 95%;
    }
    #news .sitejack_wrap .sitejack_top,
    .news_detail .sitejack_wrap .sitejack_top {
        width: 100%;
    }
}

.service_outline {
    display: flex;
    font-weight: bold;
    margin-bottom: 24px;
}

.service_outline > div {
    padding: 8px;
}

.service_outline h1 {
    font-size: var(--font_size_r);
    font-weight: 400;
    margin-bottom: 8px;
}

.service_outline h3 {
    display: block;
    margin-bottom: 8px;
}

.service_outline p a {
    font-weight: 400;
}

.service_outline_left {
    text-align: left;
}

.service_outline img {
    width: 208px;
    /*margin: 0 40px 10px 0;*/
    margin-bottom: 8px;
}

.service_outline .catch {
    color: #10497D;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .service_outline {
        display: block;
    }
    .service_outline img {
        margin: 0 auto 8px auto;
        display: block;
        width: 200px;
    }
    .service_outline .catch {
        text-align: center;
    }
    .service_outline h3 {
        text-align: center;
    }
}

.point_flex {
    display: flex;
    flex-wrap: wrap;
    margin: 24px 0;
    /* align-items: flex-end; */
}
#point_flex {
    margin: 10px -16px 40px;
}
#point_flex > div {
    box-shadow: none;
    border-right: solid 1px #efefef;
    border-radius: 0;
}
#point_flex > div:last-child {
    border: none;
}
#point_flex img {
    display: block;
}
#point_flex .detail_title4 {
    font-size: var(--font_size_r);
    padding: 8px 0;
}
#point_flex .point_flex_content {
    margin: 16px 0;
    padding: 0;
}
#point_flex a.btn_secondary {
    margin: 16px auto 0;
    padding: 16px;
}
.point_mg_flex {
    display: flex;
    flex-wrap: nowrap;
}
.point_mg_flex > div > img {
    width: 90%;
}
.point_mg_flex_content {
    width: 133%;
}
.point_img > img {
    width: auto;
    width: 100%;
}
.point_flex > div {
    width: 33.33%;
}
a.point_link {
    width: 100%;
    max-width: 350px;
    text-align: center;
    color: var(--primary_color);
    text-decoration: underline;
}
.point_flex_content_sub {
    /* width: 40%; */
    margin: 0 auto;
    /* display: flex;
    justify-content: space-around; */
    /* text-align: center; */
    text-align: right;
    color: var(--primary_color);
    padding-left: 40px;
}
.point_link_sub {
    font-size: var(--font_size_s);
    position: relative;
    color: var(--primary_color);
    text-decoration: underline;
}
.point_link_sub.about::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    background: url('../img/common/icon_beginner.png') no-repeat center center / 100% auto;;
}
.point_link_sub.beginner::before {
    content: "";
    background: url('../img/common/icon_beginner.png') no-repeat center center / auto 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: top;
}
.point_flex_content {
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 0;
}
.point_flex_content > p {
    font-weight: bold;
    text-align: left;
    /* margin-left: 10px; */
}
.point_flex_content > div {
    width: 70px;
}
.point_flex_content > div > img {
    width: auto;
}
.point_flex_content_discription {
    text-align: left;
}
.point_mg_flex .point_mg_flex_content img {
    display: none;
}
.point_other_button > a {
    /* width: 23%; */
}
.point_outline {
    background: #fff;
    border-radius: 50px;
    box-shadow: var(--box_shadow);
    text-align: center;
    padding: 40px 10px 10px;
    margin: 32px auto;
}
.point_outline_pd {
/*    padding: 30px 20px 0px;*/
    padding: 0 16px;
    margin:0 auto;
    box-sizing: border-box;
}
.btn_col2_char {
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .point_outline {
        padding: 24px;
    }
    .point_mg_flex {
        display: block;
    }
    .point_mg_flex > div:first-child,
    .point_mg_flex > div:last-child {
        display: none;
    }
    .point_mg_flex_content {
        width: auto;
    }
    .point_mg_flex_content p {
        text-align: left;
    }
    .point_mg_flex .point_mg_flex_content img {
        width: 100%;
        object-fit: cover;
        object-position: 50% 50%;
        display: block;
        margin-bottom: 8px;
        aspect-ratio: 5 / 2;
    }
    .point_mg_flex_content .btn_primary {
        margin: 16px auto 0;
    }
}

/* 職種タブ
------------------------------------------------- */
.top_contents_menu {
    display: flex;
    word-break: break-all;
}

.top_contents_menu li {
    display: flex;
    align-items: center;
    width: 100px;
    text-align: center;
    margin-right: 5px;
    position: relative;
    background: var(--light_color);
    flex: 1;
}

.top_contents_menu li:before {
    content: "";
    width: 100%;
    height: 5px;
    background: #ffffff;
    position: absolute;
    bottom: 2px;
}
.top_contents_menu li:last-child {
    margin-right: 0;
}

.top_contents_menu li:nth-child(9) {
    width: 14%;
}

.top_contents_menu li a {
    color: var(--basic_color_light);
    font-size: var(--font_size_s);
    font-weight: bold;
    line-height: 2.4em;
    width: 100%;
    height: auto;
    padding: 8px 0 16px 0;
    place-items: center;
}

.top_contents_menu li.active {
    background: var(--primary_color)!important;
}
.top_contents_menu li .active::before {
    background: var(--primary_color);
}
.top_contents_matter li a {
    display: flex;
    align-items: center;
    padding: 16px 32px;
    border-bottom: solid 1px #E5E5E5;
    font-weight: bold;
}

.top_contents_matter li:last-child a {
    border: none;
}

.top_contents_matter li a:after {
    content: "";
    display: block;
    clear: both;
}

.top_contents_matter img {
    width: 100%;
    height: auto;
}

.top_contents_matter .thumb {
    width: 21%;
    max-width: 128px;
    margin-right: 16px;
}

.top_contents_matter .txt {
    flex: 1;
}

.top_contents_matter_article_title {
    align-content: center;
    display: grid;
    margin-right: 35px;
}

.top_contents_matter_article_title .lock {
    display: contents;
}

.top_contents_matter_tagarea {
    width: 14%;
    align-items: center;
    display: grid;
    text-align: right;
}


aside.side_applicaton {
    width: 32%;
    margin-bottom: 30px;
    padding-top: 20px;
}

@media screen and (max-width: 1024px) {
    .top_main_container {
        max-width: 100%;
        display: block;
    }

    .top_main_area, .top_main_area.service_applicaton, aside.side_applicaton {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .top_main_area, .top_main_area.service_applicaton {
        width: 88%;
        margin: 0 auto 20px;
        padding: 0;
    }

    aside.side_applicaton .service_document {
        display: grid;
    }

    .top_main_container.one_column {
        width: calc( 100% - 40px ) !important;
        max-width: calc( 100% - 40px ) !important;
    }
}

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

    .top_contents_matter li a {
        padding: 8px 0;
    }

    .top_main_container.one_column {
        margin-bottom: 40px;
    }

    .top_main_container {
        display: block;
        width: var(--sp_inner);
        padding: 0;
    }

    .top_contents_menu li.small_text a {
        font-size: 12px;
    }

    .top_service_menu {
        display: none;
    }

    .top_service_menu.mypage_sp {
        display: block !important;
    }

    .top_main_area, .top_main_area.service_applicaton, aside.side_applicaton {
        width: 100%;
        margin-right: 0;
        margin: 0 0 20px 0;
    }

    .top_main_area, .top_main_area.service_applicaton {
        padding: 0 20px 0 0;
    }

    aside.side_applicaton .service_document {
        display: grid;
    }

    .top_contents_menu {
        width: 100%;
    }

    .top_contents_menu li {
        width: 30%;
    }

    .top_contents_menu li:nth-child(9) {
        width: 30%;
    }

    .top_contents_menu li a {
        font-size: 14px;
    }

    .top_contents_matter {
        margin: auto;
    }

    .top_contents_matter img {
        height: auto;
    }

    .top_contents_matter_article_title {
        margin-right: 0;
    }

    .top_large_article_area {
        width: var(--sp_inner2);
        margin: 30px auto 50px;
    }

    .top_large_article {
        background: #fff;
        box-shadow: var(--box_shadow);
        font-weight: bold;
    }

    .top_large_article_title {
        padding: 16px 16px 0 16px;
    }

    .top_large_article_campany {
        text-align: right;
        padding: 16px;
        padding-top: 8px;
    }

    .top_service_menu {
        display: none;
    }
    .point_other_button {
        margin-bottom: 16px;
        text-align: center;
    }
    .point_other_button > a {
        width: 100%;
        margin: 20px auto;
    }
    .point_other_area {
        font-size: 0.8em;
    }
    .point_outline {
        margin: 24px auto;
    }
}


.top_contents_menu li.active a {
    color: #fff;
}


.top_contents_menu li.small_text a {
    font-size: 1.2rem;
    line-height: 1.2em;
}

.occupation {
    overflow-x: scroll;
}

.occupation .top_contents_menu {
    width: 1240px;
}

.tmp_review_area {
    display: flex;
    margin: 40px -20px;
}
.tmp_review_area > div {
    padding: 0 20px 30px 20px;
    width: 50%;
    position: relative;
}
.tmp_review_area .list_top {
    text-align: right;
    margin-top: 16px;
}
.tmp_review_area .list_top a {
    font-size: var(--font_size_s);
}
.tmp_review_area .list_top a:hover {
    text-decoration: underline;
}
.tmp_review_area .list_top a:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    margin-left: 8px;
    background: var(--dark_color);
}
.tmp_review_area h2 {
    display: inline-block;;
    margin: 0;
}
.tmp_review_area li {
    position: relative;
    display: flex;
    margin-top: 24px;
}
.tmp_review_area .tmp_area li .thumb {
    width: 25%;
    margin-right: 16px;
}
.tmp_review_area li .txt {
    flex: 1;
}
.tmp_review_area .tmp_area li a {
    color: inherit;
    font-size: var(--font_size_m);
    font-weight: bold;
    border: none;
    margin: 0;
}
.tmp_review_area .tmp_area li a:hover {
    text-decoration: underline;
}
.tmp_review_area .tmp_area li p {
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 8px 0;
}
.tmp_review_area .tmp_area li span {
    font-size: var(--font_size_s);
    display: block;
}

.tmp_review_area .review_area li .icon {
    font-size: var(--font_size_s);
    text-align: center;
    width: 80px;
    height: 80px;
    margin-right: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #efefef;
}

.tmp_review_area .review_area li .icon:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0 0;
    top: 0;
    position: absolute;
    left: 0;
}
.tmp_review_area .review_area li .icon.mhlw:before {
    border-color: #32b23b transparent transparent transparent;
}/* 厚生労働省 */

.tmp_review_area .review_area li .icon.mc:before {
    border-color: #a658db transparent transparent transparent;
}/* 総務省 */

.tmp_review_area .review_area li .icon.moj:before {
    border-color: #cc5858 transparent transparent transparent;
}/* 法務省 */

.tmp_review_area .review_area li .icon.fsa:before {
    border-color: #c79818 transparent transparent transparent;
}/* 金融庁 */

.tmp_review_area .review_area li .icon.mof:before {
    border-color: #ffa800 transparent transparent transparent;
}/* 財務省 */

.tmp_review_area .review_area li .icon.nta:before {
    border-color: #83d1e7 transparent transparent transparent;
}/* 国税庁 */

.tmp_review_area .review_area li .icon.meti:before {
    border-color: #f9a1f0 transparent transparent transparent;
}/* 経済産業省 */

.tmp_review_area .review_area li a {
    line-height: 1.4em;
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 8px;
}
.tmp_review_area .review_area li a:hover {
    text-decoration: underline;
}
.tmp_review_area .review_area li span {
    font-size: var(--font_size_s);
    display: block;
}
@media screen and (max-width: 768px) {
    .tmp_review_area {
        display: block;
        margin: 0;
    }
    .tmp_review_area > div {
        margin: 24px 0;
        padding: 0;
        width: auto;
        position: relative;
    }
    .tmp_review_area h2 {
        border-bottom: solid 1px var(--basic_color);
    }
    .tmp_review_area li {
        margin: 16px 0;
    }
    .tmp_review_area > div > a {
        right: 0;
    }
}

/***********************************
** サービスを探す
***********************************/
.bg_dark {
    background-color: var(--dark_color);
    border-radius: 0 50px 50px 0;
    margin: 40px 0 40px -40px;
    overflow: hidden;
    padding: 50px 30px 30px 50px;
}

.bg_dark h2 {
    margin-bottom: 10px;
}

.bg_dark h2,.title_catch {
    border-bottom: none;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}















.top_service_contents {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.top_service_matter {
    width: 100%;
}

.top_service_matter.active {
    display: block;
    width: 100%;
}

.top_service_matter article {
    display: none;
}

.top_service_matter article.active {
    display: block;
}

.top_service_menu > li > a {
    width: 100%;
    padding: 8px 10px;
}

.top_service_menu li .active::before {
    content: "";
    background: #fff;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    width: 11px;
    height: 11px;
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.top_service_menu.service_pc_list li .active::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 100%;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 10;
}



.top_service .company_logo {
    margin-left: -50px;
}

.top_service .company_logo img {
    width: 80px;
    margin: 0;
    display: block;
}

.top_service#regist {
    display: block;
}

.top_service#regist .top_service_matter {
    display: none;
}

.top_service#regist .top_service_matter.active {
    display: block;
}


.top_contents_matter > * {
    display: none;
}

.top_contents_matter > *.active {
    display: block;
}

#admin .top_contents_matter ul {
    display: block;
}

.top_service, .top_Questionnaire {
    position: relative;
    overflow: inherit;
}
.top_service > i, .top_Questionnaire > i {
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    background: var(--dark_color);
    position: absolute;
    top: 0;
    z-index: -1;
}

.top_Questionnaire ul {
    display: flex;
    flex-wrap: wrap;
    margin: 8px -16px;
}
.top_Questionnaire ul li {
    display: flex;
    width: 50%;
    padding: 16px;
    box-sizing: border-box;
}
.top_Questionnaire ul li .thumb {
    display: block;
    width: 35%;
    max-width: 160px;
    margin-right: 16px;
}
.top_Questionnaire ul li .txt {
    flex: 1;
}
.top_Questionnaire ul li .txt a {
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.top_Questionnaire ul li .txt a:hover {
    text-decoration: underline;
}
.top_Questionnaire ul li .txt span {
    color: #ffffff;
    text-align: left;
    font-size: var(--font_size_s);
    display: block;
}
@media screen and (max-width: 768px) {
    .top_Questionnaire ul {
        margin: 8px;
    }
    .top_Questionnaire ul li {
        width: 100%;
        padding: 8px;
    }
    .top_Questionnaire ul li:nth-child(5),
    .top_Questionnaire ul li:nth-child(6) {
        display: none;
    }
}

.top_service_menu.mypage_sp {
    display: none;
}

.top_service_menu {
    display: block;
    margin-right: 40px;
}

.top_service_menu li {
    width: 220px;
    background: #fff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    position: relative;
}

.top_service_menu.pc_touroku li, .top_service_menu.sp_touroku li {
    background: var(--light_color2);
}

.top_service_menu.service_pc_list li.active, .top_service_menu.pc_touroku li.active, .top_service_menu.sp_touroku li.active {
    background: var(--primary_color);
}

.top_service_menu.service_pc_list li.active a, .top_service_menu.pc_touroku li.active a, .top_service_menu.sp_touroku li.active a {
    color: #fff;
}

.top_service_menu.pc_touroku li .active::before, .top_service_menu.sp_touroku li .active::before {
    background: var(--primary_color);
}


.top_service_matter h4, .top_service_matter_menu li a, .service_matter_menu li a {
    color: #fff;
    width: 100%;
}

.top_service_matter h4 {
    font-size: var(--font_size_r);
    line-height: 1.2em;
    border-bottom: solid 1px #fff;
    display: initial;
    padding-bottom: 4px;
    font-weight: bold;
}
.top_service_matter h4 a {
    color: #ffffff;
}

.top_service_matter_menu {
    display: flex;
    margin-top: 40px;
}

#regist .top_service_matter_menu {
    display: block;
    margin-top: 0px;
}

.top_service_matter_menu li {
    padding: 0 20px 35px 0;
    position: relative;
}

.top_service_matter_menu1 li::after, .top_service_matter_menu2 li::after, .top_service_matter_menu3 li::after {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: -12px;
    top: -5px;
}

.top_service_matter_menu.item {
    display: flex;
    margin-top: 40px;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
}

.top_service_matter_menu.item li {
    padding: 0 25px 20px 20px;
    width: 50%;
    box-sizing: border-box;
}

.top_service_matter_menu.item li::after {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: 0;
    top: -7px;
}
/*
@media screen and (max-width: 1024px) {
    .top_service_matter h4 {
        border-bottom: solid 3px #fff;
        display: initial;
        padding-bottom: 10px;
        font-weight: bold;
    }

    .top_service_matter {
        width: 100%;
    }
}
*/
@media screen and (max-width: 768px) {
    .top_service_menu {
        display: none;
    }

    .top_service_menu + article {
        display: block;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .top_service_menu.active + article {
        max-height: 300vh;
    }

    .top_service_contents {
        width: var(--sp_inner);
        margin: 0 auto 20px;
        display: block;
    }

    .top_service_matter {
        margin-top: 20px;
    }

    .top_service_matter_menu.item {
        margin-top: 24px;
    }

    .top_service_matter_menu {
        display: block;
        margin-bottom: 0;
    }

    .top_service_matter_menu ul {
        display: flex;
        flex-wrap: wrap;
    }

    .top_service_matter_menu li {
        padding-left: 0;
        margin: 0;
        text-align: left;
    }

    .top_service_matter_menu1 ul li, .top_service_matter_menu2 ul li, .top_service_matter_menu3 ul li {
        margin-bottom: 15px;
        margin-right: 5%;
        padding-right: 10px;
        text-align: left;
        width: 42%;
    }

    .top_service_matter_menu1 li::after, .top_service_matter_menu2 li::after, .top_service_matter_menu3 li::after {
        right: -5px;
        top: -5px;
    }

    .top_service_matter h4.title {
        display: none;
    }

    .top_service_matter_menu li:last-child {
        margin-bottom: 18px;
    }

    .top_service_matter_menu.item li {
        width: 50%;
    }

    .top_service_menu {
        margin-right: 0;
    }

    .top_service_menu li {
        width: auto;
    }

    .top_service_menu li a:after {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 2px var(--basic_color);
        border-right: solid 2px var(--basic_color);
        position: absolute;
        top: 50%;
        right: 20px;
        transform: rotate(45deg);
        margin-top: -4px;
        transition: all 0.3s ease;
    }

    .top_service_menu.active li a:after {
        right: 16px;
        margin-top: -6px;
        transform: rotate(135deg);
    }

    .top_service_menu li a:before {
        display: none!important;
    }

    .top_service_menu li a::before {
        content: "\e5cc";
        clip-path: none;
        background: none;
        font-size: var(--font_size_xl);
        font-family: 'Material Icons';
        right: 10px;
        top: -1px;
        position: absolute;
    }

    .top_service_menu.mypage_sp li a::before {
        content: "\e5cc";
    }

    .top_service_menu.mypage_sp li.active a::before {
        content: "\e5cf";

    }

    .top_service_menu li .active::before {
        content: "\e5cf";
        clip-path: none;
        background: none;
        top: 10px;
        right: 28px;
    }

    .top_service_list {
        width: calc(100% - 20px);
        margin: 0 auto;
        display: flex !important;
        flex-wrap: wrap;
    }

    .top_service_list .btn_secondary::before {
    }

    .top_service_list li {
        width: 42%;
        box-shadow: var(--box_shadow);
        border-radius: 20px;
        font-weight: bold;
        font-size: 12px;
        flex-grow: 1;
        text-align: center;
        margin-bottom: 10px;
        padding: 15px 5px 5px;
    }

    .top_service_list .btn_secondary {
        margin: 10px auto;
        padding: 10px 20px;
    }

    .top_service_list .btn_secondary:before {
        right: 10px;
    }

    .top_service_list li:nth-child(odd) {
        margin-right: 8px;
    }

    .top_service_list li img {
        width: 40px;
        margin-bottom: 10px;
    }

    .bg_dark {
        margin: 20px auto;
        padding: 30px 0 0;
        border-radius: 0;
        text-align: center;
        width: 100%;
    }

    .bg_dark .btn_secondary {
        background: var(--light_color);
        color: var(--basic_color);
    }

    .bg_dark .btn_secondary::before {
        background: var(--basic_color);
    }

    .boeder_none {
        border-bottom: none !important;
    }

    #mypage .top_service_matter_menu ul, #regist .top_service_matter_menu ul {
        display: block;
    }
    .point_other_button_flex {
        display: flex;
        justify-content: center;
        margin: 8px 0 16px 0;
    }

    .top_service_matter article {
        display: none;
    }
    .top_service_matter ul.active + article {
        display: block;
    }

}
@media screen and (max-width: 480px) {
    .top_service_matter_menu.item li {
        width: 100%;
    }
}

/***********************************
** top セミナーで学ぶ
***********************************/
.top_learn {
    display: flex;
    width: 100%;
    margin-bottom: 40px;
    font-weight: bold;
}

.top_learn_left {
    width: 34%;
    margin-right: 6%;
    padding-left: 6%;
    position: relative;
}

.top_learn_left h2::before {
    content: "Seminar";
}

.top_learn_left .tob::before {
    content: "Movie";
}

.top_learn_left .whitepaper::before {
    content: "White Paper";
}

.top_learn_left_article {
    box-shadow: var(--box_shadow);
    border-radius: 50px;
    margin-bottom: 50px;
    padding: 25px;
}

.top_learn_left_article img {
    display: block;
    height: auto;
    object-fit: cover;
}

.top_learn_left_article_title {
    font-weight: bold;
    margin: 8px 0;
}

.top_learn_left_article_campany {
    font-size: var(--font_size_s);
    position: relative;
    padding-left: 12px;
}

.top_learn_left_article_campany::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -2px;
    top: -7px;
}
@media screen and (max-width: 1024px) {
    .top_learn_left .btn_move {
        position: absolute;
        top: 50%;
        right: -100%;
    }
}
.top_learn_right {
    width: 60%;
}

.top_learn_right ul {
    display: flex;
    flex-wrap: wrap;
    margin: -16px;
}

.top_learn_right li {
    width: 50%;
    padding: 16px;
    box-sizing: border-box;
}

.top_learn_right li a {
    display: block;
}
/*
.top_learn_right li:nth-child(odd) {
    margin-right: 8%;
}
*/
.top_learn_right_article img,.top_blocks_3 li img {
    display: block;
    max-width: 250px;
    width: 100%;
    height: auto;
    /*object-fit: cover;*/
    margin: 0 auto;
}

.top_learn_right_article_title {
    margin: 10px 0 5px;
    min-height: 48px;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.top_learn_right_article_campany {
    color: var(--basic_color_light);
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .top_learn {
        width: 90%;
        border-bottom: solid 2px var(--basic_color);
        display: block;
        margin: 20px auto;
        /*padding: 50px 0 0;*/
        text-align: center;
    }

    .top_learn_left {
        margin: auto;
        padding: 0;
        width: 100%;
    }

    .top_learn_left a {
        width: 90%;
        margin: auto;
    }

    .top_learn_left_article {
        border-radius: 0;
        margin-top: 30px;
        padding: 0;
    }

    .top_learn_left_article_title {
        font-size: 16px;
        margin: 0;
        padding: 16px 16px 8px 16px;
        text-align: left;
    }

    .top_learn_left_article_campany {
        text-align: left;
        padding: 0 16px 16px 38px;
    }

    .top_learn_left_article_campany::before {
        left: 20px;
    }

    .top_learn_right {
        width: var(--sp_inner);
        margin: 30px auto 0;
    }

    .top_learn_right ul {
        display: block;
    }

    .top_learn_right li {
        width: 100%;
        border-bottom: solid 1px var(--light_color2);
        padding-bottom: 16px;
    }

    .top_learn_right li:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .top_learn_right_article {
        display: flex;
        align-items: center;
    }

    .top_learn_right_article .thumb {
        width: 21%;
        margin-right: 16px;
    }

    .top_learn_right_article img {
        width: 100%;
        height: auto;
    }

    .top_learn_right_article .txt {
        flex: 1;
    }

    .top_learn_right_article_title {
        margin: 0;
        -webkit-line-clamp: inherit;
        min-height: auto;
    }

    .seminar_detail #pagination li {
        display: none;
    }
    .seminar_detail #pagination li.paginationjs-prev,
    .seminar_detail #pagination li.paginationjs-next {
        display: block;
    }
}

/***********************************
** top アンケート調査
***********************************/
.slide_area {
    overflow: hidden;
    margin-right: -30px;
    margin-top: -20px;
}
.top_questionnaire_list {
    margin-top: 24px;
    position: relative;
    margin: 40px 100px 0 0;
}
.top_questionnaire_list li {
    opacity: 0.5;
    padding: 8px;
}
.arr_data_questionnaire_list {
    margin: 15px 0;
}
.top_questionnaire_list .slick-slide.slick-active {
    opacity: 1;
}
.top_questionnaire_list li a {
    display: block;
    height: 100%;
    background: #ffffff;
}
.top_questionnaire_list li a p {
    font-weight: bold;
    width: auto;
    max-height: 140px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    margin: 16px;
    text-align: left;
}
.top_questionnaire_list .slick-dots {
    display: flex;
    width: 50%;
    margin: 24px 8px 0;
}
.top_questionnaire_list .slick-dots li {
    margin: 0;
    flex: 1;
    height: 3px;
    padding: 0;
    background: #efefef;
    opacity: 1;
    cursor: pointer;
}
.top_questionnaire_list .slick-dots li.slick-active {
    background: var(--primary_color);
}

.top_questionnaire_list .slick-dots li button {
    display: none;
}
.top_questionnaire_list .slick-next {
    top: -8px;
    left: auto;
    right: -70px;
    bottom: auto;
    border: solid 1px #ffffff;
}
.top_questionnaire_list .slick-prev {
    top: -8px;
    left: auto;
    right: 0;
    bottom: auto;
    border: solid 1px #ffffff;
}
.top_questionnaire_list .slick-next:before,
.top_questionnaire_list .slick-prev:before {
    opacity: 1;
    content: "";
    width: 9px;
    height: 22px;
    background: #ffffff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto auto;
}

/*
.top_questionnaire_list {
    display: flex;
    font-weight: bold;
    margin: 40px 0 10px 0;
    overflow: hidden;
}

.top_questionnaire_list li {
    width: 250px;
    margin: 8px;
}

.top_questionnaire_list li a {
    display: block;
    height: 100%;
    background: #fff;
    width: auto;
}

.top_questionnaire_list li img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.top_questionnaire_list li p {
    width: auto;
    max-height: 140px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    margin: 8px;
    text-align: left;
}
*/

.top_blocks_3 {
    display: flex;
    margin-bottom: 70px;
    justify-content: space-between;
}

.top_blocks_3.news {
    clear: both;
    margin-bottom: 0;
}

.top_blocks_3 li {
    width: 33.33%;
    padding: 8px;
    box-sizing: border-box;
}

.top_blocks_3 li a {
    display: block;
    border-radius: 50px;
    box-shadow: var(--box_shadow);
    font-weight: bold;
    padding: 16px;
    height: 100%;
    text-align: right;
    box-sizing: border-box;
}

.top_blocks_3 li:last-child {
    margin-right: 0;
}

.top_blocks_3 li p {
    margin: 16px 0 0 0;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.top_blocks_3 li .tag {
    margin: 8px 2px 0;
}

.top_blocks_6 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 70px;
    margin: 0 -16px 70px -16px;
}

.top_blocks_6 li {
    width: 50%;
    display: flex;
    font-weight: bold;
    text-align: right;
    padding: 16px;
    box-sizing: border-box;
}


.top_blocks_6 li a {
    display: flex;
    align-items: top;
}

.top_blocks_6 li .thumb {
    width: 170px;
    height: auto;
    margin-right: 16px;
}

.top_blocks_6 li .thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.top_blocks_6 li .txt {
    flex: 1;
    margin-bottom: 10px;
}

.top_blocks_6 li .txt p {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.topics_title.answer_news {
    margin-left:  20px;
}



@media screen and (max-width: 1024px) {
    .top_blocks_3 {
        width: 100%;
        /*overflow: hidden;
        overflow-x: scroll;*/
        margin: 30px 0;
    }

    .top_learn {
        width: 90%;
        border-bottom: solid 2px var(--light_color);
        display: block;
        margin: 20px auto;
        /*padding: 50px 0 50px;*/
        text-align: center;
    }

    .top_learn_right {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .top_Questionnaire {
        padding-bottom: 1px;
    }
    .top_Questionnaire:after {
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        right: -20px;
        z-index: -1;
        background: var(--dark_color);
    }
    .slide_area {
        overflow: normal;
        margin-right: 0;
        margin-top: 0;
    }
    .top_questionnaire_list {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        height: auto;
        margin: 20px -20px 0 -20px;
        padding: 8px;
    }

    .top_questionnaire_list li {
        opacity: 1;
        width: 50%;
        padding: 8px;
        margin: 0;
        box-sizing: border-box;
    }

    .top_questionnaire_list li:nth-child(n+5) {
        display: none;
    }

    .top_questionnaire_list li a {
        background: #ffffff;
    }

    .top_questionnaire_list li img {
        /* max-width: 157px; */
        /* height: 88px; */
        height: auto;
    }

    .top_Questionnaire .btn_secondary {
        margin: 0px auto 30px;
    }

    .top_blocks_3 {
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin: 30px 0;
    }

    .top_blocks_3.news {
        margin: 0;
    }

    .top_learn_right_article img {
        width: 100%;
        height: auto;
    }

    .top_blocks_3 li img {
        width: 100%;
        height: auto;
    }

    .top_blocks_3::-webkit-scrollbar-track {
        background: var(--primary_color);
        border: none;
    }

    .top_blocks_3 li {
        width: 75%;
        border-radius: 20px;
        min-width: 260px;
    }

    .top_blocks_6 {
        width: var(--sp_inner);
        display: block;
        margin: auto;
    }

    .top_blocks_6 li {
        width: 100%;
        padding: 16px 0;
        border-bottom: solid 1px #efefef;
    }

    .top_blocks_6 li:last-child {
        border: none;
    }

    .top_blocks_6 li p {
        -webkit-line-clamp: inherit;
    }

    .top_blocks_6 li .thumb {
        width: 21%;
    }

    .top_blocks_6 li img {
    }
}

#questionnaire_area .result {
    margin: 40px 0;
}
#questionnaire_area ul li {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: solid 1px #efefef;
}
#questionnaire_area ul li a {
    display: flex;
}
#questionnaire_area ul li .thumb {
    width: 30%;
    max-width: 160px;
    margin-right: 16px;
}
#questionnaire_area ul li .txt {
    flex: 1;
}
#questionnaire_area ul li .txt b {
    font-weight: 700;
    line-height: 1.2em;
    display: block;
    margin-bottom: 8px;
}
#questionnaire_area ul li .txt span {
    font-size: var(--font_size_s);
    display: block;
}
#questionnaire_area ul li.no_data {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    border: none;
}
@media screen and (max-width: 768px) {
    #questionnaire_area ul li {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
}

/***************
** サイド共通パーツ
***************/

dl.side_content {
    background-color: var(--water_color);
    margin: 24px 0;
}
dl.side_content dt {
    color: #ffffff;
    font-size: var(--font_size_s);
    font-weight: bold;
    text-align: center;
    padding: 4px;
    margin: 0;
    background-color: var(--basic_color);
}

dl.side_content dd ul {
    padding: 16px;
}
dl.side_content dd ul li {
    border-bottom: solid 1px #ffffff;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
dl.side_content dd ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
dl.side_content dd ul li a {
    display: block;
    position: relative;
}
dl.side_content dd ul li a:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    margin-left: 8px;
    background: var(--basic_color);
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -5px;
}

dl.side_content dd p {
    font-size: var(--font_size_s);
    padding: 16px;
    margin: 0 auto;
    max-width: 420px;
}
dl.side_content dd a {
    width: 100%;
    margin: 8px auto 0 auto;
}
/***************
** サイド共通パーツ・ランキング
***************/

dl.side_ranking {
    margin: 24px 0;
}
dl.side_ranking dt {
    color: #ffffff;
    font-size: var(--font_size_s);
    font-weight: bold;
    text-align: center;
    padding: 4px;
    margin: 0;
    background-color: var(--primary_color);
}
dl.side_ranking dd ul {
    padding: 10px 0;
}
dl.side_ranking dd ul li {
    border-bottom: solid 1px var(--water_color);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
dl.side_ranking dd ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
dl.side_ranking dd ul li a {
    display: flex;
    position: relative;
    align-items: center;
}
dl.side_ranking dd ul li a:after {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border-top: solid 2px var(--primary_color);
    border-right: solid 2px var(--primary_color);
    margin: -3px 0 2px 2px;
    right: 5px;
    top: 50%;
}
dl.side_ranking dd ul li a p {
    margin-right: 10px;
}
dl.side_ranking dd ul li a img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}









/***********************************
** サイドカラム
***********************************/
.top_side_area {
    /*width: 24%;*/
    width: 300px;
    margin: 20px 0;
    padding: 0 0 0 20px;
}

.toppage .top_side_area {
    margin: 0;
}

.top_side_area_sticky, .side_area_sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    overflow: hidden;
    z-index: 1;
    margin-top: -100px;
    padding-top: 100px;
}

/* .top_side_area_sticky > *:first-child {
    margin-top: 0;
} */

.side_banner1 a {
    display: block;
}
.side_banner1 a img {
    display: block;
}/*
@media screen and (max-width: 1024px) {
    .latest-question-contents,
    .latest-question-contents div {
        height: 100%;
    }
    .latest-question-contents .top_latest_content {
        display: flex;
        align-items: center;
        padding: 0;
    }
    .latest-question-contents .top_latest_main {
        display: flex;
        align-items: center;
    }
}*/
/*
.side_banner2 {
    margin-bottom: 30px;
}
*/
.side_merit {
    /* padding: 20px 8px 1px; */
    padding: 15px;
    background: var(--light_color);
    border-radius: 50px;
    text-align: center;
}

.side_merit h3 {
    font-size: var(--font_size_r);
    margin-bottom: 20px;
}

.side_merit_catch {
    color: var(--primary_color);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.side_merit_catch span {
    font-size: clamp(12px, 2rem, 25px);
    margin-left: 5px;
    transform: skewX(-10deg);
    display: inline-block;
}

.side_merit ul {
    counter-reset: number;
}

.side_merit li {
    /*font-size: clamp(1.0rem, 1vw, 1vw);*/
    margin-bottom: 15px;
    text-align: left;
    padding-left: 40px;
    position: relative;
}

.side_merit li::before {
    counter-increment: number;
    content: counter(number)"";
    color: #fff;
    font-size: var(--font_size_s);
    font-style: italic;
    line-height: 30px;
    text-align: center;
    width: 30px;
    background: var(--basic_color);
    clip-path: circle(46% at 50% 50%);
    left: 0;
    top: 3px;
    position: absolute;
}

.news_ranking {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

.news_ranking h2, .template_ranking h2 {
    color: var(--primary_color);
    font-size: var(--font_size_r);
    font-weight: bold;
    text-align: center;
    display: block;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--primary_color);
    padding-bottom: 10px;
    margin: 10px auto;
}

ul.news_ranking_title, ul.template_ranking_title {
    counter-reset: ranking-number;
    overflow: hidden;
    display: block;
}

ul.news_ranking_title li, ul.news_pr_title li, ul.template_ranking_title li {
    font-size: var(--font_size_s);
    font-weight: bold;
    position: relative;
    border-bottom: solid 1px var(--light_color2);
    padding: 10px 0 5px;
    display: flex;
}

ul.news_ranking_title li:before, ul.template_ranking_title li:before {
    color: #fff;
    background-color: var(--primary_color);
    counter-increment: ranking-number;
    content: counter(ranking-number);
    width: 22px;
    position: absolute;
    font-size: var(--font_size_s);
    font-family: "Helvetica", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.news_ranking_title li a, ul.template_ranking_title li a {
    padding-left: 30px;
}

.news_ranking_top {
    position: relative;
    text-align: right;
    padding: 10px 15px 0 0;
    font-size:small;
}
.news_ranking_top_text:before {
    content: "";
    width: 9px;
    height: 22px;
    background: #000;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
}

span.new_label {
    background: var(--accent_color);
    margin-right: 10px;
    padding: 2px;
    color: #fff;
    font-size: 0.6rem;
}

span.pr_label {
    background: var(--light_color2);
    padding: 2px;
    font-size: 0.6rem;
    margin-left: 10px;
}

.side_detail_area h2 {
    margin: 10px auto;
    text-align: center;
    display: block;
    border: none;
    background: var(--basic_color);
    color: #fff;
    font-size: var(--font_size_r);
    font-weight: bold;
    padding: 5px;
}

.side_movie_detail {
    margin: 20px auto 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--light_color2);
}

.side_movie_detail p {
    padding: 0px 8px;
}

.side_movie_detail img {
    width: 60%;
    margin: 0 auto 10px;
    display: block;

    height: 120px;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 6 / 4;
}

.side_movie_detail p span.side_title {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: bold;
}

.side_movie_detail p span.side_company, .side_seminar_detail p span.side_company {
    font-size: var(--font_size_xs);
}

.side_wp_detail {
    margin: 20px auto 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--light_color2);
}

.side_wp_detail img {
    width: 60%;
    margin: 0 auto 10px;
    display: block;

    height: 120px;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 6 / 4;
}

.side_wp_detail p span.side_title {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.side_wp_detail p span.side_company {
    font-size: 0.8rem;
}

.side_seminar_detail {
    margin: 20px auto 20px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--light_color2);
}

.side_seminar_detail img {
    width: 60%;
    margin: 0 auto 10px;
    display: block;

    height: 120px;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 6 / 4;
}

.side_seminar_detail p span.side_title {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: bold;
}

ul.side_service_category li a.btn_secondary {
    max-width: 350px;
    width: 80%;
    font-size: var(--font_size_s);
    margin: 10px auto;
}

.side_quiz_area {
    margin-bottom: 20px;
}

.side_quiz_area h2 {
    color: var(--primary_color);
    font-size: var(--font_size_r);
    font-weight: bold;
    text-align: center;
    display: block;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--primary_color);
    padding-bottom: 10px;
    margin: 10px auto;

}

ul.quiz_title li {
    font-size: var(--font_size_s);
    font-weight: bold;
    position: relative;
    border-bottom: solid 1px var(--light_color2);
    padding: 10px 0 5px;
    display: flex;
}

ul.quiz_title span.quiz_label {
    background: var(--accent_color);
    padding: 2px;
    color: #fff;
    font-size: 0.8rem;
    margin-left: 10px;
}
/*
.side_review_area {
    margin-bottom: 20px;
}

.side_review_area h2 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    display: block;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--primary_color);
    padding-bottom: 10px;
    margin: 10px auto;
}
ul.side_review_category li a.btn_secondary {
    max-width: 350px;
    width: 80%;
    font-size: var(--font_size_s);
    margin: 10px auto;
}
*/


ul.review_title {
    padding: 0 10px;
}

ul.review_title li {
    /* font-size: 0.9rem; */
    font-weight: bold;
    position: relative;
    border-bottom: solid 1px var(--light_color2);
    padding: 10px 0 5px;
    display: flex;
}

ul.review_title li:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}
.review_detail:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}
#review .blue.review_back {
    font-weight: normal;
}



ul.review_title li a {
    color: var(--primary_color);
    text-decoration: underline;
}
p.underline.blue {
    color: var(--primary_color);
}
p.underline.blue.review_main_icon {
    position: relative;
}
p.underline.blue.review_main_icon::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}
.qa_view_ranking, .qa_answer_ranking {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

.qa_view_ranking h2, .qa_answer_ranking h2 {
    color: var(--primary_color);
    font-size: 1rem;
    text-align: center;
    display: block;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--primary_color);
    padding-bottom: 10px;
    margin: 10px auto;
}

ul.qa_ranking_title {
    counter-reset: ranking-number;
    overflow: hidden;
    display: block;
}

ul.qa_ranking_title li {
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
    border-bottom: solid 1px var(--light_color2);
    padding: 10px 0 10px;
    display: flex;
}

ul.qa_ranking_title li:before {
    color: #fff;
    background-color: var(--primary_color);
    counter-increment: ranking-number;
    content: counter(ranking-number);
    width: 22px;
    position: absolute;
    font-size: 1rem;
    font-family: "Helvetica", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.qa_ranking_title li a {
    padding-left: 30px;
}

span.qa_label {
    background: var(--light_color2);
    padding: 2px;
    font-size: 0.8rem;
    margin-left: 10px;
}

.template_ranking {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

.template_ranking h2 {
    /* color:var(--primary_color); */
    /* font-size: 1rem; */
    /* text-align: center; */
    /* display: block; */
    /* letter-spacing: .5px; */
    /* border-bottom: 1px solid var(--primary_color); */
    /* padding-bottom: 10px; */
    /* margin: 10px auto; */
}

ul.template_ranking_title {
    /* counter-reset: ranking-number; */
    /* overflow: hidden; */
    /* display: block; */
}

ul.template_ranking_title li {
    /* font-size: 0.8rem; */
    /* font-weight: bold; */
    /* position: relative; */
    /* border-bottom: solid 1px var(--light_color2); */
    /* padding: 10px 0 10px; */
    /* display: flex; */
}

ul.template_ranking_title li:before {
    /* color: #fff; */
    /* background-color: var(--primary_color); */
    /* counter-increment: ranking-number; */
    /* content: counter(ranking-number); */
    /* width: 22px; */
    /* position: absolute; */
    /* font-size: 1rem; */
    /* font-family: "Helvetica", sans-serif; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

ul.template_ranking_title li a {
    /* padding-left: 30px; */
}

.top_main_area.service_applicaton {
    width: 66%;
    margin-right: 2%;
}

.top_main_area.service_applicaton .service_description {
    margin: 15px 0;
}

aside.side_applicaton h2.title {
    margin: 10px auto;
    text-align: center;
    display: block;
    border: none;
    background: var(--basic_color);
    color: #fff;
    font-size: var(--font_size_r);
    font-weight: bold;
    padding: 5px;
}

aside.side_applicaton .service_document {
    max-height: 700px;
    display: block;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

aside.side_applicaton .document_area {
    padding: 20px 10px 10px;
    margin-top: 15px;
    box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
}

aside.side_applicaton .document_img {
    max-width: 50px;
    min-width: auto;
    width: 100%;
    margin-right: 15px;
    padding-top: 0;
}

aside.side_applicaton .document_img img {
    display: block;
}

aside.side_applicaton .document_area i {
    position: absolute;
    top: 2px;
    right: -8px;
}

aside.side_applicaton .document_area i img {
    width: 70%;
}

#regist aside.side_applicaton .document_area h2 {
    margin: 0;
    border-bottom: none;
    font-size: 1rem;
}

aside.side_applicaton .document_area p {
    font-size: 0.8rem;
    text-align: left;
}

aside.side_applicaton .document_area.cat_service:before {
    content: "サービス資料";
    position: absolute;
    font-size: 12px;
    top: -2px;
    left: 0px;
    background: var(--light_color2);
    color: var(--basic_color_light);
    padding: 2px;
}

aside.side_applicaton .document_area.cat_wp:before {
    content: "お役立ち資料";
    position: absolute;
    font-size: 12px;
    top: -2px;
    left: 0px;
    background: var(--light_color2);
    color: var(--basic_color_light);
    padding: 2px;
}

@media screen and (max-width: 768px) {
    .top_side_area {
        /*width: var(--sp_inner);*/
        /*margin: auto;*/
        width: auto;
        margin: 0;
        padding: 0;

    }

    .top_side_area_sticky {
        position: static;
        top: 0;
        margin: 0;
        padding: 0;
    }
    .side_merit li {
        line-height: 1.5;
    }

    .side_merit li::after {
        top: 3px;
    }
}

/* サイドコンテンツ条件絞り込みのモーダル */
/* PC表示時にのみ表示 */
.top_side_area.wp.pc {
    display: block;
}

/* スマホ表示時に非表示にする要素 */
@media (max-width: 768px) {
    /* モーダル表示時にbodyのスクロールを禁止するスタイル */
    body.no-scroll {
        overflow: hidden;
    }

    .top_side_area.wp.pc {
        display: none; /* PC版のサイドバー全体をスマホで非表示 */
    }

    /* .side_con narrow-down が PC-display クラスを持つ場合もスマホで非表示 */
    /* このルールはPC版の絞り込み条件（サイドバー内にあるもの）をスマホで非表示にするためのもの */
    .side_con.narrow-down.pc-display {
        display: none;
    }

    /* モーダル表示ボタン */
    /* top の値はJavaScriptで動的に設定されるため、ここでは初期値として意味をなさないか、
       あるいはJavaScriptが読み込まれるまでの暫定値となります。
       最終的な位置はJavaScriptによって制御されます。 */
    .open-narrow-down-modal {
        position: fixed;
        right: 10px;
        z-index: 1000;
        padding: 9px 14px;
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 1.2;
        /* min-width: 120px; */
        height: auto;
        box-sizing: border-box;
        background-color: #fff;
        color: var(--primary_color);
        border: solid 1px var(--gray02);
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border-radius: 100vw;
        display: flex;
        align-items: center;
        gap: 3px;
    }
    .open-narrow-down-modal:before {
        font-family: 'Material Icons';
        content: '\e429';
        font-size: 1.6rem;
    }

    /* モーダルオーバーレイ */
    .modal-overlay {
        display: none; /* 初期状態では非表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
        z-index: 999; /* モーダル本体より奥 */
    }

    /* モーダル本体 */
    .modal-narrow-down {
        display: none; /* 初期状態では非表示 */
        position: fixed;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75%; /* スマホでの幅 */
        max-width: 350px; /* 最大幅 */
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 1001; /* 最前面 */
        overflow-y: auto; /* 内容が多い場合にスクロール */
        max-height: 60vh; /* 画面高さいっぱいにならないように */
        /* 元の .side_con narrow-down のスタイルを上書きまたは調整 */
        padding: 20px; /* 例えば、元のpaddingをモーダルとして調整 */
        border: none; /* 元のborderを削除するなど */
    }
    .modal-narrow-down.narrow-down .narrow-down_til {
        border-left: solid 3px var(--primary_color);
        margin-bottom: 14px;
        padding-left: 6px;
        line-height: 1.2em;
    }
    .modal-narrow-down.narrow-down .tag {
        line-height: 1.2em;
        font-size: 1.2rem;
        padding: 6px 10px;
    }
    .modal-narrow-down.narrow-down dd:first-of-type .tag_area {
        gap: 0;
    }
    .modal-narrow-down.narrow-down dd:first-of-type .tag_list {
        flex: none;
        max-width: none;
        margin: 0 5px 8px 0;
    }
    .modal-narrow-down.narrow-down .narrow-down_btn {
        border-radius: 0;
    }
    .modal-narrow-down.narrow-down .txt_Link.clear {
        text-decoration: none;
        font-size: 1.3rem;
        border-bottom: solid 1px var(--basic);
        margin-top: 14px;
    }

    /* 閉じるボタンのスタイル */
    .modal-close-btn {
        background: none;
        border: none;
        font-size: 1.8em;
        cursor: pointer;
        color: #555;
        position: absolute; /* dt 内で絶対位置指定 */
        top: -16px; /* dt の上部からの位置 */
        right: -12px; /* dt の右部からの位置 */
    }

    /* モーダル内のdt (タイトル部分) */
    .modal-narrow-down dt.side_ttl {
        position: relative; /* 閉じるボタンの基準にする */
        display: flex; /* タイトルとボタンを横並びにする */
        justify-content: space-between; /* タイトルとボタンを両端に配置 */
        align-items: center;
    }

    /* .sr-only は不要になったが念のため残す */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* PC表示時はモーダル関連要素を非表示 */
@media (min-width: 769px) {
    .open-narrow-down-modal,
    /*.modal-overlay,*/
    .modal-narrow-down {
        display: none !important;
    }
}

/***********************************
** サービス資料、WP、セミナー、ニュース、動画、クイズ
***********************************/
.detail_title {
    margin: 20px auto 20px;
}
/*
.detail_title.mb0 {
    margin: 40px auto 0;
}
*/
.detail_title h1 {
    text-align: left;
    display: block;
    font-size: var(--font_size_l);
    line-height: 1.2em;
    margin: 8px 0;
    /* font-weight: 400; */
}

.detail_title h1.movie_title {
    width: 150px;
}

.detail_title h1 i {
    font-size: clamp(12px, 14px, 25px);
    display: block;
}

.detail_title p.emphasis_b {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary_color);
}

.detail_title h1.middle {
    font-size: 24px;
    line-height: 1.6em;
    margin: 0 auto;
}

.detail_title p {
    line-height: 1.7em;
    margin-bottom: 8px;
}

.detail_title.sub_title {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.detail_title.sub_title p.pc_lead, .detail_title.sub_title p.news_lead {
    display: block;
    margin: 0 0 0 16px;
    flex: 1;
}


.detail_title2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary_color);
    margin: 0 0 15px 35px;
    position: relative;
    display: flex;
    align-items: center;
}

.detail_title2::before {
    position: absolute;
    top: 0;
    left: -35px;
}

.detail_title2.popularity::before {
    content: url('/img/common/icon_popularity.png');
}

.detail_title2.feature::before {
    content: url('/img/common/icon_feature.png');
}

.detail_title2::after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--primary_color);
}

.detail_title2::after {
    margin-left: 1rem;
}

.detail_title4 {
    display: block;
    width: 100%;
    padding: 3px;
    background: var(--basic_color);
    color: #fff;
    font-size: var(--font_size_m);
    font-weight: bold;
    text-align: center;
    margin: 0 auto 15px;
    box-sizing: border-box;
}
.detail_title4.recommend_ttl{
    margin: 0px auto;
}

.detail_title5 {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary_color);
    margin: 20px 0 15px 15px;
}

.detail_title5::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 22px;
    background-color: var(--primary_color);
    position: absolute;
    top: 0;
    left: -15px;
}

h5.detail_title5.about_title {
    border-bottom: none;
    text-align: left;
}
/*
@media screen and (max-width: 1024px) {

    .detail_title.sub_title.whitepaper h1 {
        width: 200px;
    }
}
*/
.detail_title.text_center h1 {
    text-align: center;
}
#emeao{
    padding-top:160px;
    margin-top:-160px;
}
.emeao{
	background: #f4f4f9;
	padding: 2.4rem 1.6rem 1.6rem;
	border-radius:8px;
	color: #1d2087;
	max-width: 100%;
	width: 100%;
    box-sizing: border-box;
}
.emeao-inner{
/*	padding: 0 1.6rem;*/
	max-width: 840px;
	width: 100%;
	margin: 0 auto;
}
.emeao-txt_box{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
	position:relative;
	z-index:2;
}
.emeao-til_box{
	width: 370px;
	margin: 0 auto;
	margin-bottom: 1.6rem;
}
.emeao-til{
	text-align: center;
	color: #fff;
	  position: relative;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: -0.7rem;
}
.emeao-til span{
    position: relative;
    z-index: 5;
    text-align: center;
    margin: 0 auto;
	display: block;
	font-size: 2.4rem;
    font-feature-settings: "palt";
	letter-spacing: 0.05em;
	font-weight: bold;
}
.emeao-til::before{
    transform: skewX(-24deg);
    content: ""; 
    position: absolute;
    top:0; 
	bottom: 0; 
	left: 0rem; 
	right: 0;
    z-index: 2;
	background-color: #1d2087;
	color: #fff;
	box-shadow: 12px 8px 0 0 rgb(246,147,49);
	display: block;
	width: 370px;
	margin:0 auto;
}
.emeao-subtil {
	font-weight: bold;
	position: relative;
	padding: 0.4rem 1.6rem;
	width: 320px;
	letter-spacing: 0.05em;
}
.emeao-subtil span.subtil_deco{
    position: relative;
    z-index: 4;
    text-align: center;
    margin: 0 auto;
/*    width: 100px;*/
}
.emeao-subtil span.subtil_color{
	color: #f69331;
}
.emeao-subtil::before{
    transform: skewX(-24deg);
    content: ""; 
    position: absolute;
    top:0; 
	bottom: 0; 
	left: 0; 
	right: 0;
    z-index: 3;
	background-color: #fff;
border:2px solid #1d2087;
	display: inline-block;
	width: auto;
	margin:0 auto;
}
.emeao-img{
	width: 90px;
	height: 90px;
	border:3px solid #1d2087;
	background: #fff;
	position:relative;
	border-radius:999px;
}
.emeao-img img{
	position:absolute;
	width: 84px;
	right:-0.4rem;
	top: -0.4rem;
}
.emeao-txt {
  position: relative;
  display: inline-block;
/*  margin: 1.5em 0 0em 15px;*/
	margin-bottom: 2rem;
  padding: 1.4rem 2rem;
	letter-spacing: 0.05em;
/*
  min-width: 120px;
  max-width: 100%;
*/
	width: calc(100% - 14.4rem);
  font-size: 1.6rem;
	line-height: 2.6rem;
  background: #FFF;
  border: solid 2px #1d2087;
  box-sizing: border-box;
	border-radius:4px;
	height: auto;
}

.emeao-txt:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  margin-top: -8px;
  border:8px solid transparent;
  border-right: 8px solid #FFF;
  z-index: 2;
}

.emeao-txt:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #1d2087;
  z-index: 1;
}

.emeao-txt span {
text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 204, 51, 0.8);
  text-decoration-skip-ink: none;
	font-weight: bold;
}


.emeao-feature{
	background:#1d2087;
	color: #fff;
	padding-top: 4rem;
	padding-bottom: 1rem;
	margin-top: -4rem;
	position:relative;
}
.emeao-feature::before{
	content:"";
	display: block;
	width: calc(100% + 3.2rem);
	height: 100%;
	background:#1d2087;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index:1;
}
.emeao-feature .emeao-inner{
	position:relative;
	z-index:2;
}
.emeao-feature_li{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.6rem;
	flex-wrap: wrap;
	
}
.emeao-feature_li li{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	border:1px solid white;
	border-radius:999px;
	font-weight: bold;
	padding: 0.2rem;
	justify-content: space-between;
	margin:0 1rem;
	margin-bottom: 1rem;
	width: 230px;
	-ms-align-items: center;
	align-items: center;
}
.emeao-feature_img{
	background: #fff;
	border-radius:999px;
	width: 64px;
	height: 64px;
}
.emeao-feature_li p{
	width: calc(100% - 7.6rem);
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.05em;
}
.emeao-feature_txt{
	font-size: 1.3rem;
	line-height: 2rem;
	text-align: center;
	letter-spacing: 0.08em;
/*	font-weight: bold;*/
}
.emeao_link{
	padding-top: 2.8rem;
	position:relative;
}
.emeao_sankaku{
	width: 64px;
	 top: -0.6rem;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.emeao_link_li{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
}
.emeao_link_li li{
	width: calc(25% - 1.6rem);
	margin:0 0.8rem;
	margin-bottom: 1.6rem;
}
.emeao_link_li li a{
	color: #1d2087;
	font-weight: bold;
	display: block;
	padding-left: 0.8rem;
/*	padding-bottom: 0.2rem;*/
/*	font-size: 1.7rem;*/
	border-bottom:1.6px solid #1d2087;
	position:relative;
}
.emeao_link_li li a::after{
  position: absolute;
  content: '';
  bottom: 0.5rem;
  right: 1rem;
  display: block;
  width: 7px;/*幅*/
  height: 12px;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-image: url("../img/emeao/emeao_arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.guide-fv {
    background-image: url(../img/guide/guide-fv.jpg);
    background-size:cover;
    background-position:center top 20%;
    padding:3.2rem 1.6rem 6.4rem;
    box-sizing:border-box;
    margin: 0.8rem calc(50% - 50vw) 0;
    width: 100vw;
}
.guide-fv .guide-logo{
    width: 240px;
    background:white;
    border-radius:2px;
    box-sizing:border-box;
    padding:1rem 1.6rem 0.4rem;
    margin:0 auto 1.6rem;
}
.guide-fv h2{
    color:white;
    font-size:2.6rem;
    text-align: center;
    margin:0;
    border-bottom: none;
    font-weight:bold;
    width: 100%;
    letter-spacing:0.08em;
}
.guide-category{
    display:flex;
    border-radius:999px;
    background:white;
    box-shadow: 2px 0 8px 0 rgba(1,36,76,.1);
    padding:8px;
    padding-right:4rem;
    max-width:calc(100% - 3.2rem);
    width:740px;
    margin:-4.8rem auto 4rem;
    position:relative;
    z-index:2;
    box-sizing:border-box;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items:center;
}
.guide-category h3{
    width:90px;
    height:90px;
    border:2px solid #004986;
    border-radius:999px;
    position:relative;
    margin:0;
    margin-right:2rem;
}
.guide-category h3 span{
    display:block;
    font-size:1.6rem;
    color:#004986;
    height:20px;
width:68px;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

}
.guide-category_li{
    display:flex;
    width:calc(100% - 120px);
    flex-wrap: wrap;
    justify-content: flex-start;
    
}
.guide-category_li li{
    color:#004986;
    border-radius:999px;
    font-size:1.7rem;
    padding: 0.4rem 1.2rem;
    background: var(--water_color);
    font-weight:bold;
margin: 0.4rem;
}
.guide-category_li li.color02{
    background:#e4eff9;
}
.top_bottom_outline-guide,.news_point_guide{
    width:880px;
    margin: 0 auto 3.2rem;
    max-width:calc(100% - 3.2rem);
    box-sizing:border-box;
}

.news_point_guide h1 {
    text-align:center;
    margin-top:0;
    margin-bottom:1rem;
}
.news_point_guide h1 span{
    color:var(--primary_color);
    font-size:2.4rem;
    border-bottom:1px solid var(--primary_color);
    padding-bottom:0.6rem;
}
.news_point_guide {
    padding:2.4rem 3.2rem;
}
.news_point_guide .txt{
    color:var(--primary_color);
    font-weight:bold;
    margin-bottom:0;
}

.guide-btn_li{
    display:flex;
    justify-content: center;
    margin-bottom:4.8rem;
    max-width:calc(100% - 1.6rem);
}
.guide-btn_li>div{
    width:320px;
}
.guide-btn_li>div a{
    margin:0;
    width:100%;
}
.guide-btn_li>div:first-of-type{
    margin-right:2rem;
}
.guide-merit01 {
    background-image: url(../img/guide/guide-merit.jpg);
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    padding: 4rem 0 0.6rem;
    font-size: 2.8rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin: 0.8rem calc(50% - 50vw) 7.2rem;;
    width: 100vw;
}
.guide-merit01 h2{
    margin-bottom:2.8rem
}
.guide-merit01 h2 span{
    border-bottom:1px solid #fff;
    display:block;
    padding-bottom:0.6rem;
}
.guide-merit01_li{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
    width: 1080px;
    max-width:100%;
    padding: 0 1.6rem;
    margin: 0 auto -6.4rem;	
    position:relative;
    z-index:2;
    box-sizing:border-box;
}
.guide-merit01_li li{
    background: #fff;
    border-radius:6px;
    border:2px solid #e5ecf3;
    padding: 0.4rem;
    padding-bottom: 2rem;
    width: 310px;
    margin-bottom:2rem;
    box-shadow: 8px 0 16px 0 rgba(1,36,76,.1);
}
.guide-merit01_li li img{
    border-radius:4px;
    box-shadow: 6px 0 8px 0 rgba(1,36,76,.1);
    display: block;
    width: 100%;
    margin-bottom: 1.6rem;
}
.guide-merit01_li li h3{
    color: var(--primary_color);
    font-size: 1.7rem;
    text-align: center;
    position:relative;
    padding-bottom: 1rem;
    border:none;
    margin-bottom: 1.2rem;
}
.guide-merit01_li li h3::after{
    content:'';
    width: 48px;
    height: 3px;
    border-radius:1px;
    background: var(--primary_color);
    display: block;
    position:absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.guide-merit01_li li p{
    color: #67696a;
    font-size: 1.5rem;
    font-weight: normal;
    padding: 0 1.4rem;
    text-align: left;
}
.balloon01 {
    position: relative;
    /* display: inline-block; */
    margin: 0 auto 3.2rem;
    padding: 1.6rem 2rem;
      box-sizing: border-box;
    max-width: calc(100% - 2.4rem);
      width: 480px;
      border-radius:8px;
    color: #555;
    font-size: 16px;
    background: var(--primary_color);
      box-shadow: 4px 0 8px 0 rgba(1,36,76,.1)
  }
  
  .balloon01:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid var(--primary_color);
  }
  
  .balloon01 h2 {
    margin: 0;
    padding: 0;
      font-weight: bold;
      text-align:center;
      border:none;
      color: #fff;
      font-size: 2rem;
  }
      .balloon01 h2 span{
          color: #ffcc00;
      }
      .guide-merit02_li{
        width: 720px;
        padding: 0 1.6rem;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width:calc(100% - 3.2rem);
        margin-bottom:1.6rem;
      }
      .guide-merit02_li li{
        border-radius:4px;
        border:2px solid var(--primary_color);
        background: #fff;
        position:relative;
        padding: 2.4rem 1.8rem 2.4rem 4rem;
        width: 324px;
        box-sizing:border-box;
        margin-bottom:1.6rem;
      }
      .guide-merit02_li .item01::after, .guide-merit02_li li.item02::after,.guide-merit02_li li.item03::after,.guide-merit02_li li.item04::after{
        content:'';
        position: absolute;
        z-index:2;
        top: 50%;
        right: 1.4rem;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        display: inline-block;
    
    
        background-size: contain;
        vertical-align: middle;
      }
      .guide-merit02_li .item01::after{
        width: 65px;
        height: 82px;
        background-image: url(../img/guide/guide-merit_icon01.png);
      }
      .guide-merit02_li li.item02::after{
        width: 70px;
        height: 59px;
        background-image: url(../img/guide/guide-merit_icon02.png);
      }
      .guide-merit02_li li.item03::after{
        width: 78px;
        height: 71px;
        background-image: url(../img/guide/guide-merit_icon03.png);
      }
      .guide-merit02_li li.item04::after{
        width: 68px;
        height: 72px;
        background-image: url(../img/guide/guide-merit_icon04.png);
      }
      .guide-merit02_li li .txt{
        font-size: 1.8rem;
        font-weight: bold;
        color: var(--primary_color);
        margin: 0;
        padding: 0;
        position:relative;
        z-index:3;
      }
      .guide-merit02_li li .num{
        position: absolute;
        top: 50%;
        left: -1.6rem;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        height: 44px;
        width: 44px;
        border-radius:999px;
        background: var(--primary_color);
        line-height: 44px;
      }
      .guide-merit02_li li .num span{
        display: block;
        width: 26px;
        height: 16px;
        text-align: center;
        margin: auto;
        font-weight:bold;
        font-size: 1.9rem;
        color: #fff;
    }

.guide-point {
    background: url("../img/guide/guide-point_bg.jpg");
    background-size: cover;
    position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}
.guide-point:before {
    position: absolute;
    content: url("../img/guide/guide-point_bg2.png");
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}
.guide-point:after {
    position: absolute;
    content: '';
    background: url("../img/guide/guide-point_coin.png");
    background-size: cover;
    width: 100%;
    height: 300px;
    display: block;
    bottom: 0;
    left: 0;
}
.guide-point .coin {
    position: relative;
    z-index: 1;
}
.guide-point .coin:before {
    position: absolute;
    content: url("../img/guide/guide-point_coin2.png");
    top: -30px;
    left: 0;
    display: block;
}
.guide-point .coin:after {
    position: absolute;
    content: url("../img/guide/guide-point_coin3.png");
    top: -30px;
    right: 0;
    display: block;
}
.guide-point .inner {
    width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--primary_color);
}
.guide-point h2,
.guide-cont h2 {
    font-size: 2.6rem;
    display: block;
    border-bottom: none;
    padding: 40px 0 10px;
    margin: 0 auto 10px;
}
.guide-cont h2 {
    padding: 50px 0 10px;
}
.guide-point h2 span,
.guide-cont h2 span {
    font-weight: bold;
    border-bottom: solid 1px var(--primary_color);
    padding-bottom: 5px;
}
.guide-point p {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 3.2rem;
}
.guide-point p.other {
    font-size: 2rem;
    line-height: 2.8rem;
}
.guide-point .flex {
    display: flex;
    justify-content: center;
}
.guide-point .point_btn01 {
    margin: 25px;
    width: 410px;
}
.guide-point .point_btn01 .caption {
    background: #fff;
    border-radius: 5px;
    width: 375px;
    height: 55px;
    border: solid 1px var(--water_color);
    font-size: 1.4rem;
    line-height: 2rem;
    z-index: 2;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guide-point .point_btn01 .caption:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #fff;
  }
.guide-point .point_btn01 a {
    background: var(--primary_color);
    color: #fff;
    border-radius: 4px;
    display: flex;
    position: relative;
    font-weight: bold;
    font-size: 2rem;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    height: 90px;
    padding-top: 5px;
    box-shadow: 4px 0 8px 0 rgba(1,36,76,.1);
}
.guide-point .point_btn01 a.btn01:before {
    content: url('../img/guide/guide-point_icon01.png');
    position: absolute;
    top: 15px;
    left: 0;
}
.guide-point .point_btn01 a.btn02:before {
    content: url('../img/guide/guide-point_icon02.png');
    position: absolute;
    top: 10px;
    left: 0;
}
.guide-point .point_btn01 a span.title {
    text-align: left;
    line-height: 2.4rem;
    margin-right: 20px;
}
.guide-point .point_btn01 a.btn02 span.title {
    margin-left: -25px;
}
.guide-point .point_btn01 a span.point {
    font-size: 3.2rem;
    font-family: roboto;
    font-style: italic;
    position: relative;
}
.guide-point .point_btn01 a span.point:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-left: 11px solid var(--water_color);
}
.guide-point .point_btn01 a span.point em {
    font-size: 5.2rem;
    color: #ffcc00;
    letter-spacing: -0.1em;
    margin-right: 10px;
}
.guide-point .point_btn01 a.btn02 span.point em {
    letter-spacing: -0.05em;
    margin-right: 5px;
}
.guide-point .point_btn01 .arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 1px #fff;
    position: absolute;
    right: 10px;
}
.guide-point .point_btn01 .arrow:before {
    content: '';
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: -1px;
    right: 9px;
}
.guide-point .flex.cont02 {
    align-items: flex-end;
}
.guide-point .point_btn01.white {
    margin: 5px 10px 35px;
    width: 290px;
}
.guide-point .point_btn01.white .caption {
    background: #fe0100;
    border-radius: 5px;
    width: 140px;
    height: 25px;
    border: 0;
    font-size: 1.5rem;
    margin-right: 30px;
    color: #fff;
}
.guide-point .point_btn01.white .caption:before {
    margin-left: -5px;
    border: 5px solid transparent;
    border-top: 5px solid #fe0100;
  }
.guide-point .point_btn01.white a {
    background: #fff;
    border: solid 2px var(--primary_color);
    color: var(--primary_color);
    border-radius: 4px;
    font-size: 1.5rem;
    margin-top: -10px;
    height: 70px;
    padding-top: 0;
}
.guide-point .point_btn01.white a.btn01:before {
    display: none;
}
.guide-point .point_btn01.white a span.title {
    line-height: 2.4rem;
    margin: 0 15px 0 -30px;
}
.guide-point .point_btn01.white a.btn03 span.title {
    line-height: 1.8rem;
}
.guide-point .point_btn01.white a span.point {
    font-size: 2.6rem;
}
.guide-point .point_btn01.white a span.point:before {
    left: -10px;
    border: 7px solid transparent;
    border-left: 8px solid var(--water_color);
}
.guide-point .point_btn01.white a span.point em {
    font-size: 4.3rem;
    margin-right: 7px;
}
.guide-point .point_btn01.white a.btn02 span.point em,
.guide-point .point_btn01.white a.btn03 span.point em {
    letter-spacing: -0.05em;
}
.guide-point .point_btn01.white .arrow {
    width: 20px;
    height: 20px;
    border: solid 1px var(--primary_color);
    right: 10px;
}
.guide-point .point_btn01.white .arrow:before {
    width: 7px;
    height: 18px;
    background: var(--primary_color);
    top: -3px;
    right: 6px;
}
.guide-point p.yellow {
    font-size: 2rem;
    line-height: 2.8rem;
    background: #ffcc00;
    padding: 7px 15px;
    display: inline;
}
.guide-point .more {
    text-align: right;
    font-size: 2rem;
    font-weight: bold;
    margin: 20px 60px 0 0;
}
.guide-point .more a {
    color: var(--primary_color);
    position: relative;
    display: flex;
    justify-content: flex-end;
    display: inline-block;
}
.guide-point .more .arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px var(--primary_color);
    position: absolute;
    right: -50px;
    top: -5px;
}
.guide-point .more .arrow:before {
    content: '';
    width: 9px;
    height: 22px;
    background: var(--primary_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: 4px;
    right: 15px;
}
.guide-cont {
    color: var(--primary_color);
    text-align: center;
}
.guide-cont .inner {
    width: 800px;
    border: solid 1px var(--water_color);
    border-radius: 8px;
    margin: 20px auto 40px;
    box-shadow: 0 0 20px 0 rgba(1,36,76,.05);
}
.guide-cont .title {
    background: var(--water_color);
    border-radius: 8px 8px 0 0;
    padding: 15px 0;
}
.guide-cont .title span {
    display: block;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 2.8rem;
}
.guide-cont ul {
    margin: 20px auto;
    display: flex;
    justify-content: center;
}
.guide-cont ul li {
    margin: 0 20px;
}
.guide-cont h4 {
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-left: 30px;
}
.guide-cont .read h4:before {
    content: url('../img/guide/guide-cont_icon01.png');
    position: absolute;
    top: 5px;
    left: -40px;
}
.guide-cont .search h4:before {
    content: url('../img/guide/guide-cont_icon02.png');
    position: absolute;
    top: 2px;
    left: -35px;
}
.guide-cont .learn h4:before {
    content: url('../img/guide/guide-cont_icon03.png');
    position: absolute;
    top: 5px;
    left: -30px;
}
.guide-cont .cont_btn01 {
    margin: 15px auto;
    width: 220px;
}
.guide-cont .cont_btn01 .caption {
    background: #fff;
    border-radius: 2px;
    width: 190px;
    height: 35px;
    border: solid 1px var(--water_color);
    font-size: 1rem;
    line-height: 1.3rem;
    z-index: 2;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guide-cont .cont_btn01 .caption:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top: 5px solid #fff;
  }
.guide-cont .cont_btn01 a {
    background: var(--primary_color);
    color: #fff;
    border-radius: 4px;
    display: flex;
    position: relative;
    font-weight: bold;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: -7px;
    padding-top: 5px;
    line-height: 45px;
}
.guide-cont .cont_btn01 a:before {
    content: '';
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: 10px;
    right: 9px;
}

@media screen and (max-width: 768px) {
    .detail_title h1.middle {
        font-size: 20px;
        line-height: 1.6em;
    }
    .detail_title.sub_title p.news_lead {
        margin: 10px auto;
        width: 90%;
    }
    .detail_title h1 {
        display: block;
    }
    .detail_title2 {
        font-size: clamp(12px, 1.1rem, 25px);
        font-weight: bold;
        color: var(--primary_color);
        margin: 0 20px 15px 50px;
        position: relative;
        display: flex;
        align-items: center;
    }
    .detail_title2::before {
        position: absolute;
        top: -2px;
        left: -35px;
    }
    .detail_title3 {
        display: block;
        width: 60%;
        border-radius: 30px;
        padding: 3px 5px;
        background: var(--primary_color);
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 15px auto 0;
    }
    .detail_title4 {
        display: block;
        padding: 3px 0;
        background: var(--basic_color);
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }
    .detail_title5 {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        color: var(--primary_color);
        margin: 20px 0 15px 15px;
    }
    .detail_title5::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 22px;
        background-color: var(--primary_color);
        position: absolute;
        top: 0;
        left: -15px;
    }
    .detail_title.sub_title p.pc_lead {
        margin: 0 0 0 20px;
    }
    .detail_title.sub_title p.news_lead {
        margin: 0 0 0 20px;
        padding-left: 16px;
    }

    .emeao-txt_box {
        align-items: flex-start;
    }
    .emeao-img{
        width: 80px;
        height: 80px;
    }
    .emeao-txt{
        width: calc(100% - 10.4rem);
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
    .emeao-feature_li p br{
        display: none;
    }
    .emeao-feature_li li{
        width: calc(50% - 1.8rem);
        margin: 0 0.6rem;
        margin-bottom: 1rem;
        padding-right:1rem;
        box-sizing: border-box;
    }
    .emeao-feature_li p{
        font-size: 1.3rem;
        line-height: 1.8rem;
        width: calc(100% - 5.6rem);
    }
    .emeao-feature_txt{
        font-size: 1.2rem;
    }
    .emeao_link_li li {
        width: calc(33% - 1.6rem);
    }
    .emeao_link_li li a{
        font-size: 1.4rem;
        padding-left: 0.4rem;
    }
    .emeao_link_li li a::after{
        right: 0.4rem;
    }
    .emeao-feature_img{
        width: 48px;
        height: 48px;
    }
    .top_bottom_outline-guide{
        padding-left:1.6rem;
        padding-right:1.6rem;
    }
    
    .guide-fv {
        background-image: url(../img/guide/guide-fv_sp.jpg);
        width: 100vw;
    } 
    .guide-fv .guide-logo{
        width: 200px;
    }
    .guide-fv h2 {
        font-size: 2.4rem;
    }
    .guide-merit01_li li img{
        margin-bottom: 0;
    }
    .guide-merit02_li li{
        padding: 2rem 1.8rem 2rem 4rem;
    }

    .guide-merit02_li .item01::after{
        width: 40px;
        height: 50px;
        background-repeat: no-repeat;
    }
      .guide-merit02_li li.item02::after{
        width: 50px;
        height: 60px;
        background-repeat: no-repeat;
        top: 40px;
    }
      .guide-merit02_li li.item03::after{
        width: 50px;
        height: 51px;
        background-repeat: no-repeat;
    }
      .guide-merit02_li li.item04::after{
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
    }
    .guide-category {
        padding: 0.8rem 1rem;
        border-radius: 4px;
    }
    .guide-category h3 {
        margin-right: 0rem;
        margin-bottom: 1rem;
        width: 100%;
        height: auto;
        text-align: center;
        border: none;
        padding-bottom: 0rem;
        border-bottom: 1.6px solid var(--primary_color);
        border-radius: 0;
    }
    .guide-category h3 span {
        text-align: center;
        display: inline-block;
        font-size: 1.6rem;
        position: inherit;
        text-align: center;
        top: inherit;
        left: inherit;
        transform: inherit;
        -webkit-transform: inherit;
        }
    .guide-category_li {
        width: 100%;
        justify-content: center;
    }
    .guide-category_li li {
        font-size: 4vw;
        margin: 0.3rem 0.2rem;
        padding: 0.2rem 0.5rem;
        border-radius: 2px;
    }
    .guide-merit01 {
        width:100vw;
    }
    .guide-merit02_li li {
        width:100%;
        margin-left:auto;
        margin-right:auto;
        box-sizing: border-box;
    }
    .guide-merit02_li li .txt {
        font-size: 1.5rem;
    }
    .about_equation_flex.guide {
        padding-bottom: 15px;
    }
    .guide-btn_li {
        max-width:calc(100% - 3.2rem);
        margin: 0 auto 4.8rem;
    }
    .guide-point:after {
        background: url("../img/guide/guide-point_coin.png") no-repeat;
        background-size: contain;
        background-position: bottom center;
    }
    .guide-point:before,
    .guide-point .coin:after {
        content: none;
    }
    .guide-point .inner {
        max-width:calc(100% - 3.2rem);
    }
    .guide-point h2,
    .guide-cont h2 {
        font-size: 2rem;
    }
    .guide-cont h2 {
        line-height: 4rem;
        padding-top: 30px;
    }
    .guide-point p,
    .guide-point p.other {
        font-size: 1.5rem;
        line-height: 2.4rem;
    }
    .guide-point p.other {
        margin-bottom: 25px;
    }
    .guide-point .flex {
        display: block;
    }
    .guide-point .point_btn01 {
        margin: 15px auto;
        max-width: calc(100% - 1.6rem);
    }
    .guide-point .point_btn01 .caption {
        height: 45px;
        font-size: 1.2rem;
        line-height: 1.6rem;
        max-width:calc(100% - 3rem);
    }
    .guide-point .point_btn01 a {
        font-size: 1.6rem;
        height: 70px;
    }
    .guide-point .point_btn01 a.btn01:before {
        top: 10px;
    }
    .guide-point .point_btn01 a.btn02:before {
        top: 5px;
    }
    .guide-point .point_btn01 a span.title {
        line-height: 2rem;
    }
    .guide-point .point_btn01 a span.point {
        font-size: 2.6rem;
    }
    .guide-point .point_btn01 a span.point:before {
        border: 7px solid transparent;
            border-left: 8px solid var(--water_color);
    }
    .guide-point .point_btn01 a span.point em {
        font-size: 4rem;
        margin-right: 5px;
    }
    .guide-point .point_btn01 .arrow {
        width: 20px;
        height: 20px;
    }
    .guide-point .point_btn01 .arrow:before {
        width: 7px;
        height: 15px;
        right: 6px;
    }
    .guide-point .point_btn01.white {
        margin: 20px 10px;
        width: calc(100% - 1.6rem);
    }
    .guide-point .point_btn01.white:last-child {
            margin-top: -10px;
    }
    .guide-point .point_btn01.white .caption {
        border-radius: 3px;
        width: 120px;
        height: 22px;
        font-size: 1.4rem;
        margin-right: 60px;
    }
    .guide-point .point_btn01.white .caption:before {
        margin-left: 4px;
        border: 4px solid transparent;
        border-top: 4px solid #fe0100;
    }
    .guide-point .point_btn01.white a {
        margin-top: -7px;
        height: 50px;
    }
    .guide-point .point_btn01.white a span.point em {
        font-size: 3.6rem;
        margin-right: 5px;
    }
    .guide-point p.yellow {
        font-size: 1.6rem;
        padding: 2px 5px;
    }
    .guide-point .more {
        font-size: 1.6rem;
        margin: 20px 40px 0 0;
    }
    .guide-point .more .arrow {
        width: 20px;
        height: 20px;
        right: -30px;
        top: 2px;
    }
    .guide-point .more .arrow:before {
        width: 7px;
        height: 15px;
        top: -1px;
        right: 6px;
    }
    .guide-cont .inner {
        width: calc(100% - 3.2rem);
        margin: 20px auto;
    }
    .guide-cont .title {
        padding: 5px;
        font-size: 1.4rem;
    }
    .guide-cont .title span {
        font-size: 1.6rem;
    }
    .guide-cont ul {
        margin: 15px auto;
        display: block;
    }
    .guide-cont ul li {
        margin: 20px;
    }
    .guide-cont .cont_btn01 {
        margin: 10px auto;
        width: 100%;
    }
    .guide-cont .cont_btn01 .caption {
        width: 90%;
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .detail_title.sub_title {
        display: block;
    }
    .detail_title.sub_title h1 {
        text-align: center;
        margin: 0;
        width: auto;
    }/*
    .detail_title h1 {
        margin-top: 40px;
    }*/
    .detail_title.sub_title p.pc_lead {
        margin: 10px 0 20px 0;
        width: auto;
        padding: 0;
    }
    .detail_title.sub_title p.news_lead {
        padding: 0;
    }
    .emeao-feature_li li{
        width: calc(100% - 1.6rem);
        margin: 0 0.8rem;
        margin-bottom: 1rem;
    }
    .emeao_link_li li {
        width: calc(50% - 1.6rem);
        }
        .emeao-til span{
            font-size:2rem;
        }
        .emeao-subtil{
            width:280px;
            /* text-align: center; */
            font-feature-settings: "palt";
            font-size: 1.5rem;
        }
        .emeao-til_box,.emeao-til::before{
            width:300px;
        }
        .emeao-txt{
            font-size: 1.4rem;
    line-height: 2.3rem;
    padding: 1.2rem 1.6rem;
        }
}

.service_detail .detail_title4, .seminar_detail .detail_title4, .movie .detail_title4, .movie_detail .detail_title4 {
    background: var(--primary_color);
    border-radius: 20px;
}

.seminar_detail.entry h2 {
    background: var(--light_color);
    line-height: 1.5rem;
    font-size: 1rem;
    border: none;
    padding: 15px;
    margin-bottom: 20px;
    display: block;
}

.movie.category .detail_title4 {
    background: var(--basic_color);
    border-radius: 0;
    width: 100%;
    font-size: 20px;
}


.keyword {
    margin: 0 auto 20px;
    text-align: left;
}
.service_search_tag > a > .tag {
    color: #fff;
    border: solid 1px #fff;
}

.service_matter h4, .service_matter_menu li a {
    color: #fff;
    display: inline-block;
    width: 100%;
}

.service_matter_menu {
    display: flex;
    margin-top: 0px;
}

.service_matter_menu li {
    margin: 30px 20px 0 0;
    padding-left: 15px;
    position: relative;
}

.service_matter_menu1 li::before,.service_matter_menu2 li::before,.service_matter_menu3 li::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -2px;
    top: -5px;
}

.current_link .btn_secondary {
    max-width: 100%;
    margin-top: 5px;
}

.service_contents .category_top_sort {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 0px 12px 0px;
}

.service_contents .select_area {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 0px 12px 0px;
}

.link_detail h4 {
    font-size: 1.2rem;
    margin: 0 auto 10px;
    position: relative;
    display: inline-block;
    padding-right: 2rem;
}

.link_detail h4::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 3px var(--primary_color);
    border-right: solid 3px var(--primary_color);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
}

.col2,.col3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
}

.service_detail .col3 {
    max-width: 600px;
    margin: 40px auto;
    padding: 8px;
    background: #F6F6F6;
}

.document_box {
    margin-bottom: 16px;
}

.document_box:after {
    content: "";
    display: block;
    clear: both;
}

.document_box:nth-child(3n) {
    margin-right: 0;
}

.service_detail .documents_img {
    float: left;
    width: 40%;
    padding-right: 16px;
    box-sizing: border-box;
}

.service_detail .documents_img img {
    display: block;
    border: solid 1px #efefef;
}

.service_detail .documents_txt {
    float: right;
    width: 60%;
    padding-left: 16px;
}

.service_detail .document_box h5 {
    margin-top: 0;
    margin-left: 0;
    padding-left: 15px;
    width: 60%;
    float: right;
    box-sizing: border-box;
}
.service_detail .document_box h5:before {
    left: 0;
}

.service_detail .document_box p {
    width: 60%;
    float: right;
}

.service_detail .data {
    flex: 1;
    padding: 8px;
}

.service_detail p.data {
    background: #fff;
    padding: 10px;
}

.service_detail p.data_txt_01 {
    background: #fff;
    padding: 8px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_detail p.data_txt_02 {
    margin-bottom: 0;
    word-break: break-all;
}

.service_detail a:hover {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .service_detail .col3 {
        display: block;
        padding: 4px;
    }
    .service_detail .data {
        display: flex;
        padding: 4px;
    }
    .service_detail p.data_txt_01 {
        width: 40%;
        min-width: 120px;
        margin: 0;
    }
    .service_detail p.data_txt_02 {
        margin: 0;
        flex: 1;
        text-align: left;
        padding: 8px;
    }
}

@media screen and (max-width: 480px) {
    .document_box {
        display: block;
        margin-bottom: 32px;
    }
    .service_detail .documents_img {
        width: auto;
        float: none;
        padding: 0;
        margin-bottom: 16px;
    }
    .service_detail .document_box h5 {
        width: auto;
        float: none;
        margin-bottom: 16px;
    }
    .service_detail .document_box p {
        width: auto;
        float: none;
    }
}

.infiniteslide_wrap {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.infiniteslide_wrap ul {
    margin-bottom: 0;
}

.movie {
    margin-bottom: 40px;
}

.movie.popular {
    margin-bottom: 20px;
}
.movie.popular ul li {
    max-width: none;
    margin: 0;
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
}
.movie.popular ul li .movie_article {
    height: 100%;
    padding: 0;
    margin: 0 auto;
}
.movie.popular ul li .movie_article p {
    margin: 0 0 8px 0;
}
.movie.popular ul li .movie_article span {
    margin: 0;
}
.movie.popular ul li .movie_article .movie_contents {
    padding: 16px;
    margin: 0;
}
.movie.popular ul li .movie_article img:first-child {
    width: 100%;
    margin: 0;
}

.movie.feature {
    text-align: center;
}

.movie img {
    width: auto;
    margin: 0;
}

.movie ul {
    display: flex;
    white-space: nowrap;
    position: relative;
    /* padding: 0 30px; */
}

.movie .slick-list.draggable {
    overflow: hidden;
}

.movie ul li {
    padding: 8px;
    /*height: 100%;*/
    box-sizing: border-box;
}

.movie_category_title {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: var(--primary_color);
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 auto 15px;
    display: flex;
    justify-content: space-between;
}

.movie_category_title h4 {
    font-size: 20px;
    display: block;
    margin-left: 20px;
}

.movie_category_title a {
    display: inline-block;
    position: relative;
    margin-right: 40px;
    color: #fff;
    padding: 3px;
}

.movie_category_title a:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: -15px;
    margin-top: -5px;
}

.movie.category .detail_title4 {
    background: var(--basic_color);
    border-radius: 0;
    width: 100%;
    font-size: 20px;
}

.movie.list ul {
    display: flex;
    flex-wrap: wrap;
}

.movie.list ul a {
    width: 33.33%;

}

.movie_article {
    box-shadow: var(--box_shadow);
    /*margin: 10px auto 20px;*/
    height: 100%;
}

.movie_article img {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

.movie_article .movie_contents {
    padding: 16px 16px 12px;
}

.movie_contents_tag {
    margin: 0 16px 12px;
    display: flex;
    flex-wrap: wrap;
}

.movie_article p {
    font-size: var(--font_size_r);
    font-weight: bold;
    line-height: 1.3em;
    margin: 0 auto 8px;
    white-space: normal;
}

.movie_article span {
    font-size: var(--font_size_s);
    line-height: 1.3em;
    position: relative;
    padding-left: 17px;
    display: block;
    white-space: normal;
}

.movie_article span::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: 0px;
    top: -7px;
}

.movie_thumb {
    position: relative;
}

.movie_thumb i.time {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 1px 5px;
    font-size: 14px;
}

.movie_thumb .movie_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 50px;
}

.movie_login {
    background: var(--water_color);
    text-align: center;
    padding: 30px;
    margin: 0 0 50px;
}

.movie_login img {
    width: 398px;
}

.movie_login b {
    font-size: var(--font_size_m);
    font-weight: bold;
    margin-bottom: 16px;
    display: block;
}

.movie_login p {
    font-weight: bold;
    margin-top: 16px;
}

.movie_login b br {
    display: none;
}

.movie_login .btn {
    display: flex;
    justify-content: center;
    margin: 0;
}

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

    .movie_login p {
        margin-bottom: 16px;
    }

    .movie_login b {
        margin-bottom: 8px;
    }

    .movie_login b br {
        display: inline;
    }

    .movie_article img {
        height: auto;
    }
}

/* .custom-modal {
    z-index: 99999!important;
}
.custom-modal-background {
    display: flex!important;
    position: static!important;
    align-items: center;
    justify-content: center;

} */
/*
.movie_modal {
    width: 45%;
    top: 200px;
    left: 25%;
    z-index: 9999;
    position: fixed;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}*/

/* .movie_modal {
    z-index: 9999;
    overflow-y: auto;
    width: 90%;
    max-width: 640px;
    height: 80vh;
} */
/* .movie_modal form {
    margin: 0;
    position: relative;
} */
/* .movie_modal .close_area {
    max-width: 640px;
    width: 90%;
    margin: 0 auto;
    position: fixed;
    z-index: 1;
} */
/* .movie_modal .regist_modal_close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    background: var(--dark_color);
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    box-shadow: var(--box_shadow);
    color: #fff;
    font-size: var(--font_size_xs);
    text-align: center;
    cursor: pointer;
} */
/* .movie_modal .box.bg {
    padding: 24px;
} */
/* .movie_modal h2 {
    font-size: var(--font_size_m);
    line-height: 1.3em;
    display: block;
    border: none;
    margin: 0 0 24px 0;
    padding: 0;
} */
/* .movie_modal h2 br {
    display: none;
} */
/* .movie_modal .term {
    margin: 20px auto;
    display: inline-block;
} */
/* .movie_modal .btn_primary {
    margin: 24px auto 0 auto;
} */
/* .movie_modal_content > dl {
    padding-bottom: 16px;
} */
/* .movie_modal_flex {
    display: flex;
    align-items: center;
} */
/* .movie_modal_flex > dt {
    width: 30%;
    text-align: center;
    margin: 0;
} */
/* .movie_modal_flex > dd {
    flex: 1;
} */
/* .movie_modal_flex > dd >i {
    font-size: var(--font_size_s);
    align-items: center;
    display: inline-grid;
    padding-left: 0px;
    margin: 0 4px;
} */
/* .movie_modal_twocol {
    justify-content: space-around;
} */
/* .movie_modal_twocol > input {
    width: 35%;
} */
/* .movie_modal_col dd {
    width: 65%;
    margin: 0 auto;
} */
/* .movie_modal_post > input {
    width: 30%;
} */
/* .movie_modal_flex.movie_modal_pref {
    width: 20%;
} */
/* .movie_modal_terms {
    width: 85%;
    margin: 0 auto;
} */
/* .movie_modal_flex > dt > p {
    text-align: left;
} */
/* .movie_modal_content {
    position: relative;
    padding: 0 20px;
} */
/* .movie_modal_flex > dt {
    text-align: left;
    margin-right: 16px;
} */
/* .movie_modal_twocol > div {
    display: flex;
    width: 50%;
} */
/* .movie_modal_twocol > div > i {
    font-size: var(--font_size_s);
    align-items: center;
    display: inline-grid;
    padding-left: 0px;
    width: 60px;
} */
/* .movie_modal_select {
    width: 24%;
} */
/* .movie_modal_content_close {
    position: absolute;
    content: "\f057";
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
    color: #333;
} */
/* @media screen and (max-width: 768px) {
    .movie_modal_flex {
        flex-wrap: wrap;
    }
    .movie_modal_flex > dt {
        width: 100%;
        margin: 0 0 4px 0;
    }
    .movie_modal_flex > dd {
        width: 100%;
    }
    .movie_modal_flex > dd >i {
        padding-left: 0;
    }
    .movie_modal_flex.movie_modal_pref {
        width: 100%;
    }
    .movie_modal_select {
        width: 24%;
    }
    .movie_modal_flex > dd {
        margin-left: 0;
    }
} */
/* @media screen and (max-width: 480px) {
    .movie_modal h2 br {
        display: inline;
    }
    .movie_modal .btn_primary {
        var(--font_size_s);
    }
} */

.service_contents, .wp_contents {
    margin-bottom: 80px;
}
@media screen and (max-width: 1024px) {
    .service_contents, .wp_contents {
        margin-bottom: 40px;
    }
}

.main_area.point .service_contents {
    margin-bottom: 20px;
}

.wp_contents .counts {
    font-size: var(--font_size_xs);
}

.wp_contents .sort_area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.wp_contents .sort_area .search_checkbox {
    flex: 1;
    text-align: right;
    margin: 0!important;
}
.wp_contents .sort_area .search_checkbox p {
    width: auto!important;
}
.wp_contents .sort_area .search_checkbox label {
    margin-right: 16px;
}


.wp_contents ul {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -8px 0;
}

.wp_contents li {
    width: 33.33%;
    padding: 8px;
    box-sizing: border-box;
}

.wp_contents li article {
    text-align: center;
    font-weight: bold;
    padding: 16px;
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    height: 100%;
    box-sizing: border-box;
    position: relative;

}

.wp_contents li:last-child {
    border: none;
}
.wp_contents article .txt {
    margin-top: 8px;
    padding-bottom: 108px;
}

.wp_contents .manegy-whitepaper-info article .txt {
    margin-top: 8px;
    padding-bottom: 102px;
}

.wp_contents article .txt h2 {
    display: block;
    border: none;
    margin: 0;
}
.wp_contents article .txt h2 a {
    font-size: var(--font_size_r);
    line-height: 1.3em;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.wp_contents article .txt p {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    margin: 4px 0;
    display: block;
}

.wp_contents article .tags {
    text-align: left;
    margin: 4px 0;
}

.wp_contents article .tag {
    margin: 0 4px 4px 0;
}

.wp_contents article .tag a {
    color: var(--primary_color);
}

.wp_contents .btnset {
    padding: 16px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.wp_contents .bookmark01 {
    margin: 0 auto 14px;
    float: none;
    height: auto;
}

.wp_contents .checkbox02 {
    margin: 0 auto;
    width: auto;
    min-width: auto;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .wp_contents article .txt {
        padding-bottom: 90px;
    }
    .wp_contents .manegy-whitepaper-info article .txt {
        padding-bottom: 90px;
    }
}
@media screen and (max-width: 480px) {
    .wp_contents ul li {
        width: auto;
    }
    .wp_contents .manegy-whitepaper-info li {
        width: 100%;
    }
}

.wp_contents li:last-child a {
    border: none;
}
/*
.seminar_detail, .movie_detail, .news_detail {
    margin-bottom: 80px;
}
*/
.service_contents .tag, .service_detail .tag, .wp_title .tag, .wp_contents .tag, .whitepaper_detail .tag, .seminar_detail .tag, .news_detail .tag, .category_contents .tag, .top_blocks_3 .tag, .movie_detail .tag, .movie_article .tag {
    width: auto;
    padding: 0px 10px;
    margin: 4px;
    /* font-size: 0.8rem; */
    background: #fff;
}

.category_contents .pr .tag {
    background: none;
    border: solid 1px var(--basic_color);
    color: var(--basic_color);
}

.service_detail .outline_box, .whitepaper_detail .outline_box, .seminar_detail .outline_box, .seminar_outline_box {
    margin: 30px auto 40px;
    display: flex;
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.service_detail .outline_box {
    padding: 30px 40px;
}

.service_detail .outline_box, .seminar_detail .outline_box, .seminar_outline_box {
    padding: 24px;
}

.outline_box .checkbox02 {
    margin: 8px auto 0 auto;
}

.seminar_detail .thumb {
    text-align: center;
    width: 30%;
    height: auto;
    min-width: 240px;
}

.seminar_detail .btn {
    display: flex;
    margin: 8px auto;
}

.seminar_detail .btn.fix {
    display: none;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: 1;
}
.seminar_detail .btn_seminar {
    height: 55px;
    padding: 8px 24px 8px 8px;
    box-sizing: border-box;
}
.seminar_detail .btn.fix a {
    margin: 0 auto;
}
.seminar_detail .btn.fix label {
    display: none;
}
@media screen and (max-width: 768px) {
    .seminar_detail .btn_area {
        display: block;
        margin: 24px auto 0 auto;
    }
}
.service_detail .thumb_logo {
    text-align: center;
    width: 120px;
    height: 120px;
    padding: 8px;
    box-sizing: border-box;
    border: solid 1px #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.service_detail .thumb img {
    object-fit: contain;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}

.service_detail img, .whitepaper_detail img {
    object-fit: contain;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}


.whitepaper_detail .caption,
.seminar_detail .caption {
    flex: 1;
    padding-left: 16px;
}

.service_detail .caption {
    flex: 1;
    padding-left: 16px;
}

.service_detail .tag_bookmark,
.whitepaper_detail .tag_bookmark,
.movie_detail .tag_bookmark {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0 0;
    align-items: flex-start;
}
.seminar_detail .tag_bookmark {
    margin: 0;
}
.question_memberonlystatus_area {
    display: flex;
}
.question_memberonlystatus_content {
    width: 100%;
}
.question_memberonlystatus_link {
    width: 80%;
}
@media screen and (max-width: 768px) {
    .question_memberonlystatus_area {
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 768px) {
    .service_detail .tag_bookmark,
    .whitepaper_detail .tag_bookmark,
    .seminar_detail .tag_bookmark,
    .movie_detail .tag_bookmark {
        display: block;
        margin-bottom: 40px;
    }
    .service_detail .thumb_logo {
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }
}

.tag_bookmark ul {
    flex: 1;
}

.tag_bookmark ul li a {
    padding: 0;
}

#admin .top_contents_matter ul.bookmark_area li a {
    padding: 0;
    margin-top: 0;
    box-shadow: none;
}

ul.bookmark_area .document_area {
    margin: 25px auto;
}

.whitepaper_detail .tag_bookmark ul {
    width: 70%;
}

.service_detail .tag_bookmark ul li,
.whitepaper_detail .tag_bookmark ul li,
.seminar_detail .tag_bookmark ul li,
.movie_detail .tag_bookmark ul li {
    display: inline-block;
}

.search_checkbox_area .btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.search_checkbox_area .btn label,
.search_checkbox_area .btn a {
    color: #ffffff;
    line-height: 1.2em;
    text-align: center;
    width: 40%;
    height: auto;
    cursor: pointer;
    margin: 20px 10px 0 10px!important;
    padding: 16px 32px;
    box-sizing: border-box;
}
.search_checkbox_area .btn a.btn_primary {
    line-height: inherit;
}
.search_checkbox_area .btn label {
    background: var(--dark_color);
    opacity: 1;
    transition: all 0.3s ease;
}
.search_checkbox_area .btn label:hover {
    opacity: 0.6;
}
@media screen and (max-width: 480px) {
    .search_checkbox_area .btn {
        margin: 8px 0;
    }
    .search_checkbox_area .btn label,
    .search_checkbox_area .btn a {
        width: 90%;
    }
    .search_checkbox_area .btn label{
        order: 2;
        margin: 0!important;
    }
    .search_checkbox_area .btn a{
        margin: 8px auto!important;
        order: 1;
    }
}

.service_detail h4,
.whitepaper_detail h4,
.seminar_detail .caption h1,
.seminar_detail .caption h2,
.movie_detail h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.seminar_detail .caption h2 {
    border: none;
}

.service_detail .company,
.whitepaper_detail .company,
.seminar_detail .company {
    margin: 0 0 8px 0;
    display: flex;
    align-items: flex-start;
}

.service_detail .company i,
.whitepaper_detail .company i,
.seminar_detail .company i {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    padding: 1px 5px;
    margin-right: 5px;
    text-align: center;
    background: var(--light_color2);
    color: var(--primary_color);
}

.service_detail .company span,
.whitepaper_detail .company span,
.seminar_detail .company span {
    flex: 1;
}

.service_detail .btn {
    width: 100%;
    display: flex;
    margin: 30px auto 10px;
    justify-content: center;
}
.seminar_detail .btn {
    width: 100%;
    display: flex;
    margin: 16px auto 0;
    justify-content: center;
    align-items: center;
}

.service_detail .outline,
.whitepaper_detail .outline,
.seminar_detail .outline {
    width: 85%;
    margin: 25px auto 50px;
}

.movie_detail {
    /*margin-top: 16px;*/
    padding: 8px;
}
.movie_detail .outline {
    width: 100%;
    margin: 25px auto 50px;
}

.service_detail b {
    font-weight: bold;
    display: block;
    margin: 16px 0 0 0;
    width: 100%;
}

.service_detail p,
.whitepaper_detail p,
.seminar_detail p {
    margin: 8px 0;
    word-break: break-all;
}

.service_detail ul.caption,
.whitepaper_detail ul.caption,
.seminar_detail ul.caption {
    width: 100%;
}

.service_detail ul.caption li,
.whitepaper_detail ul.caption li,
.seminar_detail ul.caption li {
    padding-left: 13px;
    text-indent: -13px;
    margin-bottom: 10px;
    font-weight: bold;
}

.service_detail ul.caption li:before,
.whitepaper_detail ul.caption li:before,
.seminar_detail ul.caption li:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--basic_color);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.5em;
    margin-top: -5px;
}

/*-- --------- --------- --------- --*/
/*-- サービス詳細＞概要・ボタンセット追加 --*/
/*-- --------- --------- --------- --*/

.service_detail .col3 .data_txt_01 {
    flex: 1;
    padding: 4px 0;
    background: #ffffff;
    margin-bottom: 8px;
}
.service_detail .btnset{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 0 4px;
    width: 100%;
}
.service_detail .btnset .col3 {
    font-size: 13px;
    padding: 4px;
    margin: 0 4px;
    background: #F6F6F6;
    box-sizing: border-box;
    max-width: none;
    flex: 2;
}
.service_detail .btnset .col3 .data {
    width: 33.33%;
    padding: 4px;
}
.service_detail .btnset .btn_primary {
    /*margin: 0 0 0 16px;*/
    margin: 0 4px;
    flex: 1;
    border-radius: 3px;
}
.service_detail .btnset .btn_primary.meeting {
    background: #fe6e00;
}
.service_detail .btnset .btn_primary.complete {
    background: var(--light_color2);
    border: solid 2px #ccc;
    color: var(--basic_color_light);
}
.service_detail .btnset .btn_primary.complete::before {
    content: none;
}
.service_detail .btnset .btn_primary.complete::after {
    border-right: 3px solid var(--basic_color_light);
    border-bottom: 3px solid var(--basic_color_light);
    content: '';
    display: block;
    height: 16px;
    top: 18px;
    right: 22px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    width: 9px;
    z-index: 3;
    background: transparent;
}
@media screen and (max-width: 768px) {
    .service_detail .btnset .col3 {
        margin-bottom: 16px;
    }
    .service_detail .btnset .col3 .data {
        width: auto;
    }
    .service_detail .btnset .col3 .data_txt_01 {
        margin: 0;
    }
    .service_detail .btnset{
        display: block;
    }
    .service_detail .btnset .btn_primary {
        width: 90%;
        min-width: 220px;
        margin: 10px auto 0 auto;
    }
}
@media screen and (max-width: 480px) {
    .service_detail .btnset .col3 {
        display: block;
    }
    .service_detail .btnset .col3 .data {
        display: flex;
        width: auto;
    }
    .service_detail .btnset .col3 .data .data_txt_01 {
        width: 110px;
        flex: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .service_detail .btnset .col3 .data .data_txt_02 {
        line-height: 1.5em;
        padding: 4px 8px;
        text-align: left;
    }

}

.btn_seminar {
    color: #fff;
    font-weight: bold;
    height: 55px;
    text-align: center;
    margin: 0 20px 0 0;
    position: relative;
    /* padding-top: 5px; */
    width: 400px;
    background: var(--accent_color);
    /* font-size: 1.1rem; */
    line-height: 1.2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn_seminar span {
    font-size: var(--font_size_s);
}

.btn_seminar::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #fff;
    clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0% 100%, 0 50%, 0% 0%);
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
}

#btn_checked1::before, #btn_checked2::before {
    background: var(--basic_color_light);
}

#btn_checked1.check::before, #btn_checked2.check::before {
    background: #fff;
}

.seminar_detail .summary {
    width: 100%;
    margin-top: 20px;
}

.seminar_outline_box a {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.summary table {
    width: 100%;
    border-spacing: 0;
    background: var(--light_color);
    margin: 16px 0;
    border-top: solid 5px var(--primary_color);
}

.summary table th {
    border-bottom: solid 2px var(--primary_color);
    padding: 15px 0;
    width: 30%;
    font-weight: bold;
    vertical-align: middle;
}

.summary table td {
    border-bottom: solid 2px #ddd;
    text-align: left;
    padding: 10px 20px;
    background: #fdfdfd;
    vertical-align: middle;
}

.summary table td span {
    font-size: 14px;
}

.seminar_detail .outline em, .news_detail em, .movie_detail em {
    font-weight: bold;
    border-bottom: solid 2px var(--accent_color);
}

.seminar_detail .seminar_speaker {
    width: 200px;
    box-shadow: var(--box_shadow);
    border-radius: 10px;
    float: left;
    margin-right: 20px;
    object-fit: cover;
    object-position: 50% 50%;
}

.seminar_detail p {
    overflow: hidden;
}

.seminar_detail p.speaker_name {
    font-size: 20px;
    font-weight: bold;
}

.seminar_detail p.speaker_company {
    font-size: 14px;
    line-height: 1.5em;
    font-weight: bold;
}

h1.middle.center {
    display: flex;
    justify-content: center;
}

.seminar_detail.entry .term_box {
    width: 100%;
    height: 200px;
    background: var(--light_color);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 15px;
    margin: 20px 0;
    border: solid 1px #cccccc;
}

.term_box h4 {
    font-size: 18px;
    text-align: center;
}

.term_box h5 {
    font-weight: bold;
    margin: 40px 0 0 0;
    position: relative;
    display: flex;
    align-items: center;
}

.term_box h5::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: var(--basic_color);
}

.term_box h5::after {
    margin-left: 0.5rem;
}

.term_box p {
    margin: 10px 0;
}

.term_box ol {
    list-style-type: decimal;
    padding-left: 20px;
}

.term_box ol li {
    margin: 10px 0;
}


.news_title {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 100%;
    margin-left: 16px;
}

.news_title span {
    font-size: var(--font_size_xs);
    font-weight: normal;
    display: inline-block;
    margin-left: 8px;
}

.news_title span.company {
    font-size: var(--font_size_xs);
}

.news_title p {
    display: block;
    width: 75%;
    font-weight: bold;
    word-break: break-all;
}

.news_title p.new::before {
    content: "NEW";
    background: var(--accent_color);
    color: #fff;
    padding: 1px 5px;
    margin-right: 5px;
    font-size: var(--font_size_xs);
    position: relative;
    bottom: 1px;
}

.news_title p .material-icons, .news_contents.relation p .material-icons {
    font-size: var(--font_size_s);
    color: var(--basic_color_light);
    vertical-align: text-bottom;
}

.news_contents i {
    display: block;
    width: 25%;
    margin: 5px auto 0;
    text-align: right;
    font-weight: normal;
    font-size: var(--font_size_s);
}
.news_detail .news_point {
    position: relative;
    i#news_point_got {
        position: absolute;
        top: -200px;
        left: 0;
    }
}

.news_detail .news_info {
    margin: 4px 0;
    display: flex;
    justify-content: space-between;
}

.news_detail .news_info .date {
    font-size: var(--font_size_xs);
}

@media (max-width: 768px) {
    .news_detail .news_info .date {
        white-space: nowrap;
        font-size: 10px;
    }
}

.news_detail .news_info .date i {
    display: inline-block;
    vertical-align: top;
    padding: 1px 5px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    background: var(--light_color2);
}

.news_detail .news_info .date span {
    display: inline-block;
    margin-right: 16px;
}

@media (max-width: 768px) {
    .news_detail .news_info .date i {
        display: inline-block;
        vertical-align: top;
        padding: 1px 5px;
        margin-right: 4px;
        margin-bottom: 8px;
        text-align: center;
        background: var(--light_color2);
    }

    .news_detail .news_info .date span {
        display: inline-block;
        margin-right: 8px;
    }
}


/*
.news_detail figure.sp-hide {
    width: 160px;
}
*/
.news_title_sub {
    width:100%;
    position: relative;
}
.news_title_sub i.bookmarkNum {
    position: absolute;
    top: 0;
    right: 0;
}
.news_author::before {
    content: "";
    white-space: pre;
}
.news_author {
    margin-top: 4px;
}
.sns_bookmark {
    margin: 16px 0;
}

.sns_bookmark ul {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-wrap: nowrap;
}

.sns_bookmark li {
    padding: 0 4px 4px;
    flex-shrink: 0;
}

.sns_bookmark li a {
    display: block;
}

.sns_bookmark li a img {
    display: block;
    width: 30px;
    height: auto;
}

.copy_url {
    background: var(--light_color);
    border: solid 1px #cccccc;
    border-radius: 3px;
    color: #606060;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-size: var(--font_size_xs);
    padding-right: 15px;
    padding: 4px 8px;
    position: relative;
}
.copy_url:after {
    background: url("https://icongr.am/material/link-variant.svg?size=128&color=currentColor") no-repeat center center / 100% auto;
    content: "";
    display: inline-block;
    height :20px;
    margin-left: 4px;
    vertical-align: bottom;
    width: 20px;
}

.news_detail .news_tag ul {
    display: flex;
    flex-wrap: wrap;
}

.news_detail .news_tag ul li {
    display: inline-block;
}

.news_detail .news_tag .tag:empty {
    display: none;
}

.news_detail h2 {
    color: var(--basic_color)!important;
    font-weight: 700;
    font-size: var(--font_size_m);
    text-align: left;
    line-height: 1.2em;
    width: 100%;
    margin: 32px 0 16px 0;
    padding: 8px 15px;
    border-left: solid 6px var(--primary_color)!important;
    border-bottom: none;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 8%);
    box-sizing: border-box;
}

.news_detail h3 {
    color: var(--basic_color);
    background: #fafafa;
    border-bottom: solid 2px #4682b4;
    display: block;
    padding: 2px 10px;
    margin: 30px 0 20px;
    font-size: 18px;
}

.news_detail h4 {
    display: inline-block;
    font-size: 17px;
    font-weight: bold;
    color: var(--primary_color);
    border-bottom: solid 2px #faf0bb;
    padding: 2px 5px 1px;
    margin: 5px 0 0;
}

.news_detail h4.manegy-component {
    color: #fff;
}

@media screen and (max-width: 768px) {
    .news_detail h3 {
        line-height: 1.3em;
        font-size: 18px;
        padding: 5px 10px;
    }
    .news_detail h4 {
        line-height: 1.3em;
        font-size: 17px;
        padding-bottom: 6px;
    }
}

.news_detail .outline {
    width: 100%;
    margin: 25px auto 50px;
}

.news_detail .outline ul {
    list-style: disc;
    padding-left: 20px;
}

.news_detail .outline ol {
    list-style: decimal;
    padding-left: 20px;
}

.news_detail .outline img {
    /*width: auto;*/
    width: 100%;
    max-width: 600px;
}

.news_detail #news_icatch {
    margin: 32px 0;
    @media screen and (max-width: 768px) {
        margin: 16px 0;
    }
}

.news_detail .index_content ~ .index_content {
    display: none;
}

.news_detail #news_icatch ~ #news_icatch {
    display: none;
}

.news_detail #news_icatch img {
    display: block;
    margin: 0 auto;
}

.news_detail .outline table {
    width: 100%;
    margin: 16px 0;
    border: solid 1px #b7cbdd !important;
}

.news_detail .outline table tr:nth-child(2n-1) {
    background: var(--water_color);
}

.news_detail .outline table td {
    padding: 8px;
    border: solid 1px var(--light_color2);
    text-align: left;
}

.news_detail .outline table td b {
    font-weight: 700;
}

.news_detail .article_block, .movie_detail .article_block {
    margin-bottom: 40px;
}
.news_detail figure > * {
    text-align: left;
}
.news_detail p {
    margin: 16px 0 16px 0;
    line-height: 1.7em;
    word-wrap: break-word;
}

/*-- WTC_DEV-10883：アイキャッチ自動化に伴う既存画像の非表示
section.news_detail .outline p:first-of-type ,
section.news_detail .outline figure:first-of-type {
    display: none;
}
 --*/

.news_detail p strong,
.news_detail p b {
    font-weight: 700;
}

.news_detail .outline a {
    border-bottom: solid 1px var(--basic_color);
}

.news_detail .detail_title5 {
    margin: 0 0 15px 15px;
}

.news_detail .outline figure img {
    display: block;
    max-width: 600px;
    margin: 0 auto;
}

.news_detail .outline .btn_secondary br {
    display: none;
}

.news_detail .outline .source figure,
.news_detail .outline figure.source {
    float: none!important;
}
.news_detail .outline .source figure a,
.news_detail .outline figure.source a {
        display: block;
    margin: 0 auto;
    width: 200px;
    border: none;
}
.news_detail .outline .source figure img ,
.news_detail .outline figure.source img ,
.news_detail .outline a.source img {
    display: block;
    margin: 0 auto;
    width: auto;
}
.news_detail div[style*="display: flex"] > div {
    padding: 8px;
    box-sizing: border-box;
    height: auto;
    width: 100%;
}
.news_detail div[style*="display: flex"] > div > * {
    height: auto;
}

.news_detail div[style*="display: flex"] a.btn_primary,
.news_detail div[style*="display: flex"] a.btn_secondary {
    margin: 4px auto;
    border: none;
}

.source2 {
    text-align: center;
    border: solid 1px #cccccc;
    padding: 32px 24px 24px 24px;
    margin: 32px 0 24px 0;
    position: relative;
}
.source2:before {
    content: "記事提供元";
    font-size: var(--font_size_s);
    font-weight: bold;
    display: inline-block;
    padding: 0 8px;
    background: #ffffff;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -43px;
}
a.logo {
    display: inline-block;
    margin: 0 auto;
    border: none!important;
}
.source2 img {
    width: auto;
    max-width: 230px;
    display: block;
}
.source2 b {
    font-size: var(--font_size_s);
    font-weight: 700;
    text-align: center;
    display: block;
    margin: 16px 0;

}
.source2 p {
    font-size: var(--font_size_s);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
}
.news.col3 {
    padding: 8px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.news.col3 li {
    width: 33.33%;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
}
.news.col3 li .thumb {
    background: #ffffff;
}
.news.col3 li p {
    margin: 8px 0;
}
@media screen and (max-width: 768px) {
    .news.col3 li p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}
@media screen and (max-width: 480px) {
    .news.col3 li {
        width: 100%;
    }
}
.news_contents.relation {
    margin-bottom: 35px;
}

.news_contents.relation h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 40px 0 10px;
}

.news_contents.relation p {
    font-weight: bold;
}



.regist_complete h1 {
    margin-top: 80px;
}

.regist_complete dl.coffee {
    background: var(--light_color);
    border: solid 2px #ff7000;
    padding: 8px;
    margin: 40px 0;
}

.regist_complete dl.coffee dt {
    color: #ffffff;
    font-size: var(--font_size_m);
    font-weight: bold;
    text-align: center;
    background: #ff7000;
    margin: 0;
    padding: 8px;
}

.regist_complete dl.coffee dd {
    color: var(--primary_color);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    margin: 8px auto 0;
}

.regist_complete dl.coffee dd div:last-child {
    padding: 0 16px;
}

.regist_complete dl.coffee dd img {
    display: block;
    width: 160px;
}

.regist_complete dl.coffee dd a {
    color: #ffffff;
    line-height: 1.3em;
    background: var(--primary_color);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 16px 0 0 0;
    padding: 16px 24px 16px 8px;
}

.regist_complete dl.coffee dd a:before {
    margin: 0;
    top: 50%;
    right: 10px;
    bottom: auto;
    margin-top: -16px;
}

@media screen and (max-width: 480px) {
    .news_contents .thumb {
        min-width: 80px;
    }
    .regist_complete dl.coffee {
        margin: 40px 0;
    }
    .regist_complete dl.coffee dt {
        font-size: var(--font_size_r);
    }
    .regist_complete dl.coffee dd {
        display: block;
        padding: 16px;
    }
    .regist_complete dl.coffee dd img {
        margin: 0 auto;
    }
    .regist_complete dl.coffee dd div:last-child {
        padding: 0;
    }
}

.news_point2 {
    background: var(--water_color);
    text-align: center;
    padding: 40px;
    margin: 40px 0;
}

.news_point2 h2 {
    color: var(--primary_color);
    font-weight: bold;
    border: none;
    margin: 0;
}

.news_point2 ul {
    display: flex;
    margin-bottom: 40px;
}

.news_point2 ul li {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    font-weight: bold;
    flex: 1;
    background: #ffffff;
    margin-right: 40px;
    padding: 16px;
    position: relative;
}

.news_point2 ul li:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 65px 0 65px 30px;
    border-color: transparent transparent transparent var(--primary_color);
    position: absolute;
    top: 50%;
    right: -35px;
    margin-top: -65px;
}

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

.news_point2 ul li:last-child:after {
    content: none;
}

.news_point2 ul li img {
    display: block;
    width: auto;
    height: 100px;
    margin: 0 auto 16px auto;
}

.news_point2 > img {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 10px;
}

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

    .news_point2 ul {
        display: block;
    }
    .news_point2 ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 40px;
    }
    .news_point2 ul li:after {
        bottom: -35px;
        top: auto;
        right: 50%;
        margin-right: -65px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 30px 65px 0 65px;
        border-color: var(--primary_color) transparent transparent transparent;
    }
    .news_point2 ul li img {
        margin: 0 16px 0 0;
        height: 60px;
    }
}
@media screen and (max-width: 480px) {

    .regist_complete .detail_title a {
        margin: 20px auto;
    }
    .news_point2 {
        padding: 20px;
        margin: 20px 0;
    }
    .news_point2 ul {
        margin-bottom: 20px;
    }
    .news_point2 ul li {
        margin: 0 0 30px;
    }
    .news_point2 ul li:after {
        bottom: -25px;
        top: auto;
        right: 50%;
        margin-right: -42px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 42px 0 42px;
        border-color: var(--primary_color) transparent transparent transparent;
    }
}

.news_point {
    background: var(--water_color);
    text-align: center;
    padding: 40px;
    margin-bottom: 30px;
}

.news_point.limit {
    padding: 40px;
    padding-top: 200px;
    margin-top: -300px;
    position: relative;
    z-index: 10;
    position: relative;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}

.news_point.limit .inner {
    background: #ffffff;
    border: solid 2px var(--primary_color);
    padding: 24px;
}

@media screen and (max-width: 768px) {
    .news_point.limit {
        padding: 20px;
    }
}

.news_point.limit span .material-icons {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}

.news_point span {
    border-bottom: solid 1px var(--primary_color);
    font-size: 18px;
    font-weight: bold;
    color: var(--primary_color);
    margin-bottom: 16px;
    display: inline-block;
}

.news_point .btn {
    display: flex;
    justify-content: center;
}

.news_point .btn a {
    margin-top: 0;
    width: 100%;
}

.seminar_detail .outline_box {
    align-items: start;
}

.seminar_outline_box .tag_bookmark {
    margin-top: 16px;
}

.category_contents {
    background: var(--light_color);
    margin: 24px 0;
    padding-bottom: 1px;
    clear: both;
}

.category_contents.border {
    border-top: solid 4px var(--basic_color);
    height: auto;
}

.category_contents .news_title {
    padding-bottom: 0;
    margin-left: 0;
}
/*-- --------- --*/
/*-- よく比較されているサービス --*/
/*-- --------- --*/
.category_contents .pickup_service {
    position: relative;
    padding-bottom: 1px;
}
.category_contents .pickup_service ul {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.category_contents .pickup_service ul li {
    padding: 8px;
    box-sizing: border-box;
    width: 25%;
}
.category_contents .pickup_service ul li article {
    text-align: center;
    display: block;
    height: 100%;
    background: #ffffff;
    box-sizing: border-box;
    padding: 8px;
    position: relative;
    cursor: pointer;
}
.category_contents .pickup_service ul li article .thumb {
    margin-bottom: 4px;
}
.category_contents .pickup_service ul li article a {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    font-weight: bold;
    line-height: 1.3em;
    text-align: left;
    display: block;
    /*margin-top: 8px;*/
}
.category_contents .pickup_service ul li article a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border-top: solid 2px var(--primary_color);
    border-right: solid 2px var(--primary_color);
    margin: 0 0 1px 2px;
}
.category_contents .pickup_service a.btn_secondary {
    margin-top: 8px;
}

.category_contents .detail_title4 {
    font-size: var(--font_size_r);
    width: 100%;
    margin: 0 auto;
    padding: 8px;
    font-weight: bold;
}

.category_contents .pickup_service a.return {
    color: var(--primary_color);
    text-decoration: underline;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: -30px;
}
@media screen and (max-width: 768px) {
    .category_contents .pickup_service ul li {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .category_contents .pickup_service ul {
        padding: 4px;
    }
    .category_contents .pickup_service ul li {
        padding: 4px;
    }
}

.btn .dubble {
    margin: 30px 10px 0;
}

.quiz_detail .date {
    margin: 15px 0 0;
    /* font-weight: bold; */
    text-align: right;
}

.quiz_detail .date i {
    display: inline-block;
    vertical-align: top;
    padding: 1px 5px;
    margin-right: 5px;
    text-align: center;
    background: var(--light_color2);
}

.quiz_detail .date span {
    display: inline-block;
    margin: 2px 20px 0 0;
}

.quiz_detail .quiz_title {
    position: relative;
    /* font-size: 18px; */
    color: var(--primary_color);
    margin: 0 0 0 30px;
}

.quiz_detail .quiz_title::before {
    content: "Q.";
    display: inline-block;
    font-size: 30px;
    font-family: Roboto;
    margin-right: 4px;
    /*
    position: absolute;
    top: -13px;
    left: -30px;*/
}
.quiz_title.faq::before {
    content: "Q";
    display: inline-block;
    /* font-size: 30px; */
    font-size: 25px;
    font-family: Roboto;
    position: absolute;
    top: -13px;
    left: -30px;
}

.quiz_detail .outline_box {
    margin: 30px auto 50px;
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    padding: 30px 40px 35px;
}

.quiz p, .quiz_detail p {
    margin: 0 0 10px 0;
    line-height: 1.7em;
    padding: 0;
}

.quiz .detail_title5, .quiz_detail .detail_title5 {
    margin: 0 0 15px 15px;
}

.quiz_radio {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.quiz_radio:before, .quiz_radio:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.quiz_radio .box {
    width: 90%;
    margin: 30px auto 0;
    text-align: left;
    border-radius: 3px;
    background: #ffffff;
}

.quiz_radio input[type=radio] {
    display: none;
}

.quiz_radio label:focus, .quiz_radio label:hover, .quiz_radio label:active, .quiz_radio input:checked + label {
    color: var(--primary_color);
}

.quiz_radio label:focus:before, .quiz_radio label:hover:before, .quiz_radio label:active:before, .quiz_radio input:checked + label:before {
    border-color: var(--primary_color);
}

.quiz_radio label {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5em;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0.8em 1em 0.8em 3em;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: var(--light_color);
    border: 2px solid #cccccc;
    border-radius: 5px;
    margin: 0 0 10px;
}

.quiz_radio label:before {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 15px;
    height: 15px;
    content: '';
    border: 0.2em solid #cccccc;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.quiz_radio input:checked + label:before {
    background: var(--primary_color);
}

.quiz_radio input:checked + label {
    border: 2px solid var(--primary_color);
}

.quiz_detail .hint {
    display: flex;
    width: 100%;
    margin: 30px auto 0;
}
.quiz_arrow_left:before {
    left: 20px;
    transform: rotateY(180deg);
}
.quiz_arrow_none:before {
    content: none !important;
}

.hint .caption {
    width: 53%;
    margin: 5px 40px 0 30px;
    font-size: 15px;
    font-weight: bold;
}

.hint .lineArrow {
    height: 15px;
    border-bottom: 1px solid var(--basic_color);
    border-right: 1px solid var(--basic_color);
    transform: skew(45deg);
    margin: -10px 0 0 -15px;
}

.hint .btn_secondary {
    margin: 0;
}

.quiz_detail .answered {
    width: 90%;
    margin: 0 auto;
}

.quiz_detail .answered .caption {
    font-size: 13px;
    text-align: right;
    display: block;
}

.quiz_detail .answered p {
    font-size: 22px;
    font-weight: bold;
    display: block;
    margin: 10px auto;
    text-align: center;
}

.quiz_detail .answered p.correct em {
    color: var(--accent_color);
}

.quiz_detail .answered p.incorrect em {
    color: #4682b4;
}

.quiz_detail .answered p .point {
    font-size: 16px;
    background: var(--accent_color);
    color: #fff;
    border-radius: 3px;
    display: block;
    width: 100px;
    line-height: 1.4em;
    margin: 0 auto;
}

.quiz_detail .answered p .expired {
    font-size: 14px;
    color: var(--accent_color);
    display: block;
    font-weight: normal;
    line-height: 1.4em;
}

.quiz_detail .answer {
    background: var(--water_color);
    padding: 5px 10px 20px;
    margin-top: 20px;
    text-align: center;
    overflow: hidden;
}

.quiz_detail .answer p {
    font-size: 18px;
    color: var(--primary_color);
}

.quiz_detail .answer p .triangle {
    display: inline-block;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-top: solid 7px transparent;
    border-right: solid 7px transparent;
    border-bottom: solid 7px transparent;
    border-left: solid 7px var(--primary_color);
}

.quiz_detail .answer a {
    border-bottom: solid 1px var(--basic_color);
}

.quiz h1 span {
    font-size: var(--font_size_s);
    color: var(--accent_color);
    margin: 5px 0;
    display: block;
    border: solid 1px var(--accent_color);
    padding: 0px 8px;
    /* line-height: 1.7em; */
    text-align: center;
}

.quiz ul {
    margin-bottom: 80px;
}

.quiz ul li a {
    display: block;
    padding: 20px 0;
    border-bottom: solid 1px #E5E5E5;
}

.quiz ul li:last-child a {
    border: none;
}

.quiz_list {
    display: flex;
    justify-content: space-between;
}

.quiz_list p {
    display: block;
    font-weight: bold;
    margin: 0;
    width: 90%;
    line-height: 1.5em;
}

.quiz_list i {
    display: flex;
    margin-right: 20px;
    line-height: 1.5em;
}

.quiz ul li span {
    display: inline-block;
    background: var(--water_color);
    color: var(--primary_color);
    padding: 1px 5px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    margin: 5px 0 0 5px;
}

.quiz ul li span.correct {
    background: var(--accent_color);
    color: #fff;
}

.quiz ul li span.incorrect {
    background: #4682b4;
    color: #fff;
}

.quiz ul li span.unanswered {
    background: #707070;
    color: #fff;
}

.btn_secondary.quiz {
    margin-bottom: 80px;
}

.category_contents.quiz_article {
    padding-bottom: 10px;
}

.quiz_contents {
    width: 90%;
    margin: 10px auto 0;
}

.quiz_contents li a {
    padding: 20px 0;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #E5E5E5;
}

.quiz_contents li:last-child a {
    border: none;
}

.quiz_contents img {
    width: 128px;
    height: auto;
    object-fit: contain;
    object-position: 50% 50%;
    background: #f9f9f9;
    margin-right: 20px;
}

.quiz_contents .article .title {
    margin-bottom: 10px;
    width: 100%;
}

.quiz_contents .article p {
    font-weight: bold;
    margin-bottom: 5px;
}

.quiz_contents .article .point {
    background: var(--accent_color);
    color: #fff;
    padding: 0 5px;
    border-radius: 3px;
    border: 0;
    height: 1.5em;
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
}

.quiz_contents i {
    font-size: 14px;
    font-weight: normal;
}
.quiz_sub_title {
    /* display: flex; */
}

.quiz_title_main {
    width: 20%;
}

.quiz_sub_title>i+span {
    /* font-size: clamp(12px, 14px, 25px); */
}

.quiz_button_list {
    display: flex;
    gap: 30px;
}
/*
.quiz_detail .quiz_title::before {
    top: 0;
}*/
.quiz_result {
    text-align: center;
}
.quiz_radio label {
    z-index: 1;
}
.quiz_back {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: -1;
}
.quiz_back.quiz_answered {
    color: var(--primary_color);
    background: #cde4ff;
    /* width: 100%; */
}
.quiz_percent.quiz_answered {
    color: var(--primary_color);
}
.quiz_percent {
    position: absolute;
    bottom: 0;
    right: 5px;
}
a.quiz_detail_answer_link {
    color: var(--primary_color);
    border-bottom: solid 1px var(--primary_color)!important;
}
input[type="radio"].quiz_radio_area:checked + label:after {
    background: none;
}

.quiz_title_main {
    width: 20%;
}

.quiz_sub_title>i+span {
    /* font-size: clamp(12px, 14px, 25px); */
}

.quiz_button_list {
    display: flex;
    gap: 30px;
}

.quiz_detail .quiz_title.faq::before {
    /* top: 0; */
    top: -7px;
}
.quiz_title.answer.faq {
    overflow: visible;
}
.quiz_result {
    text-align: center;
}
.quiz_radio label {
    z-index: 1;
}
.quiz_back {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: -1;
}
.quiz_back.quiz_answered {
    color: var(--primary_color);
    background: #cde4ff;
    /* width: 100%; */
}
.quiz_percent.quiz_answered {
    color: var(--primary_color);
}
.quiz_percent {
    position: absolute;
    bottom: 0;
    right: 5px;
}
a.quiz_detail_answer_link {
    color: var(--primary_color);
    border-bottom: solid 1px var(--primary_color)!important;
}
input[type="radio"].quiz_radio_area:checked + label:after {
    background: none;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
    padding: 0;
}

.ui-priority-secondary.ui-corner-all {
    font-weight: bold;
    color: var(--basic_color);
}




.seminar_detail .og_detail img {
    width: 450px !important;
}







.modal_download_button {
    padding: 0 20px;
    margin: 25px auto 20px;
}

.modal_download_link {
    padding-left: 250px;
}

.top_contents_matter.mg0 {
    margin: 0;
}

.modal_flex {
    display: flex;
}
.top_service {
    padding-bottom: 100px;
}
@media screen and (min-width: 769px) {
    .top_service_matter ul.active + article {
        display: block;
    }
}

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

    .service_matter_menu.service_category {
        display: block;
    }

    .service_matter_menu.service_category ul {
        display: block;
    }

    .service_matter_menu.service_category li {
        text-align: center;
        border-bottom: solid 1px #ccc;
        width: 100%;
        margin: 10px 0;
        padding: 0 0 10px;
    }

    .service_matter_menu.service_category li::before {
        content: none;
    }

    .service_matter_menu1.service_category ul li, .service_matter_menu2.service_category ul li, .service_matter_menu3.service_category ul li {
        margin-bottom: 15px;
        padding-left: 20px;
        text-align: left;
        width: 100%;
    }

    .service_matter_menu1.service_category ul li:nth-last-of-type(odd),.service_matter_menu2.service_category ul li:nth-last-of-type(odd),.service_matter_menu3.service_category ul li:nth-last-of-type(odd) {
        margin-right: 10px;
    }

    .service_matter_menu.service_category li:last-child {
        border-bottom: solid 0px #ccc;
        margin: 0;
        padding: 0;
    }

    .wp_contents li {
        width: 50%;
    }

    .seminar_outline_box .company {
        font-size: 14px;
    }

    .seminar_outline_box .tag_bookmark {
        margin: 10px 0 0;
    }

    .seminar_outline_box .summary {
        margin-top: 5px;
    }

    .movie ul {
        width: auto;
        margin: 0;
        position: relative;
    }

    .movie.list ul a {
        width: 50%;
    }
    .movie::-webkit-scrollbar-track {
        background: var(--primary_color);
        border: none;
    }

    .seminar_detail.entry .term_box {
        box-sizing: border-box;
    }

    #service_modal_contents {
        width: 80%;
    }

    .service_document.modal_document {
        margin: 15px;
        padding: 0;
    }

    .modal_flex {
        justify-content: center;
    }

    .document_area_checkbox {
        margin: 0 auto 30px;
    }

    .top_contents_matter.mg0 {
        margin: 0 auto;
    }

    .modal_download_link {
        padding-left: 0px;
    }
}



@media screen and (max-width: 768px) {
    .current_link .btn_secondary {
        margin: 5px 0 20px;
    }


    .top_area h1 {
        width: 100%;
        margin: 0 auto;
        background: var(--primary_color);
        color: #fff;
        font-weight: normal;
        font-size: 16px;
        padding: 5px 0;
        text-align: center;
    }


    .seminar_detail .detail_title4 {
        width: 100%;
        margin: 0 auto;
    }

    .movie.category .detail_title4 {
        background: var(--basic_color);
        border-radius: 0;
        width: 90%;
        font-size: 18px;
    }
    .movie.category .detail_title4.recommend_ttl{
        margin-top: 20px;
        width: 100%;
        font-size: 16px;
    }


    .document_box {
        width: 100%;
        margin-right: 0;
    }

    .banner {
        width: var(--sp_inner);
        margin: auto;
    }

    .service_matter_menu {
        display: block;
        margin-top: 20px;
    }

    .service_matter_menu ul {
        display: flex;
        flex-wrap: wrap;
    }

    .service_matter_menu li {
        padding-left: 0;
        margin: 0;
        text-align: left;
    }

    .service_matter_menu1 ul li,.service_matter_menu2 ul li,.service_matter_menu3 ul li {
        margin-bottom: 15px;
        padding-left: 20px;
        text-align: left;
        width: 42%;
    }

    .service_matter_menu1 ul li:nth-last-of-type(odd),.service_matter_menu2 ul li:nth-last-of-type(odd),.service_matter_menu3 ul li:nth-last-of-type(odd) {
        margin-right: 10px;
    }

    .service_matter_menu1 li::before, .service_matter_menu2 li::before, .service_matter_menu3 li::before {
        left: 3px;
        top: -5px;
    }

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

    .service_matter_menu.service_category ul {
        display: block;
    }

    .service_matter_menu.service_category li {
        text-align: center;
        border-bottom: solid 1px #ccc;
        width: 100%;
        margin: 10px 0;
        padding: 0 0 10px;
    }

    .service_matter_menu.service_category li:last-child {
        border-bottom: solid 0px #ccc;
        margin: 0;
        padding: 0;
    }

    .service_matter_menu.service_category li::before {
        content: none;
    }

    .agreement_area {
        max-width: 1300px;
        width: 96%;
        margin: 30px auto;
        padding: 0 2%;
    }

    .top_main_area.service_applicaton .input_title {
        padding: 15px;
        text-align: left;
    }

    .login_area.flexbox {
        display: block;
        margin: 0 auto;
        /* padding: 20px;*/
    }

    .login_area.flexbox.reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .login_area.flexbox .left_area {
        display: block;
        width: 100%;
    }

    .login_area.flexbox .detail_title h1 {
        margin-bottom: 0;
    }

    .login_area.flexbox .right_area {
        padding: 0;
        border-left: none;
    }

    .movie_article {
        width: auto;
        max-width: 600px;
        border-radius: 0;
        margin: 0 auto 8px auto;
    }

    .movie_thumb {
        position: relative;
    }

    .movie_thumb i.time {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        background: rgba(0,0,0,0.7);
        padding: 1px 5px;
    }

    .movie_thumb .movie_play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 50px;
    }

    .seminar_article .tag {
        width: auto;
        padding: 1px 10px;
        margin: 0 2px 7px;
    }

    .movie ul {
        width: 100%;
        margin: 0;
        position: relative;
        padding: 0;
        display: block;
    }
    .movie::-webkit-scrollbar-track {
        background: var(--primary_color);
        border: none;
    }

    .movie.list ul {
        display: block;
    }

    .movie.list ul li {
        margin: 0 auto 35px;
    }

    .movie.list .movie_article {
        margin: 0 auto;
    }

    .movie_login {
        margin: 0 0 30px;
    }

    .movie_login img {
        width: 80%;
        display: block;
        margin: 0 auto 25px;
    }

    .movie_login p {
        font-size: 16px;
    }

    .movie_login .btn {
        display: block;
    }

    .movie.feature {
        text-align: center;
    }

    .movie img {
        width: 100%;

    }

    .movie_category_title {
        width: 100%;
    }

    .movie_category_title a {
        margin-right: 30px;
        padding-top: 5px;
    }

    .movie_category_title a:after {
        margin-top: -4px;
    }

    .service_contents, .wp_contents {
        /* width: var(--sp_inner); */
        margin: 0 auto 30px;
    }

    .point_area .news_contents {
        width: 100%;
    }

    .wp_contents .counts {
        width: 100%;
        margin-bottom: 8px;
        /* font-size: 0.8em; */
    }
/*
    .wp_contents ul {
        display: block;
    }

    .wp_contents li {
        width: 100%;
        display: block;
    }

    .wp_contents li {
        box-shadow: none;
        border-radius: 0;
        width: 100%;
        margin: 0;
        padding: 20px 0 15px;
        border-bottom: solid 1px #E5E5E5;
        display: block;
    }

    .wp_contents img {
        width: 150px;
        height: auto;
        margin: 0 10px 0 0;
    }

    .wp_contents .wp_info {
        display: flex;
        margin-bottom: 5px;
    }

    .wp_title span {
        display: block;
        margin: 5px 0;
    }

    .wp_title .tag, .wp_contents .tag, .whitepaper_detail .tag, .seminar_detail .tag, .category_contents .tag {
        width: auto;
        padding: 0 8px;
        margin: 0 2px 7px;
    }

    .service_detail, .whitepaper_detail, .news_detail {
        margin: 30px auto;
    }
*/
    .movie_detail {
        width: 100%;
    }

    .whitepaper_detail {
        margin-top: 0;
    }

    .service_detail .outline_box, .whitepaper_detail .outline_box, .seminar_detail .outline_box {
        margin: 0 auto 30px;
        display: block;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .service_detail .thumb, .whitepaper_detail .thumb, .seminar_detail .thumb {
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
        height: auto;
        border: none;
    }

    .service_detail img, .whitepaper_detail img, .seminar_detail img {
        max-width: 300px;
        width: 100%;
        height: auto;
        margin: 0 auto;

    }
    .seminar_detail .og_detail img {
        width: 100%!important;
    
    }.seminar_detail a {
        word-break: break-all;
    }
    .seminar_detail figure {
        float: none !important;
    }
    .seminar_detail img {
        max-width: 180px;
    }
    .seminar_detail img.logo {
        max-width: 100%;
    }

    .service_detail .thumb img {
        max-width: 150px;
    }

    .service_detail .caption, .whitepaper_detail .caption, .seminar_detail .caption {
        width: 100%;
        padding: 0;
    }

    .service_detail h4, .whitepaper_detail h4, .seminar_detail .caption h1, .seminar_detail .caption h2 {
        font-size: 18px;
    }

    .service_detail .company, .whitepaper_detail .company, .seminar_detail .company {
        margin: 10px 0;
    }

    .service_detail .outline, .whitepaper_detail .outline, .seminar_detail .outline {
        width: 100%;
        margin-bottom: 30px;
    }

    .link_detail {
        display: none;
    }
    .seminar_detail .btn {
        width: 100%;
        display: block;
        margin: 20px auto;
    }

    .btn_seminar {
        margin: 0 20px 10px 0;
        width: 100%;
    }

    .seminar_detail .summary {
        margin-top: 30px;
    }

    .summary table th {
        width: 25%;
        min-width: 140px;
    }

    .seminar_detail .seminar_speaker {
        width: 200px;
        height: 200px;
        float: none;
        margin: 0 auto 15px;
        display: block;
    }

    .seminar_detail p.speaker_name {
        text-align: center;
    }

    .seminar_detail p.speaker_company {
        text-align: center;
    }

    .news_contents .pr img {
        /* width: 150px; */
        /* height: 84px; */
        /* margin-right: 10px; */
    }

    .news_contents li.pr a {
        padding: 20px 0;
        align-items: flex-start;
    }

    .news_title {
        display: block;
        position: relative;
        padding-bottom: 24px;
    }

    .news_title:after {
        content: "";
        display: block;
        clear: both;
    }

    .news_title p {
        width: 100%;
    }

    .news_contents .news_title .add_point {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .news_contents .news_title > i {
        font-size: 11px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .news_detail .detail_title {
        width: 100%;
        margin: 15px auto;
    }

    .news_detail .detail_title h1 {
        display: block;
        text-align: left;
    }

    .news_detail .detail_title h1.middle {
        font-size: 18px;
        line-height: 1.5em;
    }

    .news_detail .news_info {
        display: block;
    }

    .news_detail .outline {
        margin: 0 auto 10px;
    }

    .seminar_detail {
        margin: 30px auto 0;
    }

    .w100 {
        width: 100%;
    }

    .bg_border {
        margin: 0 auto;
        padding: 10px 0;
        background: linear-gradient(to right, var(--water_color) 0%, var(--water_color) 15%, #fff 15%, #fff 100%);
    }

    .seminar_outline_box {
        width: 80%;
        padding: 20px 20px 10px;
        background: #fff;
        margin: 15px auto 25px;
    }

    .seminar_outline_box .tag_bookmark {
        margin: 10px 0;
    }

    .seminar_outline_box .thumb {
        margin-bottom: 5px;
    }

    .seminar_outline_box img {
        margin: 0 auto;
    }

    .seminar_outline_box .company {
        margin: 0 0 8px;
        display: flex;
        align-items: start;
    }

    .seminar_outline_box .summary {
        margin: 0;
    }

    .seminar_outline_box a {
        display: block;
        flex: 1;
    }

    .seminar_outline_box p {
        font-size: 15px;
        margin: 0 auto 10px;
        text-align: left;
    }

    .seminar_detail.entry {
        margin-bottom: 50px;
    }

    .seminar_detail.entry .term_box {
        width: 90%;
        margin: 0 auto;
    }

    .term_box h5 {
        margin: 30px 0 0 0;
    }

    .term_check {
        width: 100%;
        margin: 20px auto 0;
    }

    .term {
        display: block;
        margin: 0 auto;
    }

    .news_point {
        margin-top: 30px;
        padding: 30px;
    }

    .news_point span {
        display: inline;
        font-size: 15px;
    }

    .news_point p {
        margin: 16px 0;
    }

    .news_point .btn {
        display: block;
        margin-top: 16px;
    }

    .news_point .btn a {
        margin-top: 8px;
    }

    .news_contents.relation {
        margin-bottom: 0;
    }

    .news_contents.relation h4 {
        margin: 30px 0 10px;
    }

    .category_contents {
        margin-top: 40px;
        padding-bottom: 30px;
        width: 100%;
    }

    .category_contents .news_contents {
        margin: 0 auto;
    }

    .category_contents .tag {
        margin-top: 5px;
    }

    .category_contents .detail_title4 {
        font-size: var(--font_size_s);
    }

    .btn .dubble {
        margin: 10px auto 0;
    }

    .quiz, .quiz_detail {
        width: 100%;
        margin: 0 auto;
    }

    .quiz h1 span {
        display: block;
        width: 40%;
        margin: 5px auto 0;
    }

    .quiz ul, .quiz_contents {
        margin-bottom: 40px;
    }

    .quiz_detail .detail_title {
        width: 100%;
        margin-bottom: 10px;
    }

    .quiz_detail .detail_title h1 {
        text-align: left;
    }

    .quiz_detail .date span {
        margin-bottom: 5px;
    }

    .quiz_detail .outline_box {
        margin: 15px auto 50px;
        box-shadow: none;
        border-radius: 0;
        padding: 15px 0 0;
        border-top: solid 1px var(--basic_color);
    }

    .quiz_detail .quiz_title {
        /* font-size: 16px; */
    }

    .quiz_radio .box {
        margin: 1.2em auto 0;
    }

    .quiz_detail .hint {
        display: block;
        text-align: center;
    }

    .hint .caption {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .hint .lineArrow {
        height: 0;
        border-bottom: 0;
        border-right: 0;
        margin: 0;
    }

    .hint .btn_secondary {
        margin: 0 auto;
    }

    .btn_secondary.quiz {
        margin: 30px auto;
    }

    .quiz_detail .answered p {
        margin: 15px auto 25px;
    }

    .quiz_detail .answer {
        text-align: left;
    }

    .quiz_detail .answer p {
        margin: 10px auto;
        text-align: center;
    }

    .quiz_contents {
        margin: 10px auto 0;
    }

    .quiz_contents li a {
        align-items: flex-start;
    }

    .quiz_contents .article .point {
        margin: 2px 0 0 0;
    }
    .quiz_sub_title {
        display: block;
    }

    .quiz h1 span {
        margin-top: 10px;
        margin-left: 0;
    }
    .quiz_button_list {
        flex-wrap: wrap;
        gap: 0;
    }
    .btn_secondary.quiz {
        margin: 10px auto;
    }
    .quiz_title_main {
        width: auto;
    }

    .quiz_sub_title {
        display: block;
    }

    .quiz h1 span {
        margin-left: auto;
    }

    #service_modal_contents {
        width: 94%;
    }

    .service_document.modal_document {
        display: block;
        width: 100%;
    }

    .service_document.modal_document {
        margin: 0;
        padding: 0;
    }

    .document_area.modal_document {
        padding: 0 20px;
    }

    .service_modal_content {
        padding: 16px;
    }

    .service_modal_content_title p {
        text-align: left;
        padding: 0 1rem;
    }

    .service_modal_content .document_area_checkbox {
        padding-top: 10px;
        padding-right: 0px;
        margin: 0;
    }

    .service_modal_content .document_img.modal_image {
        margin-right: 0;
        min-width: auto;
        width: 30%;
    }

    #service_modal_contents > #modal_close_button {
        top: 5px;
        right: 0;
    }

    #service_modal_contents > #modal_close_button img {
        width: 80%;
    }

    .service_modal_content .document_area.modal_document {
        padding: 10px 15px;
    }

    .service_modal_content .document_area {
        margin-top: 10px;
    }

    .service_modal_content .document_img.modal_image {
        width: auto;
        min-width: unset;
    }

    .service_modal_content .top_contents_matter .document_img img {
        height: auto;
        margin-right: 0;
        padding-right: 0;
    }

    .service_modal_content .top_contents_matter li a {
        display: flex;
        padding: 10px 0;
        border-bottom: solid 1px #E5E5E5;
        font-weight: bold;
    }

    .service_modal_content .link_detail h4 {
        font-size: 0.8rem;
        padding-right: 1rem;
    }

    .link_detail p {
        font-size: 0.6rem;
    }

    .service_modal_content .service_detail {
        width: 90%;
        margin: 0px auto;
    }

    .service_modal_content .tag_bookmark ul {
        display: flex;
        flex-wrap: wrap;
        margin: 4px 0;
    }

    .service_modal_content .tag_bookmark ul li a {
        padding: 0;
    }

    .service_modal_content .tag_bookmark ul li a .tag {
        font-size: 0.6rem;
        margin: 0 2px 4px;
    }

    .document_area_checkbox {
        margin: 0 auto 30px;
    }

    .top_contents_matter.mg0 {
        margin: 0 auto;
    }

    .modal_download_button {
        width: 80%;
    }

    .modal_download_link {
        padding-left: 0px;
    }

    .document_img.modal_image {
        width: auto;
        min-width: unset;
    }

    ul.bookmark_area .document_img {
        min-width: auto;
        margin: 0 auto;
        width: 100%;
        padding-top: 0;
    }

    ul.bookmark_area .document_area img {
        width: 150px;
        height: auto;
        display: block;
        margin: 0px auto;
    }

    ul.bookmark_area .document_area h2 {
        font-size: var(--font_size_r);
        padding: 0;
        margin-top: 0;
        margin-bottom: 8px;
        border-bottom: none;
        font-weight: bold;
        line-height: 1.4em;
        min-height: 32px;
    }
    ul.bookmark_area .document_area h2 + p,
    ul.bookmark_area .document_area h2 + p + p {
        padding-left: 90px;
        min-height: 20px;
    }
    ul.bookmark_area .service_detail {
        margin: 0px auto;
    }
    .category_contents {
        margin: 20px 0 20px 0;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 480px) {
    #admin ul.bookmark_area .document_area {
        display: block;
        padding: 15px;
    }
    #admin ul.bookmark_area .document_area .document_img {
        width: 100%;
        margin: 0;
    }
    #admin ul.bookmark_area .document_area h2 {
        margin: 8px 0;
    }
}


.category_top_list {
    overflow: hidden;
    margin: 32px 0;
}
.category_top_list ul {
    display: none;
    position: relative;
}

.category_top_list li {
    padding: 8px 4px;
}
.category_top_list li span {
    display: block;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    padding: 4px;
    border-radius: 20%;
    overflow: hidden;
}
.category_top_list li span img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.category_top_list .slide-arrow {
    top: 0!important;
    margin: 0;
    height: 100%;
    opacity: 0.5;
    transition: all 0.3s ease;
}
.category_top_list .slide-arrow:hover {
    opacity: 1;
}
.category_top_list .btn_primary {
    display: block;
    height: auto;
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    .category_top_list {
        margin: 24px 0;
    }
}

.service_detail2 {
    box-shadow: var(--box_shadow);
    border-radius: 20px;
    padding: 16px;
    margin: 24px 0;
}
.service_detail2:after {
    content: "";
    display: block;
    clear: both;
}
.service_detail2 h4 {
    font-size: var(--font_size_m);
    font-weight: bold;
    display: flex;
    align-items: center;
}
.service_detail2 h4 a.txt {
    color: var(--primary_color);
    line-height: 1.3em;
    flex: 1;
}
.service_detail2 h4 b.txt {
    line-height: 1.3em;
    flex: 1;
}
.service_detail2 h4 a.txt:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-top: solid 3px var(--primary_color);
    border-right: solid 3px var(--primary_color);
    margin: 0 0 2px 2px;
}
.service_detail2 h4 a.thumb_logo {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    padding: 8px;
    box-sizing: border-box;
    border: solid 1px #efefef;
    vertical-align: middle;
}
.service_detail2 h4 a.thumb_logo img {
    font-size: var(--font_size_xs);
    width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
}
.service_detail2 h4 span.thumb {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    padding: 8px;
    box-sizing: border-box;
    border: solid 1px #efefef;
    vertical-align: middle;
}
.service_detail2 h4 img {
    height: 100%;
    border: none;
}
.service_detail2 b {
    font-weight: bold;
    display: block;
    margin: 16px 0 8px 0;
}
.service_detail2 p {
    line-height: 1.7em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.service_detail2 .col3 .data_txt_01 {
    flex: 1;
    padding: 4px 0;
    background: #ffffff;
    margin-bottom: 8px;
}
.service_detail2 .btnset{
    display: flex;
    align-items: center;
    margin-top: 16px;
}
.service_detail2 .col3 {
    font-size: var(--font_size_s);
    padding: 4px;
    background: #F6F6F6;
    box-sizing: border-box;
    flex: 1;
}
.service_detail2 .col3 .data {
    width: 33.33%;
    padding: 4px;
}

.service_detail2 .checkbox02 {
    width: 40%;
    margin: 0 0 0 16px;
}
@media screen and (max-width: 768px) {
    .service_detail2 .btnset{
        display: block;
    }
    .service_detail2 .checkbox02 {
        width: 70%;
        min-width: 220px;
        margin: 16px auto 0 auto;
    }
}
@media screen and (max-width: 480px) {
    .service_detail2 .col3 {
        display: block;
    }
    .service_detail2 .col3 .data {
        display: flex;
        width: auto;
    }
    .service_detail2 .col3 .data .data_txt_01 {
        width: 110px;
        flex: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .service_detail2 .col3 .data .data_txt_02 {
        line-height: 1.5em;
        padding: 4px 8px;
        text-align: left;
    }

}

.service_detail .btnset label.request {
    /*height: auto;*/
    line-height: 1.2em;
    width: 90%;
    max-width: 350px;
    background: var(--primary_color);
    border: solid 2px var(--primary_color);
}
.service_detail .btnset input:checked + label.request {
    background: var(--light_color2);
    border: solid 2px var(--primary_color);
}
.service_detail .btnset input:checked + label:before,
.service_detail .btnset  input:checked +label:after {
    content: "";
}
.service_detail .btnset label:before,
.service_detail .btnset label:after {
    content: none;
}
.service_detail .btnset label.request:after {
    top: 50%;
    margin-top: -13px;
}
/***********************************
** ポイント
***********************************/
.mypage.category {
    margin-bottom: 70px;
}

.mypage.category p {
    margin-bottom: 20px;
}

.top_main_container.one_column.point_area {
    width: 100%!important;
    max-width: none!important;
}

.top_main_container.one_column.point_area .top_main_area {
    width: 100%;
    max-width: none;
}

.point {
    text-align: center;
}
.point .point_fv {
    background: #E5ECF4;
}

.point .point_fv .inner {
    max-width: 1100px;
    padding: 1px 20px;
    margin: 0 auto;
}

.point .point_fv h1 {
    font-size: var(--font_size_l);
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}

.point .point_fv p {
    line-height: 2.0em;
    margin: 40px 0;
}

.point .top_main_area {
    width: auto;
    max-width: 1100px;
    padding: 1px 20px;
    margin: 0 auto;
}

.point main {
    max-width: 1000px;
    padding: 1px 20px;
    margin: 60px auto;
}

.total_point, .total_point2 {
    /*width: 30%;*/
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background: var(--water_color);
    display: inline-block;
    padding: 8px 16px 8px 8px;
    border-radius: 40px;
    display: inline-block;
    margin: 0 auto;
}

.total_point img, .total_point2 img {
    width: 40px;
    vertical-align: middle;
    margin-right: 5px;
}

.total_point b, .total_point2 b {
    color: var(--accent_color);
    font-size: var(--font_size_2xl);
    font-weight: bold;
    font-style: italic;
    vertical-align: top;
    display: inline-block;
    padding-right: 14px;
    position: relative;
}

.total_point b:after, .total_point2 b:after {
    content: "P";
    font-size: var(--font_size_m);
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    bottom: -8px;
    right: 0;
}
.point h2 {
    font-size: var(--font_size_m);
    font-weight: bold;
    margin: 0 0 20px 0;
}

.point h2 b {
    color: var(--primary_color);
}

.point h4 {
    margin-top: 40px;
}
/*
.point h2 + p {
    text-align: center;
}

.point h2 i {
    color: var(--primary_color);
    font-size: var(--font_size_2xl);
    font-style: italic;
    display: inline-block;
    margin-right: 5px;
}
*/
.point .pc {
    display: block!important;
}

.point .sp {
    display: none!important;
}

.point_mark {
    width: 50px;
}

.login_area {
    max-width: 960px;
}

.point_nav {
    display: flex;
    margin: 40px 0;
    justify-content: space-between;
}

.point_nav a {
    color: #151517;
    font-size: var(--font_size_m);
    font-weight: 600;
    text-align: center;
    display: block;
    width: 50%;
    height: auto;
    padding: 30px;
    margin: 0 16px;
    max-width: none;
    background: #ffffff;
    border-radius: 20px;
    border: solid 1px #ffffff;
    box-shadow: var(--box_shadow);
    box-sizing: border-box;
}

.point_nav a:hover {
    box-shadow: none;
    opacity: 1;
    transform: scale(0.95);
    border: solid 1px var(--light_color2);
}

.point_nav a b:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    background: url(../img/point/allow.svg) no-repeat center center / 30% auto, var(--primary_color);
    width: 24px;
    height: 24px;
    margin-left: 5px;
    border-radius: 12px;
    position: relative;
    bottom: 2px;
}

.point_nav a span {
    color: var(--primary_color);
    font-weight: 500;
    text-align: center;
    display: block;
}

.point_nav a img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.what {
    text-align: center;
    margin-bottom: 60px;
}

.what a {
    color: var(--primary_color);
}

.what a:before {
    color: var(--primary_color);
    content: "？";
    font-size: var(--font_size_s);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: none;
    border: solid 1px var(--primary_color);
    border-radius: 20px;
}

.history {
    background: #F3F6F9;
    position: relative;
}

.history > i {
    display: block;
    height: 100%;
    background: #F3F6F9;
    position: absolute;
    top: 0;
    z-index: -1;

    position: absolute;
}
.history .inner {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.history .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.history h4 {
    font-size: var(--font_size_l);
    font-weight: bold;
    line-height: 40px;
    text-align: left;
    margin: 0;
}

ul.point_detail {
    clear: both;
    text-align: left;
}

ul.point_detail li {
    line-height: 40px;
    padding: 30px;
}

ul.point_detail li:after {
    content: "";
    display: block;
    clear: both;
}

ul.point_detail li:nth-child(2n-1) {
    background: #ffffff;
}

ul.point_detail li span {
    font-size: var(--font_size_s);
    display: inline-block;
    border-right: solid 1px #151517;
    padding-right: 20px;
    margin-right: 20px;
}

ul.point_detail li b {
    font-size: var(--font_size_l);
    font-weight: bold;
    float: right;
}

ul.point_detail li b:after {
    content: "P";
    display: inline-block;
    margin-left: 5px;
}

ul.point_detail li a {
    color: var(--primary_color);
    text-decoration: underline;
    display: inline-block;
    margin-left: 5px;
}

ul.point_detail li.plus b {
    color: var(--basic_color);
}

ul.point_detail li.plus b:before {
    content: "獲得";
    color: var(--basic_color);
    font-size: var(--font_size_s);
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    float: right;
    margin-top: 6px;
    margin: 6px 0 0 20px;
    display: block;
    width: 60px;
    border: solid 1px var(--basic_color);
}

ul.point_detail li.minus b {
    color: var(--accent_color);
}

ul.point_detail li.minus b:before {
    content: "利用";
    color: var(--accent_color);
    font-size: var(--font_size_s);
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    float: right;
    margin-top: 6px;
    margin: 6px 0 0 20px;
    display: block;
    width: 60px;
    border: solid 1px var(--accent_color);
}

.calendar_container {
    line-height: 40px;
    text-align: right;
    margin: 0;
    flex: 1;
}

.calendar_container b {
    display: inline-block;
    margin: 0 5px;
}

.calendar_container input[type="text"] {
    font-size: var(--font_size_r);
    font-family: roboto;
    line-height: 20px;
    width: 160px;
    height: auto;
    padding: 10px;
    margin-bottom: 5px;
    background: url(../img/point/icon-calendar.svg) no-repeat right center / 40px auto , #ffffff;
    border: solid 1px var(--primary_color);
}

.calendar_container input[type="submit"] {
    color: #ffffff;
    font-size: var(--font_size_r);
    line-height: 20px;
    background: var(--primary_color);
    border: none;
    width: 120px;
    height: auto;
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin: 0 0 5px 10px;
}

.calendar_container::after {
    content: none;
}

@media screen and (max-width: 768px) {
    .mypage.category {
        margin-bottom: 20px;
    }

    .point .breadcrumb {
        margin: 15px 0 0;
    }

    .history .inner {
        padding: 16px 0;
    }

    .point .point_fv h1 {
        font-size: var(--font_size_m);
        margin: 20px auto;
    }

    .point .point_fv p {
        margin: 20px auto;
    }

    .total_point, .total_point2 {
        line-height: 30px;
    }

    .total_point img, .total_point2 img {
        width: 30px;
    }

    .total_point b, .total_point2 b {
        font-size: var(--font_size_l);
    }

    .total_point b, .total_point2 b:after {
        font-size: var(--font_size_s);
        bottom: -4px;
    }

    .point .pc {
        display: none!important;
    }

    .point .sp {
        display: block!important;
    }

    .point main {
        margin: 30px auto;
    }

    .point h2 {
        font-size: var(--font_size_m);
        margin: 0 0 20px 0;
    }

    .point h2 i {
        font-size: var(--font_size_l);
    }

    .point_nav {
        margin: 20px -8px;
    }

    .point_nav a {
        font-size: var(--font_size_s);
        padding: 15px;
        margin: 0 8px;
    }

    .point_nav a:before {
        width: 16px;
        height: 16px;
    }

    .point_nav a:after {
        font-size: var(--font_size_s);
    }

    .what {
        margin-bottom: 20px;
    }

    ul.point_detail li {
        line-height: 1.5em;
        padding: 10px;
    }

    .history h4 {
        font-size: var(--font_size_m);
    }

    .calendar_container input[type="text"] {
        width: 120px;
        padding: 5px;
        background-size: 30px auto;
    }

    .calendar_container input[type="submit"] {
        padding: 5px;
    }

    ul.point_detail li span {
        display: block;
        border: none;
    }

    ul.point_detail li b {
        text-align: right;
        display: block;
        margin-top: 10px;
        float: none;
        clear: both;
    }

    ul.point_detail li.plus b:before, ul.point_detail li.minus b:before {
        margin: 0 0 0 10px;
        position: relative;
        bottom: 3px;
    }
}

@media screen and (max-width: 480px) {
    .history .title {
        display: block;
    }
}

/*-- --------- --------- --------- --*/
/*-- ポイントを貯める --*/
/*-- --------- --------- --------- --*/
.topics_title {
    align-content: center;
    align-items: center;
    width: 100%;
}
/*
.topics_title p {
    line-height: 2.6;
}
*/
.topics_title p.underline {
    font-weight: bold;
}

.topics_point {
    text-align: center;
    background-color: var(--primary_color);
    color: #fff;
    padding: 1% 2%;
    margin: 1% 0 0 75%;
}

.tag_blue {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--primary_color);
    background-color: var(--primary_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

.point.save .point_fv h1 img {
    width: auto;
    height: 100px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}

.point.save .col2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.point.save .col2 > * {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

.point.save .col2 li article {
    text-align: left;
    background: #fff;
    border-radius: 30px;
    box-shadow: var(--box_shadow);
    display: block;
    padding: 24px;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.point.save ul.yet li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.point.save ul.yet li .thumb {
    width: 150px;
}

.point.save ul.yet li .txt {
    text-align: left;
    flex: 1;
    padding: 0 200px 0 16px;
    position: relative;
}

.point.save ul.yet li .txt i {
    display: block;
}

.point.save ul.yet li .txt i .tag {
    margin: 4px 4px 4px 0;
}

.point.save ul.yet li .txt a {
    text-decoration: underline;
    font-weight: bold;
}

.point.save ul.yet li .txt p {
    color: #ffffff;
    display: block;
    background: var(--primary_color);
    padding: 8px 16px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.point.save ul.yet li .txt p span {
    margin-left: 16px;
}

.pointbox_flex{
    display: flex;
    margin: 20px auto 40px;
    justify-content: center;
}

.pointbox_flex .btn_secondary{
    margin:0 0 0 20px;
}

.point_area .detail_title p {
    line-height: 1.5em;
    margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
    .point.save ul.yet li {
        display: block;
        position: relative;
        border-top: solid 1px var(--light_color2);
        padding-top: 16px;
        margin-top: 16px;
    }
    .point.save ul.yet li .thumb {
        width: 120px;
        margin-bottom: 8px;
    }
    .point.save ul.yet li .txt {
        position: static;
        padding: 0 0 44px 0;
    }
    .point.save ul.yet li .txt i {
        position: absolute;
        top: 30px;
        left: 128px;
    }
}

.point.save .col2 li article {
    position: relative;
    padding-bottom: 60px;
}
.point.save .col2 li article b {
    font-weight: bold;
    line-height: 30px;
}
.point.save .col2 li article b img {
    display: inline-block;
    width: auto;
    height: 30px;
    vertical-align: middle;
    margin-right: 8px;
}

.point.save .col2 li article p {
    margin: 16px 0;
}

.point.save .col2 li article .btn {
    padding: 0 16px;
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}
.point.save .col2 li article .btn a {
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .point h2 {
        border-bottom: solid 1px var(--basic_color);
    }
}
@media screen and (max-width: 768px) {
    .point h2 {
        margin: 30px 0 20px 0;
    }
    .point.save .col2 li {
        width: 100%;
    }
    .topics_point {
        margin: 1% 0 0 30%;
    }

    .topics_title p {
        line-height: 1.6;
    }

    .topics_title p.underline {
        margin-bottom: 10px;
    }

    .point.save .point_fv h1 img {
        height: 50px;
    }

    .point.save .col2 {
        margin: 0 -10px;
    }

    .point.save .col2.yet li a img {
        width: 100px;
    }

    .point.save .col2.yet li a {
        padding-left: 140px;
    }

    .point.save .col2.yet li a {
        padding: 20px;
    }

    .point.save .col2.yet li a img {
        margin: 0 0 10px 0;
        position: static;
        width: 100%;
        float: none;
    }

    .point.save .col2.yet li a .txt {
        padding: 0;
    }
    .pointbox_flex {
        margin: 20px auto 0;
    }
}

@media screen and (max-width: 480px) {
    .pointbox_flex {
        display: block;
        margin: 0 auto;
        justify-content: center;
    }
    .pointbox_flex .btn_secondary{
        margin: 30px auto 0;
    }
    .pointbox_flex .total_point, .total_point2 {
        width: 80%;
        display: block;
    }
}

/*-- --------- --------- --------- --*/
/*-- ポイントを使う --*/
/*-- --------- --------- --------- --*/
.box_wrap {
    margin-bottom: 8%;
}



.point_box {
    text-align: center;
    display: flex;
    background-color: var(--water_color);
    margin: 24px 0;
    font-weight: bold;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.point_box:first-of-type {
    margin-top: 40px;
}
.point_box .thumb {
    width: 30%;
    margin: 40px 0 40px 40px;
    background: #ffffff;
}
.point_box .txt {
    line-height: 2em;
    flex: 1;
    padding: 0 16px;
}
.point_box .txt span {
    color: var(--primary_color);
    font-size: var(--font_size_m);
    margin: 0 1% 0 0;
}
.point_box a {
    color: #fff;
    text-align: center;
    background-color: var(--primary_color);
    width: 100%;
    padding: 16px 32px 16px 32px;
    display: block;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .point_box {
        display: block;
    }
    .point_box:first-of-type {
        margin-top: 24px;
    }
    .point_box .thumb {
        margin: 24px auto 16px auto;
        width: 70%;
    }
    .point_box a {
        margin-top: 24px;
    }
    /*
    .point_box li {
        width: 100%;
    }

    .point_box {
        text-align: center;
        background-color: var(--water_color);
        padding: 5%;
        font-weight: bolder;
    }

    .point_box p {
        line-height: 2em;
        margin-top: 4%;
    }

    .point_box p span {
        color: var(--primary_color);
        font-size: 1.5em;
        margin: 0 1% 0 0;
    }

    .point_box2 {
        text-align: right;
        background-color: var(--primary_color);
        color: #fff;
        padding: 2% 7% 2% 2%;
        font-weight: bolder;
    }

    .point_box2 {
        text-align: center;
        background-color: var(--primary_color);
        color: #fff;
        padding: 2% 1%;
        font-weight: bolder;
    }
    */
}
/*
.point_box .thumb {
    display: inline-block;
    margin: 0 2%;
    vertical-align: middle;
}

.point_box li {
    display: inline-block;
    width: 65%;
    vertical-align: middle;
}

.point_box p {
    line-height: 2em;
    margin-top: 4%;
}

.point_box p s

.point_box2 {
    text-align: right;
    background-color: var(--primary_color);
    color: #fff;
    padding: 2% 7% 2% 2%;
    font-weight: bolder;
}

.point_box2 {

    padding: 2% 1%;
    font-weight: bolder;
}
*/
.point_btn {
    background: var(--primary_color);
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: grid;
    place-items: center;
    position: relative;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

a.point_btn::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 14px;
}

.point_description {
    line-height: 1.8;
    text-align: left;
    color: var(--basic_color_light);
}

.point_description a {
    color: var(--primary_color);
    text-decoration: underline;
}

.point.use .error {
    text-align: left;
    margin: 16px auto;
}

.point.use p a {
    color: inherit;
    text-decoration: underline;
}

.point.use .image_point p {
    font-size: var(--font_size_s);
    margin-top: 16px;
}

.point.use table.num_select {
    width: 100%;
    margin: 16px 0 0 0;
}

.point.use table.num_select tr {
    border-bottom: solid 1px #ccc;
}
.point.use .error b {
    font-weight: bold;
    display: block;
    margin: 0 0 8px 0;
}
.point.use .text_right a {
    color: var(--primary_color);
    text-decoration: underline;
    position: relative;
}
.point.use .text_right a:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 22px;
    background: var(--primary_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -16px;
    top: -8px;
}
.point.use .caution {
    color: var(--accent_color);
    font-size: var(--font_size_s);
    margin: 16px 0;
}
.point.use .btn_secondary {
    margin: 32px auto 0;
}
.point.use .btnset {
    display: flex;
    margin-top: 16px;
    margin: 32px auto 0;
    max-width: 480px;
}
.point.use .btnset a,.point.use .btnset button {
    margin: 0 4px;
    order: 2;
    cursor: pointer;
    border: solid 2px var(--primary_color);
    padding: 12px 32px;
}
.point.use .btnset .btn_return {
    order: 1;
}
.point.use h2 + p.text_center {
    margin-bottom: 32px;
}
@media screen and (max-width: 480px) {
    .point.use .btnset {
        display: block;
        width: 90%;
        margin: 32px auto 0;
    }
    .point.use .btnset a,.point.use .btnset button {
        width: 100%;
        margin: 16px 0;
        max-width: none;
    }
}
.point.use table.num_select {
    width: 100%;
    margin: 16px 0 0 0;
}

.point.use table.num_select tr {
    border-bottom: solid 1px #ccc;
}

.point.use table.num_select th {
    font-weight: bold;
    padding: 8px 0;
}

.point.use table.num_select td {
    vertical-align: middle;
    min-width: 100px;
    box-sizing: border-box;
}

.point.use table.num_select td:nth-child(2) {
    padding: 0 8px;
}

.point.use table.num_select img {
    width: 120px;
    margin: 8px auto;
    display: block;
}

.point.use table.num_select td a {
    color: var(--primary_color);
    font-size: var(--font_size_m);
    font-weight: bold;
}
.point.use table.num_select td b {
    font-size: var(--font_size_m);
    font-weight: bold;
}

.point.use table.num_select td a:after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}

.point.use table.num_select td span:after {
    content: "P";
}

.point.use table.num_select td .cp_ipselect {
    width: 100px;
    margin: 0;
    display: inline-block;
    margin-right: 8px;
}

.point.use table.num_select.ex {
    max-width: 600px;
    margin: 20px auto 0 auto;
}

.point.use table.num_select.ex br {
    display: none;
}


.point.use table.num_select.ex td {
    padding: 20px 0;
}

.point.use table.num_select td span {
    display: inline-block;
    margin: 8px 0;
}

.point.use table.num_select.ex td:first-child {
    text-align: left;
}

.point.use table.num_select.ex td span {
    margin: 0;
}
/*
.point.use table.num_select.ex + .totalpoint_area {
    max-width: 600px;
    margin: 20px auto;
}
*/
@media screen and (max-width: 768px) {

/*
    .point_btn {
        background: var(--primary_color);
        color: #fff;
        font-weight: bold;
        height: 45px;
        text-align: center;
        display: grid;
        place-items: center;
        position: relative;
    }

    .point_btn::before {
        content: "";
        width: 9px;
        height: 22px;
        background: #fff;
        clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
        position: absolute;
        right: 20px;
        top: 5px;
    }

    .point_btn::before {
        content: "";
        width: 9px;
        height: 22px;
        background: #fff;
        clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
        position: absolute;
        right: 10px;
        top: 6px;
    }

    .service_contents .select_area.point {
        display: flex;
        flex-direction: unset;
        align-items: center;
        justify-content: flex-end;
    }
*/

@media screen and (max-width: 768px) {
    .point .step li {
        padding: 10px 10px 10px 40px;
    }

    .point .step li b {
        font-size: var(--font_size_s);
    }


    .point.use table.num_select {
        margin: 20px 0 0 0;
    }

    .point.use table.num_select th {
        display: none;
    }

    .point.use table.num_select tr {
        position: relative;
    }

    .point.use table.num_select td {
        text-align: left;
        display: block;
        float: right;
        width: 70%;
        min-width: auto;
    }

    .point.use table.num_select td:first-child {
        width: 30%;
        float: left;
        padding-right: 10px;
        padding: 20px 10px 20px 0;
        box-sizing: border-box;
    }

    .point.use table.num_select td:last-child {
        text-align: right;
        padding-bottom: 20px;
    }

    .point.use table.num_select td img {
        width: 100%;
        margin: 0;
        border: solid 1px #efefef;
    }

    .point.use table.num_select td a,
    .point.use table.num_select td b {
        font-size: var(--font_size_r);
        display: inline-block;
        margin-top: 20px;
    }

    .point.use table.num_select td span:before {
        content: "必要ポイント：";
    }

    .point.use table.num_select td .cp_ipselect {
        margin-right: 8px;
        vertical-align: bottom;
    }

    .point.use table.num_select.ex td {
        width: 100%;
        padding: 0;
    }

    .point.use table.num_select.ex br {
        display: inline;
    }


    .point.use table.num_select.ex td:first-child {
        padding-top: 10px;
    }

    .point.use table.num_select.ex td:last-child {
        position: static;
        padding-bottom: 10px;
    }

    .point.use table.num_select.ex td b {
        margin: 0;
    }

}
}
#use_point form{
    max-width: 600px;
    margin: 0 auto;
}

#use_point .detail_title + .mypage {
    margin: 24px auto;
}
/*** 商品と交換する***/
.block .inner {
    padding: 15px;
}

.headline--lv4 {
    color: #004a83;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 28px;
    line-height: 2.8rem;
    padding: 0 0 6px;
    border-bottom: 1px dotted #004a83;
    position: relative;
}

.select_area.point {
    justify-content: normal;
}

.select_area {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 0px 12px 0px;
}

.cp_ipselect_title.point {
    margin-left: 10px;
}

.cp_ipselect.right {
    margin: 0;
}
.questionnaire_submit_btn {
    position: relative;
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
}
.questionnaire_submit_btn:before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 999;
}
.questionnaire_submit_btn.questionnaire_submit_btn_arrow:before {
    right: 40px;
    top: 9px;
}
.totalpoint_area {
    margin-top: 16px;
    padding: 16px;
    border: 3px solid var(--accent_color);
}

.totalpoint_number {
    text-align: right;
}

.totalpoint_number hr {
    border: none;
    height: 1px;
    background: var(--accent_color);

}

.totalpoint_area p {
    color: var(--accent_color);
}

.point_link h4::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(/img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}

/***********************************
** other / about-point
***********************************/
#about_point .news_point2 {
    margin-bottom: 16px;
}

#about_point .detail_title {
    text-align: center;
}

#about_point h5.detail_title5 {
    text-align: left;
}

#about_point .detail_title p {
    text-align: center;
}

#about_point .emphasis_b {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary_color);
}

#about_point .news_point .equation p {
    width: 50%;
    margin: 0 auto;
}

#about_point .news_point .equation span {
    border-bottom: none;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary_color);
    margin-bottom: 5px;
    display: block;
}

#about_point .news_point .equation img {
    width: 20%;
    padding: 2% 0 1%;
    transform: none;
}
#about_point .news_point .point_img img {
    width: 80%;
    transform: none;
    margin: 20px auto 0;
}

#about_point .font_small {
    font-size: var(--font_size_xs);
    margin: 8px 0;
}
/***********************************
** other / guide
***********************************/
#guide .tag_red {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--accent_color);
    background-color: var(--accent_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#guide h1 span {
    position: relative;
    margin: 0;
    padding: 20px 40px;
    display: inline-block;
}
#guide h1 span:before {
    content: "";
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 50px;
    border-top: solid 10px #568ECB;
    border-left: solid 4px #568ECB;
}
#guide h1 span:after {
    content: "";
    display: block;
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 50px;
    border-bottom: solid 10px #568ECB;
    border-right: solid 4px #568ECB;
}
#guide h3 {
    color: inherit;
    border: none;
    display: block;
    text-align: center;
    font-size: var(--font_size_m);
    margin: 30px 0 20px 0;
}

#guide .tag_blue {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--primary_color);
    background-color: var(--primary_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#guide .blue {
    color: var(--primary_color);
}

#guide .red {
    color: var(--accent_color);
}

#guide .f_bold {
    font-weight: bold;
}

#guide .underline {
    text-decoration: underline;
}

#guide .text_r {
    text-align: right;
}

#guide .emphasis_b {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary_color);
}

#guide .emphasis {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 2%;
    display: inline-block;
}

#guide .font_small {
    font-size: .8em;
}

#guide .center {
    text-align: center;
    margin: 20px 0 0;
}

#guide .mb30 {
    margin-bottom: 30px;
}

#guide .w80 {
    width: 80%;
}

@media screen and (max-width: 768px) {
    #guide .main_area {
        margin: 0 20px;
    }
}
#guide > i {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/beginner/main_bg.png) no-repeat center 90% / 100% auto;
    z-index: -1;
    transition: all 1s linear;
}
#guide .guide_top li {
    display: inline-block;
    vertical-align: middle;
}

#guide .guide_top .logo {
    max-width: 240px;
    margin-right: 8px;

}

#guide .guide_top_btn li {
    display: inline-block;
    width: 47%;
    margin: 0 2% 0 0;
}

#guide .detail_title p {
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 10px;
    width: 100%;
    margin: 0 auto;
}

#guide .detail_title p span {
    display: inline-block;
    margin-left: 8px;
}

#guide .head_howto {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    color: var(--primary_color);
    text-align: center;
    display: block;
    border: none;
}

#guide .block {
    border: 1px solid #d2dce7;
    margin-bottom: 50px;
    position: relative;
}

#guide .block span {
    position: absolute;
    top: -15px;
    left: 30px;
    background: var(--primary_color);
    color: #fff;
    padding: 4px 20px;
}

#guide .block h3 {
    border-bottom: none;
    font-weight: bold;
    color: var(--primary_color);
    display: inline-block;
    margin-bottom: 12px;
    font-size: 20px;
}

#guide .block2 {
    border: 1px solid #d2dce7;
    margin: 0 20px 30px;
}

#guide .block2 ul {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#guide .block2 li {
    width: 40%;
    padding: 8px;
    box-sizing: border-box;
}
#guide .block2 li:nth-child(2n) {
    width: 60%;
}
#guide .block2 li b {
    font-size: var(--font_size_m);
    font-weight: bold;
    display: block;
}

#guide .block3 {
    border: 1px solid #d2dce7;
    margin: 0 18px 30px;
    width: 44%;
    display: inline-block;
}

#guide .block3 ul {
    margin: 3%;
}

#guide .text {
    padding: 30px 40px 25px;
}

#guide .title_mini {
    background: var(--primary_color);
    color: #fff;
    font-size: 17px;
    text-align: center;
    padding: 1%;
}

@media screen and (max-width: 768px) {
    #guide .guide_top li {
        display: block;
    }

    #guide .block {
        margin-top: 30px;
    }

    #guide .block2 li {
        width: 100%;
        display: block;
    }

    #guide .block3 {
        border: 1px solid #d2dce7;
        margin: 0 18px 30px;
        width: 89%;
        display: block;
    }

    #guide .text {
        padding: 30px 20px 25px;
    }

}
#guide .tag_red {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--accent_color);
    background-color: var(--accent_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#guide .tag_blue {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--primary_color);
    background-color: var(--primary_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#guide .blue {
    color: var(--primary_color);
}

#guide .red {
    color: var(--accent_color);
}

#guide .f_bold {
    font-weight: bold;
}

#guide .underline {
    text-decoration:underline;
}

#guide .text_r {
    text-align: right;
}

#guide .emphasis_b {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary_color);
}

#guide .emphasis {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 2%;
    display: inline-block;
}

#guide .font_small {
    font-size: .8em;
}

#guide .center {
    text-align: center;
    margin: 20px 0 0;
}

#guide .mb30 {
    margin-bottom: 30px;
}

#guide .w80 {
    width: 80%;
}

@media screen and (max-width: 600px) {
    #guide .main_area {
        margin: 0 20px;
    }

}


#guide .guide_top li {
    display: inline-block;
    vertical-align: middle;
}
/*
#guide .guide_top .logo {
    width: 30%;
    margin-right: 3%;
}
*/
#guide .guide_top .logo img {
    width: 100%;
    display: block;
}
#guide .guide_top_btn li {
    display: inline-block;
    width: 47%;
    margin: 0 2% 0 0;
}

#guide .head_howto {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    color: var(--primary_color);
    text-align: center;
    display: block;
    border: none;
}

#guide .block {
    border: 1px solid #d2dce7;
    margin-bottom: 50px;
    position: relative;
}

#guide .block span {
    position: absolute;
    top: -15px;
    left: 30px;
    background: var(--primary_color);
    color: #fff;
    padding: 4px 20px;
}

#guide .block h3 {
    border-bottom: none;
    font-weight: bold;
    color: var(--primary_color);
    display: inline-block;
    margin-bottom: 12px;
    font-size: 20px;
}

#guide .block2 {
    border: 1px solid #d2dce7;
    margin: 0 20px 30px;
}




#guide .block3 {
    border: 1px solid #d2dce7;
    margin: 0 18px 30px;
    width: 44%;
    display: inline-block;
}

#guide .block3 ul {
    margin: 3%;
}

#guide .text {
    padding: 30px 40px 25px;
}

#guide .title_mini {
    background: var(--primary_color);
    color: #fff;
    font-size: 17px;
    text-align: center;
    padding: 1%;
}

/***********************************
** beginner
***********************************/
span.beginner_title {
    position: relative;
    margin-left: -80px;
    color: var(--primary_color);
}
span.beginner_title:before {
    content: url("../img/beginner/title_before.png");
    margin-right: 10px;
}
span.beginner_title:after {
    content: url("../img/beginner/title_after.png");
    position: absolute;
    margin-top: 20px;
    margin-left: 10px;
}
span.beginner_title.beginner_title_twostage:after {
    margin-right: -15px;
}
span.beginner_title.beginner_title_twostage:after {
    margin-top: 0;
    margin-left: 60px;
}/*
.beginner_manegy_logo > img {
    margin-top: -20px;
}
.detail_title.text_center {

}*/
.beginner_main_title {
    text-align: center;
    font-size: var(--font_size_2xl);
}

.beginner_about_manegy_area img {
    display: block;
    max-width: 768px;
    margin: 30px auto;
    width: 90%;
}
.beginner_main_bg_area {
    position: relative;
    /* overflow: hidden; */
    /*background: var(--water_color);*/
    /*padding-bottom: 120px;*/
}
.beginner_main_bg_area.beginner_before_login {
    background: none;
}
.beginner_about_area.beginner_title_area_float.beginner_before_login {
    background: var(--water_color);
    padding: 30px 0 60px;
    position: relative;
    z-index: 1;
}
.beginner_content_bg {
    background: var(--water_color);
    max-width: 1240px;
    margin: 40px auto 0;
    border-radius: 100px;
    padding-bottom: 40px;
    position: relative;
}
.beginner_content_bg > i {
    content: "";
    display: block;
    width: 50vw;
    height: 100%;
    position: absolute;
    top: 0;
    background: var(--water_color);
    z-index: -1;
}
/*
.beginner_main_bg1 {
    position: absolute;
    width: 77%;
    top: -80px;
    left: -49%;
    content: url(../img/beginner/main_bg1.png);
}
.beginner_main_bg2 {
    position: absolute;
    width: 32%;
    top: -65px;
    left: 68%;
    content: url("../img/beginner/main_bg2.png");
}
.beginner_content_bg1 {
    background-image: url("../img/beginner/content_bg1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;}
.beginner_content_bg2 {
    background-image: url("../img/beginner/content_bg2.png");
    background-repeat: no-repeat;
    background-position: right 0%;
}
*/
.top_bottom_outline_area {
    margin: 0 auto;
    /* width: 1880px; */
    width: 100%;
}

.beginner_description > p {
    text-align: center;
}
.beginner_title_area {
    text-align: center;
}
.beginner_title_area {
    /*background: var(--water_color);*/
    /*padding: 60px;*/
}

.beginner_catchphrase {
    font-size: 18px;
    font-weight: bold;
}
.beginner_about_manegy_area {
    max-width: 1300px;
    margin: 60px auto;
}/*
.beginner_top_bg {
    position: relative;
    width: 40%;
    margin: 0 auto;
}*/
.beginner_main_top_icon {
    margin: 30px auto;
}
.beginner_content_topic {
    text-align: center;
    font-size: var(--font_size_m);
    font-weight: 700;
}
.beginner_content_description {
    text-align: center;
    font-size: var(--font_size_s);
}
.beginner_content_topic_area {
    /*max-width: 400px;*/
    width: 33.33%;
    padding: 0 20px;
    box-sizing: border-box;
}
.beginner_content_area .btn_primary {
    margin: 50px auto 0 auto;
    padding: 40px 0;
    max-width: 420px;
}
.beginner_content_area .btn_secondary {
    margin: 16px auto 0 auto;
    max-width: 280px;
}
.beginner_content_img > img {
    /*width: 350px;*/
    width: 100%;
    margin: 16px auto;
    display: block;
    max-width: 320px;
}
.beginner_about_mg {
    margin-top: 30px;
}
.news_point_bg_none {
    background: none;
}
.beginner_gird {
    display: flex;
    justify-content: center;
}
.beginner_flex {
    display: flex;
    /*justify-content: space-around;*/
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.beginner_flex_merit.beginner_flex {
    justify-content: center;
    /*gap: 0;*/
}
.beginner_flex_merit.beginner_flex > div {
    padding: 10px;
}
.beginner_flex_merit.beginner_flex  img {
    border-radius: 40px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    display: block;
}
.beginner_flex {
    justify-content: center;
    /*gap: 60px;*/
}
.beginner_solution_flex {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin: 30px auto 40px;
    position: relative;
    padding: 0 20px;
}

.beginner_solution_flex > div {
    padding: 10px;
    max-width: 400px;
}
.beginner_solution_flex img {
    border-radius: 30px;
    border: solid 2px var(--primary_color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    width: 100%;
    display: block;
}
.beginner_solution_flex > img {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 140px;
    margin-left: -70px;
    padding: 0;
    z-index: -1;
        border-radius: 0;
        border: none;
        box-shadow: none;
}
.beginner_solution_text_area {
    font-size: 18px;
    padding: 0 20px;
}
.beginner_solution_text_area > span {
    font-weight: bold;
    font-size: 24px;
    background:linear-gradient(transparent 60%, #ffff00 0%);
}
.beginner_howto {
    padding: 0 20px;
}
.beginner_content {
    margin-top: 60px;
}
.beginner_content_title {
    font-size: var(--font_size_m);
    font-weight: 700;
    padding-top: 40px;
    background-image: repeating-linear-gradient(#2C2C2C 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-size: 10rem 0.4rem;
    background-position: center bottom;
    padding-bottom: 8px;
}
.beginner_content_flex_mg {
    margin-top: 24px;
}
.beginner_area {
    /* width: 1880px; */
    width: 100%;
}
.beginner_top_area ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 16px;
    box-sizing: border-box;
}
.beginner_top_area ul:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 120px;
    margin-top: -60px;
    background: var(--water_color);
    z-index: -2;
}
.beginner_fix_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
.beginner_fix_area > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 100%;
    padding: 10px;
    box-shadow: var(--box_shadow);
    box-sizing: border-box;
}
.beginner_fix_button {
    position: relative;
    display: inline-block;
    padding: 9px 10px;
    min-width: 120px;
    max-width: 100%;
    color: var(--primary_color);
    font-size: 16px;
    background: #FFF;
    border: solid 1px var(--primary_color);
    box-sizing: border-box;
    border-radius: 15px;
    text-align: center;
}
.beginner_fix_button > p {
    line-height: 1.2em;
}
.beginner_fix_button:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    margin-top: -5px;
    background: #ffffff;
    z-index: 2;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.beginner_fix_button:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -5px;
    background: var(--primary_color);
    z-index: 1;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}
.beginner_fix_button_red > a {
    width: auto;
    margin-left: 10px;
    margin: 0 0 0 10px;
    padding: 21px 32px;
}
.beginner_fix_button > p > span {
    font-size: 18px;
    font-weight: bold;
}
.beginner_content_description {
    padding: 0 10px;
}
@media screen and (max-width: 1024px) {
    #guide .guide_top .logo {
        max-width: 120px;
    }
    .beginner_description > p {
        margin: 0 auto;
        max-width: 340px;
        padding: 0 20px;
    }
    .beginner_content_flex_mg {
        flex-wrap: wrap;
    }
    .beginner_content_topic_area {
        width: 50%;
        margin-top: 24px;
    }
    .beginner_flex_merit.beginner_flex img {
        width: 220px;
    }
    .beginner_content {
        margin-top: 30px;
    }
}
@media screen and (max-width: 600px) {

    #guide .block {
        margin-top: 30px;
    }

    #guide .block2 li {
        width: 100%;
        display: block;
    }

    #guide .block2 li:first-child {
        margin: 0 0 5% 0;
    }

    #guide .block3 {
        border: 1px solid #d2dce7;
        margin: 0 18px 30px;
        width: 89%;
        display: block;
    }

    #guide .text {
        padding: 30px 20px 25px;
    }

}
@media screen and (max-width: 768px) {
    #guide h3 {
        margin: 20px auto 10px;
    }
    #guide > i {
        opacity: 0.5;
        background: url(/img/beginner/main_bg.png) no-repeat center 70% / 100% auto;
    }
    .beginner_about_area.beginner_title_area_float.beginner_before_login {
        padding-bottom: 30px;
    }
    .beginner_fix_area > div .btn {
        width: 80%;
    }
    .beginner_content_area .btn_primary {
        margin: 20px auto 0 auto;
        padding: 30px 0;
    }
    .beginner_content_img > img {
        margin: 8px auto;
    }
    .beginner_content_area .btn_secondary {
        margin: 8px auto 0 auto;
    }
    .beginner_solution_flex > div {
        padding: 5px;
    }
    .beginner_solution_flex > img {
        top: auto;
        bottom: -50px;
    }
    .beginner_content_flex_mg {
        margin-top: 0;
    }
    .beginner_title_area {
        text-align: center;
    }
    .beginner_flex_merit {
        flex-wrap: wrap;
    }
    .beginner_flex {
        flex-wrap: wrap;
    }
    .beginner_about_manegy_area {
        width: 95%;
    }
    .beginner_main_bg1 {
        top: 0;
        background-repeat: repeat-y;
    }
    .beginner_main_bg2 {
        top: 0;
    }
    .beginner_content_bg1 {
        background-repeat: repeat-y;
    }
    .beginner_content_bg2 {
        background-repeat: repeat-y;
    }
    .beginner_solution_flex {
        flex-wrap: wrap;
        margin-bottom: 50px;
    }
    .beginner_solution_flex > div {
        width: 100%;
    }
    .beginner_sp_solutionarrow {
        text-align: center;
    }
    .beginner_sp_solutionarrow > img {
        width: 10%;
    }
    .beginner_fix_area {
        bottom: 57px;
    }
    .beginner_fix_button {
        /*margin: 1.5em 0 0;*/
        display: none;
    }
    .beginner_fix_button_red > a {
        margin: 0 auto;
    }
    .beginner_fix_button:before,
    .beginner_fix_button:after {
        content: none;
    }

    .beginner_content_topic_area {
        width: 100%;
    }
    .beginner_main_top_icon {
        margin: 16px 0;
    }
    .beginner_top_area ul:before {
        height: 80px;
        margin-top: -40px;
    }
    #guide .detail_title p {
        font-size: 14px;
    }
    .beginner_about_manegy_area {
        margin: 30px auto;
    }
}
@media screen and (max-width: 480px) {
    .beginner_main_bg1 {
        top: 120px;
    }
    .beginner_main_bg2 {
        top: 120px;
    }
    #guide .detail_title p br {
        display: none;
    }
    #guide .detail_title p span {
        margin: 0;
        display: inline;
    }
}
/***********************************
** other / associate_service
***********************************/
#associate_service .component-articleList .col-1-3:nth-child(3n+1) {
    clear: both;
}

#associate_service .component-column.pd-large [class*=col-] {
    padding: 20px 17px;
    height: auto;
}

#associate_service .component-column .col-1-3 {
    width: 29%;
    width: calc(100% / 3 - 34px);
}

#associate_service .component-column [class*=col-] {
    float: left;
    padding: 0 10px 10px;
}

#associate_service .link-noBorder, .noBorder {
    text-decoration: none !important;
    display: block;
}

#associate_service .mod-thumbLink {
    position: relative;
}

#associate_service .img-border>img {
    border: 1px solid #d2dce7;
    background: #fff;
}

#associate_service .mod-thumbLink>img {
    width: 100%;
    /* border: 1px solid #d2dce7; */
}

#associate_service img {
    vertical-align: top;
}

#associate_service .mod-thumbLink figcaption {
    margin: 10px 5px 5px;
    position: relative;
    display: block;
}

#associate_service .mod-thumbLink:after {
    content: "";
    clear: both;
    display: block;
}

#associate_service *,#associate_service *:before,#associate_service *:after {
    box-sizing: inherit;
}

#associate_service .mod-articlTitle {
    font-size: var(--font_size_r);
    line-height: 1.5em;
    text-decoration: underline;
    font-weight: bold;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

#associate_service .main_area p {
    line-height: 1.5em;
}

#associate_service .detail_title4 {
    margin: 20px auto 15px;
}

@media screen and (max-width: 768px) {
    #associate_service .component-column .col-1-3 {
        width: 100%;
    }

    #associate_service .component-column.pd-large [class*=col-] {
        padding: 20px 0;
        height: auto;
        border-bottom: solid 1px #606060;
    }
}

/***********************************
** other / ad
***********************************/

#ad h1,
#ad h2 {
    margin-bottom: 20px;
    font-size: var(--font_size_l);
    font-weight: bold;
    border: none;
}
#ad h2 {
    margin-top:30px;
}

#ad .detail_title p {
    text-align: left;
    margin-bottom: 30px;
}
.ad img {
    max-width: 268px;
    width: 100%;
}

#ad .about img {
    width: 80%;
}

#ad .btn_primary::before, .btn_secondary::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -16px;
}

#ad .fs_small {
    font-size: var(--font_size_s);
}

.ad_menu li {
    display: inline-block;
}

#ad .ad_menu p {
    text-align: center;
    margin: 0;
    width: 100%;
}
.ad_main_description {
    background: var(--water_color);
    padding-bottom: 20px;
}
.ad_main_topic {
    color: var(--primary_color);
}
#ad .ad_main_content {
    position: relative;
    color: #ffffff;
    /* background: var(--primary_color); */
    width: 60%;
    margin: 0 auto;
}
#ad .ad_main_content img {
    /* width: 50%; */
}
#ad .ad_main_content p {
    padding: 15px;
    text-align: center;
}
.ad_white_bg {
    color: var(--primary_color);
    background: #ffffff;
}
.ad_water_bg {
    color: #ffffff;
    background: #5488c0;
}
.ad_top_mg {
    margin-top: 60px;
}
.ad_flex {
    display: flex;
}
#ad .ad_menu_about {
    width: 76%;
}
#ad .ad_menu_about p {
    text-align: left;
    line-height: 2.0;
}
.about.ad_flex {
    padding-top: 50px;
}
.ad_flex_end {
    align-items: flex-end;
}
.ad_topic_description_area {
    width: 20%;
}
.ad_topic_description {
    position: relative;
    background: var(--water_color);
    padding: 20px 30px 20px 30px;
}
.ad_topic_description_text {
    margin: 50px 0 0;
}
.ad_task_triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 100px 0 100px;
    border-color: #5488bf transparent transparent transparent;
    margin: 20px auto;
}
#ad img.ad_task_image {
    width: 27%;
    margin-left: 10px;
}
.ad_triangle_topic_description_pc {
    position:absolute;
    top: 80%;
    left:-30px;
    /* background: red; */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 30px 15px 0;
    border-color: transparent var(--water_color) transparent transparent;
}
.ad_main_image {
    /* width: 80%; */
    margin-right: 20px;
}
.about.ad_flex.ad_flex_end {
    justify-content: center;
}
#ad .about img.ad_top_main_img {
    width: 100%;
}
#ad p.text_right {
    text-align: right;
    font-size: var(--font_size_s);
    margin-top: 20px;
}
.ad_recommend_description {
    background:  var(--water_color);
    border-radius: 20px;
    padding: 20px;
}
#ad .ad_recommend_description > li > p {
    text-align: left;
}
#ad .detail_title p.text_center {
    text-align: center;
}
.ad_profile_title {
    background: var(--water_color);
    color: var(--primary_color);
    padding: 0 65px;
}
.ad_profile_title.ad_profile_admenu {
    padding: 5px 0;
}
.ad_profile_box {
    border: 3px solid var(--water_color);
}
.ad_task_box {
    position: relative;
    background: var(--water_color);
    border: 3px solid #5488bf;
}
.ad_task_box > p.ad_profile_title {
    position: absolute;
    top: -20px;
    left: -3px;
    color: #ffffff;
    background: #5488bf;
    width: 50px;
    /* width: 80px; */
    border: 3px solid #5488bf;
}
.ad_profile_img {
    width: 40%;
    padding: 25px 0;
    margin: 0 auto;
}
.ad_admenu_img {
    width: 30%;
    margin: 0 auto;
}
.ad_profile_img_big {
    width: 25%;
}
.ad_flex_content {
    gap: 25px;
}
.ad_profile_box p {
    padding: 0 20px;
}
.ad_profile_description {
    color: var(--primary_color);
    padding: 0 65px;
    text-align: center;
}
.about.ad_flex.ad_flex_content >div {
    width: 33%;
}
.ad_admenu_contact {
    color: #5689c0;
}
.ad_profile_description.ad_task {
    padding: 30px 15px;
    text-align: left;
}
.ad_grow2 {
    flex-grow: 2;
}
.ad_triangle {
    position:absolute;
    bottom: -15px;
    left:49%;
    /* background: red; */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 7.5px 0 7.5px;
    border-color: var(--primary_color) transparent transparent transparent;
}
.ad_relative {
    position: relative;
}
.ad_triangle_menu {
    left:47%;
    border-color: var(--water_color) transparent transparent transparent;
}
.ad_absolute_attention {
    position: absolute;
    top: -5px;
    right: 5px;
}
.btn_ad_max {
    max-width: 450px;
}
.ad_description_font {
    font-size: 0.9em;
}
.about.ad_flex.ad_flex_content.ad_height {
    padding-top: 0;
}
.about.ad_flex.ad_flex_content.ad_flex_menulist {
    padding: 0;
}
#ad .advertise_banner {
    margin: 0 auto;
    display: block;
    width: 100%;
    margin-top: 6rem;
}
@media screen and (min-width: 601px) and (max-width: 1025px) {
    #ad .tb {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    #ad .detail_title p {
        width: 100%;
    }

    .ad img {
        width: 80%;
    }

    #ad .about img {
        width: 70%;
    }

    .ad_menu li {
        width : 30% ;
    }
    .about.ad_flex {
        flex-wrap: wrap;
    }
    #ad .ad_menu_about {
        width: 100%;
    }
    .ad_menu li {
        width: 100%;
    }
    .ad_menu_about_image {
        margin: 30px auto 0;
    }
    #ad .about .ad_menu_about_image img {
        width: 100%;
    }
    .about.ad_flex.ad_flex_content >div {
        width: 100%;
        margin-top: 45px;
    }
    .ad_profile_box p {
        padding: 0;
    }
    #ad p.text_center.ad_profile_title.ad_task_title {
        width: 70px;
    }
    .ad_topic_description_area {
        width: 100%;
    }
    .ad_topic_description {
        background: var(--water_color);
        padding: 30px 10px;
        margin-left: 0;
    }
    #ad .ad_topic_description > p {
        margin-bottom: 0;
    }
    /* .about.ad_flex.ad_flex_reverse {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding-top: 0;
    } */
    .ad_main_image {
        width: 100%;
    }
    .about.ad_flex.ad_flex_content.ad_flex_menulist > div {
        width: 30%;
    }
    /* .ad_flex-grow2 {
        flex-grow: 2;
    } */
    .about.ad_flex.ad_flex_content.ad_flex_menulist.sp {
        display: flex!important;
    }
    .about.ad_flex.ad_flex_content.ad_flex_menulist > div {
        width: 32%;
    }
    #ad .ad_main_content {
        width: 90%;
    }
    #ad .detail_title p {
        width: auto;
    }
    .ad_sp_title_area {
        padding: 15px 0 18px;
    }
     .ad_sp_title_description {
         width: 90%;
         margin: 5px auto;

     }
     .ad_sp_title_subtitle {
         width: 90%;
     }
     .about.ad_flex {
         padding: 0;
     }
     #ad .detail_title p.text_center {
         text-align: left;
     }
     .ad_profile_img {
         padding: 30px 0;
     }
     #ad .detail_title p.text_center {
         text-align: center;
     }
     #ad .detail_title p {
         padding: 0 15px;
     }
     .ad_profile_description {
         text-align: center;
         /* padding: 30px 20px; */
     }
     .ad_profile_description.ad_task {
         text-align: left;
     }
     .ad_menu.ad_main_image.sp {
         margin-top: 40px;
     }
     #ad .detail_title p.text_center {
         /* text-align: left; */
         padding: 0;
     }
     .about.ad_flex.ad_flex_content.ad_flex_menulist > div {
         width: 32%;
     }
     .ad_admenu_img.grow2 {
        width: 15%;
    }
    .about.ad_flex.ad_flex_content.ad_flex_menulist {
        justify-content: space-between;
    }
    .ad_flex_content {
        gap: 0;
    }
    .ad_grow2 {
        margin-right: 25px;
    }
    .ad_triangle_topic_description_sp {
        position:absolute;
        bottom: -15px;
        left:49%;
        /* background: red; */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 7.5px 0 7.5px;
        border-color: var(--water_color) transparent transparent transparent;
    }
    #ad .detail_title p.text_center.ad_menu_description {
        text-align: left;
    }
    #ad h2 {
        font-size: 1.2em;
    }
    #ad .detail_title p.text_center.ad_topic_description_text_left {
        margin: 25px 0 0;
        text-align: left;
    }
    .ad_profile_description {
        padding: 0 30px;
    }
    .ad_profile_img {
        padding: 15px 0;
    }
    #ad p.text_center.ad_menu_description.ad_topic_description_text {
        margin: 0;
    }
    #ad .advertise_banner {
        margin-top: 4rem;
    }
}

/***********************************
** other / rule
***********************************/
.rule section.block {
    margin-bottom: 60px;
}

.rule {
    margin: 0 20px;
    word-break: break-all;
}
.rule .block .inner {
    padding:0;
}
.rule .block ol li {
    margin-bottom: 20px;
}

.rule h2 {
    display: block;
    padding: 8px;
    background: var(--basic_color);
    color: #fff;
    font-size: var(--font_size_r);
    text-align: center;
    margin: 0 auto 15px;
}

.disclaimer h2 {
    display: block;
    padding: 8px;
    background: var(--basic_color);
    color: #fff;
    font-size: var(--font_size_r);
    text-align: center;
    margin: 0 auto 15px;
}

.rule h3 {
    position: relative;
    color: var(--primary_color);
    margin: 20px 0 15px 15px;
    border: none;
}

.rule h4 {
    font-size: var(--font_size_r);
    font-weight: 700;
    position: relative;
    margin: 16px 0 8px 0;
    border: none;
}

.rule h5 {
    font-size: var(--font_size_r);
    font-weight: 700;
    position: relative;
    margin: 16px 0 8px 0;
    border: none;
}

.rule h6 {
    font-size: var(--font_size_r);
    font-weight: 700;
    position: relative;
    margin: 16px 0 8px 0;
    border: none;
}

.rule .indent {
    margin-left: 16px;
}
.rule h3::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 100%;
    background-color: var(--primary_color);
    position: absolute;
    top: 0;
    left: -15px;
}

.rule .dicimal li {
    list-style-type: decimal;
}

.rule .rule-ul>li {
    margin-bottom: 15px;
    margin-left: 20px;
}

.rule .dicimal-brackets li {
    list-style-type: none;
    list-style-position: inside;
    counter-increment: cnt;
}

.rule .dicimal-brackets li:before {
    display: marker;
    content: "(" counter(cnt) ") ";
}

.rule a {
    color: var(--primary_color);
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    .rule {
        margin: 0;
    }
}

/***********************************
** other / faq
***********************************/
.fqq_section {
    padding-bottom: 80px;
}

.faq_section .detail p a {
    color: var(--primary_color);
    text-decoration: underline;
}

.faq_section p.quiz_title.answer::before {
    content: "A";
    display: inline-block;
    font-size: 25px;
    font-family: Roboto;
    position: absolute;
    top: -13px;
    left: -30px;
    color: var(--accent_color);
    margin-top: 20px;
}

.faq_section p.quiz_title.answer {
    background: none;
    color: var(--basic_color);
    text-align: left;
}

.faq_section {
    /* padding: 10px 10px 50px; */
}

/* .faq_section .text_right {
    float: right;
} */
.faq_section .keyword_form {
    margin: 40px 0 50px;
    text-align: center;
}

.faq_section .text_area {
    max-width: 660px;
    margin: 20px auto;
}

.faq_section .text_area p {
    line-height: 2.0;
}

.faq_section .quiz_detail .quiz_title {
    margin-bottom: 30px;
}
.faq_section .quiz_detail .quiz_title {
    margin-bottom: 0;
    padding: 5px 0px 20px;
}
.faq_section .btn_primary.left::before,.faq_section .btn_secondary.left::before {
    left: 20px;
    transform: rotateY(180deg);
}

.faq_section .detail_title4 {
    padding: 3px 0;
}

.faq_section .top_learn_left_article_campany::before {
    left: 0;
    content: none;
}

.faq_section section.quiz_detail {
    /* margin-bottom: 30px; */
    overflow: hidden;
}

.faq_section textarea {
    font-size: 1.2rem;
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
    height: 7em;
}

@media screen and (max-width: 768px) {
    .faq_section .keyword_form {
        width: 100%;
    }
}







#faq .keyword_form {
    margin: 20px auto 40px auto;
    max-width: 400px;
    padding: 0 20px;
    box-sizing: border-box;
}
#faq .keyword_form form {
    display: flex;
    align-items: center;
}
#faq .keyword_form .search_container input[type="text"] {
    margin: 0 4px 0 0;
    flex: 1;
}
#faq .frequent {
    margin: 40px 0;
}

#faq .frequent ul:not(.paginationjs-pages ul) {
    border-bottom: solid 1px #efefef;
}
#faq .frequent ul li:not(.paginationjs-pages li) {
    border-top: solid 1px #efefef;
}
#faq .frequent ul li a:not(.paginationjs-page a) {
    display: block;
    padding: 8px 0 8px 24px;
    position: relative;
}
#faq .frequent ul li a:before:not(.paginationjs-page ul li a) {
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    content: "Q";
    display: inline-block;
    background: #000;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    position: absolute;
    top: 9px;
    left: 0;

}

#faq .frequent .right {
    text-align: right;
    margin-top: 16px;
}
#faq .frequent .right:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    margin-left: 8px;
    background: var(--dark_color);
}
#faq .frequent .right a {
    font-size: var(--font_size_s);
    text-decoration: underline;
}

#faq .from_category .flex_box {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
#faq .from_category .flex_box article {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}
#faq .from_category .flex_box article .inner {
    background: var(--water_color);
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
}
#faq .from_category .flex_box article h5 {
    font-size: var(--font_size_m);
    font-weight: 700;
    margin: 0 0 8px 0;
}
#faq .from_category .flex_box article ul {
    border-bottom: solid 1px #ffffff;
}
#faq .from_category .flex_box article ul li {
    border-top: solid 1px #ffffff;
}
#faq .from_category .flex_box article ul li a {
    display: block;
    padding: 8px 0 8px 24px;
    position: relative;
}
#faq .from_category .flex_box article ul li a:before {
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    content: "Q";
    display: inline-block;
    background: #000;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 9px;
    left: 0;
}
#faq .from_category .flex_box article p {
    text-align: right;
    margin-top: 8px;
}
#faq .from_category .flex_box article p:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 10px;
    background: #000;
    margin-left: 8px;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
}
#faq .from_category .flex_box article p a {
    text-decoration: underline;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #faq .from_category .flex_box article {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    #faq .frequent {
        margin: 20px 0;
    }
    #faq .from_category {
        margin: 20px 0;
    }
}
@media screen and (max-width: 600px) {
    #faq .from_category .flex_box article {
        width: 100%;
    }
}

#faq .detail {
    margin: 40px 0;
}
#faq .detail h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3em;
    border: none;
    margin: 0 0 16px 0;
}
#faq .detail p {
    line-height: 1.75em;
    position: relative;
    padding-left: 40px;
    word-break: break-all;
}
#faq .detail p:first-of-type:before {
    content: "A.";
    color: var(--accent_color);
    font-size: 40px;
    font-weight: 700;
    position: absolute;
    top: 8px;
    left: 0;
}
@media screen and (max-width: 768px) {
    #faq .detail {
        margin: 20px 0;
    }
    #faq .detail:after {
        content: "";
        display: block;
        clear: both;
    }
    #faq .detail h2 {
        font-size: 20px;
    }
    #faq .detail p {
        padding: 0;
        line-height: 1.5em;
    }
    #faq .detail p:first-of-type:before {
        position: relative;
        float: left;
        margin-top: 8px;
        margin: 0 8px 8px 0;
    }

}
/***********************************
** other / inquiry
***********************************/
#inquiry_area .box.bg {
    padding: 24px;
    margin-bottom: 40px;
}
#inquiry_area .box_content {
    max-width: 660px;
    margin: 0 auto;
}
#inquiry_area .box.bg ul {
    margin: 0;
}
#inquiry_area .box.bg dl {
    margin: 24px 0;
}
#inquiry_area .box.bg dt {
    margin: 0 0 4px;
}
#inquiry_area .box.bg .btn_primary {
    margin: 4px auto;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}
#inquiry_area .box.bg p.text_center {
    margin: 16px 0;
}
#inquiry_area .search_checkbox.vertical {
    display: block;
}

#inquiry_area .text_area {
    max-width: 660px;
    margin: 20px auto;
}

#inquiry_area .text_area p {
    line-height: 2.0;
}

#inquiry_area textarea {
    font-size: 1.2rem;
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
    height: 7em;
}

#inquiry_area .inquiry_flex {
    display: flex;
    padding: 20px;
}

#inquiry_area .inquiry_flex dt {
    width: 30%;
    margin-top: 0;
}

#inquiry_area .inquiry_flex dd {
    width: 70%;
}

#inquiry_area .btn_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#inquiry_area .inline {
    width: 50%;
    max-width: 270px;
}

#inquiry_area .btn_primary.left::before,#inquiry_area .btn_secondary.left::before {
    left: 20px;
    transform: rotateY(180deg);
}
/*
#inquiry_area .btn_primary::before, #inquiry_area .btn_secondary::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
}
*/
@media screen and (max-width: 768px) {
    #inquiry_area .box.bg dl {
        margin: 0;
    }
    #inquiry_area .box.bg dt {
        margin: 16px 0 8px 0!important;
        padding: 0;
    }
    #inquiry_area .box.bg dt div {
        margin: 0!important;
    }
    #inquiry_area .box.bg dt div h4 {
        font-size: 14px;
        margin: 24px 0 8px 0;
        padding: 8px;
    }
    #inquiry_area .points {
        display: grid!important;
        grid-template-columns: repeat(11,1fr);
        grid-gap: 4px;
    }
    #inquiry_area .points input {
        display: none!important;
    }
    #inquiry_area .points label {
        margin: 0;
        text-align: center;
    }
    #inquiry_area .points + div {
        font-size: 10px;
        margin-top: 4px;
    }
    #inquiry_area .points + div p:first-child:before {
        content: "← ";
    }
    #inquiry_area .points + div p:last-child:after {
        content: " →";
    }
    #inquiry_area .box.bg dt i {
        position: static;
        margin: 0;
        vertical-align: text-bottom;
    }
    #inquiry_area .box.bg {
        margin-bottom: 20px;
        padding: 8px;
    }

    #inquiry_area .sp_pd {
        padding: 0 10px;
    }

    #inquiry_area .inline {
        width: 100%;
        margin: 0 auto;
    }

    #inquiry_area .inquiry_flex {
        flex-wrap: wrap;
    }

    #inquiry_area .inquiry_flex dt {
        width: 100%;
        padding-bottom: 10px;
    }

    #inquiry_area .inquiry_flex dd {
        width: 100%;
    }
}
.inform_ad h2 {
    font-size: var(--font_size_m);
    font-weight: 700;
    text-align: center;
    display: block;
    border: none;
    margin: 40px 0 16px 0;
}
.inform_ad .bootstrap {
    margin-top: 40px;
}

.inform_ad p {
    line-height: 1.8em;
}
.inform_ad p a {
    color: var(--primary_color);
    text-decoration: underline;
}
.inform_ad p b {
    font-weight: 700;
}
@media screen and (max-width: 480px) {
    .inform_ad p.text_center {
        text-align: left;
    }
    .inform_ad h2 {
        margin-top: 24px;
    }
    .inform_ad p {
        line-height: 1.5em;
    }
    .inform_ad .bootstrap {
        margin-top: 24px;
    }
}
/***********************************
** other / questionnaire
***********************************/
#questionnaire {
    padding-bottom: 80px;
}

#questionnaire .box.bg {
    padding: 10px 10px 50px;
}

#questionnaire .search_checkbox.vertical {
    display: block;
}

#questionnaire .text_area {
    max-width: 660px;
    margin: 20px auto;
}

#questionnaire .search_checkbox {
    margin-bottom: 30px;
}

#questionnaire .text_area p {
    line-height: 2.0;
}

#questionnaire .search_checkbox > p {
    width: auto;
    padding-right: 20px;
}

#questionnaire .search_area {
    padding: 0;
}

#questionnaire textarea {
    font-size: 1.2rem;
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
    height: 4em;
}
.questionnaire_thumb {
    width: 30%;
}
input[type="radio"]:checked + label.questionnaire_degree_label.questionnaire_input:after {
    content: none;
}
.questionnaire_degree_input:checked + label.questionnaire_degree_label {
    background: var(--primary_color);
    color: #ffffff;
}
.bootstrap input[type=radio] + label.questionnaire_degree_label.questionnaire_input {
    margin-right: 9px;
}
.questionnaire_submit_btn {
    position: relative;
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
}
.questionnaire_submit_btn:before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 999;
}

label.questionnaire_degree_label {
    border: 1px solid #000;
    /* padding: 10px 20px; */
    padding: 8px 13.5px;
}
@media screen and (max-width: 768px) {
    #questionnaire .box {
        padding: 0 10px;
    }
    .bootstrap input[type=radio] + label.questionnaire_degree_label.questionnaire_input {
        padding: 1.8% 1.8%;
    }
}
@media screen and (max-width: 400px) {
    .bootstrap input[type=radio] + label.questionnaire_degree_label.questionnaire_input {
        padding: 4px 4px;
    }
}


/***********************************
** other / review
***********************************/

#review.list .sns_bookmark ul {
    justify-content: center;
}

#review.list .sns_bookmark ul li:last-child {
    display: none;
}

#review .inset-img-full img {
    width: 100%;
    height: auto;
}

#review .sp-hide {
    display: block;
}

#review .pc-hide {
    display: none;
}



#review input[type="text"], #review input[type="email"], #review input[type="password"] {
    font-size: 1.2rem;
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
}

#review .detail_title4 {
    display: block;
    width: 100%;
    padding: 3px;
    background: var(--basic_color);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 15px auto;
}

#review .search_container input[type="text"] ,
#whitepaper .search_container input[type="text"] ,
#template .search_container input[type="text"] {
    border: 1px solid var(--light_color2);
    padding: 3px 10px;
    border-radius: 3px;
    height: 45px;
    overflow: hidden;
    font-size: 16px;
    margin: 0 4px 0 0;
    flex: 1;
}

#review .keyword_form ,
#whitepaper .keyword_form ,
#template .keyword_form {
    margin: 24px auto;
    background: var(--water_color);
    padding: 24px;
    box-sizing: border-box;
}

#review .keyword_form form ,
#whitepaper .keyword_form form ,
#template .keyword_form form {
    max-width: 600px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#review .keyword_button ,
#whitepaper .keyword_button ,
#template .keyword_button {
    position: relative;
    background: var(--primary_color);
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

#review .keyword_button::before ,
#whitepaper .keyword_button::before ,
#template .keyword_button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
    background: url(../img/common/keyword_search.png) no-repeat center center / 100% auto;
    right: 0;
    bottom: 0;
    margin: auto auto;
}

#review .keyword ,
#whitepaper .keyword ,
#template .keyword {
        max-width: 600px;
    margin: 8px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 601px) and (max-width: 1025px) {
    #review .keyword .tag {
        padding: 1px 10px;
        margin: 5px;
        font-size: 14px;
    }

    #review .keyword2 .tag {
        padding: 1px 10px;
        margin: 5px;
        font-size: 14px;
    }
}

#review .top_contents_menu {
    display: flex;
    margin-bottom: 15px;
}

#review .top_contents_menu li {
    width: 50%;
    text-align: center;
    margin-right: 5px;
    position: relative;
}

#review .top_contents_menu li a {
    background: var(--light_color);
    color: var(--basic_color_light);
    font-size: clamp(0.6rem, 1vw, 1vw);
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    height: 55px;
    display: grid;
    place-items: center;
}

#review .top_contents_menu li a::before {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--light_color);
    position: absolute;
    bottom: -7px;
}

#review .top_contents_menu li .active {
    background: var(--primary_color);
    color: #fff;
}

#review .top_service_matter h4, #review .top_service_matter_menu li a, #review .service_matter_menu li a {
    color: #ffffff;
    display: inline-block;
    width: 100%;
}

#review .top_service_matter_menu1 li::before, #review .top_service_matter_menu2 li::before, #review .top_service_matter_menu3 li::before {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -2px;
    top: -5px;
}

#review .summary table {
    width: 100%;
    border-spacing: 0;
    /*background: var(--light_color);*/
    margin: 0 0 20px;
    border-top: none;
}

#review .summary table th {
    border-bottom: solid 2px #ddd;
    padding: 15px 0;
    width: 30%;
    font-weight: bold;
    vertical-align: middle;
}

#review .summary table td {
    border-bottom: solid 2px #ddd;
    text-align: left;
    padding: 10px 20px;
    background: #fdfdfd;
    vertical-align: middle;
}

#review .btn_select {
    max-width: 350px;
    width: 100%;
    background: var(--primary_color);
    color: #fff;
    height: 45px;
    text-align: center;
    margin: 30px auto;
    display: grid;
    place-items: center;
    position: relative;
}

#review .btn_select::before {
    content: "";
    width: 21px;
    height: 22px;
    position: absolute;
    right: 20px;
    background-image: url(../img/template/select_icon.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 15px 12px;
}

#review .btn_sub {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 20px auto;
    display: grid;
    place-items: center;
    position: relative;
    max-width: 350px;
    width: 100%;
    background: var(--primary_color);
    font-size: 1.1rem;
}

#review .btn_sub::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
}

/* ▼ WTC_DEV-9377 ▼ ------------------------------------------ */
#review .news_contents {
    .other_info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .year_selector {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 3px;
            position: relative;
            align-items: center;

            &::after {
                display: block;
                width: 6px;
                height: 6px;
                border-right: 1px solid var(--basic_color);
                border-top: 1px solid var(--basic_color);
                position: absolute;
                top: calc(50% - 5px);
                right: 7px;
                transform: rotate(135deg);
                content: "";
                z-index: -1;
            }
            .head {
                width: max-content;
                border-right: 1px solid #ddd;
                line-height: 1.0;
                font-size: 1.3rem;
                position: absolute;
                align-items: center;
                display: inline;
                padding: 2px 10px;
            }
            select {
                width: 144px;
                border: none;
                padding: 6px 12px 6px 72px;
                background: none;
                color: var(--basic_color);

                &::before {
                    display: none;
                }
            }
        }
    }
    .review_list_wrapper {
        margin-top: 1.5rem;
        border: 1px solid #ddd;

        .tab_condition {
            display: flex;
            margin: 0;
            border: none;

            li {
                width: calc(100% / 3);
                margin: 0;
                border: none;
                padding: 1.6rem 0;
                text-align: center;
                background: #f6f6f6;
                color: #707070;

                &:hover {
                    background: #fff;
                    opacity: 1;
                }
                &:nth-of-type(n+2) {
                    border-left: 1px solid #ddd;
                }
                &:not(.current) {
                    border-bottom: 1px solid #ddd;
                    cursor: pointer;
                }
                &.current {
                    border-bottom: 1px solid #fff;
                    background: #fff;
                    font-weight: bold;
                    color: var(--basic_color);
                }
            }
        }
        .tab_category_wrapper {
            ul {
                display: flex;
                gap: 0 5px;
                margin-top: 3rem;
                border: none;
                padding: 0 30px;

                li {
                    flex-grow: 1;
                    border: none;
                    padding: 1.5rem 0;
                    text-align: center;
                    background: #f1f1f1;
                    font-size: 1.4rem;
                    color: #707070;

                    &:hover,
                    &.current {
                        position: relative;
                        background: var(--primary_color);
                        font-weight: bold;
                        color: #fff;
                        opacity: 1;
                    }
                    &:not(.current) {
                        cursor: pointer;
                    }
                    &.current::after {
                        height: calc(18px / 2);
                        width: 18px;
                        clip-path: polygon(0 0, 100% 0, 50% 100%);
                        position: absolute;
                        left: 0;
                        bottom: -6px;
                        right: 0;
                        margin-inline: auto;
                        background: var(--primary_color);
                        content: "";
                    }
                }
            }
        }
        #review_list {
            margin: 1rem 0 0;
            border: none;
            padding: 0 30px;

            li {
                border: none;
                padding: 2.6rem 0;

                &:nth-of-type(n+2){
                    border-top: 1px solid #ddd;
                }
                a {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;

                    .date {
                        display: block;
                        width: 100px;
                        margin: 1px 0 0;
                        font-size: 1.3rem;
                    }
                    .category {
                        display: block;
                        width: 90px;
                        margin-inline: 18px;
                        border: 1px solid var(--primary_color);
                        border-radius: 3px;
                        padding: 0.1rem 0;
                        box-sizing: border-box;
                        text-align: center;
                        font-size: 1.2rem;
                        color: var(--primary_color);
                    }
                    .title {
                        display: block;
                        font-weight: bold;
                        color: var(--primary_color);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
#review .keyword_form {
    padding: 0;
    background: none;
}
#review .news_contents {
    .other_info {
        .year_selector {
            padding: 8px 12px;
        }
    }
    .review_list_wrapper {
        width: 100vw;
        margin: 2.2rem 0 0 -20px;
        border: none;
        border-top: 1px solid #ddd;

        .tab_condition {
            li {
                width: auto;
                flex-grow: 1;
                padding: 1.4rem 0;
                font-size: 1.5rem;
            }
        }
        .tab_category_wrapper {
            overflow-y: hidden;

            ul {
                display: none;
                /*width: max-content;*/
                margin: 2.5rem 0 0;
                border: none;
                padding: 0 0 1.5rem;
                overflow-y: scroll;

                li {
                    padding: 1.2rem 1.6rem;

                    &:first-of-type {
                        margin-left: 20px;
                    }
                    &:last-of-type {
                        margin-right: 20px;
                    }
                }
            }
        }
        #review_list {
            margin: 0;
            padding: 0 20px;

            li {
                border-bottom: 1px solid #ddd;
                padding: 2rem 0;

                &:nth-of-type(n+2){
                    border-top: none;
                }
                a {
                    flex-wrap: wrap;

                    .date {
                        display: block;
                        width: calc(100% - 90px);
                        margin: 1px 0 0;
                        font-size: 1.3rem;
                    }
                    .category {
                        margin-inline: 0;
                    }
                    .title {
                        margin-top: 1rem;
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }
}
}
/* ▲ WTC_DEV-9377 ▲ ------------------------------------------ */

#review .news_contents ul {
    margin: 16px 0;
    border-top: solid 1px #efefef;
}
#review .news_contents li {
    position: relative;
    padding: 16px 0;
    margin: 0;
    border-bottom: solid 1px #efefef;
}
#review .news_contents li a {
    margin: 0;
    padding: 0;
    border: none;
}
#review .news_contents li .topics_title {
    display: flex;
    align-items: center;
}

#review .btn_small {
    margin: 2% auto;
    background: var(--primary_color);
    font-size: 1.1em;
    width: 20%;
    color: #fff;
    text-align: center;
    padding: 1% 2%;
    position: absolute;
    right: 0px;
    top: 5%;
}

#review .component-column {
    padding: 20px;
}

#review .component-column .col-1-4 {
    width: 25%;
}

#review .component-column [class*=col-] {
    float: left;
    padding: 0 10px 10px;
}

#review .template .templete-category [class*=col-] .link-arrow {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 25.9px;
    line-height: 2.59rem;
}

#review .link-arrow {
    position: relative;
}

#review .link-arrow::before {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -18px;
    top: -7px;
}

#review .news_contents {
    margin-bottom: 0;
    padding: 0;
}

#review .summary {
    margin: 30px 0 0;
}

#review .summary p {
    line-height: 2em;
    margin: 1%;
}

#review .summary p span {
    font-size: 1.2em;
}

#review .news_contents p {
    /* line-height: 1.5em; */
    margin-bottom: 0;
    flex: 1;
}


#review .news_contents p + span {
    font-size: 14px;
    float: right;
    margin-left: 8px;
}

#review .news_contents .rank {
    width: 50px;
    height: 50px;
    object-fit: contain;
    object-position: 50% 50%;
    background: none;
    margin: 0 10px 5px 0;
    vertical-align: middle;
}

#review .component-ratePost {
    padding: 8px 20px;
}

#review .component-ratePost .mod-totalRateStar {
    font-size: 18px;
    display: block;
    position: relative;
    width: 96.075px;
    height: 18px;
    line-height: 18px;
    float: left;
    transform: translateY(12px);
}

#review .component-ratePost .mod-totalRateStar .totalRateStar__base, .component-ratePost .mod-totalRateStar .totalRateStar__result {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

#review .component-ratePost .mod-totalRateStar .totalRateStar__result {
    overflow: hidden;
}

#review .template li {
    display: inline-block;
    width: 74%;
    vertical-align: middle;
}

#review .template .thumb {
    width: 20%;
    margin: 0 5% 0 0;
}

#review .movie_login {
    background: #fff;
    text-align: center;
    padding: 30px;
    margin: 0 0 0;
}

#review .category {
    padding: 2%;
}

#review .align-right {
    text-align: right;
}

#review .w540 {
    width: 540px;
    max-width: 100%;
    margin: 0 auto;
}

#review .btn_primary2 {
    max-width: 100%;
    background: var(--accent_color);
}

#review .btn_primary2 {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 30px auto 20px;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
}

#review .btn_primary2::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
}

#review .blue {
    color: var(--primary_color);
    font-weight: bold;
    font-size: var(--font_size_r);
}

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

#review .keyword2 {
    text-align: left;
}

#review .keyword2 .tag {
    width: auto;
    font-size: 15px;
    padding: 1px 15px;
    margin: 0 5px 10px;
}

#review .keyword2 .title {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-right: 2%;
}

#review .topics_title p::after {
    /* content: ""; */
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/point/icon-external.svg) no-repeat;
    background-size: 15px;
    margin-left: 10px;
}

#review .views {
    text-align: center;
    background: var(--light_color);
    padding: 1% 2%;
    width: 16%;
}

#review .review_tag {
    background: var(--primary_color);
    font-size: var(--font_size_s);
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding: 8px 8px;
    /* border-radius: 3px; */
    width: 100px;
    margin-right: 8px;
}

#review .topics_title .review_noicon::after {
    background: none;
}



@media screen and (max-width: 768px) {
    #review .pc-hide {
        display: block;
    }

    #review .sp-hide {
        display: none;
    }

    #review .btn_primary {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: normal;
        font-size: 14px;
        margin: 30px auto 40px;
        max-width: 100%;
    }

    #review .btn_select {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: normal;
        font-size: 14px;
        margin: 30px auto 40px;
        max-width: 100%;
    }

    #review .search_container input[type="text"] {
        border: 1px solid var(--light_color2);
        padding: 3px 10px;
        border-radius: 3px;
        height: 45px;
        overflow: hidden;
        font-size: 16px;

    }

    #review .news_contents {
        width: 100%;
        margin: 0;
    }

    #review .detail_title4 {
        font-size: 18px;
    }

    #review .template li {
        display: block;
        width: 100%;
    }

    #review .template .thumb {
        width: 100%;
        margin: 0 0 0 0;
    }

    #review .btn_sub {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: normal;
        font-size: 14px;
        margin: 20px auto 40px;
        max-width: 100%;
    }

    #review .btn_small {
        width: 40%;
        position: absolute;
        right: 0px;
        top: 20%;
        padding: 2% 2%;
    }

    #review .keyword2 .title {
        display: block;
    }

    #review .views {
        width: 30%;
    }

    #review .review_tag {
        padding: 2% 6%;
    }
}
@media screen and (max-width: 480px) {
    #review .review_tag {
        display: block;
        margin: 0 0 8px 0;
    }
    #review .news_contents li .topics_title {
        display: block;
    }
}

#review.detail .detail_title h1.middle {
    line-height: 1.2em;
}
#review.detail .news_info {
    margin: 8px 0;
}

#review.detail .news_info .date i {
    font-size: var(--font_size_xs);
    display: inline-block;
    vertical-align: top;
    width: 50px;
    padding: 1px 5px;
    margin-right: 5px;
    text-align: center;
    background: var(--light_color2);
}
#review.detail .news_info .date span {
    font-size: var(--font_size_xs);
    vertical-align: top;
}
#review.detail .news_tag {
    margin: 8px 0;
}
#review.detail .sns_bookmark {
    margin: 8px 0;
}
#review.detail .main_content .mail_setting {
    text-align: center;
    background: var(--water_color);
    padding: 24px;
    margin: 40px 0;
}
#review.detail .main_content .mail_setting a {
    margin: 24px auto 0 auto;
}
#review.detail .main_content p a:before {
    display: none;
}
#review.detail .main_content p a:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -8px;
    background: url(../img/review/target_blank_white.svg) no-repeat center center / 100% auto;
}
/***********************************
** other / qa
***********************************/
#qa form label {
    margin: 8px 16px 8px 0;
    cursor: pointer;
}

#qa form label:before,
#qa form label:after {
    content: none;
}

#qa form label i {
    vertical-align: text-bottom;
    background: #cccccc;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    position: relative;
    border-radius: 3px;
}

#qa form label i:before {
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    content: '';
    display: block;
    width: 30%;
    height: 60%;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 6px;
    margin: auto auto;
}

#qa form input[type=radio] + label i {
    border-radius: 100%;
    display: inline-block;
}

#qa form input[type=radio] + label i:before {
    display: none;
}

#qa form input[type=radio]:checked + label i {
    background: #cccccc;
}

#qa form input[type=radio]:checked + label i:before {
    display: block;
    width: 70%;
    height: 70%;
    background: var(--accent_color);
    border: none;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}

#qa form .file_upload article {
    display: none;
}
#qa form .file_upload article:first-child {
    display: block;
}
#qa form .file_upload article .view_box img {
    display: block;
    width: 100%;
}
#qa form .file_upload article .img_del {
    color: #ffffff;
    line-height: 20px;
    text-align: center;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #000;
    position: absolute;
    top: -4px;
    right: -4px;
}
#qa form label[for*=file_upload] {
    margin: 0;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
#qa form label[for*=file_upload] > input {
    display:none;
}
#qa form label[for*=file_upload] b {
    color: #ffffff;
    font-size: var(--font_size_s);
    line-height: 1.1em;
    text-align: center;
    background-color: var(--primary_color);
    padding: 8px;
    border-radius: 3px;
    margin-right: 4px;
    width: 120px;
}
#qa form label[for*=file_upload] span {
    font-size: var(--font_size_s);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1;
}

#qa form input:checked + label i {
    background: #FE0000;
}

#qa .violation {
    position: relative;
    text-decoration: underline;
}
#qa .violation:before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 11px;
    margin-right: 4px;
    background: var(--basic_color);
    clip-path: polygon(0% 0%, 40% 0, 100% 50%, 40% 100%, 0% 100%);
}
#qa .ribbon {
    display: inline-block;
    position: relative;
    height: 45px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transform: scale(0.8);
}

#qa .ribbon:before {
    content: '';
    position: absolute;
    bottom: -19px;
    left: -27px;
    z-index: 0;
    border: 20px solid #56adf3;
    border-left-color: transparent;
}

#qa .ribbon:after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -25px;
    z-index: 1;
    border: 20px solid #56adf3;
    border-right-color: transparent;
}

#qa .ribbon h3 {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    color: #FFF;
    background: #2196F3;
    z-index: 2;
    width: 40px;
    margin-top: 10px;
}

#qa .ribbon h3:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #397eb5;
}

#qa .ribbon h3:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #397eb5;
}


.qa_ranking {
    counter-reset: number 0;
}
.qa_ranking li {
    padding-left: 28px;
    position: relative;
    border-bottom: solid 1px var(--light_color2);
    padding: 0 0 8px 32px;
    margin-bottom: 8px;
}
.qa_ranking li:before {
    counter-increment: number 1;
    content: counter(number) " ";
    color: #ffffff;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    background: var(--primary_color);
    display: block;
    width: 24px;
    position: absolute;
    top: 2px;
    left: 0;
}
.qa_ranking li a {
    font-size: var(--font_size_s);
    font-weight: bold;
    display: block;
}

#qa .qa_question {
    margin: 24px 0 40px 0;
    background: var(--light_color);
}
#qa .qa_question h4 {
    margin: 0;
}
#qa .qa_question form {
    padding: 24px;
}
#qa .qa_question form textarea {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    height: 200px;
    margin-bottom: 8px;
}
#qa .qa_question form .btn_secondary {
    font-size: var(--font_size_r);
    margin: 0 auto 0 auto;
}
#qa .qa_question form .btn_secondary i {
    display: inline-block;
    margin-right: 4px;
}
#qa .list article {
    box-shadow: var(--box_shadow);
    border-radius: 20px;
    margin: 16px 0;
    padding: 24px;
    position: relative;
}

#qa .list article h3 {
    margin: 8px 0 4px 0;
    display: block;
    width: 100%;
}
#qa .list article h3 a {
    font-size: var(--font_size_m);
    font-weight: bold;
    line-height: 32px;
    text-decoration: underline;
}

#qa .list article b {
    color: #888888;
    font-size: var(--font_size_s);
    line-height: 32px;
    display: inline-block;
    background: var(--light_color2);
    vertical-align: bottom;
    padding: 0 8px;
    margin-right: 8px;
    width: 80px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    margin: 24px;
}
#qa .list article b.active {
    color: #ffffff;
    background: var(--accent_color);
}
#qa .list article b.resolve {
    color: #ffffff;
    background: var(--primary_color);
}
#qa .list article h3 + p {
    padding-right: 130px;
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
#qa .list article ul {
    font-size: var(--font_size_s);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}
#qa .list article li {
    display: inline-block;
    margin: 2px;
}
#qa .list article li a {
    line-height: 1.0em;
    display: block;
    background: var(--water_color);
    padding: 4px 8px;
}

#qa .list article .request_tag {
    padding-right: 130px;
}
#qa .list article .request_tag:before {
    content: "専門家リクエスト："
}
#qa .list article .request_tag:after {
    content: "への質問"
}
#qa .list article .occupation_tag {
    padding-left: 104px;
    margin-top: 4px;
}
#qa .list article .occupation_tag:before {
    content: "質問カテゴリ："
}
#qa .list article .occupation_tag a {
    color: var(--primary_color);
    background: none;
    border-radius: 20px;
    border: solid 1px var(--primary_color);
}
#qa .list article h3 {
    border-bottom: none;
}
#qa .list article .update {
    font-size: var(--font_size_s);
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 24px;
}

@media screen and (max-width: 768px) {
    #qa .list article {
        padding: 16px;
    }
    #qa .list article b {
        margin: 16px;
    }
    #qa .list article ul {
        padding: 0;
    }
    #qa .list article .update {
        text-align: right;
        position: static;
        margin: 0;
    }
    #qa .list article .update p {
        display: inline-block;
        margin-left: 8px;
    }
    #qa .list article h3 + p {
        padding: 0;
    }
    #qa .list article .request_tag {
        padding: 0;
        margin-bottom: 8px;
    }
    #qa .list article .occupation_tag {
        margin-top: 2px;
    }
}
#qa .qa_recommend,
#qa .qa_solved,
#qa .qa_keyword {
    margin: 32px 0;
}
#qa .text_right a{
    text-decoration: underline;
    position: relative;
    padding-left: 16px;
}
#qa .text_right a:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -2px;
    top: -8px;
}
#qa .qa_keyword a.tag {
    font-size: var(--font_size_r);
    margin-bottom: 8px;
    cursor: pointer;
}

#qa .component-tagList {
    margin: 8px 0 0 0;
}
#qa .component-tagList i {
    line-height: 1.0em;
    padding: 4px 8px;
    margin: 4px;
    display: inline-block;
    background: #ffffff;
    border-radius: 20px;
}
#qa .component-tagList i a {
    color: var(--basic_color_light);
    text-align: center;
    line-height: 18px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background: #ffffff;
    border-radius: 14px;
    margin-left: 4px;
}
#qa .qa_more {
    background: var(--water_color);
    padding: 36px;
}
#qa .qa_more br {
    display: none;
}
#qa .qa_more p {
    margin: 24px auto 0 auto;
}
#qa .qa_more p:first-child {
    margin-top: 0;
}
#qa .qa_more a.btn_secondary {
    margin: 16px auto 0 auto;
}
#qa .bg_light {
    background: var(--light_color);
}
#qa .qa_description {
    display: flex;
    position: relative;
}
#qa .qa_description > div {
    padding: 16px;
}
#qa .qa_description_image_area img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
/*
#qa .top_contents_matter b {
    color: #FFFFFF;
    text-align: center;
    display: block;
    background: var(--primary_color);
    margin-top: 4px;
}
*/
#qa .top_contents_matter_article_area img {
    max-width: 480px;
    margin: 0 auto;
    display: block;
}
#qa .qa_description .txt {
    padding-left: 0;
}
#qa .qa_description .txt h5 {
    padding-right: 150px;
}
#qa .qa_description .txt h5 a {
    margin: 0;
    padding: 0;
}
#qa .qa_description .txt p {
    margin: 16px 0;
}
#qa .qa_description .txt p.date {
    font-size: var(--font_size_s);
}

#qa .qa_question form　dl textarea {
    margin: 0;
}
#qa .qa_question form dl textarea {
    display: block;
    margin-bottom: 0;
}
#qa .qa_description .txt .date {
    font-size: var(--font_size_s);
    position: absolute;
    top: 0;
    right: 0;
    margin: 16px;
}
#qa .qa_description .txt .bookmark01::after {
    display: none;
}
#qa .no_comment {
    text-align: center;
    padding: 80px 20px;
}
#qa .component-attentionMessage {
    color: var(--accent_color);
    font-size: var(--font_size_s);
    border: solid 1px var(--accent_color);
    padding: 16px;
    margin-bottom: 16px;
}
#qa .component-attentionMessage__title {
    font-size: var(--font_size_r);
    margin-bottom: 8px;
}
#qa .bootstrap .form-control.is-invalid {
    border: solid 1px #dc3545;
}
#qa label {
    color: var(--basic_color);
    display: inline-block;
}
#qa .invalid-feedback {
    display: none;
}
#qa .bootstrap .invalid-feedback {
    display: block;
}
#qa .inner {
    border: solid 1px #ffffff;
    border-radius: 2px;
    background: #ffffff;
    padding: 16px;
}
#qa dt {
    line-height: 1.2em;
    margin: 16px 0 4px 0;
    padding-right: 40px;
}
#qa dt:first-child {
    margin-top: 0;
}
#qa dt span {
    color: var(--accent_color);
    font-size: var(--font_size_s);
    margin: 16px 0 4px 8px;
}
#qa .component-column {
    display: flex;
}
#qa .component-column button {
    color: #ffffff;
    font-size: var(--font_size_r);
    font-weight: bold;
    width: 80px;
    background: var(--primary_color);
    border: none;
}
#qa .calendar_container {
    text-align: left;
    margin-top: 8px;
}
#qa .qa_question form dl + .btn_secondary {
    margin: 0 auto;
}
#qa .qa_question form dl p {
    font-size: var(--font_size_s);
    margin: 16px 0;
}
#qa form dd .caution {
    font-size: var(--font_size_s);
    margin-top: 8px;
}
@media screen and (max-width: 768px) {

    #qa .qa_question form {
        padding: 16px;
    }

    #qa .ribbon h3 {
        margin-top: 20px;
        display: inline-block;
        position: relative;
        margin: 0;
        margin-top: 20px;
        padding: 0 20px;
        line-height: 30px;
        font-size: 18px;
        color: #FFF;
        background: #2196F3;
        z-index: 2;
        width: 100%;
        width: 40px;
    }

    #qa .ribbon:before {
        content: '';
        position: absolute;
        bottom: -16px;
        left: -17px;
        z-index: 0;
        border: 15px solid #56adf3;
        border-left-color: transparent;
    }

    #qa .ribbon:after {
        content: '';
        position: absolute;
        bottom: -16px;
        right: -17px;
        z-index: 1;
        border: 15px solid #56adf3;
        border-right-color: transparent;
    }
    #qa .qa_more br {
        display: block;
    }
}
@media screen and (max-width: 480px) {
    #qa .qa_question {
        margin: 16px 0 24px 0;
    }
    #qa .top_contents_menu li a p {
        font-size: var(--font_size_xs);
    }
    #qa ul.qa_content li {
        padding: 16px;
    }
    #qa ul.qa_content li .keyword.occupation {
        padding: 0;
    }

    #qa .qa_description {
        padding: 8px 0 30px 0;
    }
    #qa .qa_description > div {
        padding: 8px;
    }
    #qa .qa_description_image_area img {
        width: 50px;
        height: 50px;
    }
    #qa .qa_description_image_area b {
        font-size: var(--font_size_s);
    }
    #qa .qa_description .txt h5 {
        padding: 0;
    }
    #qa .qa_description .txt p {
        margin: 8px 0;
    }
    #qa .qa_description .txt p.date {
        text-align: right;
        margin: 8px 0;
        position: static;
    }
    #qa .qa_description .txt .action {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
    }
}

#qa.detail .list.main {
    margin: 16px 0 40px 0;
}
#qa.detail .list.main article h1 {
    color: var(--basic_color);
    font-size: var(--font_size_m);
    font-weight: bold;
    line-height: 32px;
    display: block;
    width: 100%;
    margin: 8px 0 4px 0;
    padding-right: 170px;
    box-sizing: border-box;
}
#qa.detail .list.main article ul {
    padding-right: 170px;
    box-sizing: border-box;
}
#qa.detail .list.main article ul.date {
    font-size: var(--font_size_s);
    text-align: right;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 32px;
}
#qa.detail .list.main article ul.date {
    padding: 0;
}
#qa.detail .list.main article ul.date li {
    display: block;
    margin: 0;
}
#qa.detail .list.main article ul.date li:last-child {
    margin-top: 24px;
}
#qa.detail .list.main article hr {
    height: 1px;
    border: none;
    background: var(--light_color2);
    margin: 16px 0;
}
#qa.detail .list.main article p {
    margin: 16px 0;
}
#qa.detail .list.main article p:last-child {
    margin-bottom: 0;
}
#qa.detail .list.main article p img {
    display: block;
    max-width: 320px;
    max-height: 320px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #qa.detail .list.main article h1 {
        padding-right: 0;
    }
    #qa.detail .list.main article ul {
        padding-right: 0;
    }
    #qa.detail .list.main article ul.date {
        position: static;
        margin: 0;
    }
    #qa.detail .list.main article ul.date li,
    #qa.detail .list.main article ul.date li:last-child {
        display: inline-block;
        margin: 0 0 0 16px;
    }
}
/*
#qa.detail .box {
    box-shadow: var(--box_shadow);
    border-radius: 20px;
    padding: 24px;
    margin: 16px 0 40px 0;
    position: relative;
}
#qa.detail .box h1 {
    font-size: var(--font_size_m);
    line-height: 32px;
    padding-right: 160px;
}
#qa.detail .box b {
    color: #888888;
    font-size: var(--font_size_s);
    line-height: 32px;
    display: inline-block;
    background: var(--light_color2);
    padding: 0 8px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 24px;
}
#qa.detail .box b.active {
    color: #ffffff;
    background: var(--accent_color);
}
#qa.detail .box ul {
    font-size: var(--font_size_s);
    margin-top: 8px;
    padding-right: 160px;
}
#qa.detail .box ul li {
    display: inline-block;
}
#qa.detail .box ul li a {
    line-height: 1.0em;
    display: block;
    background: var(--water_color);
    padding: 4px 8px;
}
#qa.detail .box .request_tag:before {
    content: "専門家リクエスト："
}
#qa.detail .box .request_tag:after {
    content: "への質問"
}
#qa.detail .box .occupation_tag {
    padding-left: 104px;
    margin-top: 4px;
}
#qa.detail .box .occupation_tag:before {
    content: "質問カテゴリ："
}
#qa.detail .box .occupation_tag a {
    color: var(--primary_color);
    background: none;
    border-radius: 20px;
    border: solid 1px var(--primary_color);
}

*/
#qa.detail .merit {
    color: var(--accent_color);
    font-weight: 700;
    line-height: 1.5em;
    text-align: center;
    margin-bottom: 40px;
}
#qa.detail .merit br.sp2 {
    display: none;
}
#qa.detail .merit b {
    font-size: var(--font_size_l);
}
#qa.detail .merit a {
    margin: 16px auto 0 auto;
}

#qa.detail .answer li {
    border-bottom: solid 1px var(--light_color2);
    padding: 32px 0 24px 50px;
    position: relative;
}
#qa.detail .answer li img.icon {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 32px;
}
#qa.detail .answer li p {
    margin: 0 0 16px;
    word-break: break-all;
}
#qa.detail .answer li p img {
    display: block;
    max-width: 320px;
    max-height: 320px;
    margin: 0 auto;
}
#qa.detail .answer li .date {
    font-size: var(--font_size_s);
    text-align: right;
    position: absolute;
    margin: 0;
    top: 12px;
    right: 0;
}
#qa.detail .answer li .action {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#qa.detail .answer li .action a {
    font-size: var(--font_size_s);
    display: inline-block;
    font-weight: normal;
    padding: 0;
}
#qa.detail .answer li .action label.bookmark01 {
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}
#qa.detail .answer li .action label.bookmark01 span {
    color: #ffffff;
    font-size: var(--font_size_s);
    font-weight: 400;
    line-height: 24px;
    background: var(--primary_color);
    border-radius: 3px;
    padding: 0 8px;
}
#qa.detail .answer li .action label.bookmark01:after {
    content: none;
}
#qa.detail .answer li .action label.bookmark01 i {
    color: var(--primary_color);
}
#qa.detail .answer li .action label.bookmark01 i {
    display: block;
    padding: 0 4px;
    color: var(--primary_color);
    font-size: var(--font_size_s);
    font-weight: 400;
    line-height: 22px;
    background: #FFF;
    border: solid 1px var(--primary_color);
    box-sizing: border-box;
    position: relative;
    margin-left: 8px;
}

#qa.detail .answer li .action label.bookmark01 i:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    margin-top: -4px;
    border: 4px solid transparent;
    border-right: 4px solid #FFF;
    z-index: 2;
}

#qa.detail .answer li .action label.bookmark01 i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    margin-top: -5px;
    border: 5px solid transparent;
    border-right: 5px solid var(--primary_color);
    z-index: 1;
}
#qa.detail .answer li .reply {
    background: var(--water_color);
    padding: 16px;
    margin-top: 24px;
    position: relative;
}
#qa.detail .answer li .reply:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -28px;
    top: 0;
    background: url(../img/qa/allow.svg) no-repeat center center / 12px auto;
}

#qa.detail .answer li .reply b {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}
#qa.detail .answer li .reply p {
    margin-bottom: 8px;
}
#qa.detail .answer li .reply .data {
    position: absolute;
    top: 0;
    right: 0;
    margin: 16px;
}
#qa.detail .answer li .reply .action {
    justify-content: right;
}
#qa.detail ul.qa_content li .qa_title_text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 99999;
}
#qa.detail .qa_question form dl + .btn_secondary {
    margin-top: 24px;
}
@media screen and (max-width: 768px) {

    #qa.detail .box h1 {
        padding: 0;
    }
    #qa.detail .box ul {
        padding: 0;
    }
    #qa.detail .box ul.date {
        position: static;
        margin: 8px 0 0 0;
    }
    #qa.detail .box ul.date li,
    #qa.detail .box ul.date li:last-child {
        margin: 0 0 0 16px;
        display: inline-block;
    }
    #qa.detail .box hr {
        margin: 8px 0;
    }
    #qa.detail .box p {
        margin: 8px 0;
    }
}
@media screen and (max-width: 480px) {
    #qa.detail .box {
        margin-bottom: 24px;
    }
    #qa.detail .answer li {
        padding: 16px 0 16px 40px
    }
    #qa.detail .answer li .action {
        margin-left: -40px;
    }
    #qa.detail .answer li p img {
        max-width: 240px;
        max-height: 240px;
    }
    #qa.detail .answer li img.icon {
        top: 44px;
        width: 30px;
        height: 30px;
    }
    #qa.detail .answer li .date {
        position: static;
        margin-bottom: 4px;
    }
    #qa.detail .answer li .reply {
        margin-top: 16px;
    }
    #qa.detail .merit {
        margin-bottom: 24px;
    }
    #qa.detail .merit br.sp2 {
        display: inline;
    }

}


#qa.confirm .box {
    background: var(--light_color2);
    padding: 24px;
    word-break: break-all;
}
#qa.confirm .box dd {
    background: #ffffff;
    padding: 16px;
}

#qa.confirm .btnset {
    display: flex;
    max-width: 600px;
    padding: 0 8px;
    margin: 24px auto 0;
}
#qa.confirm .btnset > * {
    width: 50%;
    flex: 1;
    margin: 0 8px;
    max-width: none;
}
#qa.confirm form .file_upload {
    display: flex;
    flex-wrap: wrap;
}
#qa.confirm form .file_upload article {
    display: block;
    width: 33.33%;
    padding: 8px;
    position: relative;
    box-sizing: border-box;
}
#qa.confirm form .file_upload article span {
    font-size: var(--font_size_s);
    line-height: 1.3em;
    display: block;
    margin-top: 8px;
}
#qa .qa_question form dl .file_upload + p.caution {
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {

    #qa.confirm .btnset {
        flex-wrap: wrap;
        justify-content: center;
    }
    #qa.confirm .btnset > * {
        width: 100%;
        margin: 8px;
        flex: none;
    }
    #qa.confirm .btnset > *:first-child {
        order: 2;
        max-width: 280px;
    }
    #qa.confirm .btnset > *:last-child {
        order: 1;
        max-width: 350px;
    }
    #qa.confirm form .file_upload article {
        width: 100%;
    }
}
#qa.confirm .qa_description .txt h5 {
    font-weight: bold;
    padding-right: 210px;
}
#qa.confirm .no_link {
    border: solid 1px #efefef;
    margin: 24px 0;
    padding: 16px;
    background: var(--light_color);
}
#qa.confirm .btnset {
    display: flex;
    max-width: 600px;
    padding: 0 8px;
    margin: 24px auto 0;
}
#qa.confirm .btnset > * {
    width: 50%;
    flex: 1;
    margin: 0 8px;
    max-width: none;
}
.seminar_detail ~ .movie a {
    flex: 1;
    padding: 8px;
}
.seminar_detail ~ .movie a li {
    padding: 0;
    height: 100%;
}
#qa.confirm form .file_upload {
    display: flex;
}
#qa.confirm form .file_upload article {
    width: 33.33%;
    display: block;
    padding: 8px;
    position: relative;

}
#qa.confirm form .file_upload article span {
    font-size: var(--font_size_s);
    line-height: 1.3em;
    display: block;
    margin-top: 8px;
}

@media screen and (max-width: 768px) {
    #qa.confirm .no_link {
        padding: 8px;
    }
    #qa.confirm .qa_description .txt h5 {
        padding-right: 0;
    }
    #qa.confirm .qa_description .txt p.date {
        text-align: right;
        margin: 8px 0;
        position: static;
    }

    #qa.confirm .btnset {
        flex-wrap: wrap;
        justify-content: center;
    }
    #qa.confirm .btnset > * {
        width: 100%;
        margin: 8px;
        flex: none;
    }
    #qa.confirm .btnset > *:first-child {
        order: 2;
        max-width: 280px;
    }
    #qa.confirm .btnset > *:last-child {
        order: 1;
        max-width: 350px;
    }
}

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

}

#qa .search_container input[type="text"] {
    margin: 0;
}/*
#qa .qa_modal h2 {
    font-size: var(--font_size_m);
    margin: 0;
    display: block;
    position: relative;
}
#qa .qa_modal h2 i {
    font-size: var(--font_size_2xl);
    font-weight: 400;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    cursor: pointer;
}
#qa .qa_modal h2 i:before,
#qa .qa_modal h2 i:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto auto;
}
#qa .qa_modal h2 i:before {
    transform: rotate(45deg);
}
#qa .qa_modal h2 i:after {
    transform: rotate(135deg);
}

#qa .qa_modal #service_modal_contents {
    max-width: 600px;
}
#qa .qa_modal dl {
    margin: 16px 0;
}
#qa .qa_modal dt {
    font-weight: bold;
    padding: 8px;
    margin: 0 0 8px 0;
    background: var(--light_color);
}
#qa .qa_modal dd {
    text-align: left;
}
#qa .qa_modal .calendar_container {
    display: none;
}
#qa .qa_modal .btn_secondary {
    margin: 0 auto 0 auto;
}*/
#qa .qa_search .accordion dt {
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    max-width: 340px;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
}
#qa .qa_search .accordion dt:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    transform: rotate(45deg);
    margin: 0 0 4px 8px;
}
#qa .qa_search .accordion dt.active:after {
    transform: rotate(225deg);
    margin: 0px 0px -2px 8px;
}
#qa .qa_search .accordion dd {
    display: none;
}
#qa .qa_search a.btn_secondary {
    margin: 16px auto 0 auto;
}
#qa .qa_search .search_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
#qa .qa_search .search_container input[type="text"] {
    max-width: 320px;
}
#qa .qa_search .search_container button {
    background: url(../img/common/keyword_search.png) no-repeat center center / 50% auto
    ,var(--primary_color);
    margin-left: 4px;
}
#qa .qa_search .search_container button:before {
    content: none;
}
#qa .qa_search .component-inputList {
    font-size: var(--font_size_s);
    text-align: center;
    margin: 16px 0;
}
#qa .qa_search .component-inputList label {
    margin: 0;
    line-height: 2.4em;
}
#qa .qa_search dl dd b {
    font-weight: bold;
    font-size: var(--font_size_s);
    display: block;
    padding: 4px 8px;
    margin: 16px 0 8px 0;
    background: var(--light_color2);
}
#qa .qa_search dl dd input.datepicker {
    width: 120px;
    padding: 8px;
}
#qa .qa_search dl dd span.datepick {
    display: none;
}
#qa .qa_search dl dd span.datepick input {
    background: url(../img/qa/icon_calendar.svg) no-repeat center right;
}
#qa .sort {
    text-align: right;
}
#qa .sort select {
    padding: 8px 16px 8px 8px;
}
/***********************************
** other / admin
***********************************/
#admin .top_contents_menu li {
    width: 50%;
}

#admin .top_contents_matter {
    margin-bottom: 50px;
}

#admin .top_contents_matter li .bookmark_list_button {
    font-weight: normal;
    display: flex;
    position: relative;
    border-radius: 10px;
    padding: 20px;
    margin-top: 25px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 25%);
}

#admin .top_contents_matter li .deadline {
    margin-bottom: 4px;
}

#admin .top_contents_matter li a {
    text-align: center;
    display: block;
    margin: 4px auto;
}

#admin .top_contents_matter_article_area {
    position: relative;
    width: 100%;
}

#admin .top_contents_matter_article_title {
    font-weight: bold;
    margin: 0 0 4px;
    padding: 0;
}

#admin .top_contents_matter_article_title + p {
    margin-bottom: 16px;
}

#admin .top_contents_matter_tagcontent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#admin .top_contents_matter > ul > li {
    position: relative;
}

#admin .top_contents_matter .close_button img {
    position: absolute;
    width: 20px;
    height: auto;
    top: -8px;
    right: -8px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-right: 0px;
}

#admin .top_contents_matter_tagarea {
/*
    width: 100%;
    align-items: center;
    display: block;
    text-align: right;
*/
    position: absolute;
    top: -4px;
    right: -4px;
    width: auto;
}

#admin .bookmark.close_button img {
    position: absolute;
    width: auto;
    height: auto;
    top: 20px;
    right: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-right: 0px;
}

#admin .link_detail {
    font-weight: bold;
}

#admin .link_detail h4 {
    margin: 0;
    font-weight: bold;
}

#admin .tag_bookmark ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 15px 0;
}

#admin .btn_primary.bookmark {
    background: var(--primary_color);
}

#admin .top_displayed_results {
    margin: 60px 0 32px;
}

#admin .bookmark_button {
    padding-bottom: 50px;
}

#admin .form_area {
    margin: 0 auto;
}

#admin .form_area.bookmark {
    margin: 0 auto 20px;
}

#admin .form_area_button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#admin .outline_box h2 {
    text-underline-offset: none;
    line-height: 1.5;
    /* text-decoration: none; */
    border: none;
    padding-top: 15px;
    margin-bottom: 10px;
}

#admin .application_button {
    border-radius: 5px;
    padding: 5px 10px;
    color: #000;
    border: 1px solid var(--basic_color_light);
}

#admin .application_button.question {
    background: var(--accent_color);
}

#admin .application_button.question > a {
    color: #ffffff;
}

#admin .form_area_button > div:not(:last-child) {
    margin-right: 5px;
}

#admin .btn_primary::before, #admin .btn_secondary::before {
    /* content: none; */
}

#admin .application_button_submit {
    margin-top: 5px;
}

#admin select {
    outline: none;
}

#admin .outline_box.application {
    position: relative;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--basic_color_light);
}

#admin .company span {
    color: #ffffff;
    background: #45bae5;
    padding: 5px 20px;
}

#admin .deadline, #admin .event_date, #admin .seminar_detail {
    margin-bottom: 10px;
}

#admin .seminar_detail > i.right {
    margin-left: 30px;
}

#admin .search_area {
    background: var(--light_color);
    padding: 20px;
}

#admin .keyword_form {
    text-align: center;
}

#admin .search_checkbox_area {
    margin: 0 auto;
}

#admin .search_checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #ffffff;
    margin-top: 5px;
    padding-bottom: 20px;
}

#admin .search_checkbox_title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#admin .search_checkbox_title > p:first-child {
    margin-right: 30px;
}

#admin .search_checkbox > p {
    width: 45%;
    padding-left: 20px;
    padding-top: 20px;
}

#admin .search_checkbox > p:nth-child(2n) {
    /* padding-left: 20px; */
}

#admin .bookmark_list_button {
    margin: 20px auto 20px;
}

#admin .top_contents_matter li .no_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 30px 0 10px;
}

#admin .top_contents_matter li a.no_flex {
    display: block;
}

#admin .top_contents_matter.admin {
    /* background: var(--light_color); */
}

#admin .top_contents_matter.admin li {
    margin-top: 60px;
    background: var(--light_color);
}

#admin .top_contents_matter.admin li a {
    background: none;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}

#admin .top_contents_matter.admin .top_contents_matter_article_area p {
    padding-top: 5px;
}

#admin .top_learn_left_article_campany::before {
    top: 0;
    background: var(--primary_color);
}

#admin .top_learn_left_article_campany {
    font-size: inherit;
}

#admin .select_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 50px;
}

#admin .cp_ipselect {
    margin: 0;
}

#admin .cp_ipselect_title {
    margin-right: 20px;
}

#admin .detail_title.templete {
    margin-bottom: 32px;
}

#admin .col2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
}

#admin .col2 div {
    width: 40%;
    border-radius: 30px;
}

#admin .col2 div:nth-child(2n+1) {
    margin-right: 10px;
}

#admin .btn_primary.qa {
    margin: 10px auto;
    background: var(--light_color);
    color: var(--basic_color_light);
    border-radius: 10px;
}

#admin .btn_primary.qa.all {
    background: var(--primary_color);
    color: #ffffff;
}

#admin .qa_area {
    padding-bottom: 30px;
    border-bottom: 1px solid gray;
}

#admin .qa_history {
    margin-top: 20px;
}

#admin h2.qa {
    border: none;
    font-weight: normal;
}

#admin .component-formStep.admin {
    width: 101.6%;
}

#admin .top_learn_left_article_campany {
    position: relative;
    padding-left: 20px;
    font-size: unset;
    padding-top: 5px;
    text-align: right;
    display: inline-block;
}

#admin .top_learn_left_article_campany a {
    text-decoration: underline;
}

#admin .text_right {
    text-align: right;
}

#admin .title_area {
    max-width: 660px;
    margin: 0 auto 20px;
}

#admin .title_area.admin_out {
    max-width: none;
    margin: 0px auto 40px;
}

#admin p.input-text {
    padding-left: 48px;
    padding-bottom: 60px;
}

#admin #admin_out {
    display: none;
}

#admin #admin_out#selected {
    display: block;
}

#admin .overflow-wrap {
    overflow-wrap: break-word;
}

#admin .application_history_area, #admin .favorite_area, #admin .want_area {
    display: none;
}
#admin .top_contents_matter ul.bookmark_area_flex {
}

#admin .top_contents_matter ul.bookmark_area_flex li.service_document {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}
#admin .top_contents_matter ul.bookmark_area li a.bookmark_link_area {
    display: inline;
    border-bottom: none;
}

@media screen and (max-width: 768px) {
    #admin .top_contents_matter li .bookmark_list_button {
        display: block;
    }
    #admin .top_contents_matter .thumb {
        width: auto;
        max-width: none;
        margin: 0 0 8px 0;
    }
    #admin .top_contents_menu.tab {
        overflow: unset;
    }

    #admin .form_area_button {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    #admin .form_area_button > div {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #admin .main_area {
        margin: 0 20px;
    }

    #admin .top_contents_matter li a {
        display: block;
        padding: 8px 32px;
    }

    #admin .top_contents_matter_tagarea {
        width: auto;
        align-items: inherit;
        display: block;
        text-align: right;
    }
    #admin .bookmark_list_button {
        margin: 0;
    }
    #admin .document_img {
        width: 30%;
        position: relative;
        margin: 0 16px 0 0;
        top: 0;
        left: 0;
    }
    #admin .document_img img {
        width: 100%;
    }

    #admin .search_area {
        padding: 16px;
    }
    #admin .search_checkbox {
        padding: 8px;
    }
    #admin .search_checkbox > p {
        box-sizing: border-box;
        padding: 8px;
        width: 50%;
    }
    #admin .term {
        padding-left: 20px;
        line-height: 1.3em;
    }
    #admin .term::before {
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        content: '';
        display: block;
        height: 8px;
        margin-top: -7px;
        position: absolute;
        transform: rotate(45deg);
        width: 4px;
        z-index: 2;
        left: 4px;
        top: 9px;
    }
    #admin .term::after {
        content: none;
    }
    #admin .term span::before {
        width: 15px;
        height: 15px;
        top: 10px;
    }
    #admin .search_area .btn_primary.bookmark {
        margin: 8px auto;
    }
}
/*
.seminar_detail ~ .movie a {
    flex: 1;
    padding: 8px;
}
*/
.seminar_detail ~ .movie a li {
    padding: 0;
    height: 100%;
}
.seminar_detail ~ .movie a .movie_article {
    margin: 0;
    height: 100%;
}
.seminar_detail ~ .movie a .movie_article p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

}
.seminar_detail .top_main_banner {
    width: 85%;
    max-width: none;
}
.seminar_detail .btn_secondary {
    margin-bottom: 50px;
}

.seminar_detail .tag_bookmark {
    margin-bottom: 16px;
}

.seminar_detail .tag_bookmark:last-child {
    margin-bottom: 0;
}

.seminar_detail .tag_bookmark ul {
    text-align: right;
}

.seminar_detail .tag_bookmark ul li .tag {
    border-radius: 4px;
    border: none;
    padding: 4px 8px;
    background: #888;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .seminar_detail .btn_secondary {
        margin-bottom: 30px;
    }
}

#seminar_entry h1 {
    text-align: center;
}
#seminar_entry h2.sns.text_center {
    font-size: var(--font_size_m);
    font-weight: bold;
    display: block;
    text-align: center;
    border: none;
}
#seminar_entry #regist {
    justify-content: center;
}
#seminar_entry .caution {
    color: var(--accent_color);
}
#seminar_entry .box.bg {
    padding: 24px;
}
#seminar_entry dl {
    margin: 16px 0;
}
#seminar_entry dt {
    margin: 0 0 4px 0;
}
#seminar_entry #regist dd {
    margin: 0;
}
#seminar_entry h4 {
    font-size: var(--font_size_r);
    font-weight: 700;
    text-align: center;
    margin: 40px 0;
}
#seminar_entry h4 span {
    display: inline-block;
}
#seminar_entry .col2 > div {
    width: 49%;
}
#seminar_entry dd p:last-child {
    margin: 8px 0;
}
#seminar_entry .col2 ,
#seminar_entry .col3 {
    align-items: center;
}
#seminar_entry .col2 > input,
#seminar_entry .col3 > input {
    margin: 0 4px;
}
#seminar_entry .col2 > input:first-child,
#seminar_entry .col3 > input:first-child {
    margin-left: 0;
}
#seminar_entry .col2 > input:last-child,
#seminar_entry .col3 > input:last-child {
    margin-right: 0;
}
/*セミナー職種区分チェックボックス*/
#seminar_entry .chk {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	padding: 5px 30px;
	position: relative;
	width: auto;
}
#seminar_entry .chk::before {
	background: #fff;
	border: 1px solid #231815;
	content: '';
	display: block;
	height: 16px;
	left: 5px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 16px;
}
#seminar_entry .chk::after {
	border-right: 3px solid #386c5f;
	border-bottom: 3px solid #386c5f;
	content: '';
	display: block;
	height: 9px;
	left: 10px;
	margin-top: -7px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 5px;
}
#seminar_entry input[type=checkbox]:checked + .chk::after {
	opacity: 1;
}

@media screen and (max-width: 768px) {
    #seminar_entry .box.bg {
        padding: 16px;
    }
    #seminar_entry h4 {
        margin: 20px 0;
    }
}
/***********************************
** other / resign
***********************************/
p.pw_text {
    margin: 20px 0;
}

p.pw_text a {
    font-weight: bold;
    color: var(--primary_color);
    text-decoration: underline;
}
.resign_link {
    text-align: right;
}
#resign_button.resign_link > a {
    color: var(--primary_color);
}

/***********************************
** other / hr
***********************************/
#hr .text_area {
    max-width: 660px;
    margin: 20px auto;
}

#hr .text_area p {
    line-height: 2.0;
}

#hr .quiz_detail .quiz_title {
    margin-top: 30px;
}

#hr .hr_image_top {
    position: relative;
    width: 100%;
    margin-bottom: 53px;
}

#hr .hr_image {
    width: 300px;
    max-width: 560px;
    margin: 45px auto;
}

#hr .hr_image_top h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-shadow: 4px 3px 5px rgba(0, 0, 0, 0.6);
}

#hr .hr_pickup_title {
    color: var(--primary_color);
}

#hr .hr_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#hr .hr_content div {
    width: 31.3%;
    /* border: 1px solid gray; */
    border-radius: 15px;
    margin-right: 12px;
    margin-top: 45px;
    -webkit-box-shadow: 4px 3px 5px rgba(3, 3, 6, 0.16);
    box-shadow: 4px 3px 5px rgba(3, 3, 6, 0.16);
}

#hr .hr_content div a img {
    border-radius: 15px;
}

#hr section.quiz_detail {
    margin-bottom: 30px;
}

#hr footer {
    margin-top: 80px;
}

@media screen and (max-width: 768px) {
    #hr {
        /* .hr_content div {
                        width: 100%;
                } */
    }

    #hr .hr_image {
        width: 300px;
        margin: 45px auto;
    }

    #hr .hr_content div {
        padding: 5px;
        margin-top: 18px;
    }
}

@media screen and (max-width: 420px) {
    #hr .detail_title h1.sp_normalsize {
        font-size: 18px;
    }
}

/***********************************
** other / content
***********************************/
#content .w200 {
    width: 200px;
}

#content .w300 {
    width: 300px;
}

#content input[type=checkbox] {
    display: none;
}

#content .detail_title {
    margin: 40px auto 30px;
}

#content .detail_title h1 {
    margin-bottom: 15px;
    display: block;
    font-size: 26px;
    font-weight: bold;
}

#content .detail_title h1 i {
    font-size: clamp(12px, 14px, 25px);
    display: block;
}

#content .detail_title p {
    text-align: left;
    line-height: 1.7em;
    margin-bottom: 10px;
}

#content .content_title {
    margin: 40px auto 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#content .content_title h1 {
    margin-left: 20px;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5em;
}

#content .content_title h1 i {
    color: var(--accent_color);
    border: solid 1px var(--accent_color);
    padding: 2px 10px;
    font-size: 18px;
}

#content .content_title h1 i.logo {
    color: var(--basic_color);
    border: solid 0px var(--accent_color);
    padding: 0;
    font-size: 40px;
}

#content .content_title h1 i.logo img {
    width: 80px;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    margin: 0 5px;
}

#content .content_title .thumb img {
    width: 200px;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    border-radius: 5px;
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}

#content .content_title .thumb {
    position: relative;
}

#content .content_title .thumb::before {
    content: '特集';
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    color: #fff;
    padding: 2px 0;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 1;
}

#content p.content_lead span {
    font-size: 14px;
    display: inline-block;
    margin-top: 5px;
    line-height: 1.6em;
}

#content .content_title_ipo {
    margin: 40px auto 20px;
}

#content .content_title_ipo h1 {
    margin: 20px auto 0;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    color: var(--primary_color);
}

#content .content_title_ipo .thumb img {
    width: 100%;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}

#content .content_title_ipo .thumb {
    position: relative;
}

#content .content_title_ipo .thumb::before {
    content: 'Manegy 特集企画';
    font-family: roboto;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 1;
}

#content p.content_lead_ipo {
    margin: 0 auto;
    line-height: 1.6em;
    text-align: center;
}

#content {
    margin-bottom: 80px;
}

#content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 20px;
}

#content li {
    width: 48%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#content li a {
    -webkit-box-shadow: var(--box_shadow);
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    padding: 20px;
    display: block;
    font-weight: bold;
    margin: 0 30px 35px 0;
}

#content li:last-child {
    border: none;
}

#content img {
    width: 100%;
    height: 200px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    display: block;
    margin: 0 auto 20px;
}

#content li:last-child a {
    border: none;
}

#content .info h4 {
    font-size: 18px;
    margin-bottom: 15px;
    min-height: 3em;
}

#content .info p {
    font-weight: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

#content #content_article {
    margin-bottom: 40px;
}

#content #content_article ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 20px;
}

#content #content_article li {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#content #content_article li a {
    -webkit-box-shadow: var(--box_shadow);
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    padding: 20px;
    display: block;
    font-weight: bold;
    margin: 0 30px 30px 0;
}

#content #content_article li:last-child {
    border: none;
}

#content #content_article img {
    width: 150px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    display: block;
    margin: 0 10px 0 0;
}

#content #content_article li:last-child a {
    border: none;
}

#content #content_article .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px;
}

#content #content_article .info h4 {
    font-size: 18px;
    min-height: 3em;
}

#content #content_article p {
    font-weight: normal;
    font-size: 15px;
    position: relative;
    padding-left: 30px;
    line-height: 1.3em;
}

#content #content_article p::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: 10px;
    top: -8px;
}

#content #content_article p span {
    border: solid 1px var(--accent_color);
    padding: 0 5px;
    color: var(--accent_color);
    float: right;
}

#content #content_article .detail_title {
    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;
}

#content #content_article .detail_title .detail_title5 {
    font-size: 20px;
}

#content #content_article .detail_title .detail_title5::before {
    height: 30px;
}

#content #content_article .detail_title span {
    font-size: 14px;
    background: var(--light_color);
    padding: 1px 10px;
}

#content #content_article.ipo ul {
    display: block;
}

#content #content_article.ipo li {
    width: 87%;
    display: block;
    -webkit-box-shadow: var(--box_shadow);
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    padding: 30px 50px;
    font-weight: bold;
    margin: 0 30px 30px 0;
}

#content #content_article.ipo li a {
    width: 100%;
    display: block;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

#content #content_article.ipo ul li .title {
    margin: 0 auto;
    text-align: center;
}

#content #content_article.ipo ul li .title img {
    display: block;
    width: auto;
    margin: 0 auto;
}

#content #content_article.ipo .info img {
    width: 100%;
    max-width: 300px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    display: block;
    margin: 0 20px 0 0;
}

#content #content_article.ipo h3 {
    margin: 15px auto;
}

#content #content_article.ipo .interview h4 {
    min-height: auto;
    margin-bottom: 10px;
}

#content #content_article.ipo p {
    font-size: 16px;
    line-height: 1.5em;
    padding: 0;
    margin-bottom: 10px;
}

#content #content_article.ipo p::before {
    content: none;
}

#content #content_article.ipo .top_blocks_3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#content #content_article.ipo .top_blocks_3 ul {
    margin: 0 auto;
}

#content #content_article.ipo .top_blocks_3 li {
    width: 260px;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: bold;
    margin-right: 20px;
    padding: 0;
    text-align: right;
}

#content #content_article.ipo .top_blocks_3 li:last-child {
    margin-right: 0;
}

#content #content_article.ipo .top_blocks_3 li p {
    margin: 20px 0 0;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-weight: bold;
}

#content #content_article.ipo .top_blocks_3 img {
    width: 260px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    display: block;
    margin: 0 auto;
}

#content #content_article.ipo .btn_secondary {
    display: -ms-grid !important;
    display: grid !important;
    font-weight: normal;
    font-size: 16px;
    margin: 20px auto 0px;
}

#content #content_article.ipo p i {
    color: var(--primary_color);
    font-weight: bold;
}

#content .content_support ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0 40px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#content .content_support ul li {
    width: 25%;
    margin-right: 30px;
    padding: 0 20px;
}

#content .content_support ul li img {
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

#content .content_culumn {
    margin: 40px 0 80px;
}

#content .content_culumn li {
    padding: 20px 0;
    border-bottom: solid 1px #E5E5E5;
    font-weight: bold;
}

#content .content_culumn li:last-child {
    border: none;
}

#content .content_culumn li .thumb_title {
    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;
}

#content .content_culumn img {
    width: 128px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    background: #f9f9f9;
    margin-right: 20px;
}

#content .content_culumn .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
}

#content .content_culumn .title p {
    width: 85%;
}

#content .content_culumn .tag {
    width: auto;
    padding: 0px 10px;
    margin: 15px 2px 0;
    font-size: 15px;
    background: #fff;
}

#content .content_culumn i {
    display: block;
    text-align: right;
    font-weight: normal;
    font-size: 14px;
}

#content .content_culumn i.content_point {
    background: var(--primary_color);
    width: 15%;
    border-radius: 3px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-left: 30px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #content .mtb10 {
        margin: 10px auto;
    }

    #content .mt25 {
        margin: 25px auto 0;
    }

    #content .current_link .btn_secondary {
        margin: 5px 0 20px;
    }

    #content .detail_title {
        margin: 25px auto;
    }

    #content .detail_title.sub_title {
        display: block;
    }

    #content .detail_title.sub_title p.pc_lead {
        display: none;
    }

    #content .detail_title.sub_title p.news_lead {
        margin: 10px auto;
        width: 90%;
    }

    #content .detail_title h1 {
        display: block;
        text-align: center;
    }

    #content .detail_title h1.middle {
        font-size: 20px;
        line-height: 1.6em;
    }

    #content .banner {
        width: var(--sp_inner);
        margin: auto;
    }

    #content .content_title {
        display: block;
        width: 90%;
    }

    #content .content_title h1 {
        margin-left: 0;
        font-size: 22px;
        line-height: 1.4em;
    }

    #content .content_title h1 i {
        display: inline-block;
        margin: 15px auto 10px;
        text-align: center;
        padding: 0px 10px;
        font-size: 16px;
    }

    #content .content_title .thumb img {
        width: 100%;
    }

    #content .content_title .thumb::before {
        font-size: 24px;
    }

    #content p.content_lead {
        width: 90%;
        margin: 20px auto 0;
    }

    #content {
        width: var(--sp_inner);
        margin: 0 auto 80px;
    }

    #content ul {
        display: block;
    }

    #content li {
        display: block;
        width: 100%;
    }

    #content li a {
        -webkit-box-shadow: var(--box_shadow);
        box-shadow: var(--box_shadow);
        border-radius: 10px;
        padding: 5px 20px 15px;
        display: block;
        font-weight: bold;
        margin: 0 auto 20px;
    }

    #content img {
        margin: 0 auto 10px;
    }

    #content .info h4 {
        min-height: auto;
    }

    #content #content_article {
        width: 90%;
        margin: 0 auto;
    }

    #content #content_article ul {
        display: block;
        margin-top: 0;
    }

    #content #content_article li {
        width: 100%;
    }

    #content #content_article li a {
        border-radius: 10px;
        padding: 15px;
        margin: 0 0 20px 0;
    }

    #content #content_article img {
        width: 128px;
        height: auto;
    }

    #content #content_article .info h4 {
        font-size: 16px;
    }

    #content #content_article .detail_title {
        margin: 20px 0 10px;
    }

    #content .content_support {
        width: 90%;
        margin: 0 auto 40px;
    }

    #content .content_support ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 15px auto 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #content .content_support ul li {
        width: 38%;
        margin: 20px 10px 0;
        padding: 0 10px;
    }

    #content .content_support ul li img {
        height: auto;
    }

    #content .content_culumn {
        width: 90%;
        margin: 40px auto;
    }

    #content .content_culumn li {
        margin: 0 auto;
        padding: 15px 10px;
    }

    #content .content_culumn li .thumb_title {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    #content .content_culumn .title {
        display: block;
    }

    #content .content_culumn .title p {
        width: 100%;
    }

    #content .content_culumn .tag {
        padding: 0px 10px;
        margin: 10px 2px 0;
        font-size: 14px;
    }

    #content .content_culumn i {
        width: 100%;
    }

    #content .content_culumn i.content_point {
        width: 70%;
        margin: 5px 0 0 auto;
    }

    #content .content_title_ipo h1 {
        font-size: 24px;
        line-height: 1.2em;
    }

    #content p.content_lead_ipo {
        text-align: left;
        width: 90%;
    }

    #content #content_article.ipo ul {
        width: 90%;
    }

    #content #content_article.ipo li {
        width: 100%;
        padding: 20px;
    }

    #content #content_article.ipo ul li p {
        font-size: 14px;
    }

    #content #content_article.ipo ul li .info {
        display: block;
    }

    #content #content_article.ipo .info img {
        margin: 0 auto 15px;
    }

    #content #content_article.ipo .top_blocks_3 li {
        width: 100%;
        border-bottom: solid 1px #E5E5E5;
        padding-bottom: 10px;
        margin-right: 0;
    }

    #content #content_article.ipo .btn_secondary {
        margin: 15px auto;
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    #content .detail_title.sub_title h1 {
        width: 150px;
    }

    #whitepaper .detail_title.sub_title h1 {
        width: 200px;
    }

    #content ul {
        -ms-flex-pack: distribute;
        justify-content: space-around;
        margin: 0 auto;
    }

    #content ul li {
        margin: 0 auto;
    }

    #content li a {
        margin: 0 auto;
    }

    #content .content_support ul li {
        width: 25%;
        margin-right: 20px;
    }

    #content #content_article.ipo .top_blocks_3 li {
        width: 30%;
    }

    #content #content_article.ipo .top_blocks_3 img {
        width: 100%;
    }
}

/***********************************
** other / qa_form
***********************************/
#qa_form {
    padding-bottom: 80px;
}

#qa_form .box {
    padding: 40px;
}

#qa_form input[type=text] {
    font-size: var(--font_size_r);
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0;
}

#qa_form dt {
    margin: 24px 0 8px 0;
}

#qa_form textarea {
    font-size: var(--font_size_r);
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0;
    box-sizing: border-box;
}

#qa_form .btn_primary input {
    display: none;
}

#qa_form .search_checkbox {
    display: flex;
    flex-wrap: wrap;
}

#qa_form .search_checkbox p {
    width: 50%;
    float: left;
    padding: 8px;
    box-sizing: border-box;
}

#qa_form .keyword_form {
    width: 100%;
    max-width: 300px;
    display: flex;
}

#qa_form .keyword_form button {
    width: 100px;
    margin-left: 8px;
}

#qa_form .keyword_form button:before {
    content: "検 索";
    font-size: var(--font_size_s);
    position: relative;
    top: auto;
    left: auto;
}

/***********************************
** other / wp
***********************************/
.whitepaper_detail {
    position: relative;
}

.whitepaper_detail .outline_box {
    padding: 24px;
    align-items: start;
}

.whitepaper_detail .outline_box .thumb {
    text-align: center;
    width: 50%;
    height: auto;
}

.whitepaper_detail .outline_box .tag {
    margin: 4px 2px;
}

.whitepaper_detail .outline_box .tag a {
    color: var(--primary_color);
}

.whitepaper_detail .outline_box .tag_bookmark {
    margin: 0;
}

.whitepaper_detail .outline_box h4 {
    margin: 8px 0;
}

.whitepaper_detail .outline_box .checkbox01 {
    margin-bottom: 24px;
}

.whitepaper_detail .float_button {
    position: sticky;
    left: 1200px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    z-index: 100;
}

.whitepaper_detail .float_button span {
    position: absolute;
    top: -6px;
    right: -9px;
    background: var(--accent_color);
    padding: 2px 10px;
    border-radius: 25px;
    border: 2px solid #fff;
    color: #fff;
}

.whitepaper_detail .float_button img {
    width: 100%;
}

.whitepaper_detail .category_contents {
    margin: 32px 0 0 0;
}
/*
.whitepaper_detail .news_contents {
    margin: 0;
    padding: 24px;
}
*/
.whitepaper_detail .news_contents ul li {
    /*
    padding: 0 0 8px 0;
    margin: 0 0 8px 0;
    border-bottom: solid 1px var(--light_color2);
    */
    padding: 0;
    margin: 0 0 16px 0;
}
.whitepaper_detail .news_contents ul li:last-child {
    margin: 0;
    padding: 0;
    border: none;
}
/*
.whitepaper_detail .news_contents ul li a {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    border: none;
}
.whitepaper_detail .news_contents ul li a .thumb {
    width: 30%;
    max-width: 160px;
    min-width: 120px;
    margin: 0;
}
.whitepaper_detail .news_contents ul li a .thumb img {
    border: solid 1px var(--light_color2);
    width: 100%;
    max-width: none;
}

.whitepaper_detail .news_contents ul li a .news_title {
    display: block;
    flex: 1;
    padding-left: 16px;
}
.whitepaper_detail .news_contents ul li a .news_title p {
    font-size: var(--font_size_s);
    line-height: 1.3em;
    width: auto;
    margin: 0;
}
.whitepaper_detail .news_contents ul li a .news_title .tag {
    margin: 4px 4px 0 0;
}
*/
@media screen and (max-width: 1024px) {
    .whitepaper_detail .float_button {
        right: 20px;
        bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    .whitepaper_detail {
        margin: 24px 0;
    }
    .whitepaper_detail .detail_title {
        display: none;
    }
    .whitepaper_detail .outline_box {
        padding: 0;
    }
    .whitepaper_detail .outline_box .thumb {
        width: 100%;
    }
    .whitepaper_detail .outline_box .thumb img {
        width: 100%;
        max-width: none;
    }
    .whitepaper_detail .outline_box .tag_bookmark {
        display: flex;
    }
    .whitepaper_detail .outline_box .checkbox01 {
        margin: 16px auto;
    }
    .whitepaper_detail .float_button {
        right: 20px;
        bottom: 65px;
        margin-right: 20px;
    }
    .whitepaper_detail .news_contents {
        padding: 16px;
    }
}

.top_regist_float {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    /* height: 229px; */
    z-index: 9999;
    /* padding: 10px; */
    background-color: var(--light_color);
    border: 3px solid var(--primary_color);
}
.top_regist_float_content {
    position: relative;
    margin-bottom: -6px;
}
.top_regist_float_content_close {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary_color);
    color: #fff;
    width: 20px;
    height: 20px;
}
.top_regist_float_content_close > i {
    position: absolute;
    bottom: 0px;
    left: 7px;
}
.top_regist_float_title {
    color: var(--primary_color);
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
}
.top_regist_float_text {
    padding: 10px 20px 0;
    font-weight: bold;
    font-size: 0.8em;
}
.top_regist_float_button {
    margin: 10px auto;
}

/***********************************
** other / chaos
***********************************/
section#chaos {
    width: var(--sp_inner);
    margin: 0 auto;
}

#chaos .redactor-styles p,
#chaos .redactor-styles ul,
#chaos .redactor-styles ol,
#chaos .redactor-styles dl,
#chaos .redactor-styles blockquote,
#chaos .redactor-styles hr,
#chaos .redactor-styles pre,
#chaos .redactor-styles table,
#chaos .redactor-styles figure,
#chaos .redactor-styles address {
    margin-bottom: 20px;
}

#chaos .redactor-styles ul {
    margin: 0 0 20px 24px;
}

#chaos .redactor-layer {
    padding: 0 0 20px;
}

#chaos strong, #chaos .strong {
    font-weight: bold !important;
}

#chaos .btn_chaos {
    width: 60%;
    background: var(--primary_color);
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 30px auto 20px;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
}

#chaos .btn_chaos::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 10px;
    top: 5px;
}

#chaos .movie ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}

#chaos .movie ul li {
    max-width: 300px;
    width: 100%;
}

#chaos .movie_article {
    -webkit-box-shadow: var(--box_shadow);
    box-shadow: var(--box_shadow);
    padding-bottom: 10px;
    margin-top: 20px;
}

#chaos .movie_article img {
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    display: block;
    margin: 0 auto 15px;
    max-width: 300px;
}

#chaos .movie_article .movie_contents {
    margin: 0 20px;
}

#chaos .movie.list ul a {
    width: 31%;
    margin: 10px 1%;
}

#chaos .semminar_contents ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}

#chaos .movie.list ul a {
    width: 31%;
    margin: 10px 1%;
}

#chaos .semminar_contents li {
    max-width: 300px;
    width: 100%;
}

#chaos .semminar_contents li a {
    -webkit-box-shadow: var(--box_shadow);
    box-shadow: var(--box_shadow);
    border-radius: 30px;
    padding: 20px;
    display: block;
    font-weight: bold;
    margin: 0 10px 35px;
}

#chaos .semminar_contents img {
    /*width: 300px;*/
    height: 169px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    /*background: #f9f9f9;*/
    display: block;
    margin: 0 auto 15px;
}

#chaos .btn_sub {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 20px auto;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
    max-width: 350px;
    width: 100%;
    background: var(--primary_color);
}

#chaos .btn_secondary {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 0 auto 30px;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
}

#chaos .detail_title2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary_color);
    margin: 20px 0 15px 35px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#chaos .movie {
    margin-bottom: 0;
}

#chaos h5 {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary_color);
    border-bottom: dotted;
    /*下線を点線にする*/
    border-color: var(--primary_color);
    border-width: 1px;
}

#chaos .quiz_title {
    line-height: 2em;
    margin: 20px 0;
}

#chaos .quiz_title span {
    margin-right: 2%;
    padding: 2% 3%;
    background-color: var(--primary_color);
    color: #fff;
}

#chaos .pc_hide {
    display: none;
}

@media screen and (min-width: 601px) and (max-width: 1025px) {
    #chaos .btn_chaos {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: bold;
    }

    #chaos .movie ul {
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin: 0;
    }

    #chaos .movie ul {
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin: 0;
    }

    #chaos .semminar_contents ul {
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin: 0;
    }

    #chaos .semminar_contents.list ul a {
        margin: 10px 1%;
    }
}

@media screen and (max-width: 768px) {
    #chaos .redactor-styles p, #chaos .redactor-styles ul, #chaos .redactor-styles ol, #chaos .redactor-styles dl, #chaos .redactor-styles blockquote, #chaos .redactor-styles hr, #chaos .redactor-styles pre, #chaos .redactor-styles table, #chaos .redactor-styles figure, #chaos .redactor-styles address {
        margin-bottom: 15px;
    }

    #chaos .redactor-styles ul, #chaos .redactor-styles ol, #chaos .redactor-styles ul ul, #chaos .redactor-styles ol ol, #chaos .redactor-styles ul ol, #chaos .redactor-styles ol ul {
        margin: 0 0 15px 15px;
    }

    #chaos .redactor-layer {
        padding: 0 0 15px;
    }

    #chaos .btn_chaos {
        display: -ms-grid !important;
        display: grid !important;
        font-size: 14px;
        /* margin: 30px auto 40px; */
        max-width: 350px;
        width: 100%;
        background: var(--primary_color);
        color: #fff;
        font-weight: bold;
        height: 45px;
        text-align: center;
        margin: 30px auto;
        place-items: center;
        position: relative;
    }

    #chaos .semminar_contents li {
        max-width: 100%;
        display: block;
    }

    #chaos .semminar_contents li a {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        width: 100%;
        margin: 0;
        padding: 20px 0 15px;
        border-bottom: solid 1px #E5E5E5;
        display: block;
    }

    #chaos .semminar_contents img {
        width: 80px;
        height: auto;
        margin-right: 10px;
    }

    #chaos .semminar_contents .wp_info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 5px;
    }

    #chaos .btn_sub {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: normal;
        font-size: 14px;
        margin: 20px auto 40px;
        max-width: 100%;
    }

    #chaos .semminar_contents ul {
        display: block;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    #chaos .pc_hide {
        display: block;
    }
    .top_regist_float {
        position: fixed;
        /* right: 0; */
        /* left: 6%;
        bottom: 57px; */
        width: 320px;
        height: auto;
        z-index: 100;
        background-color: var(--light_color);
        border: 3px solid var(--primary_color);
        left: 50%;
        bottom: 0%;
        transform: translateX(-50%) translateY(-50%);
    }
}

/***********************************
** other / template
***********************************/
#template.list .sns_bookmark ul {
    justify-content: center;
}

#template.list .sns_bookmark ul li:last-child {
    display: none;
}

#template .tag_red {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--accent_color);
    background-color: var(--accent_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#template .tag_blue {
    width: 92px;
    padding: 1px 5px;
    border-radius: 15px;
    color: #ffffff;
    border: solid 1px var(--primary_color);
    background-color: var(--primary_color);
    display: inline-block;
    font-size: clamp(12px, 1vw, 1vw);
    text-align: center;
    font-weight: 500;
}

#template .blue {
    color: var(--primary_color);
}

#template .red {
    color: var(--accent_color);
}

#template .f_bold {
    font-weight: bold;
}

#template .underline {
    color: var(--dark_color);
    line-height: 1.4em;
    font-weight: 700;
    text-decoration: underline;
}

#template .text_r {
    text-align: right;
}

#template .emphasis_b {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary_color);
}

#template .center {
    text-align: center;
}

@media screen and (max-width: 768px) {
    #template .main_area {
        margin: 0 20px;
    }
}

#template .inset-img-full {
    text-align: right;
}

#template .inset-img-full a {
    color: var(--primary_color);
    font-weight: bold;
    display: inline-block;
    text-decoration: underline;
    margin-right: 30px;
    padding-right: 16px;
    position: relative;
}

#template .inset-img-full a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -5px;
    width: 8px;
    height: 10px;
    background: var(--primary_color);
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
}

@media screen and (max-width: 768px) {
    #template .inset-img-full a {
        margin-right: 10px;
    }
}

#template .sp-hide {
    display: block;
}

#template .pc-hide {
    display: none;
}
/*
#template .search_container input[type="text"] {
    border: 1px solid var(--light_color2);
    padding: 3px 10px;
    border-radius: 3px;
    height: 45px;
    width: 85%;
    overflow: hidden;
    font-size: 16px;
    margin: 5px 0 15px;
}
*/
#template input[type="text"], #template input[type="email"], #template input[type="password"] {
    font-size: 1.2rem;
    line-height: 1.2em;
    width: 100%;
    padding: 0.5rem;
    background: #ffffff;
    border: solid 1px #D4D8E0;
    border-radius: 3px;
    margin: 0 0 20px;
}

#template .detail_title4 {
    /* display: block; */
    /* width: 100%; */
    /* padding: 3px; */
    /* background: var(--basic_color); */
    /* color: #fff; */
    /* font-size: 20px; */
    /* font-weight: bold; */
    /* text-align: center; */
    /* margin: 15px auto; */
}
/*
#template .keyword_form {
    margin: 20px auto 0;
}
*/
#template .keyword_button {
    position: relative;
    background: var(--primary_color);
    cursor: pointer;
    border: none;
    border-radius: 3px;
    color: #fff;
    width: 45px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
}

#template .keyword {
    /* margin: 0 0 50px; */
    /* text-align: left; */
}

#template .top_contents_menu {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    /* margin-bottom: 15px; */
}

#template .top_contents_menu li {
    /* width: 50%; */
    /* text-align: center; */
    /* margin-right: 5px; */
    /* position: relative; */
}
/*
#template .top_contents_menu li a {
    background: var(--light_color);
    color: var(--basic_color_light);
    font-size: var(--font_size_r);
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    height: 55px;
    display: -ms-grid;
    display: grid;
    place-items: center;
}

#template .top_contents_menu li a::before {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--light_color);
    position: absolute;
    bottom: -7px;
}

#template .top_contents_menu li .active {
    background: var(--primary_color);
    color: #fff;
}
*/
#template .top_service_matter h4, #template .top_service_matter_menu li a, #template .service_matter_menu li a {
    color: var(--basic_color);
    display: inline-block;
    width: 100%;
}

#template .top_service_matter_menu1 li::after, #template .top_service_matter_menu2 li::after, #template .top_service_matter_menu3 li::after {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: -16px;
    top: -5px;
}

#template .summary table {
    width: 100%;
    border-spacing: 0;
    /*background: var(--light_color);*/
    margin: 0 0 20px;
    border-top: none;
}

#template .summary table th {
    border-bottom: solid 2px #ddd;
    padding: 15px 0;
    width: 30%;
    font-weight: bold;
    vertical-align: middle;
}

#template .summary table td {
    border-bottom: solid 2px #ddd;
    text-align: left;
    padding: 10px 20px;
    background: #fdfdfd;
    vertical-align: middle;
}

#template .btn_select {
    max-width: 350px;
    width: 100%;
    background: var(--primary_color);
    color: #fff;
    height: 45px;
    text-align: center;
    margin: 30px auto;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
}

#template .btn_select::before {
    content: "";
    width: 21px;
    height: 22px;
    position: absolute;
    right: 20px;
    background-image: url(../img/template/select_icon.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 15px 12px;
}

#template .btn_sub {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 20px auto;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
    max-width: 350px;
    width: 100%;
    background: var(--primary_color);
}

#template .btn_sub::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
}
/*
#template .news_contents ul {
    display: flex;
    margin: 0 -8px;
}

#template .news_contents ul li {
    width: 20%;
    padding: 0 8px;
    position: relative;
}

#template .news_contents li a {
    display: block;
    padding: 0;
    align-items: center;
    border-bottom: none;
}
#template .news_contents li a .thumb {
    width: auto;
    min-width: auto;
}

#template .news_contents li a .dlnum{
    color: #777777;
    font-size: var(--font_size_xs);
}
*/
#template .btn_small {
    margin: 2% auto;
    background: var(--primary_color);
    font-size: 1.1em;
    width: 20%;
    color: #fff;
    text-align: center;
    padding: 1% 2%;
    position: absolute;
    right: 0px;
    top: 5%;
}

#template .component-column {
    padding: 20px;
}

#template .component-column .col-1-4 {
    width: 25%;
}

#template .component-column [class*=col-] {
    float: left;
    padding: 0 10px 10px;
}

#template .template .templete-category [class*=col-] .link-arrow {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 25.9px;
    line-height: 2.59rem;
}

#template .link-arrow {
    position: relative;
}

#template .link-arrow::before {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: -18px;
    top: -7px;
}
/*
#template .news_contents {
    margin-bottom: 0;
}
*/
#template .summary {
    margin: 30px auto;
    /* width: 90%; */
}

#template .summary h3 {
    border: none;
    margin: 0;
}

#template .summary h3:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-top: solid 3px var(--primary_color);
    border-right: solid 3px var(--primary_color);
    transform: rotate(45deg);
    margin-bottom: 2px;
}

#template .summary h3 a {
    color: var(--primary_color);
    font-size: var(--font_size_m);
    font-weight: 700;
    line-height: 1.2em;
    border: none;
    margin: 0;
}

#template .summary p span {
    font-size: 1.2em;
}

#template .summary .btn_secondary {
    display: none;
}

#template .summary .btn_primary {
    margin: 0;
}
/*
#template .news_contents p {
    line-height: 1.4em;
    margin: 8px 0;
}
*/
.news_contents .rank {
    width: 30px;
    height: 30px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    background: none;
    vertical-align: middle;
    position: absolute;
    top: -4px;
    left: -8px;

}

.news_contents .btn_secondary {
    /*margin: 8px auto 0 auto;*/
}

#template .component-ratePost {
    padding: 8px 20px;
}

#template .component-ratePost .mod-totalRateStar {
    font-size: 18px;
    display: inline-block;
    position: relative;
    width: 96.075px;
    height: 18px;
    line-height: 18px;
    float: left;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
}

#template .component-ratePost .mod-totalRateStar .totalRateStar__base, #template .component-ratePost .mod-totalRateStar .totalRateStar__result {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

#template .component-ratePost .mod-totalRateStar .totalRateStar__result {
    overflow: hidden;
}

#template .template li {
    display: inline-block;
    width: 74%;
    vertical-align: middle;
}

#template .template .thumb {
    width: 20%;
    margin: 0 5% 0 0;
}

#template .movie_login {
    background: #fff;
    text-align: center;
    padding: 30px;
    margin: 0 0 0;
}

#template .category {
    /* padding: 2%; */
    margin: 40px 0 20px 0;
}

#template .align-right {
    text-align: right;
}

#template .w540 {
    width: 540px;
    max-width: 100%;
    margin: 0 auto;
}

#template .btn_primary2 {
    max-width: 100%;
    background: var(--accent_color);
}

#template .btn_primary2 {
    color: #fff;
    font-weight: bold;
    height: 45px;
    text-align: center;
    margin: 30px auto 20px;
    display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
}

#template .btn_primary2::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
}

#template .keyword .tag {
    /* width: auto; */
    /* font-size: 15px; */
    /* padding: 1px 15px; */
    /* margin: 0 5px 10px; */
}

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

#template .keyword2 {
    text-align: left;
    margin: 8px 0 16px 0;
}

#template .keyword2 .tag {
    width: auto;
    font-size: var(--font_size_s);
    line-height: 20px;
    padding: 1px 15px;
    margin: 0 4px 0 0;
}

#template .keyword2 .title {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    margin-right: 2%;
}

/**5.26**/
#template .summary {
    font-size: var(--font_size_s);
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--box_shadow);
    position: relative;
}
#template .summary > p {
    margin: 16px 0;
}
#template .summary dl,
#template .summary dl dt,
#template .summary dl dd{
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
}

#template .summary dl {
    margin-bottom: 8px;
}

#template .summary dl dt{
    line-height: 30px;
    background:var(--light_color2);
    padding: 0 10px;
    margin-right: 5px;
    margin: 0 5px 0 0;
}
#template .summary dl dd{
    padding:5px;
    margin-right:20px;
}
#template .btn {
    display: flex;
    justify-content: center;
}

#template .summary p.link_rule{
    position: absolute;
    bottom: 30px;
    right: 30px;
    margin: 0;
}

#template .link_rule a{
    font-size: var(--font_size_s);
    text-decoration: underline;
}

#template .tag_bookmark {
    display: flex;
    justify-content: space-between;
}
#template ul.template_cat{
    display: flex;
    margin-top: 40px;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
}
#template ul.template_cat li{
    padding: 0 10px 20px 20px;
    width: calc(100% / 3);
    box-sizing: border-box;
    position: relative;
}

#template ul.template_cat li::after {
    content: "";
    width: 9px;
    height: 22px;
    background: var(--basic_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    left: 0;
    top: -6px;
}
/**ここまで　5.26**/

#template .counts{
    font-size: var(--font_size_xs);
    margin: 16px 0;
}

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

    #template .keyword2 .tag {
        padding: 1px 10px;
        margin: 5px;
        font-size: 14px;
    }

    #template .summary .btn_secondary {
        display: none!important;
    }

}

@media screen and (max-width: 768px) {
    #template .pc-hide {
        display: block;
    }

    #template .sp-hide {
        display: none;
    }
/*
    #template .keyword_form {
        width: 100%;
        margin: 0 0 15px;
    }
*/
    #template .btn_primary {
        display: -ms-grid !important;
        /* display: grid !important; */
        /* font-weight: normal; */
        /* font-size: 14px; */
        /* margin: 30px auto 40px; */
        /* max-width: 100%; */
    }

    #template .summary .btn_primary {
        margin: 16px 0;
    }

    #template .btn_select {
        display: -ms-grid !important;
        display: grid !important;
        /* font-weight: normal; */
        /* font-size: 14px; */
        margin: 30px auto 40px;
        /* max-width: 90%; */
    }
/*
    #template .search_container input[type="text"] {
        border: 1px solid var(--light_color2);
        padding: 3px 10px;
        border-radius: 3px;
        height: 45px;
        width: 78%;
        overflow: hidden;
        font-size: 16px;
        margin: 5px 0 15px;
    }
    */
/*
    #template .news_contents {
        width: 100%;
        margin: 0;
    }
*/
    #template .detail_title4 {
        /* font-size: 18px; */
    }

    #template .summary {
        padding: 20px;
    }

    #template .summary > p {
        margin: 8px 0;
    }

    #template .keyword2 {
        margin: 0 0 8px 0;
    }

    #template .template li {
        display: block;
        width: 100%;
    }

    #template .template .thumb {
        width: 100%;
        margin: 0 0 0 0;
    }

    #template .btn_sub {
        display: -ms-grid !important;
        display: grid !important;
        font-weight: normal;
        font-size: 14px;
        margin: 20px auto 40px;
        max-width: 100%;
    }

    #template .btn_small {
        width: 40%;
        position: absolute;
        right: 0px;
        top: 20%;
        padding: 2% 2%;
    }

    #template .keyword2 .title {
        display: block;
    }

    #template .top_service_matter_menu1 li::after, #template .top_service_matter_menu2 li::after, #template .top_service_matter_menu3 li::after {
        right: 0;
        top: -5px;
    }

    #template .summary p.link_rule {
        position: static;
    }

    /**5.26**/
    #template .summary dl dt {
        width: 10rem;
    }
    #template ul.template_cat li {
        width: 50%;
    }
    /**ここまで5.26**/

    #template .category {
        margin: 20px 0 10px 0;
    }
/*
    #template .news_contents p.dlnum {
        margin: 8px 0 0 0;
    }
*/
}

@media screen and (max-width: 768px) {
    /*
    #template .news_contents ul {
        display: block;
        margin: 0;
    }

    #template .news_contents ul li {
        width: auto;
        padding: 16px 0;
        border-bottom: solid 1px #efefef;
    }

    #template .news_contents ul li a {
        display: flex;
        align-items: flex-start;
        padding: 0;
    }

    #template .news_contents ul li .rank {
        top: 12px;
        left: -8px;
    }

    #template .news_contents li a .thumb img {
        width: 100%;
        position: static;
    }

    #template .news_contents p {
        margin: 0;
    }
    */
}

/***********************************
** other / service
***********************************/
#service h2 {
    border-bottom: none;
    display: block;
}

#service .service_document {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px;
}

#service .document_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    border-radius: 10px;
    padding: 20px;
    margin-top: 25px;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
}

#service .document_img {
    padding-top: 20px;
    min-width: 114px;
    width: 114px;
    margin-right: 20px;
}

#service .document_area_checkbox {
    padding-top: 30px;
    padding-right: 10px;
}

#service .document_img img {
    width: 100%;
}

#service .document_area h2 {
    margin-top: 20px;
    margin-bottom: 30px;
    border-bottom: none;
    font-size: 1.2rem;
}

#service .close_button {
    position: absolute;
    top: -15px;
    right: -15px;
}

#service .service_document.bookmark .close_button {
    position: absolute;
    top: 0px;
    right: 0;
}

#service .attention {
    margin-top: 50px;
}

#service .member_link {
    margin-top: 67px;
}

#service .btn_primary.quiz {
    background: var(--primary_color);
}

#service .btn_primary.login.point {
    padding: 16px 0 25px;
}

#service .btn_primary.point::before, #service .btn_secondary.point::before {
    top: 20px;
}

#service dt {
    margin-bottom: 10px;
    position: relative;
}

#service dt i {
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.0em;
    display: inline-block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 3px;
    margin-left: 8px;
    background: #F41616;
}

#service .primary_color {
    color: var(--primary_color);
    text-decoration: underline;
}

#service .download_button {
    margin-bottom: 70px;
}

#service .dark_color {
    color: white;
    padding: 15px 0;
    margin: 53px 0 44px;
    background: var(--dark_color);
}

#service .input_area {
    padding: 105px 45px 20px;
    margin-bottom: 40px;
    background: var(--light_color);
}

#service .input_area dl dd {
    margin: 5px 0 25px 0;
}

#service .input_title {
    font-size: clamp(12px, 1.1rem, 25px);
}

#service .btn_primary.download::before, #service .btn_secondary::before {
    right: 7px;
}

#service h2.member_link.text_center {
    line-height: 1.5;
}

#service .side_merit.regist {
    background: none;
}

#service .side_merit li {
    padding-left: 60px;
}

#service .side_merit.regist li::before {
    content: "Q";
    display: inline-block;
    font-size: 30px;
    font-family: Roboto;
    position: absolute;
    top: -13px;
    left: -30px;
}

#service .cart_img {
    width: 60%;
    margin: 40px auto 0;
}

#service .cart_img img {
    width: 100%;
}

#service .past_quizzes {
    color: var(--primary_color);
    text-decoration: underline;
}

#service .past_quizzes_area {
    margin-bottom: 160px;
}

#service h2.quiz {
    line-height: 1.5;
    margin-left: 10px;
}

#service p.quiz {
    padding-top: 14px;
    padding-left: 0px;
    font-size: 1.1rem;
}
#service .top_service_matter > article {
    display: none;
}

#service .top_service_matter > ul.active + article {
    display: block;
}

#service .float_button {
    position: -webkit-sticky;
    position: sticky;
    left: 1200px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    z-index: 100;
}

#service .float_button span {
    position: absolute;
    top: -6px;
    right: -9px;
    background: var(--accent_color);
    padding: 2px 10px;
    border-radius: 25px;
    border: 2px solid #fff;
    color: #fff;
}

#service .float_button img {
    width: 100%;
}

.banner_area {
    margin: 20px 0;
}

.banner_area > a {
    display: block;
    max-width: 728px;
    margin: 8px auto;
}

.banner_area > a img {
    display: block;
    width: 100%;
}

.banner_area ul {
    display: flex;
    justify-content: center;
    margin: 0 -8px;
}

.banner_area ul li {
    padding: 8px;
    max-width: 336px;
}

.banner_area ul li a {
    display: block;
}

.banner_area ul li a img {
    display: block;
    width: 100%;
}

.banner_area .sp {
    display: none;
}

@media screen and (max-width: 1024px) {
    #service .float_button {
        right: 20px;
        bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    #service .attention {
        padding: 0 30px;
    }

    #service .btn_primary.download::before, #service .btn_secondary::before {
        right: 20px;
    }

    #service .side_merit li {
        padding-left: 35px;
    }

    #service .past_quizzes_area {
        margin-top: 40px;
        margin-bottom: 60px;
    }

    #service .quiz_detail .quiz_title {
        padding: 20px 0;
    }

    #service .quiz_detail .quiz_title::before {
        top: 8px;
    }

    #service .service_document {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        margin: 0 10px;
    }

    #service .document_img {
        min-width: 114px;
    }

    #service .close_button {
        right: -10px;
    }

    #service .float_button {
        right: 20px;
        bottom: 65px;
        margin-right: 20px;
    }

    .banner_area ul {
        flex-wrap: wrap;
    }

    .banner_area ul li {
        width: 50%;
        box-sizing: border-box;
    }

    .banner_area .pc {
        display: none;
    }

    .banner_area .sp {
        display: block;
    }

}
@media screen and (max-width: 480px) {
    .banner_area ul li {
        width: 100%;
        padding: 4px;
    }
    .banner_area ul li a {
        max-width: 320px;
        margin: 0 auto;
    }
}


#service .detail_title4 {
    margin-top: 16px;
}
#service .pickup {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
#service .pickup article {
    text-align: center;
    width: 50%;
    padding: 0 8px 16px 8px;
    box-sizing: border-box;
}
#service .pickup article > div {
    padding: 16px;
    background: var(--light_color2);
}
#service .pickup article:nth-child(2n-1) {
    margin-left: 0;
}
#service .pickup article:nth-child(2n) {
    margin-right: 0;
}
#service .pickup article h3 {
    width: auto;
    margin-bottom: 0;
}
#service .pickup article .inner {
    display: flex;
    justify-content: center;
    margin: 16px -4px;
}
#service .pickup article .thumb {
    display: none;
    background: #ffffff;
    padding: 8px;
    margin: 0 4px;
    box-sizing: border-box;
    border-radius: 20%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#service .pickup article .thumb img {
    border: none;
    aspect-ratio: 1 / 1;
}
#service .pickup article .btn_secondary {
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #service .pickup {
        display: block;
    }
    #service .pickup article {
        width: auto;
        margin: 0;
    }
}
/*
#service .pickup ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px;
}

#service .pickup ul li {
    width: 33.33%;
    padding: 16px;
    box-sizing: border-box;
}

#service .pickup ul li a {
    margin: 0 auto;
}

#service .pickup ul li .thumb {
    margin: 16px auto;
    width: 50%;
}
#service .pickup ul li .thumb img {
    border: none;
}
@media screen and (max-width: 768px) {
    #service .pickup {
        margin-top: 30px;
    }

    #service .pickup ul li {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    #service .pickup ul {
        margin: 0;
    }
    #service .pickup ul li {
        width: 100%;
        padding: 16px;
    }
    #service .pickup ul li a {
        margin: 0 auto;
    }
}
*/
/***********************************
** point
***********************************/
/*
.top_main_container.one_column.point_area {
    width: 100%!important;
    max-width: none!important;
}

.top_main_container.one_column.point_area .top_main_area {
    width: 100%;
    max-width: none;
}

.point .point_fv {
    background: #E5ECF4;
}

.point .point_fv .inner {
    max-width: 1100px;
    padding: 1px 20px;
    margin: 0 auto;
}

.point .point_fv h1 {
    font-size: var(--font_size_l);
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}

.point .point_fv p {
    line-height: 2.0em;
    margin: 40px 0;
}

.point .top_main_area {
    width: auto;
    max-width: 1100px;
    padding: 1px 20px;
    margin: 0 auto;
}

.point main {
    max-width: 1000px;
    padding: 1px 20px;
    margin: 60px auto;
}
.point {
    text-align: center;
}

.point h2 {
    font-size: var(--font_size_l);
    text-align: center;
    display: block;
    padding-bottom: 20px;
    border: none;
    margin: 60px 0 40px 0;
}

.point h2:first-of-type {
    margin-top: 0;
}

.point h2:after {
    content: "";
    width: 100px;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50px;
}

.point h2 + p {
    text-align: center;
}

.point h2 i {
    color: var(--primary_color);
    font-size: var(--font_size_2xl);
    font-style: italic;
    display: inline-block;
    margin-right: 5px;
}

.point .pc {
    display: block!important;
}

.point .sp {
    display: none!important;
}



.point_mark {
    width: 50px;
}

.login_area {
    max-width: 960px;
}

.point_nav {
    display: flex;
    margin: 40px 0;
    justify-content: space-between;
}

.point_nav a {
    color: #151517;
    font-size: var(--font_size_m);
    font-weight: 600;
    text-align: center;
    display: block;
    width: 46.9%;
    height: auto;
    padding: 30px;
    max-width: none;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--box_shadow);
    box-sizing: border-box;
}

.point_nav a:hover {
    box-shadow: none;
    opacity: 1;
    transform: scale(0.95);
}

.point_nav a b:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    background: url(../img/point/allow.svg) no-repeat center center / 30% auto,
        var(--primary_color);
    width: 24px;
    height: 24px;
    margin-left: 5px;
    border-radius: 12px;
    position: relative;
    bottom: 2px;
}

.point_nav a span {
    color: var(--primary_color);
    font-weight: 500;
    text-align: center;
    display: block;

}

.point_nav a img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.what {
    text-align: center;
    margin-bottom: 60px;
}

.what a {
    color: var(--primary_color);
}

.what a:before {
    color: var(--primary_color);
    content: "？";
    font-size: var(--font_size_s);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: none;
    border: solid 1px var(--primary_color);
    border-radius: 20px;
}

.history {
    background: #F3F6F9;
}

.history .inner {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.history h4 {
    font-size: var(--font_size_l);
    font-weight: bold;
    line-height: 40px;
    float: left;
    margin-bottom: 20px;
}


ul.point_detail {
    clear: both;
}

ul.point_detail li {
    line-height: 40px;
    padding: 30px;
}

ul.point_detail li:after {
    content: "";
    display: block;
    clear: both;
}

ul.point_detail li:nth-child(2n-1) {
    background: #ffffff;
}

ul.point_detail li span {
    font-size: var(--font_size_s);
    display: inline-block;
    border-right: solid 1px #151517;
    padding-right: 20px;
    margin-right: 20px;
}

ul.point_detail li b {
    font-size: var(--font_size_l);
    font-weight: bold;
    float: right;
}

ul.point_detail li b:after {
    content: "P";
    display: inline-block;
    margin-left: 5px;
}

ul.point_detail li a {
    color: var(--primary_color);
    text-decoration: underline;
    display: inline-block;
    margin-left: 5px;
}

ul.point_detail li.plus b {
    color: #FE0000;
}

ul.point_detail li.plus b:before {
    content: "獲得";
    color: #FE0000;
    font-size: var(--font_size_s);
    line-height: 24px;
    text-align: center;
    float: right;
    margin-top: 6px;
    margin: 6px 0 0 20px;
    display: block;
    width: 60px;
    border: solid 1px #FE0000;
}

ul.point_detail li.minus b:before {
    content: "利用";
    font-size: var(--font_size_s);
    line-height: 24px;
    text-align: center;
    float: right;
    margin-top: 6px;
    margin: 6px 0 0 20px;
    display: block;
    width: 60px;
    border: solid 1px #151517;
}


.calendar_container {
    line-height: 40px;
    text-align: right;
    float: right;
    margin: 0 0 10px 0;
}

.calendar_container b {
    display: inline-block;
    margin: 0 5px;
}

.calendar_container input[type="text"] {
    font-size: var(--font_size_r);
    font-family: roboto;
    line-height: 20px;
    width: 160px;
    height: auto;
    padding: 10px;
    margin-bottom: 5px;
    background: url(../img/point/icon-calendar.svg) no-repeat right center / 40px auto , #ffffff;
    border: solid 1px var(--primary_color);
}

.calendar_container input[type="submit"] {
    color: #ffffff;
    font-size: var(--font_size_r);
    line-height: 20px;
    background: var(--primary_color);
    border: none;
    width: 120px;
    height: auto;
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin: 0 0 5px 10px;
}

.calendar_container::after {
    content: none;
}

@media screen and (max-width: 768px) {
    .mypage {
        margin-bottom: 20px;
    }

    .point .breadcrumb {
        margin: 15px 0 0;
    }

    .point .point_fv h1 {
        font-size: var(--font_size_m);
        margin: 20px auto;
    }

    .point .point_fv p {
        margin: 20px auto;
    }

    .total_point2 {
        line-height: 30px;
        margin: 20px auto;
    }

    .total_point2 img {
        width: 30px;
    }

    .total_point2 b {
        font-size: var(--font_size_l);
    }

    .point .pc {
        display: none!important;
    }

    .point .sp {
        display: block!important;
    }


    .point main {
        margin: 30px auto;
    }

    .point h2 {
        font-size: var(--font_size_m);
        margin: 30px 0 20px 0;
    }

    .point h2 i {
        font-size: var(--font_size_l);
    }

    .point_nav {
        margin: 20px 0;
    }

    .point_nav a {
        font-size: var(--font_size_s);
        padding: 15px;
    }

    .point_nav a:before {
        width: 16px;
        height: 16px;
    }

    .point_nav a:after {
        font-size: var(--font_size_s);
    }


    .what {
        margin-bottom: 20px;
    }

    ul.point_detail li {
        line-height: 1.5em;
        padding: 10px;
    }


    .history h4 {
        font-size: var(--font_size_m);
        line-height: 1.2em;
        margin-bottom: 10px;
    }

    .calendar_container input[type="text"] {
        width: 120px;
        padding: 5px;
        background-size: 30px auto;
    }

    .calendar_container input[type="submit"] {
        padding: 5px;
    }

    ul.point_detail li span {
        display: block;
        border: none;
    }

    ul.point_detail li b {
        text-align: right;
        display: block;
        margin-top: 10px;
        float: none;
        clear: both;
    }

    ul.point_detail li.plus b:before,
    ul.point_detail li.minus b:before {
        margin: 0 0 0 10px;
        position: relative;
        bottom: 3px;
    }

}

*/






/*-- --------- --------- --------- --*/
/*-- ポイントを貯める --*/
/*-- --------- --------- --------- --*/
/*
.point.save .point_fv h1 img {
    width: auto;
    height: 100px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}
*/




/*-- --------- --------- --------- --*/
/*-- ポイントを使う --*/
/*-- --------- --------- --------- --*/
/*
.point.use .point_fv h1 img {
    width: 100px;
    height: auto;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}

.point.use .left {
    color: #666666;
    font-size: var(--font_size_s);
    text-align: left;
    margin-top: 20px;
}

.point.use .col3 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.point.use .col3 li {
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.point.use .col3 li a {
    display: block;
    border-radius: 50px;
    box-shadow: var(--box_shadow);
    padding: 20px 20px 40px 20px;
    position: relative;
}

.point.use .col3 li a:hover {
    box-shadow: none;
    opacity: 1;
    transform: scale(0.95);
}

.point.use .col3 li a b {
    font-weight: bold;
}

.point.use .col3 li a b:after {
    content: "";
    vertical-align: middle;
    display: inline-block;
    background: url(../img/point/allow.svg) no-repeat center center / 30% auto,
        var(--primary_color);
    width: 18px;
    height: 18px;
    margin-left: 5px;
    border-radius: 12px;
    position: relative;
    bottom: 2px;
}

.point.use .col3 li a div.thumb {
    margin: 20px 0;
    display: flex;
    height: 194px;
    justify-content: center;
    align-items: center;
    background: #E5ECF4;
}

.point.use .col3 li a div.thumb img {
    width: auto;
    height: 90%;
}

.point.use .col3 li a p {
    text-align: left;
}

.point.use .col3 li span.bubble {
    color: #ffffff;

    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;

    display: block;
    background: var(--primary_color);
    border: none;
    width: auto;
    margin: -20px 30px 0 30px;
    padding: 10px;
    position: relative;
}

.point.use .col3 li span.bubble:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 18px 10px;
    border-color: transparent transparent var(--primary_color) transparent;
    position: absolute;
    top: -16px;
    left: 50%;
    margin-left: -10px;
}

.point.use .col3 li a span {
    color: var(--accent_color);
    font-size: var(--font_size_s);
    line-height: 1.5em;
    display: block;
    padding: 4px;
    margin-top: 8px;
    border: solid 1px var(--accent_color);
}

@media screen and (max-width: 1024px) {
    .point.use .col3 li {
        width: 50%;
    }

}

@media screen and (max-width: 768px) {
    .point.use .point_fv h1 img {
        width: 60px;
    }

    .point.use .col3 li {
        width: 100%;
    }

    .point.use .col3 li a div.thumb {
        margin: 10px 0;
    }

}









.point p a {
    color: var(--primary_color);
}




.point.use main {
    text-align: center;
}

.point.use main h4 {
    font-size: var(--font_size_m);
    font-weight: bold;
    margin: 40px 0 20px 0;
}


.point.use .service {
    display: block;
    border-top: solid 2px #E5ECF4;
    margin: 40px auto;
    padding: 20px 0;
    max-width: 400px;
}

.point.use .service .thumb {
    width: 120px;
    float: left;
    border: solid 1px #E5ECF4;
    margin-bottom: 20px;
    margin: 0 20px -25px 0;
}

.point.use .service .txt {
    text-align: left;
}

.point.use .service .txt b {
    font-size: var(--font_size_m);
    font-weight: bold;
    display: block;
}

.point.use .service .num {
    text-align: right;
    vertical-align: baseline;
    clear: both;
}

.point.use .service .num select {
    vertical-align: bottom;
    margin-right: 8px;
}


.point.use .service .num select {
    width: 100px;
}

.point.use .service p {
    clear: both;
    text-align: right;
    line-height: 2.0em;
    border-top: solid 2px #E5ECF4;
    padding-top: 20px;
    margin-top: 20px;
}





.totalpoint_area {
    margin: 20px auto;
    text-align: right;
}



button.btn_secondary {
    appearance: none;
    -webkit-appearance: none;
    border: none;
}

.point .step {
    display: flex;
    overflow: hidden;
    background: #E5ECF4;
    justify-content: space-between;
}

.point .step li {
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    width: 100%;
    padding: 20px 20px 20px 60px;
    position: relative;
    background: #E5ECF4;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.point .step li:first-child {
    padding-left: 20px;
}

.point .step li.selected {
    color: #ffffff;
    background: #151517;
}

.point .step li b {
    position: relative;
    z-index: 30;
}

.point .step li:before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    border-top: solid 2px #F9F9F9;
    border-right: solid 2px #F9F9F9;
    position: absolute;
    top: 50%;
    left: -30px;
    z-index: 20;
    margin-top: -25px;
}

.point .step li:first-child:before {
    display: none;
}

.point .step li.selected + li:before {
    background: #151517;
}

@media screen and (max-width: 768px) {
    .point .step li {
        padding: 10px 10px 10px 40px;
    }

    .point .step li b {
        font-size: var(--font_size_s);
    }


}

*/


/***********************************
** other / about-point
***********************************/
#about_point {
    text-align: center;
}

#about_point p.center {
    text-align: center;
}

#about_point p b {
    color: var(--primary_color);
    font-weight: 600;
    font-size: var(--font_size_m);
    display: block;
    margin: 20px 0;
}

#about_point .news_point .equation p {
    width: 50%;
    margin: 0 auto;
}

#about_point .news_point .equation img {
    width: 20%;
    padding: 2% 0 1%;
    display: block;
    margin: 0 auto;
}

#about_point .news_point span {
    border: none;
}

#about_point .news_point img[src*=point_img] {
    margin-top: 20px;
    width:100%;
}

#about_point .equation p {
    color: var(--primary_color);
    background: #fff;
    padding: 4% 6%;
    border: none;
}

#about_point p {
    text-align: left;
}

#about_point .col2 {
    display: flex;
    justify-content: space-between
}

#about_point .col2 > div {
    text-align: left;
    width: 48%;
}

#about_point .caution {
    font-size: var(--font_size_s);
}

@media screen and (max-width: 480px) {
    #about_point .col2 {
        display: block;
    }

    #about_point .col2 > div {
        width: 100%;
    }

}


/*
#about_point .detail_title {
    text-align: center;
}

#about_point .detail_title p {
    text-align: center;
}

#about_point .emphasis_b {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--primary_color);
}

#about_point .news_point .equation p {
	width: 50%;
    margin: 0 auto;
}

#about_point .news_point .equation span {
	border-bottom: none;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary_color);
    margin-bottom: 5px;
    display: block;
}

#about_point .news_point .equation img {
	width: 5%;
    height: 5%;
    padding: 1%;
    transform: rotate( 90deg );
}

*/


/***********************************
** other / mypage
***********************************/
#mypage .bg_gray {
    background: var(--light_color);
    border-radius: 0;
    margin: 0 0 90px -40px;
    overflow: hidden;
    padding: 50px 30px 30px 50px;
}

#mypage .radio_area label {
    width: 40%;
}

#mypage .top_service_matter.active {
    display: block;
    width: 100%;
}

#mypage .top_service_matter_menu {
    display: block;
}

#mypage .top_service_matter {
    display: none;
}

#mypage .top_service_matter.active {
    display: block;
}

#mypage .top_service_matter h4 {
    color: #ffffff;
    border-bottom: solid 1px var(--basic_color);
}

#mypage .top_service_matter h4, #mypage .top_service_matter_menu li a, #mypage .service_matter_menu li a {
    display: -ms-grid;
    display: grid;
}

#mypage h4.font-color {
    color: var(--basic_color);
}

#mypage p.detail_text {
    max-width: 660px;
    margin: 0 auto;
}

#mypage .accordion_button {
    max-width: 660px;
    margin: 80px auto 30px;
    padding: 0.5rem 0;
    text-align: center;
    background: var(--primary_color);
    color: #ffffff;
    background-image: url(../img/regist/select_icon.png);
    background-repeat: no-repeat;
    background-size: 12px 10px;
    background-position: right 10px center;
}

#mypage .accordion_button.top {
    margin-top: 0;
}

#mypage .detail_title4 {
    max-width: 660px;
    padding: 0.3rem 0;
    width: 100%;
}

#mypage .btn_primary::before,
#mypage .btn_secondary::before {
    content: "";
    width: 9px;
    height: 22px;
    background: #fff;
    -webkit-clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    right: 20px;
    top: 5px;
}

#mypage .search_checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: var(--light_color);
    margin-top: 20px;
    padding-bottom: 20px;
    max-width: 660px;
    margin: 0 auto;
}

#mypage .switch_area,
#regist .switch_area {
    max-width: 660px;
    margin: 0 auto;
    padding: 10px 0;
}

#regist .switch_area label {
    font-weight: 700;
}

#regist .switch_area p {
    font-size: 12px;
    margin-top: 4px;
}

#regist .switch_area p i {
    display: inline-block;
}

#regist .switch_area .switch {
    margin-left: 8px;
}

#mypage .switch_flex,
#regist .switch_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#mypage .switch__label,
#regist .switch__label {
    width: 65px;
    position: relative;
    display: inline-block;
}

#mypage .switch__content,
#regist .switch__content {
    display: block;
    cursor: pointer;
    position: relative;
    border-radius: 30px;
    height: 31px;
    overflow: hidden;
    border: 1px solid var(--basic_color_light);
}

#mypage .switch__content:before,
#regist .switch__content:before {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    top: 0;
    left: 0;
    border: 1.5px solid #E5E5EA;
    border-radius: 30px;
    background-color: #fff;
}

#mypage .switch__content:after,
#regist .switch__content:after {
    content: "";
    display: block;
    position: absolute;
    background-color: transparent;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    border-radius: 30px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

#mypage .switch__input,
#regist .switch__input {
    display: none;
}

#mypage .switch__circle,
#regist .switch__circle {
    display: block;
    top: 2px;
    left: 2px;
    position: absolute;
    -webkit-box-shadow: 0 2px 6px #999;
    box-shadow: 0 2px 6px #999;
    width: 27px;
    height: 27px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
}

#mypage .switch__input:checked ~ .switch__circle,
#regist .switch__input:checked ~ .switch__circle {
    left: 35px;
}

#mypage .switch__input:checked ~ .switch__content:after,
#regist .switch__input:checked ~ .switch__content:after {
    background: var(--primary_color);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#mypage .search_checkbox p,
#regist .search_checkbox p {
    margin: 15px 35px 15px 0;
    display: inline-block;
}

#mypage .mypage_sp {
    display: none;
}

@media screen and (max-width: 1024px) {
    #mypage .top_service_matter.active {
        margin-top: 30px;
        margin-bottom: 60px;
    }

    #mypage .top_service_contents {
        display: block;
    }

    #mypage .mypage_sp {
        display: block;
    }

    #mypage .top_service_menu li {
        width: 102%;
    }

    #mypage .top_service_menu li a::before {
        content: "\e5cc";
        -webkit-clip-path: none;
        clip-path: none;
        background: none;
        font-size: 1.5rem;
        font-family: 'Material Icons';
        right: 20px;
        top: 3px;
        position: absolute;
    }
}

@media screen and (max-width: 768px) {
    #mypage .bg_gray {
        background: var(--light_color);
        border-radius: 0;
        margin: 0 auto;
        overflow: hidden;
        padding: 20px 0px;
    }

    #mypage .search_checkbox > p {
        padding-left: 0;
    }

    #mypage .top_service_matter_menu ul {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #mypage .radio_area label {
        width: 35%;
    }

    #mypage .top_service_matter_menu ul {
        display: block;
    }

    #mypage .top_service_menu li {
        width: 95%;
    }
}

/***********************************
** other / search
***********************************/
.searching .keyword_form {
    margin: 0;
}
.searching form.search_container {
    display: flex;
    align-items: center;
    margin: 0 0 24px 0;
}

.searching .search_container input[type="text"] {
    width: 75%;
    margin: 0;
    flex: 1;
}
.searching .news_contents ul {
    margin: 8px 0;
    border-bottom: solid 1px var(--light_color2);
}
.searching .news_contents ul li {
    border-top: solid 1px var(--light_color2);
    padding: 16px 0;
}
.searching .news_title {
    padding: 0;
}
.searching .news_title p {
    flex: 1;
    margin: 0 8px 0 0;
}
.searching .news_title p a {
    margin: 0;
    padding: 0;
}
.searching .news_title .tag {
    font-size: var(--font_size_xs);
    width: 134px;
    margin: 0;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .searching .search_container input[type="text"] {
        height: 45px;
    }
    .searching .news_title p {
        margin: 0 0 8px 0;
    }

}


.searching .select_area.point {
    padding: 0px 10px;
    border-radius: 3px;
    overflow: hidden;
    font-size: 16px;
}

.searching .cp_ipselect.cp_sl01 {
    border: 1px solid var(--light_color2);
    padding: 6px 0;
    width: 100%;
}

.searching .cp_ipselect.cp_sl01::before {
    top: 1em;
}

.searching .news_title {
    justify-content: flex-start;
    margin: 0;
}

.searching .news_title p {
    display: block;
    width: 100%;
}

.searching .tag {
    font-size: 15px;
    min-width: 7rem;
}

.searching .news_contents li a {
    border-bottom: none;
}

/******************** sp ********************/
@media screen and (max-width: 768px) {
    .searching .search_container input[type="text"] {
        width: 58%;
    }

    .searching .select_area.point {
        width: 30%;
    }
}

/***********************************
** about
*********************************
#about .equation p {
    color: var(--primary_color);
    background: #fff;
    padding: 2% 4% 1%;
    border: solid 1px var(--primary_color);
}

#about .about_title_mb h1, #about .about_title_mb p {
    margin-bottom: 30px;
}

#about .btn_primary {
    margin: 15px auto;
}

@media screen and (max-width: 768px) {
    #about .btn_primary {
        max-width: 100%;
        background: var(--accent_color);
    }

    #about .news_point .equation p {
        width: 90%;
        margin: 0 auto;
    }

    #about .about img {
        width: 90%;
    }

    #about .news_point .equation p {
        width: 100%;
    }

    #about .news_point .equation img {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    #about .about_equation_flex, #about .about_content_flex {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #about .about_content_flex > div {
        width: 100%;
        background: none;
    }

    #about .about_content_area {
        margin: 0;
    }

    #about .about_content_flex > div:not(:last-child) {
        border-bottom: 2px solid var(--basic_color_light);
    }

    #about .top_bottom_outline .advertise.about_advertise {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #about .detail_title .text_center {
        text-align: left;
    }

    #about .about_equation_flex p.text_center {
        text-align: center;
    }

    #about .btn_secondary.no_link {
        height: auto;
        padding: 20px 0;
    }
}
**/
/***********************************
**  マネジーとは
***********************************/
.news_point .equation p {
    width: 50%;
    margin: 0 auto;
}

.news_point .equation span {
    border-bottom: none;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary_color);
    margin-bottom: 5px;
    display: block;
}

.news_point .equation img {
    width: 5%;
    height: 5%;
    padding: 1%;
    transform: rotate( 90deg );
}

.about_title_mb .about img {
    width: 50%;
}

.about_content_link {
    text-align: right;
    margin-top: 20px;
}

.about_content_link > a {
    color: var(--primary_color);
    text-decoration: underline;
}

.about_content_area > h1::before {
    vertical-align: top;
    padding-right: 20px;
}

.about_title_read::before {
    content: url(/img/about/about_read.png);
}

.about_title_search::before {
    content: url(/img/about/about_search.png);
}

.about_title_learn::before {
    content: url(/img/about/about_learn.png);
}

.about_content_flex {
    display: flex;
    gap: 20px;
}

.about_equation_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 45px;
}

.about_content_flex > div {
    width: 30%;
}

.top_bottom_outline .advertise.about_advertise {
    width: auto;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.about_mgbt {
    margin-bottom: 80px;
}

.equation p {
    color: var(--primary_color);
    background: #fff;
    padding: 2% 4% 1%;
    border: solid 1px var(--primary_color);
}

.about_title_mb h1, .about_title_mb p {
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .about_title_mb .about img {
        width: 90%;
        margin: 8px auto;
    }

    .news_point .equation p {
        width: 90%;
        margin: 0 auto;
    }

    .news_point .equation p {
        width: 100%;
    }

    .news_point .equation img {
        transform: rotate( 0deg );
    }

    .about_equation_flex, .about_content_flex {
        flex-wrap: wrap;
    }

    .about_content_flex > div {
        width: 100%;
        background: none;
    }

    .about_content_area {
        margin: 0;
        padding: 10px;
    }

    .about_content_flex > div:not(:last-child) {
        border-bottom: 2px solid var(--basic_color_light);
    }

    .about_content_flex {
        padding: 0;
    }

    .about_equation_flex p.text_center {
        text-align: center;
    }
}

/***********************************
** other / bootstrap
***********************************/
.bootstrap input, .bootstrap optgroup, .bootstrap select, .bootstrap textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    /* line-height: inherit; */
}

.bootstrap button, .bootstrap select {
    text-transform: none;
}

.bootstrap [role=button] {
    cursor: pointer;
}

.bootstrap select {
    word-wrap: normal;
}

.bootstrap select:disabled {
    opacity: 1;
}

.bootstrap .form-select {
    display: block;
    width: 100%;
    padding: 1.2rem 2.25rem 1.2rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 20px 16px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.bootstrap .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.bootstrap .form-select[multiple], .bootstrap .form-select[size]:not([size="1"]) {
    padding-right: .75rem;
    background-image: none;
}

.bootstrap .form-select:disabled {
    background-color: #e9ecef;
}

.bootstrap .form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #212529;
}

@media (prefers-reduced-motion: reduce) {
    .bootstrap .form-select {
        -webkit-transition: none;
        transition: none;
    }
}

.bootstrap .form-select-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.bootstrap .form-select-lg {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
}

.bootstrap .form-floating {
    position: relative;
}

.bootstrap .form-floating > .form-control, .bootstrap .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.bootstrap .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .75rem;
    pointer-events: none;
    border: 1px solid transparent;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: opacity .1s ease-in-out,-webkit-transform .1s ease-in-out;
    transition: opacity .1s ease-in-out,-webkit-transform .1s ease-in-out;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out,-webkit-transform .1s ease-in-out;
}

.bootstrap .form-floating > .form-control {
    padding: 1rem .75rem;
}

.bootstrap .form-floating > .form-control::-moz-placeholder, .bootstrap .form-floating > .form-control::placeholder {
    color: transparent;
}

.bootstrap .form-floating > .form-control:not(:-moz-placeholder-shown), .bootstrap .form-floating > .form-control:focus, .bootstrap .form-floating > .form-control:not(:placeholder-shown), .bootstrap .form-floating > .form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.bootstrap .form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.bootstrap .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label, .bootstrap .form-floating > .form-control:focus ~ label, .bootstrap .form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.bootstrap .form-floating > .form-select ~ label, .bootstrap .form-floating > .form-control:-webkit-autofill ~ label {
    opacity: .65;
    -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.bootstrap .input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.bootstrap .input-group > .form-control, .bootstrap .input-group > .form-select {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.bootstrap .input-group > .form-control:focus, .bootstrap .input-group > .form-select:focus {
    z-index: 3;
}

.bootstrap .input-group .btn {
    position: relative;
    z-index: 2;
}

.bootstrap .input-group .btn:focus {
    z-index: 3;
}

.bootstrap .input-group-lg > .btn, .bootstrap .input-group-lg > .form-control, .bootstrap .input-group-lg > .form-select, .bootstrap .input-group-lg > .input-group-text {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: .3rem;
}

.bootstrap .input-group-sm > .btn, .bootstrap .input-group-sm > .form-control, .bootstrap .input-group-sm > .form-select, .bootstrap .input-group-sm > .input-group-text {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.bootstrap .input-group-lg > .form-select, .bootstrap .input-group-sm > .form-select {
    padding-right: 3rem;
}

.bootstrap .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .bootstrap .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bootstrap .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), .bootstrap .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bootstrap .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap .valid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #198754;
}

.bootstrap .valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: rgba(25, 135, 84, 0.9);
    border-radius: .25rem;
}

.bootstrap .is-valid ~ .valid-feedback, .bootstrap .is-valid ~ .valid-tooltip {
    display: block;
}

.bootstrap .form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.bootstrap .form-control.is-valid:focus {
    border-color: #198754;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.bootstrap textarea.form-control.is-valid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
}

.bootstrap .form-select.is-valid {
    border-color: #198754;
}

.bootstrap .form-select.is-valid:not([multiple]):not([size]), .bootstrap .form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
}

.bootstrap .form-select.is-valid:focus {
    border-color: #198754;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.bootstrap .form-check-input.is-valid {
    border-color: #198754;
}

.bootstrap .form-check-input.is-valid:checked {
    background-color: #198754;
}

.bootstrap .form-check-input.is-valid:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.bootstrap .form-check-input.is-valid ~ .form-check-label {
    color: #198754;
}

.bootstrap .form-check-inline .form-check-input ~ .valid-feedback {
    margin-left: .5em;
}

.bootstrap .input-group .form-control.is-valid, .bootstrap .input-group .form-select.is-valid {
    z-index: 1;
}

.bootstrap .input-group .form-control.is-valid:focus, .bootstrap .input-group .form-select.is-valid:focus {
    z-index: 3;
}

.bootstrap .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    /*color: #dc3545;*/
    color: var(--accent_color);
}

.bootstrap .invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    border-radius: .25rem;
}

.bootstrap .is-invalid ~ .invalid-feedback, .bootstrap .is-invalid ~ .invalid-tooltip {
    display: block;
}

.bootstrap .form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.bootstrap .form-control.is-invalid:focus {
    border-color: #dc3545;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.bootstrap textarea.form-control.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
}

.bootstrap .form-select.is-invalid {
    border-color: #dc3545;
}

.bootstrap .form-select.is-invalid:not([multiple]):not([size]), .bootstrap .form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 4.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
}

.bootstrap .form-select.is-invalid:focus {
    border-color: #dc3545;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.bootstrap .form-check-input.is-invalid {
    border-color: #dc3545;
}

.bootstrap .form-check-input.is-invalid:checked {
    background-color: #dc3545;
}

.bootstrap .form-check-input.is-invalid:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.bootstrap .form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

.bootstrap .form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: .5em;
}

.bootstrap .input-group .form-control.is-invalid, .bootstrap .input-group .form-select.is-invalid {
    z-index: 2;
}

.bootstrap .input-group .form-control.is-invalid:focus, .bootstrap .input-group .form-select.is-invalid:focus {
    z-index: 3;
}

/*-- --------- --*/
/*-- bootstrap追加 --*/
/*-- --------- --*/
.bootstrap textarea{
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
}
.bootstrap input[type=radio] + label,
.bootstrap input[type=checkbox] + label {
    font-weight: 400;
    margin: 10px 20px 10px 0;
    display: inline-block;
}
.bootstrap input[type=radio] + label:before {
    display: none;
}
.bootstrap input[type=radio] + label{
    margin-right: 20px;
}
.bootstrap input[type=radio] + label i {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background: #ffffff;
    border: solid 1px #1a1a1a;
    border-radius: 20px;
    vertical-align: middle;
    position: relative;
}
.bootstrap input[type=radio]:checked + label i:before {
    content: "";
    display: block;
    width: 54.8%;
    height: 54.8%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    background-color: #1a1a1a;
    border-radius: 30px;
    box-shadow: 0 0 1px #707070;
}
.bootstrap .is-invalid input + label {
    color: #dc3545;
}

.bootstrap .is-invalid input[type=radio] + label i {
    border: solid 1px #dc3545;
}
.bootstrap .is-invalid input[type=checkbox] + label span:before {
    border: solid 1px #dc3545;
}




.preview-player {
    width: 100%;
}

.top_main_container.one_column.tobmovie {
    max-width: 1380px!important;
    width: 100%!important;
}

.top_main_container.one_column.tobmovie .top_main_area {
    width: auto;
    margin: 0;
    padding: 0 40px;
}

@media screen and (max-width: 768px) {
    .top_main_container.one_column.tobmovie .top_main_area {
        padding: 0 20px;
    }
}

@media screen and (max-width: 480px) {
    .top_main_container.one_column.tobmovie .top_main_area {
        padding: 0 10px;
    }
}



#download {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding: 0 10px;
}
#download .left_box {
    width: 66.66%;
    padding: 0 10px;
}
#download .left_box h2 {
    font-size: var(--font_size_m);
    font-weight: bold;
    border: none;
    display: block;
    margin: 0 auto 24px auto;
}
#download .left_box .caution {
    color: var(--accent_color);
    font-size: var(--font_size_s);
}
#download .right_box {
    text-align: center;
}
#download .right_box .service_document > p {
    font-size: var(--font_size_s);
    margin: 16px 0;
}
#download .right_box a.txt_link {
    color: var(--primary_color);
    text-decoration: underline;
    float: center;
    margin-top: 16px;
}
@media screen and (max-width: 480px) {
    #download .left_box h2 br,
    #download .left_box .caution br {
        display: none;
    }
}
#download .left_box p {
    margin: 8px 0;
}
#download .left_box p a {
    color: var(--primary_color);
    text-decoration: underline;
}
#download .left_box p a[class*=btn] {
    color: #ffffff;
    text-decoration: none;
}
#download .left_box form a.btn_primary,
#download .left_box form a.btn_secondary {
    max-width: none;
}
#download .right_box {
    width: 33.33%;
    padding: 0 10px;
    height: max-content;
    position: sticky;
    top: 140px;
}
@media screen and (max-width: 480px) {
#download .right_box {
    top: auto;
}
}
#download .center_box {
    text-align: center;
    padding: 140px 0 100px 0;
    flex: 1;
}
#download .center_box h4 br {
    display: none;
}
#download .right_box aside.side_applicaton {
    width: auto;
    padding: 0;
    margin: 0;
}
#download .right_box aside.side_applicaton .document_area {
    margin: 0 0 8px 0;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
#download .right_box aside.side_applicaton .document_area.title {
    text-align: center;
    box-shadow: none;
    font-size: var(--font_size_s);
    border-top: solid 1px #efefef;
    border-radius: 0;
    margin: 16px 0 8px 0;
    padding-top: 8px;
    justify-content: center;
    align-items: center;
}
#download .right_box aside.side_applicaton .document_area.title:first-child {
    border: none;
    margin: 0;
    padding: 16px 0;
}
#download .right_box aside.side_applicaton .document_area.title br {
    display: none;
}
#download .right_box aside.side_applicaton .service_document {
    overflow: inherit;
    max-height: none;
}
#download .right_box aside.side_applicaton .document_img {
    margin-right: 8px;
}
#download .right_box aside.side_applicaton h2 {
    font-size: var(--font_size_s);
    text-align: left;
    margin-bottom: 4px;
    white-space: normal;
}
#download .right_box aside.side_applicaton h2.title {
    text-align: center;
    margin: 0;
}
#download .right_box aside.side_applicaton h2.title span {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
}
#download .left_box h4 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 16px;
}
#download .left_box h4 br {
    display: none;
}
#download .left_box h4 br.pc {
    display: inline;
}
#download .left_box h5 {
    font-size: var(--font_size_r);
    font-weight: bold;
    background: #ffffff;
    margin: 24px;
    padding: 8px;
}
#download .left_box .box.bg {
    padding: 24px;
}
#download .left_box .inner .box.bg {
    padding-top: 0;
}
#download .left_box .inner .dl_regist {
    padding-top: 16px;
}
#download .left_box .box.bg dl:first-child dt {
    margin-top: 0;
}
#download .left_box .accordion {
    cursor: pointer;
}

#download .left_box .title:hover {
    opacity: 1;
}
#download .left_box dl {
    margin: 16px 0;
}
#download .left_box dl.user_email dd {
    background: #fff;
    padding: 1.2rem 2.25rem 1.2rem 0.75rem;
    border-radius: 0.25rem;
}
#download .left_box dt {
    margin: 0 0 8px 0;
    line-height: 1.0em;
}
#download .left_box dt i {
    top: 0;
}
#download .left_box dd {
    text-align: left;
}
#download .left_box .col2,
#download .left_box .col3 {
    align-items: center;
}
#download .left_box .col2 > div,
#download .left_box .col3 > div {
    flex: 1;
    margin-right: 8px;
}
#download .left_box .col2 > div:last-child,
#download .left_box .col3 > div:last-child {
    margin-right: 0;
}
#download .dl_login,
#download .dl_regist {
    display: none;
    padding-top: 24px;
}
#download .left_box .inner {
    background: var(--light_color);
    margin-bottom: 20px;
    padding: 40px 0;
}
#download .left_box .inner > a.btn_primary,
#download .left_box .inner > a.btn_secondary {
    margin: 0 auto;
    overflow: hidden;
}
#download .left_box .inner a.accordion:before {
    content: none;
}
#download .left_box .inner a.accordion:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: solid 2px #ffffff;
    border-bottom: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px;
}
#download .left_box .inner a.title:after {
    transform: rotate(-135deg);
    top: 30px;
}
/*資料DL職種区分チェックボックス*/
#download .chk {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	padding: 5px 30px;
	position: relative;
	width: auto;
}
#download .chk::before {
	background: #fff;
	border: 1px solid #231815;
	content: '';
	display: block;
	height: 16px;
	left: 5px;
	margin-top: -8px;
	position: absolute;
	top: 50%;
	width: 16px;
}
#download .chk::after {
	border-right: 3px solid #386c5f;
	border-bottom: 3px solid #386c5f;
	content: '';
	display: block;
	height: 9px;
	left: 10px;
	margin-top: -7px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 5px;
}
#download input[type=checkbox]:checked + .chk::after {
	opacity: 1;
}

#download .dl_login h2.sns {
    color: var(--basic_color);
    font-size: clamp(12px, 1.4rem, 18px);
    display: block;
    padding-top: 24px;
    margin: 16px 24px 8px;
    border-top: solid 1px #ffffff;
    border-bottom: none;
}
#download .right_box a.btn_secondary {
    margin: 0 auto;
}
#download .right_box a.btn_secondary br {
    display: none;
}
@media screen and (max-width: 768px) {
    #download {
        padding: 0;
    }
    #download .left_box {
        width: 100%;
        padding: 0;
    }
    #download .left_box h4 br {
        display: inline;
    }
    #download .left_box h4 br.pc {
        display: inline!important;
    }
    #download .right_box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: var(--basic_color);
        z-index: 9999;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #download .side_applicaton::-webkit-scrollbar {
        display: none;
    }
    #download .side_applicaton .document_area {
        display: flex;
        background: #ffffff;
        margin: 0 8px 0 0;
        padding: 8px;
    }
    #download .right_box aside.side_applicaton {
        display: flex;
    }
    #download .right_box aside.side_applicaton .document_area.title {
        color: #ffffff;
        margin: 0;
        background: none;
        border: none;
        min-width: 180px;
        padding: 0;
    }
    #download .right_box aside.side_applicaton .document_area.title br {
        display: inline;
    }
    #download .side_applicaton h2 {
        padding-right: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    #download .side_applicaton p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        white-space: normal;
    }
    #download .side_applicaton .document_img {
        float: left;
        width: 30%;
    }

    #download h2.title {
        font-size: var(--font_size_s);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0;
        padding: 4px 16px;
        box-sizing: border-box;
    }

    #download .right_box aside.side_applicaton h2.title span {
        position: static;
        display: block;
    }
    #download .right_box aside.side_applicaton h2.title span i {
        font-size: 20px;
    }
    #download .right_box aside.side_applicaton .service_document {
        display: block;
        padding: 4px;
        white-space: nowrap;
        overflow: scroll;
        flex: 1;
    }
    #download .right_box aside.side_applicaton .document_area i {
        top: 0;
        right: 0;
        padding: 4px;
    }
    #download .right_box aside.side_applicaton .document_area i img {
        display: block;
        width: 16px;
    }
    #download .right_box aside.side_applicaton .document_area {
        width: 30vw;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
    }
    #download .right_box aside.side_applicaton h2 {
        line-height: 1.1em;
    }
    #download .right_box aside.side_applicaton .document_area:before {
        top: 0;
    }
    #download .right_box .service_document > p {
        color: #ffffff;
        display: inline-block;
        margin: 0 16px;
        padding: 0;
        vertical-align: middle;
    }
    #download .right_box a.btn_secondary {
        width: auto;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
    }
    #download .right_box a.btn_secondary:before {
        top: 50%;
    }
    #download .right_box a.btn_secondary br {
        display: inline;
    }

}

@media screen and (max-width: 480px) {
    #download .center_box {
        padding: 70px 0 20px 0;
    }
    #download .center_box h4 br {
        display: inline;
    }
    #download .left_box h4 br {
        display: inline;
    }
    #download .right_box aside.side_applicaton .document_area {
        width: 50vw;
    }
}

/* ▼▼ WTC_DEV-9499 人気のサービスをレコメンド表示 ▼▼ */
#download .left_box .recommendation {
    margin: 32px 0 0;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}
#download .left_box .recommendation * {
    box-sizing: border-box;
}
#download .left_box .recommendation p,
#download .left_box .recommendation label {
    margin: 0;
}
#download .left_box .recommendation .lead {
    margin: 0;
    padding: 15px;
    background: #4b4b4b;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}
#download .left_box .recommendation .service_list {
    padding: 15px 15px 20px;
}
#download .left_box .recommendation .service_list .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 12px 0;
    cursor: pointer;
}
@media screen and (min-width: 769px) {
#download .left_box .recommendation .service_list .item:hover {
    border-color: #ee7308;
}
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item {
    border-color: #ee7308;
}
#download .left_box .recommendation .service_list .item:nth-of-type(n+2) {
    margin: 15px 0 0;
}
#download .left_box .recommendation .service_list .item .service_logo {
    width: 85px;
    padding: 0 10px;
}
#download .left_box .recommendation .service_list .item .block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 85px);
    padding: 12px 20px 15px;
    border-left: 1px solid #ddd;
}
#download .left_box .recommendation .service_list .item .block .service_name {
    width: calc(100% - 113px);
}
#download .left_box .recommendation .service_list .item .block .service_name .name {
    line-height: 1.3;
    font-weight: bold;
}
#download .left_box .recommendation .service_list .item .block .service_name .company {
    margin: 5px 0 0;
    font-size: 1.1rem;
    color: #666;
}
#download .left_box .recommendation .service_list .item .block .add_btn {
    width: 98px;
    border: 1px solid #ee7308;
    border-radius: 3px;
    padding: 2px 14px 2px 0;
    position: relative;
    text-align: center;
    background: #ee7308;
    font-size: 1.2rem;
    color: #fff;
}
#download .left_box .recommendation .service_list .item .block .add_btn::after,
#download .left_box .recommendation .service_list .item .block .add_btn::before {
    display: block;
    position: absolute;
    background: #fff;
    content: "";
}
#download .left_box .recommendation .service_list .item .block .add_btn::after {
    width: 9px;
    height: 1px;
    top: 10px;
    right: 10px;
}
#download .left_box .recommendation .service_list .item .block .add_btn::before {
    width: 1px;
    height: 9px;
    top: 6px;
    right: 14px;
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item .block .add_btn::after {
    display: none;
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item .block .add_btn::before {
    display: block;
    width: 4px;
    height: 7px;
    position: absolute;
    top: 6px;
    right: 18px;
    border-right: 1px solid #ee7308;
    border-bottom: 1px solid #ee7308;
    transform: rotate(45deg);
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item .block .add_btn {
    background: #fff;
    color: #ee7308;
}
#download .left_box .recommendation .service_list .item .block .add_btn span::before {
    content: "資料を" ;
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item .block .add_btn span::before {
    content: "" ;
}
#download .left_box .recommendation .service_list input[type="checkbox"]:checked + .item .block .add_btn span::after {
    content: "済み" ;
}
@media screen and (max-width: 480px) {
#download .left_box .flex_reverse {
    display: flex;
    flex-flow: column-reverse;
}
#download .left_box .recommendation {
    margin: 15px 0 0;
}
#download .left_box .recommendation .service_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-inline: 10px;
}
#download .left_box .recommendation .service_list .item {
    display: block;
    width: calc((100% - 10px) / 2);
    padding: 10px 8px 12px;
}
#download .left_box .recommendation .service_list .item:nth-of-type(n+2) {
    margin: 0;
}
#download .left_box .recommendation .service_list .item .service_logo {
    width: 100%;
    height: 54px;
    padding-bottom: 8px;
    text-align: center;
}
#download .left_box .recommendation .service_list .item .service_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#download .left_box .recommendation .service_list .item .block {
    display: block;
    width: 100%;
    height: calc(100% - 54px);
    border-top: 1px solid #ddd;
    border-left: none;
    padding: 10px 0 35px;
    position: relative;
}
#download .left_box .recommendation .service_list .item .block .service_name {
    width: auto;
}
#download .left_box .recommendation .service_list .item .block .service_name .name {
    font-size: 1.4rem;
}
#download .left_box .recommendation .service_list .item .block .add_btn {
    width: 100%;
    margin: 10px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
}
/* ▲▲ WTC_DEV-9499 人気のサービスをレコメンド表示 ▲▲ */

#download_complete .no_login h1 {
    font-size: var(--font_size_l);
    text-align: center;
    margin: 20px 0 0 0;
}
#download_complete .no_login h2 {
    font-size: var(--font_size_m);
    font-weight: 700;
    line-height: 1.4em;
    text-align: center;
    display: block;
    border: none;
    margin: 32px 0 16px 0;
}
#download_complete .no_login p {
    text-align: center;
    margin: 0;
}
#download_complete .no_login a.btn_secondary {
    margin: 16px auto;
}
#download_complete .no_login br.pc {
    display: inline;
}
#download_complete .no_login br.sp {
    display: none;
}
#download_complete .no_login .merit {
    background: var(--water_color);
    max-width: 400px;
    display: flex;
    justify-content: center;
    margin: 16px auto;
    padding: 24px;
    box-sizing: border-box;
}
#download_complete .no_login .merit ul li {
    color: var(--primary_color);
    font-weight: bold;
    line-height: 1.2em;
    position: relative;
    padding-left: 24px;
    padding: 8px 8px 8px 24px;
}
#download_complete .no_login .merit br {
    display: none;
}
#download_complete .no_login .merit ul li:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0;
    background: url(https://icongr.am/fontawesome/check-square-o.svg?size=16&color=004986) no-repeat center center / 100% auto;
}

@media screen and (max-width: 768px) {
    #download_complete .no_login p {
        text-align: left;
    }
    #download_complete .no_login .merit {
        max-width: none;
    }
    #download_complete .no_login .merit br {
        display: none;
    }
    #download_complete .no_login br.pc {
        display: none;
    }
    #download_complete .no_login br.sp {
        display: inline;
    }
}
@media screen and (max-width: 480px) {
    #download_complete .no_login h2 {
        margin: 24px 0 8px 0;
    }
    #download_complete .no_login .merit {
        padding: 16px;
        margin: 8px 0;
    }
    #download_complete .no_login .merit br {
        display: inline;
    }
}
/*
#download .top_main_area {
    width: 66.66%;
    margin: 0 20px 20px 0;
}
#download .side_applicaton {
    width: 33.33%;
    margin: 44px 0 20px;
    padding: 0;
}

#download .top_main_area h4 {
    font-size: var(--font_size_m);
    font-weight: bold;
    text-align: center;
}
#download .top_main_area a.btn_secondary {
    margin-top: 16px;
}
/*
#download .login_area {
    margin: 24px 0 0;
    padding: 0;
}

#download .login_area .bootstrap {
    overflow: auto;
}
#download .login_area .input_title {
    margin-bottom: 16px;
}
#download .login_area .left_area {
    flex: 1;
    max-width: none;
    margin: 0;
    padding-right: 10px;
}
#download .login_area .left_area .bootstrap {
    border-bottom: solid 1px var(--light_color2);
    padding-bottom: 32px;
}

#download .login_area .left_area .text_center.input_title {
    margin-bottom: 32px;
}
#download .login_area .right_area {
    padding: 0;
    padding-left: 10px;
    border: none;
}
#download .login_area .right_area .box {
    margin: 0;
    padding: 16px;
}
#download .login_area dt {
    margin: 0 0 8px 0;
}
#download .login_area dt i {
    color: var(--accent_color);
    background: none;
}
#download .login_area dd {
    margin: 0 0 16px 0;
}

#download .side_applicaton .service_document {
    overflow-y: auto;
    max-height: none;
}
#download .side_applicaton > div {
}
#download .side_applicaton h2 {
    font-size: var(--font_size_r);
    line-height: 1.3em;
    margin-bottom: 4px;
}
#download .side_applicaton .document_img {
    margin-right: 8px;
}
#download .right_area form p {
    margin: 8px 0;
}
#download .right_area dl + p {
    margin-top: 32px;
}
#download .right_area p a {
    color: var(--primary_color);
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    #download .side_applicaton {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow-x: scroll;
        margin: 0;
        background: #000;
        z-index: 9999;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #download .side_applicaton::-webkit-scrollbar {
        display: none;
    }
    #download .side_applicaton > div {
        width: 2400px;
    }
    #download .side_applicaton .service_document {
        display: flex;
        flex-wrap: inherit;
        padding: 32px 8px 8px 8px;
    }
    #download .side_applicaton .document_area {
        display: flex;
        background: #ffffff;
        margin: 0 8px 0 0;
        padding: 8px;
    }
    #download .side_applicaton h2 {
        padding-right: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    #download .side_applicaton p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    #download .side_applicaton .document_img {
        float: left;
        width: 30%;
    }
    #download .side_applicaton h2.title {
        font-size: var(--font_size_s);
        width: auto;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        background: none;
    }
}
@media screen and (max-width: 768px) {
    #download .login_area .left_area {
        padding: 0;
    }
    #download .login_area .right_area {
        padding: 0;
    }
    #download .login_area .left_area .text_center.input_title {
        margin-bottom: 16px;
    }
    #download .login_area .left_area .bootstrap {
        padding: 0;
    }
}
*/

.attention {
    /*line-height: 2.0em;*/
    margin-top: 24px;
    text-align: center;
}
.top_main_banner {
    display: block;
    max-width: 728px;
    margin: 24px auto;
}
.top_main_banner img {
    display: block;
    width: 100%;
}
.top_main_banner .banner_pc {
    display: block;
}
.top_main_banner .banner_sp {
    display: none;
}
@media screen and (max-width: 768px) {
    .top_main_banner {
        max-width: 320px;
        margin: 16px auto;
    }
    .top_main_banner .banner_pc {
        display: none;
    }
    .top_main_banner .banner_sp {
        display: block;
    }
}
.category_contents.quiz {
    text-align: center;
}
.category_contents.quiz h2 {
    font-size: var(--font_size_m);
    margin: 0 0 8px 0;
}
.category_contents.quiz .box {
    text-align: left;
    background: #ffffff;
    box-shadow: var(--box_shadow);
    border-radius: 20px;
    padding: 24px;
}
.category_contents.quiz h5 {
    color: var(--primary_color);
    font-size: var(--font_size_m);
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 0 16px 0;
}
.category_contents.quiz h5:before {
    content: "Q.";
    font-size: var(--font_size_l);
}
.category_contents.quiz a.btn_primary {
    margin: 0 auto;
}
.category_contents.quiz a.past_quizzes {
    display: inline-block;
    margin: 8px auto 0;
}
@media screen and (max-width: 768px) {
    .category_contents.quiz h2 {
        font-size: var(--font_size_s);
    }
    .category_contents.quiz h5 {
        font-size: var(--font_size_r);
        margin-bottom: 8px;
    }
    .category_contents.quiz .box {
        padding: 16px;
    }
}









#point_info .box.bg {
    padding: 24px;
}
#point_info .inner {
    margin: 0 auto;
    max-width: 660px;
}
#point_info .col2,#point_info .col3 {
    text-align: left;
    align-items: center;
}
#point_info .col2 > * {
    flex: 1;
    margin: 0 4px;

}
#point_info .col2 > *:first-child {
    margin-left: 0;
}
#point_info .col2 > *:last-child {
    margin-right: 0;
}
#point_info dt {
    margin: 16px 0 4px 0;
}
#point_info .col2 > i {
    flex: none;
}
#point_info .col3 > i {
    width: 16px;
    flex: none;
}
#point_info .birth br,#point_info .birth span {
    display: none;
}
@media screen and (max-width: 480px) {
    #point_info .birth .col2 {
        display: block;
    }
    #point_info .birth i {
        display: inline-block;

    }
    #point_info .birth select {
        display: inline-block;
        width: 140px;

        margin: 0 0 8px;
    }
    #point_info .birth br,#point_info .birth span {
        display: inline-block;
        margin: 0 4px 0 0;
    }
}
@media screen and (max-width: 768px) {
    #point_info .box.bg {
        padding: 0 16px;
    }
}






/*-- --------- --------- --------- --*/
/*-- --------- エラーページ --------- --*/
/*-- --------- --------- --------- --*/
#error {
    margin-top: 40px;
}
#error .wrap > div {
    margin: 10px 0;
}
#error .form-message {
    color: var(--accent_color);
    font-size: var(--font_size_xs);
    display: inline-block;
}
@media screen and (max-width: 480px) {
    #error {
        margin-top: 20px;
    }
    #error .wrap > div {
        text-align: left;
    }
}


/*-- MANEGY_RENEW2021-409 --*/
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    #fv {
        padding: 0 100px;
        background: var(--water_color);
    }
    .header_left {
        padding: 16px 0;
    }
    .header_right nav li a {
        padding: 8px 0;
    }
    .header_right nav li img {
        margin: 4px auto;
    }
    .header_right nav li a i {
        top: 8px;
    }
    .header_right nav .header_contents_login a{
        padding: 7px 0;
    }
    .header_right nav .header_contents_regist a{
        padding: 12px 0;
    }
}


/*-- --------- --------- --------- --*/
/*-- ヘッダースクロール帯 --*/
/*-- --------- --------- --------- --*/

.scrollBlock2{
    padding: 0;
    position: relative;
    overflow: hidden;
}
.scrollBlock2 .infiniteslide_wrap {
    background: none;
}
.scrollBlock2 ul{
    padding: 8px 0;
    margin: 0;
}
.scrollBlock2 li{
    margin-left: 20px;
}
.scrollBlock2 li img{
    width: auto;
    height: 24px;
    display: block;
}
.scrollBlock2 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.scrollBlock2 a.pc{display: block;}
.scrollBlock2 a.sp{display: none;}

.scrollBlock2 span {
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    text-align: center;
    z-index: 1;
}
.scrollBlock2 span:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    margin-left: 8px;
}
@media screen and (max-width: 768px) {
    .scrollBlock2 ul{
        padding: 4px 0;
    }
    .scrollBlock2 li img{
        height: 16px;
    }
    .scrollBlock2.wtc_dev_4196 li img {
        height: 24px;
    }
    .scrollBlock2 span {
        font-size: 12px;
        line-height: 24px;
        width: 100px;
        height: 100%;
    }
    .scrollBlock2.wtc_dev_4196 span {
        line-height: 32px;
    }
    .scrollBlock2 span:after {
        margin-left: 4px;
        width: 8px;
        height: 8px;
    }
    .scrollBlock2 a.pc{display: none;}
    .scrollBlock2 a.sp{display: block;}

}
/*-- --*/

.scrollBlock2{
    background: #dc6f2d;
}
.scrollBlock2 span {
    color: #dc6f2d;
    background: #f3dc1e;
}
.scrollBlock2 span:after {
    background: #dc6f2d;
}



/*-- --------- --*/
.infiniteslide_wrap {
    position: static;
    background: #ffffff;
}
.top_service_contents + .infiniteslide_wrap:before {
    display: none;
}
.top_service_contents + .infiniteslide_wrap:after {
    display: none;
}
.top_service {
    padding: 40px;
}
@media screen and (max-width: 768px) {
    .top_service {
        padding: 24px 0;
    }
    .infiniteslide_wrap {
        position: static;
        background: #ffffff;
    }
    .top_service_contents + .infiniteslide_wrap:before {
        display: none;
    }
    .top_service_contents + .infiniteslide_wrap:after {
        display: none;
    }
}

/***********************************
** other / 完了画面
***********************************/
#complete_common .news_contents {
    padding: 16px;
}
#complete_common .news_contents ul {
    margin: 0;
}
#complete_common .news_contents ul li {
    margin: 0;
    padding: 0;
}
#complete_common .news_contents .btn_secondary {
    margin: 16px auto 0;
}
#complete_common .pickup_service {
    padding: 16px;
}
#complete_common .pickup_service ul {
    margin: -4px;
}
#complete_common .pickup_service ul li {
    margin: 0;
    padding: 4px;
}
#complete_common .pickup_service .btn_secondary {
    margin: 16px auto 0;
}
#complete_common iframe {
    display: block;
    margin: 24px auto;
}
/*-- --------- --------- --------- --*/
/*-- toB動画＞追加要素 --*/
/*-- --------- --------- --------- --*/
#movie_top .banner {
    text-align: center;
}
#movie_top .banner .movie.feature {
    margin: 0;
}
#movie_top .banner iframe {
    display: block;
    margin: 40px auto;
}
@media screen and (max-width: 768px) {
    #movie_top .banner {
        text-align: center;
        margin: 24px 0;
    }
}
#movie_top .slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -50px auto auto -40px;
    width: 40px;
    height: 100px;
    background: #000;
    opacity: 0.8;
    z-index: 1;
    transition: all 0.3s linear;
}
#movie_top ul li {
    white-space: normal;
    text-align: left;
}
#movie_top .slick-slider .slick-arrow:hover {
    opacity: 1;
}
#movie_top .slick-slider .slick-arrow:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
    margin: auto auto;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #ffffff;
    border-left: solid 2px #ffffff;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}
#movie_top .slick-slider .next-arrow {
    right: 0;
    left: auto;
    margin: -50px -40px auto auto;
}
#movie_top .slick-slider .next-arrow:after {
    left: 0;
    right: 4px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    border-left: none;
    border-bottom: none;
}
#movie_top .feature a {
    display: block;
}
#movie_top .feature a img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}
#movie_top .movie_article p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
#movie_top .slick-slide {
    padding: 8px;
}
@media screen and (max-width: 768px) {
    #movie_top .slick-slider .slick-arrow {
        margin: -50px auto auto -20px;
    }
    #movie_top .slick-slider .next-arrow {
        margin: -50px -20px auto auto;
    }
}
@media screen and (max-width: 480px) {
    #movie_top .slick-slider .slick-arrow {
        margin: -50px auto auto 0px;
    }
    #movie_top .slick-slider .next-arrow {
        margin: -50px 0px auto auto;
    }
/*
    #movie_top .feature {
        display: none;
    }
*/
}

/*-- --------- --------- --------- --*/
/*-- toB動画＞追加要素 2026月1月9日 --*/
/*-- --------- --------- --------- --*/
#recommend_seminar {
    display: none;
}
#recommend_seminar #movie_top .slick-list {
    overflow: hidden;
}
#recommend_seminar #movie_top .slick-list {
    width: calc(320px * 3 + 16px * 2);
    margin: 0 auto;
}

#recommend_seminar #movie_top .slick-slide {
    width: 320px !important;
}
#recommend_seminar #movie_top .slick-slider .next-arrow{
    right: 40px;
}
#recommend_seminar #movie_top .slick-slider .slick-arrow{
    left: 40px;
}
#recommend_seminar .movie ul{
    padding: 13px;
}
#recommend_seminar .movie{
    box-shadow: var(--box_shadow);
}
#recommend_seminar .movie_article{
    height: 100%;
}
#recommend_seminar #movie_top .movie_contents_date{
    font-size: 1.5rem;
    margin: 0 10px 8px;
}
#recommend_seminar .movie_contents_tag{
    margin: 4px 6px;
}
#recommend_seminar #movie_top .slick-slider .slick-arrow{
    opacity: 0.6;
}
@media (max-width: 768px){
    #recommend_seminar #movie_top .slick-list{
        width: 100% !important;
        margin: 0 auto;
        overflow: hidden;
    }
    #recommend_seminar #movie_top .slick-track{
        display: flex !important;
        justify-content: center !important;
    }
    #recommend_seminar .movie .slick-slide:not(.slick-center) {
            opacity: 1;
    }
    #recommend_seminar #movie_top .slick-slide{
        width: 100% !important;
        box-sizing: border-box;
        display: flex !important; 
        justify-content: center;
    }
    #recommend_seminar #movie_top .slick-slider .next-arrow{
        right: -20px;
    }
    #recommend_seminar #movie_top .slick-slider .slick-arrow{
        left: -20px;
    }
    #recommend_seminar .movie ul{
        padding: 0;
    }
    #recommend_seminar .movie_contents_tag{
        padding-top: 10px;
    }
    #recommend_seminar .movie{
        margin-bottom: 20px;
    }
    #movie_top .slick-slider .slick-arrow{
        top: 35%;
    }
}


/***********************************
** other / 各ページバナー設置
***********************************/
.bdash_banner {
    margin: 10px auto;
    max-width: 728px;
    justify-content: center;
    overflow: hidden;
}

.bdash_banner a,
.bdash_banner img {
    display: block;
    margin: 0 auto;
    max-width: 728px;
}
.bdash_banner iframe {
    opacity: 0;
    display: block;
}
.bdash_banner.bdash_pc {
    display: block;
}
.bdash_banner.bdash_sp {
    display: none;
}
/*
.bdash_banner a[href=""],
.bdash_infeed a[href=""] {
    display: none;
}
*/
/*
.bdash_banner:empty {
    display: none;
}
.bdash_banner a {
    display: block;
}
.bdash_banner a img {
    display: block;
}
*/
.news_detail .bdash_banner {
    margin: 24px auto;
}
 /* サイトジャック広告用
.news_detail .bdash_banner {
    margin: 0 auto 10px;
} */
 /* ここまで */
.news_detail .bdash_banner a {
    border: none;
}
.news_detail .bdash_banner a img {
    margin: 0 auto;
}
.mypage_point .bdash_banner {
    margin: 40px auto 0;
}

@media screen and (max-width: 768px) {
    .bdash_banner {
        max-width: 320px;
        margin: 16px auto;
    }
    .bdash_banner.bdash_pc {
        display: none;
    }
    .bdash_banner.bdash_sp {
        display: block;
    }
    .bdash_banner a,
    .bdash_banner img {
        max-width: 320px;
    }
    .bdash_banner {
        margin: 16px auto;
    }
    .news_detail .bdash_banner {
        margin: 8px auto;
    }
}
.banner_event {
    margin: 24px 0 0;
}
.bdash_side_banner {
    margin: 24px 0;
    display: none;
}
.bdash_side_banner:empty {
    /*display: none;*/
}
.bdash_side_banner a {
    display: block;
}
.bdash_side_banner a img {
    display: block;
}
.bdash_infeed {
    display: none;
}
.bdash_infeed a {
    display: flex;
    padding: 16px 0;
    border-bottom: solid 1px #E5E5E5;
    align-items: center;
}
.bdash_infeed a .txt {
    font-weight: 700;
    margin-right: 140px;
}
@media screen and (max-width: 768px) {
    .bdash_infeed a .txt {
        margin-right: 0;
    }
}
.modal .bdash_pc {
    display: block;
}
.modal .bdash_sp {
    display: none;
    width: 300px;
}

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999999;
}
.js-modal-close.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
}
.modal__content{
    background: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--box_shadow);
}
.modal__content a {
    display: block;
}
.modal__content img {
    display: block;
}
.js-modal-close {
    text-align: center;
    line-height: 50px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    right: -20px;
    cursor: pointer;
}
.js-modal-close:before {

    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    background: #888;
    border-radius: 16px;
    border: solid 2px #ffffff;
    box-shadow: var(--box_shadow);
}

.js-modal-close i:before,
.js-modal-close i:after {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
}
.js-modal-close i:before {
    transform: rotate(135deg);
}
.js-modal-close i:after {
    transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
    .modal__content {
        width: 300px;
    }
}
@media screen and (max-width: 768px) {
    .modal .bdash_pc {
        display: none;
    }
    .modal .bdash_sp {
        display: block;
    }
}

.bdash_registcomp iframe {
    display: block;
    margin: 0 auto;
}

/***********************************
** other / プレミアム事務所
***********************************/
.premium_office h1 {
    font-size: var(--font_size_l);
    text-align: center;
    margin-top: 20px;
}
.premium_office .list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -32px;
    padding: 0 16px;
}
.premium_office .list article {
    padding: 16px;
    width: 33.33%;
    position: relative;
    box-sizing: border-box;
}
.premium_office .list article a {
    display: block;
}
.premium_office .list article h2 {
    font-size: var(--font_size_r);
    font-weight: 700;
    line-height: 1.2em;
    border: none;
    margin: 8px 0;
    display: block;
}
@media screen and (max-width: 768px) {
    .premium_office .list article {
        width: 50%;
    }

}
.premium_office .detail h1 {
    margin-bottom: 20px;
}
.premium_office .detail h2 {
    color: #ffffff;
    font-size: var(--font_size_r);
    line-height: 1.2em;
    border: none;
    margin: 40px 0 8px 0;
    padding: 8px;
    display: block;
    background: var(--dark_color);
}
.premium_office .detail h3 {
    color: var(--basic_color);
    font-size: var(--font_size_r);
    font-weight: 700;
    line-height: 1.2em;
    border: none;
    margin: 16px 0 8px 0;
    display: block;
}
.premium_office .detail h4 {
    color: var(--basic_color);
    font-size: var(--font_size_r);
    font-weight: 700;
    line-height: 1.2em;
    border: none;
    margin: 0 0 8px;
    display: block;
    position: relative;
}
.premium_office .detail .pagelink {
    text-align: center;
    margin: 24px 0;
}
.premium_office .detail .pagelink a {
    font-weight: 700;
    line-height: 1.1em;
    display: inline-block;
    padding: 8px 24px;
    border-right: solid 1px var(--dark_color);
    position: relative;
}
.premium_office .detail .pagelink a:last-child {
    border: none;
}
.premium_office .detail .pagelink a:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: solid 3px var(--dark_color);
    border-bottom: solid 3px var(--dark_color);
    transform: rotate(45deg);
    position: absolute;
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}
.premium_office .detail #feature {
    counter-reset: number 0;
}
.premium_office .detail #feature article {
    background: var(--water_color);
    padding: 16px;
    margin: 16px 0;
    position: relative;
}
.premium_office .detail #feature article h4 {
    position: relative;
    padding: 4px 0 4px 54px;
}
.premium_office .detail #feature article h4:before {
    color: #ffffff;
    font-size: var(--font_size_xs);
    padding: 4px 8px;
    counter-increment: number 1;
    content: "特徴"counter(number)"";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary_color);
}

.premium_office .detail #staff ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.premium_office .detail #staff ul li {
    width: 50%;
    padding: 8px;
    box-sizing: border-box;
    position: relative;
}
.premium_office .detail #staff ul li .inner {
    display: flex;
    border: solid 1px #efefef;
    height: 100%;
}
.premium_office .detail #staff ul li .profile {
    width: 30%;
    min-width: 120px;
    padding: 8px 4px 8px 8px;
}
.premium_office .detail #staff ul li .profile span,
.premium_office .detail #staff ul li .profile i {
    font-size: var(--font_size_s);
    display: block;
    text-align: center;
}
.premium_office .detail #staff ul li .profile span {
    font-weight: 700;
}
.premium_office .detail #staff ul li .txt {
    padding: 8px 8px 8px 4px;
}
.premium_office .detail #staff ul li .txt b {
    font-weight: 700;
}
.premium_office .detail #staff ul li .txt span {
    display: block;
    position: relative;
    padding-left: 70px;
    margin-bottom: 8px;
}
.premium_office .detail #staff ul li .txt span i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.premium_office .detail #achievement ul {
    margin: 16px 0;
}
.premium_office .detail #achievement li {
    list-style: disc;
    margin-left: 20px;
}
.premium_office .detail #achievement table {
    width: 100%;
}
.premium_office .detail #achievement table th {
    text-align: left;
    width: 120px;
    background: #e9eef3;
    border: 1px solid #d2dce7;
    padding: 16px;
    vertical-align: top;
}
.premium_office .detail #achievement table td {
    border: 1px solid #d2dce7;
    padding: 16px;
    vertical-align: top;
}
.premium_office .detail .btnset {
    margin: 24px 0;
}
.premium_office .detail .btnset a {
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    .premium_office .list {
        margin: 0 -24px;
    }
    .premium_office .list article {
        padding: 8px;
    }
    .premium_office .detail #staff ul {
        display: block;
    }
    .premium_office .detail #staff ul li {
        width: auto;
    }
    .premium_office .detail .btnset {
        display: block;
    }
    .premium_office .detail .btnset a {
        margin: 8px auto;
        width: inherit;
    }
}
@media screen and (max-width: 480px) {
    .premium_office .detail .pagelink a {
        padding: 8px 16px;
    }
}







/***********************************
** other / キャリア
***********************************/
#career h1 {
    font-size: var(--font_size_l);
    text-align: center;
    margin: 24px 0;
}
#career h2 {
    color: var(--basic_color)!important;
    background-color: var(--water_color)!important;
    font-weight: 700;
    font-size: var(--font_size_m);
    line-height: 1.2em;
    width: 100%;
    margin: 32px 0 16px 0;
    padding: 8px;
    border-left: solid 4px var(--primary_color)!important;
    border-bottom: none;
    box-sizing: border-box;
    display: block;
}
#career h2 span {
    border-bottom: solid 1px var(--basic_color);
}
#career .subtitle{
    color: var(--basic_color)!important;
    background-color: var(--water_color)!important;
    font-weight: 700;
    font-size: var(--font_size_m);
    line-height: 1.2em;
    width: 100%;
    margin: 32px 0 16px 0;
    padding: 8px;
    border-left: solid 4px var(--primary_color)!important;
    border-bottom: none;
    box-sizing: border-box;
    display: block;
    text-align: left;
}
#career .recruit {
    padding: 0 40px;
    margin-bottom: 80px;
}
#career .recruit a {
    margin: 0 auto;
    max-width: 600px;
}
#career ul {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -8px 0;
}
#career ul li {
    width: 33.33%;
    padding: 10px 8px;
    box-sizing: border-box;
}
#career a {
    /*display: block;
    width: 100%;
    box-sizing: border-box;
    background: #E5ECF3;
    box-shadow: 4px 4px 0 #004986;
    position: relative;*/
}
#career a img {
    display: block;
    width: 100%;
}
#career a img[src*=icon] {
    display: block;
    width: 37.5%;
    position: absolute;
    bottom: -40px;
    right: -5px;
}
#career .wp_contents {
    margin-bottom: 40px;
}
#career .wp_contents article .txt {
    margin-top: 8px;
    padding-bottom: 0px;
}
.career_outline {
    background: #fff;
    border-radius: 50px;
    box-shadow: var(--box_shadow);
    text-align: center;
    padding: 30px;
    margin: 32px auto;
    text-align: left;
}
.career_mg_flex {
    display: flex;
    flex-wrap: nowrap;
}
.career_flex_content {
    width: 40%;
}
.career_mg_flex_content {
    width: 58%;
    padding: 0 0 0 2%;
}
.career_mg_flex_content p{
    line-height: 1.5em;
}
#career .careerplan li{
    border: 1px solid var(--primary_color);
    width: 33.33%;
    padding: 20px;
    margin: 2% 2% 0 0;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    font-weight: 500;
}
#career .nav_right {
    width: 30px;
    height: 30px;
    border: solid 1px var(--primary_color);
    border-radius: 50%;
    display: grid;
    place-items: center;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    position: absolute;
    top: 16px;
    right: 16px;
}
#career .nav_right::before {
    content: "";
    width: 8px;
    height: 20px;
    background: var(--primary_color);
    clip-path: polygon( 40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
    position: absolute;
    top: 0px;
    left: 12px;
}
#newsPager ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
#newsPager li {
    margin-right: 1em;
}
#newsPager li a {
    text-decoration: none;
    color: #000;
}
#newsPager .active a {
    color: #fff;
    background-color: #000;
}
@media screen and (max-width: 768px) {
    #career h1 {
        margin: 8px 0;
    }
    #career h2 {
        margin: 24px 0 16px 0;
    }
    #career .recruit {
        padding: 0;
        margin-bottom: 80px;
    }
    #career ul {
        display: block;
        padding: 0;
    }
    #career ul li {
        width: auto;
        padding: 0 8px;
        margin: 0 0 30px 0;
    }
    .career_outline {
    padding: 30px 26px 2px;
}
    .career_mg_flex {
        display: block;
}
    .career_flex_content {
    width: 100%;
}
    .career_mg_flex_content {
    width: 100%;
    padding: 5% 0 0 0;
}
    #career .careerplan li {
    border: 1px solid var(--primary_color);
    width: 100%;
    padding: 20px;
    margin: 4% 0;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    font-weight: 500;
}
}



/***********************************
** other / ニュース詳細＞CTA
***********************************/
.cta_01 {
    text-align: center;
    margin: 24px 0;
}
.cta_01 .inner {
    padding: 16px;
    margin: 16px 0;
    background-color: var(--water_color);
    border-radius: 8px;
}
.cta_01 b {
    font-size: var(--font_size_m);
    font-weight: 700;
    line-height: 1.4em;
}
.cta_01 a {
    color: var(--primary_color);
    text-decoration: underline;
    border: none!important;
}
.cta_01 a[class*=btn_]{
    color: #ffffff;
    text-decoration: none;
    margin: 8px auto;
    position: relative;
}
.cta_01 a[class*=btn_]:before {
    content: none;
}
.cta_01 a[class*=btn_]:after {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 10px;
    height: 12px;
    margin-left: 8px;
    background: #ffffff;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
}

/***********************************
** other / ニュース詳細＞提供会社
***********************************/
.source2 {
    text-align: center;
    border: solid 1px #cccccc;
    padding: 32px 24px 24px 24px;
    margin: 32px 0 24px 0;
    position: relative;
}
.source2:before {
    content: "記事提供元";
    font-size: var(--font_size_s);
    font-weight: bold;
    display: inline-block;
    padding: 0 8px;
    background: #ffffff;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -43px;
}
a.logo {
    display: inline-block;
    margin: 0 auto;
    border: none!important;
}
.source2 img {
    width: auto;
    max-width: 230px;
    display: block;
}
.source2 b {
    font-size: var(--font_size_s);
    font-weight: 700;
    text-align: center;
    display: block;
    margin: 16px 0;

}
.source2 p {
    font-size: var(--font_size_s);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
}
/***********************************
** other / 共通＞おすすめコンテンツ３連
***********************************/

.bdash_recommend_contents.col3 {
    padding: 12px;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
}

.bdash_recommend_contents.col3 li {
    width: 300px;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
}
.bdash_recommend_contents.col3 li a,
.bdash_recommend_contents.col3 li iframe {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
.bdash_recommend_contents.col3 li img {
    display: block;
}
@media screen and (max-width: 768px) {
    .bdash_recommend_contents.col3 li {
        width: 50%;
    }
}
@media screen and (max-width: 768px) {
    .bdash_recommend_contents.col3 li {
        width: 100%;
    }
}




.bdash_recommend_contents-b.col3 {
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
.bdash_recommend_contents-b.col3 li {
    width: 300px;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
    display: none;
}
.bdash_recommend_contents-b.col3 li a {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
.bdash_recommend_contents-b.col3 li img {
    display: block;
}
@media screen and (max-width: 768px) {
    .bdash_recommend_contents-b.col3 {
        justify-content: start;
    }
}


.bdash_recommend_contents-d.col3 {
    padding: 12px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.bdash_recommend_contents-d.col3 li {
    width: 33.33%;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
}
.bdash_recommend_contents-d.col3 li a {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
.bdash_recommend_contents-d.col3 li img {
    display: block;
}
@media screen and (max-width: 768px) {
    .bdash_recommend_contents-d.col3 {
        justify-content: start;
        padding: 8px;
    }
    .bdash_recommend_contents-d.col3 li {
        padding: 8px;
    }
}






.bdash_recommend_contents-c.col3 {
    padding: 12px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.bdash_recommend_contents-c.col3 li {
    width: 33.33%;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
    display: none;
}
.bdash_recommend_contents-c.col3 li a {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
.bdash_recommend_contents-c.col3 li img {
    display: block;
}
@media screen and (max-width: 768px) {
    .bdash_recommend_contents-c.col3 {
        padding: 8px;
        display: block;
    }
    .bdash_recommend_contents-c.col3 li {
        width: 100%;
        max-width: 320px;
        padding: 8px;
        margin: 0 auto;
    }
    .bdash_recommend_contents-c.col3 li a {

    }
}





/***********************************
** other / 会計ファームLP
***********************************/
#recommend_firm {
    padding-bottom: 20px;
}
#recommend_firm .fv {
    margin: 16px 0;
}
#recommend_firm .fv img {
    display: block;
    margin-bottom: 8px;
}
.recommend_list h2 {
    font-size: var(--font_size_m);
    font-weight: 700;
    text-align: center;
    display: block;
    border: none;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 24px;
}
.recommend_list h2:after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background: var(--dark_color);
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -50px;

}
.recommend_list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}
.recommend_list ul li {
    width: 33.33%;
    padding: 8px;
    box-sizing: border-box;
}
.recommend_list ul li .inner {
    box-shadow: var(--box_shadow);
    height: 100%;
    position: relative;
}

.recommend_list ul li .txt {
    margin: 16px;
    line-height: 1.3em;
    padding-bottom: 110px;
    /*padding-bottom: 60px;*/
}
.recommend_list ul li .btnset {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.recommend_list ul li .txt > i {
    color: var(--primary_color);
    font-size: 12px;
    line-height: 20px;
    display: inline-block;
    padding: 0 8px;
    margin: 0 4px 4px 0;
    background: var(--water_color);
    border-radius: 3px;
}
.recommend_list ul li b {
    font-weight: 700;
    display: block;
    margin: 0 0 8px 0;
}
.recommend_list ul li span {
    font-size: var(--font_size_s);
    display: block;
    margin-bottom: 8px;
}
.recommend_list ul li a {
    font-size: var(--font_size_s);
    width: 100%;
    margin: 8px 0 0 0;
    padding: 12px;
}
.recommend_list ul li a.disabl {
    background: #cccccc;
}
.recommend_list ul li a.disabl:hover {
    opacity: 1;
    cursor: inherit;
}
.recommend_list ul li a i {
    margin-left: 8px;
}
.recommend_list ul li a.btn_secondary i {
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    margin-left: 8px;
    background: #fff;
}
.recommend_list ul li a:before {
    content: none;
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    .recommend_list ul li {
        width: 50%;
    }
}
@media screen and (max-width: 768px) {
    .recommend_list ul li {
        width: 50%;
    }
}
@media screen and (max-width: 480px) {
    .recommend_list ul li {
        width: 100%;
    }
}






.top_side_sp {
    display: none;
}
@media screen and (max-width: 1024px) {
    .top_side_sp {
        display: block;
    }
    .top_side_sp > div {
        margin: 16px 0;
    }
    .top_side_sp .bdash_side_banner{
        padding: 8px;
        background: var(--water_color);
    }
    .top_side_sp #side_banner1 {
        max-width: 300px;
        margin: 0 auto;
    }
}




/*-- --------- --------- --------- --*/
/*-- マネジーからのお知らせ＞一覧 --*/
/*-- --------- --------- --------- --*/
#notice .list_header {
    margin-top: 40px;
    display: flex;
    align-items: end;
    justify-content: flex-start;
}
#notice .list_header button {
    background: var(--primary_color);
    color: #fff;
    border: 0;
    height: 35px;
    margin-left: 20px;
    padding: 0 10px;
}
#notice .list_header span {
    font-size: var(--font_size_s);
    line-height: 1.2em;
}
#notice .list_header span br {
    display: none;
}
#notice .list_header select {
    font-size: var(--font_size_r);
    width: 140px;
    float: right;
    padding: 8px 24px 8px 8px;
}
#notice ul.list {
    border-bottom: solid 1px var(--light_color);
    margin: 16px 0 40px 0;
}
#notice ul.list li {
    border-top: solid 1px var(--light_color);
}
#notice ul.list li a {
    display: block;
    padding: 16px;
}
#notice ul.list li b {
    font-size: var(--font_size_r);
    font-weight: 700;
    line-height: 1.4em;
    display: block;
    margin-bottom: 8px;
}
#notice ul.list li b i {
    color: #ffffff;
    font-size: var(--font_size_xs);
    line-height: 1.1em;
    vertical-align: bottom;
    display: inline-block;
    padding: 4px 8px;
    background: var(--accent_color);
    border-radius: 20px;
    margin-right: 8px;
}
#notice ul.list li b i:before {
    content: "未読";
}
#notice ul.list li span {
    font-size: var(--font_size_s);
    text-align: right;
    display: block;
}

#notice ul.list li.read {
    border-top: solid 1px #ffffff;
}
#notice ul.list li.read a {
    background: #F3F6F9;
}
#notice ul.list li.read b i {
    display: none;
}

@media screen and (max-width: 768px) {
    #notice .list_header {
        margin-top: 24px;
        justify-content: space-between;
    }
    #notice .list_header span br {
        display: inline;
    }

    #notice ul.list {
        margin: 8px 0 24px 0;
    }
    #notice ul.list li a {
        padding: 8px;
    }
    #notice ul.list li b {
        margin-bottom: 4px;
    }

}
/*-- --------- --------- --------- --*/
/*-- マネジーからのお知らせ＞詳細 --*/
/*-- --------- --------- --------- --*/
#notice.detail h1 {
    font-size: var(--font_size_l);
    line-height: 1.4em;
    margin: 24px 0 8px 0;
}
#notice.detail .date {
    font-size: var(--font_size_s);
    text-align: right;
    margin: 8px 0 24px 0;
}
#notice.detail h2 {
    color: var(--basic_color);
    font-size: var(--font_size_m);
    font-weight: 700;
    margin: 40px 0 24px;
}
#notice.detail h3 {
    color: var(--basic_color);
    font-size: var(--font_size_r);
    margin: 40px 0 24px 0;
}
#notice.detail img {
    max-width: 100%;
}
#notice.detail .outline b {
    font-size: inherit;
    font-weight: 700;
}
@media screen and (max-width: 768px) {
    #notice.detail h2 {
        margin: 24px 0 16px;
    }
    #notice.detail h3 {
        color: var(--basic_color);
        font-size: var(--font_size_r);
        margin: 24px 0 16px 0;
    }
}


.other {
    text-align: center;
}

.other .detail_title h1 i,
.other p i {
    font-size: inherit;
    font-style: normal;
    display: inline-block;
}





/*-- --------- --------- --------- --*/
/*-- WTC_DEV-4665 Manegy＞退会フォーム制作：フロント --*/
/*-- --------- --------- --------- --*/
#resign2 h1 i {
    font-size: inherit;
    display: inline-block;
}
#resign2 .mypage {
    text-align: center;
}
#resign2 p {
    margin: 8px 0;
}
#resign2 p.center {
    text-align: center;
}
#resign2 p.next {
    text-align: right;
    margin-top: 24px;
}
#resign2 p.next a {
    color: var(--primary_color);
    text-decoration: underline;
}
#resign2 p.next a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: solid 2px var(--primary_color);
    border-right: solid 2px var(--primary_color);
    transform: rotate(45deg);
    color: var(--primary_color);
    margin: 0 0 2px 4px;
}
#resign2 .total_point2 {
    margin: 16px auto;
}
#resign2 form{
    max-width: 600px;
    margin: 0 auto;
}
#resign2 form h5 {
    font-size: var(--font_size_r);
    font-weight: 700;
    line-height: 1.3em;
    border-left: solid 4px var(--primary_color);
    padding-left: 8px;
    margin: 16px 0;
}
#resign2 form h5 i {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.0em;
    display: inline-block;
    padding: 4px;
    background: var(--accent_color);
}
#resign2 form textarea {
    margin: 0;
    box-sizing: border-box;
}
#resign2 form button.btn_secondary {
    margin: 16px auto;
}
#resign2 input[type=checkbox] + label {
    line-height: 1.3em;
    display: block;
    margin: 8px 0;
    cursor: pointer;
}
#resign2 input[type=checkbox] + label i {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background: #cccccc;
    border-radius: 2px;
    position: relative;
}
#resign2 input[type=checkbox] + label i:before {
    content: "";
    display: block;
    width: 25%;
    height: 50%;
    transform: rotate(45deg);
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2px;
    margin: auto auto;
}
#resign2 input[type=checkbox]:checked + label i {
    background: var(--primary_color);
}

/*-- --------- --------- --------- --*/
/*-- WTC_DEV-4603 Manegy＞規約変更モーダル：フロント --*/
/*-- --------- --------- --------- --*/

#termsChange {
    display: none;
    opacity: 0;
    transition: all 0.3s linear;
}
#termsChange.show {
    display: block;
    opacity: 1;

}
#termsChange .inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
    background: rgba(0,0,0,0.7);
}
#termsChange .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#termsChange .card {
    text-align: center;
    background: #ffffff;
    max-width: 600px;
    margin: 10px;
    position: relative;
}
#termsChange .content {
    text-align: left;
    background: #efefef;
    padding: 20px 40px;
    margin-bottom: 16px;
    max-height: 200px;
    /*overflow-y: scroll;*/
    box-sizing: border-box;
}
#termsChange .content ul {
    margin: 20px 0;
}
#termsChange .content ul li {
    list-style: disc;
    margin: 8px 0;
    margin-left: 16px;
}
#termsChange h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0;
}
#termsChange .close_btn {
    color: #ffffff;
    font-size: var(--font_size_m);
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 24px;
    background: var(--basic_color_light);
    cursor: pointer;
}
#termsChange .close_btn:before ,
#termsChange .close_btn:after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    transform: rotate(45deg);
}
#termsChange .close_btn:before {
    transform: rotate(135deg);
}
#termsChange a.txt_link {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    text-decoration: underline;
}
#termsChange button.btn_secondary {
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    #termsChange .content {
        padding: 20px;
    }
}
#termsChange a.txt_link {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    text-decoration: underline;
}
#termsChange button.btn_secondary {
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    #termsChange .content {
        padding: 20px;
    }
}

/*-- --------- --------- --------- --*/
/*-- WTC_DEV-4906 Manegy＞アンケートモーダル：実装 --*/
/*-- --------- --------- --------- --*/

#modalQuestion {
    display: none;
    opacity: 0;
    transition: all 0.3s linear;
}
#modalQuestion.show {
    display: block;
    opacity: 1;

}
#modalQuestion .inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
    background: rgba(0,0,0,0.7);
}
#modalQuestion .close {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#modalQuestion .card {
    text-align: center;
    background: #ffffff;
    max-width: 600px;
    min-width: 400px;
    margin: 10px;
    position: relative;
}
#modalQuestion .content {
    text-align: left;
    background: #efefef;
    padding: 20px 40px;
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: scroll;
    box-sizing: border-box;
}
#modalQuestion .content .input_container{
    margin-top: 5px;
}
#modalQuestion .content input[type="checkbox"] + label{
    display: flex;
}
#modalQuestion .content input[type="checkbox"] + label > span{
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin: 5px 5px;
    padding: 0 1px;
    position: relative;
    background: #cccccc;
}
#modalQuestion .content input[type="checkbox"]:checked + label > span{
    background: #000;
}
#modalQuestion .content input[type="checkbox"] + label > span::after{
    content: "";
    display: block;
    width: 5px;
    height: 8px;
    transform: rotate(45deg);
    border-bottom: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2px;
    margin: auto auto;
}
#modalQuestion #caution {
    display: none;
    color: red;
}
#modalQuestion #caution.show {
    display: block;
}
#modalQuestion h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 10px;
}
#modalQuestion .close_btn {
    color: #ffffff;
    font-size: var(--font_size_m);
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 24px;
    background: var(--basic_color_light);
    cursor: pointer;
}
#modalQuestion .close_btn:before ,
#modalQuestion .close_btn:after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    transform: rotate(45deg);
}
#modalQuestion .close_btn:before {
    transform: rotate(135deg);
}
#modalQuestion a.txt_link {
    color: var(--primary_color);
    font-size: var(--font_size_s);
    text-decoration: underline;
}
#modalQuestion button.btn_secondary {
    margin: 16px auto;
}
@media screen and (max-width: 768px) {
    #modalQuestion .card {
        max-width: 400px;
        min-width: 0;
        width: 95%;
    }
    #modalQuestion .content {
        padding: 20px;
    }
}

/*-- --------- --------- --------- --*/
/*-- WTC_DEV-4664 転職決定者用満足度アンケートの内容変更 --*/
/*-- --------- --------- --------- --*/
.nps_support {
    font-size: 14px;
    text-align: center;
    display: none;
}
.normal {
    display: block;
}
.nps_support h1 {
    font-size: 18px;
    margin: 16px 0;
}
.nps_support h2 {
    font-size: 14px;
    border: none;
    display: block;
    margin: 16px 0;
}
.nps_support .copy {
    background: var(--water_color);
    margin: 16px 0;
    padding: 16px 8px;
    border-radius: 10px;
}
.nps_support .copy a {
    margin: 8px auto;
}
.nps_support .copy span {
    color: var(--accent_color);
    font-size: 10px;
    display: block;
}
.nps_support dl {
    counter-reset: number 0;
}
.nps_support dl dt {
    font-weight: 700;
    line-height: 1.5em;
    display: flex;
    margin: 16px 0 8px 0;
    align-items: center;
}
.nps_support dl dt:before {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.0em;
    text-align: center;
    display: inline-block;
    width: 40px;
    margin-right: 4px;
    counter-increment: number;
    content: counter(number) "";
}
.nps_support dl dd {
    border: solid 1px #dedede;
}
.nps_support dl dd img {
    max-width: 200px;
    display: block;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .nps_support h1 br {
        display: none;
    }
}



/*-- WTC_DEV-5269 Manegy＞ニュース記事リンクカード --*/
/*
.news_detail .blogCard {
    padding: 0 60px;
}*/
.news_detail .blogcard {
    width: 100%;
    border: solid 1px #ddd;
    border-radius: 3px;
    margin: 16px auto;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
}
/*
.news_detail .blogcard:before {
    content: "関連記事はこちら";
    background: #65a8f2;
    color: #fff;
    width: 300px;
    text-align: center;
    position: absolute;
    top: -15px;
    left: 20px;
    border-radius: 3px;
    font-weight: bold;
    padding: 3px 0;
}
*/
.news_detail .blogcard .thumb {
    width: 30%;
    max-width: 300px;
    margin-right: 16px;
}
.news_detail .blogcard .thumb img {
    margin: 0;
}
.news_detail .blogcard .text {
    line-height: 1.5em;
    flex: 1;
    padding-bottom: 24px;
}
.news_detail .blogcard .text p {
    font-weight: bold;
    margin: 0 0 8px 0;
}
.news_detail .blogcard .text span {
    font-size: 14px;
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/*
.news_detail .blogcard .text:after {
    content: "続きを読む";
    color: var(--primary_color);
    font-weight: bold;
    text-decoration: underline;
    display: block;
    padding-right: 24px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 16px;
    background: url(https://icongr.am/fontawesome/angle-double-right.svg?size=128&color=004986) no-repeat center right / auto 100%;
}
*/
.news_detail .blogcard .text b {
    color: var(--primary_color);
    font-weight: bold;
    text-decoration: underline;
    display: block;
    padding-right: 24px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 16px;
    background: url(https://icongr.am/fontawesome/angle-double-right.svg?size=128&color=004986) no-repeat center right / auto 100%;
}

.news_detail .blogCard2 {
    padding: 0 60px;
}
.news_detail .blogCard2 .blogcard {
    width: 100%;
    border: solid 1px #ddd;
    border-radius: 3px;
    margin: 16px auto;
    display: flex;
    padding: 0;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
    align-items: center;
}
.news_detail .blogCard2 .blogcard .thumb {
    width: 30%;
    max-width: 300px;
    margin: 0;
    order: 2;
}
.news_detail .blogCard2 .blogcard .thumb img {
    margin: 0;
}
.news_detail .blogCard2 .blogcard .text {
    line-height: 1.5em;
    flex: 1;
    padding: 16px;
    order: 1;
}
.news_detail .blogCard2 .blogcard .text p {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 0 8px 0;
}
.news_detail .blogCard2 .blogcard .text span {
    font-size: 14px;
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.news_detail .blogCard2 .blogcard .text:after {
    content: none;
}

.news_detail .blogtxt {
    margin: 16px 0;
}
.news_detail .blogtxt p {
    color: var(--primary_color);
    font-weight: bold;
    display: inline-block;
    margin: 0;
    text-decoration: underline;
}
.news_detail .blogtxt p img {
    width: 20px;
    display: inline-block;
    vertical-align: text-top;
}
@media only screen and (max-width:480px) {
    .news_detail .blogCard {
        padding: 0;
    }

    .news_detail .blogcard {
        padding: 16px;
        display: block;
    }
    .news_detail .blogcard .thumb {
        max-width: 100%;
        margin-right: 0;
        width: auto;
    }
    .news_detail .blogcard .thumb img {
        margin: 0;
    }
    .news_detail .blogcard .text {
        line-height: 1.6em;
    }
    .news_detail .blogcard .text p {
        margin: 10px 0 0 0;
        font-size: 14px;
    }
    .news_detail .blogcard .text span {
        display: none;
    }


    .news_detail .blogCard2 {
        padding: 0;
    }

    .news_detail .blogCard2 .blogcard {
        display: block;
    }
    .news_detail .blogCard2 .blogcard .thumb {
        max-width: 100%;
        margin-right: 0;
        width: auto;
    }
    .news_detail .blogCard2 .blogcard .thumb img {
        margin: 0;
    }
    .news_detail .blogCard2 .blogcard .text {
        line-height: 1.6em;
        padding: 8px;
    }
    .news_detail .blogCard2 .blogcard .text p {
        margin: 0;
        font-size: 14px;
    }
    .news_detail .blogCard2 .blogcard .text span {
        display: none;
    }
}

/*-- WTC_DEV-7355 Manegy＞ニュース目次 --*/
.news_detail .index_content {
    border-radius: 5px;
    margin-top: 20px;
    border: solid 2px var(--water_color);
}
.news_detail .index_content h3 {
    font-size: 18px;
    background: var(--water_color);
    border-radius: 4px 4px 0 0;
    padding: 10px 20px;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
}
.news_detail .index_content h3 span {
    font-size: 16px;
    margin-left: 25px;
    position: relative;
}
.news_detail .index_content h3 span:before {
    content: '';
    width: 10px;
    height: 2px;
    background: #a4bed8;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
    position: absolute;
}
.news_detail .index_content ol {
    padding: 20px 30px 10px;
    list-style: none;
}
.news_detail .index_content ol li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}
.news_detail .index_content ol li:before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    background-color: #a4bed8;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 0;
}
.news_detail .index_content ol li a {
    border-bottom: 0;
    color: var(--primary_color);
}

@media screen and (max-width: 768px) {
    .news_detail .index_content {
        border-radius: 5px;
        margin-top: 20px;
        border: solid 2px var(--water_color);
    }
    .news_detail .index_content h3 {
            font-size: 16px;
        background: var(--water_color);
        border-radius: 4px 4px 0 0;
            padding: 10px 15px;
        display: block;
        margin-bottom: 0;
    }
    .news_detail .index_content ol {
            padding: 15px 15px 10px 20px;
    }
    .news_detail .index_content ol li {
        position: relative;
            padding-left: 10px;
        margin-bottom: 5px;
            font-size: 14px;
    }
    .news_detail .index_content ol li:before {
        content: "";
        width: 7px;
        height: 7px;
        display: inline-block;
        background-color: #a4bed8;
        border-radius: 50%;
        position: absolute;
        top: 7px;
            left: -5px;
    }
    .news_detail .index_content ol li a {
        border-bottom: 0;
        color: var(--primary_color);
    }
}

/*-- WTC_DEV-7331 Manegy＞ニュースページへのレコメンド表示について --*/
.news_detail #bdrecommend .slick-track {
    padding: 4px 0;
}
.news_detail #bdrecommend .slick-track li {
    padding: 4px 4px 8px 4px;
    display: block!important;
}
.news_detail #bdrecommend .slick-track li a {
    display: block;
    background: #ffffff;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 2px 4px 0 rgba(0,0,0,0.05);
}
.news_detail #bdrecommend .slick-track li a b {
    font-weight: bold;
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 4.2em;
}
.news_detail #bdrecommend .slick-track li a i {
    font-size: 14px;
    line-height: 1.2em;
    display: block;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height: 1.2em;
}
.news_detail #bdrecommend .slick-track li a span {
    color: var(--primary_color);
    font-size: 14px;
    text-align: center;
    display: block;
    margin-top: 8px;
    border: solid 1px var(--primary_color);
}
.news_detail #bdrecommend .slick-dots {
    bottom: -20px;
}
.slick-dotted.slick-slider {
    margin-bottom: 24px;
}
.news_detail #bdrecommend .slick-arrow.prev {
    position: absolute;
    top: 40%;
    left: 8px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background: var(--basic_color);
    cursor: pointer;
}
.news_detail #bdrecommend .slick-arrow.prev:before {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    background: #ffffff;
    margin: auto auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 4px;
    bottom: 0;
    transform: rotate(180deg);
}
.news_detail #bdrecommend .slick-arrow.next {
    position: absolute;
    top: 40%;
    right: 8px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background: var(--basic_color);
    display: flex;
    cursor: pointer;
}
.news_detail #bdrecommend .slick-arrow.next:before {
    content: "";
    display: inline-block;
    clip-path: polygon(0% 0%, 45% 0, 100% 50%, 45% 100%, 0% 100%);
    width: 8px;
    height: 10px;
    background: #ffffff;
    margin: auto auto;
    position: absolute;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
}
.news_detail #bdrecommend .slick-arrow:hover {
    opacity: 0.5;
}
.slick-dots li.slick-active button:before {
    color: var(--primary_color);
}

/*-- --------- --------- --------- --*/
/*-- 商談申し込みページ --*/
/*-- --------- --------- --------- --*/

#appointment h1 {
    text-align: center;
}
#appointment h2.sns.text_center {
    font-size: var(--font_size_m);
    font-weight: bold;
    display: block;
    text-align: center;
    border: none;
}
#appointment #regist {
    justify-content: center;
}
#appointment .caution {
    color: var(--accent_color);
}
#appointment .box.bg {
    padding: 24px;
}
#appointment dl {
    margin: 16px 0;
}
#appointment dt {
    margin: 0 0 4px 0;
}
#appointment #regist dd {
    margin: 0;
}
#appointment h4 {
    font-size: var(--font_size_r);
    font-weight: 700;
    text-align: center;
    margin: 40px 0;
}
#appointment h4 span {
    display: inline-block;
}
#appointment .col2 > div {
    width: 49%;
}
#appointment dd p:last-child {
    margin: 8px 0;
}
#appointment .col2 ,
#appointment .col3 {
    align-items: center;
}
#appointment .col2 > input,
#appointment .col3 > input {
    margin: 0 4px;
}
#appointment .col2 > input:first-child,
#appointment .col3 > input:first-child {
    margin-left: 0;
}
#appointment .col2 > input:last-child,
#appointment .col3 > input:last-child {
    margin-right: 0;
}
@media screen and (max-width: 768px) {
    #appointment .box.bg {
        padding: 16px;
    }
    #appointment h4 {
        margin: 20px 0;
    }
}

#appointment .questions label {
    display: flex;
    align-items: center;
}
#appointment .questions label input {
    flex: 1;
    margin-left: 8px;
}
#appointment .questions .term {
    padding-left: 30px;
}

.appointment_submit {
    font-size: 14px;
}
.appointment_submit p {
    text-align: center;
    margin: 16px 0;
}
.appointment_submit a {
    color: var(--primary_color);
    text-decoration: underline;
}


/*-- パートナーコード入力 --*/
#partnerCode dd {
    display: none;
}
#partnerCodeOpen.done {
    color: #004986;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
}
#partnerCodeOpen.done:after {
    content: "をお持ちの方はこちら";
}

/* ========================================
WTC_DEV-7383 Manegy掲載用記事のパーツ作成依頼
======================================== */

/* =================== 共通 =================== */
.agent_list,
.agent_service {
    margin: 30px auto;
}
.agent_list .inner,
.agent_service .inner {
    margin: 0 auto;
    width: 100%;
    max-width: 840px;
    box-shadow: 0 0 10px 0 rgba(1,36,76,.05);
}
.agent_list table {
    border-collapse: collapse;
    margin: 0 auto !important;
}
.news_detail .agent_list ul,
.news_detail .agent_service ul {
    padding: 0;
}
.agent_list li,
.agent_service li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    list-style: none;
}
.agent_list li:last-child,
.agent_service li:last-child {
    margin-bottom: 0;
}
.agent_list li::before,
.agent_service li::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: var(--primary_color);
    border-radius: 50%;
}
.agent_list table td{
    text-align: center;
    vertical-align: middle;
    border: solid 1px #b7cbdd !important;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .agent_list,
    .agent_service {
        font-size: 14px;
    }
    .agent_list .inner,
    .agent_service .inner {
        max-width: 100%;
    }
    .agent_list li,
    .agent_service li {
        position: relative;
        padding-left: 10px;
        margin-bottom: 5px;
    }
    .agent_list li:last-child,
    .agent_service li:last-child {
        margin-bottom: 0;
    }
    .agent_list li::before,
    .agent_service li::before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 7px;
        left: 0;
        width: 5px;
        height: 5px;
        background-color: var(--primary_color);
        border-radius: 50%;
    }
    .agent_list th,.agent_service th,
    .agent_list td,.agent_service td {
        font-size: 1.2rem;
    }
    .table-wrap{
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap table{
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 10px;
    }
    .table-wrap th,
    .table-wrap td{
        white-space: nowrap;    /* 折り返しせず横に並べる */
    }
}


/* =================== サービス一覧 =================== */
.agent_list .inner {
    border-radius: 5px 5px 0 0;
}
.agent_list .title {
    background: var(--primary_color);
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
}
.agent_list tr {
    border-bottom: solid 1px var(--water_color);
}
.agent_list tr:last-child {
    border-bottom: 0;
}
.agent_list th, .agent_list td {
    border: 0 !important;
    padding: 1em;
    background: #fff !important;
}
.agent_list th {
    font-weight: bold;
    text-align: center;
    width: 25%;
    min-width: 4em;
    border: solid 1px #b7cbdd !important;
    vertical-align: middle;
}
.agent_list td {
    padding: 1em 1.5em !important;
    border: solid 1px #b7cbdd !important;
}
.agent_list th.list01 {
    background: var(--water_color) !important;
    padding: 1em 1.5em !important;
}
.agent_list td.list02 {
    background: var(--water_color) !important;
    border-bottom: solid 1px #b7cbdd !important;
    padding: 0.6em 1em !important;
    font-weight: bold;
    text-align: center;
}

.agent_list .accordion summary {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.3em 2em;
    color: var(--primary_color);
    font-weight: 600;
    cursor: pointer;
    background-color: #d3e3f2;
}
.agent_list .accordion summary::-webkit-details-marker {
    display: none;
}
.agent_list .accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid var(--primary_color);
    border-right: 3px solid var(--primary_color);
    content: '';
    transition: transform .3s;
}
.agent_list .accordion[open] summary::after {
    transform: rotate(225deg);
}
.agent_list .accordion th,
.agent_list .accordion td {
    padding: 0.8em 1.5em !important;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .agent_list .title {
        font-size: 15px;
    }
    .agent_list .accordion th,
    .agent_list .accordion td {
        padding: 0.5em 1em !important;
    }
    .agent_list td.list02 {
        padding: 0.5em 1em !important;
    }
    .agent_list tr:first-child {
        border-bottom: 0;
    }
}

/* =================== 吹き出し ================== */
.agent_comment {
    display: flex;
    margin: 30px auto;
    justify-content: space-between;
    align-self: center;
}
.agent_comment .image {
    width: 20%;
    max-width: 120px;
}
.agent_comment img {
    border-radius: 100vw;
    border: solid 2px #d3e3f2;
}
.agent_comment .fukidashi {
    width: 80%;
    position: relative;
    background: #f9fafb;
    border: solid 1px #d3e3f2;
    box-sizing: border-box;
    border-radius: 5px;
    align-self: center;
    padding: 15px 35px;
}
.agent_comment .fukidashi:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -25px;
    margin-top: -12px;
    border: 10px solid transparent;
    border-right: 22px solid #f9fafb;
    z-index: 2;
}
.agent_comment .fukidashi:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -29px;
    margin-top: -13px;
    border: 11px solid transparent;
    border-right: 24px solid #d3e3f2;
    z-index: -2;
}
.agent_comment .fukidashi p {
    margin: 0;
    padding: 0;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    /*font-weight: bold;*/
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
    .agent_comment {
        width: 100%;
    }
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .agent_comment {
        width: 100%;
    }
    .agent_comment .fukidashi {
        width: 75%;
        padding: 10px;
        font-size: 13px;
        line-height: 1.2rem;
    }
    .agent_comment .fukidashi:before {
        top: 35px;
        left: -20px;
    }
    .agent_comment .fukidashi:after {
        top: 35px;
        left: -23px;
    }
}

/* =================== おすすめの組み合わせ =================== */
.agent_list.combi .btn_secondary {
    padding: 10px 50px;
    margin: 0 auto;
    width: 100%;
}
.agent_list th {
    font-weight: bold;
    text-align: center;
    width: auto;
    min-width: 4em;
    border: solid 1px #b7cbdd !important;
    vertical-align: middle;
}
.agent_list.combi td:last-child {
    background: #f9fafb !important;
    border-left: solid 1px var(--water_color) !important;
    vertical-align: middle;
}
.agent_list.combi td.list03 {
    background: var(--water_color) !important;
    border-bottom: solid 1px #b7cbdd !important;
    border-left: solid 1px #b7cbdd !important;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .agent_list.combi td {
        display: block;
    }
    .agent_list.combi td:last-child {
        border-left: 0 !important;
    }
    .agent_list.combi td.list02 {
        border-bottom: solid 1px #b7cbdd !important;
    }
    .agent_list.combi td.list03 {
        display: none;
    }
}

/* =================== サービス詳細 =================== */
.agent_service .title {
    background: #e5ecf3;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.agent_service tr {
    border-bottom: solid 1px var(--water_color);
}
.agent_service tr:last-child {
    border-bottom: 0;
}
.agent_service th, .agent_service td {
    border: 0 !important;
    padding: 1em;
    background: #fff !important;
}
.agent_service th {
    font-weight: bold;
    text-align: center;
    width: 25%;
    min-width: 4em;
    border-right: solid 1px var(--water_color) !important;
    vertical-align: middle;
}
.agent_service td {
    padding: 1em 1.5em !important;
}

/* =================== MSAgent CTA =================== */
.agent_cta {
    
}
.agent_cta .attention span {
    color: var(--primary_color);
    font-weight: bold;
    position: relative;
}
.agent_cta .attention span:before {
    content: url('/img/common/attention_left.png');
    position: absolute;
    top: -5px;
    left: -25px;
    display: inline-block;
}
.agent_cta .attention span:after {
    content: url('/img/common/attention_right.png');
    position: absolute;
    top: -5px;
    right: -25px;
    display: inline-block;
}
.agent_cta .btn_primary {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 10px auto;
    box-sizing: border-box;
}
.agent_cta a.btn_primary {
    border-bottom: 0;
}
.agent_cta p {
    width: 350px;
    margin: 0 auto;
}
.agent_cta p span {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}
.agent_cta p span:before,
.agent_cta p span:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--water_color);
}
.agent_cta p span:before {
    margin-right: 1rem;
}
.agent_cta p span:after {
    margin-left: 1rem;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .agent_cta .btn_primary,
    .agent_cta p {
        width: 100% !important;
    }
}
/* =================== news pagenation =================== */
#news .pagenation li {
    display: inline-block;
    margin: 3px 5px;
    font-size: 16px;
}
#news .pagenation li a {
    padding: .25em .75em;
    color: rgb(20, 20, 21);
    background-color: rgb(229, 229, 229);
}
#news .pagenation {
    padding: 30px 0;
    margin: 0;
    text-align: center;
    font-size: 0;
}
#news .pagenation .pagenation--active .page-numbers {
background-color: #fff !important;
padding: 4px 4px 0 4px;
}
#news .pagenation .pagenation--prev .page-numbers {
    background-color: #fff !important;
}
#news .pagenation .pagenation--next .page-numbers {
    background-color: #fff !important;
}
#news .pagenation li span.dots{
color: #000;
}
@media screen and (max-width: 736px) {
    #news .pagenation {
        padding: 25px 0;
    }
}




#news .news_contents ul li a {
    align-items: start;
}
#news .news_contents ul li a .news_title p {
    width: auto;
    margin-bottom: 8px;
}
#news .news_contents ul li a .thumb {
    margin-right: 16px;
}
#news .news_contents ul li a .news_title {
    margin-left: 0;
}
#news .news_contents ul li a .news_title_sub img {
    display: none;
}
#news .news_contents ul li a .news_author,
#news .news_contents ul li a .dateTime,
#news .news_contents ul li a .bookmarkNum {
    font-size: 14px;
    line-height: 1.4em;
    display: inline-block;
    margin-right: 16px;
}
#news .news_contents ul li a .news_author:before,
#news .news_contents ul li a .dateTime:before,
#news .news_contents ul li a .bookmarkNum:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    vertical-align: top;
}
#news .news_contents ul li a .news_author:before {background: url("https://icongr.am/fontawesome/pencil.svg?size=128&color=141415") no-repeat center center / 100% auto;}
#news .news_contents ul li a .dateTime:before {background: url("https://icongr.am/fontawesome/clock-o.svg?size=128&color=141415") no-repeat center center / 100% auto;}
#news .news_contents ul li a .bookmarkNum:before {background: url("https://icongr.am/fontawesome/bookmark.svg?size=128&color=141415") no-repeat center center / 100% auto;}

@media screen and (max-width: 768px) {
    #news .news_contents ul {
        margin: 0;
    }
    #news .news_contents ul li {
        padding: 0;
        margin: 0;
    }
    #news .news_contents ul li a {
        position: relative;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    #news .news_contents ul li a .thumb {
        display: none;
    }
    #news .news_contents ul li a .news_title {
        order: 1;
        padding-bottom: 0;
    }
    #news .news_contents ul li a .news_title_sub p {
        box-sizing: border-box;
    }
    #news .news_contents ul li a .news_title_sub p img {
        float: right;
        margin: 0 0 8px 8px;
        width: 30%;
        height: auto;
        object-fit: contain;
        object-position: 50% 50%;
        display: block;
        font-size: 5px;
        overflow: hidden;
        aspect-ratio: 6 / 4;
        border: solid 1px var(--light_color);
    }
    #news .news_contents ul li a .news_author,
    #news .news_contents ul li a .dateTime,
    #news .news_contents ul li a .bookmarkNum {
        font-size: 12px;
        margin-top: 0;
        margin-right: 8px;
    }
    #news .news_contents ul li a .news_author:before,
    #news .news_contents ul li a .dateTime:before,
    #news .news_contents ul li a .bookmarkNum:before {
        width: 14px;
        height: 14px;
    }
    #news .news_contents ul li a .bookmarkNum + p {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    #news .news_contents ul li a .news_title_sub p {
    }
}




/*-- WTC_DEV-9027 --*/
.news_detail .outline .authorProfile .profileThumb {
    width: 120px;
    padding: 8px;
    border: solid 1px #efefef;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
    margin-right: 16px;
    float: left;
}
.news_detail .outline .authorProfile img {
    display: block;
    height: auto;
    width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #ffffff;
}
.news_detail .outline .authorProfile h2 {
    margin-bottom: 24px;
}
.news_detail .outline .authorProfile h3 {
    background: none;
    border: none;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
.news_detail .outline .authorProfile p {
    margin: 8px 0 0 0;
    padding-left: 136px;
}
@media screen and (max-width: 480px) {
    .news_detail .outline .authorProfile .profileThumb {
        float: right;
        margin: 0 0 8px 8px;
    }
    .news_detail .outline .authorProfile p {
        padding: 0;
    }
}
/*-- WTC_DEV-9598 --*/
.news_detail .recommendation {
    margin-block: 1.6rem;
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 2rem 25px 2.5rem;
}
.news_detail .recommendation p {
    margin: 0 0 1.2rem;
    font-size: 1.8rem;
    font-weight: bold;
}
.news_detail .recommendation ul {
    padding: 0;
}
.news_detail .recommendation ul li {
    padding: 0 0 0 15px;
    position: relative;
    list-style: none;
}
.news_detail .recommendation ul li:nth-of-type(n+2) {
    margin: 1rem 0 0;
}
.news_detail .recommendation ul li:after {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100vw;
    position: absolute;
    top: 0.6em;
    left: 3px;
    background: var(--primary_color);
    content: "";
}
.news_detail .recommendation ul li a {
    border: none;
    font-weight: bold;
    text-decoration: underline;
    color: var(--primary_color);
}
@media screen and (max-width: 480px) {
.news_detail .recommendation {
    padding: 1.5rem 15px;
}
.news_detail .recommendation ul li {
    padding: 0 0 0 12px;
}
.news_detail .recommendation ul li a {
    font-size: 1.5rem;
}
}
.news_detail .btn_list {
    display: flex;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background: var(--primary_color);
}
.news_detail .btn_list p {
    width: calc((100% - 20px) / 2);
    max-width: 350px;
    margin: 0;
    border: none;
}
.news_detail .btn_list p:nth-of-type(2) {
    margin: 0 0 0 20px;
}
.news_detail .btn_list p a {
    display: block;
    width: 100%;
    margin: 0;
    border: none;
}
.news_detail .btn_list p a::before {
    right: 20px;
}
@media screen and (max-width: 480px) {
.news_detail .btn_list {
    display: block;
}
.news_detail .btn_list p {
    width: 100%;
}
.news_detail .btn_list p:nth-of-type(2) {
    margin: 10px 0 0;
}
}

/* ==============================================================
WTC_DEV-9882 管理部門大賞2025＞アンケート完了画面文言追加：静的
============================================================== */
#inquiry_area .backoffice_award_Box{
    margin-top: 50px;
}
#inquiry_area .backoffice_award_Box .lead_txt{
    text-align: center;
}
#inquiry_area .backoffice_award_Box .lead_txt span{
    display: inline-block;
    position: relative;
    color: var(--primary_color);
    font-size: var(--font_size_m);
    font-style: italic;
    font-weight: 600;
    margin-bottom: 10px;
}
#inquiry_area .backoffice_award_Box .lead_txt span::before,
#inquiry_area .backoffice_award_Box .lead_txt span::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 30px;
    background: var(--primary_color);
    top: 0;
}
#inquiry_area .backoffice_award_Box .lead_txt span::before{
    left: -1em;
    transform: rotate(-30deg);
}
#inquiry_area .backoffice_award_Box .lead_txt span::after{
    right: -1em;
    transform: rotate(30deg);
}

@media screen and (min-width: 1025px) and (max-width: 1200px){

    #inquiry_area .backoffice_award_Box .lead_txt span::before {
        left: -0.5em;
    }
    #inquiry_area .backoffice_award_Box .lead_txt span::after{
        right: -0.5em;
    }
}
@media screen and (max-width: 768px){

    #inquiry_area .backoffice_award_Box {
        margin-top: 30px;
    }
    #inquiry_area .backoffice_award_Box .lead_txt span{
        font-size: var(--font_size_s);
    }
    #inquiry_area .backoffice_award_Box .lead_txt span::before,
    #inquiry_area .backoffice_award_Box .lead_txt span::after{
        height: 40px;
    }
    #inquiry_area .backoffice_award_Box .lead_txt span::before{
        left: -1.5em;
    }
    #inquiry_area .backoffice_award_Box .lead_txt span::after{
        right: -1.5em;
    }
}

/* ==============================================================
WTC_DEV-10377 Manegy＞レコメンド機能追加
============================================================== */
#news_Area .slider .txt{
    padding: 10px;
}
#news_Area .slider .ttl{
    text-align: left;
    color: #004986;
    font-weight: bold;
    margin-bottom: 5px;
}
#news_Area .slider .ttl {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2rem;
    max-height: calc(1.5em * 3);
    word-break: break-word;
}
#news_Area .date:before {
    background: url(../img/common/date.svg) no-repeat left;
    content: "";
    display: inline-block;
    position: relative;
    width: 17px;
    height: 25px;
    margin-right: 4px;
    vertical-align: middle;
    top: -2px;
}
#news_Area .date{
    color: #8d8d8d;
    text-align: left;
}
#news_Area .ribbon {
    position: relative;
    background-color: #004986;
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin-bottom: 17px;
}
#news_Area .ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-top: 1.25em solid #004986;
    border-bottom: 1.25em solid #004986;
    border-right: .8em solid transparent;
    border-left: .8em solid transparent;
}
#news_Area .ribbon::after { 
    right: -.8em;
}
#news_Area .ribbon p {
    font-weight: bold;
    color: #FFF;
    line-height: 4rem;
    font-size: 1.7rem;
    letter-spacing: .1rem;
}
#news_Area .ribbon p:before {
    background: url(../img/common/news.svg) no-repeat left;
    content: "";
    display: inline-block;
    position: relative;
    width: 21px;
    height: 25px;
    margin-right: 8px;
    vertical-align: middle;
    top: -2px;
}
#news_Area {
    display: none;
    padding: 17px 0 10px;
    margin-bottom: 20px;
    background: url(../img/common/recommend_bg.jpg) center center / cover no-repeat;
}
#news_Area .slider{
    margin: 0 20px;
}
#news_Area .slider li{
    margin: 0 5px;
    background: #fff;
    text-align: center;
    border-radius: 5px;
}
#news_Area .slider .slick-dots{
    position: relative;
    bottom: 0;
    margin-top: 5px;
}
#news_Area .slider .slick-dots li button:before{
    content: none;
}
#news_Area .slider .slick-dots li{
    background: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
}
#news_Area .slider .slick-dots li.slick-active{
    background: #004986;
}
#news_Area .slider .slick-prev{
    left: -7px;
    background-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: solid 2px #004986;
    z-index: 1;
}
#news_Area .slider .slick-next{
    right: -7px;
    background-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: solid 2px #004986;
}
#news_Area .slider .slick-prev:before,
#news_Area .slider .slick-next:before,
#news_Area .slider .slick-prev:after,
#news_Area .slider .slick-next:after{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 5px;
    top: 50%;
    background: #004986;
    font-size: 0;
    opacity: 1;
    cursor: pointer;
}
#news_Area .slider .slick-prev:before{
    top: 21px;
    left: 15px;
    transform: rotate(-45deg);
}
#news_Area .slider .slick-prev:after{
    top: 35px;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
}
#news_Area .slider .slick-next:before{
    top: 34px;
    right: 16px;
    transform: translateY(-50%) rotate(-45deg);
}
#news_Area .slider .slick-next:after{
    top: 23px;
    right: 16px;
    transform: translateY(-50%) rotate(45deg);
}
/* Slider */
#news_Area .slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
#news_Area .slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#news_Area .slick-list:focus{
    outline: none;
}
#news_Area .slick-list.dragging{
    cursor: pointer;
    cursor: hand;
}
#news_Area .slick-slider .slick-track,
#news_Area .slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
#news_Area .slick-track:before,
#news_Area .slick-track:after{
    display: table;
    content: '';
}
#news_Area .slick-track:after{
    clear: both;
}
#news_Area .slick-loading .slick-track{
    visibility: hidden;
}
#news_Area [dir='rtl'] .slick-slide{
    float: right;
}
#news_Area .slick-slide img{
    display: block;
    border-radius: 5px 5px 0 0;
}
#news_Area .slick-slide.slick-loading img{
    display: none;
}
#news_Area .slick-slide.dragging img{
    pointer-events: none;
}
#news_Area .slick-loading .slick-slide{
    visibility: hidden;

}
#news_Area .slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
#news_Area .slick-arrow.slick-hidden {
    display: none;
}
#news_Area .slick-prev,
#news_Area .slick-next{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
#news_Area .slick-prev.slick-disabled:before,
#news_Area #news_Area .slick-next.slick-disabled:before{
    opacity: .25;
}
#news_Area .slick-prev:before,
#news_Area .slick-next:before{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#news_Area .slick-prev{
    left: -25px;
}
#news_Area [dir='rtl'] .slick-prev{
    right: -25px;
    left: auto;
}
#news_Area .slick-prev:before{
    content: '←';
}
#news_Area [dir='rtl'] .slick-prev:before{
    content: '→';
}
#news_Area .slick-next{
    right: -25px;
}
#news_Area [dir='rtl'] .slick-next{
    right: auto;
    left: -25px;    
}
#news_Area .slick-next:before{
    content: '→';
}
#news_Area [dir='rtl'] .slick-next:before{
    content: '←';
}
#news_Area .slick-dots{
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
#news_Area .slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
#news_Area .slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
#news_Area .slick-dots li button:hover,
#news_Area .slick-dots li button:focus{
    outline: none;
}
#news_Area .slick-dots li button:hover:before,
#news_Area .slick-dots li button:focus:before{
    opacity: 1;
}
#news_Area .slick-dots li button:before{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#news_Area .slick-dots li.slick-active button:before{
    opacity: .75;
    color: black;
}
@media screen and (max-width: 768px){
#news_Area .slick-next {
    left: auto;
}
#news_Area .ribbon:after,
#news_Area .ribbon:before{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    border-top: 1.25em solid #004986;
    border-bottom: 1.25em solid #004986;
    border-right: .8em solid transparent;
    border-left: .8em solid transparent;
}
#news_Area .ribbon:after{ 
    left: -.8em; 
}
#news_Area .ribbon:before{ 
    right: -.8em; 
}
#news_Area .ribbon {
width: 88%;
margin: 0 auto 17px;
}
}
/* ============================================================
WTC_DEV-9973 Manegy＞サービスディレクトリ改修：コーディング
============================================================== */
/*---------------------------------------
サービスを探す
---------------------------------------*/
#service_search {
    background-color: var(--light);
    margin-top: 80px;
    color: var(--basic);
}
#service_search .search_container {
    max-width: 1340px;
    margin: auto;
    padding: 50px 20px;
    box-sizing: border-box;
}
#service_search h2.ttl {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: solid 4px var(--primary_color);
    text-align: left;
    border-bottom: none;
}
#service_search h3.list_til {
    font-size: 1.8rem;
    font-weight: 500;
    border-bottom: none;
    color: var(--basic);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
}
#service_search h3.list_til:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--keiri);
    border: none;
    border-radius: 10px;
}
#service_search .jinji h3.list_til:before {
    background: var(--jinji);
}
#service_search .soumu h3.list_til:before {
    background: var(--soumu);
}
#service_search .houmu h3.list_til:before {
    background: var(--houmu);
}
#service_search .keieikikaku h3.list_til:before {
    background: var(--keieikikaku);
}
#service_search h3.list_til:after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    margin-left: 9px;
    background-color: var(--gray02);
}
#service_search .search_list_con:not(:last-child) {
    margin-bottom: 30px;
}
#service_search .service-tag {
    display: inline-block;
}
#service_search .service-tag_link {
    display: inline-block;
    margin: 0 8px 10px 0;
    padding: 10px 15px;
    line-height: 1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid var(--gray02);
    border-radius: 50vw;
    color: var(--basic);
}
@media screen and (max-width: 768px) {
    #service_search {
        margin-top: 60px;
    }
    #service_search .search_container {
        padding: 40px 20px;
    }
    #service_search h2.ttl {
        font-size: 1.8rem;
        line-height: 1.2em;
        margin-bottom: 30px;
    }
    #service_search .search_list_con:not(:last-child) {
        margin-bottom: 20px;
    }
    #service_search h3.list_til {
        font-size: 1.6rem;
        gap: 6px;
        margin-bottom: 15px;
    }
    #service_search h3.list_til:after {
        margin-left: 6px;
    }
    #service_search .service-tag_link {
        margin: 0 3px 8px 0;
        padding: 6px 10px;
        font-size: 13px;
    }
}

/*---------------------------------------
広告掲載をお考えの皆さまへ
---------------------------------------*/
#search_advertisement {
    margin: 0;
    background: #fff;
    color: var(--basic);
}
#search_advertisement h3.advertise_til {
    border-bottom: none;
    color: var(--basic);
    display: flex;
    align-items: center;
    gap: 8px;
}
#search_advertisement h3.advertise_til:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary_color);
    border: none;
    border-radius: 10px;
}
#search_advertisement .advertise_txt {
    font-size: 1.5rem;
    font-weight: 500;
}
#search_advertisement .btn_secondary {
    background: var(--primary_color);
    border-radius: 50vw;
    margin: 12px auto 20px;
    border: solid 2px var(--primary_color);
}
#search_advertisement .btn_secondary:before {
    display: none;
}
#search_advertisement .btn_secondary:hover {
    background: #fff;
    color: var(--primary_color);
    opacity: 1;
}
@media screen and (max-width: 768px) {
    #search_advertisement {
        padding: 40px 0;
    }
    #search_advertisement .advertise {
        width: 90%;
    }
    #search_advertisement .advertise_txt {
        font-size: 1.4rem;
        line-height: 1.7em;
    }
}
/*---------------------------------------
会員限定記事（WTC_DEV-10859）
---------------------------------------*/
.limitedContents {
    margin-top: 65px;
    position: relative;
    margin-bottom: 110px;

    &::before {
        width: 100%;
        height: 90px;
        position: absolute;
        top: -155px;
        left: 0;
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 100%);
        content: "";
    }
    .inner {
        border: solid 3px var(--primary_color);
        padding: 32px;
        box-sizing: border-box;
        width: min(90%, 700px);
        margin: 0 auto;

        .lead {
            margin-top: 0;
            text-align: center;
            font-weight: bold;
            font-size: 2.2rem;
            color: var(--primary_color);

            .lock {
                color: #f6c708;
                vertical-align: text-bottom;
                position: relative;
                bottom: 2px;
            }
            .textLength {
                font-weight: normal;
                font-size: 1.5rem;
                color: var(--basic_color_light);
            }
        }
        .sentence {
            .em {
                font-weight: bold;
                color: var(--accent_color);
            }
        }
        .buttonList {
            display: flex;
            justify-content: center;
            gap: 20px;

            .login,
            .signup {
                margin: 20px 0 0;

                a {
                    display: block;
                    border: none;
                    padding: 16px 32px;
                    position: relative;
                    text-align: center;
                    line-height: 1.2em;
                    font-weight: bold;
                    box-sizing: border-box;
                    color: #fff;

                    &::before {
                        content: "";
                        width: 9px;
                        height: 22px;
                        background: #fff;
                        clip-path: polygon(40% 50%, 100% 75%, 40% 100%, 0% 100%, 0% 50%);
                        position: absolute;
                        right: 13px;
                        top: 50%;
                        margin-top: -16px;
                    }
                }
            }
            .login {
                width: 60%;

                a {
                    background: var(--primary_color);
                }
            }
            .signup {
                width: 40%;

                a {
                    background: var(--accent_color);
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .limitedContents {
        margin-bottom: 80px;
    
        &::before {
            height: 120px;
            top: -185px;
        }
        .inner {
            padding: 16px;
            width: 100%;
    
            .lead {
                line-height: 1.5;
                font-size: 2rem;
    
                .lock {
                    font-size: 22px;
                }
                .textLength {
                    display: block;
                    font-size: 1.4rem;
                }
            }
            .sentence {
                font-size: 1.5rem;
            }
            .buttonList {
                display: block;

                .login,
                .signup {
                    width: 100%;
                    margin: 25px 0 0;

                    a {
                        padding: 16px 32px;
                        font-size: 1.4rem;

                        &:hover {
                            opacity: 1;
                        }
                    }
                }
                .signup {
                    margin: 15px 0 0;
                }
            }
        }
    }
}

/* ============================================================
WTC_DEV-10980 Manegy＞SP版TOP修正
============================================================== */
@media screen and (max-width: 767px) {

    .point_notice_body_info {
        display: none;
    }
    #top_fv_slider ul.slick-dotted.slick-slider{
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 768px) {
    .top_service_list{
        width: 100%;
    }
    .top_service_list li,
    .top_service_list li:nth-child(odd){
        width: 49%;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #fff;
    }
    .top_service_list li:nth-child(-n+2){
        border-top: 1px solid #fff;
    }
    .top_service_list li:nth-child(1),
    .top_service_list li:nth-child(3){
        border-right: 1px solid #fff;
    }
    .top_service_list li a{
        position: relative;
        display: flex;
        align-items: center;
        padding: 15px 10px;
        background: var(--primary_color);
    }
    .top_service_list li a::after{
        position: absolute;
        content: "\e313";
        font-family: "Material Symbols Outlined";
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
    }
    /* .top_service_list li a img {
        width: 20px;
        margin-bottom: 0;
        margin-right: 10px;
    } */
    .top_service_list li a .material-symbols-outlined{
        color: #fff;
        font-weight: 300;
        margin-right: 3px;
        font-variation-settings:'FILL' 1;
    }
    .top_service_list li a p{
        text-align: left;
        font-size: 13px;
        color: #fff;
    }
    i.target{
        top: -100px;
    }

    .point_other_button{
        /* text-align: left; */
        margin: 10px 0 0;
    }
    .point_other_button_flex{
        width: 96%;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }
    .point_link_sub{
        display: block;
        width: 60%;
        padding: 10px;
        background: var(--water_color);
        border: 2px solid #d4dfea;
        text-decoration: none;
        font-weight: 600;
        box-sizing: border-box;
    }
    .point_link_sub.beginner::before {
        margin-right: 3px;
        vertical-align: middle;
    }
    .point_link_sub::after{
        position: absolute;
        content: "\e5cc";
        font-family: "Material Symbols Outlined";
        font-size: 20px;
        font-weight: 400;
        color: var(--primary_color);
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .point_other_button_flex .fukidashi{
        position: relative;
        width: 35%;
        text-align: center;
        padding: 7px 2px;
        border-radius: 5px;
        color: #fff;
        background: var(--primary_color);
        border: 2px solid var(--primary_color);
        font-size: 12px;
        line-height: 1;
        font-weight: 600;
        margin-right: 0.8em;
        max-width: calc( 100% - 0.8em );
    }
    .point_other_button_flex .fukidashi::before,
    .point_other_button_flex .fukidashi::after{
        position: absolute;
        content: "";
        top: 50%;
        transform: translateY(-50%);
        right: -0.8em;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 0.7em solid var(--primary_color);
    }
    .point_other_button_flex .fukidashi::after{
        right: calc(2px - 0.7em);
        border-left: solid 0.8em var(--primary_color);
    }
    .point_other_button_flex .fukidashi span.point-ic{
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: -2px;
        margin-right: 1px;
    }
    .point_other_button_flex .fukidashi span.yellow{
        color: #fced42;
    }
    .top_main_area .bdash_banner {
        margin: 10px auto;
    }
}
/* ===============================================================================
WTC_DEV-10973 【Manegy_NEWS用】専門家テンプレートダウンロードパーツ作成＞静的
================================================================================= */
.template_Box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--primary_color);
    border-radius: 10px;
    padding: 20px;
}
.template_Box .thumb{
    width: 23%;
}
.template_Box .thumb img{
    background: #fff;
}
.template_Box .txt_Box{
    width: 73%;
}
.template_Box .txt_Box h3{
    background: none;
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.template_Box .txt_Box p{
    margin: 10px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.template_Box .txt_Box .dl_Btn{
    position: relative;
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px 0 0;
    padding: 15px 10px;
    background: var(--primary_color);
    border-radius: 50px;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: #fff;
    border-bottom: none;
    box-sizing: border-box;
}
.template_Box .txt_Box .dl_Btn::before{
    position: absolute;
    content: "\f090";
    font-size: 24px;
    font-family: "Material Symbols Outlined";
    color: #fff;
    font-weight: 300;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px) {

    .template_Box{
        padding: 15px;
    }
    .template_Box .txt_Box{
        width: 100%;
    }
    .template_Box .txt_Box .dl_Btn {
        max-width: none;
        margin: 10px 0 0;
    }
    .template_Box .txt_Box p{
        white-space: unset;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}




.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .modal-pointget {
        background: #F9F9F9;
        border-radius: 5px;
        padding: 25px 20px 10px 20px;
        max-width: 600px;
        max-height: 340px;
        box-shadow: 0 5px 30px rgba(0,0,0,0.2);
        position: relative;
    }
    .modal-close {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 25px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .modal-header {
        text-align: center;
    }
    .modal-header h2{
        border-bottom: none;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .modal-header img{
        width: 6%;
        vertical-align: bottom;
    }
    .modal-icon {
        font-size: 24px;
        color: green;
        margin-bottom: 5px;
    }
    .modal-subtitle {
        font-size: 19px;
        margin-bottom: 5px;
    }
    .modal-content {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .modal-news {
        background: #F5F5F5;
        border-radius: 8px;
        padding: 10px;
        width: 165px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.16);
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition : all 0.3s ease 0s;
        position: relative;
    }
    .modal-news:hover {
        opacity: 0.6;
    }
    .news-image {
        width: 155px;
        border-radius: 8px;
        margin-bottom: 3px;
        height: auto;
        object-fit: contain;
        object-position: 50% 50%;
        display: block;
        font-size: 5px;
        overflow: hidden;
        aspect-ratio: 6 / 4;
        background: #efefef;
        border-radius: 8px;
    }
    .point-badge {
        position: absolute;
        top: 10px;
        right: 15px;
        background: red;
        color: white;
        padding: 0px 4px;
        font-size: 13px;
        font-weight: bold;
    }
    .news-title {
        font-size: 14px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .news-link {
        display: none;
        font-size: 12px;
        color: #007bff;
        text-decoration: underline;
        margin-top: 5px;
        align-self: flex-start;
    }
    .modal-button{
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
    }
    .modal-button a{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: small;
        width: 34%;
        margin: 0;
    }
    .modal-footer {
        text-align: center;
        margin-top: 5px;
    }
    .modal-footer a {
        font-size: 13px;
        text-decoration: underline;
    }

    @media screen and (max-width: 768px) {
        .modal-pointget {
            max-width: 260px;
            max-height: 380px;
            padding: 10px 10px;
            border-radius: 12px;
            top: 25px;
        }
        .modal-button a span {
            display: none;
        }
        
        .modal-close {
            position: absolute;
            top: -16px;
            right: -16px;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 2000;
            box-sizing: border-box;
            padding: 0;
        }
        .modal-header img {
            width: 9%;
        }
        .modal-header h2 {
            font-size: 16px;
            margin-bottom: 0px;
        }
        .modal-subtitle {
            font-size: 11px;
            margin-bottom: 5px;
        }
        .modal-content {
            max-width: 260px;
            flex-direction: column;
            gap: 7px;
            align-items: center;
        }
        .modal-news {
            display: flex;
            flex-direction: row;
            border-radius: 8px;
            align-items: flex-start;
            gap: 10px;
            padding: 5px;
            width: 90%;
            height: 60px;
        }
        .news-image {
            width: 40%;
            height: 80%;
            padding-top: 0;
            border-radius: 8px;
            margin: auto;
        }
        .point-badge {
            font-size: 10px;
            padding: 0px 2px;
            top: 2px;
            right: 2px;
            border-radius: 0 6px 0 0;
        }
        .news-text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin: auto;
        }
        .news-title {
            font-size: 13px;
            -webkit-line-clamp: 3;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
        }
        .modal-button {
            gap: 8px;
        }
        .modal-button a {
            font-size: 15px;
            padding: 5px;
            width: 43%;
            height: 45px;
        }
        .btn_secondary::before {
            width: 9px;
            height: 18px;
            right: 6px;
            margin-top: -13px;
        }
        .modal-footer {
            margin-top: 5px;
        }
        .modal-footer a {
            font-size: 13px;
        }
    }
}

/* ========================================
WTC_DEV-10882 Manegy＞ニュースページのデザイン改修
======================================== */
.news_detail .chart {
    margin: 30px auto;
}
.news_detail .chart .inner {
    margin: 0 auto;
    width: 100%;
    max-width: 840px;
    border: solid 1px var(--water_color);
    box-shadow: 0 0 10px 0 rgba(1,36,76,.05);
}
.news_detail .chart table {
    border-collapse: collapse;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
}
.news_detail .chart table tr,
.news_detail .chart table tr:nth-child(2n-1) {
    border-bottom: solid 1px var(--water_color);
    background: #fff;
}
.news_detail .chart tr:last-child {
    border-bottom: 0;
}
.news_detail .chart th {
    font-weight: bold;
    width: 25%;
    min-width: 4em;
    color: #fff;
    background-color: #1f4373;
    padding: 1em;
    border-right: solid 1px var(--water_color);
}
.news_detail .chart td {
    padding: 1em 0.5em !important;
}
.news_detail .chart td:first-child {
    font-weight: bold;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .news_detail .chart {
        font-size: 14px;
    }
    .news_detail .chart .inner {
        max-width: 100%;
    }
}

.news_detail .recommend.article {
    margin-block: 1.6rem;
}
.news_detail .recommend.article p {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    background-color: #1f4373;
    color: #fff;
    display: inline;
    padding: 4px 10px 4px 35px;
    line-height: 0;
    border-radius: 3px 3px 0 0;
    position: relative;
}
.news_detail .recommend.article p:before {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    background: url(/img/common/news_ic01.svg) no-repeat center center / contain;
    content: "";
    top: 0.35em;
    left: 12px;
}
.news_detail .recommend.article ul {
    padding: 2rem 25px 2.5rem;
    border: solid 1px #ddd;
    border-radius: 0 3px 3px 3px;
    margin-top: 3px;
}
.news_detail .recommend.article ul li {
    padding: 0 0 0 17px;
    position: relative;
    list-style: none;
}
.news_detail .recommend.article ul li:nth-of-type(n+2) {
    margin: 1rem 0 0;
}
.news_detail .recommend.article ul li:after {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100vw;
    position: absolute;
    top: 0.65em;
    left: 3px;
    background: var(--primary_color);
    content: "";
}
.news_detail .recommend.article ul li a {
    border: none;
    text-decoration: underline;
    font-size: 15px;
    color: #333;
}
@media screen and (max-width: 480px) {
    .news_detail .recommend.article ul {
        padding: 1.5rem 2rem;
    }
    .news_detail .recommend.article ul li {
        padding: 0 0 0 12px;
    }
    .news_detail .recommend.article ul li a {
        font-size: 1.5rem;
    }
}

.news_detail blockquote {
    background: #f2f2f2;
    padding: 10px 20px;
    border-radius: 4px;
    color: #666;
    position: relative;
    margin: 16px auto;
    line-height: 1.8em;
    box-sizing: border-box;
    text-align: justify;
}
.news_detail blockquote:before,
.news_detail blockquote:after {
    position: absolute;
    font-size: 54px;
    font-family: Roboto;
    color: #ccc;
}
.news_detail blockquote:before {
    content: '“';
    top: 5px;
    left: 5px;
}
.news_detail blockquote:after {
    content: '”';
    bottom: -25px;
    right: 5px;
}
.news_detail blockquote span {
    display: block;
    font-size: 1.4rem;
    text-align: right;
    margin-top: 10px;
    line-height: 1.4em;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    .news_detail blockquote {
        padding: 10px 10px;
        font-size: 1.4rem;
        line-height: 1.8em;
    }
    .news_detail blockquote:before,
    .news_detail blockquote:after {
        font-size: 60px;
    }
    .news_detail blockquote:before {
        content: '“';
        top: 6px;
        left: 6px;
    }
    .news_detail blockquote:after {
        content: '”';
        bottom: -29px;
        right: 6px;
    }
}


/* ==============================================================
WTC_DEV-11521 Manegy＞ログインボーナス施策：コーディング
============================================================== */
.loginbonus_modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #333;
    z-index: 99999;
}
.loginbonus_inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 96%;
    max-width: 700px;
    background: #fff8b7;
    text-align: center;
}
.loginbonus_inner.bg-effect {
    background: url(../img/loginbonus/loginbonus_bg.jpg) center center no-repeat;
    background-size: cover;
    /* transition: 0.6s ease; */
}
.loginbonus_inner .welcome_message{
    text-align: center;
}
.loginbonus_inner .welcome_message span{
    position: relative;
    display: inline-block;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}
.loginbonus_inner .welcome_message span::before,
.loginbonus_inner .welcome_message span::after{
    position: absolute;
    content: "";
    width: 3px;
    height: 20px;
    background: #333;
    top: 50%;
}
.loginbonus_inner .welcome_message span::before{
    left: -1em;
    transform: translateY(-50%) rotate(-30deg);
}
.loginbonus_inner .welcome_message span::after{
    right: -1em;
    transform: translateY(-50%) rotate(30deg);
}
.loginbonus_inner h2{
    border: none;
    text-align: center;
    /* font-size: 2.4rem; */
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 auto 10px;
}
.loginbonus_inner h2 span{
    color: var(--accent_color);
    font-size: 130%;
    font-weight: bold;
}
.loginbonus_inner h2 span strong{
    font-family: "Oswald", sans-serif;
    font-size: 110%;
    font-weight: 600;
    vertical-align: -3px;
}
.loginbonus_inner h2 small{
    font-size: 80%;
}
.loginbonus_inner .point_Area{
    padding: 30px 0;
}
.loginbonus_inner .point_Area .pointget_txt{
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
    padding: 7px 0;
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--primary_color);
    transition: opacity 0.5s ease;
    transform: translateZ(0);
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    visibility: visible;
    /* display: none; */
}
.loginbonus_inner .point_Area .pointget_txt.show{
    opacity: 1;
    /* display: block; */
}
.loginbonus_inner .point_Area .pointget_txt .red{
    color: var(--accent_color);
}
.loginbonus_inner .point_Area .pointget_txt strong{
    font-family: "Oswald", sans-serif;
    font-size: 120%;
    font-weight: 600;
    vertical-align: -3px;
    padding-right: 3px;
}
.daily_point_Box ul{
    display: flex;
    justify-content: center;
}
.daily_point_Box ul:first-child{
    margin-bottom: 5px;
}
.daily_point_Box ul li{
    position: relative;
    width: 15%;
    margin: 0 3px;
    text-align: center;
}
.daily_point_Box ul li .point{
    position: relative;
    padding-top: 100%;
    height: 0;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto 5px;
}
.daily_point_Box ul li .point::after{
    position: absolute;
    content: "";
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/loginbonus/point10.png) center center no-repeat;
    background-size: contain;
}
.daily_point_Box ul li .point.day7::after{
    background: url(../img/loginbonus/point100.png) center center no-repeat;
    background-size: contain;
}
/* 今日のポイント */
#today_point::after {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: none;
}
#today_point.geted::after {
    animation: stampPop 0.6s ease-out forwards;
    opacity: 1;
}
@keyframes stampPop {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    40%  { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(0.9) rotate(-6deg); }
    80%  { transform: translate(-50%, -50%) scale(1.05) rotate(3deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* 獲得済 */
.daily_point_Box ul li.done .point::before{
    position: absolute;
    content: "獲得済";
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
/* 未獲得 */
.daily_point_Box ul li.undone .point::after{
    filter: grayscale(1);
}
/* .daily_point_Box ul li .point img{
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */
.daily_point_Box ul li .day{
    font-size: 1.6rem;
    font-weight: 600;
}
.daily_point_Box ul li .day .num{
    font-family: "Oswald", sans-serif;
    font-size: 120%;
    font-weight: 600;
}
.loginbonus_inner .point_Area .message{
    position: relative;
    display: inline-block;
    background: #fff;
    margin-top: 20px;
    padding: 12px 18px;
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0;
    visibility: visible;
    transition: opacity 0.5s ease;
    box-shadow: 0 0 15px #d9cca4;
}
.loginbonus_inner .point_Area .message::before{
    position: absolute;
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}
.loginbonus_inner .point_Area .message.show{
    opacity: 1;
    /* visibility: visible; */
}
.loginbonus_inner .footer_Area{
    background: #fff;
    padding: 15px 0 30px;
}
.loginbonus_inner .footer_Area .footer_link{
    position: relative;
    color: var(--primary_color);
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: underline;
    padding-right: 0.5em;
}
.loginbonus_inner .footer_Area .footer_link::after{
    position: absolute;
    content: "";
    border-left: 8px solid var(--primary_color);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
}
.loginbonus_inner .footer_Area .close_Btn{
    margin: 15px auto 0;
    background: var(--primary_color);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 10px 5px;
    border-radius: 100px;
    width: 90%;
    max-width: 250px;
    cursor: pointer;
    transition: 0.3s;
}

/* 7日目 */
.loginbonus_inner.day7.bg-effect {
    background: url(../img/loginbonus/loginbonus_day7_bg.jpg) center center no-repeat;
    background-size: cover;
    /* transition: 0.6s ease; */
}
.loginbonus_inner.day7 .point_Area .pointget_txt{
    margin-bottom: 0;
}
.day7_Box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 20px auto;
}
.day7_Box .daily_point_Box{
    width: 42%;
}
.day7_Box .daily_point_Box ul li {
    width: calc(100% / 3);
}
.day7_Box .daily_point_Box ul li.done .point::before{
    font-size: 1.8rem;
}
.day7_Box .day7{
    width: 40%;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #d9cca4;
    margin-left: 10px;
}
.day7_Box .day7 .inner{
    position: relative;
    padding-top: 100%;
    height: 0;
}
.day7_Box .day7 .inner .day {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    font-weight: 600;
}
.day7_Box .day7 .inner .day .num {
    font-family: "Oswald", sans-serif;
    font-size: 120%;
    font-weight: 600;
}
/* 今日のポイント */
.day7_Box .day7 .inner .point::after{
    position: absolute;
    content: "";
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/loginbonus/gift_img.png) center center no-repeat;
    background-size: contain;
    animation: yurayura 0.5s infinite;
}
@keyframes yurayura{
	0%  {transform: translate(-50%, -50%) rotate(0deg);}
	50% {transform: translate(-50%, -50%) rotate(-10deg);}
	100% {transform: translate(-50%, -50%) rotate(0deg);}
}
#day7_point::after {
    transition: none;
}
#day7_point.geted::after {
    top: 45%;
    width: 70%;
    height: 70%;
    background: url(../img/loginbonus/gift_100p_img.png) center center no-repeat;
    background-size: contain;
    animation: stampPopday7 0.6s ease-out forwards;
    opacity: 1;
}
@keyframes stampPopday7 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    40%  { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(0.9) rotate(-6deg); }
    80%  { transform: translate(-50%, -50%) scale(1.05) rotate(3deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

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

    .loginbonus_inner .point_Area {
        padding: 15px 0;
    }
    .loginbonus_inner .welcome_message span{
        font-size: 1.6rem;
    }
    .loginbonus_inner .welcome_message span::before,
    .loginbonus_inner .welcome_message span::after{
        width: 2px;
        height: 16px;
    }
    .loginbonus_inner .welcome_message span::before {
        left: -0.8em;
    }
    .loginbonus_inner .welcome_message span::after {
        right: -0.8em;
    }
    .loginbonus_inner h2 {
        font-size: 2rem;
    }
    .loginbonus_inner .point_Area .pointget_txt {
        font-size: 3rem;
    }
    .daily_point_Box ul li {
        width: 23%;
    }
    .daily_point_Box ul li .point{
        margin-bottom: 0;
    }
    .daily_point_Box ul li.done .point::before{
        font-size: 1.4rem;
    }
    .daily_point_Box ul li .day {
        font-size: 1.2rem;
    }
    .loginbonus_inner {
        top: 5%;
        transform: translateX(-50%);
    }
    .loginbonus_inner .point_Area .message {
        margin-top: 10px;
        padding: 10px 15px;
        font-size: 1.4rem;
    }
    .loginbonus_inner .footer_Area {
        padding: 15px 0;
    }
    .loginbonus_inner .footer_Area .footer_link::after{
        top: 0.8em;
    }

    /* 7日目 */
    .day7_Box .daily_point_Box {
        width: 50%;
    }
    .day7_Box .daily_point_Box ul li.done .point::before {
        font-size: 1.2rem;
    }
    .day7_Box .day7 {
        width: 45%;
        margin-left: 5px;
    }
}
/*-- --------- --------- --------- --*/
/*-- WTC_DEV-11735：TOP最新コンテンツ改修 --*/
/*-- --------- --------- --------- --*/

.toppage .top_contents_matter {
    position: relative;
    margin-bottom: 40px;
}
.toppage .top_contents_matter li {
    position: relative;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: none;
    opacity: 0;
}

.toppage .top_contents_matter li.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.toppage .top_contents_matter li img {
    width: 128px;
    height: auto;
    margin-right: 16px;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    font-size: 5px;
    overflow: hidden;
    aspect-ratio: 6 / 4;
    border: solid 1px #efefef;
}
.toppage .top_contents_matter li a {
    padding: 8px;
}
.toppage .top_contents_matter li a.tag {
    min-width: 120px;
    position: absolute;
    top: 50%;
    right: 8px;
    margin: -10px 0 0 0;

    padding: 2px 10px;
    border-radius: 15px;
    color: var(--primary_color);
    border: solid 1px var(--primary_color);
    display: inline-block;
    font-size: var(--font_size_xs);
    line-height: 1.2em;
    text-align: center;
    font-weight: 500;
}
.toppage .top_contents_matter a.tag:before {
    content: "# ";
}
.toppage .top_contents_matter li b {
    display: block;
    padding-right: 150px;
    width: 100%;
    flex: 1;
}
.toppage div[class*=_add_btn] {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    display: block;
    width: 40px;
    height: 40px;
    background: var(--primary_color);
    border-radius: 50%;
    position: absolute;
    bottom: -20px;
    right: 16px;
    cursor: pointer;
    opacity: 0.5;
}
@media screen and (max-width: 768px) {
    .toppage .top_contents_matter li a {
        padding: 8px 0;
    }
    .toppage .top_contents_matter li img {
        width: 80px;
        margin-right: 8px;
    }
    .toppage .top_contents_matter li b {
        font-size: 14px;
        padding: 0 0 24px 0;
    }
    .toppage .top_contents_matter li a.tag {
        font-size: 12px;
        bottom: 8px;
        margin: 0;
        top: auto;
        right: 0;
    }
}
/* ========================================
WTC_DEV-11737 Manegy＞NEWS用新規パーツ作成
======================================== */

.news_detail .authorArea {
    padding: 16px;
    background: var(--light_color);
    border-radius: 5px;
}
.news_detail .authorArea_inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.news_detail .authorArea_profileThumb {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}
.news_detail .authorArea_label {
    background-color: var(--primary_color);
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    border-radius: 50vw;
    display: flex;
    justify-content: center;
    margin: -10px auto 0;
    padding: 2px 12px;
    width: fit-content;
}
.news_detail .authorArea_name {
    margin: 0 0 12px;
    padding-bottom: 5px;
    border-bottom: dotted 2px var(--basic_color);
    font-weight: 600;
    font-size: 1.6rem;
}
.news_detail .authorArea_name span {
    padding-left: 10px;
}
.news_detail .authorArea_description {
    margin: 0 0 16px;
    font-size: 1.4rem;
    line-height: 1.6em;
}
.news_detail .outline .authorArea_list {
    list-style: none;
    display: flex;
    gap: 10px;
    padding-left: 0;
}
.news_detail .authorArea_item {
    list-style: none;
}
.news_detail .authorArea_item .share_button {
    border-bottom: none;
}
.news_detail .authorArea_item .share_button img {
    width: 25px;
}
}
@media screen and (min-width: 0) and (max-width: 768px) {
    .news_detail .authorArea {
        padding: 12px;
    }
    .news_detail .authorArea_profileThumb {
        width: 80px;
        height: 80px;
    }
    .news_detail .authorArea_label {
        font-size: 1.2rem;
        margin: -7px auto 0;
        padding: 1px 10px;
    }
    .news_detail .authorArea_name {
        margin: 0 0 10px;
        padding-bottom: 5px;
        font-size: 1.4rem;
        line-height: 1.5em;
    }
    .news_detail .authorArea_name span {
        padding-left: 0;
    }
    .news_detail .authorArea_description {
        font-size: 1.2rem;
        line-height: 1.5em;
    }
}

/* ===================================================
WTC_DEV-12338 Manegy＞NEWS記事-執筆者パーツの再修正
=================================================== */
.news_detail .authorArea_profileThumb.add{
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    overflow: hidden;
}

.news_detail .authorArea_profileThumb.add img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
}
.authorArea_label_sp,
.authorArea_name_sp{
    display: none;
}
.news_detail .authorArea_label {
    background-color: var(--primary_color);
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    border-radius: 50vw;
    display: flex;
    justify-content: center;
    margin: 10px auto 0;
    padding: 2px 12px;
    width: fit-content;
}
.news_detail .authorArea_inner.add{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
  @media screen and (min-width: 0) and (max-width: 768px) {
    .authorArea_label_sp,
    .authorArea_name_sp{
        display: block;
    }
    .news_detail .authorArea_label_sp{
        background-color: var(--primary_color);
        text-align: center;
        color: #fff;
        font-weight: 600;
        font-size: 1.3rem;
        border-radius: 50vw;
        display: flex;
        justify-content: center;
        margin: -10px auto 0;
        padding: 2px 12px;
        width: fit-content;
        bottom: -21%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }
    .news_detail .authorArea_description.add{
        font-size: 1.2rem;
        line-height: 1.5em;
        border-top: dotted 2px var(--basic_color);
        padding-top: 7px;
        margin: 0 0 10px;
    }
    .news_detail .authorArea_name_sp{
        display: block;
        font-weight: 600;
        margin: 0 0 0 10px;
        line-height: 1.4;
    }
    .news_detail .authorArea_name_sp span.company{
        font-size: 1rem;
    }
    .news_detail .authorArea_name_sp span.name{
        font-size: 1.5rem;
    }
    .news_detail .authorArea_left.add{
        position: relative;
        margin-bottom: 25px;
    }
    .news_detail .authorArea_left.add{
        display: flex;
        align-items: center;
    }
    .news_detail .authorArea_inner.add{
        display: block;
    }
    .authorArea_box.add{
        position: relative;
    }

  }
/* ===================================================
WTC_DEV-11783 Manegy＞セミナー一覧ページ要素追加：静的
=================================================== */
.seminar_outline_box {
    position: relative;
    overflow: hidden;
}

/* ----------------------
残席わずか
---------------------- */
.seminar_outline_box.few::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    background: var(--accent_color);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}
.seminar_outline_box.few::after {
    content: "残席わずか";
    position: absolute;
    top: 41px;
    left: 2px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    transform: rotate(-45deg);
    transform-origin: top left;
    z-index: 2;
    white-space: nowrap;
    text-align: center;
}
/* ----------------------
新着
---------------------- */
.seminar_outline_box.new::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    background: var(--primary_color);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}
.seminar_outline_box.new::after {
    content: "新着";
    position: absolute;
    top: 29px;
    left: 12px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    transform: rotate(-45deg);
    transform-origin: top left;
    z-index: 2;
    white-space: nowrap;
    text-align: center;
}

/* ----------------------
申込でマネジーポイントゲット！
---------------------- */
.seminar_detail .seminar_outline_box.pointget .caption h2::before {
    content: "＼ 申込でマネジーポイントゲット！ ／"!important;
    display: block;
    font-size: 1.4rem;
    color: var(--accent_color);
    opacity: 1;
    position: static;
    width: auto;
    transform: none;
    margin-bottom: 3px;
}

@media screen and (min-width: 0) and (max-width: 768px) {
    /* ----------------------
    申込でマネジーポイントゲット！
    ---------------------- */
    .seminar_detail .caption h2::before {
        margin: 5px 0 0;
    }
}

/* ===================================================
WTC_DEV-12005 DRM＞Manegy＞記事パーツ作成
=================================================== */
/* ----------------------
CTAパーツ
---------------------- */
.recruit_cta.agent_cta a.btn_primary {
    line-height: 1.3em;
    height: auto;
    padding: 12px 32px;
}
.recruit_cta .cta_bottom-txt {
    font-size: 1.6rem;
    text-align: center;
    font-weight: 600;
}
.recruit_cta .attention {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.recruit_cta.agent_cta .attention span {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
}
.recruit_cta.agent_cta .attention span:before, .recruit_cta.agent_cta .attention span:after {
    position: static;
    margin-bottom: -4px;
}

/* ----------------------
表パーツ
---------------------- */
.news_detail .recruit_chart {
    margin-top: 30px;
}
.news_detail .chart.recruit_chart .inner {
    max-width: unset;
}
.news_detail .chart.recruit_chart th {
    width: 20%;
    min-width: unset;
}
.news_detail .chart.recruit_chart th, .news_detail .chart.recruit_chart td {
    vertical-align: middle;
}
.news_detail .chart.recruit_chart td:first-child {
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    .news_detail .chart.recruit_chart .pc {
        display: none;
    }
    .news_detail .chart.recruit_chart .sp {
        display: block;
        margin-bottom: 1.5em;
        border: 1px solid var(--light_color2);
        background: #fff;
        font-size: 1.4rem;
    }
    .news_detail .chart.recruit_chart .inner {
        border: none;
    }
    .news_detail .chart.recruit_chart .sp-row {
        display: flex;
        border-bottom: 1px solid var(--light_color2);
    }
    .news_detail .chart.recruit_chart .sp-row:last-child {
        border-bottom: none;
    }
    .news_detail .chart.recruit_chart .sp-label {
        width: 50%;
        max-width: 148px;
        background: #1f4373;
        color: #fff;
        font-weight: bold;
        padding: 0.75em;
        text-align: left;
    }
    .news_detail .chart.recruit_chart .sp-value {
        width: 65%;
        padding: 0.75em;
        text-align: left;
    }
}

/* ----------------------
吹き出しパーツ
---------------------- */
.recruit_comment {
    gap: 20px;
}
.agent_comment.recruit_comment .image {
    height: 120px;
    width: 120px;
    border-radius: 100vw;
    border: solid 2px #d3e3f2;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.news_detail .outline .recruit_comment img {
    width: 110%;
    border: none;
    position: absolute;
    top: -3px;
    left: -9px;
}
.agent_comment.recruit_comment .fukidashi {
    width: 84%;
}
.agent_comment .fukidashi:before {
    border-right: 20px solid #f9fafb;
}
.news_detail .outline .recruit_comment .recruit_comment_ttl {
    margin-bottom: 10px;
    font-weight: 600;
}
.news_detail .outline .recruit_comment .recruit_comment_list {
    padding-left: 15px;
}
.news_detail .outline .recruit_comment .recruit_comment_item {
    margin-bottom: 10px;
    line-height: 1.4em;
}

@media screen and (max-width: 768px) {
    .agent_comment.recruit_comment .image {
        height: 70px;
        width: 70px;
    }
    .agent_comment.recruit_comment .fukidashi {
        padding: 10px 15px 3px;
        font-size: 1.4rem;
    }
}

/* ----------------------
ポイントパーツ
---------------------- */
.news_detail .recruit_point {
    margin: 30px 0;
    border-radius: 5px;
    border: 3px solid var(--primary_color);
}
.news_detail .recruit_point .recruit_point_ttl {
    padding: 4px 20px 7px;
    margin: 0;
    color: white;
    font-weight: 600;
    background-color: var(--primary_color);
    font-size: 1.6rem;
}
.news_detail .recruit_point .recruit_point_check_wrapper {
    padding: 16px 20px;
}
.news_detail .recruit_point .recruit_point_check {
    margin: 0 0 8px;
    position: relative;
    padding-left: 25px;
    line-height: 1.4em;
}
.news_detail .recruit_point .recruit_point_check:last-child {
    margin-bottom: 0;
}
.news_detail .recruit_point .recruit_point_check::before {
    content: "";
    background-image: url(../img/common/recruit-news_check_box.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 21px;
    height: -webkit-fill-available;
    position: absolute;
    left: -3px;
    top: 2px;
}

@media screen and (max-width: 768px) {
    .news_detail .recruit_point {
        border-radius: 3px;
        border: 2px solid var(--primary_color);
    }
    .news_detail .recruit_point .recruit_point_ttl {
        padding: 4px 15px 7px;
        font-size: 1.4rem;
    }
    .news_detail .recruit_point .recruit_point_check_wrapper {
        padding: 15px;
    }
    .news_detail .recruit_point .recruit_point_check {
        margin: 0 0 5px;
        padding-left: 20px;
        font-size: 1.4rem;
    }
    .news_detail .recruit_point .recruit_point_check::before {
        width: 18px;
        top: 1px;
    }
}

.banner-loginbonus_area {
    display: none;
}

@media screen and (max-width: 768px) {
    .banner-loginbonus_area {
        display: block;
    }
    .banner-loginbonus_area > a {
        display: block;
    }
    .banner-loginbonus_area > a > img {
        vertical-align: bottom;
    }
}
/* ========================================
WTC_DEV-12220 Manegyセミナー用パーツ作成
======================================== */
.seminar_detail .parts_speaker{
    border: 1px solid #101e95;
    padding: 20px;
    display: flex;
    gap: 25px;
    width: 60%;
    margin: 40px auto;
    align-items: center;
}
.seminar_detail .parts_speaker .icon{
    width: 150px;
    margin: 0;
}
.seminar_detail .parts_speaker .data{

}
.seminar_detail .parts_speaker .name{
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px;
}
.seminar_detail .parts_speaker .team{
    font-size: 14px;
    margin: 10px 0;
}
.seminar_detail .parts_speaker .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: 12px 10px;
    border-radius: 5px;
    background-color: #101e95;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    margin: 20px 0 0;
}
.seminar_detail .parts_speaker .btn::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}
.seminar_detail .parts_speaker .sns_area {
    margin-top: 20px;
}
.seminar_detail .parts_speaker .btn_sns img{
    width: 28px;
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .seminar_detail .parts_speaker{
        width: 90%;
        padding: 15px 10px;
        gap: 15px;
    }
    .seminar_detail .parts_speaker .icon {
        width: 35%;
        margin: 0;
    }
    .seminar_detail .parts_speaker .data{
        width: 100%;
    }
    .seminar_detail .parts_speaker .name{
        font-size: 16px;
    }
    .seminar_detail .parts_speaker .team{
        font-size: 12px;
    }
    .seminar_detail .parts_speaker .btn{
        width: 100%;
        padding: 8px 0;
        font-size: 13px;
        margin-top: 15px;
    }
    .seminar_detail .parts_speaker .btn_sns img{
        width: 24px;
    }
}

/* ============================================================
WTC_DEV-12370 Manegy＞ニュース記事一覧＞パーツ作成：コーディング
============================================================== */
/*---------------------------------------
サービス別ニュース一覧
---------------------------------------*/
#news_search {
    background-color: #f8f7f6;
    margin-top: 50px;
    color: #2b2b2b;
}
#news_search .search_container {
    max-width: 1340px;
    margin: auto;
    padding: 50px 20px;
    box-sizing: border-box;
}
#news_search h2.ttl {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: solid 4px var(--primary_color);
    text-align: left;
    border-bottom: none;
}
#news_search h3.list_til {
    font-size: 1.8rem;
    font-weight: 500;
    border-bottom: none;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
}
#news_search h3.list_til:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #187ed3;
    border: none;
    border-radius: 10px;
}
#news_search .jinji h3.list_til:before {
    background: #ff8a00;
}
#news_search .soumu h3.list_til:before {
    background: #9b3bd2;
}
#news_search .houmu h3.list_til:before {
    background: #39ad00;
}
#news_search .keieikikaku h3.list_til:before {
    background: #e03636;
}
#news_search h3.list_til:after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    margin-left: 9px;
    background-color: #d6d3d0;
}
#news_search .search_list_con:not(:last-child) {
    margin-bottom: 30px;
}
#news_search .service-tag {
    display: inline-block;
}
#news_search .service-tag_link {
    display: inline-block;
    margin: 0 8px 10px 0;
    padding: 10px 15px;
    line-height: 1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid #d6d3d0;
    border-radius: 50vw;
    color: #2b2b2b;
}
@media screen and (max-width: 768px) {
    #news_search {
        margin-top: 30px;
    }
    #news_search .search_container {
        padding: 40px 20px;
    }
    #news_search h2.ttl {
        font-size: 1.8rem;
        line-height: 1.2em;
        margin-bottom: 30px;
    }
    #news_search .search_list_con:not(:last-child) {
        margin-bottom: 20px;
    }
    #news_search h3.list_til {
        font-size: 1.6rem;
        gap: 6px;
        margin-bottom: 15px;
    }
    #news_search h3.list_til:after {
        margin-left: 6px;
    }
    #news_search .service-tag_link {
        margin: 0 3px 8px 0;
        padding: 6px 10px;
        font-size: 13px;
    }
}


/* =========================================================================
WTC_DEV-12467 サービス詳細ページ＞「サンプル画像」の表示箇所を追加する：コーディング
========================================================================= */
/* -----------------------
通常時：3つ横並び
----------------------- */
.service_contents .sample_list {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.service_contents .sample_item {
    width: calc(33.333% - 10px);
    border: 1px solid #ddd;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;
    aspect-ratio: 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    transition: .3s;
}
.service_contents .sample_item:hover {
    opacity: .7;
}
.service_contents .sample_item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.service_contents .sample_item.active {
    border-color: var(--primary_color);
    box-shadow: 0 0 0 3px var(--primary_color);
}

/* -----------------------
モーダル
----------------------- */
.service_contents .sample_modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.service_contents .sample_modal.active {
    display: flex;
}
.service_contents .sample_modal_content {
    position: relative;
    width: 70%;
    max-width: 745px;
}
.service_contents .sample_modal_content img {
    width: 100%;
    height: auto;
    display: block;
}
/* 閉じるボタン */
.service_contents .sample_modal_close {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 50px;
    height: 50px;
    background: var(--gray02);
    border-radius: 50vw;
    border: none;
    cursor: pointer;
    z-index: 1000;
}
.service_contents .sample_modal_close:hover {
    opacity: 1;
}
.service_contents .sample_modal_close::before,
.service_contents .sample_modal_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: #78787a;
    transform-origin: center;
}
.service_contents .sample_modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.service_contents .sample_modal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* -----------------------
slick カスタム
----------------------- */
.service_contents .sample_slider {
    overflow: hidden;
    background-color: #fff;
}
.service_contents .sample_slider .slick-slide {
    display: flex;
}
.service_contents .sample_prev-arrow, .service_contents .sample_next-arrow {
    display: block;
    width: 58px;
    height: 58px;
    border: 1px solid #acacac;
    background: #fff;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s;
}
.service_contents .sample_prev-arrow:hover, .service_contents .sample_next-arrow:hover {
    opacity: .7;
}
.service_contents .sample_prev-arrow {
    left: -80px;
}
.service_contents .sample_next-arrow {
    right: -80px;
}
.service_contents .sample_prev-arrow::before {
    position:absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid #acacac;
    border-bottom: 2px solid #acacac;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}
.service_contents .sample_next-arrow::before{
    position:absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #acacac;
    border-top: 2px solid #acacac;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}

@media screen and (max-width: 768px) {
    /* -----------------------
    通常時：3つ横並び
    ----------------------- */
    .service_contents .sample_list {
        gap: 8px;
    }
    .service_contents .sample_item {
        width: calc(33.333% - 4px);
    }
    .service_contents .sample_item.active {
        box-shadow: 0 0 0 2px var(--primary_color);
    }

    /* -----------------------
    モーダル
    ----------------------- */
    .service_contents .sample_modal_content {
        width: 80%;
    }
    .service_contents .sample_modal_content img {
        max-width: unset;
    }
    /* 閉じるボタン */
    .service_contents .sample_modal_close {
        top: -15px;
        right: -15px;
        width: 28px;
        height: 28px;
    }
    .service_contents .sample_modal_close::before,
    .service_contents .sample_modal_close::after {
        width: 14px;
        height: 2px;
    }

    /* -----------------------
    slick カスタム
    ----------------------- */
    .service_contents .sample_prev-arrow, .service_contents .sample_next-arrow {
        width: 38px;
        height: 38px;
        z-index: 1000;
    }
    .service_contents .sample_prev-arrow {
        left: -30px;
    }
    .service_contents .sample_next-arrow {
        right: -30px;
    }
    .service_contents .sample_prev-arrow::before,
    .service_contents .sample_next-arrow::before {
        width: 6px;
        height: 6px;
    }
}
/* ========================================
WTC_DEV-13072 ManegyClip＞規約ページ作成
======================================== */
#clip_rule{
    max-width: 870px;
    margin: 5rem auto 8rem;
    color: #080E5E;
    font-size: 1.4rem;
}
#clip_rule .heading{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
#clip_rule .heading .logo_manegyclip{
    width: 130px;
}
#clip_rule .heading h1{
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
}
#clip_rule h2{
    background: #0D1CA8;
    color: #fff;
    border: none;
    font-size: 1.8rem;
    display: block;
    margin: 3rem 0 2rem;
    padding: 0.5rem 2rem 0.6rem;
    font-weight: 500;
}
#clip_rule .block{
    text-align: left;
    margin: 0 0 1.5rem;
}
#clip_rule .block h3{
    color: #0D1CA8;
    font-size: 1.6rem;
    border: none;
    margin: 0 0 0.8rem;
    font-weight: 600;
    border-left: 3px solid #0D1CA8;
    padding-left: 1rem;
}
#clip_rule .block .letter{
    font-weight: 400;
    margin: 0;
}
#clip_rule .block .letter{
    font-weight: 400;
    margin: 0;
}
#clip_rule .rule_list{
    font-weight: 400;
    margin: 0;
    list-style: none;
}
#clip_rule .rule_list li{
    margin-bottom: 1rem;
    list-style-type: decimal;
    margin-left: 2.2rem;
    padding-left: 0.6rem;
}
#clip_rule a{
    color: #0D1CA8;
    overflow-wrap: break-word;
}
#clip_rule .margin_top{
    margin-top: 1rem;
}
#clip_rule .margin_btm{
    margin-bottom: 1rem;
}
#clip_rule .margin_left{
    margin-left: 2rem;
}
#clip_rule .margin_left_none > li{
    margin-left: 0 !important;
}
#clip_rule .note{
    text-align: right;
    margin: 2rem 0 4rem;
}
#clip_rule .txt_bold{
    font-weight: 600;
}
#clip_rule .list_inner_txt{
    padding-left: 2rem;
}

#clip_rule .rule_list .dicimal-brackets{
    margin-top: 1rem;
    counter-reset: bracket;
}
#clip_rule .rule_list .dicimal-brackets > li{
    position: relative;
    padding-left: 2.2em;
    list-style-type: none
}
#clip_rule .rule_list .dicimal-brackets > li:before {
    counter-increment: bracket;
    content: "(" counter(bracket) ") ";
    position: absolute;
    left: 0;
    top: 0;
}
#clip_rule .rule_list .decimal-circle {
    counter-reset: circle;
    padding-left: 0;
  }
  
#clip_rule .rule_list .decimal-circle > li {
    position: relative;
    padding-left: 1.6em;
    margin-left: 4.8rem;
    list-style-type: none;
}
  
#clip_rule .rule_list .decimal-circle > li:nth-child(1)::before { content: "①"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(2)::before { content: "②"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(3)::before { content: "③"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(4)::before { content: "④"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(5)::before { content: "⑤"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(6)::before { content: "⑥"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(7)::before { content: "⑦"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(8)::before { content: "⑧"; }
#clip_rule .rule_list .decimal-circle > li:nth-child(9)::before { content: "⑨"; }
  
#clip_rule .rule_list .decimal-circle > li::before {
    position: absolute;
    left: 0;
    top: 0;
}


/* --------- --------- ---------
WTC_DEV-12862
 --------- --------- --------- */
 #professional_number_box table tr {
    display: none;
    th {
        font-weight: bold;
        font-size: 14px;
        text-align: left;
    }
    td {
        padding: 4px;
    }
}



@media screen and (max-width: 768px) {
    #clip_rule{
        max-width: 100%;
        margin: 3rem 2rem 5rem;
    }
    #clip_rule .heading{
        gap: 2rem;
        justify-content: center;
    }
    #clip_rule .heading .logo_manegyclip{
        width: 90px;
    }
    #clip_rule .heading h1{
        font-size: 2.2rem;
    }
    #clip_rule h2{
        font-size: 1.6rem;
        text-align: center;
    }
    #clip_rule .block h3{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 1023px) {
    #clip_rule{
        max-width: 100%;
        margin: 3rem 2rem 5rem;
    }
}
/* ========================================
WTC_DEV-13275 記事閲覧ポイントモーダル改修
======================================== */
.modal-overlay.point_got{
    background: rgba(0, 0, 0, .8);
    top: 7%;
    .modal-pointget{
        color: #151f34;
        padding: 30px 0;
        font-family: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        width: 100%;
        max-width: 640px;
        max-height: 100%;
        .renewal_modal_close{
            position: absolute;
            top: -26px;
            right: -20px;
            cursor: pointer;
            font-size: 2.4rem;
            color: var(--renewal_gray02);
            border: 1px solid var(--renewal_gray01);
            border-radius: 50vw;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            &::before{
                transform: translate(-50%, -50%) rotate(45deg);
            }
            &::after{
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            &::before,
            &::after{
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 3px;
                height: 27px;
                background: var(--renewal_gray02);
            }
        }
        .modal-header h2{
            font-size: 22px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            line-height: 1.2;
            letter-spacing: 0.04em;
            font-weight: 600;
            margin-bottom: 27px;
        }
        .modal-subtitle{
            background-color: #0d1ca8;
            color: #fff;
            border-radius: 100px;
            font-size: 18px;
            width: 60%;
            margin: auto;
            letter-spacing: 0.04em;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
            line-height: 1.3;
        }
        .circle{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 24px;
            border-radius: 50%;
            background: #0d1ca8;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            flex-shrink: 0;
            padding-left: 2px;
            transform: translateX(-0.5px) translateY(0.5px);
        }
        .modal-back{
            background-color: #f2f3f6;
            .modal-back_inner{
                width: 80%;
                margin: auto;
                .modal-content{
                    margin-top: -17px;
                    margin-bottom: 20px;
                    padding-top: 40px;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    .modal-news{
                        box-shadow: none;
                        padding: 0;
                        width: unset;
                        .point-badge{
                            top: 0;
                            right: 0;
                            background: #0d1ca8;
                            border-radius: 0 3px 0 0;
                            font-size: 12px;
                            letter-spacing: 0.04em;
                            font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
                        }
                        .news-image{
                            border-radius: 3px;
                            aspect-ratio: auto;
                            width: 150px;
                            margin-bottom: 8px;
                        }
                    }
                }
                .modal-button {
                    padding-bottom: 23px;
                    justify-content: space-between;
                    gap: 0;
                  
                    .btn_secondary {
                      background-color: #fff;
                      border: solid 1px #0d1ca8;
                      color: #0d1ca8;
                      border-radius: 3px;
                      font-size: 16px;
                      padding: 15px 0;
                      width: 49%;
                      position: relative;
                      overflow: hidden;
                      z-index: 0;
                      opacity: 1!important;
                  
                      &::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        z-index: 0;
                        width: 100%;
                        height: 100%;
                        background: var(--renewal_blue01);
                        transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1);
                        transform: scale(0, 1);
                        transform-origin: right top;
                        clip-path: unset;
                        margin-top: 0;
                        z-index: -1;
                      }
                  
                      > * {
                        position: relative;
                        z-index: 1;
                      }
                  
                      &:hover {
                        color: #fff;
                  
                        &::before {
                          transform-origin: left top;
                          transform: scale(1, 1);
                        }
                      }
                    }
                  }
                  
            }
        }
        .bop{
            border: solid 1px #0d1ca8;
            padding: 15px 30px;
            border-radius: 5px;
            margin: 20px 35px 10px;
            .bop-inner{
                display: flex;
                align-items: center;
                gap: 13px;
                justify-content: center;
                .bop-lead{
                    color: #0d1ca8;
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 2.4rem;
                }
                .bop-arrows{
                    display: inline-flex;
                    align-items: center;
                    gap: 3px;
                    flex: 0 0 auto;
                    span{
                        display: inline-block;
                        width: 0;
                        height: 0;
                        border-top: 7px solid transparent;
                        border-bottom: 7px solid transparent;
                        border-left: 11px solid #0d1ca8;
                      }
                  }
                  .bop-arrows span:nth-child(2){ opacity: .55; }
                  .bop-arrows span:nth-child(3){ opacity: .25; }
                  .bop-btn {
                    width: 100%;
                    max-width: 280px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 3px;
                    height: 55px;
                    border-radius: 4px;
                    background: linear-gradient(90deg, #0d1ca8 0%, #4377ff 100%);
                    color: #fff;
                    text-decoration: none;
                    font-weight: 600;
                    font-size: 16px;
                    position: relative;
                    overflow: hidden;
                    opacity: 1!important;
                    &::before {
                      content: "";
                      position: absolute;
                      top: 0;
                      left: 0;
                      z-index: 0;
                      width: 100%;
                      height: 100%;
                      background: var(--renewal_blue02);
                      transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1);
                      transform: scale(0, 1);
                      transform-origin: right top;
                    }
                    * {
                      position: relative;
                      z-index: 1;
                    }
                  
                    &:hover::before {
                      transform-origin: left top;
                      transform: scale(1, 1);
                    }
                  }
                  
                  .bop-logo{
                    width: 100%;
                    max-width: 130px;
                  }
            }
        }
        .modal-footer{
            a{
                position: relative;
                color: #4377ff;
                font-size: 14px;
                letter-spacing: .1em;
                border-bottom: solid 1px #4377ff;
                padding-bottom: 2px;
                padding-right: 14px;
                font-weight: 500;
                &::after{
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: 5px;
                    height: 5px;
                    border-top: 2px solid currentColor;
                    border-right: 2px solid currentColor;
                    transform: translateY(-50%) rotate(45deg);
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .modal-overlay.point_got{
        .modal-pointget{
            width: 90%;
            padding: 20px 0;
            border-radius: 5px;
            .renewal_modal_close{
                top: -15px;
                right: -13px;
                font-size: 1.4rem;
                width: 30px;
                height: 30px;
                &::before,
                &::after{
                    width: 2px;
                    height: 16px;
                }
            }
            .modal-header h2{
                font-size: 20px;
                margin-bottom: 15px;
                .circle{
                    width: 20px;
                    height: 22px;
                    font-size: 15px;
                }
            }
            .modal-subtitle{
                font-size: 16px;
                width: 87%;
                margin: auto;
            }
            .modal-back{
                margin-bottom: 15px;
                .modal-back_inner{
                    width: 88%;
                    .modal-content{
                        width: 100%;
                        margin-bottom: 13px;
                        max-width: none;
                        .modal-news{
                            gap: 15px;
                            .modal-news-thumb{
                                position: relative;
                                .news-image{
                                    width: 100px;
                                }
                            }
                            .news-text{
                                margin: unset;
                            }
                            .news-title {
                                font-size: 13px;
                                line-height: 1.4;
                            }
                        }
                    }
                    .modal-button{
                        a{
                            span{
                                display: block;
                            }
                        }
                        .btn_secondary{
                            font-size: 14px;
                            padding: 0;
                            height: 40px;
                        }
                    }
                }
            }
            .bop{
                padding: 7px 0 12px;
                width: 88%;
                margin: 0 auto;
                .bop-inner{
                    display: block;
                    text-align: center;
                    .bop-lead{
                        font-size: 15px;
                        text-align: center;
                        margin-bottom: 6px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        gap: 4px;
                        line-height: 1.3;
                        .bop-tri{
                            display: inline-flex;
                            align-items: center;
                            gap: 4px;
                            flex: 0 0 auto;
                          }
                          .bop-tri::before,
                          .bop-tri::after{
                                content: "";
                                width: 0;
                                height: 0;
                                border-left: 7px solid transparent;
                                border-right: 7px solid transparent;
                                border-top: 11px solid #0d1ca8;
                                display: inline-block;
                                margin: 0 1px;
                        }
                        .bop-tri:first-of-type::before{
                            border-top-color: #9ea4dc;
                        }
                        .bop-tri:last-of-type::after{
                            border-top-color: #9ea4dc;
                        }
                        .bop-text{
                            font-size: 16px;
                        }
                    }
                    .bop-btn{
                        height: 43px;
                        max-width: 290px;
                        .bop-logo{
                            max-width: 110px;
                        }
                        .bop-cta-text{
                            font-size: 14px;
                        }
                    }
                }
            }
            .modal-footer {
                a{
                    font-size: 13px!important;
                }
            }
        }
    }
}
@media screen and (max-width: 400px){
    .modal-overlay.point_got{
        .modal-pointget{
            .modal-subtitle{
                font-size: 15px;
                width: 90%;
            }
        }
    }
}
@media screen and (max-width: 375px){
    .modal-overlay.point_got{
        .modal-pointget{
            .bop{
                .bop-inner{
                    .bop-lead{
                        .bop-text{
                            font-size: 15px;
                        }
                    }
                    .bop-btn{
                        height: 43px;
                        max-width: 265px;
                    }
                }
            }
        }
    }
}

/* -------------------------------------------------------------
WTC_DEV-13327 Manegy＞ニュース＞セミナーレコメンド追加：静的
------------------------------------------------------------- */
#recommend_seminar.news_detail_recommend .movie.category .detail_title4{
    font-size: var(--font_size_r);
    padding: 8px;
}
#recommend_seminar.news_detail_recommend .point_flag{
    display: inline-block;
    background: var(--renewal_red);
    color: #fff;
    margin: 0 10px 0;
    font-size: var(--font_size_xs);
    padding: 5px 10px;
    border-radius: 3px;
}
@media (max-width: 768px) {
    #recommend_seminar.news_detail_recommend .movie_contents_tag {
        padding-top: 0;
    }
}