/*================================================================================

media query mixin

================================================================================*/
/*    google font on web
--------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
/*    google font on server
--------------------------------------------------------------------------------*/
/*    icomoon
--------------------------------------------------------------------------------*/
/*    custom
--------------------------------------------------------------------------------*/
@-webkit-keyframes MoveLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }
@keyframes MoveLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }
@-webkit-keyframes MoveLeft2 { from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } }
@keyframes MoveLeft2 { from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } }
.top .mainArea { position: relative; margin-bottom: 80px; }
.top .mainArea .logo { position: absolute; width: 220px; height: 220px; top: -140px; left: 50%; margin-left: -110px; }
@media screen and (max-width: 768px) { .top .mainArea .logo { width: 150px; height: 150px; top: -75px; margin-left: -75px; } }
.top .mainArea .bg-Khaki { margin-top: 250px; padding: 120px 0 50px; background: #9b9d72; }
@media screen and (max-width: 768px) { .top .mainArea .bg-Khaki { margin-top: 180px; padding: 100px 0 40px; } }
.top .mainArea .c-text { margin-top: -25px; line-height: 1.25; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100vw; margin-inline: calc(50% - 50vw); }
@media screen and (max-width: 768px) { .top .mainArea .c-text { margin-top: -15px; } }
.top .mainArea .c-text__item { display: block; color: #9b9d72; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #fff; letter-spacing: 2px; -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; font-size: 100px; font-family: Tahoma, Verdana, sans-serif; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@media screen and (max-width: 768px) { .top .mainArea .c-text__item { -webkit-text-stroke-width: 2px; font-size: 65px; } }
.top .mainArea .c-text__item:nth-child(odd) { -webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear; animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear; }
.top .mainArea .c-text__item:nth-child(even) { -webkit-animation: MoveLeft2 var(--tick-duration, 24s) infinite linear; animation: MoveLeft2 var(--tick-duration, 24s) infinite linear; }
.top .mainArea span { -webkit-text-fill-color: #fff; }
.top .mainArea .blank { padding: 10px; }
.top .mainArea .c-text--reverse:not(.no-tick) .c-text__item:nth-child(odd) { -webkit-animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear reverse; animation: MoveLeft var(--tick-duration, 18s) var(--tick-delay, -9s) infinite linear reverse; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.top .mainArea .c-text--reverse:not(.no-tick) .c-text__item:nth-child(odd) { -webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse; animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.top .mainArea .c-text--reverse:not(.no-tick) .c-text__item:nth-child(odd) { -webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse; animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear reverse; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.top .mainArea .c-text--reverse:not(.no-tick) .c-text__item:nth-child(even) { -webkit-animation: MoveLeft2 var(--tick-duration, 18s) infinite linear reverse; animation: MoveLeft2 var(--tick-duration, 18s) infinite linear reverse; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.top .mainArea .sneakers { margin-top: 20px; }
.top .mainArea .sneakers .img { width: 120px; margin: 0 auto; }
@media screen and (max-width: 768px) { .top .mainArea .sneakers .img { width: 90px; } }
.top .mainArea .sneakers .img:nth-child(1) { margin-left: 42%; }
@media screen and (max-width: 768px) { .top .mainArea .sneakers .img:nth-child(1) { margin-left: 34%; } }
.top .mainArea .sneakers .img:nth-child(2) { margin-left: 50%; }
@media screen and (max-width: 768px) { .top .mainArea .sneakers .img:nth-child(2) { margin-left: 45%; } }
@media screen and (max-width: 768px) { .top .top-work .inner { padding: 0; } }
.top .top-work .work-list { overflow: hidden; }
@media screen and (max-width: 768px) { .top .top-work .work-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }
.top .top-work .work-list .item { float: left; }
.top .top-work .work-list .txt { color: #fff; font-weight: bold; text-align: center; }
.top .top-work .work-list .item1, .top .top-work .work-list .item2 { width: 545px; height: 545px; }
.top .top-work .work-list .item1 .txt, .top .top-work .work-list .item2 .txt { font-size: 60px; line-height: 1.2; padding-top: 180px; }
.top .top-work .work-list .item1 { background: url("../img/work-img01.jpg"); background-size: cover; margin-right: 10px; }
.top .top-work .work-list .item2 { background: url("../img/work-img02.jpg"); background-size: cover; }
.top .top-work .work-list .item3, .top .top-work .work-list .item4, .top .top-work .work-list .item5 { width: 360px; height: 360px; margin-top: 10px; }
.top .top-work .work-list .item3 .txt, .top .top-work .work-list .item4 .txt, .top .top-work .work-list .item5 .txt { font-size: 40px; line-height: 1.2; padding-top: 130px; }
.top .top-work .work-list .item3 { background: url("../img/work-img03.jpg"); background-size: cover; }
.top .top-work .work-list .item4 { background: url("../img/work-img04.jpg"); background-size: cover; margin-left: 10px; margin-right: 10px; }
@media screen and (max-width: 768px) { .top .top-work .work-list .item4 { margin-right: 0; } }
.top .top-work .work-list .item5 { background: url("../img/work-img05.jpg"); background-size: cover; }
@media screen and (max-width: 768px) { .top .top-work .work-list .item1, .top .top-work .work-list .item2, .top .top-work .work-list .item3, .top .top-work .work-list .item4, .top .top-work .work-list .item5 { width: calc(50% - 5px); height: auto; min-height: 190px; margin-top: 0; margin-bottom: 10px; }
  .top .top-work .work-list .item1 .txt, .top .top-work .work-list .item2 .txt, .top .top-work .work-list .item3 .txt, .top .top-work .work-list .item4 .txt, .top .top-work .work-list .item5 .txt { font-size: 22px; padding-top: 70px; } }
.top .top-approach { background: #9b9d72; padding: 80px 0 120px; }
@media screen and (max-width: 768px) { .top .top-approach { padding: 50px 0 60px; } }
.top .top-approach .c-title .-en { color: #fff; }
.top .top-approach .approach-list { border-top: 3px solid #fff; }
.top .top-approach .approach-list .item { border-bottom: 3px solid #fff; }
.top .top-approach .approach-list .item .txt { color: #fff; font-size: 70px; font-weight: bold; line-height: 1; padding: 40px 30px; }
@media screen and (max-width: 768px) { .top .top-approach .approach-list .item .txt { font-size: 30px; padding: 20px 0; } }
.top .top-approach .approach-list .item .txt .num { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; letter-spacing: 3px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-right: 15px; }
@media screen and (max-width: 768px) { .top .top-approach .approach-list .item .txt .num { -webkit-text-stroke-width: 1.5px; letter-spacing: 1px; padding-right: 10px; } }
.top .top-company { padding-bottom: 120px; }
@media screen and (max-width: 768px) { .top .top-company { padding-bottom: 100px; } }
.top .top-company .infoBox { border-top: 3px solid #000; }
.top .top-company .infoBox .item { display: table; width: 100%; font-size: 24px; font-weight: bold; border-bottom: 3px solid #000; padding: 10px 10px 10px 20px; }
@media screen and (max-width: 768px) { .top .top-company .infoBox .item { font-size: 22px; } }
.top .top-company .infoBox .item > * { display: table-cell; vertical-align: top; text-align: left; }
@media screen and (max-width: 768px) { .top .top-company .infoBox .item > * { display: block; } }
.top .top-company .infoBox dt { width: 180px; }
@media screen and (max-width: 768px) { .top .top-company .infoBox dt { width: auto; } }

/*# sourceMappingURL=top.css.map */