@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Outfit:wght@100..900&display=swap');
header:after {
 background: rgba(255, 255, 255, 0.92);
}
header nav ul li a {
 color: #3c3c3c;
}
header nav ul li a:hover {
 color: #F67E17;
}
header nav ul li a:after {
 background: #F67E17;
}
header nav > ul li #subNav {
 background: rgba(255, 255, 255, 0.92);
}
#kv {
 color: #fff;
 position: relative;
 height: auto;
 overflow: hidden;
}
#kv:after {
 content: "";
 display: block;
 background: url("../images/dotted_bk.svg") repeat rgba(0, 0, 0, 0.5);
 background-size: 3px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.4;
 pointer-events: none;
}
#kv .splide {
 width: 100%;
 height: auto;
}
#kv .splide .splide__slide img {
 transition: 6s ease-out;
}
#kv .splide .splide__slide.is-active img {
 transform: scale(1.1);
 transition-delay: 0s;
}
#kv .cont {
 position: absolute;
 z-index: 5;
 display: block;
 top: calc(5vw + 6rem);
 left: 5vw;
 /*mix-blend-mode: overlay;*/
 opacity: 0.83;
}
#kv h1 {
 line-height: 1;
 font-size: 3vw;
 font-weight: 600;
 white-space: nowrap;
}
#kv h1 span {
 display: block;
 font-size: 300%;
 font-family: "Outfit", serif;
 text-indent: -0.05em;
 position: relative;
}
#kv h1 em {
 padding-top: 0.8em;
 letter-spacing: 0.2em;
}
#kv .topNews {
 position: absolute;
 z-index: 5;
 bottom: 2.5vw;
 right: 1.5vw;
 width: 45vw;
}
#kv .topNews h3 {
 font-weight: bold;
 font-size: 130%;
 line-height: 1.4;
 color: #fff;
 background: #1376D7;
 display: inline-block;
 padding: 0.25em 0.75em;
}
#kv .topNews h3 em {
 font-size: 100%;
}
#kv .topNews h3 span {
 font-size: 110%;
 font-family: "Outfit", serif;
 text-indent: -0.05em;
 position: relative;
 font-weight: 500;
 letter-spacing: 0.025em;
 display: inline-block;
 padding-left: 0.1em;
}
#kv .topNews ul {
 padding: 2vw 1.5vw;
 background: rgba(255, 255, 255, 0.5);
 color: #222;
}
#kv .topNews ul li {
 padding-bottom: 0.6em;
}
#kv .topNews ul li:last-child {
 padding-bottom: 0;
}
#kv .topNews ul li a {
 display: flex;
}
#kv .topNews ul li a .date {
 flex: 1 0 8em;
 max-width: 8em;
 line-height: 1.3;
 padding-right: 1.25em;
}
#kv .topNews ul li a .date span {
 display: block;
 background: #1c1c1c;
 color: #fff;
 text-align: center;
 padding: 0.25em 0;
 font-size: 85%;
 font-family: "Outfit", serif;
}
#kv .topNews ul li a .postTtl {
 font-size: 1.4rem;
 line-height: 1.4;
 font-weight: bold;
 color: #1c1c1c;
 padding-top: 0.25em;
 position: relative;
}
#kv .topNews ul li a .postTtl:before {
 content: "";
 display: block;
 width: 0;
 height: 3px;
 position: absolute;
 bottom: 0;
 left: 0;
 background: #F67F17;
 transition: .2s;
}
#kv .topNews ul li a:hover .postTtl:before {
 width: 100%;
}
#kv .topNews ul li a[target="_blank"] .postTtl:after {
 content: "";
 background: url("../images/icon_link.svg") center bottom no-repeat;
 background-size: 100% auto;
 display: inline-block;
 width: 0.9em;
 height: 0.9em;
 margin-left: 0.5em;
 line-height: 1;
 opacity: 0.7;
 transform: translateY(0.1em);
 transition: .2s;
}
#kv .topNews ul li a[target="_blank"]:hover .postTtl:after {
 background: url("../images/icon_link_hover.svg") center bottom no-repeat;
 background-size: 100% auto;
 opacity: 1;
}
#kv .topNews .toIndex {
 text-align: right;
 display: block;
 position: absolute;
 top: 0.25em;
 right: 0;
}
#kv .topNews .toIndex a {
 font-size: 90%;
 line-height: 1.2;
 font-weight: bold;
 font-family: "Outfit", serif;
 position: relative;
 display: inline-block;
 color: #fff;
 padding: 0.25em 1.75em 0.4em 1em;
 background: #1376D7;
}
#kv .topNews .toIndex a:hover {
 background: #F5CB00;
}
#kv .topNews .toIndex a:after {
 content: "";
 display: inline-block;
 width: 4px;
 height: 4px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 right: 0.75em;
}
#concept {
 height: 75vh;
 background-color: #24262B;
 padding: 5vw;
 color: #ececec;
 overflow: hidden;
}
#concept:before {
 content: "";
 display: block;
 background: url(../images/ami_w.svg) repeat;
 background-size: 54px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.04;
}
#concept .central {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 width: 64%;
 margin: 0 auto;
 z-index: 5;
}
#concept h2 {
 font-weight: 600;
 color: #F67E17;
 font-size: 4.5vw;
 white-space: nowrap;
 line-height: 1.4;
}
#concept p {
 font-size: 1.15vw;
 margin: 3em 0 0;
}
#movie {
 height: auto;
 background: #1c1c1c;
 color: #ececec;
}
#movie .yt {
 width: 100%;
 margin: 0 auto;
 position: relative;
}
#movie .yt:before {
 content: "";
 display: block;
 padding-top: 56.25%;
}
#movie .yt:after {
 content: "";
 display: block;
 background: url("../images/dotted_bk.svg") repeat;
 background-size: 2px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 opacity: 0.9;
 mix-blend-mode: overlay;
}
#movie .yt iframe {
 width: 100%;
 height: 100%;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
 position: absolute;
}
/*.frame_wrap {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 overflow: hidden;
}
.frame_wrap .arrow {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 1;
 transform: translate(-50%, -50%);
}
.frame_wrap .arrow {
 width: 68px;
 height: 48px;
 background: url("../images/sns/icon_youtube.svg") no-repeat;
 background-size: cover;
 pointer-events: none;
}
.frame_wrap img {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: auto;
 transform: translateY(-50%);
}
.frame_wrap iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}*/
#necessary {
 padding: 5vw;
 text-align: center;
 background: #3c3c3c;
 color: #fff;
}
#necessary:before {
 content: "";
 display: block;
 background: url(../images/dotted_w.svg) repeat;
 background-size: 3px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.04;
 pointer-events: none;
}
#necessary h2 {
 text-align: center;
 font-size: 3.2vw;
 line-height: 1.3;
 font-weight: bold;
 white-space: nowrap;
 margin-bottom: 0.5em;
}
#necessary h2 strong {
 font-weight: bold;
 font-size: 128%;
}
#necessary .power {
 position: relative;
}
#necessary .power:before {
 content: "";
 display: block;
 background: url("../images/ybt_power.svg") no-repeat center center;
 background-size: 98% auto;
 width: 64%;
 padding-top: calc(100% * 0.64);
 margin: 0 auto;
}
#necessary .flex {
 display: flex;
 justify-content: center;
 align-items: stretch;
 padding: 0 2.5vw;
}
#necessary .flex li {
 background: #ececef;
 flex: 1 0 calc(30% - 0.5vw);
 max-width: calc(30% - 0.5vw);
 margin: 0 auto;
 padding: 2.5vw;
 border-radius: 1.8rem;
 text-align: left;
}
#necessary .flex li h3 {
 display: block;
 position: relative;
 font-size: 130%;
 font-weight: bold;
 margin-bottom: 1em;
}
#necessary .flex li h3 span {
 font-family: "Outfit", serif;
 font-size: 200%;
 color: #A8A8A8;
 line-height: 1;
 transform: translateY(0.15em);
 display: inline-block;
 padding-right: 0.25em;
}
#necessary .flex li p {
 font-size: 1.4rem;
}
#job {
 padding: 5vw 5vw 0;
 background: #1c1c1c;
 height: auto;
}
#job .jobTtl {
 font-size: 6vw;
 margin-bottom: 2.5vw;
 color: rgba(0, 0, 0, 0);
 -webkit-text-stroke-width: 2px;
 -webkit-text-stroke-color: #fcfcfc;
 font-weight: 900;
 font-family: "sans-serif", Arial, Helvetica, "sans-serif";
}
#job .jobTtl span {
 font-style: italic;
 overflow: visible;
}
#job .jobTtl span:nth-child(3) {
 margin-right: 0.2em;
}
#job .type {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 position: relative;
 padding: 5vw;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center top;
 background-attachment: fixed;
}
#job .type:before {
 content: "";
 display: block;
 background: url("../images/dotted_bk.svg") repeat rgba(0, 0, 0, 0.4);
 background-size: 3px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.8;
 z-index: 2;
}
#job .type#media {
 background-image: url("../images/ph_jobtype_media.jpg");
 background-position: center bottom;
}
#job .type#postproduction {
 background-image: url("../images/ph_jobtype_postproduction.jpg");
}
#job .type#live {
 background-image: url("../images/ph_jobtype_live.jpg");
}
#job .type .box {
 color: #fff;
 position: relative;
 z-index: 4;
 width: 50%;
 text-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.4);
}
#job .type#media .box, #job .type#live .box {
 margin: 0 0 0 auto;
}
#job h3 {
 font-size: 120%;
 font-weight: bold;
 line-height: 1.2;
 padding: 0 0 1.5em;
}
#job h3 div {
 color: rgba(0, 0, 0, 0.1);
 -webkit-text-stroke-width: 2px;
 -webkit-text-stroke-color: #fcfcfc;
 font-weight: 900;
 font-family: "sans-serif", Arial, Helvetica, "sans-serif";
 font-style: italic;
 display: block;
 font-size: 9vw;
 line-height: 1;
 margin-bottom: 0.075em;
 white-space: nowrap;
}
#job h3 div span {
 font-style: italic;
 overflow: visible;
}
#job #postproduction h3 div {
 font-size: 6.4vw;
}
#job .lead {
 font-size: 1.4rem;
 padding-bottom: 1.5em;
}
#job h4 {
 font-size: 110%;
 font-weight: bold;
 line-height: 1.2;
 padding: 1em 0 0.5em;
 color: #F5CB00;
}
#job .jobList li {
 display: inline-block;
 position: relative;
}
#job .jobList li:after {
 content: "/";
 display: inline-block;
 margin: 0 0.4em;
}
#job .jobList li:last-child:after {
 display: none;
}
#job .caseList {
 padding-top: 0.25em;
}
#job .caseList li {
 display: inline-block;
 position: relative;
 margin: 0 0.15em 0.5em 0;
}
#job .caseList li a {
 background: #fff;
 padding: 0.35em 2em 0.35em 1.5em;
 border-radius: 20rem;
 text-shadow: none;
 line-height: 1.4;
 position: relative;
}
#job .caseList li a:hover {
 color: #fff;
 background: #B7092F;
}
#job .caseList li a:after {
 content: "";
 display: block;
 width: 0.4em;
 height: 0.4em;
 border-top: 2px solid #1c1c1c;
 border-right: 2px solid #1c1c1c;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 right: 1em;
 z-index: 2;
 transition: .2s;
}
#job .caseList li a:hover:after {
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
}
#job .btn {
 padding: 1em 0 0;
}
#job .btn a {
 color: #fff;
 text-shadow: none;
 background: #db465e;
 display: inline-block;
 padding: 0.4em 2.1em 0.4em 0.8em;
 box-shadow: 3px 3px 0 #b2323c;
 position: relative;
 border-radius: 2px;
 line-height: 1.4;
 white-space: nowrap;
}
#job .btn a:hover {
 background: #93254f;
 box-shadow: 3px 3px #5d1733;
}
#job .btn a:after {
 content: "";
 display: block;
 width: 0.4em;
 height: 0.4em;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 right: 1em;
 z-index: 2;
 transition: .2s;
}
#toRequirements {
 padding: 5vw;
 text-align: center;
 background-color: #3c3c3c;
 position: relative;
 color: #fcfcfc;
}
#toRequirements:before {
 content: "";
 display: block;
 background: url("../images/dotted_w.svg") repeat;
 background-size: 2px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 opacity: 0.1;
 pointer-events: none;
}
#toRequirements a {
 background: #F67E17;
 color: #fff;
 font-size: 3vw;
 font-weight: bold;
 padding: 3.5vw 15vw 3.5vw 12.5vw;
 display: inline-block;
 line-height: 1.4;
 white-space: nowrap;
 border-top: solid 1px rgba(255, 255, 255, 0.1);
 border-left: solid 1px rgba(255, 255, 255, 0.1);
 border-radius: 8px;
 letter-spacing: 0.05em;
 position: relative;
}
#toRequirements a:hover {
 background: #F5CB00;
}
#toRequirements a:after {
 content: "";
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-top: 5px solid #fff;
 border-right: 5px solid #fff;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 right: 1.5em;
 z-index: 2;
 transition: .2s;
}
#requirements {
 padding: 5vw;
 background-color: #3c3c3c;
 color: #fcfcfc;
 height: auto;
 text-align: center;
}
#requirements:before {
 content: "";
 display: block;
 background: url("../images/dotted_w.svg") repeat;
 background-size: 2px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 opacity: 0.1;
 pointer-events: none;
}
#requirements h2 {
 font-size: 4rem;
 font-weight: bold;
 line-height: 1.5;
 margin-bottom: 1em;
}
#requirements .flex {
 display: flex;
 justify-content: space-between;
}
#requirements .flex > div {
 flex: 1 0 calc(50% - 2em);
 max-width: calc(50% - 2em);
}
#requirements .flex > div .sub {
 font-size: 3rem;
 color: #F67E17;
 font-weight: bold;
 position: relative;
 display: inline-block;
}
#requirements .flex > div .sub:before {
 content: "";
 display: block;
 height: 2px;
 width: 5em;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 2.5em;
 background: #F67E17;
}
#requirements .flex > div .sub:after {
 content: "";
 display: block;
 height: 2px;
 width: 5em;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 2.5em;
 background: #F67E17;
}
#requirements h3 {
 font-size: 2.7rem;
 font-weight: bold;
 margin: 1.5em 0 1em;
 text-align: center;
}
#requirements h4 {
 font-size: 2.0rem;
 font-weight: bold;
 margin: 0 0 0.25em;
 text-align: left;
}
#requirements .entryList li {
 margin: 0 0 1em 0;
}
#requirements .entryList li a {
 background: #F5CB00;
 color: #1c1c1c;
 font-size: 1.8rem;
 font-weight: bold;
 padding: 0.75em 2.5em 0.7em 1em;
 display: block;
 line-height: 1.4;
 white-space: nowrap;
 border-top: solid 1px rgba(255, 255, 255, 0.1);
 border-left: solid 1px rgba(255, 255, 255, 0.1);
 border-radius: 8px;
 letter-spacing: 0.05em;
 position: relative;
}
#requirements .entryList li a:before {
 content: "";
 display: block;
 background: #000;
 color: #fff;
 height: 100%;
 width: 0;
 position: absolute;
 left: 0;
 top: 0;
 transition: .1s;
 mix-blend-mode: soft-light;
}
#requirements .entryList li a:hover:before {
 width: 100%;
}
#requirements .entryList li a:after {
 content: "";
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-top: 4px solid #1c1c1c;
 border-right: 4px solid #1c1c1c;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
 right: 1em;
 z-index: 2;
 transition: .2s;
}
#case {
 padding: 0 5vw 5vw;
 background: #181818;
 color: #fff;
 height: auto;
 text-align: left;
}
#case:before {
 content: "";
 display: block;
 background: url(../images/dotted_w.svg) repeat;
 background-size: 3px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.04;
 pointer-events: none;
}
#case .caseHeader {
 position: relative;
 z-index: 5;
 padding: calc(5vw + 6rem) 5vw 5vw;
 text-align: center;
 background: #131313;
 color: #a8a8a8;
 overflow: hidden;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center top;
}
#case .caseHeader:before {
 content: "";
 display: block;
 padding-top: 40%;
}
#case .caseHeader:after {
 content: "";
 display: block;
 background: url(../images/dotted_bk.svg) repeat rgba(0, 0, 0, 0.78);
 background-size: 2px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.5;
 pointer-events: none;
}
#case .caseHeader .passing {
 position: absolute;
 bottom: 0.4em;
 left: 0.4em;
 z-index: 20;
}
@keyframes passing-bar {
 0% {
  left: 0;
  width: 0;
 }
 50% {
  left: 0;
  width: 100%;
 }
 51% {
  left: 0;
  width: 100%;
 }
 100% {
  left: 100%;
  width: 0;
 }
}
#case .caseHeader .passing .passing-bar:before {
 background: rgba(246, 127, 23, 0.94);
}
#case .caseHeader h2 {
 font-size: 5.6vw;
 font-weight: bold;
 color: #fff;
 text-align: left;
 line-height: 1;
 padding: 0 0.25em;
 margin: 0;
}
#case .caseHeader h2 span {
 color: rgba(0, 0, 0, 0.2);
 -webkit-text-stroke-width: 2px;
 -webkit-text-stroke-color: #fcfcfc;
 font-weight: 900;
 font-family: "sans-serif", Arial, Helvetica, "sans-serif";
 font-style: italic;
 font-size: 200%;
}
#case .caseHeader h2 em {
 font-size: 50%;
 display: inline-block;
 padding-right: 0.25em;
 font-weight: bold;
 letter-spacing: 0.025em;
 font-style: italic;
}
#case .caseHeader .secTtl em:before {
 display: none;
}
#case.camera .caseHeader {
 background-image: url("../images/case/camera_kv.jpg");
}
#case.ve .caseHeader {
 background-image: url("../images/case/ve_kv.jpg");
}
#case.audio .caseHeader {
 background-image: url("../images/case/audio_kv.jpg");
}
#case.edit .caseHeader {
 background-image: url("../images/case/edit_kv.jpg");
}
#case.ma .caseHeader {
 background-image: url("../images/case/ma_kv.jpg");
}
#case.sound .caseHeader {
 background-image: url("../images/case/sound_kv.jpg");
}
#case.light .caseHeader {
 background-image: url("../images/case/light_kv.jpg");
}
#case.video .caseHeader {
 background-image: url("../images/case/video_kv.jpg");
}
#case.broadcast .caseHeader {
 background-image: url("../images/case/broadcast_kv.jpg");
}
#case .caseHeader .copy {
 text-align: right;
 position: absolute;
 font-size: 2.4vw;
 font-weight: bold;
 line-height: 1.5;
 color: #fff;
 display: inline-block;
 right: 5vw;
 bottom: 2.5vw;
 z-index: 2;
 display: none;
}
#case > div {
 position: relative;
 z-index: 5;
 padding: 5vw 0 0;
}
#case > div h3 {
 font-size: 2.8rem;
 font-weight: bold;
 color: #F67E17;
 margin-bottom: 1em;
 text-align: center;
}
#case > div h3 strong {
 font-weight: bold;
 font-size: 105%;
}
#case > div p {
 line-height: 2;
}
#case > div#description {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 padding: 7.5vw 5vw;
 background-color: #24262B;
 color: #ececec;
 overflow: hidden;
 text-align: center;
}
#case > div#description:before {
 content: "";
 display: block;
 background: url(../images/ami_w.svg) repeat;
 background-size: 54px auto;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.04;
}
#case > div#description p {
 font-size: 1.8rem;
}
#case #flow > ul > li {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 2.5em;
}
#case #flow > ul > li .thumb {
 flex: 1 0 24rem;
 max-width: 24rem;
 position: relative;
 overflow: hidden;
}
#case #flow > ul > li .thumb:before {
 content: "";
 display: block;
 padding-top: 100%;
}
#case #flow > ul > li .thumb img {
 width: auto;
 height: 100%;
 position: absolute;
 left: 0;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
}
#case #flow > ul > li .txt {
 flex: 1 0 calc(100% - 24rem);
 padding-right: 2.5em;
}
#case #flow > ul > li .txt h4 {
 font-size: 2.2rem;
 font-weight: bold;
 color: #F5CB00;
 margin-bottom: 0.5em;
}
#case #flow > ul > li .txt h4 .num {
 font-size: 200%;
 color: #fff;
 display: inline-block;
 font-family: "Outfit", serif;
 text-indent: -0.05em;
 padding-right: 0.15em;
 display: none;
}
#case #flow > ul > li .txt h4 .num:after {
 content: ".";
}
#case #because {
 background: rgba(255, 255, 255, 0.08);
 padding: 2.5em;
}
#case #because ul li {
 display: flex;
 justify-content: space-between;
 margin-bottom: 2em;
}
#case #because ul li:last-child {
 margin-bottom: 0;
}
#case #because ul li h4 {
 flex: 1 0 8em;
 max-width: 8em;
}
#case #because ul li p {
 flex: 1 0 calc(100% - 8em);
 position: relative;
}
#case #because ul li p:before {
 content: "”";
 line-height: 1;
 font-size: 240%;
 position: absolute;
 top: -0.15em;
 left: -0.5em;
 opacity: 0.5;
}
#case #because ul li p:after {
 content: "”";
 line-height: 1;
 font-size: 240%;
 position: absolute;
 bottom: -0.5em;
 right: -0.5em;
 opacity: 0.5;
}
#case #note {
 margin: 4.5em auto 0;
 font-size: 1.4rem;
 border: dashed 1px #6c6c6c;
 padding: 2.5em;
 max-width: 84%;
 color: #ccc;
}
#case #note h3 {
 color: #ccc;
 font-size: 2.2rem;
}
#case #note p {
 margin-bottom: 1em;
 line-height: 1.5;
}
#case #note ul {
 margin-bottom: 1em;
 line-height: 1.5;
}
#case #note ul li {
 text-indent: -0.6em;
 padding-left: 0.6em;
 margin-bottom: 0.35em;
}
#case ul.caution li {
 color: #ccc;
}
.toBack {
 position: relative;
 margin: 2.5em auto 0;
 text-align: center;
 z-index: 5;
 padding: 0 !important;
}
.toBack a {
 display: inline-block;
 line-height: 1.2;
 padding: 0.75em 2em 0.75em 3em;
 border: solid 1px rgba(255, 255, 255, 0.5);
 color: #ececec;
 font-size: 1.4rem;
 position: relative;
 font-weight: 600;
 border-radius: 20rem;
}
.toBack a:after {
 content: "";
 display: inline-block;
 width: 6px;
 height: 6px;
 border-top: 2px solid #e6e6e6;
 border-left: 2px solid #e6e6e6;
 position: absolute;
 top: 50%;
 transform: translateY(-50%) rotate(-45deg);
 left: 1.5em;
}
@media screen and (max-width: 999px) {
 #kv .cont {
  top: 4rem;
  left: 2rem;
  opacity: 0.95;
 }
 #kv h1 {
  font-size: 1.5rem;
 }
 #kv .topNews {
  position: relative;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
 }
 #kv .topNews h3 {
  font-size: 120%;
  padding: 0.35em 2rem;
 }
 #kv .topNews ul {
  padding: 2rem 2rem;
 }
 #kv .topNews ul li a {
  display: block;
 }
 #kv .topNews ul li a .date {
  flex: none;
  padding: 0 0 0.25em;
 }
 #kv .topNews .toIndex {
  top: 0;
  right: 0;
 }
 #kv .topNews .toIndex a {
  font-size: 90%;
  line-height: 1.2;
  font-weight: bold;
  font-family: "Outfit", serif;
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0.25em 1.75em 0.4em 1em;
  background: #1376D7;
 }
 #kv .topNews .toIndex a:after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  right: 0.75em;
 }
 #concept {
  height: auto;
  padding: 2rem;
 }
 #concept .central {
  position: relative;
  top: 0;
  transform: translateY(0);
  width: 100%;
 }
 #concept h2 {
  font-size: 6vw;
  white-space: normal;
 }
 #concept p {
  font-size: 1.3rem;
  margin: 1em 0 0;
 }
 #necessary {
  padding: 2rem 1rem;
 }
 #necessary h2 {
  font-size: 2.7rem;
 }
 #necessary .power:before {
  content: "";
  display: block;
  background: url("../images/ybt_power.svg") no-repeat center center;
  background-size: 98% auto;
  width: 100%;
  padding-top: calc(100% * 1);
 }
 #job {
  padding: 2rem 2rem 0;
 }
 #job .jobTtl {
  font-size: 4.0rem;
  margin-bottom: 0.25em;
 }
 #job .type {
  padding: 2rem;
  background-attachment: inherit;
  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
 }
 #job .type:before {
  background: url(../images/dotted_bk.svg) repeat rgba(0, 0, 0, 0.6);
  background-size: 3px auto;
 }
 #job .type .box {
  width: 100%;
 }
 #job .type#media .box, #job .type#postproduction .box {
  margin: 0 0 0 auto;
 }
 #job h3 {
  font-size: 120%;
 }
 #job h3 div {
  font-size: 300%;
  margin-bottom: 0;
 }
 #job #postproduction h3 div {
  font-size: 240%;
 }
 #job .lead {
  font-size: 1.3rem;
 }
 #job .btn a {
  white-space: normal;
 }
 #toRequirements {
  padding: 2.5rem 2rem;
 }
 #toRequirements a {
  font-size: 5.7vw;
  padding: 5vw 15vw 5vw 12.5vw;
  display: block;
 }
 #requirements {
  padding: 4rem 2rem;
 }
 #requirements h2 {
  font-size: 2.7rem;
 }
 #requirements .flex {
  display: block;
 }
 #requirements .flex > div {
  flex: none;
  max-width: 100%;
 }
 #requirements .flex > div.tokyo {
  padding-top: 2em;
 }
 #requirements .flex > div .sub {
  font-size: 2.7rem;
 }
 #requirements .flex > div .sub:before {
  width: 3em;
 }
 #requirements .flex > div .sub:after {
  width: 3em;
 }
 #requirements h3 {
  font-size: 2.2rem;
  margin: 1.0em 0 0.5em;
 }
 #requirements h4 {
  font-size: 1.6rem;
 }
 #requirements .entryList {
  display: block;
 }
 #requirements .entryList li {
  margin: 0 0 0.75em;
  flex: none;
  max-width: 100%;
 }
 #requirements .entryList li a {
  font-size: 1.5rem;
  padding: 0.75em 2.5em 0.7em 1em;
  display: block;
 }
 #requirements .entryList li a:after {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-top: 4px solid #1c1c1c;
  border-right: 4px solid #1c1c1c;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  right: 1em;
  z-index: 2;
  transition: .2s;
 }
 #case {
  padding: 0 2rem 2rem;
 }
 #case .caseHeader h2 {
  font-size: 6.7vw;
 }
 #case .caseHeader .copy {
  font-size: 3.2vw;
  right: 2rem;
 }
 #case > div {
  padding: 4rem 0 0;
 }
 #case > div h3 {
  font-size: 2.0rem;
  margin-bottom: 0.75em;
 }
 #case > div#description p {
  font-size: 1.4rem;
 }
 #case #flow > ul > li {
  display: block;
  margin-bottom: 2.5em;
 }
 #case #flow > ul > li .thumb {
  flex: none;
  max-width: 100%;
 }
 #case #flow > ul > li .thumb:before {
  padding-top: 75%;
 }
 #case #flow > ul > li .thumb img {
  width: 100%;
  height: auto;
 }
 #case #flow > ul > li .txt {
  flex: none;
  padding: 0 0 1em;
 }
 #case #flow > ul > li .txt h4 {
  margin-bottom: 0.5em;
 }
 #case #flow > ul > li .txt h4 .num {
  line-height: 1;
 }
 #case #flow > ul > li .txt h4 .num:after {
  content: ".";
 }
 #case #because {
  padding: 1.5em 2.5rem;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
 }
 #case #because ul li {
  display: block;
  margin-bottom: 1.75em;
 }
 #case #because ul li h4 {
  flex: none;
  max-width: 100%;
  margin-bottom: 1.2em;
  font-size: 110%;
  border-left: solid 4px #F5CB00;
  padding-left: 0.5em;
  line-height: 1.2;
 }
 #case #because ul li p {
  flex: none;
 }
 #case #note {
  margin: 2.5em auto 0;
  font-size: 1.3rem;
  padding: 1.5em 2rem 1em;
  max-width: 100%;
 }
 #case #note h3 {
  font-size: 120%;
 }
 .toBack {
  margin: 2em auto 0;
 }
}