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

@import "default.css";

/*******************

LP style

********************/
/* base */
/* font
--------------------------------------------------*/
html {
  font-size: 16px;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#101010;
  line-height:1.5em;
  /*   min-width: 1200px; */
  margin: 0 auto;
}
a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  display: block;
}
a:hover{
  /*   text-decoration: underline; */
}
.hover:hover {
  opacity: .6;
}
span {
  font-size: inherit;
  font-weight: inherit;
}
.pc-main {
  max-width: 1200px;
  margin: 0 auto;
}
.h-pc {
  width: 1200px;
  margin: 10px auto 0;
  height: 90px; 

  display: flex;
  justify-content: center;
  align-items: center;
}
.h-pc h1 {
  width: 135px;
  display: inline-block;
  float: left;
  margin-right: 34%;
}

.h-pc h1:nth-child(odd) {
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}
.h-pc h1:nth-child(even) {
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
}

.h-pc h1　a {
  -webkit-animation: vertical 1s ease-in-out infinite alternate;
}

.h-pc h1 a {
  -webkit-animation-duration: 1.1s;
}

@-webkit-keyframes horizontal1 {
  0% { -webkit-transform:translateY( -9px); }
  100% { -webkit-transform:translateT( 0px); }
}

.h-pc ul {
  display: inline-block;
  float: right;
}
.h-pc ul li {
  width: 78px;
  margin-right: 50px;
  display: inline-block;
}
.h-pc ul li:first-child a {
  padding: 0 0 5%;
  outline: 1px solid red;
}
.h-pc ul li:last-child {
  margin: 0;
}
.h-pc nav ul li a {
  color: #d4aa00;
  font-weight: bold;
  font-size: 18px;
  display: block;
  text-align: center;
  line-height: 18px;
}
.h-pc nav ul li:first-child {
  margin-bottom: 8px;

}
.h-pc nav ul li a:hover {
  color: #50ab0b;
  /*   border-bottom: 1px solid #50ab0b; */
}
.h-pc nav ul li a:hover span {
  color: #9bd17d;
}
.h-pc nav ul li a span {
  color: #edc82e;
  display: block;
  font-size: 11px;
}
.n-nav a {
  color: #50ab0b!important;
  border-bottom: 1px solid #50ab0b;
}
.n-nav a span {
  color: #9bd17d!important;
}

.btn__box {
  position: relative;
  overflow: hidden;
}
.btn__box a {
  display: block;
}
.btn__box:before,
.btn__box:after,
.btn__box a:before,
.btn__box a:after {
  content: '';
  position: absolute;
  background: #50ab0b; /*線の色*/
}
/* ホバー時のアニメーション指定 */
.btn__box:hover:before {
  animation: leftAnim 1s linear 0s infinite;
}
/* 下のボーダー */
.btn__box:before {
  bottom: 0;
  left: -200px;
  width: 200px;
  height: 1px;
}
/* 各アニメーション */
@keyframes leftAnim {
  0% {left:-200px;}
  100% {left:200px;}
}

#ocean1{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80%;
  background:-moz-linear-gradient(top, #ddbb33, #ddbb33);
  background:-webkit-linear-gradient(top, #ddbb33, #ddbb33);
  background:-o-linear-gradient(top, #ddbb33, #ddbb33);
  background:linear-gradient(to bottom, #ddbb33, #ddbb33);
}
#ocean2{
  opacity: .5;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80%;
  background:-moz-linear-gradient(top, #e8c848, #e8c848);
  background:-webkit-linear-gradient(top, #e8c848, #e8c848);
  background:-o-linear-gradient(top, #e8c848, #e8c848);
  background:linear-gradient(to bottom, #e8c848, #e8c848);
}
.wave1{
  background:#d4aa00;
  display:inline-block;
  height:60%;
  width:10px;
  position:absolute;
  -webkit-animation-name:dostuff;
  -moz-animation-name:dostuff;
  -ms-animation-name:dostuff;
  animation-name:dostuff;
  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  -ms-animation-duration:3s;
  animation-duration:3s;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -ms-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-transition-timing-function:ease-in-out;
}
.wave2{
  background:#d4aa00;
  display:inline-block;
  height:60%;
  width:10px;
  position:absolute;
  -webkit-animation-name:dostuff;
  -moz-animation-name:dostuff;
  -ms-animation-name:dostuff;
  animation-name:dostuff;
  -webkit-animation-duration:6s;
  -moz-animation-duration:6s;
  -ms-animation-duration:6s;
  animation-duration:6s;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -ms-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-transition-timing-function:ease-in-out;
}

@keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-ms-keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-webkit-keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-moz-keyframes dostuff /* Firefox */{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

.h-pc nav ul li {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.h-pc nav ul li:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.3s 1 forwards;
  animation: example 0.5s ease 0.3s 1 forwards;
}

.h-pc nav ul li:nth-child(2) {
  -webkit-animation: example 0.5s ease .6s 1 forwards;
  animation: example 0.5s ease .6s 1 forwards;
}

.h-pc nav ul li:nth-child(3) {
  -webkit-animation: example 0.5s ease .9s 1 forwards;
  animation: example 0.5s ease .9s 1 forwards;
}

.h-pc nav ul li:nth-child(4) {
  -webkit-animation: example 0.5s ease 1.2s 1 forwards;
  animation: example 0.5s ease 1.2s 1 forwards;
}

.h-pc nav ul li:nth-child(5) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/* .sample-text1 {
font-weight: bold;
animation-name: fadein;
animation-duration: 2s;
} */
/* @keyframes fadein {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} */

.typ {
  opacity: 0;
}
.typ span {
  opacity: 0;
}

/* 基本のスタイル */
.foo.delighter {
  animation-name: fadein;
  transition: all 2s ease-out;
  opacity: 0;
  transform: translateY(20px);
}

/* スタート時のスタイル */
.foo.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}


.foo.delighter.started.ended {
  /*       border: solid red 10px; */
}


/* 基本のスタイル */
.ph1.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}

/* スタート時のスタイル */
.ph1.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

.ph1.delighter.started.ended {
  /*       border: solid red 10px; */
}


/* 基本のスタイル */
.ph2.delighter {
  animation-name: fadein;
  transition: all .3s ease-out;
  transform: translateY(20px);
  opacity: 0;
}

/* スタート時のスタイル */
.ph2.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

/* エンド時のスタイル */
.ph2.delighter.started.ended {
  /*       border: solid red 10px; */
}

/* 基本のスタイル */
.aki.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}

/* スタート時のスタイル */
.aki.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

/* エンド時のスタイル */
.aki.delighter.started.ended {
  /*       border: solid red 10px; */
}

/* 基本のスタイル */
.me-text.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}

/* スタート時のスタイル */
.me-text.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

/* エンド時のスタイル */
.me-text.delighter.started.ended {
  /*       border: solid red 10px; */
}

/* 基本のスタイル */
.do-box.delighter {
  transition: all .3s ease-out;
  transform: translateY(100%);
  opacity: 0;
}

/* スタート時のスタイル */
.do-box.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

/* エンド時のスタイル */
.do-box.delighter.started.ended {
  /*       border: solid red 10px; */
}


/* ---------------------- */
/* contents */
#contents #fv {
  background: url(../images/sp/sp_fv_bg.png) no-repeat center top;
  background-size: 100%;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  z-index: 999;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}
#contents #fv h1 {
  font-size: 30px;;
  line-height: 1.686;
  text-align: center;
  text-shadow: -0.313px 1.975px 8px rgba(155, 124, 0, 0.32);
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 16% 0;
  letter-spacing: .3em;
  position: relative;
  z-index: 999;
}

.enclosure-box {
  width: 95%;
  margin: 0 auto 0;
}
/* service */
#service {
  text-align: center;
  margin: 0 auto 10%;
}
#service .sub-text {
  font-size: 18px;
  line-height: 40px;
  margin-bottom: 4%;
}
.h-ttl h2 {
  font-weight: bold;
  color: #d4aa00;
  font-size: 16px;
}
.h-ttl h3 {
  font-size: 30px;;
  font-weight: bold;
  padding: 1% 0;
}
.h-ttl .ttl-icon {
  width: 5%;
  margin: 0 auto 3%;
}
.detail-btn {
  text-align: center;
  margin: 0 auto;
  background: #d4aa00;
  box-shadow: -0.313px 1.975px 8px 0px rgba(155, 124, 0, 0.43);
  width: 333px;
  /*   padding: 2%; */
  transition-duration : .6s;
}
.detail-btn:hover {
  transition-duration : .6s;
  border-radius: 38px;
}
.detail-btn a {
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}


.bd-line {
  background: url(../images/sp/line_icon.png) repeat-x;
  width: 100%;
  height: .2em;
}

/* philosophy */
#philosophy {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  padding: 3% 0 3%;
  background: #f2f1f1;
}
#philosophy .logo-box {
  width: 456px;
  margin: 0 auto 5%;
}
.philosophy-box {
  position: relative;
  background: url(../images/sp/star_bg_2.png) no-repeat top right;
  /*! background-size: 30%; */
  background-position: 100% 0;
  margin: 0 auto 5%;
  width: 460px;
}
.enclosure-box ul li p {
  display: inline-block;
}
.enclosure-box ul li {
  width: 100%;
  margin-bottom: 1%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.enclosure-box ul {
  margin: 0 auto;
  width: 460px;
}
/*   message */
#message {
  text-align: center;
  margin: 3% auto;
}
#message .akimoto-img {
  width: 256px;
  margin: 0 auto 5%;
  position: relative;
  display: block;
}
#message .message-comment {
  text-align: left;
  width: 630px;
  margin: 0 auto;
  line-height: 32px;
}
#message h4 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 2%;
}
#message .mane-box {
    width: 630px;
    background: #d4aa00;
    color: #fff;
    margin: 6% auto;
    padding: 2% 0;
    margin-top: 4%;
    margin-bottom: 3%;
    position: relative;
    text-align: center;
}
#message .mane-box .mane-text {
  display: block;
  font-weight: bold;
}
#message .mane-icon {
  position: absolute;
  bottom: -18%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 5%;
}
.beige {
  color: #d4aa00;
}
.bold {
  font-weight: bold;
}

/* company */
#contents #company #fv {
  background: url(../images/common/company_fv.jpg) no-repeat center top;
  background-size: 100%;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  z-index: 999;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}
#contents #company #fv h1 {
  letter-spacing: .3em;
}
.company-box {
  text-align: center;
  width: 100%;
  margin: 0 auto 6%;
}
.t-sp {
  display: none;
}

#company .t-pc table {
  box-shadow: 0px 0px 7.36px 0.64px rgba(130, 112, 97, 0.36);
  width: 60%;
  margin: 3% auto 0;
  border: 1px solid #272727;
}
#company .t-pc table th {
  background: #313131;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 2% 0;
  font-size: 1.167em;
}
#company .t-pc table td {
  text-align: left;
  padding: 2% 3%;
  font-size: 1em;
}
#company .t-pc table tr td {
  border-bottom: 1px solid #272727;
}

/* career */
#career {
  text-align: center;
  padding: 3% 10%;
  background: #f2f1f1;
}
#career h3 {
  margin-bottom: 3%;
}
.career-text {
  width: 640px;
  margin: 0 auto;
}
#career .career-text {
  text-align: left;
}
#career .career-text p {
  margin-bottom: 3%;
}
#career .career-text span {
  display: block;
}
.green {
  color: #42ab08;
}

/*   contact-box */
.contact-box iframe {
  width: 100%;
  border: none;
  height: 71em;
  /*   height: 59vw; */
}
.contact-ttl {
  text-align: center;
  margin: 5% auto 3%;
  font-size: 1.1em;
}

/* philosophy-p */
#contents #philosophy-p #fv {
  background: url(../images/common/company_fv.jpg) no-repeat center;
  background-size: 100%;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  z-index: 999;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

}
#contents #philosophy-p #fv h1 {
  padding: 12.2%;

}
#contents #philosophy-p #fv h1 .fs{
  font-size: 1.5em;
  margin-bottom: 5%;
}

.philosophy-ttl {
  position: relative;
  text-align: center;
  /* width: 40%; */
  margin: 0 auto 3%;
  /*     background: url(../images/sp/star_bg.png) no-repeat top right; */
  background-size: 30%;
}


.star {
  position: absolute;
  top: 0;
  right: 15%;
  background: url(../images/pc/hosi.png) no-repeat center;
  display: inline-block;
  /*   outline: 1px solid red; */
  width: 30%;
  height: 9em;
  animation: r1 5s linear infinite;
}
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





.star2 {
  animation: r7 6s linear infinite;
  background: url(../images/sp/philosophy_icon.png) no-repeat center right;
  background-size: 80%;
  width: 50%;
  height: 15.5em;
  /*   outline: 1px solid red; */
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes r7 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.philosophy-text {
  position: relative;
  width: 600px;
  margin: 0 auto 4%;
}
.philosophy-text ul li p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 3%;
  font-size: 22px;
  line-height: 1.5;
}
.philosophy-text ul li p:first-child {
  color: #d4aa00;
  font-size: 40px;
  line-height: 1.3em;
  border-right: 1px solid #d4aa00;
  width: 8%;
  margin-right: 3%;
}
.to-do-do-not-text {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  margin-bottom: 5%;
}
.gray {color: #777777;}

.do-not-ttl {
  display: block;
  background: #777;
  color: #fff;
  font-weight: bold;
  font-size: 30px;;
  text-align: center;
  margin: 0 auto;
  width: 640px;
  padding: 1.5% 0;
}
.do-not-img {
  width: 30%;
  text-align: center;
  margin: 3% auto;
}
.spirit {
  position: relative;
  width: 610px;
  margin: 0 auto 3%;

  text-align: center;
  padding: 3% 0;
  transition: all .3s;
}
.spirit::before,
.spirit::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.spirit::before {
  top: 0%;
  left: -3%;
}
.spirit::after {
  bottom: 0%;
  right: -3%;
}
.spirit::before,
.spirit::after {
  width: 100%;
  height: 100%;
}
.spirit::before {
  border-bottom-color: #777777;
  border-left-color: #777777;
  transition: height .3s, width .3s .3s;
}
.spirit::after {
  border-top-color: #777777;
  border-right-color: #777777;
  transition: height .3s, width .3s .3s;
}

/* 基本のスタイル */
/* .ss.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
} */

/* スタート時のスタイル */
/* .ss.delighter.started::before,
.ss.delighter.started::after{
width: 100%;
height: 100%;
}
.ss.delighter.started::after {
border-top-color: #777777;
border-right-color: #777777;
transition: height .3s, width .3s .3s;
}
.ss.delighter.started::before {
border-bottom-color: #777777;
border-left-color: #777777;
transition: height .3s, width .3s .3s;
}
.ss.delighter.started {
transform: none;
opacity: 1;
transform: translateY(0);
} */

/* エンド時のスタイル */
.ss.delighter.started.ended {
  /*! border: solid red 10px; */
}


.officer {
  /*     border: 1px solid #000; */
  position: relative;
  width: 610px;
  margin: 0 auto 3%;
  text-align: center;
  padding: 3% 0;
}
.officer p {
  padding: 0 4%;
}
.officer::before,
.officer::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.officer::before {
  top: 0%;
  left: -3%;
}
.officer::after {
  bottom: 0%;
  right: -3%;
}
.officer::before,
.officer::after {
  width: 100%;
  height: 100%;
}
.officer::before {
  border-bottom-color: #777777;
  border-left-color: #777777;
  transition: height .3s, width .3s .3s;
}
.officer::after {
  border-top-color: #777777;
  border-right-color: #777777;
  transition: height .3s, width .3s .3s;
}
.officer::before,
.officer::after {
  width: 100%;
  height: 100%;
}
.officer::before {
  border-bottom-color: #777777;
  border-left-color: #777777;
  transition: height .3s, width .3s .3s;
}
.officer::after {
  border-top-color: #777777;
  border-right-color: #777777;
  transition: height .3s, width .3s .3s;
}
/* .officer::before,
.officer::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 2px solid transparent;
border-radius: 0px 20px;
}
.officer::before {
top: 0%;
left: -3%;
}
.officer::after {
bottom: 0%;
right: -3%;
} */

.technology {
  /*   border: 1px solid #000; */
  position: relative;
  width: 610px;
  margin: 0 auto 3%;
  text-align: center;
  padding: 3% 0;
}
.technology p {
  padding: 0 4%;
}
.technology::before,
.technology::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.technology::before {
  top: 0%;
  left: -3%;
}
.technology::after {
  bottom: 0%;
  right: -3%;
}
.technology::before,
.technology::after {
  width: 100%;
  height: 100%;
}
.technology::before {
  border-bottom-color: #777777;
  border-left-color: #777777;
  transition: height .3s, width .3s .3s;
}
.technology::after {
  border-top-color: #777777;
  border-right-color: #777777;
  transition: height .3s, width .3s .3s;
}


.transaction {
  /*   border: 1px solid #000; */
  position: relative;
  width: 610px;
  margin: 0 auto 6%;
  text-align: center;
  padding: 3% 0;
}
.transaction::before,
.transaction::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.transaction::before {
  top: 0%;
  left: -3%;
}
.transaction::after {
  bottom: 0%;
  right: -3%;
}
.transaction::before,
.transaction::after {
  width: 100%;
  height: 100%;
}
.transaction::before {
  border-bottom-color: #777777;
  border-left-color: #777777;
  transition: height .3s, width .3s .3s;
}
.transaction::after {
  border-top-color: #777777;
  border-right-color: #777777;
  transition: height .3s, width .3s .3s;
}

/* .transaction::before,
.transaction::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 2px solid transparent;
border-radius: 0px 20px;
}
.transaction::before {
top: 0%;
left: -3%;
}
.transaction::after {
bottom: 0%;
right: -3%;
}
*/
.to-do-ttl {
  display: block;
  background: #42ab08;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  margin: 0 auto;
  width: 640px;
  padding: 1.5% 0;
}
.to-do-img {
  width: 30%;
  text-align: center;
  margin: 3% auto;
}
.ri-1 {
  /*   border: 2px solid #42ab08; */
  position: relative;
  width: 610px;
  margin: 0 auto 8%;
  text-align: center;
  padding: 6% 0;
}
.ri-text1 {
  position: absolute;
  bottom: -20%;
  right: 0;
  font-size: 54px;
  color: #42ab08;
}
.ri-1::before,
.ri-1::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.ri-1::before {
  top: 0%;
  left: -3%;
}
.ri-1::after {
  bottom: 0%;
  right: -3%;
}
.ri-1::after{
  width: 100%;
  height: 100%;
}
.ri-1::before {
  width: 90%;
  height: 100%;
}
.ri-1::before {
  border-bottom-color: #42ab08;
  border-left-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ri-1::after {
  border-top-color: #42ab08;
  border-right-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
/* 基本のスタイル */
/* .ssr.delighter {

transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
} */

/* スタート時のスタイル */
/* .ssr::after{
width: 100%;
height: 100%;
}
.ssr::before {
width: 90%;
height: 100%;
}
.ssr::after {
border-top-color: #42ab08;
border-right-color: #42ab08;
transition: height .3s, width .3s .3s;
}
.ssr::before {
border-bottom-color: #42ab08;
border-left-color: #42ab08;
transition: height .3s, width .3s .3s;
} */
/* .ssr.delighter.started {
transform: none;
opacity: 1;
transform: translateY(0);
} */

/* エンド時のスタイル */
.ssr.delighter.started.ended {
  /*! border: solid red 10px; */
}

.ri-2 {
  /*   border: 2px solid #42ab08; */
  position: relative;
  width: 610px;
  margin: 0 auto 8%;
  text-align: center;
  padding: 3% 0;
}
.ri-2::before,
.ri-2::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.ri-2::before {
  top: 0%;
  left: -3%;
}
.ri-2::after {
  bottom: 0%;
  right: -3%;
}
.ri-2::after{
  width: 100%;
  height: 100%;
}
.ri-2::before {
  width: 90%;
  height: 100%;
}
.ri-2::before {
  border-bottom-color: #42ab08;
  border-left-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ri-2::after {
  border-top-color: #42ab08;
  border-right-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
/* .ri-2::before,
.ri-2::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 2px solid transparent;
border-radius: 0px 20px;
}
.ri-2::before {
top: 0%;
left: -3%;
}
.ri-2::after {
bottom: 0%;
right: -3%;
} */

.ri-3 {
  /*   border: 2px solid #42ab08; */
  position: relative;
  width: 610px;
  margin: 0 auto 8%;
  text-align: center;
  padding: 3% 0;
}
.ri-3::before,
.ri-3::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.ri-3::before {
  top: 0%;
  left: -3%;
}
.ri-3::after {
  bottom: 0%;
  right: -3%;
}
.ri-3::after{
  width: 100%;
  height: 100%;
}
.ri-3::before {
  width: 85%;
  height: 100%;
}
.ri-3::before {
  border-bottom-color: #42ab08;
  border-left-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ri-3::after {
  border-top-color: #42ab08;
  border-right-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
/* 基本のスタイル */
/* .ssr2.delighter {
transition: all .3s ease-out;
transform: translateX(-100%);
opacity: 0;
} */

/* スタート時のスタイル */
/* .ssr2.delighter.started::after{
width: 100%;
height: 100%;
}
.ssr2.delighter.started::before {
width: 85%;
height: 100%;
}
.ssr2.delighter.started::after {
border-top-color: #42ab08;
border-right-color: #42ab08;
transition: height .3s, width .3s .3s;
}
.ssr2.delighter.started::before {
border-bottom-color: #42ab08;
border-left-color: #42ab08;
transition: height .3s, width .3s .3s;
}
.ssr2.delighter.started {
transform: none;
opacity: 1;
transform: translateY(0);
} */


/* .ri-3::before,
.ri-3::after {
position: absolute;
z-index: 2;
content: '';
width: 0;
height: 0;
border: 2px solid transparent;
border-radius: 0px 20px;
}
.ri-3::before {
top: 0%;
left: -3%;
}
.ri-3::after {
bottom: 0%;
right: -3%;
} */
.ri-4 {
  /*   border: 2px solid #42ab08; */
  width: 610px;
  margin: 0 auto 5%;
  text-align: center;
  padding: 3% 0;
  position: relative;
}
.ri-4::before,
.ri-4::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.ri-4::before {
  top: 0%;
  left: -3%;
}
.ri-4::after {
  bottom: 0%;
  right: -3%;
}
.ri-4::after{
  width: 100%;
  height: 100%;
}
.ri-4::before {
  width: 100%;
  height: 100%;
}
.ri-4::before {
  border-bottom-color: #42ab08;
  border-left-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ri-4::after {
  border-top-color: #42ab08;
  border-right-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
/* 基本のスタイル */
/* .ssr3.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
} */

/* スタート時のスタイル */
/* .ssr3.delighter.started::after{
  width: 100%;
  height: 100%;
}
.ssr3.delighter.started::before {
  width: 100%;
  height: 100%;
}
.ssr3.delighter.started::after {
  border-top-color: #42ab08;
  border-right-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ssr3.delighter.started::before {
  border-bottom-color: #42ab08;
  border-left-color: #42ab08;
  transition: height .3s, width .3s .3s;
}
.ssr3.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
} */

/* .ri-4::before,
.ri-4::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: 0px 20px;
}
.ri-4::before {
  top: 0%;
  left: -3%;
}
.ri-4::after {
  bottom: 0%;
  right: -3%;
} */

.mission-text {
  width: 640px;
  margin: 0 auto 6%;
  line-height: 40px;
}

/* recruitment */
#contents #recruitment #fv {
  background: url(../images/common/recruitment_fv.jpg) no-repeat center top;
  background-size: 100%;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  z-index: 999;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}
.recruitment-box {
  text-align: center;
  width: 100%;
  margin: 0 auto 5%;
}
/* recruitment */
#recruitment .hukidasi-box ul li {
  display: inline-block;
}
#recruitment .hukidasi-box {
  margin: 3% 0;
}
.huki-ic {
  animation: r7 6s linear infinite;
}
/* 基本のスタイル */
.huki-text.delighter {
  transition: all .3s ease-out;
  transform: translateX(100%);
  opacity: 0;
}

/* スタート時のスタイル */
.huki-text.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

.huki-text.delighter.started.ended {
  /*       border: solid red 10px; */
}
#recruitment .hukidasi-box ul li:first-child {
  /*   width: 19%; */
}
#recruitment .hukidasi-box ul li:last-child {
  position: relative;
  text-align: center;
  /*   width: 67%; */
}
#recruitment .hukidasi-box ul li:last-child p:last-child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  line-height: 42px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.hukidasi-text {
  width: 640px;
  padding: 0 5%;
  text-align: left;
  margin: 0 auto 4%;
  line-height: 32px;
}

.year-box {
  width: 610px;
  margin: 0 auto 5%;
  text-align: left;
  /*   border: 1px solid #d4aa00; */
}
.year-box::before,
.year-box::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 1px solid transparent;
  border-radius: 0px 20px;
}
.year-box::before {
  top: 0%;
  left: -3%;
}
.year-box::after {
  bottom: 0%;
  right: -3%;
}
/* 基本のスタイル */
.rss.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
/* スタート時のスタイル */
.rss.delighter.started::before,
.rss.delighter.started::after{
  width: 100%;
  height: 100%;
}
.rss.delighter.started::after {
  border-top-color: #d4aa00;
  border-right-color: #d4aa00;
  transition: height .3s, width .3s .3s;
}
.rss.delighter.started::before {
  border-bottom-color: #d4aa00;
  border-left-color: #d4aa00;
  transition: height .3s, width .3s .3s;
}
.rss.delighter.started {
  transform: none;
  opacity: 1;
  transform: translateY(0);
}

/* エンド時のスタイル */
.rss.delighter.started.ended {
  /*! border: solid red 10px; */
}






.year-box ul {
  margin: 0 auto;
  width: 100%;
  text-align: left;

  padding: 6% 0 3%;
}
.year-box ul li p {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 3%;
  font-weight: bold;
  color: #d4aa00;
}
.year-box ul li p:first-child {
  line-height: 1.em;
  border-right: 1px solid #d4aa00;
  margin-right: 3%;
  margin-left: 20%;
  padding-right: 3%;
  font-size: 28px;
}
.year-box ul li p:last-child {
  font-size: 36px;
}
.year-box ul li p:last-child .text-sm {
  font-size: .5em;
}
.year-text {
  width: 640px;
  margin: 0 auto;
  line-height: 32px;
  text-align: left;
}
.conditions-box {
  text-align: center;
  width: 100%;
  margin: 0 auto 6%;
}
#recruitment .t-pc table {
  width: 630px;
  margin: 3% auto 3%;
  border: 1px solid #d4aa00;
  box-shadow: 0px 0px 7.36px 0.64px rgba(130, 112, 97, 0.36);
}
#recruitment .t-pc table th {
  background: #d4aa00;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 2% 0;
  font-size: 22px;
  width: 150px;
}
#recruitment .t-pc table td {
  text-align: left;
  padding: 24px 3%;
  font-size: 1em;
  border-bottom: 1px solid #d4aa00;
}
.conditions-txt {
  margin: 0 auto;
  width: 640px;
  text-align: left;
}

#contents #business #fv {
  background: url(../images/common/recruitment_fv.jpg) no-repeat center top;
  background-size: 100%;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  z-index: 999;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}
.business-box {
  text-align: center;
  width: 100%;
  margin: 0 auto 6%;
}
/* business */
.business-text {
  font-size: 22px;
  padding: 3% 0;
  line-height: 50px;
  letter-spacing: .1em;
}
.business-pd {
  margin: 0 auto;
  width: 640px;
}
.business-pd h4 {
  letter-spacing: .1em;
  background: #d4aa00;
  color: #fff;
  font-weight: bold;
  padding: 1% 0;
  margin-bottom: 5%;
}
.business-pd p {
  text-align: left;
}
#business .media img, #business .advertisement img, #business .consulting img {
  margin-bottom: 5%;
}
#business .media p, #business .advertisement p, #business .consulting p {
  margin-bottom: 5%;
}





footer {
  background: #f2f1f1;
}
.f-sp {
  display: none;
}
.f-pc {
  position: relative;
}
.f-pc .footer-logo {
  margin: 0 auto;
  width: 135px;
  padding: 24px 0;
}
.f-pc .f-nav {
  width: 400px;
  position: absolute;
  bottom: 30%;
  right: 0;
  margin: 0 auto;
}
.f-pc .f-nav ul li {
  display: inline-block;
  margin-right: 20px;
}
.f-pc .f-nav ul li:last-child {
  margin: 0;
}
.f-pc .footer-link li:last-child:after {
  content: "";
  padding-left: 0;
  border:none;
}
.f-pc .f-nav ul li a:hover {
  opacity: .8;
  border-bottom: 1px solid #959595;
}
#copy {
  background: #2a2a2a;
  text-align: center;
  width: 100%;
  color: #959595;
  line-height: 3.5em;
  font-size: .875rem;
}



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









/*PCのスタイル*/
header .h-sp nav {
  margin-right: -16px;
}
header .h-sp nav ul{
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9999;

}
header .h-sp nav ul li a{
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 4%;
}
#nav_toggle{
  display: none;
}
.h-sp {
  display: none;
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 16px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color:#101010;
    line-height:1.5em;
    /*   min-width: 1200px; */
    margin: 0 auto;
  }
  .h-pc {
    width: 100%;
    margin: 0 auto;
    height: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .h-pc h1 {
    width: 135px;
    display: inline-block;
    float: left;
    margin-right: 6%;
  }
  .h-pc ul li {
    width: 75px;
    margin-right: 30px;
    display: inline-block;
  }
  .star2 {
    animation: r7 6s linear infinite;
    background: url(../images/sp/philosophy_icon.png) no-repeat center right;
    background-size: 80%;
    width: 50%;
    height: 15.5em;
    /*   outline: 1px solid red; */
    position: absolute;
    top: 0;
    right: 0;
  }

  .f-pc .f-nav {
    margin: 0 auto 3%;
    position: relative;
  }
  .f-pc .f-nav ul {
    width: 500px;
    position: relative;
    left: -5%;
  }
  .f-pc .f-nav ul li {
    margin-right: 9%;
  }
  .f-pc .f-nav ul li:last-child {
    margin: 0;
  }
  #contents #philosophy-p #fv h1 {
    padding: 7.7%;
  }


}
@media screen and (max-width:750px){
  html {
    font-size: 14px;
    font-size: 3.7333vw;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color:#303030;
    line-height:1.5em;
  }
  .star {
    position: absolute;
    top: -10%;
    right: 10%;
    background: url(../images/pc/hosi.png) no-repeat center;
    background-size: 100%;
    display: inline-block;
    /*       outline: 1px solid red; */
    width: 24%;
    height: 9em;
    animation: r1 5s linear infinite;
  }

  .h-pc {
    display: none;
  }
  header .h-sp{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .inner{
    width: 90%;
    margin: 0 auto;
  }
  /* header */
  header {
    position: relative;
    width: 100%;
    padding: 1% 0;
  }
  header .h-sp h1 {
    width: 29.5%;
    margin-left: 5%;
  }

  .h-sp nav {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    background: #d4ab00;
    left: 0;
    z-index: 9999;
  }
  header .h-sp nav ul{
    display: block;
    margin: 0 auto;
    width: 80%;
    padding: 5% 0;
  }
  header .h-sp nav ul li {
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid #e0bd2d;
  }
  header .h-sp nav ul li:last-child{
    border: none;
  }
  header .h-sp nav ul li a {
    display: flex;
    justify-content: left;
    align-items: center;

    position: relative;
  }
  header .h-sp nav ul li a:after {
    position: absolute;
    top: 25%;
    right: 0%;
    margin: 0 auto;
    content: '';
    background: url(../images/sp/btn_icon.png) no-repeat center right;
    color: #fff;
    width: 3%;
    height: 4.5vw;
    -webkit-transform: scaleX(.8);
    -ms-transform: scaleX(.8);
    -o-transform: scaleX(.8);
    transform: scaleX(.8);+
  }
  header .h-sp nav ul li a span {
    color: #edc82e;
    font-size: .5em;
    margin-left: 2%;
  }

  /*開閉ボタン*/
  #nav_toggle{
    display: block;
    width: 10%;
    height: 40px;
    position: relative;
    top: 4px;
    z-index: 100;
  }
  #nav_toggle div {
    position: relative;
  }
  #nav_toggle span{
    display: block;
    height: 3px;
    background: #d4aa00;
    position:absolute;
    width: 30px;
    left: 0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;	
  }
  #nav_toggle span:nth-child(1){
    top:0px;
  }
  #nav_toggle span:nth-child(2){
    top:12px;
  }
  #nav_toggle span:nth-child(3){
    top:24px;
  }

  /*開閉ボタンopen時*/
  .open #nav_toggle span:nth-child(1) {
    top: 12px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .open #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav_toggle span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }








  /* contents */
  #contents #fv {
    background: url(../images/sp/sp_fv_bg.png) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 56vw;
    margin-bottom: 6%;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  #contents #fv h1 {
    letter-spacing: .1em;
    font-size: 1.458em;
    line-height: 1.686;
    text-align: center;
    text-shadow: -0.313px 1.975px 8px rgba(155, 124, 0, 0.32);
    font-weight: bold;
    color: #fff;
    text-align: center;
  }
  .enclosure-box {
    width: 95%;
    margin: 0 auto 0;
  }
  /* service */
  #service {
    text-align: center;
    margin: 0 auto 10%;
  }
  #service .sub-text {
    text-align: left;
    font-size: 1em;
    margin-bottom: 6%;
    line-height: 1.5;
  }
  .h-ttl h2 {
    font-weight: bold;
    color: #d4aa00;
    font-size: 0.8em;
  }
  .h-ttl h3 {
    font-size: 1.3em;
    font-weight: bold;
    padding: 2% 0;
  }
  .h-ttl .ttl-icon {
    width: 10%;
    margin: 0 auto 6%;
  }
  .detail-btn {
    display: block;
    text-align: center;
    margin: 0 auto;
    /*     padding: 3%; */
    border-radius: 38px;
    background: #d4aa00;
    box-shadow: -0.313px 1.975px 8px 0px rgba(155, 124, 0, 0.43);
    width: 75%;
  }
  .detail-btn a {
    padding: 3%;
    position: relative;
    color: #fff;
    line-height: 1.083em;
    font-size: 1.083em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .detail-btn a:after {
    content: '';
    background: url(../images/sp/btn_icon.png) no-repeat center;
    background-size: 100%;
    vertical-align: middle;
    color: #fff;
    width: 4%;
    height: 4.5vw;
    margin-left: 5%;
    -webkit-transform: scaleX(.8);
    -ms-transform: scaleX(.8);
    -o-transform: scaleX(.8);
    transform: scaleX(.8);
  }

  .bd-line {
    background: url(../images/sp/line_icon.png) repeat-x;
    width: 100%;
    height: .2em;
  }

  /* philosophy */
  #philosophy {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 5% 0 8%;
    background: #f2f1f1;
  }
  #philosophy .logo-box {
    width: 94%;
    margin: 0 auto 5%;
  }
  .philosophy-box {
    margin-bottom: 10%;
  }
  .enclosure-box ul li p {
    display: inline-block;
  }
  .enclosure-box ul li {
    width: 100%;
    margin-bottom: 1%;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .enclosure-box ul {
    margin: 0 auto;
    width: 90%;
  }
  /*   message */
  #message {
    text-align: center;
    margin: 6% auto 10%;
  }
  #message .akimoto-img {
    width: 50%;
    margin-right: 4%;
    float: left;
  }
  #message .message-comment {
    text-align: left;
    padding: 0 3%;
    width: 94%;
    line-height: 1.5;
  }
  #message h4 {
    font-weight: bold;
    font-size: 1.250em;
    margin-bottom: 4%;    
  }
  #message .mane-box {
    width: 100%;
    background: #d4aa00;
    color: #fff;
    margin: 6% 0;
    padding: 2% 0;
    position: relative;
    text-align: center;
  }
  #message .mane-box .mane-text {
    display: block;
    font-weight: bold;
  }
  #message .mane-icon {
    position: absolute;
    bottom: -18%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 5%;
  }
  .beige {
    color: #d4aa00;
  }
  .bold {
    font-weight: bold;
  }

  /* company */
  #contents #company #fv {
    background: url(../images/sp/company_fv.jpg) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 56vw;
    margin-bottom: 6%;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  #contents #company #fv h1 {
    letter-spacing: .3em;
  }
  .company-box {
    text-align: center;
    width: 100%;
    margin: 0 auto 6%;
  }
  .t-pc {
    display: none;
  }
  .t-sp {
    display: block;
  }
  #company .t-sp table {
    box-shadow: 0px 0px 7.36px 0.64px rgba(130, 112, 97, 0.36);
    width: 85%;
    margin: 6% auto 0;
    border: 1px solid #272727;
  }
  #company .t-sp table th {
    background: #313131;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 2% 0;
    font-size: 1.167em;
  }
  #company .t-sp table td {
    text-align: left;
    padding: 2% 3%;
    font-size: 1em;
  }

  /* career */
  #career {
    text-align: center;
    width: 80%;
    padding: 6% 10%;
    background: #f2f1f1;
    overflow: hidden;
  }
  #career h3 {
    margin-bottom: 3%;
  }
  #career .career-text {
    text-align: left;
    width: 100%;
  }
  #career .career-text p {
    margin-bottom: 3%;
    font-size: 1em;
  }
  #career .career-text span {
    display: block;
  }
  .green {
    color: #42ab08;
  }

  /*   contact-box */
  .contact-box iframe {
    border: none;
    height: 80em;
  }
  .contact-ttl {
    text-align: center;
    margin: 6% auto;
  }

  /* philosophy-p */
  #contents #philosophy-p #fv {
    background: url(../images/sp/company_fv.jpg) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 56vw;
    margin-bottom: 6%;
    letter-spacing: .3em;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  #contents #philosophy-p #fv h1 {
    font-size: 1.2em;
  }
  #contents #philosophy-p #fv h1 .fs{
    font-size: 1.5em;
  }

  .philosophy-box {
    position: relative;
    text-align: center;
    width: 94%;
    margin: 0 auto 6%;
    background: url(../images/sp/star_bg_2.png) no-repeat top right;
    background-size: 30%;
  }
  .philosophy-ttl {
    text-align: center;
    width: 100%;
    margin: 0 auto 6%;
    /*     background: url(../images/sp/star_bg_2.png) no-repeat top right; */
    background-size: 30%;
  }
  .star2 {
    animation: r7 5s linear infinite;
    /*   background: url(../images/sp/philosophy_icon.png) no-repeat center right; */
    background-size: 80%;
    width: 50%;
    height: 15.5em;
    /*   outline: 1px solid red; */
    position: absolute;
    top: -20%;
    right: -5%;
  }
  .philosophy-text {
    width: 80%;
    margin: 0 auto 10%;
    /*     background: url(../images/sp/philosophy_icon.png) no-repeat center right; */
    background-size: 40%;
  }
  .philosophy-text ul li p {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3%;
    font-size: 1em;
  }
  .philosophy-text ul li p:first-child {
    color: #d4aa00;
    font-size: 2em;
    line-height: 1.3em;
    border-right: 1px solid #d4aa00;
    width: 8%;
    margin-right: 3%;
  }
  .to-do-do-not-text {
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 5%;
  }
  .gray {color: #777777;}
  .do-not {
    margin-bottom: 9%;
  }
  .do-not-ttl {
    display: block;
    background: #777;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    margin: 0 auto;
    width: 90%;
    padding: 1% 0;
  }
  .do-not-img {
    width: 50%;
    text-align: center;
    margin: 5% auto;
  }
  .spirit {
    /*     border: 1px solid #000; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 3% 0;
  }
  .officer {
    /*     border: 1px solid #000; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 3% 0;
  }
  .officer p {
    padding: 0 4%;
  }
  .technology {
    /*     border: 1px solid #000; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 3% 0;
  }
  .technology p {
    padding: 0 4%;
  }
  .transaction {
    /*     border: 1px solid #000; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 3% 0;
  }
  .to-do-ttl {
    display: block;
    background: #42ab08;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    margin: 0 auto;
    width: 90%;
    padding: 1% 0;
  }
  .to-do-img {
    width: 50%;
    text-align: center;
    margin: 5% auto;
  }
  .ri-1 {
    /*     border: 2px solid #42ab08; */
    width: 86%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 6% 0;
  }
  .ri-text1 {
    position: absolute;
    bottom: -20%;
    right: 0;
    font-size: 2em;
    color: #42ab08;
  }
  .ri-2 {
    /*     border: 2px solid #42ab08; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 6% 0;
  }
  .ri-3 {
    /*     border: 2px solid #42ab08; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 6% 0;
  }
  .ri-4 {
    /*     border: 2px solid #42ab08; */
    width: 85%;
    margin: 0 auto 6%;
    text-align: center;
    padding: 6% 0;
  }
  .mission-text {
    width: 90%;
    line-height: 1.7;
    margin: 0 auto 6%;
  }

  /* recruitment */
  #contents #recruitment #fv {
    background: url(../images/sp/recruitment_fv.jpg) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 56vw;
    margin-bottom: 6%;
    letter-spacing: .3em;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .recruitment-box {
    text-align: center;
    width: 100%;
    margin: 0 auto 6%;
  }
  /* recruitment */
  #recruitment .hukidasi-box ul li {
    display: inline-block;
  }
  #recruitment .hukidasi-box {
    margin: 6% 0;
  }
  #recruitment .hukidasi-box ul li:first-child {
    width: 19%;
  }
  #recruitment .hukidasi-box ul li:last-child {
    position: relative;
    text-align: center;
    width: 67%;
  }
  #recruitment .hukidasi-box ul li:last-child p:last-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.3em;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hukidasi-text {
    padding: 0 5%;
    text-align: left;
    margin-bottom: 5%;
    line-height: 1.5em;
    width: 90%;
  }
  .year-box {
    width: 80%;
    margin: 0 auto 6%;
    padding: 5%;
    text-align: left;
    /*     border: 1px solid #d4aa00; */
  }
  .year-box ul li p {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 3%;
    font-weight: bold;
    color: #d4aa00;
  }
  .year-box ul li p:first-child {
    line-height: 1.3em;
    border-right: 1px solid #d4aa00;
    width: 20%;
    margin-right: 3%;
    font-size: 1.3em;
    margin-left: 15%;
  }
  .year-box ul li p:last-child {
    font-size: 1.6em;
  }
  .year-box ul li p:last-child .text-sm {
    font-size: .5em;
  }
  .year-text {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    line-height: 1.5;
  }
  .conditions-box {
    text-align: center;
    width: 100%;
    margin: 0 auto 6%;
  }
  #recruitment table {
    width: 85%;
    margin: 6% auto 6%;
    border: 1px solid #d4aa00;
    box-shadow: 0px 0px 7.36px 0.64px rgba(130, 112, 97, 0.36);
  }
  #recruitment table th {
    background: #d4aa00;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 2% 0;
    font-size: 1.167em;
  }
  #recruitment table td {
    text-align: left;
    padding: 2% 3%;
    font-size: 1em;
  }
  .conditions-txt {
    margin: 0 auto;
    width: 85%;
    text-align: left;
  }

  #contents #business #fv {
    background: url(../images/sp/recruitment_fv.jpg) no-repeat center top;
    background-size: 100%;
    width: 100%;
    height: 56vw;
    margin-bottom: 6%;
    letter-spacing: .3em;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .business-box {
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }
  /* business */
  .business-text {
    padding: 6% 0;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: .1em;
  }
  .business-pd {
    padding: 0;
    width: 85%;
  }
  .business-pd h4 {
    letter-spacing: .1em;
    background: #d4aa00;
    color: #fff;
    font-weight: bold;
    padding: 1% 0;
    margin-bottom: 5%;
  }
  .business-pd p {
    text-align: left;
  }
  #business .media img, #business .advertisement img, #business .consulting img {
    margin-bottom: 5%;
  }
  #business .media p, #business .advertisement p, #business .consulting p {
    margin-bottom: 10%;
  }

  .f-pc {
    display: none;
  }
  .f-sp {
    display: block;
    background: #f2f1f1;
    padding: 1% 0 0;
  }
  .f-sp .footer-logo {
    margin: 1em 0;
    text-align: center;
  }
  .f-sp .footer-logo p {
    width: 40%;
    margin: 0 auto;
  }
  .f-sp .footer-link {
    text-align: center;
    background: #444444;
  }
  .f-sp .footer-link li p {
    font-size: 1em;
    display: inline-block;
    width: 50%;
  }
  .f-sp .footer-link li a {
    color: #d8d8d8;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7% 0;
  }
  .f-sp .footer-link li a:after {
    content: '';
    background: url(../images/sp/btn_icon.png) no-repeat center;
    background-size: 100%;
    vertical-align: middle;
    color: #fff;
    width: 4%;
    height: 4.5vw;
    margin-left: 40%;
    -webkit-transform: scaleX(.8);
    -ms-transform: scaleX(.8);
    -o-transform: scaleX(.8);
    transform: scaleX(.8);
  }
  #copy {
    background: #2a2a2a;
    text-align: center;
    font-size: .667em;
    color: #959595;

    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    box-sizing: border-box;
    padding: .6em 0;
    line-height: 1.7em;
  }
  .f-bd {
    border-bottom: 1px solid #363636;
    width: 90%;
    margin: 0 auto;
  }


}


/* clear
--------------------------------------------------*/
.cl{
  clear:both;
}
.clx:after {
  content: ".";
  display: block; 
  clear: both;
  height: 0;
  visibility: hidden;
}
.clx {
  min-height: 1px;
}
* html .clx {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/*--------------------------------------
sp-style
-----------------------------------------*/
img {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
img.img-t {
  vertical-align: top;
}
body {
  width: 100%;
}


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