@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&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}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;}em{color: #f00;font-style: normal;}


/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ -webkit-overflow-scrolling: touch; width: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 0;}
body{
    background: #fff;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
    line-height: 1;

    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
body.open{ overflow: hidden;}
img{ width: 100%; vertical-align: bottom;}
video{ max-width: 100%; vertical-align: bottom;}
a{ color: #333; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}
p a{ text-decoration: underline;}

@media screen and (max-width: 768px){
    body{ font-size: 3.733333333vw;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* --------------------------------------------------
 maintenance
--------------------------------------------------- */
.maintenance{ padding: 1em 0; color: #f00; text-align: center; font-size: 14px; line-height: 1.5;}
.maintenance p + p{ margin: 1em 0 0;}

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

/* --------------------------------------------------
 aside
--------------------------------------------------- */
.aside{ display: flex; padding: 12px 45px; background: #000; color: #fff; justify-content: space-between; align-items: center;}
.aside a{ color: #fff;}
.aside p{ font-size: 13px; line-height: 1.5;}
.aside ul{ display: flex; justify-content: flex-end; align-items: baseline;}
.aside ul > li{ margin: 0 0 0 15px;}
.aside ul > li img{ width: auto; height: 24px;}

@media screen and (max-width: 768px){
    .aside{ padding: 0; height: 13.33333333vw; justify-content: center;}
    .aside p{ display: none;}
    .aside ul{ display: flex; justify-content: center; align-items: baseline;}
    .aside ul > li{ margin: 0 1.866666667vw;}
    .aside ul > li img{ height: 5.333333333vw;}
}


/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: sticky; top: 0; z-index: 10; display: flex; padding: 24px 45px; width: 100%; background: rgba(255,255,255,.8); justify-content: space-between; align-items: center;}
.header .tl{ display: flex; align-items: center;}
.header .tl h1{ width: 180px;}
.header .tl address{ margin: 0 0 0 1em; font-size: 13px; line-height: 1.5;}
.header nav{ font-weight: 700;}
.header nav > ul{ display: flex; align-items: center;}
.header nav > ul > li{ margin: 0 0 0 21px;}
.header nav > ul > li.btn{ margin: 0 0 0 30px;}
.header nav > ul > li.btn + .btn{ margin: 0 0 0 9px;}
.header nav > ul > li.btn > a{ display: flex; padding: 0 15px; height: 40px; border-radius: 5px; background: #000; color: #fff; font-size: 14px; justify-content: center; align-items: center;}
.header nav address,
.header nav .nav2,
.header nav aside{ display: none;}
.header .switch{ display: none;}

@media screen and (max-width: 1440px){
    .header .tl address{ display: none;}
}

@media screen and (max-width: 768px){
    .header{ padding: 0 4vw; width: 100%; height: 13.33333333vw;}
    body.open .header{ position: fixed;}
    .header .tl h1{ width: 26.66666667vw;}
    .header nav{ position: fixed; top: -100%; left: 0; visibility: hidden; padding: 8vw; min-height: 100dvh; width: 100%; background: #000; color: #fff; line-height: 1.75; opacity: 0; transition: all .5s ease;}
    .header nav a{ color: #fff;}
    .header nav.open{ top: 0; visibility: visible; opacity: 1;}
    .header nav .nav2{display: block; margin: .5em 0 0; }
    .header nav .nav2 ul{display: flex;  margin: 0 0 0 1.2em; flex-wrap: wrap;}
    .header nav .nav2 ul > li{width: 50%; list-style: disc; }
    .header nav address,
    .header nav aside{ display: block; margin: 8vw 0 0; padding: 8vw 0 0; border-top: 0.133333333vw solid; font-size: 3.733333333vw;}
    .header nav aside ul{ display: flex; justify-content: center; align-items: baseline;}
    .header nav aside ul > li{ margin: 0 1.866666667vw;}
    .header nav aside ul > li img{ height: 5.333333333vw;}
    .header nav > ul{ display: flex; flex-direction: column; width: 100%; align-items: flex-start;}
    .header nav > ul > li{ margin: 0; width: 100%;}
    .header nav > ul > li + li{ margin: 1em 0 0;}
    .header nav > ul > li.btn{ margin: 4vw 0 0;}
    .header nav > ul > li.btn + .btn{ margin: 4vw 0 0;}
    .header nav > ul > li.btn > a{ padding: 2.666666667vw 0; width: 100%; height: auto; border: 0.266666667vw solid #fff; border-radius: 1.333333333vw; font-size: 3.733333333vw;}
    .header .switch{ position: relative; display: flex; width: 4vw; height: 2vw; justify-content: center; align-items: center;}
    .header .switch:before,
    .header .switch:after{ position: absolute; left: 50%; width: 100%; height: 0.266666667vw; background: #000; content: ""; transition: transform .3s ease-out; transform: translate(-50%,0) rotate(0);}
    .header .switch:before{ top: 0;}
    .header .switch:after{ bottom: 0;}
    .header .switch.open:before{ top: 50%; background: #fff; transform: translate(-50%,-50%) rotate(45deg);}
    .header .switch.open:after{top: 50%;  bottom: auto; background: #fff;transform: translate(-50%,-50%) rotate(-45deg);}
}


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

/* top
--------------------------------------------------- */
.top{ margin: 0 auto; width: 1170px; line-height: 1.75;}

@media screen and (max-width: 768px){
    .top{ margin: 0; width: 100%; line-height: 1.75;}
}

.hero{ padding: 0 0 120px;}
.slide1{ opacity: 0; transition: opacity 1.2s ease;}
.slide1.slick-initialized{ opacity: 1;}

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

section{ padding: 0 0 120px;}
section h2{ font-weight: 700; font-size: 160%;}
section p{ margin: 2em 0 0;}

@media screen and (max-width: 768px){
    section{ padding: 0 8vw 16vw;}
    .content section{ padding: 0 0 16vw;}
    section h2{ font-size: 140%;}
    section p{ margin: 2em 0 0;}
}

.list-note{ display: flex; margin: 0 -15px; flex-wrap: wrap;}
.list-note > li{ padding: 60px 15px 0; width: 25%;}
.list-note a{ display: block;}
.list-note figure{ overflow: hidden; width: 100%; border-radius: 10px; aspect-ratio: 1280 / 670;}
.list-note figure img{ object-fit: cover;}
.list-note h3{ margin: 1em 0 0; font-weight: 700; font-size: 14px;}

@media screen and (max-width: 768px){
    .list-note{ flex-direction: column; margin: 0;}
    .list-note > li{ margin: 8vw 0 0;padding: 0; width: 100%;}
    .list-note figure{ border-radius: 2.666666667vw;}
    .list-note h3{ margin: 1em 0 0; font-weight: 700; font-size: 100%;}
}

.list-event > li{ display: flex; margin: 60px 0 0; justify-content: space-between;}
.list-event > li .status{ display: flex; width: 90px; height: 30px; color: #fff; font-size: 14px; justify-content: center; align-items: center;}
.list-event > li .status.fin{ background: #000;}
.list-event > li dl{ padding: 0 0 0 60px; width: calc(100% - 90px);}
.list-event > li dt{ font-weight: 600; font-size: 110%;}
.list-event > li dd{ padding: 1em 0 0;}
.list-event > li dd p{ margin: 1em 0 0;}

@media screen and (max-width: 768px){
    .list-event > li{flex-direction: column;  margin: 8vw 0 0; width: 100%; justify-content: flex-start; align-items: flex-start;}
    .list-event > li .status{padding: .25em 1.5em;  width: auto; height: auto; font-size: 80%;}
    .list-event > li dl{ margin: 4vw 0 0; padding: 0; width: 100%;}
    .list-event > li dd{ padding: 1em 0 0;}
}

.map{ display: flex; margin: 60px 0 0;}
.map iframe{ width: 50%; aspect-ratio: 1 / 1;}
.map figcaption{ padding: 0 0 0 90px;}
.map figcaption > *:first-child{ margin: 0;}

@media screen and (max-width: 768px){
    .map{ flex-direction: column; margin: 8vw 0 0;}
    .map iframe{ width: 100%;}
    .map figcaption{ padding: 4vw 0 0;}
    .map figcaption > *:first-child{ margin: 0;}
    .map figcaption p{ margin: 1em 0 0;}
}

/* common
--------------------------------------------------- */
article{ margin: 0 auto; padding: 120px 0; width: 1170px;}
article header h1{ font-weight: 700; font-size: 180%;}

@media screen and (max-width: 768px){
    article{ margin: 0; padding: 16vw 8vw; width: 100%;}
    article header h1{ font-size: 160%;}
}

.content{ padding: 90px 0 0; line-height: 1.75;}

@media screen and (max-width: 768px){
    .content{ padding: 16vw 0 0; line-height: 1.75;}
}

.list{ margin: 1em 0 0 1.3em;}
.list > li{ list-style: disc;}

@media screen and (max-width: 768px){
    .list > li + li{ margin: .5em 0 0;}
}

.list2{ font-weight: 500; font-style: normal; font-size: 14px; line-height: 1.75;}
.list2 > li{ padding-left: 1em; text-indent: -1em;}
.list2 > li + li{ margin: .5em 0 0;}

@media screen and (max-width: 768px){
    .list2{ font-size: 3.733333333vw;}
}

/* news
--------------------------------------------------- */
.list-news > li{ display: flex; padding: 0 0 90px; align-items: baseline;}
.list-news time{ width: 15%;}
.list-news h2{ font-weight: 700; font-size: 120%;}
.list-news p{ margin: 1em 0 0;}

@media screen and (max-width: 768px){
    .list-news > li{ flex-direction: column; padding: 0; width: 100%; align-items: flex-start;}
    .list-news > li + li{ margin: 16vw 0 0;}
    .list-news time{ width: 100%;}
    .list-news .detail{ width: 100%;}
    .list-news h2{ font-weight: 700; font-size: 120%;}
    .list-news p{ margin: 1em 0 0;}
}

/* studio
--------------------------------------------------- */
.list-tab{ position: sticky; top: 84px; display: flex; margin: 0 calc(50% - 50vw); border-bottom: 1px solid; background: rgba(255,255,255,.8); justify-content: center;}
.list-tab > li{ padding: 0 9px;}
.list-tab .tab{ display: flex; padding: 0 1.5em; height: 50px; border-radius: 10px 10px 0 0; background: #eee; color: #000; font-size: 18px; cursor: pointer; justify-content: center; align-items: center;}
.list-tab .tab.current{ background: #000; color: #fff;}

@media screen and (max-width: 768px){
    .list-tab{ top: 13.33333333vw; border-bottom: 0.266666667vw solid;}
    .list-tab > li{ padding: 0 0.4vw;}
    .list-tab .tab{ flex-direction: column; padding: 0 1em; height: 10.66666667vw; border-radius: 1.333333333vw 1.333333333vw 0 0; font-size: 3.2vw; line-height: 1.25;}
}

.tab-content{ display: none; padding: 90px 0 0;}
.tab-content.current{ display: block;}

@media screen and (max-width: 768px){
    .tab-content{ padding: 12vw 0 0;}
}

.tab-content h2{ font-weight: 700; font-size: 160%;}
.tab-content .flex{ display: flex; flex-direction: row-reverse; margin: 30px 0 0; justify-content: space-between;}
.tab-content .flex .detail{ width: calc(50% - 30px);}
.tab-content .flex .detail p{ line-height: 2;}
.tab-content .flex .detail p + p{ margin: 1em 0 0;}
.tab-content .flex .detail dt{ margin: 30px 0 0; padding: 10px 15px; background: #eee; line-height: 1;}
.tab-content .flex .detail dd{ padding: 15px 15px 0; font-size: 14px;}
.tab-content .flex .detail dd table{ margin: -15px 0 0; width: 100%; text-align: left; font-weight: 500; font-size: 14px; line-height: 1.75;}
.tab-content .flex .detail dd th{ padding: 15px 0; width: 38.2%; border-top: 1px solid #eee; vertical-align: top; font-weight: 700;}
.tab-content .flex .detail dd th span{ display: block; font-weight: 500;}
.tab-content .flex .detail dd td{ padding: 15px 0; border-top: 1px solid #eee; vertical-align: top; font-weight: 500;}
.tab-content .flex .detail tbody > tr:first-child > th,
.tab-content .flex .detail tbody > tr:first-child > td{ border: none;}
.tab-content .flex .detail .list2{ margin: 30px 0 0;}
.tab-content .flex figure{ width: calc(50% - 30px);}
.tab-content .flex figure .slide{ width: 100%; aspect-ratio: 6 / 4;}
.tab-content .flex figure .thumb{ display: flex; width: 100%;}
.tab-content .flex figure .thumb > li{ width: 20%; cursor: pointer;}
.tab-content .flex figure .zoom{ margin: 30px 0 0; width: 100%;}
.tab-content .flex figure .zoom iframe{ width: 100%; aspect-ratio: 6 / 4;}

@media screen and (max-width: 768px){
    .tab-content h2{ font-size: 140%;}
    .tab-content .flex{ flex-direction: column-reverse; margin: 4vw 0 0; justify-content:flex-start;}
    .tab-content .flex .detail{ padding: 4vw 0 0; width: 100%;}
    .tab-content .flex .detail p{ line-height: 1.75;}
    .tab-content .flex .detail dt{ margin: 8vw 0 0; padding: .75em 4vw;}
    .tab-content .flex .detail dd{ padding: 4vw 4vw 0; font-size: 3.733333333vw;}
    .tab-content .flex .detail dd table{ margin: -4vw 0 0; font-size: 3.466666667vw;}
    .tab-content .flex .detail dd th{ display: block; padding: 4vw 0 0; width: 100%; border-top: 0.266666667vw solid #eee;}
    .tab-content .flex .detail dd td{ display: block; padding: 0 0 4vw; width: 100%; border-top: none;}
    .tab-content .flex .detail .list2{ margin: 8vw 0 0;}
    .tab-content .flex figure{ width: 100%;}
    .tab-content .flex figure .slide{ margin: 0 calc(50% - 50vw); width: auto;}
    .tab-content .flex figure .thumb{ margin: 0 calc(50% - 50vw); width: auto;}
    .tab-content .flex figure .thumb > li{ width: 20%; cursor: pointer;}
    .tab-content .flex figure .zoom{ margin: 8vw 0 0;}
}

/* equipment
--------------------------------------------------- */
.list-rental{ display: flex; margin: 0 -7px; flex-wrap: wrap;}
.list-rental > li{ padding: 0 7px; width: 20%;}

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

/* gallery
--------------------------------------------------- */
.list-gallery{ display: flex; margin: 0 calc(50% - 50vw); background: #000; flex-wrap: wrap;}
.list-gallery > li{ width: 25%;}
.list-gallery > li > a{ display: block; overflow: hidden; aspect-ratio: 6 / 4;}
.list-gallery > li > a > img{ object-fit: cover;}

@media screen and (max-width: 768px){
    .list-gallery > li{ width: calc(100% / 3);}
}

/* price
--------------------------------------------------- */
.price table{ margin: 30px 0 0; width: 100%; text-align: left; font-weight: 600;}
.price thead th{ padding: 15px 30px; background: #333; color: #fff; font-weight: 600;}
.price tbody th{ padding: 15px 30px; width: 50%; border-bottom: 1px solid #ccc; font-weight: 600; font-size: 120%;}
.price tbody td{ padding: 15px 30px; width: 25%; border-bottom: 1px solid #ccc; font-weight: 500;}
.price .list2{ margin: 30px 0 0;}
.price section + .list2{ margin: 0;}

@media screen and (max-width: 768px){
    .price table{ margin: 4vw 0 0;}
    .price thead{ display: none;}
    .price tbody tr{ display: flex; flex-wrap: wrap;}
    .price tbody th{ display: block; padding: .5em 1em; width: 100%; border-bottom: none; background: #333; color: #fff; font-size: 100%;}
    .price tbody td{ padding: 1em; width: 38.2%; border-bottom: 0.266666667vw solid #ccc;}
    .price tbody td + td{ width: 61.8%;}
    .price .list2{ margin: 4vw 0 0;}
}

/* faq
--------------------------------------------------- */
.dl-faq{ border-bottom: 1px solid #ddd;}
.dl-faq dt{ position: relative; padding: 15px 0 15px 45px; border-top: 1px solid #ddd; font-weight: 700; cursor: pointer;}
.dl-faq dt:before,
.dl-faq dt:after{ position: absolute; top: 50%; right: 0; display: block; width: 15px; height: 2px; background: #333; content: ""; transform: translate(0,-50%);}
.dl-faq dt:after{ transform: translate(0,-50%) rotate(90deg);}
.dl-faq dt.active:after{ transform: translate(0,-50%) rotate(0);}
.dl-faq dt span{ position: absolute; top: 50%; left: 10px; display: block; color: #fff; font-weight: 700; transform: translate(0,-50%);}
.dl-faq dt span:before{ position: absolute; top: 50%; left: 50%; z-index: -1; width: 30px; height: 30px; border-radius: 100%; background: #333; content: ""; transform: translate(-50%,-50%);}
.dl-faq dd{ display: none; padding: 0 45px 30px 45px;}
.dl-faq a{ text-decoration: underline;}

@media screen and (max-width: 768px){
    .dl-faq{ border-bottom: 0.266666667vw solid #ddd;}
    .dl-faq dt{ padding: 4vw 12vw 4vw 12vw; border-top: 0.266666667vw solid #ddd;}
    .dl-faq dt:before,
    .dl-faq dt:after{ width:2.666666667vw; height: 0.533333333vw;}
    .dl-faq dt span{ left: 2.666666667vw;}
    .dl-faq dt span:before{ width: 8vw; height: 8vw;}
    .dl-faq dd{ padding: 0 12vw 4vw 12vw;}
}

/* terms
--------------------------------------------------- */
.list-terms{ margin: 0 0 0 1.5em;}
.list-terms > li{ padding: 0 0 1em; list-style: disc;}
.right{ margin: 3em 0 0; text-align: right;}

@media screen and (max-width: 768px){
    .right{ margin: 2em 0 0;}
}

/* privacy
--------------------------------------------------- */
.privacy .content > *:first-child{ margin: 0;}
.privacy h2{ margin: 2em 0 0; font-weight: 700; font-size: 120%;}
.privacy p{ margin: 1em 0 0;}

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

/* form
--------------------------------------------------- */
.form article{ width: 900px;}
.form .lead em{ color: #f00;}
.form h2 + .lead{ margin: 30px 0 0;}
.form .dl-step{ display: flex; margin: 30px 0 0; width: 100%; border-bottom: 1px solid #ccc; flex-wrap: wrap;}
.form .dl-step dt{ padding: 30px; width: 15%; border-top: 1px solid #ccc; font-weight: 700;}
.form .dl-step dd{ padding: 30px; width: 85%; border-top: 1px solid #ccc;}
.form .dl-step strong{ color: #f00;}
.form .list2{ margin: 60px 0 0;}
.form h3{ margin: 60px 0 0; font-weight: 700; font-size: 120%;}
.form h3 + p{ margin: 1em 0 0;}
.form table{ margin: 30px 0 0; width: 100%; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; text-align: left;}
.form th{ padding: 1.5em 0 1.5em 1.5em; width: 25%; border-top: 1px solid #ccc; vertical-align: top; white-space: nowrap; font-weight: 700;}
.form th em{ margin: 0 0 0 .5em; color: #f00; font-size: 90%;}
.form td{ padding: 1.5em; border-top: 1px solid #ccc; vertical-align: top; font-weight: 500;}
.form td div + div{ margin: .5em 0 0;}
.form td label{ margin: 0 1em 0 0;}
.form td div label{ display: inline-block; width: 120px;}
.form td span{ margin: 0 0 0 1em;}
.form td input[type="text"] + label{ margin: 0 1em 0 2em;}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"]{ padding: .5em; width: 50%; border: 1px solid #dcdcdc; box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);}
.form input.short{ width: 25%;}
.form input.short2{ width: 10%;}
.form *::placeholder{ color: #666; font-size: 90%;}
.form textarea{ padding: .5em; width: 100%; height: 150px; border: 1px solid #dcdcdc; box-shadow: inset 1px 1px 2px rgba(0,0,0,.1); line-height: 1.75;}
.form select,
.form input[type="number"]{ padding: .5em; border: 1px solid #dcdcdc; box-shadow: inset 1px 1px 2px rgba(0,0,0,.1); font-size: 90%;}
.form .exp{ font-size: 90%;}
.form .scroll{ overflow: scroll; margin: 15px 0 0; padding: 30px; height: 300px; border: 1px solid #ccc; font-size: 90%;}
.form .scroll h4{ margin: 2em 0 0; font-weight: 500;}
.form .scroll > *:first-child{ margin: 0;}
.form .scroll .list-terms{ margin: 0 0 0 1em;}
.form .scroll p{ margin: 1em 0 0;}
.form .conf{ padding: 15px; border: 1px solid #ccc; border-top: none; text-align: center;}
.form .conf span{ margin: 0 0 0 .5em;}
.form .submit{ margin: 60px 0 0; text-align: center;}
.form .submit button{ margin: 0 .5em; width: 200px; height: 50px; border: none; background: #000; color: #fff; font-weight: 500; cursor: pointer;}
.form .thanks h2{ font-weight: 700; font-size: 120%;}
.form .thanks p{ margin: 1em 0 0;}

@media screen and (max-width: 768px){
    .form article{ width: 100%;}
    .form h2 + .lead{ margin: 4vw 0 0;}
    .form .dl-step{ margin: 8vw 0 0; width: 100%; border-bottom: 0.266666667vw solid #ccc;}
    .form .dl-step dt{ padding: 4vw 0; width: 25%; border-top: 0.266666667vw solid #ccc;}
    .form .dl-step dd{ padding: 4vw 0; width: 75%; border-top: 0.266666667vw solid #ccc;}
    .form .list2{ margin: 8vw 0 0;}
    .form h3{ margin: 8vw 0 0;}
    .form table{ margin: 4vw 0 0; border-right: 0.266666667vw solid #ccc; border-bottom: 0.266666667vw solid #ccc; border-left: 0.266666667vw solid #ccc;}
    .form th{ display: block; padding: 4vw 4vw 2vw; width: 100%; border-top: 0.266666667vw solid #ccc;}
    .form td{ display: block; padding: 0 4vw 4vw; border-top: none;}
    .form td div + div{ margin: .5em 0 0;}
    .form td label{ margin: 0 .5em 0 0;}
    .form td div label{display: block;  padding: 0 0 .25em; width: 100%;}
    .form td span{ margin: 0 0 0 .5em;}
    .form td input[type="text"] + label{ margin: 0 .5em 0 1em;}
    .form input[type="text"],
    .form input[type="tel"],
    .form input[type="email"]{ padding: .5em; width: 100%; border: 0.266666667vw solid #dcdcdc; box-shadow: inset 0.266666667vw 0.266666667vw 0.533333333vw rgba(0,0,0,.1);}
    .form input.short{ width: 30%;}
    .form input.short2{ width: 30%;}
    .form textarea{ padding: .5em; width: 100%; height: 50vw; border: 0.266666667vw solid #dcdcdc; box-shadow: inset 0.266666667vw 0.266666667vw 0.533333333vw rgba(0,0,0,.1);}
    .form select,
    .form input[type="number"]{ padding: .5em; border: 0.266666667vw solid #dcdcdc; box-shadow: inset 0.266666667vw 0.266666667vw 0.533333333vw rgba(0,0,0,.1);}
    .form .scroll{ margin: 4vw 0 0; padding: 4vw; height: 50vw; border: 0.266666667vw solid #ccc;}
    .form .conf{ padding: 4vw; border: 0.266666667vw solid #ccc; border-top: none;}
    .form .submit{ margin: 8vw 0 0;}
    .form .submit button{ margin: 0 .5em; width: 45%; height: 13.33333333vw;}
    .form .thanks h2{ font-size: 120%;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ display: flex; padding: 30px 45px 90px; background: #000; color: #fff; font-size: 14px; justify-content: space-between; flex-wrap: wrap;}
.footer aside ul{ display: flex;}
.footer aside ul > li{ margin: 0 12px 0 0; width: 150px;}
.footer nav a{ color: #fff;}
.footer nav ul{ display: flex;}
.footer nav ul > li + li{ margin: 0 0 0 1em; padding: 0 0 0 1em; border-left: 1px solid rgba(255,255,255,.5);}
.footer small{ width: 100%; text-align: right; font-size: 12px;}

@media screen and (max-width: 768px){
    .footer{ position: relative; flex-direction: column; padding: 8vw 0 24vw; font-size: 100%; justify-content: flex-start; align-items: center;}
    .footer aside ul{ position: absolute; bottom: 8vw; left: 50%; transform: translate(-50%,0); justify-content: center;}
    .footer aside ul > li{ margin: 0; width: 25vw;}
    .footer nav ul{white-space: nowrap;font-size: 90%;  justify-content: center; }
    .footer nav ul > li + li{ margin: 0 0 0 1em; padding: 0 0 0 1em; border-left: 0.266666667vw solid rgba(255,255,255,.5);}
    .footer small{ margin: 4vw 0 0; text-align: center; font-size: 90%;}
}