/*======================================================
右側にボタンがスクロールで現れる 「トップへ」など
=======================================================*/

/*「ページトップへ」ボタン　下から現れる*/
/*高さ方向の位置はptop.jsにて定義している*/
#page-top1{
  display: block;
  position: fixed; 
  z-index: 99; 
  bottom: -100px;
  right: 0px;
  width: 70px;
    height: 70px;
/*  background: #06C;*/
  background:no-repeat center url("../images/pagetopB2.png");
  transition: .5s;
    opacity: 0.9;
}
#page-top1 .top {
	font-size:12px;
}
#page-top1 img{
	vertical-align:middle;
	padding-right:5px;
}
/*リンクイメージ透過*/

#page-top1:hover{
  opacity:0.70;
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	-ms-filter: "alpha(opacity=70)";
}

/*reCAPTCHAがある場合*/
#page-top_recaptcha{
  display: block;
  position: fixed; 
  z-index: 99; 
  bottom: -100px;
  right: 0px;
  width: 70px;
    height: 70px;
/*  background: #06C;*/
  background:no-repeat center url("../images/pagetopB2.png");
  transition: .5s;
    opacity: 0.9;
}
#page-top_recaptcha .top {
	font-size:12px;
}
#page-top_recaptcha img{
	vertical-align:middle;
	padding-right:5px;
}
/*リンクイメージ透過*/

#page-top_recaptcha:hover{
  opacity:0.70;
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	-ms-filter: "alpha(opacity=70)";
}




#page-top_toiawase{
  display: block;
  position: fixed; 
  z-index: 99; 
  bottom: -100px; 
  right: 0px;
  width: 70px;
    height: 70px;
/*  background: #06C;*/
  background:no-repeat center url("../images/pagetopB2.png");
  transition: .5s;
    opacity: 0.9;
}
#page-top_toiawase .top {
	font-size:12px;
}
#page-top_toiawase img{
	vertical-align:middle;
	padding-right:5px;
}
#page-top_toiawase hover{
/*  background: rgba(0,6,c,.8);*/
}


/*======================================================
全画面スライドのスクロールを促す表示
=======================================================*/

#page-scroll{
  display: block;
  position: fixed;
    /*position: absolute;*/
  z-index: 10000;
    top: 90vh; 
    right: 10px;
  width: 50px;

  transition: .5s; 
    color: #fff;
    font-size: 12px;
    text-align: center;
}
#page-scroll .top {
	font-size:12px;
}
#page-scroll img{
	vertical-align:middle;
	padding-right:5px;
}
#page-scroll:hover{
/*  background: rgba(0,6,c,.8);*/
}

@media only screen and (max-width:1024px){/*767*/
    #page-scroll{
        display: none;
    }
}


/*======================================================
「問い合わせ」ボタン　常時表示
=======================================================*/

#toiawase_button{
  display: block;
  position: fixed; 
  z-index: 10000; 
  top: 10px; 
  right: 0px;
  width: 70px;
    padding-top: 0;
    height: 70px;
  /*background: rgba(0,39,191,0.80);*/
  transition: .5s;
    opacity: 1;
    text-align: center;
}
#toiawase_button .top {
	font-size:12px;
}
#toiawase_button img{
	vertical-align:middle;

}
/*======================================================
「問い合わせ」ボタン　常時表示 1階層深いところから
=======================================================*/
#toiawase_button2{
  display: block;
  position: fixed; 
  z-index: 10000; 
  top: 10px; 
  right: 0px;
  width: 70px;
    padding-top: 0;
    height: 70px;
  /*background: rgba(0,39,191,0.80);*/
  transition: .5s;
    opacity: 1;
    text-align: center;
}
#toiawase_button2 .top {
	font-size:12px;
}
#toiawase_button2 img{
	vertical-align:middle;

}

/*PC非表示*/
@media only screen and (max-width:1024px){/*767*/
#toiawase_button,#toiawase_button2{
  display:none;
}
}


/*======================================================
「採用問い合わせ」ボタン　常時表示（採用ページ）
=======================================================*/
#saiyou_button_sp{
  display:none;
}
#saiyou_button{
  display: block;
  position: fixed; 
  z-index: 10000; 
  top: 50vh; 
  right: 0px;
  width: 110px;
    padding: 0;
    height: 70px;
  /*background: rgba(3,207,217,0.80);*/
  transition: .5s;
    opacity: 1;
    text-align: center;
	color: #fff;
	font-size:80%;
}
a p.saiyou_button {
	padding: 0.5em;
	background: rgba(3,207,217,0.80);
}
a:hover p.saiyou_button {
	background: rgba(3,236,247,0.80);
}


@media only screen and (max-width:767px){/*767*/
#saiyou_button{
  display:none;
}
#saiyou_button_sp{
  display: block;
  position: fixed; 
  z-index: 10000; 
  bottom: 70px; 
  right: 0px;
  width: 110px;
    padding: 0;
    height: 70px;
  /*background: rgba(3,207,217,0.80);*/
  transition: .5s;
    opacity: 1;
    text-align: center;
	color: #fff;
	font-size:80%;
}
	
a p.saiyou_button_sp {
	padding: 0.5em;
	background: rgba(3,207,217,0.80);
}
a:hover p.saiyou_button_sp {
	background: rgba(3,236,247,0.80);
}	
	
}





/*======================================================
BOXが順にスクロールで現れる
=======================================================*/

/*スタート時は要素自体を透過0にするためのopacity:0;を指定する*/
.box{
	opacity: 0;
}


/*動かしたい動き（今回は” ふわっ” を採用）*/
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}




/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time1{
animation-delay: 0.2s;
}
.delay-time2{
animation-delay: 0.4s;
}
.delay-time3{
animation-delay: 0.6s;
}
.delay-time4{
animation-delay: 0.8s;
}
.delay-time5{
animation-delay: 1s;
}
.delay-time6{
animation-delay: 1.2s;
}

/*-----------------------------------------------------------
/* スクロールで表示 scroll.jsでも設定
------------------------------------------------------------*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1000ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadein_left {
    opacity : 0;
    transform : translate(-100%, 0);
    transition : all 1000ms;
}
.fadein_left.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadein_auto {
    opacity : 0;
    transform : translate(0, 0px);
    transition : all 1000ms;
}
.fadein_auto.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



/*======================================================
ロールオーバーで画像の拡大
=======================================================*/

.zoomIn img{
	transform: scale(1);
	transition: .4s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.05);/*拡大の値を変更したい場合はこの数値を変更*/
	opacity:1;
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/*==================================================
ギャラリースライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/

.gallery li img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#2B5DFF;
	width:33.3333%!important;
list-style:none;
}

.choice-btn li img{
	opacity: 1;/*選択されていないもの*/
}

.choice-btn li.slick-current img{
	opacity: 0.6;/*選択されているものは透過しない*/
}


/*スライド読み込み待ちのアニメーション*/
.loader_text {
	display: none;
/*     margin: 0 auto;
  width: 200px;
  position: relative;
    left:20px;
    top:49%;
    text-align: center;
	color: #fff;*/
}
.sk-fading-circle {
  margin: 0;
  width: 40px;
  height: 40px;
  position: relative;
    left:50%;
    top:50%;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  /*background-color: #333;*/
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}


/*-------------------------------------------
タイピング風に文字が出現　CSSのみで動作
---------------------------------------------*/
.typing-text_homepage_sp{
    display: none;
}
.typing-text_novelty_sp {
    display: none;
}
.typing-text_insatu_sp{
    display: none;
}
.typing-text_kaisya_sp {
    display: none;
}
.typing-text_meisi-huutou-denpyou_sp {
    display: none;
}
.typing-text_orijinalprint-nobori_sp{
    display: none;
}

.typing-text_homepage {
    display: block;
    	position:absolute;
    left:calc(50% - 8em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 30ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  /*font-family: monospace;*/
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_novelty {
    display: block;
    	position:absolute;
    left:calc(50% - 8.5em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 34ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_insatu {
    display: block;
    	position:absolute;
    left:calc(50% - 9em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 38ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2.2s steps(22),
    blink 1s step-end infinite;
}

.typing-text_kaisya {
    display: block;
    	position:absolute;
    left:calc(50% - 13em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 46ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2.5s steps(25),
    blink 1s step-end infinite;
}

.typing-text_meisi-huutou-denpyou {
    display: block;
    	position:absolute;
    left:calc(50% - 11.5em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 44ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2.4s steps(24),
    blink 1s step-end infinite;
}

.typing-text_orijinalprint-nobori {
    display: block;
    	position:absolute;
    left:calc(50% - 10em);/*文字数の半分を引く*/
    top:40vh;/*320px;*/

  width: 42ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 160%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2.3s steps(23),
    blink 1s step-end infinite;
}


@keyframes typing {
  0% {
    width: 0;
  }
}

@keyframes blink {
  100% {
    border-color: transparent;
  }
}

/*-------------------------------------------
背景が伸びて文字が現れる
---------------------------------------------*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}





/*******************************************************
*
*スマートフォン
*
*******************************************************/

@media only screen and (max-width:1024px){/*767*/

/*======================================================
右側にボタンがスクロールで現れる 「トップへ」など
=======================================================*/

/*「ページトップへ」ボタン　下から現れる*/
/*高さ方向の位置はptop.jsにて定義している*/
#page-top1{
  display: block;
  position: fixed; 
  z-index: 99; 
  bottom: -100px; 
  right: 0px;

	width: 70px;
    height: 70px;
/*  background: #06C;*/
  background:no-repeat url("../images/pagetopB2.png");
  transition: .5s;
    opacity: 0.9;
}
#page-top1 .top {
	font-size:12px;
}
#page-top1 img{
	vertical-align:middle;
	padding-right:0px;
}
#page-top1:hover{
/*  background: rgba(0,6,c,.8);*/
}

#page-top_toiawase{
  display: block;
  position: fixed; 
  z-index: 99; 
  bottom: -100px; 
  right: 0px;
  width: 70px;
    height: 70px;
/*  background: #06C;*/
  background:no-repeat url("../images/pagetopB2.png") 0 0;
  transition: .5s;
    opacity: 0.9;
}
#page-top_toiawase .top {
	font-size:12px;
}
#page-top_toiawase img{
	vertical-align:middle;
	padding-right:5px;
}
#page-top_toiawase hover{
/*  background: rgba(0,6,c,.8);*/
}    
/*-------------------------------------------
タイピング風に文字が出現　CSSのみで動作
---------------------------------------------*/
    
.typing-text_homepage{
    display: none;
}
.typing-text_novelty {
    display: none;
}
.typing-text_insatu{
    display: none;
}
.typing-text_kaisya {
    display: none;
}
.typing-text_meisi-huutou-denpyou {
    display: none;
}
.typing-text_orijinalprint-nobori{
    display: none;
}
    
.typing-text_homepage_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 9em);/*文字数の半分を引く*/
    top:200px;
    width: auto;

  /*width: 30ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_novelty_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 8em);/*文字数の半分を引く*/
    top:200px;
    width: auto;

  /*width: 26ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}
    
.typing-text_insatu_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 6em);/*文字数の半分を引く*/
    top:180px;
    width: auto;

  /*width: 22ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_kaisya_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 8.5em);/*文字数の半分を引く*/
    top:180px;
    width: auto;

  /*width: 34ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
    /*border-right: 2px #eee solid;*/
  border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_meisi-huutou-denpyou_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 6.5em);/*文字数の半分を引く*/
    top:180px;
    width: auto;
    /*width: calc(100% - 8em);*/
  /*width: 24ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}

.typing-text_orijinalprint-nobori_sp {
    display: block;
    	position:absolute;
    left:calc(50% - 7.5em);/*文字数の半分を引く*/
    top:180px;
    width: auto;

  /*width: 30ch;/*全角文字数の約2倍の値*/
  white-space: nowrap;
  overflow: hidden;
  /*border-right: 2px #eee solid;*/
    border-right: none;
  font-size: 120%;
    font-weight: bold;
  color: #fff;
    text-shadow: 2px 2px 6px #000, 3px 3px 8px #000;
  animation: typing 2s steps(20),
    blink 1s step-end infinite;
}
    
    
 
}/*スマートフォンここまで*/