@charset "UTF-8";

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    color:#333;
}

/* Common */
html {
    scroll-behavior: smooth;
}
body {
    min-width:1024px;
    padding-top:120px;
    position:relative;
}
.flxbox {
    display: flex;
}
.row {
    margin:0 auto;
    padding:0 32px;
    width:960px;
}
p.regl {
    font-size:clamp(14px,1.67vw,16px);
    font-weight:400;
    line-height: 1.6;
    letter-spacing: .04em;
    text-align: justify;
}
p.leadCopy {
    font-size: clamp(15px,1.88vw,18px);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .04em;
    text-align: justify;
}
a {
    transition:.5s;
}

/* Animation */
/* 下から */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 1.2s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }


/* Header */

header {
    width:100%;
    height:120px;
    position:fixed;
    top:0;
    left:0;
    background-color: #fff;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
    z-index: 100;
}
header .flxbox {
    height:100%;
    align-items: center;
}
.logoHeader {
    margin-right:auto;
    padding-left:20px;
}
.logoHeader img {
    width:clamp(160px,25vw,240px);
}
header nav ul.menu {
    padding-right:40px;
    display: flex;
    gap:48px;
}
header nav ul.menu li a {
    padding:2px 0px 2px 16px;
    color:#888;
    font-size:clamp(14px,1.56vw,15px);
    font-weight: 400;
    letter-spacing: .1em;
    border-left:4px solid #00A0E9;
    transition:.2s;
}
header nav ul.menu li a:hover {
    color:#000;
    padding:8px 0px 8px 16px;
}

/* Main Visual */
section.sectMV {
    width:100%;
    height:auto;
    background-image: url(../images/img_bg_mv.jpg);
    background-size: cover;
}
.sloganArea {
    height:calc(100vh - 120px);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sloganArea h1 {
    color: #fff;
    font-size:44px;
    font-weight:700;
    line-height: 1.4;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
}
.sloganArea h1 span {
    margin-top:12px;
    display:block;
    color:#333;
    font-size:18px;
    font-weight:400;
    letter-spacing:.1em;
    text-shadow: none;
}
.philosophy {
    margin-top:-200px;
    padding-top:200px;
    margin-bottom:72px;
}
.philosophy h3 {
    margin-bottom:1em;
    font-size:24px;
    font-weight: 700;
    text-align: center;
}
.philosophy p {
    width:640px;
    margin:0 auto;
}
.details {
    padding-bottom:128px;
    display: flex;
    gap:36px;
}
.details li {
    flex-basis: calc((100% - 72px)/ 3);
}
.details li a {
    width:100%;
    height:56px;
    background-color:#fff;
    display: flex;
    color:#004098;
    font-size: clamp(16px,2.08vw,20px);
    font-weight:700;
    letter-spacing: .1em;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.2));
}
.details li a::before {
    width:4px;
    height: 24px;
    content: '';
    background-color: #00A0E9;
    position: absolute;
    left:16px;
    top:50%;
    transform: translateY(-50%);
}
.details li a:hover {
    background-color: #00A0E9;
    color: #fff;
}
.details li a:hover::before {
    background-color: #fff;
}


.sect_detail {
    padding-top:120px;
    margin-top:-120px;
}
.sect_detail .flxbox .col {
    flex-basis: 50%;
}
.sect_detail .flxbox .col.imgCol img {
    width:100%;
    min-height: 544px;
    object-fit: cover;
}
.sect_detail .flxbox .col.copyCol {
    display: flex;
    align-items: center;
}
.sect_detail .flxbox .col.copyCol .copyBlock {
    width:420px;
}
.sect_detail.copyRight .flxbox .col.copyCol {
    padding-left:60px;
    justify-content: flex-start;
}
.sect_detail.copyLeft .flxbox .col.copyCol {
    padding-right:60px;
    justify-content: flex-end;
}
.sect_detail .flxbox .col.copyCol h2 {
    font-size:clamp(20px,3.3vw,32px);
    font-weight:700;
    line-height: 1.4;
    color: #004098;
    margin-bottom:54px;
}
h3.detailTtl {
    margin-bottom:24px;
    padding:16px 0 16px 24px;
    font-size:clamp(18px,2.5vw,24px);
    font-weight:400;
    letter-spacing: .1em;
    border-left:6px solid #00A0E9;
}
.sect_detail .imgBox img {
    width: calc(100% /5);
    height:auto;
}

/* あわび */
.sect_detail#sect03 {
    padding-bottom:110px;
    background-image: url(../images/img_sect03_bg.jpg);
    background-size: cover;
    background-color: rgba(30, 144, 255, .3);
    background-blend-mode: multiply;
}
.whiteBox {
    margin-top:110px;
    padding:48px;
    background-color: rgba(255, 255, 255, .9);
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,.4));
}
.sect_detail#sect03 h2 {
    font-size:clamp(20px,3.3vw,32px);
    font-weight:700;
    line-height: 1.4;
    color: #004098;
    margin-bottom:54px;
    text-align: center;
}
.sect_detail#sect03 .col .flxbox {
    margin-top:12px;
    justify-content: space-between;
}
.sect_detail#sect03 .row > .flxbox {
    gap:64px;
}

/* Button */
a.btnA {
    max-width:320px;
    height: 40px;
    margin-top:24px;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    color: #fff;
    font-size:clamp(15px,1.88vw,18px);
    font-weight: 700;
    letter-spacing: .1em;
    background-color: #00A0E9;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}
a.btnA:hover {
    background-color: #004098;
}


/* Company */
section.company {
    padding:100px 0;
}
section.company .mapArea {
    margin-bottom:72px;
}
section.company .companyOverveiw {
    width:640px;
    margin:0 auto;
}
section.company .companyOverveiw h3 {
    font-size:18px;
    font-weight:500;
    letter-spacing:.1em;
    margin-bottom:1.5em;
}
.companyOverveiw table {
    width:100%;
}
.companyOverveiw table tr th, .companyOverveiw table tr td {
    padding:.8em .2em;
    border-bottom:thin solid #ddd;
    font-size: clamp(14px,1.56vw,15px);
    line-height: 1.6;
}
.companyOverveiw table tr th {
    color: #004098;
}


footer .contact {
    padding:100px 0;
    background: linear-gradient(#ddd, #f2f2f2);
    text-align: center;
}
footer .contact img {
    margin-bottom:20px;
}
footer .contact p.adress {
    font-size: clamp(14px,1.67vw,16px);
    letter-spacing: .06em;
    margin-bottom:40px;
    line-height: 1.6;
}
footer .absoluteFooter {
    padding:20px;
    font-size:clamp(13px,1.56vw,15px);
    text-align: center;
}

/* Mobile Common */
@media screen and (max-width:1024px) {
    body {
        min-width:auto;
    }
    .row {
        width:92vw;
        padding:0;
    }
    .philosophy p {
        width: 100%;
    }
    .whiteBox {
        padding:5VW;
    }
}

/* Tablet Size */

@media screen and (max-width:1024px) and (min-width:768px) {
    .sect_detail.copyRight .flxbox .col.copyCol {
        padding-left: 0;
    }
    .sect_detail .flxbox .col.copyCol .copyBlock {
        width: 42vw;
        margin:0 auto;
    }
    .sect_detail.copyLeft .flxbox .col.copyCol {
        padding-right: 0;
        justify-content: flex-end;
    }
    .sect_detail#sect03 .row > .flxbox {
        gap: 4VW;
    }
    .sect_detail .flxbox .col {
        flex-basis: 50%;
    }
    .sect_detail#sect03 iframe {
        width:38.5vw;
    }
    .sect_detail#sect03 .flxbox .col .flxbox img {
        width: calc((38.5vw - 8px)/ 2);
    }
    section.company .companyOverveiw {
        width: 100%;
        margin: 0 auto;
    }
    header nav ul.menu {
        gap:3vw;
        padding-right:3vw;
    }
}

/* SP Size */

@media screen and (max-width:767px) {
    body {
        padding-top:0;
    }
    header {
        width: 100%;
        height: 22vw;
    }
    header .flxbox {
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .logoHeader {
        margin-right: auto;
        margin-left:auto;
        padding-left: 0;
    }
    header nav {
        display:none;
    }
    .sloganArea {
        height: 160vw;
    }
    .details {
        padding-bottom: 10vw;
        gap: 4vw;
        flex-direction: column;
    }
    .sect_detail.copyRight > .flxbox {
        flex-direction: column-reverse;
    }
    .sect_detail.copyLeft > .flxbox {
        flex-direction: column;
    }
    .sect_detail .flxbox .col.copyCol .copyBlock {
        width: 100%;
    }
    .sect_detail .flxbox .col.imgCol img {
        width: 100%;
        min-height: auto;
        object-fit: cover;
    }
    .sect_detail.copyRight .flxbox .col.copyCol, .sect_detail.copyLeft .flxbox .col.copyCol {
        padding: 10vw 4vw;
    }
    .sect_detail > .flxbox.imgBox {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sect_detail > .flxbox.imgBox img:nth-child(5) {
        display:none;
    }
    .sect_detail > .flxbox.imgBox img {
        flex-basis: 50%;
    }
    .sect_detail#sect03 .row > .flxbox {
        gap: 6vw;
        flex-direction: column;
    }
    .sect_detail#sect03 iframe {
        width:100%;
    }
    .sect_detail#sect03 .flxbox .col .flxbox img {
        width: calc((100% - 8px)/ 2);
    }
    section.company .companyOverveiw {
        width: 100%;
        margin: 0 auto;
    }
    .companyOverveiw table tr th, .companyOverveiw table tr td {
        display: block;
    }
    footer .contact {
        padding: 20vw 4vw;
    }
    footer .contact img {
        width:60vw;
    }
}