@charset "UTF-8";
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
html, body {font-size:16px;font-family: 'Noto Sans JP', sans-serif;}

html {scroll-behavior: smooth;}
body {color:#333;position:relative;}
p {line-height:1.78;font-weight:300;}
br.spOnly {display:none;}

/* btn */
ul.btnAreaMv {margin:0;padding:0;list-style:none;display:flex;justify-content: center;}
ul.btnAreaMv li {margin:.4em;}
ul.btnAreaMv li a {height:40px;width:12em;color:#fff;font-size:1rem;font-weight:700;letter-spacing:.1em;text-decoration:none;display:flex;justify-content: center;align-items: center;border-radius: 20px;}
ul.btnAreaMv li.btnShop a {background-color:#00942C;}
ul.btnAreaMv li.btnContact a {background-color:#0088DB;}
ul.btnAreaMv li.btnShop a:hover, ul.btnAreaMv li.btnContact a:hover {background-color:#aaa;}
a.btnPagetop {position:fixed;bottom:1em;right:1em;opacity:0.5;z-index:40;}
a.btnPagetop:hover {opacity: 1;}
ul.btnAreaMv li.btnPdf a {background-color:#ED6B00;}
ul.btnAreaMv li.btnPdf a:hover{background-color:#aaa;}
ul.btnAreaPdf{flex-direction: column;align-items:center;}
ul.btnAreaPdf li.btnPdf a{width: 100%; padding: 0 10px;}

/* top MV */
#mvTop {width:100%;height:33vw;min-height:500px;
    padding-top: 100px;
    background:#FBFBFB url(../images/mv_top_pc@2x.jpg) no-repeat left center / contain;display:flex;justify-content: flex-end;align-items: center;}
#mvTop .wrapperMvPC {padding-right:12vw;text-align: center; margin-right: 15px; margin-left: 15px;}
#mvTop .wrapperMvPC h2 {margin-bottom:1.6em;font-size:1.625rem;color:#F38200;font-weight:700;letter-spacing:.2em;line-height:1.7;}
#mvTop .wrapperMvPC h1 {margin-bottom:.6em;}
.top-privacy-link {display: inline-block; margin: 20px 0; color: #0088DB; background-color: rgba(255, 255, 255, 0.568); font-size: 14px;}

/* Concept */
#concept {padding:4em 0;color:#fff;background-color:#F59A32;}
#concept .wrapper {width:480px;margin:0 auto;}
#concept .wrapper h3 {margin-bottom:.8em;font-size:1.25rem;font-weight:700;letter-spacing:.1em;}
#concept .wrapper p {margin-bottom:1.4em;font-weight:400;}
#concept .wrapper .btnContinue a {width:338px;height:40px;margin:0 auto;color:#fff;font-size:1rem;font-weight:500;text-decoration:none;display:flex;border:thin solid #fff;border-radius:20px;justify-content: center;align-items: center;}
#concept .wrapper .btnContinue a i {margin-left:.6em;margin-bottom:-.4em;}
#concept .wrapper .btnContinue a:hover {background-color:rgba(255,255,255,.4);}

/* Business */
#business h3 {padding:.8em 0;text-align:center;color:#F38200;font-size:1.25rem;font-weight:700;letter-spacing: .2em;}
ul.listBusiness {display:flex;flex-wrap: wrap;list-style:none;}
ul.listBusiness li.colPC6 {width:50%;}
ul.listBusiness li.colPC4 {width : calc(100% / 3) ;}
ul.listBusiness li {position:relative;}
ul.listBusiness li img {width:100%;height:22vw;min-height:304px;object-fit: cover;vertical-align: bottom;}
ul.listBusiness li h4 {width:100%;padding:1.2em 0;font-size:1.125rem;font-weight:500;text-align:center;color:#000;letter-spacing:.1em;background-color:rgba(255,255,255,.8);position:absolute;left:0;bottom:0;}

/* Branch */
section.yellowBc {padding:4em 0;background-color:#FAEBBF;position:relative;z-index:1;}
ul.shopList {width:970px;margin:3em auto;list-style:none;}
ul.shopList li {margin-top:2.25em;padding:24px;display: flex;background-color:#fff;box-shadow: 1px 1px 6px rgba(0,0,0,0.2);}
ul.shopList li .shopPhoto {margin-right:32px;}
ul.shopList li .shopInfor h4 {margin-bottom:.8em;margin-top:-.3em;font-size:1.25rem;font-weight:700;color:#0088DB;}
ul.shopList li .shopInfor table {width:100%;margin-bottom:.8em;border-top:thin dotted #707070;}
ul.shopList li .shopInfor table th, ul.shopList li .shopInfor table td {border-bottom:thin dotted #707070;vertical-align: middle;}
ul.shopList li .shopInfor table th {padding-left:.2em;font-size:.875rem;font-weight:400;}
ul.shopList li .shopInfor table td {padding:.6em 1em;font-size:1rem;font-weight:300;}
ul.shopList li .shopInfor table td i a {width:72px;height:20px;text-decoration: none;color: #0088DB;font-size:.625rem;font-style:normal;font-weight:700;display:flex;justify-content: center;align-items: center;border:thin solid #0088DB;border-radius: 10px;}
ul.shopList li .shopInfor table td i a:hover {background-color:#0088DB;color:#fff;cursor: pointer;}
ul.shopList li .shopInfor table td a {text-decoration: none; color: #0088DB;}
p.comentShop {font-size:.875rem;}
h3.secTitNom {padding:2em 0;text-align: center;font-size:1.25rem;font-weight:700;letter-spacing:.1em;position:relative;}
h3.secTitNom::before {width:90px;height:90px;margin-left:-45px;margin-top:-45px;content:'';position:absolute;top:50%;left:50%;background-color:#fff;border-radius: 45px;z-index:-1;}

/* Agent */
#agent .wrapper {width:640px;margin:0 auto;}
#agent .wrapper ul.agentList {padding:3em 0;list-style:none;}
#agent .wrapper ul.agentList li {margin-bottom:1.6em;}
#agent .wrapper ul.agentList li h4 {margin-bottom:.6em;padding:.3em 0;font-size:.875rem;font-weight:700;color:#0088DB;text-align: center;border-bottom:thin solid #0088DB;border-top:thin solid #0088DB;}
#agent .wrapper ul.agentList li p {font-size:1rem;text-align: center;}
#agent .wrapper .disclosure-btn { padding: 4px 10px; background-color:#FAEBBF; color: #0088DB; text-decoration: none; border: #0088DB solid 1px; border-radius: 5px;}
#agent .wrapper .disclosure-btn:hover { background-color: #0088DB; color: #fff; transition: 0.3s;}

/* to Form */
#toForm {padding:4em 0;background-color:#F59A32;text-align: center;}
#toForm h3 {margin-bottom:1em;font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:.1em;}

/* News */
#news {padding:4em 0;text-align:center;background-color:#f2f2f2;}
#news h3 {margin-bottom:2em;font-size:1.25rem;font-weight:700;}
ul.newsList {margin-bottom:2.4em;list-style:none;}
ul.newsList li {margin-top:1.2em;}
ul.newsList li .date {font-size:.875rem;color:#0088DB;}
.btnNews a {text-decoration:none;color:#333;font-size:.875rem;}
.btnNews a i {margin-left:.4em;vertical-align: middle;}

/* Message */
#message {padding:6em 0;}
#message .wrapper {width:640px;margin:0 auto;}
#message .wrapper h3 {margin-bottom:2em;text-align:center;letter-spacing:.2em;font-size:1.25rem;font-weight: 700;}
#message .wrapper .messageCopy p {line-height: 2;}
#message .wrapper .messageCopy p.president {margin-top:2em;}

/* Philosophy */
#philosophy .wrapper {width:720px;margin:2em auto;padding:2em 0;text-align:center;background-color:rgba(255,255,255,.8);box-shadow: 1px 1px 6px rgba(0,0,0,0.2);}
section.greenBc {padding:4em 0;background-image: url(../images/base_green.jpg);background-size:cover;position:relative;z-index:-2; background-attachment: fixed;}
ul.listPhilosop {width:56%;margin:0 auto;list-style:none;}
ul.listPhilosop li {padding:.6em 0;border-bottom:thin dotted #707070;}
ul.listPhilosop li p, .philosopCont p {font-size:.875rem;}
#philosophy .wrapper h4 {margin-bottom:1.4em;font-size:.875rem;font-weight:500;color:#0088DB;letter-spacing:.2em;}
#philosophy .wrapper h5 {margin-bottom:.2em;font-size:1.25rem;font-weight:300;line-height: 1.6;}
.philosopCont {margin:4em 0;}

/* Vision */
#vision {padding: 6em 0;color: #333;}
#vision .wrapper {width:720px;margin:0 auto;padding:0.5em 4em 4em;box-sizing: border-box;}
#vision .vision-container {max-width: 550px;margin: 0 auto;}
#philosophy #vision .wrapper h4 {text-align:left;margin-top:4em;margin-bottom: 1.4em;color: #0088DB;}
#philosophy #vision .wrapper ol {padding-left: 2em;margin-bottom: 1em;list-style: none;text-align: left;}
#philosophy #vision .wrapper ul {padding-left: 1.5em;margin-bottom: 1em;text-align: left;}
#philosophy #vision .wrapper ul li {list-style: disc;}
#philosophy #vision .wrapper li {line-height:2;position: relative;text-align: left;}
#philosophy #vision .wrapper ol .list-number {position: absolute;left:-2.5em;top:.7em;font-size:12px;border:1px solid #333;border-radius:50%; display:flex;align-items: center;justify-content:center;width: 16px;height:16px;}

/* Profile */
#profile {padding:3em 0;background-color:#f2f2f2;}
#profile .wrapper {width:970px;margin:0 auto;display:flex;justify-content: space-between;}
#profile .wrapper .mapArea iframe {margin-bottom:1em;border:thin solid #ddd;}
#profile .wrapper .inforArea h4 {margin-bottom:.8em;font-size:.875rem;font-weight:500;color:#0088DB;letter-spacing: .1em;}
#profile .wrapper .inforArea .company {margin-bottom:2em;}
.companyInfo table {width:496px;margin-bottom:3em;border-top:1px dotted #0088DB;}
.companyInfo table tr th, .companyInfo table tr td {font-size:.875rem;text-align: left;border-bottom:thin dotted #0088DB;}
.companyInfo table tr th {padding:.6em 1em;font-weight:400;letter-spacing:.1em;}
.companyInfo table tr td {font-weight:300;}

/* Footer */
footer .footerBtt {padding:.8em;color:#fff;font-size:.875rem;text-align:center;background-color:#0088DB;}


/* 新着情報スクロールCSS */

.add-news-content{
    width: 640px;
    height: 700px;
    margin: auto;
    overflow-y: scroll;
    overflow-x: hidden;
}
.add-news-content::-webkit-scrollbar {
    height: 10px;
    width: 5px;
}
.add-news-content::-webkit-scrollbar-thumb {
    background-color: #F59A32;
    border-radius: 10px;
} 
.add-news-content::-webkit-scrollbar-track {
    background-color: #ccc;
    border-radius: 10px;
}
.newsList{
    width: 640px;
    margin: auto;
}
.newsList .title{
    font-weight: bold;
}
.add-news p{
    text-align: left;
}

.iso,.iso-2{
    width: 95px;
    height: auto;
    margin: 10px 0 0 25px;
}
.iso{
    position: relative;
    left: 10px;
}
ul.btnAreaPdf-2,ul.btnAreaPdf-3 {
    flex-direction: row;
    margin-bottom: 0;
    justify-content: space-between;
}

ul.btnAreaPdf-3{
    width: 200px;
    margin: auto auto 40px auto;
}
ul.btnAreaPdf-2 li a {
    height: 40px;
    width: 12em;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    position: relative;
    top: 5px;
}

#add-content{
    width: 100%;
    height:auto;
    background-image: url(../images/bg.png);
    background-repeat: repeat;
}
.add-c-inner{
    width: 850px;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 40px 0 30px 0;
}

.a-c-in-box,.a-c-in-box-2{
    width: 350px;
    height: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fff;
    border: solid #ED6B00 2px;
    border-radius: 10px;
}
.a-c-in-box p a,.a-c-in-box-2 p a{
    color: #fff;
    background: #ED6B00;
    font-weight: bold;
    display: block;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    text-decoration: none;
    font-size: 16px;
    padding: 35px 18px 36.5px 17px;

}
.a-c-in-box-2 p a{
    padding: 35px 70px 36.5px 70px;
}
.a-c-in-box a img,.a-c-in-box-2 a img{
    display: block;
    padding: 12px 10px 13px 12px;
    position: relative;
    right: 1px;
}
.a-c-in-box-2 a img{
    width: 90px;
    padding: 5px 15px 5px 14px;
}

.a-c-in-box p a:hover,.a-c-in-box-2 p a:hover{
    background: #F59A32;
    border-bottom-left-radius:6px;
    border-top-left-radius:6px;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
}

.hover-on{
    background: #F59A32!important;
    border-bottom-left-radius:100px;
    border-top-left-radius:100px;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
}




/*　Tablet 　*/
@media screen and (min-width:480px) and ( max-width:1023px) {
    html, body {font-size:15px;}
    main {overflow: hidden;}
    #mvTop {width:100%;height:64vw;min-height:600px;background:#FBFBFB url(../images/mv_top_pc@2x.jpg) no-repeat left bottom / 72vw auto;}
    #mvTop .wrapperMvPC {padding-right:2vw;margin-top:-6em;}
    ul.shopList {width:96vw;}
    ul.shopList li .shopPhoto img {width:30vw; height:auto;}
    #profile .wrapper .inforArea {width:70vw;margin:2em auto;}
    .companyInfo table {width:100%;}
    #profile .wrapper {width:96vw;flex-direction: column;justify-content: center;}
    #profile .wrapper .mapArea {margin-bottom:3em;}
    #profile .wrapper .mapArea iframe {width:100%;height:48vw;}
    #vision .wrapper {width:90vw;max-width: 720px;}

    .add-news-content{
        width: 90%;
        height: 500px;
        margin: auto;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .add-news-content::-webkit-scrollbar {
        height: 10px;
        width: 5px;
    }
    .add-news-content::-webkit-scrollbar-thumb {
        background-color: #F59A32;
        border-radius: 10px;
    } 
    .add-news-content::-webkit-scrollbar-track {
        background-color: #ccc;
        border-radius: 10px;
    }
    .newsList{
        width: 90%;
        margin: auto;
    }
    .newsList .title{
        font-weight: bold;
    }
    .add-news p{
        text-align: left;
    }

    .iso,.iso-2{
        width: 95px;
        height: auto;
        margin: 10px 0 0 25px;
    }
    .iso{
        position: relative;
        left: 10px;
    }
    ul.btnAreaPdf-2 {
        flex-direction: row;
        margin-bottom: 0;
        justify-content: space-between;
    }
    ul.btnAreaPdf-2 li a {
        height: 40px;
        width: 12em;
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        position: relative;
        top: 5px;
    }


}

/* Mobile */
@media screen and (max-width: 479px) {
    html, body {font-size:14px;}
    main {overflow: hidden;}
    br.spOnly {display:block;}
    ul.btnAreaMv {flex-direction: column;}
    ul.btnAreaMv li {margin:.4em -.2em;}
    #mvTop .wrapperMvPC {margin-top:1em;padding-right:0;text-align: left;position:relative;}
    #mvTop .wrapperMvPC h2 {margin-bottom:.6em;padding-top:12vw;}
    #mvTop .wrapperMvPC h1 {position:absolute;top:0;left:0;}
    #mvTop .wrapperMvPC h1 img {width:56vw;height:auto;}

    #mvTop {
        width:100%;
        height:124.8vw;
        padding-top: 0!important;
        background:#f7f5f6 url(../images/mv_top_sp@2x.jpg) no-repeat left top / contain; 
        justify-content:center;align-items:flex-start;
        background-position: bottom;
    }

    #concept {padding:2em 0;}
    #concept .wrapper {width:90vw;}
    ul.listBusiness li img {height:67vw;min-height:inherit;}
    ul.shopList {width:90vw;}
    ul.listBusiness li.colSP12 {width:100%;}
    ul.shopList li {flex-direction: column-reverse;}
    ul.shopList li .shopPhoto img {width:100%; height:auto;}
    ul.shopList li .shopPhoto {margin-right:0;margin-top:2em;}
    ul.shopList li .shopInfor table th {padding:.2em 1em;}
    ul.shopList li .shopInfor table th, ul.shopList li .shopInfor table td {display:block;}
    ul.shopList li .shopInfor table td.adress {padding-bottom:0;border-bottom:none;}
    #profile .wrapper {width:90vw;flex-direction: column;justify-content: center;}
    #message .wrapper {width:90vw;}
    #philosophy .wrapper {width:90vw;}
    #philosophy .wrapper .philosopCont {width:90%;margin-left:auto;margin-right:auto;}
    ul.listPhilosop {width:100%;}
    #agent .wrapper {width:90vw;}
    #toForm ul.btnAreaMv li a, #profile ul.btnAreaMv li a  {margin:0 auto;}
    .companyInfo table {width:100%;}
    #profile .wrapper .mapArea {margin-bottom:3em;}
    #profile .wrapper .mapArea iframe {width:100%;height:48vw;}
    #agent .wrapper ul.agentList li p {text-align: left;}
    ul.agentList li p br {display:none;}
    .companyInfo table tr th, .companyInfo table tr td {display:block;}
    .companyInfo table tr td {padding:.4em 1.4em;}
    .companyInfo table tr th {padding:.4em .4em;}
    #vision .wrapper {width:90vw;}
    ul.btnAreaPdf li.btnPdf a {font-size: 12px;}

    .add-news-content{
        width: 90%;
        height: 500px;
        margin: auto;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .add-news-content::-webkit-scrollbar {
        height: 10px;
        width: 5px;
    }
    .add-news-content::-webkit-scrollbar-thumb {
        background-color: #F59A32;
        border-radius: 10px;
    } 
    .add-news-content::-webkit-scrollbar-track {
        background-color: #ccc;
        border-radius: 10px;
    }
    .newsList{
        width: 90%;
        margin: auto;
    }
    .newsList .title{
        font-weight: bold;
    }
    .add-news p{
        text-align: left;
    }



    .iso,.iso-2{
        width: calc(100 *(100vw/750));
        height: auto;
        margin:calc(15 *(100vw/750)) auto;
        display: block;
        position: relative;
    }
    .iso{
        position: relative;
        left: calc(35 *(100vw/750));
    }
    ul.btnAreaPdf-2,ul.btnAreaPdf-3{
        width:  calc(620 *(100vw/750));
        flex-direction: row;
        margin-bottom:  calc(0 *(100vw/750));
        justify-content: space-between;
        position: relative;
        left: calc(30 *(100vw/750));
    }

    ul.btnAreaPdf-3{
        width: calc(200 *(100vw/750));
        position: relative;
        left: calc(-20 *(100vw/750));

    }

    ul.btnAreaPdf-2 li a {
        height: 40px;
        width: 12em;
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        position: relative;
        top: 0px;
    }

    #add-content{
        width:calc(750 *(100vw/750));
        height:auto;
        background-image: url(../images/bg.png);
        background-repeat: repeat;
    }
    .add-c-inner{
        width: calc(650 *(100vw/750));
        height: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding:calc(40 *(100vw/750)) 0 calc(0 *(100vw/750)) 0;
    }
    
    .a-c-in-box,.a-c-in-box-2{
        width: calc(640 *(100vw/750));
        height: calc(150 *(100vw/750));
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        background: #fff;
        border: solid #ED6B00 2px;
        border-radius: calc(10 *(100vw/750));
        margin-bottom: calc(60 *(100vw/750));
    }
    .a-c-in-box p a,.a-c-in-box-2 p a{
        color: #fff;
        background: #ED6B00;
        font-weight: bold;
        display: block;
        border-bottom-left-radius:10px;
        text-decoration: none;
        font-size: calc(29 *(100vw/750));
        border-radius: 0px;
        position: relative;
        left: calc(-2 *(100vw/750));
        top: calc(-2 *(100vw/750));
        padding: calc(48 *(100vw/750)) calc(35 *(100vw/750)) calc(53 *(100vw/750)) calc(35 *(100vw/750));
    }
    .a-c-in-box-2 p a{
        padding: calc(48 *(100vw/750)) calc(126 *(100vw/750)) calc(53 *(100vw/750)) calc(126 *(100vw/750));
    }
    .a-c-in-box a img,.a-c-in-box-2 a img{
        width:calc(160 *(100vw/750));
        display: block;
        padding: calc(12 *(100vw/750)) calc(10 *(100vw/750)) calc(13 *(100vw/750)) calc(12 *(100vw/750));
        position: relative;
        right:calc(20 *(100vw/750));
        top: calc(2 *(100vw/750));
    }
    .a-c-in-box-2 a img{
        width:calc(130 *(100vw/750));
        padding: calc(5 *(100vw/750)) calc(25 *(100vw/750)) calc(5 *(100vw/750)) calc(14 *(100vw/750));
    }
}