@charset "utf-8";

/* 全体の設定 */
body.is-youtube-modal-open {
    overflow: hidden;
}
.content{
    font-family: "Noto Sans JP", sans-serif;
    background-color: #F7F7F7;
}
.flex{
    display: flex;
    align-items: center;
}
.inner{
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}
.sp{
    display: none;
}
section{
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    body.is-fixed{
        overflow: hidden;
    }
    .content{
        overflow-x: clip;
        overflow-y: visible;
    }
    .inner{
        max-width: none;
        padding: 0 5.333333333333334vw;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
}

.u-anime-up{
	opacity: 0;
}
.u-anime-up.play {
	animation: anime-up 0.4s forwards;
	animation-delay: 0.2s;
}
@keyframes anime-up{
	0%   {
		transform:translateY(20px);
		opacity: 0;
	}
	100%  {
		transform:translateY(0px);
		opacity: 1;
	}
}
@keyframes anime-center-up{
	0%   {
		transform: translateX(-50%) translateY(20px);
		opacity: 0;
	}
	100%  {
		transform: translateX(-50%) translateY(0px);
		opacity: 1;
	}
}


/* header
------------------------------*/
#header{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    padding: 0 25px 0 0;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all .4s;
    z-index: 99;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background-color 0.4s ease;
}
body.home #header {
    opacity: 0;
    transform: translateY(-20px);
    height: 0;
}
body.home #header.is-show {
    animation: header-show .5s forwards;
    transition: height .5s ease-in;
    height: 110px;
}
@keyframes header-show {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#header.is-scroll{
    position: fixed;
    height: 110px;
    padding: 0;
    opacity: 1;
    transform: translateY(0);
    animation: headerFadeUp 0.45s ease forwards;
}
body.home #header.is-scroll{
    height: 110px;
    animation: headerFadeUp 0.45s ease forwards;
}
@keyframes headerFadeUp {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
#header .header-inner{
    position: relative;
    display: flex;
    justify-content: right;
    height: 100%;
    background-color: #fff;
}
#header.is-scroll .header-inner{
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
}
#header .header-inner .logo{
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    background-color: #fff;
    border-radius: 0 0 10px;
    z-index: 15;
}
#header.is-scroll .header-inner .logo{
    position: relative;
    top: auto;
    left: auto;
    padding: 0;
    display: block;
    height: 100%;
}
#header.is-scroll .header-inner .logo a,
#header.is-scroll .header-inner .logo a img{
    display: block;
    height: 100%;
    width: 100%;
}
#header .header-inner .right-ctt{
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 40px;
    flex: 1;
}
#header .header-inner .right-ctt .nav-area{
    position: relative;
}
#header .header-inner .right-ctt .nav-area:before{
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 60px;
    background-image: repeating-linear-gradient(rgb(0,0,0) 0px, rgb(0,0,0) 2px, transparent 2px, transparent 4px);
}
#header .header-inner .right-ctt .nav-area .top-nav{
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 18px;
    margin: 0 0 18px;
}
#header .header-inner .right-ctt .nav-area .top-nav p{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.83;
    margin: 0;
    color: #222222;
}
#header .header-inner .right-ctt .nav-area .top-nav .sns-area{
    display: flex;
    align-items: center;
    gap: 20px;
}
#header .header-inner .right-ctt .nav-area .header-list{
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 25px;
}
#header .header-inner .right-ctt .nav-area .header-list>li a{
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.38;
    color: #222;
    transition: all .3s;
}
#header .header-inner .right-ctt .nav-area .header-list>li a:hover{
    color: #CF6541;
    opacity: 1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent{
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
#header .header-inner .right-ctt .nav-area .header-list .parent:hover{
    overflow: visible;
    color: #CF6541;
    opacity: 1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent>a{
    display: flex;
    align-items: center;
    gap: 10px;
}
#header .header-inner .right-ctt .nav-area .header-list .parent:hover>a{
    color: #DF5B4C;
    opacity: 1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent>a::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #222222;
    margin-bottom: -3px;
    transition: all .3s;
}
#header .header-inner .right-ctt .nav-area .header-list .parent:hover>a::after{
    border-top: 7px solid #DF5B4C;
    opacity: 1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu{
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: max-content;
    padding: 25px 30px 25px 25px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all .3s;
    z-index: -1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu::before{
    content: "";
    display: block;
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 80px;
    opacity: 0;
    z-index: -1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent:hover .submenu{
    opacity: 1;
    z-index: 1;
    transform: translateX(-50%) translateY(0);
}
#header .header-inner .right-ctt .nav-area .header-list .parent:hover .submenu::before{
    z-index: 1;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu li a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0 0 15px;
    margin: 0 0 15px;
    border-bottom: 1px solid #E7E7E7;
    color: #222222;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu li:last-child a{
    padding: 0;
    margin: 0;
    border-bottom: none;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu li a:before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    transition: all .3s;
    margin: 5px 0 0;
}
#header .header-inner .right-ctt .nav-area .header-list .parent .submenu li a:hover{
    transform: translateX(6px);
    color: #DF5B4C;
    opacity: 1;
}
#header .header-inner .right-ctt .info-area{
    display: flex;
    align-items: center;
    gap: 18px;
}
#header .header-inner .right-ctt .info-area .tell,
#header .header-inner .right-ctt .info-area .tell img{
    display: block;
    max-width: 210px;
    width: 100%;
}
#header .header-inner .right-ctt .info-area .btn-area{
    display: flex;
    align-items: stretch;
    gap: 10px;
}
#header .header-inner .right-ctt .info-area .btn-area .head-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 160px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1;
    margin: 0;
    color: #fff;
    border-radius: 5px;
}
#header .header-inner .right-ctt .info-area .btn-area .contact{
    padding: 20px 15px;
    background-color: #2D4A80;
}
#header .header-inner .right-ctt .info-area .btn-area .download{
    padding: 20px 12px;
    background-color: #EC6859;
}
#header .header-inner .right-ctt .info-area .btn-area .contact::after{
    content: "";
    margin-top: 2px;
    width: 17px;
    height: 14px;
    background-image: url(../img/common/mail-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#header .header-inner .right-ctt .info-area .btn-area .download::after{
    content: "";
    width: 14px;
    height: 18px;
    background-image: url(../img/common/download-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 1550px) {
    #header .header-inner .right-ctt .info-area .tell,
    #header .header-inner .right-ctt .info-area .tell img{
        display: block;
        max-width: 190px;
        width: 100%;
    }
    #header .header-inner .right-ctt .nav-area .top-nav .sns-area{
        gap: 12px;
    }
    #header .header-inner .right-ctt .nav-area .header-list{
        gap: 18px;
    }
    #header .header-inner .right-ctt .nav-area:before{
        height: 70px;
    }
    #header .header-inner .right-ctt .info-area .btn-area .head-btn{
        width: 160px;
    }
}

@media only screen and (max-width: 1440px) {
    #header .header-inner .logo{
        padding: 20px;
    }
    #header .header-inner .logo a,
    #header .header-inner .logo a img{
        max-width: 140px;
    }
    #header .header-inner .right-ctt .nav-area .header-list>li a{
        font-size: 15px;
    }
    #header .header-inner .right-ctt .info-area .btn-area .head-btn{
        width: 130px;
    }
    #header .header-inner .right-ctt .info-area .btn-area .contact::after,
    #header .header-inner .right-ctt .info-area .btn-area .download::after{
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    #header{
        padding: 0;
        height: 13.3333333333333335vw;
    }
    body.home #header{
        height: 0;
    }
    body.home #header.is-show {
        height: 13.3333333333333335vw;
    }
    #header.is-show {
        animation: header-show 1.3s cubic-bezier(.16, 1, .3, 1) forwards;
        transition: height .5s ease-in;
        height: 13.3333333333333335vw;
    }
    #header.is-scroll{
        height: 13.3333333333333335vw;
        animation: headerFadeUp 0.45s ease forwards;
    }
    body.home #header.is-scroll{
        height: 13.3333333333333335vw;
    }
    #header.is-scroll .header-inner{
        z-index: 100;
        gap: 2.6666666666667vw;
        padding: 0 0 0 2.6666666667vw;
    }
    #header .header-inner .logo{
        padding: 3.2vw 3.73333333333334vw;
        border-radius: 0 0 5px;
        z-index: 100;
        transition: none;
    }
    #header .header-inner .logo a,
    #header .header-inner .logo a img{
        display: block;
        max-width: 20vw;
        width: 20vw;
        height: auto;
    }
    #header.is-scroll .header-inner .logo{
        flex-shrink: 0;
        max-width: 13.3333333335vw;
    }
    #header.is-scroll .header-inner .logo a img{
        padding: 1.33333333335vw 0;
        max-width: 13.3333333335vw;
    }
    #header .header-inner .right-ctt{
        display: none;
    }
    #header .header-inner .sp-right-ctt{
        display: flex !important;
        justify-content: right;
        align-items: center;
        flex: 1;
    }
    #header .header-inner .sp-right-ctt .note{
        font-size: 2.4vw;
        font-weight: 500;
        line-height: 1.56;
        letter-spacing: 0;
        /* margin-right: 5.333333333334vw; */
        margin-right: 18vw;
        color: #222222;
    }
    #header.is-scroll .header-inner .sp-right-ctt .note{
        flex: 1;
    }
    #header .header-inner .sp-right-ctt .sp-tel{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-top: 0.8vw;
        gap: 1.66666666667vw;
        width: 13.33333333335vw;
        height: 13.33333333335vw;
        border-left: 1px dashed #2D4A80;
    }
    #header .header-inner .sp-right-ctt .sp-tel img{
        display: block;
        width: 4vw;
        height: auto;
        margin: 0 auto;
    }
    #header .header-inner .sp-right-ctt .sp-tel p{
        font-size: 2.666666666666667vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        letter-spacing: 0;
        color: #2D4A80;
    }
    #header .header-inner .sp-right-ctt .menu{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-top: 1.33333333333335vw;
        gap: 1.666666666667vw;
        width: 13.33333333333335vw;
        height: 13.33333333333335vw;
        color: #fff;
        background-color: #2D4A80;
        flex-shrink: 0;
        cursor: pointer;
        transition: all .3s;
    }
    #header .header-inner .sp-right-ctt .menu .line{
        position: relative;
        width: 4vw;
        height: 3.2vw;
    }
    #header .header-inner .sp-right-ctt .menu .line span{
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 0.2666666666666666vw;
        background-color: #fff;
        transition: all .3s;
    }
    #header .header-inner .sp-right-ctt .menu .line span:nth-child(1){
        top: 0;
    }
    #header .header-inner .sp-right-ctt .menu .line span:nth-of-type(2){
        top: 50%;
        transform: translateY(-50%);
    }
    #header .header-inner .sp-right-ctt .menu .line span:nth-child(3){
        bottom: 0;
    }
    #header .header-inner .sp-right-ctt .menu.is-active .line span:nth-child(1) {
        top: 50%;
        right: 0;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
    }
    #header .header-inner .sp-right-ctt .menu.is-active .line span:nth-child(2) {
        opacity: 0;
    }
    #header .header-inner .sp-right-ctt .menu.is-active .line span:nth-child(3) {
        top: 50%;
        bottom: auto;
        right: 0;
        left: 0;
        transform: translateY(-50%) rotate(-45deg);
    }
    #header .header-inner .sp-right-ctt .menu p{
        font-size: 2.666666666666667vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        letter-spacing: 0;
        color: #fff;
    }
    #header .navmn{
        position: fixed;
        top: 13.333333333333334vw;
        right: -100vw;
        width: 100vw;
        height: calc(100vh - 13.333333333333334vw);
        overflow: hidden;
        z-index: 50;
        transition: all .3s;
        color: #222222;
        background-color: #E8E8E8;
    }
    #header .navmn.is-open{
        right: 0;
    }
    #header .navmn .navmn-box{
        padding: 21.333333333333336vw 0 16vw;
        height: 100%;
        overflow: hidden;
        border-bottom: 1px solid #1A2C44;
    }
    #header .navmn .navmn-box .inner{
        padding: 0 8vw;
        overflow-x: auto;
        height: 100%;
    }
    #header .navmn .navmn-box .nav-list{
        display: block;
        margin: 0 0 13.33333333335vw;
    }
    #header .navmn .navmn-box .nav-list .nav-item{
        margin: 0 0 4.266666666667vw;
    }
    #header .navmn .navmn-box .nav-list .nav-item:last-of-type{
        margin: 0;
    } 
    #header .navmn .navmn-box .nav-list .nav-item .not-child-ttl,
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl{
        position: relative;
        display: block;
        font-size: 15px;
        font-weight: 600;
        line-height: 2;
        letter-spacing: 1px;
        color: #222222;
        padding: 0 0 4.266666666667vw;
        border-bottom: 1px dashed #222222;
    }
    #header .navmn .navmn-box .nav-list .nav-item .not-child-ttl span,
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl span{
        display: block;
        font-size: 10px;
        font-family: "Albert Sans", sans-serif;
        font-weight: 500;
        line-height: 2;
        letter-spacing: 0;
        color: #222222;
    }
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl .plus{
        position: absolute;
        top: 40%;
        right: 0;
        transform: translateY(-50%);
        width: 3.2vw;
        height: 3.2vw;
        overflow: hidden;
    }
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl .plus::before,
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl .plus::after{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.4vw;
        margin: auto;
        background: #222222;
        transition: all 0.3s;
    }
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl .plus::after{
        transform: rotate(90deg);
    }
    #header .navmn .navmn-box .nav-list .nav-item .sp-ttl.is-sp-open .plus::after{
        transform: rotate(00deg);
    }
    #header .navmn .navmn-box .nav-list .nav-item .not-child-ttl::before{
        position: absolute;
        top: 42%;
        right: 0;
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg) translateY(-50%);
        transition: all .3s;
    }
    #header .navmn .navmn-box .nav-list .nav-item .mobile-list{
        display: none;
        border-bottom: 1px dashed #222222;
        padding: 5.333333333334vw 0 5.333333333334vw 5.333333333334vw;
    }
    #header .navmn .navmn-box .nav-list .nav-item .mobile-list li a{
        display: flex;
        align-items: center;
        gap: 2.66666666667vw;
        font-size: 3.73333333333334vw;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 2.5;
        margin: 0;
        color: #222222;
    }
    #header .navmn .navmn-box .nav-list .nav-item .mobile-list li a::before{
        content: "";
        display: inline-block;
        width: 1.33333333333335vw;
        height: 1.33333333333335vw;
        border-right: 0.4vw solid currentColor;
        border-bottom: 0.4vw solid currentColor;
        transform: rotate(-45deg);
        transition: all .3s;
    }
    #header .navmn .navmn-box .sns-area{
        display: block;
        max-width: 57.333333333333336vw;
        width: 100%;
        margin: 0 auto 12vw;
    }
    #header .navmn .navmn-box .sns-area p{
        font-size: 4.2666666666667vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 500;
        text-align: center;
        letter-spacing: 1px;
        margin: 0 auto 6.6666666667vw;
        color: #222222;
    }
    #header .navmn .navmn-box .sns-area .icon-area{
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 2.6666666666667vw;
    }
    #header .navmn .navmn-box .sns-area .icon-area a{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        background-color: #FFFFFFCC;
        overflow: hidden;
    }
    #header .navmn .navmn-box .sns-area .icon-area a img{
        display: block;
    }
    #header .navmn .navmn-box .link-area{
        display: block;
        margin: 0 auto;
    }
    #header .navmn .navmn-box .link-area .item{
        display: flex;
        align-items: center;
        gap: 5.3333333333334vw;
        padding: 2.6666666666667vw;
        margin: 0 0 4.2666666666666667vw;
        background-color: #Fff;
        border-radius: 5px;
        box-shadow: 0 5px 0 #0000001A;
        transition: all .3s;
    }
    #header .navmn .navmn-box .link-area .item:last-of-type{
        margin: 0;
    }
    #header .navmn .navmn-box .link-area .item:hover{
        opacity: 1;
        transform: translate(0, 4px);
        box-shadow: 0 1px 0 #0000001A;
    }
    #header .navmn .navmn-box .link-area .item .img{
        position: relative;
        display: block;
        width: 29.333333333333332vw;
        height: 21.333333333333336vw;
        background-color: #F3F3F3;
        overflow: hidden;
        border-radius: 5px;
    }
    #header .navmn .navmn-box .link-area .item .img img{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        width: 100%;
        height: auto;
    }
    #header .navmn .navmn-box .link-area .item.youtube .img img{
        max-width: 21.3333333333336vw;
        width: 100%;
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    #header .navmn .navmn-box .link-area .item p{
        font-size: 4vw;
        font-weight: 500;
        letter-spacing: 1px;
        line-height: 1.47;
        color: #222222;
    }

}

/* contact */
#parts-contact{
    padding: 118px 0;
    color: #fff;
    background-image: url(../img/common/contact_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#parts-contact .ttl_area{
    margin: 0 0 75px;
}
#parts-contact .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 auto 25px;    
    color: #fff;
}
#parts-contact .ttl_area h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 auto 30px;    
    color: #fff;
}
#parts-contact .ttl_area .note{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0;
    color: #fff;
}
#parts-contact .ctt{
    display: flex;
    justify-content: center;
    align-items: stretch;
}
#parts-contact .ctt .item{
    position: relative;
    max-width: 450px;
    flex: 1;
}
#parts-contact .ctt .item::before{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5px;
    height: 130px;
    background-image: repeating-linear-gradient(#fff 0px, #fff 2px, transparent 2px, transparent 4px);
}
#parts-contact .ctt .item:last-of-type::after{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5px;
    height: 130px;
    background-image: repeating-linear-gradient(#fff 0px, #fff 2px, transparent 2px, transparent 4px);
}
#parts-contact .ctt .item .item-ttl{
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 40px;
}
#parts-contact .ctt .item .tell a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 37px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 10px;
    color: #fff;
}
#parts-contact .ctt .item .tell a::before{
    content: "";
    width: 25px;
    height: 31px;
    background-image: url(../img/common/icon-tell.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#parts-contact .ctt .item .tell span{
    display: block;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
}
#parts-contact .ctt .item .btn a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 310px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1;
    padding: 25px 0 27px;
    margin: 0 auto;
    border-radius: 2px;
    color: #fff;
}
#parts-contact .ctt .item .btn .cot{
    background-color: #2D4A80;
}
#parts-contact .ctt .item .btn .cot::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    width: 20px;
    height: 16px;
    background-image: url(../img/common/mail-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#parts-contact .ctt .item .btn .dowl{
    background-color: #EC6859;
}
#parts-contact .ctt .item .btn .dowl::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 14px;
    height: 18px;
    background-image: url(../img/common/download-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 768px) {
    #parts-contact{
        padding: 24vw 0 26.6666666666666667vw;
        background-image: url(../img/common/contact_bg_sp.jpg);
    }
    #parts-contact .ttl_area{
        margin: 0 0 20vw;
    }
    #parts-contact .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.11;
        margin: 0 auto 3.7333333333334vw;
    }
    #parts-contact .ttl_area h2{
        font-size: 12.8vw;
        letter-spacing: 0;
        line-height: 1.25;
        margin: 0 auto 2.6666666666667vw;
    }
    #parts-contact .ttl_area .note{
        font-size: 4vw;
        letter-spacing: 1px;
        line-height: 1.92;
    }
    #parts-contact .ctt{
        display: block;
        max-width: 80vw;
        width: 100%;
        margin: 0 auto;
    }
    #parts-contact .ctt .item{
        position: relative;
        max-width: none;
        padding: 0 0 8vw;
        margin: 0 0 8vw;
        border-bottom: 1px dashed #fff;
    }
    #parts-contact .ctt .item:last-of-type{
        padding: 0;
        margin: 0;
        border: none;
    }
    #parts-contact .ctt .item::before,
    #parts-contact .ctt .item:last-of-type::after{
        display: none;
    }
    #parts-contact .ctt .item .item-ttl{
        font-size: 4.266666666667vw;
        margin: 0 0 6.66666666667vw;
    }
    #parts-contact .ctt .item .tell a{
        gap: 1.066666666667vw;
        font-size: 8vw;
        margin: 0 0 2.4vw;
    }
    #parts-contact .ctt .item .tell a::before{
        width: 5.866666666666vw;
        height: 7.4666666666666668vw;
    }
    #parts-contact .ctt .item .tell span{
        font-size: 3.4666666666663vw;
        letter-spacing: 1px;
        margin: 0;
    }
    #parts-contact .ctt .item .btn a{
        max-width: 74.66666666666667vw;
        font-size: 4vw;
        padding: 5.86666666666666vw 0 6.1333333333333vw;
    }
    #parts-contact .ctt .item .btn .cot::before{
        right: 5.333333333334vw;
        width: 5.333333333334vw;
        height: 4.2666666666666667vw;
    }
    #parts-contact .ctt .item .btn .dowl::before{
        right: 5.33333333333334vw;
        width: 4vw;
        height: 5.06666666666666vw;
    }
}

/* cta */
#cta{
    padding: 60px 0;
    background-color: #F4F4F3;
}
#cta .ctt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}
#cta .ctt .logo,
#cta .ctt .logo img{
    display: block;
    max-width: 355px;
    width: 100%;
}
#cta .ctt .note{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.79;
    color: #222222;
    margin: 0;
}
#cta .ctt .sns-area p{
    font-size: 16px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    margin: 0 0 25px;
    color: #222222;
}
#cta .ctt .sns-area .sns{
    display: flex;
    align-items: stretch;
    gap: 12px;
}
#cta .ctt .sns-area .sns a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0;
}
@media only screen and (max-width: 768px) {
    #cta{
        padding: 16vw 0;
    }
    #cta .ctt{
        display: block;
    }
    #cta .ctt .logo,
    #cta .ctt .logo img{
        display: block;
        max-width: 65.33333333333333vw;
        width: 100%;
        margin: 0 auto;
    }
    #cta .ctt .logo img{
        margin: 0 auto 6.66666666667vw;
    }
    #cta .ctt .note{
        font-size: 3.2vw;
        font-weight: 400;
        text-align: center;
        letter-spacing: 1px;
        line-height: 1.67;
        margin: 0 auto 8vw;
    }
    #cta .ctt .sns-area p{
        font-size: 4.266666666667vw;
        text-align: center;
        margin: 0 auto 5.3333333333334vw;
    }
    #cta .ctt .sns-area .sns{
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 2.66666666666666667vw;
    }
    #cta .ctt .sns-area .sns a{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 12vw;
        height: 12vw;
        background-color: #fff;
        border-radius: 50%;
        margin: 0;
    }
}

/* footer
------------------------------*/
#footer{
    padding: 75px 0 55px;
    background-color: #E8E8E8;
    border-top: 1px dashed #222222;
}
#footer .nav-list{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    margin: 0 0 55px;
}
#footer .nav-list .item{
    flex: 1;
}
#footer .nav-list .item p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 2.2;
    margin: 0 0 30px;
    color: #222;
}
#footer .nav-list .item p span{
    font-size: 10px;
    font-weight: 500;
    font-family: "Albert Sans", sans-serif;
    letter-spacing: 0;
    line-height: 2;
}
#footer .nav-list .item p .plus{
    display: none;
}
#footer .nav-list .item .menu li a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 2.07;
    margin: 0;
}
#footer .nav-list .item .menu li a::before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    transition: all .3s;
    margin: 2px 0 0;
}
#footer .nav-list .item .menu li a.not::before{
    opacity: 0;
}
#footer .link-area{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 0 70px;
}
#footer .link-area .item{
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 310px;
    width: 100%;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 5px 0 #0000001A;
}
#footer .link-area .item:hover{
    opacity: 1;
    transform: translate(0, 4px);
    box-shadow: 0 1px 0 #0000001A;
}
#footer .link-area .item .img{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 80px;
    border-radius: 5px;
}
#footer .link-area .item .img img{
    display: block;
    max-width: 110px;
    width: 100%;
}
#footer .link-area .item.youtube .img{
    background-color: #F3F3F3;
}
#footer .link-area .item.youtube .img img{
    max-width: 80px;
    width: 100%;
}
#footer .link-area .item p{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.34;
    margin: 0;
    color: #222222;
}
#footer .bottom-ctt{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#footer .bottom-ctt p,
#footer .bottom-ctt small{
    display: block;
    font-size: 12px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    color: #222222;
}
#footer .bottom-ctt p{
    margin: 0 0 15px;
}
#footer .bottom-ctt .page-top a img{
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto 8px;
}
#footer .bottom-ctt .page-top a p{
    display: block;
    font-size: 12px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    margin: 0;
    color: #222222;
}
@media only screen and (max-width: 768px) {
    #footer{
        padding: 6.66666666667vw 0 21.333333336vw;
    }
    #footer .inner{
        padding: 0 8vw;
    }
    #footer .nav-list{
        display: block;
        width: 100%;
        margin: 0 0 13.33333333333335vw;
    }
    #footer .nav-list .item{
        display: block;
        width: 100%;
        margin: 0 0 4.266666666666667vw;
    }
    #footer .nav-list .item:last-of-type{
        margin: 0;
    }
    #footer .nav-list .item p{
        position: relative;
        display: block;
        font-size: 4vw;
        margin: 0;
        padding: 0 0 4.266666666667vw;
        border-bottom: 1px dashed #222222;
    }
    #footer .nav-list .item p span{
        display: block;
        font-size: 2.6666666666666667vw;
    }
    #footer .nav-list .item p .plus{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        display: block;
        width: 3.2vw;
        height: 3.2vw;
        overflow: hidden;
    }
    #footer .nav-list .item p .plus::before,
    #footer .nav-list .item p .plus::after{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.4vw;
        margin: auto;
        background: #222222;
        transition: all 0.3s;
    }
    #footer .nav-list .item p .plus::after{
        transform: rotate(90deg);
    }
    #footer .nav-list .item p.active .plus::after{
        transform: rotate(00deg);
    }
    #footer .nav-list .item .menu{
        display: none;
        border-bottom: 1px dashed #222222;
        padding: 5.33333333333334vw 0 5.33333333333334vw 5.33333333333334vw;
    }
    #footer .nav-list .item .menu li a{
        gap: 2.6666666666666667vw;
        font-size: 3.73333333333334vw;
    }
    #footer .nav-list .item .menu li a::before{
        width: 1.3333333333335vw;
        height: 1.3333333333335vw;
        border-right: 0.4vw solid currentColor;
        border-bottom: 0.4vw solid currentColor;
        margin: 0;
    }
    #footer .nav-list .item .menu li a.not::before{
        opacity: 1;
    }
    #footer .link-area{
        display: block;
        margin: 0 0 10.6666666666668vw;
    }
    #footer .link-area .item{
        gap: 6.666666666667vw;
        max-width: 82.666666666667vw;
        padding: 2.6666666666666667vw;
        margin: 0 0 4.2666666666666667vw;
    }
    #footer .link-area .item:last-of-type{
        margin: 0;
    }
    #footer .link-area .item .img{
        width: 29.333333333333332vw;
        height: 21.333333333333336vw;
    }
    #footer .link-area .item .img img{
        max-width: 29.333333333333332vw;
    }
    #footer .link-area .item.youtube .img img{
        max-width: 21.333333333333336vw;
    }
    #footer .link-area .item p{
        font-size: 3.73333333333334vw;
        line-height: 1.43;
    }
    #footer .bottom-ctt{
        gap: 3.2vw;
    }
    #footer .bottom-ctt p,
    #footer .bottom-ctt small{
        font-size: 2.666666666667vw;
        letter-spacing: 1px;
        line-height: 1.6;
    }
    #footer .bottom-ctt p{
        margin: 0 0 3.2vw;
    }
    #footer .bottom-ctt .page-top a img{
        width: 11.200000000000001vw;
        height: 11.200000000000001vw;
        margin: 0 auto 1.7333333333333332vw;
    }
    #footer .bottom-ctt .page-top a p{
        font-size: 2.66666666667vw;
    }
}

/* floating */
@media only screen and (max-width: 768px) {
    #floating{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 13.3333333333335vw;
        z-index: 10;
        display: flex;
        align-items: stretch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(30px);
        transition:
            opacity .5s ease,
            transform .6s cubic-bezier(.16,1,.3,1),
            visibility .5s ease;
    }
    #floating.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    #floating .link{
        flex: 1;
        width: 50%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.733333333334vw;
        font-weight: 500;
        letter-spacing: 1px;
        color: #fff;
        border: 1px solid #222222;
    }
    #floating .contact{
        gap: 2.66666666666667vw;
        background-color: #2D4A80;
        border-right: none;
        border-radius: 10px 0 0 0;
    }
    #floating .contact::after{
        content: "";
        width: 4.5333333333333333vw;
        height: 3.73333333333334vw;
        background-image: url(../img/common/mail-icon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #floating .claim{
        background-color: #EC6859;
        border-radius: 0 10px 0 0;
    }
    #floating .claim::after{
        position: absolute;
        top: 50%;
        right: 6.4vw;
        transform: translateY(-50%);
        content: "";
        width: 3.73333333333334vw;
        height: 4.8vw;
        background-image: url(../img/common/download-icon.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}


/* top
------------------------------*/

/* mv */
#top .mv{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: height .5s;
}
#top .mv.is-show{
    height: calc(100vh - 110px);
}
#top .mv .mv-video{
    position:absolute;
    inset:0;
    z-index:0;
}
#top .mv .mv-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}
#top .mv .mv-video video.pc{
    display: block;
}
#top .mv .mv-video video.sp{
    display: none;
}
#top .mv .txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    max-width: 86.66666666666667vw;
    width: 100%;
    z-index: 2;
}
#top .mv .txt h1{
    font-size: 112px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0.98;
    margin: 0 0 34px;
    color: #fff;
    /* text-shadow:
        0 4px 18px rgba(0,0,0,.22),
        0 1px 2px rgba(0,0,0,.15); */
}
#top .mv .txt p{
    font-size: 70px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
    /* text-shadow:
        0 3px 12px rgba(0,0,0,.18); */
}
#top .mv .txt h1 .space-remove {
    display: none;
}
#top .mv .txt h1 span,
#top .mv .txt p span{
    display: inline-block;
    opacity: 0;
    transform:translateY(40px);
}
#top .mv .txt.is-show h1 span,
#top .mv .txt.is-show p span{
    animation: mvChar .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes mvChar{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
#top .mv .pickup{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1100px;
    max-width: 61.111111111111114vw;
    padding: 30px;
    background-color: #F7F7F7;
    z-index: 3;
    border-radius: 0 5px 0 0;
}
#top .mv .pickup .pick-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
#top .mv .pickup .pick-inner .ctt-flex{
    display: flex;
    align-items: center;
    gap: 70px;
    flex: 1;
}
#top .mv .pickup .pick-inner .ctt-flex .label{
    position: relative;
    font-size: 20px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: #222222;
}
#top .mv .pickup .pick-inner .ctt-flex .label::before{
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 30px;
    background-image: repeating-linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 2px, transparent 2px, transparent 4px);
}
#top .mv .pickup .pick-inner .ctt-flex .ctt{
    display: flex;
    align-items: center;
    gap: 20px;
}
#top .mv .pickup .pick-inner .ctt-flex .ctt .date{
    font-size: 13px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#top .mv .pickup .pick-inner .ctt-flex .ctt .ttl{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#top .mv .pickup .pick-inner .view{
    flex-shrink: 0;
}
#top .mv .pickup .pick-inner .view a{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    color: #222;
    transition: all .3s;
}
#top .mv .pickup .pick-inner .view a:hover{
    opacity: 1;
    color: #DF5B4C;
}
#top .mv .pickup .pick-inner .view .view-arrow {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #222;
    border-radius: 50%;
}
#top .mv .pickup .pick-inner .view .view-arrow::before,
#top .mv .pickup .pick-inner .view .view-arrow::after {
    content: "→";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1;
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        color .3s;
}
#top .mv .pickup .pick-inner .view a:hover {
    opacity: 1;
    color: #DF5B4C;
}
#top .mv .pickup .pick-inner .view a:hover .view-arrow{
    border: 1px solid #DF5B4C;
}
#top .mv .pickup .pick-inner .view .view-arrow::before {
    color: #222;
    transform: translateX(0);
}
#top .mv .pickup .pick-inner .view .view-arrow::after {
    color: #DF5B4C;
    transform: translateX(-100%);
}
#top .mv .pickup .pick-inner .view a:hover .view-arrow::before {
    transform: translateX(100%);
}
#top .mv .pickup .pick-inner .view a:hover .view-arrow::after {
    transform: translateX(0);
}
#top .mv .movie{
    position: absolute;
    right: 50px;
    bottom: 0;
    display: block;
    max-width: 400px;
    width: 100%;
    padding: 15px 15px 55px;
    background-image: url(../img/top/mv-movie_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}
#top .mv .movie .img{
    position: relative;
}
#top .mv .movie .img::before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}
#top .mv .movie .img>img{
    position: relative;
    display: block;
    max-width: 370px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}
#top .mv .movie .btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
#top .mv .movie .btn>img{
    display: block;
    max-width: 60px;
    width: 100%;
    height: auto;
}
#top .mv .movie .btn::before {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background-image: url(../img/top/mv_movie_text.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: rotateLoop 20s linear infinite;
    transform-origin: center center;
    z-index: 1;
}
@keyframes rotateLoop {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
#top .mv .movie,
#top .mv .pickup {
    opacity: 0;
    transform: translateY(30px);
}
#top .mv .movie.is-show,
#top .mv .pickup.is-show {
    animation: mvPartsFade 1s linear forwards;
}
@keyframes mvPartsFade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#top .mv .youtube-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .5s ease,
        visibility .5s ease;
}
#top .mv .youtube-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#top .mv .youtube-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .92);
}
#top .mv .youtube-modal-inner {
    position: relative;
    z-index: 1;
    width: min(1400px, 100%);
    opacity: 0;
    transform: scale(.94);
    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
}
#top .mv .youtube-modal.is-open .youtube-modal-inner {
    opacity: 1;
    transform: scale(1);
}
#top .mv .youtube-modal-movie {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
#top .mv .youtube-modal-movie iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
#top .mv .youtube-modal-close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 20px);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
#top .mv .youtube-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 1px;
    background: #fff;
}
#top .mv .youtube-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}
#top .mv .youtube-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}
@media only screen and (max-width: 1600px) {
    #top .mv .txt h1{
        font-size: 100px;
        margin: 0 0 30px;
    }
    #top .mv .txt p{
        font-size: 60px;
    }
    #top .mv .movie{
        right: 50px;
        max-width: 350px;
    }
    #top .mv .movie img{
        max-width: 350px;
    }
    #top .mv .movie::before{
        width: 85px;
        height: 85px;
        top: 26%;
        left: 37.9%;
    }
}
@media only screen and (max-width: 768px) {
    #top .mv.is-show{
        height: calc(100dvh - 13.33333333333335vw);
    }
    #top .mv .mv-video video.pc{
        display: none;
    }
    #top .mv .mv-video video.sp{
        display: block;
    }
    #top .mv .txt{
        display: block;
        padding: 0;
        margin: 0 auto;
        max-width: 86.66666666666667vw;
        height: auto;
        transition: top .5s;
    }
    #top .mv.is-show .txt{
        top: 35%;
    }
    #top .mv .txt h1{
        font-size: 11.73333333333333vw;
        letter-spacing: 1px;
        line-height: 1;
        margin: 0 0 3.2vw;
    }
    #top .mv .txt p{
        font-size: 5.333333333333334vw;
        line-height: 1;
    }
    #top .mv .movie{
        left: 21.333333333333336vw;
        bottom: 24vw;
        max-width: 56.00000000000001vw;
        padding: 2.133333333333333336vw 2.13333333333333333336vw 8vw;
    }
    #top .mv .movie .img>img{
        max-width: 52vw;
    }
    #top .mv .movie .btn>img{
        max-width: 9.6vw;
    }
    #top .mv .movie .btn::before {
        width: 16vw;
        height: 16vw;
    }
    #top .mv .youtube-modal {
        padding: 5.333333333334vw;
    }
    #top .mv .youtube-modal-close {
        bottom: calc(100% + 3.2vw);
        width: 9.3333333333333333334vw;
        height: 9.3333333333333333334vw;
    }
    #top .mv .youtube-modal-close span {
        width: 8vw;
    }
    #top .mv .pickup{
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: 94.66666666666667vw;
        padding: 5.3333333333334vw;
        max-height: 24.266666666666666vw;
        border-radius: 0 5px 0 0;
    }
    #top .mv .pickup .pick-inner{
        display: block;
    }
    #top .mv .pickup .pick-inner .sp{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        margin: 0 0 4vw;
    }
    #top .mv .pickup .pick-inner .sp .label{
        position: relative;
        font-size: 4vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.33;
        color: #222222;
    }
    #top .mv .pickup .pick-inner .sp .label::before{
        position: absolute;
        top: 50%;
        right: -3.2vw;
        transform: translateY(-50%);
        content: "";
        width: 1px;
        height: 5.3333333333334vw;
        background-image: repeating-linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 2px, transparent 2px, transparent 4px);
    }
    #top .mv .pickup .pick-inner .sp .view{
        flex-shrink: 0;
    }
    #top .mv .pickup .pick-inner .sp .view a{
        display: flex;
        align-items: center;
        gap: 2.66666666667vw;
        font-size: 2.93333333333333vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 600;
        letter-spacing: 0;
        color: #222;
        transition: all .3s;
    }
    #top .mv .pickup .pick-inner .sp .view a:hover{
        opacity: 1;
    }
    #top .mv .pickup .pick-inner .ctt-flex .ctt{
        display: flex;
        align-items: center;
        gap: 3.2vw;
    }
    #top .mv .pickup .pick-inner .ctt-flex .ctt .date{
        font-size: 3.2svw;
        flex-shrink: 0;
    }
    #top .mv .pickup .pick-inner .ctt-flex .ctt .ttl{
        font-size: 3.2vw;
        text-decoration: underline;
    }
}

/* about */
#top .about{
    padding: 140px 0 340px;
    background-color: #F7F7F7;
}
#top .about .ctt{
    display: flex;
    gap: 90px;
}
#top .about .ctt .about-slider{
    position: relative;
    flex-shrink: 0;
    max-width: 51.1111111111111vw;
    width: 100%;
    height: 32.22222222222222vw;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
#top .about .ctt .about-slider .swiper-slide{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#top .about .ctt .about-slider .swiper-slide img{
    width: 100%;
    height: auto;
}
#top .about .ctt .about-slider .swiper-pagination{
    position: absolute;
    bottom: 30px;
    right: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 30px;
}
#top .about .ctt .about-slider .swiper-pagination .swiper-pagination-bullet{
    background: #ECECEC;
    opacity: 1;
}
#top .about .ctt .about-slider .swiper-pagination .swiper-pagination-bullet-active{
    background: #EC6859;
}
#top .about .ctt .txt{
    flex: 1;
}
#top .about .ctt .txt h2{
    font-size: 45px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.42;
    margin: 0 0 48px;
    color: #222222;
}
#top .about .ctt .txt .en{
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.38;
    margin: 0 0 60px;
    color: #E1622F;
}
#top .about .ctt .txt .note{
    max-width: 540px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 2;
    margin: 0 0 78px;
    color: #222222;
}
#top .about .ctt .txt .btn a{
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.25;
    max-width: 340px;
    width: 100%;
    padding: 26px 0 28px;
    color: #FFFFFF;
    background-color: #222222;
    border-radius: 100vw;
}
#top .about .ctt .txt .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_white_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
#top .about .ctt .txt .btn a:hover{
    opacity: 1;
    background-color: #DF5B4C;
}
#top .about .ctt .txt .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
@media only screen and (max-width: 1600px) {
    #top .about .ctt .txt h2{
        font-size: 38px;
        margin: 0 0 40px;
        color: #222222;
    }
}
@media only screen and (max-width: 1440px) {
    #top .about{
        padding: 140px 0 300px;
    }
}
@media only screen and (max-width: 768px) {
    #top .about{
        padding: 10.666666666668vw 0 48vw;
    }
    #top .about .ctt{
        display: block;
    }
    #top .about .ctt .about-slider{
        max-width: 93.3333333333333vw;
        height: 58.666666666666664vw;
        border-radius: 0 5px 5px 0;
        margin-left: 0;
    }
    #top .about .ctt .about-slider .swiper-pagination{
        bottom: 4vw;
        padding-right: 2.666666666666667vw;
    }
    #top .about .ctt .about-slider .swiper-pagination .swiper-pagination-bullet{
        background: #ECECEC;
        opacity: 1;
        width: 1.6vw;
        height: 1.6vw;
        margin: 0 0.8vw;
    }
    #top .about .ctt .about-slider .swiper-pagination .swiper-pagination-bullet-active{
        background: #EC6859;
    }
    #top .about .ctt .txt{
        max-width: 84vw;
        width: 100%;
        margin: 12vw auto 0;
    }
    #top .about .ctt .txt h2{
        font-size: 6.133333333333333vw;
        letter-spacing: 2px;
        margin: 0 0 5.86666666666666vw;
    }
    #top .about .ctt .txt .en{
        font-size: 2.933333333333vw;
        line-height: 1.64;
        margin: 0 0 8vw;
    }
    #top .about .ctt .txt .note{
        max-width: none;
        font-size: 3.733333333333334vw;
        letter-spacing: 1px;
        line-height: 2;
        margin: 0 0 10.666666666666668vw;
    }
    #top .about .ctt .txt .btn a{
        font-size: 3.4666666666663vw;
        letter-spacing: 1px;
        line-height: 1.25;
        max-width: 69.33333333333334vw;
        width: 100%;
        padding: 5.333333333333334vw 0 5.86666666666666vw;
        margin: 0 auto;
    }
    #top .about .ctt .txt .btn a::before{
        width: 5.866666666666vw;
        height: 5.866666666666vw;
        right: 4vw;
    }
}


/* home_about */
#top .home_about{
    position: relative;
    padding: 40px 0 700px;
    background-color: #3C754F;
    overflow: visible;
}
#top .home_about::before{
    position: absolute;
    top: calc(-99vw * 4 / 45);
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 100%;
    aspect-ratio: 45 / 4;
    height: auto;
    background-image: url(../img/top/map_top-radius.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}
#top .home_about .top_txt-slider{
    position: absolute;
    top: calc(-170vw * 4 / 45);
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    width: 100%;
}
#top .home_about .top_txt-slider .slide-track {
    display: inline-block;
    animation: slide 20s linear infinite;
}
#top .home_about .top_txt-slider .slide-track span {
    display: inline-block;
    padding: 0 20px;
}
#top .home_about .top_icon{
    position: absolute;
    top: calc(-135vw * 4 / 45);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#top .home_about .top_icon.u-anime-up.play {
	animation: anime-center-up 0.6s forwards;
    animation-delay: 0.5s;
}
#top .home_about .top_icon img{
    display: block;
    max-width: 280px;
    width: 100%;
}
#top .home_about .txt{
    position: relative;
    max-width: 530px;
    width: 100%;
    color: #fff;
    z-index: 2;
}
#top .home_about .txt h2{
    display: block;
    font-size: 45px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.44;
    margin: 0 0 50px;
    color: #fff;
}
#top .home_about .txt .note{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 2;
    margin: 0 0 60px;
    color: #fff;
}
#top .home_about .txt .info{
    display: block;
    max-width: 500px;
    width: 100%;
}
#top .home_about .txt .info dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px dashed #fff;
}
#top .home_about .txt .info dl:last-of-type{
    align-items: flex-end;
    margin: 0;
}
#top .home_about .txt .info dt .label{
    font-size: 14px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.71;
    margin: 0 0 12px;
    color: #fff;
}
#top .home_about .txt .info dt p{
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}
#top .home_about .txt .info dd{
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
#top .home_about .txt .info dd .number{
    font-size: 68px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 0.97;
    letter-spacing: 0.02em;
    color: #F3D04E;
}
#top .home_about .txt .info dd .unit{
    display: block;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    padding-bottom: 10px;
}
#top .home_about .txt .info dd .unit.sma{
    font-size: 20px;
    line-height: 1;
    padding-left: 4px;
}

/* -------------- svg 要素 ------------- */

#top .home_about .svg{
    position: absolute;
    top: -10vw;
    left: 50%;
    transform: translateX(-45%);
    display: block;
    max-width: 87.77777777777777vw;
    width: 1580px;
    margin: 0 auto;
    z-index: 1;
}
#top .home_about .stroke-border{
    position: relative;
    z-index: 1;
}
/* home内パーツ初期状態 */
#top .home_about .svg .home{
    pointer-events: none;
}
#top .home_about .svg .home .line,
#top .home_about .svg .home .home-map,
#top .home_about .svg .home rect,
#top .home_about .svg .home > path:not(.line) {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
/* 静岡県 */
#top .home_about .svg .home.is-pref-show .line {
    animation: home-pref-show .6s ease-out forwards;
}
/* home-map ピン */
#top .home_about .svg .home .home-map.is-show {
    animation: home-map-kurun .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
/* ラベル背景 */
#top .home_about .svg .home.is-label-show rect {
    animation: home-label-show .45s ease-out forwards;
}
/* DOG LABO文字 */
#top .home_about .svg .home.is-text-show > path:not(.line) {
    animation: home-label-show .45s ease-out forwards;
}
/* 地域ピン 初期状態 */
#top .home_about .svg .top-circle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: translateY(-140px);
}
/* 地域ピン 表示 */
#top .home_about .svg .top-circle.is-show {
    animation: pin-drop .65s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes home-pref-show {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes home-map-kurun {
  0% {
    opacity: 0;
    transform: scale(.55) rotate(-180deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.08) rotate(12deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes home-label-show {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-140px);
  }
  75% {
    opacity: 1;
    transform: translateY(10px);
  }
  90% {
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#top .home_about .top-circle {
    position: relative;
    z-index: 20;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: translateY(-180px);
}
.top-circle.is-show {
    animation: pin-drop .6s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 1.5s;
}
@keyframes pin-drop {
    0% {
        opacity: 0;
        transform: translateY(-180px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.top-circle.is-show{
    animation: pin-drop-bounce .55s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes pin-drop-bounce {
    0%{
        opacity:0;
        transform:translateY(-180px);
    }
    70%{
        opacity:1;
        transform:translateY(12px);
    }
    85%{
        transform:translateY(-8px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}
#top .home_about .top-circle circle {
    position: relative;
    transform-box: fill-box;
    transform-origin: center;
}
#top .home_about .top-circle circle.circ01,
#top .home_about .top-circle circle.circ02,
#top .home_about .top-circle circle.circ03 {
    animation: circle-animation 2s ease-out infinite forwards;
}
#top .home_about .top-circle circle.circ02 {
    animation-delay: 1s;
}
#top .home_about .top-circle circle.circ03 {
    animation-delay: 2s;
}
@keyframes circle-animation {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}
#top .home_about .top-circle .line{
    stroke-dashoffset: 1000;
    transition:none;
}
#top .home_about .top-circle .top-circle.is-line .line{
    animation: lineDraw .9s ease forwards;
}
@keyframes lineDraw{
    to{
        stroke-dashoffset:0;
    }
}
#top .home_about .top-circle .img{
    position: relative;
    z-index: 20;
    max-width: 190px;
    width: 190px;
    height: auto;
    transform-box: fill-box;
    transform-origin: center bottom;
    /* pointer-events: none; */
}
#top .home_about .top-circle .img::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 20px);
    transform-origin: bottom center;
    z-index: -1;
}
#top .home_about .top-circle:hover .img {
    animation: map-img-bounce .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes map-img-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-14px) scale(1.04);
  }
  58% {
    transform: translateY(0) scale(1.005, .995);
  }
  75% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
#top .home_about .top-circle path{
    pointer-events: none;
    opacity: 0;
}
#top .home_about .top-circle.is-line path {
    opacity: 1;
}
#top .home_about .top-circle:hover{
    opacity: 1;
}
@keyframes photo-pop {
  0%{
    transform:translateY(0) scale(1);
  }
  35%{
    transform:translateY(-14px) scale(1.06);
  }
  55%{
    transform:translateY(2px) scale(.99);
  }
  75%{
    transform:translateY(-3px) scale(1.02);
  }
  100%{
    transform:translateY(0) scale(1);
  }
}
#top .home_about .top-circle:hover circle{
    opacity: 0.7;
}

/* ------------- svg 要素 -------------- */

#top .home_about .bottom_icon{
    position: absolute;
    bottom: 215px;
    right: 50px;
}
#top .home_about .bottom_icon .bottom_icon01{
    display: block;
    max-width: 475px;
    width: 100%;
}
#top .home_about .text-slider {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    width: 100%;
}
#top .home_about .text-slider .slide-track {
    display: flex;
    align-items: center;
    gap: 25px;
    width: max-content;
    animation: slide 35s linear infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
#top .home_about .text-slider .slide-track .slide-item {
    display: flex;
    align-items: center;
    gap: 25px;
    white-space: nowrap;
}
#top .home_about .text-slider .slide-track .slide-item span{
    display: block;
    font-size: 75px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.07;
    color: #fff;
}
#top .home_about .text-slider .slide-track .slide-item img{
    display: block;
    max-width: 120px;
    width: 100%;
    border-radius: 5px;
}

#top .home_about .txt > *{
    opacity: 0;
    transform: translateY(40px);
}
#top .home_about.is-text-show .txt h2,
#top .home_about.is-text-show .txt .note,
#top .home_about.is-text-show .txt .info{
    animation: txtFade .8s cubic-bezier(.16,1,.3,1) forwards;
}
#top .home_about.is-text-show .txt .note{
    animation-delay: .25s;
}
#top .home_about.is-text-show .txt .info{
    animation-delay: .5s;
}
@keyframes txtFade{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@media only screen and (max-width: 1600px) {
    #top .home_about{
        padding: 40px 0 575px;
    }
    #top .home_about::before{
        top: calc(-99vw * 4 / 45);
        aspect-ratio: 45 / 4;
    }
    #top .home_about .top_icon{
        position: absolute;
        top: calc(-135vw * 4 / 45);
        left: 50%;
        transform: translateX(-50%);
    }
    #top .home_about .top_icon img{
        max-width: 260px;
    }
    #top .home_about .txt{
        max-width: 530px;
    }
    #top .home_about .txt h2{
        font-size: 42px;
        margin: 0 0 40px;
    }
    #top .home_about .txt .note{
        font-size: 16px;
        margin: 0 0 50px;
    }
    #top .home_about .txt .info dl{
        padding: 0 0 20px;
        margin: 0 0 20px;
        border-bottom: 1px dashed #fff;
    }
    #top .home_about .txt .info dt .label{
        font-size: 14px;
        margin: 0 0 12px;
    }
    #top .home_about .txt .info dt p{
        font-size: 21px;
    }
    #top .home_about .txt .info dd{
        gap: 6px;
    }
    #top .home_about .txt .info dd .number{
        font-size: 68px;
    }
    #top .home_about .txt .info dd .unit{
        font-size: 25px;
        padding-bottom: 10px;
    }
    #top .home_about .txt .info dd .unit.sma{
        font-size: 20px;
        padding-left: 4px;
    }
    #top .home_about .svg{
        top: -8vw;
        transform: translateX(-48%);
        max-width: 87.77777777777777vw;
    }
    #top .home_about .bottom_icon{
        bottom: 12vw;
        right: 4vw;
    }
    #top .home_about .bottom_icon .bottom_icon01{
        max-width: 400px;
    }
}
@media only screen and (max-width: 1440px) {
    #top .home_about{
        padding: 2.7777777777vw 0 36.80555555555556vw;
    }
    #top .home_about .txt .info{
        max-width: 450px;
    }
    #top .home_about .txt .info dl{
        padding: 0 0 1.0416666666666665vw;
        margin: 0 0 1.0416666666666665vw;
    }
    #top .home_about .txt .info dt .label{
        font-size: 0.8333333333333334vw;
        margin: 0 0 0.6944444444444vw;
    }
    #top .home_about .txt .info dt p{
        font-size: 1.388888888888vw;
    }
    #top .home_about .txt .info dd{
        gap: 0.3472222222vw;
    }
    #top .home_about .txt .info dd .number{
        font-size: 4.1666666666666vw;
    }
    #top .home_about .txt .info dd .unit{
        font-size: 1.52777777777777vw;
        padding-bottom: 0.694444444444vw;
    }
    #top .home_about .txt .info dd .unit.sma{
        font-size: 1.38888888888vw;
        padding-left: 0.2777777777777778vw;
    }
    #top .home_about .svg{
        top: -9vw;
        transform: translateX(-50%);
    }
}
@media only screen and (max-width: 768px) {
    #top .home_about{
        padding: 18.6666666668vw 0 36vw;
        background-image: url(../img/top/sp_map.svg);
        background-position: 50% -2.6666666666667vw;
        background-repeat: no-repeat;
    }
    #top .home_about::before{
        top: calc(-99vw * 4 / 45);
        aspect-ratio: 45 / 4;
        background-image: url(../img/top/map_top-radius.png);
    }
    #top .home_about .top_txt-slider{
        top: calc(-350vw * 4 / 45);
    }
    #top .home_about .top_txt-slider .slide-track {
        animation: slide 10s linear infinite;
    }
    #top .home_about .top_txt-slider .slide-track span {
        width: 200%;
        padding: 0 5.333333333333334vw;
    }
    #top .home_about .top_icon{
        top: calc(-330vw * 4 / 45);
    }
    #top .home_about .top_icon img{
        max-width: 38.666666666666664vw;
    }
    #top .home_about .txt{
        position: relative;
        width: 100%;
        margin: 0 0 52vw;
    }
    #top .home_about .txt h2{
        font-size: 6.13333333333333vw;
        letter-spacing: 1px;
        line-height: 1.52;
        margin: 0 0 8vw;
    }
    #top .home_about .txt .note{
        font-size: 3.73333333333334vw;
        letter-spacing: 0;
        line-height: 1.86;
        margin: 0;
    }
    #top .home_about .txt .info{
        display: none;
    }
    #top .home_about .sp .map-slide{
        margin-left: 5.33333333334vw;
        margin-bottom: 14.6666666666666vw;
        overflow: visible;
    }
    #top .home_about .sp .map-slide .swiper-slide {
        position: relative;
        padding: 1.333333333335vw;
        width: 37.333333333333336vw;
        border-radius: 3px;
        background-color: #fff;
    }
    /* #top .home_about .sp .map-slide .swiper-slide::before{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        content: "";
        width: 10.6666666668vw;
        height: 10.6666666668vw;
        background-image: url(../img/top/sp_map_btn.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    } */
    #top .home_about .sp .map-slide .swiper-slide img {
        display: block;
        width: 100%;
        border-radius: 3px;
    }
    #top .home_about .sp .info{
        display: block;
        width: 100%;
    }
    #top .home_about .sp .info dl{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 3.2vw;
        margin: 0 0 4vw;
        border-bottom: 1px dashed #fff;
    }
    #top .home_about .sp .info dl:last-of-type{
        align-items: flex-end;
        margin: 0;
    }
    #top .home_about .sp .info dt .label{
        font-size: 2.6666666666667vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.5;
        margin: 0 0 2.13333333336vw;
        color: #fff;
    }
    #top .home_about .sp .info dt p{
        font-size: 3.7333333333334vw;
        font-weight: 600;
        letter-spacing: 1px;
        color: #fff;
    }
    #top .home_about .sp .info dd{
        display: flex;
        align-items: flex-end;
        gap: 1.06666666667vw;
    }
    #top .home_about .sp .info dd .number{
        font-size: 11.200000000000001vw;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        line-height: 0.97;
        letter-spacing: 0.02em;
        color: #F3D04E;
    }
    #top .home_about .sp .info dd .unit{
        display: block;
        font-size: 4vw;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0;
        color: #fff;
        padding-bottom: 1.666667vw;
    }
    #top .home_about .sp .info dd .unit.sma{
        font-size: 3.2vw;
        line-height: 1;
        padding-left: 0.5333333333333vw;
    }
    #top .home_about .svg,
    #top .home_about .bottom_icon{
        display: none;
    }
    #top .home_about .text-slider {
        position: absolute;
        bottom: 8vw;
        left: 0;
        right: 0;
        overflow: hidden;
        z-index: 1;
        white-space: nowrap;
        width: 100%;
    }
    #top .home_about .text-slider .slide-track {
        display: flex;
        align-items: center;
        gap: 3.733333333334vw;
        width: max-content;
        animation: slide 35s linear infinite;
    }
    @keyframes slide {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    #top .home_about .text-slider .slide-track .slide-item {
        display: flex;
        align-items: center;
        gap: 3.7333333333333334vw;
        white-space: nowrap;
    }
    #top .home_about .text-slider .slide-track .slide-item span{
        display: block;
        font-size: 10.666666666668vw;
        font-family: "Albert Sans", sans-serif;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.07;
        color: #fff;
    }
    #top .home_about .text-slider .slide-track .slide-item img{
        display: block;
        max-width: 16.8vw;
        width: 100%;
        border-radius: 5px;
    }
}


/* work */
#top .work{
    padding: 110px 0 115px;
    overflow: hidden;
}
#top .work .ttl_area{
    color: #222222;
    margin: 0 0 60px;
}
#top .work .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 30px;
}
#top .work .ttl_area .flex{
    display: flex;
    align-items: center;    
    gap: 50px;
}
#top .work .ttl_area .flex h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
}
#top .work .ttl_area .flex .note{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
}
#top .work .works-flex{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
#top .work .ctt{
    margin: 0 0 80px;
    overflow: unset;
}
#top .work .ctt .swiper-slide{
    display: block;
    max-width: 380px;
    width: 100%;
}
#top .work .ctt .item{
    display: block;
    max-width: 380px;
    width: 100%;
    padding: 20px 20px 25px;
    border-radius: 10px;
    box-shadow: 0 8px 0 #0000000D;
    background-color: #fff;
}
#top .work .ctt .item:hover{
    opacity: 1;
    transform: translate(0, 7px);
    box-shadow: 0 1px 0 #0000000D;
}
#top .work .ctt .item .img{
    position: relative;
    width: 340px;
    height: 230px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 20px;
}
#top .work .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
#top .work .ctt .item .label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
}
#top .work .ctt .item .label .cat{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.83;
    padding: 2px 11px;
    margin: 0;
    color: #FFFFFF;
    background-color: #446898;
    border-radius: 100vw;
}
#top .work .ctt .item .label .date{
    font-size: 13px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222;
}
#top .work .ctt .item .ttl{
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.67;
    min-height: 90px;
    padding: 0 0 30px;
    margin: 0 0 25px;
}
#top .work .ctt .item .ttl::before{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(to right, rgb(0,0,0) 0px, rgb(0,0,0) 2px, transparent 2px, transparent 4px);
}
#top .work .ctt .item .info-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
#top .work .ctt .item .info-area .tag{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#top .work .ctt .item .info-area .tag span{
    color: #EC6859;
}
#top .work .ctt .item .info-area .prefecture{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222222;
}
#top .work .ctt .item .info-area .prefecture::before{
    content: "";
    width: 16px;
    height: 20px;
    background-image: url(../img/common/map-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#top .work .link-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 75px;
}
#top .work .single-link{
    justify-content: center;
}
#top .work .link-area .pagenavigation{
    display: flex;
    align-items: center;
    gap: 35px;
}
#top .work .link-area .pagenavigation .swiper-button{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 80px;
    height: 45px;
    margin: 0;
    border: 1px solid #222222;
    border-radius: 100vw;
    background-color: #fff;
    transition: all .3s;
}
#top .work .link-area .pagenavigation .swiper-button:hover{
    background-color: #222222;
}
#top .work .link-area .pagenavigation .swiper-button-next:after,
#top .work .link-area .pagenavigation .swiper-button-prev:after{
    font-size: 12px;
    font-weight: bold;
    color: #222222;
    transition: all .3s;
}
#top .work .link-area .pagenavigation .swiper-button-next:hover:after,
#top .work .link-area .pagenavigation .swiper-button-prev:hover:after{
    color: #fff;
}
#top .work .link-area .pagenavigation .swiper-pagination{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
}
#top .work .link-area .pagenavigation .swiper-pagination span{
    font-size: 15px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#top .work .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
    padding: 0 4px;
}
#top .work .link-area .btn{
    display: block;
    max-width: 400px;
    width: 100%;
}
#top .work .link-area .btn a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    padding: 26px 0;
    color: #222222;
    background-color: #FFFFFF;
    border: 1px solid #171717;
    border-radius: 100vw;
    transition: all .3s;
}
#top .work .link-area .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .work .link-area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
}
#top .work .link-area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
#top .work .page-link{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
}
#top .work .page-link .item{
    display: block;
    max-width: 420px;
    width: 100%;
    padding: 130px 30px 35px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    box-shadow: 0 8px 0 #0000001A;
    transition: all .3s;
}
#top .work .page-link .const{
    background-image: url(../img/top/work_linkbg01.png);
}
#top .work .page-link .maint{
    background-image: url(../img/top/work_linkbg02.png);
}
#top .work .page-link .price{
    background-image: url(../img/top/work_linkbg03.png);
}
#top .work .page-link .item:hover{
    opacity: 1;
    transform: translate(0, 7px);
    box-shadow: 0 1px 0 #0000001A;
}
#top .work .page-link .item .label{
    display: block;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 1.29;
    margin: 0 0 13px;
    color: #fff;
}
#top .work .page-link .item .txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#top .work .page-link .item .txt .ttl{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.14;
    color: #fff;
}
#top .work .page-link .item .txt .view{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.38;
    color: #fff;
}
#top .work .page-link .item .txt .view::after{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_white_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 768px) {
    #top .work{
        padding: 21.333333333333336vw 0 25.333333333333336vw;
    }
    #top .work .ttl_area{
        margin: 0 0 9.3333333333334vw;
    }
    #top .work .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        margin: 0 0 3.733333333333334vw;
    }
    #top .work .ttl_area .flex{
        display: block;
    }
    #top .work .ttl_area .flex h2{
        font-size: 12.8vw;
        text-align: center;
        line-height: 1.25;
        margin: 0 0 3.46666666666663vw;
    }
    #top .work .ttl_area .flex .note{
        font-size: 4vw;
        text-align: center;
    }
    #top .work .ctt{
        margin: 0 0 12vw 5.333333333334vw;
        overflow: visible;
    }
    #top .work .works-flex{
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 5.33333333334vw 2.66666666667vw;
        margin: 0 0 12vw;
    }
    #top .work .ctt .swiper-slide{
        max-width: 72vw;
    }
    #top .work .ctt .item{
        max-width: 72vw;
        padding: 4vw 4vw 4.8vw;
        border-radius: 5px;
        box-shadow: 0 5px 0 #0000000D;
    }
    #top .work .ctt .item:hover{
        transform: translate(0, 4px);
    }
    #top .work .ctt .item .img{
        width: 64vw;
        height: 42.66666666666667vw;
        margin: 0 0 8vw;
    }
    #top .work .ctt .item .label{
        margin: 0 0 4vw;
    }
    #top .work .ctt .item .label .cat{
        font-size: 2.4vw;
        padding: 0.5333333333333vw 2.13333333333336vw;
    }
    #top .work .ctt .item .label .date{
        font-size: 2.6666666666667vw;
        letter-spacing: 1px;
    }
    #top .work .ctt .item .ttl{
        font-size: 4vw;
        line-height: 1.6;
        min-height: 17.333333333333336vw;
        padding: 0 0 4.8vw;
        margin: 0 0 4vw;
    }
    #top .work .ctt .item .info-area{
        gap: 2.666666666667vw;
    }
    #top .work .ctt .item .info-area .tag{
        font-size: 2.666666666666667vw;
    }
    #top .work .ctt .item .info-area .prefecture{
        gap: 1.66666666666667vw;
        font-size: 2.666666666666667vw;
    }
    #top .work .ctt .item .info-area .prefecture::before{
        width: 2.933333333333333vw;
        height: 3.733333333333334vw;
    }
    #top .work .link-area{
        display: block;
        margin: 0 0 16vw;
    }
    #top .work .single-link{
        justify-content: center;
    }
    #top .work .link-area .pagenavigation{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6.666666666666667vw;
        margin: 0 0 9.3333333334vw;
    }
    #top .work .link-area .pagenavigation .swiper-button{
        width: 16vw;
        height: 8.7999999999999vw;
    }
    #top .work .link-area .pagenavigation .swiper-button-next:after,
    #top .work .link-area .pagenavigation .swiper-button-prev:after{
        font-size: 2.6666666666667vw;
    }
    #top .work .link-area .pagenavigation .swiper-pagination span{
        font-size: 3.2vw;
    }
    #top .work .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
        padding: 0 1.06666666666666667vw;
    }
    #top .work .link-area .btn{
        max-width: 69.33333333333334vw;
        margin: 0 auto;
    }
    #top .work .link-area .btn a{
        max-width: 69.33333333333334vw;
        font-size: 3.733333333333334vw;
        padding: 4.8vw 0 5.333333333334vw;
        margin: 0 auto;
    }
    #top .work .link-area .btn a::before{
        width: 5.866666666666666666vw;
        height: 5.866666666666666666vw;
        right: 4vw;
    }
    #top .work .page-link{
        display: block;
    }
    #top .work .page-link .item{
        max-width: none;
        padding: 22.666666666666664vw 4.8vw 4.266666666667vw 8vw;
        margin: 0 0 5.33333333333334vw;
        box-shadow: none;
    }
    #top .work .page-link .item:hover{
        opacity: 0.7;
        transform: none;
        box-shadow: 0;
    }
    #top .work .page-link .item .label{
        font-size: 2.999999999993vw;
        line-height: 1.3;
        margin: 0 0 2vw;
    }
    #top .work .page-link .item .txt .ttl{
        font-size: 4.8vw;
    }
    #top .work .page-link .item .txt .view{
        gap: 2.66666666666667vw;
        font-size: 2.66666666666667vw;
    }
    #top .work .page-link .item .txt .view::after{
        width: 4.266666666666667vw;
        height: 4.266666666666667vw;
        margin-bottom: 1.333333333335vw;
    }
}


/* reazon */
#top .reazon{
    position: relative;
    padding: 140px 0 100px;
    border-radius: 40px 0 0 0;
    background-color: #446898;
    overflow: visible;
}
#top .reazon .inner{
    position: relative;
    z-index: 2;
}
#top .reazon .ctt-flex{
    display: flex;
    justify-content: space-between;
}
#top .reazon .ttl_area{
    color: #fff;
    flex-shrink: 0;
}
#top .reazon .ttl_sticky{
    position: sticky;
    top: 140px;
}
#top .reazon .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 auto 30px;    
    color: #fff;
}
#top .reazon .ttl_area h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 auto 40px;    
    color: #fff;
}
#top .reazon .ttl_area .note{
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.76;
    margin: 0;
    color: #fff;
}
#top .reazon .ctt{
    display: block;
    max-width: 900px;
    width: 100%;
}
#top .reazon .ctt .item{
    position: sticky;
    top: 140px;
    display: block;
    padding: 30px 35px 40px;
    margin: 0 0 20px;
    border-radius: 20px;
    background-color: #fff;
}
#top .reazon .ctt .item:nth-child(1) {
    z-index: 1;
}
#top .reazon .ctt .item:nth-child(2) {
    z-index: 2;
}
#top .reazon .ctt .item:nth-child(3) {
    z-index: 3;
}
#top .reazon .ctt .item:nth-child(4) {
    z-index: 4;
    margin: 0;
}
#top .reazon .ctt .item .label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
}
#top .reazon .ctt .item .label span{
    font-size: 15px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.33;
    color: #436898;
}
#top .reazon .ctt .item .label .number{
    font-size: 40px;
    font-family: "Albert Sans", sans-serif;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 0.75;
    color: #436898;
}
#top .reazon .ctt .item .flex{
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
#top .reazon .ctt .item .flex .img{
    flex-shrink: 0;
    border-radius: 10px;
}
#top .reazon .ctt .item .flex .img img{
    display: block;
    max-width: 400px;
    width: 100%;
}
#top .reazon .ctt .item .flex .txt{
    display: block;
    padding: 20px 0 0;
    max-width: 390px;
    width: 100%;
}
#top .reazon .ctt .item .flex .txt h3{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0 0 30px;
    color: #436898;
}
#top .reazon .ctt .item .flex .txt .note{
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.73;
    margin: 0;
    color: #222222;
}
#top .reazon .text-slider {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    width: 100%;
}
#top .reazon .text-slider .slide-track {
    display: inline-block;
    animation: slide 20s linear infinite;
}
#top .reazon .text-slider .slide-track span {
    display: inline-block;
    padding: 0 10px;
}
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 768px) {
    #top .reazon{
        padding: 21.333333333336vw 0 32vw;
        border-radius: 20px 0 0 0;
    }
    #top .reazon .inner{
        padding: 0 8vw;
    }
    #top .reazon .ctt-flex{
        display: block;
    }
    #top .reazon .ttl_area{
        text-align: center;
        margin: 0 0 10.66666666666668vw;
    }
    #top .reazon .ttl_area .label{
        font-size: 4.8vw;
        font-weight: 600;
        letter-spacing: 2px;
        text-align: center;
        margin: 0 auto 3.2vw;    
    }
    #top .reazon .ttl_area h2{
        font-size: 12.8vw;
        text-align: center;
        line-height: 1.25;
        margin: 0 auto 4vw;   
    }
    #top .reazon .ttl_area .note{
        font-size: 4vw;
        letter-spacing: 1px;
        line-height: 1.76;
    }
    #top .reazon .ctt{
        max-width: none;
    }
    #top .reazon .ctt .item{
        top: 24vw;
        display: block;
        max-width: 80vw;
        width: 100%;
        padding: 6.4vw 6.6666666666667vw 10.66666666666668vw;
        margin: 0 auto 5.333333333333334vw;
        border-radius: 10px;
    }
    #top .reazon .ctt .item:last-of-type{
        margin: 0 auto;
    }
    #top .reazon .ctt .item .label{
        margin: 0 0 4.26666666666666667vw;
    }
    #top .reazon .ctt .item .label span{
        font-size: 2.93333333333333vw;
        line-height: 1.02;
    }
    #top .reazon .ctt .item .label .number{
        font-size: 5.333333333333334vw;
        line-height: 1;
    }
    #top .reazon .ctt .item .flex{
        display: block;
    }
    #top .reazon .ctt .item .flex .img{
        max-width: 66.66666666666666vw;
        width: 100%;
        margin: 0 0 6.6666666666666667vw;
        border: 1px solid #222222;
        border-radius: 10px;
    }
    #top .reazon .ctt .item .flex .img img{
        display: block;
        max-width: 66.66666666666666vw;
        width: 100%;
        border-radius: 10px;
    }
    #top .reazon .ctt .item .flex .txt{
        display: block;
        padding: 0;
        max-width: none;
        width: 100%;
    }
    #top .reazon .ctt .item .flex .txt h3{
        font-size: 5.333333333333334vw;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 1.27;
        margin: 0 0 5.3333333333334vw;
    }
    #top .reazon .ctt .item .flex .txt .note{
        font-size: 3.4666666666666663vw;
        letter-spacing: 0;
        line-height: 1.73;
    }
    #top .reazon .text-slider {
        bottom: 4vw;
        width: 150%;
        z-index: 1;
    }
    #top .reazon .text-slider .slide-track {
        animation: slide 15s linear infinite;
    }
    #top .reazon .text-slider .slide-track span {
        padding: 0 2.6666666666667vw;
    }
}


/* solution */
#top .solution{
    position: relative;
    z-index: 2;
    padding: 130px 0 190px;
    margin: -40px 0 0;
    border-radius: 0 40px 0 0;
    background-color: #2D2D2D;
    overflow: hidden;
}
#top .solution .ttl_area{
    color: #fff;
    margin: 0 0 85px;
}
#top .solution .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 30px;
}
#top .solution .ttl_area .flex{
    display: flex;
    align-items: center;
    gap: 100px;
}
#top .solution .ttl_area .flex h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
}
#top .solution .ttl_area .flex .note{
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
}
#top .solution .ctt{
    margin: 0 0 80px;
    overflow: visible;
}
#top .solution .ctt.solution-flex{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
#top .solution .ctt .swiper-slide{
    display: block;
    max-width: 380px;
    width: 100%;
}
#top .solution .ctt .item{
    display: block;
    max-width: 380px;
    width: 100%;
    padding: 20px;
    background-color: #768185;
    border-radius: 10px;
    box-shadow: 0 8px 0 #0000001A;
}
#top .solution .ctt .item:hover{
    opacity: 1;
    transform: translate(0, 7px);
    box-shadow: 0 1px 0 #0000001A;
}
#top .solution .ctt .item .img{
    position: relative;
    width: 340px;
    height: 380px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #1A2C44;
    margin: 0 0 25px;
}
#top .solution .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
#top .solution .ctt .item .ttl{
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.55;
    margin: 0 0 25px;
    color: #fff;
}
#top .solution .ctt .item .note{
    position: relative;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.64;
    padding: 0 0 30px;
    margin: 0 0 20px;
    color: #fff;
}
#top .solution .ctt .item .note::before{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(to right, #fff 0px, #fff 2px, transparent 2px, transparent 4px);
}
#top .solution .ctt .item .view{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
    color: #fff;
}
#top .solution .ctt .item .view::after{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_white_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#top .solution .link-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#top .solution .single-link{
    justify-content: center;
}
#top .solution .link-area .pagenavigation{
    display: flex;
    align-items: center;
    gap: 35px;
}
#top .solution .link-area .pagenavigation .swiper-button{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 80px;
    height: 45px;
    margin: 0;
    border: 1px solid #222222;
    border-radius: 100vw;
    background-color: #fff;
    transition: all .3s;
}
#top .solution .link-area .pagenavigation .swiper-button:hover{
    background-color: #222222;
    border: 1px solid #fff;
}
#top .solution .link-area .pagenavigation .swiper-button-next:after,
#top .solution .link-area .pagenavigation .swiper-button-prev:after{
    font-size: 12px;
    font-weight: bold;
    color: #222222;
}
#top .solution .link-area .pagenavigation .swiper-button-next:hover:after,
#top .solution .link-area .pagenavigation .swiper-button-prev:hover:after{
    color: #fff;
}
#top .solution .link-area .pagenavigation .swiper-pagination{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
}
#top .solution .link-area .pagenavigation .swiper-pagination span{
    font-size: 15px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
}
#top .solution .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
    padding: 0 4px;
}
#top .solution .link-area .btn{
    display: block;
    max-width: 400px;
    width: 100%;
}
#top .solution .link-area .btn a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    padding: 26px 0;
    color: #222222;
    background-color: #FFFFFF;
    border: 1px solid #171717;
    border-radius: 100vw;
    transition: all .3s;
}
#top .solution .link-area .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .solution .link-area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
}
#top .solution .link-area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
@media only screen and (max-width: 768px) {
    #top .solution{
        margin: -5.33333334vw 0 0;
        padding: 24vw 0 25.333333333333336vw;
        border-radius: 0 20px 0 0;
    }
    #top .solution .ttl_area{
        margin: 0 0 9.3333333333333334vw;
    }
    #top .solution .ttl_area .label{
        font-size: 4.8vw;
        line-height: 1.2;
        text-align: center;
        margin: 0 0 3.2vw;
    }
    #top .solution .ttl_area .flex{
        display: block;
    }
    #top .solution .ttl_area .flex h2{
        font-size: 12.8vw;
        line-height: 1.25;
        margin: 0 0 7.199999999999999vw;
    }
    #top .solution .ttl_area .flex .note{
        font-size: 4.2666666666666667vw;
        text-align: center;
        font-weight: 600;
        line-height: 1.63;
        letter-spacing: 1px;
    }
    #top .solution .ctt{
        margin: 0 0 13.33333333333335vw;
    }
    #top .solution .ctt.solution-flex{
        flex-wrap: wrap;
        gap: 5.333333333333334vw 2.666666666667vw;
    }
    #top .solution .ctt .swiper-slide{
        max-width: 72vw;
    }
    #top .solution .ctt .item{
        max-width: 72vw;
        padding: 4vw;
        border-radius: 5px;
        box-shadow: 0 5px 0 #0000001A;
    }
    #top .solution .ctt .item:hover{
        opacity: 1;
        transform: translate(0, 4px);
        box-shadow: 0 1px 0 #0000001A;
    }
    #top .solution .ctt .item .img{
        width: 64vw;
        height: 70.66666666666667vw;
        margin: 0 0 5.33333333333334vw;
    }
    #top .solution .ctt .item .ttl{
        font-size: 4.2666666666666667vw;
        letter-spacing: 1px;
        text-align: center;
        line-height: 1.5;
        margin: 0 0 4.8vw;
    }
    #top .solution .ctt .item .note{
        font-size: 2.6666666666666667vw;
        padding: 0 0 5.333333333334vw;
        margin: 0 0 4.26666666666666667vw;
    }
    #top .solution .ctt .item .view{
        gap: 2.133333333333336vw;
        font-size: 2.66666666666667vw;
    }
    #top .solution .ctt .item .view::after{
        width: 3.7333333333333334vw;
        height: 3.7333333333333334vw;
    }
    #top .solution .link-area{
        display: block;
        margin: 0;
    }
    #top .solution .single-link{
        justify-content: center;
    }
    #top .solution .link-area .pagenavigation{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6.666666666666667vw;
        margin: 0 0 9.3333333334vw;
    }
    #top .solution .link-area .pagenavigation .swiper-button{
        width: 16vw;
        height: 8.7999999999999vw;
    }
    #top .solution .link-area .pagenavigation .swiper-button-next:after,
    #top .solution .link-area .pagenavigation .swiper-button-prev:after{
        font-size: 2.6666666666667vw;
    }
    #top .solution .link-area .pagenavigation .swiper-pagination span{
        font-size: 3.2vw;
    }
    #top .solution .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
        padding: 0 1.06666666666666667vw;
    }
    #top .solution .link-area .btn{
        max-width: 69.33333333333334vw;
        margin: 0 auto;
    }
    #top .solution .link-area .btn a{
        max-width: 69.33333333333334vw;
        font-size: 3.733333333333334vw;
        padding: 4.8vw 0 5.333333333334vw;
        margin: 0 auto;
    }
    #top .solution .link-area .btn a::before{
        width: 5.866666666666666666vw;
        height: 5.866666666666666666vw;
        right: 4vw;
    }
    #top .solution .link-area .btn a:hover{
        opacity: 1;
        color: #fff;
        background-color: #222222;
        border: 1px solid #fff;
    }
}


/* product */
#top .product{
    position: relative;
    padding: 130px 0 400px;
    margin: -40px 0 0;
    border-radius: 40px 0 0 0;
    background-color: #F7F7F7;
    z-index: 2;
}
#top .product .inner{
    padding: 0;
}
#top .product .ttl_area{
    color: #222222;
    margin: 0 auto 60px;
}
#top .product .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 30px;
}
#top .product .ttl_area .add-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#top .product .ttl_area .flex{
    display: flex;
    align-items: center;
    gap: 75px;
}
#top .product .ttl_area .flex h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
}
#top .product .ttl_area .flex .note{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
}
#top .product .ttl_area .btn{
    display: block;
    max-width: 240px;
    width: 100%;
}
#top .product .ttl_area .btn a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 240px;
    width: 100%;
    padding: 20px 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.17;
    color: #2D2D2D;
    background-color: #FFFFFF;
    border: 1px solid #222222;
    border-radius: 100vw;
    transition: all .3s;
}
#top .product .ttl_area .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .product .ttl_area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
}
#top .product .ttl_area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
#top .product .ctt{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#top .product .product-cat-swiper{
    overflow: visible;
}
#top .product .ctt .swiper-slide{
    display: block;
    max-width: 310px;
    width: 100%;
}
#top .product .ctt .swiper-slide:nth-of-type(1){
    animation-delay: 0.05s;
}
#top .product .ctt .swiper-slide:nth-of-type(2){
    animation-delay: 0.20s;
}
#top .product .ctt .swiper-slide:nth-of-type(3){
    animation-delay: 0.35s;
}
#top .product .ctt .swiper-slide:nth-of-type(4){
    animation-delay: 0.50s;
}
#top .product .ctt .item{
    display: block;
    max-width: 310px;
    width: 100%;
    padding: 15px 15px 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 0 #0000000D;
}
#top .product .ctt .item:hover{
    opacity: 1;
    transform: translate(0, 7px);
    box-shadow: 0 1px 0 #0000000D;
}
#top .product .ctt .item .img{
    position: relative;
    width: 280px;
    height: 193px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 25px;
}
#top .product .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-radius: 5px;
}
#top .product .ctt .item .ttl{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0 0 15px;
    color: #222;
}
#top .product .ctt .item .en{
    display: block;
    font-size: 14px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    color: #2D2D2D;
}
#top .product .text-slider {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    width: 100%;
}
#top .product .text-slider .slide-track {
    display: inline-block;
    animation: slide 40s linear infinite;
}
#top .product .text-slider .slide-track span {
    display: inline-block;
    width: auto;
    padding: 0 20px;
}
#top .product .text-slider .slide-track span img{
    display: block;
    max-width: none;
    width: auto;
    height: 180px;
}
@media only screen and (max-width: 1440px) {
    #top .product{
        padding: 130px 0 300px;
    }
}
@media only screen and (max-width: 768px) {
    #top .product{
        padding: 21.333333333333336vw 0 66.666666666vw;
        margin: -5.333333333333334vw 0 0;
        border-radius: 20px 0 0 0;
    }
    #top .product .ttl_area{
        margin: 0 0 10.666666666666668vw;
    }
    #top .product .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        line-height: 1.11;
        margin: 0 0 3.73333333333333334vw;
    }
    #top .product .ttl_area .add-flex{
        display: block;
    }
    #top .product .ttl_area .flex{
        display: block;
    }
    #top .product .ttl_area .flex h2{
        font-size: 12.8vw;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.25;
        margin: 0 0 2.6666666666667vw;
    }
    #top .product .ttl_area .flex .note{
        font-size: 4vw;
        text-align: center;
        letter-spacing: 1px;
    }
    #top .product .ttl_area .btn{
        display: none;
    }
    #top .product .product-cat-swiper{
        margin: 0 0 13.33333333333335vw;
    }
    #top .product .ctt .swiper-slide{
        max-width: 72vw;
    }
    #top .product .ctt .item{
        position: relative;
        max-width: 72vw;
        padding: 3.4666666666663vw 3.46666666666663vw 13.33333333335vw;
        border-radius: 5px;
        box-shadow: 0 5px 0 #0000000D;
    }
    #top .product .ctt .item::before{
        content: "";
        width: 4.8vw;
        height: 4.8vw;
        background-image: url(../img/top/btn_black_arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 4.8vw;
        left: 50%;
        transform: translateX(-50%);
        transition: all .3s;
    }
    #top .product .ctt .item:hover{
        opacity: 1;
        transform: translate(0, 4px);
        box-shadow: 0 1px 0 #0000000D;
    }
    #top .product .ctt .item:hover::before{
        background-image: url(../img/top/btn_in-black_arrow.png);
        transition: all .3s;
    }
    #top .product .ctt .item .img{
        width: 65.066666666666vw;
        height: 42.1333333333vw;
        margin: 0 0 5.333333333334vw;
    }
    #top .product .ctt .item .ttl{
        font-size: 4.266666666666667vw;
        margin: 0 0 3.733333333333334vw;
    }
    #top .product .ctt .item .en{
        font-size: 2.666666666666667vw;
    }
    #top .product .sp.btn{
        display: block;
        max-width: 69.33333333333334vw;
        width: 100%;
        margin: 0 auto;
    }
    #top .product .sp.btn a{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 69.33333333333334vw;
        width: 100%;
        padding: 4.8vw 0 5.33333333333334vw;
        margin: 0 auto;
        font-size: 3.7333333333333334vw;
        font-weight: 500;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.17;
        color: #2D2D2D;
        background-color: #FFFFFF;
        border: 1px solid #222222;
        border-radius: 100vw;
        transition: all .3s;
    }
    #top .product .sp.btn a::before{
        content: "";
        width: 5.8666666666666666666vw;
        height: 5.8666666666666666666vw;
        background-image: url(../img/top/btn_in-black_arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        right: 5.3333333333333334vw;
        transform: translateY(-50%);
        transition: all .3s;
    }
    #top .product .sp.btn a:hover{
        opacity: 1;
        color: #fff;
        background-color: #222222;
        border: 1px solid #222222;
    }
    #top .product .sp.btn a:hover::before{
        background-image: url(../img/top/btn_white_arrow.png);
    }
    #top .product .text-slider {
        bottom: 18.666666666666668vw;
        width: 100%;
    }
    #top .product .text-slider .slide-track {
        animation: slide 70s linear infinite;   
    }
    #top .product .text-slider .slide-track span {
        padding: 0 1.3333333333335vw;
    }
    #top .product .text-slider .slide-track span img{
        height: 32vw;
    }
}


/* middle-steps */
#top .middle-steps{
    position: relative;
    padding: 110px 0 105px;
}
#top .middle-steps .middle-steps-bg{
    position: absolute;
    inset:0;
    z-index: 1;
}
#top .middle-steps .middle-steps-bg .swiper-wrapper{
    transition-timing-function: linear !important;
}
#top .middle-steps .middle-steps-bg .swiper-slide{
    display: block;
    width: auto;
}
#top .middle-steps .inner{
    position: relative;
    z-index: 2;
}
#top .middle-steps .txt{
    color: #fff;
    max-width: 460px;
    width: 100%;
    margin: 0 0 0 auto;
}
#top .middle-steps .txt h2{
    font-size: 45px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.42;
    margin: 0 0 42px;
}
#top .middle-steps .txt span{
    display: block;
    font-size: 16px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.38;
    margin: 0 0 50px;
}
#top .middle-steps .txt .note{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 2;
    margin: 0 0 60px;
}
#top .middle-steps .txt .btn a{
    position: relative;
    display: block;
    max-width: 240px;
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 100vw;
}
#top .middle-steps .txt .btn a::before{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_transparent_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
#top .middle-steps .txt .btn a:hover{
    opacity: 1;
    color: #222222;
    background-color: #Fff;
}
#top .middle-steps .txt .btn a:hover::before{
    background-image: url(../img/top/btn_white_arrow.png);
    transition-delay: .2s;
}
@media only screen and (max-width: 768px) {
    #top .middle-steps{
        padding: 22.666666666666664vw 0 32vw;
    }
    #top .middle-steps .middle-steps-bg .swiper-slide{
        width: 100%;
    }
    #top .middle-steps .inner{
        padding: 0 8vw;
    }
    #top .middle-steps .txt{
        max-width: none;
        margin: 0;
    }
    #top .middle-steps .txt h2{
        font-size: 6.9333333333333333vw;
        letter-spacing: 1px;
        line-height: 1.46;
        margin: 0 0 8vw;
    }
    #top .middle-steps .txt span{
        font-size: 2.933333333333333vw;
        line-height: 1.38;
        margin: 0 0 14.66666666666666vw;
    }
    #top .middle-steps .txt .note{
        font-size: 3.73333333333333334vw;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.86;
        margin: 0 0 16vw;
    }
    #top .middle-steps .txt .btn a{
        max-width: 68vw;
        padding: 4.2666666666667vw 0;
        margin: 0 auto;
        font-size: 3.7333333333334vw;
    }
    #top .middle-steps .txt .btn a::before{
        width: 5.333333333333334vw;
        height: 5.333333333333334vw;
        right: 5.333333333333334vw;
    }
}


/* journal */
#top .journal{
    padding: 130px 0 0;
    background-color: #DCE7EB;
    overflow: hidden;
}
#top .journal .ttl_area{
    color: #222222;
    margin: 0 0 60px;
}
#top .journal .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 30px;
}
#top .journal .ttl_area .flex{
    display: flex;
    align-items: center;
    gap: 50px;
}
#top .journal .ttl_area .flex h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
}
#top .journal .ttl_area .flex .note{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
}
#top .journal .ctt{
    margin: 0 0 80px;
    overflow: unset;
}
#top .journal .journal-flex{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
#top .journal .ctt .swiper-slide{
    display: block;
    max-width: 380px;
    width: 100%;
}
#top .journal .ctt .item{
    display: block;
    max-width: 380px;
    width: 100%;
    padding: 20px 20px 50px;
    border-radius: 10px;
    box-shadow: 0 10px 0 #0000000D;
    background-color: #fff;
}
#top .journal .ctt .item:hover{
    opacity: 1;
    transform: translate(0, 9px);
    box-shadow: 0 1px 0 #0000000D;
}
#top .journal .ctt .item .img{
    position: relative;
    width: 340px;
    height: 185px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 30px;
}
#top .journal .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
#top .journal .ctt .item .label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
}
#top .journal .ctt .item .label .cat{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.83;
    padding: 2px 11px;
    margin: 0;
    color: #FFFFFF;
    background-color: #529370;
    border-radius: 100vw;
}
#top .journal .ctt .item .label .date{
    font-size: 13px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222;
}
#top .journal .ctt .item .ttl{
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 60px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.67;
}
#top .journal .link-area{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 80px;
}
#top .journal .link-area::before{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(to right, #222222 0px, #222222 1px, transparent 1px, transparent 3px);
}
#top .journal .single-link{
    justify-content: center;
}
#top .journal .link-area .pagenavigation{
    display: flex;
    align-items: center;
    gap: 35px;
}
#top .journal .link-area .pagenavigation .swiper-button{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 80px;
    height: 45px;
    margin: 0;
    border: 1px solid #222222;
    border-radius: 100vw;
    background-color: #fff;
    transition: all .3s;
}
#top .journal .link-area .pagenavigation .swiper-button:hover{
    opacity: 0.7;
}
#top .journal .link-area .pagenavigation .swiper-button-next:after,
#top .journal .link-area .pagenavigation .swiper-button-prev:after{
    font-size: 12px;
    font-weight: bold;
    color: #222222;
}
#top .journal .link-area .pagenavigation .swiper-pagination{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
}
#top .journal .link-area .pagenavigation .swiper-pagination span{
    font-size: 15px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#top .journal .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
    padding: 0 4px;
}
#top .journal .link-area .btn{
    display: block;
    max-width: 400px;
    width: 100%;
}
#top .journal .link-area .btn a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    padding: 26px 0;
    color: #222222;
    background-color: #FFFFFF;
    border: 1px solid #171717;
    border-radius: 100vw;
}
#top .journal .link-area .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .journal .link-area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
}
#top .journal .link-area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
@media only screen and (max-width: 768px) {
    #top .journal{
        padding: 22.666666666666664vw 0 0;
    }
    #top .journal .ttl_area{
        margin: 0 0 12vw;
    }
    #top .journal .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        line-height: 1.11;
        margin: 0 0 3.733333333333334vw;
    }
    #top .journal .ttl_area .flex{
        display: block;
    }
    #top .journal .ttl_area .flex h2{
        font-size: 12.8vw;
        line-height: 1.25;
        margin: 0 0 2.66666666666667vw;
    }
    #top .journal .ttl_area .flex .note{
        font-size: 4vw;
        text-align: center;
        letter-spacing: 1px;
        margin: 0 -1px;
    }
    #top .journal .ctt{
        margin: 0 0 12.8vw;
    }
    #top .journal .journal-flex{
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 5.333333333334vw 2.666666666667vw;
    }
    #top .journal .ctt .swiper-slide{
        max-width: 72vw;
    }
    #top .journal .ctt .item{
        max-width: 72vw;
        padding: 4vw 4vw 10.66666666666668vw;
        border-radius: 5px;
        box-shadow: 0 5px 0 #0000000D;
    }
    #top .journal .ctt .item:hover{
        transform: translate(0, 4px);
    }
    #top .journal .ctt .item .img{
        width: 64vw;
        height: 34.66666666666667vw;
        margin: 0 0 5.33333333333334vw;
    }
    #top .journal .ctt .item .label{
        margin: 0 0 4vw;
    }
    #top .journal .ctt .item .label .cat{
        font-size: 2.4vw;
        line-height: 1.83;
        padding: 0.533333333333vw 2.4vw;
    }
    #top .journal .ctt .item .label .date{
        font-size: 2.66666666666666667vw;
    }
    #top .journal .ctt .item .ttl{
        min-height: 12.5vw;
        font-size: 4vw;
        line-height: 1.6;
    }
    #top .journal .link-area{
        display: block;
        padding: 0 0 16vw;
    }
    #top .journal .single-link{
        justify-content: center;
    }
    #top .journal .link-area .pagenavigation{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6.6666666666666667vw;
        margin: 0 0 10.6666666668vw;
    }
    #top .journal .link-area .pagenavigation .swiper-button{
        width: 16vw;
        height: 8.7999999999999vw;
    }
    #top .journal .link-area .pagenavigation .swiper-button-next:after,
    #top .journal .link-area .pagenavigation .swiper-button-prev:after{
        font-size: 2.6666666666667vw;
    }
    #top .journal .link-area .pagenavigation .swiper-pagination span{
        font-size: 3.2vw;
    }
    #top .journal .link-area .pagenavigation .swiper-pagination span:nth-of-type(2){
        padding: 0 1.06666666666666667vw;
    }
    #top .journal .link-area .btn{
        max-width: 69.33333333333334vw;
        margin: 0 auto;
    }
    #top .journal .link-area .btn a{
        max-width: 69.33333333333334vw;
        font-size: 3.733333333333334vw;
        margin: 0 auto;
        padding: 4.8vw 0 5.333333333334vw;
    }
    #top .journal .link-area .btn a::before{
        width: 5.866666666666666666vw;
        height: 5.866666666666666666vw;
        right: 4vw;
    }
}


/* news */
#top .news{
    padding: 70px 0 160px;
    background-color: #DCE7EB;
}
#top .news .ctt-flex{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
#top .news .ctt-flex .ttl_area{
    display: block;
    max-width: 320px;
    width: 100%;
    flex-shrink: 0;
}
#top .news .ctt-flex .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 32px;
    color: #222;
}
#top .news .ctt-flex .ttl_area h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.97;
    margin: 0 0 40px;
    color: #222;
}
#top .news .ctt-flex .ttl_area .note{
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.72;
    margin: 0 0 50px;
    color: #222222;
}
#top .news .ctt-flex .ttl_area .btn a{
    position: relative;
    display: block;
    max-width: 240px;
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    color: #222;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 100vw;
}
#top .news .ctt-flex .ttl_area .btn a::before{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .news .ctt-flex .ttl_area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
    border: 1px solid #222222;
}
#top .news .ctt-flex .ttl_area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
#top .news .ctt-flex .ctt{
    flex: 1;
    display: block;
    max-width: 810px;
    width: 100%;
}
#top .news .ctt-flex .ctt .item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 0 25px;
    margin: 0 0 25px;
    transition: all .3s;
}
#top .news .ctt-flex .ctt .item:last-of-type{
    margin: 0;
}
#top .news .ctt-flex .ctt .item::before{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(to right, #222222 0px, #222222 1px, transparent 1px, transparent 3px);
}
#top .news .ctt-flex .ctt .item:hover{
    opacity: 1;
}
#top .news .ctt-flex .ctt .item .img{
    position: relative;
    width: 140px;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}
#top .news .ctt-flex .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    transition: all .3s;
}
#top .news .ctt-flex .ctt .item:hover .img img{
    transform: scale(1.1);
}
#top .news .ctt-flex .ctt .item .txt{
    position: relative;
    flex: 1;
    padding-right: 30px;
}
#top .news .ctt-flex .ctt .item .txt::before{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .news .ctt-flex .ctt .item:hover .txt::before{
    background-image: url(../img/top/btn_hover_red_arrow.png);
}
#top .news .ctt-flex .ctt .item .txt .label{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 10px;
}
#top .news .ctt-flex .ctt .item .txt .label .date{
    font-size: 15px;
    font-family: "Heebo", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.34;
    padding-top: 3px;
    color: #222222;
}
#top .news .ctt-flex .ctt .item .txt .label .cat{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.83;
    letter-spacing: 0;
    padding: 0 12px;
    height: 25px;
    color: #222222;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 100vw;
}
#top .news .ctt-flex .ctt .item .txt .ttl{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: underline;
    color: #222222;
    transition: all .3s;
}
#top .news .ctt-flex .ctt .item:hover .txt .ttl{
    color: #DF5B4C;;
}
@media only screen and (max-width: 768px) {
    #top .news{
        padding: 20vw 0;
    }
    #top .news .ctt-flex{
        display: block;
    }
    #top .news .ctt-flex .ttl_area{
        max-width: none;
        margin: 0 auto 12vw;
    }
    #top .news .ctt-flex .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        line-height: 1.11;
        margin: 0 0 3.733333333333334vw;
    }
    #top .news .ctt-flex .ttl_area h2{
        font-size: 12.8vw;
        text-align: center;
        line-height: 1.25;
        margin: 0 0 2.6666666666666667vw;
    }
    #top .news .ctt-flex .ttl_area .note{
        font-size: 4vw;
        text-align: center;
        letter-spacing: 1px;
        line-height: 1.9;
        margin: 0;
    }
    #top .news .ctt-flex .ttl_area .btn a{
        display: none;
    }
    #top .news .ctt-flex .ctt{
        max-width: none;
        margin: 0 0 13.33333333333335vw;
    }
    #top .news .ctt-flex .ctt .item{
        align-items: flex-start;
        gap: 3.2vw;
        padding: 0 0 6.6666666667vw;
        margin: 0 0 6.6666666667vw;
    }
    #top .news .ctt-flex .ctt .item .img{
        width: 21.333333333333336vw;
        height: 15.2vw;
    }
    #top .news .ctt-flex .ctt .item .txt{
        position: relative;
        padding-right: 0;
    }
    #top .news .ctt-flex .ctt .item .txt::before{
        width: 5.33333333333334vw;
        height: 5.33333333333334vw;
        top: 60%;
        right: 0;
    }
    #top .news .ctt-flex .ctt .item .txt .label{
        gap: 2.933333333333333vw;
        margin: 0 0 2.666666666666666667vw;
    }
    #top .news .ctt-flex .ctt .item .txt .label .date{
        font-size: 2.93333333333333333vw;
        letter-spacing: 1px;
        padding-top: 3px;
    }
    #top .news .ctt-flex .ctt .item .txt .label .cat{
        font-size: 2.666666666666667vw;
        line-height: 1.2;
        padding: 0 3.2vw;
        height: 5.866666666666666666vw;
    }
    #top .news .ctt-flex .ctt .item .txt .ttl{
        max-width: 54.666666666666664vw;
        width: 100%;
        -webkit-line-clamp: 2;
        font-size: 3.2vw;
        line-height: 1.58;
        letter-spacing: 2px;
    }
    #top .news .sp.btn a{
        position: relative;
        display: block;
        max-width: 69.33333333333334vw;
        width: 100%;
        padding: 4.53333333333333vw 0;
        margin: 0 auto;
        font-size: 3.73333333333333334vw;
        font-weight: 500;
        text-align: center;
        letter-spacing: 0;
        color: #222;
        background-color: #fff;
        border: 1px solid #222222;
        border-radius: 100vw;
    }
    #top .news .sp.btn a::before{
        content: "";
        width: 5.3333333333333334vw;
        height: 5.3333333333333334vw;
        background-image: url(../img/top/btn_in-black_arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translateY(-50%);
    }
    #top .news .sp.btn a:hover{
        opacity: 1;
        color: #fff;
        background-color: #DF5B4C;
        border: 1px solid #222222;
    }
    #top .news .ctt-flex .ttl_area .btn a:hover::before{
        background-image: url(../img/top/btn_red_arrow.png);
    }
}


/* social */
#top .social{
    padding: 115px 0 125px;
    margin-top: -40px;
    background-color: #F7F7F7;
    border-radius: 40px 0 0;
}
#top .social .ttl_area{
    color: #222222;
    margin: 0 0 60px;
}
#top .social .ttl_area .label{
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 25px;
}
#top .social .ttl_area .add-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#top .social .ttl_area .flex{
    display: flex;
    align-items: center;
    gap: 60px;
}
#top .social .ttl_area .flex h2{
    font-size: 62px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0;
    line-height: 1;
}
#top .social .ttl_area .flex .note{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}
#top .social .ttl_area .btn{
    display: block;
    max-width: 240px;
    width: 100%;
}
#top .social .ttl_area .btn a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 240px;
    width: 100%;
    padding: 20px 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.17;
    color: #2D2D2D;
    background-color: #FFFFFF;
    border: 1px solid #222222;
    border-radius: 100vw;
}
#top .social .ttl_area .btn a::before{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#top .social .ttl_area .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
    border: 1px solid #222222;
}
#top .social .ttl_area .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
#top .social .ctt #sbi_images{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
}
#top .social .ctt #sbi_images .sbi_item{
    display: block;
    max-width: 205px;
    width: 100%;
    border: 1px solid #222;
    border-radius: 5px;
}

@media only screen and (max-width: 768px) {
    #top .social{
        padding: 22.666666666666664vw 0 20vw;
        margin-top: -5.3333333333334vw;
        border-radius: 20px 0 0;
    }
    #top .social .ttl_area{
        margin: 0 0 10.66666666666666668vw;
    }
    #top .social .ttl_area .label{
        font-size: 4.8vw;
        text-align: center;
        line-height: 1.11;
        letter-spacing: 2px;
        margin: 0 0 3.7333333333334vw;
    }
    #top .social .ttl_area .add-flex{
        display: block;
    }
    #top .social .ttl_area .flex{
        display: block;
    }
    #top .social .ttl_area .flex h2{
        font-size: 12.8vw;
        letter-spacing: 0;
        line-height: 1.25;
        margin: 0 0 2.6666666666666667vw;
    }
    #top .social .ttl_area .flex .note{
        font-size: 4vw;
        text-align: center;
    }
    #top .social .ttl_area .btn{
        display: none;
    }
    #top .social .sp.btn{
        display: block;
        max-width: 69.33333333333334vw;
        width: 100%;
        margin: 0 auto;
    }
    #top .social .sp.btn a{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 69.33333333333334vw;
        width: 100%;
        padding: 4.8vw 0 5.333333333333333334vw;
        margin: 0 auto;
        font-size: 3.733333333333334vw;
        font-weight: 500;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.17;
        color: #2D2D2D;
        background-color: #FFFFFF;
        border: 1px solid #222222;
        border-radius: 100vw;
    }
    #top .social .sp.btn a::before{
        content: "";
        width: 5.33333333333334vw;
        height: 5.33333333333334vw;
        background-image: url(../img/top/btn_in-black_arrow.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translateY(-50%);
        transition: all .3s;
    }
    #top .social .sp.btn a:hover{
        opacity: 1;
        color: #fff;
        background-color: #DF5B4C;
        border: 1px solid #222222;
    }
    #top .social .sp.btn a:hover::before{
        background-image: url(../img/top/btn_red_arrow.png);    
    }
    #top .social .ctt #sbi_images{
        gap: 1.3333333333333335vw;
        margin: 0 0 9.333333333333334vw;
    }
    #top .social .ctt #sbi_images .sbi_item{
        max-width: 28.000000000000004vw;
    }
}


/* sidebar */
.sidebar{
    position: sticky;
    top: 140px;
    display: block;
    padding: 50px 60px 60px;
    max-width: 370px;
    width: 100%;
    height: max-content;
    background-color: #fff;
    flex-shrink: 0;
}
#items-taxo .sidebar{
    padding: 50px 30px 60px;
}
.pc:has(.sidebar){
    max-width: 370px;
    width: 100%;
}
.sidebar .side-toggle{
    display: none;
}
.sidebar ul li a{
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    color: #B0B0B0;
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px dashed #B0B0B0;
}
.sidebar ul li:last-child a{
    padding: 0;
    margin: 0;
    border-bottom: none;
}
.sidebar ul li a::before{
    content: "";
    width: 12px;
    height: 12px;
    background-color: #D9D9D9;
    border-radius: 50%;
    transition: all .3s;
    flex-shrink: 0;
}
.sidebar ul li a:hover{
    color: #222222;
    opacity: 1;
}
.sidebar ul li a:hover::before{
    background-color: #529370;
    opacity: 1;
}
.sidebar ul li.current a{
    color: #222222;
    pointer-events: none;
}
.sidebar ul li.current a::before{
    background-color: #529370;
    opacity: 1;
}
#items-taxo .sidebar ul li.current a{
    color: #222222;
    opacity: 1;
}
#items-taxo .sidebar ul li.current a::before{
    background-color: #529370;
    opacity: 1;
}
@media only screen and (max-width: 1600px) {
    .sidebar{
        padding: 35px;
        max-width: 350px;
    }
    #items-taxo .sidebar{
        padding: 30px;
    }
}
@media only screen and (max-width: 1440px) {
    .sidebar{
        top: 140px;
        padding: 30px;
        max-width: 300px;
        flex-shrink: 0;
    }
    .pc:has(.sidebar){
        max-width: 300px;
    }
    .sidebar ul li a{
        gap: 10px;
        font-size: 15px;
        padding: 0 0 20px;
        margin: 0 0 20px;
    }
}
@media only screen and (max-width: 768px) {
    .sidebar{
        position: relative;
        top: auto;
        padding: 0;
        margin: 0 0 12vw;
        max-width: 89.33333333333333vw;
        background-color: #E8E8E8;
    }
    #items-taxo .sidebar{
        padding: 0;
    }
    .pc:has(.sidebar){
        max-width: 89.33333333333333vw;
    }
    .sidebar .side-toggle{
        position: relative;
        display: block;
        font-size: 3.733333333333334vw;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.5;
        padding: 3.733333333333334vw 5.333333333334vw;
        border-top: 1px dashed #222;
        border-bottom: 1px dashed #222;
        background-color: #F7F7F7;
    }
    .sidebar .side-toggle::before{
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translateY(-50%) rotate(45deg);
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
        transition: all .3s;
    }
    .sidebar .side-list{
        display: none;
        padding: 2.66666666666667vw 0;
    }
    .sidebar .side-list li a{
        display: block;
        font-size: 3.733333333333334vw;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.5;
        padding: 3.733333333333334vw 5.333333333334vw;
        margin: 0;
        color: #222;
        border: none;
        transition: all .3s;
    }
    .sidebar ul li.current a{
        pointer-events: unset;
    }
    .sidebar ul li:last-child a{
        padding: 3.733333333333334vw 5.333333333334vw;
    }
    .sidebar .side-list li a::before{
        display: none;
    }
    .sidebar .side-list li a:hover{
        color: #fff;
        background-color: #4060ff;
    }

}

/* pagenavi */
.wp-pagenavi{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 100px 0 0;
}
.wp-pagenavi .pages{
    display: none;
}
.wp-pagenavi .page,
.wp-pagenavi .current{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    font-size: 20px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1;
    padding: 0;
    margin: 0;
    color: #A3A3A3;
    background-color: #F7F7F7;
    border: none;
    border-radius: 50%;
    transition: all .3s;
}
.wp-pagenavi .extend{
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
}
.wp-pagenavi .current{
    color: #fff;
    background-color: #222222;
}
.wp-pagenavi .page:hover{
    opacity: 1;
    color: #222222;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    font-size: 0px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #000;
    transition: all .3s;
}
.wp-pagenavi .previouspostslink{
    margin-right: 15px;
}
.wp-pagenavi .nextpostslink{
    margin-left: 15px;
}
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transition: all .3s;
}
.wp-pagenavi .nextpostslink::before{
    transform: translate(-60%,-50%) rotate(-45deg);
}
.wp-pagenavi .previouspostslink::before{
    transform: translate(-40%,-50%) rotate(135deg);
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover{
    opacity: 1;
    background-color: #000;
}
.wp-pagenavi .previouspostslink:hover::before,
.wp-pagenavi .nextpostslink:hover::before{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
@media only screen and (max-width: 768px) {
    .wp-pagenavi{
        gap: 2.6666666666666667vw;
        margin: 16vw 0 0;
    }
    .wp-pagenavi .page,
    .wp-pagenavi .current{
        width: 8vw;
        height: 8vw;
        font-size: 4vw;
        text-align: center;
        letter-spacing: 0.01em;
    }
    .wp-pagenavi .previouspostslink,
    .wp-pagenavi .nextpostslink{
        width: 10.6666666666666668vw;
        height: 10.6666666666666668vw;
    }
    .wp-pagenavi .previouspostslink{
        margin-right: 3.2vw;
    }
    .wp-pagenavi .nextpostslink{
        margin-left: 3.2vw;
    }
    .wp-pagenavi .previouspostslink::before,
    .wp-pagenavi .nextpostslink::before{
        width: 1.866666666666668vw;
        height: 1.866666666666668vw;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #222222;
    }
}


/* body.is-modal-open {
    overflow: hidden;
}
#top .home_about .top-circle {
    cursor: pointer;
    outline: none;
    border: none;
}
#top .modal .area-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}
#top .modal .area-modal.is-open {
    visibility: visible;
    opacity: 1;
}
#top .modal .area-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}
#top .modal .area-modal-window {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;    
    padding: 40px 40px 43px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    transform: translateY(20px);
    transition: transform 0.35s ease;
}
#top .modal .area-modal.is-open .area-modal-window {
    transform: translateY(0);
}
#top .modal .area-modal-close {
    position: absolute;
    top: -40px;
    right: 0px;
    z-index: 2;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: transparent;
    border: none;
}
#top .modal .area-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 2px;
    background: #ffffff;
}
#top .modal .area-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}
#top .modal .area-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#top .modal .area-modal-content {
    display: none;
}
#top .modal .area-modal-content.is-active {
    display: flex;
    align-items: center;
    gap: 40px;
}
#top .modal .area-modal-content .area-modal-image{
    flex-shrink: 0;
}
#top .modal .area-modal-content .area-modal-image img{
    display: block;
    max-width: 440px;
    width: 100%;
    border-radius: 5px;
}
#top .modal .area-modal-content .area-modal-text{
    max-width: 380px;
    flex: 1;
}
#top .modal .area-modal-content .area-modal-text .category{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.83;
    padding: 2px 12px 3px;
    color: #222222;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 100vw;
}
#top .modal .area-modal-content .area-modal-text .title{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
    padding: 0 0 20px;
    margin: 20px 0;
    border-bottom: 1px dashed #222222;
}
#top .modal .area-modal-content .area-modal-text .prefecture{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.86;
    margin: 0 0 40px;
    color: #222222;
}
#top .modal .area-modal-content .area-modal-text .prefecture::before{
    content: "";
    width: 16px;
    height: 20px;
    background-image: url(../img/common/map-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#top .modal .area-modal-content .area-modal-text .detail-link{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.14;
    color: #fff;
    background-color: #222222;
    border-radius: 100vw;
}
#top .modal .area-modal-content .area-modal-text .detail-link::before{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url(../img/top/btn_white_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 768px) {
    #top .modal .area-modal-window {
        max-width: 80vw;
        padding: 5.33333333333333333334vw;
    }
    #top .modal .area-modal-close {
        top: -9.333333333333334vw;
        width: 6.66666666666666667vw;
        height: 6.66666666666666667vw;
    }
    #top .modal .area-modal-close span {
        width: 5.33333333333333334vw;
    }
    #top .modal .area-modal-content.is-active {
        display: block;
    }
    #top .modal .area-modal-content .area-modal-image img{
        max-width: none;
        margin: 0 0 6.6666666666667vw;
    }
    #top .modal .area-modal-content .area-modal-text{
        max-width: none;
        width: 100%;
    }
    #top .modal .area-modal-content .area-modal-text .category{
        font-size: 3.2vw;
        line-height: 1.47;
        padding: 0.53333333333333vw 3.2vw 0.8vw;
    }
    #top .modal .area-modal-content .area-modal-text .title{
        font-size: 4.533333333333333vw;
        line-height: 1.5;
        padding: 0 0 4.8vw;
        margin: 4.8vw 0;
    }
    #top .modal .area-modal-content .area-modal-text .prefecture{
        gap: 2.666666666666667vw;
        font-size: 3.2vw;
        line-height: 1.67;
        margin: 0 0 8vw;
    }
    #top .modal .area-modal-content .area-modal-text .prefecture::before{
        width: 3.73333333333333334vw;
        height: 4.8vw;
    }
    #top .modal .area-modal-content .area-modal-text .detail-link{
        padding: 4vw 0;
        font-size: 4vw;
    }
    #top .modal .area-modal-content .area-modal-text .detail-link::before{
        right: 4vw;
        width: 4vw;
        height: 4vw;
    }
} */