@charset "utf-8";

/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
*{ margin:0; padding:0; box-sizing:border-box; }
select option{ padding:0 5px; }
body{ color:#333; background: #fff; font-family: 'Noto Sans JP', sans-serif; line-height:1.8; text-align:center; min-width:1020px; _display: inline;_zoom:1; }
h1 , h2 , h3 , h4 , h5 , h6 , address{ font-style:normal; font-weight:normal; font-size:100%; }
img{ border:0; vertical-align:bottom; }

table{ border-spacing:0; border:0; }
table th{ text-align:left; vertical-align:middle; }
table td{ word-break:break-all; }

.floatR{ float:right; }
.floatL{ float:left; }

.alignL{ text-align:left; }
.alignR{ text-align:right; }
.alignC{ text-align:center; }

.rel{ position:relative; }
.abs{ position:absolute; }


/* clearfix **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.cf:after{ content:" "; display:block; clear:both; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/*a:link , a:visited{ color:#0000ff; text-decoration:underline; }
a:hover{ color:#ff8000; text-decoration:underline; }*/
/*a:hover , a img:hover , input[type=image]:hover{ opacity:0.9; }*/


/* font decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* size */
.fontSS{ font-size:12px; }
.fontS{ font-size:14px; }
.fontL{ font-size:20px; }
.fontLL{ font-size:24px; }

/* color */
.txt-red{ color:#e90000; font-weight:bold; }
.txt-blue{ color:#004bd5; font-weight:bold; }

/*indent */
.idt , ul.assist li , .system li{ padding-left:1.0em; text-indent:-1.0em; }
.idt-half{ padding-left:0.5em; text-indent:-0.5em; }

/*other */
.str{ font-weight:bold; }
.str-reset{ font-weight:normal; }

.underline{ text-decoration:underline; }
.underline-double{ border-bottom:double medium; }

.waveline{ background:url(../images/wave_line.png) repeat-x left bottom; padding-bottom:7px; }
.waveline-red{ background:url(../images/wave_line_red.png) repeat-x left bottom; padding-bottom:7px; }
.waveline-blue{ background:url(../images/wave_line_blue.png) repeat-x left bottom; padding-bottom:7px; }

.marker{background-color:#fff600; }

.dot-txt{ letter-spacing:0.9px; padding-top:10px; background-position:top left -2px; background-repeat:repeat-x; }
.dot-txt.dotM{ background-size:17px 5px; }
.dot-txt.dotL{ background-size:21px 5px; }
.dot-txt.dotLL{ background-size:25px 5px; }
.dot-txt.black{ background-image:radial-gradient(3px 3px at center center,#333,#333 80%,transparent); }
.dot-txt.red{ background-image:radial-gradient(3px 3px at center center,#e90031,#e90031 80%,transparent); }
.dot-txt.blue{ background-image:radial-gradient(3px 3px at center center,#004bd5,#004bd5 80%,transparent); }


/* space **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* padding */
.spt0{ padding-top:0px !important; }
.spt5{ padding-top:5px !important; }
.spt10{ padding-top:10px !important; }
.spt15{ padding-top:15px !important; }
.spt20{ padding-top:20px !important; }
.spt25{ padding-top:25px !important; }
.spt30{ padding-top:30px !important; }
.spt35{ padding-top:35px !important; }

.spb0{ padding-bottom:0px !important; }
.spb5{ padding-bottom:5px !important; }
.spb10{ padding-bottom:10px !important; }
.spb15{ padding-bottom:15px !important; }
.spb20{ padding-bottom:20px !important; }
.spb25{ padding-bottom:25px !important; }
.spb30{ padding-bottom:30px !important; }
.spb35{ padding-bottom:35px !important; }

/* margin */
.smt0{ margin-top:0px !important; }
.smt5{ margin-top:5px !important; }
.smt10{ margin-top:10px !important; }
.smt15{ margin-top:15px !important; }
.smt20{ margin-top:20px !important; }
.smt25{ margin-top:25px !important; }
.smt30{ margin-top:30px !important; }
.smt35{ margin-top:35px !important; }
.smt40{ margin-top:40px !important; }
.smt45{ margin-top:45px !important; }
.smt50{ margin-top:50px !important; }

.smb0{ margin-bottom:0px !important; }
.smb5{ margin-bottom:5px !important; }
.smb10{ margin-bottom:10px !important; }
.smb15{ margin-bottom:15px !important; }
.smb20{ margin-bottom:20px !important; }
.smb25{ margin-bottom:25px !important; }
.smb30{ margin-bottom:30px !important; }
.smb35{ margin-bottom:35px !important; }
.smb40{ margin-bottom:40px !important; }
.smb45{ margin-bottom:45px !important; }
.smb50{ margin-bottom:50px !important; }

.sml0{ margin-left:0px !important; }
.sml20{ margin-left:20px !important; }
.sml30{ margin-left:30px !important; }
.sml50{ margin-left:50px !important; }

.smr0{ margin-right:0px !important; }
.smr20{ margin-right:20px !important; }
.smr30{ margin-right:30px !important; }
.smr50{ margin-right:50px !important; }

/* paragraph */
/*p{ margin:0 50px 30px; }*/
p.lh-reset{ line-height:1.0; }

/* original frame */
.box{ margin:0 25px; }

a:hover{
    opacity: 0.8;
    transition: 0.6s;
}


/* favorite decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
table{ width:calc(100% - 100px); width:-webkit-calc(100% - 100px); border-collapse:separate; border-spacing:1px; background-color:#cdcdcd; line-height:2; font-size:14px; }
/*↑width:calc(100% - boxクラスの左右のmargin); */
table th{ font-weight:bold; background-color:#cdcdcd; width:22%; vertical-align:middle; }
table td{ background-color:#fff; }
table ol{ margin-left:20px; }

table {
    border-collapse: collapse;
    margin: 0 0 1.5em;
    width: 100%
}

/* fadeUp */

.fadeUp , .fadeIn{
animation-name:fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn{
animation-name:fadeInAnime;
}
.contents .main.fadeInTrigger{
animation-duration:5s;
}
.main_txt.fadeInTrigger:nth-child(1){
animation-duration:4s;
}
.main_txt.fadeInTrigger:nth-child(2){
animation-duration:4s;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

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

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



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


/* responsive  **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:block; }
.sp-item{ display:none; }

[class^="pic"]{ float:right; margin:0 50px 20px 20px; }
.inner [class^="pic"]{ float:right; margin:0 0 20px 20px; }

.inner{ padding:20px; background-color:#fff; }
.inner p{ margin:0 0 30px; }
.inner p:last-child{ margin:0; }


/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.wrap{ width:1000px; margin:0 auto; text-align:left; position:relative; }


/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}
body {
  padding-top: 70px;
}
.header{ 	
    /*以下はレイアウトのためのCSS*/
	background:rgba(255,255,255,0.8);
	color:#fff;
	text-align: center;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
}

#nav{
    margin: 0 auto;
	height: 80px;/*高さ指定*/
	width:1000px;/*横幅指定*/
    display: flex;
	justify-content: space-between;
	align-items: center;

}


/*JSを使いfixedクラスが付与された際の設定*/
#nav.fixed{
  position: fixed;/*fixedを設定して固定*/
  z-index: 999;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
}


/*========================*/
nav ul{
list-style: none;
display: flex;
justify-content: center;
}

nav ul li a{
margin-left: 20px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
color: #002f68;
}

nav ul li a:hover{
color: #d66707;
transition: 0.5s;
}

section{
padding:300px 0;
}


/* movie **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.movie-large,.movie-short li{  }

.movie-large{ width:531px; height:auto; margin:0 auto; }
.movie-large .frame{ position:relative; top:0; left:0; width:100%; padding-top:56.25%; }
.movie-large iframe{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:100; }
/*↑ウィンドウサイズに合わせて縦横比固定で縮小させる　padding-top:56.25%;(高さ÷横幅×100) → 16:9のサイズ(9÷16×100=56.25)*/

.movie-short{ width:900px; margin:0 auto; }
.movie-short li{ width:290px; float:left; margin-right:15px; }
.movie-short li:last-child{ margin-right:0; }
.movie-short li .frame{ position:relative; top:0; left:0; width:100%; padding-top:56.25%; }
.movie-short li iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.movie-short li span{ display:block; padding:10px 5px; background-color:#7383b8; text-align:center; }


/* intro **********
///////////////////////////////////////////////////////////////////////////////////////////////*/



/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.contents .main{ background: url("../images/top_img.png")top 80px center no-repeat; }

.main{ height: 850px }
.main .main_txt:nth-child(1){ padding-top: 120px; }
.main .main_txt:nth-child(2){ margin-left: 30px; }
.main_txt{ letter-spacing: 5px; font-weight: 500; color: #002f68; font-size: 26px; padding-left: 30px; }

.txt-box{
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    color: #002f68;
}

.message {
    position: relative;
    width: auto;
    margin: 0 auto;
    height: 800px;
    background: url("../images/mes_img.png")top center no-repeat;
}

.message h2{
    padding-top: 150px;
}
.message .txt-box{
    position: absolute;
    top: 450px;
    left: 55%;
}
.message .pc-item a{
    width: 1129px;
    height: 686px;
    position: absolute;
    top: 0%;
    left: -30%;
    background: url("../images/mes_link.png")top center no-repeat;
}

.movie{
    position: relative;
    background: url("../images/mov_img.png")top center no-repeat;
    height: 1200px;
    padding-top: 100px;
}

.movie .txt-box{
    position: absolute;
    top: 100px;
    left: 150px;
}
.movie .txt-box.mov2{
    position: absolute;
    top: 500px;
    left: 400px;
}


.voice{
    position: relative;
    background: url("../images/voice_img.png")top center no-repeat;
    height: 1400px;
    padding-top: 35px;
}
.voice .txt-box{
    margin-top: 50px;
}
.voice .voice1{
    position: absolute;
    top: 250px;
    left: 150px;
}
.voice .voice2{
    position: absolute;
    top: 550px;
    left: 320px;
}
.voice .voice3{
    position: absolute;
    top: 850px;
    left: 500px;
}


.division{
    padding-bottom: 50px;
    margin-bottom: 100px;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, #cfcfcf 40%, #cfcfcf 100%);
}
.division .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.division .title:before{
    position: absolute;
    top: -20%;
    left:5%;
    content: url("../images/div_illust.png");
}
.division .flex{
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	background: #ffa900;
    padding: 1px 10px;
    text-align: left;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .1s;
    width: 200px;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#002671;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#002671;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.div{
    position: relative;
}
.division .btn{
    position: absolute;
    bottom: -15px;
    right: -15px;
}
.division .div span::before{
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -460%;
    width: 8px;    /* くの字を山なりに見た時、左側の長さ */
    height: 8px;   /* くの字を山なりに見た時、右側の長さ */
    border-top: 1.5px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
    border-right: 1.5px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
    transform: rotate(45deg);
}


.data{
    padding-bottom: 50px;
}
.data .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.data .title:before{
    position: absolute;
    top: -20%;
    left:15%;
    content: url("../images/data_illust.png");
}


/*==================================================
スライダーのためのcss
===================================*/
.slider-bg{
    background: linear-gradient(0deg, transparent 0%, transparent 25%, #cfcfcf 25%, #cfcfcf 100%);
    padding: 30px;

}
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    max-width:1265px;
    margin:0 auto;
}

.slider img {
}

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.slider .slick-slide.slick-center img{
    margin: 0 50px;
}


/*矢印の設定*/

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

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

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

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	padding:100px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border: none;
    border-radius:50%;
    background:#d66707;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#cfcfcf;/*ドットボタンの現在地表示の色*/
}


.recruit .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.recruit .title:before{
    position: absolute;
    top: -10%;
    left:15%;
    content: url("../images/rec_illust.png");
}
/*.recruit .recruit-head{
    margin-bottom: 50px;
    height: 351px;
    background: url("../images/rec_head.png")top center no-repeat;
}*/
.recruit{
    position: relative;
}
.recruit .pc-item a{
    width: 1260px;
    height: 351px;
    margin: 0 auto;
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    /*top: 50%;
    transform: translate(-50%,-50%);*/
    background: url("../images/rec_head.png")top center no-repeat;
}
.recruit .recruit-head{
    height: 351px;
}

.top table,.sub-rec table{ border-spacing:0; border:0; font-size: 16px;}
.top table th,.sub-rec table th{ text-align:left; font-weight: 600; color: #d66707; }
.top table td,.sub-rec table td{ word-break:break-all; }
.top table tr,.sub-rec table tr{ border-top: solid 1px #cdcdcd; }
.top table tr.borderB,.sub-rec table tr.borderB{ border-bottom: solid 1px #cdcdcd; }


.top table,.sub-rec table {
  margin: 20px auto 120px;
  text-align: left;
  background-color: inherit;
  padding-top: 20px;
  border-collapse: collapse;
}

@media screen and (max-width: 768px) {
.company table, .business table {
    width: -webkit-calc(100% - 10px);
}
}


@media screen and (max-width: 414px) {
.company table, .business table {
width: 100%;  
}
}

.top  table th,.top  table th ,.sub-rec  table th,.sub-rec  table th{
  white-space: nowrap;
  width: 180px;
  box-sizing: border-box;
  padding: 0;
  background-color: inherit;
  border: initial;
  vertical-align: baseline;
}

@media screen and (max-width: 768px) {
  .company table th, .business table th {
  width: inherit;
}
}

 .top table td,.top table td ,.top table th, .sub-rec table td,.sub-rec table td,.sub-rec table th {
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  border: initial;
}

 .top table td small,.top   table td small {
  font-size: 11px;
}


/*---------------------------
		footer
----------------------------*/

footer {
  margin-top: 50px;
  background-color: #d66707;
  padding: 40px 10px 15px;
  text-align: left;
}

footer a{ text-decoration: none; }

.footer_tel .footer_icon {
    display: flex;
    justify-content: space-evenly;
    margin-left: 20px;
}

.footer_icon img {
    padding: 5px;
    margin-bottom: 0;
    width: auto !important;
    max-height: 78px;
}

.footer_icon div:nth-child(3) img {
    padding-right: 0;
}

.footer_tel {
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .custom-logo-link img {
    width: 210px !important;
}
.navbar .header-inner {
    padding-left: 10px;
}
  footer {
  margin-top: 0;
  padding: 20px;
    font-size: 2.33333vw;
  }
  .footer_inner h2.logo{
    margin-bottom: 20px !important;
    }
    
  footer dl {
    margin-bottom: 0;
    margin-top: 0;
  }
  footer .footer_inner {
    width: 100%;
    margin: 0 auto;
    min-width: inherit;
}
footer .footer_inner .company_info {
    display: inherit;
}
.footer_tel {
    width: 100%;
}
    .footer_tel .footer_icon {
    width: 100%;
    justify-content: center;
    margin: 0;
}
.footer_icon {
    width: 100%;
}  
    
}

@media screen and (max-width: 414px) {
footer {
  font-size: inherit;
  margin-top: 20px;
  text-align: left;
}
.top footer {
  font-size: inherit;
  margin-top: 0;
}
    

}

.footer_inner {
    max-width: 1000px;
    min-width: 834px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.footer_inner .company_info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 20px;
}

.footer_inner h2.logo a {
    color: #fff;
}
.footer_inner h2.logo {
    font-weight: 600;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
}

.footer_inner h2.logo span {
    font-size: 0.8rem;
    padding-left: 3px;
}
.footer_inner p {
    color: #fff;
}

.footer_inner p.copy {
    text-align: center;
    border-top: 1px solid;
    padding-top: 20px;
}
.footer_tel .tel {
    width: 280px;
    margin: auto 0 ;
}

/*----------------------------------*/


/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
body{ min-width:100%; padding-top: 100px; }


/* font decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* size */
.fontL{ font-size:20px; }
.fontLL{ font-size:24px; }

.dot-txt.dotL{ background-size:19px 5px; }
.dot-txt.dotLL{ background-size:21px 5px; }


/* space **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* paragraph */
p{ margin:0 10px 20px; }

/* original frame */
.box{ margin:0; }


/* favorite decoration **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.card img{ max-width:366px; width:100%; height:auto; }

table{ width:100%; }
table th , table td{ display:block; }
table th{ width:100%; }


/* responsive **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:none!important; }
.sp-item{ display:block!important; }

[class^="pic"],.inner [class^="pic"]{ float:none; margin:0 auto 20px; }

.inner{ padding:20px; text-align:center; }
.inner p{ text-align:left; }

.w100 img{ width:100%; height:auto; }
.w95 img{ width:95%; height:auto; }
.w90 img{ width:90%; height:auto; }
.w80 img{ width:80%; height:auto; }
.w70 img{ width:70%; height:auto; }
/*p img{ max-width:520px; width:100%; height:auto; }*/

.br-reset{ display:none; }
.contents.top p br{ display: none; }


/* wrap **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.wrap{ width:100%; padding:0 10px; position:relative; }


/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* ハンバーガーボタンを押してチェックがONの時だけ
   スマホ用メニューを画面左端に移動する */
#sp-menu__check:checked ~ .sp-menu__content {
  left: 0;
}
/* 変更箇所はコメントの項目のみ */
.sp-menu__content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;

  /* 普段は画面外にするために左端を画面右端の位置にする */
  left: 100%;

  z-index: 90;
  background-color: rgba(0,0,0,0.7);
  
  /* 右端からゆっくり移動するように表示 */
  transition: all 0.5s;
}

/* 以降は前回までの内容 */
header {
  display: block;
  background: none;
  height: 70px;
margin-bottom: 50px;
}
header .main-menu.sp-item img{
    margin-top: 10px;
    width: 180px;
    vertical-align: middle;
}
.main-menu {
  margin: 0 auto;
  display: flex;
}
.pc-menu {
  width: 100%;
}
.pc-menu > ul {
  display: flex;
  list-style: none;
}
.pc-menu > ul > li {
  text-align: center;
  font-size: 16px;
  width: 25%;
}
.pc-menu > ul > li > a {
  display: block;
  text-decoration: none;
  color: #000000;
  line-height: 70px;
}
.pc-menu > ul > li > a:hover {
  background: none;
}
.sp-menu__box {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  height: 70px;
  width: 70px;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background: none;
}
.sp-menu__box span,
.sp-menu__box span:before,
.sp-menu__box span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #d66707;
  position: absolute;
}
.sp-menu__box span:before {
  bottom: 8px;
}
.sp-menu__box span:after {
  top: 8px;
}
#sp-menu__check {
  display: none;
}
#sp-menu__check:checked ~ .sp-menu__box span {
  background: #fff;
}
#sp-menu__check:checked ~ .sp-menu__box span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#sp-menu__check:checked ~ .sp-menu__box span::after {
  top: 0;
  transform: rotate(-45deg);
}
.sp-menu__list {
  padding: 70px 10px 0;
}
.sp-menu__item {
  border-bottom: solid 1px #d66707;
  list-style: none;
}
.sp-menu__link {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
}


/* movie **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.movie-large{ width:100%; }

.movie-short{ width:100%; }
.movie-short li{ width:378px; float:none; margin:0 auto 15px; }
.movie-short li:last-child{ margin:0 auto; }


/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.contents .main{ background: none; }


.main{ height: auto; }
.main .main_txt:nth-child(1){ padding-top: 0; }
.main .main_txt:nth-child(2){ margin-left: 0; }
.main_txt{ text-align: center; margin: 0 auto; letter-spacing: 3px; font-weight: 500; color: #002f68; font-size: 18px; padding-left: 0; }

.txt-box{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    color: #002f68;
}

.message {
    position: static;
    width: 100%;
    margin: 0 auto;
    height: auto;
    background: none;
    background-size: contain;
}

.message h2{
    padding-top: 50px;
}
.message .txt-box{
    position: static;
} 
.movie{
    position: static;
    background: none;
    height: auto;
    padding-top: 100px;
}

.movie .txt-box{
    position: static;
}
.movie .txt-box.mov2{
    margin-top: 30px;
    position: static;
}
    
.voice{
    position: static;
    background: none;
    height: auto;
    padding-top: 100px;
}
.voice .txt-box{
    margin-top: 50px;
}
.voice .voice1{
    position: static;
    margin: 0 auto;
    text-align: center;
}
.voice .voice2{
    position: static;
    text-align: center;
    margin-top: 30px;
}
.voice .voice3{
    position: static;
    text-align: center;
    margin-top: 30px;
}

.division{
    padding-bottom: 50px;
    margin-bottom: 100px;
    background: none;
    padding-top: 100px;
}
.division .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.division .title:before{
    position: absolute;
    top: -20%;
    left:5%;
    content: url("../images/div_illust.png");
}
.division .flex{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    }
    .division .div{
        width: 40%;
        height: auto;
            
    }
    .division .div img{
        width: 100%;
        height: auto;
    }
    
    .division .div:nth-child(3),.division .div:nth-child(4){
        margin-top: 50px;
    }    
/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	background: #ffa900;
    padding: 1px 10px;
    text-align: left;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .1s;
    width: 100%;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#002671;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#002671;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}
    
.data{
    padding-bottom: 50px;
}
.data .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.data .title:before{
    position: absolute;
    top: -20%;
    left:15%;
    content: url("../images/data_illust.png");
}


/*==================================================
スライダーのためのcss
===================================*/
.slider-bg{
    background: linear-gradient(0deg, transparent 0%, transparent 25%, #cfcfcf 25%, #cfcfcf 100%);
    padding: 30px;

}
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    max-width:1265px;
    margin:0 auto;
}

.slider img {
}

.slider .slick-slide {
	transform: scale(0.5);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(0.8);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.slider .slick-slide.slick-center img{
    margin: 0 10px;
}


/*矢印の設定*/

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

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

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

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	padding:100px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border: none;
    border-radius:50%;
    background:#d66707;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#cfcfcf;/*ドットボタンの現在地表示の色*/
}


.recruit .title{
    width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.recruit .title:before{
    position: absolute;
    top: -10%;
    left:15%;
    content: url("../images/rec_illust.png");
}
.recruit .recruit-head{
    margin-bottom: 50px;
    height: auto;
    background: none;
}

.top table,.sub-rec table{ border-spacing:0; border:0; }
.top table th,.sub-rec table th{ font-size: 18px; margin-top: 10px; text-align:left; font-weight: 600; color: #d66707; }
.top table td,.sub-rec table td{ word-break:break-all; }
.top table tr,.sub-rec table tr{ border-top: solid 1px #cdcdcd; }
.top table tr.borderB,.sub-rec table tr.borderB{ border-bottom: solid 1px #cdcdcd; }


.top table,.sub-rec table {
  margin: 20px auto 50px;
  text-align: left;
  background-color: inherit;
  padding-top: 20px;
  border-collapse: collapse;
}
 .top table td,.top table th, .sub-rec table td,.sub-rec table th {
  box-sizing: border-box;
  padding: 0 20px 10px;
  border: initial;
}  



/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* init **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
body{ min-width:300px; }


/* responsive **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.br-sp-reset{ display:none; }


/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/


/* movie **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.movie-short li{ width:100%; }


/* contents **********
///////////////////////////////////////////////////////////////////////////////////////////////*/


}
}