@charset "UTF-8";
.breadcrumbs {
    padding: 14px 0;
}

.breadcrumbs ul {
    display: flex;
}

.breadcrumbs ul li {
    font-weight: 400;
    white-space: nowrap;
}

.breadcrumbs ul li::after {
    content: "＞";
}

.breadcrumbs ul li:last-child {
    white-space: initial;
}

.breadcrumbs ul li:last-child::after {
    content: "";
}

.breadcrumbs ul li a {
    color: #393939;
}

.icon {
    display: inline-block;
    position: relative;
}

.icon::before {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.ic-menu {
    height: 22px;
    width: 22px;
}

.ic-menu::before {
    background-image: url('data:image/svg+xml,%3csvg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 1H21" stroke="%23393939" stroke-width="2" stroke-linecap="round"/%3e%3cpath d="M1 8H21" stroke="%23393939" stroke-width="2" stroke-linecap="round"/%3e%3cpath d="M1 15H21" stroke="%23393939" stroke-width="2" stroke-linecap="round"/%3e%3c/svg%3e');
    height: 22px;
    width: 22px;
}

.ic-menuclose {
    height: 18px;
    width: 18px;
}

.ic-menuclose::before {
    background-image: url('data:image/svg+xml,%3csvg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 2L15 16" stroke="%23393939" stroke-width="2" stroke-linecap="round"/%3e%3cpath d="M1 16L15 2" stroke="%23393939" stroke-width="2" stroke-linecap="round"/%3e%3c/svg%3e');
    height: 18px;
    width: 18px;
}

.btn-menu,
.btn-menuclose {
    border: none;
    outline: none;
    background: transparent;
}

.pagination {
    margin-bottom: 58px;
}

.pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination ul a {
    color: #393939;
    font-size: 1.8rem;
}

.fade-in {
    opacity: 0;
    transition-duration: 500ms;
    transition-property: opacity, transform;
}

.fade-in-up {
    transform: translate(0, 50px);
}

.fade-in-down {
    transform: translate(0, -50px);
}

.fade-in-left {
    transform: translate(-50px, 0);
}

.fade-in-right {
    transform: translate(50px, 0);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

.headernav {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    background: #fff;
}

.headernav .headerbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 87px 0 73px;
    width: 100%;
}

.headernav .navmenu .btn-menu.change-color .ic-menu::before {
    filter: invert(70%) sepia(76%) saturate(296%) hue-rotate(90deg) brightness(87%) contrast(105%);
}

.headernav .navmenu .menu.active {
    background-color: #fff;
    display: block;
    opacity: 1;
    pointer-events: auto;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 3;
}

.headernav .navmenu .menu>ul a {
    position: relative;
    display: inline-block;
    transition: 0.3s;
}

.headernav .navmenu .menu>ul a:after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    content: "";
    width: 0;
    height: 2px;
    background-color: #31aae2;
    transition: 0.3s;
    transform: translateX(-50%);
}

.headernav .navmenu .menu>ul a:hover:after {
    width: 100%;
}

.headernav .navmenu .menu.change-color>ul li a {
    color: #1A6334;
    transition: 0.5s;
}

.headernav .navmenu .menu.change-color>ul li a:hover {
    color: #1E322F;
}

.headernav .navmenu .menu-logo {
    padding: 20px;
}

.headernav .navmenu .submenu {
    margin-top: 30px;
}

.headernav .navmenu .submenu .btn {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.headernav .navmenu .submenu ul {
    margin-top: 30px;
}

.headernav .navmenu .submenu li {
    font-size: 1.4rem;
}

.headernav .navmenu .submenu li a {
    color: #1E322F;
    display: block;
    padding: 5px 20px;
}

.headernav .navmenu .btn-menuclose {
    position: absolute;
    top: 27px;
    right: 20px;
    z-index: 5;
}

.footer {
    width: 100%;
    background-image: linear-gradient(90deg, rgb(123, 190, 206), rgb(88, 161, 224));
}

.footer .container {
    display: flex;
    align-items: start;
    justify-content: space-between;
    width: 1160px !important;
    margin: 0 auto;
    padding-top: 30px;
}

.footer .container .company-info {
    color: #fff;
    width: 350px;
    margin-right: 90px;
}

.footer .container .company-info p {
    font-size: 2.1rem;
}

.footer .container .company-info ul li {
    font-size: 1.4rem;
    font-weight: 400;
}

.footer .container .footer-nav {
    display: flex;
    align-items: start;
    justify-content: space-between;
    width: 740px;
}

.footer .container .footer-nav a {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.footer .container .footer-nav a.menu-child {
    font-weight: 300;
}

.footer .copy {
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-top: 44px;
    padding-bottom: 17px;
}

#top .hero {
    position: relative;
}

#top .hero .catch {
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: end;
    color: #fff;
    z-index: 4;
    position: absolute;
    bottom: 40px;
    left: 80px;
}

#top .movie-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#top .movie-wrapper #video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 70px;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

#top .movie-wrapper .video-wrapper {
    height: 100vh;
}

#top .movie-wrapper .video-wrapper:after {
    /* content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./assets/images/mask.webp);
    background-color: #0003;
    content: "";
    opacity: .5;
}

#top .hero .catch.catch1 {
    top: 30vh;
}

#top .hero .catch.catch2 {
    right: initial;
    left: 110px;
    top: 50vh;
}

#top .hero .catch.catch3 {
    top: 40vh;
}

#top .hero .catch.catch4 {
    top: 50vh;
    right: initial;
    left: 110px;
}

#top .hero .catch.catch5 {
    top: 50vh;
}

#top .hero .catch p {
    font-size: 2rem;
    text-align: center;
    line-height: 1.9;
    font-weight: 300;
    text-align: left;
}

#top .hero .catch p.catch-main {
    font-size: 7rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 300;
}

#top .hero .catch p.catch-main>br {
    display: none;
}

@media screen and (max-width: 1610px) {}

@media screen and (max-width: 1310px) {
    #top .hero .catch p {
        font-size: 2.1rem;
    }
    #top .hero .catch p.catch-main {
        font-size: 4.8rem;
    }
}

#top .hero .slide-media {
    height: 90vh;
    display: flex;
    align-items: start;
    justify-content: center;
    background-image: linear-gradient(55deg, #fff, #e2ebf0);
}

#top .hero .slide-media img {
    width: 100%;
    vertical-align: middle;
}

#top .hero .label {
    position: absolute;
    top: 105px;
    left: 0;
    z-index: 2;
    line-height: 1;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 17px 34px 17px 66px;
    background-image: linear-gradient(90deg, rgb(123, 190, 206), rgb(88, 161, 224));
}

#top .container {
    width: 1070px;
}

#top section .container {
    display: flex;
    align-items: top;
    justify-content: space-between;
    padding: 87px 0 87px 0;
    margin: 0 auto;
}

#top section .section-image {
    width: 590px;
    height: 445px;
    position: relative;
    margin-right: 60px;
}

#top section .section-image img:first-child {
    position: absolute;
    top: 0;
    right: 0;
}

#top section .section-image img:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
}

#top section .section-text {
    width: 460px;
    background: url(./assets/images/top_strengths_bg.png) no-repeat top left;
    padding-top: 100px;
}

#top section h2.section-title {
    font-size: 3rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 45px;
}

#top section p.section-lead {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

#top .strengths {
    background-image: linear-gradient(135deg, rgb(255, 255, 255), rgb(226, 235, 240));
}

#top .service .section-image {
    margin-right: 0;
}

#top .service .section-text {
    margin-right: 60px;
    background: url(./assets/images/top_service_bg.png) no-repeat top left;
}

#top .works {
    background-image: linear-gradient(135deg, rgb(255, 255, 255), rgb(226, 235, 240));
}

#top .works .section-text {
    background: url(./assets/images/top_works_bg.png) no-repeat top left;
}

#top .information {
    padding: 76px 0 92px 0;
}

#top .information .container {
    display: block;
    border: 1px solid #58A1E0;
    padding: 40px 0 48px 0;
}

#top .information .container .head {
    margin-bottom: 70px;
}

#top .information .container .head .head-title {
    position: relative;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 4.1rem;
    color: #8BBBE5;
    line-height: 1;
}

#top .information .container .head .head-title a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 400;
    color: #393939;
}

#top .information .container .head .head-title a:after {
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon-angle-right-bk.png) center right no-repeat;
    margin-left: 14px;
}

#top .information .container .head p {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
}

#top .information .container .body {
    width: 68%;
    margin: 0 auto;
    text-align: center;
}

#top .information .container .body ul li {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    padding-bottom: 10px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

#top .information .container .body ul li span {
    width: 20%;
    min-width: 100px;
}

#top .information .container .body ul li a {
    width: 80%;
    color: #393939;
    text-align: left;
}

#top .information .container .body ul li::after {
    width: 100%;
    content: "";
    border-bottom: 1px dotted #707070;
    height: 1px;
    display: block;
    padding-bottom: 10px;
}

#top .information .container>a {
    display: none;
}

#strengths .hero-sub {
    position: relative;
    background: url(./assets/images/strengths_hero.jpg) no-repeat top center;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#strengths .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#strengths .container {
    width: 1070px;
    margin: 0 auto;
}

#strengths section {
    width: 100%;
}

#strengths section.copy {
    padding: 50px 0;
    background: #F4F3EC;
}

#strengths section.copy h2 {
    font-size: 3.6rem;
    text-align: center;
}

#strengths section.copy h2>br {
    display: none;
}

#strengths section .container {
    display: flex;
    align-items: top;
    justify-content: space-between;
    padding: 87px 0 87px 0;
    margin: 0 auto;
}

#strengths .hgrade .section-image {
    position: relative;
    width: 526px;
    height: 361px;
}

#strengths .hgrade .section-text {
    width: 460px;
    margin-right: 100px;
}

#strengths .hgrade h2.section-title {
    font-size: 2.8rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 45px;
}

#strengths .hgrade p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
}

#strengths .about-hgrade {
    margin-bottom: 90px;
}

#strengths .about-hgrade .container {
    display: block;
    padding: 57px 64px;
    border: 1px solid #393939;
    border-radius: 30px;
}

#strengths .about-hgrade .container .section-text {
    width: 100%;
    margin-bottom: 22px;
}

#strengths .about-hgrade .container h2.section-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 34px;
    text-align: center;
}

#strengths .about-hgrade .container p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 37px;
}

#strengths .about-hgrade .container table {
    width: 100%;
}

#strengths .about-hgrade .container table td,
#strengths .about-hgrade .container table th {
    font-size: 1.4rem;
    line-height: 1.3;
    height: 64px;
    border: 2px solid #fff;
}

#strengths .about-hgrade .container table th {
    font-weight: 500;
    height: 64px;
    background: #CAE3F8;
}

#strengths .about-hgrade .container table th:first-child {
    width: 100px;
}

#strengths .about-hgrade .container table td {
    width: 167px;
    font-weight: 400;
    background: #F4F3EC;
    text-align: center;
}

#strengths .about-hgrade .container table thead tr th {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    padding: 20px 0;
}

#strengths .two-pillar {
    margin-bottom: 134px;
}

#strengths .two-pillar .container {
    display: block;
    padding-bottom: 0;
}

#strengths .two-pillar .section-text {
    width: 100%;
    margin-bottom: 80px;
}

#strengths .two-pillar h2.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 48px;
}

#strengths .two-pillar h2.section-title>br {
    display: block;
}

#strengths .two-pillar p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

#strengths .two-pillar .section-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#strengths .two-pillar .section-image h3 {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 32px;
}

#strengths .achieve {
    margin-bottom: 134px;
}

#strengths .achieve .container {
    display: block;
    padding-bottom: 0;
}

#strengths .achieve .section-text {
    width: 100%;
    margin-bottom: 48px;
}

#strengths .achieve h2.section-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 48px;
}

#strengths .achieve h2.section-title>br {
    display: block;
}

#strengths .achieve p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

#strengths .achieve .section-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#strengths .achieve .section-image img {
    width: 48%;
    margin-bottom: 58px;
}

#strengths .achieve .section-image img:nth-child(5) {
    margin-bottom: 0;
}

#strengths .achieve .section-image img:last-child {
    margin-bottom: 0;
}

#service .hero-sub {
    position: relative;
    background: url(./assets/images/service_hero.jpg) no-repeat top center;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#service .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#service .container {
    width: 1070px;
    margin: 0 auto;
}

#service section {
    width: 100%;
}

#service section.copy {
    padding: 41px 0;
    background: #F4F3EC;
}

#service section.copy h2 {
    font-size: 3.2rem;
    text-align: center;
    line-height: 1.2;
}

#service section.copy p {
    font-size: 1.2rem;
    font-weight: 300;
    text-align: center;
}

#service section .container {
    padding: 87px 0 0 0;
    margin: 0 auto;
}

#service .steel-business {
    margin-bottom: 58px;
}

#service .steel-business .container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 140px;
}

#service .steel-business .section-left {
    position: relative;
    width: 40%;
    margin-right: 2%;
}

#service .steel-business .section-right {
    width: 58%;
}

#service .steel-business .section-right img {
    width: 50%;
}

#service .steel-business .section-right img:first-child {
    width: 100%;
    margin-bottom: 30px;
}

#service .steel-business h2.section-title {
    width: 100%;
    font-size: 2.8rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 60px;
}

#service .steel-business p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
}

#service .public-business-flow,
#service .steel-business-flow {
    background: url(./assets/images/steel-business-flow-bg.jpg) no-repeat top left #3F82C0;
    padding: 51px 0;
    text-align: center;
    margin-bottom: 58px;
}

#service .public-business-flow h2,
#service .steel-business-flow h2 {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 500;
    padding: 0 56px;
    border: 1px solid #fff;
    color: #fff;
    margin-bottom: 52px;
}

#service .public-business-flow .swiper-button-prev,
#service .public-business-flow .swiper-button-next,
#service .steel-business-flow .swiper-button-prev,
#service .steel-business-flow .swiper-button-next {
    width: 96px;
    height: 96px;
    transform: translateY(-40%);
}

#service .public-business-flow .swiper-button-prev:after,
#service .public-business-flow .swiper-button-next:after,
#service .steel-business-flow .swiper-button-prev:after,
#service .steel-business-flow .swiper-button-next:after {
    width: 96px;
    height: 96px;
    content: "";
    display: inline-block;
    background: url(./assets/images/steel-business-flow-arrow.png) no-repeat center;
    background-size: contain;
}

#service .public-business-flow .swiper-button-prev,
#service .steel-business-flow .swiper-button-prev {
    transform: rotate(180deg) translateY(40%);
}

#service .public-business-flow .swiper-button-disabled,
#service .steel-business-flow .swiper-button-disabled {
    display: none;
}

#service .public-business-flow .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child,
#service .steel-business-flow .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: 26vw;
}

#service .public-business-flow .img-cover figure,
#service .steel-business-flow .img-cover figure {
    display: flex;
    align-items: start;
}

#service .public-business-flow .img-cover figure img,
#service .steel-business-flow .img-cover figure img {
    width: 435px;
    margin-right: 30px;
}

#service .public-business-flow .img-cover figure figcaption,
#service .steel-business-flow .img-cover figure figcaption {
    width: 295px;
}

#service .public-business-flow .img-cover figure figcaption h3,
#service .steel-business-flow .img-cover figure figcaption h3 {
    color: #fff;
    font-weight: 500;
    text-align: left;
    line-height: 1;
}

#service .public-business-flow .img-cover figure figcaption h3 span,
#service .steel-business-flow .img-cover figure figcaption h3 span {
    display: block;
    font-size: 5.2rem;
    margin-bottom: 15px;
}

#service .public-business-flow .img-cover figure figcaption h3 p,
#service .steel-business-flow .img-cover figure figcaption h3 p {
    display: block;
    font-size: 3.6rem;
    margin-bottom: 36px;
}

#service .public-business-flow .img-cover figure figcaption>p,
#service .steel-business-flow .img-cover figure figcaption>p {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: left;
}

#service .public-business-flow .swiper-slide:last-child,
#service .steel-business-flow .swiper-slide:last-child {
    margin-right: 26vw;
}

#service .public-business-flow {
    background: url(./assets/images/public-business-flow-bg.jpg) no-repeat top left #5AB9B7;
}

#service .btn-wrap {
    text-align: center;
    margin-bottom: 112px;
}

#service .btn-wrap a {
    display: inline-block;
    color: #393939;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    padding: 20px 69px;
    margin: 0 auto;
    border: 1px solid #393939;
    transition: 0.5s;
}

#service .btn-wrap a:hover {
    opacity: 0.8;
}

#service .public-business {
    margin-bottom: 58px;
}

#service .public-business .container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 140px;
}

#service .public-business .section-left {
    position: relative;
    width: 40%;
    margin-right: 2%;
}

#service .public-business .section-right {
    width: 58%;
}

#service .public-business .section-right img {
    width: 50%;
}

#service .public-business .section-right img:first-child {
    width: 100%;
    margin-bottom: 30px;
}

#service .public-business h2.section-title {
    width: 100%;
    font-size: 2.8rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 60px;
}

#service .public-business p.section-lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
}

#service .main-facility h2,
#service .management-engineer h2 {
    font-size: 4.5rem;
    font-weight: 500;
    margin-bottom: 43px;
}

#service .main-facility h2:after,
#service .management-engineer h2:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 43px;
}

#service .main-facility table,
#service .management-engineer table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

#service .main-facility table th,
#service .management-engineer table th {
    background: #eee;
}

#service .main-facility table th,
#service .main-facility table td,
#service .management-engineer table th,
#service .management-engineer table td {
    width: 50%;
    border-spacing: 0;
    border: 1px solid #ddd;
    padding: 12px 0 12px 27px;
    font-size: 1.5rem;
    text-align: left;
}

#service .main-facility {
    margin-bottom: 130px;
}

#service .main-facility table th,
#service .main-facility table td {
    width: 33%;
}

#service .main-facility table th {
    vertical-align: top;
}

#archive-detail .hero-sub,
#archive .hero-sub {
    position: relative;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#archive-detail .hero-sub h1,
#archive .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#archive-detail.public-archive .hero-sub,
#archive.public-archive .hero-sub {
    background: url(./assets/images/archive_public_hero.jpg) no-repeat top center;
}

#archive-detail.steel-archive .hero-sub,
#archive.steel-archive .hero-sub {
    background: url(./assets/images/archive_steel_hero.jpg) no-repeat top center;
}

#archive-detail .container,
#archive .container {
    width: 1070px;
    margin: 0 auto;
}

#archive-detail section,
#archive section {
    width: 100%;
}

#archive-detail section.archive-list-nav,
#archive section.archive-list-nav {
    margin-top: 120px;
}

#archive-detail section.archive-list-nav .archive-menu-tab,
#archive section.archive-list-nav .archive-menu-tab {
    margin-bottom: 50px;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul,
#archive section.archive-list-nav .archive-menu-tab ul {
    width: 100%;
    display: flex;
    align-items: center;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul li,
#archive section.archive-list-nav .archive-menu-tab ul li {
    width: 50%;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul li a,
#archive section.archive-list-nav .archive-menu-tab ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    padding: 14px 0;
    background: #D8D8D8;
    transition: 0.5s;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul li a:hover,
#archive section.archive-list-nav .archive-menu-tab ul li a:hover {
    background: #c7c7c7;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul li:first-child a.active,
#archive section.archive-list-nav .archive-menu-tab ul li:first-child a.active {
    background: #488EC9;
}

#archive-detail section.archive-list-nav .archive-menu-tab ul li:last-child a.active,
#archive section.archive-list-nav .archive-menu-tab ul li:last-child a.active {
    background: #36B7A8;
}

#archive-detail section.archive-list,
#archive section.archive-list {
    margin-bottom: 130px;
}

#archive-detail section.archive-list .archive-list-items,
#archive section.archive-list .archive-list-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px 2%;
}

#archive-detail section.archive-list .archive-list-items li,
#archive section.archive-list .archive-list-items li {
    width: 32%;
}

#archive-detail section.archive-list .archive-list-items .archive-list-item-media,
#archive section.archive-list .archive-list-items .archive-list-item-media {
    min-height: 230px;
}

#archive-detail section.archive-list .archive-list-items::after,
#archive section.archive-list .archive-list-items::after {
    content: "";
    display: block;
    width: 30%;
}

#archive-detail section.archive-list .archive-list-items li a,
#archive section.archive-list .archive-list-items li a {
    transition: 0.5s;
}

#archive-detail section.archive-list .archive-list-items li a:hover,
#archive section.archive-list .archive-list-items li a:hover {
    opacity: 0.8;
}

#archive-detail section.archive-list .archive-list-items li .archive-list-item-text span,
#archive-detail section.archive-list .archive-list-items li .archive-list-item-text p,
#archive section.archive-list .archive-list-items li .archive-list-item-text span,
#archive section.archive-list .archive-list-items li .archive-list-item-text p {
    color: #393939;
}

#archive-detail section.archive-list .archive-list-items li .archive-list-item-text span,
#archive section.archive-list .archive-list-items li .archive-list-item-text span {
    font-size: 1.6rem;
}

#archive-detail section.archive-list .archive-list-items li .archive-list-item-text p,
#archive section.archive-list .archive-list-items li .archive-list-item-text p {
    font-size: 1.8rem;
}

#archive-detail section.archive-list .archive-list-items .archive-list-item img,
#archive section.archive-list .archive-list-items .archive-list-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

#archive-detail section.archive-detail,
#archive section.archive-detail {
    margin-top: 54px;
    margin-bottom: 120px;
}

#archive-detail section.archive-detail .container,
#archive section.archive-detail .container {
    width: 900px;
    margin: 0 auto;
}

#archive-detail section.archive-detail .container .header span,
#archive section.archive-detail .container .header span {
    font-size: 1.4rem;
    font-weight: 300;
}

#archive-detail section.archive-detail .container .header h2,
#archive section.archive-detail .container .header h2 {
    font-size: 3.2rem;
    font-weight: 400;
    margin-bottom: 40px;
}

#archive-detail section.archive-detail .container .header h2:after,
#archive section.archive-detail .container .header h2:after {
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    border-bottom: 1px solid #58A1E0;
    padding-bottom: 20px;
}

#archive-detail section.archive-detail .container .body .image-main,
#archive section.archive-detail .container .body .image-main {
    width: 100%;
    margin-bottom: 72px;
}

#archive-detail section.archive-detail .container .body .image-main ul,
#archive section.archive-detail .container .body .image-main ul {
    /* display: flex;
    align-items: top;
    justify-content: space-between;
    flex-wrap: wrap; */
}

#archive-detail section.archive-detail .container .body .image-main ul li,
#archive section.archive-detail .container .body .image-main ul li {
    width: 19%;
}

#archive-detail section.archive-detail .container .body .image-main ul li:first-child,
#archive section.archive-detail .container .body .image-main ul li:first-child {
    width: 100%;
    margin-bottom: 40px;
}

#archive-detail section.archive-detail .container .body .swiper,
#archive section.archive-detail .container .body .swiper {
    margin-bottom: 40px;
}

#archive-detail section.archive-detail .container .body .swiper img,
#archive section.archive-detail .container .body .swiper img {
    width: 100%;
}

#archive section.archive-detail .container .body .swiper.image-main img {
    width: 100%;
    height: 625px;
    object-fit: cover;
}

#archive section.archive-detail .container .body .swiper.image-main li {
    margin-bottom: 0!important;
}

#archive section.archive-detail .container .body .swiper.image-thumbnail img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

#archive section.archive-detail .container .body .swiper.image-thumbnail .swiper-slide-thumb-active img {
    opacity: 0.3;
}

#archive section.archive-detail .container .body .swiper .swiper-button-prev,
#archive section.archive-detail .container .body .swiper .swiper-button-next,
#archive section.archive-detail .container .body .swiper .swiper-notification {
    display: none;
}

#archive-detail section.archive-detail .container .body .swiper .swiper-button-prev,
#archive-detail section.archive-detail .container .body .swiper .swiper-button-next,
#archive section.archive-detail .container .body .swiper .swiper-button-prev,
#archive section.archive-detail .container .body .swiper .swiper-button-next {
    color: #fff;
}

#archive-detail section.archive-detail .container .body .swiper .swiper-pagination-bullet-active,
#archive section.archive-detail .container .body .swiper .swiper-pagination-bullet-active {
    background-color: #fff;
}

#archive-detail section.archive-detail .container .body table,
#archive section.archive-detail .container .body table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

#archive-detail section.archive-detail .container .body table tr th,
#archive section.archive-detail .container .body table tr th {
    width: 160px;
    border-top: 1px solid #4C95D3;
}

#archive-detail section.archive-detail .container .body table tr td,
#archive section.archive-detail .container .body table tr td {
    border-top: 1px solid #E0E0E0;
}

#archive-detail section.archive-detail .container .body table tr th,
#archive-detail section.archive-detail .container .body table tr td,
#archive section.archive-detail .container .body table tr th,
#archive section.archive-detail .container .body table tr td {
    font-size: 1.6rem;
    font-weight: 400;
    padding: 12px 0 12px 20px;
    vertical-align: middle;
    text-align: left;
}

#archive-detail section.archive-detail .container .body table tr:last-child th,
#archive section.archive-detail .container .body table tr:last-child th {
    border-bottom: 1px solid #4C95D3;
}

#archive-detail section.archive-detail .container .body table tr:last-child td,
#archive section.archive-detail .container .body table tr:last-child td {
    border-bottom: 1px solid #E0E0E0;
}

#archive-detail .link-btn,
#archive .link-btn {
    margin-bottom: 132px;
}

#archive-detail .link-btn .container,
#archive .link-btn .container {
    width: 900px;
    margin: 0 auto;
}

#archive-detail .link-btn .container ul,
#archive .link-btn .container ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#archive-detail .link-btn .container ul li a,
#archive .link-btn .container ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    font-size: 16px;
    font-weight: 500;
    color: #488EC9;
    background: #E6F1FB;
    text-align: center;
    line-height: 3.5;
}

#archive-detail .link-btn .container ul li a.back,
#archive .link-btn .container ul li a.back {
    color: #fff;
    background: #488EC9;
}

#archive-detail .link-btn .container ul li a.next,
#archive .link-btn .container ul li a.next {
    position: relative;
}

#archive-detail .link-btn .container ul li a.next:after,
#archive .link-btn .container ul li a.next:after {
    position: absolute;
    right: 14px;
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
}

#archive-detail .link-btn .container ul li a.prev,
#archive .link-btn .container ul li a.prev {
    position: relative;
}

#archive-detail .link-btn .container ul li a.prev:before,
#archive .link-btn .container ul li a.prev:before {
    position: absolute;
    left: 14px;
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
    transform: rotate(180deg);
}

#archive-detail.public-archive .archive-detail .container .header h2:after,
#archive.public-archive .archive-detail .container .header h2:after {
    border-bottom: 1px solid #009A8D;
}

#archive-detail.public-archive .archive-detail .container .body table tr th,
#archive.public-archive .archive-detail .container .body table tr th {
    border-top: 1px solid #009A8D;
}

#archive-detail.public-archive .archive-detail .container .body table tr:last-child th,
#archive.public-archive .archive-detail .container .body table tr:last-child th {
    border-bottom: 1px solid #009A8D;
}

#archive-detail.public-archive .link-btn .container ul li a,
#archive.public-archive .link-btn .container ul li a {
    color: #009A8D;
    background: #EAF8F6;
}

#archive-detail.public-archive .link-btn .container ul li a.back,
#archive.public-archive .link-btn .container ul li a.back {
    color: #fff;
    background: #009A8D;
}

#archive-detail.public-archive .link-btn .container ul li a.next:after,
#archive.public-archive .link-btn .container ul li a.next:after {
    background: url(./assets/images/icon_angle_right_green.png) center right no-repeat;
}

#archive-detail.public-archive .link-btn .container ul li a.prev:before,
#archive.public-archive .link-btn .container ul li a.prev:before {
    background: url(./assets/images/icon_angle_right_green.png) center right no-repeat;
}

#company .hero-sub {
    position: relative;
    background: url(./assets/images/company_hero_bg.png) no-repeat top center;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#company .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#company .container {
    width: 1070px;
    margin: 0 auto;
}

#company section {
    width: 100%;
}

#company section.copy {
    padding: 41px 0;
    background: #F4F3EC;
}

#company section.copy h2 {
    font-size: 3.2rem;
    text-align: center;
    line-height: 1.2;
}

#company section.copy p {
    font-size: 1.2rem;
    font-weight: 300;
    text-align: center;
}

#company section .container {
    padding: 87px 0 0 0;
    margin: 0 auto;
}

#company .top-message .container {
    width: 900px;
}

#company .top-message .section-image {
    position: relative;
    margin: 0 auto 120px auto;
}

#company .top-message .section-image img:last-child {
    position: absolute;
    top: 0;
    right: -93px;
}

#company .top-message h2.section-title {
    color: #393939;
    font-size: 2.8rem;
    margin-bottom: 66px;
}

#company .top-message h2.section-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 38px;
}

#company .top-message .section-text {
    margin-bottom: 130px;
}

#company .top-message .section-text .section-lead {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.1;
    margin-bottom: 70px;
}

#company .top-message .section-text .section-signature p {
    font-size: 1.8rem;
    font-weight: 300;
    text-align: right;
}

#company .top-message .section-text .section-signature p.name {
    font-size: 4rem;
    font-weight: 400;
    margin-top: 34px;
}

#company .philosophy {
    margin-bottom: 188px;
}

#company .philosophy .container {
    width: 900px;
    border: 1px solid #8BBBE5;
    border-radius: 30px;
    padding: 73px 0;
}

#company .philosophy .container h2.section-title {
    font-size: 2.1rem;
    font-weight: 500;
    margin-bottom: 54px;
    text-align: center;
}

#company .philosophy .container .section-lead {
    font-size: 3.8rem;
    font-weight: 300;
    text-align: center;
}

#company .philosophy .container .section-lead br {
    display: none;
}

#company .sdgs {
    margin-bottom: 164px;
}

#company .sdgs .container {
    width: 900px;
}

#company .sdgs .section-image {
    position: relative;
    margin: 0 auto 120px auto;
}

#company .sdgs .section-image img:last-child {
    position: absolute;
    top: 0;
    right: -93px;
}

#company .sdgs h2.section-title {
    color: #393939;
    font-size: 2.8rem;
    margin-bottom: 66px;
}

#company .sdgs h2.section-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 38px;
}

#company .sdgs .section-text {
    margin-bottom: 122px;
}

#company .sdgs .section-text p {
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 300;
}

#company .sdgs .section-list ul li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}

#company .sdgs .section-list ul li .image-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

#company .sdgs .section-list ul li .image-box img {
    margin-right: 20px;
}

#company .sdgs .section-list ul li h3 {
    width: 215px;
    font-size: 2.5rem;
    font-weight: 500;
}

#company .sdgs .section-list ul li p {
    width: 450px;
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 300;
}

#company .company-overview {
    margin-top: 110px;
    margin-bottom: 170px;
}

#company .company-overview .container {
    width: 900px;
}

#company .company-overview table {
    width: 100%;
    border-collapse: collapse;
}

#company .company-overview table tr {
    border-bottom: 1px solid #DDDDDD;
}

#company .company-overview table tr:first-child {
    border-top: 1px solid #DDDDDD;
}

#company .company-overview table tr th {
    width: 220px;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 10px 30px;
    text-align: left;
    background: #eee;
}

#company .company-overview table tr td {
    font-size: 1.6rem;
    font-weight: 300;
    padding: 10px 30px;
    text-align: left;
}

#company .company-map {
    line-height: 0;
}

#company .company-map iframe {
    width: 100%;
    height: 560px;
}

#recruit .hero-sub {
    position: relative;
    background: url(./assets/images/recruit_hero_bg.jpg) no-repeat center 30%;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#recruit .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#recruit .container {
    width: 1070px;
    margin: 0 auto;
}

#recruit section {
    width: 100%;
}

#recruit .overview {
    margin-top: 54px;
    margin-bottom: 130px;
}

#recruit .overview .container {
    width: 900px;
}

#recruit .overview h2.section-title {
    color: #393939;
    font-size: 2.8rem;
    margin-bottom: 66px;
}

#recruit .overview h2.section-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 38px;
}

#recruit .overview .section-text {
    margin-bottom: 130px;
}

#recruit .overview .section-text .section-lead {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.1;
    margin-bottom: 70px;
}

#recruit .slider {
    margin-bottom: 150px;
}

#recruit .slider .swiper-wrapper {
    transition-timing-function: linear;
}

#recruit .welfare {
    margin-bottom: 130px;
}

#recruit .welfare .container {
    width: 900px;
}

#recruit .welfare .container ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#recruit .welfare .container ul li {
    width: 435px;
    margin-bottom: 50px;
}

#recruit .welfare .container ul li h3 {
    font-size: 2.3rem;
    color: #4C95D3;
    margin-bottom: 24px;
}

#recruit .welfare .container ul li img {
    margin-bottom: 28px;
}

#recruit .welfare .container ul li p {
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 300;
}

#recruit .job-description {
    margin-bottom: 124px;
}

#recruit .job-description table {
    margin-bottom: 80px;
}

#recruit .job-description table th,
#recruit .job-description table td {
    padding: 30px 35px;
    font-size: 2rem;
}

#recruit .job-description table th {
    width: 200px;
    background: #EBF3FB;
}

#recruit .job-description table td {
    background: #F7F7F7;
    font-weight: 400;
    line-height: 1.8;
}

#recruit .job-description .btn-wrap {
    text-align: center;
}

#complete .hero-sub,
#confirm .hero-sub,
#contact .hero-sub {
    position: relative;
    background: url(./assets/images/contact_hero_bg.jpg) no-repeat top center;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#complete .hero-sub h1,
#confirm .hero-sub h1,
#contact .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#complete .container,
#confirm .container,
#contact .container {
    width: 1070px;
    margin: 0 auto;
}

#complete section,
#confirm section,
#contact section {
    width: 100%;
}

#complete section.tel,
#complete section.overview,
#confirm section.tel,
#confirm section.overview,
#contact section.tel,
#contact section.overview {
    margin-top: 60px;
    margin-bottom: 50px;
}

#complete section.tel h2.section-title,
#complete section.overview h2.section-title,
#confirm section.tel h2.section-title,
#confirm section.overview h2.section-title,
#contact section.tel h2.section-title,
#contact section.overview h2.section-title {
    color: #393939;
    font-size: 2.4rem;
    margin-bottom: 47px;
    text-align: center;
}

#complete section.tel .section-list,
#complete section.overview .section-list,
#confirm section.tel .section-list,
#confirm section.overview .section-list,
#contact section.tel .section-list,
#contact section.overview .section-list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#complete section.tel .section-list ul,
#complete section.overview .section-list ul,
#confirm section.tel .section-list ul,
#confirm section.overview .section-list ul,
#contact section.tel .section-list ul,
#contact section.overview .section-list ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#complete section.tel .section-list ul li,
#complete section.overview .section-list ul li,
#confirm section.tel .section-list ul li,
#confirm section.overview .section-list ul li,
#contact section.tel .section-list ul li,
#contact section.overview .section-list ul li {
    display: block;
    position: relative;
    width: 156px;
    padding: 20px 0;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: #8BBBE5;
    border: 1px solid #8BBBE5;
    text-align: center;
    margin-right: 42px;
}

#complete section.tel .section-list ul li.active,
#complete section.overview .section-list ul li.active,
#confirm section.tel .section-list ul li.active,
#confirm section.overview .section-list ul li.active,
#contact section.tel .section-list ul li.active,
#contact section.overview .section-list ul li.active {
    color: #fff;
    background: #8BBBE5;
}

#complete section.tel .section-list ul li:after,
#complete section.overview .section-list ul li:after,
#confirm section.tel .section-list ul li:after,
#confirm section.overview .section-list ul li:after,
#contact section.tel .section-list ul li:after,
#contact section.overview .section-list ul li:after {
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
    position: absolute;
    right: -30px;
    margin-top: 3px;
}

#complete section.tel .section-list ul li:last-child,
#complete section.overview .section-list ul li:last-child,
#confirm section.tel .section-list ul li:last-child,
#confirm section.overview .section-list ul li:last-child,
#contact section.tel .section-list ul li:last-child,
#contact section.overview .section-list ul li:last-child {
    margin-right: 0;
}

#complete section.tel .section-list ul li:last-child:after,
#complete section.overview .section-list ul li:last-child:after,
#confirm section.tel .section-list ul li:last-child:after,
#confirm section.overview .section-list ul li:last-child:after,
#contact section.tel .section-list ul li:last-child:after,
#contact section.overview .section-list ul li:last-child:after {
    background: none;
}

#complete section.form table,
#confirm section.form table,
#contact section.form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 100px;
}

#complete section.form table tr,
#confirm section.form table tr,
#contact section.form table tr {
    border-bottom: 1px solid #D8D8D8;
}

#complete section.form table tr:first-child,
#confirm section.form table tr:first-child,
#contact section.form table tr:first-child {
    border-top: 1px solid #D8D8D8;
}

#complete section.form table th,
#complete section.form table td,
#confirm section.form table th,
#confirm section.form table td,
#contact section.form table th,
#contact section.form table td {
    font-size: 1.8rem;
    padding: 32px 0;
    vertical-align: middle;
    text-align: left;
}

#complete section.form table th .row,
#complete section.form table td .row,
#confirm section.form table th .row,
#confirm section.form table td .row,
#contact section.form table th .row,
#contact section.form table td .row {
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: center;
}

#complete section.form table th .row label,
#complete section.form table td .row label,
#confirm section.form table th .row label,
#confirm section.form table td .row label,
#contact section.form table th .row label,
#contact section.form table td .row label {
    margin-bottom: 22px;
}

#complete section.form table th .row label:last-child,
#complete section.form table td .row label:last-child,
#confirm section.form table th .row label:last-child,
#confirm section.form table td .row label:last-child,
#contact section.form table th .row label:last-child,
#contact section.form table td .row label:last-child {
    margin-bottom: 0;
}

#complete section.form table th .row label input,
#complete section.form table td .row label input,
#confirm section.form table th .row label input,
#confirm section.form table td .row label input,
#contact section.form table th .row label input,
#contact section.form table td .row label input {
    margin-right: 17px;
}

#complete section.form table th p,
#complete section.form table td p,
#confirm section.form table th p,
#confirm section.form table td p,
#contact section.form table th p,
#contact section.form table td p {
    font-size: 1.4rem;
}

#complete section.form table th input[type=text],
#complete section.form table th textarea,
#complete section.form table td input[type=text],
#complete section.form table td textarea,
#confirm section.form table th input[type=text],
#confirm section.form table th textarea,
#confirm section.form table td input[type=text],
#confirm section.form table td textarea,
#contact section.form table th input[type=text],
#contact section.form table th textarea,
#contact section.form table td input[type=text],
#contact section.form table td textarea {
    width: 620px;
    padding: 20px;
    font-size: 1.8rem;
    background-color: #F0F0F0;
    border: none;
}

#complete section.form table th input[type=text]:focus,
#complete section.form table th textarea:focus,
#complete section.form table td input[type=text]:focus,
#complete section.form table td textarea:focus,
#confirm section.form table th input[type=text]:focus,
#confirm section.form table th textarea:focus,
#confirm section.form table td input[type=text]:focus,
#confirm section.form table td textarea:focus,
#contact section.form table th input[type=text]:focus,
#contact section.form table th textarea:focus,
#contact section.form table td input[type=text]:focus,
#contact section.form table td textarea:focus {
    outline: 1px solid #58A1E0;
}

#complete section.form table th .form-sm,
#complete section.form table th select,
#complete section.form table td .form-sm,
#complete section.form table td select,
#confirm section.form table th .form-sm,
#confirm section.form table th select,
#confirm section.form table td .form-sm,
#confirm section.form table td select,
#contact section.form table th .form-sm,
#contact section.form table th select,
#contact section.form table td .form-sm,
#contact section.form table td select {
    width: 143px !important;
    padding: 20px;
    font-size: 1.8rem;
    background-color: #F0F0F0;
    border: none;
}

#complete section.form table th .form-sm:focus,
#complete section.form table th select:focus,
#complete section.form table td .form-sm:focus,
#complete section.form table td select:focus,
#confirm section.form table th .form-sm:focus,
#confirm section.form table th select:focus,
#confirm section.form table td .form-sm:focus,
#confirm section.form table td select:focus,
#contact section.form table th .form-sm:focus,
#contact section.form table th select:focus,
#contact section.form table td .form-sm:focus,
#contact section.form table td select:focus {
    outline: 1px solid #58A1E0;
}

#complete section.form table th,
#confirm section.form table th,
#contact section.form table th {
    width: 280px;
    font-weight: 500;
}

#complete section.form table th label,
#confirm section.form table th label,
#contact section.form table th label {
    display: inline-block;
    margin-left: 36px;
    background: #F05050;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    padding: 0 9px 2px 9px;
    border-radius: 3px;
}

#complete section.form table td,
#confirm section.form table td,
#contact section.form table td {
    font-weight: 300;
    padding-left: 20px;
}

#complete section.form table td.zip,
#confirm section.form table td.zip,
#contact section.form table td.zip {
    padding-left: 0;
}

#complete section.form .policy,
#confirm section.form .policy,
#contact section.form .policy {
    width: 900px;
    padding: 40px 94px;
    margin: 0 auto 50px auto;
    background: #EDF6FD;
}

#complete section.form .policy h3,
#confirm section.form .policy h3,
#contact section.form .policy h3 {
    font-size: 2.1rem;
    margin-bottom: 32px;
    text-align: center;
}

#complete section.form .policy p,
#confirm section.form .policy p,
#contact section.form .policy p {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 30px;
}

#complete section.form .policy p a,
#confirm section.form .policy p a,
#contact section.form .policy p a {
    color: #393939;
    text-decoration: underline;
}

#complete section.form .policy .checkbox,
#confirm section.form .policy .checkbox,
#contact section.form .policy .checkbox {
    width: 165px;
    margin: 0 auto;
    padding: 17px 0;
    background: #fff;
    font-size: 1.8rem;
    font-weight: 300;
    text-align: center;
}

#complete section.form .policy .checkbox input,
#confirm section.form .policy .checkbox input,
#contact section.form .policy .checkbox input {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    vertical-align: -8px;
    margin-right: 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#complete section.form .policy .checkbox input:focus,
#confirm section.form .policy .checkbox input:focus,
#contact section.form .policy .checkbox input:focus {
    outline: none;
}

#complete section.form .policy .checkbox input:checked:before,
#confirm section.form .policy .checkbox input:checked:before,
#contact section.form .policy .checkbox input:checked:before {
    position: absolute;
    top: 1px;
    left: 7px;
    transform: rotate(50deg);
    width: 8px;
    height: 18px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    content: "";
}

#complete section.form .btn-wrap,
#confirm section.form .btn-wrap,
#contact section.form .btn-wrap {
    margin-bottom: 180px;
    text-align: center;
}

#complete section.form .btn-wrap button,
#confirm section.form .btn-wrap button,
#contact section.form .btn-wrap button {
    border: none;
    color: #fff;
}

#complete section.tel .section-text,
#confirm section.tel .section-text,
#contact section.tel .section-text {
    margin-bottom: 140px;
}

#complete section.tel .section-text p,
#confirm section.tel .section-text p,
#contact section.tel .section-text p {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.1;
    margin-bottom: 30px;
    text-align: center;
}

#complete section.tel .section-text a,
#confirm section.tel .section-text a,
#contact section.tel .section-text a {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#confirm .section-list {
    margin-bottom: 88px !important;
}

#confirm .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

#confirm .btn-wrap button {
    width: 220px;
}

#confirm .btn-wrap button:first-child {
    margin-right: 43px;
}

#complete .overview {
    margin-bottom: 140px !important;
}

#complete .overview .section-list {
    margin-bottom: 88px !important;
}

#complete .overview .section-title {
    margin-bottom: 80px;
}

#complete .overview p {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.1;
    text-align: center;
    margin-bottom: 100px;
}

#complete .overview a {
    display: block;
    margin: 0 auto;
    width: 220px;
    text-align: center;
}

#info .hero-sub {
    position: relative;
    background: url(./assets/images/info_hero_bg.jpg) no-repeat top center;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#info .container {
    width: 1070px;
    margin: 0 auto;
}

#info section {
    width: 100%;
}

#info .info-list .container {
    width: 800px;
}

#info .info-list h2.section-title {
    color: #393939;
    font-size: 2.8rem;
    margin-bottom: 66px;
}

#info .info-list h2.section-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 38px;
}

#info .info-list ul {
    margin-top: 100px;
    margin-bottom: 100px;
}

#info .info-list ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1.8rem;
    font-weight: 300;
    color: #393939;
    border-bottom: 1px dotted #707070;
    padding-bottom: 10px;
    margin-top: 10px;
}

#info .info-list ul li a time {
    width: 110px;
    margin-right: 50px;
    white-space: nowrap;
}

#info .pagination {
    margin-bottom: 160px;
}

#info-detail .hero-sub {
    position: relative;
    background: url(./assets/images/info_hero_bg.jpg) no-repeat top center;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info-detail .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#info-detail .container {
    width: 1070px;
    margin: 0 auto;
}

#info-detail .info-detail-content {
    margin-top: 90px;
    margin-bottom: 150px;
}

#info-detail .info-detail-content .container {
    width: 720px;
    text-align: left;
}

#info-detail .info-detail-content .container h2.section-title {
    color: #393939;
    font-size: 2.8rem;
    margin-bottom: 66px;
}

#info-detail .info-detail-content .container h2.section-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #58a1e0;
    padding-bottom: 38px;
}

#info-detail .info-detail-content .container .content-wrap {
    margin-bottom: 120px;
    font-weight: 300;
}

#info-detail .info-detail-content .container .content-wrap p {
    margin-bottom: 20px;
}

#info-detail .info-detail-content .container .content-wrap img {
    margin-bottom: 20px;
}

#info-detail .info-detail-content .container .link-btn {
    margin-bottom: 132px;
    width: 720px;
    margin: 0 auto;
}

#info-detail .info-detail-content .container .link-btn ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#info-detail .info-detail-content .container .link-btn ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    font-size: 16px;
    font-weight: 500;
    color: #488EC9;
    background: #E6F1FB;
    text-align: center;
    line-height: 3.5;
}

#info-detail .info-detail-content .container .link-btn ul li a.back {
    color: #fff;
    background: #488EC9;
}

#info-detail .info-detail-content .container .link-btn ul li a.next {
    position: relative;
}

#info-detail .info-detail-content .container .link-btn ul li a.next:after {
    position: absolute;
    right: 14px;
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
}

#info-detail .info-detail-content .container .link-btn ul li a.prev {
    position: relative;
}

#info-detail .info-detail-content .container .link-btn ul li a.prev:before {
    position: absolute;
    left: 14px;
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
    transform: rotate(180deg);
}

#policy {
    margin-bottom: 180px;
}

#policy .hero-sub {
    position: relative;
    background: url(./assets/images/policy_hero_bg.jpg) no-repeat top center;
    background-size: cover;
    padding-top: 70px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#policy .hero-sub h1 {
    color: #fff;
    font-weight: 500;
}

#policy .container {
    width: 900px;
    margin: 0 auto;
}

#policy section {
    width: 100%;
}

#policy section.policy {
    margin-top: 60px;
    margin-bottom: 50px;
}

#policy section.policy h2.section-title {
    color: #393939;
    font-size: 2.4rem;
    margin-bottom: 47px;
    text-align: center;
}

#policy section.policy p,
#policy section.policy dt,
#policy section.policy li {
    font-size: 1.8rem;
    line-height: 1.8;
}

#policy section.policy p {
    font-weight: 300;
    margin-bottom: 20px;
}

#policy section.policy li {
    font-weight: 300;
}

#policy section.policy dd {
    margin-bottom: 30px;
}

html {
    height: -webkit-fill-available;
    font-size: 62.5%;
}

body {
    color: #1E322F;
    font-size: 1.4rem;
    font-family: "Noto Sans JP", -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    padding: 0;
    position: relative;
}

body>.btn {
    display: inline-block;
    position: fixed;
    margin: auto;
    right: 0;
    bottom: 20px;
    left: 0;
    z-index: 3;
}

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

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.underline:hover,
.underline:focus,
.link-color:hover,
.link-color:focus {
    opacity: 0.6;
}

h1,
h2,
h3,
h4,
h5,
p,
ol,
ul,
li,
dl,
dt,
dd,
figure,
table,
th,
td {
    margin: 0;
    padding: 0;
    word-break: break-all;
}

ul,
ol {
    list-style: none;
}

.ul-list {
    list-style: disc;
    padding-left: 20px;
}

.ol-list {
    list-style: decimal;
    padding-left: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

a[href^="tel:"],
a {
    color: #fff;
    text-decoration: none;
}

.border-bottom {
    border-bottom: 1px solid #E0E0E0;
}

.disabled,
.btn:disabled {
    pointer-events: none;
    text-decoration: none !important;
}

.btn-main {
    display: inline-block;
    background-image: linear-gradient(90deg, rgb(123, 190, 206), rgb(88, 161, 224));
    padding: 16px 30px;
    font-size: 16px;
    transition: 0.5s;
}

.btn-main:hover {
    opacity: 0.8;
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-arrow:after {
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    background: url(./assets/images/icon_angle_right.png) center right no-repeat;
    margin-left: 43px;
}

.btn-blue {
    display: inline-block;
    background: #E6F1FB;
    color: #488EC9 !important;
    padding: 16px 40px 16px 20px;
    font-size: 16px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: start;
}

.btn-back:before {
    display: inline-block;
    width: 12px;
    height: 20px;
    content: "";
    transform: rotate(180deg);
    background: url(./assets/images/icon_angle_right_blue.png) center right no-repeat;
    margin-right: 65px;
}

@media screen and (min-width: 769px) {
    #archive-detail section.archive-detail .container .body .swiper,
    #archive section.archive-detail .container .body .swiper {
        /* display: none; */
    }
}

@media screen and (min-width: 876px),
print {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

@media screen and (min-width: 1160px) {
    .headernav .navmenu .btn-menu {
        display: none;
    }
    .headernav .navmenu .menu>ul {
        display: flex;
        gap: 30px;
    }
    .headernav .navmenu .menu>ul a {
        color: #393939;
    }
    .headernav .navmenu .submenu,
    .headernav .navmenu .btn-menuclose,
    .headernav .navmenu .menu-logo {
        display: none;
    }
    body>.btn {
        display: none !important;
    }
}

@media screen and (max-width: 1550px) {
    #top .hero .slide-media {
        height: 84vh;
    }
}

@media screen and (max-width: 1350px) {
    #top .hero .slide-media {
        height: 72vh;
    }
}

@media screen and (max-width: 1160px) {
    #recruit .welfare .container ul li {
        width: 48%;
    }
}

@media screen and (max-width: 1159.98px) {
    .headernav .headerbox {
        position: fixed;
        width: 100%;
        padding: 20px 20px 0 20px;
    }
    .headernav .navmenu .menu {
        display: none;
    }
    .headernav .navmenu .menu>ul {
        margin-bottom: 20px;
        margin-top: 70px;
    }
    .headernav .navmenu .menu>ul li:first-child {
        border-top: 1px solid #e0e0e0;
    }
    .headernav .navmenu .menu>ul li {
        border-bottom: 1px solid #E0E0E0;
    }
    .headernav .navmenu .menu>ul a {
        font-size: 1.6rem;
        color: #1E322F;
        display: block;
        padding: 10px 20px;
    }
    .footer .container {
        flex-flow: column;
        width: 100% !important;
    }
    .footer .container .company-info {
        width: 100%;
        text-align: center;
        padding-top: 20px;
    }
    .footer .container .footer-nav {
        display: none;
    }
    #top .hero .slide-media img {
        vertical-align: top;
        height: 100vh;
        object-fit: cover;
    }
    #top .hero .swiper-slide .hero1 img {
        object-position: 30% 0;
    }
    #top .hero .swiper-slide .hero2 img {
        object-position: 60% 0;
    }
    #top .hero .swiper-slide .hero3 img {
        object-position: 25% 0;
    }
    #top .hero .swiper-slide .hero4 img {
        object-position: 60% 0;
    }
    #top .hero .swiper-slide .hero5 img {
        object-position: 50% 0;
    }
    #top .container {
        width: 100%;
        padding: 0 2% !important;
    }
    #top section .container {
        flex-flow: column;
    }
    #top section.strengths .container {
        flex-flow: column-reverse;
    }
    #top section.works .container {
        flex-flow: column-reverse;
    }
    #top section .section-image {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin-top: 40px;
        padding-bottom: 40px;
    }
    #top section .section-image img:first-child {
        position: initial;
        width: 49%;
    }
    #top section .section-image img:last-child {
        position: initial;
        width: 49%;
    }
    #top section .section-text {
        width: 100%;
        padding-top: 80px;
        margin-top: 40px;
    }
    #top .information .container {
        width: 96%;
        padding: 20px 0 !important;
    }
    #top .information .container .body {
        width: 90%;
    }
    #top .information .container .body ul li span {
        margin-right: 0;
    }
    #strengths .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #strengths .about-hgrade .container {
        width: 96%;
        padding: 20px 0;
    }
    #strengths .about-hgrade .container h2.section-title {
        margin-bottom: 20px;
    }
    #service .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #archive-detail .container,
    #archive .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #archive-detail section.archive-detail .container,
    #archive section.archive-detail .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #archive-detail section.archive-detail .container .body .image-main,
    #archive section.archive-detail .container .body .image-main {
        text-align: center;
    }
    #archive-detail .link-btn .container,
    #archive .link-btn .container {
        width: 100% !important;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #company .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #recruit .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #complete .container,
    #confirm .container,
    #contact .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #info .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #info-detail .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #info-detail .info-detail-content .container .link-btn {
        width: 100% !important;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
}

@media screen and (max-width: 1060px) {
    #company .top-message .container {
        width: 100%;
    }
    #company .top-message .section-image {
        text-align: center;
        margin: 0 auto 60px auto;
    }
    #company .top-message .section-image img:last-child {
        position: initial;
    }
    #company .philosophy .container {
        width: 80%;
    }
    #company .sdgs .container {
        width: 100%;
    }
    #company .sdgs .section-image {
        text-align: center;
        margin: 0 auto 60px auto;
    }
    #company .sdgs .section-image img:last-child {
        position: initial;
    }
    #company .sdgs .section-list ul li {
        flex-flow: column;
    }
    #company .sdgs .section-list ul li .image-box {
        width: 100%;
        justify-content: start;
        margin-bottom: 15px;
    }
    #company .sdgs .section-list ul li .image-box img {
        width: 140px;
    }
    #company .sdgs .section-list ul li h3 {
        width: 100%;
    }
    #company .sdgs .section-list ul li h3 br {
        display: none;
    }
    #company .sdgs .section-list ul li p {
        width: 100%;
        justify-content: start;
    }
    #company .company-overview .container {
        width: 100%;
    }
    #recruit .overview .container {
        width: 100%;
    }
    #recruit .welfare .container {
        width: 100%;
    }
    #complete section.form .policy,
    #confirm section.form .policy,
    #contact section.form .policy {
        width: 100%;
    }
    #info .info-list .container {
        width: 100%;
    }
    #info .info-list ul li a {
        display: flex;
        flex-flow: column;
        align-items: start;
    }
}

@media screen and (max-width: 1310px) {
    #top .hero .catch {
        margin-top: 10vh;
    }
}

@media screen and (max-width: 1024px) {
    /* #top .hero .catch.catch2 {
        width: 100%;
        top: 50%;
        right: 50%;
        left: initial;
        transform: translate(50%, -40%);
    }
    #top .hero .catch.catch4 {
        width: 100%;
        top: 50%;
        right: 50%;
        left: initial;
        transform: translate(50%, -40%);
    } */
    #top .hero .catch {
        /* align-items: center; */
        /* justify-content: center; */
        bottom: 20px;
        left: initial;
        padding: 0 20px;
    }
    #top .hero .catch p.catch-main {
        line-height: 1.4;
    }
    #strengths section.copy h2 {
        font-size: 3rem;
    }
    #strengths .hgrade .container {
        padding-top: 40px;
    }
    #strengths .hgrade .section-image {
        width: 35%;
        height: auto;
    }
    #strengths .hgrade .section-text {
        width: 60%;
        margin-right: 5%;
        height: auto;
    }
    #strengths .two-pillar .container {
        padding-top: 40px;
    }
    #strengths .two-pillar .section-text {
        margin-bottom: 60px;
    }
    #strengths .two-pillar .section-image h3 {
        font-size: 3rem;
    }
    #strengths .achieve .container {
        padding-top: 40px;
    }
    #strengths .achieve h2.section-title {
        font-size: 2.8rem;
    }
    #strengths .achieve .section-image img {
        margin-bottom: 30px;
    }
    #service .steel-business .container {
        padding-top: 40px;
    }
    #service .public-business .container {
        padding-top: 40px;
    }
}

@media screen and (max-width: 900px) {
    #policy .container {
        width: 100%;
        padding-right: 2% !important;
        padding-left: 2% !important;
    }
    #archive section.archive-detail .container .body .swiper.image-main img {
        width: 100%;
        height: 80vw;
        object-fit: cover;
    }
    #archive section.archive-detail .container .body .swiper.image-main li {
        margin-bottom: 0!important;
    }
    #archive section.archive-detail .container .body .swiper.image-thumbnail img {
        width: 100%;
        height: 20vw;
        object-fit: cover;
    }
    #archive-detail section.archive-list .archive-list-items .archive-list-item-media,
    #archive section.archive-list .archive-list-items .archive-list-item-media {
        min-height: 20vw;
    }
    #archive-detail section.archive-list .archive-list-items .archive-list-item img,
    #archive section.archive-list .archive-list-items .archive-list-item img {
        width: 100%;
        height: 20vw;
        object-fit: cover;
    }
}

@media screen and (max-width: 780px) {
    #top .hero .catch p.catch-main>br {
        display: block;
    }
    #strengths section.copy {
        padding: 30px 0;
    }
    #strengths section.copy h2 {
        font-size: 2.4rem;
    }
    #strengths section.copy h2>br {
        display: block;
    }
    #strengths .two-pillar .section-text {
        margin-bottom: 40px;
    }
    #strengths .two-pillar .section-image h3 {
        font-size: 2.4rem;
    }
    #service section.copy {
        padding: 30px 0;
    }
    #company section.copy {
        padding: 30px 0;
    }
}

@media screen and (max-width: 768px) {
    #strengths .hgrade .container {
        flex-flow: column;
        padding-bottom: 40px;
    }
    #strengths .hgrade .section-image {
        width: 50%;
    }
    #strengths .hgrade .section-text {
        width: 100%;
    }
    #strengths .about-hgrade .container table {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
    }
    #strengths .two-pillar {
        margin-bottom: 90px;
    }
    #strengths .two-pillar .container {
        flex-flow: column;
        padding-bottom: 0;
    }
    #strengths .achieve {
        margin-bottom: 90px;
    }
    #strengths .achieve .container {
        flex-flow: column;
        padding-bottom: 0;
    }
    #strengths .achieve .section-image img {
        margin-bottom: 20px;
    }
    #service .steel-business {
        margin-bottom: 0;
    }
    #service .steel-business .container {
        padding-bottom: 40px;
    }
    #service .steel-business .section-left {
        width: 100%;
    }
    #service .steel-business .section-left img {
        display: none;
    }
    #service .steel-business .section-right {
        display: flex;
        align-items: start;
        justify-content: space-between;
        width: 100%;
    }
    #service .steel-business .section-right img:first-child {
        width: 50%;
    }
    #service .steel-business .section-right img {
        width: 49%;
        height: 32vw;
        object-fit: cover;
    }
    #service .steel-business h2.section-title br {
        display: none;
    }
    #service .public-business-flow h2,
    #service .steel-business-flow h2 {
        font-size: 2.4rem;
        width: 90%;
    }
    #service .public-business-flow .swiper-button-prev,
    #service .public-business-flow .swiper-button-next,
    #service .steel-business-flow .swiper-button-prev,
    #service .steel-business-flow .swiper-button-next {
        width: 48px;
        height: 48px;
        transform: translateY(0);
    }
    #service .public-business-flow .swiper-button-prev,
    #service .steel-business-flow .swiper-button-prev {
        transform: rotate(180deg) translateY(0);
    }
    #service .public-business-flow .img-cover figure,
    #service .steel-business-flow .img-cover figure {
        flex-flow: column;
    }
    #service .public-business-flow .img-cover figure img,
    #service .steel-business-flow .img-cover figure img {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
    #service .public-business-flow .img-cover figure figcaption,
    #service .steel-business-flow .img-cover figure figcaption {
        width: 100%;
    }
    #service .public-business-flow .img-cover figure figcaption h3 p,
    #service .steel-business-flow .img-cover figure figcaption h3 p {
        margin-bottom: 15px;
    }
    #service .public-business .container {
        flex-flow: column;
        padding-bottom: 40px;
    }
    #service .public-business .section-left {
        width: 100%;
    }
    #service .public-business .section-left img {
        display: none;
    }
    #service .public-business .section-right {
        display: flex;
        align-items: start;
        justify-content: space-between;
        width: 100%;
    }
    #service .public-business .section-right img:first-child {
        width: 50%;
    }
    #service .public-business .section-right img {
        width: 49%;
        height: 32vw;
        object-fit: cover;
    }
    #service .main-facility .container,
    #service .management-engineer .container {
        padding-top: 0;
    }
    #service .main-facility,
    #service .management-engineer {
        margin-bottom: 112px;
    }
    #service .main-facility h2,
    #service .management-engineer h2 {
        font-size: 3.6rem;
    }
    #service .main-facility h2:after,
    #service .management-engineer h2:after {
        padding-bottom: 20px;
    }
    #archive-detail section.archive-list-nav,
    #archive section.archive-list-nav {
        margin-top: 60px;
    }
    #archive-detail section.archive-list .archive-list-items li,
    #archive section.archive-list .archive-list-items li {
        width: 49%;
    }
    #archive-detail section.archive-detail .container .body .image-main,
    #archive section.archive-detail .container .body .image-main {
        display: none;
    }
    #archive-detail section.archive-detail .container .body .swiper,
    #archive section.archive-detail .container .body .swiper {
        display: block;
    }
    #company .top-message h2.section-title br {
        display: none;
    }
    #company .top-message .section-text .section-signature p.name {
        font-size: 3rem;
    }
    #company .philosophy .container .section-lead {
        font-size: 2.8rem;
    }
    #company .philosophy .container .section-lead br {
        display: block;
    }
    #company .sdgs h2.section-title br {
        display: none;
    }
    #recruit .overview h2.section-title br {
        display: none;
    }
    #complete section.form table th input[type=text],
    #complete section.form table th textarea,
    #complete section.form table td input[type=text],
    #complete section.form table td textarea,
    #confirm section.form table th input[type=text],
    #confirm section.form table th textarea,
    #confirm section.form table td input[type=text],
    #confirm section.form table td textarea,
    #contact section.form table th input[type=text],
    #contact section.form table th textarea,
    #contact section.form table td input[type=text],
    #contact section.form table td textarea {
        width: 100%;
    }
    #complete section.form .policy,
    #confirm section.form .policy,
    #contact section.form .policy {
        padding: 20px 40px;
    }
    #confirm .btn-wrap {
        flex-flow: column;
    }
    #confirm .btn-wrap button:first-child {
        margin-right: 0;
        margin-bottom: 40px;
    }
    #info-detail .info-detail-content .container {
        width: 100%;
    }
    #info-detail .info-detail-content .container .content-wrap img {
        width: 100%;
    }
    #archive-detail section.archive-list .archive-list-items .archive-list-item img,
    #archive section.archive-list .archive-list-items .archive-list-item img {
        width: 100%;
        height: 30vw;
        object-fit: cover;
    }
}

@media screen and (max-width: 680px) {
    #archive-detail section.archive-detail .container .body table,
    #archive section.archive-detail .container .body table {
        display: block;
    }
    #archive-detail section.archive-detail .container .body table tr,
    #archive section.archive-detail .container .body table tr {
        display: block;
    }
    #archive-detail section.archive-detail .container .body table tr th,
    #archive section.archive-detail .container .body table tr th {
        background: #f0f0f0;
        border: none;
    }
    #archive-detail section.archive-detail .container .body table tr td,
    #archive section.archive-detail .container .body table tr td {
        border: none;
    }
    #archive-detail section.archive-detail .container .body table tr th,
    #archive-detail section.archive-detail .container .body table tr td,
    #archive section.archive-detail .container .body table tr th,
    #archive section.archive-detail .container .body table tr td {
        display: block;
        width: 100%;
    }
    #archive-detail section.archive-detail .container .body table tr:last-child th,
    #archive section.archive-detail .container .body table tr:last-child th {
        border: none;
    }
    #archive-detail section.archive-detail .container .body table tr:last-child td,
    #archive section.archive-detail .container .body table tr:last-child td {
        border: none;
    }
    #archive-detail .link-btn .container ul,
    #archive .link-btn .container ul {
        flex-flow: column;
        justify-content: center;
    }
    #archive-detail .link-btn .container ul li,
    #archive .link-btn .container ul li {
        width: 50%;
        margin-bottom: 20px;
    }
    #archive-detail .link-btn .container ul li a,
    #archive .link-btn .container ul li a {
        width: 100%;
    }
    #archive-detail.public-archive .archive-detail .container .body table tr th,
    #archive.public-archive .archive-detail .container .body table tr th {
        border: none;
    }
    #archive-detail.public-archive .archive-detail .container .body table tr:last-child th,
    #archive.public-archive .archive-detail .container .body table tr:last-child th {
        border: none;
    }
    #info-detail .info-detail-content .container .link-btn ul {
        flex-flow: column;
        justify-content: center;
    }
    #info-detail .info-detail-content .container .link-btn ul li {
        width: 50%;
        margin-bottom: 20px;
    }
    #info-detail .info-detail-content .container .link-btn ul li a {
        width: 100%;
    }
}

@media screen and (max-width: 670px) {
    #top .information {
        padding: 36px 0 52px 0;
    }
    #top .information .container .head {
        margin-bottom: 40px;
    }
    #top .information .container .head .head-title a {
        display: none;
    }
    #top .information .container>a {
        display: flex;
        width: 240px;
        margin: 10px auto 0 auto;
    }
}

@media screen and (max-width: 640px) {
    #complete section.tel .section-list ul li,
    #complete section.overview .section-list ul li,
    #confirm section.tel .section-list ul li,
    #confirm section.overview .section-list ul li,
    #contact section.tel .section-list ul li,
    #contact section.overview .section-list ul li {
        width: 100px;
        padding: 10px 0;
    }
    #complete section.form table,
    #confirm section.form table,
    #contact section.form table {
        display: block;
        width: 100%;
    }
    #complete section.form table tbody,
    #confirm section.form table tbody,
    #contact section.form table tbody {
        display: block;
        width: 100%;
    }
    #complete section.form table tr,
    #confirm section.form table tr,
    #contact section.form table tr {
        display: block;
        width: 100%;
    }
    #complete section.form table th,
    #complete section.form table td,
    #confirm section.form table th,
    #confirm section.form table td,
    #contact section.form table th,
    #contact section.form table td {
        display: block;
        width: 100%;
        padding: 12px;
    }
    #complete section.form table th,
    #confirm section.form table th,
    #contact section.form table th {
        padding-left: 20px;
        border-bottom: 1px solid #d8d8d8;
    }
}

@media screen and (max-width: 580px) {
    #top .hero .catch p {
        font-size: 1.8rem;
    }
    #top .hero .catch p.catch-main {
        font-size: 3.6rem;
    }
    #top .hero .label {
        top: 70px;
        width: 100%;
        padding: 17px 0;
        text-align: center;
        font-size: 1.8rem;
    }
    #top .information .container .body ul li a {
        width: 100%;
    }
    #strengths .two-pillar h2.section-title>br {
        display: none;
    }
    #strengths .achieve h2.section-title>br {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    #strengths section.copy h2 {
        font-size: 2rem;
    }
    #strengths .two-pillar .section-text {
        margin-bottom: 30px;
    }
    #strengths .two-pillar .section-image h3 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 450px) {
    #company .sdgs .section-list ul li .image-box img {
        width: 100px;
    }
    #company .company-overview table {
        display: block;
    }
    #company .company-overview table tr {
        display: block;
    }
    #company .company-overview table tr th,
    #company .company-overview table tr td {
        display: block;
        width: 100%;
    }
    #recruit .welfare .container ul li {
        width: 100%;
    }
    #recruit .job-description table {
        display: block;
        width: 100%;
    }
    #recruit .job-description table tr {
        display: block;
        width: 100%;
    }
    #recruit .job-description table th,
    #recruit .job-description table td {
        display: block;
        width: 100%;
        padding: 15px;
        text-align: left;
    }
    #recruit .job-description table td {
        font-size: 1.6rem;
    }
    #complete section.tel .section-list ul,
    #complete section.overview .section-list ul,
    #confirm section.tel .section-list ul,
    #confirm section.overview .section-list ul,
    #contact section.tel .section-list ul,
    #contact section.overview .section-list ul {
        width: 90%;
    }
    #complete section.tel .section-list ul li,
    #complete section.overview .section-list ul li,
    #confirm section.tel .section-list ul li,
    #confirm section.overview .section-list ul li,
    #contact section.tel .section-list ul li,
    #contact section.overview .section-list ul li {
        width: 100%;
        margin-right: 32px;
    }
    #complete section.tel .section-list ul li:after,
    #complete section.overview .section-list ul li:after,
    #confirm section.tel .section-list ul li:after,
    #confirm section.overview .section-list ul li:after,
    #contact section.tel .section-list ul li:after,
    #contact section.overview .section-list ul li:after {
        right: -23px;
    }
}

@media screen and (max-width: 430px) {
    #archive-detail section.archive-list .archive-list-items li,
    #archive section.archive-list .archive-list-items li {
        width: 100%;
    }
}

@media screen and (max-width: 420px) {
    #top .hero .catch p {
        font-size: 1.6rem;
        line-height: 1.5;
    }
}

@media screen and (max-width: 370px) {
    #top .hero .catch p {
        font-size: 1.4rem;
    }
    #top .information .container .head .head-title {
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 320px) {
    #strengths section.copy h2>br {
        display: none;
    }
}