@charset "utf-8";
/* CSS Document for PC */
/*はみ出し防止*/
html,body {
  overflow-x: hidden;
}

.sc_wide {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.sc_wide *,
.sc_wide *::before,
.sc_wide *::after {
  box-sizing: border-box;
}

.sc_wide img,.sc_wide video,.sc_wide iframe,.sc_wide svg,.sc_wide canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.sc_wide section,.sc_wide div,.sc_wide figure,.sc_wide picture,.sc_wide a {
  max-width: 100%;
}

/* 念のため、100vw系のはみ出しを抑える */
.sc_wide [style*="100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}
/*はみ出し防止ここまで*/

main .scwide {
    margin: 0 auto;
    width: 100%;
}

:where(img) {max-width:100%;height:auto;}
:where(figure) {margin:0;}
:where(figcaption) {margin:0.5em 0 0 0;}

.pc-hidden {display:none !important;}

main .scwide section{
    margin-bottom: 100px;
}

.scwide .mv picture img {
    display:block;
    width: 100%;
    max-height: calc(100dvh - 140px);
    aspect-ratio: 2000 / 917;
    object-fit: cover;
    overflow:hidden;
    object-position:50% 65%;
}


p.caution {
    text-indent:-1em;
    padding-left:1em;
}
p.caution.-red {
    color:#D80C18;
}
p.caution.-small {
    text-indent:-1em;
    padding-left:2em;
    font-size:90%;
}

.text-big {
    font-size:1.2em;
    display:inline-block;
}

.text-small {
    font-size:0.8em;
}

span.ib {
    display:inline-block;
}

.text-r {
    text-align:right;
}
.text-c {
    text-align:center;
}
.text-l {
    text-align:left;
}

/*  ボタンデザイン
-------------------------------------------------------------*/
/*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/
button {
    border:none;
    background: none;
    margin:10px auto;
    display:block;
}
button.full {
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

main .scwide a.btn {
    max-width: 250px;
    padding: 10px 20px;
    background: #d80c18;
    color: #FFF;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    margin-right: 20px;
}

/*マウスホバー時*/
main .scwide a.btn:hover {
    opacity: 0.6;
    transition:0.5s;
}
/*押せないボタンホバー時*/
main .scwide a.btn.enable:hover {
    opacity: 1.0;
}

/*戻る・クリア・削除・ログアウト等*/
main .scwide a.negative {
    background: #666;
}

/*キャンセル・取り消し系*/
main .scwide a.negative.cancel{
    background: #DADADA;
    color: #111;
}

/*非活性ボタン*/
main .scwide .enable{
    color: #FFF;
    padding: 10px 20px;
    background: #DADADA;
    cursor: inherit;
    border-radius: 7px;
}

/*普通サイズの時にはクラスに下記を追加*/
main .scwide a.medium {
    max-width: 230px;
    min-width: 200px;
    font-size: 16px;
    max-width: 230px;
    margin-bottom: 1em;
}

/*小さいサイズの時にはクラスに下記を追加*/
main .scwide a.small {
    padding: 6px 10px;
    font-size: 12px;
    max-width: 230px;
    margin-bottom: 1em;
}

/*  画像とテキストの配置
-------------------------------------------------------------*/
main .scwide .img-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

main .scwide .img-left {
    float: left;
    margin-right: 20px;
    margin-left: 10px;
    max-width: 50%;
}

main .scwide .img-right {
    float: right;
    margin-right: 10px;
    margin-left: 20px;
    max-width: 50%;
}

main .scwide .caption {
    font-size: 0.9em;
    line-height: 1.4em;
}
main .scwide img + .caption {
    margin-top:5px;
}
main .scwide p.caption {
    margin-bottom:10px;
}

main .scwide .text-center {
    display: block;
    text-align: center;
}

/*  リスト
-------------------------------------------------------------*/
main .scwide ul,
main .scwide dd {
    padding-bottom: 10px;
}

main .scwide li {
    list-style: disc;
    margin: 5px 20px 20px 20px;
    padding-left: 6px;
}

main .scwide ul.small-list li {
    margin-bottom:5px;
}


main .scwide ol li {
    list-style-type: decimal;
    margin-bottom:5px;
}

main .scwide dt {
    font-size: 90%;
    margin-left: 20px;
    font-weight: bold;
}
main .scwide dt.-thin {
    font-weight: normal;
}

main .scwide dd {
    font-size: 90%;
    margin: 5px 40px;
}

main .scwide dl.spec {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-bottom:10px;
}
main .scwide dl.spec dt {
    margin:0;
    padding:0 0 10px 0;
}
main .scwide dl.spec dd {
    margin:0;
    padding:0 1em 10px 0;
}

/*  テーブル
-------------------------------------------------------------*/

main .scwide table{
    margin: 10px auto;
    width: 970px;
    font-size: 15px;
    border: none;
    line-height: 150%;
}
main .scwide table.size-chart {
    width:100%;
    margin-bottom:30px;
}

main .scwide th {
    width: 190px;
    padding: 15px 10px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: none;
    border-right: none;
    background: #f7f7f7;
    vertical-align: top;
    font-weight: bold;
    text-align: left;
    color: #111;
}
main .scwide table.size-chart th {
    padding: 8px 10px;
    width:auto;
    text-align:center;
    vertical-align: middle;
}


main .scwide td {
    padding: 15px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: none;
    vertical-align: top;
}
main .scwide table.size-chart td {
    text-align:center;
    vertical-align: middle;
}



/*  ナビゲーション
-------------------------------------------------------------*/

.navi-none main {
    float: none;
    width: 100%;
}

/*flexbox
-------------------------------------------------------------*/

:root {
  --container-width: 1200px;
  --columns: 12;
  --gutter: 0;
}

.scwide .container {
  width: min(100% - 40px, var(--container-width));
  margin-inline: auto;
}

/* 12カラムの行 */
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox.row {
  gap: var(--gutter);
}
.flexbox.column {
  padding: var(--gutter) 0;
}

/* カラム共通 */
[class^="col-"] {
  min-width: 0;
}

/*
  1カラムの基準幅：
  (全体幅 - gap合計) / 12
  gap合計 = 11個分
*/
.col-1  { width: calc(100% / 12 * 1); }
.col-2  { width: calc(100% / 12 * 2); }
.col-3  { width: calc(100% / 12 * 3); }
.col-4  { width: calc(100% / 12 * 4); }
.col-5  { width: calc(100% / 12 * 5); }
.col-6  { width: calc(100% / 12 * 6); }
.col-7  { width: calc(100% / 12 * 7); }
.col-8  { width: calc(100% / 12 * 8); }
.col-9  { width: calc(100% / 12 * 9); }
.col-10 { width: calc(100% / 12 * 10); }
.col-11 { width: calc(100% / 12 * 11); }
.col-12 { width: 100%; }

/* よく使う補助クラス */
.row-reverse {
    flex-direction: row-reverse;
}
.align-center {
  align-items: center;
}
.align-between {
  align-content: space-between;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-center {
  justify-content: center;
}
/* 子要素の補助クラス */
.align-self-start {
    align-self: flex-start;
}
.align-self-center {
    align-self: center;
}
.align-self-end {
    align-self: flex-end;
}
.align-self-stretch {
    align-self: stretch;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .container {
    width: min(100% - 32px, var(--container-width));
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-6 {
    width: calc((100% - var(--gutter)) / 2);
  }
}

@media (max-width: 768px) {
  .row {
    gap: 16px;
  }

  [class^="col-"] {
    width: 100%;
  }
}



/*  限定カラーページ用
-------------------------------------------------------------*/

.scwide section p.text {
    line-height:1.6;
}

.scwide a.btn.slim {
    padding: 3px 30px 4px 20px;
    background: #7d949f;
    border-radius: 0;
    font-size: 13px;
    position:relative;
    margin: 20px 0;
}
.scwide a.btn.slim::after {
    content: '';
    width: 8px;
    height: 7px;
    background: url(../../images/common/arrow-w.svg) no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.scwide figure a:hover {
    opacity: 0.6;
    transition:0.5s;
    text-decoration: underline;
}
.scwide figure {
    background-color: #FFF;
}
.scwide figcaption span.sku {
    font-weight:bold;
}
.scwide figcaption .sku+.-small {
    margin-left:10px;
}
.scwide figcaption span.-small {
    font-size:14px;
}

.col_lead {
  position: relative;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 250px;
}

.col_lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%),url("/client_info/ERECTA/infoimage/ltd_col/sc_col_bk01.webp") no-repeat right / contain;
  opacity: 0.4;
  z-index: -2;
}

.col_lead__inner .text-box {
    padding:30px 150px;
}
.col_lead__inner h1 {
    margin:20px;
}
.col_lead__inner h1 p {
    font-size:18px;
    margin-top:10px;
    font-weight:bold;
}
.col_lead_next {
    position:relative;
    margin-top:-200px;
}
.col_lead_next::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    background: #496e63;
    z-index: -1;
}
:is(.col_lead_next,.col_custom__inner) figure {
    margin-bottom:0;
}

.col_info__inner {
    margin-top:30px;
    margin-bottom:50px;
}
.col_info__inner div.flexbox:nth-child(2) {
    margin-top:50px;
}
.color_text-box {
    color:#FFF;
    padding:60px 40px 65px 40px;
    position:relative;
}
.color_text-box.orange {
    background-color:#eb613b;
}
.color_text-box.green {
    background-color:#496e63;
}
.color_text-box.position-a::after {
    position:absolute;
    content:"";
    background-color:#eb613b;
    width:40px;
    height:100%;
    z-index:-1;
    right: -40px;
    bottom: 0;
}
.color_text-box.position-b {
    margin-bottom: 100px;
}


.color_text-box .title {
    font-weight:bold;
    font-size:18px;
    margin-top:0;
    margin-bottom:1.5em;
}
.color_text-box .title ~ p {
    margin-top:1em;
}


section.bk {
  position: relative;
  overflow: hidden;
}

section.bk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

section.bk.col_info::before {
  background: url("/client_info/ERECTA/infoimage/ltd_col/sc_col_bk02.webp") no-repeat center / cover;
  opacity: 0.15;
}

section.bk.col_wire::before {
  background: url("/client_info/ERECTA/infoimage/ltd_col/sc_col_bk03.webp") no-repeat center / cover;
  opacity: 0.15;
}

section.bk.col_block {
  background-color: #fef1ea;
}

section.bk.col_block.lego {
    width: 100%;
    height: auto;
    aspect-ratio: 2000 / 293;
    object-fit: contain;
    overflow:hidden;
    text-align:center;
}

.bk [class$="__inner"] {
  position: relative;
  z-index: 1;
}



.col_block__inner {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: repeat(3, auto);
    gap: 8px;
    margin-top:20px;
    margin-bottom:50px;
    width:100%;
}
.col_block__inner .left {
    grid-row: span 3 / span 3;
    padding-bottom:50px;
}
.col_block__inner .left>div {
    height:100%;
}
.col_block__inner .mid-ttl {
    grid-column-start: 2;
    grid-row-start: 1;
    text-align:center;
}
.col_block__inner .mid-ttl h2 {
    margin:0 0 10px 0;
    font-size:30px;
    font-weight:bold;
}
.col_block__inner .mid-ttl p {
    margin:0 0 20px 0;
    font-size:20px;
    font-weight:bold;
}
.col_block__inner .mid-mov {
    grid-column-start: 2;
    grid-row-start: 2;
}
.mid-mov img {
    width:100%;
}
.col_block__inner .mid-img {
    grid-column-start: 2;
    grid-row-start: 3;
    padding-top: 30px;
}
.col_block__inner .right {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 1;
    padding-bottom:50px;
}
.col_block__inner .right>div {
    height:100%;
}

.col_custom__inner {
    display: grid;
    grid-template-rows: repeat(3, auto);
    margin-top:20px;
    margin-bottom:50px;
    width:100%;
}
.col_custom__inner.-corner {
    grid-template-columns: 35% 65%;
}
.col_custom__inner.-high {
    grid-template-columns: 65% 35%;
}
.col_custom__inner .draw-o {
    grid-column-start:1;
    grid-row-start:1;
    margin:0 auto 30px auto;
}
.col_custom__inner .draw-g {
    grid-column-start:2;
    grid-row-start:1;
    margin:0 auto 30px auto;
}
:is(.draw-g,.draw-o) img {
    max-height:250px;
    width:auto;
}
.col_custom__inner .text-o {
    grid-column-start:1;
    grid-row-start:2;
}
.col_custom__inner .text-g {
    grid-column-start:2;
    grid-row-start:2;
}
:is(.text-o,.text-g) {
    position:relative;
    color:#fff;
    padding:30px;
    display: flex;
    align-items: center;
}
.col_custom__inner .photo-o {
    grid-column-start:2;
    grid-row: 1 / span 2;
}
.col_custom__inner .photo-g {
    grid-column-start:1;
    grid-row: 1 / span 2;
}
.col_custom__inner .caption-o {
    grid-column-start:2;
    grid-row-start:3;
}
.col_custom__inner .caption-g {
    grid-column-start:1;
    grid-row-start:3;
}
.text-o::before {
    position:absolute;
    content:"";
    height:100%;
    width:100vw;
    left:auto;
    right:0;
    bottom:0;
    z-index:-1;
    background-color:#eb613b;
}
.text-g::before {
    position:absolute;
    content:"";
    height:100%;
    width:100vw;
    right:auto;
    left:0;
    bottom:0;
    z-index:-1;
    background-color: #496e63;
}

:is(.col_wire,.col_item) {
  --gutter: 60px;
}

.col_wire__inner {
    margin:100px auto 80px auto;
}
.col_wire__inner .logo-box {
    padding:0 100px;
}
.col_wire__inner .wire_logo {
    margin:20px 0 0 0;
}
.col_wire__inner .text-box {
    padding:0 50px;
}
.col_wire__inner h2 {
    font-size:18px;
    margin: 0 0 1em 0;
}

.col_item {
    margin:0 100px;
}
.col_item>div.item {
    width: 38%;
}