@charset "utf-8";

#page-ttl p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
} 
[data-ruby] {
  position: relative;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -1.8em;
  left: .9em;
  right: 0;
  margin: auto;
  font-size: 0.5em;
  letter-spacing: .6em;
}

.philosophy {
  background-color:#E5E5E5;
  -webkit-transform: skew(0deg, -4deg);
  margin: -4rem 0 5rem;
  overflow: hidden;
  position: relative;
}
.philosophy .wrapper{
  -webkit-transform: skew(0deg, 4deg);
}
.philosophy p{
  text-align: center;
}
.philosophy::before {
  animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

/*会社概要table
---------------------------------------------------------------------------*/
.table_design02 {
  border-collapse: collapse;
  width: 90%;
  /* max-width: 700px; */
  margin: 0 auto;
}
.table_design02 tr {
  background-color: rgba(241, 239, 239, 0.8);
}
.table_design02 tr:nth-child(odd) {
  background-color: #fff;
}
.table_design02 th, .table_design02 td {
  padding: 1em;
  border-bottom: 1px solid;
}
.table_design02 th {
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
  border-right: 1px solid;
}

/*沿革
---------------------------------------------------------------------------*/
.history {
  border-collapse: collapse;
  width: 90%;
  /* max-width: 700px; */
  margin: 0 auto;
  border: 1px solid #ccc;
}
.history th, .table_design02 td {
  padding: 1em;
}
.history th {
  font-weight: bold;
  text-align: center;
  min-width: 4em;
}
.history tr:last-child {
  border-bottom: 1px solid #ccc!important;
}
.history .his-y {
  background-color: #222;
  color: #fff;
  border-bottom: 1px solid #fff;
  width: 20%;
}
.history .his-m {
  background-color: #b0b0b0;
  color: #222;
  border-bottom: 1px solid #ccc;
  width: 15%;
}
.history .his-con {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #ccc;

}


/*---------------------------------------------------------------------------
【SP】画面サイズが767px以下
---------------------------------------------------------------------------*/
@media screen and (max-width:767px) { 
.history .his-y {
    background-color: #222;
    color: #fff;
    border-bottom: 1px solid #fff;
    width: 80px;
}

.history {
  border-collapse: collapse;
  width: 100%;
  /* max-width: 700px; */
  margin: 0 auto;
  border: 1px solid #ccc;
}
  
.philosophy {
  background-color:#E5E5E5;
  -webkit-transform: skew(0deg, -4deg);
  margin: -1.5rem 0 5rem;
  overflow: hidden;
  position: relative;
}

.table_design02 th {
  font-weight: bold;
  text-align: center;
  width: 70px;
  min-width: 4em;
  border-right: 1px solid;
}

.table_design02 {
  border-collapse: collapse;
  width: 100%;
  /* max-width: 700px; */
}


/*メイン画像
---------------------------------------------------------------------------*/
#mainimg {
  height: 50vw;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
}





/*---------------------------------------------------------------------------
【Tab】画面サイズ768px以上1024px以下
---------------------------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1024px) {

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
}





/*---------------------------------------------------------------------------
【PC】画面サイズ1025px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1025px) {

/*menubarブロック設定
---------------------------------------------------------------------------*/

/*メニュー１個あたりの設定*/
.p #menubar a {
	color: #616161;
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
}