@charset "utf-8";
/* CSS Document */


/*ベース
---------------------------------------------------------------------------*/
*{margin:0;padding:0;letter-spacing:2px;font-family:"Noto Sans JP","游ゴシック";}

body,
p,
ul,
li,
div,
h1 {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}


a {
  text-decoration: none;

}

main {
  width: 100%;
  background: #F6F6F6;
}

footer {
  width: 100%;
}

address{
font-style: normal;
border-top: 1px solid #fff;
font-size: 16px;
}

#container{
width: 1300px;
margin: 0 auto;
padding-top: 180px;
}

.c_inner{
width: 1300px;
margin: 0 auto;
}

.full-width {
    margin: 0 calc(50% - 50vw);
}


.w50{width: 50%;}

.box_inner40{
width: 30%;
margin: 0 auto;
padding: 10% 4%;
}
.box_inner50{
width: 50%;
margin: 0 auto;
padding: 10% 4%;
}

.box_inner80{
width: 80%;
margin: 0 auto;
}

.box_inner90{
width: 90%;
margin: 0 auto;
}

.box_inner95{
width: 95%;
margin: 0 auto;
}


/*余白系まとめ
---------------------------------------------------------------------------*/

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}
.mb150{margin-bottom:150px;}
.mb200{margin-bottom:200px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb100{padding-bottom:100px;}
.pb150{padding-bottom:150px;}
.pb200{padding-bottom:200px;}


.mg_a{margin: 0 auto;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pt150{padding-top:150px;}
.pt200{padding-top:200px;}

.pd2p{padding:4% 2%;}
.pd3p{padding:5% 3%;}
.pd4p{padding:16% 4%;}
.pd5p{padding:5%;}
.pd6p{padding:6%;}
.pd7p{padding:7%;}
.pd8p{padding:8%;}


/*角丸系
---------------------------------------------------------------------------*/

.bd_r10{border-radius: 10px;}
.bd_r20{border-radius: 20px;}
.bd_r30{border-radius: 30px;}
.bd_r40{border-radius: 40px;}
.bd_r50{border-radius: 50px;}
.bd_r60{border-radius: 60px;}
.bd_r70{border-radius: 70px;}
.bd_r80{border-radius: 80px;}
.bd_r90{border-radius: 90px;}
.bd_r100{border-radius: 100px;}

.bd_rr{border-radius: 0px 130px 130px 0px;}
.bd_rl{border-radius: 80px 0px 0px 80px;}
.bd_rbg{border-radius: 0px 130px 0px 0px;}


/*背景色系
---------------------------------------------------------------------------*/

.bg_w{background: #fff;}
.bg_or{background: #FF9326;}
.bg_blc{background: #000;}
.bg_gl{background: #F6F6F6;}

/*ヘッダー
---------------------------------------------------------------------------*/

.l-header {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: #fff;
}


.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;
  border: transparent;
  background-color: transparent;
  cursor: pointer;
}



.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 24px;
  height: 2px;
  transform: translateX(-50%);
  background: black;
  transition: all 0.4s;
}

.c-hamburger span:nth-of-type(1) {
  top: -4px;
}

.c-hamburger span:nth-of-type(2) {
  top: 1px;

  transform: translateX(-0.45deg);
}

.c-hamburger span:nth-of-type(3) {
  top: 6px;
  transform: translateX(-0.45deg);
}



.c-hamburger.is-active span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}

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

.c-hamburger.is-active span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}


.p-header__nav {
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: -100%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: transparent;
  opacity: 0;
  transition: top 0.6s, right 0.6s, opacity 0.6s;
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding: 0 20px;

}

.p-header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 95px;
  height: 100%;
}

.p-header__nav.is-active {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 1;
  background-color: #fff;
}

.p-nav__list {
  display: block;
  padding-right: 20px;
  padding-left: 20px;
}

.p-nav__item {
  position: relative;
  /*width: 100%;*/
}


.p-nav__link {
  color: black;
  display: block;
  padding: 20px;
  width: 100%;
  font-weight: bold;
}



/*テキスト関連
---------------------------------------------------------------------------*/


h1{
font-size: 52px;
font-weight: bold;
}

h2{
font-size: 50px;
font-weight: bold;
}

h3{
font-size: 35px;
font-weight: bold;
}

h4{
font-size: 22px;
font-weight: bold;
}

h5{
font-size: 14px;
font-weight: bold;
}

p{
font-size: 16px;
}

.fc_w{color:#fff;}
.fc_or{color:#FF9326;}
.fc_blc{color:#000;}
.fw_b{font-weight: bold;}

/*下線*/
.h_bb{
    background: #FF9326;
    flex: none;
    height: 1px;
    margin: 0px 0px 40px 0px;
    transform-origin: center left;
    transition-delay: 100ms;
    transition-duration: 1200ms;
    width: 70px;
    max-width: 100%;
}

.f_size16_12{font-size: 16px;}


/*ボタン関連
---------------------------------------------------------------------------*/


a.btn_or {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 200px;
	margin: auto;
	padding: 0.7rem 2rem;
	font-weight: bold;
	border: 2px solid #FF9326;
	background: #FF9326;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
  margin-right: 5px;
}
a.btn_or:hover {
	color: #FF9326;
	background: #fff;
}


a.btn_b {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 200px;
	margin: auto;
	padding: 0.7rem 2rem;
	font-weight: bold;
	border: 2px solid #000;
	background: #000;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
  margin-right: 5px;
}
a.btn_b:hover {
	color: #000;
	background: #fff;
}


a.btn_w {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 150px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #fff;
	color: #FF9326;
	background: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}


/* 006 */
.button006 a {
    background: #FF9326;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 240px;
    padding: 10px 25px;
    color: #fff;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}
.button006 a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}
.button006 a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}
.button006 a:hover:before, .button006 a:hover:after {
    right: -2.5em;
}



.button007 a {
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 240px;
    padding: 10px 25px;
    color: #FF9326;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}
.button007 a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}
.button007 a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}
.button007 a:hover:before, .button007 a:hover:after {
    right: -2.5em;
}


/*スクロール
---------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  top: 10%;
  right: 10%;
}

.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 87px;
  color: #000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#000;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:160px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:2px;
  height: 160px;
  background:#000;
}



/*フレックス　レイアウト
---------------------------------------------------------------------------*/


.flexbox{
  display: flex;
	flex-wrap: wrap;	
	}	

.flexboxb{
  display: flex;
	flex-wrap: wrap;
	
	}

.f_center{
justify-content: center;
}

.fbox_2{
  width: 50%;
	margin-bottom: 25px;
	}
	
.fbox_3{
  width: 33%;
	margin-bottom: 25px;
	}
  
.fbox_3b{
  width: 33%;
	margin-bottom: 25px;
	}

	
.fbox_4{
  width: 25%;
	margin-bottom: 25px;
	}
	
.fbox_5{
  width: 20%;
	margin-bottom: 25px;
	}


.fbox_30{
  width: 30%;
	margin-bottom: 25px;
	}

.fbox_70{
  width: 70%;
	margin-bottom: 25px;
	}

.fbox_40{
  width: 35%;
	margin-bottom: 25px;
	}

.fbox_60{
  width: 65%;
	margin-bottom: 25px;
	}

.fbox_2 img,.fbox_3 img,.fbox_4 img,.fbox_5 img{border-radius: 10px;}


.flex--reverse {
    flex-direction: row-reverse;
}
	



/*配置関係
---------------------------------------------------------------------------*/

.ta_l{text-align: left;}
.ta_c{text-align: center;}
.ta_r{text-align: right;}
.a_i{align-items: center;}


/*表示制御
---------------------------------------------------------------------------*/
.dis_on{display:  inline-block;}

.dis_off{display: none;}

/*ボーダー系
---------------------------------------------------------------------------*/

.bd_r{
border-right: 1px solid #fff;

}

.bd_n{
border:none!important;

}

.bd_b{
border-bottom:1px solid #e6e6e6; 
}


/*新着情報系
---------------------------------------------------------------------------*/


ul.newsList {
display: flex;
flex-flow: row wrap;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}

ul.newsList a{
color: #000;
}

ul.newsList li {
display: block;
margin: 10px 10px;
}



ul.newsList li:nth-child(2) {
color: #fff;
font-size: 12px;
padding: 5px 10px;
text-align: center;
background-color: #FF9326;
border-radius:20px;
}

ul.newsList li:nth-child(3) {
flex-basis: auto;
}



/*リスト系
---------------------------------------------------------------------------*/

ul li{
/*border-bottom: 1px dotted #fff;*/
line-height: 2.3em;
font-size: 16px;
}

ul li a{
color: #fff;
}


/*沿革タイムライン
---------------------------------------------------------------------------*/


.step-wrap2 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content2 {
 padding: 0 0 1.3em 2.3em;
 margin: 0;
 position: relative;
}
.step-content2::before {
 content: "";
 display: block;
 width: 10px;
 height: 10px;
 background: #FF9326;
 border-radius: 50%;
 position: absolute;
 top: 7px;
 left: 0;
}
.step-content2::after {
 content: "";
 display: block;
 height: calc(100% - 17px);
 border-left: solid 5px #bbb;
 position: absolute;
 top: 20px;
 left: 3px;
}
.step-label2 {
 color: #FF9326;
 font-weight: bold;
}
.step-label2::before {
 content: "";
 display: block;
 width: 12px;
 border-top: solid 3px #FF9326;
 position: absolute;
 top: 10px;
 left: 12px;
}

.step-title2 {
 font-weight: bold;
 font-size: 120%;
}
.step-body2 {
 margin-top: .5em;
 padding: 0 0 1em;
}
.step-body2::before {
 content: "";
 height: calc(100% - 35px);
 display: block;
 /* border-left: solid 3px #FF9326;*//**　ちょっと装飾が足りないと思うなら・・・うっとおしいけど　**/
 position: absolute;
 top: 10px;
 left: 21px;
}
.step-body2::after {
 content: "";
 width: 80%;
 display: block;
 /* border-bottom: solid 3px #FF9326;*//**　ちょっと装飾が足りないと思うなら・・・うっとおしいけど　**/
 position: absolute;
 bottom: 22px;
 left: 21px;
}
.step-wrap2 > :last-of-type::after {
 display: none;
}




/*会社プロフィールテーブル
---------------------------------------------------------------------------*/

#table01 th,#table01 td {
border-bottom: 1px solid #dedede;
text-align: left;
}

#table01 th,
#table01 td {
  padding: 24px 0;
}

#table01 th {
  width: 30%;
}





@media screen and (min-width: 1500px) {


  .p-header__hamburger {
    display: none;
  }

  .p-nav__inner {
    margin-right: auto;
    margin-left: auto;
    max-width: initial;
    width: 100%;
  }

  .p-header__nav {
    position: static;
    opacity: 1;
    height: inherit;
    width: initial;
  }

  .p-nav__list {
    padding-right: 0;
    padding-left: 0;
    display: flex;
  }
  
}



@media screen and (max-width: 1300px) {


  #container{
  width: 100%;
  padding-top: 180px;
  }
  
}








/*スマートデバイスブレイクポイント
---------------------------------------------------------------------------*/


@media screen and (max-width: 820px) {

/*レイアウト制御系
---------------*/

  #container{
  width: 100%;
  padding-top: 180px;
  }

 .c_inner{
  width: 100%;
  }

.flexbox{
  display:block;
	}


.flexboxb .fbox_4{
  width: 25%;
	margin-bottom: 25px;
	}

.fbox_2,.fbox_3,.fbox_4,.fbox_5,.fbox_30,.fbox_70,.fbox_40,.fbox_60{
  width: 100%;
	margin-bottom: 25px;
	}
	
.h_box{
padding: 0 4%;
}


.box_inner95 {
    width: 90%;
    margin: 0 auto;
}

.bd_r{
border-right: none;
border-bottom: 1px solid #fff;
padding-bottom: 30px;

}

.w50{width: 90%;}


.l-header ul li {
    /* border-bottom: 1px dotted #fff; */
    line-height: 1em;
    font-size: 16px;
    }


/*表示制御系
---------------*/

.dis_on{display: none;}
.dis_off{display: inline-block;}


/*テキストサイズ
---------------*/

h1{
font-size: 30px;
font-weight: bold;
}

h2{
font-size: 30px;
font-weight: bold;
}

h3{
font-size: 20px;
font-weight: bold;
}

h4{
font-size: 16px;
font-weight: bold;
}

h5{
font-size: 14px;
font-weight: bold;
}

p{
font-size: 16px;
}


address{
font-size: 10px;
}

.f_size16_12{font-size: 12px;}

/*スクロール系
---------------*/


.scroll_down{
  top: 50%;
}



a.btn_b {
margin: 30px 0;
}



/*余白系まとめ
---------------*/


.mb100{margin-bottom:60px;}
.mb150{margin-bottom:80px;}
.mb200{margin-bottom:150px;}

.pb100{padding-bottom:60px;}
.pb150{padding-bottom:200px;}
.pb200{padding-bottom:150px;}


.mg_a{margin: 0 auto;}


.pt100{padding-top:60px;}
.pt150{padding-top:80px;}
.pt200{padding-top:150px;}




.bd_rr{border-radius: 0px 70px 70px 0px;}
.bd_rl{border-radius: 70px 0px 0px 70px;}
.bd_rbg{border-radius: 0px 70px 0px 0px;}


/*テーブル
---------------*/
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }

#table01 th{
border: none;
}


}




/*横揺れ
---------------*/


@media screen and (max-width : 767px){
 html,
 body {
 overflow-x: hidden!important;
 }
}


/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes img1-parts {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes img2-parts {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes img3-parts {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}


/*スライドショーの設定
---------------------------------------------------------------------------*/
/*スライドショー画像を囲むブロック*/
.slide1-parts {
	position: relative;
}

/*画像１枚あたりの共通設定*/
.slide1-parts .img1-parts,
.slide1-parts .img2-parts,
.slide1-parts .img3-parts {
	width: 95%;height: auto;
	animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;
	animation-fill-mode: both;
	animation-delay: 1s;	/*1秒してからアニメーションを開始。初動にガタつきが出やすいので、少しでもふせぐ為。*/
}

/*.img1-partsへの追加設定。*/
.slide1-parts .img1-parts {
	position: relative;
	animation-name: img1-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*img2-partsへの追加設定*/
.slide1-parts .img2-parts {
	animation-name: img2-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*img3-partsへの追加設定*/
.slide1-parts .img3-parts {
	animation-name: img3-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}


/***/

.scroll-space{

  overflow: hidden;
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}