@charset "UTF-8";
html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #000000;
}

#loading {
  display: none;
  position: fixed; /* ← absolute → fixed に変更 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white; /* ← 必要に応じて色を変える（ブランドカラー等） */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading img {
  width: 90px;
}

article {
  position: relative;
  display: inline-block;
  background: #ffffff;
  z-index: 10;
  width: 100%;
  margin-top: -42px;
  margin-bottom: 400px;
  min-width: 985px;
}
section {
  width: 100%;
  background: #ffffff;
}

section > div {
  margin: 0 auto;
  width: 980px;
}
a {
  color: #045bab;
  text-decoration: none;
}

h2 {
  margin: 230px 0 0;
  text-align: center;
}

h2 b {
  margin: 230px 0 50px 0;
  text-align: center;
  font-size: 28px;
}

h4 {
  margin: 0 0 26px;
  padding: 0 0 0 18px;
  border-left: 6px solid #085eac;
  font-size: 26px;
  letter-spacing: 2px;
}

nav {
  position: relative;
  z-index: 100;
}

nav ul {
  position: relative;
}

nav ul li {
  float: left;
  list-style: none;
}

/* topnavi */
nav#topNavi {
  position: relative;
  margin: 0 auto;
  width: 980px;
}

nav#topNavi ul {
  margin: 0 auto;
  width: 980px;
}

nav#topNavi ul li {
  display: block;
  overflow: hidden;
  margin: 25px 30px 0 30px;
  width: 130px;
  background: url(../images/btnMenu.png) no-repeat;
  text-indent: 100%;
}

nav#topNavi ul li.facebook {
  margin: 25px 25px 0 45px;
}

nav#topNavi ul li:last-child {
  margin: 25px 0 0 15px;
}

nav#topNavi ul li.facebook {
  margin-top: 20px;
}

nav#topNavi ul li.twitter {
  margin-top: 22px;
}

nav#topNavi ul li a {
  display: block;
  font-family: "Roboto Condensed", Arial;
  font-weight: bold;
  width: 100%;
  color: #ffffff;
}

nav#topNavi ul li a:hover {
  color: #60a6d6;
}

nav#topNavi ul li.nav01 {
  width: 125px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav01:hover {
  background-position: -108px -251px;
}

nav#topNavi ul li.nav02 {
  width: 62px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav03 {
  width: 62px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav04 {
  width: 50px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav05 {
  width: 50px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav06 {
  width: 84px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.nav07 {
  width: 94px;
  height: 16px;
  background: none;
  text-indent: 0;
}

nav#topNavi ul li.facebook {
  width: 20px;
  height: 22px;
  background-position: -750px -22px;
}

nav#topNavi ul li.facebook:hover {
  background-position: -750px -88px;
}
nav#topNavi ul li.twitter {
  width: 22px;
  height: 19px;
  background-position: -800px -24px;
}
nav#topNavi ul li.twitter:hover {
  background-position: -800px -90px;
}

/* followingNavi */
nav#followNavi {
  position: fixed;
  top: 0;
  width: 100%;
  height: 67px;
  background: #085eac;
  text-align: center;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
  transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  min-width: 1200px;
}

nav#followNavi div#btnShow {
  display: none;
}

nav#followNavi.on {
  -webkit-transition: 0.15s;
  transition: 0.15s;
  transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

nav#followNavi ul {
  background: #085eac;
  right: 0;
  height: 67px;
}
nav#followNavi ul li {
  position: absolute;
  overflow: hidden;
  border: none;
  background: url(../images/btnMenu.png) no-repeat;
  text-indent: -9999px;
}

nav#followNavi ul li a {
  display: block;
  width: 100%;
  line-height: 65px;
  color: #fff;
  font-family: "Roboto", "Arial";
}

nav#followNavi ul li a:hover {
  color: #b7eeff;
}

nav#followNavi ul li#logo {
  top: 20px;
  left: 60px;
  background-position: -839px 0px;
  width: 168px;
  height: 26px;
  color: transparent;
}
nav#followNavi ul li#logo:hover {
  background-position: -839px -26px;
}
nav#followNavi ul li#logo a {
  width: 168px;
  height: 26px;
}

nav#followNavi ul li.nav01 {
  right: 770px;
  background-position: -238px 0px;
  width: 153px;
  height: 79px;
  background: none;
  text-indent: 0;
}
nav#followNavi ul li.nav01.current {
  background-position: -238px -158px;
}
nav#followNavi ul li.nav02 {
  right: 650px;
  background-position: 0px 0px;
  width: 110px;
  height: 79px;
  background: none;
  text-indent: 0;
}
nav#followNavi ul li.nav02.current {
  background-position: 0px -158px;
}
nav#followNavi ul li.nav03 {
  right: 530px;
  background-position: -618px 0px;
  width: 113px;
  height: 79px;
  background: none;
  text-indent: 0;
}
nav#followNavi ul li.nav03.current {
  background-position: -618px -158px;
}
nav#followNavi ul li.nav04 {
  right: 421px;
  background-position: -513px 0px;
  width: 105px;
  height: 79px;
  background: none;
  text-indent: 0;
}
nav#followNavi ul li.nav04.current {
  background-position: -513px -158px;
}

nav#followNavi ul li.nav06 {
  right: 301px;
  background-position: -391px 0px;
  width: 122px;
  height: 79px;
  background: none;
  text-indent: 0;
}
nav#followNavi ul li.nav06.current {
  background-position: -391px -158px;
}
nav#followNavi ul li.nav07 {
  right: 175px;
  background-position: -110px 0px;
  width: 128px;
  height: 79px;
  background: none;
  text-indent: 0;
}


nav#followNavi ul li.nav07.current {
  background-position: -110px -158px;
}

nav#followNavi ul li.facebook {
  right: 120px;
  background-position: -731px 0px;
  width: 54px;
  height: 66px;
}
nav#followNavi ul li.facebook:hover {
  background-position: -731px -66px;
}

nav#followNavi ul#snsBox {
  position: absolute;
  top: 0;
  min-width: 100px;
  background: #085eac;
}
nav#followNavi ul li.twitter {
  right: 60px;
  background-position: -785px 0px;
  width: 54px;
  height: 66px;
}
nav#followNavi ul li.twitter:hover {
  background-position: -785px -66px;
}

div#samurai {
  position: relative;
  width: 100%;
  height: 900px;
  background: url(../images/bgTop.jpg) no-repeat;
  background-color: #085eac;
  background-position: center;
  background-size: contain;
  z-index: 100;
}

div#samurai h1 {
  display: block;
  text-align: center;
  margin: 0 auto;
  background: url(../images/logo.svg) no-repeat center center;
  background-size: 95%;
  width: 100%;
  height: 150%;
  text-indent: -9999px;
}

div#samurai p#btnScroll {
  position: absolute;
  bottom: 30px;
  text-align: center;
  width: 100%;
}

div#samurai p#btnScroll a {
  background: url(../images/btnEtc.png) no-repeat;
  display: block;
  background-position: -704px 0px;
  width: 69px;
  height: 94px;
  margin: 20px auto 0;
  text-align: center;
  text-indent: -9999px;
  overflow: hidden;
}

div#samurai p#btnScroll a:hover {
  background-position: -704px -94px;
}

div#philosophy {
  z-index: 2;
  margin: 0 auto;
  padding: 100px 0 100px 0;
  /* 	min-height: 634px; */
  width: 1000px;
}

div#philosophy h2 {
  margin: 0 0 35px;
  text-align: left;
  font-size: 40px;
  font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "Yu Mincho";
  color: #085eac;
}

div#philosophy p {
  margin: 0 0 30px;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 2em;
}

.forMobile {
  display: none;
}

div#philosophy div#enText {
  margin: 50px 0 0 0;
}

div#philosophy div#enText p {
  color: #707070;
}

div#companyTitle {
  position: relative;
  top: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 544px;
  background: url(../images/bgCompany.webp) no-repeat fixed;
  background-position: center center;
  background-size: cover;
}

div#companyContent {
  z-index: 2;
  margin: 100px 0;
  /* 	min-height: 640px; */
  background: white;
}

div#companyContent dl {
  display: block;
  float: left;
  width: 360px;
}

div#companyContent dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 10px 0 10px 0.5em;
  width: 8em;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 2em;
}

div#companyContent dd {
  margin: 0;
  padding: 10px 0.5em 10px 9em;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 2em;
}

span.explain {
  margin: 0 0 0 5px;
}
span.caution {
  display: block;
  font-size: 12px;
}

span.caution:before {
  content: "※";
}

span.inLink {
  display: block;
  margin: 0 0 0 6px;
  font-size: 14px;
}
span.inLink:before {
  content: ">";
  color: #045bab;
}

div#companyContent div#topMovie {
  margin: 0 0 0 411px;
}

div#companyContent div#topMovie h4 {
  font-size: 16px;
  margin: 10px 0;
}

div#companyContent div#topMovie p {
  font-size: 14px;
  line-height: 2em;
  letter-spacing: 1px;
}

div#news {
  width: 100%;
  height: 1100px;
  background: url(../images/bgCompany.png) no-repeat;
  background-position: center top;
  background-size: cover;
  text-align: center;
  display: flex;
  flex-direction: column; /* 縦方向に要素を並べる */
  justify-content: flex-start; /* 要素を上に配置 */
  align-items: center; /* 要素を中央に配置 */
  position: relative;
  overflow: hidden; /* 必要に応じて追加 */
}

div#news::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

div#news * {
  position: relative;
  z-index: 2;
}

div#news h2.lead-ja {
  margin: 70px auto 0;
  width: 460px;
  font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "Yu Mincho",
    "cursive";
  font-size: 40px;
  font-weight: bold;
  color: #085eac;
  letter-spacing: 4px;
}
div#news h2.lead-en {
  font-size: 15px;
  margin: 20px;
  font-family: "Roboto Condensed", Arial;
  color: #085eac;
}

div#newsItemList {
  margin-top: 50px;
  width: 860px;
}

.oval-button {
  text-decoration: none;
  text-align: left;
}

div.newsItem {
  margin-bottom: 20px;
  padding: 15px 30px;
  background-color: white;
  border-radius: 20px;
  transition: background-color 0.3s;
  display: flex;
}

div.newsItem:hover {
  background-color: #bbdfff;
}

div.newsItem p {
  color: #000;
}

div.newsDate {
  width: 150px;
  display: flex;
  align-items: center;
}
div.newsContent {
  width: 650px;
  display: flex;
  align-items: center;
}

/* スマホの画面サイズに合わせてスタイルを調整 */
@media (max-width: 640px) {
  div#philosophy h2 {
    font-size: 50px;
    margin: 0 0 30px;
  }
  div#philosophy p {
    font-size: 50px;
    margin: 0 0 35px;
  }
  div#news {
    height: 900px;
  }
  div#news h2.lead-ja {
    margin: 50px auto 0;
  }
  div#news h2.lead-en {
    margin: 10px;
  }
  div#news p {
    margin: 0;
    padding: 0;
  }
  div#newsItemList {
    width: 90%;
    margin-top: 30px;
  }
  div.newsItem {
    display: block;
  }
  .oval-button {
    width: 100%;
  }
  div.newsDate {
    display: block;
  }
  div.newsContent {
    display: block;
    width: 100%;
    padding-left: 10px;
  }
  .forMobile {
    display: inline;
  }
}

div#worksTitle {
  position: relative;
  top: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 544px;
  background: url(../images/bgWorksMyCryptoFootballer.png) no-repeat fixed
    #ffffff;
  background-position: center center;
  background-size: cover;
}

div#worksContents {
  margin: 100px auto;
  width: 900px;
}

#works h3 {
  margin-bottom: 65px;
}

#works div.gamePict {
  margin: 0 auto 26px;
}

#works p {
  margin: 0px auto 18px;
  font-size: 14px;
}
#works dl {
  margin: 0 0 0 -10px;
}
#works dt {
  line-height: 2em;
  float: left;
  margin: 0 10px 0 0;
  font-size: 14px;
}
#works dt:before {
  content: "［";
}
#works dt:after {
  content: "］";
}

#works dd {
  font-size: 14px;
  line-height: 2em;
  margin: 0;
  font-size: 14px;
}

#works p.copyright {
  margin: 12px 0 80px 0;
  color: #1e1e1e;
  font-size: 13px;
}

div#teamTitle {
  position: relative;
  top: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 544px;
  background: url(../images/bgTop.jpg) no-repeat fixed;
  background-position: center center;
  background-size: contain;
}

div#teamContents {
  position: relative;
  margin: 0 auto 0;
  min-height: 488px;
  width: 980px;
}

div#teamContents div.staffBox {
  position: absolute;
  display: block;
  float: left;
  overflow: hidden;
  margin: 0;
  width: 196px;
  height: 488px;
  border: none;
}

#no1 {
  left: -98px;
}
#no2 {
  left: 98px;
}
#no3 {
  left: 294px;
}
#no4 {
  left: 490px;
}
#no5 {
  left: 686px;
}
#no6 {
  left: 882px;
}

div#teamContents div.staffBox div.teamText {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  width: 166px;
  padding: 15px;
}

div#teamContents div.staffBox div.teamText p {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 20px;
  text-align: left;
  margin: 0 0 10px;
}

div#teamContents div.staffBox p.teamPhoto {
  position: absolute;
  opacity: 1;
  left: 0;
  z-index: 1;
  height: 489px;
  transition: opacity 0.4s linear 0s;
  border: 1px solid #ffffff;
}

div#teamContents div.staffBox p.teamPhoto:hover {
  opacity: 0;
}

div#teamContents div.staffBox p.teamPhotoHOVER {
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  height: 489px;
  border: 1px solid #ffffff;
}

div#recruitTitle {
  margin: 150px auto 100px;
}

div#recruitTitle h2 {
  margin: 0 0 25px;
  text-align: center;
}

div#recruitTitle p {
  text-align: center;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 68px;
}

div#recruitContents {
  margin: 80px auto 0;
}

div#recruitContents dl {
  margin: 0 0 80px;
}
div#recruitContents dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 10px 0 5px 0;
  width: 7em;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5em;
}

div#recruitContents dd {
  margin: 0;
  padding: 10px 0.5em 5px 8em;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1.5em;
}

div#recruitContents p {
  font-size: 14px;
  letter-spacing: 2px;
}

div#recruitContents div#bunnerImg {
  width: 600px;
  text-align: center;
  margin: 80px auto 0;
}

div#recruitContents div#entryButton {
  position: relative;
  width: 352px;
  text-align: center;
  margin: 80px auto 0;
  border: 3px solid #085eac;
  margin: 40px auto 0;
}

div#entryButton a {
  display: block;
  width: 100%;
  height: 48px;
  color: #085eac;
  text-align: center;
  font-size: 20px;
  padding: 26px 0 0 0;
}

div#entryButton:hover {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 3px solid #085eac;
  background: #085eac;
}

div#entryButton a:hover {
  color: #ffffff;
}

section#contact {
  margin: 100px 0 0 0;
  padding: 100px 0;
  /* 	height: 470px; */
  background: url(../images/bgSamurai2.png) no-repeat center right #085eac;
}

section#contact h2 {
  margin-top: 0;
}

section#contact p {
  margin: 20px 0 0 0;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  line-height: 2rem;
  letter-spacing: 2px;
}

section#contact div#contactButton {
  position: relative;
  margin: 60px auto 0;
  width: 352px;
  border: 3px solid #ffffff;
  background: #085eac;
}

section#contact div#contactButton a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 48px;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  padding: 26px 0 0 0;
}

section#contact div#contactButton:hover {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 3px solid #ffffff;
  background: #ffffff;
}

section#contact div#contactButton a:hover {
  color: #085eac;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  div#entryButton a {
    height: 51px;
    padding: 22px 0 0 0;
  }
  section#contact div#contactButton a {
    height: 51px;
    padding: 22px 0 0 0;
  }
}

div#gotop {
  position: fixed;
  right: 40px;
  width: 69px;
  bottom: 70px;
  z-index: 100;
  display: none;
}

div#gotop a {
  display: block;
  background: url(../images/btnTop.png) no-repeat;
  width: 100%;
  height: 94px;
  overflow: hidden;
}

div#gotop a:hover {
  background: url(../images/btnTopHover.png) no-repeat;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 1;
  width: 100%;
  background: #000000;
  padding-top: 400px;
}

div#movie {
  position: relative;
  height: 438px;
  background: url(../images/bgMovie.png) no-repeat fixed;
  background-position: center bottom;
  bottom: 0;
}

p#play {
  position: absolute;
  top: 163px;
  left: 50%;
  display: block;
  overflow: hidden;
  margin: 0 0 0 -35px;
  width: 69px;
  height: 69px;
  background: url(../images/btnEtc.png) no-repeat;
  background-position: -842px 0px;
  text-align: center;
  cursor: pointer;
}

p#play:hover {
  background-position: -842px -69px;
}

p#play a {
  display: block;
  width: 69px;
  height: 69px;
  text-indent: -9999px;
}

footer p {
  color: #ffffff;
  text-align: center;
  font-size: 11px;
  margin: 5px 0 0 0;
  bottom: 0;
}

div#footerBox {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #000000;
  padding: 10px 0 0 0;
  height: 30px;
}

div#footerBox p {
  width: 400px;
  text-align: center;
}

footer span#privacy {
  margin: 0 10px 0 0;
  line-height: 1.2rem;
  border-right: 1px solid #ffffff;
  padding: 0 10px 0 0;
}

footer #privacy a {
  color: #ffffff;
}

/* privacy.html */

body.privacy article {
  width: 100%;
  margin: 0 0 100px 0;
}

body.privacy article section {
  width: 800px;
  margin: 0 auto;
}
body.privacy article section h1 {
  font-size: 28px;
  margin: 30px 0 50px 0;
}
body.privacy article section h2 {
  text-align: left;
  font-size: 20px;
  margin: 30px 0 10px;
}

body.privacy article section ul {
  margin: 10px 0 10px 20px;
}

body.privacy article section p#form {
  margin: 30px 0 0 0;
}

body.privacy footer {
  position: relative;
  height: 30px;
  padding: 10px 0 0;
}

div.forPcText {
  width: 100%;
}

/* add 20160307 */

#company h3 {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

#company h4 {
  font-size: 26px;
  letter-spacing: 5px;
  border-left: 6px solid #085eac;
  line-height: 1.1;
  padding: 3px 0 0 20px;
  margin-bottom: 25px;
}

div#serviceContents {
}

body.sp div#serviceContents {
  width: 640px;
}

body.sp div#serviceContents h3 {
  padding: 0 0 0 20px;
}

div#serviceContents div#serviceTop {
  padding: 0px 0 10px 0;
  text-align: center;
}

div.serviceBox {
  padding: 20px 0 0;
}

#serviceContents h3 {
  font-size: 25px;
  line-height: 2;
  letter-spacing: 2px;
  color: #095fab;
  font-weight: 100;
  border-bottom: solid;
  border-color: #e9e9e9;
  border-width: 1px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

#serviceContents h2 {
  margin-block-start: 0;
  margin: 40px auto 0;
  font-size: 25px;
  line-height: 2;
  color: #2f2d2d;
  letter-spacing: 4px;
  border-bottom: solid;
  border-color: #095fab;
  border-width: 3px;
  margin-right: auto;
  margin-left: auto;
  width: 410px;
}

div.serviceTop img.serviceTop {
  text-align: center;
  margin: 80px auto 0;
  width: 400px;
}

#serviceContents p {
  font-size: 15px;
  text-align: left;
  line-height: 1.8;
  color: #2f2d2d;
  margin-bottom: 30px;
  letter-spacing: 3px;
  font-weight: 50;
}

div.developmentBox {
  width: 100%;
}

div.development {
  width: 980px;
  margin: 0 auto;
  padding: 30px 20px 10px 10px;
}

div.developmentBox p.developmentBox {
  font-size: 18px !important;
  color: #2f2d2d;
  letter-spacing: 2px;
}

div.managementBox {
  width: 100%;
}

div.management {
  width: 980px;
  margin: 0 auto;
  padding: 30px 20px 30px 10px;
}

div.managementBox p.managementBox {
  font-size: 18px !important;
  color: #2f2d2d;
  letter-spacing: 2px;
}

#company .managementBox ul li,
#company .developmentBox ul li {
  box-sizing: border-box;
  display: block;
  width: 442px;
  height: 155px;
  list-style: none;
  float: left;
  background: #f8f8f8;
  margin-right: 18px;
  margin-bottom: 18px;
  position: relative;
  padding: 30px 25px 0 145px;
  /* box-shadow */
  box-shadow: rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
  -webkit-box-shadow: rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
  -moz-box-shadow: rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
  border-bottom: 1px solid #d3d3d3;
}
#company .managementBox ul li:nth-child(even),
#company .developmentBox ul li:nth-child(even) {
  margin-right: 0;
}

div.sliderBox {
  text-align: center;
  width: 900px;
  /* 追加 */
  margin-top: 120px;
  margin-bottom: 120px;
}

/*開発スタジオ*/
div#studios {
  width: 100%;
  height: 500px;
  background-color: white; /* 背景色を白に変更 */
  text-align: center;
  display: flex;
  flex-direction: column; /* 縦方向に要素を並べる */
  justify-content: flex-start; /* 要素を上に配置 */
  align-items: center; /* 要素を中央に配置 */
  position: relative;
  overflow: hidden; /* 必要に応じて追加 */
}

div#studios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

div#studios * {
  position: relative;
  z-index: 2;
}

div#studios h2.lead-ja {
  margin: 70px auto 0;
  width: 460px;
  font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "Yu Mincho",
    "cursive";
  font-size: 40px;
  font-weight: bold;
  color: #085eac;
  letter-spacing: 4px;
}
div#studios h2.lead-en {
  font-size: 15px;
  margin: 20px;
  font-family: "Roboto Condensed", Arial;
  color: #085eac;
}

/* 開発スタジオのアイテムリスト */
div#studios .studioBox ul li {
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center; /* 垂直方向の中央配置 */
  box-sizing: border-box;
  width: 442px;
  height: 155px;
  list-style: none;
  background: #f8f8f8;
  margin-right: 18px;
  margin-top: 18px;
  margin-bottom: 18px;
  position: relative;
  padding: 15px; /* クリック範囲を確保 */
  box-shadow: rgba(211, 211, 211, 0.3) 0px 0px 0px 1px;
  border-bottom: 1px solid #d3d3d3;
}

/* `a` タグをボックス全体に適用 */
.studioBox ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* アイコンのスタイル */
.studio-icon {
  height: auto;
  margin-right: 20px; /* テキストとの間隔を確保 */
}

/* テキスト部分 */
.studio-text {
  text-align: left;
  flex: 1; /* 残りのスペースをすべて使う */
}

/* マウスオーバー時のエフェクト */
.studioBox ul li:hover {
  transform: scale(1.025);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* h5 のみホバー時に青くする */
.studioBox ul li h5 {
  color: #000;
}

.studioBox ul li:hover h5 {
  color: #085eac;
}

/* 説明テキストのスタイル */
.studioBox ul li p {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 100;
  text-align: left;
  color: #000;
  margin-top: 5px;
}

/* リンクの基本スタイル */
div#studios .studioBox ul li h5 a {
  text-decoration: none; /* 下線を消す */
  color: black; /* 通常時は黒 */
  /* font-weight: bold; */
  transition: color 0.3s ease; /* 色変化をスムーズに */
}

/* h5 の文字色を通常時は黒に */
div#studios .studioBox ul li h5 {
  color: #000; /* 通常時の色（黒など）を指定 */
}

/* マウスオーバー時のみ h5 を青に */
div#studios .studioBox ul li:hover h5 {
  color: #085eac; /* マウスオーバー時の青色 */
}

/* 説明テキスト（p）の色は変更しない */
div#studios .studioBox ul li p {
  color: #000; /* 通常の説明文の色 */
}

/* スマホの画面サイズに合わせてスタイルを調整 */
@media (max-width: 640px) {
  div#philosophy h2 {
    font-size: 50px;
    margin: 0 0 30px;
  }
  div#philosophy p {
    font-size: 50px;
    margin: 0 0 35px;
  }
  div#news {
    height: 1300px;
  }
  div#news h2.lead-ja {
    margin: 50px auto 0;
  }
  div#news h2.lead-en {
    margin: 10px;
  }
  div#news p {
    margin: 0;
    padding: 0;
  }
  div#newsItemList {
    width: 90%;
    margin-top: 30px;
  }
  div.newsItem {
    display: block;
  }
  .oval-button {
    width: 100%;
  }
  div.newsDate {
    display: block;
  }
  div.newsContent {
    display: block;
    width: 100%;
    padding-left: 10px;
  }
  .forMobile {
    display: inline;
  }
}

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
  content: url(../images/iconSliderNext.png);
}
.slick-prev:before {
  display: block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*左右の矢印の位置を変える*/
.slick-next {
  right: -77px;
  z-index: 99;
  width: 34px;
  height: 34px;
}
.slick-prev {
  left: -77px;
  z-index: 100;
  width: 34px;
  height: 34px;
}

/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
  color: #085eac;
}

/*スライド画像の横幅可変*/
img {
  max-width: 100%;
  height: auto;
}

#company h5:before {
  position: absolute;
  top: 25px;
  left: 20px;
  vertical-align: middle;
}

#company h5 {
  margin-bottom: 9px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 100;
}

#company ul li p {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 100;
}

#company .developmentBox ul li:nth-child(1) h5:before {
  content: url(../images/iconAboutDevelopment01.png);
}
#company .developmentBox ul li:nth-child(2) h5:before {
  content: url(../images/iconAboutDevelopment02.png);
}
#company .developmentBox ul li:nth-child(3) h5:before {
  content: url(../images/iconAboutDevelopment03.png);
}
#company .developmentBox ul li:nth-child(4) h5:before {
  content: url(../images/iconAboutDevelopment04.png);
}
#company .managementBox ul li:nth-child(1) h5:before {
  content: url(../images/iconAboutManagement01.png);
}
#company .managementBox ul li:nth-child(2) h5:before {
  content: url(../images/iconAboutManagement02.png);
}
#company .managementBox ul li:nth-child(3) h5:before {
  content: url(../images/iconAboutManagement03.png);
}
#company .managementBox ul li:nth-child(4) h5:before {
  content: url(../images/iconAboutManagement04.png);
}

#company .companyInformation {
  position: relative;
  width: 900px;
  height: 420px;
  padding-top: 100px;
  margin-bottom: 62px;
}
#company .companyInformation h4 {
  border: none;
  font-size: 14px;
  margin: 0 0 0px;
  padding: 0;
  float: left;
  line-height: 3;
  vertical-align: baseline;
  width: 140px;
}
#company .companyInformation h4 span {
  display: block;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: -7px 0 0 -9px;
}

#company .companyInformation p {
  font-size: 14px;
  margin: 0 0 5px 140px;
  line-height: 3;
}

#company .companyInformation .informationBox01 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 450px;
}
#company .companyInformation .informationBox02 {
  position: absolute;
  top: 200px;
  right: 0px;
  border-left: 1px solid #f0f0f0;
  padding-left: 40px;
  width: 410px;
}

#works div.privateBrandBox {
  width: 100%;
  background: #fbfbfb;
}

#works div#privateBrand {
  padding-top: 100px;
  padding-bottom: 40px;
  width: 900px;
  margin: 0 auto;
}

small {
  font-size: 12px;
}

#recruitContents h3 {
  font-size: 26px;
  letter-spacing: 5px;
  border-left: 6px solid #085eac;
  line-height: 1.1;
  padding: 3px 0 0 20px;
  margin-bottom: 40px;
}

body .sp {
  display: none;
}
body .pc {
  display: inline;
}

/* スマホコンテンツ */

body.sp {
  -webkit-text-size-adjust: 100%;
  max-height: 100%;
}
body.sp img {
  max-width: 600px;
}

body.sp div.forPcText br {
  display: none;
}
body.sp div.forPcText br:nth-of-type(1) {
  display: block;
}
body.sp p,
body.sp h1,
body.sp h2,
body.sp h3,
body.sp h4,
body.sp h5,
body.sp ul li,
body.sp dt,
body.sp dd {
  max-height: 100%;
  line-height: 1.5 !important;
}

body.sp div#philosophy p,
body.sp,
body.sp div#serviceContents p,
div#serviceContents h2,
body.sp div#companyContent dl dt,
body.sp div#companyContent dl dd,
body.sp #works dl dt,
body.sp #works dl dd,
body.sp #works p,
body.sp div#recruitContents dl dt,
body.sp div#recruitContents dd,
body.sp div#recruitContents p,
body.sp section#contact p,
body.sp div#companyContent div#topMovie h4,
body.sp div#companyContent div#topMovie p,
body.sp span,
body.sp section div#teamContents div.teamText p {
  font-size: 1.4rem !important;
  max-height: 100%;
}

body.sp div {
  background-size: cover !important;
  background-attachment: scroll !important;
}

body.sp p#btnScroll {
  display: none;
}

body.sp nav#followNavi {
  display: none;
}

body.sp nav#topNavi {
  position: fixed;
  margin: 0 auto;
  width: 640px;
  /* 	height: 640px; */
  background: none;
  background: #085eac;
}

body.sp nav#topNavi div#btnShow {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  width: 80px;
  height: 70px;
  cursor: pointer;
  z-index: 1000;
}

body.sp nav#topNavi div#btnShow span.bar {
  display: block;
  height: 4px;
  width: 60px;
  margin: 10px 0 0 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: #085eac;
}

body.sp nav#topNavi.visible div#btnShow span.bar {
  background: #ffffff;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

body.sp nav#topNavi ul {
  display: none;
  margin: 95px auto 120px;
  height: auto;
  background: #085eac;
  list-style: none;
  text-align: center;
  width: 640px;
}

body.sp nav#topNavi ul li {
  float: none;
  overflow: visible;
  margin: 0 0 65px;
  width: 100%;
  background: none;
  text-indent: 0;
  font-size: 2rem;
  letter-spacing: 5px;
  color: #ffffff;
}
body.sp nav#topNavi ul li.current {
  color: #e60012;
  text-indent: 0;
}

body.sp nav#topNavi ul a {
  padding: 10px;
  width: 100%;
  color: #ffffff;
  text-decoration: none;
}

body.sp nav#topNavi ul li.current a {
  color: #e60012;
}

body.sp article {
  min-width: 640px;
  margin: 0;
}

body.sp section > div {
  width: 600px;
  margin: 0 auto;
}

body.sp div#samurai {
  background: url(../images/bgTop.jpg) no-repeat center top;
  background-size: 100% auto !important;
  height: 300px !important;
}

body.sp div#samurai h1 {
  width:  70%;
  height: 30%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
}

body.sp div#philosophyBox {
  background: none #ffffff;
  padding: 0;
}

body.sp div#philosophy {
  width: 600px;
  padding: 10px 0 0 0;
}

body.sp div#serviceContent {
  background: none #ffffff;
  padding: 0;
}

body.sp div#companyContent {
  margin-top: 50px;
}

body.sp div#companyContent dl {
  float: none;
  display: block;
  width: 600px;
}

body.sp div#recruitTitle {
  margin: 80px auto 30px;
  letter-spacing: 2px;
}

body.sp div#recruitTitle br {
  display: none;
}

body.sp div#companyContent div#topMovie {
  margin: 50px 0 50px;
}

body.sp div#worksContents {
  width: 600px;
}

body.sp section div#teamContents {
  width: 600px;
}

body.sp section div#teamContents div.staffBox {
  position: relative;
  width: 250px;
  min-height: 620px;
  margin: 0 25px 20px;
}

body.sp section div#teamContents div.staffBox#no1,
body.sp section div#teamContents div.staffBox#no2,
body.sp section div#teamContents div.staffBox#no3,
body.sp section div#teamContents div.staffBox#no4,
body.sp section div#teamContents div.staffBox#no5,
body.sp section div#teamContents div.staffBox#no6,
body.sp section div#teamContents div.staffBox#no1 {
  left: auto;
}

body.sp section div#teamContents div.staffBox img {
  width: 100%;
}

body.sp div#teamContents div.staffBox div.teamText {
  width: 220px;
  margin: 0 auto;
  line-height: 27px;
}

body.sp div#teamContents div.staffBox p.teamPhoto {
  width: 250px;
}

body.sp div#teamContents div.staffBox p.teamPhotoHOVER {
  width: 250px;
}

body.sp section#contact {
  background-position: 190px 0;
}

body.sp footer {
  position: relative;
  padding-top: 0;
}

body.sp div#footerBox {
  height: 60px;
}

body.sp footer p {
  margin: 20px 0 0 0;
  font-size: 18px;
}

body.sp div#footerBox p {
  width: 100%;
  height: 20px;
  font-size: 15px;
}

body.sp div#footerBox p span#copy {
  font-size: 15px;
  vertical-align: top;
}

body.sp section#contact div#contactButton a,
body.sp div#recruitContents div#entryButton a {
  font-size: 1.6rem;
  height: 54px;
  padding: 20px 0 0;
}

body.sp div#gotop {
  display: none !important;
}

body.sp div#companyTitle,
body.sp div#worksTitle,
body.sp div#teamTitle {
  /* ensure the image scales to fit inside without cropping */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;

  /* give it a fixed aspect-ratio–friendly height */
  height: 400px ;   /* or whatever height works on your design */
}

/* privacyスマホ */

body.privacy.sp article section {
  width: 600px;
}

body.privacy.sp article section p#form {
  margin: 50px 0;
  font-size: 1.4rem;
}

body.privacy.sp footer p {
  margin: 0;
}

body.sp .mfp-iframe-holder .mfp-close {
  top: -60px;
}
body.sp .mfp-image-holder .mfp-close,
body.sp .mfp-iframe-holder .mfp-close {
  font-size: 100px;
}

/* add 20160307 */
body.sp h4 {
  margin-bottom: 36px;
}
body.sp div.serviceBox {
  padding-top: 92px;
}
body.sp #company div.companyInformation {
  height: auto;
  width: 600px;
}
body.sp #company div.informationBox01,
body.sp #company div.informationBox02 {
  position: static;
  width: auto;
  border: none;
}

body.sp #company .managementBox {
  width: 600px;
}

body.sp #company .developmentBox {
  width: 600px;
}

body.sp #company .managementBox ul li,
body.sp #company div.developmentBox ul li {
  width: 600px;
  height: 200px;
  padding-top: 18px;
  padding-left: 150px;
}

body.sp #company .developmentBox ul li {
  width: 600px;
  height: 200px;
  padding-top: 18px;
  padding-left: 150px;
}

body.sp #company ul li p {
  font-size: 1.4rem;
  line-height: 1.2;
}
body.sp #company ul li h5 {
  font-size: 1.6rem;
}

body.sp #company ul li h5:before {
  top: 50px;
}

body.sp #company div.informationBox01,
body.sp #company div.informationBox02 {
  padding-left: 0px;
}
body.sp #company div.informationBox02 {
  margin-bottom: 80px;
}
body.sp #company div.informationBox01 h4,
body.sp #company div.informationBox02 h4,
body.sp #company div.informationBox01 p,
body.sp #company div.informationBox02 p {
  font-size: 1.4rem;
  max-height: 100%;
}
body.sp div.management,
body.sp div.development {
  width: 600px;
}
body.sp #company .managementBox ul li,
body.sp #company .developmentBox ul li {
  float: none;
}

body.sp #company div.informationBox01 h4,
body.sp #company div.informationBox02 h4 {
  width: 8em;
}
body.sp #company .companyInformation {
  margin-bottom: 40px;
}
body.sp #company .companyInformation p {
  margin-left: 8em;
  padding-bottom: 10px;
}

body.sp small {
  display: block;
}

body.sp span.time {
  font-size: 1rem;
  line-height: 1;
  display: block;
  letter-spacing: 1px;
}

body.sp .sliderBox {
  margin-bottom: 140px;
  width: 600px;
}

body.sp #works div#privateBrand {
  width: 600px;
}

body.sp .slick-next {
  right: 0px;
  visibility: hidden;
}
body.sp .slick-prev {
  left: 0;
  visibility: hidden;
}

body.sp .sp {
  display: inline;
}
body.sp .pc {
  display: none;
}

body.sp div#teamContents div.staffBox div.teamText p {
  line-height: 25px !important;
  font-size: 1.3rem;
}

body.sp .slick-dots li button:before {
  font-size: 10px;
  max-height: 100%;
}

body.sp #works div.gamePict {
  margin-bottom: 36px;
}
body.sp #works p {
  margin-bottom: 28px;
}
body.sp #works p.copyright {
  margin-bottom: 100px;
}