/* # =================================================================
   # フォント
   # ================================================================= */
@font-face {
   font-family: '';
   src: url("");
}





/* # =================================================================
   # 共通要素
   # ================================================================= */
html {
   font-size: 62.5%;
}
body {
   font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
   font-size: 1.3rem;
   color: #000;
   overflow: hidden;
}
header {
   width: 100%;
   padding: 25px 0;
   position: fixed;
   top: 0;
   z-index: 1;
}
header .scHeader {
   padding: 0 100px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}
h1 {
   width: 70px;
}
nav {
   width: calc(100% - 70px);
   font-family: 'Roboto Condensed', sans-serif;
}
nav ul {
   width: 480px;
   margin: 0 0 0 auto;
   display: flex;
   flex-wrap: wrap;
}
nav ul li {
   width: 120px;
}
nav ul li a {
   width: 100%;
   padding: 0 20px;
   font-size: 1.6rem;
   letter-spacing: .04em;
   display: block;
}
nav ul li a span {
   width: 100%;
   display: block;
   text-align: center;
}
nav ul li a span:nth-of-type(1) {
   opacity: 1;
   transition: .3s ease-in-out;
}
nav ul li a:hover span:nth-of-type(1) {
   transform: translateY(-21px);
   opacity: 0;
}
nav ul li a span:nth-of-type(2) {
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 1.4rem;
   opacity: 0;
   transition: .3s ease-in-out;
}
nav ul li a:hover span:nth-of-type(2) {
   transform: translateY(-21px);
   opacity: 1;
}
.sc {
   max-width: 1200px;
   width: 95%;
   margin: 0 auto;
}
.sc h2 {
   width: 100%;
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 3.4rem;
   text-align: center;
   letter-spacing: .02em;
}
.spNav {
   display: none;
}
footer {
   width: 100%;
   padding: 35px 20px;
   background: #fafafa;
}
footer .scCopy {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   font-size: 1.2rem;
   text-align: center;
}
.ftScroll {
   width: 10px;
   display: block;
   position: fixed;
   bottom: 35px;
   right: 50px;
}
a:link,
a:active,
a:visited,
a:hover {
   color: #000;
   text-decoration: none;
}
img {
   max-width: 100%;
   vertical-align: top;
   display: block;
}
input[type="text"]:focus,
input[type="submit"]:focus,
textarea:focus {
   outline: 0;
}
.sp {display: none;}





/* # =================================================================
   # エフェクト要素
   # ================================================================= */
/* フェード制御 */
.is-show {
   opacity: 0;
   transform: translate(0,80px);
   transition: .5s ease-in-out;
}
.is-show.delay1 {transition: .5s ease-in-out .3s;}
.is-show.delay2 {transition: .5s ease-in-out .6s;}
.is-show.delay3 {transition: .5s ease-in-out .9s;}
.is-show.delay4 {transition: .5s ease-in-out 1.2s;}
.is-show.delay5 {transition: .5s ease-in-out 1.5s;}
.is-show.act {
   opacity: 1;
   transform: translate(0,0);
}





/* # =================================================================
   # トップページ
   # ================================================================= */
.scMv {
   height: 100vh;
   padding: 0 0 0 145px;
   background: url(../img/imgMv.svg) no-repeat center right 120px / 820px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
.scMv p:nth-of-type(1) {
   width: 100%;
   margin: -80px 0 45px 0;
   font-size: 1.7rem;
   text-align: left;
   letter-spacing: .16em;
   line-height: 2;
}
.scMv p:nth-of-type(2) {
   width: 100%;
   text-align: left;
   font-size: 3.7rem;
   font-weight: 300;
   letter-spacing: .14em;
}
.scMv p span {
   color: #b90107;
}

.scConcept {
   width: 100%;
   padding: 110px 0 120px 0;
   background: #fafafa;
}
.scConcept h2 {
   margin: 0 0 90px 0;
}
.scConcept .txtConcept {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}
.scConcept .txtConcept img:nth-of-type(1) {
   width: 130px;
   margin: 0 70px 0 0;
}
.scConcept .txtConcept img:nth-of-type(2) {
   width: 46px;
   position: relative;
   right: 4px;
}
.scConcept .txtConcept img:nth-of-type(3) {
   width: 120px;
   margin: 0 0 0 70px;
}
.scConcept .txtConcept .icon {
   width: 100%;
   padding: 60px 0 40px 0;
}
.scConcept .txtConcept .icon img {
   width: 22px!important;
   margin: 0 auto!important;
}
.scConcept .txtConcept .txt {
   width: 100%;
}
.scConcept .txtConcept .txt img {
   width: 340px!important;
   margin: 0 auto 35px auto!important;
}
.scConcept .txtConcept .txt p {
   width: 100%;
   text-align: center;
   font-size: 1.6rem;
   letter-spacing: .1em;
   line-height: 2.8;
}
.scService {
   max-width: 1000px;
   width: 100%;
   margin: 0 auto 100px auto;
   padding: 120px 0 0 0;
}
.scService h2 {
   margin: 0 0 70px 0;
   padding: 0 0 50px 0;
   border-bottom: 1px dashed #b3b3b3;
}
.scService p {
   width: 100%;
   margin: 0 0 50px 0;
   text-align: center;
   font-size: 1.6rem;
   letter-spacing: .1em;
   line-height: 1.9;
}
.scService p:nth-of-type(2) {
   margin: 0 0 170px 0;
   padding: 70px 0 0 0;
   border-top: 1px dashed #b3b3b3;
   position: relative;
}
.scService p:nth-of-type(2)::after {
   content: '';
   width: 48px;
   height: 23px;
   margin: auto;
   background: url(../img/iconArrow.svg) no-repeat center center / 48px;
   position: absolute;
   bottom: -95px;
   left: 0;
   right: 0;
}
.scService p span {
   color: #b90107;
}
.scService .listService1 {
   max-width: 680px;
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   /*align-items: center;*/
   justify-content: center;
}
.scService .listService1 li {
   width: 280px;
}
.scService .listService1 li:nth-of-type(2) {
   width: 46px;
   margin: 0 30px;
   position: relative;
}
.scService .listService1 li img {
   height: 291px;
   margin: 0 auto 50px auto;
}
.scService .listService1 li:nth-of-type(2) img {
   height: auto;
   margin: auto;
   position: absolute;
   top: -80px;
   bottom: 0;

}
.scService .listService1 li p {
   font-size: 1.56rem;
}
.scService .listService2 {
   max-width: 980px;
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.scService .listService2 li {
   width: 290px;
}
.scService .listService2 li img {
   margin: 0 0 30px 0;
}
.scService .listService2 li h3 {
   width: 100%;
}
.scService .listService2 li p {
   margin: 0 0 5px 0;
   padding: 25px 0 0 0;
   border-top: 1px dashed #b3b3b3;
   text-align: left;
}
.scService .listService2 li p:nth-of-type(2) {
   border-top: none;
   border-bottom: none;
}
.scService .listService2 li p:nth-of-type(2)::after {
   content: none;
}
.scService .listService2 li p span {
   width: 100%;
   padding: 0 20px 0 0;
   color: #000;
   text-align: right;
   display: block;
}

.scCompany {
   width: 100%;
   padding: 100px 0 110px 0;
   background: url(../img/bgCompany1.png) no-repeat top 10% left 10% / 387px,url(../img/bgCompany2.png) no-repeat bottom 10% right 10% / 484px,#fafafa;
}
.scCompany h2 {
   margin: 0 0 35px 0;
}
.scCompany p {
   width: 100%;
   margin: 0 0 80px 0;
   text-align: center;
   font-size: 1.6rem;
   letter-spacing: .1em;
   line-height: 2.8;
}
.scCompany table {
   width: 640px;
   margin: 0 auto;
   font-size: 1.56rem;
   letter-spacing: .1em;
}
.scCompany table th {
   width: 175px;
   padding: 0 50px;
   border-right: 1px solid #b3b3b3;
   line-height: 2.8;
   text-align: left;
   vertical-align: top;
   font-weight: normal;
}
.scCompany table td {
   width: 465px;
   padding: 0 50px;
   line-height: 2.8;
}

.scContact {
   max-width: 860px;
   margin: 0 auto 75px auto;
   padding: 120px 0 0 0;
}
.scContact h2 {
   margin: 0 0 80px 0;
}
.scContact > p {
   width: 100%;
   margin: 0 0 10px 0;
   font-size: 1.56rem;
   text-align: right;
}
.scContact table {
   width: 100%;
   font-size: 1.56rem;
}
.scContact table th {
   width: 170px;
   padding: 0 0 15px 0;
   font-weight: normal;
   text-align: left;
   vertical-align: middle;
}
.scContact table td {
   width: calc(100% - 170px);
   padding: 0 0 15px 0;
}
.scContact table td input,
.scContact table td textarea {
   width: 100%;
   padding: 8px;
   border: 1px solid #ccc;
}
.scContact table td input::placeholder {
   color: #ccc;
}
.scContact table td input:-ms-input-placeholder {
   color: #ccc;
}
.scContact table td textarea {
   height: 200px;
}
.scContact form > p {
   width: 100%;
   margin: 0 0 30px 0;
   font-size: 1.56rem;
   line-height: 1.8;
   letter-spacing: .08em;
}
.scContact .iptCheck {
   display: none;
}
.scContact label {
   width: 300px;
   margin: 0 0 20px 0;
   font-size: 1.56rem;
   display: block;
   cursor: pointer;
}
.scContact label span {
   padding: 0 0 0 25px;
   position: relative;
}
.scContact label span::before {
   content: "";
   display: block;
   position: absolute;
   top: 2px;
   left: 0;
   width: 18px;
   height: 18px;
   border: 1px solid #ccc;
}
.scContact .iptCheck:checked + span::after {
   content: "";
   display: block;
   position: absolute;
   top: 0px;
   left: 5px;
   width: 9px;
   height: 16px;
   transform: rotate(40deg);
   border-bottom: 3px solid #b90107;
   border-right: 3px solid #b90107;
}
.scContact .btnSend {
   width: 100%;
   margin: 0 0 40px 0;
   padding: 8px 10px;
   background: #b90107;
   font-size: 1.56rem;
   letter-spacing: .1em;
   text-align: center;
   color: #fff;
}
.scContact .scPrivacy {
   font-size: 1.4rem;
}
.scContact .scPrivacy h3 {
   width: 100%;
   margin: 0 0 25px 0;
   padding: 0 0 10px 10px;
   border-bottom: 1px solid #ccc;
   font-weight: normal;
   position: relative;
   cursor: pointer;
}
.scContact .scPrivacy h3::after {
   content: '';
   width: 17px;
   height: 17px;
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   transform: rotate(225deg);
   display: block;
   position: absolute;
   top: 0px;
   right: 10px;
}
.scContact .scPrivacy h3.act::after {
   transform: rotate(45deg);
   top: 8px;
}
.scContact .scPrivacy .txt {
   width: 100%;
   display: none;
}
.scContact .scPrivacy .txt p {
   width: 100%;
   margin: 0 0 20px 0;
   letter-spacing: .08em;
}
.scContact .txtError1,
.scContact .txtError2,
.scContact .txtError3 {
   width: 100%;
   padding: 8px 0 0 0;
   text-align: right;
   color: #b90107;
   display: none;
}
.scContact .txtError3 {
   margin: 0 0 20px 0;
   padding: 0;
   font-size: 1.56rem;
   text-align: left;
}
.scContact .txtError1.act,
.scContact .txtError2.act,
.scContact .txtError3.act {
   display: block;
}
.scContact.thanks {
   height: 100vh;
   padding: 30vh 0 0 0;
}
.scContact.thanks h2 {
   margin: 0 0 45px 0;
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 3rem;
   font-weight: 600;
   letter-spacing: .06em;
}
.scContact.thanks p {
   margin: 0 0 55px 0;
   font-size: 1.66rem;
   font-weight: 500;
   letter-spacing: .08em;
   line-height: 2;
   text-align: center;
}
.scContact.thanks .btnSend {
   display: block;
}


/* # =================================================================
   # レスポンシブ要素
   # ================================================================= */
/* 4K:2560px */
/* PC:1920px */

/* laptop NotePC L */
@media screen and (max-width: 1440px) {
   /* トップページ */
   .scMv {
      background: url(../img/imgMv.svg) no-repeat center right 120px / 66%;
   }
   .scMv p:nth-of-type(1) {
      font-size: 1.2vw;
   }
   .scMv p:nth-of-type(2) {
      font-size: 2.7vw;
   }
}

/* laptop NotePC */
@media screen and (max-width: 1024px) {
   /* 共通 */
   header .scHeader {
      padding: 0 50px;
   }
   /* トップページ */
   .scMv {
      padding: 0 0 0 100px;
   }
   .scService {
      width: 90%;
   }
   .scService .listService2 li {
      width: 30%;
   }
}

/* tablet */
@media screen and (max-width: 768px) {
   /* 共通 */
   header .scHeader {
      padding: 0;
   }   
   nav {
      width: 100%;
      height: 100vh;
      opacity: 0;
      transition: .9s ease-in-out;
      position: fixed;
      top: 0;
      left: -100%;
   }
   nav.act {
      background: #fafafa;
      opacity: 1;
      left: 0;
   }
   nav ul {
      width: 100%;
      margin: 200px 0 0 auto;
      display: block;
   }
   nav ul li {
      width: 100%;
      margin: 0 0 60px 0;
      padding: 0;
      position: relative;
      left: -100%;
      opacity: 0;
   }
   nav ul li:nth-of-type(1) {
      transition: .8s ease-in-out;
   }
   nav ul li:nth-of-type(2) {
      transition: .8s ease-in-out .2s;
   }
   nav ul li:nth-of-type(3) {
      transition: .8s ease-in-out .4s;
   }
   nav ul li:nth-of-type(4) {
      transition: .8s ease-in-out .6s;
   }
   nav.act ul li:nth-of-type(1),
   nav.act ul li:nth-of-type(2),
   nav.act ul li:nth-of-type(3),
   nav.act ul li:nth-of-type(4) {
      left: 0;
      opacity: 1;
   }
   nav ul li a {
      padding: 0 0 0 20%;
      position: static;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      pointer-events: none;
   }
   nav.act ul li a {
      pointer-events: all;
   }
   nav ul li a span {
      position: static;
   }
   nav ul li a span:nth-of-type(1) {
      width: 150px;
      text-align: left;
      transition: none;
      position: relative;
      animation: ani1 forwards;
   }
   @keyframes ani1 {
      0% {font-size: 1.8em;}
      100% {font-size: 1.8em;}
   }
   nav.act ul li a span:nth-of-type(1) {
      font-size: 1.8em;
   }
   nav ul li a span:nth-of-type(1)::before {
      content: '';
      width: 150px;
      height: 1px;
      background: #d7d7d7;
      position: absolute;
      top: 16px;
      left: -125%;
   }
   nav ul li a:hover span:nth-of-type(1) {
      transform: unset;
      opacity: 1;
   }   
   nav ul li a span:nth-of-type(2) {
      text-align: left;
      opacity: 0;
      transition: none;
      transform: unset;
      animation: ani2 forwards;
   }
   @keyframes ani2 {
      0% {width: calc(100% - 150px);opacity: 1;}
      100% {width: calc(100% - 150px);opacity: 1;}
   }
   nav.act ul li a span:nth-of-type(2) {
      width: calc(100% - 150px);
      opacity: 1;
   }
   nav ul li a:hover span:nth-of-type(2) {
      transform: unset;
   }
   .spNav {
      width: 40px;
      height: 40px;
      color: transparent!important;
      display: block;
      position: absolute;
      top: 41px;
      right: 5%;
      z-index: 1;
   }
   .spNav span {
      width: 40px;
      height: 1px;
      background: #909090;
      display: block;
      position: relative;
      top: 13px;
      transition: .3s ease-in-out;
   }
   .spNav span::after {
      content: '';
      width: 40px;
      height: 1px;
      background: #909090;
      display: block;
      position: absolute;
      top: 13px;
      transition: .3s ease-in-out;
   }
   .spNav.act span {
      transform: rotate(45deg);
      top: 18px;
   }
   .spNav.act span::after {
      transform: rotate(-90deg);
      top: 0px;
   }
   .sc {
      width: 90%;
   }
   .pc {display:none;}
   .sp {display:block;}
   /* トップページ */
   .scMv {
      padding: 0;
      background: none;
      justify-content: normal;
   }
   .scMv p:nth-of-type(1) {
      margin: 170px 0 45px 0;
      font-size: 2.4vw;
      text-align: center;
   }
   .scMv p:nth-of-type(2) {
      margin: 0 0 50px 0;
      font-size: 5.2vw;
      text-align: center;
      letter-spacing: .1em;
   }
   .scMv img {
      max-width: none;
      width: 70%;
      height: auto;
   }
   _:-ms-lang(x)::-ms-backdrop, .scMv img {
      height: 300px;
   }
   .scConcept .txtConcept img:nth-of-type(1) {
      width: 18%;
      margin: 0 30px 0 0;
   }
   .scConcept .txtConcept img:nth-of-type(3) {
      width: 16.5%;
      margin: 0 0 0 30px;
   }
   .scConcept .txtConcept .icon {
      padding: 40px 0;
   }
   .scConcept .txtConcept .txt img {
      width: 60%!important;
   }
   .scService .listService1 {
      display: block;
   }
   .scService .listService1 li {
      margin: 0 auto;
   }
   .scService .listService1 li:nth-of-type(2) {
      margin: 0 auto;
   }
   .scService .listService1 li:nth-of-type(2) img {
      margin: 0 0 60px 0;
      position: static;
   }
   .scService .listService2 {
      display: block;
   }
   .scService .listService2 li {
      width: 280px;
      margin: 0 auto 80px auto;
   }
   .scCompany {
      background: url(../img/bgCompany1.png) no-repeat top 10% left -35% / 387px,url(../img/bgCompany2.png) no-repeat bottom 10% right -60% / 484px,#fafafa;
   }
   .scCompany table {
      width: 100%;
   }
   .scCompany table th {
      width: 140px;
      padding: 0 30px;
   }
   .scCompany table td {
      width: calc(100% - 140px);
      padding: 0 30px;
   }
   .scContact h2 {
      margin: 0 0 50px 0;
   }   
}
 
/* mobile L */
@media screen and (max-width: 425px) {
   /* 共通 */
   h1 {
      width: 60px;
   }
   nav ul {
      margin: 130px 0 0 auto;
   }
   nav ul li a {
      padding: 0 0 0 22%;
   }
   nav ul li a span:nth-of-type(1)::before {
      left: -115%;
   }
   .spNav {
      top: 33px;
      right: 7.5%;
   }
   .sc {
      width: 85%;
   }
   .sc h2 {
      font-size: 3.1rem;
   }
   .ftScroll {
      bottom: 25px;
      right: 25px;
   }
   /* トップページ */
   .scMv p:nth-of-type(1) {
      margin: 160px 0 35px 0;
      font-size: 3.2vw;
      line-height: 2.2;
   }
   .scMv p:nth-of-type(2) {
      font-size: 7vw;
   }
   .scMv img {
      width: 90%;
   }
   .scConcept {
      padding: 90px 0 100px 0;
   }
   .scConcept h2 {
      margin: 0 0 70px 0;
   }
   .scConcept .txtConcept img:nth-of-type(1) {
      width: 32%;
   }
   .scConcept .txtConcept img:nth-of-type(3) {
      width: 29%;
   }
   .scConcept .txtConcept .txt img {
      width: 90%!important;
   }
   .scConcept .txtConcept .txt p {
      font-size: 3.2vw;
      line-height: 2.5;
   }
   .scService p {
      font-size: 3.2vw;
   }
   .scService .listService2 li {
      width: 100%;
   }
   .scService .listService1 li p {
      font-size: 3.2vw;
   }
   .scService .listService2 li p {
      font-size: 3.6vw;
   }
   .scCompany {
      background: url(../img/bgCompany1.png) no-repeat top 10% left -400% / 387px,url(../img/bgCompany2.png) no-repeat bottom 10% right 350% / 484px,#fafafa;
   }
   .scCompany p {
      font-size: 1.4rem;
   }
   .scCompany table {
      font-size: 2.6vw;
   }
   .scCompany table th {
      width: 70px;
      padding: 0 20px 0 0;
   }
   .scCompany table td {
      width: calc(100% - 70px);
      padding: 0 0 0 20px;
   }
   .scContact > p {
      font-size: 3.2vw;
   }
   .scContact form > p {
      font-size: 3.2vw;
   }
   .scContact table {
      font-size: 2.6vw;
   }
   .scContact table th {
      width: 110px;
   }
   .scContact table td {
      width: calc(100% - 110px);
   }
   .scContact label {
      font-size: 1.4rem;
   }
   .scContact .scPrivacy {
      font-size: 3vw;
   }
   .scContact .txtError3 {
      font-size: 1.3rem;
   }
   .scContact.thanks h2 {
      font-size: 5.4vw; 
   }
   .scContact.thanks p {
      font-size: 3.2vw;
   }
   .scContact.thanks .btnSend {
      font-size: 1.4rem;
   }
}

/* mobile M */
@media screen and (max-width: 375px) {
   /* 共通 */
}

/* mobile S */
@media screen and (max-width: 320px) {
   /* 共通 */
   nav ul li {
      margin: 0 0 45px 0;
   }
   nav ul li a {
      padding: 0 0 0 18%;
   }
   nav ul li a span:nth-of-type(1) {
      width: 140px;
   }
   nav ul li a span:nth-of-type(2) {
      width: calc(100% - 140px);
   }
   /* トップページ */
   .scMv p:nth-of-type(1) {
      margin: 140px 0 25px 0; 
   }
   .scMv p:nth-of-type(2) {
      margin: 0 0 30px 0;
   }
   .scConcept .txtConcept img:nth-of-type(1) {
      margin: 0 20px 0 0;
   }
   .scConcept .txtConcept img:nth-of-type(3) {
      margin: 0 0 0 20px;
   }
}