@charset "utf-8";

/*-----------------------
    page_contents.css
------------------------*/

/*----- works -----*/

/* intro */

.work_intro {
    padding: 70px 0 30px;
}
.work_intro .title > div {
    display: flex;
    justify-content: center;
}
.work_intro .title .ttl {
    font-size: 35px;
    font-weight: 900;
    line-height: 1.75;
}
.work_intro .pm {
    margin: 40px 0 90px;
}

.point_ul {
    display: flex;
    justify-content: center;
    gap: 0 16px;
}
.point_frex{
  display: block;
}

.point_ul .li {
    width: 360px;
    padding: 20px 0;
    text-align: center;
}
.point_frex .li {
    width: auto;
    padding: 20px 0;
    text-align: center;
}
.point_ul .li .ttl {
    position: relative;
    display: inline-block;
    margin: 10px 0 15px;
    font-size: 45px;
}
.point_ul .li .ttl::after {
    position: absolute;
    z-index: -1;
    bottom: -5px;
    left: -5%;
    content: "";
    display: block;
    width: 110%;
    height: 15px;
    background: #e5eff6;
}
.point_ul .li .text {
    font-size: 17px;
}

.work_nav {
    padding: 90px 0 0;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .work_intro {
        padding: 6vw 0 3vw;
    }
    .work_intro .title .ttl {
        font-size: 3vw;
    }
    .work_intro .pm {
        margin: 3.5vw 0 7.5vw;
    }

    .point_ul {
        gap: 0 1.5vw;
    }
    .point_ul .li {
        width: auto;
        padding: 1.6vw 0;
    }
    .point_ul .li .ttl {
        margin: 1vw 0 1.4vw;
        font-size: 3.6vw;
    }
    .point_ul .li .ttl::after {
        bottom: -.5vw;
        height: 1.5vw;
    }
    .point_ul .li .text {
        font-size: 1.6vw;
    }

    .work_nav {
        padding: 7.5vw 0 0;
    }
    
}
@media screen and (max-width: 767px){
    
    .work_intro {
        padding: 50px 0 10px;
    }
    .work_intro .title > div {
        display: inline;
    }
    .work_intro .title .ttl {
        display: inline;
        font-size: min(7vw,27px);
        line-height: 1.5;
    }
    .work_intro .pm {
        margin: 20px 0 60px;
    }

    .point_ul {
        display: block;
    }
    .point_ul .li {
        width: min(600px,100%);/*360*/
        margin-bottom: 15px;
        padding: 10px 0;
    }
    .point_ul .li .ttl {
        margin: 10px 0 15px;
        font-size: min(7vw,30px);
    }
    .point_ul .li .text {
        font-size: min(4vw,16px);
    }

    .work_nav {
        padding: 50px 0 0;
    }
    
}

/* main */

.work_svc {
    padding: 90px 0 1px;
}
.works_pics {
    margin-bottom: 120px;
}
.works_pics .pic {
    margin: 0 5px;
}

.work_svc .frame {
    margin-bottom: 70px;
    display: flex;
    justify-content: space-between;
}
.work_svc .work_sheets .flow_box .b{
  text-align: left;
  font-size: 30px;
}
.work_svc .work_sheets .flow_box .conts .title {
    margin-bottom: auto;
}
.work_svc .frame .conts {
    width: 52%;
}
.work_svc .frame .conts .ttl {
    margin-bottom: 30px;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.5;
}
.work_svc .frame .pic {
    width: 45%;
}
.work_svc .frame .pic img {
    aspect-ratio: 27/20;
}

.work_boxes {
    margin-bottom: 70px;
    padding: 0 40px 30px;
    background: #e5eff6;
}
.work_boxes .ttl {
    position: relative;
    top: -30px;
    width: 52%;
    margin: 0 auto;
    padding: 12px 0;
    background: var(--blue);
    color: var(--white);
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}
.work_boxes .ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 10px;
}
.work_boxes .ul .li {
    width: calc(50% - 5px);
    padding: 20px 20px 20px 80px;
    background: url("/system_panel/uploads/images/icon_check.png") no-repeat var(--white);
    background-position: center left 40px;
    background-size: 23px auto;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.work_sheets {
    margin-bottom: 90px;
}
.work_sheets .ttl {
    margin-bottom: 40px;
    color: var(--blue);
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}
.work_sheets .ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px 48px;
}

.work_sheets .ul .li {
    width: calc(50% - 24px);
    display: flex;
    justify-content: space-between;
}
.work_sheets .ul .li .pic {
    width: 45.2%;
}
.work_sheets .ul .li .pic img {
    aspect-ratio: 13/10;
}
.work_sheets .ul .li .sheet {
    width: 52%;
}
.work_sheets .ul .li .p {
    padding: 13px;
    border-bottom: 1px solid var(--text);
    line-height: 1.5;
}
.work_sheets .ul .li .p:first-child {
    border-top: 1px solid var(--text);
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .work_svc {
        padding: 7.5vw 0 1px;
    }
    .works_pics {
        margin-bottom: 8vw;
    }
    .works_pics .pic {
        margin: 0 .5vw;
    }

    .work_svc .frame {
        margin-bottom: 6vw;
    }
    .work_svc .frame .conts .ttl {
        margin-bottom: 2.5vw;
        font-size: 3vw;
    }
    
    .work_boxes {
        margin-bottom: 6vw;
        padding: 0 3vw 2.5vw;
    }
    .work_boxes .ttl {
        top: -2.5vw;
        width: 52%;
        padding: 1vw 0;
        font-size: 2.7vw;
    }
    .work_boxes .ul {
        gap: 1vw 1vw;
    }
    .work_boxes .ul .li {
        width: calc(50% - .5vw);
        padding: 1.5vw 1.5vw 1.5vw 6vw;
        background-position: center left 3vw;
        background-size: 2vw auto;
        font-size: 1.6vw;
    }

    .work_sheets {
        margin-bottom: 7.5vw;
    }
    .work_sheets .ttl {
        margin-bottom: 3.5vw;
        font-size: 2.7vw;
    }
    .work_sheets .ul {
        gap: 4vw 3.6vw;
    }
    .work_sheets .ul .li {
        width: calc(50% - 1.8vw);
    }
    .work_sheets .ul .li .pic {
        width: 45.2%;
    }
    .work_sheets .ul .li .sheet {
        width: 52%;
    }
    .work_sheets .ul .li .p {
        padding: .75vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .work_svc {
        padding: 50px 0 1px;
    }
    .works_pics {
        margin-bottom: 50px;
    }

    .work_svc .frame {
        margin-bottom: 60px;
        display: block;
    }
    .work_svc .frame .conts {
        width: 100%;
    }
    .work_svc .frame .conts .ttl {
        margin-bottom: 15px;
        font-size: min(6vw,24px);
    }
    .work_svc .frame .pic {
        margin: 30px auto 0;
        width: min(400px,100%);
    }
    
    .work_boxes {
        margin-bottom: 40px;
        padding: 0 4vw 10px;
    }
    .work_boxes .ttl {
        top: -20px;
        width: 100%;
        padding: 10px 0;
        font-size: min(6vw,24px);
    }
    .work_boxes .ul {
        display: block;
    }
    .work_boxes .ul .li {
        width: 100%;
        margin: 10px 0;
        padding: 10px 10px 10px 35px;
        background-position: top 15px left 10px;
        background-size: 18px auto;
        font-size: 16px;
    }

    .work_sheets {
        margin-bottom: 40px;
    }
    .work_sheets .ttl {
        margin-bottom: 20px;
        font-size: min(6vw,24px);
    }
    .work_sheets .ul {
        display: block;
    }
    .work_sheets .ul .li {
        width: 100%;
        display: block;
    }
    .work_sheets .ul .li .pic {
        width: 260px;
        margin: 0 auto;
    }
    .work_sheets .ul .li .sheet {
        margin: 20px auto 30px;
        width: min(400px,100%);
    }
    .work_sheets .ul .li .p {
        padding: 10px;
    }    
    
}

/*----- flow -----*/

/* flow */

.flow {
    padding: 90px 0 30px;
}
.flow_list {
    background: #e5eff6;
    display: flex;
    justify-content: space-between;
    gap: 0 24px;
    margin-bottom: 60px;
    padding: 25px 35px;
}
.flow_list .box {
    width: calc(33.3333% - 16px);
    padding: 20px 0;
    background: var(--white);
    font-size: 22px;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}
.flow_list .box.fadein.up_1 {
    transition: all 2s;
}
.flow_list .box.fadein.up_2 {
    transition: all 3s;
}
.flow_list .box.fadein.up_3 {
    transition: all 4s;
}

.flow_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}
.flow_box .pic {
    width: 28.3333%;
}
.flow_box .pic img {
    aspect-ratio: 34/25;
}
.flow_box .conts {
    order: 2;
    width: 66.6666%;
}
.flow_box .conts .title {
    display: flex;
    margin-bottom: 20px;
}
.flow_box .conts .title .num {
    width: 60px;
    color: var(--blue);
    line-height: 1.2;
    font-size: 44px;
    transform: scaleX(1.25);
}
.flow_box .conts .title .ttl {
    width: calc(100% - 60px);
    line-height: 1.5;
    font-size: 35px;
}
.flow_btns {
    display: flex;
    align-items: center;
    gap: 0 25px;
    margin-top: 20px;
}
.flow_btns .m_box {
    width: 260px;
}
.flow_btns .call a {
    display: block;
    padding: 10px 0;
    text-align: center;
}
.flow_btns .call a img {
    width: 204px;
}
.flow_btns .mail {
    width: 260px;
    margin-top: 2px;
}
.flow_btns .mail a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background: #155d81;
    color: var(--white);
}
.flow_btns .mail a .icon {
    width: 22px;
    margin-right: 10px;
}
.flow_btns .mail a:hover {
    background: #458db1;
}

/* faq */

.faq {
    padding: 100px 0;
}
.faq_box {
    margin-bottom: 20px;
    padding-bottom: 1px;
    background: #e5eff6;
}
.faq_box .question {
    position: relative;
    display: flex;
    padding: 15px 50px 15px 25px;
    cursor: pointer;
}
.faq_box .question .q {
    width: 80px;
    color: var(--blue);
    font-size: 50px;
    font-weight: 900;
    text-align: center;
}
.faq_box .question .text {
    width: calc(100% - 80px);
    margin-top: 7px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.5;
    transition: .5s;
}
.faq_box .question:hover .text {
    color: var(--text_hover);
}
.faq_box .question::after {
    position: absolute;
    content: "+";
    top: 20px;
    right: 25px;
    font-size: 35px;
}
.faq_box .question.open::after {
    content: "－";
}
.faq_box .answer {
    display: none;
    width: calc(100% - 50px);
    margin: 0 auto 25px;
    padding: 20px 40px;
    background: var(--white);
}
.faq_box .answer p {
    display: inline;
    font-size: 17px;
    line-height: 2;
}
.faq_box .answer p.link a {
    color: #cf0000;
    text-decoration: underline;
}

/* for CMS */
body:has(#wrapper) .faq_box .answer {
    display: block;
}

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

    /* flow */

    .flow {
        padding: 7.5vw 0 0;
    }
    .flow_list {
        gap: 0 2.4vw;
        margin-bottom: 5vw;
        padding: 2vw 3vw;
    }
    .flow_list .box {
        width: calc(33.3333% - 1.6vw);
        padding: 2vw 0;
        font-size: 2vw;
    }

    .flow_box {
        margin-bottom: 2vw;
    }
    .flow_box .conts .title {
        margin-bottom: 1vw;
    }
    .flow_box .conts .title .num {
        width: 5vw;
        font-size: 3.5vw;
    }
    .flow_box .conts .title .ttl {
        width: calc(100% - 5vw);
        font-size: 3vw;
    }
    .flow_btns {
        gap: 0 2vw;
        margin-top: 1vw;
    }
    .flow_btns .m_box {
        width: 24vw;
    }
    .flow_btns .call a {
        padding: 1vw 0;
    }
    .flow_btns .call a img {
        width: 20vw;
    }
    .flow_btns .mail {
        width: 24vw;
        margin-top: .2vw;
    }
    .flow_btns .mail a {
        padding: 1.5vw 0;
        font-size: 1.5vw;
    }
    .flow_btns .mail a .icon {
        width: 2vw;
        margin-right: 1vw;
    }    
    
    /* faq */

    .faq {
        padding: 8vw 0;
    }
    .faq_box {
        margin-bottom: 2vw;
    }
    .faq_box .question {
        padding: 1.5vw 4vw 1.5vw 2vw;
    }
    .faq_box .question .q {
        width: 7vw;
        font-size: 4.5vw;
    }
    .faq_box .question .text {
        width: calc(100% - 7vw);
        margin-top: .7vw;
        font-size: 2.4vw;
    }
    .faq_box .question::after {
        top: 2vw;
        right: 2.5vw;
        font-size: 3vw;
    }
    .faq_box .answer {
        width: calc(100% - 4vw);
        margin: 0 auto 2vw;
        padding: 2vw 3vw;
    }
    .faq_box .answer p {
        font-size: 1.6vw;
    }
    
}
@media screen and (max-width: 767px){

    /* flow */

    .flow {
        padding: 50px 0 10px;
    }
    .flow_list {
        display: block;
        margin-bottom: 30px;
        padding: 10px 6vw;
    }
    .flow_list .box {
        width: 100%;
        margin: 15px 0;
        padding: 15px 0;
        font-size: 18px;
        line-height: 1.6
    }

    .flow_box {
        display: block;
        margin-bottom: 20px;
    }
    .flow_box .pic {
        width: min(400px,100%);
        margin: 25px auto 0;
    }
    .flow_box .conts {
        width: 100%;
    }
    .flow_box .conts .title {
        margin-bottom: 20px;
    }
    .flow_box .conts .title .num {
        width: 55px;
        font-size: 40px;
    }
    .flow_box .conts .title .ttl {
        width: calc(100% - 55px);
        margin-top: 7px;
        font-size: min(6.66vw,25px);
    }
    .flow_btns {
        display: block;
        margin-top: 20px;
    }
    .flow_btns .m_box {
        margin: 0 auto 15px;
    }
    .flow_btns .mail {
        margin: 0 auto;
    }
    
    /* faq */

    .faq {
        padding: 50px 0;
    }
    .faq_box .question {
        padding: 15px 35px 15px 10px;
    }
    .faq_box .question .q {
        width: 40px;
        font-size: 30px;
    }
    .faq_box .question .text {
        width: calc(100% - 40px);
        margin-top: 2px;
        font-size: 19px;
    }
    .faq_box .question::after {
        top: 18px;
        right: 10px;
        font-size: 25px;
    }
    .faq_box .answer {
        width: calc(100% - 8vw);
        margin: 0 auto 15px;
        padding: 15px 4vw;
    }
    .faq_box .answer p {
        font-size: 16px;
        line-height: 1.75;
    }
    
}

/*----- about -----*/

/* message */

.about_message {
    padding: 100px 0;
}
.about_message .title {
    display: flex;
    justify-content: center;
    margin: 60px 0 50px;
}
.about_message .title .ttl {
    font-size: 35px;
    line-height: 1.5;
}
.about_message .frame {
    display: flex;
    justify-content: space-between;
}
.about_message .frame .conts {
    width: 51.5%;
}
.about_message .frame .conts .name {
    margin-top: 20px;
    display: flex;
    align-items: flex-end;
}
.about_message .frame .conts .name .position {
    font-size: 18px;
    font-weight: 500;
}
.about_message .frame .conts .name .text {
    margin-left: 15px;
    font-size: 35px;
    font-weight: 700;
}
.about_message .frame .pics {
    position: relative;
    width: 44%;
}
.about_message .frame .pics .pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
}
.about_message .frame .pics .pic:nth-of-type(2) {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
}
.about_message .frame .pics .pic img {
    aspect-ratio: 310/417;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_message {
        padding: 7.5vw 0;
    }
    .about_message .title {
        margin: 5vw 0;
    }
    .about_message .title .ttl {
        font-size: 3vw
    }
    .about_message .frame .conts .name {
        margin-top: 2vw;
    }
    .about_message .frame .conts .name .position {
        font-size: 1.7vw;
    }
    .about_message .frame .conts .name .text {
        margin-left: 1.5vw;
        font-size: 3vw;
    }
    .about_message .frame .pics .pic {
        width: 28vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .about_message {
        padding: 50px 0;
    }
    .about_message .title {
        display: block;
        margin: 30px 0 20px;
    }
    .about_message .title .ttl {
        display: inline;
        font-size: min(6vw,24px);
    }
    .about_message .frame {
        display: block;
    }
    .about_message .frame .conts {
        width: 100%;
    }
    .about_message .frame .conts .name .position {
        font-size: min(3.5vw,16px);
    }
    .about_message .frame .conts .name .text {
        margin-left: 3vw;
        font-size: min(5.75vw,25px);
    }
    .about_message .frame .pics {
        width: min(400px,100%);
        margin: 40px auto 0;
    }
    .about_message .frame .pics .pic {
        position: relative;
        width: 66.66%;
    }
    .about_message .frame .pics .pic:nth-of-type(2) {
        float: right;
        margin: -50vw 0 50px;
    }
    
}

/* origin */

.about_origin {
    clear: both;
    padding: 70px 0;
    background: #2378d2;
    color: var(--white);
}
.about_origin .frame {
    display: flex;
    justify-content: space-between;
    padding: 45px 60px;
        background: #1c60a9;
}
.about_origin .frame .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    background: #e5eff6;
}
.about_origin .frame .logo img {
    width: 75%;
}
.about_origin .frame .conts {
    order: 2;
    width: 70.5%;
}

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

    .about_origin {
        padding: 6vw 0;
    }
    .about_origin .frame {
        padding: 4vw 5vw;
        align-items: center;
    }
    .about_origin .frame .logo {
        padding: 6vw 0;
    }    
    
}
@media screen and (max-width: 767px){

    .about_origin {
        padding: 50px 0;
    }
    .about_origin .frame {
        display: block;
        padding: 20px 5vw 30px;
    }
    .about_origin .frame .logo {
        margin: 25px auto 0;
        width: min(300px,87.5%);
        aspect-ratio: 1;
    }
    .about_origin .frame .conts {
        width: 100%;
    }    
    
}

/* corp */

.about_corp {
    padding: 140px 0;
}
.about_corp .m_box {
    width: 740px;
    margin-top: 15px;
    padding: 15px 45px;
    /*font-size: 19px;*/
      font-size: 27px;
    font-weight: 700;
}
  .m_box_wid {
    width: auto !important;
    font-size: 19px !important;
}
@media screen and (min-width: 768px) and (max-width: 1260px){
   
    .about_corp {
        padding: 10vw 0;
    }
    .about_corp .m_box {
        width: 60vw;
        margin-top: 1.5vw;
        padding: 1.4vw 4vw;
        font-size: 1.8vw;
    }

    
}
@media screen and (max-width: 767px){
    
    .about_corp {
        padding: 50px 0;
    }
    .about_corp .m_box {
        width: 100%;
        margin-top: 15px;
        padding: 12px 4vw;
        font-size: 18px;
        line-height: 1.5;
    }

}

/* mng */

.about_mng {
    padding: 60px 0 75px;
    /*background: var(--blue);*/
      background: #1c60a9;
    color: var(--white);
}
.about_mng .subttl {
    margin: 75px 0 30px;
    font-size: 35px;
    font-weight: 700;
}
.about_mng .subtti2 {
    margin-top: 40px;
    font-size: 35px;
    font-weight: 700;
    padding: 10px;
    background: #2378d2;
    text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_mng {
        padding: 6vw 0 7vw;
    }
    .about_mng .subttl {
        margin: 7vw 0 3vw;
        font-size: 3vw;
    }
    .about_mng .subtti2 {
        margin-top: 3vw;
        font-size: 3vw;
        padding: 1vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .about_mng {
        padding: 50px 0;
    }
    .about_mng .subttl {
        margin: 35px 0 20px;
        font-size: min(6vw,24px);
        line-height: 1.5;
    }
    .about_mng .subtti2 {
        margin-top: 20px;
        font-size: min(6vw,24px);
        padding: 10px 4vw;
        line-height: 1.5;
        text-align: left;
    }
    
}

/* guide */

.about_guide {
    padding: 120px 0 90px;
}
.about_guide .tab_list {
    display: flex;
    justify-content: center;
    gap: 0 30px;
    margin-bottom: 50px;
}
.about_guide .tab_list .m_box {
    width: 450px;
    padding: 30px 0 0;
    cursor: pointer;
    transition: .5s;
}
.about_guide .tab_list .m_box.is-active,
.about_guide .tab_list .m_box:hover {
    /*background: var(--blue);*/
  background: #1c60a9;
    color: var(--white);
}
.about_guide .tab_list .m_box .m_title {
    position: relative;
}
.about_guide .tab_list .m_box .m_title::after,
.about_guide .tab_list .m_box .m_title::before {
    position: absolute;
    display: block;
    content: "";
    top: 40%;
    left: 0;
    width: 30px;
    height: 1px;
    background: var(--text);
    transition: .5s;
}
.about_guide .tab_list .m_box .m_title::after {
    top: calc(40% - 3px);
    left: 20px;
    width: 10px;
    height: 1px;
    transform: rotate(30deg);
}
.about_guide .tab_list .m_box.is-active .m_title::after,
.about_guide .tab_list .m_box.is-active .m_title::before,
.about_guide .tab_list .m_box:hover .m_title::after,
.about_guide .tab_list .m_box:hover .m_title::before {
    background: var(--white);
}

.tab_conts .panel {
    display: none;
    padding: 0 70px 35px;
}
.tab_conts .panel .ttl {
    margin: 40px 0 10px;
    font-size: 35px;
    line-height: 1.6;
    text-align: center;
}
.tab_conts .panel .box {
    padding: 35px 0;
    border-bottom: 1px solid var(--text);
}
.tab_conts .panel .subttl {
    margin-bottom: 10px;
    /*color: var(--blue);*/
      color: #1c60a9;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.5;
}
.tab_conts .panel .text {
    font-size: 17px;
    line-height: 2.2;
}
.tab_conts .panel.is-show {
    display: block;
}
/* for CMS */
body:has(#wrapper) .tab_conts .panel {
    display: block;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_guide {
        padding: 9vw 0 7.5vw;
    }
    .about_guide .tab_list {
        gap: 0 3vw;
        margin-bottom: 4vw;
    }
    .about_guide .tab_list .m_box {
        width: 40vw;
        padding: 2vw 0 0;
    }
    .about_guide .tab_list .m_box .m_title::after,
    .about_guide .tab_list .m_box .m_title::before {
        width: 3vw;
    }
    .about_guide .tab_list .m_box .m_title::after {
        top: calc(40% - .3vw);
        left: 2vw;
        width: 1vw;
    }

    .tab_conts .panel {
        padding: 0 4vw 3vw;
    }
    .tab_conts .panel .ttl {
        margin: 3vw 0 1vw;
        font-size: 3vw;
    }
    .tab_conts .panel .box {
        padding: 3vw 0;
    }
    .tab_conts .panel .subttl {
        margin-bottom: 1vw;
        font-size: 2.4vw;
    }
    .tab_conts .panel .text {
        font-size: 1.6vw;
        line-height: 2;
    }

}
@media screen and (max-width: 767px){
    
    .about_guide {
        padding: 50px 0;
    }
    .about_guide .tab_list {
        flex-wrap: wrap;
        gap: 15px 20px;
        margin-bottom: 30px;
    }
    .about_guide .tab_list .m_box {
        width: 280px;
        padding: 20px 0 0;
    }

    .tab_conts .panel {
        padding: 0 4vw 20px;
    }
    .tab_conts .panel .ttl {
        margin: 20px 0 10px;
        font-size: min(6vw,24px);
        text-align: left;
    }
    .tab_conts .panel .box {
        padding: 20px 0;
    }
    .tab_conts .panel .subttl {
        margin-bottom: 5px;
        font-size: 21px;
    }
    .tab_conts .panel .text {
        font-size: 16px;
        line-height: 1.8;
    }
    
}

/* company */

.about_company {
    padding: 90px 0 0;
}
.about_company .dl {
    margin: 60px 0;
}
.about_company .dl a {
    color: var(--text);
}
.about_company .dlbox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--text);
    line-height: 2.33;
    box-sizing: border-box;
}
.about_company .dlbox:first-child {
    border-top: 1px solid var(--text);
}
.about_company .dlbox .dt {
    width: 20%;
    padding: 17px 0 17px 60px;
}
.about_company .dlbox .dd {
    width: 80%;
    padding: 17px 0;
}

.about_company iframe {
    width: 100%;
    height: 300px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_company {
        padding: 7.5vw 0 0;
    }
    .about_company .dl {
        margin: 5vw 0;
    }
    .about_company .dlbox {
        line-height: 2.2;
    }
    .about_company .dlbox .dt {
        width: 20%;
        padding: 1.6vw 0 1.6vw 4.5vw;
    }
    .about_company .dlbox .dd {
        width: 80%;
        padding: 1.6vw 0;
    }
    .about_company iframe {
        height: 25vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .about_company {
        padding: 50px 0 0;
    }
    .about_company .dl {
        margin: 30px 0;
    }
    .about_company .dlbox {
        display: block;
        line-height: 2;
    }
    .about_company .dlbox .dt {
        width: 100%;
        font-weight: 700;
        padding: 15px 0 0;
    }
    .about_company .dlbox .dd {
        width: 100%;
        padding: 7px 0 15px;
    }
    .about_company .dlbox .dd .p {
        font-size: min(3.5vw,14px);
    }
    .about_company iframe {
        height: 240px;
    }
    
}

/* history */

.about_history {
    padding: 130px 0;
}
.about_history .dlbox {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--text);
    padding: 35px 0;
}
.about_history .dlbox .dt {
    width: 20%;
}
.about_history .dlbox .dt .m_box {
    width: 210px;
    padding: 20px;
    font-size: 17px;
    text-align: center;
}
.about_history .dlbox .dd {
    width: 78.5%;
    line-height: 2.333;
}
.ddw {
    width: 100% !important;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_history {
        padding: 9vw 0;
    }
    .about_history .dlbox {
        padding: 3vw 0;
    }
    .about_history .dlbox .dt .m_box {
        width: 16vw;
        padding: 1.8vw;
        font-size: 1.6vw;
    }
    .about_history .dlbox .dd {
        line-height: 2.2;
    }
    
}
@media screen and (max-width: 767px){
     
    .about_history {
        padding: 50px 0;
    }
    .about_history .dlbox {
        display: block;
        padding: 25px 0;
    }
    .about_history .dlbox .dt {
        width: 100%;
    }
    .about_history .dlbox .dt .m_box {
        margin: 0 auto 20px;
        padding: 15px;
        font-size: 16px;
    }
    .about_history .dlbox .dd {
        width: 100%;
        line-height: 2;
    }
   
}

/*----- contact -----*/

.contact_intro {
    padding: 80px 0 90px;
}
.cti_needs {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.cti_needs .conts {
    position: relative;
    z-index: 8;
    order: 2;
    width: 55%;
    margin-left: -15px;
}
.cti_needs .conts .ul {
    background: var(--blue_light);
    margin-top: 90px;
    padding: 15px 45px 30px;
}
.cti_needs .conts .ul .li {
    padding: 15px 0 15px 45px;
    background: url("/system_panel/uploads/images/icon_check.png") no-repeat;
    background-position: top 18px left 5px;
    background-size: 23px auto;
    border-bottom: 1px solid var(--text);
    font-size: 17px;
    line-height: 1.5;
}
.cti_needs .pic {
    width: 45%;
    margin-right: -15px;
}
.cti_needs .pic img {
    aspect-ratio: 55/41;
}
.cti_title {
    display: flex;
    justify-content: center;
    margin: 50px 0 75px;
}
.cti_title .ttl {
    font-size: 35px;
    line-height: 1.5;
}
.cti_call {
    width: 880px;
    margin: 0 auto;
    padding: 0 0 30px;
    background: var(--blue_light);
}
.cti_call .ttl {
    position: relative;
    top: -30px;
    width: 80%;
    margin: 0 auto;
    padding: 15px;
    background: #1c60a9;
    color: var(--white);
    font-size: 30px;
    text-align: center;
}
.cti_call .inner {
    width: 750px;
    margin: 0 auto;
    padding: 30px 0;
    background: var(--white);
    text-align: center;
}
.cti_call .tel img {
    margin-bottom: 15px;
    width: 371px;
}

.form_area {
    padding: 80px 0;
}
.complete {
    padding: 90px 0 120px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .contact_intro {
        padding: 7.5vw 0;
    }
    .cti_needs .conts {
        width: 61.5%;
        margin-left: -1.5vw;
    }
    .cti_needs .conts .ul {
        margin-top: 5vw;
        padding: 1.2vw 2.5vw 2.4vw;
    }
    .cti_needs .conts .ul .li {
        padding: 1.5vw 0 1.5vw 4vw;
        background-position: top 1.8vw left .5vw;
        background-size: 2vw auto;
        font-size: 1.6vw;
    }
    .cti_needs .pic {
        width: 40%;
        margin-right: 0;
    }
    .cti_title {
        margin: 4vw 0 7vw;
    }
    .cti_title .ttl {
        font-size: 3vw;
    }
    .cti_call {
        width: 100%;
        padding: 0 0 3vw;
    }
    .cti_call .ttl {
        top: -3vw;
        padding: 1.5vw;
        font-size: 2.6vw;
    }
    .cti_call .inner {
        width: 87.5%;
        padding: 3vw 0;
    }
    .cti_call .tel img {
        margin-bottom: 1.5vw;
        width: 30vw;
    }    
    
    .form_area {
        padding: 7.5vw 0;
    }
    .complete {
        padding: 7.5vw 0 9vw;
    }
    
}
@media screen and (max-width: 767px){
  
    .contact_intro {
        padding: 50px 0;
    }
    .cti_needs {
        display: block;
    }
    .cti_needs .conts {
        width: 100%;
        margin-left: 0;
    }
    .cti_needs .conts .ul {
        margin: 0;
        padding: 15px 5vw 20px;
    }
    .cti_needs .conts .ul .li {
        padding: 12px 0 12px 30px;
        background-position: top 16px left 0;
        background-size: 18px auto;
        font-size: 16px;
    }
    .cti_needs .pic {
        width: min(400px,100%);
        margin: 20px auto 0;
    }
    .cti_title {
        display: block;
        margin: 30px 0 40px;
    }
    .cti_title .ttl {
        display: inline;
        font-size: min(7vw,24px);
    }
    .cti_call {
        width: 100%;
        padding: 10px 5vw 20px;
    }
    .cti_call .ttl {
        top: -10px;
        width: 90%;
        padding: 10px 0;
        font-size: min(6vw,20px);
    }
    .cti_call .inner {
        width: 100%;
        padding: 20px 0;
    }
    .cti_call .tel img {
        margin-bottom: 10px;
        width: min(300px,90%);
    }    
    .cti_call .p {
        font-size: min(3vw,14px);
    }
    
    .form_area {
        padding: 50px 0 66px;
    }
    .complete {
        padding: 50px 0 66px;
    }
    
}

@media screen and (max-width: 520px){
  .about_message .frame .pics .pic {
        position: relative;
        width: 55.66%;
    }
  .cti_title .ttl {
        display: inline;
        font-size: min(7vw, 21px);
    }
  .work_intro .title .ttl {
        font-size: min(5.25vw, 24px);
    }
}
@media screen and (min-width: 521px){
    .work_intro .title .m_blue br {
        display: none;
        font-size: min(5.25vw, 24px);
    }
}
@media screen and (min-width: 768px){
  .spbr br{
    display:none;
  }
}
@media (min-width:768px) and (max-width:1024px){
.copyright {
        margin-top: 1vw;
    }
}