@charset "utf-8";
@import url("foundation.css");
/* ---------------------------------------------- Contents

※単離しているパーツ類(主にmain内の：それ以外のsectionの場合も含む)のまとめ

 ✔ .md_transition ※ページ遷移アニメーション

 ✔コンテナ・ボックス類（単体使用用）
  └─ .anken-box 案件ボックスの設定

 ✔ボタン
  ├─ .btn-header
  └─ .btn-red

*/
/* ---------------------------------------------- .anken-flex */
.anken-flex {
  animation: anken-flex-bg 10s infinite;
  /* background: rgba(0, 100, 255, 0.5); */
  padding-top: 12px;
}
@keyframes anken-flex-bg {
  0%, 100% {
    background: rgba(0, 100, 255, 0.5);
  }
  40% {
    background: rgba(26, 184, 167, 0.5);
  }
  80% {
    background: var(--nikken-blue);
  }
}
/* ---------------------------------------------- .anken-box */
.anken-box {
  background: #fff;
  padding-bottom: 25px;
}
.anken-box p {
  font-size: var(--m);
  line-height: 1.5;
	padding: 20px 0;
}
.anken-box table {
  width: 90%;
	text-align: left;
  font-size: var(--s);
	padding: 20px 0;
}
.anken-box table span {
  font-size: var(--xl);
  color: var(--nikken-red);
}
.anken-box th{width: 80px;}
.anken-box td{
	color: #555;
	line-height: 2;
  border-bottom: 2px solid #ccc;
}
.anken-box-tag-flex {
  display: flex;
  color: #fff;
  padding-left: 15px;
  column-gap: 10px;
}
.anken-box-tag-red, .anken-box-tag-gold, .anken-box-tag-emerald {
  font-size: var(--m);
  width: 90px;
  padding: 5px 0;
}
.anken-box-tag-red {
  background: var(--nikken-red);
}
.anken-box-tag-gold {
  background: var(--gold);
}
.anken-box-tag-emerald {
  background: var(--nikken-emerald-green);
}
@container (width > 768px) { /* タブレット～PC 親=header */
	.anken-box p {
  font-size: var(--xxl);
  line-height: 1.5;
	padding: 40px 0;
}
	.anken-box table {
  width: 90%;
	text-align: left;
  font-size: var(--xl);
	padding: 40px 0;
}
.anken-box table span {
  font-size: var(--xxl);
}
	.anken-box th{width: 200px;}
	.anken-box td {
  border-bottom: 3px solid #ccc;
}
  .anken-box p, .anken-box-tag-red, .anken-box-tag-gold, .anken-box-tag-emerald {
    font-size: var(--xxl);
  }
  .anken-box-tag-flex {
    padding-left: 50px;
    column-gap: 20px;
  }
  .anken-box-tag-red, .anken-box-tag-gold, .anken-box-tag-emerald {
    width: 250px;
    padding: 5px 0;
  }
}
@container (width > 768px) { /* タブレット～PC 親=main */
  .main-flex {
    padding-top: 80px;
  }
  /* .main-flex {
	padding-top: 80px;
    margin-top: 1000px;
  } */
  .main-flex, .anken-flex {
    row-gap: 100px;
    padding-bottom: 100px;
  }
  .anken-flex {
    padding-top: 20px;
  }
  .anken-box {
    padding-bottom: 80px;
  }
}
/* ---------------------------------------------- .md_transition */
/* ページ遷移アニメーション */
.md_transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform .8s cubic-bezier(.39, .575, .565, 1) 0s;
  z-index: 1;
  /* z-index: 9999;横スクロールが出るので禁止 */
}
.md_transition::before {
  background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0)), color-stop(33.33333%, #fff), color-stop(66.66667%, #fff), to(hsla(0, 0%, 100%, 0)));
  background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0) 0, #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0) 100%);
  background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0));
  content: "";
  display: block;
  width: 100%;
  height: 300%;
  position: absolute;
  left: 0;
  top: -100%;
}
body.is_remove .md_transition {
  animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
}
body:not(.is_fade) .md_transition {
  transform: translateY(-200%);
}
@-webkit-keyframes maskCloseTransition {
  0% {
    transform: translateY(200%);
  }
  to {
    transform: translate(0);
  }
}
@keyframes maskCloseTransition {
  0% {
    transform: translateY(200%);
  }
  to {
    transform: translate(0);
  }
}
/* ---------------------------------------------- .btn-header */
/* web応募 */
.btn-header a {
  font-size: var(--m);
  color: var(--nikken-blue);
  display: block;
  position: relative;
  padding: 18px 30px 0 33px;
}
.btn-header a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* background: var(--nikken-blue); */
  transition: .2s;
  transform: translate3d(0, 0, 0);
}
.btn-header span {
  display: block;
  position: relative;
  top: -2px;
  z-index: 2;
  transition: .2s;
}
.btn-header span:after {
  content: "";
  position: absolute;
  top: 7px;
  right: -8px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--nikken-blue);
  border-top: 2px solid var(--nikken-blue);
  transform: translateX(5px) rotate(45deg);
  transition: .3s .1s;
}
.btn-header a:hover:after {
  color: var(--nikken-light-blue);
}
.btn-header a:hover span {
  top: 0;
}
.btn-header a:hover span:after {
  right: -13px;
}
@container (width > 768px) { /* タブレット～PC */
  .btn-header a {
    font-size: var(--l);
    padding: 20px 40px 0 33px;
  }
  .btn-header span:after {
    right: -5px;
  }
  .btn-header a:hover span:after {
    right: -10px;
  }
}
/* ---------------------------------------------- .btn-red */
/* introduce（紹介する） */
.btn-red-container {
  container-type: inline-size;
}
.btn-red {
  width: clamp(230px, 85%, 350px);
  /* 基本的には全体の80%の横幅ですが、150pxより小さくならず、350pxより大きくなることはありません。 */
}
.btn-red a {
  color: #fff;
  font-size: var(--l);
  display: block;
  position: relative;
  padding: 15px 0;
  background: var(--nikken-dark-red); /* ボタン 影 */
}
@container (width > 768px) { /* タブレット～PC */
  .btn-red a {
    font-size: var(--xl);
    padding: 25px 0;
  }
}
.btn-red a:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--nikken-red);
  transition: .2s;
  transform: translate3d(0, 0, 0);
}
.btn-red a, .btn-red a:after {
  border-radius: 5px;
}
.btn-red span {
  display: block;
  position: relative;
  top: -2px;
  z-index: 2;
  transition: .2s;
}
.btn-red span:after {
  content: "";
  position: absolute;
  top: 8px;
  right: 70px;
  width: 15px;
  height: 15px;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  transform: translateX(5px) rotate(45deg);
  transition: .3s .1s;
}
.btn-red a:hover {
  top: 3px;
}
.btn-red a:hover:after {
  top: 0;
  background: var(--nikken-dark-red); /* ボタン 影 */
}
.btn-red a:hover span:after {
  right: 60px;
}