@import url(default.css);
@import url(font.css);
@import url(common.css);
@import url(layout.css);

.visual {
    margin: 0 20px;
    position: relative;
    font-family: var(--title-font);
}
.visual h2 {
    display: none;
}
.visual .popup {
    border-radius: 1.2em;
    background-image: url(../images/main/visual_bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.visual .popup .swiper ul li .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3em;
    max-width: 1300px;
    margin: 0 auto;
    height: 30.76em;
    padding-bottom: 2em;
}
.visual .popup .swiper ul li .photo {
    width: 48%;
    text-align: center;
}
.visual .popup .swiper ul li .photo img {
    max-width: 100%;
}
.visual .popup .swiper ul li .txt {
    color: #fff;
    width: 50%;
}
.visual .popup .swiper ul li .txt h3 {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    margin-bottom: 0.26em;
}
.visual .popup .swiper ul li .txt p {
    font-weight: 300;
    color: rgba(255,255,255,0.8);
    height: 2.8em;
    overflow: hidden;
}
.visual .next, .visual .prev {
	position:absolute;
	top: 48%;
	z-index: 10;
	color: transparent;
	width: 2.35em;
	height: 0.70em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 11.7735L0 6L10 0.226493V5L40 5V7L10 7V11.7735Z' fill='white'/%3E%3C/svg%3E%0A");
}
.visual .next {
	right: 1%;
	transform: rotate(180deg);
}
.visual .prev {
	left: 1%;
}
.visual .banner {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #fff;
    display: flex;
    gap: 0.58em;
    padding: 0.58em 0 0 0.58em;
    border-radius: 1.17em 0 0 0;
}
.visual .banner::before {
    content: "";
    position: absolute;
    left: -1.17em;
    bottom: 0;
    width: 1.17em;
    height: 1.17em;
    background: url(../images/main/visual_corner.svg) no-repeat right bottom / contain;
}
.visual .banner::after {
    content: "";
    position: absolute;
    right: 0;
    top: -1.17em;
    width: 1.17em;
    height: 1.17em;
    background: url(../images/main/visual_corner.svg) no-repeat right bottom / contain;
}
.visual .banner a {
    width: 12.5em;
    border-radius: 0.5em;
    padding: 1.55em 0 1.55em;
    color: #fff;
    font-size: 1.17rem;
    font-weight: var(--font-bold);
}
.visual .banner a.tel {
    background-color: var(--sub-color);
}
.visual .banner a.online {
    background-color: var(--point-color);
}
.visual .banner a span {
    position: relative;
    display: block;
    margin: 0 1.55em;
}
.visual .banner a span::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    border: 1px solid #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.65em;
}
.visual .banner a.tel span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='15' viewBox='0 0 13 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1896 14.6306C10.7485 14.6306 9.30074 14.2535 7.84626 13.4993C6.39192 12.7451 5.05566 11.6812 3.83749 10.3077C2.61944 8.93398 1.67534 7.43005 1.00521 5.79587C0.335069 4.16183 0 2.53389 0 0.912046C0 0.65142 0.0764706 0.434256 0.229412 0.260553C0.382353 0.0868509 0.573529 0 0.802941 0H3.29703C3.49012 0 3.66046 0.07093 3.80804 0.212789C3.95563 0.354505 4.0495 0.529642 4.08965 0.738199L4.52802 3.27037C4.55835 3.50532 4.55198 3.70721 4.5089 3.87603C4.46569 4.04486 4.3882 4.18664 4.27643 4.30139L2.51034 6.23629C2.79455 6.82209 3.1193 7.37626 3.48457 7.8988C3.84972 8.4212 4.24507 8.92014 4.67063 9.39564C5.0902 9.86798 5.53628 10.3066 6.00887 10.7115C6.48146 11.1165 6.99177 11.4933 7.53981 11.842L9.25581 9.89394C9.37549 9.7538 9.5204 9.65555 9.69055 9.59917C9.86056 9.54295 10.0373 9.52918 10.2207 9.55786L12.3441 10.0445C12.5372 10.1019 12.6948 10.2128 12.8169 10.3772C12.939 10.5416 13 10.728 13 10.9366V13.7269C13 13.9851 12.9228 14.2003 12.7685 14.3724C12.6141 14.5445 12.4212 14.6306 12.1896 14.6306Z' fill='white'/%3E%3C/svg%3E%0A");
}
.visual .banner a.online span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.800003 3.5C0.523861 3.5 0.300003 3.72386 0.300003 4C0.300003 4.27614 0.523861 4.5 0.800003 4.5V3.5ZM11.5536 4.35355C11.7488 4.15829 11.7488 3.84171 11.5536 3.64645L8.37158 0.464466C8.17631 0.269204 7.85973 0.269204 7.66447 0.464466C7.46921 0.659728 7.46921 0.976311 7.66447 1.17157L10.4929 4L7.66447 6.82843C7.46921 7.02369 7.46921 7.34027 7.66447 7.53553C7.85973 7.7308 8.17631 7.7308 8.37158 7.53553L11.5536 4.35355ZM0.800003 4.5H11.2V3.5H0.800003V4.5Z' fill='white'/%3E%3C/svg%3E%0A");
}


@media screen and (max-width:1300px){
    .visual .popup .swiper ul li .inner  {
        margin: 0 20px;
    }
    .visual .popup .swiper ul li .txt p br {
        display: none;
    }
	.visual .next, .visual .prev {
		display: none;
	}
}/* media */

@media screen and (max-width:1024px){
    .visual .popup .swiper ul li .inner {
        flex-direction: column;
        gap: 1em;
        text-align: center;
        padding-bottom: 0;
    }
    .visual .popup .swiper ul li .photo {
        width: auto;
    }
    .visual .popup .swiper ul li .photo img {
        max-height: 15em;
    }
    .visual .popup .swiper ul li .txt {
        width: auto;
    }
    .visual .popup .swiper ul li .txt h3 {
        font-size: 1.78em;
    }
    .visual .banner {
        position: relative;
        right: auto;
        bottom: auto;
        background-color: transparent;
        gap: 0.58em;
        padding: 0;
        border-radius: 0;
        margin: 0.58em 0 0 0;
    }
    .visual .banner a {
        width: 50%;
    }
}/* media */
@media screen and (max-width:768px){ 
    .visual .banner a {
        font-size: 1rem;
        text-align: center;
    }
    .visual .banner a span {
        display: inline-block;
        padding-right: 2em;
        margin: 0;
    }
}

.repair {
    margin: 4.94em 0;
}
.repair .wrapper {
    position: relative;
}
.repair h2 {
    color: var(--title-txt-color);
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    font-size: var(--title-txt-size);
}
.repair .list {
    margin: 1.76em 0 0 0;
}
.repair .list .swiper ul li a {
    display: block;
}
.repair .list .swiper ul li a .photo {
    display: block;
    overflow: hidden;
    height: 14.12em;
    border-radius: 0.58em;
}
.repair .list .swiper ul li a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.repair .list .swiper ul li a strong {
    display: block;
    margin: 1em 0 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.repair .list .swiper ul li a:hover .photo img {
    transform: scale3d(1.2, 1.2, 1);
}
.repair .list .swiper ul li a:hover strong {
    font-weight: var(--font-bold);
}
.repair .more {
    position: absolute;
    right: 0;
    top: 0.76em;
}
.repair .more a {
    display: block;
    width: 1.76em;
    height: 1.76em;
    border: 1px solid #666;
    border-radius: 50%;
    color: transparent;
}
.repair .more a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.7em;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H13' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 1L7 13' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    transition: 1s;
}
.repair .more a:hover::before {
    transform: rotate(360deg);
}
@media screen and (max-width:768px){
    .repair .list .swiper ul li {
        width: 17.85em;
    }
    .repair .more {
        top: 0.5em;
    }
}

.message {
    padding: 3.11em 0;
    margin: 0 20px;
    border-radius: 1.18em;
    background-color: var(--sub-color);
    color: #fff;
}
.message .message_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.message .message_wrap .inner {
    display: flex;
    gap: 0.58em;
    width: calc(100% - 10.17em);
}
.message  h2 {
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    font-size: 2.05rem;
    line-height: 1.1;
}
.message .tel, 
.message .memo_wrap .memo,
.message .send {
    height: 72px;
    padding: 0.5em 1em;
    border: 1px solid #D0D5DD;
    border-radius: 5px;
    background-color: transparent;
    outline: none;
    color: #fff;
}
.message .tel {
    width: 12em;
}
.message .tel::placeholder,
.message .memo_wrap .memo::placeholder {
    color: #D0D5DD;
}
.message .memo_wrap {
    width: calc(100% - 20em);
}
.message .memo_wrap .memo {
    resize: none;
    scrollbar-width: none;
    width: 100%;
    padding-top: 1.35em;
}
.message .memo_wrap .memo_txt {
    display: flex;
    gap: 2em;
    color: rgba(255,255,255,0.6);
}
.message .memo_wrap .memo_txt input {
    background-color: transparent;
    border: 0;
    outline: 0;
}
.message .send {
    width: 7.45em;
    background-color: #233C77;
    color: #fff;
    font-weight: var(--font-bold);
    text-align: center;
    cursor: pointer;
}
@media screen and (max-width:1400px){
    .message {
        margin: 0;
        border-radius: 0;
    }
}
@media screen and (max-width:1024px){
    .message .message_wrap {
        display: block;
    }
    .message .message_wrap .inner {
        width: auto;
    }
    .message h2 {
        margin-bottom: 0.58em;
    }
    .message h2 br {
        display: none;
    }
}
@media screen and (max-width:768px){
    .message {
        margin: 0;
        border-radius: 0;
    }
    .message h2 {
        font-size: var(--title-txt-size);
    }
    .message .message_wrap .inner {
        flex-direction: column;
    }
    .message .tel {
        width: 100%;
        height: 3.46em;
    }
    .message .memo_wrap {
        width: 100%;
    }
    .message .memo_wrap .memo {
        height: 4.23em;
    }
    .message .send {
        border: 0;
        width: 100%;
        height: 2.76em;
    }
}

.tech_mat {
    margin: 6.7em 0 6.41em 0;
}
.tech_mat .wrapper {
    display: flex;
    justify-content: space-between;
}
.tech_mat .tech {
    width: 32%;
    position: relative;
}
.tech_mat .material {
    width: 63%;
    position: relative;
}
.tech_mat h2 {
    font-family: var(--title-font);
    font-size: var(--title-txt-size);
    font-weight: var(--font-bold);
    color: var(--title-txt-color);
}
.tech_mat .more {
    position: absolute;
    right: 0;
    top: 13px;
}
.tech_mat .more a {
    display: block;
    width: 1.76em;
    height: 1.76em;
    border: 1px solid #666;
    border-radius: 50%;
    color: transparent;
}
.tech_mat .more a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.7em;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7H13' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 1L7 13' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    transition: 1s;
}
.tech_mat .more a:hover::before {
    transform: rotate(360deg);
}
.tech_mat .tech .list {
    margin: 2.52em 0 0 0;
}
.tech_mat .tech .list ul li {
    border-bottom: 1px solid #ccc;
}
.tech_mat .tech .list ul li:first-child {
    border-top: 1px solid #ccc;
}
.tech_mat .tech .list ul li a {
    display: block;
    padding: 0 0.9em;
    font-size: 1.29rem;
    line-height: 2.95;
}
.tech_mat .tech .list ul li a strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tech_mat .tech .list ul li a:hover {
    font-weight: var(--font-bold);
}

.tech_mat .material .list {
    margin: 1.76em 0 0 0;
}
.tech_mat .material .list ul li a {
    display: block;
}
.tech_mat .material .list ul li a .photo {
    display: block;
    overflow: hidden;
    border-radius: 0.29em;
    height: 12.23em;
}
.tech_mat .material .list ul li a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.tech_mat .material .list ul li a strong {
    display: block;
    overflow: hidden;
    height: 2.8em;
    margin: 1em 0 0 0;
}
.tech_mat .material .list ul li a:hover .photo img {
    transform: scale3d(1.2, 1.2, 1);
}
.tech_mat .material .list ul li a:hover strong {
    font-weight: var(--font-bold);
}

@media screen and (max-width:1024px){
    .tech_mat .wrapper {
        display: block;
    }
    .tech_mat .tech {
        width: auto;
    }
    .tech_mat .tech .list {
        margin-top: 1.76em;
    }
    .tech_mat .material {
        width: auto;
        margin-top: 5em;
    }
}
@media screen and (max-width:768px){
    .tech_mat .tech .list ul li a {
        font-size: 1rem;
    }
    .tech_mat .more {
        top: 0.5em;
    }
    .tech_mat .material .list ul li {
        width: 17.85em;
        min-width: 50%;
    }
}

.service {
    padding: 3.52em 0 4.47em 0;
    background-color: var(--sub-color);
    color: #fff;
    text-align: center;
}
.service ul {
    display: flex;
}
.service ul li {
    width: 20%;
    position: relative;
}
.service ul li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background-color: rgba(255,255,255,0.3);
}
.service ul li h2 {
    position: relative;
    padding: 2.52em 0 0.56em 0;
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    font-size: 1.2rem;
}
.service ul li h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.96em;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.service ul li.tel h2::before {
    background-image: url(../images/common/banner_tel.svg);
}
.service ul li.bank h2::before {
    background-image: url(../images/common/banner_kb.svg);
}
.service ul li.online h2::before {
    background-image: url(../images/common/banner_online.svg);
}
.service ul li.map h2::before {
    background-image: url(../images/common/banner_map.svg);
}
.service ul li.blog h2::before {
    background-image: url(../images/common/blog.svg);
}
.service ul li p strong {
    display: block;
    font-family: var(--title-font);
    font-weight: var(--font-bold);
    font-size: 1.2rem;
}
.service ul li p span {
    font-size: 0.9rem;
}
.service ul li .more a {
    position: relative;
    display: inline-block;
    padding: 0.6em 4em 0.6em 1.2em;
    border: 1px solid #fff;
    border-radius: 3em;
    font-size: 0.9rem;
}
.service ul li .more a::after {
    content: "";
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.7em;
    height: 0.47em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM11.7536 4.35355C11.9488 4.15829 11.9488 3.84171 11.7536 3.64645L8.57157 0.464466C8.37631 0.269204 8.05973 0.269204 7.86447 0.464466C7.6692 0.659728 7.6692 0.976311 7.86447 1.17157L10.6929 4L7.86447 6.82843C7.6692 7.02369 7.6692 7.34027 7.86447 7.53553C8.05973 7.7308 8.37631 7.7308 8.57157 7.53553L11.7536 4.35355ZM1 4.5H11.4V3.5H1V4.5Z' fill='white'/%3E%3C/svg%3E%0A");
}
.service ul li .more a:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
@media screen and (max-width:1024px){
    .service {
        padding: 0;
    }
    .service ul {
        flex-wrap: wrap;
    }
    .service ul li {
        width: 50%;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: 2em 0;
    }
    .service ul li:last-child {
        border-bottom: 0;
    }
    .service ul li:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,0.3);
    }
    .service ul li + li::before {
        display: none;
    }
    .service ul li.blog {
        width: 100%;
    }
}

@media screen and (max-width:768px){
    .service {
        text-align: left;
        padding: 0 20px;
    }
    .service ul {
        display: block;
    }
    .service ul li {
        width: auto;
        padding: 2em 0 2em 6.07em;
    }
    .service ul li:nth-child(even) {
        border-left: 0;
    }
    .service ul li h2 {
        padding-top: 0;
    }
    .service ul li h2::before {
        left: -4em;
        width: 3em;
        height: 2em;
        background-size: contain;
    }
}