body{
    margin: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-family: 'Zen Maru Gothic', serif;
}
#header{
    background-color: white;
    position: fixed;z-index: 10;
    top: 0;
    width: 100%;
}
.corporation{
    background-color: #004f82;
}
.corporation:hover{
    background-color: #002c4a;
}
.top-contact{
    background-color: #0074bf;
}
.top-contact:hover{
    background-color: #005085;
}
#motto-x,#motto-y{
    color: #0074bf;
    background-color: white;
}
.title a{
    display: block;
    text-decoration: none;
    color: #0074bf;
}
#motto-x,#motto-y{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
}
.title{
    margin: 0;
}
.catch-copy,.adress{
    font-size: 10px;
    margin: 0;
    margin: 8px 0;
}
.tel{
    font-size: 12px;
}
.telphone{
    font-size: 25px;
    margin: 0;
}
.corporation,.top-contact{
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    transition: .3s;
    width: 200px;
    line-height: 30px;
    transition: .3s;
}
.corporation,.top-contact{
    width: 200px;
    text-align: center;
}
.corporation::before{
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(clean/corporation.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 3px;
}
.top-contact::before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(clean/mailwhite.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 5px;
}
#menu{
    padding: 0;
    margin: 0;
}
.list a{
    display: block;
    text-decoration: none;
    color: black;
    transition: .3s;
}
.list a:hover{
    color: rgb(123, 123, 123);
}
.list{
    list-style: none;
}
#motto,.sub-motto{
    margin: 0;
}
@media(min-width:1140px){
    #h{
        margin: 10px;
    }
    #h{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .top{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 5px;
    }
    #menu{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .list a{
        line-height: 60px;
    }
    #header{
        padding-top: 5px;
    }
    #menuButton{
        display: none;
    }
}
@media(max-width:1139px){
    #menuButton{
        position: fixed;z-index: 15;
        width: 80px;
        height: 80px;
        top: 0;
        right: 0;
        background-color: #0074bf;
        transition: .3s;
    }
    #menuButton div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-23px);
        left: 50%;
        width: 60%;
        height: 1px;
        transition: .3s;
        background-color: white;
    }
    #menuButton div:nth-child(1){
        transform: translate(-23px,-20px);
    }
    #menuButton div:nth-child(2){
        transform: translate(-23px,0px);
    }
    #menuButton div:nth-child(3){
        transform: translate(-23px,20px);
    }
    #menuButton.active div:nth-child(1){
        transform: rotate(45deg) translateX(-23px);
        transform-origin: left;
    }
    #menuButton.active div:nth-child(2){
        opacity: 0;
    }
    #menuButton.active div:nth-child(3){
        transform: rotate(-45deg) translateX(-23px);
        transform-origin: left;
    }
    .catch-copy,.adress,.corporation,.top-contact,.telphone{
        display: none;
    }
    #header{
        height: 80px;
    }
    .title a{
        line-height: 80px;
    }
    .title{
        margin: 0;
    }
    #menu{
        position: fixed;
        z-index: 12;
        top: 80px;
        right: 0;
        left: 0;
        text-align: center;
        transition: .3s;
        opacity: 0;
        visibility: hidden;
        height: 0;
    }
    #menu.active{
        opacity: 1;
        visibility: visible;
        height: auto;
    }
    .list a{
        padding: 20px;
        background-color: white;
        color: #0074bf;
        transition: .3s;
    }
    .list a:hover{
        color: white;
        background-color: #0074bf;
    }
    
}
/**/
#main-visual{
    position: relative;
    width: 100%;
    height: 650px;
    z-index: -2;
}
#main-visual::after{
    content: "";
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color:rgba(0, 0, 0, 0.2);
    position: absolute;
}
#main-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#motto-x,#motto-y{
    background-color: white;
    border-radius: 10px;
    position: absolute;
    z-index: 3;
}
.sub-motto{
    color: white; 
    z-index: 3;
    position: absolute;
}
@media(max-width:599px){
    #motto-x,#motto-y{
        font-size: 25px;
        padding: 10px 20px;
        left: 0;right: 0;
        text-align: center;
    }
    #motto-x{
        top: 35%;
        width: 80%;
        margin: 0 auto;
    }
    #motto-y{
        top: 46%;
        width: 35%;
        margin: 0 auto;
    }
    .sub-motto{
        left: 0;right: 0;
        text-align: center;
        top: 58%;
        line-height: 30px;
        margin-right: 10px;
        margin-left: 10px;
    }
}
@media(min-width:600px){
    #motto-x,#motto-y{
        font-size: 40px;
        padding: 15px 30px;
    }
    #motto-x{
        top: 35%;
        left: 10%;
    }
    #motto-y{
        top: 50%;
        left: 10%;
    }
    .sub-motto{
        left: 10%;
        top: 75%;
        width: 40%;
        text-align: left;
        line-height: 30px;
    }
    .sub-motto::before{
        content: "";
        display: inline-block;
        width: 60px;
        height: 1px;
        background-color: white;
        vertical-align: middle;
        margin-right: 5px;
    }
}
/*banner1*/
@media(max-width:1139px){
    #banner1{
        margin: 80px 10px 0 10px;
    }
    #b1{
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }
    .b1-copy{
        color: #d5bc8a;
        position: relative;
        font-weight: bold;
    }
    .b1-copy::after{
        content: "|";
        display: block;
        position: absolute;
        width: 140px;
        top: 0;
        right: 0;
        transform: rotate(20deg);
    }
    .b1-copy::before{
        content: "|";
        display: block;
        position: absolute;
        width: 140px;
        top: 0;
        left: 0;
        transform: rotate(-20deg);
    }
    .phone-num{
        font-size: 35px;
        margin: 0;
        color: #0074bf;
    }
    .company{
        background-color: #004f82;
    }
    .company::before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(clean/corporation.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 3px;
    }
    .b1-contact{
        background-color: #0074bf;
    }
    .b1-contact::before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(clean/mailwhite.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 3px;
    }
    .company,.b1-contact{
        text-decoration: none;
        color: white;
        transition: .3s;
        padding: 20px 0;
        border-radius: 5px;
        display: block;
    }
    .company:hover{
        background-color: #002c4a;
    }
    .b1-contact:hover{
        background-color: #005085;
    }
    #b1-container{
        margin-top: 20px;
    }
}
@media(min-width:600px) and (max-width:1139px){
    #b1-container{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 10px;
    }
    .company,.b1-contact{
        width: 31%;
    }
}
@media(max-width:599px){
    .company,.b1-contact{
        width: 100%;
    }
    .company{
        margin-bottom: 5px;
    }
    #b1-container{
        display: block;
    }
}
@media(min-width:1140px){
    #banner1{
        display: none;
    }
}
/*menu*/
#business-menu{
    background-color: #0074bf;
}
.section-title,.section-subtitle{
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    text-align: center;
    color: white;
}
.section-title{
    font-size: 25px;
}
#b-m{
    margin-right: 10px;
    margin-left: 10px;
}
.b-m-content{
    background-color: white;
    border-radius: 10px;
    text-align: center;
    padding-bottom: 30px;
}
.b-m-content img{
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 250px;
    object-fit: cover;
}
.section-heading{
    color: #0074bf;
}
.btn{
    padding: 20px 30px;
    border-radius: 100px;
    text-decoration: none;
    color: white;
    background-color: #004f82;
    border-radius: 10px;
    width: 200px;
    display: block;
    margin: 0 auto;
    transition: .3s;
}
.btn:hover{
    background-color: #002f4f;
}
.b-m-txt{
    margin-right: 10px;
    margin-left: 10px;
    line-height: 30px;
}
@media(min-width:1140px){
    #b-m{
        padding: 120px 0;
    }
    .b-m-content{
        width: 33%;
    }
    #b-m-container{
        max-width: 1300px;
        margin: 0 auto;
        gap: 15px;
    }
}
@media(min-width:800px){
    #b-m-container{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
}
@media(max-width:799px){
    .b-m-content:nth-child(1),.b-m-content:nth-child(2){
        margin-bottom: 20px;
    }
}
@media(min-width:800px) and (max-width:1139px){
    .b-m-content{
        width: 48%;
    }
    #b-m-container{
        flex-wrap: wrap;
        width: 100%;
        gap: 20px;
    }
}
@media(max-width:1139px){
    #b-m{
        margin-top: 120px;
        margin-bottom: 80px;
        padding: 30px 0;
    }
}
#b-m-container{
    margin-top: 50px;
}
/*sub*/
.b2-catch-copy{
    font-size: 12px;
    color: white;
}
.b2-catch-copy::before,.b2-catch-copy::after{
    content: "｜";
    display: inline-block;
}
.b2-catch-copy::before{
    transform: rotate(-20deg);
    left: -20px;
}
.b2-catch-copy::after{
    transform: rotate(20deg);
    right: -20px;
}
#b-m-sub-container{
    margin: 80px 10px 120px 10px ;
}
/**/
#b-m-sub{
    max-width: 800px;
    margin: 0 auto;
}
.banner2{
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 50%;
    height: 200px;
    border-radius: 10px;
}
.banner2:nth-child(1):after{
    background-image: url(clean/corp.jpeg);
}
.banner2:nth-child(2):after{
    background-image: url(clean/plan.jpeg);
}
.section-headings{
    color: white;
}
.banner2::after{
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    background-blend-mode: darken;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
.b2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

@media(min-width:800px){
    #b-m-sub{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 10px;
    }
}
@media(max-width:799px){
    .banner2{
        width: 100%;
    }
    .banner2:nth-child(1){
        margin-bottom: 10px;
    }
}
.section-headings{
    font-family: 'Noto Sans JP', sans-serif;
}
/**/
#location{
    background-color: #0074bf;padding: 30px 0;
}
#l{
    max-width: 1140px;
    margin: 10px auto;
}
.place-content{
    background-color: #004f82;
    border-radius: 10px;
    color: white;
}
.l-txt{
    color: white;
}
.place-content{
    padding: 1px 15px 10px 15px;
}
.place-content:nth-child(1){
    margin-bottom: 10px;
}
#ll{
    margin: 0px 10px;
}
.place{
    margin-top: 50px;
}
.l-txt{
    margin-top: 30px;
}
#l-container img{
    opacity: 0.6;
}
@media(min-width:1140px){
    #l-container{
        display: flex;
        position: relative;
    }
    
    .place{
        position: absolute;
        top: 80px;
        left: 0;
        width: 35%;
    }
    #l-container img{
        width: 58%;
        margin-left: auto;
    }
    .p-ul{
        justify-content:flex-start;
    }
}
@media(max-width:1139px){
    #l-container img{
        width: 80%;
        margin: 0 auto;
        display: block;
    }
}
@media(min-width:600px) and (max-width:1139px){
    .place{
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        gap: 10px;
    }
    .place-content{
        width: 50%;
        text-align: center;
    }
    .p-ul{
        justify-content: space-evenly;
    }
}
@media(min-width:600px){
    .p-ul{
        display: flex;
        align-items: center;
        gap: 15px;
    }
}
@media(max-width:599px){
    #l-container{
        text-align: center;
    }
}
/*flow*/
#f .section-subtitle,#f .section-title{
    color: #0074bf;
}
#flow{
    margin: 120px 10px;
}
#f{
    max-width: 1300px;
    margin: 0 auto;
}
.btn{
    text-align: center;
}
.f-heading{
    font-family: 'Noto Sans JP', sans-serif;
    color: #0074bf;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
}
.f-num{
    margin-right: 5px;
}
.f-content{
    text-align: center;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 2px 2px rgba(0,116,191,.3);
    padding: 20px 0 0 0;
}
.f-content img{
    display: block;
}
#f .btn{
    margin-top: 50px;
}
@media(max-width:799px){
    .f-content img{
        width: 40%;
        margin: 0 auto;
        display: block;
    }
    .f-content:nth-child(1),.f-content:nth-child(2),.f-content:nth-child(3){
        margin-bottom:30px ;
    }
    .f-heading{
        margin: 0;
        padding-bottom: 30px;
        font-size: 25px;
    }
}
@media(min-width:800px){
    #f-container{
        max-width: 1300px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 15px;
        margin: 30px auto;
    }
    .f-content{
        width: 25%;
    }
    .f-content img{
        width: 120px;
        display: block;
        margin: 0 auto;
    }
}
/**/
.r-txt{
    line-height: 30px;
}
#r .section-title,#r .section-subtitle{
    color: #0074bf;
}
.r-content .section-headings{
    color: #0074bf;
    letter-spacing: 1px;
    font-size: 20px;
}
#reason{
    margin: 0 10px 120px 0px;
    padding: 30px 0 30px 0;
    background-color: #eef8ff;
}
#r{
    max-width: 1300px;
    margin: 10px auto;
}
.r-content img{
    object-fit: cover;
}
.button{
    width: 150px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 10px;
    background-color: #004f82;
    padding: 15px 25px;
    transition: .3s;
}
.button:hover{
    background-color: #002f4f;
}
.r-txt{
    margin: 30px 0;
}
.r-content img{
    border-radius: 10px;
    object-fit: cover;
}
#r-container{
    margin-right: 10px;
    margin-left: 10px;
}
@media(max-width:799px){
    #r-container{
        margin: 50px 10px;
        text-align: center;
    }
    .button{
        margin: 0 auto;
    }
    .img-2{
        display: none;
    }
    .r-content img{
        width: 100%;
        height: 250px;
        margin-top: 30px;
    }
    .r-content:nth-child(1),.r-content:nth-of-type(2){
        margin-bottom: 80px;
    }
}
@media(min-width:800px){
    #reason{
        padding-bottom: 110px;
    }
    .r-content:nth-child(1),.r-content:nth-of-type(2){
        margin-bottom: 200px;
    }
    .r-content{
        position: relative;
        display: flex;
    }
    .r-text{
        width: 45%;
    }
    .r-text{
        margin-top: 80px;
    }
    .r-content img{
        position: absolute;
    }
    .img-1{
        top: 0;
        right: 0;
        width: 40%;
        height: 450px;
    }
    .img-2{
        bottom: -80px;
        right: 28%;
        width: 200px;
        height: 250px;
    }
    .r-content:nth-of-type(even) .img-1{
        left: 0;
    }
    .r-content:nth-of-type(even) .img-2{
        left: 28%;
    }
    .r-content:nth-of-type(even) .r-text{
        margin-left: auto;
    }
}
/**/
#voice{
    position: relative;
}

#vv{
    margin: 0 10px 120px 10px;
}
#v{
    max-width: 1300px;
    margin: 0 auto;
}
.v-content img{
    object-fit: cover;
}
#v .section-title,#v .section-subtitle{
    color: #0074bf;
}
#v-container{
    margin:30px 0;
    text-align: center;
}
.v-heading{
    font-family: 'Noto Sans JP', sans-serif;
}
.v-content{
    position: relative;
}
.v-content img{
    border-radius: 10px;
    width: 100%;
    height: 250px;
}
@media(min-width:800px){
    .v-city,.v-name{
        margin: 0;
        color: white;
    }
    .v-about{
        width: 60px;
        height: 60px;
        padding: 20px;
        border-radius: 100%;
        background-color: #005085;
    }
    .v-about{
        position: absolute;
        top: -20px;
        left: -10px;
    }
    #v-container{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 25px;
        margin-top: 50px;
    }
    .v-content{
        width: 25%;
    }
}
@media(max-width:799px){
    .v-about{
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }
    .v-heading{
        margin: 0px;
    }
    .v-content{
        margin-bottom: 50px;
    }
}
/**/
#blog-news{
    background-color: #eef8ff;
}
#b-n{
    padding: 30px 0;
    max-width: 1300px;
    margin: 0 auto;
}
#blog .section-title, #blog .section-subtitle,#news .section-subtitle,#news .section-title{
    color: #0074bf;
}
.b-heading{
    font-weight: bold;
    margin-top: 3px;
}
.b-date{
    margin: 0;
    padding: 5px 8px;
    border-radius: 3px;
    background-color: #004f82;
    color: white;
    letter-spacing: 1px;
    width: 70px;
    text-align: center;
    font-size: 12px;
}
.b-content a{
    text-decoration: none;
    color: #0074bf;
}
#b-container a{
    text-decoration: none;
}
#news #blog-container .b-content{
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}
#blog #blog-container .b-content:nth-of-type(1){
    margin-bottom: 20px;
}
#blog .button,#news .button{
    margin: 0 auto;
}
.n-heading{
    font-weight: bold;
}
.n-heading,.b-heading{
    transition: .3s;
}
.b-content:hover .n-heading{
    color: #ccc;
}
.b-content:hover .b-heading{
    color: #ccc;
}
.b-content img{
    border-radius: 5px;
}
@media(min-width:800px){
    .b-content img{
        width: 100px;
        height: 100%;
    }
    #b-n{
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        gap: 20px;
    }
    #blog,#news{
        width: 50%;
    }
    .b-content a{
        display: flex;
        align-items: center;
        gap: 10px;
    }
}
.b-content a img{
    object-fit: cover;
}
@media(max-width:799px){
    .b-content a img{
        width: 100%;
        height: 200px;
    }
    .b-date{
        margin: 0 auto;
    }
    .n-heading,.b-heading{
        text-align: center;
    }
    .b-content{
        margin-bottom: 20px;
    }
    .b-text{
        margin: 10px 0 50px 0;
    }
    #blog{
        margin-bottom: 80px;
    }
}
#blog-container{
    margin: 50px 0;
}
#blog,#news{
    margin: 0 10px;
}
/**/
#triangle{
    background: #fef2e0;
    height: calc(tan(60deg) * 60px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    margin-top: 80px;
}
#contact{
    background-color: #0074bf;
    color: white;
    text-align: center;
}
#c{
    margin: 0 10px 0px 10px;
    padding: 30px 0;
}
#cc{
    max-width: 1300px;
    margin: 0 auto;
}
#triangle,#contact{
    background-color: #0074bf;
}
.c-catch-copy{
    margin-top: 50px;
    font-size: 12px;
}
.c-catch-copy::before{
    content: "|";
    color: white;
    margin-right: 10px;
    transform: rotate(-25deg);
    display: inline-block;
}
.c-catch-copy::after{
    content: "|";
    color: white;
    margin-left: 10px;
    transform: rotate(25deg);
    display: inline-block;
}
.contact-banner{
    position: relative;
    text-decoration: none;
    color: white;
    border-radius: 10px;
    padding: 20px 30px;
    display: block;
    transition: .3s;
}
.contact-banner:nth-of-type(1){
    background-color: #002c4a;
}
.contact-banner:nth-of-type(1):hover{
    background-color: #004f82;
}
.contact-banner:nth-of-type(1)::before{
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(clean/corporation.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 3px;
}
.contact-banner:nth-of-type(2){
    color: #0074bf;
    background-color: white;
}
.contact-banner:nth-of-type(2):hover{
    background-color: #005085;
    color: white;
}
.contact-banner:nth-of-type(2)::before{
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(clean/mail.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 3px;
}
.c-container{
    margin-top: 30px;
}
@media(min-width:800px){
    .c-container{
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 15px;
    }
    .contact-banner{
        width: 50%;
    }
}
@media(max-width:799px){
    .contact-banner:nth-of-type(1){
        margin-bottom: 10px;
    }
}
/**/
footer{
    background-color: #005085;
}
#ff{
    margin: 0 10px;
    padding: 50px 0;
    color: white;
}
.ff-content a{
    display: block;
    color: white;
    text-decoration: none;
    transition: .3s;
}
.ff-content a:hover{
    color: #ccc;
}
@media(min-width:1140px){
    #ff{
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        max-width: 1300px;
        margin: 0 auto;
    }
}
@media(max-width:1139px){
    .f-list{
        text-align: center;
        margin: 30px 0 10px 0;
    }
}