@charset "utf-8";
/*!
 * BIKODO — 現行サイト（旧デザイン）のスタイル
 *
 * 公開中の bikodo.com の css/bace.css をそのまま取り込んだものです。
 * TOP・制作実績・会社概要・お知らせは、このデザインのまま WordPress 化しています。
 * 「デジタル系の仕事」ページだけが新デザイン（.bkd- / bkd-common.css）です。
 *
 * 【元ファイルからの変更点】
 * 共通ヘッダー・フッターを全ページ（デジタルページを含む）で使うため、
 * このファイルは全ページで読み込みます。そのままだと素の要素セレクタが
 * デジタルページまで巻き込むので、以下だけスコープを限定しました。
 * 宣言の中身は一切変えていません。
 *
 *   body            → body:where(.bkd-legacy)
 *   *               → :where(body.bkd-legacy, #header, .sp-header, .footer, .sp-footer) *
 *   nav ul （4件）  → :where(#header, .sp-header) nav ul
 *   h1 / th / td / ul / a → :where(body.bkd-legacy) を前置
 *
 * ★ 限定用のセレクタを必ず :where() で包んでいるのは、詳細度を上げないためです。
 *   :where() の中は詳細度が0として扱われるので、元の「* や h1 は一番弱い」という
 *   前提が崩れません。ここを素の body.bkd-legacy にしてしまうと、
 *   たとえばリセットの padding:0 が .scroll_wrap の padding-top:20vw に勝ってしまい、
 *   TOPのサービス欄などのレイアウトが崩れます（実際に一度崩れました）。
 *   セレクタを足すときも同じルールを守ってください。
 *
 * body.bkd-legacy は inc/legacy-support.php が旧デザインのページにだけ付与します。
 */

body:where(.bkd-legacy){
  /* animation: bgchange 25s ease infinite;変化の時間を変更したい場合は20sの部分を好きな時間に変更 */
  overflow: hidden;
}

@keyframes bgchange{
      0%   {background:#5AD2D2;}/*変化させたい色*/
      5.9%  {background:#8BE6C6;}/*変化させたい色*/
      11.8%  {background:#99F8AF;}/*変化させたい色*/
      17.7%  {background:#D8FF60;}/*変化させたい色*/
      23.6%  {background:#FFFF00;}/*変化させたい色*/
      29.5%  {background:#FFE100;}/*変化させたい色*/
      35.4% {background:#FFB400;}/*変化させたい色*/
      41.3%   {background:#FF9359;}/*変化させたい色*/
      47.2%  {background:#FF808C;}/*変化させたい色*/
      53.1%  {background:#FF5AA0;}/*変化させたい色*/
      59%  {background:#E333A0;}/*変化させたい色*/
      64.9%  {background:#A950B5;}/*変化させたい色*/
      70.8% {background:#8E56E3;}/*変化させたい色*/
      76.7%  {background:#5772E3;}/*変化させたい色*/
      82.6%  {background:#4992E3;}/*変化させたい色*/
      88.5% {background:#42BAD4;}/*変化させたい色*/
      100%   {background:#5AD2D2;}/*変化させたい色*/
 }

 :where(body.bkd-legacy, #header, .sp-header, .footer, .sp-footer) *{
  margin:0;
  padding:0;
  }

 html{
  overflow: auto;
 }


 /* レスポンシブ切り替え */

.pc-content{
	display:block;
}

.sp-content{
	display:none;
}

@media (max-width: 768px) {
	
.pc-content{
	display:none;
}

.sp-content{
	display:block;
  overflow-x: hidden;
}
	
}

 /* ヘッダー */
 #header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding-top: 1vw; */
  /* padding-left: 8vw; */
  background-color: #FFF;
  width: 80vw;
  margin-left: 10vw;
  border-radius: 0 0 2vw 2vw;
  height: 5vw;
  position: relative;
  z-index: 1;
}

.logo img {
  width: 7vw; /* ロゴの適切なサイズに調整してください */
  padding-left: 2vw;
}

:where(#header, .sp-header) nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1vw;
}

:where(#header, .sp-header) nav ul li {
  margin-right: 2vw;
}

:where(#header, .sp-header) nav ul li:last-child {
  margin-right: 2vw;
}

:where(#header, .sp-header) nav ul li a {
  text-decoration: none;
  color: #333;
}

.head-line {
  position: relative; /*アンダーラインの位置を決めるための基準 */
  }
  
.head-line::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
  }

.head-line:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  }

#head-info{
  background-color: #000;
  color: #fff;
  border-radius: 2vw;
  padding: 0.5vw 1.5vw;
}

#head-info:hover{
  background-color: orange;
}

/* ファーストビュー */

#first-view-img{
  position: absolute;
  width: 100vw;
  z-index: 0;
  left: -17vw;
  top: -47.2vw;
  overflow: hidden;
}

#first-view-top{
  position: relative;
  width: 21vw;
  padding-bottom: 1vw;
}

.top-chara{
  position: absolute;
}

#top-chara-1{
  top: -2vw;
  left: -10vw;
  width: 10vw;
}

#top-chara-2{
  top: -4vw;
  left: 27vw;
  width: 20vw;
}

#top-chara-3{
  top: 2vw;
  width: 8vw;
  left: 70vw;
}

#top-chara-4{
  top: -9vw;
  left: 0vw;
  width: 10vw;
}

#top-chara-5{
  top: -7.5vw;
  left: 63.5vw;
  width: 10vw;
}

:where(body.bkd-legacy) h1{
  font-size: 1.9vw;
}

#first-view-txt {
  margin-left: 16vw;
  margin-top: 6vw;
  margin-bottom: 10vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  position: relative;
  z-index: 1;
}

#first-view-txt-white{
  background-color: #fff;
  line-height: 3.5vw;
}

#first-view-txt-bold{
  font-size: 6vw;
  letter-spacing: 0.25vw;
  line-height: 5vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}

#first-view-p{
  font-size: 1.0vw;
  color: #fff;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1vw;
  line-height: 1.75vw;
  padding-top: 1vw;
}

/* サービス */

#service-back{
  position: absolute;
  z-index: 0;
  width: 100vw;
  top: 0vw;
}

#service-top{
  position: relative;
}

#service-top2{
  top: 14vw;
}

#service-top3{
  top: 8vw;
}

#service-top4{
  left: 8.1vw;
}

.wide-bar{
  border: 0.75px solid #000;;
  width: 7vw;
  position: relative;
  top: 5vw;
}

.item-title{
  writing-mode: vertical-rl;
  position: absolute;
  left: 7.4vw;
  top: 4vw;
  font-size: 2.0vw;
  letter-spacing: 0.25vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  z-index: 1;
}

.item-sub-title{
  writing-mode: vertical-rl;
  position: absolute;
  top: 15.5vw;
  left: 8.6vw;
  font-size: 1.0vw;
  height: 10vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 1;
}

#service-txt-area{
  position: relative;
  top: 4vw;
  left: 17vw;
}

#service-main-txt{
  position: absolute;
  left: 33vw;/*親要素の17vwから引いた数値*/
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 2.5vw;
  top: 9vw;
  /* text-decoration: underline;
  text-underline-offset: 0.5vw; */
  font-family:source-han-sans-japanese, sans-serif;
  font-weight: 900;
  font-style: normal;
  z-index: 1;
}

.service-line{
  position: absolute;
  width: 15vw;
  top: 12.5vw;
  left: 12vw;
}

#service-line-2{
  left: 34.5vw;
}

#service-sub-txt-1{
  position: absolute;
  left: -0.5vw;
}

#service-sub-txt-2{
  position: absolute;
  left: 10.3vw;
}

#service-main-txt-2{
  position: absolute;
  font-size: 1vw;
  top: 4vw;
  left: 36vw;
}

/* JS動作 */

.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
  z-index: 1;
  position: relative;
}

.scroll_left {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.scroll_left.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
  z-index: 1;
  position: relative;
}

/* 横スクロールCSS */

.contents_inner {
  width: 75%;
  margin-left: 17.5vw;
}

.scroll_container {
  width: 100%;
  height: 50vw;
  position: relative;
  overflow: hidden;
}
.scroll_wrap {
  display: flex;
  column-gap: 0px;
  width: 100%;       /* 親要素いっぱいの幅にする */
  position: static;    /* absoluteを解除 */
  padding-top: 20vw;
}
.scroll_box {
  /* width: 50vw; */
  /* background-color: aqua; */
  padding-left: 0;
  flex: 1; /* ★重要：残りのスペースを均等に分け合う */
  min-width: 0; /* flexアイテムの縮小に関するバグを防ぐおまじない */
  /* display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto); */
  /* margin-left: 6vw; */
}

/* .scroll-oya{
  margin-left: 10vw;
  margin-right: 3vw;
  width: 15vw;
} */

.scroll-number {
  font-size: 1.5vw;
  letter-spacing: 0.15vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  padding-bottom:1vw;
}

.scroll-title {
  font-size: 3.5vw;
  letter-spacing: 0.4vw;
  position: relative;
  top: -2vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.scroll-txt {
  font-size: 1.5vw;
  position: relative;
  top: -2vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 800;
  font-style: normal;
  /* line-height: 1.75vw; */
}

.scroll-img {
  grid-row: span 3;
  width: 75%;
}

.scroll-bar{
  border-top: 1px solid #000;
  width: 10vw;
  position: relative;
  top: 8.5vw;
  /* margin-right: -0vw; */
  /* margin-left: 15vw; */
}

#scroll-spacer{
  /* width: 100vw;
  margin-right: 20vw; */
}

.caption-pic{
  width: 20vw;
}

.back_base{
  position: relative;
}
.white_back{
  height: 1000px;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* exampleパート*/

#creative-back{
  position: absolute;
  width: 100vw;
  z-index: 0;
  background-color: #fff;
}

#example-top{
  /* background-color: #F5F5F5; */
  /* height: 67.7vw; */
  position: relative;
  padding-bottom: 7vw;
}

#example-title-en {
  text-align: center;
  font-size: 1vw;
  padding-top: 5vw;
  margin-bottom: 1vw;
}

#example-title {
  text-align: center;
  font-size: 2.0vw;
  letter-spacing: 0.25vw;
  margin-bottom: 3vw;
  padding-top: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  position: relative;
  z-index: 3;
  /* top: -85vw; */
  left: 50%;
  transform: translateX(-50%);
}

#example-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.example-button {
  position: relative;
  /* top: -46vw; */
  left: 42vw;
  font-size: 1.0vw;
  width: 16vw;
  padding: 0.4vw 0vw;
  border-radius: 2vw;
  border: 1px solid;
  text-align: center;
  color: #000;
  margin-top: 3vw;
  margin-bottom: 2vw;
  /* background: linear-gradient(90deg, rgba(49, 136, 255, 1) 0%, rgba(255, 72, 186, 1) 100%); */
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 4;
}

.example-button:hover{
  background-color: #0091FF;
  color: #fff;
}


#example-service {
  text-align: center;
  margin-top: 5vw;
  margin-bottom: 0.5vw;
  font-size: 1vw;
  font-weight: bold;
}

#example-underbar {
  border: 1px solid;
  width: 60vw;
  margin: 0 auto;
  margin-bottom: 2vw;
}

.example-contents {
  display: flex;
  justify-content: center;
}

.example-banner {
  margin-right: 1vw;
  padding-left: 1vw;
}

.example-banner-txt {
  padding-right: 1vw;
}

.spacer{
  position: relative;
  height: 2.6vw;
  background-color: #F5F5F5;
}


.slider{
  position: relative;
  z-index: 4;
  /* top: -80vw; */
}


.example-slider{
  width: 100vw;
  height: auto;
}

.example-slider .slick-slide {
  margin:0 10px;/*スライド左右の余白調整*/
}

.slider-img{
  width: 20vw;
  height: 15vw;
  border-radius: 1vw;
}







.caption_txt {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	position: absolute;
	top: -15vw;
	left: 0;
	width: 82%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	background: rgb(0,0,0,0.9);
	color: #ffffff;
	text-align: center;
	transition: 0.5s;
  border-radius: 1vw;
}
.hover_image a:hover .caption_txt {
	opacity: 1;
}

.hover_image {
	/* width: 100vw; */
  display: block;
}

.hover_image a {
	display: block;
  overflow: hidden;
  position: relative;
}


.hover_image a .figcaption{
  transition: all .3s;
  opacity: 0.5;
  background: rgb(0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 99%;
  height: 100%;
  display: block;
  color: #fff;
  transform: translateY(100%);
}



.hover_image:last-child {
	margin: 0;
}


/* OTHER SERVICEパート */

/* #other-service-top {
  background-color: #fff;
  height: 600px;
  position: relative;
} */

#other-service-title {
  font-size: 2vw;
  letter-spacing: 0.25vw;
  position: relative;
  /* top: -65vw; */
  text-align: center;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  z-index: 4;
  padding-top: 5vw;
  padding-left: 1vw;
}

#other-service-ct {
  position: relative;
  left: 24vw;
  top: 6vw;
}

#other-service-ct img {
  width: 17.9vw;
  height: 10.7vw;
  padding-right: 2vw;
  margin-bottom: 5vw;
}

/* aboutパート */


#about-scroll{
  border: 1px solid #fff;
  top: 16vw;
}


#about-top{
  height: 52vw;
  background-color: #F5F5F5;
  position: relative;
}

#about-top-2{
  color: #fff;
  top: 15vw;
}

#about-top-3{
  color: #fff;
  top: 25vw;
  left: 8.2vw;
}

#about-main {
  position: relative;
  left: 17vw;
  top: 15vw;
  z-index: 1;
  color: #F5F5F5;
}

#about-top-txt {
  position: relative;
  font-size: 2.75vw;
  letter-spacing: 0.25vw;
  top: -0.5vw;
  text-underline-offset: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 900;
  font-style: normal;

}

#about-sub-txt {
  position: relative;
  top: 1vw;
  font-size: 0.85vw;
  line-height: 1.75vw;
  letter-spacing: 0.15vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
}

#about-button {
  position: relative;
  left: 17vw;
  top: 20vw;
  font-size: 1.0vw;
  color: #fff;
  width: 16vw;
  padding: 0.4vw 0vw;
  border-radius: 2vw;
  border: 1px solid;
  text-align: center;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  z-index: 1;
}

#about-button:hover{
  background-color: #fff;
  color: #0091ff;
}

#about-pic {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  top: 0;
}

#about-pic2 {
  position: absolute;
  right: 0;
  z-index: 0;
  width: 50%;
  top: 10vw;
  z-index: 5;
}

.about-deco{
  color: #000;
}

/* NEWSパート */

#news-pic {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  top: -5vw;
}

#news-top{
  height: 26.25vw;
  /* background-color: #fff; */
  position: relative;
  margin-top: -1vw;
}

#news-top2{
  top: 7vw;
}

#news-top3{
  top: 6vw;
  position: relative;
  z-index: 5;
}

#news-top4{
  top: 7.5vw;
  left: 8.1vw;
  position: relative;
  z-index: 5;
}

#news-main {
  position: relative;
  left: 17vw;
  top: -8vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  z-index: 5;
}

.news-txt {
  font-size: 1vw;
  letter-spacing: 0.1vw;
  padding-bottom: 2vw;
}

.news-space{
  padding-right: 3vw;
}

/* フォームパート */

#form-top{
  position: relative;
  height: 16vw;
  background-color: #0091FF;
  color: #fff;
  margin-top: -1vw;
}

#form-main{
  position: relative;
  left: 17vw;
  top: 3vw;
}

#form-top-txt {
  font-size: 2vw;
  padding-bottom: 1vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;

}

#form-sub-txt{
  font-size: 1vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

#mail-right-ct {
  position: absolute;
  left: 50vw;
  top: 2vw;
}

#mail-icn {
  width: 3vw;
  position: relative;
  left: 6vw;
}

#mail-txt {
  font-size: 1.1vw;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  text-align: center;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
}

#mail-button {
  font-size: 1.0vw;
  width: 16vw;
  padding: 0.4vw 0vw;
  border-radius: 2vw;
  border: 1px solid;
  text-align: center;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

#mail-button:hover{
  background-color: #fff;
  color: #0091ff;
}

.mail-deco{
  color: #fff;
}


/* フッター */

.footer{
  height: 18vw;
  background-color: #000;
  position: relative;
}

.foot-logo{
  color: #fff;
  position: relative;
  top: 3vw;
  left: 8vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.0vw;
}

.foot-adress{
  color: #fff;
  position: relative;
  top: 4vw;
  left: 8vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.8vw;
}

.foot-adress-c3{
  margin-bottom: 0.5vw;
}

.foot-map{
  display: flex;
  color: #fff;
  text-decoration: none;
}

.foot-link{
  display: flex;
}

.foot-facebook{
  position: relative;
  left: 0;
  top: 1vw;
  font-size: 0.6vw;
  width: 5vw;
  padding: 0.1vw 0vw;
  border-radius: 2vw;
  border: 1px solid;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.foot-facebook:hover{
  background-color: #fff;
  color: #000;
}

.foot-privacy-policy{
  position: relative;
  left: 1vw;
  top: 1vw;
  font-size: 0.6vw;
  width: 6vw;
  padding: 0.1vw 0vw;
  border-radius: 2vw;
  border: 1px solid;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.foot-privacy-policy:hover{
  background-color: #fff;
  color: #000;
}

.foot-copyright{
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 12.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.8vw;
}

.foot-fb-logo{
  position: absolute;
  top: 10.7vw;
  right: 8vw;
}

/* 共通 */

.novel-chara{
  position: absolute;
  left: -8vw;
  top: -8vw;
  z-index: 0;
}

.button-deco{
  text-decoration: none;
  position: inherit;
  z-index: 1;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}






/* 会社案内ページ */


/* トップ */


/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}




#company-body{
  background-color: #FFF000 !important;
}

#company-top{
  height: 80vw;
  background-color: #FFF000;
}

#company-main{
  position: relative;
  margin: 0 15vw;
}

#company-top-txt{
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 3.0vw;
  margin-top: 5vw;
  margin-bottom: 4vw;
}

.company-h3{
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 900;
  font-style: normal;
  background-color: #fff;
  font-size: 2.8vw;
  line-height: 3.5vw;
  width: 20vw;
}

#company-cross{
  width: 5vw;
  margin-left: 7.5vw;
  margin-top: 1.5vw;
  margin-bottom: 1vw;
}

#company-sub-txt{
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.0vw;
  line-height: 1.75vw;
  margin-top: 3vw;
}

#company-chara-1{
  position: absolute;
  width: 20vw;
  top: 12vw;
  right: 13vw;
}

#company-chara-2{
  position: absolute;
  width: 12vw;
  top: 40vw ;
  left: 35vw ;
}

#company-brain{
  position: absolute;
  top: 19vw;
  left: 45vw;
  width: 27vw;
}

#company-flow{
  position: relative;
}

#company-allow{
  position: relative;
  width: 67vw;
  top: 15vw;
  left: -1vw;
}

.allow-block{
  display: inline-block;
  position: relative;
  width: 14vw;
  top: 6.4vw;
  left: 15vw;
}

.allow-block-content{
  width: 13vw;
}


.allow-block-number{
  position: absolute;
  top: 0.5vw;
  left: 0.5vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.5vw;
}

.allow-block-title{
  position: absolute;
  top: 2.5vw;
  left: 2.7vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5vw;
}

.allow-block-txt{
  position: absolute;
  width: 80%;
  top: 5.5vw;
  margin-left: 7%;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0vw;
}

#allow-block-title-2{
  left: 4vw;
}

#allow-block-title-3{
  left: 1vw;
}

#company-circle{
  position: absolute;
  background-color: #fff;
  top: 12vw;
  right: 16vw;
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  text-align: center;
  line-height: 15vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5vw;
}



/* 会社概要 */

#scroll-allow{
  position: absolute;
  width: 4vw;
  top: 27vw;
  left: 7.5vw;
}

#company-top-3 {
  left: 8.1vw;
  top: 13vw;
}

#cp-main{
  height: 90vw;
  background-color: #fff;
  border-radius: 5vw 5vw 0 0;
}

.cp-top{
  margin: 0 15vw;
  padding-top: 8vw;
  padding-bottom: 3vw;
  display: flex;
}



.cp-title{
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 2.5vw;
  padding-right: 1.5vw;
}

.cp-sub-title{
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1vw;
  padding-top: 1.5vw;
  letter-spacing: 0.75vw;
}

#cp-table{
  margin: 0 15vw;
  border-collapse: collapse;
}

:where(body.bkd-legacy) th {
  border-bottom: solid 1px;
  border-color: F5F5F5;
  width: 10vw;
  text-align: left;
  letter-spacing: 0.25vw;
  line-height: 2.0vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.2vw;
  padding: 1.5vw 0;
}

:where(body.bkd-legacy) td {
  border-bottom: solid 1px;
  border-color: F5F5F5;
  width: 60vw;
  text-align: left;
  letter-spacing: 0.25;
  line-height: 2.0vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.2vw;
  padding: 1.5vw 0;
}

.table-first{
  border-top: solid 1px;
  border-color: F5F5F5;
}

#cp-map{
  margin: 5vw 15vw;
}

#map-txt{
  margin-top: -3vw;
  margin-left: 15vw;
  margin-right: 15vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0vw;
}

#cp-plus{
  margin-top: -3vw;
  margin-left: 15vw;
  margin-right: 15vw;
}

#cp-banner{
  margin-top: -1vw;
  margin-left: 15vw;
  margin-right: 15vw;
}

.cp-banner-img{
  margin-right: 2vw;
  width: 350px;
  height: 250px;
}



.history-button {
  position: relative;
  width: 4vw;
  height: 4vw;
  /* background: #70975B; */
  top: -2vw;
  left: 16vw;
  transform:rotate(0deg);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}

.history-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 50%;
  background: #000;
}

.history-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 2px;
  background: #000;
}

.history-button.clicked {
  transform:rotate(360deg);
  /* background: #CC2A41; */
}

.history-button.clicked:before {
  width: 0;
}

#hide-content{
  background-color: #fff;
}

.history-top{
  display: none;
  margin: 0 15vw;
  border-collapse: collapse;
}

#cp-service-top{
  background-color: #fff;
  padding-bottom: 10vw;
  margin-top: -1vw;
}

/* 制作実績 */

#work-body{
  background-color: #FFF !important;
}

#work-top-3 {
  left: 8.0vw;
  top: 12vw;
}

#work-main{
  position: relative;
  margin: 0 15vw 10vw;
}

#work-top{
  /* height: 80vw; */
}

#work-top-txt{
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 3.0vw;
  margin-top: 3.5vw;
  margin-bottom: 4vw;
}


/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/


#category-select{
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.3vw;
  margin-right: 2vw;
}


select.sort-select {
  width: 15vw;
  text-align: center;
  border-radius: 2vw;
  background-color: #f5f5f5;
  border: none;
  height: 2.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.3vw;
}


.sort-btn{
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  /* padding:50px 20px; */
  margin-bottom: 3vw;
}

.sort-btn li{
  background:#eee;
  border-radius:10px;
  cursor: pointer;
  padding: 10px;
  margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
  background:#ccc;  
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
  justify-content: space-between;
}
  
.sort-btn li{
  width:48%;
  margin:0 0 10px 0;
  text-align:center;
  } 
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}


/*========= レイアウトのためのCSS ===============*/
:where(body.bkd-legacy) ul{
  margin:0;
  padding: 0;
  list-style: none;
}

:where(body.bkd-legacy) a{
  color: #333;
}

:where(body.bkd-legacy) a:hover,
:where(body.bkd-legacy) a:active{
  text-decoration: none;
}


/* お問い合わせページ */

#info-body{
  background-color: #fff;
}

#wrapper-3{
  background-color: #f5f5f5;
}

#wrapper-4{
  background-color: #fff;
}

#formContent{
  margin: 0 auto;
  text-align: center;
  
}

#form-tel{
  position: absolute;
  background-color: #fff;
  width: 30vw;
  height: 7vw;
  left: 60vw;
  top: 13vw;
  text-decoration: none;
}

#form-tel-txt{
  font-size: 1.2vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  margin-left: 5%;
  margin-bottom: 1%;
  margin-top: 2%;
}

#form-tel-underline{
  border-bottom: solid 1px #000;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 2%;
}

#form-tel-img{
  width: 90%;
  margin-left: 5%;
}

#contact-form{
  margin-top: 5vw;
  padding-top: 3vw;
  margin-bottom: 2vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 2vw;
}

.Form-Item-Input{
  width: 40vw;
    height: 3.0vw;
    margin-bottom: 3vw;
    padding-left: 0.5vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.75vw;
    border: none;
    background-color: #f5f5f5;
}

.Form-Item-Textarea{
  width: 40vw;
    height: 10vw;
    margin-bottom: 2vw;
    padding-left: 0.5vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.75vw;
    border: none;
    background-color: #f5f5f5;
}

.Form-Item-Label{
  margin-bottom: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1vw;
}

.Form-Btn{
  color: #fff;
  background-color: #0091FF;
  border: none;
  border-radius: 10vw;
  font-size: 1.2vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.5vw;
  padding: 1vw 5vw;
  position: relative;
  margin-bottom: 5vw;
  margin-top: 1vw;
}

.Form-Btn:hover{
  color: #0091FF;
  background-color: #fff;
  border: solid 1px #0091FF;
}

#info-top-3{
  left: 8.1vw;
}

.info-top-txt{
  position: relative;
  left: 19vw;
  margin-top: 5vw;
}

.info-sub-text{
  position: relative;
  left: 19vw;
}

.formContent{
  width: 50vw;
  background-color: #fff;
  border-radius: 2vw;
  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.1);
}

#info-spacer{
  height: 10vw;
}




/* SP版CSS */


/* ヘッダー */
.sp-logo{
  width: 28vw;
  position: relative;
  top: 5vw;
  left: 7vw;
  z-index: 999;
}

#sp-first-view{
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 1;
}

#sp-first-view-subtxt{
  position: relative;
  top: 145vw;
  left: 11vw;
  z-index: 1;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3.7vw;
  color: #fff;
}

.sp-top{
  height: 173vw;
}

#sp-first-chara-1{
  width: 30vw;
  position: absolute;
  top: 168vw;
  right: 7vw;
  z-index: 1;
}

/* SPサービスパート */

#sp-service-top-2 {
  position: relative;
}

.sp-second{
  position: relative;
  height: 450vw;
}

#first-wave{
  width: 100vw;
}

.sp-wide-bar{
  border: 0.3px solid #000;
  width: 7vw;
  position: relative;
  top: -29.5vw;
}

.sp-item-title{
  position: absolute;
  left: 11vw;
  top: -34.5vw;
  font-size: 7.0vw;
  letter-spacing: 0.25vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  z-index: 1;
}

.sp-item-sub-title{
  position: absolute;
  top: -37.5vw;
  left: 11vw;
  font-size: 3vw;
  height: 10vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 1;
}

#sp-second-wrap{
  background-color: #fff;
  margin-top: -3vw;
  padding-top: 3vw;
  height: 410vw;
  position: relative;
  z-index: 1;
}

#sp-second-maintxt{
  width: 75vw;
  position: relative;
  left: 10vw;
  top: -20vw;
}

#sp-second-image-wrap{
  margin-top: -10vw;
}

.sp-second-image{
  width: 100vw;
}

.sp-second-bar{
  width: 2vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 5vw 0;
}

/* SPクリエイティブパート */

.sp-third{
  position: relative;
  background-color: #f5f5f5;
  height: 490vw;
}

#third-wave{
  width: 100vw;
  position: absolute;
  z-index: 1;
}

#sp-example-title,#sp-other-title {
  text-align: center;
  font-size: 9vw;
  letter-spacing: 0.25vw;
  margin-bottom: 3vw;
  padding-top: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  position: relative;
  z-index: 3;
  top: 13vw;
  left: 50%;
  transform: translateX(-50%);
}

#sp-other-title{
  font-size: 7vw;
}

.sp-ex-box-1,.sp-ex-box-2{
  display: flex;
}

.sp-ex-box{
  position: relative;
  top: 20vw;
  z-index: 2;
}

.sp-ex-box-2{
  margin-top: -0.5vw;
}

.sp-ex-images{
  width: 50vw;
  flex-grow: 1;
}

#sp-ex-image-1{
  margin-right: -0.3vw;
}

#sp-ex-image-3{
  margin-left: -0.2vw;
}

#sp-ex-image-4{
  margin-left: -0.3vw;
}

.sp-example-button {
  position: relative;
  top: 35vw;
  left: 15vw;
  font-size: 5.0vw;
  width: 70vw;
  padding: 2vw 0vw;
  border-radius: 10vw;
  border: 1px solid;
  text-align: center;
  color: #000;
  margin-bottom: 2vw;
  /* background: linear-gradient(90deg, rgba(49, 136, 255, 1) 0%, rgba(255, 72, 186, 1) 100%); */
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 4;
}

#sp-other-title{
  top: 50vw;
}

.sp-banner{
  width: 70vw;
  position: relative;
  left: 15vw;
  top: 60vw;
  margin-bottom: 10vw;
}

#sp-third-chara-1{
  width: 25vw;
  position: absolute;
  bottom: 20vw;
  right: 8vw;
  z-index: 5;
}

/* SP　ABOUTパート */

.sp-forth{
  position: relative;
  margin-top: -30vw;
  z-index: 6;
}

#sp-about-main-image{
  width: 100vw;
}

#sp-about-subtxt {
  position: relative;
  top: -95vw;
  left: 10vw;
  font-size: 3.5vw;
  line-height: 9vw;
  letter-spacing: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #fff;
}

.sp-about-button {
  position: absolute;
  top: 155vw;
  left: 15vw;
  font-size: 5.0vw;
  width: 70vw;
  padding: 2vw 0vw;
  border-radius: 10vw;
  border: 1px solid;
  text-align: center;
  color: #fff;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  z-index: 7;
}

/* SP　ニュースパート */

.sp-fifth{
  position: relative;
  height: 20vw;
}

#sp-fifth-wrap{
  position: absolute;
  background-color: #fff;
  height: 100vw;
  width: 100vw;
  top: -70vw;
  z-index: 0;
}

#sp-news-top,#sp-news-top-2,#sp-news-top-3{
  position: relative;
  z-index: 5;
  top: 25vw; 
}

#sp-news-top{
  top: 30vw;
}

#sp-news-top-3{
  top: 11vw;
}

#sp-news-main {
  position: relative;
  left: 11vw;
  top: -30vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 5;
  line-height: 7vw;
}

.sp-news-txt {
  font-size: 3.2vw;
  letter-spacing: 0.1vw;
  padding-bottom: 2vw;
}

.sp-news-space{
  padding-right: 3vw;
}


/* SP フッターパート */

.sp-footer{
  position: relative;
  height: 80vw;
  background-color: #000;
}

.sp-foot-logo,.sp-foot-adress,.sp-foot-map,.sp-foot-link,.sp-foot-copyright{
  color: #fff;
  text-decoration: none;
}

.sp-foot-logo{
  position: relative;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5.0vw;
  letter-spacing: 1vw;
  top: 10vw;
  left: 10vw;
}

.sp-foot-adress,.sp-foot-map,.sp-foot-link,.sp-foot-copyright{
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3.0vw;
  letter-spacing: 0.75vw;
}

.sp-foot-adress{
  position: relative;
  top: 15vw;
  left: 10vw;
}

.sp-foot-map{
  position: relative;
  top: 5vw;
  display: flex;
}

.sp-foot-facebook{
  position: relative;
  left: 0;
  top: 12vw;
  width: 30vw;
  padding: 1vw 0vw;
  border-radius: 10vw;
  border: 1px solid;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.sp-foot-privacy-policy{
  position: relative;
  left: 35vw;
  top: 5vw;
  width: 40vw;
  padding: 1vw 0vw;
  border-radius: 10vw;
  border: 1px solid;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.sp-foot-copyright{
  color: #fff;
  position: absolute;
  width: 80vw;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8vw;
}

.sp-foot-adress-c3{
  text-decoration: none;
  color: #fff;
}

/* SP 会社紹介ページ */

.sp-cp-image{
  width: 100vw;
}

/* .sp-cp-top{
  position: relative;
  overflow-x: hidden;
} */

#sp-cp-top-image{
  position: relative;
}

#sp-cp-first-view{
  width: 60vw;
  margin-left: 11vw;
  position: relative;
  margin-top: 31vw;
}

#sp-cp-sbout-top{
  position: relative;
  z-index: 5;
  top: 19.5vw; 
}

#sp-cp-sbout-top-2{
  position: relative;
  top: 20vw;
  z-index: 5;
  left: 10vw;
}

.sp-cp-item-title {
  position: absolute;
  left: 11vw;
  top: 31vw;
  font-size: 7.0vw;
  letter-spacing: 0.25vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  z-index: 1;
}

.sp-cp-item-sub-title {
  position: absolute;
  top: 28vw;
  left: 11vw;
  font-size: 3vw;
  height: 10vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 1;
}

#sp-cp-first-chara{
  width: 55vw;
  position: absolute;
  left: 50vw;
  top: 2vw;
  overflow: hidden;
}

#sp-cp-first-view-2{
  width: 78vw;
  margin-left: 11vw;
  margin-top: 5vw;
}

#sp-cp-first-view-subtxt{
  width: 78vw;
  margin-left: 11vw;
  margin-top: 5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3.5vw;
  letter-spacing: 0.5vw;
  line-height: 5vw;
}

#sp-cp-brain{
  width: 78vw;
  margin-left: 11vw;
  margin-top: 10vw;
}

#sp-cp-first-chara-2{
  width: 30vw;
  position: absolute;
  top: 210vw;
  left: 5vw;
}

.sp-about-flow{
  width: 78vw;
  margin-left: 11vw;
  margin-top: 5vw;
  position: relative;
}

#sp-about-flow-first{
  margin-top: 10vw;
}

.sp-cp-about-flow-image{
  width: 100%;
}

.sp-about-flow-txt{
  position: absolute;
  top: 13vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3.5vw;
  letter-spacing: 0.5vw;
  line-height: 5vw;
}

#sp-about-bottom{
  width: 78vw;
  margin-left: 11vw;
  margin-top: 5vw;
  margin-bottom: 20vw;
  text-align: center;
  font-size: 9vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* SP会社概要パート */

#sp-cp-second{
  background-color: #fff;
  border-radius: 10vw 10vw 0 0;
}

.sp-cp-title{
  width: 78vw;
  margin-left: 11vw;
  padding-top: 10vw;
  padding-bottom: 10vw;
  text-align: center;
  font-size: 8vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
}

#sp-cp-table{
  margin: 0 10vw;
  border-collapse: collapse;
}


@media (max-width: 768px) {

  .sp-cp-table-first{
    border-top: solid 1px;
    border-color: F5F5F5;
  }
	
  th {
    border-bottom: solid 1px;
    border-color: F5F5F5;
    width: 20vw;
    text-align: left;
    letter-spacing: 0.25vw;
    line-height: 2.0vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3.5vw;
    padding: 1.5vw 0;
  }
  
  td {
    border-bottom: solid 1px;
    border-color: F5F5F5;
    width: 65vw;
    text-align: left;
    letter-spacing: 0.25;
    line-height: 9.0vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3.5vw;
    padding: 1.5vw 0;
  }
    
}

#sp-map-txt{
  width: 78vw;
  margin-left: 11vw;
  text-align: center;
  font-size: 3.0vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding-top: 15vw;
  line-height: 7vw;
}


/* 横幅を指定するための要素 */
.map-wrap {
  max-width: 78%; /* ここに横幅を指定 */
}
 
/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}
 
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 11vw;
  width: 100%;
  height: 100%;
  margin-top: 10vw;
  margin-bottom: 10vw;
}

/* #sp-cp-history{
  margin-top: 10vw;
} */

.sp-history-button {
  position: relative;
  width: 25vw;
  height: 25vw;
  /* background: #70975B; */
  top: -10vw;
  left: 7vw;
  transform:rotate(0deg);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}

.sp-history-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5vw;
  width: 50%;
  background: #bdbebe;
}

.sp-history-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 1.5vw;
  background: #bdbebe;
}

.sp-history-button.clicked {
  transform:rotate(360deg);
  /* background: #CC2A41; */
}

.sp-history-button.clicked:before {
  width: 0;
}

#sp-history-title{
  position: relative;
}

.sp-open-button{
  position: absolute;
  top: 31.5vw;
  left: 30vw;
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 6vw;
  color: #bdbebe;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}

@keyframes sp-open-button {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes sp-open-button{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes sp-open-button{
  0% {opacity:0;}
  100% {opacity:1;}
}

.sp-history-top{
  display: none;
  margin: 0 10vw;
  border-collapse: collapse;
}

.sp-cp-servicelist{
  position: relative;
  width: 70vw;
  margin-left: 15vw;
}

.sp-cp-banner-1,.sp-cp-banner-2{
  width: 100%;
}

.sp-cp-banner-2{
  margin-top: 3vw;
}

.sp-cp-servicelist-txt{
  text-align: left;
  font-size: 3.0vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding-top: 3vw;
  line-height: 7vw;
}

.sp-cp-servicelist-space-1{
  margin-top: 10vw;
}

.sp-cp-servicelist-space-2{
  margin-top: 10vw;
  padding-bottom: 20vw;
}

/* SPコンタクトフォーム */

#sp-contact-back{
  background-color: #f5f5f5;
}

.sp-back-color{
  background-color: #fff;
}

#sp-ct-top{
  position: relative;
  z-index: 5;
  top: 18.5vw; 
}

#sp-ct-top-2{
  position: relative;
  top: -23vw;
  z-index: 5;
  left: 0;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

#sp-ct-top-3{
  top: 18vw;
}

.sp-ct-item-title {
  position: relative;
  left: 11vw;
  top: 31vw;
  font-size: 7.0vw;
  letter-spacing: 0.25vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  z-index: 1;
}

.sp-ct-item-sub-title {
  position: relative;
  top: 28vw;
  left: 11vw;
  font-size: 3vw;
  height: 10vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 1;
}

#sp-form-top-txt{
  padding-top: 10vw;
  width: 78vw;
  margin-left: 11vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 5vw;
}

#sp-form-sub-txt{
  padding-top: 3vw;
  width: 78vw;
  margin-left: 11vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 4vw;
}

#sp-form-title{
  margin-top: 10vw;
  text-align: center;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5.0vw;
}

#sp-form-underline{
  border: 0.5vw solid #000;
  width: 78vw;
  margin-left: 11vw;
  margin-top: 3vw;
}


#formContent{
  margin: 0 auto;
  text-align: center;
  
}

#contact-form{
  margin-top: 5vw;
  padding-top: 3vw;
  margin-bottom: 2vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 2vw;
}

#form-underline{
  border-bottom: solid 1px #000;
  width: 40vw;
  margin-left: 10%;
  position: relative;
  top: -1vw;
  margin-bottom: 2vw;
}


.Form-Item-Label{
  margin-bottom: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1vw;
  padding-left: 5vw;
  text-align: left;
}

.Form-Item-Label-Required{
  color: #fff;
    background-color: #ff6961;
    margin-right: 1vw;
    padding: 1px 1px;
    border-radius: 10vw;
    font-size: 1vw;
    letter-spacing: 0.5vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    padding-left: 10px;
}

.Form-Item-Label-any{
  color: #fff;
    background-color: #bdbebe;
    margin-right: 1vw;
    padding: 1px 1px;
    border-radius: 10vw;
    font-size: 1vw;
    letter-spacing: 0.5vw;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    padding-left: 10px;
}



.sp-Form-Item-Label-Required,
.sp-content .Form-Item-Label-Required{
  margin-left: 11vw;
  color: #fff;
  background-color: #ff6961;
  margin-right: 3vw;
  padding: 0.5vw 2vw;
  border-radius: 10vw;
  font-size: 3vw;
  letter-spacing: 1vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sp-Form-Item-Label-any,
.sp-content .Form-Item-Label-any{
  margin-left: 11vw;
  color: #fff;
  background-color: #bdbebe;
  margin-right: 3vw;
  padding: 0.5vw 2vw;
  border-radius: 10vw;
  font-size: 3vw;
  letter-spacing: 1vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sp-Form-Item-Label,
.sp-content .Form-Item-Label{
  margin-top: 5vw;
  font-size: 4vw;
  letter-spacing: 0.75vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sp-Form-Item-Input,
.sp-content .Form-Item-Input{
  width: 78vw;
  margin-left: 11vw;
  border: none;
  background-color: #f5f5f5;
  padding: 3vw 0;
  margin-top: 3vw;
  padding-left: 3vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.sp-Form-Item-Textarea,
.sp-content .Form-Item-Textarea{
  width: 78vw;
  margin-left: 11vw;
  border: none;
  background-color: #f5f5f5;
  padding: 3vw 0;
  margin-top: 3vw;
  padding-left: 3vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  height: 20vw;
}

.sp-Form-Btn,
.sp-content .Form-Btn{
  color: #fff;
  background-color: #0091FF;
  border: none;
  border-radius: 10vw;
  font-size: 5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1.5vw;
  padding: 2vw 20vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 10vw 0;
}

#sp-form-tel{
  width: 78vw;
  margin-left: 11vw;
}

#sp-tel-txt-1{
  font-size: 3.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: left;
  letter-spacing: 0.5vw;
}

#sp-form-underline-2{
  border: 0.5vw solid #000;
  margin-top: 2vw;
}

#sp-tel-image{
  width: 100%;
  margin-top: 2vw;
}

#sp-tel-txt-2{
  font-size: 3.0vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: left;
  letter-spacing: 0.5vw;
  margin-bottom: 20vw;
}

/* ハンバーガーメニュー */

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
top:0;
  right: -120%;
width:100%;
  height: 100vh;/*ナビの高さ*/
background:#0091FF;
  /*動き*/
transition: all 0.6s;

overflow: hidden;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  margin-left: 11vw;
  margin-top: 15vw;
  /* transform: translate(-50%,-50%); */
  display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center;
}

#g-nav li a{
color: #FFF;
text-decoration: none;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 7vw;
text-align: left;
left: 2.5vw;
top: -3vw;
position: relative;
margin-bottom: 4vw;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 10px;
cursor: pointer;
  width: 50px;
  height:50px;
}

/*×に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #FFF;
  width: 45%;
}

.openbtn1 span:nth-of-type(1) {
top:15px; 
}

.openbtn1 span:nth-of-type(2) {
top:23px;
}

.openbtn1 span:nth-of-type(3) {
top:31px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 60%;
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 60%;
}

.sp-menu-sidebar{
  border: 0.1px solid #fff;
  width: 7vw;
  position: absolute;
  left: -11vw;
  overflow-x: hidden;
  margin-top: 6vw;
}

.sp-menu-underbar{
  border: 0.1px solid #fff;
  width: 73vw;
  position: absolute;
  overflow-x: hidden;
  margin-top: 14vw;
  left: 2.5vw;
}

.sp-menu-sub-txt{
  position: relative;
  color: #fff;
  letter-spacing: 0.1em;
  font-size: 3vw;
  text-align: left;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  top: -2vw;
  left: 2.5vw;
}

#sp-menu-mail{
  position: absolute;
  top: 122vw;
  left: 15vw;
  display: block;
  display: grid;
  place-items: center;
  text-decoration: none;
}

#sp-munu-mail-icn{
  width: 15vw;
  margin-bottom: 3vw;
}

#sp-menu-mail-txt{
  color: #fff;
  font-size: 3vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 1vw 4vw;
  border: 1px solid #fff;
  border-radius: 5vw;
  width: 23vw;
  text-align: center;
}

#sp-menu-tel{
  position: absolute;
  top: 122vw;
  left: 55vw;
  display: block;
  display: grid;
  place-items: center;
  text-decoration: none;
}

#sp-munu-tel-icn{
  width: 15vw;
  margin-bottom: 3vw;
}

#sp-menu-tel-txt{
  color: #fff;
  font-size: 3vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 1vw 4vw;
  border: 1px solid #fff;
  border-radius: 5vw;
  width: 23vw;
  text-align: center;
}

#sp-menu-under-txt{
  position: relative;
  top: 135vw;
  width: 78vw;
  margin-left: 13.5vw;
  color: #fff;
}

#sp-menu-under-txt-1{
  font-size: 5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 2vw;
}

#sp-menu-under-txt-2{
  font-size: 3.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

#sp-grid{
  height: 1000vw;
}

#sp-work-main{
  position: relative;
  margin: 0 15vw 10vw;
}

@media (max-width: 768px) {
	
  #category-select {
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 5vw;
    margin-right: 5vw;
}
    
.sort-btn {
  justify-content: flex-start;
  margin-bottom: 5vw;
}

#work-main {
  position: relative;
  margin: 5vw 17vw 10vw;
}

select.sort-select {
  width: 40vw;
  text-align: center;
  border-radius: 5vw;
  background-color: #f5f5f5;
  border: none;
  height: 8vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 5vw;
}

  }


#pp-top-2{
  height: 20vw;
}

#pp-top-3{
  top: 21vw;
  left: 7.7vw;
}

#pp-top-txt{
  position: relative;
  left: 19vw;
  margin-top: 5vw;
  font-family: "proxima-nova", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 2vw;
  width: 60vw;
  border-bottom: 1px solid;
}

.pp-top-subtxt {
  font-family: "proxima-nova", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1vw;
  padding-left: 2vw;
}

#pp-main{
  position: relative;
  left: 19vw;
  width: 60vw;
}

.pp-title{
  color: #0091ff;
  font-size: 1.3vw;
  margin-bottom: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top: 4vw;
}

.pp-main-txt{
  font-size: 0.77vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.pp-txt-2{
  padding-left: 2vw;
}

.pp-h4{
  padding-left: 2vw;
}

#sp-pp-title{
  width: 78vw;
  margin-left: 11vw;
  padding-top: 10vw;
}

#sp-pp-main{
  width: 78vw;
  margin-left: 11vw;
  padding-bottom: 10vw;
}


.sp-pp-title{
  color: #0091ff;
  font-size: 4vw;
  margin-bottom: 0.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top: 10vw;
  padding-bottom: 5vw;
}

.sp-pp-main-txt{
  font-size: 3.5vw;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 500;
  font-style: normal;
}