@charset "UTF-8";
/*
Theme Name:mrp-child
Template:mrp
Version: 1.0.0
*/
/*
DesignCode CSS: ver 0.01
*/
/*------------------------------------------------------
Theme Material
------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&family=Lusitana:wght@400;700&display=swap");

:root {
    --color-background: #fff;
    --color-white: #fff;
    --color-gray: #F5F5F5;
    --color-font: #333333;
    --color-primary: #00AFEC;
    --color-primary-shade: #111;
    --color-primary-tint: #4EA0B8;
    --color-secondary: #F671AA;
    --color-secondary-tint: #E4F4FC;
    --color-table-border: #4EA0B8;
    --color-grade: linear-gradient(to right, #A2D5EA, #EAF7FD);
    --content-max-width: 1240px;
    --header-background: #fff;
    --header-color-font: #333333;
    --header-color-primary: #00AFEC;
    --header-color-primary-shade: #111;
    --header-color-primary-tint: #aaa;
    --footer-background: #F3F7F6;
    --footer-color-font: #4EA0B8;
    --footer-color-primary: #4EA0B8;
    --body-font-family: "Noto Sans JP", sans-serif;
    --font-family01: "Noto Sans JP", sans-serif;
    --font-family02: "Oswald", "Noto Sans JP", sans-serif;
    --font-family03: "Lusitana", serif;
    --font-family04: "BIZ UDPMincho", serif;
    --body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem);
    --px200: min(calc(200px + (1vw - 19.2px) * 6.5046), 200px);
    --px190: min(calc(190px + (1vw - 19.2px) * 6.1795), 190px);
    --px180: min(calc(180px + (1vw - 19.2px) * 5.8543), 180px);
    --px170: min(calc(170px + (1vw - 19.2px) * 5.5291), 170px);
    --px160: min(calc(160px + (1vw - 19.2px) * 5.2039), 160px);
    --px150: min(calc(150px + (1vw - 19.2px) * 4.8787), 150px);
    --px140: min(calc(140px + (1vw - 19.2px) * 4.5535), 140px);
    --px130: min(calc(130px + (1vw - 19.2px) * 4.2283), 130px);
    --px120: min(calc(120px + (1vw - 19.2px) * 3.9031), 120px);
    --px110: min(calc(110px + (1vw - 19.2px) * 3.5780), 110px);
    --px100: min(calc(100px + (1vw - 19.2px) * 3.2526), 100px);
    --px98: min(calc(98px + (1vw - 19.2px) * 3.1868), 98px);
    --px96: min(calc(96px + (1vw - 19.2px) * 3.1210), 96px);
    --px94: min(calc(94px + (1vw - 19.2px) * 3.0551), 94px);
    --px92: min(calc(92px + (1vw - 19.2px) * 2.9893), 92px);
    --px90: min(calc(90px + (1vw - 19.2px) * 2.9235), 90px);
    --px88: min(calc(88px + (1vw - 19.2px) * 2.8576), 88px);
    --px86: min(calc(86px + (1vw - 19.2px) * 2.7918), 86px);
    --px84: min(calc(84px + (1vw - 19.2px) * 2.7260), 84px);
    --px82: min(calc(82px + (1vw - 19.2px) * 2.6601), 82px);
    --px80: min(calc(80px + (1vw - 19.2px) * 2.5943), 80px);
    --px78: min(calc(78px + (1vw - 19.2px) * 2.5285), 78px);
    --px76: min(calc(76px + (1vw - 19.2px) * 2.4626), 76px);
    --px74: min(calc(74px + (1vw - 19.2px) * 2.3968), 74px);
    --px72: min(calc(72px + (1vw - 19.2px) * 2.3310), 72px);
    --px70: min(calc(70px + (1vw - 19.2px) * 2.2639), 70px);
    --px68: min(calc(68px + (1vw - 19.2px) * 2.1993), 68px);
    --px66: min(calc(66px + (1vw - 19.2px) * 2.1346), 66px);
    --px64: min(calc(64px + (1vw - 19.2px) * 2.0698), 64px);
    --px62: min(calc(62px + (1vw - 19.2px) * 2.0051), 62px);
    --px60: min(calc(60px + (1vw - 19.2px) * 1.9404), 60px);
    --px58: min(calc(58px + (1vw - 19.2px) * 1.8757), 58px);
    --px56: min(calc(56px + (1vw - 19.2px) * 1.8110), 56px);
    --px54: min(calc(54px + (1vw - 19.2px) * 1.7463), 54px);
    --px52: min(calc(52px + (1vw - 19.2px) * 1.6815), 52px);
    --px50: min(calc(50px + (1vw - 19.2px) * 1.6168), 50px);
    --px48: min(calc(48px + (1vw - 19.2px) * 1.5521), 48px);
    --px36: min(calc(36px + (1vw - 19.2px) * 1.1642), 36px);
    --px38: min(calc(38px + (1vw - 19.2px) * 1.2289), 38px);
    --px46: min(calc(46px + (1vw - 19.2px) * 1.4873), 46px);
    --px44: min(calc(44px + (1vw - 19.2px) * 1.4229), 44px);
    --px42: min(calc(42px + (1vw - 19.2px) * 1.3582), 42px);
    --px40: min(calc(40px + (1vw - 19.2px) * 1.2935), 40px);
    --px34: min(calc(34px + (1vw - 19.2px) * 1.0995), 34px);
    --px32: min(calc(32px + (1vw - 19.2px) * 1.0349), 32px);
    --px30: min(calc(30px + (1vw - 19.2px) * 0.9702), 30px);
    --px28: min(calc(28px + (1vw - 19.2px) * 0.9055), 28px);
    --px26: min(calc(26px + (1vw - 19.2px) * 0.8408), 26px);
    --px24: min(calc(24px + (1vw - 19.2px) * 0.7762), 24px);
    --px22: min(calc(22px + (1vw - 19.2px) * 0.7115), 22px);
    --px20: min(calc(20px + (1vw - 19.2px) * 0.6469), 20px);
    --px18: min(calc(18px + (1vw - 19.2px) * 0.5822), 18px);
    --px16: min(calc(16px + (1vw - 19.2px) * 0.5175), 16px);
    --px14: min(calc(14px + (1vw - 19.2px) * 0.4528), 14px);
    --px12: min(calc(12px + (1vw - 19.2px) * 0.3883), 12px);
    --px10: min(calc(10px + (1vw - 19.2px) * 0.3236), 10px);
}

.widearea {
    margin-right: calc((100vw - 100%) / 2 * -1);
    margin-left: calc((100vw - 100%) / 2 * -1);
}

.post h2:after {
    background-color: var(--color-primary-tint) !important;
}

.ai-l {
    align-items: flex-start !important;
}

.ai-l::after {
    margin: 0.6em 0 0 0 !important;
}

.jc-l {
    justify-content: flex-start !important;
}

.bg-grade {
    background: var(--color-grade) !important;
}

.maxw-none {
    max-width: none !important;
}

.border-bottom {
    border-bottom: 1px solid var(--color-font);
}

#thumbImg::before,
header#h1Header::before {
    content: none !important;
}

.title-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.title-area .title-en {
    font-size: var(--px80);
    line-height: 1;
    color: var(--color-primary-tint);
    font-family: var(--font-family03);
    font-weight: 400;
    text-transform: 400;
    text-transform: uppercase;
}

.title-area .title-ja {
    font-family: var(--font-family04);
    font-size: var(--px22);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-font);
    font-weight: 400;
}

.title-area .title--txt_l {
    width: 100%;
    text-align: left;
}

.title-bottom {
    line-height: 3;
}

.page_contents_inner .title-en {
    font-size: var(--px50);
    line-height: 1;
    color: var(--color-primary-tint);
    font-family: var(--font-family03);
    font-weight: 400;
    text-transform: 400;
    text-transform: uppercase;
}

.page_contents_inner .title-ja {
    font-family: var(--font-family04);
    font-size: var(--rem20);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-font);
    font-weight: 400;
}

.column01 .title-en {
    font-size: var(--px60);
    line-height: 1;
    color: var(--color-primary-tint);
    font-family: var(--font-family03);
    font-weight: 400;
    text-transform: 400;
    text-transform: uppercase;
}

.column01 .title-ja {
    font-family: var(--font-family04);
    font-size: var(--px28);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-font);
    font-weight: 400;
}

.link__btn {
    font-family: var(--font-family03);
    font-size: var(--px22);
    color: var(--color-primary-tint);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--px12);
    font-weight: bold;
    width: -moz-fit-content;
    width: fit-content;
}

.link__btn img {
    width: 56px;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.btn-center {
    display: flex;
    justify-content: center;
}

.footer__text--primary {
    color: var(--color-primary);
}

.footer__logo {
    margin-bottom: 0;
}

.footer__name {
    font-size: var(--rem18);
}

#footer .footer__logo:not(:last-child) {
    margin-bottom: 0 !important;
}

#footer .footer__logo img {
    max-height: var(--px90) !important;
}

footer .socialicon .fa-facebook:before,
#footer .socialicon .fa-twitter:before,
#footer .socialicon .fa-youtube:before,
#footer .socialicon .fa-instagram:before,
#footer .socialicon .fa-x-twitter:before,
#footer .socialicon .fa-line:before,
#footer .socialicon .fa-tiktok:before {
    color: var(--color-primary) !important;
}

.socialicon {
    padding: var(--px24);
}

/*--------------google翻訳--------------*/
.gtranslate_wrapper {
    background: var(--footer-background);
    gap: 3px;
}

.glink {
    align-content: center;
}

@media print,
screen and (min-width: 1024px) {
    #header {
        height: auto !important;
    }

    #header-layout {
        height: 100px;
    }

    .gtranslate_wrapper {
        display: flex;
        flex-wrap: nowrap;
        justify-content: end;
        width: 99.5%;
        margin: 0.5rem auto;
    }

    select.gt_selector.notranslate {
        width: 150px;
    }
}

@media print,
screen and (max-width: 1023px) {
    .header__translator {
        position: fixed;
        overflow: hidden;
        z-index: 999;
        right: 0;
        bottom: 120px;
        background: rgba(255, 255, 255, 0.8);
        padding: 10px 10px 10px 10px;
        border-radius: 5px 0 0 5px;
        transition: 0.5s;
    }

    .gtranslate_wrapper {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        background: transparent;
        gap: 4px;
    }

    .gtranslate_wrapper br {
        display: none;
    }

    select.gt_selector {
        display: none;
    }
}

.gtranslate_wrapper .glink:nth-child(1) {
    order: 3;
}

.gtranslate_wrapper .glink:nth-child(2) {
    order: 1;
}

.gtranslate_wrapper .glink:nth-child(3) {
    order: 2;
}

.gtranslate_wrapper .gt_selector {
    order: 4;
}

/*--------------google翻訳ここまで--------------*/
.page-sitemap .cta01,
.page-contact .cta01,
.page-thanks .cta01,
.home .cta01 {
    display: none;
}

.home .cta01.cta01-top {
    display: block !important;
}

.page-contact .linkBtn {
    padding: 0 !important;
    max-width: 320px !important;
}

/*-----------------------------
fullwide01
------------------------------*/
.fullwide01 {
    position: relative;
    padding: 0;
}

.fullwide01_wrap {
    max-width: var(--content-max-width);
    width: 94%;
    margin: 0 auto;
    padding: var(--px84) var(--px140);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullwide01_inner {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
}


@media print,
screen and (max-width: 1024px) {
    .top-choose__list--item {
        flex-direction: column;
    }
}



@media print,
screen and (max-width: 768px) {
    .fullwide01_wrap {
        padding: var(--px80) 5%;
    }

    .top-choose__list--item {
        flex-direction: column;
    }
}


/*-----------------------------
column_01
------------------------------*/
.toptxtarea {
    max-width: 960px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.column01 {
    position: relative;
}

.column01_wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
}

.column01 .txtarea {
    background: #fff;
    display: flex;
    align-items: center;
    padding: var(--px90) var(--px100);
    margin: 0;
    max-width: 800px;
}

.column01 .txtarea .txtinner {
    max-width: 600px;
}

.column01 .imgarea {
    overflow: hidden;
    line-height: 0;
    margin: 0;
}

.column01 .imgarea img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media print,
screen and (max-width: 768px) {
    .column01 .txtarea {
        padding: var(--px80) 5%;
    }
}

/*-----------------------------
cta01_col2
------------------------------*/
.cta01 {
    background-image: url(/wp-content/uploads/top-cta-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding: var(--px180) 24px;
}

.cta01 .title-ja {
    color: var(--color-primary-tint);
}

.cta01 .cta01_wrap {
    max-width: var(--content-max-width);
    width: 90%;
    margin: 0 auto;
}

.cta01 .ctabtnlist {
    justify-content: space-between;
    max-width: 1240px;
    margin: var(--px50) auto 0 auto;
    display: flex;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    .cta01 .ctabtnlist {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.cta01 .ctabtnlist li {
    width: 50%;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: flex;
}

.cta01 a.item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--px30) 0;
    text-align: center;
    box-sizing: border-box;
    border-radius: 0;
    transition: all ease 0.15s;
}

.cta01 a.item:hover {
    opacity: 0.8;
}

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

    .cta01 .ctabtnlist li,
    .cta01 .ctabtnlist a.item {
        width: 100%;
    }

    .cta01 .ctabtnlist li+li {
        margin-top: 1rem;
    }
}

/*ボタン共通パーツ*/
.cta01 .btnttl {
    display: block;
    font-weight: bold;
    margin-bottom: 1rem;
}

.cta01 .infotxt {
    font-size: var(--rem16);
    font-weight: 400;
    font-weight: bold;
}

/*電話ボタン*/
.cta01 .telnum {
    font-size: var(--rem36);
    margin-bottom: 1rem;
    font-weight: bold;
}

.cta01 .telbtn .btnttl {
    font-size: var(--rem20);
}

.cta01 a.telbtn {
    background: var(--color-white);
    color: var(--color-primary-tint);
}

/*メールボタン*/
.cta01 .mailbtn .btnttl {
    font-size: var(--rem24);
    margin-bottom: 0 !important;
}

.cta01 a.mailbtn {
    background: var(--color-primary);
    color: var(--color-white);
}

/*ボタンアイコン*/
.cta01 .mailbtn .btnttl::before,
.cta01 .telnum::before {
    content: "";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 1rem;
}

.cta01 .mailbtn .btnttl::before {
    content: "\f0e0";
}

.cta01 .telnum::before {
    content: "\f3cd";
}

/*================================================
					会社概要
================================================*/
/*--見出し--------------------------------------------*/
.post .sub_company h2 {
    font-size: min(2.8rem + (1vw - 19.2px) * 0.4531, 2.8rem);
    /* 2.8-2.1rem (1920-375) */
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.2rem;
    padding: 0;
    margin: min(120px + (1vw - 19.2px) * 3.5599, 120px) auto min(50px + (1vw - 19.2px) * 0.9709, 50px);
    /* 120-65px auto 50-35px (1920-375) */
}

.post .sub_company h2::before {
    content: none;
    position: relative;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
}

.post .sub_company h2::after {
    content: "";
    position: relative;
    visibility: visible;
    display: block;
    width: 2.2em;
    height: 2px;
    background: var(--color-primary);
    margin: 0.6em auto 0;
    margin-right: auto;
    margin-left: 0;
}

.post .sub_company h2:first-child {
    margin-top: 0;
}


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

    .title-area .title-en {
        font-size: var(--px60);
    }

}


/*--テーブル--------------------------------------------*/
.post table.table_style02,
.post table.table_style02 th,
.post table.table_style02 td {
    border-width: 1px 0;
    border-color: var(--color-table-border);
}

.post table.table_style02 {
    margin: min(30px + (1vw - 19.2px) * 0.6472, 30px) auto;
    /* 30-20px (1920-375) */
}

.post table.table_style02 th,
.post table.table_style02 td {
    font-size: min(1.6rem + (1vw - 19.2px) * 0.1294, 1.6rem);
    padding: min(36rem + (1vw - 1.24rem) * 5.8824, 36px) min(24rem + (1vw - 1.24rem) * 8.8235, 24px);
    /* 20-15px 15-10px (1920-375) */
}

.post table.table_style02 th {
    background-color: var(--color-secondary-tint);
    width: 29%;
    font-weight: 600;
    color: var(--color-primary-tint);
}

.post table.table_style02 td a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.post table.table_style02 td a:hover {
    opacity: 0.6;
}

.post table.table_style02:first-child {
    margin-top: 0;
}

.post table.table_style02:last-child {
    margin-bottom: 0;
}

/*================================================
					事業内容
================================================*/
/*-------------------------------------------
 teleco_v1
------------------------------------------- */
.teleco_v1 {
    justify-content: space-between;
}

.teleco_v1 h2 {
    width: 100%;
}

.teleco_v1 .w50.image_box {
    position: relative;
    overflow: hidden;
}

.teleco_v1 .w50.image_box::before {
    content: "";
    display: block;
}

.teleco_v1 .w50.image_box img {
    position: absolute;
    width: 100%;
    max-width: 550px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.teleco_v1 .w50.text_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 620px;
}

.teleco_v1 .text_box h3 {
    margin: 0 !important;
    border: none !important;
    padding-bottom: var(--px60) !important;
    font-size: var(--rem20);
    text-align: left;
    font-weight: bold;
    color: var(--color-secondary) !important;
}

.flexinnerBtn {
    align-self: normal;
}

@media print,
screen and (max-width: 768px) {
    .teleco_v1 .w50.image_box {
        margin-bottom: 0;
    }

    .teleco_v1 .w50.image_box::before {
        padding-top: calc(350px + (1vw - 7.68px) * 27.9898);
    }

    .teleco_v1 .w50.text_box {
        padding: 20px;
        margin-bottom: 0;
    }
}

/*--contact_area-------------------------------------*/
.contact_area {
    padding: min(80px + (1vw - 19.2px) * 2.589, 80px);
    /*80px-40px (1920-375)x*/
    text-align: center;
    background: var(--color-secondary-tint);
    margin-top: min(120px + (1vw - 19.2px) * 2.589, 120px);
}

.post .contact_ttl {
    font-size: var(--px26);
    font-weight: 600;
    color: var(--color-secondary);
    text-align: center;
    letter-spacing: 0.2rem;
    padding: 0;
    margin: min(120px + (1vw - 19.2px) * 3.5599, 120px) auto min(50px + (1vw - 19.2px) * 0.9709, 50px);
    /* 120-65px auto 50-35px (1920-375) */
}

.post .contact_ttl::before {
    content: none;
    position: relative;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
}

.post .contact_ttl::after {
    content: none;
}

.contact_read {
    margin: 0 0 min(30px + (1vw - 19.2px) * 0.9709, 30px);
    /*30px-15px (1920-375)*/
    text-align: center;
}

.contact_read p {
    line-height: 3;
    letter-spacing: 0.1em;
}

.button_wrap,
.post .button_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.button_wrap>*,
.post .button_wrap>* {
    margin: 10px !important;
}

.contact_area .linkBtn,
.contact_area .post .linkBtn {
    padding: 0;
    background: var(--color-primary-tint);
    max-width: 290px;
    transition: opacity 0.3s ease;
}

.contact_area .linkBtn:hover,
.contact_area .post .linkBtn:hover {
    opacity: 0.6;
}

.contact_area .linkBtn a {
    color: var(--color-white);
    padding: 0.8em 1.2em;
    display: block;
}

.top-about {
    background-image: url(/wp-content/uploads/top-about-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: var(--px86) 24px;
}

.top-about__inner {
    margin: 0 auto;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.top-about__inner .read_txt b {
    color: var(--color-font);
    font-size: var(--px26);
    line-height: 2;
    font-family: var(--font-family04);
    font-weight: 400;
}

.top-about__inner p {
    font-size: var(--rem16);
    line-height: 2.2;
    color: var(--color-font);
}

.top-service__bg {
    background-image: url(/wp-content/uploads/top-service-title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: var(--px200) 24px;
    max-width: none !important;
    width: 100%;
}

.top-products {
    background-color: var(--footer-background);
    padding-left: 24px;
    padding-right: 24px;
}

.top-products__list {
    margin: 0 auto;
    max-width: 1600px;
}

.top-products__list .time {
    background-color: var(--color-primary-tint);
}

.top-products__list .post4b_link {
    color: var(--color-font);
}

.top-products__list .post4b_link a {
    color: var(--color-font);
}

.top-products__list .post4b_img img {
    aspect-ratio: 380/260;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.top-products__list .cat-loop {
    color: var(--color-font);
    font-size: var(--rem18);
}

.top-products__list .post4b_contents {
    padding-top: var(--px20);
    font-size: var(--rem14);
}

.top-products__list .post4b_contents a {
    color: var(--color-font);
}

@media screen and (max-width: 768px) {
    .top-products__list .post4b {
        gap: var(--px24);
    }
}

.top-products__list li {
    max-width: 380px;
}

@media screen and (max-width: 768px) {
    .top-products__list li {
        max-width: 100%;
    }
}

.top-choose {
    background-image: url(/wp-content/uploads/top-choose-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: var(--px86) 24px;
}

.top-choose__inner {
    margin: 0 auto;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.top-choose__list {
    display: flex;
    flex-direction: column;
    gap: var(--px40);
}

.top-choose__list--item {
    padding-bottom: var(--px36) !important;
    border-bottom: 3px dashed var(--color-primary-tint) !important;
    display: flex;
    gap: var(--px50);
    align-items: center;
}

.top-choose__list--title {
    font-size: var(--rem18);
    line-height: 2;
    color: var(--color-primary-tint);
    font-weight: 500;
    width: 300px;
}

@media screen and (max-width: 1024px) {
    .top-choose__list--title {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .top-choose__list--title {
        width: 100%;
    }
}

.top-choose__list--text {
    font-size: var(--rem16);
    line-height: 1.6;
    color: var(--color-font);
    flex: 1;
}

.flow__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--px30);
}

.flow__list--item {
    width: 100%;
    padding: var(--px42) var(--px70) var(--px42) var(--px50);
    background-color: var(--color-secondary-tint);
}

@media screen and (max-width: 768px) {
    .flow__list--item {
        padding: var(--px42);
    }
}

.flow__inner {
    display: flex;
    justify-content: center;
    gap: var(--px40);
}

@media screen and (max-width: 768px) {
    .flow__inner {
        flex-direction: column-reverse;
    }
}

.flow__text {
    width: 100%;
    max-width: 690px;
    display: flex;
    flex-direction: column;
    gap: var(--px16);
}

.flow__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: var(--rem16);
    border-bottom: 1px solid var(--color-primary);
}

.flow__header--num {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: var(--color-primary-tint);
    color: var(--color-white);
    font-weight: bold;
    font-size: var(--px26);
    padding: 8px !important;
}

.flow__header--title {
    font-weight: bold;
    color: var(--color-primary-tint);
    font-size: var(--rem20);
}

@media screen and (max-width: 768px) {
    .flow__header--title {
        font-size: var(--rem28);
    }
}

.flow__bottom--text {
    font-size: var(--rem16);
    line-height: 2;
    color: var(--color-font);
}

.flow__arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-top: 40px solid var(--color-secondary);
    border-bottom: 0;
}

@media screen and (max-width: 768px) {
    .flow__arrow {
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-top: 30px solid var(--color-secondary);
    }
}

.about__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--px90);
}

.about__list--item {
    justify-content: center;
    align-items: center;
    gap: var(--px46);
}

.about__list--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--px18);
}

.about__list figure {
    width: 100%;
    max-width: 500px;
}

.about__list figure img {
    width: 100%;
    height: auto;
}

.about__header {
    border-bottom: 1px solid #bababa;
}

.about__header--title {
    font-size: var(--px22) !important;
    color: var(--color-secondary) !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding-bottom: var(--px20) !important;
    border: none !important;
    line-height: 2.2 !important;
    display: flex;
    gap: 10px;
}

.about__header--title::before {
    content: "" !important;
    display: block;
    width: 10px !important;
    height: auto !important;
    background-color: var(--color-secondary) !important;
    position: relative;
    left: 0;
}

.about__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--px22);
}

.about__bottom--main {
    color: var(--color-primary);
    font-size: var(--px18);
    font-weight: bold;
}

.about__bottom--small {
    font-size: var(--rem16);
    line-height: 2;
    color: var(--color-font);
}

.single__image--top {
    padding-bottom: var(--px120);
}

@media screen and (max-width: 768px) {
    .single__image--top {
        padding-bottom: var(--px60);
    }
}

.single__image--top figure {
    margin: 0 auto;
    width: 100%;
    max-width: 670px;
    height: auto;
}

.single__image--top figure img {
    width: 100%;
    height: auto;
}

.single__image--bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--px28);
    padding-top: var(--px100);
}

@media screen and (max-width: 768px) {
    .single__image--bottom {
        padding-top: var(--px60);
        flex-direction: column;
    }
}

.single__image--bottom figure {
    width: 100%;
    max-width: 409px;
}

.single__image--bottom figure img {
    width: 100%;
    height: auto;
}

nav#mainNav ul li a b,
nav#mainNav ul li a span {
    font-size: var(--rem18);
    font-family: var(--font-family01);
    font-weight: 400;
    transition: opacity 0.3s ease;
}

nav#mainNav ul li a b:hover,
nav#mainNav ul li a span:hover {
    opacity: 0.6;
}

.header__contact li {
    display: flex;
    align-items: center;
}

a.head_btn.tel_btn {
    gap: 4px !important;
    color: var(--color-font) !important;
    background-color: var(--color-white) !important;
    transition: opacity 0.3s ease;
    position: relative;
}

a.head_btn.tel_btn::before {
    content: "" !important;
    display: block !important;
    width: 1px;
    height: 60%;
    background-color: var(--color-font);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

a.head_btn.tel_btn:hover {
    opacity: 0.6;
}

a.head_btn.tel_btn .header__tel {
    font-size: var(--px24) !important;
}

.head_btn.mail_btn {
    gap: 8px !important;
    font-family: var(--font-family02);
    font-weight: 400;
    background-color: var(--color-primary);
    max-width: 160px;
}

.head_btn.mail_btn span {
    color: var(--color-white) !important;
}

/*# sourceMappingURL=index.css.map */