@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Source+Sans+Pro:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

html {
    font-size: 62.5%!important;
}
body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-size: 15px;
    font-size: 1.5em;
}
/*トップページ*/





/*新着情報*/


.info {
position: relative;
}
.info h2{

	position: absolute;
	left: 3%;
	top: -4%;
}

.info div{
display: inline-block;
	width: 100%;
	
	text-align: left;
	margin: 0px auto;
	vertical-align: top;
	position: relative;
}




.info img{
width: 40%;
	margin-top: 20px;

}

.info  ul{
	margin-top: 50px;
overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

}

.info  ul li{
 /* 横スクロール用 */
      display: inline-block;
      width: 40%;
      /* 見た目調整 */
      height: 520px;
     position: relative;
   vertical-align: top;
	text-align: center;
	
}


.info ul li h4{
font-weight: 600;
color:#757171;
	font-size: 1.8rem;

width: 70%;
	margin: auto;
	text-align: left;
}

.info ul li p{
padding-top: 5px;
	white-space:normal;
	display: block;

	margin:10px auto 0px auto;
	font-size: 1.4rem;
	width: 80%;
	text-align: left!important;
	word-break: break-all;
	line-height: 25px;
	
}

.info ul li  h5{
display: block;
	font-weight: 700;
	text-align: center;
	color: #353535;
	margin-top: 20px;
}


.info ul li::before{
content: "";
	width:1px;
	height:430px;
	background-color: #BDBDBD;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 10%;
}


.info ul li:last-of-type::before{
display: none;
}
.info div ul li span{
position: absolute;
	top: 0;
	right: 10%;
	color:#fff;
	font-weight: 600;
	background-color: #969696;
	padding: 3px 15px;
	font-size: 1.2rem;
	border-radius: 20px;
}

.info b{
	position: absolute;
	bottom: -5%;
	right: 5%;
	font-size:2.0rem;
	font-weight: 600;
	color: #5C5C5C;
}

.info b:before, .info b:after{
	content:"";
	display:block;
	-webkit-transform:skewX(45deg);
	transform:skewX(45deg);
	position:absolute;
	right:-30px;
	bottom:6px;
}
.info b:before{
	width:22px;height:3px;
	background:#5C5C5C;
}
.info b:after{
	width:4px;height:8px;
	background:#5C5C5C;
}

.info a{
	background-color: #092D5A;
	color: #fff;
	padding: 5px 20px;
	font-size: 1.4rem;
	font-weight: 500;
	border-radius: 10px;
}

.info a:hover{
	background-color:#2D4E92;
}

/*フッター*/

footer{
	width: 90%;
	margin:100px auto 10px auto;
	box-sizing: border-box;
	border-top: 1px #A9A9A9 solid;
	padding-top: 20px;
}



footer div{
display: inline-block;
	width: 47%;
	text-align: left;
	margin: 0px auto;
	vertical-align: top;
	position: relative;
	text-align: right;
}


footer div:first-of-type{
text-align: left;
}

footer div:first-of-type img{
	width: 65%;
	
}

footer p{
font-size: 1.6rem;
	display:block!important;
	width: 70%;
}


footer h3{
font-size: 1.2rem;
	font-weight: 700;
	color:#7E7E7E; 

	display: inline-block;
	width: 25%;
	text-align: left;
}
footer h2{display:block;
	width: 40%;
	margin-bottom: 20px;
font-size: 1.2rem; font-weight: 600; color:#7F7F7F;text-align: center; line-height: 16px;
}



footer ul{
	margin: 10px 0px 15px 0px;
}


footer ul li{
	display: inline-block;
width: 5%;
	margin-right: 15px;
}


footer small{
color:#7E7E7E; 
}


/*ページ共通項目*/



.page_hed{
width: 90%;
	
	margin: 0 0 auto;
	
height: 30vh;
	

	
	position: relative;
}

.page_hed  h2{
color: #4E4E4E;font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 4.0rem;
	letter-spacing: 20px;
	position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
	
	animation-name: fadeInAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/
;
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}


@keyframes fadeInAnime{
  from {
    opacity: 0;
 
  }

  to {
    opacity: 1;

  }
}


.page_hed  h2::before {
content: "";
 top: -50%;
	height: 1px;
	background-color: #4E4E4E;
	display: block;
		position: absolute;
animation-name: fadeSlideAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/

animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

@keyframes fadeSlideAnime {
 0%{
	 opacity:1;
     width: 0%;
   }
100%{
	 opacity:1;
   width: 150px;
   }
}

.page_hed  h2::after {
content: "company info";
	display:block;
	font-size: 1.8rem;
	letter-spacing: 5px;
	width:100%;
	position: absolute;
top: 150%;
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/

animation-fill-mode:forwards!important;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
 
}


.page_hed  h2.service::after {
content: "service";
	
}


.page_hed  h2.brand::after {
content: "Brand";
	
}

.page_hed  h2.work::after {
content: "Work";
	
}

.page_hed  h2.staff::after {
content: "staff";
	
}

.page_hed  h2.offer::after {
content: "Employment";
	
}

.page_hed  h2.news::after {
content: "News Event";
	
}

.page_hed  h2.privacy_hed::after {
content: "privacy policy";
	
}

.page_hed  h2.mail_hed::after {
content: "contact";
	
}

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

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


.right_pagename{
	font-weight: 400;
	font-size: 1.4rem;
	color:#4B4A4A;
	letter-spacing: 2px;
	position: fixed;
    top: 50%;
    right:3.5%;
   
	transform: rotate( 90deg );
	
}

/*会社概要*/


.company_info{
	width: 90%;

	margin: 0 0 auto;
	
}

.company_info table{
font-size: 1.6rem;
	margin:50px auto;
	width: 90%;
  border-collapse:  collapse; 

}
.company_info table th{
padding: 30px 0px  30px 30px; 
	text-align: left;
	letter-spacing: 10px;
width:14%!important;
font-weight: 500;

}

.company_info table td{
		padding-left:20px;
	text-align: left;

}

.company_info table td,.company_info table th{
	border-bottom: 1px  #BFBFBF solid;
	
}


.company_info table tr:last-of-type th ,.company_info table tr:last-of-type td{
	border-bottom: none;
	
}

/*沿革*/

.history{
	width: 90%;
	padding: 50px 0px 0px 0px;
	position: relative;
}

.history h3{
	position: absolute;
	top:-10px;
	left: 5%;
	font-size:4.0rem;
	font-weight: 300;
	color:#989898;
	letter-spacing: 50px;
}


.history table{
font-size: 1.6rem;
	margin:50px auto;
	width: 90%;
  border-collapse:  collapse; 
}

.history table th{
font-weight: 500;
	color: #5D5D5D;
width:13%;
	border-right: 1px #DBDBDB solid;
	vertical-align: top;

}

.history table td{
	padding:2px 0px 30px 20px;
	vertical-align: top;
line-height: 160%;
}




/*サービス*/

.service_inner{
	width: 90%;
	padding: 0px 0px 0px 80px;
	margin-bottom: 50px;
	position: relative;
}



.service_inner div h3{
padding: 0;
line-height: 130%;
	font-size:3.5rem;
	font-weight: 500;
	color:#989898;
	letter-spacing: 10px;
	
}


.service_inner div h2{

	font-size:2.5rem;
	font-weight:600;
	color:#323232;
	letter-spacing:2px;
}
.service_inner div{
width: 100%;
margin-top: 150px;
}


.service_inner div:first-of-type{
margin-top: 80px;
}


.service_inner div div.service_info{
	
  display: flex;
margin: 50px auto 0px 0;
flex-wrap: wrap;
width: 90%;
height: auto;

}


.service_inner div span{
	display: inline-block;
vertical-align: top;
width: 50%;
	margin-right:40px;
	font-size: 2.0rem;
	font-weight: 300;
	line-height: 146%;
}

.service_inner div span:nth-of-type(2n){

width: 43%;

}


.service_info h4{
	color:#454545;
	letter-spacing: 1px;
	font-weight: 700;
	margin:50px 0px 10px 0px;
font-size: 1.8rem;
}

.service_info ul{
	list-style: none;

}


.service_info ul li{
font-weight: 600;
font-size: 1.6rem;
color: #262626;
border-bottom: 1px #BABABA solid;
padding-bottom: 2px;
margin-bottom: 20px;
}

.service_inner div span:nth-of-type(2n) ul li{

	
border-bottom:  none;
	
	
}
.service_info ul li a{
color: #262626;
}

.service_info ul li a:hover{
color:#828282;
}

.sp_br,.sp_br02{
display: none;
}


/*====================================================================
slick
====================================================================*/



.sliderArea {
	max-width: 100%;
margin: 0 auto!important;
	padding: 0 25px;
	
}

.sliderArea div{
margin: 0!important;
}

.slick-slide {
	margin: 0 5px;
}
.slick-slide img {
	width: 100%;
	height: auto;
	margin:0!important; 
}
.slick-prev, .slick-next {
	z-index: 1;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}
.slick-active {
	opacity: 1;
}
.slick-current {
	opacity: 1;
}
.thumb {
	margin: 20px 0 0;
}
.thumb .slick-slide {
	cursor: pointer;
}
.thumb .slick-slide:hover {
	opacity: .7;
}


/*=======================
スタッフ紹介
========================*/

.staff_info{
	width:100%;
text-align: center;

}

div.staff_main {
	
	width: 100%;

	text-align: center;
}

div.staff_main img{
	
	width:82%;

}

div.staff_main h4{
display: block;
font-size: 4.2rem;
font-weight: 600;
margin:20px 0 10px 0px!important;
letter-spacing:30px;
	color: #585858;
}

div.staff_main h5{
	display: block;
font-size:2.8rem;
font-weight: 400;
	letter-spacing:5PX;
	margin: 0!important;
	color: #585858;
}

div.staff_info span div.box{
	
	
  width: 90%;
  margin: 0 auto 10px auto;

  position: relative;
 
	
}

.staff_info h4{
	display: block;
font-size: 1.8rem;
	height: auto;
	
	margin: 10px 0px -15px 0px;
	color: #585858;
	
}
.staff_info small{
		display: inline-block;
	padding: 0 0 10px 10px;
font-size: 1.4rem;
	color: #585858;
	font-weight: 400;
}

.staff_info h5{
font-size:1.6rem;
font-weight: 500;
	margin: 0px 0px 0px 0px;
	color: #585858;
	line-height: 22px;
}


.staff_info p{
	  width: 90%;
font-size:1.6rem;
font-weight: 500;
	margin: 5px auto 0px auto;
	color: #868686;
	text-align: left;
}


.staff_info p b{
	  width: 100%;
display: block;
	text-align: center;
	margin: 40px 0px;
	font-size:2.0rem;
	letter-spacing:3px;
		line-height: 28px;
}

.staff_info span{
	display:inline-block;
	width:40%!important;
	margin:0px 30px 80px 0px;
	text-align: center;
	background-color:#fff!important;
}


/* 新着序情報*/
.archive{
	
	width: 100%;
	margin:3% auto 3% 5%!important;

	box-sizing: border-box;
}


.accordion-container {
  position: relative;
width: 85%!important;
  border: 1px solid #03153B;
  border-top: none;
  outline: 0;
  cursor: pointer;
	padding:0;
margin:0!important;
}

.accordion-container .accordion-title,.accordion-container .accordion-title_top {
  display: block;
  position: relative;
  margin: 0 auto 0 0;
  padding: 0.625em 0.625em 0.625em 2em;
  font-size: 2.2rem;
  font-weight: normal;
  color: #fff;
  background:#03153B;
	cursor: pointer;
width:100%;
	box-sizing: border-box;
}

.accordion-container .accordion-title:hover,.accordion-container .accordion-title_top:hover,
.accordion-container .accordion-title:active,.accordion-container .accordion-title_top:active,
.accordion-container .content-entry.open .accordion-title,.accordion-container .content-entry.open .accordion-title_top {
  background-color: #020B1F;
  color: white;
}

.accordion-container .accordion-title:hover i:before,.accordion-container .accordion-title_top:hover i:before,
.accordion-container .accordion-title:hover i:active,.accordion-container .accordion-title_top:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}

.accordion-title,.accordion-title_top{
  position: relative;
	font-weight: 700;
	color: aquamarine;
}


.accordion-title small{
 margin-left: 50px;
}

.accordion-title:after,.accordion-title_top:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
	
.accordion-title_top:after {

  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

	.accordion-title_top.open:after {

  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}



.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

	
	.accordion-content_top {
  display: block;
	
   padding:0px  2.3125em 20px  2.3125em;
	
}
.accordion-content {
  display: none;
  padding:20px  2.3125em 20px  2.3125em;
	font-size: 1.8rem;
	
}

.accordion-content img{
	display: block;
margin:10px auto 30px auto;
	width:40%;
	
}


.accordion-content a{
text-decoration: underline;
	font-weight: 700;
	
}

/* CSS for CodePen */
.accordion-container {
  width: 300px;
  margin: 1.875em auto;
}




/*プライバシーポリシー*/


.privacy_wrap{
	width: 90%;

	margin: 0 0 auto;
	
}

.privacy  {

	margin:50px auto;
}

.privacy ul {
	width: 90%;

	font-size: 0;
	margin:20px auto 0px auto;
}

.privacy  ul li{

	text-align: left;
list-style:decimal-leading-zero;
	font-size: 1.8rem;
	margin-bottom:35px;
	font-weight: 600;
	color: #4C4B4B;
}



.privacy  ul li ul {

	
	padding: 0;
	margin: 0;
	
}
.privacy ul li ul li{
list-style:disc;
	
	font-weight: 600;
	padding: 0;
	margin: 0;
		
}

.privacy  ul li p{
width: 95%;
	line-height: 25px;
	font-size: 1.6rem;
	text-align: left;
	font-weight: 500;
	padding: 10px 0px;
	
}



/*問い合わせ*/

.contact{
	width: 90%;

	margin: 0 0 auto;
	
}
.iframe-map02 {
  position: relative;
  padding-bottom: 68%;
  height: 0;
  overflow: hidden;
	margin-top: 50px;
}

.iframe-map02 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}