@charset "UTF-8";


/* common
==========================================================*/

body { font-size: 14px; line-height: 2; font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 500;
margin:0; padding: 0; letter-spacing:1px; color:#000; -webkit-text-size-adjust: 100%; }
@media screen and (max-width: 1300px) {
    body { font-size: 13px; }
}
@media screen and (max-width: 1100px) {
    body { font-size: 12px; }
}
@media screen and (max-width: 900px) {
    body { font-size: 11px; }
}
@media screen and (max-width: 800px) {
    body { font-size: 14px; line-height: 1.8; }
}
@media screen and (max-width: 600px) {
    body { font-size: 13px;}
}
@media screen and (max-width: 400px) {
    body { font-size: 12px;}
}

a { text-decoration: none; color: #000; outline: none; -webkit-transition: all .3s; transition: all .3s; cursor: url(../images/common/cursol.cur), auto;}
header a,
footer a,
.worksdatawrap a,
.worksclose a{ cursor: pointer;}
a *,
a:after,
.trans03{-webkit-transition: all .3s; transition: all .3s; }
a:hover { text-decoration: none;}
a:hover { -webkit-transition: all .3s; transition: all .3s; }
img { -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; max-width: 100%; height: auto; vertical-align: bottom;}
video { vertical-align: bottom; }
:focus { outline: 0; }
* { box-sizing: border-box}

.tellink { pointer-events: none;}
.sp-show,
.show-1000 { display: none;}
@media screen and (max-width: 800px){
    .tellink { pointer-events: auto;}
    .sp-show { display: block;}
    .sp-hide { display: none;}
}
    
.flex { display: flex; flex-wrap: wrap; }
.flex-nowrap { display: flex; }
.flex-jcs {display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-jca { display: flex; justify-content: space-around; flex-wrap: wrap; }
.flex-center {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex-aic { display: flex; align-items: center; flex-wrap: wrap; }
.flex-jcc { display: flex; justify-content: center; flex-wrap: wrap; }
.flex-fdc { display: flex; flex-direction: column; flex-wrap: wrap;}
.overhidden{ overflow: hidden;}

.centerposi { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
.centertate { position: absolute; top: 50%; -webkit-transform: translateY(-50%); /* Safari用 */ transform: translateY(-50%); } 
.centeryoko,
.centeryoko-pc{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); /* Safari用 */ transform: translateX(-50%); }
@media screen and (max-width: 800px){
    .centeryoko-pc{ position:inherit; left: 0; -webkit-transform: translateX(0); transform: translateX(0); }   
}

.inner750 { max-width: 750px; width: 80%; margin: 0 auto;}
.inner900 { max-width: 900px; width: 80%; margin: 0 auto;}
.inner1000{ max-width: 1000px; width: 80%; margin: 0 auto;}
.inner1080{ max-width: 1080px; width: 80%; margin: 0 auto;}
.inner1100{ max-width: 1100px; width: 80%; margin: 0 auto;}
.inner1300{ max-width: 1300px; width: 80%; margin: 0 auto;}
.inner1300.v2{ max-width: 1300px; width: 90%; margin: 0 auto;}
.inner1000max{ max-width: 1000px; width: 100%; margin: 0 auto;}
.inner1300max{ max-width: 1300px; width: 100%; margin: 0 auto;}
@media screen and (max-width: 800px){
    .inner750,
    .inner900,
    .inner1000,
    .inner1080,
    .inner1100,
    .inner1300,
    .inner1300.v2{ width: calc(100% - 40px); }
}
@media screen and (max-width: 400px){
    .inner750,
    .inner900,
    .inner1000,
    .inner1080,
    .inner1100,
    .inner1300,
    .inner1300.v2{ width: calc(100% - 30px); }
}

.poppins{font-family: 'Poppins', 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 500;}
.poppins h1 {font-weight: 500;}
.jost{font-family: 'Jost', sans-serif; font-weight: 400; }
.wg300 { font-weight: 300;}
.wg400 { font-weight: 400;}
.wg500 td,
.wg500 th,
.wg500 { font-weight: 500 !important;}
.wg600 { font-weight: 600;}
.wg700 { font-weight: 700;}
.fn-bold { font-weight: 700; font-weight: 600;}


.fs10{ font-size: calc(10em / 14);}
.fs13{ font-size: calc(13em / 14);}
.fs13px{ font-size: 13px;}
.fs14{ font-size: calc(14em / 14);}
.fs14px{ font-size: 14px;}
.fs15{ font-size: calc(15em / 14);}
.fs15px{ font-size: 15px;}
.fs16{ font-size: calc(16em / 14);}
.fs17{ font-size: calc(17em / 14);}
.fs18{ font-size: calc(18em / 14);}
.fs21{ font-size: calc(21em / 14);}
.fs20{ font-size: calc(20em / 14);}
.fs22{ font-size: calc(22em / 14);}
.fs22px{ font-size: 22px;}
.fs23{ font-size: calc(23em / 14);}
.fs24{ font-size: calc(24em / 14);}
.fs25{ font-size: calc(25em / 14);}
.fs25px{ font-size: 25px;}
.fs26{ font-size: calc(26em / 14);}
.fs28{ font-size: calc(28em / 14);}
.fs29{ font-size: calc(29em / 14);}
.fs30{ font-size: calc(30em / 14);}
.fs32{ font-size: calc(32em / 14);}
.fs34{ font-size: calc(34em / 14);}
.fs42{ font-size: calc(42em / 14);}
.fs45{ font-size: calc(45em / 14);}
.fs48{ font-size: calc(48em / 14);}
.fs54{ font-size: calc(54em / 14);}
.fs56{ font-size: calc(56em / 14);}
.fs66{ font-size: calc(66em / 14);}
.fs86{ font-size: calc(86em / 14);}
.fs100{ font-size: calc(100em / 14);}
@media screen and (max-width: 800px){
    .sp-fs14 { font-size: 14px; }
    .sp-fs13 { font-size: 13px; }
}

.bg-b{ background: #02ADDB;}
.bg-g{ background: #F1F1F1;}
.bg-g2{ background: #E2E2E2;}
.bg-g3{ background: #FAFAFA;}
.bg-gr{ background: #23CCB6;}
.bg-y{ background: #FFEA00;}
.bg-p{ background: #FFF7F0;}
.bg-p2 { background: #FF0064;}
.bg-w{ background: #fff;}
.bg-r { background: #FD0032;}
.bg-br { background: #C8BCB6;}

.fc-p,
.fc-p a{ color: #FFF2E6;}
.fc-p2 { color: #FF0064;}
.fc-w { color: #fff;}
.fc-r,
.fc-r a{ color: #FD0032;}
.fc-gr { color: #23CCB6;}

.dp-ib { display: inline-block; }

#wrapper { width: 100%; overflow: hidden; position: relative;}
#wrapper:after { animation: wrapperafter 0.5s forwards; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index:99999; }
@keyframes wrapperafter {
    0% {}
    50% { background: #fff;}
    99%{top: 0;}
    100%{ background: none; top: -100%; }
}


.after,
.before{ position: relative;} 
.after:after,
.before:before { content: ""; position: absolute; }

::selection{ background: #02ADDB; color: #fff; }
::-moz-selection{ background: #02ADDB; color: #fff; }
.bg-b ::selection{ background: #fff2e6; color: #02ADDB; }
.bg-b ::-moz-selection{ background: #fff2e6; color: #02ADDB; }

.kaitenwrap { height: 1em; overflow: hidden; line-height: 1; position: relative;}
.kaitenwrap p {-webkit-transition: all .3s; transition: all .3s; position: absolute; }
.kaitenwrap p:nth-child(1) { top: 0; /*animation: kaitenp01-2 0.3s forwards;*/}
.kaitenwrap p:nth-child(2) { opacity: 0; position: inherit;}
.kaitenwrap p:nth-child(3) { top:100%; /*animation: kaitenp03-2 0.3s forwards;*/}
a:hover .kaitenwrap p:nth-child(1){ animation: kaitenp01 0.3s forwards;}
a:hover .kaitenwrap p:nth-child(3){ animation: kaitenp03 0.3s forwards;}
@keyframes kaitenp01 {
    0% { top: 0;}
    100%{ top: -100%;}
}
@keyframes kaitenp03 {
    0% {  top:100%;}
    100%{ top: 0;}
}
@keyframes kaitenp01-2 {
    0% { top: -100%;}
    100%{ top: 0;}
}
@keyframes kaitenp03-2 {
    0% { top: 0;}
    100%{ top:100%;}
}

/* header
==========================================================*/

header{ width: 100%; position: relative; z-index: 10;}
.headmark{ width: 100px; position: absolute; top: 0; right: 0; z-index: 999;}
.headtxt{ height: 120px;background: #fff;}
.headtxt span {}
.headfixwrap {}
#menu.fixed { width: 100%; position: fixed; top: 0; left: 0; z-index: 9; transition: .5s cubic-bezier(.4, 0, .2, 1); }
.head-animation { transform: translateY(-100%); }
.headlogo{ width: 82px; left: 0; line-height: 1;}
.headmenu{ position: relative; left: 50px;}
.headmenuul{}
.headmenuul > li{ width: 200px; position: relative;}
.headmenuul > li a { width: 100%; height: 75px; position: relative;}
.headmenuul > li a:after { width: 1px; height: 25px; left: 0; top:calc(50% - 25px / 2); background: #000; }
.headmenuul > li:nth-last-child(1) a { background: #23CCB6; color: #fff;}
.headmenuul > li:nth-last-child(2) a { background: #FFEA00;}
.headmenuul > li:nth-last-child(3) a { background: #FF0064; color: #fff;}
.headmenuul > li a:before {width: 0;height: 0;border-style: solid;border-width: 10px 6px 0 6px;border-color: #fff transparent transparent transparent; top: 100%; left: calc(50% - 5px); display: none;}
#menu.head-animation .headmenuul > li a:before { display: none;}
.page-about .headmenuul > li:nth-child(1) a:before { display: block; }
.page-about .headmenuul > li:nth-child(1):after { display: none; }
.page-solution .headmenuul > li:nth-child(2) a:before { display: block; }
.page-solution .headmenuul > li:nth-child(2):after { display: none; }
.page-contact .headmenuul > li:nth-last-child(1) a:before { display: block;border-color: #23CCB6 transparent transparent transparent; }
.page-works .headmenuul > li:nth-last-child(3) a:before { display: block;border-color: #FF0064 transparent transparent transparent; }
.page-works .headmenuul > li:nth-last-child(3):after { display: none; }
.headmenubtn { position: relative; overflow: visible;}
.headmenusub{ position: absolute;  width: 0; z-index: 3;}
.headmenubtn:hover .headmenusub { }
.headmenusub li { overflow: hidden; width: 0; transition: all .3s; }
.headmenusub li a { width: 200px; height: 75px;}
.headmenubtn:hover .headmenusub { position: absolute; display: flex;}
.headmenubtn:hover .headmenusub li { }
@media screen and (max-height: 1000px){
    .headmark{ width: 90px; }
    .headtxt{ height: 80px; }
    .hide-h1000 { display: none;}
    .headmenuul > li a,
    .headmenusub li a { height: 60px;}
}   
@media screen and (max-height: 850px){
    .headmark{ width: 70px; }
    .headtxt { height: 35px;}
    .headtxt p { display: none;}
    .headmenuul > li a,
    .headmenusub li a { height: 55px;}
}

@media screen and (min-width: 801px){
    .headmenusub{ animation: headmenusub2 0.25s forwards; }
    .headmenubtn:hover .headmenusub { animation: headmenusub 0.5s forwards; }
    .headmenusub li { animation: headmenusubli2 0.25s forwards; }
    .headmenubtn:hover .headmenusub li { animation: headmenusubli 0.5s forwards; }
    @keyframes headmenusub {
        0% { width: 0; }
        100%{ width: 300%;}
    }

    @keyframes headmenusub2 {
        0%{ width: 300%; }
        100% { width: 0; }
    }

    @keyframes headmenusubli {
        0% {width: 0; }
        100%{width: 200px; }
    }

    @keyframes headmenusubli2 {
        0%{width: 200px; }
        100% {width: 0; }
    }

    @media screen and (max-width: 1500px){
        @keyframes headmenusubli {
            0% {width: 0; }
            100%{width: calc(100% / 3); }
        }

        @keyframes headmenusubli2 {
            0%{width: calc(100% / 3); }
            100% {width: 0; }
        }
 
    }
}
.headmenusub li a{ color: #fff;}
.headmenusub li:nth-child(1) a{ background: #C7C7C7;}
.headmenusub li:nth-child(2) a{ background: #909090;}
.headmenusub li:nth-child(3) a{ background: #666;}
.headtelwrapwrap { background: none;}
.headtelwrapwrap.fixed { margin-top: 75px;}
@media screen and (max-height: 1000px){
    .headtelwrapwrap.fixed { margin-top: 60px;}
}
@media screen and (max-height: 850px){
    .headtelwrapwrap.fixed { margin-top: 55px;}
}

.headtelwrap{ width: 100%; justify-content: flex-end; }
.headtelwrap a.flex-center{ width: 300px; height: 90px; background: #FFCFA5; color: #fff; flex-direction: column;position: relative; z-index: 3;}
.headtelwrap a.flex-center p { line-height: 1;}
.headtelwrap a p:nth-child(1) { margin-bottom: 10px; }
.headtelwrap a p:nth-child(1) span:nth-child(1) { padding-right: 5px;}
.headtelwrap a p:nth-child(2) { }
.navInner { display: none;}
@media screen and (max-width: 1500px){
    .headlogomenuwrap { display: flex; justify-content: flex-end;}
    .headmenu{ width: calc(100% / 6 * 5); left: 0; margin: 0;}
    .headmenuul{ width: 100%;}
    .headmenuul > li { width: 20%;}
    .headmenusub li a { width: 100%; }
    .headtelwrap a.flex-center{ width: 240px; height: 70px; }
    .headtelwrap a p:nth-child(1) { margin-bottom: 5px; }
}

@media screen and (max-width: 800px){
    header{ width: 100%; height: 75px; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; display: flex; align-items: center;}
    .headlogo{ width: 70px; margin-left: 30px;}
    header .bg-w { background: #02ADDB;}
    #menu { width: 100%; height: 100%; right: 0; top: 0; display: none; position: fixed; background: #02ADDB; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 9901 !important; overflow: scroll !important; }
    .navInner { display: block; width: 75px; height: 75px; top: 0; right: 0; z-index: 9999; cursor: pointer; display: block; position: fixed;}
    .menu-trigger { width: 100%; height: 100%; line-height: inherit; cursor: pointer; position: relative; display: inline-block; transition: all .3s; }
    .menu-trigger .menutxt  { text-align: center; position: absolute; bottom: 6px; left: 0; width: 100%;}
    .menu-trigger span { width: 15px; height: 2px; left: 30px; display: inline-block; transition: all .3s; position: absolute; background: #000;  }
    .menu-trigger span:nth-of-type(1) { top: 30px; }
    .menu-trigger span:nth-of-type(2) { top: 36px; }
    .menu-trigger span:nth-of-type(3) { top: 42px; }
    .menu-trigger:not(.active):hover span:nth-of-type(1) { top: 31px; }
    .menu-trigger:not(.active):hover span:nth-of-type(3) { top: 42px; }
    .menu-trigger.active span { background: #fff;}
    .menu-trigger.active span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg); }
    .menu-trigger.active span:nth-of-type(2) { display: none; }
    .menu-trigger.active span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); }
    
    header .inner1300 { display: block;}
    #menu * { color: #FFF2E6;}
    #menu .headlogo{ width: 70px; margin-left: 15px; line-height: 75px;}
    #menu .headlogo img { vertical-align: middle;}
    .headtxt,
    #header { display: none;}
    .headmenu{ left: inherit;width: 100%;  }
    .headmenuul{ padding: 0 10px; width: 100%; display: block;}
    .headmenuul > li{ width: 100%; border-bottom: 1px solid #8AD1E0; display: flex; }
    .headmenuul > li > a { width:100%; height: 70px; justify-content: flex-start; font-size: 19px;}
    .headmenuul > li a:after { display: none;}
    .headmenuul > li a:before { display: none !important;}
    .headmenuul > li:nth-last-child(1) a,
    .headmenuul > li:nth-last-child(2) a,
    .headmenuul > li:nth-last-child(3) a { background: none;}
    .headmenubtn { padding: 25px 0 20px; }
    .headmenubtn > a {width:50% !important; align-items: flex-start;}
    .headmenusub{ position: relative; top: -5px; width: 50%; display: block;}
    .headmenubtn:hover .headmenusub { animation: none; position: inherit; display: block;}
    .headmenusub li { width: 100%;}
    .headmenusub li a{ height: 30px; width: 100%; justify-content: flex-start; }
    .headmenusub li:nth-child(1) a,
    .headmenusub li:nth-child(2) a,
    .headmenusub li:nth-child(3) a{ background: none;}
    .headtelwrapwrap { padding: 0 10px; margin: 30px 0 0 !important; background: #02ADDB !important; }
    .headtelwrap{ margin: 0 0 30px; width: 100%; justify-content: flex-start;}
    .headtelwrap a.flex-center{ width: auto; height: auto; background: none;}
    .headtelwrap a p:nth-child(1) { margin-bottom: 10px;}
    .headtelwrap .fs15 { font-size: 15px;}
    .headtelwrap .fs25 { font-size: 25px;}
    .headcopy { padding: 30px 0;}
    .headmark{ width: 60px; position: fixed; top: calc(100% - 30px); right: 30px;}
}


/* footer
==========================================================*/

footer{ padding: 50px 0 70px;}
.page-works footer { background:#F1F1F1; color: #000;}
.page-works footer a { color: #000;}
footer .inner1300{}
.footlogo{ width: 105px;}
.page-works .footlogo { background: url(../images/common/headlogo.png) no-repeat; background-size: 100% auto;}
.page-works .footlogo img { opacity: 0;}
.footmenuwrap{}
.footmenuul{}
.footmenuul li{}
.footmenuul li a.flex-center{ width: 200px; height: 25px; margin-bottom: 30px; }
.footmenuul li a.flex-center p {}
.footmenuul li:last-child a.flex-center { margin-bottom: 0;}
.footmenuul > li > a.flex-center { border-right: 1px solid #9BCFE0;}
.footmenuul > li:first-child { border-left: 1px solid #9BCFE0; border-right: 1px solid #9BCFE0; }
.footmenuul > li:first-child > a { border: none;}
.page-works .footmenuul > li > a.flex-center,
.page-works .footmenuul > li:first-child { border-color: #ccc;}
.footmenusub{}
.footmenusub li{}
.footmenusub li a{}
.footworkswrap{}
.footworkswrap .centeryoko{ line-height: 25px; bottom: 0; width: 100%; text-align: center;}
.footcontactwrap{ text-align: center; overflow: visible; }
a.foottel{ width: 200%; top: 80px; display: flex; flex-direction: column; align-items: center;}
a.foottel p { white-space: nowrap;}
a.foottel p:nth-child(1) { margin-bottom: 5px; line-height: 1;}
.footcontactwrap .centeryoko {bottom: 0; width: 100%;}
.pagetop{ width: 22px; align-self: flex-end;}
.pagetop a { padding-top: 20px;}
.pagetop a div { bottom: 0; position: relative;}
.page-works .pagetop a div img { opacity: 0;}
.page-works .pagetop a div { background: url(../images/common/footyaji-b.png) no-repeat center; background-size: cover;}
.pagetop a:hover div { bottom: 10px; }
@media screen and (max-width: 1500px){
    .footmenuul li a.flex-center{ width: 150px;} 
}  
@media screen and (max-width: 1200px){
    .footlogo{ width: 95px;}
    .footmenuul li a.flex-center{ width: 120px;} 
}  
@media screen and (max-width: 1000px){
    footer .inner1300 { width: 94%;}
} 
@media screen and (max-width: 800px){
    footer{ padding: 60px 0; text-align: center; position: relative;}
    footer .inner1300
    .footlogo{ width: 95px; margin: 0 auto 40px;}
    .foottxt { margin-bottom: 20px; font-weight: 300;}
    .foottxt span { font-weight: 500; }
    a.foottel{ margin: 15px 0 30px;width: 100%; top: 0;}
    .footmark { width: 60px; right: 30px; bottom: 0; position: absolute;}
}



/* index
==========================================================*/

.indmainwrap{ max-height: 60vw; height: calc(100vh - 195px - 120px); margin-top: -90px; overflow: hidden;}
@media screen and (min-width: 801px){
    @media screen and (max-height: 1000px){
        .indmainwrap{height: calc(100vh - 140px - 100px); margin-top: -100px; }
    }
    @media screen and (max-height: 850px){
        .indmainwrap{ height: calc(100vh - 90px - 80px); margin-top: -90px; }
    }
}
#mainslide{ width: 100%; height: 100%;}
#mainslide .swiper-wrapper{}
#mainslide .swiper-slide {}
#mainslide .swiper-slide img.obf {object-fit:cover;width:100%;height:100%}
#mainslide .swiper-slide a { width: 100%; height: 100%; display: block; overflow: hidden; position: relative;}
#mainslide .swiper-slide a.flex { display: flex;}
#mainslide .swiper-slide .mainslide50 { width: 50%; height: 100%; }
#mainslide .swiper-slide.swiper-slide01 a{background: url(../images/index/2207/main-newyear2023.jpg) no-repeat center #f4f3f1; background-size: auto 100%; }
#mainslide .swiper-slide.swiper-slide02 a{background: url(../images/index/2112/main-suppleno.jpg) no-repeat center; background-size: cover; }
#mainslide .swiper-slide.swiper-slide03 a{background: url(../images/index/2207/main-any.jpg) no-repeat center; background-size: cover; }
#mainslide .swiper-slide.swiper-slide03 .worksmainover { position: absolute; top: 80px; left: 100px;}
#mainslide .swiper-slide.swiper-slide04 a{background: url(../images/index/2112/main-hanafru.jpg) no-repeat top center; background-size: cover;}


/* swiper-slide2606-luty */
#mainslide .swiper-slide2606-luty img.obf{transform: scale(1.3);}
#mainslide .swiper-slide2606-luty .worksmainover-copy { width: min(calc((950 / 1500) * 100vw),950px); left: 50% ; bottom: clamp(90px, calc((110 / 1500) * 100vw), 110px); transform: translateX(-50%);}
#mainslide .swiper-slide2606-luty .worksmainover-copy img{width: 100%;}
@media screen and (max-width: 800px){
    #mainslide .swiper-slide2606-luty img.obf{transform: scale(1);}
    #mainslide .swiper-slide2606-luty .worksmainover-copy { width: min(calc((300 / 375) * 100vw),380px); bottom: min(calc((45 / 375) * 100vw),75px);}
}

/* swiper-slide2506-brocantique */
#mainslide .swiper-slide2506-brocantique img.obf { object-position: 46% center;}
#mainslide .swiper-slide2506-brocantique .worksmainover-logo { width: min(calc((350 / 1500) * 100vw),350px); right: min(calc((120 / 1500) * 100vw),120px) ; bottom: min(calc((90 / 1500) * 100vw),90px);}
@media screen and (max-width: 800px){
    #mainslide .swiper-slide2506-brocantique .worksmainover-logo { width: min(calc((150 / 375) * 100vw),220px); right: 10%; bottom: min(calc((45 / 375) * 100vw),70px);}
}

/* swiper-slide2506-kkaa */
#mainslide .swiper-slide2506-kkaa .worksmainover-logo { width: min(calc((140 / 1200) * 100vw),140px); top: 35px; left: min(calc((40 / 1500) * 100vw),40px);}
#mainslide .swiper-slide2506-kkaa .worksmainover-copy { width: min(calc((710 / 1500) * 100vw),710px); top: 35px; left: 0; right: 0; margin: auto;}
@media screen and (max-width: 1500px){
    #mainslide .swiper-slide2506-kkaa .worksmainover-logo { top: min(calc((55 / 1200) * 100vw),55px);}
    #mainslide .swiper-slide2506-kkaa .worksmainover-copy { top: min(calc((60 / 1200) * 100vw),60px);}
}
@media screen and (max-width: 800px){
    #mainslide .swiper-slide2506-kkaa .worksmainover-logo { width: min(calc((90 / 375) * 100vw),120px); top: min(calc((16 / 375) * 100vw),25px); left: min(calc((25 / 375) * 100vw),35px);}
    #mainslide .swiper-slide2506-kkaa .worksmainover-copy { width: 86%; top: min(calc((22 / 375) * 100vw),30px); max-width: 600px;} 
}

/* swiper-slide2412-sharp */
#mainslide .swiper-slide2412-sharp a{background: url(../images/index/2024/main2412_sharp.jpg) no-repeat center; background-size: cover; }
#mainslide .swiper-slide2412-sharp .worksmainover{ position: absolute; left:33px ; bottom:33px;}
@media screen and (max-width: 800px){
    #mainslide .swiper-slide2412-sharp .worksmainover{ left:auto ; bottom:auto; top:23px;right:23px; width: min(calc((60 / 375) * 100vw),112px);}
}

/* swiper-slide2412-ujiwazuka */
#mainslide .swiper-slide2412-ujiwazuka {background: url(https://zealplus.co.jp/zpwp/wp-content/uploads/2024/12/2023ujiwadukaen_mainbg.jpg) no-repeat center; background-size: cover;}
#mainslide .swiper-slide2412-ujiwazuka .kotei1650 { max-width: 825px;}
#mainslide .swiper-slide2412-ujiwazuka .worksmainover-sign { bottom: min(calc((20 / 375) * 100vw),70px); left: min(calc((20 / 375) * 100vw),70px); width: min(calc((60 / 375) * 100vw),120px);}
#mainslide .swiper-slide2412-ujiwazuka .worksmainover {width: 130%; }
@media screen and (max-width: 800px){
    #mainslide .swiper-slide2412-ujiwazuka .worksmainover-sign {display: none;}
}
/* swiper-slide2412-bistro */
.swiper-slide2412-bistro{background: url(https://zealplus.co.jp/zpwp/wp-content/uploads/2024/12/2022bistrot-karato_main_v2.jpg) no-repeat center; background-size: cover;}


#mainslide .swiper-button-prev,
#mainslide .swiper-button-next{ width: 20%; height: 100%; top: 0; margin: 0; background: none; text-decoration: none; color: #000; outline: none; -webkit-transition: all .3s; transition: all .3s;background-size: 24px 22px !important;}
#mainslide .swiper-button-prev{ left: 0; cursor: url(../images/index/indmain-prev.png), auto; }
#mainslide .swiper-button-next{ right: 0; cursor: url(../images/index/indmain-next.png), auto; }
#mainslide .swiper-pagination { bottom: 40px; margin-left: -20px;}
#mainslide .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0; margin-left: 40px; position: relative; background: none; opacity: 1; }
#mainslide .swiper-pagination-bullet:after { width: 7px; height: 7px; top: calc(50% - 3.5px); left: calc(50% - 3.5px); border-radius: 50%; content: ""; background: #fff; position: absolute; }
#mainslide .swiper-pagination-bullet:before { width: 12px; height: 12px; top: 0; left: 0; border: 2px solid #000; border-radius: 50%; opacity: 0.1; display: none; content: ""; position: absolute; }
#mainslide .swiper-pagination-bullet-active:before { display: block; }
#mainslide .swiper-pagination-bullet-active:after { display: none; }
@media screen and (max-width: 800px){
    .indmainwrap { max-height: 110vw; height: 75vh; margin: 75px 0 0; }
    #mainslide .swiper-pagination { bottom: 20px; margin-left: -10px;}
    #mainslide .swiper-pagination-bullet { margin-left: 20px;}
    #mainslide .swiper-button-prev,
    #mainslide .swiper-button-next{ background-size: calc(24px * 0.7)  calc(22px * 0.7) !important; display: none !important; }
    #mainslide .worksmainover { width: 160%;}
    #mainslide .swiper-slide.swiper-slide03 .worksmainover { top: 40px; left: 30px; width: 200px;}
}

svg.mainslidemaru { transform: rotate(-90deg); position: absolute;top: calc(50% - 7px); left: calc(50% - 7px); display: none; opacity: 1; }
#mainslide .swiper-pagination-bullet-active svg.mainslidemaru { display: block;}
.mainslidemaru circle { fill: transparent; stroke: #fff; stroke-width: 2; animation: circle 32s infinite; }
@keyframes circle {
  0% { stroke-dasharray: 0 377; }
  99.9%,to { stroke-dasharray: 377 377; }
}

.indnewswrap { padding: 40px 20px; margin-bottom: -15px; line-height: 1.5; }
.indnewswrap > div { margin-bottom: 15px;}
.remodal-overlay {background: rgba(255,247,240,0.95); }
.remodal { max-width: 1100px; margin-bottom: 0; padding: 0;}
.coronapop { padding: 120px 0 100px; position: relative; font-weight: normal;}
.coronapopmid { margin-bottom: 60px;}
.coronapopdl { margin-bottom: 30px;}
.coronapopdl dd { margin-bottom: 30px;}
.coronapopul { }
.coronapopul li { padding-left: 1em; position: relative;}
.coronapopul li:after { content: "-"; position: absolute; left: 0; top: 0;}
.coronadate { padding-top: 20px;}
.coronaclose{ position: absolute; top: 40px; right: 40px; width:40px; height: 40px; background: url(../images/common/close.png) no-repeat center; background-size: cover; cursor: pointer;}
@media screen and (max-width: 800px){
    .coronapop { padding: 80px 0 60px; }
    .coronapopmid { margin-bottom: 40px;}
    .coronaclose{ top: 20px; right: 20px;}
}

.indpickwrap{margin-bottom: 75px;}
.indpickul{ margin-left: -5px; margin-bottom: -5px;}
.indpickul li{ width: calc(100% / 3 - 5px); margin-left: 5px; margin-bottom: 5px;}
.indpickul li a{ display: block; height: 100%; background: #fff;}
.indpicktxt{ padding: 30px;}
.indpicktxt p:nth-child(1){ padding-right: 20px;}
@media screen and (max-width: 1500px){
    #mainslide,
    .indpickwrap{ margin-bottom: calc(75 * 0.05%);} 
}
@media screen and (max-width: 1200px){
    .indpicktxt{ padding: 30px 20px;} 
    .indpicktxt p:nth-child(1){ padding-right: 15px;}
}   
@media screen and (max-width: 800px){
    .indpickwrap{margin-bottom: 0;}
    .indpickwrap .inner1300 { width: calc(100% - 60px);}
    .indpickwrap .indmid{ margin-bottom: 30px; line-height: 1;}
    .indpickwrap .logolistul li { width: 100%;}
    .indpickwrap .logolisttxt { display: flex;}
}

.indmid{}
.inddetail{ display: flex; align-items: center; }
.inddetail p:nth-child(1){ width: 24px; margin-right: 10px;}
.inddetail p:nth-child(2){ padding-top: 5px; line-height: 1;}
@media screen and (max-width: 800px){
    .inddetail p:nth-child(1){ width: 28px; margin-right: 10px;}
    .inddetail p:nth-child(2){ font-size: 18px;}
} 

.indawwrap{ }
.indaboutwrap{ padding: 70px 20px 90px; width: calc(100% - 400px); position: relative;}
.indaboutwrap:after { content: ""; bottom: 0; height: 3px; background: #FF0064; position: absolute;}
.indaboutwrap:hover:after { animation: headmenuulli 0.5s forwards;}
.indaboutwrap .indmid{ margin-bottom: 40px;}
.indabouttxt{ }
.indaboutwrap .inddetail { bottom: 35px; right: 35px; align-self: flex-start; position: absolute;}
.indworkswrap{ width: 400px; flex-direction: column; text-align: center;}
.indworksyaji{ width: 22px; margin: 50px auto 40px;}
.indworkswrap:hover .indworksyaji { margin: 70px auto 20px; }
.indworkswrap .fs30 {}
.indworkswrap .inddetail{ margin-bottom: 35px;}
@media screen and (max-width: 1500px){
    .indaboutwrap{ width: 75%; padding: calc(70% * 0.05) calc(20% * 0.05) calc(90% * 0.05);}
    .indaboutwrap .indmid{ margin-bottom: calc(40% * 0.05); }
    .indaboutwrap .inddetail { bottom: calc(35vw * 0.05); right: calc(35vw * 0.05); }
    .indworkswrap{ width: 25%;}
    .indworkswrap .fs30 { line-height: 1.5;}
    .indworksyaji{ margin: 30px auto 30px;}
    .indworkswrap:hover .indworksyaji { margin: 40px auto 20px; }
    .indworkswrap .inddetail{ margin-bottom: calc(35vw * 0.05);}
}    
@media screen and (max-width: 1000px){
    .indabouttxt{ font-size: 2vw; }
}
@media screen and (max-width: 800px){
    .indawwrap{ flex-direction: column-reverse; }
    .indworkswrap{ width: 100%; flex-direction: column; text-align: center;}
    .indworksyaji{ width: 22px; margin: 50px auto 40px; }
    .indworkswrap .fs30 { margin-bottom: 50px; line-height: 2; font-size: 30px; letter-spacing: 0.08em; }
    .indworkswrap .inddetail{ margin-bottom: 40px;} 
    .indaboutwrap{ padding: 40px 30px; width: 100%; flex-direction: column; position: relative;}
    .indaboutwrap:after { content: ""; width: 30px; height: 100%; background: #F1F1F1; position: absolute; top: 0; right: 0;}
    .indaboutwrap .indmid{ margin-bottom: 30px; }
    .indabouttxt { margin-bottom: 40px; font-size:18px; padding-right: 30px; text-align: justify;}
    .indabouttxt br{ display: none; }
    .indaboutwrap .inddetail { align-self: center; bottom: 0; right: 0; position: inherit;}
} 

.indsolwrap {}
.indsolwrap .inner1300 { padding: 70px 0 120px 100px;}
.indsol-l{}
.indsolwrap .indmid{ margin-bottom: 40px; }
.indsolmid{ margin-right: 75px;}
.indsoltxt{ width: 260px;}
.indsoltxt:nth-child(1) { margin-bottom: 50px;}
.indsoltxt .fs18{ padding-bottom: 10px; margin-bottom: 20px; display: inline-block;}
.indsoltxt .fs18:after { width: 385px; height: 1px; background: #000; bottom: 0; left: 0;}
.indsoltxt:nth-child(2n) .fs18:after { left: inherit; right: -56px;}
.indsoltxt .fs14{ letter-spacing: 0; text-align: justify;}
.indsolwrap .inddetail{ left: 0; bottom: 0;}
.indsol-r{ width: 600px; right: 0; top: 0;}  
@media screen and (max-width: 1550px){
    .indsolwrap .inner1300 { padding-left:0;}
    .indsolmid{ margin-right: 50px;}
    .indsoltxt .fs18:after { width: calc(385vw * 0.07);}
    .indsol-r{ width: 50%;}
}
@media screen and (max-width: 1500px){
    .indsolwrap .inner1300 { padding: calc(70% * 0.05) 0 calc(120 * 0.05) calc(100 * 0.05);}
    .indsolwrap .indmid{ margin-bottom: calc(40% * 0.05); }
    .indsoltxt:nth-child(1) { margin-bottom: calc(50 * 0.05);}
}
@media screen and (max-width: 1250px){
    .indsoltxt{ width: 220px;}  
    .indsol-r{ right: -20px;}
}
@media screen and (max-width: 1000px){
    .indsolwrap { padding-bottom: calc(80% * 0.05);}
    .indsolwrap .inner1300 { padding: calc(70% * 0.05) 0 0;}
    .indsollrwrap { flex-direction: column; align-items: center;}
    .indsolmid{ margin: 0 0 60px 0; width: 100%; line-height: 1.5;}
    .indsoltxt{ width: 100%;}
    .indsoltxt:nth-child(1) { padding-right: 50px; margin-bottom: calc(50% * 0.05);}
    .indsoltxt:nth-child(2n) { padding-left: 50px;}
    .indsoltxt .fs18:after { width: 100vw;}
    .indsoltxt .fs14{ letter-spacing: 0;}
    .indsolwrap .inddetail{ left: 0; bottom: 0; position: inherit; }
    .indsol-r{ margin: calc(50% * 0.05) auto calc(80% * 0.05); max-width: 450px; width: 100%; position: inherit; right: 0;}
}
@media screen and (max-width: 800px){
    .indsolwrap { padding-bottom: 60px;}
    .indsolwrap .inner1300 { width: calc(100% - 60px); padding-top: 40px;}
    .indsolwrap .indmid { margin-bottom: 30px; line-height: 1; }
    .indsolmid{ margin-bottom: 30px; line-height: 2;}
    .indsoltxt:nth-child(1) { margin-bottom: 30px}
    .indsol-r{ margin: 30px auto 60px;}
}

.indfeewrap { padding-bottom: 50px;}
.indfeewrap .inner1000 { }
.indfeewrap .indmid { margin-bottom: 40px;}
.indfee01 { margin-bottom: 120px;}
.indfee01 .fs22 {}
.indfee01-r{ width: calc(100% - 240px); }
.indfee01-r p.fs18 { margin-bottom: 30px; border-bottom: 1px solid #000;}
.indfee02{}
.indfee02ul { margin-left: -55px; margin-bottom: 75px; }
.indfee02ul li{ max-width: 256px; width: calc(100% / 3 - 55px); height: 100px; margin-left: 55px; line-height: 1; }
.indfee02ul li p:nth-child(1) { margin-bottom: 10px;}
.indfee02ul li.after:after {width: 20px; height: 20px; top: calc(50% - 10px); left: calc(100% + 17px); background: url(../images/common/ico-plus.png) no-repeat center; background-size: cover;}
.indfee02ul li.before:before { width: 20px; height: 20px; left: calc(50% - 10px); top: -47px; background: url(../images/common/ico-equal.png) no-repeat center; background-size: cover;}
.indfeelink {}
.indfeelink a { padding: 0 5px; border-bottom: 4px solid #FF0064;}
@media screen and (max-width: 800px){
    .indfeewrap { padding-bottom: 30px;}
    .indfeewrap .indmid { margin-bottom: 20px;}
    .indfee01 { margin-bottom: 60px;}
    .indfee01-r{ margin-top: 40px; width: 100%; }
    .indfee01-r p.fs18 { margin-bottom: 20px;}
    .indfee02ul {margin-bottom: 0; flex-direction: column; align-items: center}
    .indfee02ul li{ max-width: 200px; width:100%; height: 80px; margin-bottom: 44px; }
    .indfee02ul:nth-child(2) li:last-child { margin-bottom: 30px;}
    .indfee02ul li p:nth-child(1) { margin-bottom: 10px;}
    .indfee02ul li.after:after { width: 16px; height: 16px; top: calc(100% + 14px); left: calc(50% - 5px);}
    .indfee02ul li.before:before { width: 16px; height: 16px; left: calc(50% - 8px); top: -30px; }
}  
    
    
.indlinewrap{ padding-bottom: 100px;}
.indlinewrap .indmid{ padding-left: 100px; margin-bottom: 40px; color: #000; }
.indlineul,
.indlineul02{ color: #FF0064;}
.indlineul li{ margin-bottom: 4px; align-items: flex-start;}
.indlineul li.indline1x {width: calc(100% / 5 - 2px); }
.indlineul li.indline2x{ width: calc(100% / 5 * 2 - 2px); background: #fff; }
.indlineul li.indline3x{ width: calc(100% / 5 * 3 - 1px); }
.indlineul li.indline1x .indline1xin{ width: 100%; }
.indlineul li.indline3x .indline1xin{ width: calc(100% / 3 - 2px); }
.indline1xwrap { margin-bottom: -4px;}
.indline1xin { margin-bottom: 4px; }
.indlineimg{ margin-bottom: 1px;}
.indlinetxtwrap{ padding: 0 10px; height: 90px; background: #fff; flex-direction: column;}
.indlinewrap .inddetail { position: absolute; right: 20px; bottom: 10px;}
@media screen and (max-width: 1100px){
    .indlinewrap .inddetail { right: 10px; bottom: 5px;}
    .indlinewrap .inddetail p:nth-child(1) { width: 12px; margin-right: 5px;}
    .indlinewrap .inddetail p:nth-child(2) { padding-top: 14px;}
}
@media screen and (max-width: 800px){
    .indlinewrap .inddetail { right: 10px; bottom: 10px;}
    .indlinewrap .inddetail p:nth-child(1) { width: 17px; margin-right: 0;}
}  
.indlineul li.indline2x .indlinetxtwrap { height: 180px; padding: 0 20px;}
.indlinetxtwrap p,
.indlinetxtwrap02 p{ line-height: 1.5}
.indlinetxtwrap p:first-child,
.indlinetxtwrap02 p:first-child{}
.indlinetxtwrap .fs18:first-child { margin-bottom: 5px;}
.indlinetxtwrap .fs29:last-child,
.indlinetxtwrap02 .fs29:last-child{ margin-top: 5px; line-height: 1;}
.indlinetxtwrap .fs45:last-child{ margin-top: 20px; line-height: 1;}
.indlinetxtwrap .fs32:last-child{ margin-top: 10px; line-height: 1;}
.indlinetxtwrap .indlinetxt-ask { margin-top: 20px !important; }
.indlineul02 li {  width: calc(100% / 6 - 2.5px); margin-bottom: 4px;}
.indlinetxtwrap02{ padding-left: 10px; height: 90px; background: #fff; flex-direction: column;}
.indlinetxtwrap02 .fs14{ letter-spacing: 0;}
.indlinetxtwrap02 br { display: none;}
.indlinemail{}
.indlinemail-l{ padding: 30px; width: calc(100% / 6 * 4 - 2.5px / 2); background: #FF0064; text-align: justify; line-height: 2.2; z-index: 2;}
.indlinemail-l:after { left: 100%; top: calc(50% - 6px); width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #FF0064; }
.indlinedata { margin-top: 15px; text-align: right;}
.indlinedata a { display: inline-block; border-bottom: 1px solid #FF0064;}
@media screen and (min-width: 801px){
    .indlinemail-r{ width: calc((100% / 6 - 4px) * 2 + 6px);}
    .indlinemail-r a{ height: 100%; background: #FFDA00; flex-direction: column; position: relative; overflow: hidden;}
    .indlinemail-rimg{ width: 150px; height: 150px; top: calc(50% - 150px); left: calc(50% - 130px); position: absolute; animation: kamihikouki2 1s forwards;}
    a:hover .indlinemail-rimg { animation: kamihikouki 1s forwards; transform-origin: 0 0;  }
    @keyframes kamihikouki2 {
        0% { transform: rotate(90deg); }
        70% { transform: rotate(0); }
        100%{ transform: rotate(0); }
    }
    @keyframes kamihikouki {
        0% {  transform: rotate(0); }
        30% { transform: rotate(0); }
        100%{ transform: rotate(-180deg); }
    }
    .indlinemail-rtxtwrap { margin-top: 70px; overflow: hidden; animation: indlinemail-rtxtwrap2 1s forwards; }
    .indlinemail-r .indlinemail-rtxtwrap p:nth-child(1) {}
    .indlinemail-r .indlinemail-rtxtwrap p:nth-child(2) { position: relative; top:100%; opacity: 0; }
    a:hover .indlinemail-rtxtwrap { animation: indlinemail-rtxtwrap 1s forwards; }
    a:hover .indlinemail-rtxtwrap p:nth-child(1) {animation: indlinemail-rtxt01 0.4s forwards 0.2s; }
    a:hover .indlinemail-rtxtwrap p:nth-child(2) {animation: indlinemail-rtxt02 0.4s forwards 0.2s; }
    @keyframes indlinemail-rtxtwrap2 {
        0%{ margin-top: 140px;}
        70% { margin-top: 70px; }
        100% {  margin-top: 70px;}
    }
    @keyframes indlinemail-rtxtwrap {
        0% {  margin-top: 70px;}
        30% { margin-top: 70px;}
        100%{ margin-top: 0;}
    }
    @keyframes indlinemail-rtxt01 {
        0% { }
        100%{ top:-100%;}
    }
    @keyframes indlinemail-rtxt02 {
        0% { opacity: 0; }
        10% { opacity: 1; }
        100%{top: 0; opacity: 1;}
    }
}

@media screen and (max-width: 1450px){
    .indlinewrap{ padding-bottom: calc(100% * 0.05);}
    .indlinewrap .indmid{ padding-left: calc(100% * 0.05); margin-bottom: calc(40% * 0.05); }
    .indlineul .fs14,
    .indlineul02 .fs14{ font-size: 0.9vw; }
    .indlinetxtwrap .fs18:first-child { margin-bottom: 0.25vw; font-size: 1.2vw;}
    .indlinetxtwrap .fs29:last-child,
    .indlinetxtwrap02 .fs29:last-child {margin-top: 0.25vw; font-size: 2vw; }
    .indlinetxtwrap .fs45:last-child{ margin-top: 1vw; font-size: 3vw;}
    .indlinetxtwrap .fs32:last-child{ margin-top: 0.5vw; font-size: 2.3vw;}
    .indlinetxtwrap,
    .indlinetxtwrap02{height: 6vw;}
    .indlineul li.indline2x .indlinetxtwrap { height: 12vw;}
    .indlinemail-l{padding: 20px; line-height: 1.8; }
}  
@media screen and (max-width: 800px){
    .indlinewrap{ padding-bottom: 15px;}
    .indlinewrap .indmid{ padding-left: 15px; margin-bottom: 15px;}
    .indlineul{ margin-left: -2px; flex-wrap: wrap;}
    .indlineul li { width:calc(100% / 3 - 2px); margin-left: 2px; margin-bottom: 2px; }
    .indlineul li.indline2x{ width:calc(100% / 2 - 2px);}
    .indlineimg{ margin-bottom: 1px;}
    .indlinetxtwrap,
    .indlineul li.indline2x .indlinetxtwrap,
    .indline2x .indlinetxtwrap {padding: 0 10px; height: 75px;}
    .indlinetxtwrap .fs18:first-child,
    .indlinetxtwrap .fs14:first-child,
    .indlinetxtwrap02 .fs14{ font-size: 10px; margin-bottom: 0; letter-spacing: 0;}
    .indlinetxtwrap .fs10:nth-child(2),
    .indlinetxtwrap .fs14:nth-child(2){ font-size: 7px;}
    .indlinetxtwrap .fs29:last-child,
    .indlinetxtwrap02 .fs29:last-child,
    .indlinetxtwrap .fs32:last-child{ font-size: 16px; margin-top: 5px;}
    .indlinetxtwrap .fs45:last-child{ font-size: 18px; margin-top: 5px;}
    .indlinetxtwrap .indlinetxt-ask { margin-top: 10px !important; }
    .indlineul02{ margin-left: -2px;}
    .indlineul02 li { margin-left: 2px; margin-bottom: 2px; width: calc(100% / 3 - 2px);}
    .indlinetxtwrap02 { padding: 10px; height: 75px; position: relative; display: block;}
    .indlinetxtwrap02 br { display: inherit;}
    .indlinetxtwrap02 .fs29 {font-size: 16px; left: 10px; bottom: 10px; position: absolute;}
    .indlinemail{ flex-direction: column;}
    .indlinemail-l{ padding: 15px; width: 100%; margin-bottom: 2px; line-height: 1.8; font-size: 14px; }
    .indlinemail-l:after { left:calc(50% - 6px); top: 100%; width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #FF0064 transparent transparent transparent; }

    .indlinemail-r{ height: 100px; width: 100%; position: relative;}
    .indlinemail-r a{ height: 100%; background: #FFDA00; flex-direction: row; }
    .indlinemail-r div{ width: 40px; height: 40px; top:calc(50% - 20px); left: calc(50% - 40px - 4.5em); position: absolute;}
    .indlinemail-r a:hover div { animation: none; }
    .indlinemail-r p { font-size: 20px; padding-top: 0; padding-left: 40px; letter-spacing: 0.1em;}
    .indlinedata { margin-top: 10px;}
}
@media screen and (max-width: 400px){
    .indlinetxtwrap,
    .indlineul li.indline2x .indlinetxtwrap,
    .indline2x .indlinetxtwrap{ padding: 0 5px 0 8px; }
    .indlinetxtwrap02 { padding: 10px 0 0 10px;}
    .hide-400 { display: none;}
}

.lineup-pop{ padding: 100px; padding-right: 80px; text-align: left;}
.lineup-popmid{ margin-bottom: 40px;}
.lineup-popmid p.fs18{}
.lineup-popmid p.fs14{}
.lineup-popmid p.fs45{}
.lineup-popul{ margin-bottom: 150px; letter-spacing: 0;}
.lineup-popul li{ margin-bottom: 10px;}
.lineup-popul li:after { width: 10px; height: 2px; left: -30px; top: 15px; background: #FF0064; }
.lineupclose{ width: 30px; height: 30px; background: url(../images/common/close-p.png) no-repeat center; background-size: cover;}
@media screen and (max-width: 800px){
    .lineup-pop{ padding: 40px 20px 30px 30px;}
    .lineup-popmid{ margin-bottom: 20px;}
    .lineup-popmid p.fs18{ font-size: 14px;}
    .lineup-popmid p.fs14{ font-size: 11px;}
    .lineup-popmid p.fs45{ font-size: 24px;}
    .lineup-popul{ margin-bottom: 40px; font-size: 12px;}
    .lineup-popul li{ margin-bottom: 10px;}
    .lineup-popul li:after { width: 6px; height: 1px; left: -13px; top: 12px; }
    .lineupclose{ width: 20px; height: 20px; }
}


/* about
==========================================================*/

.about01wrap{ padding-top: 60px; flex-direction: column;}
.about01wrap .fs26{ margin-bottom: 60px; }
.about01wrap .fs18{}
@media screen and (max-width: 980px){
    .about01wrap .fs26{ font-size: 2.3vw; margin-bottom: calc(60% * 0.1); }
    .about01wrap .fs18{ font-size: 1.5vw }
}
@media screen and (max-width: 800px){
    .about01wrap { width: calc(100% - 60px);}
}  
    
.about02wrap > .flex-jcc{ /*height: 100vh;*/ min-height: 100vh; padding-top: 30px; padding-bottom: 30px;flex-direction: column;}

.aboutmidico{ width: 24px; margin-bottom: 10px;}
.aboutmid{ margin-bottom: 40px; line-height: 1;}
.aboutmidsub{ margin-bottom: 40px; line-height: 1.2;}
.abouttxt{ margin-bottom: 120px;}
.abouttxt .fs14{}
.abouttxt .fs18{}
.aboutmarkwrap{ }
.aboutmarkwrap div{ width: 76px;}
.aboutmarkbgwrap{position: relative;}
.aboutmarkbg{ background-color: #FD0032;  z-index: 1;
    position: absolute;  content: ""; left: calc(50% - 38px); top: -76px; width: 76px; height: 76px; border-radius: 50%;}


.about03wrap{ text-align: center; background: #FD0032;}
.about03wrap .inner1300{ height: 100vh; height: calc(90vh - calc(calc(100vh - 450px) /2 )); }
.about03top{ top: 90px; top: -70px;  width: 100%; z-index: 2; }
.about03top .fs14{}
.about03top .fs18{}
.about03txt{}


/* 2412 Add publish */
.publishwrap{ padding: 100px 0 120px; background-color: #f1f1f1; color: #000;}

.publishlistul{ margin-left: -5px; padding-top: 60px;}
.publishlistul li{ width: calc(100% / 3 - 5px); margin-left: 5px; margin-bottom: 5px;}
.publishlistul li a{ display: block; width: 100%; color: #000; }
.publishlistul li a * {-webkit-transition: all 0.5s; transition: all 0.5s;  }
.publishlistimg { aspect-ratio: 4.3 / 3; overflow: hidden; }
.publishlistimg img{ width: 100%; height: 100%; object-fit: cover; }
a:hover .publishlistimg img {transform: scale(1.1); }
.publishlisttxt{ padding: 24px 30px; background: #fff; display: flex;  cursor: default;}
.publishlisttxt p{}
.publishlisttxt p:nth-child(1){ width: calc(100% - 0em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media screen and (max-width: 800px){
    .publishwrap{ padding: 70px 0 80px; }
    .publishwrap .inner1100 { width: calc(100% - 60px);}
    .publishlistul{ padding-top: 30px;}
    .publishlistul li{ width: calc(100% / 2 - 5px); }
    .publishlisttxt{ padding: 10px 15px; display: block; font-size: 10px; }
}  


.companywrap{ padding: 100px 0 120px;}
.companymid { margin: 100px 0 40px; line-height: 1;}
.companylrwrap{}
.company-l{ width: 270px;}
.company-l01{}
.company-l01ul:nth-child(1){margin-bottom: 20px; }
.company-l01ul:nth-child(1) li:nth-child(1){ margin-bottom: 10px;}
.company-l01ul:nth-child(2) li:nth-child(1){ margin-bottom: 40px;}
.company-r { width: 720px;}
.company-r01{ margin-bottom: 70px;}
.company-r01mid{ margin-bottom: 10px;}
.company-r01dl{ letter-spacing: 0;}
.company-r01dl dt{}
.company-r01dl dd{ margin-bottom: 20px;}
.company-l02{ align-self: flex-end;}
.company-l02ul{ line-height: 1;}
.company-l02ul li:nth-child(1){ margin-bottom: 40px;}
.company-l02ul li:nth-child(2){ margin-bottom: 80px;}
.company-l02ul li a{ display: block;}
.company-l02ul li .flex-aic { margin-bottom: 15px; }
.company-l02ul li .flex-aic div{ width: 26px; margin-right: 10px;}
.company-l02ul li .flex-aic p{}
.company-r02{}
@media screen and (max-width: 1400px){
    .aboutmid{ font-size: 7vw; margin-bottom: calc(40 * 0.07vw);}
    .aboutmidsub {font-size: 3.5vw; margin-bottom: calc(40 * 0.07vw); }
    .companymid { font-size: 3.5vw; margin: calc(100 * 0.07vw) 0 calc(40 * 0.07vw); }
    .company-l{ width: 270px; }
    .company-r { width: calc(100% - 270px - 20px);}
}
@media screen and (max-width: 800px){
    .contents { margin-top: 75px; padding-top: 0;}
    .sp-pagettl { padding: 40px 0 30px; line-height: 1; width: calc(100% - 60px) !important; }
    .about01wrap{ padding: 0; flex-direction: column;}
    .about01wrap .fs26{ font-size: 13px; margin-bottom: 30px;}
    .about01wrap .fs26 br { display: none;}
    .about01wrap .fs18{ font-size: 11px;}
    .about02wrap{ height: calc(100vh - 75px); align-items: center;}
    .aboutmidico{ width: 18px; margin-bottom: 15px;}
    .aboutmid{ font-size: 40px; margin-bottom: 20px;}
    .aboutmidsub{ font-size: 18px; margin-bottom: 20px; letter-spacing: 0;}
    .abouttxt{ margin-bottom: 50px;}
    .abouttxt .fs14{ font-size: 10px;}
    .abouttxt .fs18{ font-size: 13px;}
    /* .aboutmarkwrap div{ width: 50px;} */
    .about03wrap{ height: calc(100vh - 75px); text-align: center; background: #FD0032;}
    .about03wrap .inner1300{ height: 100vh; flex-direction: column; }
    .about03top{ margin-bottom: 60px; top: 0; position: inherit;}
    .about03top .fs14{ font-size: 10px;}
    .about03top .fs18{ font-size: 13px;}
    .about03txt{ font-size: 14px;}
    
    .companywrap{ padding: 70px 0 30px; border-bottom: 1px solid #59C9E4;}
    .companywrap .inner1100 { width: calc(100% - 60px);}
    .companymid { margin: 50px 0 30px; font-size: 28px; letter-spacing: 0;}
    .companylrwrap{ padding-top: calc(3em + 70px); flex-direction: column; position: relative; font-size: 13px;}
    .company-l{ width: 100%;}
    .company-l01{ order: 2;}
    .company-l01ul:nth-child(1){ position: absolute; top: 0; left: 0;}
    .company-l01ul:nth-child(1) li:nth-child(1){ font-size: 14px; margin-bottom: 10px;}
    .company-l01ul:nth-child(2) { margin-bottom: 30px; display: flex; flex-direction: column;}
    .company-l01ul:nth-child(2) li:nth-child(1){ order: 2; margin-bottom:0;}
    .company-l01ul:nth-child(2) li:nth-child(2) { margin-bottom: 30px; order: 1; }
    .company-l01ul:nth-child(2) li:nth-child(2) img { width: 100%;}
    .company-r { width: 100%;}
    .company-r01{ order: 3; margin-bottom: 0;}
    .company-r01mid{ margin-bottom: 10px;}
    .company-r01dl{ letter-spacing: 0;}
    .company-r01dl dt{}
    .company-r01dl dd{ margin-bottom: 20px;}
    .company-l02ul{ line-height: 1;}
    .company-l02ul li:nth-child(1){ margin-bottom: 40px;}
    .company-l02ul li:nth-child(2){ margin-bottom: 80px;}
    .company-l02ul li a{ display: block;}
    .company-l02ul li .flex-aic { margin-bottom: 15px; }
    .company-l02ul li .flex-aic div{ width: 26px; margin-right: 10px;}
    .company-l02ul li .flex-aic p{}
    .company-r02{ margin-bottom: 30px; order: 1; }
}
@media screen and (max-width: 400px){
    .about01wrap .fs18 { text-align: justify;}
    .about01wrap .fs18 br { display: none;  }
}

/* kasou
==========================================================*/

.pagemidwrap { padding: 60px 0 120px; }
.pagemidjp{ margin-bottom: 20px;}
.pagemiden{ line-height: 1.2;}
.pagemidensub { margin-top: 30px; line-height: 1.5;}
.pagemidimg { width: 194px; margin: 90px auto 0;}
.pagetxt { margin-top: 100px; text-align: justify; letter-spacing:0.01em;}
@media screen and (max-width: 1400px){
    .pagemidwrap { padding: calc(120vw * 0.07) 0; }
    .page-recruit .pagemidwrap { padding: calc(60vw * 0.07) 0 calc(130vw * 0.07); }
    .pagemidimg { width: 194px; margin: 90px auto 0;}
    .pagetxt { margin-top: 100px; text-align: justify; letter-spacing:0.01em;}
}   
@media screen and (max-width: 800px){
    .pagemidwrap { padding: 0 0 40px; }
    .pagemidwrap .inner900 { width: calc(100% - 60px);}
    .page-recruit .pagemidwrap { padding: 0 0 100px;}
    .pagemidjp{ font-size: 13px; margin-bottom: 15px;}
    .pagemiden{ font-size: 28px;}
    .pagemidensub { font-size: 18px; margin-top: 20px; letter-spacing: 0;}
    .pagemidimg { width: 140px; margin: 40px auto 0;}
    .pagetxt { margin-top: 40px; font-size: 11px; }
    .pagetxt br { display: none;}
}
@media screen and (max-width: 400px){
    .pagemidensub { font-size: 4.5vw;}
}



/* solution
==========================================================*/

.sol02wrap{ padding-bottom: 100px; flex-direction: column;}
.soleye{ width: 190px; margin: 100px auto 0;}
.soltxt{ margin-top: 130px; white-space: nowrap;}
.sol03wrap{ padding: 100px 0 120px;}
.solmid{ margin-bottom: 30px; line-height: 1;}
.solmidsub{ margin-bottom: 40px; line-height: 1.4;}
.solmidjp{ margin-bottom: 20px; line-height: 1.4;}
.solmidjpsub{}
.teamwrap { margin-top: 100px;}
.teamimgwrap{ max-width: 600px; width: 60%; margin: 0 auto 80px; flex-direction: column;}
.team01{}
.teammid{ margin: -20px 0 20px; flex-direction: column;}
.teammid p{ line-height: 1;}
.teamyaji{ margin-top: 5px; width: 20px;}
.team02{ width: 50%;}
.sol03ulwrap{}
.sol03ulwrap > div:nth-child(1){ width: calc(815 / 1100 * 100%);}
.sol03ulwrap > div:nth-child(2){ width: calc(245 / 1100 * 100%);}
.sol03ulmid{ margin-bottom: 20px;}
.sol03ulmid:after { width: 100%; height: 1px; top: 50%; left: 0; background: #000;}
.sol03ulmid p { padding-right: 20px; display: inline-block; position: relative; z-index: 2;}
.sol03ul{ letter-spacing: 0;}
.sol03ul li{ width: calc(245 / 815 * 100%);}
.sol03ulwrap > div:nth-child(2) .sol03ul li { width: 100%;}
.sol03ul li .fs16{ margin-bottom: 10px;}
.sol03ul li .fs14{ text-align: justify;}
.sol04wrap{ padding-bottom: 120px;}
.sol04wrap .inner1100{ padding-bottom: 100px;}
.sol04wrap .inner1300{} 
@media screen and (max-width: 1400px){
    .sol02wrap{ padding-bottom: 45px; width: calc(100% - 60px);}
    .soleye{ margin: 100px auto 0;}
    .soltxt{ margin-top: calc(130vw * 0.07);}
    .sol03wrap{ padding: calc(100vw * 0.07) 0 calc(120vw * 0.07);}
    .solmid { font-size: 6.4vw;}
    .solmidsub { font-size: 2vw; }
    .teamwrap { margin-top: calc(100vw * 0.07);}
    .sol04wrap{ padding-bottom: calc(120vw * 0.07);}
    .sol04wrap .inner1100{ padding-bottom: calc(100vw * 0.07);}
}
@media screen and (max-width: 1250px){
    .sol03ulwrap > div:nth-child(1){ margin-bottom: 30px; width: 100%;}
    .sol03ulwrap > div:nth-child(2){ width: 100%;}
}
@media screen and (max-width: 1000px){
    .soltxt{ white-space: pre-wrap;}
    .soltxt br { display: none;}
    .sol03ulmid p { padding-right: 10px;}
    .sol03ul li .fs14 { font-size: 12px;}
}    
@media screen and (max-width: 800px){
    .soleye{ width: 120px; margin: 80px auto 0;}
    .soltxt{ font-size: 11px; margin-top: 70px;}
    .sol03wrap{ padding: 30px 0 0; width: calc(100% - 60px);}
    .solmid{ font-size: 40px; margin-bottom: 20px;}
    .solmidsub{ font-size: 18px; margin-bottom: 20px; letter-spacing: 0;}
    .solmidjp{ font-size: 15px; margin-bottom: 20px; }
    .solmidjpsub{ font-size: 11px; width: calc(100vw - 60px);}
    .solmidjpsub br { display: none;}
    .teamwrap { margin-top: 40px; }
    .teamimgwrap{ max-width: 450px; width: 100%; margin: 30px auto 40px;}
    .team01{}
    .teammid{ margin: -10px 0 12px; flex-direction: column; letter-spacing: 0;}
    .teammid p{ font-size: 14px;}
    .teamyaji{ width: 15px;margin-top: 2px;}
    .team02{ width: 50%;}
    .sol03ulwrapwrap { margin-bottom: 25px; overflow: hidden; overflow-x: scroll;}
    .sol03ulwrap { width: 855px; padding-bottom: 25px; }
    .sol03ulwrap > div:nth-child(1){ width: calc(815 / 1100 * 100%);}
    .sol03ulwrap > div:nth-child(2){ width: calc(245 / 1100 * 100%);}
    .sol03ulmid{ font-size: 14px;}
    .sol03ul li{ width: calc(245 / 815 * 100%);}
    .sol03ul li .fs16{ font-size: 13px; margin-bottom: 5px;}
    .sol03ul li .fs14{ font-size: 11px;}
    .sol04wrap{ padding-bottom: 80px;}
    .sol04wrap .inner1100{ padding-bottom: 40px; width: calc(100% - 60px);}
}
@media screen and (max-width: 350px){
    .solmidsub{ font-size: 5.2vw; }
    .solmidjp br { display: none;}
    .flowwrap .solmidjp br { display: inline;}
}   



.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
}
.side-scroll-list {
  position: absolute; top: 0px;left: 0; 
}
/*
.gsap-marker-end,
.gsap-marker-start,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end{ display: none !important;}
*/

.flowwrap{ padding-bottom: 150px; padding-left: 200px; }
.flowinner{ /*padding-left: 200px; width: calc(2063px + 200px);*/ }
.flowul { width: 2063px; padding-top: 10px ; }
.flowul li {}
.flowul li > div > img { height: 638px; width: auto;}
.flowattentionbtn{ left: 30px; bottom: 50px; cursor: pointer;}
.flowattentionbtn > div { padding-left: 30px;}
.flowattentionbtn > div:after { width: 20px; height: 20px; top: 0; left: 0; background: url(../images/solution/attention.png) no-repeat center; background-size: cover; transition: 0.2s;}
.flowattentionbtn:hover > div:after { transform: scale(1.3);}
.flowattentionbtn .fs20{ line-height: 1;}
.flowattentionbtn .fs14{white-space: nowrap;}
.flowattentiontxtwrap { margin-bottom: 10px; position: relative; height: calc(20em / 14); overflow: hidden;  }
.flowattentiontxtwrap p { position: absolute; top: 0; left: 0;line-height: 1;}
.flowattentiontxtwrap p:nth-child(2) { top: 1em;}
.flowattentionbtn:hover p:nth-child(1)  { top: -1em; }
.flowattentionbtn:hover p:nth-child(2) { top: 0;}

.flowattention { max-width: 1100px; padding: 70px 0 50px; width: 100%; flex-direction: column; }
.flowattention .inner750{ flex-direction: column;}
.flowattentionmid{ margin-bottom: 40px; line-height: 1;}
.flowattentiontxt{ margin-bottom: 50px;}
.flowattentionclose{ width: 22px; height: 22px; background: url(../images/solution/close.png) no-repeat center; background-size: cover; cursor: pointer;}
.flowyajiwrap{ max-width: 400px; width: 100%; margin: 100px auto 0; text-align: center;}
.flowyajiwrap > a { flex-direction: column;}
.flowyajiwrap .fs16{ margin-bottom: 40px;}
.flowyaji{ width: 265px; animation: flowyaji 1s forwards; position: relative;top: -20px;}
.flowyajiwrap > a:hover .flowyaji { top: 15px;}
.flowyajiwrap .fs54{}
.flowyajiwrap .inddetail{}

@media screen and (max-width: 1700px){
    .flowwrap{ padding-left: calc(50vw - 650px); }
    .flowinner{ }   
} 

@media screen and (max-width: 1400px){
    .flowinner{ padding-left: 40px;}   
} 
@media screen and (max-width: 800px){
    .flowwrap{ padding-bottom: 0;  }
    .flowinner{ padding-left: 20px; }
    .flowul { width: 1800px; padding-top: calc(75px + 5px); }
    .flowul li {}
    .flowul li > div > img { height: 430px; width: auto;}
    .side-scroll-list-wrapper {height: 430px; }
    .flowattentionbtn{ left: 20px; bottom: 30px; cursor: pointer;}
    .flowattentionbtn > div { padding-left: 20px;}
    .flowattentionbtn > div:after { width: 13px; height: 13px;}
    .flowattentionbtn .fs20{ font-size: 14px;}
    .flowattentionbtn .fs17{ font-size: 13px;}
    .flowattentionbtn .fs14{ font-size: 10px;}
    .flowattentiontxtwrap { height: 1em; }
    .flowattention { width: calc(100vw - 30px); }
    .flowattentionmid{ font-size: 25px; margin-bottom: 35px;}
    .flowattentiontxt{ font-size: 14px; margin-bottom: 30px;}
    .flowattentionclose{ width: 22px; cursor: pointer;}
    .flowyajiwrap { margin: 0; padding: 80px 0 40px;}
    .flowyajiwrap .fs16{ margin: 60px 0 40px;}
    .flowyaji{ width: 145px; margin-bottom: 10px;}
    .flowyajiwrap .fs54{ font-size: 36px; margin-bottom: 10px;}
    .flowyajiwrap .inddetail{} 
}
@media screen and (max-width: 600px){
    .flowyajiwrap { margin: 0; padding: 80px 0 40px;}

}



/* works
==========================================================*/

.workslistwrap{ margin-top: 80px; padding-bottom: 100px}
.workslistnav{ margin-bottom: 100px;}
.workslistnav > div {}
.workslistnav-l{ margin-right: 190px;}
.workslistnav-l{}
.worksbtn-all { padding: 0 8px; position: relative; display: block;}
.workslistnav-r{}
.workslistnav-r .poab{ top: 0; left: 0;}
.workslistnav-rul{ margin-right: -40px;}
.workslistnav-rul li{ padding: 0 8px; margin-right: 40px; position: relative;}
.workslistnav-rul li:after { content: "/"; right: -25px; }
.workslistnav-rul li:last-child:after { display: none;}
.workslistnav-rul li.active {}
.workslistnav-rul li.active:before,
.worksbtn-all.active:before,
.workslistnav-rul li:hover:before,
.worksbtn-all:hover:before{ bottom: -4px; content: ""; position: absolute;height: 2px; background: #000; animation: workslistnav-rulliactivebefore 0.3s forwards; }
@keyframes workslistnav-rulliactivebefore {
0% { width: 0px; left: 50%; }
100%{ width: 100%; left:0; }
}
/*
.page-worksall .logolistulwrap,
.page-worksall .weblistulwrap,
.page-worklogo .alllistulwrap,
.page-worklogo .weblistulwrap,
.page-worksweb .alllistulwrap,
.page-worksweb .logolistulwrap { display: none;}
*/

.logolistul{ margin-left: -5px;}
.logolistul li{ width: calc(100% / 3 - 5px); margin-left: 5px; margin-bottom: 5px;}
.logolistul li a{ display: block; width: 100%; }
.logolistul li a * {-webkit-transition: all 0.5s; transition: all 0.5s;  }
.logolistimg{ background-color: #FAFAFA !important; background-size: 100% !important; background-position: center !important;}
a:hover .logolistimg { background-size: 110% !important; }
.logolistimg video { width: 100%}
.thumb-movie_wrapper { aspect-ratio: 430/300;overflow: hidden;}
.thumb-movie_wrapper video { width: 100%; object-fit: cover; height: 100%; filter: drop-shadow(0px 0px #000);}
a:hover .thumb-movie_wrapper video { transform: scale(110%);}
.logolisttxt{ padding: 10px 15px; background: #fff; display: flex; justify-content: space-between; cursor: default;}
.logolisttxt p{}
.logolisttxt p:nth-child(1){ width: calc(100% - 6em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width: 1000px){
    .workslistnav-l{ margin-right: 50px;}
}  
@media screen and (max-width: 800px){
    .workslistwrap{ margin-top: 30px; padding-bottom: 50px}
    .workslistwrap .inner1300 { width: calc(100% - 60px);}
    .workslistnav{ margin-bottom: 30px; width: calc(100% - 60px); justify-content: space-between;}
    .workslistnav .fs20 { font-size: 16px; }
    .workslistnav-l{margin-right:0;}
    .worksbtn-all { padding: 0 4px; }
    .workslistnav-r { width: 50%;}
    .workslistnav-rul { margin-right: -10px;}
    .workslistnav-rul li{ padding: 0 4px; margin-right: 10px;}
    .workslistnav-rul li:after {right: -10px; }
    .logolistul li{ width: calc(100% / 2 - 5px); }
    .logolisttxt{ padding: 10px 15px; display: block; font-size: 10px; }
}   
@media screen and (max-width: 400px){
    .workslistnav-r { width: auto;}  
    .workslistnav .fs20 { font-size: 13px;}
}

.paginationwrap{ margin-top: 40px;}
.pagination{ margin-left: -15px; }
.pagination .current,
.pagination .inactive { margin-left: 15px; display: inline-block; position: relative;}
.pagination .current:after { content: ""; width: 100%; height: 2px; background: #000; bottom: 0; left: 0; position: absolute;}
.pagination .inactive { }




.workswrap{}
.worksmain{ width: 100%; height: calc(100vh - 195px); min-height: 500px; margin-top: -90px; 
/*background: #fff;*/
}
.worksmain video { width: 100%; height: 100%; object-fit: cover;filter: drop-shadow(0px 0px #000); position: relative; z-index: 2;}
.worksmain img#mainImage { width: 100%; object-fit: cover; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1;}
.worksmain.worksmain-videoaspect { height: inherit; min-height: inherit; aspect-ratio: 16/9;}
.worksmainover { width: 100%; position: absolute; z-index: 9;}
.worksmainover.kotei1650 { max-width: 1650px;}
.worksmainover.sunnydays2015 { width: 160px !important; bottom: 0; right: 0;}
.worksmainover.plie2016 { max-width: 1830px; top: calc(85 / 925 * 100%); }
.worksmainover.unoyukiko2019 { top: calc(80 / 925 * 100%); }
.worksmainover.dammann201701 { top: 0;}
.worksmainover.dammann201702 { bottom: 0;}
.worksmainover.odhc2019 { bottom: 0;}
.worksmain.publishmain{background: #c4c4c4;overflow: hidden;}
.worksmain.publishmain > div,
.worksmain.bg-g3 > div { max-width: 1500px; }

@media screen and (max-height: 1050px){
    .worksmain.publishmain > div,
    .worksmain.bg-g3 > div { max-width: 1100px; }
}
@media screen and (max-height: 850px){
    .worksmain.publishmain > div,
    .worksmain.bg-g3 > div { max-width: 900px; }
}
@media screen and (max-width: 800px){
    .worksmain.publishmain > div img {transform: scale(1.5);}
}

.worksmain.bg-g3 > div img { }
.workstxtwrap{ padding-top: calc(100px + 75px); margin-top: -75px; padding-bottom: 100px;}
.page-worksall .workstxtwrap { padding-bottom: 0;}
.worksclose{ width: 50px; height: 50px; top: 165px; right: 60px; display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.worksclose:hover { transform: scale(1.1);}
.worksclose img { width: 25px;}
.worksclose.is-fixed { position: fixed; top: 165px; z-index: 2; }
@media screen and (max-width: 1380px){
    .worksclose{ right: 40px;}
}
.workstxtwrap .inner900{}
.workstxtmid{ margin-bottom: 30px;}
.workstxtmid h1 { margin-right: 30px;}
.workstxtmid.poppins h1 { font-weight: 700; font-weight: 600;}
.workstxtmid p {}
.workstxt{ letter-spacing: 0; text-align: justify;}
.workstxt a{ display: inline-block; position: relative; color: #888;}
.workstxt a:after { bottom: 0; left: 0; position: absolute; content: ""; height: 1px; background: #888;}
.workstxt a:hover:after { animation: workstxtaafter 0.5s forwards; }
@keyframes workstxtaafter {
    0% { width: 0; }
    100%{ width: 100%; }
}
.workslogoimg { margin-bottom: 100px; background: #FAFAFA; }
.worksallulwrap,
.workswebulwrap,
.worksdatawrap{ padding: 100px 0;}
.worksallul,
.worksallulwrap .inner1100 { margin-bottom: -20px; align-items: flex-start;}
.workswebul,
.workswebulwrap .inner1100{ margin-bottom: 20px; align-items: flex-start;}
.worksallulwrap .inner1100 p,
.workswebulwrap .inner1100 p,
.workswebulwrap .inner1080 p,
.worksweb-spwrap p{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.workswebul li,
.workswebulwrap .inner1100 img{ width: calc(1080 / 1100 * 100%); margin: 0 auto; display: block;}
.workswebul li:first-child,
.workswebul li.mt100,
.workswebul li.mt50,
.workswebulwrap .inner1100 img:first-child{ width: 100%;}
.worksallul li,
.worksallulwrap img { margin-bottom: 20px; display: block; }
.worksallul li.w50,
.worksallulwrap img.size-medium { width: calc(50% - 10px); }
.workswebul li.w50,
.workswebulwrap .inner1080 img { width: calc(50% - 10px); margin: 0; }
.worksallul li.w50 img,
.workswebul li.w50 img{ width: 100%; }
.workswebulwrap .inner1080.web33 { margin-top: 18px;}
.workswebulwrap .inner1080.web33 img { width: calc(100% / 3 - 12px); margin: 0; }
.worksweb-spwrap{ margin-top: 100px;}
.worksweb-spwrap .flex-jcs,
.worksweb-spul{ margin-left: -13px; margin-bottom: -13px;}
.worksweb-spwrap .flex-jcs img,
.worksweb-spwrap .flex-jcs img:nth-child(1),
.worksweb-spul li{ width: calc(25% - 13px); margin-left: 13px; margin-bottom: 13px; display: block;}
.video_wrapper video,
.video_wrapper2 video{ width: 100%;}
.worksdatawrap{}
.worksdataul{ margin-left: -110px; margin-bottom: -50px;}
.worksdataul a { position: relative; color: #888;}
.worksdataul a:after {bottom: -0.1em; left: 0; position: absolute; content: ""; height: 1px; background: #888; }
.worksdataul a:hover:after {animation: workstxtaafter 0.5s forwards; }
.worksdataul li{ margin-left: 110px; }
.worksdataul li > div { margin-bottom: 50px;}
.worksdataulmid{ margin-bottom: 20px;}
.worksrelatewrap { padding-bottom: 100px;}
.worksrelatewrap .logolistul li { width: calc(100% / 4 - 5px); font-size: 11px; background: #fff;}
.worksrelatewrap .logolisttxt{ display: block;}
.logolisttxt p { line-height: 1.5;}
.logolisttxt p:nth-child(1) { width: 100%;}
@media screen and (max-width: 1180px){
    .worksallulwrap .inner1080 { width: calc(100% - 80px - 1.5%); }
}
@media screen and (max-width: 800px){
    .worksmain{ height: calc(100vh - 75px); max-height: 100vw; min-height: inherit; margin-top: 0;}
    .page-worksall .worksmainover { width: 130%; }
    .workstxtwrap{ padding-top: calc(50px + 75px); margin-top: -75px; padding-bottom: 50px;}
    .workstxtwrap .inner900{ width: calc(100% - 60px);}
    .page-worksall .workstxtwrap { padding-bottom: 0;}
    .worksclose{ /*display: none;*/ right: 20px; top: 95px;}
    .worksclose.is-fixed{ top: 95px;}
    .workstxtmid{ margin-bottom: 15px; padding-right: 40px;}
    .workstxtmid h1 { margin-right: 15px;}
    .worksallulwrap,
    .workswebulwrap{ padding: 25px 0;}
    .worksdatawrap{ padding: 50px 0 0;}
    .worksallulwrap .inner1080 { width: calc(100% - 40px - 1.5%); }
    .workswebulwrap .mt100 { margin-top: 50px !important;}
    .workswebulwrap .mt50 { margin-top: 25px !important;}
    .worksallul{ margin-bottom: -10px;}
    .workswebul{ margin-bottom: 10px;}
    .worksallul li,
    .worksallulwrap img{ margin-bottom: 10px; }
    .worksallulwrap img.size-medium,
    .workswebulwrap img.size-medium{ width: calc(50% - 5px);}
    .workswebul li.w50,
    .workswebulwrap .inner1080 img { width: calc(50% - 5px); }
    .workswebulwrap .inner1080.web33 { margin-top: 9px;}
    .workswebulwrap .inner1080.web33 img { width: calc(100% / 3 - 5px); }
    .worksweb-spwrap{ margin-top: 50px;}
    .worksweb-spwrap .flex-jcs,
    .worksweb-spul{ margin-left: -10px; margin-bottom: -10px;}
    .worksweb-spwrap .flex-jcs img,
    .worksweb-spwrap .flex-jcs img:nth-child(1),
    .worksweb-spul li{ width: calc(25% - 10px); margin-left: 10px; margin-bottom: 10px; }
    .workslogoimg { margin-bottom: 50px; }
    .worksdataul{ display: block; margin: 0;}
    .worksdataul li{ margin: 0;}
    .worksdataul li > div { margin-bottom: 40px; width: 60%; float: right; position: relative; clear: both;}
    .worksdataulmid{ position: absolute; top: 0; left: -60%;}
    .worksrelatewrap { padding-bottom: 50px;}
    .worksrelatewrap .logolistul li { width: calc(100% / 3 - 5px); }
    .worksrelatewrap .logolistul li:last-child,
    .worksrelatewrap .logolistul li:nth-last-child(2) { display: none;}
} 







/* トップWORKS一覧：250325追加 ここから */
.ind_contents { margin-top: -90px;}
#ind_works { padding-top: 150px;}
.ind_worksnav { margin: 60px auto 45px; max-width: 1000px; position: relative; left: 50px;}
.ind_worksnav-l { width: 150px; display: flex; align-items: center;}
.ind_worksnav-r { width: calc((100% - 10px) / 3 * 2 + 5px); max-width: 600px;}
    .tag_List ul { margin-top: 1em; max-width: 500px;}
    .tag_List ul li { margin-bottom: 1.1em; position: relative; margin-right: 1.5em;}
    .tag_List ul li::after { content: "/"; position: absolute; top: 0; right: -1em;}
    .tag_List ul li:last-child::after { content: none;}
    .tag_List ul li a { padding: 0.2em 0;}
    .tag_List ul li span.fs17 { font-weight: 500; position: relative; top:-0.05em;}
    .tag_List li.active:before,
    .tag_List li:hover:before { bottom: -6px; content: ""; position: absolute; height: 2px; background: #000; animation: tag_List_line 0.3s forwards;}
    @keyframes tag_List_line {
        0% { width: 0px; left: 50%; }
        100%{ width: 100%; left:0; }
    }
@media screen and (max-width: 1100px){
    .ind_worksnav { max-width: 1000px; position: static; margin-left: 50px;}
    .ind_worksnav-r { width: calc((100% / 3) *2 + 30px);}
}
@media screen and (max-width: 800px){
    .ind_contents { margin-top: 0;}
     { margin-top: 65px; padding-bottom: 50px; padding-top: 40px;}
    #ind_works .inner1300 { width: calc(100% - 60px);}
    .ind_worksnav { margin-bottom: 30px; display: block; margin-left: 0;}
    .ind_worksnav-l { width: 100%; display: block; font-size: calc(21em / 14);}
    .ind_worksnav-r { width: 100%; max-width: 550px; margin-top: 50px;} 
    .tag_List ul { font-size: 14px;}
}   
@media screen and (max-width: 400px){
    .tag_List ul { font-size: 13px;}
}   

#ind_works .thumblistul > li {position: absolute; overflow: hidden;}
.thumblistul { display: flex; flex-wrap: wrap; margin-left: -5px; position: relative;}
.thumblistul > li { width: calc(100% / 3 - 5px); margin-bottom: 5px; margin-left: 5px; 
    /* height: min(calc((376 / 1625) * 100vw),376px);*/ 
    height: initial;}
.thumblistul > li .thumblistimg { overflow: hidden; 
    /*height: calc(100% - min(calc((76 / 1625) * 100vw),76px)); */ 
    position: relative; aspect-ratio: 430/300; height: initial;}
    .thumblistul > li.column_x2 { width: calc(100% / 3 * 2 - 5px); 
        /* height: calc(min(calc((376 / 1625) * 100vw),376px) *2 + 5px); */
     }
    .thumblistul > li.column_x2 .thumblistimg { 
        aspect-ratio:initial;
        height:calc(600px + 77px) ;
        /*aspect-ratio: 865/681;*/
    }
    .thumblistul > li.row_x2 { 
        /* height: calc(min(calc((376 / 1625) * 100vw),376px) *2 + 5px); */
    }
    .thumblistul > li.row_x2 .thumblistimg { 
        aspect-ratio:initial;
        height:calc(600px + 77px) ;
        /*aspect-ratio: 430/681;*/
     }
.thumblistul > li a { display: block; width: 100%; height: 100%;}
.thumblistul > li a img,
.thumblistul > li a video { object-fit: cover; width: 100%; height: 100% !important; -webkit-transition: all 0.5s; transition: all 0.5s; filter: drop-shadow(0px 0px #000);}
@media (hover:hover) {
    a:hover .thumblistimg img,
    a:hover .thumblistimg video { transform: scale(110%);}
    a:hover .thumblist_Tag { opacity: 1;}
}

.thumblisttxt{ cursor: default; background: #fff; 
    padding-inline: min(calc((30 / 1500) * 100vw),30px); 
    /*
    padding-block: min(calc((24 / 1500) * 100vw),24px); 
    */
    /* height: min(calc((76 / 1625) * 100vw),76px); */ 
    height: initial;
    height: 72px;
    }
    .thumblisttxtInner { width: 100%; display: flex; justify-content: inherit;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -moz-text-overflow:ellipsis; }
    .thumblisttxt p:nth-child(1){ margin-right: 1em;}
    /*
    .thumblisttxt p:nth-child(1){ margin-right: 1em; width: auto; overflow: inherit; text-overflow: initial; white-space: initial;}
    .thumblisttxt p:nth-child(2){ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    */

.thumblist_Tag { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; align-items: center; justify-content: center; padding: 1.5em; -webkit-transition: all 0.5s; transition: all 0.5s; background: rgba(40, 54, 62, 0.5);}
    .thumblist_Tag ul { text-align: center; color: #fff; justify-content: center; position: relative; z-index: 1;}
    .thumblist_Tag ul li { margin: .4em 0.8em; position: relative;}
    .thumblist_Tag ul li:not(:last-child)::after { content: "/"; position: absolute; top: 0; right: -1.1em;}
.thumblistul > li.column_x2 .thumblist_Tag { padding: 4em;}
.thumblistul > li.column_x2 .thumblist_Tag ul { max-width: 620px;}


@media screen and (max-width: 1445px){
    .thumblistul > li {height:calc(calc(20.69vw * 1) + 72px); box-sizing: border-box;}
    .thumblistul > li.column_x2,
    .thumblistul > li.row_x2 {height:calc(calc(20.69vw * 2) + 149px); box-sizing: border-box;}
    .thumblistul > li .thumblistimg {  
        aspect-ratio:inherit; height:calc(20.69vw * 1);}
    .thumblistul > li.column_x2 .thumblistimg,
    .thumblistul > li.row_x2 .thumblistimg { 
        aspect-ratio:initial;
        height:calc(calc(20.69vw * 2) + 77px) !important;
     }
}

@media screen and (max-width: 1350px){
    .thumblistul > li .thumblistimg {  
        aspect-ratio:inherit; height:calc(20.6vw * 1) !important;}
    .thumblistul > li.column_x2 .thumblistimg,
    .thumblistul > li.row_x2 .thumblistimg { 
        aspect-ratio:initial;
        height:calc(calc(20.6vw * 2) + 77px) !important;
     }
}

@media screen and (max-width: 1100px){
    .thumblist_Tag ul { font-size: calc(14em / 14);}
    .thumblistul > li {height:calc(calc(20.5vw * 1) + 72px); box-sizing: border-box;}
    .thumblistul > li.column_x2,
     .thumblistul > li.row_x2 {height:calc(calc(20.5vw * 2) + 149px); box-sizing: border-box;}
    .thumblistul > li .thumblistimg {  
        aspect-ratio:inherit; height:calc(20.5vw * 1);}
    .thumblistul > li.column_x2 .thumblistimg,
    .thumblistul > li.row_x2 .thumblistimg { 
        aspect-ratio:initial;
        height:calc(calc(20.5vw * 2) + 77px) !important;
     }
}


@media screen and (max-width: 800px){
    .thumblistul > li { width: calc((100% - 10px) / 2); height:calc(calc(28.6vw * 1) + 50px);
        /* height: calc(108 / 350 * 100vw + 50px); */}
        .thumblistul > li .thumblistimg { /* height: calc(100% - 50px); */
         height:calc(calc(28.6vw * 1) + 0px) !important;  }
        .thumblistul > li.column_x2 { width: calc(100% - 5px);}
        /* .thumblistul > li.column_x2 .thumblistimg { height: initial; aspect-ratio: 430/300; } */
        /* .thumblistul > li.row_x2 { height: calc((108 / 350) * 100vw *2 + 105px);} */
        .thumblistul > li.column_x2 ,
        .thumblistul > li.row_x2 { 
            height:calc(calc(28.6vw * 2) + 105px) !important;
        }
        .thumblistul > li.column_x2 .thumblistimg,
        .thumblistul > li.row_x2 .thumblistimg { 
            aspect-ratio:initial;
            /*height:calc(calc(28.6vw * 2) + 55px) !important;*/
            height:calc(calc(28.6vw * 2) + 55px) !important;
        }

        .thumblisttxt { font-size: 10px; padding: 10px 15px; height: 50px;}
        .thumblisttxtInner { display: block; line-height: 1.5;}
        .thumblisttxt p:nth-child(1){ width: 100%;}

    .thumblist_Tag { padding: 1.5em; }
        .thumblist_Tag ul { font-size: 10px;}
        .thumblist_Tag ul li { margin: .3em 0.6em;}
        .thumblist_Tag ul li:not(:last-child)::after { right: -0.9em;}
        .thumblistul > li.column_x2 .thumblist_Tag { padding: 2em;}
        .thumblistul > li.column_x2 .thumblist_Tag ul { max-width: 350px;}
}
@media screen and (max-width: 500px){
    /* .thumblistul > li { height: calc(108 / 375 * 100vw + 50px);} */
    /* .thumblistul > li.row_x2 { height: calc((108 / 375) * 100vw *2 + 105px);} */
}
/* トップWORKS一覧：250325追加 ここまで */





/* contact
==========================================================*/

/* reset */
input,button,select,textarea
{-webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; }
textarea { resize: vertical; }
input[type='checkbox'], input[type='radio'] { display: none; }
input[type='submit'],input[type='button'],label,button,select { cursor: pointer; }
select::-ms-expand {display: none;}
::placeholder{ color:#AAECE5; opacity: 1; }

.contactwrap{ padding: 70px 0 150px;}
.contactwrap .inner900{}
.contactmid{ margin-bottom: 60px; letter-spacing: 0;}
.contactmidsub{ margin-bottom: 30px;}
.contactform {}
.contactul{}
.contactul > li{ width: calc(50% - 15px); margin-bottom: 50px; position: relative;}
.contactformmid { line-height: 1; color: #AAECE5;}
.contactuldiv{ width: 100%; height: 60px; padding: 0 40px; background: #fff; line-height: 1; color: #AAECE5; display: flex; align-items: center;}
.contactuldiv span,
.contactformmid span{ color: #ff0064; }
.contactuldiv.active span { opacity: 0.2}
.contactulput{ width: 100%; height: 100%; padding: 0 40px; position: absolute; top: 0; left: 0;}
.contactulput.active { animation: contactulputactive 0.1s forwards; }
@keyframes contactulputactive {
    0% { background: none;}
    100% { background: rgba(255,255,255, 0.3);}
}
.contactulput.activeput { animation: contactulputactiveput 0.1s forwards; }
@keyframes contactulputactiveput {
    0% { background: none;}
    100% { background: rgba(255,255,255, 1);}
}

.contactul > li.w100{ width: 100%;}
.contactyajiwrap { }
.contactyajiwrap:after {width: 0; height: 0; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #23CCB6 transparent transparent; right: 30px; top: 24px; -webkit-transition: all .3s; transition: all .3s; }
.contactyajiwrap.active:after { transform: rotate(-90deg);}
.koumokuselect{ width: 100%; height: 60px; padding: 0 20px; background: #fff; color: #23ccb6; opacity: 0; position: absolute; top: 0; left: 0;}
.koumokuselect:invalid {color: #91E6DC;}
.koumokuselect.active{ opacity: 1; }
.conatctbtn{ width: 100%; height: 60px; padding: 0 20px; background: #fff; color: #91E6DC; }
.koumokuselect option{ color:#23ccb6; background: #fff; }
.koumokuselect option:nth-child(1) { color:#AAECE5;}
.conatctbtn{}
.contactdesignwrap,
.conatctbtnnext,
.textareawrap-proj,
.contactwmwrap{ display: none;}
.radiowrap{ padding: 30px 40px; }
.radiowrap p{ padding-bottom: 30px;}
.radioul{ margin-bottom: -20px;}
.radioul li{ margin-bottom: 20px; line-height: 1;}
.radioul li input{}
/* ラジオボタン03 */
.radio03 { box-sizing: border-box; cursor: pointer; display: inline-block; position: relative; width: auto; padding-left: 25px; }
.radio03::before,
.radio03::after{width: 12px; height:12px; left: 0; top: calc(50% - 6px); border: 1px solid #FF0064; border-radius: 50%; content: '';display: block; position: absolute;}
.radio03::after { background: #FF0064; opacity: 0; transform: scale3d(.3,.3,1); transition: transform .2s ease-in-out, opacity .2s ease-in-out; }
input:checked + .radio03::after{ opacity: 1; transform: scale3d(1,1,1); }

.contactwrap select{}
.textareawrap {width: 100%; height: 290px; background: #fff; position: relative;}
.contactform textarea{ padding: 30px 40px;}
.textareawrap-proj textarea{ padding: 50px 40px 30px;}

.contactpriwrap{ margin-bottom: 60px; flex-direction: column; text-align: center;}
.contactpriwrap:last-child { margin-bottom: 0;}
.contactpriwrap .fs28{ margin-bottom: 30px; line-height: 1;}
.contactpriwrap .fs16{ margin-bottom: 10px;}
.contactpriwrap a.txtlink { }
.contactpriradio{}
.contactpriradio .radio03 { padding-left: 40px;}
.contactpriradio .radio03::before { width: 30px; height: 30px; top: calc(50% - 15px); background: #fff; border: none; }
.contactpriradio .radio03::after { left: 8px;top: calc(50% - 7px); }
.error_box{ padding: 30px; margin-bottom: 60px; display: none; border: 1px solid #FF0064;}
.submitbtn{ margin-bottom: 80px;}
.submitbtnwrap { margin-top: 80px; }
.submitbtnwrap .submitbtn { margin-bottom: 20px; }
.submitbtn input{ width: 435px; height: 60px; border-radius: 30px; opacity: 0.6; pointer-events: none;}
.submitbtn.active input { opacity: 1; pointer-events: auto; }
.submitbtn input:hover { opacity: 0.6;}
.contacttel{ margin-top: 50px; line-height: 1;}
.contacttel a{}
.contacttel-l{ text-align: left; padding-left: 50px; }
.contacttel-l:after { width: 36px; height: 36px; top: -5px; left: 0; background: url(../images/common/tel-gr.png) no-repeat center; background-size: cover;}
.contacttel-l p {}
.contacttel-l .fs32{ margin-bottom: 10px;}
.contacttel-l .fs18{}
.contacttel-r{ padding-left: 20px;}
@media screen and (max-width: 900px){
    .contacttel a{flex-direction: column; align-items: center;}
    .contacttel-l{ margin-bottom: 20px; }
}  
@media screen and (max-width: 800px){
    .contactwrap{ padding: 40px 0 70px;}
    .contactwrap .inner900{ width: calc(100% - 60px);}
    .contactform { font-size: 11px;}
    .contactmid{ font-size: 28px; margin-bottom: 50px;}
    .contactmidsub{ font-size: 11px; margin-bottom: 30px;}
    .contactuldiv{ height: 40px; padding: 0 20px;}
    .contactul{ margin-bottom: 0;}
    .contactul > li{ width: 100%; margin-bottom: 20px;}
    .contactul > li > input{ width: 100%; height: 50px; padding: 0 15px;}
    .contactyajiwrap:after { border-width: 5px 8px 5px 0;right: 20px; top: 20px;}
    .koumokuselect,
    .conatctbtn{ width: 100%; height: 50px; padding: 0 15px; }
    ::placeholder{ font-size: 11px; }
    .radiowrap{ padding: 20px; }
    .radiowrap p{ padding-bottom: 20px;}
    .radioul{ margin-bottom: -15px;}
    .radioul li{ }
    .radio03 { padding-left: 20px; }
    .textareawrap {height: 220px;}
    .contactform textarea{ padding: 15px;}
    .textareawrap-proj textarea{ padding: 40px 15px 15px;}

    .contactpriwrap{ margin: 30px 0 30px -15px; width: calc(100% + 30px);}
    .contactpriwrap:last-child { margin-bottom: 0;}
    .contactpriwrap .fs28{ font-size: 18px; margin-bottom: 20px; letter-spacing: 0; }
    .contactpriwrap .fs16{ font-size: 13px; margin-bottom: 20px;}
    .contactpriwrap a.txtlink { display: inline-block; border-bottom: 1px solid #FF0064;}
    .error_box{ padding: 20px; margin-bottom: 30px;}
    .submitbtn{ margin-bottom: 40px;}
    .submitbtnwrap { margin-top: 40px; }
    .submitbtnwrap .submitbtn { margin-bottom: 10px; }
    .submitbtn input{ width: 255px; font-size: 16px;}
    .submitbtn.active input { opacity: 1; pointer-events: auto; }
    .submitbtn input:hover { opacity: 0.6;}
    .contacttel{ margin-top: 30px;}
    .contacttel-l .fs32{ font-size: 28px; margin-bottom: 10px;}
    .contacttel-l .fs18{ font-size: 16px;}
    .contacttel-r{ font-size: 38px; padding-left: 0; font-weight: 300;}
}
@media screen and (max-width: 400px){
    .radioul { letter-spacing: 0;}
    .contactpriradio{ letter-spacing: 0;}
}  
.kakuninmid { margin: 40px 0;}
.kakunintab { width: 100%; background: #fff; }
.kakunintab th,
.kakunintab td { padding-left: 20px; display: block;}
.kakunintab th{ padding-top: 20px;}
.kakunintab td { padding-bottom: 20px; border-bottom: 2px solid #FFF7F0;}
@media screen and (max-width: 800px){
    .kakuninmid { margin: 20px 0; font-size: 11px;}
    .kakunintab { font-size: 11px;}
    .kakunintab th,
    .kakunintab td { padding-left: 15px;}
    .kakunintab th{ padding-top: 15px;}
    .kakunintab td { padding-bottom: 15px;}
}


/* privacy
==========================================================*/

.privacydl{ padding-bottom: 150px;}
.privacydl dt{ margin-bottom: 20px;}
.privacydl dd{ margin-bottom: 60px; text-align: justify;}
.privacydl a.txtlink{ display: inline-block; color: #F0C891; border-bottom: 1px solid #F0C891;}
@media screen and (max-width: 800px){
    .privacydlwrap {border-bottom: 1px solid #59C9E4;}
    .privacydlwrap .inner900 { width: calc(100% - 60px);}
    .privacydl{ padding-bottom: 40px;}
    .privacydl dt{ font-size: 15px; margin-bottom: 10px;}
    .privacydl dd{ font-size: 11px; margin-bottom: 30px;}
}


/* recruit
==========================================================*/

.recdl { margin: 50px 0; text-align: justify}
.recdl dt { position: relative;}
.recdl dt:after { content: "-"; position: absolute; top: 0; left: -1em;}
.recdl dd { margin-bottom: 30px;}
.recdlul {}
.recdlul li { padding-left: 1em; position: relative;}
.recdlul li:after { content: "・"; position: absolute; top: 0; left: 0; }
.rectxt { text-align: justify}
.rectxt p { margin-bottom: 20px;}
.rectxt a { text-decoration: underline;}
@media screen and (max-width: 800px){
    .recdl { margin: 30px 0;}
    .recdl dd { margin-bottom: 20px;}
    .rectxt p { margin-bottom: 10px;}
}