@charset "UTF-8";
/*//////////////////////////////////////////////////

    テクニコの仕事

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

	変数設定

//////////////////////////////////////////////////*/
/*===============================
// ブレイクポイント変数
/==============================*/
/*===============================
// カラー変数
/==============================*/
/*===============================
// フォント変数
/==============================*/
/*===============================
// フォントサイズ変数
/==============================*/
/*===============================
// トランジション
/==============================*/
/*//////////////////////////////////////////////////

	mixin設定

//////////////////////////////////////////////////*/
/*===============================
// ブレイクポイントの設定
/==============================*/
/*===============================
// 横幅の設定
// @include w_box(横幅にしたい数値) デフォルト1200px
/==============================*/
/*===============================
// 文字サイズの可変設定
// @include font(最小フォントサイズ, 最大フォントサイズ, 最小ブラウザサイズ, 最大ブラウザサイズ);
/==============================*/
/*===============================
// 文字サイズの可変を呼び出し
/==============================*/
/*===============================
// 表示切り替え設定
/==============================*/
/*===============================
// 文字行間の可変設定
// @include l_height(line-height,font-size);
/==============================*/
/*===============================
// 文字間隔の可変設定
// @include l_space(サイズ);
/==============================*/
/*===============================
// marginの可変設定
// @include margin(横幅, 上, 右, 下, 左);
/==============================*/
/*===============================
// paddingの可変設定
// @include padding(横幅, 上, 右, 下, 左);
/==============================*/
/*===============================
// positionの自動設定
// @include center(xy);上下左右中央
// @include center(x);左右中央
// @include center(y);上下中央
/==============================*/
/*===============================
// flexの自動設定
// @include flex_wrap;
/==============================*/
/*===============================
// flexの自動設定：align-items
// @include items(center);
// @include items(stretch);
// @include items(start);
// @include items(end);
/==============================*/
/*===============================
// flexの自動設定：justify-content
// @include justify(between);
// @include justify(center);
// @include justify(start);
// @include justify(end);
/==============================*/
/*===============================
// flex要素の幅設定
// @include flex_box(サイズ＆単位);　デフォルト48%
/==============================*/
/*===============================
// box-sizingの設定
// @include box;
/==============================*/
/*===============================
// ベンダープレフィックス設定
// @include prefix(border-radius, 10px);
/==============================*/
/*===============================
// 値にプレフィックスを付与
// @include value_prefix(display, flex);
/==============================*/
/*===============================
// border生成
// @include border(full);四方 デフォルト 1px solid
// @include border(top);上線 デフォルト 1px solid
// @include border(bottom);下線 デフォルト 1px solid
// @include border(left);左線 デフォルト 1px solid
// @include border(right);右線 デフォルト 1px solid
/==============================*/
/*===============================
// 角丸の設定
// @include radius(角丸のサイズ); デフォルト4px
/==============================*/
/*===============================
// 円の生成
// @include circle(円のサイズ);
/==============================*/
/*===============================
// 円の生成：可変
// @include v_circle; 親要素に横幅指定必須
/==============================*/
/*===============================
// くの字矢印の生成
// @include arrow(三角のサイズ,線の太さ); デフォルト4px,1px
/==============================*/
/*===============================
// 三角の生成
// @include triangle(向き,三角のサイズ,色);
/==============================*/
/*===============================
// 背景画像の生成
// @include back_image("画像パス");
/==============================*/
/*===============================
// グラデーションの生成
// @include gradient("最初の色,最後の色");
/==============================*/
/*===============================
// 文字の位置設定
// @include t_align(center);
// @include t_align(left);
// @include t_align(right);
/==============================*/
/*===============================
// object-fit設定
// @include ofi(contain);
// @include ofi(cover);
/==============================*/
.sec_txt {
  margin: 0 auto 13.333vw;
  width: 81.333vw;
  font-size: 3.467vw;
  font-weight: 500;
  line-height: 1.513;
  text-align: center;
}

.work_wrap {
  margin: auto;
  padding: 7.7333333333vw 5.3333333333vw 11.4666666667vw;
  width: 100vw;
  box-sizing: border-box;
  background: #eaf8ff;
}
.work_wrap .work_list {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: space-between;
  grid-gap: 4.2666666667vw 0;
  padding: 0 4vw;
}
.work_wrap .work_list .work_item {
  flex: 0 1 100%;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: space-between;
  padding: 4vw 4.2666666667vw;
  border-radius: 1.3333333333vw;
  box-sizing: border-box;
  background: #ffffff;
  position: relative;
}
.work_wrap .work_list .work_item .thumbnail {
  flex: 0 1 47.619047619%;
  width: 47.619047619%;
}
.work_wrap .work_list .work_item .box {
  flex: 0 1 49.8168498168%;
  width: 49.8168498168%;
  padding-top: 2.1333333333vw;
}
.work_wrap .work_list .work_item .box .text {
  margin-bottom: 1.8666666667vw;
  font-size: 4vw;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #004298;
}
.work_wrap .work_list .work_item .box .text span {
  display: block;
  font-size: 2.933vw;
  letter-spacing: 0.06em;
}
.work_wrap .work_list .work_item .box .about {
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 1.4167em;
  letter-spacing: 0;
}
.work_wrap .work_list .work_item .box .more {
  font-size: 0;
  position: absolute;
  right: 4.2666666667vw;
  bottom: 5.8666666667vw;
}
.work_wrap .work_list .work_item .box .more > * {
  vertical-align: middle;
}
.work_wrap .work_list .work_item .box .more .txt {
  margin-right: 1.8666666667vw;
  font-size: 3.2vw;
  font-weight: 500;
  color: #004298;
  line-height: 1;
}
.work_wrap .work_list .work_item .box .more .icon {
  position: relative;
  display: inline-block;
  width: 5.333vw;
  height: 5.333vw;
  font-size: 1.808vw;
  text-align: center;
  line-height: 5vw;
  letter-spacing: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #004298;
}
.work_wrap .work_list .work_item .box .more .icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.work_wrap .work_list .work_item:nth-last-child(2) .about {
  margin-bottom: 9.3333333333vw;
}
.work_wrap .work_list .work_item:nth-last-child(1) .text, .work_wrap .work_list .work_item:nth-last-child(2) .text {
  font-size: 3.7333333333vw;
  letter-spacing: 0;
}
.work_wrap .work_list .work_item:nth-last-child(1) .about, .work_wrap .work_list .work_item:nth-last-child(2) .about {
  font-size: 2.9333333333vw;
}

.page_foot_links {
  margin-top: 13.333vw;
  padding: 11.733vw 5.333vw;
  background: #eaf8ff;
}
.page_foot_links .work_list .work_item {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: space-between;
  margin-top: 3.2vw;
  border-radius: 5px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.04);
}
.page_foot_links .work_list .work_item .thumbnail {
  flex: 0 1 37.3134328358%;
  width: 37.3134328358%;
  position: relative;
}
.page_foot_links .work_list .work_item .thumbnail > img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page_foot_links .work_list .work_item .thumbnail .mark {
  width: 19.467vw;
  height: 19.467vw;
  border-top-left-radius: 4.8vw;
  background: #ffffff;
  position: absolute;
  right: -10vw;
  bottom: 0;
  z-index: 2;
}
.page_foot_links .work_list .work_item .thumbnail .mark svg {
  width: 100%;
  height: 100%;
}
.page_foot_links .work_list .work_item .thumbnail::before {
  content: "";
  display: block;
  padding-top: 76.8%;
}
.page_foot_links .work_list .work_item .box {
  flex: 0 1 61.1940298507%;
  width: 61.1940298507%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  box-sizing: border-box;
  padding-right: 10.6666666667vw;
  position: relative;
}
.page_foot_links .work_list .work_item .box .text {
  font-size: 4.267vw;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #004298;
}
.page_foot_links .work_list .work_item .box .arrow {
  width: 6.1333333333vw;
  height: 6.1333333333vw;
  border-radius: 50%;
  background: #004298;
  position: absolute;
  top: 50%;
  right: 3.8666666667vw;
  transform: translateY(-50%);
}
.page_foot_links .work_list .work_item .box .arrow::before {
  content: "\f061";
  font-size: 3vw;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  letter-spacing: 0;
  color: #ffffff;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  transition: 0.4s ease color;
}
.page_foot_links .work_list .work_item:nth-child(-n+1) {
  margin-top: 0;
}
.page_foot_links .work_list .work_item.boukatenken .box .text {
  font-size: 4vw;
}

/*------------------------------
		769px以上
------------------------------*/
/*------------------------------
		961px以上
------------------------------*/
@media screen and (min-width: 961px) {
  .sec_txt {
    margin-bottom: min(4.392vw, 6rem);
    width: 100%;
    font-size: min(1.025vw, 1.4rem);
    line-height: 1.786;
  }
  .work_container {
    position: relative;
  }
  .work_wrap {
    padding-top: min(4.3191800878vw, 5.9rem);
    padding-left: 9.3704245974vw;
    padding-right: 9.3704245974vw;
    padding-bottom: min(5.4172767204vw, 7.4rem);
  }
  .work_wrap .work_list {
    margin: 0 auto;
    padding: 0;
    max-width: 1110px;
  }
  .work_wrap .work_list .work_item {
    flex: 0 1 23.4234234234%;
    width: 23.4234234234%;
    padding: min(1.0980966325vw, 1.5rem) min(1.4641288433vw, 2rem) min(3.513909224vw, 4.8rem);
    border-radius: min(0.7320644217vw, 1rem);
  }
  .work_wrap .work_list .work_item .thumbnail {
    flex: 0 1 100%;
    width: 100%;
  }
  .work_wrap .work_list .work_item .thumbnail .mark {
    width: min(7.321vw, 10rem);
    height: min(7.321vw, 10rem);
    border-top-left-radius: min(0.732vw, 1rem);
    transform: translateY(48%);
  }
  .work_wrap .work_list .work_item .thumbnail::before {
    padding-top: 69.616%;
  }
  .work_wrap .work_list .work_item .box {
    flex: 0 1 100%;
    width: 100%;
    padding-top: 0;
  }
  .work_wrap .work_list .work_item .box .text {
    margin-bottom: min(0.381vw, 5.2rem);
    font-size: min(1.318vw, 1.8rem);
    letter-spacing: 0;
  }
  .work_wrap .work_list .work_item .box .about {
    font-size: min(1.025vw, 1.4rem);
    font-weight: 500;
    line-height: 1.77;
    letter-spacing: 0.1em;
  }
  .work_wrap .work_list .work_item .box .more {
    right: 20px;
    bottom: 18px;
  }
  .work_wrap .work_list .work_item .box .more .txt {
    display: inline-block;
    margin-right: 11px;
    font-size: min(0.952vw, 1.3rem);
    font-weight: 500;
  }
  .work_wrap .work_list .work_item .box .more .icon {
    width: min(1.684vw, 2.3rem);
    height: min(1.684vw, 2.3rem);
    font-size: min(1vw, 1.1rem);
    line-height: min(1.611vw, 2.2rem);
  }
  .work_wrap .work_list .work_item::before {
    content: "";
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: min(0.732vw, 1rem);
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.4s ease border-color;
    z-index: 3;
  }
  .work_wrap .work_list .work_item:hover {
    opacity: 1;
  }
  .work_wrap .work_list .work_item:hover::before {
    border-color: #004298;
  }
  .work_wrap .work_list .work_item:hover .box .more .icon {
    background: #004298;
  }
  .work_wrap .work_list .work_item:nth-child(-n+4) {
    margin-top: 0;
  }
  .work_wrap .work_list .work_item:nth-last-child(2) .about {
    margin-bottom: min(0.5856515373vw, 0.8rem);
  }
  .work_wrap .work_list .work_item:nth-last-child(1) .text, .work_wrap .work_list .work_item:nth-last-child(2) .text {
    font-size: min(1.171vw, 1.6rem);
  }
  .work_wrap .work_list .work_item:nth-last-child(1) .about, .work_wrap .work_list .work_item:nth-last-child(2) .about {
    font-size: min(1.025vw, 1.4rem);
  }
  .page_foot_links {
    margin-top: min(5.857vw, 80px);
    padding: min(4.283vw, 58.5px) min(19.693vw, 269px);
  }
  .page_foot_links .work_list {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: space-between;
    margin: auto;
    max-width: 828px;
  }
  .page_foot_links .work_list .work_item {
    flex: 0 1 47.5845411%;
    width: 47.5845411%;
    margin-top: min(2.489vw, 34px);
  }
  .page_foot_links .work_list .work_item .thumbnail {
    flex: 0 1 36.0406091371%;
    width: 36.0406091371%;
  }
  .page_foot_links .work_list .work_item .thumbnail .mark {
    width: min(6.076vw, 83px);
    height: min(6.076vw, 83px);
    border-top-left-radius: min(1.318vw, 18px);
    right: -23.8%;
  }
  .page_foot_links .work_list .work_item .thumbnail::before {
    padding-top: 76.77%;
  }
  .page_foot_links .work_list .work_item .box {
    flex: 0 1 62.6903553299%;
    width: 62.6903553299%;
    padding-right: min(4.0263543192vw, 5.5rem);
  }
  .page_foot_links .work_list .work_item .box .text {
    font-size: min(1.171vw, 1.6rem);
  }
  .page_foot_links .work_list .work_item .box .arrow {
    width: min(1.6837481698vw, 2.3rem);
    height: min(1.6837481698vw, 2.3rem);
    right: min(1.9033674963vw, 2.6rem);
  }
  .page_foot_links .work_list .work_item .box .arrow::before {
    font-size: min(0.7320644217vw, 1rem);
  }
  .page_foot_links .work_list .work_item:nth-child(-n+2) {
    margin-top: 0;
  }
  .page_foot_links .work_list .work_item.boukatenken .box .text {
    font-size: min(1.171vw, 1.6rem);
  }
}
/*------------------------------
		1201px以上
------------------------------*/
/*------------------------------
		1366px以上
------------------------------*/