@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
/* メインビジュアル
------------------------------------------------------------- */
.mv {
      background-color: var(--col_bg_light);
      width: 100%;
      margin-bottom: -10px;
      position: relative;
}
video.mv_video {
      aspect-ratio: 16 / 9;
      width: 100%;
      object-fit: cover;
      object-position: center;
        height: auto;
}
.mv_inner {
      display: none;
}


/* 動画コントロールボタン
------------------------------------------------------------- */
.mv_controls {
      position: absolute;
      top: 1.5em;
      right: 1.5em;
      display: flex;
      gap: 0.6em;
      z-index: 10;
}
.mv_btn {
      width: 2.8em;
      height: 2.8em;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.55em;
      transition: background 0.2s;
}
@media screen and (min-width: 961px), print {
      .mv_btn:hover {
            background: rgba(0, 0, 0, 0.7);
      }
}
.mv_btn svg {
      width: 100%;
      height: 100%;
      fill: #fff;
}
/* 再生/停止アイコン切替 */
.mv_btn_play .icon_pause { display: none; }
.mv_btn_play.is-playing .icon_play { display: none; }
.mv_btn_play.is-playing .icon_pause { display: block; }
/* ミュート/音量アイコン切替（初期状態：ミュート中） */
.mv_btn_mute .icon_sound { display: none; }
.mv_btn_mute.is-unmuted .icon_muted { display: none; }
.mv_btn_mute.is-unmuted .icon_sound { display: block; }
/* 再生ボタン：PCでは非表示 */
.mv_btn_play {
      display: none;
}
@media screen and (max-width: 960px) {
      .mv_btn_play {
            display: flex;
      }
      .mv_btn_mute {
            display: none;
      }
}
.mv_title_sub {
      font-family: var(--font_en);
}

/* タイトル
------------------------------------------------------------- */
.section_title {
      font-family: var(--font_en);
      line-height: 1.0;
      font-size: 4em;
      font-weight: bold;
}
.section_subtitle {
      font-weight: 500;
      font-size: 1.2em;
}
@media screen and (max-width: 680px) {
      .section_title {
            font-size: 2.8em;
      }
      .section_subtitle {
            font-size: 1.2em;
      }
}
/* 製品情報
------------------------------------------------------------- */
.products {
      position: relative;
      padding: 8rem 0;
}
.products_head {
      margin-bottom: 6rem;
}
.products_head .section_title, .products_head .section_subtitle {
      color: var(--col_white);
}
@media screen and (max-width: 680px) {
      .products {
            padding: 4rem 0;
      }
      .products_head {
            margin-bottom: 2rem;
      }
}
.products:before {
      content: "";
      background: url("../images/top/bg_product.png") no-repeat;
      background-position: top;
      background-size: cover;
      width: 100%;
      height: 40%;
      position: absolute;
      left: 0;
      top: 0;
}
.products_list {
      display: flex;
      gap: 4rem;
      justify-content: center;
}
.products_item {
      background: var(--col_white);
      flex: 1;
      max-width: 50rem;
      overflow: hidden;
      box-shadow: var(--box_shadow);
}
.products_item .text_box {
      position: relative;
      z-index: 1;
}
.products_item_img {
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
}
.products_item_img > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
}
@media screen and (min-width: 961px), print {
      .products_item a:hover .products_item_img > img {
            transform: scale(1.1);
      }
}
.products_item_title {
      position: absolute;
      top: -2em;
      display: inline-block;
      font-size: 1.6em;
      font-weight: bold;
      color: var(--col_main);
      background: #fff;
      border-radius: 0 0.2em 0 0;
}
.products_item_title span {
      position: relative;
      display: inline-block;
      padding: 0.2em 2em 0.2em 1em;
}
.products_item_title span:before {
      content: "";
      background: url("../images/arrow.svg") no-repeat;
      background-size: contain;
      aspect-ratio: var(--arrow_a);
      width: 0.3em;
      position: absolute;
      top: 50%;
      right: 0.5em;
      transform: translate(-0%, -50%);
      filter: invert(28%) sepia(20%) saturate(1676%) hue-rotate(78deg) brightness(92%) contrast(102%);
}
.products_item_text {
      font-size: 1.0em;
      line-height: 1.8;
      color: var(--col_text);
      padding: 1.5em 1.5em 1.5em 1.5em;
}
@media screen and (max-width: 680px) {
      .products_list {
            flex-direction: column;
            gap: 3rem;
      }
}
/* 廃棄物の減量
------------------------------------------------------------- */
.reduction {
      background: #DCF5E5 url(../images/top/bg_reduction.png) no-repeat;
      background: cover;
      padding: 8rem 0;
}
.reduction_head {
      margin-bottom: 6rem;
}
.reduction_title {
      line-height: 1.0;
      font-size: 2em;
      font-weight: bold;
      margin-bottom: 1em;
}
.reduction_subtitle {
      font-weight: bold;
      font-size: 1.2em;
}
@media screen and (max-width: 680px) {
      .reduction {
            padding: 3em 0;
      }
      .reduction_title {
            text-align: center;
      }
}
.reduction_content {
      display: flex;
      gap: 0 3em;
      align-items: center;
      flex-direction: row-reverse;
}
.reduction_text_box {
      flex: 1;
}
.reduction_text {
      font-size: 1.2em;
      line-height: 1.8;
      margin-bottom: 2em;
}
.reduction_img {
      flex: 1;
}
@media screen and (max-width: 680px) {
      .reduction_content {
            display: block;
      }
      .reduction_img {
            margin-bottom: 3em;
      }
      .reduction_btn > .btn {
            text-align: center;
            width: 90%;
            margin: auto;
            ;
      }
      .reduction_btn > .btn > * {
            display: block;
      }
}
/* 独創の技術
------------------------------------------------------------- */
.technology {
      background: var(--bg_gray_light);
      padding: 0em 0 5em 0;
      margin: 12em auto 2em auto;
}
.technology_head {
      margin-bottom: 6rem;
}
.technology_title {
      font-family: var(--font_en);
      line-height: 1.3;
      font-size: 3em;
      font-weight: bold;
      margin-bottom: 0.4rem;
      letter-spacing: 1px;
      ;
}
.technology_subtitle {
      font-family: var(--font_en);
      font-size: 1.3em;
      margin-bottom: 2em;
}
@media screen and (max-width: 680px) {
      .technology {
            background: none;
      }
}
.technology_content {
      display: flex;
      gap: 6em;
      align-items: center;
      position: relative;
}
.technology_content:before {
      position: absolute;
      content: "";
      background: var(--bg_gray_light);
      height: 6em;
      top: -6em;
      right: calc(-50% + 5em);
      width: 100%;
}
.technology_text_box {
      flex: 1;
}
.technology_img img {
      width: 100%;
      overflow: hidden;
}
.technology_img > img {
      width: 100%;
      height: auto;
}
.technology_text_box {
      flex: 1;
}
.technology_text {
      line-height: 2.0;
      color: var(--col_text);
      margin-bottom: 3em;
}
@media screen and (max-width: 680px) {
      .technology {
            padding: 5em 0 2em 0;
            margin: 0em auto 0 auto;
      }
      .technology_content:before {
            content: none;
      }
      .technology_text_box {
            position: relative;
            padding-bottom: 4em;
      }
      .technology_text_box:before {
            position: absolute;
            content: "";
            background: var(--bg_gray_light);
            height: calc(100% + 10em);
            top: auto;
            right: auto;
            bottom: 0;
            left: -10%;
            width: 120%;
            z-index: -1;
      }
}
/* technology_links */
.line_btn > a {
      font-size: 1.4em;
      ;
      padding: 0.8em 1em;
      display: block;
}
.line_btn > a {
      position: relative;
      border-bottom: 1px solid var(--bg_gray_dark);
}
.line_btn > a::before {
      content: "";
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      right: 12px;
      width: 6px;
      height: 6px;
      border-top: 1px solid var(--bg_green);
      border-right: 1px solid var(--bg_green);
      transform: rotate(45deg);
      transition: all 0.15s ease;
}
.line_btn .ja {
      margin-right: 1em;
      font-size: 1.0em;
      font-weight: bold;
}
.line_btn .en {
      font-size: 0.6em;
      font-family: var(--font_en);
      color: var(--bg_green);
}
@media screen and (min-width: 961px), print {
      .line_btn > a:hover {
            color: var(--col_main_light);
      }
}
/* お知らせ
------------------------------------------------------------- */
.news {
      padding: 8rem 0;
}
.news_head {
      margin-bottom: 6rem;
}
@media screen and (max-width: 680px) {
      .news {
            padding: 4rem 0;
      }
      .news_head {
            margin-bottom: 2rem;
      }
      .technology_content {
            flex-direction: column;
            gap: 4rem;
      }
      .technology_links {
            flex-direction: column;
            gap: 2rem;
      }
}
@media screen and (min-width: 681px), print {
      .news_inner {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(1, 2fr 6fr);
      }
      .news_head {
            grid-area: 1 / 1 / 2 / 2;
      }
      .news_btn_wrap {
            padding-right: 5em;
            grid-area: 2 / 1 / 3 / 2;
      }
      .news_inner .news_list {
            grid-area: 1 / 2 / 3 / 3;
      }
}
@media screen and (max-width: 960px) {
      .news_btn_wrap {
            padding-right: 2em;
      }
}
@media screen and (max-width: 680px) {
      .news_btn_wrap {
            max-width: 90%;
            margin: auto;
            padding: 0;
      }
}
.news_btn_wrap .btn > * {
      width: 100%;
      display: block;
}
@media screen and (max-width: 680px) {
      .news_btn_wrap .btn > * {
            width: auto;
      }
}
.news_list {
      margin-bottom: 4rem;
}
.news_list_items {
      list-style: none;
      padding: 0;
      margin: 0;
}
.news_list_items li {
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #E0E0E0;
}
.news_list_items li:first-child {
      border-top: 1px solid #E0E0E0;
}
.news_list_items a,
.news_list_items span {
      display: flex;
      gap: 3rem;
      padding: 1.5em 2em;
      text-decoration: none;
      transition: opacity 0.3s ease;
}
.news_list_items a .news_text {
      text-decoration: underline;
      color: var(--bg_blue);
}
@media screen and (min-width: 961px), print {
      .news_list_items a:hover .news_text {
            text-decoration: none;
      }
}
.news_date {
      white-space: nowrap;
}
.news_text {
      line-height: 1.6;
      flex: 1;
}
@media screen and (max-width: 680px) {
      .news_list_items a,
      .news_list_items span {
            flex-direction: column;
            gap: 1rem;
            padding: 2rem 0;
      }
}
/* 採用情報
------------------------------------------------------------- */
.recruit {
      margin: 2em auto 8em auto;
      padding: 7em 0 0 0;
      position: relative;
}
.recruit:before {
      position: absolute;
      content: "";
      background: var(--bg_gray_light);
      height: 100%;
      top: 0;
      left: 0;
      width: 55%;
}
.recruit .section_inner {
      position: relative;
}
.recruit_head {
      position: absolute;
      top: 13em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
}
.recruit_head > * {
      display: inline-block;
      color: var(--col_white);
}
.recruit_head .section_title {
      font-family: var(--font_en);
      line-height: 1.0;
      font-size: 3em;
      font-weight: bold;
      background: var(--col_main);
      padding: 0.2em 20px;
}
.recruit_head .section_subtitle {
      font-weight: bold;
      font-size: 1.2em;
      background: var(--col_main);
      padding: 0.3em 20px;
}
@media screen and (max-width: 680px) {
      .recruit {
            margin: 2em auto 4em auto;
      }
      .recruit_head {
            top: -2em;
      }
      .recruit:before {
            width: 100%;
            height: 15em;
            left: 0;
      }
}
/* recruit_img */
.recruit_img {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(1, 2fr 1fr);
      gap: 2rem;
}
.recruit_img img {
      width: 100%;
      height: 15em;
      object-fit: cover;
      object-position: center;
}
.recruit_img_01 {
      grid-column: 1 / 3;
}
.recruit_text {
      margin-top: 1.5em;
      line-height: 2;
      padding-left: 20em;
}
.recruit_btn_wrap > .btn {
      text-align: center;
}
.recruit_btn_wrap > .btn a {
      display: block;
      width: 20em;
      margin: 2em 0 auto auto;
}
@media screen and (max-width: 680px) {
      .recruit_img {
            display: block;
      }
      .recruit_img_01 {
            margin-bottom: 1em;
            ;
      }
      .recruit_img img {
            height: auto;
      }
      .recruit_text {
            padding-left: 0;
            margin-bottom: 2em;
      }
      .recruit_btn_wrap > .btn {
            width: 90%;
            margin: auto;
      }
      .recruit_btn_wrap > .btn a {
            width: auto;
            margin: auto 0 auto auto;
      }
}