@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

html,
body {
  width: 100%;
}

.container {
  width: 100%;
  max-width: 600px;
  min-width: 320px;
  background-color: #ffffff;
  margin: 0 auto;
  scrollbar-width: none;
}

.section {
  width: 100%;
}

/*スクロールバー非表示（Chrome・Safari）*/
.container::-webkit-scrollbar {
  display: none;
}

/*ヒーローセクション*/

.hero,
.splide,
.splide__track,
.splide__list,
.splide__slide {
  width: 100%;
}

.splide__slide img {
  width: 100%;
}

.splide__arrow {
  background: #96f0c3 !important;
}

.is-active {
  background: #96f0c3 !important;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-card {
  width: 90%;
  height: 13rem;
  margin-top: 2rem;
  border: solid 4px #5259cf;
  border-radius: 10px;
  background-color: #e8eeff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.hero-card-logo {
  width: 40%;
  max-width: 170px;
}

h1 {
  font-size: 1.5rem;
  padding: 0.5rem;
  background-color: #5259cf;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  width: 75%;
  border-radius: 5px;
}

.hero-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #269931;
}

/*new セクション*/

.new {
  margin-top: 2rem;
  width: 100%;
  color: #595758;
}

.wrap-headline {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 0.8rem;
}

.line-new {
  width: 30%;
  height: 4px;
  background-color: #00faba;
}

.wrap-twitter {
  padding: 0 2rem 0 2%;
}

/*アピールカード セクション*/
.appeal-cards {
  width: 100%;
  margin-top: 1.5rem;
}

.wrap-appeal-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.appeal-card {
  width: 80%;
  height: 10rem;
  margin-top: 1.5rem;
  background-color: #f5f5ac;
  color: #595758;
  border: solid #6ee084 4px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.appeal-text-large {
  font-size: 1.8rem;
  font-weight: 700;
}

.character-welcome {
  position: absolute;
  right: 0.5rem;
  top: 4.5rem;
  width: 3.5rem;
}

.appeal-text-medium {
  font-size: 1.2rem;
  font-weight: 700;
}

.appeal-text-small {
  font-size: 0.8rem;
  font-weight: 700;
}

.appeal-text-tanslate-left {
  transform: translateX(-4rem);
}

.appeal-text-tanslate-right {
  transform: translate(4rem, 1rem);
}

.character-singer {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 3rem;
}

/* フィーチャーセクション */

.feature {
  width: 100%;
  background-color: #f5f5ac;
  border-radius: 0 0 5px 5px;
  margin-top: 2rem;
  padding-bottom: 1rem;
}

.feature-title {
  width: 100%;
  height: 3rem;
  background-color: #3dba9a;
  color: #ffffff;
  text-align: center;
  line-height: 45px;
  border-radius: 5px 5px 0 0;
}

.wrap-features {
  width: 100%;
  color: #595758;
}

.feature-with-image {
  position: relative;
}

.feature-subtitle {
  text-align: left;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.4rem 1rem 0.2rem 1rem;
}

.feature-line {
  width: 90%;
  margin-left: 3%;
  background-color: #6375db;
  height: 4px;
}

.feature-text {
  padding: 0.2rem 2rem 0.8rem 1rem;
}

.character-confused {
  position: absolute;
  right: 0.5rem;
  top: -2rem;
  width: 3rem;
}

/*group セクション*/

.group {
  margin-top: 2rem;
  width: 100%;
  color: #595758;
}

.line-group {
  width: 25%;
  height: 4px;
  background-color: #00faba;
}

/* 部門紹介:eスポーツ */

.esports-headline {
  display: flex;
  color: #ffffff;
  align-items: center;
  justify-content: space-between;
}

.esports-banner {
  padding: 0.2rem 1rem 0.2rem 1rem;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-left: 1rem;
  min-width: 135px;
}

.esports-banner::before {
  transform: skewX(-15deg); /*平行四辺形の角度*/
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #55e085;
  border: solid 2px #8de0aa;
  border-radius: 2px;
}

.character-headset {
  width: 3rem;
  margin-left: 1rem;
}

.ibc-logo {
  width: 30%;
  max-width: 8rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

.group-text {
  font-size: 1rem;
  font-weight: 500;
  color: #595758;
  padding: 0.5rem 1rem;
}

.esports-image .cg-illustration-image {
  width: 100%;
}

/* 部門紹介:cgイラスト、動画編集 */

.cg-illustration-headline {
  display: flex;
  color: #ffffff;
  align-items: center;
  margin-top: 4rem;
}

.cg-illustration-banner {
  padding: 0.2rem 1rem 0.2rem 1rem;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-left: 1rem;
  min-width: 135px;
}

.cg-illustration-banner::before {
  transform: skewX(-15deg); /*平行四辺形の角度*/
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #55e085;
  border: solid 2px #8de0aa;
  border-radius: 2px;
}

.character-touched {
  width: 3rem;
  margin-left: 1rem;
}

/* 部門紹介:ハンドメイド */

.handmade-headline {
  display: flex;
  color: #ffffff;
  align-items: center;
  margin-top: 4rem;
}

.handmade-banner {
  padding: 0.2rem 1rem 0.2rem 1rem;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-left: 1rem;
  min-width: 135px;
}

.handmade-banner::before {
  transform: skewX(-15deg); /*平行四辺形の角度*/
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #55e085;
  border: solid 2px #8de0aa;
  border-radius: 2px;
}

/* 部門紹介:軽作業 */

.light-work-headline {
  display: flex;
  color: #ffffff;
  align-items: center;
  margin-top: 4rem;
}

.light-work-banner {
  padding: 0.2rem 1rem 0.2rem 1rem;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-left: 1rem;
  min-width: 135px;
}

.light-work-banner::before {
  transform: skewX(-15deg); /*平行四辺形の角度*/
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #55e085;
  border: solid 2px #8de0aa;
  border-radius: 2px;
}

.character-wave {
  width: 3rem;
  margin-left: 1rem;
}

.white-space-for-desktop {
  display: none;
}

/* アクセスセクション */

.access {
  margin-top: 4rem;
  width: 100%;
  color: #595758;
}

.line-access {
  width: 25%;
  height: 4px;
  background-color: #00faba;
}

.access-text {
  padding: 0.2rem 2rem 0.8rem 1rem;
}

.google-map {
  width: 100%;
  height: 20rem;
  padding: 0 0.5rem;
}

/* お問い合わせセクション */

.contact {
  width: 100%;
  margin-top: 3rem;
  color: #595758;
}

.wrap-contact-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slant-left {
  border-left: solid 2px #595758;
  height: 1.2rem;
  transform: skewX(30deg);
  margin-right: 0.5rem;
}

.slant-right {
  border-left: solid 2px #595758;
  height: 1.2rem;
  transform: skewX(-30deg);
  margin-left: 0.5rem;
}

.contact-banner {
  width: 90%;
  height: 4rem;
  background-color: #4b6ed9;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem auto 2rem auto;
  border-radius: 2rem;
}

.contact-banner:hover{
  background-color: #6688ec;
}

.contact-banner:active{
  box-shadow: 0 0 5px rgb(16, 68, 211);
}

.mail-icon {
  margin: 0.2rem 0 0 0.2rem;
  width: 2.2rem;
}

.contact-link {
  text-decoration: none;
}

/* 事業所情報 */

footer {
  border-bottom: #ffffff solid 1px;
}

.site-type {
  color: #595758;
  font-weight: 500;
  margin: 1.2rem 0 0.3rem 1rem;
}

.wrap-address {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.address-item {
  width: 20%;
  padding-left: 1rem;
}

.address-content {
  width: 80%;
}

.wrap-wage {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.wage-item {
  width: 20%;
  padding-left: 1rem;
}

.wage-offer {
  font-weight: 700;
  font-size: 1.3rem;
}

.wrap-business-hour {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.business-hour-item {
  width: 20%;
  padding-left: 1rem;
}

.business-hour-content {
  width: 80%;
  padding-right: 1rem;
}

.wrap-tel-number {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.tel-number-item {
  width: 20%;
  padding-left: 1rem;
}

.tel-number-content {
  width: 80%;
  color: #5259cf;
  font-weight: 700;
  font-size: 2rem;
}

.wrap-fax {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.fax-item {
  width: 20%;
  padding-left: 1rem;
}

.fax-content {
  width: 80%;
}

.wrap-email {
  display: flex;
  align-items: center;
  color: #595758;
  font-weight: 400;
  font-size: 0.8rem;
  height: 2.5rem;
}

.email-item {
  width: 20%;
  padding-left: 1rem;
}

.email-content {
  width: 80%;
}

.company {
  background-color: #269931;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 4rem;
  border-radius: 2px;
}

.company p {
  padding: 0.6rem;
}

/* 下に固定するナビゲーション */

nav {
  display: grid;
  place-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 2px;
  z-index: 1;
}

.wrap-icons {
  display: flex;
  height: 3rem;
  background-color: #84d799;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.nav-icon {
  height: 2rem;
}

.nav-icon-mail {
  height: 1.6rem;
}