@charset "utf-8";

  /*========= レイアウトのためのCSS ===============*/
html, body {
  font-family:"Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color: rgb(0, 0, 0);
  font-size: 100%;
  line-height: 1.8;
  letter-spacing: 1px;
}

.coplog_m {
  font-family:"CorporateLogoMedium","BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

@font-face {
  font-family: "CorporateLogoMedium";
  src: url("../fonts/clm.woff2") format('woff2'),
       url("../fonts/clm.woff")  format('woff');
       font-weight: medium;
       font-display: swap;
}

.coplog_b {
  font-family:"CorporateLogoBold","BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

@font-face {
  font-family: "CorporateLogoBold";
  src: url("../fonts/clb.woff2") format('woff2'),
       url("../fonts/clb.woff")  format('woff');
       font-weight: bold;
       font-display: swap;
}
/*
.hero {
  background: url(../images/main.jpg) no-repeat center center;
  height: 1000px;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
*/

#main {
  position: relative;
  top: -2em;
}

.hero {
  background-color: #fff100;
}

.header {
  position: sticky;
  z-index: 1;
}

p, li {
  font-size: clamp(1.1rem, 0.7873rem + 0.82vw,1.4rem);
}

p {
  margin-bottom: 1em;
}

img {
  max-width: 100%;
  height: auto;
}

h2 {
  font-size: clamp(2.2rem, 0.4417rem + 4.08vw,3.5rem);
}

h3 {
  font-size: clamp(1.8rem, 0.8532rem + 1.53vw,3rem);
}

h4 {
  font-size: clamp(1.4rem, 0.7282rem + 1.53vw,2rem);
}

/*h2.ttl1 {
  border-bottom: 4px solid #E62E8B;
}
h2.ttl2 {
  border-bottom: 4px solid #DE6641;
}
h2.ttl3 {
  border-bottom: 4px solid #000;
}
h2.ttl4 {
  border-bottom: 4px solid #fff;
}
*/

.ttl1 {
  color: #E62E8B;
}

.ttl2 {
  color: #DE6641;
}

.ttl3 {
  color:#000;
}

.ttl4 {
  color: #fff;
}

#container {
  width: 100%;
  overflow: hidden;
  background-color: #fff100;
}

.inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 4em 1em;}

#problem {
  margin: 1em;
}
 
#problem .inner {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 6px 6px 12px #bab000,
             -6px -6px 12px #ffff00;
}

.toplayer-img1 {
  width: auto !important;
  position: absolute;
  top: 15%;
  left: 10%;
}

.toplayer-img2 {
  width: 55% !important;
  position: absolute;
  top: 45%;
  right: 5%;
}

h2 {
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1em;
}

h3.description {
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
}

h4 {
  clear: both;
  margin-top: 1em;
  font-weight: 600;
}

.bigtxt {
  font-size: 3rem;
}

.midtxt {
  font-size: clamp(1.6rem, 0.6633rem + 1.78vw,2rem);
  text-align: center;
}

.teen {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 3em 2em;
}

.teen div {
  max-width: 80%;
}

.teen img {
  padding: 0 2px;
}

#intro {
  margin: 1em;
}

.sns_top {
  font-size: 2.6rem;
  padding: 1em 0;
}

.sns {
  text-align: center;
}

.sns ul {
  display: flex;
  justify-content: center;
}

.sns li {
  margin: 5px 10px;
}

.banner {
  z-index: 2;
}

.banner img {
  filter: drop-shadow(5px 5px 5px #8f8f8f);
}

.intro_content {
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 22px;
  text-align: center;
  font-weight: 900;
}

.intro_content img {
  max-width: 100%;
  width: 250px;
}

.chara, .comic {
  border: 2px solid #E60012;
  border-radius: 20px;
  background: #fff;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: 6px 6px 12px #bab000,
             -6px -6px 12px #ffff00;
}

.bg1 {
  border-left: 5px solid #000;
  padding-left: 3em;
}

.bg1 > h2 {
  text-align: left;
  font-size: 4rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 3.6rem;
}

.subtxt {
  font-size: 1rem;
}

#intro p {
  text-align: left;
  font-size: 1.27rem;
}

/*#problem {
  background-color: #fff;
}

#improvement {
  background-color: #fff100;
}
*/

#local {
  background-color: #6FB92C;
}

.local_ttl {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.local_ttl h3, .local_ttl h2 {
  margin: 10px 20px 30px;
}


#works {
  background: rgb(255,233,0);
  background: linear-gradient(0deg, rgba(255,233,0,1) 0%, rgba(245,170,0,1) 100%);
}

.works_ttl {
  background-color: #E60012;
}

.worksttl_blk {
  max-width: 80%;
  display: table;
  margin: auto;
}

.worksttl_blk h2 {
  font-size: 36px;
  margin-top: -30px;
}

.kaikaku_blk {
  max-width: 200px;
  position: relative;
  top: -40px;
}


.shin3k {
  display: flex;
  margin: 3em 0 5em;
}

.shin3k div {
  margin: 5px;
}
.shin3k img {
  box-shadow: 6px 6px 12px #baaa00, -6px -6px 12px #ffff00;
  border-radius: 16px;
}

.works_ttl_h4 {
  text-align: center;
  margin-bottom: 1em;
  font-weight: 600;
}

.syokunin {
  display: flex;
  flex-direction: row-reverse;
  margin: 5px;
}

.syokunin div {
  margin: 5px 15px;
}

.syokunin figure {
  width:250px;
}

figcaption {
  font-size: 0.9rem;
}

.shigotolist {
  background-color: antiquewhite;
  padding: 1em 0 1em 3em;
  margin: 1em;
  border-radius: 30px;
  list-style-type: disc;
  box-shadow:  6px 6px 12px #518720,
             -6px -6px 12px #8deb38;
}
/*
.shigotolist li {
  font-size: 1.2rem;
}
*/
#sns {
  text-align: center;
  /*background-color: #fff100;*/
}

.iine-button {
  width: 100%;
}

.iine-button a {
  /*display: block;
  filter: drop-shadow(5px 5px 5px #808080);
  border-radius: 20px;
  max-width: 400px;*/
  border: 1px solid #E60012;
  background-color: #fff;
  padding: 15px 30px;
  font-size: 30px;
  font-weight: 900;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iine-button a span {
  color:#E60012;
}

.iine-button img {
  width: 200px;
}


.iine-button2 a {
  /*display: block;
  filter: drop-shadow(5px 5px 5px #808080);*/
  border: 1px solid #E60012;
  border-radius: 20px;
  background-color: #fff;
  margin: 1em auto;
  padding: 15px 30px;
  font-size: 30px;
  font-weight: 900;
  width: 100%;
  max-width: 500px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iine-button2 a span {
  color:#E60012;
}

.iine-button2 img {
  width: 200px;
}


.sns-button {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}

.iine-active, .sns-active {
  opacity: 1;
  visibility: visible;
}

.inner_sns {
  padding: 0;
}

#careerup {
  background:#fff;
}

.career_ttl_main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
}

.career_ttl_main img {
  padding: 0 2px;
}

.career_ttl_main h3 img {
  position: relative;
  top: -5px;
}

.career_ttl {
  text-align: center;
  margin-bottom: 2em;
}

.career_ttl h3 {
  color: #E60012;
  font-weight: 600;
}

.career_ttl h4 {
  margin-top: 0;
  font-weight: 600;
}

.midashitxt {
  font-size: 3.7rem;
  font-weight: 900;
  color: darkorange;
}

.tate {
  writing-mode: vertical-rl;
  font-size: clamp(1rem, 0.8677rem + 0.51vw,1.25rem);
  position: relative;
  top: 6px;
}

.shikaku {
  display: inline-block;
  background-color: #fff100;
  width: 100px;
  color: #000;
  font-size: clamp(1rem, 0.9352rem + 0.25vw,1.125rem);
  line-height: 1.2;
  position: relative;
  top: 2px;
  padding: 4px;
  margin: 0 5px;
}

.img-zu img {
  box-shadow:  6px 6px 12px #bababa,
             -6px -6px 12px #ffffff;
  border-radius: 15px;
}

#contact {
  background:#fff100;
}

#footer {
  background:#fff100;
  text-align: center;
  padding: 2em;
  color: #000;
}

/*========= 上部固定させるためのCSS ===============*/
/*F-menu*/
/* フローティングバナーのラップ要素 */
#fixed_left_banner {
  position: fixed;
  top: 50%;
  left: 30px;
  z-index: 1;
}

#fixed_right_banner {
  position: fixed;
  top: 50%;
  right: 30px;
  z-index: 1;
}
  

/* 画像の共通設定 */
#fixed_left_banner > * {
/* 横幅 */
width: 45px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_left_banner > * ~ * { margin-top: 10px; }

/* リンク要素 */
#fixed_left_banner > a {
/* ブロック要素に変更 */
display: block;

/* 透過変更をスムーズにする(任意) */
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}

/* マウスオーバー時の表現 */
#fixed_left_banner > a:hover {
/* 20%透過させる */
opacity: .8;
}

#fixed_left_banner p {
  font-size: 28px;
  font-weight: 900;
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
}

.sticky li {
  margin-bottom: 0.5em;
}

.sticky li img {
  width: 40px;
  height: auto;
}

/* コンテンツに被らないようにするメディアクエリ */
/*@media (max-width: 1155px) {
  #fixed_right_banner {
    display: none;
  }
}*/

/* media */
.hero img {
  width: 100%;
}

.alignright img {
  float:right;
  margin: 10px;
}

.alignleft img {
  float: left;
  margin: 10px;
}

.alignnone img {
  float: none;
  margin: 2em 0;
}

figure.figimg {
  display: table;
}

.figimg figcaption {
  display: table-caption;
  caption-side: bottom;
}

/*スライダー*/
#slider {
  width: 100%;
  height: 80vh;/*スライダー全体の縦幅*/
}

/*SNS*/
.sns_button {
  text-align: center;
  margin: 40px auto;
}
.sns_button img {
  margin: 0 20px;
}

/*回転ローリングソバット*/
.rotate-img {
  animation: rotate_anime 1s linear 1;
}

@keyframes rotate_anime {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/*上へ戻る*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  border-radius: 5px;
  width: 80px;
  height: 80px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  transition:all 0.3s;
}

#page-top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 80px;
  color: #3fefee;
  opacity: 0.7;
}

#page-top a:hover{
  background: #3fefee;
  border-radius: 50%;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}


/*キャラ紹介*/
.bg_pink {
  background-color: lightpink;
}

.sota, .pyon, .maru {
  background-color: #fff;
  padding: 1em;
  margin: 2em auto;
  display: flex;
  width: 100%;
  border-radius: 2em;
}

.sota img, .pyon img, .maru img {
  max-width: 300px;
}

.sota h3, .pyon h3, .maru h3 {
  font-size: 2rem;
  font-weight: 900;
}

.sota p, .pyon p, .maru p {
  font-size: 1.2rem;
}

.about {
  border: 2px solid #000;
  background-color: #fff100;
  border-radius: 1em;
  text-align: center;
  padding: 5px 10px;
  margin: 1em;
  max-width: 350px;
  font-weight: 600;
}

/*4コママンガ*/

.manga {
	text-align: center;
	margin-bottom: 20px;
}

.mangamodoru{
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	
}

.pdf_dl {
  border-radius: 50px;
  border: 3px solid #E60012;
  padding: 10px 15px;
  margin: 10px auto;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  background-color: #fff;
}

.c-btn.reverse:hover {
  background: #F9C270;
  color: #fff;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.pdf_dl img {
  margin: 5px 10px;
}

/*-------------------------
動くマーカー
-------------------------*/
/*アニメーション前*/
/* ブルー */
.marker-b {
  padding: 0 5px;
  background-image: linear-gradient(#9eceff, #9eceff);
  background-size: 0 30%;/*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 3s;
  display: inline;
  font-weight: bold;
}

/*アニメーション後*/
.marker-b.active {
  background-size: 100% 30%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}

/* ピンク */
.marker-p {
  padding: 0 5px;
  background-image: linear-gradient(#F4B4D0, #F4B4D0);
  background-size: 0 30%;/*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 4s;
  display: inline;
  font-weight: bold;
}

/*アニメーション後*/
.marker-p.active {
  background-size: 100% 30%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}

/* グリーン */
.marker-g {
  padding: 0 5px;
  background-image: linear-gradient(#C1DB81, #C1DB81);
  background-size: 0 30%;/*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: 5s;
  display: inline;
  font-weight: bold;
}

/*アニメーション後*/
.marker-g.active {
  background-size: 100% 30%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}

@media screen and (max-width:1367px) {
  .toplayer-img1 {
    width: 83% !important;
  }
}

@media screen and (max-width:1025px) {
  .toplayer-img1 {
    width: 83% !important;
  }
}

@media screen and (max-width:821px) {
  .toplayer-img1 {
    width: 85% !important;
  }
  .toplayer-img2 {
    width: 45% !important;
  }
}
@media screen and (max-width:769px) {
  .sns_button {
    margin: 3vw auto 0 auto;
    }
  .sns_button img {
    width: 12vw;
    margin: 0 3vw;
  }
  #main {
    top: 0em;
  }
}

@media screen and (max-width:415px) {
  
  .iine-button a {
    font-size: 24px;
  }
  .syokunin {
    flex-wrap: wrap;
    justify-content: center;
  }

  .syokunin figure {
    width: 100%;
  }
 /* #page-top {
    display: none;
  }

  .shigotolist li {
    font-size: 1.1rem;
  }
*/
  .text-box h2 {
    font-size: 2rem;
  }
  .bg1 {
    border: none;
    padding-left: 0;
  }
  .bg1 h2 {
    font-size: 3rem;
  }
  #intro p {
    font-size: 1.1rem;
  }

  #g-navi {
    display: none;
  }
  .yubi {
    width: 150px;
    float: right;
  }
  .midashitxt {
    font-size: 3rem;
  }
  
  .career_ttl_main {
    flex-wrap: wrap;
  }
  
  .career_ttl_main h3 img {
    width: 50%;
  }
  .worksttl_blk h2 {
    font-size: 24px;
  }
  .shikaku {
    width: 80px;
  }

  .shin3k {
    flex-wrap: wrap;
  }
  .intro_content {
    flex-wrap: wrap;
  }

  .local_ttl {
    flex-wrap: wrap;
  }
  .local_ttl h3, .local_ttl h2 {
    margin: 0 10px 10px;
  }
  #fixed_right_banner {
    top: 65%;
  }
  .sota, .pyon, .maru {
    flex-wrap: wrap;
  }

  .toplayer-img1 {
    width: 83% !important;
  }
}