@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    width: 100%;
    background: #fff;
    color: #000;
    letter-spacing: .1rem;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4rem;
    font-family: a-otf-ryumin-pr6n, serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}

img{ width: 100%; vertical-align: bottom;}
.center{ text-align: center;}
.right{ text-align: right;}
strong{ font-weight: bold;}
a{ color: #000; text-decoration: none;}
a:hover{ color: #000; text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 2.666666667vw;}
    .pc{ display: none;}
    .sp{ display: block;}
    img{ max-width: 100%;}
}

.ani { opacity: 0; transform: translateY(45px);}
.fadein {
    animation-name: fadein;
    animation-duration: 2s;

    animation-fill-mode: forwards;
}
@keyframes fadein {
    0% { opacity: 0; transform: translateY(45px);}
    100% { opacity: 1; transform: translateY(0);}
}

.ani2 { opacity: 0; animation: 2s fadein2 .5s forwards;}
@keyframes fadein2 {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.forie{ display: none;}

@media all and (-ms-high-contrast:none) {
    .forie{ position: fixed; top: 0; left: 0; z-index: 1000; display: block; width: 100%;}
    .forie p{ display: flex; padding: 30px; background: rgba(0,0,0,.75); color: #fff; text-align: center; font-weight: 400; font-size: 1.6rem; line-height: 1.75; justify-content: center; align-items: center;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: relative; z-index: 200;}
.header .switch{ position: fixed; top: 35px; left: 35px; z-index: 300;}
.header h1{ position: fixed; top: 30px; left: 118px;}
.header h1 a{ position: relative; z-index: 300; display: block; overflow: hidden; width: 155px; height: 56.7497px; background: url("/img/stoop_studio.svg") no-repeat center / contain; text-indent: 100%; white-space: nowrap;}
.header aside{ position: fixed; top: 35px; right: 35px;}
.header aside a{ position: relative; z-index: 300; display: block; overflow: hidden; width: 30px; height: 23px; background: url("/img/ico_contact.svg") no-repeat center / contain; text-indent: 100%; white-space: nowrap;}
.header .insta{ position: fixed; bottom: 35px; left: 35px;}
.header .insta a{ position: relative; z-index: 300; display: block; overflow: hidden; width: 30px; height: 30px; background: url("/img/ico_insta.svg") no-repeat center / contain; text-indent: 100%; white-space: nowrap;}

@media screen and (max-width: 768px){
    .header .switch{ top: 4.8vw; left: 4vw;}
    .header .switch button:after{ top: 12.8vw; left: 1.6vw; width: 1.066666667vw; height: 12.8vw;}
    .header h1{ top: 4vw; left: 16vw;}
    .header h1 a{ width: 20vw; height: 7.300666667vw;}
    .header aside{ top: 5.333333333vw; right: 4vw;}
    .header aside a{ width: 4.8vw; height: 3.466666667vw;}
    .header .insta{ bottom: 5.333333333vw; left: 4vw;}
    .header .insta a{ width: 5.066666667vw; height: 5.066666667vw;}
}

.top .header h1 a{ background: url("/img/stoop_studio_w.svg") no-repeat center / contain;}
.top .header aside a{ background: url("/img/ico_contact_w.svg") no-repeat center / contain;}
.top .header .insta a{ background: url("/img/ico_insta_w.svg") no-repeat center / contain;}
.top .header .drawer-hamburger-icon:before,
.top .header .drawer-hamburger-icon:after{ background: #fff;}

.top .header-default h1 a{ background: url("/img/stoop_studio.svg") no-repeat center / contain;}
.top .header-default aside a{ background: url("/img/ico_contact.svg") no-repeat center / contain;}
.top .header-default .insta a{ background: url("/img/ico_insta.svg") no-repeat center / contain;}
.top .header-default .drawer-hamburger-icon:before,
.top .header-default .drawer-hamburger-icon:after{ background: #000;}
.top .header-default .switch button:after{ background: url("/img/menu.svg") no-repeat center / contain;}

.drawer--left.drawer-open.top .header h1 a{ background: url("/img/stoop_studio.svg") no-repeat center / contain;}
.drawer--left.drawer-open.top .header .insta a{ background: url("/img/ico_insta.svg") no-repeat center / contain;}
.drawer--left.drawer-open.top .header .drawer-hamburger-icon:before,
.drawer--left.drawer-open.top .header .drawer-hamburger-icon:after{ background: #000;}
.drawer--left.drawer-open.top .header .switch button:after{ background: url("/img/menu.svg") no-repeat center / contain;}

/* --------------------------------------------------
 main
--------------------------------------------------- */

/* common
--------------------------------------------------- */
/*.100vh処理用{ min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);}*/
main{ position: relative;}
.more{ margin: 100px 0 0; text-align: center; font-style: italic; font-size: 1.4rem; font-family: 'Libre Baskerville', serif;}
.ttl{ padding: 240px 0 160px; text-align: center; font-size: 3.6rem; font-family: 'Libre Baskerville', serif;}
.ttl2{ padding: 200px 0 0; text-align: center; font-size: 2.8rem; font-family: 'Libre Baskerville', serif;}
.ttl2 span{ display: block; padding: 20px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .more{ margin: 16vw 0 0; font-size: 2.666666667vw;}
    .ttl{ padding: 40vw 0 20vw; font-size: 5.6vw;}
    .ttl2{ padding: 20vw 0 0; font-size: 3.733333333vw;}
    .ttl2 span{ padding: 4vw 0 0; font-size: 2.666666667vw;}
}

.slider1{ position: relative; /*min-height: 100vh;*/ min-height: 100dvh; font-family: 'Libre Baskerville', serif;}
.slider1 a{ position: relative; display: flex; flex-direction: column; /*min-height: 100vh;*/ min-height: 100dvh; width: 100%; color: #fff; justify-content: center; align-items: center;}
.slider1 figure{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%;}
.slider1 figure > img{ height: 100%; object-fit: cover;}
.slider1 figure > img.pc{ display: block;}
.slider1 figure > img.sp{ display: none;}
.slider1 h2{ position: relative; font-size: 4.2rem;}
.slider1 .more{ position: relative; margin: 0; padding: 120px 0 0;}
.slider1 .slick-dots{ right: 35px; bottom: 35px;}
.slider1 .slick-dots li button:before{ color: #fff;}
.slider1 .slick-dots li.slick-active button:after{ background: #fff;}

@media screen and (max-width: 768px){
    .slider1 figure > img.pc{ display: none;}
    .slider1 figure > img.sp{ display: block;}
    .slider1 h2{ font-size: 6.4vw;}
    .slider1 .more{ padding: 16vw 0 0;}
    .slider1 .slick-dots{ right: 4vw; bottom: 5.333333333vw;}
}

.slider2-wrap{ margin: 0 calc(50% - 50vw); padding: 0 100px; width: 100vw;}
.slider2{ position: relative; font-family: 'Libre Baskerville', serif;}
.slider2 a{ display: block;}
.slider2 figure{ position: relative; width: 100%;}
.slider2 figure > img.sp{ display: none;}
.slider2 .detail{ display: flex; padding: 20px 20px 0; align-items: baseline;}
.slider2 h3{ font-size: 2rem; line-height: normal;}
.slider2 .more{ margin: 0; padding: 0 0 0 180px;}

@media screen and (max-width: 768px){
    .slider2-wrap{ margin: 0; padding: 0;}
    .slider2 figure > img.pc{ display: none;}
    .slider2 figure > img.sp{ display: block;}
    .slider2 .detail{ padding: 5.333333333vw 3.2vw 0;}
    .slider2 h3{ font-size: 3.2vw;}
    .slider2 .more{ padding: 0 0 0 8vw;}
}

.list-row-wrap{ padding: 240px 0 0;}
.ttl2 + .list-row-wrap{ padding: 90px 0 0;}
.list-row{ display: flex; margin: -75px -15px 0; font-size: 1.3rem; font-family: 'Libre Baskerville', serif; flex-wrap: wrap;}
.list-row > li{ padding: 75px 15px 0;}
.list-row.row3 > li{ width: calc(100% / 3);}
.list-row.row2 > li{ width: 50%;}
.list-row figure{ position: relative; overflow: hidden; width: 100%;}
.list-row .detail{ display: flex; padding: 20px 20px 0; justify-content: space-between; align-items: baseline;}
.list-row h3{ line-height: 1.5;}
.list-row time{ color: #9fa0a0; font-style: italic;}
.list-row h4{ font-size: 1.6rem;}
.list-row h4 + p{ margin: 20px 0 0;}
.list-row .more{ margin: 0; color: #9fa0a0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .list-row-wrap{ padding: 20vw 6.666666667vw 0;}
    .ttl2 + .list-row-wrap{ padding: 8vw 6.666666667vw 0;}
    .list-row{ margin: -8vw -1.866666667vw 0; font-size: 2.666666667vw; line-height: 1.5;}
    .list-row > li{ padding: 8vw 1.866666667vw 0;}
    .list-row.row3 > li{ width: 50%;}
    .list-row.row2 > li{ width: 100%;}
    .service-menu figure:after{ display: block; padding-top: 35.384%; content: "";}
    .service-menu figure img{ position: absolute; top: 0; left: 0; height: 100%; object-fit: cover;}
    .list-row .detail{ padding: 4vw 2.666666667vw 0;}
    .list-row time{ font-size: 2.666666667vw;}
    .list-row h4{ font-size: 3.466666667vw;}
    .list-row .more{ font-size: 2.666666667vw;}
}

.list-row-wrap2{overflow: hidden;  margin: 0 calc(50% - 50vw); font-family: 'Libre Baskerville', serif;}
.slider3 .slick-slide{ position: relative; overflow: hidden; width: 100%;}
.slider3 .slick-slide:after{ display: block; padding-top: 89.172%; content: "";}
.slider3 .slick-slide img{ position: absolute; top: 0; left: 0; height: 100%; object-fit: cover;}
.list-row-wrap2 .detail{ padding: 40px 100px 0;}
.list-row-wrap2 .more{ margin: 0; font-size: 1.4rem;}
.list-row-wrap2 h3{ font-size: 2rem;}
.list-row-wrap2 h3 small{ display: inline-block; padding: 0 40px 0 0; vertical-align: middle; font-size: 1.2rem;}
.list-row-wrap2 .slick-dots{ top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%);}
.list-row-wrap2 .slick-dots li button:before{ color: #fff;}
.list-row-wrap2 .slick-dots li.slick-active button:after{ background: #fff;}

@media screen and (max-width: 768px){
    .list-row-wrap2 .list-row{ margin: -16vw 0 0;}
    .list-row-wrap2 .list-row.row2 > li{ padding: 16vw 8vw 0 0;}
    .list-row-wrap2 .list-row.row2 > li:nth-child(even){ padding: 16vw 0 0 8vw;}
    .list-row-wrap2 .detail{ padding: 4vw 2.666666667vw 0;}
    .list-row-wrap2 .more{ font-size: 2.133333333vw;}
    .list-row-wrap2 h3{ font-size: 3.2vw;}
    .list-row-wrap2 h3 small{ padding: 0 4vw 0 0; font-size: 2.133333333vw;}
}

article header{ padding: 160px 0;}
article header h1{ text-align: center; font-size: 3.6rem; font-family: 'Libre Baskerville', serif;}
article header h1 span{ display: block; padding: 40px 0 0; font-style: italic; font-size: 1.4rem;}

@media screen and (max-width: 768px){
    article header{ padding: 40vw 0 20vw;}
    article header h1{ font-size: 5.6vw;}
    article header h1 span{ padding: 4vw 0 0; font-size: 2.666666667vw;}
}

.content{ margin: 0 auto; padding: 0 14.375vw;}
.content > .lead:first-child{ line-height: 2.25;}
.content > .lead:first-child p + p{ margin: 30px 0 0;}
.ext:after{ display: inline-block; margin: 0 0 0 15px; width: 12px; height: 12px; background: url("/img/ico_ext.svg") no-repeat center / contain; content: "";}

@media screen and (max-width: 768px){
    .content{ padding: 0 6.666666667vw;}
    .content > .lead:first-child{ font-size: 2.666666667vw; line-height: 2.33;}
    .ext:after{ margin: 0 0 0 2.133333333vw; width: 2.133333333vw; height: 2.133333333vw;}
}

/* toppage
--------------------------------------------------- */
.toppage .sec1{ /*min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);*/ min-height: 100dvh;}
.toppage .sec2 a{ position: relative; display: flex; flex-direction: column; /*min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);*/ min-height: 100dvh; width: 100%; background: #fff; align-items: center; justify-content: center;}
.toppage .sec2 h2{ padding: 240px 0 0; font-size: 3.6rem;}
.toppage .sec2 .lead{ padding: 120px 0 0; text-align: center; line-height: 2.25;}
.toppage .sec2 .lead p{ font-size: 2rem;}
.toppage .sec2 .lead p + p{ margin: 60px 0 0;}
.toppage .sec2 .more{ margin: 0; padding: 120px 0 0;}
.toppage .inner{ margin: 0 auto; padding: 0 14.375vw;}

@media screen and (max-width: 768px){
    .toppage .sec2 a{ padding: 24vw 0 0; min-height: 0;}
    .toppage .sec2 h2{ padding: 0; font-size: 5.6vw;}
    .toppage .sec2 .lead{ padding: 20vw 0 0; line-height: 2.45;}
    .toppage .sec2 .lead p{ font-size: 2.666666667vw;}
    .toppage .sec2 .lead p + p{ margin: 8vw 0 0;}
    .toppage .sec2 .more{ padding: 16vw 0 0;}
    .toppage .inner{ padding: 0;}
    .toppage .sec3 .ttl{ padding: 20vw 0;}
    .toppage .list-row.row3 > li{ width: 50%;}
    .toppage .list-row.row3 time{ display: none;}
}

.dl-news{ display: flex; padding: 20px 20px 0; font-size: 1.4rem; line-height: 2.25; justify-content: center;}
.dl-news ul{ display: flex;}
.dl-news ul > li{ display: flex; padding: 0 0 0 30px;}
.dl-news time{ padding: 0 1em 0 0;}
.dl-news div a{ text-decoration: underline;}
.dl-news div a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
    .dl-news{ flex-direction: column; padding: 5.333333333vw 3.2vw 0; font-size: 3.2vw; line-height: 1.5;}
    .dl-news dd{ padding: 2.666666667vw 0 0;}
    .dl-news ul{ flex-direction: column; font-size: 2.666666667vw;}
    .dl-news ul > li{ padding: 2.666666667vw 0 0;}
    .dl-news time{ width: 15%;}
    .dl-news time + div{ width: 85%;}
}

/* recruitment
--------------------------------------------------- */
.bnr1{ position: relative; border: 1px solid #dcdddd;}
.bnr1:after{ display: block; padding: 48.648% 0 0; width: 100%; content: "";}
.bnr1.fin:before{ position: absolute; top: 0; left: 0; z-index: 10; display: flex; width: 100%; height: 100%; background: rgba(0,0,0,.7); color: #fff; content: "現在募集は行なっていません。"; font-size: 1.4rem; align-items: center; justify-content: center;}
.bnr1 figcaption{ position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; font-size: 1.2rem; transform: translate(-50%,-50%); justify-content: center; align-items: center;}
.bnr1 span{ padding: 15px 0 0; font-size: 2rem;}

@media screen and (max-width: 768px){
    .bnr1.fin:before{ font-size: 2.666vw;}
    .bnr1 figcaption{ font-size: 2.4vw;}
    .bnr1 span{ padding: 2.666666667vw 0 0; font-size: 4vw;}
}

.bnr2{ position: relative; display: flex; flex-direction: column; margin: 115px 0 0; height: 160px; border: 1px solid #dcdddd; text-align: center; justify-content: center; align-items: center;}
.bnr2 a{ border-bottom: 1px solid; font-size: 1.8rem; line-height: 1;}
.bnr2 a:hover{ border: none;}
.bnr2 p{ margin: 15px 0 0; font-size: 1.2rem; line-height: 2;}

@media screen and (max-width: 768px){
    .bnr2{ margin: 20vw 0 0; padding: 4vw 0; height: auto;}
    .bnr2 a{ font-size: 3.733vw;}
    .bnr2 p{ font-size: 2.4vw;}
}

.rec-single .content{ line-height: 2.5;}

@media screen and (max-width: 768px){
    .rec-single .content{ line-height: 2;}
}

/* project
--------------------------------------------------- */
.pro-single .content{ line-height: 2.5;}
.pro-single figure{ position: relative; margin: 120px 0 0; width: 100%; height: 100%;}
.pro-single figcaption{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 768px){
    .pro-single .content{ line-height: 2;}
    .pro-single figure{ margin: 16vw 0 0;}
    .pro-single figure .list-row{ margin: -16vw -1.866666667vw 0;}
    .pro-single figure .list-row > li{ padding: 16vw 1.866666667vw 0;}
}

.pro-single .visual{ margin: 0 calc(50% - 50vw); padding: 0 100px; width: 100vw;}
.pro-single .visual figure{ margin: 0;}
.pro-single .cap{ position: absolute;}
.pro-single .cap > dt{ position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 100%; background: rgba(0,0,0,.75); cursor: pointer; transition: all .3s ease;}
.pro-single .cap > dt:before{ position: absolute; top: 50%; left: 50%; width: 25px; height: 1px; background: #fff; content: ""; transform: translate(-50%,-50%);}
.pro-single .cap > dt:after{ position: absolute; top: 50%; left: 50%; width: 1px; height: 25px; background: #fff; content: ""; transform: translate(-50%,-50%);}
.pro-single .cap > dd{ position: absolute; top: 0; left: 0; z-index: 1; display: none; padding: 40px 50px; width: 290px; background: rgba(0,0,0,.75); color: #fff; letter-spacing: normal; font-size: 1rem; line-height: 1.75;}
.pro-single .cap > dt.active{ background: none; transition: all .2s ease; transform: rotate(45deg);}
.pro-single .cap > dt.active + dd{ display: block;}

@media screen and (max-width: 768px){
    .pro-single .visual{ margin: 0 -6.666666667vw; padding: 0;}
    .pro-single .cap > dt{ width: 6.666666667vw; height: 6.666666667vw;}
    .pro-single .cap > dt:before{ width: 3.2vw;}
    .pro-single .cap > dt:after{ height: 3.2vw;}
    .pro-single .cap > dd{ padding: 6.666666667vw 2.666666667vw 2.666666667vw; width: 26.66666667vw; font-size: 2.666666667vw;}
    .pro-single .cap > dt.active + dd{ display: inline-block;}
}

.pro-single .cap{ position: absolute;}
.pro-single .cap > a{ position: relative; z-index: 2; display: block; width: 50px; height: 50px; border-radius: 100%; background: rgba(0,0,0,.75); cursor: pointer; transition: all .3s ease;}
.pro-single .cap > a:before{ position: absolute; top: 50%; left: 50%; width: 25px; height: 1px; background: #fff; content: ""; transform: translate(-50%,-50%);}
.pro-single .cap > a:after{ position: absolute; top: 50%; left: 50%; width: 1px; height: 25px; background: #fff; content: ""; transform: translate(-50%,-50%);}
.pro-single .cap > .box{ position: absolute; top: 0; left: 0; z-index: 1; display: none; padding: 40px 50px; width: 290px; background: rgba(0,0,0,.75); color: #fff; letter-spacing: normal; font-size: 1rem; line-height: 1.75;}
.pro-single .cap > a.active{ background: none; transition: all .2s ease; transform: rotate(45deg);}

@media screen and (max-width: 768px){
    .pro-single .visual{ margin: 0 -6.666666667vw; padding: 0;}
    .pro-single .cap > a{ width: 6.666666667vw; height: 6.666666667vw;}
    .pro-single .cap > a:before{ width: 3.2vw;}
    .pro-single .cap > a:after{ height: 3.2vw;}
    .pro-single .cap > .box{ padding: 6.666666667vw 2.666666667vw 2.666666667vw; width: 26.66666667vw; font-size: 2.666666667vw;}
    .pro-single .cap > a.active + .box{ display: inline-block;}
}

.list-info{ display: flex; padding: 30px 30px 0; font-family: 'Libre Baskerville', serif; justify-content: space-between;}
.list-info > li:last-child{ display: flex; color: #9fa0a0; font-style: italic; justify-content: flex-end;}
.list-info div + div{ margin: 0 0 0 90px}

@media screen and (max-width: 768px){
    .list-info{ flex-direction: column; padding: 4vw 6.666666667wv 0;}
    .list-info > li:last-child{ margin: 1em 0 0; width: 100%;}
    .list-info div + div{ margin: 0 0 0 4vw;}
}

.dl-cat{ display: flex; font-family: 'Libre Baskerville', serif;}
.dl-cat dt{ color: #9fa0a0;}
.dl-cat dd{ padding: 0 0 0 25px;}
.dl-cat .line1{ width: 180px;}
.dl-cat .line2{ display: flex; width: 300px; flex-wrap: wrap;}
.dl-cat dd > a{ margin: 0 .5em 0 0;}
.dl-cat dd > a:after{ content: ",";}
.dl-cat dd > a:last-child:after{ content: none;}

@media screen and (max-width: 768px){
    .dl-cat{ width: 100%; flex-wrap: wrap;}
    .dl-cat dt{ width: 18vw;}
    .dl-cat dd{ padding: 0 0 0 1em;}
    .dl-cat .line1{ width: calc(100% - 18vw);}
    .dl-cat .line2{ width: calc(100% - 18vw);}
}

.pro-single p{ margin: 30px 0 0;}
.pro-single .lead{ padding: 180px 0;}
.pro-single .lead > p:first-child{ margin: 0;}
.pro-single .lead + figure{ margin: 0;}

@media screen and (max-width: 768px){
    .pro-single p{ margin: 4vw 0 0;}
    .pro-single .lead{ padding: 20vw 0;}
}

.spec{ padding: 150px 0 0;}
.spec .flex{ display: flex; padding: 0 40px; justify-content: space-between; align-items: baseline;}
.spec h2{ white-space: nowrap; font-size: 2rem; font-family: 'Libre Baskerville', serif;}
.spec table{ margin: 30px 0 0; width: 100%; border-top: 1px solid #dcdddd; text-align: left;}
.spec th{ padding: 30px 40px; width: 25%; border-bottom: 1px solid #dcdddd; color: #727171; white-space: nowrap;}
.spec td{ padding: 30px 40px 30px 0; border-bottom: 1px solid #dcdddd;}

@media screen and (max-width: 768px){
    .spec{ padding: 20vw 0 0;}
    .spec .flex{ flex-direction: column; padding: 0; justify-content: flex-start;}
    .spec h2{ width: 100%; font-size: 3.2vw;}
    .spec .dl-cat{ margin: 1em 0 0;}
    .spec th{ padding: 4vw 1em; width: auto;}
    .spec td{ padding: 4vw 0; white-space: nowrap;}
}

.backindex{ padding: 180px 0 0; text-align: center; font-style: italic; font-size: 1.4rem; font-family: 'Libre Baskerville', serif;}

@media screen and (max-width: 768px){
    .backindex{ padding: 16vw 0 0; font-size: 2.666666667vw;}
}

/* process
--------------------------------------------------- */
.list-cnt{ margin: -180px calc(50% - 50vw) 0; width: 100vw;}
.list-cnt > li{ display: flex; padding: 180px 0 0; justify-content: flex-start; align-items: center;}
.list-cnt > li:nth-child(even){ flex-direction: row-reverse;}
.list-cnt figure{ padding: 0 50px 0 0; width: 50%;}
.list-cnt .detail{ padding: 0 14.375vw 0 50px; width: 50%; line-height: 2;}
.list-cnt > li:nth-child(even) figure{ padding: 0 0 0 50px;}
.list-cnt > li:nth-child(even) .detail{ padding: 0 50px 0 14.375vw;}
.list-cnt h3{ font-size: 2rem; font-family: 'Libre Baskerville', serif;}
.list-cnt p{ margin: 20px 0 0; font-size: 1.4rem;}

@media screen and (max-width: 768px){
    .list-cnt{ margin: -20vw 0 0; width: 100%;}
    .list-cnt > li{ flex-direction: column; padding: 20vw 0 0;}
    .list-cnt > li:nth-child(even){ flex-direction: column;}
    .list-cnt figure{ padding: 0 6.666666667vw 0 0; width: 100vw;}
    .list-cnt > li:nth-child(even) figure{ padding: 0 0 0 6.666666667vw;}
    .list-cnt .detail{ padding: 8vw 0 0; width: 100%; line-height: 2;}
    .list-cnt > li:nth-child(even) .detail{ padding: 8vw 0 0;}
    .list-cnt h3{ font-size: 3.466666667vw;}
    .list-cnt p{ margin: 4vw 0 0; font-size: 2.666666667vw;}
}

.list-cnt2 > li{ flex-direction: row-reverse;}
.list-cnt2 > li:nth-child(even){ flex-direction: row;}
.list-cnt2 > li figure{ padding: 0 0 0 50px;}
.list-cnt2 > li .detail{ padding: 0 50px 0 14.375vw;}
.list-cnt2 > li:nth-child(even) figure{ padding: 0 50px 0 0;}
.list-cnt2 > li:nth-child(even) .detail{ padding: 0 14.375vw 0 50px;}

@media screen and (max-width: 768px){
    .list-cnt2 > li{ flex-direction: column;}
    .list-cnt2 > li:nth-child(even){ flex-direction: column;}
    .list-cnt2 > li figure{ padding: 0 0 0 6.666666667vw;}
    .list-cnt2 > li:nth-child(even) figure{ padding: 0 6.666666667vw 0 0;}
    .list-cnt2 > li .detail{ padding: 8vw 0 0;}
    .list-cnt2 > li:nth-child(even) .detail{ padding: 8vw 0 0;}
}

/* about
--------------------------------------------------- */
.about .catch{ text-align: center; font-size: 3.6rem;}
.about .lead{ padding: 120px 0; text-align: center; line-height: 2.25;}
.about .lead p{ font-size: 2rem;}
.about .lead p + p{ margin: 60px 0 0;}

@media screen and (max-width: 768px){
    .about .catch{ font-size: 4.8vw;}
    .about .lead{ padding: 20vw 0 0; line-height: 2.45;}
    .about .lead p{ font-size: 2.666666667vw;}
    .about .lead p + p{ margin: 8vw 0 0;}
}

.about .flex{ display: flex; flex-direction: row-reverse; align-items: center;}
.about .flex > figure{ width: 50%;}
.about .flex > .detail{ padding: 0 50px 0 0; width: 50%; line-height: 2.25;}
.about .flex > .detail p + p{ margin: 30px 0 0;}
.about .flex + figure{ margin: 100px 0 0;}

@media screen and (max-width: 768px){
    .about .flex{ flex-direction: column; font-size: 2.666666667vw;}
    .about .flex > figure{ width: 100%;}
    .about .flex > .detail{ padding: 4vw 0 0; width: 100%; line-height: 2.33;}
    .about .flex > .detail p + p{ margin: 8vw 0 0;}
    .about .flex + figure{ margin: 20vw 0 0;}
    .about .slider2-wrap{ margin: 0 calc(50% - 50vw);}
}

/* history
--------------------------------------------------- */
.history{ position: relative; margin: 0 auto; padding: 0 0 50px;}
.history:before{ position: absolute; top: 0; left: 12.5vw; width: 1px; height: 100%; background: #c9caca; content: "";}
.history .content{ padding: 0;}

@media screen and (max-width: 768px){
    .history{ padding: 0 0 16vw; width: 100%;}
    .history:before{ left: 14.666vw;}
    .history .content{ padding: 0;}
}

.history section{ margin: 360px 0 0; color: #000;}
.history .content > section:first-child{ margin: 270px 0 0;}

@media screen and (max-width: 768px){
    .history section{ margin: 40vw 0 0; font-size: 2.4vw;}
    .history .content > section:first-child{ margin: 0;}
}

.history section{ display: flex; flex-direction: column-reverse; flex-wrap: wrap;}
.history section .inner{ position: relative; display: flex; flex-direction: row-reverse; padding: 0 14.375vw 0 0; width: 100%; align-items: center;}
.history section .inner > time{ padding: 0 0 0 7vw; width: 14.375vw; font-size: 1.6rem; font-family: 'Libre Baskerville', serif;}
.history section .inner > time span{ display: inline-block; padding: 0 0 0 .5rem;}
.history section .inner > .detail{ width: calc(100% - 14.375vw); line-height: 2.25;}
.history section .inner > figure{ padding: 0 0 0 45px; width: 38.4375vw;}
.history section .inner > figure + .detail{ width: calc(100% - 14.375vw - 38.4375vw);}

@media screen and (max-width: 768px){
    .history section{ flex-direction: column;}
    .history section .inner{ padding: 0; align-items: flex-start;}
    .history section .inner time{ display: flex; flex-direction: column; padding: 0 0 0 3.2vw; width: 17.333vw; font-size: 2.4vw; line-height: 2.33; align-items: baseline;}
    .history section .inner > time span{ padding: 0 2.666666667vw; transform: rotate(90deg);}
    .history section .inner > .detail{ padding: 0 6.666666667vw 0 0; width: calc(100% - 17.333vw); line-height: 2.33;}
    .history section .inner > figure{ padding: 2.133333333vw 0 0 4vw; width: 42.666vw;}
    .history section .inner > figure + .detail{ padding: 0; width: calc(100% - 17.333vw - 42.666vw);}
}

.history .slider2-wrap{ padding: 0 100px 20px; width: 100vw;}
.history .slider2-wrap .slick-dots{ bottom: -50px;}

@media screen and (max-width: 768px){
    .history .slider2-wrap{ padding: 6.666666667vw 0 0; width: 100vw;}
    .history .slider2-wrap .slick-dots{ bottom: -9.333333333vw;}
}

/* member
--------------------------------------------------- */
.member section{ padding: 180px 0 0; text-align: center;}
.member section h2{ padding: 180px 0 0; font-size: 2.4rem; font-family: 'Libre Baskerville', serif;}

@media screen and (max-width: 768px){
    .member section{ margin: 0 -6.666666667vw; padding: 32vw 0 0;}
    .member section h2{ padding: 32vw 0 0; font-size: 3.733333333vw;}
}

.list-member{ display: flex; margin: -40px -12px 0; padding: 100px 0 0; font-family: 'Libre Baskerville', serif; flex-wrap: wrap;}
.list-member > li{ padding: 40px 12px 0; width: 50%; font-size: 1.4rem;}
.list-member figure img{ width: 150px;}
.list-member h3{ padding: 20px 0;}
.list-member span{ color: #9fa0a0; font-size: 1.2rem; line-height: 2.25;}
.list-member span:after{ content: ",";}
.list-member > li > span:last-child:after{ content: none;}
.list-member a{ color: #9fa0a0;}
.list-member a:hover{ color: #000;}

@media screen and (max-width: 768px){
    .list-member{ margin: -8vw -3.2vw 0; padding: 20vw 6.666666667vw 0;}
    .list-member > li{ padding: 8vw 3.2vw 0; font-size: 2.666666667vw;}
    .list-member figure img{ width: 75%;}
    .list-member h3{ padding: 4vw 0;}
    .list-member span{ font-size: 2.666666667vw; line-height: 2;}
}

/* service
--------------------------------------------------- */
.service .ttl{ padding: 150px 0 75px;}
.service p{ line-height: 1.8;}
.service .ttl + p{ text-align: center;}
.service .ttl + p + figure{ margin: 100px 0 0;}

@media screen and (max-width: 768px){
    .service .ttl{ line-height: 1.5;}
    .service p{ font-size: 2.666666667vw;}
    .service .ttl + p + figure{ margin: 26.66666667vw 0 0;}
    .service .list-row.row3 > li{ width: 50%;}
    .service .list-row.row3 time{ display: none;}
}

.service nav{ padding: 100px 0 0; font-style: italic; font-size: 1.4rem; font-family: 'Libre Baskerville', serif;}
.service nav ul{ display: flex;}
.service nav ul > li{ padding: 0 4em 0 0;}
.service nav a{ display: block; color: #000; white-space: nowrap;}

@media screen and (max-width: 768px){
    .service nav{ padding: 16vw 0 0; letter-spacing: normal; font-size: 2.666666667vw;}
    .service nav ul{ margin: -1em 0 0; flex-wrap: wrap;}
    .service nav ul > li{ padding: 1em 0 0; width: 50%; white-space: normal; line-height: 1.5;}
}

.list-project{ display: flex; overflow: hidden; margin: 0 -20px; padding: 135px 0 0; line-height: 2; flex-wrap: wrap;}
.list-project > li{ padding: 0 20px; width: 25%;}
.list-project h3{ font-size: 1.6rem;}
.list-project p{ margin: 15px 0 0; line-height: 1.9;}

@media screen and (max-width: 768px){
    .list-project{ display: block; margin: -8vw 0 0; padding: 20vw 0 0;}
    .list-project > li{ padding: 8vw 0 0; width: 100%;}
    .list-project h3{ font-size: 2.666666667vw;}
    .list-project p{ font-size: 2.666666667vw;}
}

.list-flow{ position: relative; display: flex; overflow: hidden; margin: 0 -15px; padding: 100px 0 60px; line-height: 2;}
.list-flow:after{ position: absolute; bottom: 0; left: 15px; width: calc(100% - 30px); height: 30px; background: url("/img/blt.svg") no-repeat bottom center / contain; content: "";}
.list-flow > li{ padding: 0 15px; width: 25%;}
.list-flow > li > div{ position: relative; padding: 20px 20px 80px; height: 100%; border: 1px solid;}
.list-flow h3{ font-size: 1.4rem; font-family: 'Libre Baskerville', serif;}
.list-flow ul{ margin: 0 0 0 1.6rem; padding: 15px 0 0; font-size: 1.2rem;}
.list-flow ul > li{ list-style: disc;}
.list-flow .more{ position: absolute; right: 20px; bottom: 20px;}
.list-flow .more a{ font-size: 1.4rem;}

@media screen and (max-width: 768px){
    .list-flow{ display: block; margin: -4vw 0 0; padding: 8vw 0 0;}
    .list-flow:after{ content: none;}
    .list-flow > li{ padding: 4vw 0 0; width: 100%;}
    .list-flow > li > div{ padding: 5.333333333vw;}
    .list-flow h3{ font-size: 2.666666667vw;}
    .list-flow ul{ margin: 0 0 0 4.266666667vw; padding: 4vw 0 0; font-size: 2.666666667vw;}
    .list-flow .more{ position: absolute; right: 5.333333333vw; bottom: 5.333333333vw;}
    .list-flow .more a{ font-size: 2.666666667vw;}
}

.service .flex{ display: flex; padding: 100px 0 0; justify-content: flex-start; align-items: center;}
.service .flex > figure{ padding: 0 30px 0 0; width: 50%;}
.service .flex > .detail{ padding: 0 0 0 30px; width: 50%;}
.service .flex > .detail h4{ font-size: 1.8rem;}
.service .flex > .detail h4 + p{ margin: 20px 0 0;}

@media screen and (max-width: 768px){
    .service .flex{ flex-direction: column; padding: 20vw 0 0;}
    .service .flex > figure{ padding: 0; width: 100%;}
    .service .flex > .detail{ padding: 8vw 0 0; width: 100%;}
    .service .flex > .detail h4{ font-size: 3.733333333vw;}
}

.service .flex.wide{ margin: 0 calc(50% - 50vw); padding: 230px 100px 0; width: 100vw;}
.service .project-wrap > section:nth-child(even) .flex.wide{ flex-direction: row-reverse;}
.service .flex.wide > figure{ padding: 0; width: calc(50% + 170px);}
.service .flex.wide .slider .slick-dots{ right: 0; bottom: -65px;}
.service .flex.wide > .detail{ padding: 0 0 0 65px; width: calc(50% - 170px - 14.375vw + 100px); line-height: 2.25;}
.service .project-wrap > section:nth-child(even) .flex.wide > .detail{ padding: 0 65px 0 0;}
.service .flex.wide > .detail h2{ font-size: 3.6rem; font-family: 'Libre Baskerville', serif; line-height: 1.5;}
.service .flex.wide > .detail p{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .service .flex.wide{ margin: 0; padding: 0; width: 100%;}
    .service .project-wrap > section:nth-child(even) .flex.wide{ flex-direction: column;}
    .service .flex.wide > figure{ width: 100%;}
    .service .flex.wide .slider .slick-dots{ right: 0; bottom: -8vw;}
    .service .flex.wide > .detail{ padding: 16vw 0 0; width: 100%; line-height: 2.33;}
    .service .project-wrap > section:nth-child(even) .flex.wide > .detail{ padding: 16vw 0 0;}
    .service .flex.wide > .detail h2{ display: none;}
    .service .flex.wide > .detail p{ margin: 0;}
    .service .flex.wide > .detail p + p{ margin: 8vw 0 0;}
}

.service .ttl2 + figure{ margin: 100px 0 0;}
.service figcaption{ margin: 75px 0 0;}
.service .list-row-wrap{ padding: 90px 0 0;}

@media screen and (max-width: 768px){
    .service .ttl2 + figure{ margin: 20vw 0 0;}
    .service figcaption{ margin: 8vw 0 0;}
    .service .list-row-wrap{ padding: 8vw 0 0;}
    .service .service-project > li:nth-child(3){ display: none;}
}

/* contact
--------------------------------------------------- */
.contact .content{ display: flex; justify-content: center;}
.contact .form{ padding: 0 0 0 90px; width: calc(100% - 300px);}
.dl-tel{ width: 300px; line-height: 2.25;}
.dl-tel > dd{ font-size: 2.8rem;}
.dl-tel > dd small{ display: block; margin: 40px 0 0; font-size: 1.2rem;}
.dl-check{ line-height: 1.8;}
.dl-check dd{overflow-y: auto;  margin: 10px 0 0; padding: 20px; height: 200px;border: 1px solid #dcdddd; font-size: 1.2rem; }
.dl-check ol{ margin: 0 0 0 1.6rem;}
.dl-check ol > li{ list-style: decimal;}
.dl-check ol > li + li{ padding: 10px 0 0;}
.dl-check p{ margin: 20px 0 0;}
.dl-check a{ text-decoration: underline;}
.dl-check a:hover{ text-decoration: none;}
.contact .check{ margin: 20px 0 0; padding: 0 0 40px; line-height: 1.5;}
.contact table{ width: 100%; border-top: 1px solid #dcdddd; text-align: left; letter-spacing: normal;}
.contact table th{ padding: 20px; width: 25%; border-bottom: 1px solid #dcdddd; white-space: nowrap;}
.contact table td{ padding: 20px; border-bottom: 1px solid #dcdddd;}
.contact table input{ padding: 10px; width: 100%; border: none; background: #efefef;}
.contact table textarea{ padding: 10px; width: 100%; height: 150px; border: none; background: #efefef;}
.contact .submit{ padding: 75px 0 0; text-align: center;}
.contact .submit input[type="submit"]{ display: inline-block; margin: 0 4px; padding: 20px 30px; border: 1px solid #dcdddd; background: none; font-size: 1.4rem; cursor: pointer;}

@media screen and (max-width: 768px){
    .contact .content{ display: flex; flex-direction: column;}
    .dl-tel{ width: 100%; text-align: center; font-size: 2.666666667vw; line-height: 2.125;}
    .dl-tel > dd{ font-size: 4.8vw;}
    .dl-tel > dd small{ margin: 8vw 0 0; font-size: 2.666666667vw;}
    .contact .form{ padding: 20vw 0 0; width: 100%;}
    .contact table{ width: 100%; font-size: 2.666666667vw;}
    .contact table th{ padding: 0; width: 40%;}
    .contact table td{ padding: 1.866666667vw 0;}
    .contact table textarea{ height: 100px;}
    .contact .submit{ padding: 12vw 0 0;}
    .contact .submit button{ padding: 2.666666667vw; font-size: 2.666666667vw;}
    .contact .submit button i{ margin: 0 1.866666667vw 0 0;}
    .contact .submit button i img{ height: 1.6vw;}
}

/* page
--------------------------------------------------- */
.page .content{ font-size: 1.4rem; line-height: 1.8;}
.page a{ text-decoration: underline;}
.page h2{ padding: 0 0 45px; text-align: center; font-size: 2.8rem;}
.page h3{ margin: 45px 0 0; font-size: 2rem;}
.page p{ margin: 15px 0 0;}
.page p + p{ margin: 30px 0 0;}
.page section + section{ padding: 150px 0 0;}

@media screen and (max-width: 768px){
    .page .content{ font-size: 3.2vw;}
    .page h2{ padding: 0 0 8vw; font-size: 4.8vw;}
    .page h3{ margin: 8vw 0 0; font-size: 3.733333333vw;}
    .page p{ margin: 4vw 0 0;}
    .page p + p{ margin: 8vw 0 0;}
    .page section + section{ padding: 20vw 0 0;}
}

.dl-policy{ display: flex; padding: 0 0 150px; justify-content: center; align-items: center;}
.dl-policy > dt{ padding: 0 50px 0 0;}

@media screen and (max-width: 768px){
    .dl-policy{ flex-direction: column; padding: 0 0 20vw; justify-content: center; align-items: center;}
    .dl-policy > dt{ padding: 0 0 4vw; width: 25%;}
}

.page ol{ margin: 0 0 0 2rem; padding: 15px 0 0;}
.page ol > li{ list-style: decimal;}

.list-num{ margin: -10px 0 0; padding: 15px 0 0;}
.list-num > li{ padding: 10px 0 0; padding-left: 2.7em; list-style: none; counter-increment: cnt; text-indent: -2.7em;}
.list-num > li:before{ content: "（" counter(cnt) "）";}

@media screen and (max-width: 768px){
}

.list-disc{ margin: -10px 0 0 2rem; padding: 15px 0 0;}
.list-disc > li{ padding: 10px 0 0; list-style: disc;}

@media screen and (max-width: 768px){
}

.list-num2 > li{ padding: 30px 0 0;}

@media screen and (max-width: 768px){
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; z-index: 1; display: flex; padding: 240px 100px 100px; font-family: 'Libre Baskerville', serif; justify-content: space-between; flex-wrap: wrap;}

@media screen and (max-width: 768px){
    .footer{ display: block; padding: 26.66666667vw 6.666666667vw 16vw;}
}

.plus{ position: relative;}
.plus .logo img{ width: auto; height: 45px;}
.plus .logo span{ display: block; padding: 25px 0 0; font-size: 1.6rem;}
.plus .contact{ padding: 50px 0 10px; font-style: italic; font-size: 1.4rem;}
.plus address{ padding: 40px 0 0;}
.plus address dl{ display: flex; font-size: 1.2rem; font-family: a-otf-ryumin-pr6n, serif;}
.plus address dt{ width: 90px;}
.plus aside{ padding: 20px 0 0; font-style: italic; font-size: 1.4rem;}
.plus i{ display: inline-block; margin: 0 15px 0 0;}
.plus i img{ width: auto; height: 12px; vertical-align: middle;}
.plus h1{ padding: 60px 0 0;}
.plus h1 img{ width: auto; height: 30px;}

@media screen and (max-width: 768px){
    .plus .logo{ padding: 0 0 6.666666667vw;}
    .plus .logo img{ height: 4vw;}
    .plus .logo span{ padding: 4vw 0 0; font-size: 2.4vw;}
    .plus .contact{ position: absolute; top: 0; right: 0; padding: 0; font-size: 2.4vw;}
    .plus i{ margin: 0 1.866666667vw 0 0;}
    .plus i img{ height: 2.133333333vw;}
    .plus address{ display: flex; padding: 4vw 0 0; letter-spacing: normal; font-size: 2.4vw; justify-content: space-between; align-items: baseline;}
    .plus address dl{ width: calc(100% - 18vw); font-size: 2.4vw; line-height: 1.6; justify-content: space-between;}
    .plus address dt{ width: 20vw; white-space: nowrap;}
    .plus address dd{ padding: 0 1em 0 0; width: calc(100% - 20vw);}
    .plus aside{ padding: 0; width: 18vw; text-align: right; font-size: 2.4vw;}
    .plus h1{ padding: 8vw 0 0;}
    .plus h1 img{ height: 4vw;}
}

.footer .nav1:before,
.footer .nav1:after{ display: block; clear: both; content: "";}
.footer .nav1 > ul{ margin: -75px 0 0; width: 37.5vw; font-size: 1.8rem;}
.footer .nav1 > ul > li{ float: left; padding: 75px 0 0; width: 200px;}
.footer .nav1 .sub-menu{ font-size: 1.2rem;}
.footer .nav1 .sub-menu > li{ padding: 30px 0 0;}

@media screen and (max-width: 768px){
    .footer .nav1 > ul{ display: flex; margin: 0; width: 100%; font-size: 3.2vw; flex-wrap: wrap; justify-content: space-between;}
    .footer .nav1 > ul > li{ float: none; padding: 13.33333333vw 2em 0 0; width: auto;}
    .footer .nav1 .sub-menu{ white-space: nowrap; font-size: 2.666666667vw;}
    .footer .nav1 .sub-menu > li{ padding: 5.333333333vw 0 0;}
}

.footer .nav2{ margin: 75px 0 0; padding: 45px 0 0; width: 100%; border-top: 1px solid #c9caca;}
.footer .nav2 ul{ display: flex;}
.footer .nav2 ul > li{ padding: 0 25px 0 0;}
.footer small{ position: absolute; right: 100px; bottom: 100px;}

@media screen and (max-width: 768px){
    .footer .nav2{ margin: 0; padding: 13.33333333vw 0 6.666666667vw; border-top: none; border-bottom: 0.266666667vw solid #c9caca; font-size: 2.666666667vw;}
    .footer .nav2 ul{ justify-content: flex-end; flex-wrap: wrap;}
    .footer .nav2 ul > li{ padding: 4vw 0 0 4.8vw; text-align: right;}
    .footer .nav2 ul > li:first-child{ padding: 0; width: 100%;}
    .footer small{ position: relative; right: auto; bottom: auto; display: block; margin: 6.666666667vw -6.666666667vw 0; text-align: center; letter-spacing: .05em; font-size: 2.666666667vw; line-height: 1.5;}
}