@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
}
h1, h2, li {
    color: white;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
a {
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
h1,h2,p,a,li {
    font-family: serif;
}
section {
    margin: 0;
    padding: 0;
}
/*ヘッダー*/
#header {
    background: #00a5dd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    position: relative;
}
.d-header-section-title {
    font-size: min(3vw, 56.4px);
}
.d-header-section-sub-title {
    font-size: min(2.5vw, 47px);
    z-index: 1;
    margin-left: -14%;
}
.d-trapezoid {
    display: flex;
    align-items: center;
}
.d-trapezoid::after {
    content: "";
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    width: min(21.3vw, 400px);
    background: #1662ad;
    z-index: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

/*JOB DESCRIPTION*/
#job-description {
    background-image: url(../img/asset1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000000;
}
.job-descripion {
    display: grid;
}
.d-trapezoid2 {
    position: relative;
    display: block;
    height: 24vw;
}
.d-trapezoid2::before {
    content: "";
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    height: 20vw;
    width: 55vw;
    background: rgb(0 183 182 / 50%);
    z-index: 0;
    position: absolute;
    left: 0;
    margin-top: 2%;
}
.d-job-section-title-en {
    font-size: 6.5vw;
    position: absolute;
    z-index: 1;
    margin-top: 4%;
    line-height: 1;
    left: 1%;
}
.d-job-section-title-jp {
    font-size: 4.5vw;
    position: absolute;
    left: 0;
    margin-left: 16%;
    z-index: 1;
    margin-top: 4%;
}
.d-job-section-sub-title {
    position: relative;
    font-size: 4vw;
}

/*RECEPTION*/
#reception,#dancer,#sound-and-lighting,#stage-staff,#sales,#production {
    background: #001255;
    
}
.reception,.dancer,.sound-and-lighting,.stage-staff,.sales,.production {
    max-width: 1200px;
    background-color: #051d75;
    max-width: 1200px;
    margin: auto;
    display: block;
    padding-bottom: 40px;
    /* background-image: url(../img/background/blue_00083.png);
    width: 100%; */
}
.d-each-section {
    background: #00a5dd;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.d-each-section-title {
    font-size: min(8vw,96px);
}
.d-each-section-back img {
    width: 100%;
}
.d-trapezoid3,.d-trapezoid4,.d-trapezoid5,.d-trapezoid6,.d-trapezoid7,.d-trapezoid8 {
    position: absolute;
    display: block;
}
.d-trapezoid3::before,.d-trapezoid4::before,.d-trapezoid5::before,.d-trapezoid6::before,.d-trapezoid7::before,.d-trapezoid8::before {
    content: "";
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    background: rgb(0 183 182 / 80%);
    z-index: 0;
    position: absolute;
    left: 0;
    margin-top: -47%;
    height: min(20vw, 240px);
}
.d-trapezoid3::before {
    width: min(60vw, 720px);
}
.d-each-section-sub-title {
    font-size: min(7.16vw,86px);
    position: relative;
    z-index: 1;
    margin-top: -45%;
    margin-left: 3%;
    line-height: 1.2;
}
.d-each-section-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: min(8vw, 96px);
    flex-wrap: wrap
}
.detail-box {
    border: white solid 3px;
    padding: min(4vw, 48px);
    border-radius: 0.5rem;
    width: 80%;
    max-width: 800px;
}
.detail-box ul {
    padding-inline-start: min(3.2vw,38.4px);
}
.detail-box li {
    font-size: min(3.2vw,38.4px);
    margin-top: 2%;
}
.entry-link {
    width: 63%;
    margin: auto;
    margin-top: 40px;
    background: rgb(98 60 249);
    border-radius: 1.5rem;
}
.entry-link:hover {
    transition: all 0.3s;
    background-color: rgb(130, 104, 236);
}
.entry-link a {
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: min(6.4vw, 76.8px);
    font-weight: 700;
    color: white;
}
.d-trapezoid7 h2 {
    margin-top: -30%;
    font-size: min(6.4vw,76.8px);
}
.d-trapezoid4::before,.d-trapezoid5::before,.d-trapezoid6::before {
    margin-top: -56%;
    height: min(20vw, 240px);
}
.d-trapezoid4 h2,.d-trapezoid5 h2,.d-trapezoid6 h2 {
    margin-top: -54%;
}
.d-trapezoid4::before {
    width: min(53vw, 636px);
}
.d-dancer-section-sns {
    display: flex;
    justify-content: center;
    align-items: center;
}
.d-dancer-section-sns a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
}
.d-dancer-section-sns img {
    width: 50%;
    margin-top: 10%;
}
.d-trapezoid5::before,.d-trapezoid6::before {
    width: min(51vw, 612px);
}
.d-trapezoid7::before {
    margin-top: -32%;
    width: min(88vw, 1056px);
}
.d-trapezoid8::before {
    width: min(57vw,684px);
}
.view-more {
    border: white solid 3px;
    width: 37%;
    margin: auto;
    margin-top: 40px;
    border-radius: 1.5rem;
}
.view-more a {
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: min(6.4vw, 76.8px);
    font-weight: 700;
    color: white;
}
.view-more:hover {
    transition: all 0.3s;
    background-color: #0089ff;
}
/*CONTACT*/
#contact {
    background: #3f3f3f;
}
.contact {
    background-color: #666666;
    height: auto;
    max-width: 1200px;
    margin: auto;
    display: grid;
    align-items: start;
    padding-bottom: 2vh;
}
.d-contact-section-title {
    color: white;
    font-size: min(4.7vw, 56.4px);
    margin-left: 6%;
}
.d-contact-section-address {
    color: white;
    margin-left: 10%;
    font-size: min(2.1vw,25px);
}
.d-contact-section-link {
    display: flex;
    justify-content: center;
    height: auto;
    width: 96%;
    margin: 7% auto 0px auto;
}
.tel, .line, .mail {
    display: flex;
    border: white solid 5px;
    width: 30%;
    margin-right: 0.5%;
    align-items: center;
    justify-content: space-between;
}
.tel p, .line p, .mail p {
    font-size: min(2.5vw,30px);
    color: white;
    font-weight: bolder;
    margin-left: 5%;
}
.d-contact-section-flex {
    flex-direction: column;
    clip-path: polygon(0% 99%, 100% -105%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 99%, 100% -105%, 100% 100%, 0% 100%);
    background-color: white;
    width: 61%;
    display: flex;
    align-items: center
}
.d-contact-section-flex img {
    height: min(5vw,7vh);
    margin-left: 40%;
}
.d-contact-section-flex p {
    font-size: min(2vw, 24px);
    color: #29A1D8 ;
    font-weight: bolder;
    margin: 13% 5% 0 0px;
    margin-left: auto;
}
#page-top {
  position: fixed;
  bottom: 15vh;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background: #ab101b;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 22px 3px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}