@charset "utf-8";

html, body{
    -webkit-text-size-adjust: 100%;
    /*-webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";*/
    margin: 0;
    padding: 0;
    font-family: Noto Sans JP,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 62.5%;/* remをpx変換で設定できます（例:16px = 1.6rem） */
    color: #000;
    font-weight: 400;
    font-style: normal;
}
body{ overflow-x: hidden; }
*{ box-sizing: border-box; }
*::before,*::after{
  -webkit-backface-visibility: visible; /* Safari */
  backface-visibility: visible;
}
a{ text-decoration: none; color: #000; }
img{
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* font-size */
h2{ font-size: 2.8rem; }
h3{ font-size: 2.4rem; line-height: 3.6rem; }
p{ font-size: 1.6rem; letter-spacing: .05em; }
a{ font-size: 1.5rem; }

/* color */
:root{
  --maincolor: #FFBB00;
  --subcolor: #FFF1E8;
  --footercolor: #FFEACF;
  --shadow: #FFE0CF;
}

.inline__text-align_right{
  display: block;
  text-align: right;
}


/*=========================================================================================================================*/
/* loeding animation */


/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--maincolor);
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
.splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: LogoAnime .4s both;
}
.splash_logo img {
  width: 180px;
}
@keyframes LogoAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/*========= 画面遷移のためのCSS ===============*/

body{
    background: var(--maincolor);/*遷移アニメーションと同じ色を指定*/
    position: fixed;
}

body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
    position: relative;
}

.splashbg{
    display: none;
	content: "";
	position:fixed;
	transform: scale(100);
	background-color:  var(--maincolor);/*伸びる背景色の設定*/
	z-index: 999;
    /*丸のスタートの形状*/
    top:calc(50% - 1rem);/*50%から円の半径を引いた値*/
    left:calc(50% - 1rem);/*50%から円の半径を引いた値*/
	width: 2rem;
	height: 2rem;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    border-radius: 50%;
	animation-name:PageAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {/*丸のスタート位置と形状*/
		transform: scale(100);

	}
	100% {/*丸の終了位置と形状*/
		transform: scale(0);
		display: none;/*終了時は消える*/
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}


/*=========================================================================================================================*/
/* header */


#header-wrapper{
  width: 660px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 998;
}

#header-wrapper .head-nav{
  width: 100%;
  margin: 0;
  padding: 0 3%;
  border-radius: 8px 0 0 8px;
  background: #fff;
  box-shadow: 0px 0px 16px -5px rgba(0,0,0,.3);
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transform-origin: right;
  transition: .5s;
}
#header-wrapper .head-nav li{
  width: 20%;
  position: relative;
  text-align: center;
  font-size: .938rem;
  font-weight: 600;
}
#header-wrapper .head-nav li::after{
  content: '';
  width: 100%;
  height: 4px;
  background: var(--maincolor);
  position: absolute;
  bottom: -19px;
  left: 0;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
  opacity: 0;
}
#header-wrapper .head-nav li a{
  transition: .3s;
}

/* head-navが閉じる挙動（スクロールした時/バーガーメニューをクリックした時） */
#header-wrapper.clauseMove .head-nav{ transform: scale(0, 1); }
#header-wrapper.clauseMove .head-nav li::after{ display: none; }
#header-wrapper.openMove .head-nav{ transition-delay: .2s; }
#header-wrapper.clauseMove .head-nav{ transform: scale(0, 1); }
#header-wrapper.clauseMove .head-nav li::after{ display: none; }
#header-wrapper.openMove .head-nav{ transition-delay: .2s; }



/* ボタン外側 */
.burgerbtn_open{
	position: relative;
	background:var(--maincolor);
	cursor: pointer;
  width: 60px;
  height:60px;
	border-radius: 0 8px 8px 0;
  transition: .2s;
  transition-delay: .4s;
  z-index: 9999;
}
#header-wrapper.clauseMove .burgerbtn_open{ border-radius: 8px; }
#header-wrapper.openMove .burgerbtn_open{ transition-delay: 0s; }

/* ボタン内側 */
.burgerbtn_open .burgerbtn_open-area{
  transition: all .6s;
	width:60px;
	height:60px;
}

/* 三本線 */
.burgerbtn_open span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2.5px;
    background: #fff;
  	width: 50%;
}

.burgerbtn_open span:nth-of-type(1) {
	top:16px;
}
.burgerbtn_open span:nth-of-type(2) {
	top:28px;
}
.burgerbtn_open span:nth-of-type(3) {
	top:40px;
}

/* activeクラスが付与されると .burgerbtn_open-areaが360度回転し、その中の線が回転して×に */
.burgerbtn_open.active .burgerbtn_open-area{
	transform: rotate(360deg);
}

.burgerbtn_open.active span:nth-of-type(1) {
    top: 23px;
    left: 14px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

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

.burgerbtn_open.active span:nth-of-type(3){
    top: 35px;
    left: 14px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}


/* global navigation */
#nav-index{
  position:fixed;
  z-index: 9999;
  top: 10%;
  right: 10%;
  width:80%;
  height: 80vh;
  background:var(--maincolor);
  border-radius: 12px;
  border: 1px solid var(--maincolor);
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  transition: all .8s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}
#nav-index.panelactive{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}


.nav-background{
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0;
  position:fixed;
  top: 0;
  left: 0;
  z-index: 9990;
  transition: all .6s ease-in-out;
  pointer-events: none;
}
.nav-backdrop{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
  transition: all .6s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9991;
  opacity: 0;
  pointer-events: none;
}
.nav-background.panelactive{
  opacity: .6;
  pointer-events: initial;
}
.nav-backdrop.panelactive{
  opacity: 1;

}

#header-wrapper .head-nav.panelactive{
  opacity: 0;
}


#nav-index .logo{
  display: inline-block;
  padding: 24px 12px;
  padding: 1.25vw 12px;
}

#nav-index.panelactive #nav-index-list{
  position: fixed;
  z-index: 990; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#nav-index ul {
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#nav-index li{
  list-style: none;
  text-align: center;
  pointer-events: auto;
  position: relative;
}

#nav-index li::after{
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.6rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 1.6rem);
  right: 10px;
  z-index: 10;
}


/* hover action */
#nav-index li::after{ transition: all .6s ease; }

.head-nav--burgermenu span{ display: block; transition: all .6s ease; }
.head-nav--burgermenu .jpn-tit{ font-size: 1.4rem; }
.head-nav--burgermenu .eng-tit{ font-size: 2rem; }

/* position aware */
.position-aware {
  position: relative;
  overflow: hidden;
}
.position-aware .hover-circle {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #fff;
  transition: width .6s ease, height .6s ease;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.position-aware:active {
  background-color: #5db4af;
}



#nav-index li a{
  color: #fff;
  text-decoration: none;
  padding: 120px 12px; 
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.head-nav--burgermenu{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border-top: 1px solid #fff;
  position: relative;
}
.head-nav--burgermenu::after{
  content: '';
  display: block;
  width: 33.3%;
}
.head-nav--burgermenu li{ 
  width: 33.33333333%; 
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
.head-nav--burgermenu li:nth-child(3n){ border-right: 0; }

.burgerbtn_open.active{ border-radius: 8px; }



/*=========================================================================================================================*/
/* footer */


#footer-wrapper{ 
  background: var(--footercolor);
  padding: 48px 0;
  position: relative;
}

#footer-wrapper .inner{
  width: 80%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.foot-info p.copyright{ margin: 4px 0 24px; }

.foot-nav{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.foot-nav li{ width: 33.3%; text-align: center; }
.foot-nav li a{ font-size: 1.4rem; font-weight: 600; }


.scroll-top--btn{
  width: 40px;
  height: 40px;
  background: url(./images/scroll-top.svg)no-repeat;
  background-size: cover;
  position: absolute;
  top: -20px;
  right: 30px;
  z-index: 100;
  transition: .3s;
  cursor: pointer;
}


/*=========================================================================================================================*/
/* top */


#top_fast-view{
  width: 100%;
  height: 100vh;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  position: relative;
}

/* logo */
.company-logo{
  width: 8.593406593406595vw;/**/
  position: absolute;
  top: 48px;
  left: 36px;
  z-index: 10;
  display: block;
}

/* scroll btn */
.page-scroll-btn{
  display: block;
  width: 78px;
  height: 78px;
  border-radius: 100%;
  background: var(--maincolor);
  position: absolute;
  bottom: -2.5%;
  left: 6%;
  z-index: 10;
}
.page-scroll-btn::before{
  content: '';
  width: 78px;
  height: 78px;
  border-radius: 100%;
  background: var(--maincolor);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.page-scroll-btn .arrow{
  content: '';
  width: 38px;
  height: 43px;
  background: url('./images/arrow-down.svg')no-repeat;
  background-size: cover;
  position: absolute;
  top: 26%;
  left: 25%;
  z-index: 5;
}
.page-scroll-btn .circle{
  width: 92px;
  height: 92px;
  border-radius: 100%;
  border: 2px solid var(--maincolor);
  position: absolute;
  top: -9%;
  left: -9%;
  z-index: 5;
}

/* 波紋が広がるアニメーション */
.page-scroll-btn::after{
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255,228,212,.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb 3s infinite;
  animation: sdb 3s infinite;
  box-sizing: border-box;
  position: absolute;
  top: 20%;
  left: 22%;
  z-index: 1;
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 46px rgba(255,180,136,.4);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* left-view */
.left-view{
  width: 50%;
  position: relative;
  overflow: hidden;
}


.tit-contents{
  position: absolute;
  top: 40%;
  left: 10%;
  z-index: 10;
}


.tit-contents .eng-tit{
  font-size: 1.8rem;
  letter-spacing: .1em;
  font-weight: 600;
  color:#604024;
  transition: opacity .8s .6s ease;
  opacity: 0;
}
.tit-contents.animate .eng-tit{
  opacity: 1;
  -webkit-animation: txtAnimeSubTxt .8s both;
  animation: txtAnimeSubTxt .8s .6s both;
}
-webkit-@keyframes txtAnimeSubTxt {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes txtAnimeSubTxt {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}

/* h1 animation */
.tit-contents h1.head{
  font-size: 3.28125vw;/*62px*/
  letter-spacing: 0.1em;
  font-weight: 900;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  transition: opacity .8s ease;
  opacity: 0;
}
.tit-contents h1.head.animate{
  opacity: 1;
  -webkit-animation: txtAnimeH1 .8s both;
  animation: txtAnimeH1 .8s both;
}
-webkit-@keyframes txtAnimeH1 {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes txtAnimeH1 {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0);
  }
}
.tit-contents h1.head span{
  color: #ca5e00;
}

/* h2 animation */
.tit-contents h2.phrase{
  padding-top: 12px;
  padding-left: 12px;
  font-size: 1.1458333333333333vw;/*22px*/
  letter-spacing: 0.09em;
  transition: opacity .8s .6s ease;
  opacity: 0;
}
.tit-contents h2.phrase.animate{
  opacity: 1;
  -webkit-animation: txtAnimeH2 .8s .6s both;
  animation: txtAnimeH2 .8s .6s both;
}
-webkit-@keyframes txtAnimeH2 {
  0% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes txtAnimeH2 {
  0% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}

/*  stroke 線が引かれるアニメーション */
.stroke{
  background: url('./images/stroke.svg')no-repeat;
  background-size: contain;
  width: 33.21875vw;
  height: 8.3125vw;
  position: absolute;
  top: -12%;
  left: 0;
  z-index: -2;
}
.stroke::after{
  content: '';
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1, 1);
  transform-origin: center left;
  transition: all .5s 1.2s ease-in-out;
  opacity: 1;
}
.tit-contents.animate .stroke::after{
  transform: scale(0, 1);
}


/* text-animation 1 文字がスライドするループアニメーション */
.loop-wrap01 img, .loop-wrap02 img { max-width: inherit; height: 100%; }
.loop-wrap01 {
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: 18.5rem;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  mix-blend-mode: multiply;
}
.loop-wrap01{
  /*top: calc(50% - 27.5rem);*/
  top: 16px;
  left: 0;
}
/* 一部にブレンドモード（乗加算）を解除 */
.loop-wrap01.center{
  mix-blend-mode: unset;
}
.loop-wrap01 img {
  animation :loop1 50s infinite linear 0.5s both;
}
.loop-wrap01 img:last-child{
  margin-left: 36px;
}
@keyframes loop1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* text-animation 2 文字がスライドするループアニメーション */
.loop-wrap02 {
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: 90px;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  mix-blend-mode: multiply;
}
.loop-wrap02{
  bottom: 0;
  left: 0;
}
.loop-wrap02 img:last-child{
  padding-left: 36px;
}
.loop-wrap02 img {
  animation :loop2 50s infinite linear 0.5s both;
}
@keyframes loop2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


/* right-view スライドショー */
.right-view{
  width: 50%;
  background: #fff;
}



/*===============================================================*/
/* top-contents */


.headgroup h2{ /*font-size: 42px;*/font-size: 4.2rem; font-weight: bold; }
.headgroup span.subtit{ font-size: 2rem; font-weight: 600; color: var(--maincolor); }

.about-container .headgroup h2,
.about-container h3{ margin-bottom: 2.8rem; }
.index-recruit-container h3{ margin: 2.4rem 0 3.6rem; }
p.name{ font-size: 2.2rem; margin-top: 3.6rem; letter-spacing: .09rem; }
p.description{ line-height: 1.8em; padding-bottom: 2.4rem; }
p.name span{ font-size: 1.8rem; padding-right: 1.8rem; }

h3.subtit{ position: relative; }


/* button */
.common-link-btn01{
  display: block;
  max-width: 260px;
  padding: 1.8rem 0;
  background: var(--maincolor);
  border: 2px solid var(--maincolor);
  border-radius: 46px;
  /*font-size: 20px;*/
  font-size: 2rem;
  text-align: center;
  color: #fff;
  margin: 36px auto 0;
  position: relative;
  z-index: 10;
  transition: .3s;
}



/*===============================================================*/
/* index-service-container service */


.index-service-container{
  width: 100%;
  padding: 6.8rem 0;
  background: url(./images/items-background.jpg)no-repeat;
  background-size: cover;
  position: relative;
}
.index-service-container::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(255,243,228);
  background: linear-gradient(180deg, rgba(255,243,228,1) 0%, rgba(255,255,255,0.3) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.index-service-container .inner{ width: 80%; max-width: 1366px; margin: 0 auto; position: relative; z-index: 10; }
.index-service-container .headgroup{ text-align: center; }


ul.service-items{ display: flex; justify-content: space-between; margin-top: 3%; }
ul.service-items li{ 
  width: 31.9%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  overflow: hidden;
  transition: .4s;
}
ul.service-items li a{
  display: block;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: .4s;
}

ul.service-items li .numberplate{
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  background: #fff;
  font-size: 2.2rem;
  font-weight: 600;
  color: #FF5E00;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -3rem;
  left: calc(50% - 3rem);
  z-index: 10;
  transition: .4s;
}

ul.service-items li .image{ background: #fff; overflow: hidden; }

ul.service-items li .text-box{
  padding: 3rem 1.6rem; 
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}
ul.service-items li .text-box .eng-tit{ font-size: 1.4rem; color: var(--maincolor); letter-spacing: .09rem; transition: .4s; }
ul.service-items li .text-box h3{ margin-bottom: 12px; font-size: 2rem; position: relative; z-index: 20; flex: 1; }

/* hover animation */
ul.service-items li img{ transition: .4s; }

/* scroll animation */
.index-service-container.AnimeTrigger::before{ opacity: 0; }
.index-service-container.AnimeActive::before{
  animation: ScrollAnime_cont01-1 ease-in-out .8s both;
}

.index-service-container.AnimeTrigger .headgroup{ opacity: 0; }
.index-service-container.AnimeActive .headgroup{
  animation: ScrollAnime_cont01-1 ease-in-out .8s both;
}

.index-service-container.AnimeTrigger ul.service-items{ opacity: 0; }
.index-service-container.AnimeActive ul.service-items{
  animation: ScrollAnime_cont01-2 ease-in-out .8s .6s both;
}

.index-service-container.AnimeTrigger .common-link-btn01{ opacity: 0; }
.index-service-container.AnimeActive .common-link-btn01{
  animation: ScrollAnime_cont01-1 ease-in-out .8s 1.2s both;
}

@keyframes ScrollAnime_cont01-1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ScrollAnime_cont01-2 {
  from {
    opacity: 0;
    transform: translateY(5vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 追記 */
@media screen and (min-width: 820px){

  ul.service-items li .text-box h3{ font-size: 1.0416666666666665vw; }
  ul.service-items li .text-box .eng-tit{ font-size: 0.7291666666666666vw; }
  ul.service-items li .text-box  p.description{ font-size: 0.8333333333333334vw; }

  .about-container h3.subtit{ font-size: 1.25vw; }
  /*.about-container p.description{ font-size: 0.9375vw; }*/

}



/*===============================================================*/
/* index-news-container news */


.index-news-container{ margin: 64px 0; }
.index-news-container .headgroup{ width: 80%; max-width: 1366px; margin: 0 auto -22px; text-align: left; position: relative; z-index: 10; }

.list-carousel--box{
  background: #FFF1E8;
  list-style: none;
  display: block;
  margin: 0 auto;
  padding: 72px 0 96px;
  position: relative;
}

.list-carousel--box a{
  transition-duration: .4s;
}

.list-carousel--box .carousel-items{
  display: block;
  width: 34.375vw;
  margin-right: 36px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
}

.carousel-items .image-box{
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-items .image-box img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
    object-fit: contain;
}

.carousel-items .text-box{
  /*margin-top: 12px;*/
  padding: 0px 16px 36px;
}
.carousel-items .category{
  font-size: 1.4rem;
  color: #fff;
  background: #FF9600;
  padding: 6px 18px;
  border-radius: 8px;
}
.carousel-items .post-title{
  font-size: 1.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.carousel-items p.item-tit{
  margin-top: 12px;
}
.carousel-items p.item-days{
  font-size: 1.4rem;
  color: var(--maincolor)
}
.page-container.single .post-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.swiper-button-next::after, .swiper-button-prev::after{ font-size: 0; }
.swiper-button-next{
  font-size: 0;
  width: 3.125vw;
  height: 3.125vw;
  max-width: 60px;
  max-height: 60px;
  background: url(./images/btn-next.png)no-repeat;
  background-size: cover;
  right: 8.4375vw;
  transition: .3s;
}
.swiper-button-prev{
  font-size: 0;
  width: 3.125vw;
  height: 3.125vw;
  max-width: 60px;
  max-height: 60px;
  background: url(./images/btn-prev.png)no-repeat;
  background-size: cover;
  left: 8.4375vw;
  transition: .3s;
}

.swiper-slide img{ margin: auto; }
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction{ bottom: 48px; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: 0; }
.swiper-pagination-bullet{ vertical-align: middle; background: #604024; width: 16px; height: 16px; opacity: 1; transition: .3s; }
.swiper-pagination-bullet-active{ 
  background: var(--maincolor);
  /*width: 20px;
  height: 20px;*/
  transform: scale(1.2);
}

.swiper-readmore-linkbtn__box{ width: 80%; max-width: 1366px; margin: -78px auto 0; }
.swiper-readmore-linkbtn__box .common-link-btn01{ margin-left: auto; margin-right: 0; }

/* slideの高さを揃える */
.swiper-slide{ height: auto; }
.swiper-slide .box{ height: 100%; }


/* scroll animation */
@keyframes ScrollAnime_cont02-1 {
  0% {
    opacity: 0;
    transform: translateX(6rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}


/* */
@media screen and (min-width: 821px) {

  .list_background{ background: #FFF1E8; }
  
  .list-carousel--box.swiper {
  overflow: visible;
  }
  .list_CarouselContainer {
    width: 80%;
    max-width: 920px;
    margin: 0 auto;
    overflow: visible;
  }

  .swiper-button-next{ right: -30px; }
  .swiper-button-prev{ left: -30px; }

}




/*===============================================================*/
/* about-container company */


.about-container{ padding: 90px 0; position: relative; }
.about-container .inner{
  width: 80%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-container .representative{ width: 50%; max-width: 540px; position: relative; border-radius: 12px; overflow: hidden; }
/*.about-container .representative::after{
  content: '';
  width: 100%;
  height: 100%;
  background: #FFE0CF;
  border-radius: 12px;
  position: absolute;
  bottom: calc(0px - .8rem);
  right: calc(0px - .8rem);
  z-index: -1;
}*/
.about-container .text-box{ width: 50%; padding-left: 24px; }
/*.about-container p.name{ text-align: right; }*/

.about-container.subpage .text-box{ width: 100%; text-align: center; }


/* animation */
.about-container.AnimeTrigger .representative{
  transform: scale(.9);
  opacity: 0;
  transition: all .3s ease-out;
}
.about-container.AnimeActive .representative{
  transform: scale(1);
  opacity: 1;
}





/*===============================================================*/
/* index-recruit-container recruit */


.index-recruit-container{
  width: 100%;
  margin: 64px auto;
  padding: 90px 0;
  background: url(./images/recruit-background.jpg)no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.index-recruit-container .inner{
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  padding: 54px 24px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  box-shadow: 0px 0px 20px -5px rgba(255,150,0,.4);
}
.loop-wrap01.center{
  top: 50%;
  left: 0;
  z-index: -2;
}

/* animation */
.index-recruit-container .inner{
  transform: scale(.9);
  opacity: 0;
  transition: all .4s ease-out;
}
.index-recruit-container.AnimeActive .inner{
  transform: scale(1);
  opacity: 1;
}



/*=========================================================================================================================*/
/* page */

/* 遷移時のアニメーション */ 
body::after{
  content: '';
  opacity: 0;
}

body.transitionFadeOut::after{
  opacity: 1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--maincolor);
  z-index: 9999;
  pointer-events: none;
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1);
}



.splash-subpage {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--maincolor);
  background: #fff;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}


body.subpage-event{
  background: var(--maincolor);
  background: #fff;
  position: fixed;
}
body.subpage-event.appear{
  position: relative;
	animation-name: subPageAnime;
	animation-duration: .6s;
  animation-delay: .6s;
	animation-timing-function:ease-in-out;
}

@keyframes subPageAnime{
	0% {
    transform: translateY(-5%);
	}
	100% {
    transform: translateY(0);
	}
}

/* spのみ、 */
body.transitionFadeOut_SubPage::after{
  opacity: 1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  pointer-events: none;
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ！test 後ほど修正の後、削除！ */
#container{ background: #fff; overflow: hidden; }


body.none-event{ background: #fff; position: relative; }
#container.none-event{ opacity: 1; }


.page-mainvisual{
  height: 70vh;
  display: flex;
  justify-content: space-between;
}

.page-mainvisual .left-view{
  background: var(--maincolor);
  color: #fff;
  position: relative;
}

.page-mainvisual .left-view .page-mainvisual__logo{
  width: 8.593406593406595vw;
  position: absolute;
  top: 48px;
  left: 36px;
  z-index: 10;
  display: block;
}
.page-mainvisual .left-view .tit-index{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-mainvisual .left-view .eng-tit{
  font-size: 1.8rem;
}
.page-mainvisual .left-view h1.page-head{
  /*font-size: 6.4rem;*/
  font-size: 3.3333333333333335vw;
  white-space: nowrap;
}

.page-mainvisual .right-view{
  position: relative;
  overflow: hidden;
}
.page-mainvisual .right-view img{
  max-width: initial;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 4.8rem;
}
.breadcrumb-list a,
.breadcrumb-list span{
  font-size: 1.3rem;
  color: #fff;
  font-weight: 500;
  padding: 0 2rem;
  position: relative;
}
.breadcrumb-list a:first-child, .breadcrumb-list span:first-child{
  padding-left: 0;
}

.breadcrumb-list a::after,
.breadcrumb-list span::after{
  content: "―";
  width: 0;
  height: 0;
  font-size: 1.2rem;
  position: absolute;
  top: .1rem;
  right: 0;
}
.breadcrumb-list a:last-child::after, .breadcrumb-list span:last-child::after{
  display: none;
}


.blist-container{
  padding: 8px 0;
  background: #FFF;
}
.breadcrumb-list.mainvisual-bottom{
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
}
.breadcrumb-list.mainvisual-bottom a{
  color: var(--maincolor);
  text-decoration: underline;
}
.breadcrumb-list.mainvisual-bottom a:first-child{
  padding-left: 2rem;
}
.breadcrumb-list.mainvisual-bottom a:first-child::before{
  content: "\f015";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--maincolor);
  position: absolute;
  top: calc(50% - 1rem);
  left: 0;
  z-index: 10;
}

.breadcrumb-list.mainvisual-bottom span{
  color: #000;
}


.page-contents01{ padding: 6.4rem 0 10.2rem; text-align: center; }
.page-contents01 h2{ font-size: 3.6rem; color: var(--maincolor); }
.page-contents01 h3{ font-size: 2.4rem; }
.page-contents01 p{ margin-top: 2.4rem; line-height: 3.2rem; }


/* animation */
/*.page-mainvisual.AnimeTrigger h1.page-head{
  transition: opacity .8s ease;
  opacity: 0;
}
.page-mainvisual.animate h1.page-head{
  opacity: 1;
  -webkit-animation: txtAnimeH1 .8s both;
  animation: txtAnimeH1 .8s both;
}
-webkit-@keyframes txtAnimeH1 {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes txtAnimeH1 {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0);
  }
}

.page-mainvisual.AnimeTrigger .eng-tit{
  transition: opacity .8s .6s ease;
  opacity: 0;
}
.page-mainvisual.animate .eng-tit{
  opacity: 1;
  -webkit-animation: txtAnimeSubTxt .8s both;
  animation: txtAnimeSubTxt .8s .6s both;
}
-webkit-@keyframes txtAnimeSubTxt {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes txtAnimeSubTxt {
  0% {
    transform: translateX(6rem);
  }
  100% {
    transform: translateX(0px);
  }
}

.page-mainvisual.AnimeTrigger .breadcrumb-list{
  transition: opacity .8s .6s ease;
  opacity: 0;
}
.page-mainvisual.animate .breadcrumb-list{
  opacity: 1;
  -webkit-animation: txtAnimeBread .8s both;
  animation: txtAnimeBread .8s .6s both;
}
@keyframes txtAnimeBread {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}*/

.page-mainvisual.AnimeTrigger .right-view::after{
  content: '';
  width: 100%;
  height: 100%;
  background: var(--maincolor);
  position: absolute;
  top: 0;
  left: 0;
}
.page-mainvisual.animate .right-view::after{
  -webkit-animation: subPageAnimeImageHidden .9s cubic-bezier(0.25, 1, 0.5, 1) both;
  animation: subPageAnimeImageHidden .9s cubic-bezier(0.25, 1, 0.5, 1) both;
}
-webkit-@keyframes subPageAnimeImageHidden {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes subPageAnimeImageHidden {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


/*===============================================================*/
/* company */

.about-container.subpage{
  padding: 160px 0;
  overflow: hidden;
}

.about-container.subpage .headgroup h2{
  font-size: 2.8rem;
  letter-spacing: .05em;
  margin-bottom: 0;
}
.about-container.subpage .headgroup{
  margin-bottom: 3.6rem;
}
.about-container.subpage .headgroup span.subtit{
  font-size: 1.8rem;
  color: var(--maincolor);
}


.company-table_container{
  width: 100%;
  padding: 90px 0;
  margin: 0 auto 90px;
  background: #FFF5EF;
  text-align: center;
}
.company-table_container .inner{
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
}
.company-table_container h2{
  display: inline-block;
  padding-bottom: 1.2rem;
  margin-bottom: 3.6rem;
  position: relative;
}
.company-table_container h2::after {
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--maincolor);
  position: absolute;
  bottom: 0;
  left: 0;
}

.company-table .items{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 34px 0px 35px;
  border-bottom: 1px solid #dedede;
  font-size: 1.6rem;
}

.company-table .items dt{
  flex: 0 0 180px;
  width: 180px;
  color: #604024;
  font-weight: 600;
}
.company-table .items dd{
  margin: 0 0 0 60px;
  text-align: left;
}

.googleMap-container{
  /*width: 1120px;*/
  width: 100%;
  height: 540px;
  margin: 90px auto 0;
  position: relative;
}
.googleMap-container::after{
  content: '';
  width: 100%;
  height: 100%;
  background: #FFE0CF;
  border-radius: 12px;
  position: absolute;
  bottom: calc(0px - 1rem);
  right: calc(0px - 1rem);
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  z-index: 1;
}
.googleMap-container iframe{
  position: relative;
  z-index: 2;
}
.googleMap-container .iframe-inner{
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}


/* animation */
.company-table_container.AnimeTrigger .inner{
  transform: scale(.9);
  opacity: 0;
  transition: all .4s ease-out;
}
.company-table_container.AnimeActive .inner{
  transform: scale(1);
  opacity: 1;
}

.googleMap-container.AnimeTrigger{
  transform: scale(.9);
  opacity: 0;
  transition: all .4s ease-out;
}
.googleMap-container.AnimeActive{
  transform: scale(1);
  opacity: 1; 
}




/*===============================================================*/
/* works */

/*右から左へ----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*IE11対策----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.company-images {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.company-images__wrap {
  display: flex;
  overflow: hidden;
  padding: 90px 0;
}

.company-images__list {
  display: flex;
  list-style: none;
}

.company-images__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.company-images__item {
  width: calc(100vw / 3);
}
.company-images__item > img{
   width: 100%;
}



/*===============================================================*/
/* works archive */

.works-article_list{
  padding: 60px 0;
  margin-bottom: 90px;
  background: #FFF5EF;
}
@media screen and (min-width: 821px) {

}


.works-article_list .items{
  display: flex;
  align-items: flex-start;
  max-width: 1366px;
  margin: 0 auto 36px;
  padding: 3.2rem;
  background: #fff;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  border-radius: 12px;
}
.works-article_list .items:last-child{
  margin-bottom: 0;
}

.works-article_list .image{
  width: 30%;
  border-radius: 8px;
  position: relative;
}
.works-article_list .image img{
  position: relative;
  z-index: 2;
}
.works-article_list .image::after{
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #FFE0CF;
  position: absolute;
  bottom: calc(0px - 0.6rem);
  right: calc(0px - 0.6rem);
  z-index: 1;
}

.works-article_list .text-box{
  width: 70%;
  padding-left: 3.2rem;
}

.works-article_list .text-box h3{
  display: inline-block;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.works-article_list .text-box h3::after{
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--maincolor);
  position: absolute;
  bottom: 0;
  left: 0;
}

.works-article_list .text-box p{
  line-height: 2.8rem;
  margin-bottom: 3.6rem;
}

.works-article_list .text-box .more-link{
  font-size: 1.6rem;
  font-weight: 600;
  padding-right: 20px;
  padding-bottom: .8rem;
  position: relative;
  transition: .3s;
}

.works-article_list .text-box .more-link::before{
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--maincolor);
  position: absolute;
  top: calc(50% - 1.6rem);
  right: 0;
  z-index: 10;
}

.works-article_list .text-box .more-link::after{
  content: '';
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--maincolor);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .3s;
}


/*===============================================================*/
/* movies archive */

.archive_list__box{
  width: 100%;
  padding: 60px 0;
  margin: 0 auto 90px;
  background: #FFF5EF;
}
.investContents-article_list{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  position: relative;
}
.investContents-article_list::before{
  content:"";
  display: block;
  width: 24.5%;
  order:1;
}
.investContents-article_list::after{
  content:"";
  display: block;
  width: 24.5%;
}
.investContents-article_list .items{
  width: 24.5%;
  background: #fff;
  margin-bottom: 16px;
  border-radius: 12px;
  padding: .8rem;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  transition: .3s ease;
  display: flex;
  flex-direction: column;
}



.investContents-article_list .items .thumbnail{
  cursor: pointer;
}

.investContents-article_list .contents{
  display: block;
  width: 84px;
  font-size: 1.2rem;
  background: var(--maincolor);
  color: #fff;
  text-align: center;
  margin-top: .8rem;
  padding: 2px;
  border-radius: 20px;
}
.investContents-article_list .title{
  margin-top: .4rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #ca5e00;
}
.investContents-article_list .summary{
  margin-top: auto;
  margin-bottom: 0;
  font-size: 1.4rem;
  color: #7b7b7b;
}


/*===============================================================*/
/* Recruit */

.page-contents02 .headgroup.interview{
  width: 80%;
  max-width: 1366px;
  margin: 0 auto -22px;
  text-align: left;
  position: relative;
  z-index: 10;
}

.list-carousel--box.interview p.one-word{
  margin-top: 12px;
  font-size: 1.8rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  flex: 1;
}
.list-carousel--box.interview .position{
  display: inline-block;
  border: 1px solid var(--maincolor);
  color: var(--maincolor);
  font-size: 1.2rem;
  font-weight: 600;
  padding: .6rem;
  margin-top: .8rem;
}
.list-carousel--box.interview p.name{
  margin-top: .6rem;
  font-size: 1.6rem;
}


.entry-container{
  width: 100%;
  margin: 64px auto;
  padding: 90px 0;
  background: url(./images/recruit-background.jpg)no-repeat 50%;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.entry-container::after{
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.entry-container .inner{
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  color: #fff;
}

.entry-container h3{
  margin-top: .8rem;
  margin-bottom: 1.2rem;
  font-size: 2rem;
}
.entry-container .common-link-btn01{
  max-width: 330px;
}


/*===============================================================*/
/* interview */

.page-mainvisual.interview .left-view .tit-index{
  width: 80%;
}

.page-mainvisual.interview h1.one-word{
  font-size: 2.8rem;
  line-height: 3.6rem;
  margin-bottom: 1.2rem;
}
/* animation */
.page-mainvisual.AnimeTrigger h1.one-word{
  transition: opacity .8s ease;
  opacity: 0;
}
.page-mainvisual.animate h1.one-word{
  opacity: 1;
  -webkit-animation: txtAnimeH1 .8s both;
  animation: txtAnimeH1 .8s both;
}

.page-mainvisual.interview .position{
  display: inline-block;
  background: #fff;
  padding: .8rem;
  margin-top: .8rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--maincolor);
}
.page-mainvisual.interview p.name{
  font-size: 3.2rem;
  font-weight: 500;
}

/* animation */
.page-mainvisual.AnimeTrigger .position,
.page-mainvisual.AnimeTrigger p.name{
  transition: opacity .8s .6s ease;
  opacity: 0;
}
.page-mainvisual.animate .position,
.page-mainvisual.animate p.name{
  opacity: 1;
  -webkit-animation: txtAnimeSubTxt .8s both;
  animation: txtAnimeSubTxt .8s .6s both;
}


.interview-container{
  width: 80%;
  max-width: 1366px;
  margin: 90px auto;
}
.interview-container.txt-center{
  text-align: center;
}

.interview-flex-container{
  width: 80%;
  display: flex;
  align-items: flex-start;
}
.interview-flex-container:nth-child(2n){
  flex-direction: row-reverse;
}
.interview-flex-container .flex-item{
  width: 50%;
  position: relative;
}
.interview-flex-container .flex-item:first-child{
  padding-right: 30px;
}
.interview-flex-container:nth-child(2n) .flex-item{
  padding-left: 30px;
  padding-right: 0;
}
.interview-flex-container:nth-child(2n) .flex-item.image{
  padding: 0;
}

.interview-flex-container .flex-item.image::after{
  content: '';
  width: 100%;
  height: 100%;
  background: #FFE0CF;
  border-radius: 12px;
  position: absolute;
  bottom: calc(0px - 1rem);
  right: calc(0px - 1rem);
  z-index: -1;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
}
.interview-flex-container .flex-item.image .cont{
  border-radius: 12px;
  overflow: hidden;
}

/* インタビュー内のテキスト */
.interview-container h2{
  display: inline-block;
  font-size: 2.2rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.interview-container h2::after{
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--maincolor);
  position: absolute;
  bottom: 0;
  left: 0;
}
.interview-container p{
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 400;
}


/* 一日のスケジュール */
.schedule-container{
  width: 100%;
  padding: 90px 0;
  margin-bottom: 90px;
  background: #FFF5EF;
}
.schedule-container .inner{
  width: 80%;
  max-width: 1366px;
  padding: 0 32px 32px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  text-align: center;
}

.schedule-container h2{
  display: inline-block;
  padding: 16px 24px;
  margin-top: -6.4rem;
  margin-bottom: 4.8rem;
  border-radius: 8px;
  color: #fff;
  background: var(--maincolor);
}


.schedule-container .time-box{
  max-width: 820px;
  padding-bottom: 32px;
  margin: 0 auto;
  text-align: left;
  display: -webkit-flex;
  justify-content: space-between;
  position: relative;
}



.schedule-container .time-box dl{
  width: calc(100% - 140px);
}
.schedule-container .time-box dt{
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--maincolor);
  margin-bottom: .8rem;
}
.schedule-container .time-box dd{
  font-size: 1.5rem;
  line-height: 3rem;
}

.schedule-container .time-box time{
  width: 120px;
  padding-top: .6rem;
  padding-right: 50px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.4rem;
  text-align: right;
  color: var(--maincolor);
  position: relative;
}


.schedule-container .time-box time::before{
  content: "";
  width: 42px;
  height: 42px;
  background: var(--maincolor);
  border: solid 3px var(--maincolor);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: -4px;
}
.schedule-container .time-box::before{
  content: "";
  width: 12px;
  height: 100%;
  background: #FFEED5;
  position: absolute;
  top: 0;
  left: 99px;
}
.schedule-container .time-box:last-child::before{
  display: none;
}


/* animation */
.interview-container.AnimeTrigger .flex-item.image{
  transform: scale(.9);
  transition: all .4s ease-out;
}
.interview-container.AnimeActive .flex-item.image{
  transform: scale(1);
  opacity: 1;
}

.schedule-container.AnimeTrigger .inner{
  transform: scale(.9);
  opacity: 0;
  transition: all .4s ease-out;
}
.schedule-container.AnimeActive .inner{
  transform: scale(1);
  opacity: 1;
}


/* interview archive */
.archive_list__box.interview{
  margin-bottom: 0;
}
.interview-article_list{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.interview-article_list a.items{
  width: 31%;
  margin-right: 2.3%;
  margin-bottom: 28px;
  /*padding: 2.4rem;*/
  background: #fff;
  box-shadow: 0px 0px 20px -5px rgb(255,150,0,.3);
  border-radius: 12px;
  overflow: hidden;
  transition: .4s;
}
.interview-article_list a.items:nth-child(3n){
  margin-right: 0;
}

.interview-article_list a.items .text-box{
  padding: 12px 16px 36px;
}
.interview-article_list a.items p.one-word{
  font-size: 1.8rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.interview-article_list a.items .position {
  display: inline-block;
  border: 1px solid var(--maincolor);
  color: var(--maincolor);
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.6rem;
  margin-top: 0.8rem;
}
.interview-article_list a.items p.name{
  margin-top: 0.6rem;
  font-size: 1.6rem;
}


/*===============================================================*/
/* contact */


.form-container{
  width: 100%;
  padding: 90px 0;
  margin: 0 auto 90px;
  background: #FFF5EF;
  text-align: center;
  line-height: 2.8rem;
}
.form-container .inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
}

.contact-ProgressTracker{
  margin: 24px auto 48px;
  position: relative;
}
.contact-ProgressTracker span{
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
  padding-top: 3.4rem;
  opacity: .4;
  padding-right: 24%;
}
.contact-ProgressTracker span.last{
  padding-right: 0;
}

.contact-ProgressTracker span::before{
  content: '';
  width: 3rem;
  height: 3rem;
  color: #fff;
  border-radius: 100%;
  background: var(--maincolor);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.contact-ProgressTracker span.first::before{ content: '1'; }
.contact-ProgressTracker span.second::before{ content: '2'; }
.contact-ProgressTracker span.last::before{ content: '3'; }

.contact-ProgressTracker span::after{
  content: '';
  width: 100%;
  height: 1px;
  background: var(--maincolor);
  position: absolute;
  top: 1.5rem;
  left: 0;
  opacity: 1;
}
.contact-ProgressTracker span.current::after{
  opacity: .4;
}
.contact-ProgressTracker span.last::after{ display: none; }

.contact-ProgressTracker span.current{ opacity: 1; }

.form-container ul{
  width: 58rem;
  margin: 3.2rem auto;
  font-size: 1.4rem;
  text-align: left;
  list-style: disc;
}

.form-container p{
  margin-bottom: 3.2rem;
}
.form-container p a{
  color: var(--maincolor);
  font-weight: 600;
  text-decoration: underline;
}

.form-container .form-wrap p{
  width: 100%;
  margin-bottom: 0;
  text-align: left;
} 


/* form */
.form-wrap{
  width: 80%;
  margin: 48px auto 0;
}

.form-wrap .label-cont{
  /*margin-bottom: 24px;*/
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 36px auto 0;
}
.form-wrap .label-cont:nth-child(6){
  margin-bottom: 0;
}

.form-wrap h3.form-tit{
  font-size: 1.8rem;
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 220px;
  width: 220px;
}
span.required{
  border-radius: 6px;
  margin-left: 8px;
  padding: 8px;
  display: inline-block;
  text-align: center;
  background: #FF2D83;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.4rem;
}


.inputText{
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 6px;
  padding: 8px;
  height: 48px;
  width: 100%;
  background: #eee;
  font-size: 1.4rem !important;
}
#contact_contents{
  height: 216px;
  margin-bottom: 0;
}

.form-btn{
  margin: 0 18px;
  padding: 16px 0;
  width: 210px;
  display: block;
  color: #fff;
  background: var(--maincolor);
  border: 2px solid var(--maincolor);
  border-radius: 48px;
  font-weight: bold;
  letter-spacing: .4rem;
  font-size: 1.8rem;
  text-decoration: none;
  transition: background-color .3s, color .3s, opacity .3s;
}
input.form-btn:disabled{
  background: #ddd;
  border-color: #ddd;
}

/*wordpress用のチェックボックスデザイン*/
.check_area label{
  display: block;
  margin: 12px 0 0;
}
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
}
span.wpcf7-list-item {
  position: relative;
  padding-left: 28px;
  text-indent: -28px;
}
input[type="checkbox"] {
  position: absolute;
  opacity: 0;/*既存のチェックボックスを見えなくする*/
}
.wpcf7-list-item-label::before {/*チェックボックスの枠*/
  content: '';
  border: 1px solid #b9d4e4;
  background: #f5fbff;
  border-radius: 4px;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: -3px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  transition: .3s;
}
.wpcf7-list-item-label::after{
  content: "";
  display: block;
  position: absolute;
  top: 16px;
  left: 1px;
  width: 20px;
  height: 20px;
  background: url("./images/checkbox-checked.png") no-repeat center;
  z-index: 10;
  background-size: contain;
    transition: .3s;
    opacity: 0;
}

input[type="checkbox"]:checked + .wpcf7-list-item-label::before{
    background: var(--maincolor);
    border: 1px solid var(--maincolor);
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {/*チェックアイコン*/
  opacity: 1;
}

.wpcf7-list-item-label a{
  color: var(--maincolor);
  text-decoration: underline;
  font-size: 1.6rem;
}

.session_confirm h3.confirm-tit{
  margin: 0 auto 24px;
  display: inline-block;
}

.wpcf7-not-valid-tip{
  font-size: 1.4rem  !important;
  text-align: left;
  color: #FF2D83 !important;
}
.screen-reader-response p{
  color: #FF2D83;
}
.screen-reader-response ul{
  display: none;
}

.wpcf7-form-control-wrap{ text-align: center; }
.wpcf7-form-control-wrap + br{ display: none; }
.wpcf7-list-item{ margin-left: 0 !important; }

::placeholder {
  color: #aaa;
}

.btn-area p{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.wpcf7-spinner{ display: none !important; }


.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  visibility: hidden;
  height: 0;
}

.form-container h2{
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
  position: relative;
}
.form-container h2::after{
  content: '';
  width: 90px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--maincolor);
  position: absolute;
  bottom: 0;
  left: calc(50% - 45px);
}
.form-container p.caption{
  font-size: 1.4rem;
}
.form-container .common-link-btn01{
  margin-top: 36px;
  padding: 16px 0;
  width: 210px;
  font-size: 1.8rem;
}


/* animation */
.company-table_container.AnimeTrigger .inner{
  transform: scale(.9);
  opacity: 0;
  transition: all .4s ease-out;
}
.company-table_container.AnimeActive .inner{
  transform: scale(1);
  opacity: 1;
}


/*===============================================================*/
/* privacy policy */


.page-container{
  width: 100%;
  padding: 90px 0;
  margin: 0 auto 90px;
  background: #FFF5EF;
  text-align: center;
  line-height: 2.8rem;
}
.page-container .inner{
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
}

.privacy-policy .inner{
  text-align: left;
}
.privacy-policy h2{
  display: inline-block;
  font-size: 2rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--maincolor);
  margin-bottom: 1.2rem;
  margin-left: -2rem;
  padding-left: 2rem;
}

.privacy-policy p{
  margin-bottom: 1.2rem;
}

.privacy-policy ul{
  list-style: disc;
  font-size: 1.6rem;
}
.privacy-policy ol{
  list-style: decimal;
  font-size: 1.6rem;
}
.privacy-policy ol p{
  margin-left: -2rem;
}
.privacy-policy li{
  margin-bottom: 1.2rem;
}

.privacy-policy ol.first{
  margin-left: 2rem;
  margin-top: 3.2rem;
}
.privacy-policy ol.first::marker{
  font-size: 1.8rem;
  font-weight: bold;
}


/* 2階層目 */
.privacy-policy ol.second{
  list-style: none;
}
.privacy-policy ol.second ul{
  padding-left: 1rem;
}

/* 3階層目 */
.privacy-policy ol.third{
  list-style: none;
}
.privacy-policy ol li ol ol{
  padding-left: 2rem;
}

.between-lines{
  margin-bottom: 3.6rem !important;
}

.add-small-txt{
  text-align: right;
  font-size: 1.4rem;
  line-height: 2.2rem;
}

.privacy-policy .add-box{
  background: #FFF5EF;
  padding: 24px;
  margin-bottom: 32px;
  border-radius: 12px;
  text-align: center;
}
.privacy-policy .add-box p{
  margin-bottom: 0;
  line-height: 3.6rem;
}
.privacy-policy p.caption{
}


/*===============================================================*/
/* single */

.page-container.single{
  text-align: left;
}

h2.single-news__title{
  margin-bottom: 24px;
  display: inline-block;
  color: #ca5e00;
}

.single-news__body{
  margin: 24px auto;
}

.single p.item-days{
  color: var(--maincolor);
}

.single-news__postlink-box{
  display: flex;
  justify-content: space-between;
  margin-top: 4.8rem;
}

.single-news__postlink-box a{
  position: relative;
  border-bottom: 2px solid var(--maincolor);
  transition: .4s;
}

.single-news__postlink-box a.prev-link{
  padding-right: 1.4rem;
}
.single-news__postlink-box a.prev-link::after{
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--maincolor);
  position: absolute;
  top: 0;
  right: 0;
}
.single-news__postlink-box a.prev-link:only-child{
  margin-left: auto;
  margin-right: 0;
}


.single-news__postlink-box a.next-link{
  padding-left: 1.4rem;
  padding-right: 0;
}
.single-news__postlink-box a.next-link::before{
  content: "\f104";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--maincolor);
  position: absolute;
  top: 0;
  left: 0;
}



.common-link-btn01.single-news{
  max-width: 220px;
  padding: 1.2rem;
  font-size: 1.6rem;
}


/* 記事一覧 */
.flex--archive__list{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-wrap: wrap;
}
.archive__list-items{
  display: block;
  /*width: 90%;*/
  width: 32%;
  max-width: 920px;
  margin: 0;
  margin-bottom: 1.8rem;
  margin-right: 2%;
  padding: 1.2rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);
  position: relative;
  transition: .3s;
}
.archive__list-items:nth-child(3n) {
  margin-right: 0;
}
/*.archive__list-items::after {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--maincolor);
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}*/
.archive__list-items .image-box{
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}

.archive__list-items .image-box img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
    object-fit: contain;
}



/* ページネーション */
.archive-pagination{
  max-width: 920px;
  margin: 36px auto 0;
  text-align: center;
}
.archive-pagination .wp-pagenavi{
  display: inline-block;
  margin: 0 auto;
  padding: 2px;
  background: #fff;
  border-radius: calc(1.6em);
  border-radius: 120px;
  box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 40%);
}

.archive-pagination .wp-pagenavi .previouspostslink{
  border: none;
  font-size: 2.4rem;
  padding-left: 3.2rem;
  text-decoration: none;
}
.archive-pagination .wp-pagenavi .nextpostslink{
  border: none;
  font-size: 2.4rem;
  padding-right: 3.2rem;
  text-decoration: none;
}
.archive-pagination .wp-pagenavi span,
.archive-pagination .wp-pagenavi a{
  box-sizing: border-box;
  color: var(--maincolor);
  font-size: 1.6rem;
  line-height: 2rem;
  display: inline-block;
  border: none;
  padding: 1.4rem 1.8rem; 
  text-decoration: underline;
}
.archive-pagination .wp-pagenavi .current{
  border: none;
  color: #fff;
  border-radius: 100%;
  background: var(--maincolor);
  position: relative;
  text-decoration: none;
  position: relative;
}
.archive-pagination .wp-pagenavi a.page.larger{
  text-decoration: underline;
}


.archive-pagination .wp-pagenavi .pages{
  display: none;
}


/* 投稿の装飾 */
.page-container.single ul,
.page-container.single ol{
  font-size: 1.6rem;
  list-style: auto;
  padding-left: 1.6rem;
  margin: 1.6rem auto;
}



/* firstview background or size */

.right-view.company{
  background: url("./images/company_image.jpg") no-repeat center;
  background-size: cover;
}

.right-view.service{
  background: url("./images/webkuji_image.jpg") no-repeat center;
  background-size: cover;
}
.right-view.S_merchandising{
  background: url("./images/firstview_CM.jpg") no-repeat right bottom;
  background-size: cover;
}
.right-view.S_asp{
  background: url("./images/kujilab_image.jpg") no-repeat center;
  background-size: cover;
}
.right-view.S_entertainment{
  background: url("./images/higurashi.jpg") no-repeat bottom;
  background-size: cover;
}
.right-view.S_other{
  background: url("./images/other_contents.jpg") no-repeat center bottom;
  background-size: cover;
}

.right-view.recruit{
  background: url("./images/recruit-background.jpg") no-repeat center;
  background-size: cover;
}
.right-view.R_ds{
  background: url("./images/interview/SD01.jpg") no-repeat center top;
  background-size: cover;
}
.right-view.R_ym{
  background: url("./images/interview/YM01.jpg") no-repeat center 45%;
  background-size: cover;
}
.right-view.R_mt{
  background: url("./images/interview/MT01.jpg") no-repeat center top;
  background-size: cover;
}
.right-view.R_yh{
  background: url("./images/interview/YH01.jpg") no-repeat center 30%;
  background-size: cover;
}
.right-view.R_ty{
  background: url("./images/interview/TY01.jpg") no-repeat center top;
  background-size: cover;
}
.right-view.R_th{
  background: url("./images/interview/TH01.jpg") no-repeat center 45%;
  background-size: cover;
}
.right-view.R_rh{
  background: url("./images/interview/RH01.jpg") no-repeat center 45%;
  background-size: cover;
}
.right-view.R_ma{
  background: url("./images/interview/MA01.jpg") no-repeat center 45%;
  background-size: cover;
}



.page-mainvisual.contact-page{ height: 52vh; }
.contact-page .right-view{
  background: url("./images/contact_image.jpg") no-repeat center 40%;
  background-size: cover;
}

.page-mainvisual.archive-page .right-view{ 
  background: url("./images/flat-lay-of-business-concept.jpg") no-repeat center;
  background-size: cover;
 }
 .page-mainvisual.archive-page,
.page-mainvisual.single-page{ height: 52vh; }

.privacy_page .right-view{
  background: url("./images/privacy_image.jpg") no-repeat;
  background-size: cover;
}
.page-mainvisual.privacy_page{ height: 52vh; }




/*=========================================================================================================================*/
/*  (hover: hover) and (pointer: fine) */


@media (hover: hover) and (pointer: fine) {

  #nav-index{ height: 80vh; height: calc(var(--vh, 1vh) * 80); }
  #nav-index li a{ padding: 100px 12px; }


  /* hover action */
  #header-wrapper .head-nav li:hover::after{
    transform: scale(1, 1);
    opacity: 1;
  }
  #header-wrapper .head-nav li:hover a{
    opacity: .6;
  }

  #nav-index li:hover:after{ color: var(--maincolor); }
  #nav-index li:hover .jpn-tit{ color: var(--maincolor); }
  #nav-index li:hover .eng-tit{ color: #000; }

  .position-aware:hover .hover-circle {
    width: 68.75vw;
    height: 68.75vw;
  }

  .scroll-top--btn:hover{
    opacity: .7;
    transform: scale(1.1, 1.1);
  }

  .common-link-btn01:hover{
    background: #fff;
    color: var(--maincolor);
  }

  ul.service-items li:hover{ background: var(--maincolor); transform: scale(1.03); }
  ul.service-items li:hover a{ color: #fff; }
  ul.service-items li:hover .text-box .eng-tit{ color: #fff; }
  ul.service-items li:hover img{ transform: scale(1.1, 1.1); opacity: .7; }
  ul.service-items li:hover .numberplate{ color: #fff; background: var(--maincolor); }

  .list-carousel--box .carousel-items:hover{
    transform: scale(1.04, 1.04);
  }

  .swiper-button-next:hover, .swiper-button-prev:hover{ opacity: .6; transform: scale(1.1); }

  .works-article_list .text-box .more-link:hover{
    opacity: .6;
  }

  .works-article_list .text-box .more-link:hover::after{
    transform: translateY(4px);
  }

  .investContents-article_list .items:hover{
    transform: scale(1.04);
    opacity: .6;
  }

  .interview-article_list a.items:hover{
    transform: scale(1.06, 1.06);
  }

  .archive__list-items:hover{
    transform: scale(1.06, 1.06);
  }

  .form-btn:hover{
    opacity: .6;
  }

  input.form-btn:disabled:hover{
    opacity: 1;
  }

  .single-news__postlink-box a:hover{
    opacity: .6;
  }

}


/*=========================================================================================================================*/
/* media query */

.br-sp{ display: none; }
.sp_breadcrumblist-container{ display: none; }


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


@media screen and (max-width: 1024px) {
  .br-sp{ display: block; }
  .br-pc{ display: none; }
  
  .interview-flex-container{ flex-direction: column; }
  .interview-flex-container:nth-child(2n){ flex-direction: column; }
  .interview-flex-container .flex-item{ width: 100%; }
  .interview-flex-container .flex-item:first-child{ padding: 0; }
  .interview-flex-container:nth-child(2n) .flex-item{ padding: 0; }
  .interview-container .flex-item.image{ width: 90%; margin: 30px auto 0; }


}


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


/* ipad air ~ */
@media screen and (max-width: 820px) {
    /* header */
    #header-wrapper{ width: initial; top: auto; bottom: 12px; right: 12px; }
    #header-wrapper .head-nav{ display: none; }
    .burgerbtn_open{ box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 70%); border-radius: 6px; }
  

    /* top */
    #nav-index ul{ position: relative; flex-direction: column; border: none; }
    #nav-index li{ width: 100%; border-right: none; border: none; }
    #nav-index li a{ padding: 5% 12px; }
    .head-nav--burgermenu .jpn-tit{ font-size: 1.2rem; font-weight: 400; }
    .head-nav--burgermenu .eng-tit{ font-size: 1.8rem; }
    ul.service-items li .text-box h3{ font-size: 1.8rem; line-height: 2.4rem; }


    /* page */
    .page-mainvisual{ flex-direction: column-reverse; position: relative; }
    /*.page-mainvisual .left-view, .page-mainvisual .right-view{ height: 50%; }*/
    .page-mainvisual .left-view .page-mainvisual__logo{ width: 18vw; top: 16px; left: 16px; }
    .page-mainvisual.AnimeTrigger .page-mainvisual__logo{ opacity: 0; transition: opacity .8s; }

    .page-mainvisual.animate .page-mainvisual__logo{
      opacity: 1; 
      -webkit-animation: subPageLogoAnime .8s both;
      animation: subPageLogoAnime .8s both;
    }
    /*-webkit-@keyframes subPageLogoAnime {
      0% { transform: translateY(-6rem); }
      100% { transform: translateY(0px); }
    }
    @keyframes subPageLogoAnime {
      0% { transform: translateY(-6rem); }
      100% { transform: translateY(0px); }
    }
    .page-mainvisual .left-view h1.page-head{ font-size: 3.2rem; }
    -webkit-@keyframes txtAnimeH1 {
      0% { transform: translateY(-6rem); }
      100% { transform: translateY(0px); }
    }
    @keyframes txtAnimeH1 {
      0% { transform: translateY(-6rem); }
      100% { transform: translateY(0px); }
    }
    .page-mainvisual .left-view .eng-tit{ font-size: 1.4rem; }
    -webkit-@keyframes txtAnimeSubTxt {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes txtAnimeSubTxt {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .breadcrumb-list a, .breadcrumb-list span{ font-size: 1.2rem; padding: 0 1.2rem; }
    .breadcrumb-list a::after, .breadcrumb-list span::after{ font-size: 1.2rem; top: 0; right: .6rem; }
    /*-webkit-@keyframes subPageAnimeImageHidden {
      0% { transform: translateY(0) translateX(0); }
      100% { transform: translateY(100%) translateX(0); }
    }
    @keyframes subPageAnimeImageHidden {
      0% { transform: translateY(0) translateX(0); }
      100% { transform: translateY(100%) translateX(0); }
    }*/

    .interview-article_list a.items p.one-word{ font-size: 1.6rem; }
    .interview-article_list a.items .position{ font-size: 1.2rem; }
    .interview-article_list a.items p.name{ font-size: 1.4rem; }


    /* animation layout var1.1 */
    .page-mainvisual{ height: 50vh; position: relative; }
    .page-mainvisual::before{
      content: '';
      background: rgba(106,64,20,.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .page-mainvisual .left-view, .page-mainvisual .right-view{ height: 100%; }
    .page-mainvisual .left-view{ 
      background: transparent;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 200;
      will-change: background-color;
      backface-visibility: hidden;
    }
    .page-mainvisual .left-view .tit-index{ top: 48%; }
    .page-mainvisual .left-view .eng-tit{ font-size: 1.6rem; }
    .page-mainvisual .left-view h1.page-head{ font-size: 3.6rem; }
    .sp_breadcrumblist-container{ z-index: 201; }
    .page-mainvisual.AnimeTrigger .right-view::after{ display: none; }


}


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


/* ipad air only */
@media screen and (min-width:481px) and (max-width:820px) {
  .page-scroll-btn{ display: none; }


  /* common */
  #footer-wrapper p.add{ font-size: 1.2rem; }
  .foot-nav{ align-items: baseline; }



  /* top */
  .company-logo{ width: 140px; }

  #top_fast-view{ height: 60vh; }
  .index-service-container.AnimeTrigger .headgroup,
  .index-service-container.AnimeActive::before,
  .index-service-container.AnimeTrigger ul.service-items{ opacity: 1; animation: none; }
  .index-service-container .inner{ width: 95%; }
  .p.description{ padding-bottom: 0; }

  .about-container .inner{ width: 90%; }
  .about-container .representative{ width: 40%; }
  .about-container .text-box{ width: 60%; }
  .about-container h3{ font-size: 1.8rem; line-height: 2.8rem; }

  .swiper-readmore-linkbtn__box .common-link-btn01{ margin-top: 52px; }
  .swiper-button-next,.swiper-button-prev{ width: 36px; height: 36px; }


  /* page */
  .page-mainvisual .left-view, .page-mainvisual .right-view{ width: 100%; }
  .page-contents01{ width: 90%; margin: 0 auto; }
  .page-contents01 h2{ font-size: 2.8rem; }

  .about-container .inner{ flex-direction: column-reverse; }
  .about-container .text-box{ width: 100%; }
  .about-container .representative{ width: 80%; margin-top: 48px; }

  .works-article_list{ padding: 60px; }
  .works-article_list .items{ flex-direction: column; }
  .works-article_list .image{ width: 520px; margin: 0 auto 36px; }
  .works-article_list .text-box{ width: 100%; }

  .company-images__item { width: calc(100vw / 2.25); }
  

}


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


/* iphone */
@media screen and (max-width: 480px) {
  h3{ font-size: 1.8rem; line-height: 2.8rem; }
  p{ font-size: 1.4rem; }
  .company-logo{ fill: #fff; stroke: #fff; top: 24px; left: 24px; }

  body.Active-fixed{ overflow: hidden; }

  /* header */
  #header-wrapper{ width: initial; top: auto; bottom: 12px; right: 12px; }
  #header-wrapper .head-nav{ display: none; }
  .burgerbtn_open{ width: 48px; height: 48px; box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 70%); border-radius: 6px; margin-top: auto; }
  .burgerbtn_open span{ left: 12px; }
  .burgerbtn_open .burgerbtn_open-area{ width: 48px; height: 48px; }
  .burgerbtn_open span:nth-of-type(1){ top: 14px; }
  .burgerbtn_open span:nth-of-type(2){ top: 24px; }
  .burgerbtn_open span:nth-of-type(3){ top: 34px; }
  .burgerbtn_open.active span:nth-of-type(1){ top: 16px; left: 12px; }
  .burgerbtn_open.active span:nth-of-type(3){ top: 28px; left: 12px; }
  
  #nav-index{ 
    width: 90vw;
    height: calc(var(--vh, 1vh) * 90);
    min-height: 460px;
    top: 5%;
    right: 5%;
  }
  #nav-index ul{ position: relative; flex-direction: column; border: none; padding: 24px 0: }
  #nav-index li{ width: 100%; border-right: none; border: none; }
  #nav-index li::after{ right: 24px; }
  #nav-index li a{ padding: 3.5% 12px; }
  .head-nav--burgermenu .jpn-tit{ font-size: 1.2rem; font-weight: 600; }
  .head-nav--burgermenu .eng-tit{ font-size: 1.6rem; }


  /* footer */
  #footer-wrapper .inner{ flex-direction: column-reverse; }
  #footer-wrapper .inner p{ font-size: 1.2rem; }
  .foot-nav{ margin-bottom: 32px; }
  .foot-nav li{ width: 50%; text-align: left; margin-bottom: 18px; }
  .foot-nav li a{ font-size: 1.2rem; }
  .foot-info .logo{ width: 140px; }


  /* breadcrumb list */
  .breadcrumb-list{ display: none; }
  .sp_breadcrumblist-container.breadcrumb-list{ display: flex; flex-wrap: nowrap; }
  .sp_breadcrumblist-container{ 
    width: 100%;
    padding: 6px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .breadcrumb-list a::after, .breadcrumb-list span::after{ font-size: 1.2rem; top: 0; right: .6rem; }
  .sp_breadcrumblist-container.breadcrumb-list a{ white-space: nowrap; font-size: 1.2rem; }
  .sp_breadcrumblist-container.breadcrumb-list span{
    font-size: 1.2rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
  }
  .breadcrumb-list a, .breadcrumb-list span{ padding: 0 1.2rem; }


  /* top */
  #top_fast-view{ 
    flex-direction: column-reverse;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
  .left-view{ width: 100%; height: 50%; overflow: hidden; }
  .company-logo{ width: 25vw; }
  .tit-contents{ width: 90%; top: calc(50% - 1.8rem); left: 50%; transform: translate(-50%, -50%); text-align: center; }
  .tit-contents .eng-tit{ font-size: 3.4vw; }
  .tit-contents h1.head{ font-size: 7.5vw; }
  .tit-contents h2.phrase{ font-size: 2.4vw; padding-left: 0; }
  .stroke{ width: 84.5vw; height: 20.3125vw; }
  .right-view{ width: 100%; height: 50%; }
  .page-scroll-btn{ left: auto; right: 5%; }
  .page-scroll-btn .circle{ left: -8%; bottom: -4.5%; }

  .loop-wrap01{ display: none; mix-blend-mode: unset; height: 90px; }
  .loop-wrap02{ mix-blend-mode: unset; height: 60px; }

  .headgroup span.subtit{ font-size: 1.8rem; }
  .headgroup h2{ font-size: 2.8rem; }
  .common-link-btn01{ max-width: 180px; font-size: 1.4rem; font-weight: 600; padding: .8rem; margin-top: 24px; }

  .index-service-container .inner{ width: 85%; }
  ul.service-items{ display: block; flex-direction: column; margin-top: 24px; }
  ul.service-items li{ width: 100%; margin-bottom: 24px; }
  ul.service-items li a{ height: auto; }
  ul.service-items li .image{ height: 180px; position: relative; }
  ul.service-items li .image img{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  ul.service-items li .text-box h3{ font-size: 1.6rem; }
  ul.service-items p.description{ padding-bottom: 0; }

  .list-carousel--box{ padding: 48px 24px 96px; }
  .swiper-wrapper{ height: initial; }
  .list-carousel--box .carousel-items{ border-radius: 6px; height: auto; }
  .carousel-items p.item-tit{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .swiper-button-next{ width: 42px; height: 42px; right: 8px; }
  .swiper-button-prev{ width: 42px; height: 42px; left: 8px; }
  .swiper-readmore-linkbtn__box .common-link-btn01{ margin: 54px auto 0; }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 60px; }
  .swiper-pagination-bullet{ width: 8px; height: 8px; }

  .carousel-items .post-title{ font-size: 1.4rem; }

  .about-container{ padding: 42px 0; }
  .about-container .inner{ flex-direction: column-reverse; }
  .about-container .representative::after{ border-radius: 6px; bottom: calc(0px - .6rem); right: calc(0px - .6rem); }
  .about-container .representative{ width: 90%; }
  .about-container .text-box{ width: 100%; padding: 0; margin-bottom: 36px; }
  .about-container h3{ font-size: 1.8rem; }
  .about-container p.name{ font-size: 1.6rem; margin-top: 0; }

  .index-recruit-container{ padding: 64px 0; }
  .index-recruit-container .inner{ width: 90%; }

  .page-scroll-btn{ bottom: -3%; right: auto; left: 50%; transform: translateX(-50%); }
  .page-scroll-btn,.page-scroll-btn::before{ width: 64px; height: 64px; }
  .page-scroll-btn::after{ top: 16%; left: 10px; }
  .page-scroll-btn .circle{ width: 80px; height: 80px; top: -8px; left: -8px; bottom: 0; }
  .page-scroll-btn .arrow{ width: 28px; height: 32px; top: 30%; left: 28.5%; }

  .scroll-top--btn{ right: 16px; }


  /* page */
  .page-mainvisual{ flex-direction: column-reverse; position: relative; }
  /*.page-mainvisual .left-view, .page-mainvisual .right-view{ height: 50%; }*/
  .page-mainvisual .left-view .page-mainvisual__logo{ width: 92px; top: 16px; left: 16px; }
  .page-mainvisual.AnimeTrigger .page-mainvisual__logo{ opacity: 0; transition: opacity .8s; }

  .page-mainvisual.animate .page-mainvisual__logo{
    opacity: 1; 
    -webkit-animation: subPageLogoAnime .8s both;
    animation: subPageLogoAnime .8s both;
   }
   /* 予備 */
   /*-webkit-@keyframes subPageLogoAnime {
    0% { transform: translateY(-6rem); }
    100% { transform: translateY(0px); }
  }
  @keyframes subPageLogoAnime {
    0% { transform: translateY(-6rem); }
    100% { transform: translateY(0px); }
  }
  .page-mainvisual .left-view h1.page-head{ font-size: 3.2rem; }
  -webkit-@keyframes txtAnimeH1 {
    0% { transform: translateY(-6rem); }
    100% { transform: translateY(0px); }
  }
  @keyframes txtAnimeH1 {
    0% { transform: translateY(-6rem); }
    100% { transform: translateY(0px); }
  }
  .page-mainvisual .left-view .eng-tit{ font-size: 1.4rem; }
  -webkit-@keyframes txtAnimeSubTxt {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes txtAnimeSubTxt {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  .breadcrumb-list a, .breadcrumb-list span{ font-size: 1.2rem; padding: 0 1.2rem; }
  .breadcrumb-list a::after, .breadcrumb-list span::after{ font-size: 1.2rem; top: 0; right: .6rem; }
  /*-webkit-@keyframes subPageAnimeImageHidden {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(100%) translateX(0); }
  }
  @keyframes subPageAnimeImageHidden {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(100%) translateX(0); }
  }*/


  /* animation layout var1.1 */
  .page-mainvisual{ height: 55vh; }
  .page-mainvisual.archive-page, .page-mainvisual.single-page, .page-mainvisual.contact-page, .page-mainvisual.privacy_page{ height: 32.5vh; }
  .page-mainvisual .left-view, .page-mainvisual .right-view{ height: 100%; }
  /*.page-mainvisual .left-view{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
  }*/
  .page-mainvisual .left-view .tit-index{ top: 48%; }
  .page-mainvisual .left-view .eng-tit{ font-size: 1.5rem; font-weight: 600; }
  .page-mainvisual .left-view h1.page-head{ font-size: 3.4rem; }
  .sp_breadcrumblist-container{ z-index: 201; }
  .page-mainvisual.AnimeTrigger .right-view::after{ display: none; }


  .page-contents01{ padding: 4.8rem 2.4rem; }
  .page-contents01 h2{ font-size: 2rem; }
  .page-contents01 h3{ font-size: 1.8rem; }
  .page-contents01 p{ line-height: 2.4rem; }

  .company-images__list--left{ animation :infinity-scroll-left 47.5s infinite linear 0.5s both; }

  .about-container.subpage{ padding: 4.8rem 0; }
  .about-container.subpage .headgroup h2{ font-size: 1.8rem; }
  .company-table_container{ padding: 64px 0; }
  .company-table_container .inner{ width: 90%; padding: 32px 24px; }
  .company-table_container h2{ font-size: 2rem; margin-bottom: 2.4rem; }
  .company-table .items{ font-size: 1.4rem; text-align: left; padding: 22px 0; flex-direction: column; }
  .company-table .items dt{ flex: 0; }
  .company-table .items dd{ margin: 6px 0 0; font-size: 1.4rem; }
  .googleMap-container{ margin-top: 32px; height: 240px; }
  .googleMap-container::after{ bottom: calc(0px - .6rem); right: calc(0px - .6rem); }

  .page-contents01.service-subpage p{ margin-top: 0; }
  .company-images__item{ width: calc(100vw / 1.15); }
  .company-images__wrap{ padding-top: 45px; }
  .works-article_list .items{ width: 85%; flex-direction: column; padding: 2.4rem; border-radius: 8px; }
  .works-article_list .image{ width: 100%; margin: 0 auto 32px; }
  .works-article_list .image::after{ bottom: calc(0px - .6rem); right: calc(0px - .6rem); }
  .works-article_list .text-box{ width: 100%; padding: 0; }
  .works-article_list .text-box h3{ padding-bottom: .8rem; margin-bottom: .8rem; }
  .works-article_list .text-box p{ line-height: 2.4rem; }
  .works-article_list .text-box .more-link{ font-size: 1.4rem; }
  .works-article_list .text-box .more-link::after{ height: 3px; bottom: 0px; }

  .archive_list__box{ padding: 36px 0; }
  .investContents-article_list{ width: 90%; }
  .investContents-article_list .items{ width: 48.5%; border-radius: 6px; }
  .investContents-article_list .title{ font-size: 1.4rem; margin-bottom: .8rem; }
  .investContents-article_list .release{ font-size: 1.4rem; }
  .investContents-article_list .summary{ font-size: 1.2rem; }

  .carousel-items .text-box{ padding-bottom: 16px; }
  .list-carousel--box.interview p.one-word{ font-size: 1.4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .list-carousel--box.interview .position{ font-size: 1.0rem; padding: .4rem; }
  .list-carousel--box.interview p.name{ font-size: 1.6rem; }

  .archive_list__box.interview{ padding: 36px 0; }
  .interview-article_list{ width: 95%; }
  .interview-article_list a.items{ width: 48%; margin-right: 2%; margin-bottom: 10px; border-radius: 6px; }
  .interview-article_list a.items:nth-child(2n){ margin-right: 0; }
  .interview-article_list a.items:nth-child(3n){ margin-right: 2%; }
  .interview-article_list a.items .text-box{ padding: 8px 8px 12px; }
  .interview-article_list a.items p.one-word{ font-size: 1.3rem; }
  .interview-article_list a.items .position{ font-size: 1.0rem; padding: .4rem; }
  
  .page-mainvisual.interview h1.one-word{ font-size: 2rem; line-height: 2.8rem; }
  .page-mainvisual.interview p.name{ font-size: 2rem; margin-top: .8rem; }
  .page-mainvisual.interview .position{ font-size: 1.2rem; padding: 0.4rem; } 
  .page-mainvisual.interview .breadcrumb-list{ margin-top: 2rem; }

  .interview-container{ margin: 60px auto; }
  .interview-container h2{ font-size: 1.8rem; }
  .interview-container p{ font-size: 1.4rem; }
  .entry-container .inner{ width: 90%; }
  .entry-container h3{ font-size: 1.6rem; }
  .entry-container .common-link-btn01{ max-width: 280px; }
  .interview-container.AnimeActive .flex-item.image{ width: 100%; margin-top: 24px; }
  .interview-flex-container .flex-item.image .cont{ border-radius: 6px; }
  .interview-flex-container .flex-item.image::after{ border-radius: 6px; bottom: calc(0px - .5rem); right: calc(0px - .5rem); }

  .schedule-container{ margin-bottom: 60px; }
  .schedule-container .inner{ width: 90%; padding: 0 16px 32px; }
  .schedule-container h2{ font-size: 1.8rem; padding: 1.2rem 1.4rem; margin-bottom: 3.2rem; }
  .schedule-container .time-box time{ width: 90px; font-size: 1.4rem; padding-top: 0; }
  .schedule-container .time-box::before{ left: 67px; }
  .schedule-container .time-box dl{ width: calc(100% - 110px); padding-top: 4px; }
  .schedule-container .time-box dt{ font-size: 1.6rem; }
  .schedule-container .time-box dd{ font-size: 1.4rem; line-height: 2.4rem; }
  .schedule-container .time-box time::before{ width: 36px; height: 36px; right: 0; }

  .form-container{ padding: 36px 0; }
  .form-container h2{ font-size: 1.8rem; }
  .form-container p{ text-align: left; }
  .form-container p a{ font-size: 1.4rem; }
  .form-wrap h3.form-tit{ font-size: 1.4rem; }
  .form-container .inner{ width: 90%; padding: 48px 30px; }
  .form-container ul{ width: auto; font-size: 1.2rem; line-height: 2.4rem; }
  .form-wrap{ width: 100%; }
  .form-wrap .label-cont{ flex-direction: column; margin: 18px auto 0; }
  .form-wrap h3.form-tit{ flex: 0; margin-bottom: 12px; }
  .inputText{ padding: 4px; height: 32px; }
  
  span.wpcf7-list-item-label, span.wpcf7-list-item-label a{ font-size: 1.2rem; }
  .wpcf7-form-control-wrap{ text-align: left; }
  span.required{ font-size:1.2rem; line-height: 1.2rem; padding: 6px; }
  .form-btn{ width: 180px; margin: 0 auto; padding: 12px 32px; font-size: 1.6rem; }
  .btn-area p{ flex-direction: column; }

  .privacy-policy .inner { width: 90%; padding: 32px 24px; }
  .privacy-policy ul{ font-size: 1.4rem; }
  .privacy-policy li{ margin-bottom: 0.6rem; }
  .privacy-policy ol.second ul{ padding: 0; font-size: 1.4rem; }
  .privacy-policy ol{ font-size: 1.4rem; }
  .privacy-policy .add-box p{ line-height: 2.4rem; }
  .privacy-policy .add-box p.company{ margin-top: 1.2rem; }

  .page-container.single{ padding: 36px 0; }
  .page-container .inner{ padding: 36px 24px; }
  h2.single-news__title{ font-size: 1.8rem; margin-bottom: 12px; }
  .single-news__postlink-box a{ font-size: 1.2rem; }
  .common-link-btn01.single-news{ margin-top: 24px; max-width: 180px; font-size: 1.4rem; padding: .8rem; }

  .blist-container{ padding: 0; }

  .flex--archive__list{ width: 95%; }
  .archive-pagination{ margin: 28px auto 0; }
  .page-container.single .post-title{ font-size: 1.3rem; line-height: 2.2rem; }
  .archive__list-items{ width: 48%; margin-right: 2%; margin-bottom: 10px; padding: .6rem; border-radius: 6px; }
  .archive__list-items:nth-child(3n){ margin-right: 2%; }
  .archive__list-items:nth-child(2n){ margin-right: 0; }
  .archive-pagination .wp-pagenavi span, .archive-pagination .wp-pagenavi a{ padding: 1rem 1.4rem; }
  .archive-pagination .wp-pagenavi .current{ padding: 1.2rem 1.6rem; }
  .archive-pagination .wp-pagenavi a.page.smaller,
  .archive-pagination .wp-pagenavi a.page.larger{ display: none; }


  ul.service-items li{
    position: relative;
    box-shadow: 0px 0px 20px -5px rgb(255 150 0 / 30%);  
  }
  ul.service-items li .image{ 
    height: 100%;
  }
  ul.service-items li .image img{ 
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }

  ul.service-items li .text-box{
    width: 100%;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: .4s;
  }

  ul.service-items li .numberplate{ top: -2px; left: -2px; border-radius: 0px 0px 36px 0px; padding-right: 4px; padding-bottom: 8px; }
  ul.service-items li .text-box h3{ color: #fff; flex: 0; margin-bottom: 0; }
  ul.service-items p.description{ color: #fff; font-size: 1.2rem; font-weight: 600; margin-top: .8rem; }
  ul.service-items li .text-box .eng-tit,
  ul.service-items li .text-box h3,
  ul.service-items p.description{ opacity: 0; transition: .4s; }

  .service-items li.centered{ transform: scale(1.08); }
  ul.service-items li.centered .text-box{ background: rgba(106,64,20,.6); }
  ul.service-items li.centered .text-box .eng-tit,
  ul.service-items li.centered .text-box h3,
  ul.service-items li.centered p.description{ opacity: 1; }


  /* 追記 */
  .index-recruit-container{ padding: 0; }
  .index-recruit-container .inner{ width: 100%; border-radius: none; background: rgba(106,64,20,.75); color: #fff; padding: 84px 24px; }
  .index-recruit-container p.description{ font-size: 1.3rem; font-weight: 600; }
  .index-recruit-container .inner{
    transform: scale(1);
  }

  /* 追記検討 */
  /*.about-container .inner{ position: relative; }
  .about-container .text-box{ z-index: 10; }
  .about-container.index .representative{ position: absolute; bottom: -14%; right: -4%; }
  .about-container.index.AnimeActive .representative{ opacity: .25; }*/
  .about-container .loop-wrap01{ display: block; }
  .about-container.index .loop-wrap01{ top: 36%; }

}




/* test ふわふわアニメーション */
.experimental{
  display: none;
  width: 100%;
  margin: 90px auto;
  position: relative;
}

.experimental::before{
  content: '';
  width: 373px;
  height: 387.5px;
  background: url(../images/popup_animation.svg)no-repeat;
  background-size: cover;
  position: absolute;
  top: calc(50% - 373px);
  left: calc(50% - 387.5px);
  transform: translate(-50%, -50%);
  animation: fwari ease-in-out 2s infinite alternate;
  -webkit-animation: fwari ease-in-out 2s infinite alternate;
}

@keyframes fwari{
  0%   { transform:translate(0%, 0%); }
  100% { transform:translate(0%, -30px); }
}
@-webkit-keyframes fwari{
  0%   { -webkit-transform:translate(0%, 0%); }
  100% { -webkit-transform:translate(0%, -30px); }
}




.archive__pickup{
  width: 100%;
  padding: 48px 0;
  margin: 64px auto;
  position: relative;
  overflow: hidden;
}

.archive__list-items__pickup{
  width: 920px;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.background_image-box__pickup img{
  filter: blur(20px);
  -webkit-filter: blur(20px);
  height: 45rem;
  width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 5;
}



/* text animation css */
.head-title {
  display: flex;
  overflow: hidden;
  font-family: 'Josefin Sans', sans-serif;
}

.head-title span {
  display: block;
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.head-title.-visible span {
  transform: translate(0, 0);
}

.head-title span:nth-child(2) {
  transition-delay: 0.06s;
}
.head-title span:nth-child(3) {
  transition-delay: 0.12s;
}
.head-title span:nth-child(4) {
  transition-delay: 0.18s;
}
.head-title span:nth-child(5) {
  transition-delay: 0.24s;
}
.head-title span:nth-child(6) {
  transition-delay: 0.30s;
}
.head-title span:nth-child(7) {
  transition-delay: 0.36s;
}
.head-title span:nth-child(8) {
  transition-delay: 0.42s;
}
.head-title span:nth-child(9) {
  transition-delay: 0.48s;
}
.head-title span:nth-child(10) {
  transition-delay: 0.54s;
}
.head-title span:nth-child(11) {
  transition-delay: 0.6s;
}
.head-title span:nth-child(12) {
  transition-delay: 0.66s;
}
.head-title span:nth-child(13) {
  transition-delay: 0.72s;
}
.head-title span:nth-child(14) {
  transition-delay: 0.78s;
}


/* 要素ごとの文字配置の設定 */
.index-service-container .head-title{ justify-content: center; }

.index-recruit-container .head-title{ justify-content: center; }




/* text animation css subPages */
.head-title--sub-pages {
  display: flex;
  overflow: hidden;
  font-family: 'Josefin Sans', sans-serif;
}

.head-title--sub-pages span {
  display: block;
  padding-right: 1.5px;
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.animate .head-title--sub-pages span {
  transform: translate(0, 0);
}

.head-title--sub-pages span:nth-child(2) {
  transition-delay: 0.06s;
}
.head-title--sub-pages span:nth-child(3) {
  transition-delay: 0.12s;
}
.head-title--sub-pages span:nth-child(4) {
  transition-delay: 0.18s;
}
.head-title--sub-pages span:nth-child(5) {
  transition-delay: 0.24s;
}
.head-title--sub-pages span:nth-child(6) {
  transition-delay: 0.30s;
}
.head-title--sub-pages span:nth-child(7) {
  transition-delay: 0.36s;
}
.head-title--sub-pages span:nth-child(8) {
  transition-delay: 0.42s;
}
.head-title--sub-pages span:nth-child(9) {
  transition-delay: 0.48s;
}
.head-title--sub-pages span:nth-child(10) {
  transition-delay: 0.54s;
}
.head-title--sub-pages span:nth-child(11) {
  transition-delay: 0.6s;
}
.head-title--sub-pages span:nth-child(12) {
  transition-delay: 0.66s;
}
.head-title--sub-pages span:nth-child(13) {
  transition-delay: 0.72s;
}
.head-title--sub-pages span:nth-child(14) {
  transition-delay: 0.78s;
}
.head-title--sub-pages span:nth-child(15) {
  transition-delay: 0.84s;
}
.head-title--sub-pages span:nth-child(16) {
  transition-delay: 0.90s;
}
.head-title--sub-pages span:nth-child(17) {
  transition-delay: 0.96s;
}
.head-title--sub-pages span:nth-child(18) {
  transition-delay: 1.02s;
}
.head-title--sub-pages span:nth-child(19) {
  transition-delay: 1.08s;
}
.head-title--sub-pages span:nth-child(20) {
  transition-delay: 1.14s;
}


@media screen and (max-width: 480px) {
  .page-mainvisual .left-view h1.page-head.head-title--sub-pages{
    font-size: 2.8rem;
  }
}