@charset "utf8";
/*=============================
	- font-style
	- 汎用 color & background
	- 汎用 wrap & title
	- top.css  TOPページCSS
==============================*/

/* Google Fonts は各テンプレートの <link> タグで読み込み（CSS @import はレンダーブロッキングのため廃止） */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "Roboto", sans-serif; */
/*----------------------------------------------------
	font-style
----------------------------------------------------*/
/*  全体 font  */
html {
  font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.my-font01 {
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
}

/*----------------------------------------------------
	汎用 color & background
----------------------------------------------------*/
/* color */
.white {
  color: #fff;
}
.base-color01 {
  /*--メイン文字カラー--*/
  color: #000;
}
.base-back01 {
  /*--メイン背景カラー--*/
  background: #fff;
}
.point-color01 {
  /*--ポイント文字カラー ブルー --*/
  color: var(--c-primary-sub);
}
.point-color02 {
  /*--ポイント文字カラー 水色 --*/
  color: #2fbbdc;
}
.point-back01 {
  /*--ポイント背景カラー ブルー --*/
  background: var(--c-primary-sub);
}
.point-back02 {
  /*--ポイント背景カラー イエロー--*/
  background: #ffb200;
}
.accent-back01 {
  /*--アクセント背景カラー 薄グレー--*/
  background: #f3f6f9;
}

/*----------------------------------------------------
	汎用 buttton
----------------------------------------------------*/
/* 無料相談ボタン */
.btn01 {
  display: inline-block;
  text-align: center;
  min-width: 320px;
  letter-spacing: 0.05em;
  border-radius: 80px;
  padding: 22px 0 21px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 650px) {
  .btn01 {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    border-radius: 100px;
  }
}

/* 青枠丸ボタン */
.btn02 {
  display: inline-block;
  text-align: center;
  letter-spacing: 0.05em;
  min-width: 330px;
  border-radius: 140px;
  padding: 22px 0 21px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 650px) {
  .btn02 {
    width: 100%;
    min-width: 100%;
  }
}

/*----------------------------------------------------
	汎用 wrap & title
----------------------------------------------------*/
/*  width 管理  */
/* 260826 左右に20pxのパディングを足し、max-width を 1220px に上げた。
   box-sizing:border-box なので内寸は 1180px のままでデスクトップの見た目は変わらない。
   1220px 未満のときだけ端に余白が入る。 */
.mywidth {
  width: 100%;
  max-width: 1220px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 650px) {
  .mywidth {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

.title_pt {
/*  margin-bottom: 50px;*/
  margin-bottom: 30px;
  position: relative;
  padding-left: 30px;
  line-height: 1;
}
.title_pt::before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 100%;
  background-color: var(--c-primary);
  transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-webkit-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	-ms-transform: skew(-20deg);
}

.title_pt h2 {
  font-size: 24px;
  font-weight: bold;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 15px;
}
.title_pt p {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 22px;
  color: var(--c-primary);
  line-height: 1;
}

@media screen and (max-width: 650px) {
  .title_pt {
    padding-left: 25px;
  }
  .title_pt h2 {
    font-size: 6vw;
    line-height: 1.3;
    margin-bottom: 2vw;
  }
  .title_pt p {
    font-size: 5vw;
  }
  .title_pt::before {
    width: 6px;
  }
}

/*  メインコンテンツwrap   */
#main-wrapp {
  overflow-x: hidden;
}


.movie_pt {
  padding: 15px 0 50px;
}

.slick_movie {
  display: flex;
}
.slick_movie li {
  margin: 0 15px;
}
.slick_movie li iframe,
.slick_movie li .yt-lite {
  width: 100%;
  height: 118px;
  border-radius: 10px;
}
.yt-lite {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #000;
}
.yt-lite img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.yt-lite:hover img {
  opacity: 1;
}
.yt-lite-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%) translateZ(0);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1;
  padding: 0;
  width: 68px;
  height: 48px;
  line-height: 0;
  -webkit-backface-visibility: hidden;
}
.yt-lite-play svg {
  width: 100%;
  height: 100%;
}
.yt-lite.yt-playing .yt-lite-play,
.yt-lite.yt-playing img {
  display: none;
}
.yt-lite iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 650px) {
  .slick_movie li iframe,
  .slick_movie li .yt-lite {
    height: 46vw;
  }
	.movie_pt {
		padding: 5px 0 30px;
	}
}


.qsearch_pt {
  background-color: var(--c-primary-bg);
  padding: 50px 0;
}
.qsearch_pt .qsearch_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.qsearch_pt .qsearch_title .title_pt {
  margin-bottom: 0;
}
.qsearch_pt .qsearch_title .ltitle {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 110px;    
  font-weight: 300;
  color: #fff;
  line-height: 1;
}

.qsearch_dt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qsearch_dt .qsearch_rs {
  margin-right: 30px;
  font-size: 16px;
}
.qsearch_dt .qsearch_rs .num {
  color: var(--c-accent);
  font-size: 24px;
  font-weight: bold;
}

.qsearch_dt .qsearch_find {
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qsearch_dt .qsearch_find select {
  background-color: #fff;
  border-radius: 10px;
  border: none;
  height: 56px;
}
.qsearch_dt .qsearch_find .txt {
  font-size: 36px;
  line-height: 1;
  padding: 0 5px;
}
.qsearch_dt .qsearch_find .btn_img_css {
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
  background: var(--c-primary);
  border-radius: 10px;
  width: 150px;
  min-width: 150px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  margin-left: 12px;
  font-size: 20px;
  padding: 15px 5px !important;
}
.btn_img_css::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../images/icon_search.png) no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: -4px;
}

@media screen and (max-width: 650px) {
  .qsearch_pt .qsearch_title {
    flex-wrap: wrap;
  }
  .qsearch_pt .qsearch_title .title_pt {
    width: 100%;
    margin-bottom: 4vw;
  }
  .qsearch_pt .qsearch_title .ltitle {
    font-size: 8vw;
  }
  .qsearch_dt {
    flex-wrap: wrap;
  }
  .qsearch_dt .qsearch_rs {
    width: 100%;
    margin-right: 0;
    font-size: 3.5vw;
    margin-bottom: 10px;
  }
  .qsearch_dt .qsearch_rs .num {
    font-size: 6vw;
  }
  .qsearch_dt .qsearch_find {
    width: 100%;
  }
  .qsearch_dt .qsearch_find .txt {
    font-size: 6vw;
    line-height: 1;
    padding: 0 1vw;
  }
  .qsearch_dt .qsearch_find .btn_img_css {
    width: 90px;
    min-width: 90px;
    height: 46px;
    margin-left: 10px;
    font-size: 4vw;
    padding: 10px 5px !important;
  }
  .btn_img_css::before {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: 0;
  }
  .qsearch_dt .qsearch_find select {
    height: 46px;
  }


}

.rec_pt {
/*  padding: 50px 0;*/
  padding: 50px 0 0;
}

.item_list {
  display: flex;
/*  margin-bottom: 50px;*/
  margin-bottom: 30px;
}

.item_list li {
  margin: 0 10px 20px 10px;
  box-shadow: 0 5px 10px 0px #0003;
  border-radius: 10px;
}

.item_list li a {
  display: block;
}
.item_list li a .image {
  width: 100%;
  height: 180px;
  position: relative;
}
.item_list li a .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.item_list li a .item_dt {
  padding: 10px 10px 15px 10px;
  position: relative;
  font-weight: bold;
}
.item_list li a .item_dt .tag_dt {
/*
  position: absolute;
  top: -30px;
  left: 0;
  background-color: rgba(var(--c-primary-dark-rgb), 0.78);
  padding: 5px 10px;
  width: 100%;
  font-size: 14px;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
*/
    position: absolute;
    top: -50px;
    left: 0;
    background-color: rgba(var(--c-primary-dark-rgb), 0.78);
    padding: 5px 10px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    height: 50px;
    box-sizing: border-box;
	    line-height: 1.5em;
}
.item_list li a .item_dt .tag_dt span {
  background-color: var(--c-accent);
  padding: 0px 5px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  border-radius: 5px;
}

.item_list li a .item_dt dl {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.item_list li a .item_dt dl dt {
  width: 20px;
}
.item_list li a .item_dt dl dd {
  width: calc(100% - 20px);
  font-size: 14px;
  line-height: 1;
}

.item_list li a .item_dt .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 40px;
  font-size: 15px;
  color: #313131;
}
/* 260910 職種の行。勤務地・給与と同じ dl の並びに揃えつつ、文字は .title の見た目
   （15px・2行まで）を保つ。dd 側の指定（14px・line-height:1）に負けないよう詳細度を上げる */
.item_list li a .item_dt .dl_job {
  align-items: flex-start;
  margin-bottom: 0;
}
.item_list li a .item_dt .dl_job dt {
  /* SVG は 24px 系のグリッドなので、PNGアイコン（15x19）と同じ見え方になるよう少し上げる */
  display: flex;
  align-items: center;
  height: 21px;
}
.item_list li a .item_dt .dl_job dt svg {
  width: 17px;
  height: 17px;
  fill: var(--c-primary);
  display: block;
}
.item_list li a .item_dt .dl_job dd.title {
  width: calc(100% - 20px);
  font-size: 15px;
  line-height: 1.4;
  height: 42px;
}
.item_list li a .item_dt .date {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
}

/* 260930 新着・おすすめを1画面4枚のスライドに戻したので、260910 の6枚用の縮小指定（1250px以上）は削除した。
   カードは既定の 275×295（発注者支援と同じ） */

.btn_view {
  display: table;
  margin: 0 auto;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 25px 80px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1  ;
  color: var(--c-primary);
  position: relative;
}
.btn_view::before {
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: var(--c-primary);
  top: calc(50% - 1px);
  right: 14px;
}
.btn_view::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 10px;
  width: 18px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--c-primary);
  transform: rotate(45deg);
}
.rec_pt .btn_view {
  margin-bottom: 50px;
}


.btn_group {
/*  margin-bottom: 50px;*/
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_group a {
  margin: 0 20px;
  border-radius: 10px;
  width: 360px;
  padding: 20px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.btn_link01 {
  /* 260910 「求人検索する」ボタンは追従ボタンと同じ緑に統一（ユーザー指示）。
     定義は base.css 冒頭の --c-search */
  background-color: var(--c-search);
}
.btn_link01::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../images/icon_search.png) no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: -4px;
}
.btn_link02 {
  /* 260908 転職支援CTAは赤（--c-cta）。定義は base.css 冒頭 */
  background-color: var(--c-cta);
}

.btn_group .btn_link03 {
  background-color: #fff;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  position: relative;
}
.btn_group .btn_link03::before {
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: var(--c-primary);
  top: calc(50% - 1px);
  right: 14px;
  line-height: 1;
}

.btn_group .btn_link03::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 10px;
  width: 18px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--c-primary);
  transform: rotate(45deg);
}

.btn_group .btn { 
    width: 380px;
    height: 80px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
}
.btn_group .btn_line { background: #cee9c1; }
.btn_group .btn.btn_yt { background: #ff9e9e; }
.btn_group .btn::before { 
    content: "";
    display: inline-block;
    margin-right: 0.5em;
}
.btn_group .btn_line::before { 
    width: 55px;
    height: 52px;
    background: url("../images/i_line.png") no-repeat;
    background-size: contain;
}
.btn_group .btn.btn_yt::before { 
    width: 55px;
    height: 40px;
    background: url("../images/i_youtube02.png") no-repeat;
    background-size: contain;
}

.btn_group .btn .inner { position: relative; }
.btn_group .btn span,
.btn_group .btn p { 
    color: #333;
    line-height: 1em;
}
.btn_group .btn span {
    font-size: 16px;
    font-weight: normal;
    display: block;
}
.btn_group .btn p {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    margin-top: 7px;
}
/* 261013 LINE・動画の2本（380px×2＋左右20px）は 651〜999px で並びきらず縮み、小見出しが2行に折れていた。
   この幅は縦に並べる（btn_group--info はトップの動画セクションだけ） */
@media screen and (min-width: 651px) and (max-width: 999px) {
  .btn_group--info {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

@media screen and (max-width: 650px) {
  .item_list li a .image {
    height: 58vw;
  }
  .btn_view {
    padding: 20px 10px;
    font-size: 4vw;
    width: 100%;
    text-align: center;
  }
  .btn_group {
    margin-bottom: 0px;
    flex-wrap: wrap;
  }
  .btn_group a {
    margin: 5px 0;
    border-radius: 10px;
    width: 100%;
    padding: 20px 10px;
    font-size: 4vw;
  }
  .btn_link01::before {
      width: 20px;
      height: 20px;
      margin-right: 5px;
  }
    
  .btn_group .btn {
    width: 100%;
    max-width: 380px;
    height: auto;
    min-height: 65px;
  }
  .btn_group .btn_line::before {
    width: 40px;
    height: 37px;
  }
  .btn_group .btn.btn_yt::before {
    width: 45px;
    height: 30px;
  }
  /* 261013 vw のままだと 460px 以上で PC（16px/20px）より大きくなり、580〜650px で小見出しが2行に折れて
     65px の箱からはみ出していた。PC の大きさを上限にする */
  .btn_group .btn span { font-size: min(3.5vw, 16px); }
  .btn_group .btn p { font-size: min(4.5vw, 20px); }

}

.feature_pt {
/*  padding: 50px 0;*/
  padding: 50px 0 0;
}
.feature_pt.bottom {
	padding-bottom: 50px;
}

.search_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
.search_pt .search_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.search_pt .search_list .search_item {
  width: 48%;
  margin-bottom: 30px;
}
.search_pt .search_list .search_item2 {
  width: 100%;
}

.search_pt .search_list .search_item h3 {
  background-color: var(--c-primary);
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  padding: 15px 15px;
  margin-bottom: 20px;
}
.search_pt .search_list .search_item ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.search_pt .search_list .search_item ul.col_auto {
  width: 102%;
}
.search_pt .search_list .search_item ul.col_auto li {
  width: auto;
  margin: 0 1% 10px 0;
}
.search_pt .search_list .search_item ul.col5 {
/*  width: 102%;*/
  width: 101%;
}
.search_pt .search_list .search_item ul.col5 li {
/*
  width: 18%;
  margin: 0 2% 10px 0;
*/
  width: 19%;
  margin: 0 1% 10px 0;
}
.search_pt .search_list .search_item ul.col4 {
  width: 102%;
}
.search_pt .search_list .search_item ul.col4 li {
  width: 23%;
  margin: 0 2% 10px 0;
}
.search_pt .search_list .search_item ul.col3 {
  width: 103%;
}
.search_pt .search_list .search_item ul.col3 li {
  width: 31%;
  margin: 0 2% 10px 0;
}
.search_pt .search_list .search_item ul.col_auto li a {
  display: block;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 10px 10px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}
.search_pt .search_list .search_item ul.col5 li a {
  display: block;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}
.search_pt .search_list .search_item ul.col5 li a.small {
	font-size: 14px;
}
.search_pt .search_list .search_item ul.col4 li a {
  display: block;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}
.search_pt .search_list .search_item ul.col3 li a {
  display: block;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.search_pt .search_list .search_item ul.col2  {
  align-items: flex-start;
}
.search_pt .search_list .search_item ul.col2 li {
  width: 50%;
}

.search_pt .search_list .search_item ul.col2 li .area {
  font-size: 18px;
  font-weight: bold;
  color: var(--c-primary);
  margin-bottom: 10px;
}

.search_pt .search_list .search_item ul.col2 li .area_child {
  margin-bottom: 20px;
}
.search_pt .search_list .search_item ul.col2 li .area_child a {
  display: inline-block;
  padding: 0 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  border-right: 1px solid #000;
  margin: 5px 0;
}
.search_pt .search_list .search_item ul.col2 li .area_child a:first-child {
  padding: 0 10px 0 0;
}
.search_pt .search_list .search_item ul.col2 li .area_child a:last-child {
  border-right: none;
}

.search_pt .search_list .search_item .klist a {
  display: inline-block;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 10px;
  padding: 10px 15px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin-right: 10px;
  margin-bottom: 10px;
}

@media screen and (max-width: 650px) {
  .search_pt .search_list .search_item {
    width: 100%;
  }
  .search_pt .search_list .search_item h3 {
    font-size: 4.5vw;
    padding: 15px 15px;
  }
  .search_pt .search_list .search_item ul.col_auto {
    justify-content: flex-start;
  }
  .search_pt .search_list .search_item ul.col_auto li {
    width: auto;
    margin: 0 10px 10px 0;
  }
  .search_pt .search_list .search_item ul.col5 {
    justify-content: space-between;
  }
  .search_pt .search_list .search_item ul.col5 li {
    width: 48%;
    margin: 0 0 10px 0;
  }
  /* 260910 元は 4vw。「2級電気通信工事施工管理技士」など6項目が2行に割れていた（ユーザー指摘）。
     最長項目を1行に収めるのに必要な上限は 390pxで12.5px / 320pxで10.3px。
     3.1vw なら 390pxで12.1px・320pxで9.9px となり全幅で1行に収まる */
  .search_pt .search_list .search_item ul.col5 li a {
    font-size: 3.1vw;
  }
  .search_pt .search_list .search_item ul.col5 li a.small {
    font-size: 3.1vw;
  }
  .search_pt .search_list .search_item ul.col4 {
    justify-content: space-between;
  }
  .search_pt .search_list .search_item ul.col4 li {
    width: 48%;
    margin: 0 0 10px 0;
  }
  .search_pt .search_list .search_item ul.col4 li a {
    font-size: 4vw;
  }
  .search_pt .search_list .search_item ul.col3 {
    justify-content: space-between;
  }
  .search_pt .search_list .search_item ul.col3 li {
    width: 48%;
    margin: 0 0 10px 0;
}
  .search_pt .search_list .search_item ul.col3 li a {
      font-size: 4vw;
  }

  .search_pt .search_list .search_item ul.col2 {
    flex-wrap: wrap;
  }
  .search_pt .search_list .search_item ul.col2 li {
    width: 100%;
  }
  .search_pt .search_list .search_item ul.col2 li .area {
    font-size: 4.5vw;
}

  .search_pt .search_list .search_item ul.col2 li .area_child a {
    padding: 0 2vw;
    font-size: 4vw;
  }
  .search_pt .search_list .search_item ul.col2 li .area_child a:first-child {
    padding: 0 2vw 0 0;
} 
.search_pt .search_list .search_item .klist a {
  padding: 2vw 3vw;
  font-size: 4vw;
  margin-right: 2vw;
  margin-bottom: 2vw;
}

	.item_list {
		margin-bottom: 0;
	}
	.qsearch_pt {
		padding: 30px 0;
	}
	.qsearch_pt .qsearch_title {
		margin-bottom: 0;
	}
	.feature_pt {
		padding: 30px 0 0;
	}
	.rec_pt {
		padding: 30px 0 0;
	}
	.feature_pt.bottom {
		padding: 30px 0 50px;
	}

}

.concept_pt {
  background: url(../images/bk_concept.jpg) no-repeat;
  background-size: cover;
  background-position: center top;
  height: 620px;
}
.concept_pt .timg {
  padding-top: 100px;
  margin-bottom: 30px;
}
.concept_pt .title {
  font-size: 24px;
  margin-bottom: 30px;
  color: #fff;
  line-height: 1.8;
}
.concept_pt .mtitle {
  font-size: 18px;
  margin-bottom: 50px;
  color: #fff;
}

.concept_pt p {
  font-size: 16px;
  color: #fff;
  line-height: 1.8;
}
@media screen and (max-width: 650px) {
  .concept_pt {
    height: auto;
    padding: 50px 0;
  }
  .concept_pt .timg {
    padding-top: 0;
    margin-bottom: 30px;
  }
  /* 261013 vw に上限なしで 451〜650px は PC（651px〜）より文字が大きかった（650 で p 22.8px 対 16px）。PC の値を上限にする */
  .concept_pt .title {
    font-size: min(4vw, 24px);
  }
  .concept_pt .mtitle {
    font-size: min(3.8vw, 18px);
    margin-bottom: 5vw;
  }
  .concept_pt p {
    font-size: min(3.5vw, 16px);
  }

}


.reason_pt {
  padding: 50px 0;
}
.reason_pt .btitle_pt {
  margin-bottom: 50px;
}
.reason_pt .btitle_pt h2 {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 15px;
}
.reason_pt .btitle_pt p {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 22px;
  color: var(--c-primary);
  line-height: 1;
}

.reason_pt ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.reason_pt ul li {
  width: 31%;
}
.reason_pt ul li figure img {
  width: 100%;
  border-radius: 10px;
}
.reason_pt ul li .title {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -30px;
  padding: 30px 0 0px 45px;
  margin-bottom: 20px;
}
.reason_pt ul li .title::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: var(--c-primary);
  transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
}
.reason_pt ul li .title .num {
  font-family: "Roboto", sans-serif;
  font-size: 54px;
  font-weight: 300;
  font-style: italic;
  color: var(--c-primary);
  margin-right: 10px;
}
.reason_pt ul li .title .ttxt {
  font-size: 27px;
  font-weight: bold;
  color: var(--c-primary);
  line-height: 1;
}

@media screen and (max-width: 650px) {
  .reason_pt .btitle_pt h2 {
    font-size: 5.5vw;
    margin-bottom: 3vw;
  }
  .reason_pt .btitle_pt p {
    font-size: 5vw;
  }
  .reason_pt ul li {
    width: 100%;
    margin-bottom: 30px;
  }
  .reason_pt ul li .title {
    margin-top: -20px;
    padding: 20px 0 0px 45px;
    margin-bottom: 20px;
  }
  .reason_pt ul li .title::before {
    left: 20px;
    width: 8px;
  }
  .reason_pt ul li .title .num {
    font-size: 10vw;
  }
  .reason_pt ul li .title .ttxt {
    font-size: 5.5vw;
  }

  .reason_pt ul li p {
    font-size: 3.5vw;
    line-height: 1.5;
  }


}

.example_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
.example_pt ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.example_pt ul li {
  width: 48%;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 10px;
  /* 260825 サイト標準は 0 5px 10px rgba(0,0,0,.2)（77箇所）。ここ12箇所だけ2段浮いていて、
     同じ「カード」役割なのに HOME・LP 内で見た目が割れていた */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}
.example_pt ul li::before {
  border-width: 20px;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
  border-top-color: var(--c-primary);
  border-left-color: var(--c-primary);    
  border-radius: 10px 0 0 0;
}
.example_pt ul li::after {
  border-width: 20px;
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  border-color: transparent;
  border-style: solid;
  border-top-color: var(--c-primary);
  border-left-color: var(--c-primary);
  border-radius: 10px 0 0 0;
}
.example_pt ul li dl {
  height: 100%;
  display: flex;
}
.example_pt ul li dl dt {
  width: 42%;
}
.example_pt ul li dl dt img {
  width: 100%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  object-fit: cover;
  /* 260825 表示窓の縦横比は本文量でカード高が変わるため 0.669〜0.759 の範囲で動く。
     素材を中間の 0.714（480x672）に作り直したので切り落としは約6%に収まる。
     窓が横長側に振れたときは縦を切るので、顔が残るよう上寄りにする。 */
  object-position: 50% 30%;
}
.example_pt ul li dl dd {
  padding: 20px 15px;
  width: 58%;
}
.example_pt ul li dl dd .name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.example_pt ul li dl dd .rireki {
  margin-bottom: 10px;
  display: block;
}
.example_pt ul li dl dd .rireki .tag1 {
  display: inline-block;
  background-color: var(--c-primary);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
.example_pt ul li dl dd .rireki .tag2 {
  display: inline-block;
  background-color: var(--c-accent);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
/* 260910 元16px。「大手ゼネコンで道路改修工事の施工管理」等が枠（内側299px）に対して
   最大71px溢れて2行に割れていたため、2まわり下げた（ユーザー指示）。12pxで全6件が1行に収まる。 */
.example_pt ul li dl dd .rireki span {
  font-size: 12px;
}

/* 260826 地色は元 #fdeff0（発注者支援から引き継いだ薄ピンク）。緑のサイトで浮くうえ、
   CTAオレンジを濃くした関係で「＼ここが成功しました／」と「✓」が 4.11:1 まで落ちていた。
   地をブランドの淡緑に、文字を --c-accent-deep にして 5.19:1 に上げた。 */
.example_pt ul li dl dd .item_dt {
  background-color: var(--c-primary-bg);
  padding: 10px;
  border-radius: 10px;
  margin-top: 20px;
}

/* 260910 「＼ここが成功しました／」は見出しなので中央揃え（ユーザー指示）。
   下の .desc は箇条書きなので左揃えのまま。 */
.example_pt ul li dl dd .item_dt .tit {
  color: var(--c-accent-deep);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
/* 260910 元14px。「大規模案件への参加でスキルアップを実現」が「実現」で割れていたため
   2まわり下げた（ユーザー指示）。✓ も元18pxから比例で縮める。 */
.example_pt ul li dl dd .item_dt .desc {
  font-size: 12px;
}
.example_pt ul li dl dd .item_dt .desc span {
  color: var(--c-accent-deep);
  font-size: 15px;
  font-weight: bold;
}

@media screen and (max-width: 650px) {
  /* 260910 SPは6件を縦に積むと非常に長くなるため横スクロールにする（ユーザー指示）。
     1枚を画面の88%にして次のカードの端を見せ、スワイプできることを気づかせる。
     スナップを効かせて1枚ずつ止める。box-shadow が切れないよう上下に余白を残す */
  .example_pt ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 3vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 5px 0 15px;
  }
  .example_pt ul li {
    width: 88%;
    flex: 0 0 88%;
    margin-bottom: 0;
    scroll-snap-align: center;
  }
  .example_pt ul li dl dd {
    padding: 2vw 2vw 1vw 2vw;
  }
  /* 260911 カード内の文字が全体に小さすぎた（320pxで本文9.6px・タグ8.0px）。
     vw だけだと狭い端末で際限なく縮むので、全項目を同じ比率（約1.15倍）で上げたうえで
     clamp の下限と上限を入れた。倍率を全項目で揃えているのは、SP の順位
     （名前＝見出し＝✓ ＞ 本文 ＞ 転職前後 ＞ タグ）を変更前のまま動かさないため。
     ※ PC の順位はこれとは別で、見出し18 ＞ 名前16 ＞ ✓15 ＞ タグ14 ＞ 転職前後12＝本文12。
       SP と PC で タグ と 本文 の大小が逆（SPはタグが最小、PCはタグが本文より上）。
       650/651px の境界で両者が入れ替わるのは変更前からの既存挙動。
     上限は 430px 付近で頭打ちになる値。457〜650px の帯では変更前の vw 値より小さくなるが、
     650px で名前22.75px→16px となり 651px（PC値16px）との段差が消える方向。 */
  .example_pt ul li dl dd .name {
    font-size: clamp(13px, 4vw, 16px);
    margin-bottom: 1vw;
  }
  .example_pt ul li dl dd .rireki {
    margin-bottom: 0.5vw;
  }
  .example_pt ul li dl dd .rireki .tag1 {
    font-size: clamp(9px, 2.9vw, 12px);
    padding: 1vw 2vw;
  }
  .example_pt ul li dl dd .rireki .tag2 {
    font-size: clamp(9px, 2.9vw, 12px);
    padding: 1vw 2vw;
  }
  .example_pt ul li dl dd .rireki span {
    font-size: clamp(10px, 3.2vw, 13px);
  }
  .example_pt ul li dl dd .item_dt {
    padding: 2vw;
    margin-top: 1.2vw;
  }
  .example_pt ul li dl dd .item_dt .tit {
    font-size: clamp(13px, 4vw, 16px);
    margin-bottom: 1vw;
  }
  .example_pt ul li dl dd .item_dt .desc {
    font-size: clamp(11px, 3.45vw, 14px);
  }
  .example_pt ul li dl dd .item_dt .desc span {
    font-size: clamp(13px, 4vw, 16px);
  }


}

.column_pt {
  padding: 50px 0;
}

.faq_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
.faq_pt .faq_list {
  margin-bottom: 50px;
}
.faq_pt .faq_item {
  margin-bottom: 30px;
}
.faq_pt .faq_item dt {
  background-color: #fff;
  border-radius: 10px 10px 0 10px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  padding: 0 50px 0 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  color: var(--c-primary);
}
.faq_pt .faq_item dt::before {
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  background: var(--c-primary-sub);
  width: 45px;
  height: 100%;
  border-radius: 10px 0 0 10px;
  padding: 10px;
  margin-right: 20px;
}

.faq_pt .faq_item dt::after {
  content: "+";
  color: var(--c-primary);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 10px;
}
.faq_pt .faq_item.act dt::after {
  content: "－";
}


.faq_pt .faq_item dd {
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
  padding: 20px 30px 20px 20px;
  display: none;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  margin-left: 65px;
}

.faq_pt .faq_item.act dd {
  display: flex;
}
.faq_pt .faq_item dd::before {
  content: "A";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
  width: 30px;
  height: 100%;
  margin-right: 20px;
}

@media screen and (max-width: 650px) {
  .faq_pt .faq_item dt {
    border-radius: 2vw 2vw 0 2vw;
    font-size: 4vw;
    padding: 0 8vw 0 0;
    line-height:1.2;
  }
  .faq_pt .faq_item dt::before {
    font-size: 7vw;
    border-radius: 2vw 0 0 2vw;
    padding: 4vw 3vw;
    margin-right: 3vw;
  }
  .faq_pt .faq_item dt::after {
    font-size: 6vw;
    right: 2vw;
  }
  .faq_pt .faq_item dd {
    font-size: 3.5vw;
    line-height: 1.2;
    padding: 3vw;
    margin-left: 13vw;
  }
  .faq_pt .faq_item dd::before {
    font-size: 6vw;
    width: 2vw;
    margin-right: 4vw;
  }
}

.news_pt {
  padding: 50px 0;
}
/* 260911 お知らせだけ見出しマークが画像だった（クローン元 8shigyo.com の _information.png を
   9/10 に施工管理ロゴへ差し替えた箇所）。サイト内の他の見出しはすべて .title_pt::before の
   緑の斜め棒なので、お知らせもそれに合わせた（ユーザー指示）。
   ここにあった padding-left:100px と ::before の上書きを削除し、共通定義をそのまま使う。
   差し替え用に置いた logo_mark.png は未使用になるが、ファイルは残してある。 */
.news_pt .news_list {
  margin-bottom: 50px;
}
.news_pt .news_list li {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 10px 10px;
  border-bottom: 1px solid #000;
}
/* 260911 日付とタイトルが同じ 16px/500 で、どちらが主か分からなかった。
   同じ「日付＋記事リンク」の組であるコラム側は 日付14px/400 で一段落としてあるので合わせる
   （ユーザー指示）。タイトルは li から 16px/500 を継承させたまま主のほうに残す。 */
.news_pt .news_list li .date {
  font-size: 14px;
  font-weight: 400;
}
.news_pt .news_list li .news_title {
  padding-top: 5px;
}


@media screen and (max-width: 650px) {
  /* 260911 画像マークを上に置いて中央寄せにするための上書きだったが、緑の斜め棒へ戻したので削除。
     SPの見出しは共通定義（padding-left:25px・棒幅6px）に任せる。 */
  /* 260911 3.5vw のままだと 650px で 22.8px まで伸びて、PC（16px）との境界で落差が出ていた。
     コラムのタイトル（15px固定）に対しても大きすぎるので上限16px・下限13pxで挟む。
     日付はPCと同じく一段下げるが、375px でタイトル13.1px を追い越さないよう可変にする。 */
  .news_pt .news_list li {
	font-size: clamp(13px, 3.5vw, 16px);
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
  }
  /* 260911 日付を上に縦積みしている（li が flex-direction:column）のに、横並び時代の
     width 指定が残っていた。タイトル枠が内容幅の72〜76%に制限され、右に74〜140px の
     死に幅ができていた。現在は1件・短文なので表面化していないが、公開後に長いタイトルが
     入ると早く折り返す。両方の width を削除した（ユーザー指示）。 */
  .news_pt .news_list li .date {
    font-size: clamp(11px, 3vw, 14px);
  }
}



/* 260915 写真を全面に敷いてその上に黒文字を載せていたため、人物の顔と文字が重なって
   読みにくかった。写真を右へ寄せ、左から白のグラデーションを重ねてテキスト側を白地にする。
   元画像は 1920x500。cover のまま right 指定にすると左側がトリミングされて人物が右に寄る。 */
/* 260915 3人とも右側に見える形にする（ユーザー指示）。
   これまで使っていた bk_lp_intro.jpg は 1920x500 の帯で、元は
   支給素材 5.画像フォルダ/pixta_90078735_M.jpg（2000x1333）の y=396〜917 を
   切り出したものだった（照合で判明。平均差9.8、他候補は37以上）。
   帯のままだと右へ寄せたとき左が切れて3人が入らず、高さを詰めると
   セクションの中で写真の上下が直線で切れる。
   元素材から3人の全身を切り出し直した bk_lp_intro_3p.jpg（1440x1011）を使い、
   セクションと同じ高さ500pxで置く。幅は712pxで、見出しの右端（約605px）にかからない。 */
.lp_intro_pt {
  position: relative;
  padding: 100px 0 0 0;
  background-color: #fff;
  height: 500px;
}
/* 写真は背景ではなく疑似要素に置く。background に白のグラデを重ねる方式だと
   写真の矩形の縁（左端と上下）が白地に直線で残ってしまうため、
   マスクで縁を溶かして地の白へ繋げる。 */
.lp_intro_pt::after {
  content: "";
  position: absolute;
  right: 0;
  /* セクションの上端から下端まで使う。写真の上下がセクションの境界と一致するので、
     矩形の縁が白地に直線で残らない。 */
  top: 0;
  bottom: 0;
  width: min(829px, 60vw);
  /* 切り出し直して同じ名前で上書きしているので、url にもバスターを付ける
     （.htaccess の ExpiresByType で画像は1週間キャッシュされる） */
  background: url(../images/bk_lp_intro_3p.jpg?v=260915g) no-repeat right bottom / auto 100%;
  /* フェードは左から右の一方向だけ（ユーザー指示）。上下には掛けない。
     linear-gradient を2点で書くと終端で勾配が切り替わり、そこが縦の線に見える。
     停止点を刻んでS字に近づけ、切り出しの左117px（人物の手前の余白）から
     ゆるやかに立ち上げる。 */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.04) 8%,
    rgba(0, 0, 0, 0.14) 14%,
    rgba(0, 0, 0, 0.30) 20%,
    rgba(0, 0, 0, 0.50) 26%,
    rgba(0, 0, 0, 0.70) 32%,
    rgba(0, 0, 0, 0.86) 38%,
    rgba(0, 0, 0, 0.96) 44%,
    #000 52%);
  mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.04) 8%,
    rgba(0, 0, 0, 0.14) 14%,
    rgba(0, 0, 0, 0.30) 20%,
    rgba(0, 0, 0, 0.50) 26%,
    rgba(0, 0, 0, 0.70) 32%,
    rgba(0, 0, 0, 0.86) 38%,
    rgba(0, 0, 0, 0.96) 44%,
    #000 52%);
  pointer-events: none;
}
.lp_intro_pt .mywidth {
  position: relative;
  z-index: 1;
}
.lp_intro_pt .tag {
  display: inline-block;
  background-color: var(--c-accent);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 15px;
  color: #fff;
  margin-bottom: 10px;
}
.lp_intro_pt .title {
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 10px;
}
/* 260915 リードを枠囲みにして目立たせ、上下に間隔を取る（ユーザー指示）。
   カンプでもこの1行だけ枠で囲まれている。
   ただし色はカンプの赤をそのまま持ってこない（ユーザー指示）。カンプは配色が
   別系統（見出しが赤・ボタンが青）で、緑基調の実装に赤を置くと浮くうえ、
   すぐ下の赤いCTAボタンと役割を取り合う。
   緑の文字に黄色のマーカーを敷く形にした（ユーザー指示）。
   マーカーは背景のグラデを途中から切り替えて、文字の下半分だけを塗っている。 */
.lp_intro_pt .mtitle {
  display: inline-block;
  margin: 26px 0 32px;
  padding: 0 8px 2px;
  color: var(--c-primary);
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255, 226, 92, 0.45) 60%);
}

.lp_btn_group a {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
/* 260915 「求人一覧をチェックして応募をする」は求人検索側への導線なので、
   追従の「求人検索する」と同じ --c-search（#00ab4e）に揃える（ユーザー指示）。
   --c-search は base.css で「20px以上の太字にのみ使うこと」と決めてある。
   白文字とのコントラストが 3.03 で、20px の中太（500）だと基準を満たさないため
   .lp_btn_group a 側の font-weight を 700 に上げてある。 */
.lp_btn_group a:first-child {
  background-color: var(--c-search);
  margin-right: 10px;
}
.lp_btn_group a:last-child {
  /* 260908 中身は「転職支援サービス（無料）を利用する」で .btn_link02 と同じCTA。
     片方だけ赤にすると同じボタンが色違いで並ぶので揃える */
  background-color: var(--c-cta);
  margin-left: 10px;
}


@media screen and (max-width: 650px) {
  .heading.lp_heading {
    margin-bottom: 0;
  }
  /* 260915 H1「初めてご利用の方へ｜施工管理求人ドットコムのご案内」は25文字。
     共通の 7vw だと1行12文字しか入らず3行になる（ユーザー指摘）。
     1行14文字入る 6.4vw まで下げて2行に収める。vw なのでどの幅でも14文字で割れる。
     共通の .heading .heading-title .title は他ページのH1にも効くのでここだけ上書きする。
     responsive.css は import.css で style.css より後に読まれるので、
     同じ詳細度だと負ける。.heading.lp_heading と重ねて1段上げてある。 */
  .heading.lp_heading .heading-title .title {
    font-size: 6.4vw;
  }
  /* 260915 セクション見出しは共通で 6vw だが、このページは最長が
     「転職支援の流れとご登録のメリット」16文字で2行に折り返していた（ユーザー指摘）。
     16文字が1行に入る 4.9vw にする。body.page-lp で囲ってこのページだけに効かせる。 */
  .page-lp .title_pt h2 {
    font-size: 4.9vw;
  }
  .page-lp .title_pt p {
    font-size: 4.2vw;
  }
  /* 260915 SPは左右に分ける幅が無いので、写真は右に置かず全面に敷き直す。
     白を重ねて文字が読める濃さにする。 */
  .lp_intro_pt::after {
    display: none;
  }
  .lp_intro_pt {
    padding: 9vw 0;
    height: auto;
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72)),
      url(../images/bk_lp_intro.jpg);
    background-repeat: no-repeat, no-repeat;
    background-size: auto, cover;
    background-position: center, center top;
  }
  .lp_intro_pt .tag {
    font-size: 3.5vw;
    padding: 1.5vw 3vw;
    margin-bottom: 1vw;
}
  .lp_intro_pt .title {
    font-size: 6vw;
    margin-bottom: 2vw;
  }
  .lp_intro_pt .mtitle {
    font-size: 4vw;
    margin: 4vw 0 5vw;
    padding: 0 1.5vw 0.5vw;
  }

  /* 260915 横2列で1枚170px弱しかなく、3.8vw（390pxで14.8px）だと
     「求人一覧をチェックし／て／応募をする」の3行に割れていた（ユーザー指摘）。
     横並びのまま、文字を1行に収まる寸法まで下げる。
     いちばん長い行は「転職支援サービス（無料）」の12文字。和文は1文字＝1em なので
     1枚の内寸 ÷ 12 が上限になる。3.4vw（390pxで13.3px）＋字間 -0.03em で
     320px 幅まで2行に収まる。11px を下限にして小さくなりすぎるのを止める。 */
  .lp_btn_group {
    display: flex;
    align-items: stretch;
    gap: 2.4vw;
  }
  .lp_btn_group a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.4vw 1.2vw;
    border-radius: 6px;
    font-size: max(11px, 3.4vw);
    letter-spacing: -0.03em;
  }
  /* 文字を下げたぶん --c-search（#00ab4e）では白文字とのコントラストが 3.03 しかなく
     「20px以上の太字でのみ使う」という base.css の取り決めを外れる。
     SPだけ一段濃い --c-search-deep（5.47）に替える。色相は同じなので見た目は変わらない。 */
  .lp_btn_group a:first-child {
    margin-right: 0;
    background-color: var(--c-search-deep);
  }
  .lp_btn_group a:last-child {
    margin-left: 0;
  }


}


.lp_service_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
.lp_service_dt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
/* 260915 幅は左カラムのラッパーが持つ。.title_pt は h2＋英字サブだけを包み、
   h3・キャプションはその外（同じラッパー内）に並べる。
   ::before の装飾バーが .title_pt の高さで止まるようにするため。 */
.lp_service_dt .lp_service_head {
  width: 450px;
}
/* 260915 見出し枠450px＋本文550pxで合計100%になっており、見出しと本文が隙間なく
   隣り合っていた（ユーザー指示）。本文を狭めた分だけ space-between で間が空く。 */
.lp_service_dt .desc {
  width: calc(100% - 560px);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* 260915 見出し450px固定＋間隔110pxのままだと、900pxでは本文が300pxまで痩せて
   1行10文字程度になる。タブレット帯だけ見出し枠と間隔を詰めて本文幅を確保する。 */
@media screen and (max-width: 1100px) and (min-width: 651px) {
  /* 260915 この帯では見出しの右端（約515px）に写真が寄ってくる。
     60vw のままだと 900px で写真の左端が432pxまで来て文字に重なるので絞る。 */
  .lp_intro_pt::after {
    width: 52vw;
  }
  .lp_service_dt .lp_service_head {
    width: 300px;
  }
  .lp_service_dt .desc {
    width: calc(100% - 360px);
  }
}

@media screen and (max-width: 650px) {
  .lp_service_dt {
    flex-wrap: wrap;
  }
  .lp_service_dt .desc {
    width: 100%;
    font-size: 3.5vw;
  }

}


.lp_skill_pt {
  padding: 50px 0;
}
.lp_skill_pt figure {
  margin-bottom: 50px;
}
.lp_skill_pt .skill_dt {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp_skill_pt .skill_dt .skill_txt {
  position: relative;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}
.lp_skill_pt .skill_dt .skill_txt span {
  font-size: 30px;
  font-weight: bold;
  color: var(--c-accent);
}

.lp_skill_pt .skill_dt::before,
.lp_skill_pt .skill_dt::after {
  content: "";
  width: 1px;
  height: 100px;
  background-color: #000;
}

.lp_skill_pt .skill_dt::before {
  margin-right: 50px;
  transform: rotate(-40deg);
}

.lp_skill_pt .skill_dt::after {
  margin-left: 50px;
  transform: rotate(40deg);
}

@media screen and (max-width: 650px) {
  .lp_skill_pt .skill_dt .skill_txt span {
    font-size: 5vw;
  }
  .lp_skill_pt .skill_dt .skill_txt {
    font-size: 4vw;
  }
  .lp_skill_pt .skill_dt::before {
    margin-right: 5vw;
  }
  .lp_skill_pt .skill_dt::after {
    margin-left: 5vw;
  }
  .lp_skill_pt .skill_dt::before, .lp_skill_pt .skill_dt::after {
    height: 16vw;
  }

}


.lp_type_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
/* 260826 元は width:103%（li の margin-right:3% を相殺する書き方）。
   これがビューポートを3%はみ出し、768pxで横スクロールの原因になっていた。
   li を32%＋2%間隔にし、3つめの右マージンを消して100%に収める。 */
.lp_type_pt ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.lp_type_pt ul li {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  position: relative;
}
.lp_type_pt ul li:nth-child(3n) {
  margin-right: 0;
}

.lp_type_pt ul li::before {
  border-width: 20px;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
  border-top-color: var(--c-primary);
  border-left-color: var(--c-primary);
  border-radius: 10px 0 0 0;
}
.lp_type_pt ul li::after {
  border-width: 20px;
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  border-color: transparent;
  border-style: solid;
  border-top-color: var(--c-primary);
  border-left-color: var(--c-primary);
  border-radius: 10px 0 0 0;
}
/* 260915 .hd3 由来の左の縦罫をやめ、見出しの下に横罫を引く（ユーザー指示）。
   「求められるスキル」の .skill_col_head と同じ体裁に揃えた。 */
.lp_type_pt ul li .title {
  font-size: 24px;
  font-weight: bold;
  color: var(--c-primary);
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.3;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0;
  border-bottom: 2px solid var(--c-primary);
  padding: 0 0 14px;
}
.lp_type_pt ul li .title.mini {
	font-size: 20px;
}
.lp_type_pt ul li p {
  font-size: 15px;
  line-height: 1.8;
}
/* 260915 「主な業務内容」が説明文と同じ見え方で、ラベルなのか本文の1行目なのか
   判別できなかった（ユーザー指示）。背景を敷いてカード内のラベルとして独立させる。 */
.lp_type_pt ul li .item_dt .stitle {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 4px;
  background-color: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* 260915 SPは1列縦積みだったが、7枚ぶん延々と縦に続いて他のセクションが遠くなる。
   横スクロールの並びに変える（ユーザー指示）。
   カード列は .mywidth の 5vw ぶん外へ逃がして画面端で切り、カード幅を 78vw に
   することで「右にまだ続きがある」ことが一目で分かるようにしている。 */
@media screen and (max-width: 650px) {
  .lp_type_pt ul {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -5vw;
    padding: 0 5vw 14px;
  }
  .lp_type_pt ul li {
    flex: 0 0 auto;
    width: 78vw;
    margin-right: 3vw;
    margin-bottom: 0;
    padding: 5vw 4vw;
    scroll-snap-align: start;
  }
  /* PC用の「3枚めは右マージン無し」は横1列では列の途中に来るので戻す */
  .lp_type_pt ul li:nth-child(3n) {
    margin-right: 3vw;
  }
  .lp_type_pt ul li:last-child {
    margin-right: 0;
  }
}


.lp_strength_pt{
  padding: 0 0 50px 0;
  background-color: var(--c-primary-bg);
  text-align: center;
}
/* 260915 160px 固定だと 700px 幅で "Strengths" が 686px になり、
   版面（660px）を26pxはみ出して横スクロールが出ていた。
   .lp_reason_pt の "Benefits of using" と同じく画面幅に追従させる。 */
.lp_strength_pt .ltitle {
  font-family: "Roboto", sans-serif;
  color: var(--c-primary-pale);
  font-size: min(160px, 21vw);
  font-weight: 300;
  font-style: italic;
  line-height: 0.8;
}
.lp_strength_pt figure {
  margin-bottom: 10px;
}
/* 260915 ロゴ（t_lp_logo.png 655x117）を原寸で置いていたが、隣の「の運営者は」「の強み」
   （30px）に対して大きすぎた（ユーザー指摘）。Strengths と Benefits の2箇所で共通。
   SPでは版面いっぱいの351pxまで伸びていたので、こちらはさらに絞る。 */
.lp_strength_pt .timg img,
.lp_reason_pt .timg img {
  width: min(440px, 100%);
}
@media screen and (max-width: 650px) {
  .lp_strength_pt .timg img,
  .lp_reason_pt .timg img {
    width: min(240px, 70%);
  }
}
.lp_strength_pt .stitle {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}
.lp_strength_pt .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
.lp_strength_pt ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* 260915 カンプの体裁に合わせる（ユーザー指示）。
   緑ベタ＋白文字＋白いチェック画像 → 白地＋緑の細枠＋赤文字＋緑のチェック。 */
.lp_strength_pt ul li {
  margin: 8px;
  background-color: #fff;
  border: 2px solid var(--c-primary-mid);
  padding: 12px 22px 12px 48px;
  /* 260915 カンプは赤文字だが、緑基調の実装では赤が強く出るため主色の緑にする
     （ユーザー指示）。枠・チェックと同系になり、まとまりも出る。 */
  color: var(--c-primary);
  border-radius: 10px;
  position: relative;
  font-size: 18px;
  font-weight: bold;
}
/* チェックは文字（U+2714）だとフォント次第で細い線になるので、
   罫線を回転させて描く。太さが環境に左右されない。 */
.lp_strength_pt ul li::before {
  content: "";
  background: none;
  width: 7px;
  height: 13px;
  border: solid var(--c-primary);
  border-width: 0 3px 3px 0;
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translate(0, -65%) rotate(45deg);
}

.lp_strength_pt .btitle {
  font-size: 30px;
  font-weight: bold;
  color: var(--c-primary);
}

@media screen and (max-width: 650px) {
  .lp_strength_pt .ltitle {
    font-size: 18vw;
  }
  .lp_strength_pt .stitle {
    font-size: 6vw;
  }
  .lp_strength_pt .title {
    font-size: 5vw;
  }
  
  /* 260915 ここは「緑ベタ＋白文字＋白いチェック画像」だった頃の指定が
     カード型へ作り替えた後も残っていた。地が緑のまま文字色だけ緑（PC側の指定）に
     変わったため、5項目がテキストの無い緑の箱に見えていた（ユーザー指摘）。
     ::before の 22px 角も、チェック画像だった頃の寸法。
     地・文字はPCと同じ扱いに戻し、枠線は不要との指示で外す。 */
  .lp_strength_pt ul {
    justify-content: center;
  }
  .lp_strength_pt ul li {
    margin: 1.2vw 0;
    width: 100%;
    background-color: #fff;
    border: 0;
    padding: 3vw 3vw 3vw 10vw;
    font-size: 3.8vw;
    text-align: left;
  }
  .lp_strength_pt ul li::before {
    width: 2vw;
    height: 3.6vw;
    border-width: 0 0.8vw 0.8vw 0;
    left: 4.6vw;
  }
  .lp_strength_pt .btitle {
    font-size: 5vw;
    font-weight: bold;
    color: var(--c-primary);
  }

}

.lp_reason_pt {
  padding: 0 0 50px 0;
  text-align: center;
}
/* 260915 160px では "Benefits of using" が枠に入らず2行に割れていた（ユーザー指示）。
   nowrap で1行に固定し、文字サイズ側を枠幅に収まる値まで下げる。
   Strengths（9文字）と違いこちらは17文字あるので、同じ160pxでは収まらない。 */
.lp_reason_pt .ltitle {
  font-family: "Roboto", sans-serif;
  color: var(--c-primary-pale);
  font-size: min(148px, 11vw);
  font-weight: 300;
  font-style: italic;
  line-height: 0.8;
  white-space: nowrap;
}
.lp_reason_pt figure {
  margin-bottom: 10px;
}
.lp_reason_pt .stitle {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}

.lp_reason_pt ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lp_reason_pt ul li {
  width: 48%;
  text-align: left;
  margin-bottom: 50px;
}
.lp_reason_pt ul li figure img {
  width: 100%;
  border-radius: 10px;
}
.lp_reason_pt ul li .title {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-top: -30px;
  padding: 30px 0 0px 45px;
  margin-bottom: 20px;
}
.lp_reason_pt ul li .title::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: var(--c-primary);
  transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
}
.lp_reason_pt ul li .title .num {
  font-family: "Roboto", sans-serif;
  font-size: 54px;
  font-weight: 300;
  font-style: italic;
  color: var(--c-primary);
  margin-right: 10px;
  line-height: 1;
}
.lp_reason_pt ul li .title .ttxt {
  font-size: 30px;
  font-weight: bold;
  color: var(--c-primary);
  line-height: 1.2;
}
.lp_reason_pt ul li p {
  font-size: 16px;
  line-height: 1.5;
}


@media screen and (max-width: 650px) {
  .lp_reason_pt .ltitle {
    font-size: 12vw;
  }
  .lp_reason_pt .stitle {
    font-size: 5vw;
  }
  .lp_reason_pt ul li {
    width: 100%;
    margin-bottom: 50px;
  }
  .lp_reason_pt ul li .title .num {
    font-size: 11vw;
    margin-right: 10px;
  }
  .lp_reason_pt ul li .title .ttxt {
    font-size: 4.5vw;
  }
  .lp_reason_pt ul li p {
    font-size: 3.5vw;
  }
  .lp_reason_pt ul li .title::before {
    left: 20px;
    width: 5px;
  }

}


/* 260826 .lp_trouble_dt の ::before / ::after は 1px の線を rotate(-40deg) した装飾で、
   回転後の見た目の幅がスクロール領域に加算される。768px では28pxはみ出して
   横スクロールが出ていたので、この節の中だけ横方向を切り取る。
   clip は overflow-y を auto にしないので、中でスクロールバーが出る心配がない。 */
.lp_trouble_pt {
  overflow-x: clip;
  padding: 50px 0;
  background-color: var(--c-primary-bg);
  text-align: center;
}
.lp_trouble_pt .title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
}
.lp_trouble_pt .title span {
  font-size: 48px;
  color: var(--c-primary);
  position: relative;
}
.lp_trouble_pt .title span::after {
  content: "";
  position: absolute;
  background: url(../images/t_line.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 13px;
  bottom: -10px;
  left: 0;
}
.lp_trouble_pt .stitle {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 50px;
}
.lp_trouble_pt figure {
  margin-bottom: 50px;
}
.lp_trouble_pt .lp_trouble_dt {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp_trouble_pt .lp_trouble_dt .lp_trouble_txt {
  position: relative;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
.lp_trouble_pt .lp_trouble_dt .lp_trouble_txt span {
  font-size: 48px;
  font-weight: bold;
  color: var(--c-primary);
}
/* 260915 サイト名をロゴ画像に置き換えた（ユーザー指示）。
   元は 48px の緑文字。画像は 655x117 でアイコンぶん背が高いので、
   ロゴの文字列が隣の36px本文とほぼ同じ高さに見える寸法にしてある。 */
.lp_trouble_pt .lp_trouble_dt .lp_trouble_txt {
  line-height: 1.5;
}
.lp_trouble_pt .lp_trouble_dt .lp_trouble_txt .trouble_logo {
  display: inline-block;
  /* 260915 width:358px 固定だと 480px 以下で親（内寸287px）をはみ出していた */
  width: min(358px, 100%);
  height: auto;
  margin-right: 8px;
  vertical-align: -18px;
}
.lp_trouble_pt .lp_trouble_dt::before,
.lp_trouble_pt .lp_trouble_dt::after {
  content: "";
  width: 1px;
  height: 150px;
  background-color: #000;
}
.lp_trouble_pt .lp_trouble_dt::before {
  margin-right: 60px;
  transform: rotate(-40deg);
}
.lp_trouble_pt .lp_trouble_dt::after {
  margin-left: 60px;
  transform: rotate(40deg);
}

@media screen and (max-width: 650px) {
  .lp_trouble_pt .title {
    font-size: 4.5vw;
  }.lp_trouble_pt .title span {
    font-size: 5vw;
  }
  .lp_trouble_pt .stitle {
    font-size: 3.5vw;
  }
  /* 260915 ロゴと文字が両脇の「／＼」にかぶって外へはみ出していた（ユーザー指摘）。
     ロゴ・文字を一段小さくし、文字ブロックの幅を 68% に絞って線の内側へ収める。
     ／＼ は 1px の線を 40度 傾けた疑似要素で、レイアウト上は幅1pxのまま
     見た目だけ「高さ×sin40度」ぶん左右へ張り出す。線を 10vw まで短くすると
     張り出しは片側12.5px。マージン 4vw（390pxで15.6px）がそれを上回るので重ならない。 */
  .lp_trouble_pt .lp_trouble_dt .lp_trouble_txt {
    width: 68%;
    font-size: 3.4vw;
  }
  .lp_trouble_pt .lp_trouble_dt .lp_trouble_txt span {
    font-size: 4.2vw;
  }
  .lp_trouble_pt .lp_trouble_dt .lp_trouble_txt .trouble_logo {
    width: min(200px, 85%);
  }
  .lp_trouble_pt .lp_trouble_dt::before {
    margin-right: 4vw;
  }
  .lp_trouble_pt .lp_trouble_dt::after {
    margin-left: 4vw;
  }
  .lp_trouble_pt .lp_trouble_dt::before, .lp_trouble_pt .lp_trouble_dt::after {
    height: 10vw;
  }

}

.lp_example_pt {
  background-color: #fff;
}

.lp_flow_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
/* 260915 ここにあった .lp_flow_pt ul（bk_step.png を敷く矢印）は、テンプレートが
   lp_flow.png の1枚画像に替わった時点で使われなくなっていた死にコード。
   今回そのHTML版（.flow_steps）に置き換えたので削除した。

   矢印は clip-path で描く。右端を尖らせ、2つめ以降は左端を同じ幅だけ凹ませて
   負のマージンで噛み合わせる。1枚画像のときに矢印の谷間へ出ていた白い楔は出ない。 */
.lp_flow_pt .flow_steps {
  display: flex;
  margin-top: 24px;
}
/* 260915 矢印の境目に白い縁を入れる（ユーザー指示）。
   li 自体を白にして外形を切り、4px内側に同じ形の ::before を重ねて色を塗る。
   右の尖りぶんだけ ::before が短くなるので、「>」の右側だけに白い縁が出る。 */
.lp_flow_pt .flow_steps li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 116px;
  padding: 14px 30px 14px 40px;
  color: #fff;
  background-color: #fff;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}
.lp_flow_pt .flow_steps li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 4px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}
.lp_flow_pt .flow_steps li + li {
  margin-left: -24px;
}
.lp_flow_pt .flow_steps li:first-child {
  padding-left: 26px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.lp_flow_pt .flow_steps li:first-child::before {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
/* 01→07 を少しずつ明るくして流れを出す。いちばん明るい 07 でも
   白文字とのコントラストが 4.5:1 を下回らない範囲に収めている。 */
.lp_flow_pt .flow_steps li:nth-child(1)::before { background-color: #1e3f12; }
.lp_flow_pt .flow_steps li:nth-child(2)::before { background-color: #244a15; }
.lp_flow_pt .flow_steps li:nth-child(3)::before { background-color: #2a5518; }
.lp_flow_pt .flow_steps li:nth-child(4)::before { background-color: #30601b; }
.lp_flow_pt .flow_steps li:nth-child(5)::before { background-color: #366b1e; }
.lp_flow_pt .flow_steps li:nth-child(6)::before { background-color: #3c7621; }
.lp_flow_pt .flow_steps li:nth-child(7)::before { background-color: #438124; }
/* 文字は ::before より上に出す。
   色は span にも直接指定する。リセットCSSが `* { color:#000 }`（common.css:9）で
   全要素へ直接当てているため、li の color:#fff は子の span へ継承されない。 */
.lp_flow_pt .flow_num,
.lp_flow_pt .flow_txt {
  position: relative;
  z-index: 1;
  color: #fff;
}
.lp_flow_pt .flow_num {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
}
.lp_flow_pt .flow_txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

/* 260915 7列を横に並べると1列100pxを切って文字が縦積みになるので、
   このあたりから縦並びに切り替える。

   当初は矢印の形（clip-path）を下向きにして噛み合わせたが、切り欠きが16pxと浅く、
   白い縁と重なって「段の間に白い横帯が入っているだけ」に見えていた（ユーザー指摘）。
   縦並びでは矢印形をやめ、段は角丸の帯にして、段と段の間に下向きの三角を置く。
   順路が読み取れるうえ、狭い幅でも形が潰れない。 */
@media screen and (max-width: 900px) {
  .lp_flow_pt .flow_steps {
    display: block;
  }
  .lp_flow_pt .flow_steps li,
  .lp_flow_pt .flow_steps li:first-child,
  .lp_flow_pt .flow_steps li:last-child {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    /* 白い外形は矢印の縁のためのものなので、縦並びでは出さない */
    background-color: transparent;
    padding: 13px 18px;
    clip-path: none;
  }
  /* 色を塗る ::before は帯いっぱいに広げる */
  .lp_flow_pt .flow_steps li::before,
  .lp_flow_pt .flow_steps li:first-child::before,
  .lp_flow_pt .flow_steps li:last-child::before {
    right: 0;
    bottom: 0;
    border-radius: 6px;
    clip-path: none;
  }
  /* 段と段をつなぐ下向きの三角 */
  .lp_flow_pt .flow_steps li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -17px;
    margin-left: -8px;
    border: 8px solid transparent;
    border-bottom: 0;
    border-top: 10px solid var(--c-primary-mid);
  }
  .lp_flow_pt .flow_steps li:last-child::after {
    display: none;
  }
  .lp_flow_pt .flow_steps li + li {
    margin-left: 0;
    margin-top: 21px;
  }
  /* 番号の桁を揃えて、どの段も本文の頭が同じ位置から始まるようにする */
  .lp_flow_pt .flow_num {
    flex: 0 0 auto;
    width: 32px;
    margin-bottom: 0;
  }
  .lp_flow_pt .flow_txt br {
    display: none;
  }
}


.lp_btn_pt {
  padding: 50px 0;
  text-align: center;
}


/* 詳細ページ用 */
body.page-detail .recommend_point a,
body.page-detail .table-data tr td a,
body.page-detail .consul_message a {
	    color: var(--c-primary);
    text-decoration: underline;
}

.list_note {
  padding: 0.5em;
}
.list_note > li:before {
    content: '\203B';
    margin-right: 0.5em;
}
.list_note a {
    color: #006CD8;
    text-decoration: none;
}


/* contents カテゴリメニュー表示
--------------------------------- */
#main.contents_col2 {
    max-width: 1180px;
    margin: auto;
    display: flex;
}
#main.contents_col2 .mywidth { width: calc(100% - 25%); }
#main.contents_col2 #side {
    width: 25%;
    padding-left: 30px;
    margin-bottom: 50px;
}

.contents_col2 .column_list_item {
    padding: 40px 50px;
    margin: 5px 5px 40px 5px;
}

.contents_menu {
    display: flex;
    flex-direction: column;
}
.contents_menu li a {
    font-size: 16px;
    font-weight: 500;
    padding: 0.7em 1em;
    background: var(--c-primary-bg);
    display: block;
    position: relative;
}
.contents_menu li + li a {
    margin-top: 3px;
}
.contents_menu li a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--c-primary);
    border-right: 2px solid var(--c-primary);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: inline-block;
    position: absolute;
    top: 42%;
    right: 1em;
}

@media screen and (max-width: 650px) {
    #main.contents_col2 {
        width: 100%;
        flex-direction: column;
    }
    #main.contents_col2 .mywidth {
        width: 100%;
    }
    #main.contents_col2 #side {
        width: 100%;
        padding: 0 5vw;
        margin-bottom: 30px;
    }
    
    .contents_col2 .column_list_item {
        padding: 1.0em 1.0em;
        margin: 5px 0 20px;
    }
}

/*----------------------------------------------------
	賑わいバー
----------------------------------------------------*/
.nigiwai-bar {
	background: transparent;
	text-align: center;
	padding: 4px 0;
}
.nigiwai-bar .inner {
	width: 100%;
	max-width: 1220px;
	padding: 0 20px;
	margin: 0 auto;
}
.nigiwai-bar p {
	color: #333;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
}
.nigiwai-bar .nigiwai-icon {
	margin-right: 4px;
}
.nigiwai-bar .nigiwai-num {
	font-size: 18px;
	font-weight: 900;
	margin: 0 2px;
	font-family: "Roboto", sans-serif;
	color: #ff6600;
}
@media screen and (max-width: 768px) {
	.nigiwai-bar .inner {
		width: 100%;
		padding: 0 15px;
	}
	.nigiwai-bar p {
		font-size: 12px;
	}
	.nigiwai-bar .nigiwai-num {
		font-size: 16px;
	}
}





/* ============================================================
   260825 施工管理求人ドットコム 追加セクション
   ・main_result_wrap … ファーストビュー内「グループ実績」（反映ガイドP4 #1-4）
   ・partners_pt       … 主要取引先（同 #13・新設）
   ・achieve_pt        … 弊社が実現できること（同 #14・新設）
   ・footer_group      … 発注者支援業務ドットコムへのリンク（同 #17）
   色は base.css の :root トークンを使う（サイト別の色替えは :root だけで済ませる）
   ============================================================ */

/*  グループ実績（ファーストビュー内）  */
/* 260908 .main-v の外（白地）に出したので、写真から隠すための白パネルと影は不要になった。
   カンプもカードが地の上に直接並んでいて、外枠は無い */
.main_result_wrap {
  width: calc(100% - 40px);
  max-width: 1180px;
  margin: 26px auto 30px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.main_result_head {
  text-align: center;
  margin-bottom: 16px;
}
.main_result_head span {
  display: inline-block;
  position: relative;
  padding: 0 60px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-primary);
}
.main_result_head span::before,
.main_result_head span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 44px;
  height: 1px;
  background: var(--c-primary);
}
.main_result_head span::before { left: 0; }
.main_result_head span::after  { right: 0; }
/* 260908 カンプ（image29）に合わせ、実績カードの左に「グループ実績」ブロック、
   右に「信頼の取引実績」を並べる2カラムへ。SPでは縦積み（下の650px以下）。 */
.main_result_wrap {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.main_result_main {
  flex: 1 1 auto;
  min-width: 0;
}
.main_result_list {
  display: flex;
  gap: 16px;
}
/* 260908 カンプはアイコンを左、ラベルと数字を右に置いた横組み。
   縦積みにしていたが、数字の大きさが活きず別物になっていた */
.main_result_list li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--c-primary-pale);
  border-radius: 10px;
}
/* 260908 カンプの丸アイコン。支給素材が無いのでSVGで描く */
.main_result_list .ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-primary);
}
.main_result_list .ico svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  /* stroke は掛けない。線幅ぶん形が太って窓やジブが潰れる（実測で確認） */
}
/* 260910 アイコンをフリー素材（Material Symbols）に替えたので、自作SVGで窓を抜くための
   .knock 指定は不要になった。素材側が最初から抜きを含んだ単一パスで来る */
/* 260908 カンプの取引企業数だけは丸を敷かず、クレーンを大きな緑シルエットで置いている */
.main_result_list li:last-child .ico {
  background: none;
}
.main_result_list li:last-child .ico svg {
  width: 60px;
  height: 60px;
  fill: var(--c-primary);
}
/* 260910 クレーンは支給画像を切り出した透過PNG。縦長（240x296）なので高さで揃える。
   丸を敷かない分だけ隣より大きく見せてよい（カンプも同じ扱い） */
.main_result_list .ico_img {
  width: auto;
  height: 68px;   /* 丸(62px)と同寸だと塗り面積が少ない分だけ軽く見えるので少し大きく */
}
.main_result_list .ico_img img {
  width: auto;
  height: 100%;
  display: block;
}
.main_result_list .txt {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.main_result_list .label {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 2px;
}
.main_result_list .value {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
  white-space: nowrap;
}
.main_result_list .value em {
  font-style: normal;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-primary-dark);
}
.main_result_list .value .unit {
  font-size: 16px;
  margin-left: 2px;
}
.main_result_list .note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

/* 260908 「3つの専門求人サイトを運営」。元は実績カードの note に列挙していた3サイト名を
   カンプに合わせて独立ブロックにし、他2サイトへはリンクを張った */
/* 260908 地色はカンプ実測のクリーム #fcf7ea。淡緑にしていたが、カンプはMVの緑と
   区別するためにここだけ暖色を敷いている */
.main_result_sites {
  margin-top: 14px;
  padding: 12px 16px 14px;
  background: #fcf7ea;
  border: 1px solid #efe3c6;
  border-radius: 8px;
}
/* 見出しは両側に細いラインを引く（カンプ） */
.main_result_sites_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 8px;
}
.main_result_sites_head::before,
.main_result_sites_head::after {
  content: "";
  flex: 0 1 96px;
  height: 1px;
  background: #e0d0a8;
}
.main_result_sites ul {
  display: flex;
  gap: 10px;
}
/* 260910 テキストリンクからサイトバナー（画像1枚）へ。
   バナーは3枚とも同じ比率で書き出してあるので、幅だけ合わせれば高さも揃う */
.main_result_sites li {
  flex: 1 1 0;
  position: relative;
  line-height: 0;   /* img 下の行間の隙間を殺す */
  /* 260910 角丸はバナー画像側に入っているので CSS では丸めない（二重の角丸になる） */
}
.main_result_sites li img,
.main_result_sites li > a {
  display: block;
  width: 100%;
}
.main_result_sites li > a:hover img {
  opacity: 0.86;
}
/* 260910 現在地（施工管理）は当サイトなのでリンクを張らないだけにする。
   右上に「当サイト」バッジを乗せていたが、セコカンXロゴのXに重なるうえ、
   3枚のうち1枚だけ見え方が変わるためユーザー判断で撤去した */

/* 260908 「信頼の取引実績」。カンプは各項目に官公庁ロゴが入るが支給が無く、
   無断掲載は先方にリスクが及ぶため、支給されるまでテキスト＋チェックで組む */
.main_result_trust {
  /* 260908 NEXCOは東・中・西の3ロゴを1行に並べるため、316→372pxへ広げた */
  flex: 0 0 372px;
  padding: 0 0 4px;
  border: 1px solid var(--c-primary-pale);
  border-radius: 8px;
  overflow: hidden;
}
.main_result_trust_head {
  background: var(--c-primary);
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 6px;
  margin-bottom: 10px;
}
/* 260908 カンプは2列×2行＋最終行が横幅いっぱい。罫線で区切る */
.main_result_trust ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px 4px;
}
.main_result_trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 50%;
  padding: 9px 6px;
}
.main_result_trust li.wide {
  width: 100%;
}
/* 上4つの下に横罫、左列の右に縦罫（カンプの格子） */
.main_result_trust li:nth-child(-n+4) {
  border-bottom: 1px solid var(--c-primary-pale);
}
.main_result_trust li:nth-child(odd):not(.wide) {
  border-right: 1px solid var(--c-primary-pale);
}
/* ロゴ／アイコンの枠。幅を揃えると、縦横比の違うロゴが並んでも文字の頭が揃う */
.main_result_trust .mark {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ロゴは縦横比のまま。国交省マークは正方形（214×214）、NEXCOは横長（213×109）なので
   高さでなく枠に収める指定にして、どちらも枠内で最大化させる */
.main_result_trust .mark img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  object-fit: contain;
}
.main_result_trust .mark_svg svg {
  width: 30px;
  height: 30px;
  fill: var(--c-primary);
}
.main_result_trust .mark_svg svg .knock path,
.main_result_trust .mark_svg svg .knock rect,
.main_result_trust .mark_svg svg path.knock {
  fill: #fff;
}
.main_result_trust .name {
  flex: 0 1 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #23301c;
}
.main_result_trust .name em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
}

/* ===== 260908 ヒーロー下部の帯（カンプ image29 の最下段） ===== */
.mv_footer_bar {
  background: var(--c-primary);
  color: #fff;
  padding: 18px 0;
  /* 260908 実績カードは .main-v の中にあり下端をはみ出す。その分は .main-v の
     margin-bottom で確保してあるので、この帯は通常フローのまま置く。
     負のマージンで引き上げるとカードの上に乗ってしまう（実測で確認済み）。 */
  margin-bottom: 60px;
  position: relative;
}
.mv_footer_bar .mywidth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 260910 上の「信頼の取引実績」と右端を揃える（ユーザー指示）。
     追従ボタン（.fix_pt／幅120px・right30px）を避けるため右を大きく空けていたが、
     版面（1220px）の右端より内側に寄って上下で段差になっていた */
  padding-right: 20px;
}
/* 追従ボタンは fixed で画面右端から150pxに居座るため、画面が狭いほど版面の内側へ食い込む。
   実測：1536pxでは版面右端1358に対し追従は1386で当たらないが、1400pxでは40x29px、
   1280pxでは96x29px スマホと重なる。重なる幅では従来どおり内側へ逃がす */
@media screen and (max-width: 1449px) {
  .mv_footer_bar .mywidth {
    padding-right: 168px;
  }
}
/* 1250px を切ると追従ボタンが版面のさらに内側まで来るため、168px 逃がしても
   スマホと重なる（実測 1200pxで39x29px・1100pxで77x158px）。
   スマホは装飾（aria-hidden）なので、この幅では出さずにCTAだけを見せる */
@media screen and (min-width: 651px) and (max-width: 1249px) {
  .mv_footer_phone {
    display: none;
  }
  /* 260917 元は .mv_footer_offer だけで書いていたが、後ろ（下の基本指定）の padding-right:74px に
     同じ詳細度で負けて効いていなかった。スマホを消した分の余白が残り、CTAが右へはみ出していた。
     親を付けて詳細度で勝たせる */
  .mv_footer_bar .mv_footer_offer {
    padding-right: 0;
  }
  /* 260917 offer と同じ理由で、下の基本指定の padding-right:44px に負けていた（ボタンが左へ14px寄る） */
  .mv_footer_bar .mv_footer_cta {
    padding-right: 16px;
  }
  /* 260917 3つの訴求（611px）とCTA（360px）が横1列に収まらない幅では、CTAを次の行へ送る。
     折り返さないままだと 1100px 以下で帯の外へはみ出し、#main-wrapp の overflow-x:hidden で
     ボタンの右側が切れていた（651〜680px ではボタンが丸ごと見えなかった） */
  .mv_footer_bar .mywidth {
    flex-wrap: wrap;
    row-gap: 16px;
  }
  /* 260910 この帯域は右の「信頼の取引実績」が372px固定で残るぶん左だけが圧迫される
     （実測: 1024pxで590px・768pxで334px）。バナー3列のままだと1枚93x22pxまで潰れて
     文字が読めないので、横並びをやめて縦に積む */
  .main_result_sites ul {
    display: block;
  }
  .main_result_sites li + li {
    margin-top: 6px;
  }
}
/* 260910 カンプは「白パネル＋スマホ」がひと組で右端に置かれている。
   別々に絶対配置していたため、スマホだけが帯の外に浮いて見えていた（ユーザー指摘）。
   スマホはパネルの右肩に重ねる。帯（高さ116px）より背が高いので下へはみ出させる */
.mv_footer_offer {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 74px;
}
.mv_footer_points {
  display: flex;
  gap: 20px;
}
/* 260908 .mv_footer_bar の color:#fff は li / p まで届かない（既存の指定が勝つ）。
   実測で緑地に黒文字 3.18:1 になっていたので、要素ごとに明示する */
.mv_footer_points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  /* 改行位置は <br> で決めてある。スマホモックのぶん右が詰まって
     勝手に折り返すと3行になるので、自動折り返しは止める */
  white-space: nowrap;
}
.mv_footer_points li + li {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
/* 260910 自作の線画から Material Symbols の塗りアイコンへ差し替え（カンプ準拠）。
   カンプはテキスト2行とほぼ同じ高さの白いベタアイコンなので、34→42pxへ上げる。
   stroke は使わない（塗りの素材なので線を掛けると形が太る） */
.mv_footer_points .ico svg {
  width: 42px;
  height: 42px;
  fill: #fff;
}
/* 260908 カンプのスマホモック。帯の高さ（116px）より背が高いので、帯からはみ出させて
   上端だけ見せる。260910 基準を .mv_footer_offer に移し、白パネルの右肩へ重ねる */
.mv_footer_phone {
  position: absolute;
  right: 0;
  bottom: -14px;
  width: 96px;
  line-height: 0;
}
.mv_footer_phone img {
  width: 100%;
  height: auto;
}
/* 260908 カンプではCTAが白の角丸ボックスに載っている。緑地に直接置いていたので囲う */
/* 260910 右のパディングを厚くして、スマホが重なる場所を空ける。
   カンプもボタンの右にパネルの余白があり、そこへスマホが乗る形になっている。
   ここを対称（16px）に戻すとボタンがスマホの下に潜る */
.mv_footer_cta {
  text-align: center;
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 44px 14px 16px;
}
.mv_footer_cta p {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--c-primary-dark);
}
/* 260908 下部帯のCTAもカンプはオレンジ（MVの登録ボタンと対）。赤は転職支援サービスCTA専用 */
.mv_footer_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 260910 320→280px。スマホのモックと6px重なっていた（ユーザー指摘） */
  min-width: 280px;
  padding: 12px 46px 12px 26px;
  /* 260910 登録ボタンは赤で統一（--c-cta）。MVの mv_apply_btn と揃える */
  background: var(--c-cta);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  border-radius: 6px;
  position: relative;
}
.mv_footer_btn::after {
  content: "";
  position: absolute;
  right: 22px;
  top: calc(50% - 6px);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
/* 260917 追従ボタンを避ける右の余白（168px）があるため、899px 以下では3つの訴求（611px）も
   1行に収まらない。訴求も折り返させ、折り返した先頭に区切り線が残らないよう線をやめて間隔で区切る。
   基本指定（.mv_footer_points li + li）より後ろに置く必要があるのでここに書く */
@media screen and (min-width: 651px) and (max-width: 899px) {
  .mv_footer_points {
    flex-wrap: wrap;
    gap: 12px 28px;
  }
  .mv_footer_points li + li {
    padding-left: 0;
    border-left: none;
  }
}

/*  主要取引先  */
.partners_pt {
  padding: 50px 0;
  background: var(--c-primary-bg);
}
.partners_pt .partners_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.partners_pt .partners_list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--c-primary-pale);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

/*  弊社が実現できること  */
.achieve_pt {
  padding: 50px 0;
}
/* 260910 画像は右（ユーザー指示）。DOMは figure が先のままで row-reverse だけで返す。
   SPでは下の @media で block に戻るため、画像が上・本文が下の自然な順になる。 */
.achieve_pt .achieve_body {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 40px;
}
.achieve_pt .achieve_img {
  flex: 0 0 44%;
}
.achieve_pt .achieve_img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.achieve_pt .achieve_text {
  flex: 1 1 auto;
}
.achieve_pt .achieve_lead {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-primary-dark);
  margin-bottom: 16px;
}
/* 260825 .achieve_pt .achieve_text p（詳細度0,2,1）が .achieve_pt .achieve_lead（0,2,0）に
   勝ってしまい、リード文の22px指定が効かず本文と同じ15pxで描画されていた */
.achieve_pt .achieve_text > p:not(.achieve_lead) {
  font-size: 15px;
  line-height: 2;
}

/*  フッターのグループサイトリンク  */
.footer_group {
  margin: 24px auto 0;
  text-align: right;
  width: 1180px;
  max-width: 100%;
}
/* 260910 アイコン＋テキストの枠からバナー画像1枚に変更。枠線・地色・角丸は画像側が持つので
   CSSでは付けない。幅はHOMEのグループ3サイト（実測244px）に合わせる */
.footer_group a {
  display: inline-block;
  line-height: 0;
}
.footer_group img {
  display: block;
  width: 244px;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 650px) {
  .main_result_wrap {
    width: 100%;
    margin: 0;
    padding: 4vw;
    border-radius: 0;
    box-shadow: none;
    /* 260908 PCは実績と取引実績の2カラム。SPは縦積みにする */
    display: block;
  }
  .main_result_head span {
    padding: 0 40px;
    font-size: 16px;
  }
  .main_result_list {
    display: block;
  }
  .main_result_list li {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 10px 14px;
  }
  .main_result_list li + li {
    margin-top: 10px;
  }
  /* SPは横並びにしてカード1枚あたりの高さを抑える */
  .main_result_list .ico {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .main_result_list .ico svg {
    width: 25px;
    height: 25px;
  }
  /* クレーンPNGは縦長。上の .ico の width:44px を受けると横に潰れるので幅を解放する */
  .main_result_list .ico_img {
    width: auto;
    height: 44px;
  }
  .main_result_list .label {
    margin-bottom: 0;
    flex: 1 1 auto;
  }
  .main_result_list .value em {
    font-size: 30px;
  }
  .main_result_sites ul {
    display: block;
  }
  .main_result_sites li + li {
    margin-top: 6px;
  }
  .main_result_trust {
    margin-top: 14px;
  }
  .main_result_trust li {
    font-size: 13px;
  }

  /* 260908 ヒーロー下部の帯（SP） */
  .mv_footer_bar {
    margin-bottom: 30px;
    padding: 16px 0;
  }
  .mv_footer_bar .mywidth {
    display: block;
    padding-right: 20px;
  }
  .mv_footer_points {
    display: block;
  }
  .mv_footer_points li {
    font-size: 14px;
  }
  .mv_footer_points li + li {
    margin-top: 10px;
    padding-left: 0;
    border-left: none;
  }
  .mv_footer_points li br {
    display: none;
  }
  /* 260910 SPではスマホのモックを出さない（ユーザー指示）。画面が狭く、追従ボタンとも
     重なるため。装飾（aria-hidden）なので消しても情報は落ちない。
     モックのために空けていた右の余白も戻す */
  .mv_footer_phone {
    display: none;
  }
  .mv_footer_offer {
    padding-right: 0;
  }
  .mv_footer_cta {
    margin-top: 16px;
    padding-right: 16px;
  }
  .mv_footer_btn {
    min-width: 0;
    width: 100%;
    font-size: 17px;
    padding: 11px 36px 11px 16px;
  }
  .partners_pt,
  .achieve_pt {
    padding: 40px 0;
  }
  .partners_pt .partners_list {
    grid-template-columns: repeat(2, 1fr);
  }
  .partners_pt .partners_list li {
    min-height: 56px;
    font-size: 13px;
  }
  .achieve_pt .achieve_body {
    display: block;
  }
  .achieve_pt .achieve_img {
    margin-bottom: 20px;
  }
  /* 260910 本文の br はPCの行長に合わせて入れているので、幅の狭いSPでは無効化する。
     .pc-only は display:block のため br には使えない（改行として働かなくなる）。 */
  .achieve_pt .achieve_text br {
    display: none;
  }
  .achieve_pt .achieve_lead {
    font-size: 18px;
  }
  .footer_group {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   260825 はじめての方（lp.html）デザイン変更分
   ・skill_cols    … 求められるスキル（反映ガイドP5 #4）マインド面／技術面の2カラム
   ・trouble_groups… お悩み（同 #9）未経験／経験者の2グループ×5カード
   ------------------------------------------------------------ */
.lp_skill_pt .skill_cols {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}
.lp_skill_pt .skill_col {
  flex: 1 1 0;
  padding: 24px;
  background: #fff;
  border: 2px solid var(--c-primary-pale);
  border-radius: 10px;
}
.lp_skill_pt .skill_col_head {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-primary);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--c-primary);
}
.lp_skill_pt .skill_col li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--c-primary-pale);
}
.lp_skill_pt .skill_col li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.lp_skill_pt .skill_col .num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}
.lp_skill_pt .skill_col .skill_body {
  flex: 1 1 auto;
}
.lp_skill_pt .skill_col .skill_body p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}
/* 260915 2カラムの間に「×」を置いて掛け合わせを示す（ユーザー指示）。
   カードは高さが違うので align-self:center で上下中央に置く。 */
.lp_skill_pt .skill_cross {
  align-self: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 52px;
  text-align: center;
}

.lp_trouble_pt .trouble_groups {
  display: flex;
  gap: 30px;
  margin: 30px 0 40px;
}
.lp_trouble_pt .trouble_group {
  flex: 1 1 0;
  /* 260915 カードを傾けたぶん角が左右へ数px張り出す。セクションに overflow-x:clip が
     あるので、逃げしろを持たせないと端のカードの角が切り落とされる。 */
  padding: 0 6px;
}
/* 260915 グループ見出しは吹き出しにする（ユーザー指示）。
   下向きの尻尾を付けて、直下のお悩みへ語りかける形にする。 */
.lp_trouble_pt .trouble_group_head {
  position: relative;
  margin-bottom: 26px;
  padding: 8px 0;
  border-radius: 10px;	/* 260825 サイト標準に合わせる（4pxだけ角が立っていた） */
  background: var(--c-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.lp_trouble_pt .trouble_group_head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  margin-left: -11px;
  border: 11px solid transparent;
  border-bottom: 0;
  border-top: 12px solid var(--c-primary);
}
.lp_trouble_pt .trouble_group--exp .trouble_group_head {
  background: var(--c-primary-dark);
}
.lp_trouble_pt .trouble_group--exp .trouble_group_head::after {
  border-top-color: var(--c-primary-dark);
}
/* 260915 カードは吹き出しにせず、少しずつ傾けて動きを出す（ユーザー指示）。
   1枚おきに向きを変える。470px幅を1.1度傾けると縦に約9px張り出すので、
   カード間の余白を 12px → 18px に広げて角が前のカードへ乗らないようにした。 */
.lp_trouble_pt .trouble_group li {
  padding: 16px 18px;
  background: #fff;
  border-left: 4px solid var(--c-primary-mid);
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transform: rotate(-1.1deg);
}
.lp_trouble_pt .trouble_group li:nth-child(even) {
  transform: rotate(1.1deg);
}
.lp_trouble_pt .trouble_group li + li {
  margin-top: 18px;
}
.lp_trouble_pt .trouble_group li p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}
.lp_trouble_pt .trouble_img {
  margin-bottom: 30px;
  text-align: center;
}
.lp_trouble_pt .trouble_img img {
  max-width: 100%;
  height: auto;
}

/* 260915 お悩みの人物写真（p_lp_trouble.png 1110x883）をカードの下ではなく
   セクションの背景に置き、お悩みを左右に振り分けて中央に人物を立たせる（ユーザー指示）。
   画像は高さ基準で敷くので、セクションが伸びると人物も大きくなる。
   カード列は 100vw まで広げて左右へ寄せ、中央に人物の幅ぶんを空ける。
   1100px 以下は中央を空けるほどの横幅が無く人物とカードが重なるので、
   背景に置くのはやめて従来どおり figure で下に出す。 */
@media screen and (min-width: 1101px) {
  /* 写真は水色の背景ごと入っているので、background でそのまま敷くと
     779x620 の水色の四角が薄緑の地から浮いて見える。疑似要素に置いて
     人物のまわりだけを残す楕円マスクをかけ、外周を地の色へ溶かす。
     画像の高さは固定する。セクションの高さに追従させると 1400px で
     人物だけで約650pxまで育ち、左右のカードへ食い込む。 */
  .lp_trouble_pt {
    position: relative;
  }
  .lp_trouble_pt::before {
    content: "";
    position: absolute;
    left: 50%;
    /* 260915 人物の位置。カード列の中に収めたいので下端からは離す（ユーザー指示） */
    bottom: 120px;
    width: 779px;
    height: 620px;
    margin-left: -390px;
    background: url(../images/p_lp_trouble.png) no-repeat center bottom / contain;
    /* 中心を上寄りにして、腰から下はフェードで消す。
       下のリード文「施工管理求人ドットコムなら〜」と人物が重なるため。
       楕円は必ず枠の内側でフェードを終わらせること。枠からはみ出す半径にすると
       途中の濃さのまま枠の縁で切れて、水色の帯が直線で出る（260915 実際に発生）。
       上端 = 47% - 45% = 2%、左右 = 50% ± 38% ＝ いずれも枠内で 0 になる。 */
    -webkit-mask-image: radial-gradient(ellipse 38% 45% at 50% 47%, #000 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 38% 45% at 50% 47%, #000 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .lp_trouble_pt > .mywidth {
    position: relative;
    z-index: 1;
  }
  .lp_trouble_pt .trouble_img {
    display: none;
  }
  /* 260915 100vw いっぱいに広げると 1900px では1枚のカードが690pxまで伸びて
     間延びする（ユーザー指示）。上限1420pxで頭打ちにし、中央へ寄せる。
     カード1枚は470pxに収まり、中央には人物ぶんの440pxが残る。 */
  .lp_trouble_pt .trouble_groups {
    width: min(100vw, 1420px);
    max-width: none;
    margin-left: calc(50% - min(50vw, 710px));
    padding: 0 20px;
    gap: 440px;
  }
  /* アクセント罫は左右対称にして、中央の人物を挟む形にする */
  .lp_trouble_pt .trouble_group--new li {
    border-left: 0;
    border-right: 4px solid var(--c-primary-mid);
  }
}

@media screen and (max-width: 650px) {
  .lp_skill_pt .skill_cols,
  .lp_trouble_pt .trouble_groups {
    display: block;
  }
  .lp_skill_pt .skill_col + .skill_col,
  .lp_trouble_pt .trouble_group + .trouble_group {
    margin-top: 24px;
  }
  /* 260915 縦積みになるので「×」を2枚のカードの間に置く。
     skill_cross が挟まると .skill_col + .skill_col が効かなくなるため、
     カード間の余白はこの margin で持たせる。 */
  .lp_skill_pt .skill_cross {
    display: block;
    width: 44px;
    height: 44px;
    margin: 20px auto;
    font-size: 26px;
    line-height: 44px;
  }
  .lp_skill_pt .skill_col {
    padding: 4vw;
  }
  .lp_skill_pt .skill_col_head,
  .lp_trouble_pt .trouble_group_head {
    font-size: 17px;
  }
  /* 260915 SPは人物写真を出さない（ユーザー指示）。
     縦積みだと写真とお悩みカードが縦に並ぶだけで、
     「悩んでいる人」を見せる意味が薄いわりに縦を食う。 */
  .lp_trouble_pt .trouble_img {
    display: none;
  }
  /* 写真を消したぶん、ロゴは行頭に置かず独立させて中央に見せる */
  .lp_trouble_pt .lp_trouble_dt .lp_trouble_txt .trouble_logo {
    display: block;
    margin: 0 auto 2vw;
    vertical-align: baseline;
  }
}

/*  260825 運営会社ページ グループ会社一覧（反映ガイドP12・新設）  */
.company_data .group_company {
  margin-bottom: 50px;
  padding: 24px;
  background: var(--c-primary-bg);
  border-radius: 8px;
}
.company_data .group_company > .hd3 {
  margin-bottom: 18px;
}
.company_data .group_company .data {
  background: #fff;
}
/* 260917 建物写真（反映ガイドP12）を表の右に置く。表を div で包み直すとインデントが全行ずれるため、
   枠自体をグリッドにして 見出し＝全幅／表＝左／写真＝右 に振り分ける。
   写真は本社アクセス（.access_pt .image .building）と同じ 273×410 */
.company_data .group_company {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 273px;
  column-gap: 28px;
  align-items: start;
}
.company_data .group_company > .hd3 {
  grid-column: 1 / -1;
}
.company_data .group_company > .data {
  grid-column: 1;
}
.company_data .group_company > .co_building {
  grid-column: 2;
  width: 273px;
  height: 410px;
  margin: 0;
}
.company_data .group_company > .co_building img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 650px) {
  .company_data .group_company {
    padding: 4vw;
  }
}
/* 1199px以下は写真を表の下へ。横に並べたままだと、表（th 180px固定）が
   768px で写真と重なり、1025px でも本文欄が286pxで営業登録が何行にも折り返した（実測）。
   1200px なら本文欄461px */
@media screen and (max-width: 1199px) {
  .company_data .group_company {
    grid-template-columns: minmax(0, 1fr);
  }
  /* content.css の .company_data .data { margin-bottom: 50px } が枠内にも効き、
     表→写真が70px・写真→枠下端が24pxで写真が浮いて見えた。表側の余白を消して写真の20pxだけにする */
  .company_data .group_company > .data {
    margin-bottom: 0;
  }
  .company_data .group_company > .co_building {
    grid-column: 1;
    margin: 20px auto 0;
  }
}
/* 本社アクセスの写真（content.css の 650px）と同じ幅で80%に切り替える。
   680px で切ると 651〜680px だけ横長（約440×410）になり、縦長の建物が上下で切れた */
@media screen and (max-width: 650px) {
  .company_data .group_company > .co_building {
    width: 80%;
  }
}

/* 260826 concept_pt に SEO仕様のH2/H3を足した分。
   260930 背景に重ねていた黒の膜（rgba(0,0,0,.55)）を外した。暗い印象なので発注者支援と同じく
   写真をそのまま見せる（先方依頼）。白文字のコントラストは下がる（最悪 1.10:1／中央値 4.83:1） */
.concept_pt {
  position: relative;
  height: auto;
  min-height: 620px;
  padding-bottom: 60px;
}
/* 260826 .mywidth に z-index は付けないこと。後続セクションを踏みつける */
.concept_pt .mywidth {
  position: relative;
}
/* 260930 膜を外したぶん、写真の明るい所で白文字が消えないよう影を付ける（先方依頼）。
   見出しは白抜き画像なので、画像にも drop-shadow で同じ影を付ける */
.concept_pt .concept_head,
.concept_pt .concept_head span,
.concept_pt .concept_sub,
.concept_pt p {
  text-shadow: 0 0 10px rgb(0 0 0), 0 1px 20px rgb(0 0 0);
}
.concept_pt .concept_head img,
.concept_pt .timg img {
  filter: drop-shadow(0 0 10px rgb(0 0 0)) drop-shadow(0 1px 20px rgb(0 0 0));
}
.concept_pt .concept_head {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
/* 260910 HOMEは見出しを「ロゴ＋とは？」の画像で置く。
   画像は2倍解像度（1135x118）なので表示幅は半分に固定する。
   .timg（従来のロゴ画像）の位置に来るので、上の余白もそちらに合わせる */
.concept_pt .concept_head_img {
  padding-top: 100px;
  margin-bottom: 30px;
}
.concept_pt .concept_head_img img {
  display: block;
  width: 567px;
  max-width: 100%;
  height: auto;
}
/* 260915 「はじめての方」の見出し。HOMEと同じロゴタイプを使い、文言だけ
   SEOライティング資料[51]の指定テキストのまま横に並べる（ユーザー指示）。
   ロゴは t_concept_home.png から「とは？」を落とした 926x118 の2倍解像度。
   上下の余白は .timg・.concept_head_img と同じにして、HOMEと位置を揃える。 */
.concept_pt .concept_head_logo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 100px;
  margin-bottom: 30px;
}
.concept_pt .concept_head_logo img {
  display: block;
  width: 463px;
  max-width: 100%;
  height: auto;
}
/* 文言は span にも色を直接指定する。リセットの `* { color:#000 }`（common.css:9）が
   全要素へ直接当たるため、h2 の color:#fff は子の span へ継承されない。 */
.concept_pt .concept_head_logo span {
  color: #fff;
}
.concept_pt .concept_sub {
  margin: 0 0 24px;
  padding: 0;
  border-left: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}

/* 260826 主要取引先の見出しをSEO仕様のH2に譲ったので、元の文言はキャプションとして残す */
.partners_pt .partners_caption {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: bold;
  color: var(--c-primary);
}

/* 260915 同じ理由で譲った2箇所。HOMEの「選ばれる理由」と、はじめての方の「施工管理業務とは？」 */
.reason_pt .reason_caption,
.lp_service_pt .lp_service_caption {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: bold;
  color: var(--c-primary);
}

/* 260826 SEO仕様のH2「未経験から経験者まで安心の転職支援サービス」に対応する新設セクション */
.service_cta_pt {
  padding: 50px 0;
  background-color: var(--c-primary-bg);
}
.service_cta_pt .service_cta_text {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}
/* 260910 ボタンは中央揃え（ユーザー指示）。SPは下の @media で block＝全幅になるため影響なし */
.service_cta_pt .service_cta_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.service_cta_pt .service_cta_btns a {
  display: inline-block;
  min-width: 280px;
  padding: 14px 28px;
  border-radius: 8px;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  transition: 0.3s;
}
.service_cta_pt .service_cta_btns a:first-child {
  background-color: var(--c-primary);
}
/* 260910 「転職支援サービス（無料）を利用する」はサイト内の他のCTAと同じ役割・同じ文言で、
   ヘッダー・追従ボタン・btn_link02・lp の lp_btn_group はすべて --c-cta（赤）。
   ここだけ --c-primary-sub（緑）で取り残されていたので揃えた（ユーザー指示）。
   1つ目「無料で会員登録する」は lp の1つ目と同じ --c-primary のままで既に揃っている。 */
.service_cta_pt .service_cta_btns a:last-child {
  background-color: var(--c-cta);
}
.service_cta_pt .service_cta_btns a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 650px) {
  .concept_pt {
    min-height: 0;
    padding-bottom: 8vw;
  }
  .concept_pt .concept_head {
    font-size: 5vw;
    margin-bottom: 3vw;
  }
  /* 260915 SPは横に並べる幅が無いのでロゴと文言を縦積みにする */
  .concept_pt .concept_head_logo {
    display: block;
    padding-top: 12vw;
    margin-bottom: 4vw;
  }
  .concept_pt .concept_head_logo img {
    width: 72vw;
    margin-bottom: 3vw;
  }
  .concept_pt .concept_sub {
    font-size: 3.4vw;
    margin-bottom: 4vw;
  }
  /* 260915 キャプションはリード見出し .hd3--lead（max(11px, 3.4vw)）より小さく保つ。
     3.5vw だと 375px で 13.125px となり、12.75px の h3 を上回って補助の方が目立っていた。 */
  .partners_pt .partners_caption,
  .reason_pt .reason_caption,
  .lp_service_pt .lp_service_caption {
    font-size: max(10.5px, 3.2vw);
  }
  .service_cta_pt .service_cta_text {
    font-size: 3.5vw;
  }
  .service_cta_pt .service_cta_btns {
    display: block;
  }
  .service_cta_pt .service_cta_btns a {
    display: block;
    min-width: 0;
    margin-bottom: 3vw;
    padding: 3.5vw 4vw;
    font-size: 3.8vw;
  }
}

/* 260826 SEO要件で新設した「求人ネットワーク」ブロック（はじめての方） */
.lp_network_pt {
  padding: 50px 0;
}