*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    --font-family-default: 'Noto Sans Mono CJK JP', Arial, 'ヒラギノ角ゴ Pro W4', 'Hiragino Kaku Gothic Pro', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    --font-family-hiragino: 'ヒラギノ角ゴ Pro W4', 'Hiragino Kaku Gothic Pro', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }
    html{
        font-size: 62.5%;
    }
    
    body{
        color:#fff;
        font-family: var(--font-family-default);
        font-size:14px;
        margin: 0;
        background:#000;
    }
    img {
        width: 100%;
    }

    a,
    a:hover,
    a:active,
    a:visited{
        color: inherit;
        text-decoration: none;
        transition: opacity .3s;
    }
    button {
        background: none;
        border: none;
        margin: 0;
        padding: 0;
        cursor: pointer;
        transition: opacity .3s;
    }
    a:hover,
    button:hover {
        opacity: .7;
    }

    /* fadein関係 */
    .fadein, .fadeindummy {
        opacity : 0;
        transition : all 500ms ease-in-out;
    }
    .fadein.scrollin, .fadeindummy.scrollin {
        opacity : 1;
        transform : translate(0, 0);
    }
    .bottom-to {
        transform : translate(0, 150px);
    }
    .left-to {
        transform : translate(-150px, 0);
    }

    /* pagetop */
    #pagetop {
        position: fixed;
        width: 80px;
        right: 8vw;
        bottom: 50px;
        cursor: pointer;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s;
    }
    #pagetop.scrolled {
        opacity: 1;
        pointer-events: initial;
    }

    .header {
        position: fixed;
        /* min-width: 1440px; */
        width: 100%;
        /* height: 150px; */
        z-index: 9999;
        /* background-color: white; */
        background:rgba(0,0,0,1);
        border-top:3px solid #444;
    }
    .header .container{
        width:100% !important;
        text-align: center;
    }
    .header img.tel {
        width: auto;
    }
    .header .telArea{
        font-size: 2.5rem;;
    }
    .header > div.pc {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 20px;
        height: 100%;
    }
    .header.scrolled > div.pc {
        background-color: #06B3DB;
    }
    .header > div.pc .sectionTop {
        position: relative;
        display: flex;
        align-items: center;
    }
    .header > div.pc .sectionTop .menu {
        padding-right: 20px;
        position: relative;
        transition: opacity 600ms;
    }
    .header > div.pc .sectionTop .logo {
        max-width: 330px;
        min-width: 330px;
        margin-right: 50px;
    }
    .header > div.pc .sectionTop .logo.base {
        opacity: 1;
    }
    .header > div.pc .sectionTop .logo.scrolled {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .header.scrolled > div.pc .sectionTop .logo.base {
        opacity: 0;
    }
    .header.scrolled > div.pc .sectionTop .logo.scrolled {
        opacity: 1;
    }

    .header .site_name {
        color: #fff;
        font-size: 2.0rem;
    }


    .header > div.pc .sectionTop .co-copy {
        max-width: 140px;
        min-width: 140px;
        padding-bottom: 10px;    
    }
    .header > div.pc .sectionTop .co-copy.base {
        opacity: 1;
    }
    .header > div.pc .sectionTop .co-copy.scrolled {
        opacity: 0;
        position: absolute;
        left: 0;
    }
    .header.scrolled > div.pc .sectionTop .co-copy.base {
        opacity: 0;
    }
    .header.scrolled > div.pc .sectionTop .co-copy.scrolled {
        opacity: 1;
    }
    .header > div.pc .sectionBottom {
        position: relative;
        display: flex;
        justify-content: center;
        margin-left:3rem;
    }
    .header > div.pc .sectionBottom .menu {
        padding-right: 60px;
        word-break: break-all;
    }
    .header > div.pc .sectionBottom .menu:nth-last-child(1) {
        padding-right:15px;
    }
    
    .header > div.pc .sectionBottom .menu a::before{
        content: url(../img/common/arrow.png);
        display: inline-block;
    }
    .header > div.pc .sectionBottom .menu:nth-of-type(1),
    .header > div.pc .sectionBottom .menu:nth-of-type(2),
    .header > div.pc .sectionBottom .menu:nth-of-type(3),
    .header > div.pc .sectionBottom .menu:nth-of-type(4) {
        height: 3em;
    }
    .header > div.pc .sectionBottom .menu a {
        color: black;
        font-size: 1.55rem;
        position: relative;
    }
    .header > div.pc .sectionBottom .menu a {
        font-size: 1.36rem;
        color: #FFF
    }
    .header > div.pc .sectionBottom .menu:nth-of-type(1) a::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(2) a::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(3) a::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(4) a::after  {
        position: absolute;
        bottom: -4px;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #333;
        transform: scale(0, 1);
        transform-origin: center top;
        transition: transform .3s;
    }
    .header > div.pc .sectionBottom .menu:nth-of-type(1) a:hover ,
    .header > div.pc .sectionBottom .menu:nth-of-type(2) a:hover ,
    .header > div.pc .sectionBottom .menu:nth-of-type(3) a:hover ,
    .header > div.pc .sectionBottom .menu:nth-of-type(4) a:hover  {
        opacity: 1;
        color:#DDD;
    }
    .header > div.pc .sectionBottom .menu:nth-of-type(1) a:hover::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(2) a:hover::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(3) a:hover::after ,
    .header > div.pc .sectionBottom .menu:nth-of-type(4) a:hover::after  {
        transform: scale(1, 1);
    }
    .header > div.pc .sectionBottom .menu a div span {
        padding: 0 8px;
    }
    .header > div.pc ul {
        width:100%;
        list-style: none;
        margin:0;
        padding:0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .header > div.pc li > div,
    .header > div.pc li > a {
        display: inline-block;
        width:100%;
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;;
    }


    .header div.sp {
        height: 80px;
        padding: 0 20px;
        overflow: initial;
    }
    .header div.sp > div {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    .header div.sp > div > div {
        display: flex;
        align-items: center;
    }
    .header div.sp img {
        width: 128px;
    }
    .header div.sp img.tel {
        width: 135px;
        padding-right: 12px;
    }
    /* .humberger {
    } */
    .btn-trigger {
        position: relative;
        margin-right: 1rem;
        width: 30px;
        height: 24px;
        cursor: pointer;
        z-index: 999;
    }
    .btn-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #FFF;
        border-radius: 4px;
        pointer-events: none;
    }
    .btn-trigger, .btn-trigger span {
        display: inline-block;
        transition: all .5s;
        box-sizing: border-box;
    }
    .btn-trigger span:nth-of-type(1) {
        top: 0;
    }
    .btn-trigger span:nth-of-type(2) {
        top: 10px;
    }
    .humberger.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(45deg);
        transform: translateY(10px) rotate(45deg);
    }
    .humberger.active span:nth-of-type(2) {
        -webkit-transform: translateY(0px) rotate(-45deg);
        transform: translateY(0px) rotate(-45deg);
    }
    .header #sp-menu {
        width: 100vw;
        height: 0;
        background-color: rgba(255, 255, 255, 1);
        transition: all .5s;
        top: 60px;
        position: absolute;
        margin: 0;
        overflow: hidden;
        font-family: var(--font-family-hiragino);
    }
    .header #sp-menu.show {
        height: 100vh;
    }
    .header #sp-menu ul {
        list-style: none;
        margin: 0;
        background-color: #fff;
        font-size: 18px;
        padding: 0;
    }
    .header #sp-menu li {
        padding: 20px;
        color: #051739;
        border-top: 0.3px solid #9A9A9A;
    }
    .header #sp-menu li a {
        color: #051739;
    }
    .header #sp-menu .menufooter {
        display: flex;
        flex-direction: column;
        padding: 60px 70px 0;
    }
    .header #sp-menu .menufooter a {
        text-align: center;
    }
    .header #sp-menu .menufooter .tel {
        width: 100%;
    }
    .header #sp-menu .menufooter .entry {
        font-size: 17px;
        padding: 19px 24px;
        margin-top: 32px;
    }
    
    
    .notosans-demilight {
        font-family: 'Noto Sans JP', sans-serif;;
        font-weight: 300;
        font-style: normal;
    }
    .notosans-medium {
        font-weight: 500;
        font-style: normal;
    }
    .notosans-bold {
        font-weight: 700;
        font-style: normal;
    }
    .notosans-black {
        font-weight: 900;
        font-style: normal;
    }
    .notoserif {
        font-family: 'Noto Serif', serif;
        font-weight: 400;
        font-style: normal;
    }
    .container {
        margin: 0 auto;
        padding: 0 0 160px 0;
        min-width: 1440px;
    }

    body {
        background-color: #F5F5F5;
    }
    /* KV */
    .kv {
        padding-top: 150px;
        /* height: 1286px; */
        overflow: hidden;
        min-width: 1440px;
    }


    footer {
        min-width: 1440px;
        width: 100%;
        background-color: #000;
        margin: 0 auto;
    
    }
    footer section {
        /* width: 1440px; */
    }
    footer section.footermenu {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        padding: 60px 0 70px;
    }
    footer section.footermenu > div:nth-child(1){
        width: 300px;
        margin-right: 150px;
        display: flex;
        flex-direction: column;
    }
    footer section.footermenu .logo {
        width:200px;
        padding: 0px 0 2rem;
    }
    footer .address {
        color: #fff;
    }
    footer .address p:nth-child(1){
        font-size: 2.4rem;
    }
    footer section.footermenu > div:nth-child(2){
        width: 300px;
        margin-right: 150px;
    }
    footer section.footermenu ul {
        margin: 0;
        list-style: none;
        font-family:var(--font-family-hiragino);
    }
    footer section.footermenu li {
        padding-bottom: 28px;
        font-size: 25px;
    }
    footer section.footermenu li a{
        font-size: 18px;
    }
    footer section.footermenu li a::before{
        content: url(../img/common/arrow.png);
        display: inline-block;
        margin-right: 0.8rem;
    }
    footer section.footermenu li a:hover{
        color:#1FA7E1;
    }

    footer section.footermenu > div:nth-child(3){
        border-left: 1px solid #707070;
        padding-left: 70px;
    }
    footer section.footermenu .tel {
        width: 316px;
    }
    .entry {
        /* border: 3px solid #2D6CE3; */
        border-radius: 3px;
        padding: 25px 32px;
        font-family: var(--font-family-hiragino);
        color: #fff;
        background:#00b4ec;
        font-size: 23px;
        font-weight: 600;
    }
    footer section.footermenu .rightcol {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }
    .copyright {
        background-color: #fff;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .copyright p {
        color: #707070;
        text-align: center;
    }


    #fortop{
        position:fixed;
        width:110px;
        right:2%;
        bottom:0;
        cursor: pointer;
    }
    .hdn{
        display: none !important;
    }
    .pc-hdn {
        display: none !important;
    }
    
    /* アニメーション用 */
    .anime .img {
        position: relative;
        animation-name: anime;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        opacity: 0;
    }
    .anime .img2 {
        animation-delay: 2s;
        position: absolute;
    }
    @keyframes anime {
        0% {
            opacity: 0;
        }
        0.1% {
            opacity: 1;
        }
        50% {
            opacity: 1;
        }
        50.1% {
            opacity: 0;
        }
    }

@media screen and (max-width:740px){
    html{
        font-size:4vw;
    }
    body{
        font-size:4vw;
    }
    .pc-hdn {
        display: block !important;
    }
    .sp-hdn {
        display: none !important;
    }
    #pagetop {
        width: 60px;
    }
    .header {
        min-width: initial;
        width: 100vw;
        height: 72px;
    }
    .container {
        min-width: 100%;
    }


    .kv {
        min-width: auto;
        padding-top: 72px;
    }

    #about .container {
        padding: 0 20px;
    }
    #about h1 {
        font-size: 22px;
        font-weight: bold;
        margin-top: 60px;
        text-align: center;
    }
    #about h3 {
        font-size: 14px;
        text-align: center;
    }
    #about .container > div {
        padding: 0;
        flex-direction: column;
    }
    #about .container .lead p {
        font-size: 15px;
        line-height: 2;
    }
    #about .container .right .desc{
        font-size: 4vw;
        line-height: 30px;
        padding-top: 2%;
    }

    #therefore .container {
        padding: 55px 0 160px;
        overflow: hidden;
    }
    #therefore .container.second {
        padding-bottom: 300px;
    }
    #therefore .container > img {
        width: 494px;
    }
    #therefore .container.second > img {
        width: 509px;
        left: -64px;
        position: relative;
    }
    #therefore .container > div {
        width: 352px;
        right: auto;
        top: 250px;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
    }
    #therefore .container.second > div {
        position: absolute;
        height: auto;
    }
    #therefore .title {
        font-size: 22px;
        text-align: center;
        padding-top: 31px;
    }
    #therefore .title-en {
        font-size: 14px;
        text-align: center;
        padding-top: 0;
    }
    #therefore .container p {
        font-size: 15px;
        line-height: 1.85;
        padding: 0 11px;
    }
    #therefore .images {
        width: 100%;
    }
    #therefore .images > div {
        width: 60%;
    }
    #therefore button {
        margin: 5px auto 33px;
        display: block;
        width: 122px;
        position: relative;
    }

    #company > div > img {
        width: 100%;
        left: -620px;
        position: relative;        
    }
    #company .title {
        font-size: 22px;
        text-align: center;
        padding-top: 31px;
    }
    #company .title-en {
        font-size: 14px;
        text-align: center;
        padding-top: 0;
    }
    #company button {
        width: 260px;
        margin-top: 23px;
    }

    .header .site_name {
        margin-left:2rem;
        font-size: 0.8rem;
    }
    footer {
        width: 100%;
        min-width: auto;
    }
    footer section {
        width: 100%;
    }
    footer section.footermenu {
        flex-direction: column-reverse;
        padding-top: 40px;
    }
    footer section.footermenu > div:nth-child(1) {
        display: block;
        width:100%;
        /* padding-left: 40px; */
        text-align: center;
    }
    footer section.footermenu > div:nth-child(1) a{
        font-size: 0.85rem;
    }
    footer section.footermenu > div:nth-child(2) {
        margin:3rem 0;
        padding-top: 40px;
        width: 100%;
    }
    footer section.footermenu li {
        font-size: 13px;
        padding-bottom: 13px;
    }
    footer section.footermenu > div:nth-child(3) {
        border-left: none;
        padding: 0 70px;
    }
    footer section.footermenu .rightcol {
        height: 160px;
        justify-content: space-between;
    }
    footer section.footermenu .tel {
        width: 100%;
    }
    footer section.footermenu > div:nth-child(1){
        width: 100%;
        /* margin-right: 150px; */
        display: flex;
        flex-direction: column;
    }
    footer section.footermenu .logo {
        width: 70%;
        padding: 0;
        margin:0 auto 1.5rem;
        text-align: center;
    }    
    footer .address {
    }
    footer .address p:nth-child(1){
        font-size: 1.4rem;
    }
    .entry {
        border-width: 2px;
        font-size: 16px;
        padding: 10px 24px;
        border-radius: 10px;
    }
    .copyright {
        font-size: 9px;
    }
}


/* KV Swiper zoomUp */
@keyframes zoomUp {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}
  
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
    animation: zoomUp 10s linear 0s 1 normal both;  
}
  

/* imgタグだと下に隙間ができるのでblockに。*/
.slide-img img{
    display: block;
}