@charset "UTF-8";

@import url(/css/setting.css);

body{
    background: var(--color01);
    color: var(--colorW);
    font-family: var(--fontY);
    font-size: var(--font12-16);
    margin: 0 auto;
    padding: 0;
    width:100%;
}
@font-face {
    font-family: "Dance";
    src: url("/css/font/DancingScript-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
}
.font-Dance {
    font-family: "Dance",sans-serif;
}
img{
    width: 100%;
}
a{
    text-decoration: none;
}

/*==========
Main
==========*/
main{
    position: fixed;
    width: 100%;
    margin:0 auto;
    padding: 0 0 0;
    z-index: 999;
}
main div.top{
    background:  var(--color01);
    padding:1% 0;
    width: 100%;
    position: relative;
}
main div.top .topinner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:90%;
    margin: 0 auto;
}
main div.top .topinner h1{
    width: 25%;
}
main div.top .topinner ul{
    display: flex;
    flex-wrap: wrap;
    padding: 0 1% 0 0;
}
main div.top .topinner ul li{
    padding: 0 20px;
    position: relative;
}
main div.top .topinner ul li a{
    color: var(--colorW);
    transition: all ease 0.5s;
}
main div.top .topinner ul li:hover a{
    color: var(--color02);
}
main div.top .topinner ul li:before{
    content:"";
    background: url(/images/arrow_w.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width:15px;
    height:12px;
    position: absolute;
    top:calc(50% - 4px);
    left:-5px;
    transform:translate(0,-50%);
    transition: all ease 0.5s;
}
main div.top .topinner ul li:hover:before{
    left:0;
}
main div.left{
    background: var(--color01);
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4%;
    height: 100%;
    padding: 0 0 0 1%;
    position: fixed;
    top: 0;
    left: 0;
}
main div.left b{
    border: 1px solid var(--colorW);
    font-family: var(--fontD);
    white-space: nowrap;
    margin: 0 0 10px 0;
    padding: 2px 5px;
}
main div.left p{
    padding:0 0 25px 0;
    white-space: nowrap;
    position: relative;
}
main div.left p:after{
    content:"";
    background: url(/images/icon_left.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    right: 4px;
}
main div.right{
    background: var(--color01);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3%;
    height: 100%;
    padding: 0 3% 0 0;
    position: fixed;
    top: 0;
    right: 0;
}
main div.right:before{
    content:"";
    border-top:1px solid var(--colorW);
    border-right:1px solid var(--colorW);
    width: 50%;
    height: 21%;
    position: absolute;
    right: 50%;
    top: 3%;
}
main div.right:after{
    content:"";
    background: var(--colorW);
    width: 1px;
    height: 30%;
    position: absolute;
    right:50%;
    bottom:0;
}
main.low div.right:before,
main.low div.right:after{
    display: none;
}
main div.right .tate{
    font-family: var(--fontD);
    white-space: nowrap;
    transform: rotate(90deg) translate(-70%, -120%);
}
main div.right a{
    background: var(--color01);
    border: 1px solid var(--colorW);
    border-radius: 300px;
    height: 82px;
    width: 82px;
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 5px 0;
    position: relative;
    transition: all ease 0.5s;
}
main div.right a:hover{
    background: var(--colorB)
}
main div.right a:after{
    content:"";
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0,-50%);
    transition: all ease 0.5s;
}
main div.right a:hover:after{
    transform: rotate(4deg) translate(0,-50%);
    transform-origin: bottom right;
}
main div.right a.tel:after{
    background: url(/images/icon_tel.svg);
    background-size: 100%;
    background-repeat:no-repeat;
    width:25px;
    height:32px;
}
main div.right a.mail:after{
    background: url(/images/icon_mail.svg);
    background-size: 100%;
    background-repeat:no-repeat;
    width:25px;
    height:20px;
}
main div.info{
    background: var(--color01);
    padding: 1% 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}
main div.info .infoinner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
main div.info .infoinner .swiper{
    width: 65%;
}
main div.info h2{
    font-size: var(--font12-16);
    width: auto;
    margin: 0 1% 0 0;
}
main div.info ul{
    font-size: var(--font14-16);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
}
main div.info ul li{
    padding: 3px 6px;
}
main div.info ul li.date{
    border: 1px solid var(--colorW);
    font-size: var(--font10-13);
    text-align: center;
    height: fit-content;
    margin: 0 1% 0 0;
}
main div.info ul li.kiji{
    position: relative;
    padding: 0 30px 0 0;
}
main div.info ul li.kiji span{
    display: inline-block;
    border: 1px solid var(--colorW);
    border-radius: 100px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 0 0 10px;
    transition: all ease 0.5s;
}
main div.info ul li.kiji:hover span{
    background: var(--colorB);
    right:0;
}
main div.info ul li.kiji span:after{
    content:"";
    background:url(/images/arrow_w.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width:12px;
    height:8px;
    position: absolute;
    top:50%;
    right:10%;
    transform: translate(0,-50%);
}

main div.info a.more{
    background: var(--colorW);
    color: var(--color01);
    font-family: var(--fontD);
    white-space: nowrap;
    height: fit-content;
    margin: 0 1% 0 0;
    padding: 0px 30px 2px 5px;
    display: block;
    position: relative;
    width: 8%;
}
main div.info a.more:after{
    content: "";
    background: url(/images/arrow_b.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 12px;
    height: 9px;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0, -50%);
}
main div.info .copyright_text{
    width: fit-content;
}

/*===============
title
===============*/
.contents .inner h2{
    font-size: var(--font40-60);
    width: fit-content;
    margin: 0 0 3% 1%;
}
.contents .inner h2 b{
    color: var(--color02);
    font-size: var(--font26-30);
    display: block;
    margin: 0 0 1%;
}
.contents .inner h3{
    font-family: var(--fontD);
    font-size: var(--font70-100);
    font-weight: 300;
    margin: 0 0 3% 0;
    padding: 1%;
    width: fit-content;
    position: relative;
}
.contents .inner h3 span{
    display: block;
    transform: rotate(-5deg) translate(0,-10%);
}
.contents .inner h3:before{
    content: "";
    border: 0.5px solid var(--colorW);
    width: 100%;
    height: 80%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}
.contents .inner h4{
    font-size: var(--font28-40);
    width: fit-content;
    margin: 0 0 1% 0;
}

/*===============
link
===============*/
.contents .inner .link{
    width: fit-content;
}
.contents .inner .link a,
.contents .inner .link p{
    display: flex;
    align-items: center;
    /* z-index: 999; */
    position: relative;
    padding: 0 30px 0 0;
    width: fit-content;
}
.contents .inner .link a span,
.contents .inner .link p span{
    display: inline-block;
    border: 1px solid var(--colorW);
    border-radius:100px;
    width:40px;
    height:40px;
    position: relative;
    right:2px;
    margin: 0 0 0 10px;
    transition: all ease 0.5s;
}
.contents .inner .link:hover a span,
.contents .inner .link:hover p span{
    background: var(--colorB);
    right:0;
}
.contents .inner .link a span:after,
.contents .inner .link p span:after{
    content:"";
    background:url(/images/arrow_w.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width:12px;
    height:8px;
    position: absolute;
    top:50%;
    right:10%;
    transform: translate(0,-50%);
}

/*==========
Contact
==========*/
#contact{
    background:url(/images/inquiry/bg.png);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: var(--innerwidth);
    padding: 6% 0;
}
#contact .inner{
    max-width:1350px;
    margin: 0 auto 6%;
}
#contact .innerwrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 46%;
    margin: 4% 2% 2%;
    padding: 4% 0;
    /* z-index: 999; */
}
#contact .innerwrap h2{
    font-size: var(--font26-30);
    padding: 0 0 0 20px;
    margin: 0;
}
#contact .innerwrap h3{
    font-family: var(--fontY);
    font-size: var(--font90-130);
    font-weight: 800;
}
#contact .innerwrap h3:before{
    display:none;
}
#contact .innerwrap .link{
    background: var(--colorW);
    color: var(--color01);
    width: 80%;
    padding: 2% 1%;
}
#contact .innerwrap .link a{
    margin: 0 0 0 auto;
}
#contact .innerwrap .link a span{
    border: 1px solid var(--color01);
    right:2px;
    transition: all ease 0.5s;
}
#contact .innerwrap .link a:hover span{
    background: var(--colorL);
    right:0;
}
#contact .innerwrap .link a span:after{
    background: url(/images/arrow_b.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

/*==========
Footer
==========*/
footer{
    padding: 5% 0;
}
footer .inner{
    border: 1px solid var(--colorW);
    max-width: 1350px;
    width: 92%;
    margin: 0 auto 5%;
    padding:2%;
    position: relative;
}
footer .inner h2{
    background: var(--color01);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height:60px;
    position: absolute;
    top:-20px;
    left:-1px;
}
footer .inner h2 img{
    width: 95%;
}
footer .inner ul.main{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
}
footer .inner ul.main li{
    margin: 0 1%;
}
footer .inner ul.main li a{
    padding: 0 0 0 20px;
    position: relative;
    transition: all ease 0.5s;
}
footer .inner ul.main li a:hover{
    color: var(--color02);
}
footer .inner ul.main li a:before{
    content:"";
    background: url(/images/arrow_w.svg);
    background-size:100%;
    background-repeat: no-repeat;
    width:15px;
    height:12px;
    position: absolute;
    top:calc(50% + 1px);
    left:-5px;
    transform:translate(0,-50%);
    transition: all ease 0.5s;
}
footer .inner ul.main li a:hover:before{
    left:0;
}

footer .inner ul.over {
    background: var(--color01);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height:60px;
    position: absolute;
    bottom: -2px;
    right:0;
}
footer .inner ul.over a{
    border: 1px solid var(--colorW);
    border-radius: 300px;
    height: 82px;
    width: 82px;
    background: var(--color01);
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 5px 10px;
    position: relative;
    transition: all ease 0.5s;
}
footer .inner ul.over a:after{
    content:"";
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0,-50%);
    transition: all ease 0.5s;
}
footer .inner ul.over a.tel:after{
    background: url(/images/icon_tel.svg);
    background-size: 100%;
    background-repeat:no-repeat;
    width:25px;
    height:32px;
}
footer .inner ul.over a.mail:after{
    background: url(/images/icon_mail.svg);
    background-size: 100%;
    background-repeat:no-repeat;
    width:25px;
    height:20px;
}
footer .inner ul.over a:hover{
    background: var(--colorB)
}
footer .inner ul.over a:hover:after{
    transform: rotate(4deg) translate(0,-50%);
    transform-origin: bottom right;
}


footer .copyright{
    width: 100%;
    text-align: center;
    padding: 1% 0;
}
/*==========
Pagetop
==========*/
footer .pagetop{
    width: 60px;
    height: 60px;
    position: fixed;
    bottom:2%;
    right:3%;
    z-index: 999;
}
footer .pagetop a{
    background:var(--color03);
    border: 1px solid var(--colorW);
    border-radius:100px;
    color: var(--colorW);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font16-18);
}


/*==========
contents共通
==========*/
section.contents{
    width:100%;
    margin:0 auto;
    padding: 0 0 0;
}
section.contents .inner{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    margin:0 auto;
    padding: 0 0 0;
}
section#face{
    padding: 3.6vw 0 0;
}
section#face .pan{
    margin: 0 auto 2%;
    padding:2% 0 0;
    max-width: 1400px;
    width:100%;
}
section#face .pan dl{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 0 0 0 25px;
}
section#face .pan dl:before{
    content: "";
    background: url(/images/arrow_w.svg);
    background-repeat: no-repeat;
    background-size:100%;
    width:15px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
}
section#face .pan dl dt a{
    padding: 0 20px 0 0;
    position: relative;
}
section#face .pan dl dd{
    padding: 0 0 0 10px;
}
section#face .pan dl dd a{
    padding: 0 20px 0 0;
    position: relative;
}
section#face .pan dl dt a:before,
section#face .pan dl dd a:before{
    content: ">";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
}

/*==========
role
==========*/
.role{
    display: flex;
    width: 100%;
    z-index: -1;
}
.role img{
    padding: 0 10px;
    animation: marqueeLoop 40s linear infinite;
}

@keyframes marqueeLoop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


@media print, screen and (min-width:769px){
    a[href^="tel:"] {
        pointer-events: none;
    }
    main div.right a.tel{
        display: none;
    }
    .sp-disp{
        display:none;
    }
    #side_menu,
    footer #float{
        display: none!important;
    }
    footer .inner ul.over li:nth-child(1){
        display:none;
    }
}
@media print, screen and (min-width:769px) and (max-width:1100px){
    main div.top .topinner h1{
        margin: 0 0 1%;
    }
}
@media print, screen and (max-width:768px){
    .pc-disp{
        display:none;
    }
    main div.top .topinner{
        align-items: center;
    }
    main div.top .topinner h1 {
        width: 60%;
        margin: 0;
    }
    main div.top .topinner ul.pclist{
        display: none;
    }
    #side_menu{
        position: relative;
        z-index: 999;
    }
    /*----------------------------
    * メニュー開閉ボタン
    *----------------------------*/
    .menu-btn,.menu-btn_f{
        color: var(--color02);
        font-size: var(--font18-20);
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 999999;
    }

    .menu-btn .inview,
    .menu-btn_f .inview{
        display: block;
    }
    .menu-btn .behind,
    .menu-btn_f .behind{
        display: none;
    }
    /*----------------------------
    * メニュー本体
    *----------------------------*/
    .Viewmenu,
    .Viewmenu_f{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10000!important;
        width: 100vw;
        height: 100dvh;
        background: var(--colorMenu);
        overflow: scroll;
        padding: 7rem 0 2rem;
    }
    .Viewmenu .inner,
    .Viewmenu_f .inner{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .Viewmenu .inner ul,
    .Viewmenu_f .inner ul{
        margin: 0 auto;
        width: 80%;
    }
    .Viewmenu_f .inner ul{
        display: flex;
        flex-wrap: wrap;
        padding: 0 1% 0 0;
    }
    .Viewmenu_f .inner ul li{
        padding: 0 20px;
        position: relative;
    }
    .Viewmenu_f .inner ul li a{
        color: var(--colorW);
        transition: all ease 0.5s;
    }
    .Viewmenu_f .inner ul li:hover a{
        color: var(--color02);
    }
    .Viewmenu_f .inner ul li:before{
        content:"";
        background: url(/images/arrow_w.svg);
        background-size:100%;
        background-repeat: no-repeat;
        width:15px;
        height:12px;
        position: absolute;
        top:calc(50% - 4px);
        left:-5px;
        transform:translate(0,-50%);
        transition: all ease 0.5s;
    }
    .Viewmenu_f .inner ul li:hover:before{
        left:0;
    }

    .Viewmenu .inner .menu__item,
    .Viewmenu_f .inner .menu__item{
        border-bottom:0.5px solid var(--colorW);
        text-align: center;
        margin: 0 auto 10px;
        padding: 0 0 6% 8%;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    .menu__item a.menu_link{
        color: var(--colorW);
        font-size: var(--font16-18);
        position: relative;
        padding: 0 0 0;
        text-decoration: none;
    }
    /* アニメーション前のメニューの状態 */
    .Viewmenu,
    .Viewmenu_f{
        pointer-events: none;
        opacity: 0;
        transform-origin: top;
        transform: scale(.5);
        transition: all .3s ease;
    }
    /* アニメーション後のメニューの状態 */
    .Viewmenu.is-active,
    .Viewmenu_f.is-active{
        pointer-events: auto;
        opacity: 1;
        transform: scale(1.0);
    }
    .menu__item{
        position: relative;
    }
    footer{
        padding: 0 0 0;
    }

    /*==========
    Main
    ==========*/
    /* main div.left{
        width: 10%;
    }
    main div.right{
        width: 8%;
    }
    main div.right .tate{
        transform: rotate(90deg) translate(-70%, -60%);
    }
    main div.right a{
        display: none;
    } */
    main div.left,
    main div.right{
        display: none;
    }
    main div.info{
        border-top: 0.5px solid #ccc;
    }
    main div.info .infoinner{
        flex-wrap: wrap;
        padding: 4% 0 0;
        width: 90%;
    }
    main div.info h2{
        width: 100%;
        margin: 0 0 2%;
    }
    main div.info .infoinner .swiper{
        width: 100%;
    }
    /* main div.info .infoinner .swiper .swiper-wrapper{
        flex-wrap: wrap;
    } */
    main div.info ul li:nth-child(2){
        width: 65%;
        padding: 0 10px;
    }
    main div.info ul li:nth-child(3){
        width:10%;
    }
    main div.info ul li.date{
        margin: 0 0 0 0;
        padding: 3px 3px;
    }
    main div.info a.more{
        position: absolute;
        width: 20%;
        top: 12%;
        right: 0;
    }
    main div.info .copyright_text{
        width: 100%;
    }

    main.active{
        position: relative;
    }

    main div.left,
    main div.right,
    main div.info {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.5s ease;
    }

    main.active div.left,
    main.active div.right,
    main.active div.info {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    /*===============
    title
    ===============*/
    .contents .inner h2 b{
        margin: 0 0 7%;
    }
    .contents .inner h3{
        margin: 0 0 12% 0%;
    }
    .contents .inner h4{
        margin: 0 0 7%;
        line-height: 1.6em;
    }
    .contents .inner .link a, .contents .inner .link p{
        padding: 0;
    }
    .contents .inner .link a span, .contents .inner .link p span{
        width: 30px;
        height: 30px;
    }
    /*===============
    role
    ===============*/
    .role{
        width:160%;
    }

    /*===============
    Contact
    ===============*/
    #contact .innerwrap{
        width: 90%;
        margin: 0 auto;
        padding:  8% 0;;
    }
    #contact .innerwrap p{
        line-height: 1.8em;
        margin: 0 auto 12%;
    }
    #contact .innerwrap .link{
        width: 100%;
    }
    /*===============
    footer
    ===============*/
    footer {
        padding: 10% 0 25%;
    }
    footer .inner{
        border:none;
        padding: 6% 0 0;
        width: 80%;
    }
    footer .inner ul.main,
    footer .inner ul.over{
        display: none;
    }
    footer .inner h2{
        background: none;
        border-bottom: 1px solid var(--colorW);
        width: 100%;
        height: unset;
        margin: 0 auto;
        padding: 0 0 5%;
        text-align: center;
        position: relative;
        top:unset;
        left: unset;
    }

    /*===============
    float
    ===============*/
    footer #float{
        background:var(--color03);
        color: #fff;
        width: 100%;
        height: 52px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 997;
    }
    footer ul.floatlist{
        border-top: 1px solid var(--colorW);
        display:flex;
        width: 100%;
        margin: 0 auto;
    }
    footer ul li{
        display: flex;
    }

    footer ul li.float01{
        border-right: 1px solid var(--colorW);
        justify-content: center;
        width:34%;
    }
    footer ul li.float02{
        padding: 0;
        width:32%;
    }
    footer ul li.float01 a{
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
        position:relative;
    }
    footer ul li.float01 a:before{
        content:"";
        position: absolute;
        top: 50%;
        left: 18%;
        transform: translate(0,-50%);
        transition: all ease 0.5s;
    }
    footer ul li.float01 a.tel:before{
        background: url(/images/icon_tel.svg);
        background-size: 100%;
        background-repeat:no-repeat;
        width:20px;
        height:29px;
    }
    footer ul li.float01 a.mail:before{
        background: url(/images/icon_mail.svg);
        background-size: 100%;
        background-repeat:no-repeat;
        width:23px;
        height:18px;
    }
}