.fv_style2 { background-image: url(../img/company/fv.jpg); }

.bg_color {  
    background: url(../img/company/bg-pattern.png) repeat center center;
    background-color: #8EA898; 
}

.head_style3 { padding-bottom: 3rem; }
.head_style3 .ttl { font-size: 3rem; }
.head_style3 .icon { width: 2.375rem; }

.co_nav { max-width: 1200px; margin: auto; padding: 3.125rem 0 2rem; }
.co_nav .swiper { padding-bottom: 1rem; }
.co_nav .slide { box-sizing: border-box; width: 240px; border-right: 1px solid #DDDDDD; }
.co_nav .slide:first-child { border-left: 1px solid #DDDDDD; }
.co_nav .slide a { display: block; padding-bottom: 1.5rem; position: relative; }
.co_nav .slide a::after { content: ''; width: 16px; height: 12px; position: absolute; bottom: 6px; margin: auto; left: 0; right: 0; transition: 0.5s;
    background: url(../img/common/arw-down.png) no-repeat bottom center; 
    background-size: 1rem auto;
}
.co_nav .slide a:hover::after { bottom: 0; }
.co_nav .slide a .icon { width: 40px; }
.co_nav .slide a span { display: block; font-size: 1.25rem; padding-top: 0.5rem; }
.co_nav .swiper-scrollbar { bottom: 0; }

.vision { padding: 6.75rem 0; background-image: url(../img/company/bg1.jpg); }
.vision .bg_color { height: 100%; z-index: 0; top: 0; left: 0;
    width: calc(50% + 250px); 
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}
.vision_wrap { padding: 7rem 0 5rem; }
.vision .head_style3 { padding-bottom: 1rem; }
.vision .white_box { margin-bottom: 2rem; padding: 6rem 6% 1.75rem; position: relative; z-index: 1; border-radius: 0.75rem; }
.vision .white_box .head_style4 { margin: 3rem 0; }
.vision .white_box .txt.big { font-size: 1.125rem; line-height: 200%; padding-bottom: 2rem; }
.vision .white_box ul { padding-top: 2rem; }
.vision .white_box ul li { padding: 2rem 1rem; background: url(../img/company/dots.png) repeat-x top center; background-size: auto 2px; }
.vision .white_box ul li img { width: 115px; }
.vision .white_box ul li .content { width: calc(100% - 150px); }
.vision .white_box ul li .content p { line-height: 150%; font-size: 1.75rem; }
.vision .white_box ul li .content .ttl { padding-bottom: 0.5rem; }
.vision .white_box ul li .content .txt span { display: inline; }
.vision .white_box ul li .content p .indent { margin-left: -15px; }
.vision .white_box ul li:first-child { background: none; }

.president { padding: 6rem 0; background-image: url(../img/company/bg2.png); }
.president-img { width: 94%; margin: auto; max-width: 1500px; display: block; box-shadow: 2px 2px 8px 1px #d4d4d4; border-radius: 0.5rem; }
.president-msg { width: 94%; max-width: 915px; margin: auto; }
.president-msg .ttl { padding: 4rem 0 1rem; font-size: 2.5rem; line-height: 180%; }
.president-msg .txt { line-height: 220%; padding-top: 3rem; }
.president-msg .txt.last { padding-top: 1rem; }
.president-msg .txt span { display: inline; font-size: 18px; }

.profile { padding: 7rem 0; }
.profile .white_box { padding: 6rem 5% 2.5rem; }
.profile dl { padding: 2rem 0; border-bottom: 1px solid #DDDDDD; }
.profile dl:first-of-type { border-top: 1px solid #DDDDDD; }
.profile dl dt { width: 200px; padding-left: 1.25rem; position: relative; }
.profile dl dt::before { height: 1.5rem; width: 4px; left: 0; top: 0; bottom: 0; margin: auto; position: absolute; content: ''; border-radius: 2px; display: block; background-color: #417858; }
.profile dl dd { width: calc(100% - 240px); }
.profile dl dt,
.profile dl dd { line-height: 180%; }

.history { padding: 6rem 0; }
.history dl { padding: 1.5rem 0; border-bottom: 1px solid #DDDDDD; }
.history dl:first-of-type { border-top: 1px solid #DDDDDD; }
.history dl dt { width: 75px; font-size: 1.25rem; font-weight: 600; }
.history dl dd { width: calc(100% - 100px); line-height: 180%; }

.access { padding: 6rem 0; background-color: #F4F4F4; }
.access .white_box { padding: 1rem 5% 3rem; }
.access-heading { padding: 1rem 0; }
.access-heading .ttl { padding-left: 1rem; font-size: 1.25rem; line-height: 120%; font-weight: 600; }
.access-heading .ttl::before { width: 4px; border-radius: 2px; height: 100%; left: 0; background: #417858; }
.access-heading.big { padding: 2.5rem 0 1.5rem; }
.access-heading.big .ttl { font-size: 2rem; }
.access-heading2 { padding-bottom: 0.5rem; }
.access-heading2 span { font-size: 14px; display: inline-block; padding-left: 0.25rem; }
.access-heading3 { font-size: 14px; padding: 0.5rem 0 0.25rem; }
.access .map iframe { width: 100%; height: 300px; }
.access .map .address { font-size: 14px; padding-top: 1rem; }
.access .map .btn_wrap { padding: 2rem 0 0; text-align: center; }
.access .map .btn_wrap .icon { width: 18px; margin-right: 0.25rem; }
.access .row { padding-top: 2rem; }
.access .row .txt { font-size: 14px; }
.access .route::before { top: 30px; height: 2px; width: 94%; background-color: #000; left: 0; right: 0; margin: auto; z-index: 0; }
.access .route { display: flex; justify-content: space-between; font-size: 14px; }
.access .route .stop { padding-top: 1rem; position: relative; }
.access .route .stop span { display: block; height: 30px; line-height: 30px; padding: 0 1rem; border-radius: 50px; background-color: #F4F4F4; }
.access .route .travel { position: relative; z-index: 1; }
.access .route .travel .time { display: block; padding-bottom: 1rem; }
.access .route-row2 { margin-top: 1rem; }

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {

    .head_style3 .ttl { font-size: 2.25rem; }
    
    .co_nav { padding: 2.5rem 0 0; }
    .co_nav .slide { width: 220px; }
    .co_nav .slide a .icon { width: 30px; }
    .co_nav .slide a span { font-size: 1rem; }

    .vision { padding: 4rem 0; }
    .vision_wrap { padding: 4rem 0; }
    .vision .white_box { padding: 4rem 4% 1.5rem; }
    .vision .white_box .head_style4 { margin: 1.5rem 0; }
    .vision .white_box .txt.big { font-size: 1rem; padding-bottom: 1rem; }
    .vision .white_box ul { padding: 0; max-width: 640px; margin: auto; }
    .vision .white_box ul li { padding: 1.5rem 0; }
    .vision .white_box ul li img { width: 100px; }
    .vision .white_box ul li .content { width: calc(100% - 130px); }
    .vision .white_box ul li .content p { font-size: 1.25rem; }

    .president { padding: 4rem 0; }
    .president-msg .ttl { font-size: 1.75rem; padding: 3rem 0 0; }
    .president-msg .txt { padding-top: 2rem; }

    .profile { padding: 4rem 0; }
    .profile .white_box { padding: 4rem 4% 2rem; }

    .history { padding: 4rem 0; }

    .access { padding: 4rem 0; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

    .fv_style2 { background-image: url(../img/company/fv-sp.jpg); }

    .head_style3 { padding-bottom: 1.5rem; }

    .co_nav .slide { width: auto; padding: 0 0.75rem; }
    .co_nav .slide a .icon { width: 25px; }
    .co_nav .slide a span { font-size: 1.125rem; }
    .co_nav .slide a::after { width: 12px; height: 6px; }

    .vision_wrap { padding: 2.5rem 0 1.5rem; }
    .vision .bg_color { width: 80%; border-top-right-radius: 2.5rem; border-bottom-right-radius: 2.5rem; }
    .vision .white_box { padding: 3rem 6% 1rem; margin-bottom: 1rem; }
    
    .vision .white_box ul li { padding-top: 2rem; }
    .vision .white_box ul li img { width: 86px; display: block; margin: 0 auto 2rem;  }
    .vision .white_box ul li .content { width: 100%; }
    .vision .white_box ul li .content p { font-size: 1.75rem; line-height: 160%; }
    .vision .white_box ul li .content p .indent { margin-left: -13px; }

    .president-img { width: 100%; border-radius: 0; box-shadow: unset; }
    .president-msg { width: 88%; }
    .president-msg .ttl { font-size: 1.5rem; line-height: 160%; }
    .president-msg .txt { line-height: 180%; }
    .president-msg .txt span { font-size: 1rem; }

    .profile .white_box { padding: 3rem 6% 2rem; }
    .profile .head_style3 { padding-bottom: 2rem; }
    .profile dl { display: block; padding: 1.25rem 0; }
    .profile dl dt,
    .profile dl dd { width: 100%; line-height: 150%; }
    .profile dl dd { padding-top: 0.5rem; }
    .profile dl dt { padding-left: 0.75rem; }
    .profile dl dt::before { height: 1.25rem; width: 3px; }

    .history { padding: 3rem 0 2rem; }
    .history .head_style3 { padding-bottom: 2rem; }
    .history dl { padding: 1rem 0; display: block; }
    .history dl dt,
    .history dl dd { width: 100%; }
    .history dl dd { padding-top: 0.25rem; }

    .access { padding: 3rem 0 2rem; }
    .access-heading.big { padding: 1.5rem 0 0.75rem; }
    .access-heading.big .ttl { font-size: 1.75rem;  }
    .access .map iframe { height: 250px; }
    .access .map .address { font-size: 13px; }
    .access .map .btn_wrap .icon { width: 14px; }

    .access .white_box { padding: 1rem 6% 3rem; }
    .access .row { padding-top: 1.5rem; }
    .access-heading .ttl { font-size: 15px; padding-left: 0.75rem; }
    .access-heading .ttl::before { width: 3px; } 
    .access .route { display: block; text-align: left; }
    .access .route::before { width: 1px; height: 100%; left: 1.5rem; right: auto; top: 0; }
    .access .route .stop { padding: 0; }
    .access .route .stop span { display: inline-block; font-size: 12px; }
    .access .route .travel { font-size: 12px; padding: 1rem 0; padding-left: 2.5rem; }
    .access .route .travel .time { padding: 0; }
    .access .route .stop span { height: 25px; line-height: 25px; }
}