@charset "UTF-8";
:root {
  --main-color: #2166C7;
  --sub-color01: #9CCFFF;
  --sub-color02: #589AF5;
  --sub-color03: #004098;
  --sub-color04: #1B9759;
  --sub-color05: #F6C500;
  --sub-color06: #EF4552;
  --sub-color07: #F0F0F0;
  --sub-color08: #F96A76;
  --font-color-default: #333333;
  --news-cat01: #2166C7;
  --news-cat02: #F6C500;
  --news-cat03: #1B9759;
  --news-cat04: #ff8f18;
  --news-cat05: #589AF5;
  --news-cat06: #EF4552;
  --bg-color01: #E2F4FF;
  --bg-color02: #FFF0DA;
  --bg-color03: #EBF8FF;
  --calc-form-color01: #DEB26D;
  --calc-form-txt: #BE934F;
  --calc-form-bg: #FFF9F0;
  --calc-form-border: #DAC097;
  --table-header: #2166C7;
  --table-border: #C9D9E4;
  --wp--custom--color--text-red: #EF4552;
  --wp--custom--color--main-blue: #2166C7;
}

.has-text-red-color {
  color: var(--wp--custom--color--text-red);
}

.has-main-blue-color {
  color: var(--wp--custom--color--main-blue);
}

.has-text-red-background-color {
  background-color: var(--wp--custom--color--text-red);
}

.has-main-blue-background-color {
  background-color: var(--wp--custom--color--main-blue);
}

/*******************************************************************/
/* PC */
/*******************************************************************/
@media print, screen and (min-width:769px) {
  /*<start>==========================================================*/
  /*=================================================================*/
  /*	共通スタイル */
  /*=================================================================*/
  h2 {
    margin-bottom: 40px;
    color: var(--sub-color03);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
  }
  h2 span.sub {
    margin-left: 40px;
    color: #999999;
    font-family: Rubik;
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
  }
  h2 span.sub:before {
    content: "";
    width: 1px;
    height: 32px;
    display: block;
    background: #333;
    position: absolute;
    left: -20px;
  }
  /*=================================================================*/
  /*	メインビジュアル */
  /*=================================================================*/
  section.main_visual {
    padding: 40px 0 70px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  section.main_visual .main_slider {
    width: 100%;
  }
  section.main_visual .main_slider .swiper-wrapper > .swiper-slide {
    width: 960px !important;
  }
  section.main_visual .main_slider .swiper-wrapper > .swiper-slide img {
    filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.18));
  }
  section.main_visual .main_slider .swiper-wrapper > a:hover {
    opacity: 0.8;
  }
  section.main_visual .main_slider .swiper-pagination {
    line-height: 0;
    bottom: 30px;
  }
  section.main_visual .main_slider .swiper-pagination .swiper-pagination-bullet {
    margin: 0 8px;
    width: 10px;
    height: 10px;
    background: #D7D7D7;
    opacity: 1;
  }
  section.main_visual .main_slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--main-color);
  }
  section.main_visual .main_slider [class*=swiper-button-] {
    width: 56px;
    height: 56px;
    background-color: rgba(0, 64, 152, 0.9);
    border-radius: 100%;
    top: calc(50% - 15px);
    opacity: 1;
  }
  section.main_visual .main_slider [class*=swiper-button-]:after {
    content: "";
    margin-left: 3px;
    width: 14px;
    height: 25px;
    display: inline-block;
    background: url(../images/union/icon_line_arrow.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
  }
  section.main_visual .main_slider .swiper-button-prev {
    right: auto;
    left: max(20px, 50% - 700px);
    transform: scaleX(-1);
  }
  section.main_visual .main_slider .swiper-button-next {
    right: max(20px, 50% - 700px);
    left: auto;
  }
  /*=================================================================*/
  /*	鹿児島県信用保証協会とは */
  /*=================================================================*/
  section.about .introduce {
    background: var(--bg-color01);
  }
  section.about .introduce .inner {
    margin: 0 auto;
    padding: 60px 40px;
    max-width: 1280px;
    box-sizing: border-box;
  }
  section.about .introduce .inner .message {
    margin: 0 auto;
    padding: 40px;
    border: 2px solid #ABCAE3;
    border-radius: 20px;
    background: #fff;
    width: calc(100% - 230px);
    max-width: 930px;
    box-sizing: border-box;
    position: relative;
  }
  section.about .introduce .inner .message p {
    font-size: 1.8rem;
    line-height: 1.6;
  }
  section.about .introduce .inner .message:before {
    content: url(../images/top/illust_person_about.svg);
    position: absolute;
    left: -115px;
    bottom: -45px;
  }
  section.about .menu_guide {
    background: linear-gradient(to bottom, #E2F4FF 0%, #E2F4FF 30%, #ffffff 30%, #ffffff 100%);
    position: relative;
    z-index: 0;
  }
  section.about .menu_guide:after {
    content: "";
    position: absolute;
    top: calc(30% - 1px);
    left: 0;
    width: 100%;
    aspect-ratio: 1440/81;
    background: url("../images/top/bg_curve_lightblue.svg") no-repeat center top;
    background-size: 100% auto;
    z-index: -1;
  }
  section.about .menu_guide > ul {
    margin: 0 auto;
    padding: 20px 40px 80px;
    max-width: 1080px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
  }
  section.about .menu_guide > ul > li.btn_guide a {
    display: inline-block;
  }
  section.about .menu_guide > ul > li.btn_guide a:hover {
    transform: translateY(-14px);
    opacity: 1;
  }
  section.about .menu_guide > ul > li.btn_guide a dl {
    width: 320px;
    aspect-ratio: 32/33;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #CBF2B6;
    background: linear-gradient(-10deg, #C1EBAC 0%, #C1EBAC 54%, #CBF2B6 54%, #CBF2B6 100%);
    border-radius: 20px;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.1));
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd {
    padding: 22px 22px 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    position: relative;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd:before {
    content: "";
    display: inline-block;
    width: 39px;
    height: 26px;
    background-color: var(--sub-color04);
    -webkit-mask: url(../images/top/icon_rounded_triangle.svg) no-repeat center/contain;
    mask: url(../images/top/icon_rounded_triangle.svg) no-repeat center/contain;
    position: absolute;
    bottom: calc(100% - 14px);
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd > p {
    font-size: 2.4rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd > p .sub {
    color: var(--sub-color04);
    font-family: Rubik;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd .illust {
    margin-bottom: 26px;
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    background: #fff;
    position: relative;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd .illust img {
    position: absolute;
    bottom: -12px;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dt {
    padding: 16px;
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    background: var(--sub-color04);
    border-radius: 0 0 20px 20px;
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl {
    background: linear-gradient(-10deg, #C1EBAC 0%, #C1EBAC 54%, #CBF2B6 54%, #CBF2B6 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dd:before {
    background-color: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dd > p .sub {
    color: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dt {
    background: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl {
    background: linear-gradient(-10deg, #8DC8FF 0%, #8DC8FF 54%, #9CCFFF 54%, #9CCFFF 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dd:before {
    background-color: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dd > p .sub {
    color: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dt {
    background: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl {
    background: linear-gradient(-10deg, #FFA8AF 0%, #FFA8AF 54%, #FFB3B9 54%, #FFB3B9 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dd:before {
    background-color: var(--sub-color06);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dd > p .sub {
    color: var(--sub-color06);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dt {
    font-size: 2rem;
    background: var(--sub-color06);
  }
  /*=================================================================*/
  /*	お知らせ */
  /*=================================================================*/
  section.news {
    background: #F5F5F5;
  }
  section.news .inner {
    margin: 0 auto;
    padding: 60px 40px;
    max-width: 1280px;
    box-sizing: border-box;
  }
  section.news .inner .title_tab {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  section.news .inner .title_tab h2 {
    margin-bottom: 0;
  }
  section.news .inner .title_tab ul.post_category {
    display: flex;
    gap: 20px;
  }
  section.news .inner .title_tab ul.post_category > li a {
    color: #fff;
    padding: 10px 20px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    min-width: 200px;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-sizing: border-box;
  }
  section.news .inner .title_tab ul.post_category > li a.notice {
    background: var(--news-cat01);
  }
  section.news .inner .title_tab ul.post_category > li a.event {
    background: var(--news-cat02);
  }
  section.news .inner .title_tab ul.post_category > li a.system {
    background: var(--news-cat03);
  }
  section.news .inner .title_tab ul.post_category > li a.recruit-information {
    background: var(--news-cat04);
  }
  section.news .inner .title_tab ul.post_category > li a.auction {
    background: var(--news-cat05);
  }
  section.news .inner .title_tab ul.post_category > li a.important {
    background: var(--news-cat06);
  }
  section.news .inner .post_box {
    padding: 26px 50px 40px;
    background: #fff;
    max-width: 1200px;
    box-sizing: border-box;
  }
  section.news .inner .post_box ul.post_list > li {
    padding: 15px 8px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    align-items: baseline;
  }
  section.news .inner .post_box ul.post_list > li .date {
    margin-right: 30px;
    color: #666;
    font-size: 1.6rem;
    min-width: 6em;
  }
  section.news .inner .post_box ul.post_list > li .category {
    margin-right: 30px;
    padding: 5px 16px;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    border-radius: 5px;
    background: var(--main-color);
    box-sizing: border-box;
  }
  section.news .inner .post_box ul.post_list > li .category.notice {
    background: var(--news-cat01);
  }
  section.news .inner .post_box ul.post_list > li .category.event {
    background: var(--news-cat02);
    font-size: 1.2rem;
  }
  section.news .inner .post_box ul.post_list > li .category.system {
    background: var(--news-cat03);
  }
  section.news .inner .post_box ul.post_list > li .category.recruit-information {
    background: var(--news-cat04);
  }
  section.news .inner .post_box ul.post_list > li .category.auction {
    background: var(--news-cat05);
  }
  section.news .inner .post_box ul.post_list > li .category.important {
    background: var(--news-cat06);
  }
  section.news .inner .post_box ul.post_list > li > a.title {
    color: #333;
    font-size: 1.6rem;
    text-decoration: none;
  }
  section.news .inner .post_box ul.post_list > li > a.title:hover {
    color: var(--main-color);
  }
  section.news .inner .post_box .no_post {
    padding: 40px;
    text-align: center;
  }
  section.news .inner .post_box .no_post p {
    color: #999;
    font-size: 1.8rem;
    line-height: 1.4;
  }
  section.news .inner .btn_box {
    margin: 50px auto 0;
    width: fit-content;
  }
  /*=================================================================*/
  /*	サービスメニュー */
  /*=================================================================*/
  section.service {
    padding: 60px 40px 10px;
    background: url(../images/top/bg_curve_lightorange.svg) center bottom -1px/100% auto no-repeat;
  }
  section.service ul.menu {
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  section.service ul.menu > li > a {
    padding: 31px 60px 31px 138px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 490px;
    background: var(--main-color);
    border: 4px solid #fff;
    border-radius: 16px;
    box-sizing: border-box;
    position: relative;
  }
  section.service ul.menu > li > a.warranty_search {
    background: url(../images/top/illust_warranty_search.png) left 20px center/auto 100px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.pamphlet {
    background: url(../images/top/illust_pamphlet.png) left 20px center/auto 100px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.ganbaru {
    background: url(../images/top/illust_ganbaru.png) left 20px top calc(50% - 2.5px)/auto 105px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.management_report {
    background: url(../images/top/illust_management_report.png) left 20px center/auto 100px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a:before {
    content: url(../images/union/icon_circle_arrow.svg);
    margin: auto;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    transition: 0.3s;
  }
  section.service ul.menu > li > a:hover {
    opacity: 1;
    background-color: #1153b1;
    background-position: left 20px 15px center;
  }
  section.service ul.menu > li > a:hover:before {
    right: 10px;
    transition: 0.3s;
  }
  section.service ul.menu > li > a p {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
  }
  section.service ul.menu > li > a p span {
    font-size: 1.8rem;
    font-weight: 500;
  }
  /*=================================================================*/
  /*	各種シミュレーション */
  /*=================================================================*/
  section.simulation {
    background: var(--bg-color02);
  }
  section.simulation .inner {
    margin: 0 auto;
    padding: 50px 40px 80px;
    max-width: 1280px;
    box-sizing: border-box;
  }
  section.simulation .inner .enter {
    margin: -50px 0;
    padding: 50px 0;
    display: flex;
    justify-content: center;
    gap: 158px;
    background: url(../images/top/illust_simulation.svg) center center/146px auto no-repeat;
  }
  section.simulation .inner .enter li > a {
    padding: 30px 70px 30px 110px;
    color: var(--sub-color06);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    width: fit-content;
    display: block;
    border: 4px solid #F96A76;
    background: #fff;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  section.simulation .inner .enter li > a:after {
    content: "";
    width: 49px;
    height: 49px;
    background-color: #F96A76;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    position: absolute;
    right: -4px;
    bottom: -4px;
  }
  section.simulation .inner .enter li > a span {
    font-size: 2.4rem;
  }
  section.simulation .inner .enter li > a.guarantee_simu {
    color: var(--sub-color06);
    border-color: var(--sub-color08);
    background: url(../images/union/icon_money.svg) left 26px center/55px auto no-repeat #fff;
  }
  section.simulation .inner .enter li > a.guarantee_simu:after {
    background-color: var(--sub-color08);
  }
  section.simulation .inner .enter li > a.guarantee_simu:hover {
    background-color: #ffdcdd;
    background-position: left 26px top calc(50% - 6px);
  }
  section.simulation .inner .enter li > a.repayment_simu {
    color: var(--main-color);
    border-color: var(--sub-color02);
    background: url(../images/union/icon_schedule.svg) left 26px center/55px auto no-repeat #fff;
  }
  section.simulation .inner .enter li > a.repayment_simu:after {
    background-color: var(--sub-color02);
  }
  section.simulation .inner .enter li > a.repayment_simu:hover {
    background-color: #e0edff;
    background-position: left 26px top calc(50% - 6px);
  }
  /*=================================================================*/
  /*	外部リンク */
  /*=================================================================*/
  section.outer_link {
    background: #FFF9F0;
  }
  section.outer_link .inner {
    margin: 0 auto;
    padding: 60px 40px 100px;
    max-width: 1280px;
    box-sizing: border-box;
  }
  section.outer_link .inner ul.link {
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  section.outer_link .inner ul.link > a {
    padding: 10px 20px;
    color: var(--main-color);
    font-size: 1.6rem;
    line-height: 1.2;
    text-align: center;
    width: 370px;
    width: calc((100% - 40px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sub-color01);
    background: url(../images/union/icon_outer_link.svg) right 10px bottom 10px/18px auto no-repeat #fff;
    border-radius: 5px;
    box-sizing: border-box;
  }
  section.outer_link .inner ul.link > a span.sub {
    font-size: 1.2rem;
  }
  section.outer_link .inner ul.link > a:hover {
    background-color: #e4eff9;
  }
  /*<end>============================================================*/
}
/*******************************************************************/
/* SP */
/*******************************************************************/
@media screen and (max-width:768px) {
  /*<start>==========================================================*/
  /*=================================================================*/
  /*	共通スタイル */
  /*=================================================================*/
  h2 {
    margin-bottom: 1.2em;
    color: var(--sub-color03);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  h2 span.sub {
    padding-left: 14px;
    color: #999999;
    font-family: Rubik;
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
  }
  h2 span.sub:before {
    content: "";
    width: 1px;
    height: 2.8rem;
    display: block;
    background: #333;
    position: absolute;
    left: 0;
  }
  /*=================================================================*/
  /*	メインビジュアル */
  /*=================================================================*/
  section.main_visual {
    padding: 20px 14px 32px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  section.main_visual .main_slider {
    width: 100%;
  }
  section.main_visual .main_slider .swiper-wrapper > a:active {
    opacity: 0.8;
  }
  section.main_visual .main_slider .swiper-pagination {
    line-height: 0;
    bottom: 12px;
  }
  section.main_visual .main_slider .swiper-pagination .swiper-pagination-bullet {
    margin: 0 6px;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: #D7D7D7;
    opacity: 1;
    border-radius: 100%;
  }
  section.main_visual .main_slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--main-color);
  }
  section.main_visual .main_slider [class*=swiper-button-] {
    width: 36px;
    height: 36px;
    background-color: rgba(0, 64, 152, 0.9);
    border-radius: 100%;
    top: calc(50% - 10px);
    opacity: 1;
  }
  section.main_visual .main_slider [class*=swiper-button-]:after {
    content: "";
    margin-left: 2px;
    width: 10px;
    height: 18px;
    display: inline-block;
    background: url(../images/union/icon_line_arrow.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
  }
  section.main_visual .main_slider .swiper-button-prev {
    right: auto;
    left: 6px;
    transform: scaleX(-1);
  }
  section.main_visual .main_slider .swiper-button-next {
    right: 6px;
    left: auto;
  }
  /*=================================================================*/
  /*	鹿児島県信用保証協会とは */
  /*=================================================================*/
  section.about .introduce {
    background: var(--bg-color01);
  }
  section.about .introduce .inner {
    margin: 0 auto;
    padding: 25px 4% 100px;
    box-sizing: border-box;
  }
  section.about .introduce .inner .message {
    margin: 0 auto;
    padding: 30px;
    border: 2px solid #ABCAE3;
    border-radius: 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  section.about .introduce .inner .message p {
    line-height: 1.6;
  }
  section.about .introduce .inner .message:before {
    content: "";
    width: 120px;
    height: 120px;
    display: block;
    background-image: url("../images/top/illust_person_about.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 10px;
    top: calc(100% - 24px);
  }
  section.about .menu_guide {
    background: linear-gradient(to bottom, #E2F4FF 0%, #E2F4FF 30%, #ffffff 30%, #ffffff 100%);
    position: relative;
    z-index: 0;
  }
  section.about .menu_guide:after {
    content: "";
    position: absolute;
    top: calc(30% - 1px);
    left: 0;
    width: 100%;
    aspect-ratio: 1440/81;
    background: url("../images/top/bg_curve_lightblue.svg") no-repeat center top;
    background-size: 100% auto;
    z-index: -1;
  }
  section.about .menu_guide > ul {
    margin: 0 auto;
    padding: 30px 4%;
    box-sizing: border-box;
    display: flex;
    max-width: 680px;
    flex-wrap: wrap;
    gap: 30px 20px;
  }
  section.about .menu_guide > ul > li.btn_guide {
    width: calc((100% - 20px) / 2);
  }
  section.about .menu_guide > ul > li.btn_guide a {
    display: block;
    width: 100%;
    height: 100%;
  }
  section.about .menu_guide > ul > li.btn_guide a:active {
    transform: translateY(-14px);
    opacity: 1;
  }
  section.about .menu_guide > ul > li.btn_guide a dl {
    width: 100%;
    /* aspect-ratio: 1 / 1; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #CBF2B6;
    background: linear-gradient(-10deg, #C1EBAC 0%, #C1EBAC 50%, #CBF2B6 50%, #CBF2B6 100%);
    border-radius: 20px;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.1));
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd {
    padding: 18px 10px 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    gap: 6%;
    flex: 1;
    position: relative;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd:before {
    content: "";
    display: inline-block;
    width: 39px;
    height: 26px;
    background-color: var(--sub-color04);
    -webkit-mask: url(../images/top/icon_rounded_triangle.svg) no-repeat center/contain;
    mask: url(../images/top/icon_rounded_triangle.svg) no-repeat center/contain;
    position: absolute;
    bottom: calc(100% - 14px);
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd > p {
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd > p .sub {
    color: var(--sub-color04);
    font-family: Rubik;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd .illust {
    margin: 10px 0 10px;
    width: 38%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    background: #fff;
    position: relative;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dd .illust img {
    position: absolute;
    width: 90%;
    bottom: -6px;
  }
  section.about .menu_guide > ul > li.btn_guide a dl dt {
    padding: 14px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--sub-color04);
    border-radius: 0 0 20px 20px;
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl {
    background: linear-gradient(-10deg, #C1EBAC 0%, #C1EBAC 50%, #CBF2B6 50%, #CBF2B6 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dd:before {
    background-color: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dd > p .sub {
    color: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.beginner a dl dt {
    background: var(--sub-color04);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl {
    background: linear-gradient(-10deg, #8DC8FF 0%, #8DC8FF 50%, #9CCFFF 50%, #9CCFFF 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dd:before {
    background-color: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dd > p .sub {
    color: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.founding a dl dt {
    background: var(--main-color);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl {
    background: linear-gradient(-10deg, #FFA8AF 0%, #FFA8AF 50%, #FFB3B9 50%, #FFB3B9 100%);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dd:before {
    background-color: var(--sub-color06);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dd > p .sub {
    color: var(--sub-color06);
  }
  section.about .menu_guide > ul > li.btn_guide.customer a dl dt {
    font-size: 1.8rem;
    background: var(--sub-color06);
  }
}
@media screen and (max-width:768px) and (max-width: 500px) {
  section.about .menu_guide > ul {
    max-width: 360px;
    align-items: center;
    flex-direction: column;
    gap: 30px;
  }
  section.about .menu_guide > ul > li.btn_guide {
    width: 100%;
  }
}
@media screen and (max-width:768px) {
  /*=================================================================*/
  /*	お知らせ */
  /*=================================================================*/
  section.news {
    background: #F5F5F5;
  }
  section.news .inner {
    margin: 0 auto;
    padding: 30px 4%;
    box-sizing: border-box;
  }
  section.news .inner .title_tab {
    margin-bottom: 20px;
  }
  section.news .inner .title_tab h2 {
    margin-bottom: 15px;
  }
  section.news .inner .title_tab ul.post_category {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  section.news .inner .title_tab ul.post_category > li {
    width: 32%;
  }
  section.news .inner .title_tab ul.post_category > li a {
    font-size: 1.2rem;
    text-decoration: none;
    display: block;
    text-align: center;
    color: #FFF;
    border-radius: 4px;
    padding: 4px 0;
  }
  section.news .inner .title_tab ul.post_category > li a.notice {
    background: var(--news-cat01);
  }
  section.news .inner .title_tab ul.post_category > li a.event {
    background: var(--news-cat02);
  }
  section.news .inner .title_tab ul.post_category > li a.system {
    background: var(--news-cat03);
  }
  section.news .inner .title_tab ul.post_category > li a.recruit-information {
    background: var(--news-cat04);
  }
  section.news .inner .title_tab ul.post_category > li a.auction {
    background: var(--news-cat05);
  }
  section.news .inner .title_tab ul.post_category > li a.important {
    background: var(--news-cat06);
  }
  section.news .inner .post_box {
    padding: 20px 4% 10px;
    background: #fff;
    box-sizing: border-box;
  }
  section.news .inner .post_box ul.post_list > li {
    padding: 0 0 10px;
    border-bottom: 1px solid #E5E5E5;
    align-items: baseline;
    position: relative;
    margin: 0 0 10px;
  }
  section.news .inner .post_box ul.post_list > li .date {
    margin-right: 12px;
    color: #666;
    font-size: 1.6rem;
    min-width: 6em;
  }
  section.news .inner .post_box ul.post_list > li .category {
    padding: 5px;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4;
    display: inline-block;
    text-align: center;
    justify-content: center;
    min-width: 114px;
    border-radius: 5px;
    background: var(--main-color);
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
  }
  section.news .inner .post_box ul.post_list > li .category.notice {
    background: var(--news-cat01);
  }
  section.news .inner .post_box ul.post_list > li .category.event {
    background: var(--news-cat02);
    font-size: 1.2rem;
  }
  section.news .inner .post_box ul.post_list > li .category.system {
    background: var(--news-cat03);
  }
  section.news .inner .post_box ul.post_list > li .category.recruit-information {
    background: var(--news-cat04);
  }
  section.news .inner .post_box ul.post_list > li .category.auction {
    background: var(--news-cat05);
  }
  section.news .inner .post_box ul.post_list > li .category.important {
    background: var(--news-cat06);
  }
  section.news .inner .post_box ul.post_list > li > a.title {
    color: #333;
    text-decoration: none;
    display: block;
    margin: 10px 0 0;
  }
  section.news .inner .post_box ul.post_list > li > a.title:hover {
    color: var(--main-color);
  }
  section.news .inner .post_box .no_post {
    padding: 40px;
    text-align: center;
  }
  section.news .inner .post_box .no_post p {
    color: #999;
    font-size: 1.8rem;
    line-height: 1.4;
  }
  section.news .inner .btn_box {
    margin: 30px auto 0;
    width: fit-content;
  }
  /*=================================================================*/
  /*	サービスメニュー */
  /*=================================================================*/
  section.service {
    padding: 30px 4% 10px;
    background: url(../images/top/bg_curve_lightorange.svg) center bottom -1px/100% auto no-repeat;
  }
  section.service ul.menu {
    margin: 0 auto;
  }
  section.service ul.menu > li {
    margin: 0 0 10px;
  }
  section.service ul.menu > li > a {
    padding: 20px 42px 20px 62px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--main-color);
    border: 2px solid #fff;
    border-radius: 12px;
    box-sizing: border-box;
    position: relative;
  }
  section.service ul.menu > li > a.warranty_search {
    background: url(../images/top/illust_warranty_search.png) left 10px center/auto 42px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.pamphlet {
    background: url(../images/top/illust_pamphlet.png) left 10px center/auto 42px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.ganbaru {
    background: url(../images/top/illust_ganbaru.png) left 10px top calc(50% - 2.5px)/auto 42px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a.management_report {
    background: url(../images/top/illust_management_report.png) left 10px center/auto 42px no-repeat, var(--main-color);
  }
  section.service ul.menu > li > a:before {
    content: url(../images/union/icon_circle_arrow.svg);
    margin: auto;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    transition: 0.3s;
  }
  section.service ul.menu > li > a:hover {
    opacity: 1;
    background-color: #1153b1;
    background-position: left 20px 15px center;
  }
  section.service ul.menu > li > a:hover:before {
    right: 10px;
    transition: 0.3s;
  }
  section.service ul.menu > li > a p {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }
  section.service ul.menu > li > a p span {
    font-size: 1.8rem;
    font-weight: 500;
  }
  /*=================================================================*/
  /*	各種シミュレーション */
  /*=================================================================*/
  section.simulation {
    background: var(--bg-color02);
  }
  section.simulation .inner {
    margin: 0 auto;
    padding: 30px 6% 60px;
  }
  section.simulation .inner .enter {
    margin: -22px 0;
    padding: 114px 0 0;
    background: url(../images/top/illust_simulation.svg) center top/88px auto no-repeat;
  }
  section.simulation .inner .enter li {
    margin: 0 0 15px;
  }
  section.simulation .inner .enter li > a {
    padding: 20px 70px 20px 68px;
    color: var(--sub-color06);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    width: 100%;
    display: block;
    border: 3px solid #F96A76;
    background: #fff;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  section.simulation .inner .enter li > a:after {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #F96A76;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    position: absolute;
    right: -4px;
    bottom: -4px;
  }
  section.simulation .inner .enter li > a span {
    font-size: 2.2rem;
  }
  section.simulation .inner .enter li > a.guarantee_simu {
    color: var(--sub-color06);
    border-color: var(--sub-color08);
    background: url(../images/union/icon_money.svg) left 17px center/40px auto no-repeat #fff;
  }
  section.simulation .inner .enter li > a.guarantee_simu:after {
    background-color: var(--sub-color08);
  }
  section.simulation .inner .enter li > a.guarantee_simu:hover {
    background-color: #ffdcdd;
    background-position: left 26px top calc(50% - 6px);
  }
  section.simulation .inner .enter li > a.repayment_simu {
    color: var(--main-color);
    border-color: var(--sub-color02);
    background: url(../images/union/icon_schedule.svg) left 18px center/40px auto no-repeat #fff;
  }
  section.simulation .inner .enter li > a.repayment_simu:after {
    background-color: var(--sub-color02);
  }
  section.simulation .inner .enter li > a.repayment_simu:hover {
    background-color: #e0edff;
    background-position: left 26px top calc(50% - 6px);
  }
  /*=================================================================*/
  /*	外部リンク */
  /*=================================================================*/
  section.outer_link {
    background: #FFF9F0;
  }
  section.outer_link .inner {
    margin: 0 auto;
    padding: 40px 4% 30px;
    box-sizing: border-box;
  }
  section.outer_link .inner ul.link > a {
    padding: 10px 20px;
    color: var(--main-color);
    font-size: 1.6rem;
    line-height: 1.2;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--sub-color01);
    background: url(../images/union/icon_outer_link.svg) right 10px bottom 10px/18px auto no-repeat #fff;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0 0 10px;
  }
  section.outer_link .inner ul.link > a span.sub {
    font-size: 1.2rem;
  }
  section.outer_link .inner ul.link > a:hover {
    background-color: #e4eff9;
  }
  /*=================================================================*/
  /*	狭い幅用調整スタイル */
  /*=================================================================*/
  /*<end>============================================================*/
}/*# sourceMappingURL=top.css.map */