@charset "utf-8";
/* レイアウトのためのCSS */

/* ------------------ common ------------------- */

body {
    font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

* { box-sizing: border-box;}

ul {
	margin:0;
	padding: 0;
	list-style: none;
}
a {
	color: #333;
	text-decoration: none;
    outline: none;
}
img {
    height: auto;
}
#container {
    overflow: hidden;
}
section {
    margin-bottom: 100px;
}
.pc_none { display: none; }

section h1 {
    font-size: 48px;
    font-weight: 800;
    font-family: 'M PLUS 1p', sans-serif;
    display: inline;
    text-align: center;
    margin-bottom: 60px;
    padding: 0 5px;
    position: relative;
    z-index: 1;
}
section h1::after {
    content: '';
    width: 100%;
    height: 20px;
    background-color: #ffdc35;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35%;
    margin: auto;
    z-index: -1;
}
section h2 {
    font-size: 30px;
    font-weight: 800;
    font-family: 'M PLUS 1p', sans-serif;
    color: #0071bc;
    margin-bottom: 10px;
    letter-spacing: .02em;
}
.btn {
    font-weight: 800;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 40px;
    max-width: 400px;
    width: 100%;    
    height: 55px;
    line-height: 55px;
    font-size: 18px;
    position: relative;
    z-index: 1;
    background-color: #ffdc35;
}
.btn a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: block;
    width: 100%;
    height: 100%;
}
.btn img {
    position: absolute;
    top: 30%;
    right: 5%;
    max-width: 28px;
    width: 100%;
}
.btn:hover {
    opacity: 0.7;
}
.tel-link {
    pointer-events: none;
    color: #333;
}

@media (max-width: 1024px) {
    section h1 {
        font-size: 40px;
    }
}
@media (max-width: 768px) {
    body {
        font-size: 0.9em;
    }
    section h1 {
        font-size: 36px;
    }
    section h2 {
        font-size: 24px;
    }
    section {
        margin-bottom: 60px;
    }
    .tel-link {
        pointer-events: all;
    }
}
@media (max-width: 450px) {
    section {
        margin-bottom: 40px;
    }
    section h1 {
        font-size: 24px;
        margin-bottom: 20px;
        line-height: 1.6em;
    }
    section h1::after {
        height: 15px;
        bottom: 20%;
    }
    section h2 {
        font-size: 21px;
        line-height: 1.5em;
        margin-top: 20px;
    }
    section p {
        font-size: 14px;
        line-height: 1.9em;
    }
    .btn {
        width: 90%;
        height: 45px;
        font-size: 15px;
        line-height: 45px;
    }
    .btn img {
        width: 9%;
    }
}

/* ------------------ #header ------------------- */

#header {
    position: fixed;
    height: 90px;
    width: 100%;
    z-index: 999;
    background:#0071bc;
    color:#333;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
}
#header #header-innner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    width: 90%;
    height: 90px;
    margin: auto;
}
#header #header-innner #header-logo a {
    display: block;
}
#header #header-innner #header-logo a img {
    width: 100%;
    max-width: 250px;
    position: relative;
    top: 2px;
}
#header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    letter-spacing: 0.05em;
}
#header nav ul li a {
    display: block;
    text-decoration: none;
    padding-left: 50px;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}
#header nav ul li a:hover,
#header nav ul li a:active {
    color:#ffdc35; 
}
#header nav ul li i {
    display: none;
}
@media (max-width: 1200px) {
    #header nav ul li a {
        font-size: 16px;
    }
}
@media (max-width: 1024px) {
    #header #header-innner #header-logo a img {
        width: 60%;
        position: relative;
        top: 3px;
    }
}

/* ------------------ #footer ------------------- */

#footer {
    background-color: #0071bc;
}
#footer #footer-wrap {
    max-width: 1140px;
    width: 90%;
    margin: auto;
    padding: 50px 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#footer #footer-wrap #footer-img {
    width: 18%;
    text-align: center;
}
#footer #footer-wrap #footer-img img {
    max-width: 198px;
    width: 100%;
}
#footer #footer-wrap #footer-img small {
    display: block;
    font-size: 12px;
    font-weight: 400;
}
#footer #footer-wrap #footer-text {
    width: 23%;
    font-size: 14px;
    letter-spacing: .07em;
}
#footer #footer-wrap #footer-text .tel-link {
    color: #fff;
}
#footer #footer-wrap #footer-menu {
    width: 50%;
    letter-spacing: .05em;
}
#footer #footer-wrap #footer-menu #main-menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
#footer #footer-wrap #footer-menu #sub-menu {
    display: flex;
    font-size: 13px;
}
#footer #footer-wrap #footer-menu #sub-menu li {
    margin-right: 30px;
}
#footer #footer-wrap #footer-menu a {
    color: #fff;
}

@media (max-width: 1024px) {
    #footer #footer-wrap #footer-menu {
        display: none;
    }
    #footer #footer-wrap #footer-img,
    #footer #footer-wrap #footer-text {
        width: 50%;
    }
}
@media (max-width: 768px) {
    #footer #footer-wrap {
        display: block;
        text-align: center;
        padding: 30px 0;
    }
    #footer #footer-wrap #footer-img,
    #footer #footer-wrap #footer-text {
        width: 100%;
    }
    #footer #footer-wrap #footer-img {
        margin-bottom: 20px;
    }
    #footer #footer-wrap #footer-img img {
        width: 40%;
    }
    #footer #footer-wrap #footer-text {
        font-size: 12px;
    }
}

/* --------------------------------------------------
トップページ
---------------------------------------------------- */

/* ------------------ #top ------------------- */

#top {
    background-image: url(../images/top-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    top: 89px;
}
#top #top-wrap {
    max-width: 1140px;
    width: 90%;
    margin: auto;
    padding: 110px 0;
    text-align: center;
    font-family: 'M PLUS 1p', sans-serif;
}
#top #top-wrap h1 {
    font-size: 54px;
    color: #333;
    font-weight: 800;
    line-height: 1.7em;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}
#top #top-wrap h1 span {
    font-size: 72px;
    position: relative;
    z-index: 1;
    padding: 0 3px;
}
#top #top-wrap h1 span::after {
    content: '';
    width: 100%;
    height: 20px;
    background-color: #ffdc35;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: auto;
    z-index: -1;
}
#top #top-wrap #top-inner {
    display: flex;
    justify-content: space-between;
}
#top #top-wrap #top-inner .top-item img {
    max-width: 363px;
    width: 100%;
}
#top #top-wrap #top-inner .top-item {
    width: 32%;
}

@media (max-width: 1024px) {
    #top {
        top: 55px;
    }
    #top #top-wrap h1 span {
        font-size: 54px;
    }
    #top #top-wrap h1 {
        font-size: 40px;
    }
    #top #top-wrap #top-inner .top-item h2 {
        font-size: 24px;
    }
    #top #top-wrap #top-inner .top-item h3 {
        font-size: 18px;
    }
}
@media (max-width: 768px) {
    #top #top-wrap h1 {
        font-size: 36px;
        margin-bottom: 60px;
    }
    #top #top-wrap h1 span {
        font-size: 45px;
    }
    #top #top-wrap h1 span::after {
        height: 15px;
    }
}
@media (max-width: 450px) {
    #top #top-wrap h1 {
        font-size: 30px;
        margin-bottom: 15px;
    }
    #top #top-wrap h1 span {
        font-size: 35px;
    }
    #top #top-wrap {
        padding: 60px 0 40px;
    }
    #top #top-wrap #top-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    #top #top-wrap #top-inner .top-item {
        width: 50%;
        padding: 0 3px;
    }
    #top #top-wrap h1 span::after {
        height: 10px;
    }
}
@media (max-width: 350px) {
    #top #top-wrap h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    #top #top-wrap h1 span {
        font-size: 30px;
    }
}


/* ------------------ #banner ------------------- */

#banner {
    margin: 140px 0 60px;
}
.slider img {
    width: 100%;
    height: auto;
}
.slider .slick-slide {
    margin: 0 10px;
}
@media (max-width: 1024px) {
    #banner {
        margin: 110px 0 60px;
    }
}
@media (max-width: 768px) {
    #banner {
        margin: 90px 0 35px;
    }
}
@media (max-width: 450px) {
    #banner {
        margin: 75px 0 20px;
    }
}

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

#about {
    background-image: url(../images/bg.jpg);
    background-size: contain;
    background-repeat: repeat;
}
#about #about-wrap {
    text-align: center;
    max-width: 1140px;
    width: 90%;
    margin: auto;
    padding: 100px 0;
}
#about #about-wrap #about-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: justify;
    margin-top: 40px;
}
#about #about-wrap #about-inner #about-img {
    width: 50%;
}
#about #about-wrap #about-inner #about-img img {
    max-width: 546px;
    width: 100%;
}
#about #about-wrap #about-inner #about-text {
    width: 45%;
    position: relative;
}
#about #about-wrap #about-inner #about-text::after {
    background-image: url(../images/top-shape2.png);
    position: absolute;
    content: '';
    max-width: 243px;
    width: 100%;
    height: 243px;
    top: 60%;
    right: -10%;
}


@media (max-width: 768px) {
    #about #about-wrap #about-inner {
        display: block;
    }
    #about #about-wrap #about-inner #about-img,
    #about #about-wrap #about-inner #about-text {
        width: 100%;
    }
    #about #about-wrap #about-inner #about-img {
        text-align: center;
        margin-bottom: 60px;
    }
    #about #about-wrap h1::after {
        display: none;
    }
    #about #about-wrap #about-inner #about-text::after {
        display: none;
    }
}
@media (max-width: 450px) {
    #about #about-wrap {
        padding: 60px 0;
    }
    #about #about-wrap #about-inner {
        margin-top: 15px;
    }
    #about #about-wrap #about-inner #about-img {
        margin-bottom: 30px;
    }
    
}

/* ------------------ #strength ------------------- */

#strength #strength-wrap {
    max-width: 1140px;
    width: 90%;
    margin: auto;
    text-align: center;
}
#strength #strength-wrap h2 {
    margin-top: 40px;
}
#strength #strength-wrap p {
    margin-bottom: 60px;
}
#strength #strength-wrap #strength-inner {
    display: flex;
    justify-content: space-between;
    margin: 30px auto 60px;
}
#strength #strength-wrap #strength-inner .strength-item {
    width: 32%;
    border-radius: 10px;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(1) {
    background-color: #f98a08;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(2) {
    background-color: #0071bc;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(3) {
    background-color: #51be8a;
}
#strength #strength-wrap #strength-inner .strength-item .strength-img {
    width: 100%;
}
#strength #strength-wrap #strength-inner .strength-item .strength-img img {
    width: 100%;
}
#strength #strength-wrap #strength-inner .strength-item .strength-text {
    padding: 10px 20px;
}
#strength #strength-wrap #strength-inner .strength-item h3 {
    font-size: 1.7em;
    font-weight: 700;
    position: relative;
    padding-top: 1rem;
    text-align: center;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: .05em;
}  
#strength #strength-wrap #strength-inner .strength-item h3:before,
#strength #strength-wrap #strength-inner .strength-item h3:after {
    position: absolute;
    content: '';
}
#strength #strength-wrap #strength-inner .strength-item h3:before {
    top: -60px;
    left: calc(50% - 65px);
    width: 130px;
    height: 130px;
    border-radius: 50%;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(1) h3:before {
    background-color: #f98a08;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(2) h3:before {
    background-color: #0071bc;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(3) h3:before {
    background-color: #51be8a;
}
#strength #strength-wrap #strength-inner .strength-item .strength-text h3 img {
    position: absolute;
    z-index: 1;
    text-align: center;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(1) .strength-text h3 img {
    max-width: 50px;
    top: -41px;
    left: calc(50% - 26px);
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(2) .strength-text h3 img {
    max-width: 68px;
    top: -43px;
    left: calc(50% - 33px);
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(3) .strength-text h3 img {
    max-width: 63px;
    top: -40px;
    left: calc(50% - 32px);
}
#strength #strength-wrap #strength-inner .strength-item h3 span {
    position: relative;
    z-index: 1;
}
#strength #strength-wrap #strength-inner .strength-item h4 {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 20px;
    font-size: 21px;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(1) h4 {
    color: #f98a08;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(2) h4 {
    color: #0071bc;
}
#strength #strength-wrap #strength-inner .strength-item:nth-child(3) h4 {
    color: #51be8a;
}

@media (max-width: 1024px) {
    #strength #strength-wrap #strength-inner .strength-item h3 {
        font-size: 20px;
    }
    #strength #strength-wrap #strength-inner .strength-item h4 {
        font-size: 16px;
    }
    #strength #strength-wrap p {
        margin-bottom: 30px;
    }
    #strength #strength-wrap p br {
        display: none;
    }
    #strength #strength-wrap #strength-inner .strength-item .strength-text {
        padding: 10px 10px;
    }
    #strength #strength-wrap #strength-inner .strength-item h3:before {
        top: -60px;
        left: calc(50% - 55px);
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 450px) {
    #strength #strength-wrap h2 {
        margin-top: 20px;
    }
    #strength #strength-wrap #strength-inner {
        display: block;
        margin: 30px auto;
    }
    #strength #strength-wrap #strength-inner .strength-item {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* ------------------ #shop ------------------- */

#shop {
    background-image: url(../images/bg.jpg);
    background-size: contain;
    background-repeat: repeat;
}
#shop #shop-wrap {
    max-width: 1140px;
    width: 90%;
    margin: auto;
    padding: 100px 0;
    text-align: center;
}
#shop #shop-wrap #shop-inner {
    margin-top: 60px;
}
#shop #shop-wrap .shop-item {
    margin-bottom: 150px;
    position: relative;
}
#shop #shop-wrap .shop-item:last-child {
    margin-bottom: 0;
}
#shop #shop-wrap .shop-item .shop-img {
    width: 61%;
}
#shop #shop-wrap .shop-item .shop-img img {
    max-width: 700px;
    width: 100%;
}
#shop #shop-wrap .shop-item:nth-child(even) .shop-img {
    margin-left: auto;
}
#shop #shop-wrap .shop-item .shop-text {
    background-color: #fff;
    max-width: 570px;
    width: 50%;
    position: absolute;
    padding: 30px 40px 20px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
#shop #shop-wrap .shop-item:nth-child(odd) .shop-text {
    right: 0;
}
#shop #shop-wrap .shop-item .shop-text h2 {
    color: #333;
    margin-bottom: 0;
    text-align: left;
}
#shop #shop-wrap .shop-item .shop-text h3 {
    font-size: 20px;
    margin-bottom: 5px;
    text-align: left;
}
#shop #shop-wrap .shop-item .shop-text p {
    text-align: justify;
    margin-bottom: 20px;
    line-height: 1.7em;
}
#shop #shop-wrap .shop-orange span,
#shop #shop-wrap .shop-orange h3 {
    color: #f98a08;
}
#shop #shop-wrap .shop-orange .shop-text {
    box-shadow: 20px 20px #f98a08;
}
#shop #shop-wrap .shop-blue span,
#shop #shop-wrap .shop-blue h3 {
    color: #0071bc;
}
#shop #shop-wrap .shop-blue .shop-text {
    box-shadow: 20px 20px #0071bc;
}
#shop #shop-wrap .shop-green span,
#shop #shop-wrap .shop-green h3 {
    color: #51be8a;
}
#shop #shop-wrap .shop-green .shop-text {
    box-shadow: 20px 20px #51be8a;
}
@media (max-width: 1024px) {
    #shop #shop-wrap .shop-item {
        margin-bottom: 250px;
    }
    #shop #shop-wrap .shop-item .shop-img img {
        max-width: 1024px;
        width: 100%;
    }
    #shop #shop-wrap .shop-item .shop-img {
        width: 100%;
    }
    #shop #shop-wrap .shop-item .shop-text {
        max-width: 1024px;
        width: 85%;
        top: 80%;
    }
}

@media (max-width: 768px) {
    #shop #shop-wrap .shop-item {
        margin-bottom: 100px;
        position: relative;
        background-color: #fff;
        border-radius: 20px;
        padding: 30px;
    }
    #shop #shop-wrap .shop-item .shop-img {
        width: 100%;
    }
    #shop #shop-wrap .shop-item .shop-img img {
        vertical-align: top;
    }
    #shop #shop-wrap .shop-item .shop-text {
        position: relative;
        top: 0px;
        width: 100%;
        padding: 30px 0 0;
        transform: translateY(0%);
    }
    #shop #shop-wrap .shop-orange .shop-text,
    #shop #shop-wrap .shop-green .shop-text,
    #shop #shop-wrap .shop-blue .shop-text {
        box-shadow: none;
    }
    #shop #shop-wrap .shop-orange {
        box-shadow: 20px 20px #f98a08;
    }
    #shop #shop-wrap .shop-blue {
        box-shadow: 20px 20px #0071bc;
    }
    #shop #shop-wrap .shop-green {
        box-shadow: 20px 20px #51be8a;
    }
}
@media (max-width: 450px) {
    #shop #shop-wrap {
        padding: 60px 0;
    }
    #shop #shop-wrap #shop-inner {
        margin-top: 30px;
    }
    #shop #shop-wrap .shop-item {
        padding: 20px;
        margin-bottom: 40px;
    }
    #shop #shop-wrap .shop-orange {
        box-shadow: 10px 10px #f98a08;
    }
    #shop #shop-wrap .shop-blue {
        box-shadow: 10px 10px #0071bc;
    }
    #shop #shop-wrap .shop-green {
        box-shadow: 10px 10px #51be8a;
    }
    #shop #shop-wrap .shop-item .shop-text {
        padding-top: 0;
    }
    #shop #shop-wrap .shop-item .shop-text h2 {
        margin-bottom: 10px;
    }
    #shop #shop-wrap .shop-item .shop-text h3 {
        font-size: 17px;
        margin-bottom: 10px;
    }
    #shop #shop-wrap .shop-item .shop-text p {
        margin-bottom: 25px;
    }
}

/* ------------------ #recruit ------------------- */

#recruit #recruit-wrap {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto 100px;
    text-align: center;
    position: relative;
}
#recruit #recruit-wrap::before {
    background-image: url(../images/top-recruit1.png);
    content: '';
    min-height: 370px;
    width: 373px;
    position: absolute;
    top: 0;
    left: 0;
}
#recruit #recruit-wrap::after {
    background-image: url(../images/top-recruit2.png);
    content: '';
    min-height: 370px;
    width: 343px;
    position: absolute;
    top: 0;
    right: 0;
}
#recruit #recruit-wrap #recruit-inner {
    background-color: #0071bc;
    color: #fff;
    min-height: 370px;
    padding: 50px 0;
}
#recruit #recruit-wrap #recruit-inner h1 {
    font-weight: 600;
    display: block;
    background: none;
    margin-bottom: 15px;
    letter-spacing: .05em;
    position: relative;
    z-index: 1;
    font-size: 48px;
    font-family: 'M PLUS 1p', sans-serif;
}
#recruit #recruit-wrap #recruit-inner h1::after {
    position: absolute;
    content: '';
    background-image: url(../images/top-shape3.png);
    z-index: -1;
    width: 95px;
    height: 95px;
    top: -30%;
}
#recruit #recruit-wrap #recruit-inner p {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}
#recruit #recruit-wrap #recruit-inner p::before {
    position: absolute;
    content: '';
    background-image: url(../images/top-shape3.png);
    z-index: -1;
    width: 95px;
    height: 95px;
    left: 33%;
}
#recruit #recruit-wrap .recruit-img {
    display: none;
}
@media (max-width: 1100px) {
    #recruit #recruit-wrap::before,
    #recruit #recruit-wrap::after {
        width: 215px;
    }
}
@media (max-width: 768px) {
    #recruit #recruit-wrap::before,
    #recruit #recruit-wrap::after {
        display: none;
    }
    #recruit #recruit-wrap #recruit-inner {
        padding: 50px 30px;
    }
    #recruit #recruit-wrap #recruit-inner p::before {
        left: 12%;
    }
    #recruit #recruit-wrap #recruit-inner h1::after {
        top: -17%;
        right: 12%;
    }
}
@media (max-width: 450px) {
    #recruit #recruit-wrap {
        margin: 0 auto 60px;
    }
    #recruit #recruit-wrap #recruit-inner h1 {
        font-size: 36px;
    }
    #recruit #recruit-wrap #recruit-inner {
        padding: 30px 20px;
        min-height: auto;
    }
    #recruit #recruit-wrap #recruit-inner p::before,
    #recruit #recruit-wrap #recruit-inner h1::after {
        display: none;
    }
    #recruit #recruit-wrap .recruit-img {
        display: block;
        max-width: 404px;
        width: 100%;
    }
}
@media (max-width: 400px) {
    #recruit #recruit-wrap #recruit-inner h1 {
        font-size: 28px;
    }
}


/* --------------------------------------------------
下層ページ 共通
---------------------------------------------------- */

#page-top {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    top: 90px;
    min-height: 300px;
    margin-bottom: 190px;
    text-align: center;
}
#page-top h1 {
    font-size: 48px;
    font-weight: 800;
    font-family: 'M PLUS 1p', sans-serif;
    color: #262626;
    position: relative;
    padding-top: 100px;
    letter-spacing: .05em;
}

@media (max-width: 1024px) {
    #page-top {
        top: 55px;
        margin-bottom: 160px;
    }
    #page-top h1 {
        font-size: 40px;
        padding-top: 120px;
    }
} 
@media (max-width: 768px) {
    #page-top h1 {
        font-size: 30px;
        padding-top: 100px;
    }
    #page-top {
        min-height: 250px;
        margin-bottom: 150px;
    }
}
@media (max-width: 450px) {
    #page-top {
        min-height: 170px;
        margin-bottom: 100px;
    }
    #page-top h1 {
        font-size: 23px;
        padding-top: 70px;
    }
} 

/* --------------------------------------------------
光田グループの強みページ
---------------------------------------------------- */

#strength-page #page-top {
    background-image: url(../images/strength-header.png);
}
#strength-page #intro {
    max-width: 1140px;
    width: 90%;
    margin: 0 auto 100px;
    text-align: center;
}
#strength-page #intro .text {
    margin-bottom: 60px;
}
#strength-page #intro .img img {
    max-width: 700px;
    width: 50%;
}
#strength-page #main {
    background-image: url(../images/strength-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0;
}
#strength-page #main #wrap {
    max-width: 1140px;
    width: 90%;
    padding: 100px 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#strength-page #main #wrap .text {
    width: 50%;
}
#strength-page #main #wrap .text p {
    margin-bottom: 20px;
    text-align: justify;
}
#strength-page #main #wrap .img {
    width: 43%;
}
#strength-page #main #wrap .img img {
    max-width: 491px;
    width: 100%;
}

@media (max-width: 768px) {
    #strength-page #intro {
        margin: 0 auto 60px;
    }
    #strength-page #intro .text {
        margin-bottom: 40px;
    }
    #strength-page #intro .img img {
        width: 70%;
    }
    #strength-page #main #wrap {
        display: block;
        padding: 60px 0;
    }
    #strength-page #main #wrap .text { 
        margin-bottom: 40px;
        width: 100%;
    }
    #strength-page #main #wrap .img {
        width: 100%;
        margin: auto;
        text-align: center;
    }
    #strength-page #main #wrap .img img {
        width: 60%;
    }
}
@media (max-width: 450px) {
    #strength-page #intro {
        margin: 0 auto 40px;
    }
    #strength-page #main #wrap {
        padding: 30px 0;
    }
    #strength-page #main #wrap .text { 
        margin-bottom: 30px;
    }
    #strength-page #intro .text {
        margin-bottom: 30px;
        text-align: justify;
    }
    #strength-page #intro .text p br {
        display: none;
    }
    #strength-page #intro .img img {
        width: 80%;
    }
    #strength-page #main #wrap .text p {
        margin-bottom: 20px;
    }
    #strength-page #main #wrap .img img {
        width: 80%;
    }
}

/* --------------------------------------------------
会社概要ページ
---------------------------------------------------- */

#company-page #page-top {
    background-image: url(../images/company-header.png);
}
.outline {
    text-align: center;
}
.outline .outline-table {
    max-width: 980px;
    width: 90%;
    margin: 40px auto 0;
    border-collapse:collapse;
}
.outline .outline-table tbody {
    text-align: justify;
}
.outline .outline-table tbody tr {
    margin-bottom: 15px;
}
.outline .outline-table tbody th {
    width: 25%;
    padding: 15px 10px;
    border-bottom: 2px solid #0071bc;
    letter-spacing: .02em;
}
.outline .outline-table tbody td {
    width: 75%;
    border-bottom: 2px solid #e5e5e5;
    padding: 15px 20px;
}
#philosophy {
    background-image: url(../images/bg.jpg);
    background-size: contain;
    background-repeat: repeat;
    text-align: center;
    padding: 100px 0;
}
#philosophy .wrap {
    max-width: 980px;
    width: 90%;
    margin: 40px auto 0;
    background-color: #fff;
    border-radius: 20px;
}
#philosophy .wrap .inner {
    max-width: 830px;
    width: 90%;
    margin: auto;
    padding: 60px 0
}
#philosophy .wrap .item {
    text-align: left;
    margin-bottom: 40px;
}
#philosophy .wrap .item h3 {
    position: relative;
    font-size: 22px;
    margin-bottom: 20px;
}
#philosophy .wrap .item h3:before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: #ffdc35;
}
#philosophy .wrap .item h3 span {
    position: relative;
    padding-right: 1rem;
    background: #fff;
    margin-bottom: 10px;
}
#philosophy .wrap .item ul li {
    line-height: 1.5rem;
    margin-bottom: 15px;
}
#philosophy .wrap .item ul li span {
    padding-right: 10px;
}
@media (max-width: 768px) {
    #philosophy .wrap .item h3 {
        font-size: 21px;
    }
    #philosophy {
        padding: 60px 0;
    }
}
@media (max-width: 450px) {
    .outline .outline-table {
        margin: 30px auto 0;
    }
    .outline .outline-table tbody th {
        width: 100%;
        padding: 10px 5px 5px;
        border: none;
        display: block;
    }
    .outline .outline-table tbody td {
        width: 100%;
        padding: 0px 5px 13px;
        display: block;
    }
    #philosophy {
        padding: 30px 0 60px;
    }
    #philosophy .wrap .inner {
        padding: 50px 0 15px;
        width: 85%;
    }
    #philosophy .wrap .item {
        margin-bottom: 30px;
    }
    #philosophy .wrap .item h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    #philosophy .wrap .item ul li {
        margin-bottom: 12px;
    }
}
@media (max-width: 350px) {
    .outline .outline-table tbody td br {
        display: none;
    }
}

/* --------------------------------------------------
採用情報ページ
---------------------------------------------------- */

#recruit-page #page-top {
    background-image: url(../images/recruit-header.png);
}
#recruit-page section {
    text-align: center;
    max-width: 980px;
    width: 90%;
    margin: 0 auto 150px;
}
.recruit-table {
    width: 100%;
    margin: 40px auto 60px;
    border-collapse:collapse;
}
.recruit-table tbody {
    text-align: justify;
}
.recruit-table tbody tr {
    margin-bottom: 15px;
}
.recruit-table tbody th {
    width: 25%;
    padding: 15px 10px;
    border-bottom: 2px solid #ffdc35;
    letter-spacing: .02em;
}
.recruit-table tbody td {
    width: 75%;
    border-bottom: 2px solid #0071bc;
    padding: 15px 20px;
}
@media (max-width: 768px) {
    #recruit-page section {
        margin-bottom: 120px;
    }
}
@media (max-width: 450px) {
    #recruit-page section {
        margin-bottom: 100px;
    }
    .recruit-table {
        margin: 30px auto 40px;
    }
    .recruit-table tbody th {
        width: 100%;
        padding: 10px 5px 5px;
        border: none;
        display: block;
    }
    .recruit-table tbody td {
        width: 100%;
        padding: 0px 5px 13px;
        display: block;
    }
}

/* --------------------------------------------------
店舗情報ページ
---------------------------------------------------- */

#shop-list #page-top {
    background-image: url(../images/shop-header.png);
}
#list #list-wrap {
    max-width: 1140px;
    width: 90%;
    margin: auto;
    font-family: 'M PLUS 1p', sans-serif;
}
#list #list-wrap .wrap {
    margin-bottom: 60px;
}
#list #list-wrap .wrap .title {
    text-align: center;
    margin-bottom: 30px;
}
#list #list-wrap #buy-wrap .title h3 {
    background-color: #f98a08;
}
#list #list-wrap #maintenance-wrap .title h3 {
    background-color: #0071bc;
}
#list #list-wrap #support-wrap .title h3 {
    background-color: #51be8a;
}
#list #list-wrap .wrap .title h3 {
    font-size: 32px;
    color: #fff;
    border-radius: 30px;
    letter-spacing: .05em;
}
#list #list-wrap .wrap .inner {
    display: flex;
    justify-content: space-between;
}
#list #list-wrap #maintenance-wrap .inner::after,
#list #list-wrap #support-wrap .inner::after {
    content:"";
    display: block;
    width:31%;
}
#list #list-wrap .wrap .inner .item {
    width: 31%;
}
#list #list-wrap .wrap .inner .item .img {
    margin-bottom: 15px;
}
#list #list-wrap .wrap .inner .item .img img {
    width: 100%;
}
#list #list-wrap .wrap .inner .item .text h4 {
    font-size: 24px;
}
#list #list-wrap .wrap .inner .item .text p {
    font-weight: 600;
    display: inline-block;
    border-radius: 30px;
    padding: 2px 15px;
    color: #fff;
    letter-spacing: .05em;
    font-size: 15px;
}
#list #list-wrap #buy-wrap .inner .item .text p {
    background-color: #f98a08;
}
#list #list-wrap #maintenance-wrap .inner .item .text p {
    background-color: #0071bc;
}
#list #list-wrap #support-wrap .inner .item .text p {
    background-color: #51be8a;
}
.zoomOut img {
    transform: scale(1.1);
    transition: .3s ease-in-out;
}
.zoomOut a:hover img {
    transform: scale(1);
}
.mask {
    display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 20px;
}
@media (max-width: 1024px) {
    #list #list-wrap .wrap .title h3 {
        font-size: 28px;
    }
    #list #list-wrap .wrap .inner .item .text h4 {
        font-size: 20px;
    }
    #list #list-wrap .wrap .inner .item .text p {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    #list #list-wrap .wrap {
        margin-bottom: 30px;
    }
    #list #list-wrap .wrap .title {
        margin-bottom: 20px;
    }
    #list #list-wrap .wrap .title h3 {
        font-size: 20px;
    }
    #list #list-wrap .wrap .inner {
        flex-wrap: wrap;
    }
    #list #list-wrap .wrap .inner .item {
        width: 49%;
        margin-bottom: 20px;
    }
    #list #list-wrap .wrap .inner .item .text h4 {
        font-size: 15px;
        line-height: 1.5em;
        margin-top: 7px;
    }
    #list #list-wrap .wrap .inner .item .text p {
        font-weight: 500;
        padding: 1px 12px;
        font-size: 13px;
    }
    .mask {
        border-radius: 10px;
    }
}
@media (max-width: 450px) {
    #list #list-wrap .wrap {
        margin-bottom: 30px;
    }
    #list #list-wrap .wrap .title h3 {
        font-size: 18px;
    }
    #list #list-wrap .wrap .title {
        margin-bottom: 20px;
    }
    #list #list-wrap .wrap .inner .item {
        width: 48%;
        margin-bottom: 15px;
    }
}

/* --------------------------------------------------
店舗詳細ページ
---------------------------------------------------- */
.shop-page {
    margin-bottom: 0;
}
#minic-page #page-top {
    background-image: url(../images/minic-header.png);
}
#tax-page #page-top {
    background-image: url(../images/tax-header.png);
}
#usedcar-page #page-top {
    background-image: url(../images/398-header.png);
}
#oil-page #page-top {
    background-image: url(../images/oil-header.png);
}
#bankin-page #page-top {
    background-image: url(../images/bankin-header.png);
}
#syaken-page #page-top {
    background-image: url(../images/syaken-header.png);
}
#hoken-page #page-top {
    background-image: url(../images/hoken-header.png);
}
.shop-page .wrap .inner {
    max-width: 1140px;
    width: 90%;
    margin: 0 auto 100px;
}
.shop-page .wrap .inner .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}
.shop-page .wrap .inner .item:nth-child(even) {
    flex-direction: row-reverse;
}
.shop-page .wrap .inner .item:last-child {
    margin-bottom: 0;
}
.shop-page .wrap .inner .item .img img {
    width: 100%;
}
.shop-page .wrap .inner .item .img {
    width: 45%;
}
.shop-page .wrap .inner .item .text {
    width: 50%;
}
.shop-page .wrap .inner .item .text h3 {
    font-family: 'M PLUS 1p', sans-serif;
    font-size: 30px;
    margin-bottom: 10px;
}
.shop-page .wrap .inner .item .text .buy-title {
    color: #f98a08;
}
.shop-page .wrap .inner .item .text .maintenance-title {
    color: #0071bc;
}
.shop-page .wrap .inner .item .text .support-title {
    color: #51be8a;
}
.shop-page .wrap .inner .item .text p {
    text-align: justify;
}
.shop-page .wrap #price-wrap {
    max-width: 980px;
    width: 90%;
    margin: auto;
    text-align: center;
    margin-bottom: 100px;
}
.shop-page .wrap #price-wrap h3 {
    font-size: 30px;
    color: #0071bc;
    margin-bottom: 20px;
}
.shop-page .wrap #price-wrap #price-table {
    max-width: 980px;
    width: 100%;
}
.shop-page .wrap #price-wrap #price-small { 
    margin-bottom: 40px;
    text-align: right;
}
.shop-page .wrap #price-wrap #price-small small {
    font-size: 16px;
}
.shop-page #info-wrap {
    position: relative;
}
.shop-page #info-wrap .info {
    position: absolute;
    background-color: #fff;
    top: 16%;
    right: 5%;
    width: 100%;
    max-width: 400px;
    padding: 35px 30px 20px;
    text-align: center;
    border-radius: 20px;
}
.shop-page #info-wrap .buy-info {
    box-shadow: 15px 15px #f98a08;
}
.shop-page #info-wrap .maintenance-info {
    box-shadow: 15px 15px #0071bc;
}
.shop-page #info-wrap .support-info {
    box-shadow: 15px 15px #51be8a;
}
.shop-page #info-wrap .info dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
}
.shop-page #info-wrap .info dl dt {
    width: 30%;
    padding-bottom: 5px;
    font-weight: 600;
}
.shop-page #info-wrap .info dl dd {
    width: 70%;
    padding-bottom: 5px;
}
.shop-page #info-wrap .info .btn {
    max-width: 350px;
}
@media (max-width: 1024px) {
    .shop-page .wrap .inner .item .text h3,
    .shop-page .wrap #price-wrap h3 {
        font-size: 24px;
        line-height: 1.5em;
    }
}
@media (max-width: 768px) {
    .shop-page #info-wrap {
        margin-bottom: 60px;
    }
    .shop-page .wrap .inner {
        margin: 0 auto 60px;
    }
    .shop-page #info-wrap .info {
        position: relative;
        background: none;
        max-width: 768px;
        width: 90%;
        text-align: center;
        border-radius: 20px;
        box-shadow: none;
        right: auto;
        margin: 30px auto 0;
        padding: 0;
    }
    .shop-page #info-wrap .info dl {
        margin-bottom: 20px;
    }
    .shop-page .wrap .inner .item {
        display: block;
    }
    .shop-page .wrap .inner .item .img {
        width: 100%;
        margin-bottom: 10px;
    }
    .shop-page .wrap .inner .item .text {
        width: 100%;
    }
    .shop-page .wrap #price-wrap #price-small small {
        font-size: 14px;
    }
}
@media (max-width: 450px) {
    .shop-page #info-wrap {
        margin-bottom: 40px;
    }
    .shop-page .wrap .inner {
        margin: 0 auto 40px;
    }
    .shop-page .wrap .inner .item {
        margin-bottom: 40px;
    }
    .shop-page .wrap .inner .item .text h3,
    .shop-page .wrap #price-wrap h3 {
        font-size: 21px;
        margin-bottom: 5px;
    }
    .shop-page .wrap #price-wrap {
        margin-bottom: 40px;
    }
    .shop-page .wrap #price-wrap #price-small small {
        font-size: 12px;
    }
}


/* --------------------------------------------------
プライバシー・ポリシー / サイトについて
---------------------------------------------------- */

#privacy-page #page-top,
#usage-page #page-top {
    background-image: url(../images/company-header.png);
}
#privacy-page .wrap, #usage-page .wrap {
    max-width: 1140px;
    width: 90%;
    margin: 0 auto 100px;
}
#privacy-page .wrap .privacy-list,
#usage-page .wrap .usage-list {
    margin-bottom: 50px;
    text-align: justify;
}
#privacy-page .wrap h4 {
    margin-bottom: 5px;
    color: #0071bc;
}
#usage-page .wrap h3  {
    position: relative;
    border-bottom: 4px solid #0071bc;
    padding-bottom: 10px;
    margin-bottom: 20px;
    letter-spacing: .02em;
    line-height: 1.4em;
}
#usage-page .wrap h3::before {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 6%;
    height: 4px;
    content: '';
    background: #ffdc35;
}
#privacy-page .wrap span {
    padding-right: 5px;
}
#privacy-page .wrap .inner {
    margin-bottom: 60px;
}
#privacy-page .wrap .privacy-sign {
    text-align: right;
}
#usage-page .wrap .usage-list .link {
    margin-top: 10px;
    text-align: left;
}
#usage-page .wrap .usage-list small {
    margin-top: 15px;
    display: inline-block;
    line-height: 1.8em;
}
#usage-page .wrap .usage-list a {
    color: #0071bc;
}

@media (max-width: 768px) {
    #privacy-page .wrap,
    #usage-page .wrap {
        margin: 0 auto 60px;
    }
    #privacy-page .wrap .privacy-list,
    #usage-page .wrap .usage-list {
        margin-bottom: 30px;
    }
}
@media (max-width: 450px) {
    #privacy-page .wrap ,
    #usage-page .wrap {
        margin: 0 auto 40px;
    }
    #privacy-page .wrap .inner {
        margin-bottom: 30px;
    }
    #usage-page .wrap h3::before {
        width: 15%;
    }
}