/* main -----------------------*/ main {} .bg-fff {background: #fff;} .bg-ffe600 {background: #ffe600;} .bg-fffcee {background: #fffcee;} .bg-00a5a0 {background: #00a5a0;} /* index -----------------------*/ /* index------#top-kv-----------------------*/ main #top-kv{width: 100%; position: relative; background-image: url(../images/top/main-kv-img.png); background-repeat: no-repeat;background-size: cover; background-position: center; background-color: #ffe600;} main #top-kv .top-kv-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between; padding-top: 30em; padding-bottom: 30em;} main #top-kv .top-kv-title {position:absolute; top:25em; right:50px; width:40%; display: flex; flex-flow: column; align-items: flex-end; } main #top-kv .top-kv-title h2 {font-size: 48px; display: block; letter-spacing:0.2em; width:fit-content;} main #top-kv .top-kv-title p {font-size: 24px; display: block; letter-spacing:0.1em; margin-top: 15px; width:fit-content;} /* index------#top-topics-----------------------*/ main #top-topics {background: #fff;width: 100%;} main #top-topics .top-topics-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #top-topics .top-topics-title{width: 100%; text-align: center;} main #top-topics .top-topics-title h2 {font-size: 90px; display: block;} main #top-topics .top-topics-contents{width: 100%;margin: 0 auto; padding-top: 2em; } main #top-topics .top-topics-contents ul.topics-list {list-style: none;padding-right: 1em;max-height: 300px;overflow-y: auto;} main #top-topics .top-topics-contents .topic-item {padding: 1em;border-bottom: 1px solid #ddd;display: flex; justify-content: flex-start;} main #top-topics .top-topics-contents .topic-item span{display: block;} main #top-topics .top-topics-contents .topic-item .label {font-weight: bold;margin-right: 0.5em; border: solid 1px #333; display: flex; justify-content: center; align-items: center; width: 10%; text-align: center; padding: 0.5%;} main #top-topics .top-topics-contents .topic-item .time {margin-right: 0.5em; min-width: 130px; display: flex; justify-content: center; align-items: center; width: 10%; padding: 0.5%; text-align: center; } main #top-topics .top-topics-contents .topic-item p{ display: block; width: 70%; padding: 0.5%;} main #top-topics a,main #top-topics a:visited {color: #333; text-decoration: underline; text-underline-offset: 0.3em;} main #top-topics a:hover {color: #999;} /* index------#top-about-----------------------*/ main #top-about {background: #00a5a0;width: 100%;} main #top-about .top-about-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em; display: flex; flex-wrap: wrap;} main #top-about .top-about-logo{width: 40%; margin: 0 auto; margin-top: 2.5em;} main #top-about .top-about-logo img{width: 100%; height: auto; margin: 0 auto;} main #top-about .top-about-contents {width: 60%; margin: 0 auto; display: flex; flex-flow: column; align-items: flex-start;} main #top-about .top-about-contents p{ font-size: 24px; margin-left:5em; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%; color: #fff;} main #top-about .top-about-btn {margin-top: 2em; margin-left:7em;} /* index------#top-services-----------------------*/ main #top-services {background: #ffe600;width: 100%;} main #top-services .top-services-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #top-services .top-services-title{width: 100%; text-align: center;} main #top-services .top-services-title h2 { font-size: 90px; display: block;} main #top-services .top-services-contents{width: 100%;margin: 0 auto; padding-top: 2em;} main #top-services .top-services-contents p{ font-size: 24px; margin: auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%;} main #top-services ul.service-list {display: flex;justify-content: space-between; flex-wrap: wrap;list-style: none; padding: 0;} main #top-services ul.service-list li {width: 50%; height: 500px;position: relative;overflow: hidden;} main #top-services ul.service-list li.business,main #top-services ul.service-list li.product{width: 50%; background-color: #000; color: #fff;} main #top-services ul.service-list li.equipment,main #top-services ul.service-list li.corporate{width: 50%;} main #top-services ul.service-list li h3{ position: relative;text-align: center; font-size: 48px; z-index: 1; padding-top: 3em;} main #top-services ul.service-list li p{ position: relative; margin:40px auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; z-index: 1;} main #top-services ul.service-list li::after {position: absolute;content: "";display: block;width: 100%;height: 100%;top: 0;background-repeat: no-repeat;background-position: center center;background-size: cover;transition: all 0.5s ease-out;opacity: 0.5;} main #top-services ul.service-list li.business::after {background-image: url(../images/top/service-list-business-img.jpg);} main #top-services ul.service-list li.product::after {background-image: url(../images/top/service-list-product-img.jpg);} main #top-services ul.service-list li.equipment::after {background-image: url(../images/top/service-list-equipment-img.jpg);} main #top-services ul.service-list li.corporate::after {background-image: url(../images/top/service-list-corporate-img.png);} main #top-services ul.service-list li:hover:after {opacity: .6;-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);} /* index------#top-services .btn-----------------------*/ main #top-services ul.service-list li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main #top-services ul.service-list .btn {color: #fff;letter-spacing: .1em;text-align: center;width: 200px;height: 60px;background: #00a5a0; margin: auto;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main #top-services ul.service-list .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main #top-services ul.service-list .btn:hover {color: #00a5a0; border: 2px solid #fff;} main #top-services ul.service-list .btn:hover::after {transform: scale(1, 1);} main #top-services ul.service-list .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main #top-services ul.service-list .btn:hover .icon {transform: translateX(5px);} /* index------#top-about .btn-----------------------*/ #top-about .top-about-btn .btn {color: #0071ff;letter-spacing: .1em;text-align: center;width: 340px;height: 100px;background: #fff; margin: auto;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 100px;text-decoration: none; font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} #top-about .top-about-btn .btn::after {background: #0071ff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} #top-about .top-about-btn .btn:hover {color: #fff; border: 2px solid #fff;} #top-about .top-about-btn .btn:hover::after {transform: scale(1, 1);} #top-about .top-about-btn .btn .circle {position: relative;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #0071ff;display: flex;align-items: center; justify-content: center;flex-shrink: 0;} #top-about .top-about-btn .btn .circle .icon {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1);font-size: 1rem;color: #fff;position: relative;} #top-about .top-about-btn .btn:hover .circle .icon {transform: translateX(5px);} /* lowerlayer -----------------------*/ /* lowerlayer------#lowerlayer-top-----------------------*/ main #lowerlayer-top {background: #fff;width: 100%;} main #lowerlayer-top .lowerlayer-top-container{width: 90%;margin: 0 auto; padding-top: 3em; padding-bottom: 3em; position: relative;} .breadcrumb{position: absolute; bottom:15%; right: 0px;} .breadcrumb ol {display: flex;list-style: none;padding: 0;margin: 0;} .breadcrumb ol li {display: flex;align-items: center;font-size: 0.9rem;} .breadcrumb ol li + li::before {content: "/"; /* 区切りの記号 */margin: 0 0.5em;color: #999;} .breadcrumb ol li a {text-decoration: none;color: #0071ff;} .breadcrumb ol li a:hover {text-decoration: underline; color:#00a0e9;} .breadcrumb ol li a:visited {color: #0071ff;} .breadcrumb ol li a:visited:hover {color: #00a0e9;} main #lowerlayer-top .lowerlayer-top-title{width: 100%; text-align: left;} main #lowerlayer-top .lowerlayer-top-title p { font-size: 90px; display: block; font-weight: bold;} main #lowerlayer-top .lowerlayer-top-title h2 { font-size: 48px; display: block;} main #lowerlayer-top .lowerlayer-main-container {position: relative;width: 100%;height: 600px;background: #ffe600;overflow: hidden;} main #lowerlayer-top .lowerlayer-main-bk {position: absolute;top: 0;left: 10%;width: 80%;height: 600px;background: #fff;transform: skew(-20deg);z-index: 1;} main #lowerlayer-top .lowerlayer-main-contents {position: relative;z-index: 2; width: 90%; margin: 0 auto; height: 100%; display: flex; padding: 2em;box-sizing: border-box;top: 0px;left: 0px;} .lowerlayer-main-contents .content-inner {} .lowerlayer-main-contents .content-inner h2{font-size:42px; width: 100%; min-width: 550px; background: #ffe600; transform: skew(-20deg); padding: 1em 2em; margin-top: 100px;} .lowerlayer-main-contents .content-inner h2 span{display: inline-block; transform: skew(20deg);} .lowerlayer-main-contents .content-inner p{font-size:24px; padding: 2em 3.5em;} .content-img-wrapper {width: 100%; height: 600px;overflow: hidden;position: absolute;top: 0px;right: 0; z-index: 1;} .content-img{width: 900px;height: 500px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .content-img img{width: 130%;height: 130%;object-fit: cover;transform: skew(20deg); position: relative; top: -10%; left: -10%;} .content-img img.equipment{width: 120%;height: 120%; position: relative; top: -10%; left: -10%;} .content-img img.recruit{width: 110%;height: 110%; position: relative; top: 0%; left: -10%;} .content-img-product{width: 900px;height: 500px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .content-img-product img.product{width: 120%;height: 120%; object-fit: cover;transform: skew(20deg); position: relative; top: -10%; left: -10%;} /* main #lowerlayer-top .lowerlayer-main-container{background: #ffe600;width: 100%; position: relative;} main #lowerlayer-top .lowerlayer-main-contents{background: #fff; width: 80%; margin: 0 auto; height: 600px; transform: skew(-20deg); overflow: hidden;} */ /* business------#business-quality-----------------------*/ main#business{} main #business-quality　{} main #business-quality .business-quality-container{background: #fffcee;width: 100%;} main #business-quality .business-quality-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #business-quality .business-quality-title p { font-size: 90px; display: block; font-weight: bold;} main #business-quality .business-quality-title h2 { font-size: 48px; display: block;} main #business-quality .business-dot-container {width: 80%;margin: 0 auto;display: flex;gap: 1em; /* 丸同士の間隔 */align-items: center;justify-content: space-around;padding-top: 5em; padding-bottom: 5em;} main #business-quality .business-dot-container h2{font-size:32px;} main #business-quality .business-dot-container p{font-size:24px; padding-top: 1.5em;} main #business-quality .business-dot-container ol{padding-top: 1.5em;} main #business-quality .business-dot-container ol li{font-size:24px;} main #business-quality .business-dot {width: 500px;height: 500px;border-radius: 50%;display: inline-block;display: flex;flex-flow: column; justify-content: center;align-items: center;} .yellow {background-color: #ffe600;} .green {background-color: #00a5a0;} /* business------#business-process-----------------------*/ main #business-process {} main #business-process .business-process-container{background: #ffe600;width: 100%;} main #business-process .business-process-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 10em;} main #business-process .business-process-title p { font-size: 90px; display: block; font-weight: bold;} main #business-process .business-process-title h2 { font-size: 48px; display: block;} main #business-process .business-process-comment {width: 100%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #business-process .business-process-comment p{ font-size: 24px;letter-spacing:0.2em; line-height: 180%;} main #business-process .business-flow-container {background: #fff; width: 100%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between;} main #business-process .business-flow-contents {width: 40%;margin: 0px auto; padding-top: 5em; padding-bottom: 5em;} main #business-process .business-flow-contents h2 { color: #00a5a0; font-size: 48px; display: block; padding-bottom: 1em;} main #business-process .business-flow-contents p { font-size: 24px; display: block; line-height: 180%;} main #business-process .business-flow-img {width: 40%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #business-process .business-flow-img img {width: 100%; margin: 0 auto; height: 400px; object-fit: cover; object-position: left -80px;} main #business-process .business-flow-arrow {text-align: center;margin: 1em 0;font-size: 4rem;} /* product------#product-parts-----------------------*/ main#product{} main #product-parts {} main #product-parts .product-parts-container{background: #fff;width: 100%;} main #product-parts .product-parts-contents{width: 80%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #product-parts .product-parts-contents img {width: 100%; height: auto; margin: 0 auto;} main #product-layout {} main #product-layout .product-layout-container {background-color: #353535;background-image:linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);background-size: 250px 250px;width: 100%;} main #product-layout .product-layout-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em; color: #fff;} main #product-layout .product-layout-title p { font-size: 90px; display: block; font-weight: bold;} main #product-layout .product-layout-title h2 { font-size: 48px; display: block;} main #product-layout .product-layout-comment p{ font-size: 24px;letter-spacing:0.2em; line-height: 180%; padding-top: 5em;} main #product-layout ul.product-layout-list{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em; display: flex; justify-content: space-between; flex-wrap: wrap; list-style: none;} main #product-layout ul.product-layout-list li{width: 48%;margin: 0 auto;} main #product-layout ul.product-layout-list li img{width: 100%; height: auto; margin: 0 auto;} /* equipment------#equipment-layout-----------------------*/ main#equipment{} main #equipment-layout {} main #equipment-layout .equipment-layout-container{background: #fff;width: 100%;} main #equipment-layout .equipment-layout-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #equipment-layout .equipment-layout-title p { font-size: 90px; display: block; font-weight: bold;} main #equipment-layout .equipment-layout-title h2 { font-size: 48px; display: block;} main #equipment-layout ul.equipment-layout-list{width: 90%;margin: 0 auto;padding-bottom: 5em; display: flex; justify-content: space-between; flex-wrap: wrap; list-style: none;} main #equipment-layout ul.equipment-layout-list li{width: 48%;margin: 0 auto; padding-top: 5em;} main #equipment-layout ul.equipment-layout-list li img{width: 100%; height: auto; margin: 0 auto;} main #equipment-layout ul.equipment-layout-list li p{ font-size: 24px; text-align: center; padding-top: 1.5em;} /* equipment------#equipment-list-----------------------*/ main #equipment-layout .equipment-list{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em;} main #equipment-layout .equipment-list table{border-right:#3A3A3A solid 1px; border-top:#3A3A3A solid 1px; width: 100%;margin: 0 auto; } main #equipment-layout .equipment-list th{ background-color:#00a5a0;border-left:#3A3A3A solid 1px;border-bottom:#3A3A3A solid 1px; text-align:center; color:#FFFFFF; padding-top: 2.5em; padding-bottom: 2.5em;} main #equipment-layout .equipment-list td{ border-left:#3A3A3A solid 1px;border-bottom:#3A3A3A solid 1px; text-align:center;padding-top: 1em; padding-bottom: 1em;} main #equipment-layout .equipment-list td.bgc{ background-color:#efefef;} main #equipment-layout .equipment-list td.four_line{background: url(../images/equipment/lineA.gif) no-repeat 0.8em 1.3em; background-size: contain; background-position:left center;} main #equipment-layout .equipment-list td.five_line{background: url(../images/equipment/lineB.gif) no-repeat 0.8em 1.7em; background-size: contain; background-position:left center;} main #equipment-layout .equipment-list td.border_none{ border-left:none;border-bottom:none; text-align:center;} main #equipment-layout .equipment-list td.border_bottom{ border-left:none;border-bottom:#3A3A3A solid 1px; text-align:center;} /* corporate------#corporate-main-----------------------*/ main#corporate{} main#corporate .corporate-main-container{background: #fff;width: 100%;} main#corporate .corporate-main-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main#corporate .corporate-inner {display: flex; flex-flow: column; align-items: center;} main#corporate .corporate-inner h2 { font-family: "Yuji Syuku", serif; font-size: 120px; display: block; letter-spacing: 0.1em; } main#corporate .corporate-inner p { font-size: 24px; display: block; text-align: center; line-height: 180%; letter-spacing: 0.2em; padding-top: 2.5em; } main#corporate p.president-name{ font-family: "Yuji Syuku", serif; font-size: 24px; text-align: right; margin-top: 1.5em; margin-right: 20%;} main#corporate p.president-name span{ padding-right: 15px; font-size: 18px;} /* corporate------#company-overview-----------------------*/ main #company-overview {} main #company-overview .company-overview-container{background: #fffcee;width: 100%;} main #company-overview .company-overview-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #company-overview .company-overview-title p { font-size: 90px; display: block; font-weight: bold;} main #company-overview .company-overview-title h2 { font-size: 48px; display: block;} main #company-overview .company-profile {width: 90%;margin: 0 auto;padding-top: 5em;padding-bottom: 10em;} main #company-overview .company-profile dl {font-size: 24px;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } main #company-overview .company-profile dt {font-weight: bold;border-top: 3px solid #333;padding: 1.5em 0 0;margin: 0;} main #company-overview .company-profile dd {line-height: 1.6;border-top: 1px solid #333;padding: 1.5em 0 0;margin: 0;} main #company-overview .company-profile dt:last-of-type {border-bottom: 3px solid #333;padding-bottom: 1.5em;} main #company-overview .company-profile dd:last-of-type {border-bottom: 1px solid #333;padding-bottom: 1.5em;} main #company-overview .company-profile .factory-row {display: flex;justify-content: space-between;gap: 1em;line-height: 1.6;margin: 0; width: 25%; margin-right: auto;} main #company-overview .company-profile .factory-row .label {min-width: 5em;} main #company-overview .company-profile .factory-row .area {text-align: right;white-space: nowrap;} /* corporate------#company-history-----------------------*/ main #company-history {} main #company-history .company-history-container{background: #ffe600;width: 100%;} main #company-history .company-history-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #company-history .company-history-title p { font-size: 90px; display: block; font-weight: bold;} main #company-history .company-history-title h2 { font-size: 48px; display: block;} main #company-history .company-history {width: 90%;margin: 0 auto;padding-top: 5em;padding-bottom: 10em;} main #company-history .company-history dl {font-size: 24px;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } main #company-history .company-history dt {font-weight: bold;border-top: 3px solid #333;padding: 1.5em 0 0;margin: 0;} main #company-history .company-history dd {line-height: 1.6;border-top: 1px solid #333;padding: 1.5em 0 0;margin: 0;} main #company-history .company-history dt:last-of-type {border-bottom: 3px solid #333;padding-bottom: 1.5em;} main #company-history .company-history dd:last-of-type {border-bottom: 1px solid #333;padding-bottom: 1.5em;} /* corporate------#production-sites-----------------------*/ main #production-sites {} main #production-sites .production-sites-container{background: #fff;width: 100%;} main #production-sites .production-sites-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #production-sites .production-sites-title p { font-size: 90px; display: block; font-weight: bold;} main #production-sites .production-sites-title h2 { font-size: 48px; display: block;} main #production-sites .production-factory-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between; } .border-top-ccc{border-top: 1px solid #ccc;padding: 1.5em 0 0;} main #production-sites .production-factory-contents {width: 50%;margin: 0px auto; padding-top: 5em; padding-bottom: 5em;} main #production-sites .production-factory-contents h2 {width: fit-content; color: #333; font-size: 48px; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #production-sites .production-factory-contents p { font-size: 24px; display: block; line-height: 180%;} main #production-sites .production-factory-img {width: 48%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #production-sites .production-factory-img img {width: 100%; margin: 0 auto; height: 400px; object-fit: cover; object-position: left -80px;} main #production-sites .production-factory-contents a{color: #00a5a0; text-decoration: none; transition: all 0.5s;} main #production-sites .production-factory-contents a:hover{opacity: 0.6;} /* corporate------#kenkou-management-----------------------*/ main #kenkou-management {} main #kenkou-management .kenkou-management-container{background: #fff;width: 100%;} main #kenkou-management .kenkou-management-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #kenkou-management .kenkou-management-title h2 { font-size: 48px; display: block;} main #kenkou-management .kenkou-policy-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between; } main #kenkou-management .kenkou-policy-contents {width: 40%;margin: 0 auto 0 0; padding-top: 0em; padding-bottom: 5em;} main #kenkou-management .kenkou-policy-contents h2 {width: fit-content; color: #333; font-size: 48px; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #kenkou-management .kenkou-policy-contents p { font-size: 24px; display: block; line-height: 180%;} main #kenkou-management .kenkou-policy-img {width: 40%;margin: 0 auto; padding-top: 0em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-policy-img img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-logo {width: 80%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-logo img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-figure-container{background: #fff;width: 100%;} main #kenkou-management .kenkou-figure-title h2 { font-size: 48px; display: block; text-align: center;} main #kenkou-management .kenkou-figure {width: 80%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-figure img {width: 100%; height: auto; margin: 0 auto;} /* aboutus------#aboutus-main-----------------------*/ main#aboutus{} main #aboutus-main .aboutus-main-container{width: 100%;} main #aboutus-main .aboutus-main-contents{width: 90%;margin: 0 auto; padding-top: 10em; padding-bottom: 10em;} main #aboutus-main .aboutus-inner {display: flex; flex-flow: column; align-items: center;} main #aboutus-main .aboutus-main-contents p {color: #fff; font-size: 24px;letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-main h2{display: block; width: 45%;} main #aboutus-main h2 img{width: 100%; height: auto; margin: 0 auto;} main #aboutus-data span.note {font-size: 24px; display: block; line-height: 180%; text-align: center; margin-top: auto;} main #aboutus-data .aboutus-data-style-box span.note {margin-top: 2em;} main #aboutus-data .aboutus-data-container{width: 100%; padding-top: 10em;} main #aboutus-data .aboutus-data-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main #aboutus-data .aboutus-data-title h2 { font-size: 48px; display: block;} main #aboutus-data .aboutus-data-contents p {font-size: 24px;letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-data ul.aboutus-data-work-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:flex-start; flex-wrap: wrap;gap: 2rem;} main #aboutus-data .aboutus-data-work-box li {width: 48%; background: #fff; padding: 4em; box-sizing: border-box; border-radius: 60px; display: flex; justify-content:flex-start; flex-direction: column; align-items: center;} main #aboutus-data .aboutus-data-work-box h3 {font-size: 48px; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-work-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-work-box p .number {font-size: 120px;line-height: 1;} main #aboutus-data .aboutus-data-work-box p .symbol {font-size: 50px;line-height: 1.6;margin-left: 7px;} /* main #aboutus-data .aboutus-data-work-box dl.qualification {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {width: 50%; font-size: 24px; line-height: 180%;padding: 0.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {width: 20%; font-size: 24px; line-height: 180%;padding: 0.5em;} */ main #aboutus-data .aboutus-data-work-box dl.qualification {display: grid;grid-template-columns: 1fr auto;row-gap: 2em;column-gap: 5.5em; align-items: end; margin: 0;padding-bottom: 5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {font-size: 24px;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {} main #aboutus-data .aboutus-data-work-box dl.qualification dt, main #aboutus-data .aboutus-data-work-box dl.qualification dd {margin: 0;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {display: flex;justify-content: flex-end;align-items: flex-end;font-size: 0; } main #aboutus-data .aboutus-data-work-box dl.qualification dd {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: flex-end; line-height: 1; padding-top: 0em; text-align: right;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .number {font-size: 40px;line-height: 1;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .symbol {font-size: 24px;line-height: 1.2;margin-left: 7px;} main #aboutus-data ul.aboutus-data-style-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:flex-start; flex-wrap: wrap;gap: 2rem;} main #aboutus-data .aboutus-data-style-box li {width: 31%; background: #fff; padding: 4em; box-sizing: border-box; border-radius: 60px; display: flex;flex-direction: column;justify-content: flex-start; align-items: center;} main #aboutus-data .aboutus-data-style-box h3 {font-size: 48px; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-style-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-style-box p .number {font-size: 120px;line-height: 1;} main #aboutus-data .aboutus-data-style-box p .symbol {font-size: 50px;line-height: 1.6; margin-left: 7px;} /*.age-graph */ main #aboutus-data .aboutus-data-work-box .age-graph {max-width: 600px;width: 100%; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-row {display: flex;align-items: center; margin-bottom: 1em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-label {width: 35%; text-align: right; margin-right: 1em; font-size: 24px; white-space: nowrap; flex-shrink: 0;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-container {flex: 1;background-color: #fff; height: 32px;position: relative;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .age-graph .bar {height: 100%;background-color: #00a5a0;width: 0;animation: bar-animation 2s ease-out forwards;} main #aboutus-data .aboutus-data-work-box .age-graph .bar1 { animation-delay: 0s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar2 { animation-delay: 0.1s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar3 { animation-delay: 0.2s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar4 { animation-delay: 0.3s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar5 { animation-delay: 0.4s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar6 { animation-delay: 0.5s; } @keyframes bar-animation {0% { width: 0; }100% { width: var(--target-width); }} /*.recruitment-graph-vertical */ main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical {max-width: 600px;margin: 0px auto; padding-top: 5em; padding-bottom: 5em;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-group {display: flex;justify-content: center;align-items: flex-end;gap: 5em; /* 棒グラフ同士の間隔を縮める */height: 420px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-item {display: flex;flex-direction: column;align-items: center;width: 120px; /* 棒を太めに */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-container {width: 100%;height: 340px;background: #fff;display: flex;align-items: flex-end;justify-content: center;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar {width: 100%;height: 0;animation: grow 0.5s ease-out forwards;/* border-radius: 0; ←不要 */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar1 {--bar-height: 30%;animation-delay: 0s;background-color: #f0dc27; } main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar2 {--bar-height: 70%;animation-delay: 0.1s;background-color: #00a5a0;} @keyframes grow {0% { height: 0; }100% { height: var(--bar-height); }} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .number {font-size: 90px;line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .symbol {font-size: 50px;line-height: 1;margin-left: 5px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .label {margin-top: 1em; font-size: 24px; text-align: center;} /*.chart-container */ main #aboutus-data .aboutus-data-work-box .chart-container { display: flex; align-items: center; gap: 3em; padding-top: 5em; padding-bottom: 5em; } main #aboutus-data .aboutus-data-work-box .circle { display: inline-block; transform: rotate(-90deg); width: 400px; height: 400px; } main #aboutus-data .aboutus-data-work-box .circle .type { fill: transparent; stroke-width: 100; stroke-dasharray: 0 565; stroke-dashoffset: 0; animation: draw 1s forwards; } main #aboutus-data .aboutus-data-work-box .type1 { stroke: #89d3e8; animation-delay: 0s; } /* 総務・経理 */ main #aboutus-data .aboutus-data-work-box .type2 { stroke: #4acddb; animation-delay: 0.2s; }/* 業務管理 */ main #aboutus-data .aboutus-data-work-box .type3 { stroke: #2f9875; animation-delay: 0.4s; }/* 品質管理 */ main #aboutus-data .aboutus-data-work-box .type4 { stroke: #3ed3a9; animation-delay: 0.6s; }/* 生産管理・開発 */ main #aboutus-data .aboutus-data-work-box .type5 { stroke: #89d39d; animation-delay: 0.8s; }/* 出荷 */ main #aboutus-data .aboutus-data-work-box .type6 { stroke: #48b884; animation-delay: 1.0s; }/* 金型メンテナンス */ main #aboutus-data .aboutus-data-work-box .type7 { stroke: #b5bf00; animation-delay: 1.2s; }/* 電気設備保全管理 */ main #aboutus-data .aboutus-data-work-box .type8 { stroke: #ffe600; animation-delay: 1.4s; }/* プレス加工 */ main #aboutus-data .aboutus-data-work-box .type9 { stroke: #00a5a0; animation-delay: 1.6s; }/* 溶接 */ @keyframes draw { from { stroke-dasharray: 0 565; } to { stroke-dasharray: var(--len) 565; } } main #aboutus-data .aboutus-data-work-box .legend { font-size: 18px; line-height: 180%; } main #aboutus-data .aboutus-data-work-box .legend-item { display: flex; align-items: center; margin-bottom: 0.5em; } main #aboutus-data .aboutus-data-work-box .legend-color { width: 24px; height: 24px; margin-right: 1em; } main #aboutus-data .aboutus-data-work-box .color1 { background-color: #89d3e8; } main #aboutus-data .aboutus-data-work-box .color2 { background-color: #4acddb; } main #aboutus-data .aboutus-data-work-box .color3 { background-color: #2f9875; } main #aboutus-data .aboutus-data-work-box .color4 { background-color: #3ed3a9; } main #aboutus-data .aboutus-data-work-box .color5 { background-color: #89d39d; } main #aboutus-data .aboutus-data-work-box .color6 { background-color: #48b884; } main #aboutus-data .aboutus-data-work-box .color7 { background-color: #b5bf00; } main #aboutus-data .aboutus-data-work-box .color8 { background-color: #ffe600; } main #aboutus-data .aboutus-data-work-box .color9 { background-color: #00a5a0; } /* aboutus------#aboutus-data .btn-----------------------*/ main #aboutus-data ul.aboutus-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main #aboutus-data ul.aboutus-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width: 280px;height: 60px;background: #00a5a0; margin: auto;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main #aboutus-data ul.aboutus-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main #aboutus-data ul.aboutus-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main #aboutus-data ul.aboutus-btn .btn:hover::after {transform: scale(1, 1);} main #aboutus-data ul.aboutus-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main #aboutus-data ul.aboutus-btn .btn:hover .icon {transform: translateX(5px);} /* recruit------#recruit-info-----------------------*/ main#recruit{} main #recruit-info {} main #recruit-info .recruit-info-container{background: #fffcee;width: 100%;} main #recruit-info .recruit-info-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-info .recruit-info-title { display: flex; justify-content: flex-start;} main #recruit-info .recruit-info-title h2 { font-size: 48px; display: block;} main #recruit-info .recruit-info-title span{ font-size: 24px; display: block;padding-top: 1em; padding-left: 1em;} /* recruit------#recruit .btn-----------------------*/ main#recruit ul.recruit-btn {list-style: none; display: flex; justify-content: center; padding-bottom: 5em;} main#recruit ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main#recruit ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:fit-content; padding: 2em 5em; height: 60px;background: #00a5a0; margin: 2.5em;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 24px; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main#recruit ul.recruit-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main#recruit ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main#recruit ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main#recruit ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main#recruit ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} main#recruit ul.recruit-btn li.btn-box.current .btn {background: #333;color: #fff;pointer-events: none;border: none;} /* recruit------#recruit-info-youkou-----------------------*/ main #recruit-info .recruit-info-youkou {width: 100%;margin: 0 auto; padding-top: 5em; padding-bottom: 10em;} main #recruit-info .recruit-info-youkou dl {font-size: 24px;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } main #recruit-info .recruit-info-youkou dt {font-weight: bold;border-top: 3px solid #333;padding: 1.5em 0 0;margin: 0;} main #recruit-info .recruit-info-youkou dd {margin: 0;line-height: 1.6;border-top: 1px solid #333;padding: 1.5em 0 0;} main #recruit-info .recruit-info-youkou dt:last-of-type {border-bottom: 3px solid #333; padding-bottom: 1.5em;} main #recruit-info .recruit-info-youkou dd:last-of-type {border-bottom: 1px solid #333; padding-bottom: 1.5em;} /* recruit------#recruit-women-----------------------*/ main #recruit-women {} main #recruit-women .recruit-women-container{background: #ffe600;width: 100%; padding-top: 5em;} main #recruit-women .recruit-women-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-women .recruit-women-title h2 { font-size: 48px; display: block;} main #recruit-women .recruit-women-contents p { font-size: 24px; display: block; line-height: 180%; padding-top: 2.5em; padding-bottom: 2.5em;} /* recruit------#recruit-women .btn-----------------------*/ main #recruit-women ul.recruit-btn {list-style: none; display: flex; justify-content: center; flex-flow: column;} main #recruit-women ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main #recruit-women ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:fit-content; padding: 2em 3em; height: 60px;background: #00a5a0;margin: 1em 0em; display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none;font-size: 24px; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main #recruit-women ul.recruit-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main #recruit-women ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main #recruit-women ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main #recruit-women ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main #recruit-women ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} /* recruit------#recruit-work-----------------------*/ main #recruit-work {} main #recruit-work .recruit-work-container{width: 100%;} main #recruit-work .recruit-work-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-work .recruit-work-title h2 { font-size: 48px; display: block;} main #recruit-work ul.recruit-work-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:flex-start; flex-wrap: wrap;gap: 2rem;} main #recruit-work-job .recruit-work-box li {width: 31%; background: #ffe600; padding: 4em; box-sizing: border-box; border-radius: 60px;} main #recruit-work-job .recruit-work-box h2 {font-size: 48px; display: block; padding-bottom: 1em; width: fit-content; margin: auto;} main #recruit-work-job .recruit-work-box p {font-size: 24px; display: block; line-height: 180%;} main #recruit-work-faq {padding-top: 5em;} main #recruit-work-faq dl.faq-list{ padding-top: 5em; padding-bottom: 5em;} main #recruit-work-faq dl.faq-list dt {font-size: 38px; display: block; padding-top: 1.3em; border-top: 1px solid #ccc;} main #recruit-work-faq dl.faq-list dd {font-size: 24px; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } main #recruit-work-faq dl.faq-list dd:last-of-type {border-bottom: 1px solid #ccc;} main #recruit-work-system {padding-top: 5em;} main #recruit-work-system dl.system-list{ padding-top: 5em; padding-bottom: 5em;} main #recruit-work-system dl.system-list dt {font-size: 38px; display: block; padding-top: 1.3em; border-top: 1px solid #333;} main #recruit-work-system dl.system-list dd {font-size: 24px; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } main #recruit-work-system dl.system-list dd:last-of-type {border-bottom: 1px solid #333;} /* recruit------#recruit-benefits-----------------------*/ main #recruit-benefits {} main #recruit-benefits .recruit-benefits-container{width: 100%;} main #recruit-benefits .recruit-benefits-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-benefits .recruit-benefits-title h2 { font-size: 48px; display: block;} main #recruit-benefits .recruit-benefits-contents p {font-size: 24px; display: block; line-height: 180%; padding-top: 2.5em;} main #recruit-benefits ul.recruit-benefits-box {list-style: none; margin: 2.5em auto; padding: 0;gap: 2rem;} main #recruit-benefits ul.recruit-benefits-box li {font-size: 24px; display: block; line-height: 180%;} main #recruit-benefits-system {padding-bottom: 5em;} main #recruit-benefits-support {} main #recruit-benefits ul.recruit-in-house-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-in-house-box li{width: 31%; padding-top: 5em;} main #recruit-benefits ul.recruit-in-house-box li img{width: 100%; height: auto; margin: 0 auto;} main #recruit-benefits ul.recruit-in-house-box li p{font-size: 24px; display: block; line-height: 180%; padding-top: 1em;} main #recruit-benefits ul.recruit-softball-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-softball-box li{width: 48%; padding-top: 5em;} main #recruit-benefits ul.recruit-softball-box li.all{width: 100%;} main #recruit-benefits ul.recruit-softball-box li img{width: 100%; height: auto; margin: 0 auto;} main #recruit-benefits ul.recruit-softball-box li p{font-size: 24px; display: block; line-height: 180%; padding-top: 1em;} /* privacypolicy------#privacypolicy-main-----------------------*/ main#privacypolicy{} main#privacypolicy .privacypolicy-main-container{width: 100%;} main#privacypolicy .privacypolicy-main-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 10em;} main#privacypolicy .privacypolicy-inner {width: 100%; padding-top: 5em; padding-bottom: 5em; border-bottom: 1px solid #ccc;} main#privacypolicy .privacypolicy-inner h2 { font-size: 48px; display: block;} main#privacypolicy .privacypolicy-inner p {font-size: 24px; display: block; line-height: 180%; padding-top: 1.5em;} main#privacypolicy .privacypolicy-inner ol{list-style-position: inside; list-style: decimal;padding-left: 2em; padding-top: 2.5em;} main#privacypolicy .privacypolicy-inner ol li{font-size: 24px; display: list-item; line-height: 180%;padding-left: 0.5em; padding-top: 1em;} /* iPad　横向き */ @media (min-width: 1024px) and (max-width: 1366px) { /* index -----------------------*/ main #top-kv .top-kv-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between; padding-top: 20em; padding-bottom: 17em;} main #top-kv .top-kv-title {position:absolute; top:10em; right:50px; width:40%; display: flex; flex-flow: column; align-items: flex-end; } main #top-kv .top-kv-title h2 {font-size: 3.2vw; display: block; letter-spacing:0.2em; width:fit-content;} main #top-kv .top-kv-title p {font-size: 1.6vw; display: block; letter-spacing:0.1em; margin-top: 15px; width:fit-content;} div.header-menu{ position: relative; width: 55%;} main #top-about .top-about-container{padding-top: 8em; padding-bottom: 8em;} main #top-topics .top-topics-container{padding-top: 5em; padding-bottom: 8em;} main #top-topics .top-topics-contents ul.topics-list {max-height: 350px;} main #top-topics .top-topics-contents .topic-item .label {font-weight: bold;margin-right: 0.5em; border: solid 1px #333; display: flex; justify-content: center; align-items: center; width: 10%; text-align: center; padding: 0.5%;} main #top-topics .top-topics-contents .topic-item .time {margin-right: 0.5em; min-width: 130px; display: flex; justify-content: center; align-items: center; width: 15%; padding: 0.5%; text-align: center; } main #top-topics .top-topics-contents .topic-item p{ display: block; width: 70%; padding: 0.5%;} main #top-topics .top-topics-contents .topic-item p{font-size: 1.4vw !important;} main #top-services .top-services-container{padding-top: 5em; padding-bottom: 8em;} main #top-services ul.service-list li {width: 50%; height: 550px;position: relative;overflow: hidden;} main #top-services ul.service-list li p{width: 80%!important; font-size: 1.4vw !important; line-height: 180%; position: relative; margin:40px auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; z-index: 1;} /* lowerlayer -----------------------*/ /* lowerlayer------#lowerlayer-top-----------------------*/ main #lowerlayer-top .lowerlayer-main-container {position: relative;width: 100%;height: 600px;background: #ffe600;overflow: hidden;} main #lowerlayer-top .lowerlayer-main-bk {position: absolute;top: 0;left: 15%;width: 70%;height: 600px;background: #fff;transform: skew(-20deg);z-index: 1;} main #lowerlayer-top .lowerlayer-main-contents {position: relative;z-index: 2; width: 90%; margin: 0 auto; height: 100%; display: flex; padding: 2em;box-sizing: border-box;top: 0px;left: 0px;} .lowerlayer-main-contents .content-inner {} .lowerlayer-main-contents .content-inner h2{font-size:3.2vw; width: 100%; min-width: 550px; background: #ffe600; transform: skew(-20deg); padding: 1em 2em; margin-top: 100px; position: relative;top: 0px;left:-100px;} .lowerlayer-main-contents .content-inner h2 span{display: inline-block; transform: skew(20deg);} .lowerlayer-main-contents .content-inner p{font-size:1.6vw; padding: 2em 3.5em; position: relative;top: 0px;left:-100px;} .content-img-wrapper {width: 100%; height: 600px;overflow: hidden;position: absolute;top: 0px;right: 0; z-index: 1;} .content-img{width: 450px;height: 500px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .content-img img{width: 150%;height: 150%;object-fit: cover;transform: skew(20deg); position: relative; top: -20%; left: -20%;} .content-img img.equipment{width: 150%;height: 140%; position: relative; top: -20%; left: -50%;} .content-img img.recruit{width: 150%;height: 120%; position: relative; top: 0%; left: -20%;} .content-img img.benefits{width: 150%;height: 120%; position: relative; top: -10%; left: -40%;} .content-img-product{width: 600px;height: 500px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .lowerlayer-main-contents .content-inner br.pc_lp{display: block;} /* business------#business-quality-----------------------*/ main #business-quality .business-dot-container {width: 100%;margin: 0 auto;display: flex;gap: 1em; /* 丸同士の間隔 */align-items: center;justify-content: space-around;padding-top: 5em; padding-bottom: 5em;} /* business------#business-process-----------------------*/ main #business-process .business-process-comment p{ font-size: 1.6vw;letter-spacing:0.2em; line-height: 180%;} main #business-process .business-flow-contents h2 { color: #00a5a0; font-size: 3.2vw; display: block; padding-bottom: 1em;} main #business-process .business-flow-contents p { font-size: 1.6vw; display: block; line-height: 180%;} /* product------#product-parts-----------------------*/ main #product-parts .product-parts-contents{width: 90%;margin: 0 auto; padding-top: 5em;} main #product-layout .product-layout-comment p{ font-size: 1.6vw;padding-top: 1.5em; padding-top: 5em;} main #product-layout ul.product-layout-list{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em; display: flex; justify-content: space-between; flex-wrap: wrap;} /* corporate------#corporate-main-----------------------*/ main#corporate .corporate-inner p { font-size: 1.6vw; display: block; text-align: left; line-height: 180%; letter-spacing: 0.2em; padding-top: 2.5em; } main#corporate p.president-name{ font-family: "Yuji Syuku", serif; font-size: 24px; text-align: right; margin-top: 1.5em; margin-right: 50px;} main #company-overview .company-profile .factory-row {display: flex;justify-content: space-between;gap: 1em;line-height: 1.6;margin: 0; width: 40%; margin-right: auto;} main #company-overview .company-profile .factory-row .label {min-width: 5em;} /* aboutus------#aboutus-main-----------------------*/ main #aboutus-data span.note {font-size: 1.6vw; display: block; line-height: 180%; text-align: center; margin-top: auto;} main #aboutus-data .aboutus-data-style-box span.note {margin-top: 2em;} main #aboutus-data .aboutus-data-title h2 { font-size:3.2vw; display: block;} main #aboutus-data .aboutus-data-contents p {font-size: 1.6vw; letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-data .aboutus-data-work-box h3 {font-size:2.4vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-style-box h3 {font-size:2.4vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} /*.chart-container */ main #aboutus-data .aboutus-data-work-box .chart-container {display: flex;align-items: center;gap: 2.5em; padding-top: 2.5em; padding-bottom: 2.5em; flex-flow: column; justify-content: center;} main #aboutus-data .aboutus-data-work-box .circle {display: inline-block;transform: rotate(-90deg);width: 400px; height: 400px;} main #aboutus-data .aboutus-data-work-box .circle .type {fill: transparent;stroke-width: 100;} main #aboutus-data .aboutus-data-work-box .legend {font-size: 1.6vw;line-height: 120%;} main #aboutus-data .aboutus-data-work-box .legend-item {display: flex;align-items: center;margin-bottom: 0.5em;} main #aboutus-data .aboutus-data-work-box .legend-color {width: 1.6vw;height: 1.6vw;margin-right: 1em;} /* recruit------#recruit-info-----------------------*/ /* recruit------#recruit .btn-----------------------*/ main#recruit ul.recruit-btn {list-style: none; display: flex; justify-content: center; padding-bottom: 5em;} main#recruit ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main#recruit ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:fit-content; padding: 2em 3em; height: 60px;background: #00a5a0;margin: 1em;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 24px; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main#recruit ul.recruit-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main#recruit ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main#recruit ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main#recruit ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main#recruit ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} main#recruit ul.recruit-btn li.btn-box.current .btn {background: #333;color: #fff;pointer-events: none;border: none;} /* recruit------#recruit-info-youkou-----------------------*/ main #recruit-info .recruit-info-youkou .sp_lp{display: none;} /* recruit------#recruit-women-----------------------*/ main #recruit-women .sp_lp{display: none;} /* recruit------#recruit-work-----------------------*/ main #recruit-work ul.recruit-work-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:flex-start; flex-wrap: wrap;gap: 1.5rem;} main #recruit-work-job .recruit-work-box li {width: 32%; background: #ffe600; padding: 3em; box-sizing: border-box; border-radius: 60px;} main #recruit-work-job .recruit-work-box h2 {font-size: 36px; display: block; padding-bottom: 1em; width: fit-content; margin: auto;} /* recruit------#recruit-benefits-----------------------*/ main #recruit-benefits ul.recruit-in-house-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;align-items: flex-start;} main #recruit-benefits ul.recruit-in-house-box li p{font-size: 1.6vw; display: block; line-height: 180%; padding-top: 1em;} main #recruit-benefits ul.recruit-softball-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;align-items: flex-start;} main #recruit-benefits ul.recruit-softball-box li p{font-size: 1.6vw; display: block; line-height: 180%; padding-top: 1em;} /* end @media (min-width: 1024px) and (max-width: 1366px)*/ } /* iPad　縦向き */ @media (min-width: 660px) and (max-width: 1024px) { /* index -----------------------*/ /* index------#top-kv-----------------------*/ main #top-kv{width: 100%; position: relative; background-image: url(../images/top/main-kv-img.png); background-repeat: no-repeat;background-size: cover; background-position: center; background-color: #ffe600;} main #top-kv .top-kv-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between; padding-top: 15em; padding-bottom: 15em;} main #top-kv .top-kv-title {position:absolute; top:10em; right:5%; width:90%; display: flex; flex-flow: column; align-items: flex-end; } main #top-kv .top-kv-title h2 {font-size: 3.6vw; display: block; letter-spacing:0.2em; width:fit-content;} main #top-kv .top-kv-title p {font-size: 1.8vw; display: block; letter-spacing:0.1em; margin-top: 15px; width:fit-content;} /* index------#top-about-----------------------*/ main #top-about {background: #00a5a0;width: 100%;} main #top-about .top-about-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em; display: flex; flex-wrap: wrap;} main #top-about .top-about-logo{width: 40%; margin: 0 auto; margin-top: 2.5em;} main #top-about .top-about-logo img{width: 100%; height: auto; margin: 0 auto;} main #top-about .top-about-contents {width: 60%; margin: 0 auto; display: flex; flex-flow: column; align-items: flex-start;} main #top-about .top-about-contents p{ font-size: 2.4vw; margin-left:3.5em; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%; color: #fff;} main #top-about .top-about-btn {margin-top: 2em; margin-left:3em;} /* index------#top-topics-----------------------*/ main #top-topics .top-topics-container{width: 90%;margin: 0 auto; padding-top: 2em; padding-bottom: 5em;} main #top-topics .top-topics-contents{width: 100%;margin: 0 auto; padding-top: 2em; } main #top-topics .top-topics-contents ul.topics-list {list-style: none;padding-right: 1em;max-height: 250px;overflow-y: auto;} main #top-topics .top-topics-contents .topic-item {padding: 1em;border-bottom: 1px solid #ddd;display: flex; justify-content: flex-start;} main #top-topics .top-topics-contents .topic-item span{display: block;} main #top-topics .top-topics-contents .topic-item .label {font-weight: bold;margin-right: 0.5em; border: solid 1px #333; display: flex; justify-content: center; align-items: center;width: 15%; text-align: center; padding: 0.3%;} main #top-topics .top-topics-contents ul.topics-list {max-height: 350px;} main #top-topics .top-topics-contents .topic-item p{font-size: 1.8vw !important; display: block; width: 70%; padding: 0.3%;} /* index------#top-services-----------------------*/ main #top-services .top-services-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #top-services .top-services-contents{width: 100%;margin: 0 auto; padding-top: 2em;} main #top-services .top-services-contents p{ font-size: 2.4vw; margin: auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%;} main #top-services ul.service-list {display: flex;justify-content: space-between; flex-wrap: wrap;list-style: none; padding: 0;} main #top-services ul.service-list li {width: 50%; height: 450px;position: relative;overflow: hidden;} main #top-services ul.service-list li h3{ position: relative;text-align: center; font-size: 6.2vw; z-index: 1; padding-top: 1.5em;} main #top-services ul.service-list li p{width: 100%!important; font-size: 1.8vw !important; line-height: 180%; position: relative; margin:40px auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; z-index: 1; padding-left: 10%; padding-right: 10%;} main #top-services ul.service-list li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} /* lowerlayer -----------------------*/ /* lowerlayer------#lowerlayer-top-----------------------*/ main #lowerlayer-top {background: #fff;width: 100%;} main #lowerlayer-top .lowerlayer-top-container{width: 90%;margin: 0 auto; padding-top: 3em; padding-bottom: 5em; position: relative;} .breadcrumb{position: absolute; bottom:15%; left: 0px;} main #lowerlayer-top .lowerlayer-main-container {position: relative;width: 100%;height: 500px;background: #ffe600;overflow: hidden;} main #lowerlayer-top .lowerlayer-main-bk {position: absolute;top: 0;left: 15%;width: 70%;height: 500px;background: #fff;transform: skew(-20deg);z-index: 1;} main #lowerlayer-top .lowerlayer-main-contents {position: relative;z-index: 2; width: 90%; margin: 0 auto; height: 100%; display: flex; padding: 2em;box-sizing: border-box;top: 0px;left: 0px;} .lowerlayer-main-contents .content-inner {} .lowerlayer-main-contents .content-inner h2{font-size: 3.2vw; width: 100%; min-width: 450px; background: #ffe600; transform: skew(-20deg); padding: 1em 2em; margin-top:50px; position: relative;top: 0px;left:-50px;} .lowerlayer-main-contents .content-inner h2 span{display: inline-block; transform: skew(20deg);} .lowerlayer-main-contents .content-inner p{font-size:1.8vw; padding: 2em 3.5em; position: relative;top: 0px;left: -50px;} .content-img-wrapper {width: 100%; height: 600px;overflow: hidden;position: absolute;top: 0px;right: 0; z-index: 1;} .content-img{width: 400px;height: 400px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -100px; z-index: 1; } .content-img img{width: 150%;height: 150%;object-fit: cover;transform: skew(20deg); position: relative; top: -20%; left: -20%;} .content-img img.equipment{width: 150%;height: 120%; position: relative; top: -10%; left: -60%;} .content-img img.benefits{width: 150%;height: 120%; position: relative; top: -10%; left: -50%;} .content-img-product{width: 550px;height: 400px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -100px; z-index: 1; } .content-img-product img.product{width: 120%;height: 120%; object-fit: cover;transform: skew(20deg); position: relative; top: -10%; left: 0%;} .lowerlayer-main-contents .content-inner br.pc_lp{display: block;} /* business------#business-quality-----------------------*/ main #business-quality .business-dot-container {width: 100%;margin: 0 auto;display: flex;gap: 1em; /* 丸同士の間隔 */align-items: center;justify-content: space-around;padding-top: 5em; padding-bottom: 5em;} main #business-quality .business-dot-container h2{font-size:3.2vw;} main #business-quality .business-dot-container p{font-size:1.8vw; padding-top: 1.5em;} main #business-quality .business-dot-container ol{padding-top: 1.5em;} main #business-quality .business-dot-container ol li{font-size:1.8vw;} main #business-quality .business-dot {width: 340px;height: 340px;border-radius: 50%;display: inline-block;display: flex;flex-flow: column; justify-content: center;align-items: center;} /* business------#business-process-----------------------*/ main #business-process .business-process-container{background: #ffe600;width: 100%;} main #business-process .business-process-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 10em;} main #business-process .business-process-title p { font-size: 90px; display: block; line-height: 110%;} main #business-process .business-process-comment {width: 100%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #business-process .business-process-comment p{ font-size: 1.8vw;letter-spacing:0.2em; line-height: 180%;} main #business-process .business-flow-container {background: #fff; width: 100%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between;} main #business-process .business-flow-contents {width: 40%;margin: 0px auto; padding-top: 5em; padding-bottom: 5em;} main #business-process .business-flow-contents h2 { color: #00a5a0; font-size: 3.2vw; display: block; padding-bottom: 1em;} main #business-process .business-flow-contents p { font-size: 1.8vw; display: block; line-height: 180%;} main #business-process .business-flow-img {width: 40%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #business-process .business-flow-img img {width: 100%; margin: 0 auto; width: 100%; height: 250px; object-fit: cover; object-position: left -30px;} main #business-process .business-flow-arrow {text-align: center;margin: 0.5em 0;font-size: 4rem;} /* product------#product-parts-----------------------*/ main #product-layout .product-layout-container {background-color: #353535;background-image:linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);background-size: 100px 100px;width: 100%;} main #product-layout .product-layout-comment p{ font-size: 1.8vw;letter-spacing:0.2em; line-height: 180%; padding-top: 5em;} /* equipment------#equipment-layout-----------------------*/ main#equipment{} main #equipment-layout {} main #equipment-layout ul.equipment-layout-list{width: 90%;margin: 0 auto;padding-bottom: 5em; display: flex; justify-content: space-between; flex-wrap: wrap; list-style: none;} main #equipment-layout ul.equipment-layout-list li{width: 48%;margin: 0 auto; padding-top: 2.5em;} main #equipment-layout ul.equipment-layout-list li img{width: 100%; height: auto; margin: 0 auto;} main #equipment-layout ul.equipment-layout-list li p{ font-size: 1.8vw; display: block; line-height: 180%;} /* equipment------#equipment-list-----------------------*/ main #equipment-layout .equipment-list{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} /* corporate------#corporate-main-----------------------*/ main#corporate{} main#corporate .corporate-main-container{background: #fff;width: 100%;} main#corporate .corporate-main-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main#corporate .corporate-inner {display: flex; flex-flow: column; align-items: center;} main#corporate .corporate-inner h2 { font-family: "Yuji Syuku", serif; font-size: 16vw; display: block; letter-spacing: 0.1em; } main#corporate .corporate-inner p { font-size: 1.8vw; display: block; text-align: left; line-height: 180%; letter-spacing: 0.2em; padding-top: 2.5em; } main#corporate p.president-name{ font-family: "Yuji Syuku", serif; font-size: 1.8vw; text-align: right; margin-top: 1.5em; margin-right: 3%;} main#corporate p.president-name span{ padding-right: 15px; font-size: 1.4vw;} /* corporate------#company-overview-----------------------*/ main #company-overview {} main #company-overview .company-overview-container{background: #fffcee;width: 100%;} main #company-overview .company-overview-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #company-overview .company-overview-title p { font-size: 90px; display: block; line-height: 110%;} main #company-overview .company-overview-title h2 { font-size: 48px; display: block;} main #company-overview .company-profile {width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 10em;} main #company-overview .company-profile dl {font-size: 1.8vw;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%;} main #company-overview .company-profile .factory-row {display: flex;justify-content: space-between;gap: 1em;line-height: 1.6;margin: 0; width: 40%; margin-right: auto;} main #company-overview .company-profile .factory-row .label {min-width: 5em;} /* corporate------#company-history-----------------------*/ main #company-history {} main #company-history .company-history-container{background: #ffe600;width: 100%;} main #company-history .company-history-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #company-history .company-history-title p { font-size: 90px; display: block; line-height: 110%;} main #company-history .company-history-title h2 { font-size: 48px; display: block;} main #company-history .company-history {width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 10em;} main #company-history .company-history dl {font-size: 1.8vw;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } /* corporate------#production-sites-----------------------*/ main #production-sites {} main #production-sites .production-sites-container{background: #fff;width: 100%;} main #production-sites .production-sites-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #production-sites .production-sites-title p { font-size: 90px; display: block; line-height: 110%;} main #production-sites .production-sites-title h2 { font-size: 48px; display: block;} main #production-sites .production-factory-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between; } .border-top-ccc{border-top: 1px solid #ccc;padding: 1.5em 0 0;} main #production-sites .production-factory-contents {width: 50%;margin: 0px auto; padding-top: 5em; padding-bottom: 5em;} main #production-sites .production-factory-contents h2 {width: fit-content; color: #333; font-size: 3.2vw; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #production-sites .production-factory-contents p { font-size: 1.8vw; display: block; line-height: 180%;} main #production-sites .production-factory-img {width: 50%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #production-sites .production-factory-img img {width: 100%; margin: 0 auto; height: auto; object-fit: contain; object-position: center top;} /* corporate------#kenkou-management-----------------------*/ main #kenkou-management {} main #kenkou-management .kenkou-management-container{background: #fff;width: 100%;} main #kenkou-management .kenkou-management-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #kenkou-management .kenkou-management-title h2 { font-size: 48px; display: block;} main #kenkou-management .kenkou-policy-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: space-between; } main #kenkou-management .kenkou-policy-contents {width: 40%;margin: 0 auto 0 0; padding-top: 0em; padding-bottom: 5em;} main #kenkou-management .kenkou-policy-contents h2 {width: fit-content; color: #333; font-size: 48px; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #kenkou-management .kenkou-policy-contents p { font-size: 1.8vw; display: block; line-height: 180%;} main #kenkou-management .kenkou-policy-img {width: 40%;margin: 0 auto; padding-top: 0em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-policy-img img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-logo {width: 80%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-logo img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-figure-container{background: #fff;width: 100%;} main #kenkou-management .kenkou-figure-title h2 { font-size: 48px; display: block; text-align: center;} main #kenkou-management .kenkou-figure {width: 80%;margin: 0 auto; padding-top: 3.5em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-figure img {width: 100%; height: auto; margin: 0 auto;} /* aboutus------#aboutus-main-----------------------*/ main#aboutus{} main #aboutus-main .aboutus-main-container{width: 100%;} main #aboutus-main .aboutus-main-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #aboutus-main .aboutus-inner {display: flex; flex-flow: column; align-items: center;} main #aboutus-main .aboutus-main-contents p {color: #fff; font-size: 1.8vw;letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-main h2{display: block; width: 45%;} main #aboutus-main h2 img{width: 100%; height: auto; margin: 0 auto;} main #aboutus-data span.note {font-size: 1.8vw; display: block; line-height: 180%; text-align: center; margin-top: auto;} main #aboutus-data .aboutus-data-style-box span.note {margin-top: 2em;} main #aboutus-data .aboutus-data-container{width: 100%; padding-top: 5em;} main #aboutus-data .aboutus-data-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-title h2 { font-size: 48px; display: block;} main #aboutus-data .aboutus-data-contents p {font-size: 1.8vw;letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-data ul.aboutus-data-work-box {list-style: none; margin: 2.5em auto; padding: 0; display: flex; justify-content:space-between; flex-wrap: wrap;gap: 1rem;} main #aboutus-data .aboutus-data-work-box li {width: 48%; background: #fff; padding: 2em; box-sizing: border-box; border-radius: 60px; display: flex; justify-content:flex-start; flex-direction: column; align-items: center; margin-top: 1em;} main #aboutus-data .aboutus-data-work-box h3 {font-size: 4.2vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-work-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-work-box p .number {font-size: 120px;line-height: 1;} main #aboutus-data .aboutus-data-work-box p .symbol {font-size: 50px;line-height: 1.6;margin-left: 7px;} /* main #aboutus-data .aboutus-data-work-box dl.qualification {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {width: 50%; font-size: 1.8vw; line-height: 180%;padding: 0.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {width: 20%; font-size: 1.8vw; line-height: 180%;padding: 0.5em;} */ main #aboutus-data .aboutus-data-work-box dl.qualification {display: grid;grid-template-columns: 1fr auto;row-gap: 1em;column-gap: 2.5em; align-items: end; margin: 0;padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {font-size: 1.8vw;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {} main #aboutus-data .aboutus-data-work-box dl.qualification dt, main #aboutus-data .aboutus-data-work-box dl.qualification dd {margin: 0;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {display: flex;justify-content: flex-end;align-items: flex-end;font-size: 0; } main #aboutus-data .aboutus-data-work-box dl.qualification dd {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: flex-end; line-height: 1; padding-top: 0em; text-align: right;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .number {font-size: 40px;line-height: 1;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .symbol {font-size: 1.8vw;line-height: 1.2;margin-left: 7px;} main #aboutus-data ul.aboutus-data-style-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:space-between; flex-wrap: wrap;gap: 1rem;} main #aboutus-data .aboutus-data-style-box li {width: 48%; background: #fff; padding: 2em; box-sizing: border-box; border-radius: 60px; display: flex;flex-direction: column;justify-content: flex-start; align-items: center; margin-top: 1em;} main #aboutus-data .aboutus-data-style-box h3 {font-size: 4.2vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-style-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-style-box p .number {font-size: 120px;line-height: 1;} main #aboutus-data .aboutus-data-style-box p .symbol {font-size: 50px;line-height: 1.6; margin-left: 7px;} /*.age-graph */ main #aboutus-data .aboutus-data-work-box .age-graph {max-width: 600px;width: 100%; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-row {display: flex;align-items: center; margin-bottom: 1em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-label {width: 35%; text-align: right; margin-right: 1em; font-size: 1.8vw; white-space: nowrap; flex-shrink: 0;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-container {flex: 1;background-color: #fff; height: 32px;position: relative;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .age-graph .bar {height: 100%;background-color: #00a5a0;width: 0;animation: bar-animation 2s ease-out forwards;} main #aboutus-data .aboutus-data-work-box .age-graph .bar1 { animation-delay: 0s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar2 { animation-delay: 0.1s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar3 { animation-delay: 0.2s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar4 { animation-delay: 0.3s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar5 { animation-delay: 0.4s; } main #aboutus-data .aboutus-data-work-box .age-graph .bar6 { animation-delay: 0.5s; } @keyframes bar-animation {0% { width: 0; }100% { width: var(--target-width); }} /*.recruitment-graph-vertical */ main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical {max-width: 100%;margin: 0px auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-group {display: flex;justify-content: center;align-items: flex-end;gap: 2em; /* 棒グラフ同士の間隔を縮める */height: 320px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-item {display: flex;flex-direction: column;align-items: center;width: 120px; /* 棒を太めに */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-container {width: 100%;height: 280px;background: #fff;display: flex;align-items: flex-end;justify-content: center;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar {width: 100%;height: 0;animation: grow 1.5s ease-out forwards;/* border-radius: 0; ←不要 */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar1 {--bar-height: 30%;animation-delay: 0s;background-color: #f0dc27; } main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar2 {--bar-height: 70%;animation-delay: 0.1s;background-color: #00a5a0;} @keyframes grow {0% { height: 0; }100% { height: var(--bar-height); }} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .number {font-size: 80px;line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .symbol {font-size: 40px;line-height: 1;margin-left: 5px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .label {margin-top: 1em; font-size: 1.8vw; text-align: center;} /*.chart-container */ main #aboutus-data .aboutus-data-work-box .chart-container {display: flex;align-items: center;gap: 3em; padding-top: 2.5em; padding-bottom: 2.5em; flex-flow: column; justify-content: center;} main #aboutus-data .aboutus-data-work-box .circle {display: inline-block;transform: rotate(-90deg);width: 100%; height: auto;} main #aboutus-data .aboutus-data-work-box .circle .type {fill: transparent;stroke-width: 100;} main #aboutus-data .aboutus-data-work-box .legend {font-size: 1.8vw;line-height: 120%;} main #aboutus-data .aboutus-data-work-box .legend-item {display: flex;align-items: center;margin-bottom: 0.5em;} main #aboutus-data .aboutus-data-work-box .legend-color {width: 1.8vw;height: 1.8vw;margin-right: 1em;} /* recruit------#recruit-info-----------------------*/ /* recruit------#recruit .btn-----------------------*/ main#recruit ul.recruit-btn {list-style: none; display: flex; justify-content: center; padding-bottom: 5em;} main#recruit ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main#recruit ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:fit-content; padding: 1em 2.5em; height: 60px;background: #00a5a0; margin: 1em;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 1.8vw; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main#recruit ul.recruit-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main#recruit ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main#recruit ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main#recruit ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main#recruit ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} main#recruit ul.recruit-btn li.btn-box.current .btn {background: #333;color: #fff;pointer-events: none;border: none;} /* recruit------#recruit-info-youkou-----------------------*/ main #recruit-info .recruit-info-youkou {width: 100%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-info .recruit-info-youkou dl {font-size: 1.8vw;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } main #recruit-info .recruit-info-youkou dt {font-weight: bold;border-top: 3px solid #333;padding: 1.5em 0 0;margin: 0;} main #recruit-info .recruit-info-youkou dd {margin: 0;line-height: 1.6;border-top: 1px solid #333;padding: 1.5em 0 0;} main #recruit-info .recruit-info-youkou dt:last-of-type {border-bottom: 3px solid #333; padding-bottom: 1.5em;} main #recruit-info .recruit-info-youkou dd:last-of-type {border-bottom: 1px solid #333; padding-bottom: 1.5em;} /* recruit------#recruit-women-----------------------*/ main #recruit-women {} main #recruit-women .recruit-women-container{background: #ffe600;width: 100%; padding-top: 5em;} main #recruit-women .recruit-women-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 0em;} main #recruit-women .recruit-women-title h2 { font-size: 48px; display: block;} main #recruit-women .recruit-women-contents p { font-size: 1.8vw; display: block; line-height: 180%; padding-top: 2.5em; padding-bottom: 2.5em;} /* recruit------#recruit-work-----------------------*/ main #recruit-work ul.recruit-work-box {list-style: none; margin: 5em auto; padding: 0; display: flex; justify-content:flex-start; flex-wrap: wrap;gap: 1rem;} main #recruit-work-job .recruit-work-box li {width: 32%; background: #ffe600; padding: 2.5em; box-sizing: border-box; border-radius: 60px;} main #recruit-work-job .recruit-work-box h2 {font-size: 2.4vw; display: block; padding-bottom: 1em; width: fit-content; margin: auto;} main #recruit-work-job .recruit-work-box p {font-size: 1.8vw; display: block; line-height: 180%;} main #recruit-work-faq {padding-top: 2.5em;} main #recruit-work-faq dl.faq-list{ padding-top: 5em; padding-bottom: 2.5em;} main #recruit-work-faq dl.faq-list dt {font-size: 2.4vw; display: block; padding-top: 1.3em; border-top: 1px solid #ccc;} main #recruit-work-faq dl.faq-list dd {font-size: 1.8vw; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } main #recruit-work-system {padding-top: 0em;} main #recruit-work-system dl.system-list{ padding-top: 5em; padding-bottom: 2.5em;} main #recruit-work-system dl.system-list dt {font-size: 2.4vw; display: block; padding-top: 1.3em; border-top: 1px solid #333;} main #recruit-work-system dl.system-list dd {font-size: 1.8vw; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } /* recruit------#recruit-benefits-----------------------*/ main #recruit-benefits .recruit-benefits-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 2.5em;} main #recruit-benefits .recruit-benefits-title h2 { font-size: 48px; display: block;} main #recruit-benefits .recruit-benefits-contents p {font-size: 1.8vw; display: block; line-height: 180%; padding-top: 2.5em;} main #recruit-benefits ul.recruit-benefits-box {list-style: none; margin: 2.5em auto; padding: 0;gap: 2rem;} main #recruit-benefits ul.recruit-benefits-box li {font-size: 1.8vw; display: block; line-height: 180%;} main #recruit-benefits-system {padding-bottom: 2.5em;} main #recruit-benefits-support {} main #recruit-benefits ul.recruit-in-house-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-in-house-box li{width: 31%; padding-top: 2.5em; align-items: flex-start;} main #recruit-benefits ul.recruit-in-house-box li img{width: 100%; height: auto; margin: 0 auto;} main #recruit-benefits ul.recruit-in-house-box li p{font-size: 1.6vw; display: block; line-height: 180%; padding-top: 1em;} main #recruit-benefits ul.recruit-softball-box {list-style: none;display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-top: 2.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-softball-box li{width: 48%; padding-top: 2.5em; align-items: flex-start;} main #recruit-benefits ul.recruit-softball-box li.all{width: 100%;} main #recruit-benefits ul.recruit-softball-box li img{width: 100%; height: auto; margin: 0 auto;} main #recruit-benefits ul.recruit-softball-box li p{font-size: 1.6vw; display: block; line-height: 180%; padding-top: 1em;} /* privacypolicy------#privacypolicy-main-----------------------*/ main#privacypolicy{} main#privacypolicy .privacypolicy-main-container{width: 100%;} main#privacypolicy .privacypolicy-main-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main#privacypolicy .privacypolicy-inner {width: 100%; padding-top: 5em; padding-bottom: 5em; border-bottom: 1px solid #ccc;} main#privacypolicy .privacypolicy-inner h2 { font-size: 48px; display: block;} main#privacypolicy .privacypolicy-inner p {font-size: 1.8vw; display: block; line-height: 180%; padding-top: 1.5em;} main#privacypolicy .privacypolicy-inner ol{list-style-position: inside; list-style: decimal;padding-left: 2em; padding-top: 2.5em;} main#privacypolicy .privacypolicy-inner ol li{font-size: 1.8vw; display: list-item; line-height: 180%;padding-left: 0.5em; padding-top: 1em;} /* end @media (min-width: 660px) and (max-width: 1024px) */ } /*width: 1024px-----------------------*/ /* iPad mini 横向き */ @media screen and (width: 1024px) { /* index -----------------------*/ main #top-kv .top-kv-title h2 {font-size: 3.6vw;} main #top-kv .top-kv-title p {font-size: 1.8vw;} main #top-about .top-about-btn {margin-top: 2em; margin-left:5em;} main #top-services ul.service-list li {width: 50%; height: 550px;position: relative;overflow: hidden;} /* lowerlayer -----------------------*/ /* lowerlayer------#lowerlayer-top-----------------------*/ .lowerlayer-main-contents .content-inner br.pc_lp{display: block;} /* business------#business-quality-----------------------*/ main #business-quality .business-dot {width: 380px;height: 380px;border-radius: 50%;display: inline-block;display: flex;flex-flow: column; justify-content: center;align-items: center;} .content-img-product{width: 600px;height: 400px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -100px; z-index: 1; } .content-img-product img.product{width: 120%;height: 120%; object-fit: cover;transform: skew(20deg); position: relative; top: -10%; left: 0%;} } /*max-width: 600px-----------------------*/ /* スマホ　縦向き */ @media screen and (max-width: 600px) { /* index -----------------------*/ /* index------#top-kv-----------------------*/ main #top-kv{width: 100%; position: relative; background-image: url(../images/top/main-kv-img.png); background-repeat: no-repeat; background-size: 300%; background-position: center; background-color: #ffe600;} main #top-kv .top-kv-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between; padding-top: 10em; padding-bottom: 17em;} main #top-kv .top-kv-title {position:absolute; top:12em; left:5%; width:90%; display: flex; flex-flow: column; align-items: flex-start; } main #top-kv .top-kv-title h2 {font-size: 6.2vw; display: block; letter-spacing:0.2em; width:fit-content;} main #top-kv .top-kv-title p {font-size: 2.8vw; display: block; letter-spacing:0.1em; margin-top: 15px; width:fit-content;} /* index------#top-about-----------------------*/ main #top-about {background: #00a5a0;width: 100%;} main #top-about .top-about-container{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em; display: flex; flex-wrap: nowrap; flex-flow: column; justify-content: center;} main #top-about .top-about-logo{width: 70%; margin: 0 auto; margin-top: 2.5em;} main #top-about .top-about-logo img{width: 100%; height: auto; margin: 0 auto;} main #top-about .top-about-contents {width: 100%; margin: 0 auto; display: flex; flex-flow: column; align-items: flex-start;} main #top-about .top-about-contents p{ font-size: 4.2vw; margin-left:0em; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%; color: #fff; margin-top: 1.5em;} main #top-about .top-about-btn {margin-top: 2.5em; margin-left:0em;} /* index------#top-about .btn-----------------------*/ #top-about .top-about-btn {width: 100%;} #top-about .top-about-btn .btn {width: 100%;} /* index------#top-topics-----------------------*/ main #top-topics .top-topics-container{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em; display: flex; flex-wrap: nowrap; flex-flow: column; justify-content: center;} main #top-topics .top-topics-title h2 { font-size: 20vw; display: block;} main #top-topics .top-topics-contents{width: 100%;margin: 0 auto; padding-top: 2em; } main #top-topics .top-topics-contents ul.topics-list {list-style: none;padding-right: 1em;max-height: 450px;overflow-y: auto;} main #top-topics .top-topics-contents .topic-item {padding: 1em;border-bottom: 1px solid #ddd;display: flex; justify-content: flex-start; flex-wrap: wrap; font-size:4.2vw;} main #top-topics .top-topics-contents .topic-item span{display: block;} main #top-topics .top-topics-contents .topic-item .label {font-weight: bold; margin-right: 1.5em; border: solid 1px #333; display: flex; justify-content: center; align-items: center; width: 30%; text-align: center; padding: 0.5%;} main #top-topics .top-topics-contents .topic-item .time {margin-right: 0.5em; min-width:inherit; display: flex; justify-content: flex-start; align-items: flex-start; width: 50%; padding: 0.5%; text-align: left; } main #top-topics .top-topics-contents .topic-item p{ display: block; width: 100%; padding: 0.5%; margin-top: 1em;} /* index------#top-services-----------------------*/ main #top-services .top-services-container{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em; display: flex; flex-wrap: nowrap; flex-flow: column; justify-content: center;} main #top-services .top-services-title h2 { font-size: 20vw; display: block;} main #top-services .top-services-contents{width: 100%;margin: 0 auto; padding-top: 2em;} main #top-services .top-services-contents p{ font-size: 4.2vw; margin: auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; line-height: 180%;} main #top-services ul.service-list {display: flex;flex-flow: column; justify-content: center; flex-wrap: nowrap;list-style: none; padding: 0;} main #top-services ul.service-list li {width: 100%; height: 450px;position: relative;overflow: hidden;} main #top-services ul.service-list li.business,main #top-services ul.service-list li.product{width: 100%; background-color: #000; color: #fff;} main #top-services ul.service-list li.equipment,main #top-services ul.service-list li.corporate{width: 100%;} main #top-services ul.service-list li h3{ position: relative;text-align: center; font-size: 10vw; z-index: 1; padding-top: 1.5em;} main #top-services ul.service-list li p{width: 100%!important; font-size: 4.2vw; position: relative; margin:30px auto; width: -moz-fit-content; width: fit-content; letter-spacing:0.2em; z-index: 1;padding-left: 10%; padding-right: 10%;} /* lowerlayer -----------------------*/ /* lowerlayer------#lowerlayer-top-----------------------*/ main #lowerlayer-top {background: #fff;width: 100%;} main #lowerlayer-top .lowerlayer-top-container{width: 90%;margin: 0 auto; padding-top: 3em; padding-bottom: 5em; position: relative;} .breadcrumb{position: absolute; bottom:15%; left: 0px;} .breadcrumb ol {display: flex;list-style: none;padding: 0;margin: 0;} .breadcrumb ol li {display: flex;align-items: center;font-size: 0.9rem;} .breadcrumb ol li + li::before {content: "/"; /* 区切りの記号 */margin: 0 0.5em;color: #999;} .breadcrumb ol li a {text-decoration: none;color: #0071ff;} .breadcrumb ol li a:hover {text-decoration: underline;} main #lowerlayer-top .lowerlayer-top-title{width: 100%; text-align: left;} main #lowerlayer-top .lowerlayer-top-title p { font-size:12vw; display: block; line-height: 110%;} main #lowerlayer-top .lowerlayer-top-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #lowerlayer-top .lowerlayer-main-container {position: relative;width: 100%;height: 700px;background: #ffe600;overflow: hidden;} main #lowerlayer-top .lowerlayer-main-bk {position: absolute;top: 0;left: 10%;width: 90%;height: 700px;background: #fff;transform: skew(-20deg);z-index: 1;} main #lowerlayer-top .lowerlayer-main-contents {position: relative;z-index: 2; width: 100%; margin: 0 auto; height: 100%; display: flex; padding: 1em;box-sizing: border-box;top: 0px;left: 0px;} .lowerlayer-main-contents .content-inner {} .lowerlayer-main-contents .content-inner h2{font-size: 6vw; width: 100%; min-width:inherit; background: #ffe600; transform: skew(-20deg); padding: 1em 1em; margin-top:50px; position: relative;top: 350px;left:0px;} .lowerlayer-main-contents .content-inner h2 span{display: inline-block; transform: skew(20deg);} .lowerlayer-main-contents .content-inner p{font-size: 4.2vw; padding: 1.5em; position: relative;top: 340px;left: -10px;} .content-img-wrapper {width: 100%; height: 600px;overflow: hidden;position: absolute;top: 0px;right: 0; z-index: 1;} .content-img{width: 500px;height: 420px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .content-img img{width: 150%;height: 150%;object-fit: cover;transform: skew(20deg); position: relative; top: -20%; left: -10%;} .content-img img.recruit{width: 150%;height: 120%; position: relative; top: 0%; left: 0%;} .content-img-product{width: 500px;height: 420px; overflow: hidden; transform: skew(-20deg); position: absolute; top: 50px; right: -40px; z-index: 1; } .content-img-product img.product{width: 120%;height: 120%; position: relative; top: -20%; left: 0%;} .lowerlayer-main-contents .content-inner br.pc_lp{display: none;} /* business------#business-quality-----------------------*/ main#business{} main #business-quality {} main #business-quality .business-quality-title p { font-size:12vw; display: block; line-height: 110%;} main #business-quality .business-quality-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #business-quality .business-dot-container {width: 100%;margin: 0 auto;display: flex;gap: 1em; /* 丸同士の間隔 */align-items: center;justify-content: center; flex-flow: column; padding-top: 2.5em; padding-bottom: 0em;} main #business-quality .business-dot-container h2{font-size:6vw;} main #business-quality .business-dot-container p{font-size:4.2vw; padding-top: 1.5em;} main #business-quality .business-dot-container ol{padding-top: 1.5em;} main #business-quality .business-dot-container ol li{font-size:4.2vw;} main #business-quality .business-dot {width: 340px;height: 340px;border-radius: 50%;display: inline-block;display: flex;flex-flow: column; justify-content: center;align-items: center;} /* business------#business-process-----------------------*/ main #business-process {} main #business-process .business-process-container{background: #ffe600;width: 100%;} main #business-process .business-process-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #business-process .business-process-title p { font-size:12vw; display: block; line-height: 110%;} main #business-process .business-process-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #business-process .business-process-comment {width: 100%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #business-process .business-process-comment p{ font-size: 4.2vw;letter-spacing:0.2em; line-height: 180%;} main #business-process .business-flow-container {background: #fff; width: 100%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: center; flex-flow: column;} main #business-process .business-flow-contents {width: 90%;margin: 0px auto; padding-top: 1.5em; padding-bottom: 1.5em;} main #business-process .business-flow-contents h2 { color: #00a5a0; font-size: 6vw; display: block; padding-bottom: 1em;} main #business-process .business-flow-contents p { font-size: 4.2vw; display: block; line-height: 180%;} main #business-process .business-flow-img {width: 90%;margin: 0 auto; padding-top: 1em; padding-bottom: 1em;} main #business-process .business-flow-img img {width: 100%; margin: 0 auto; width: 100%; height: 250px; object-fit: cover; object-position: left -30px;} main #business-process .business-flow-arrow {text-align: center;margin: 0.5em 0;font-size: 2rem;} /* product------#product-parts-----------------------*/ main#product{} main #product-parts {} main #product-parts .product-parts-container{background: #fff;width: 100%;} main #product-parts .product-parts-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #product-layout {} main #product-layout .product-layout-container {background-color: #353535;background-image:linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);background-size: 100px 100px;width: 100%;} main #product-layout .product-layout-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 2.5em; color: #fff;} main #product-layout .product-layout-title p { font-size:12vw; display: block; line-height: 110%;} main #product-layout .product-layout-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #product-layout .product-layout-comment p{font-size:4.2vw; padding-top: 1.5em;} main #product-layout ul.product-layout-list{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em; display: flex; justify-content: space-between; flex-wrap: wrap;} /* equipment------#equipment-layout-----------------------*/ main #equipment-layout .equipment-layout-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #equipment-layout .equipment-layout-title p { font-size:12vw; display: block; line-height: 110%;} main #equipment-layout .equipment-layout-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #equipment-layout ul.equipment-layout-list{width: 90%;margin: 0 auto;padding-bottom: 5em; display: flex; justify-content: center; flex-wrap: nowrap; flex-flow: column; list-style: none;} main #equipment-layout ul.equipment-layout-list li{width: 100%;margin: 0 auto; padding-top: 2.5em;} main #equipment-layout ul.equipment-layout-list li img{width: 100%; height: auto; margin: 0 auto;} main #equipment-layout ul.equipment-layout-list li p{font-size:4.2vw; padding-top: 1.5em;} /* equipment------#equipment-list-----------------------*/ main #equipment-layout .equipment-list{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em;} main #equipment-layout .equipment-list table{border-right:#3A3A3A solid 1px; border-top:#3A3A3A solid 1px; width: 1000px;margin: 0 auto; } main #equipment-layout .equipment-list th{ background-color:#00a5a0;border-left:#3A3A3A solid 1px;border-bottom:#3A3A3A solid 1px; text-align:center; color:#FFFFFF; padding-top: 1.5em; padding-bottom: 1.5em;} main #equipment-layout .equipment-list td{ border-left:#3A3A3A solid 1px;border-bottom:#3A3A3A solid 1px; text-align:center;padding-top: 0.5em; padding-bottom: 0.5em;} main #equipment-layout .equipment-list td.bgc{ background-color:#efefef;} main #equipment-layout .equipment-list td.four_line{background: url(../images/equipment/lineA.gif) no-repeat 0.8em 1.3em; background-size: contain; background-position:left center;} main #equipment-layout .equipment-list td.five_line{background: url(../images/equipment/lineB.gif) no-repeat 0.8em 1.7em; background-size: contain; background-position:left center;} main #equipment-layout .equipment-list td.border_none{ border-left:none;border-bottom:none; text-align:center;} main #equipment-layout .equipment-list td.border_bottom{ border-left:none;border-bottom:#3A3A3A solid 1px; text-align:center;} /* corporate------#corporate-main-----------------------*/ main#corporate .corporate-main-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 2.5em;} main#corporate .corporate-inner h2 { font-family: "Yuji Syuku", serif; font-size: 18vw; display: block; letter-spacing: 0.1em; } main#corporate .corporate-inner p { font-size: 4.2vw; display: block; text-align: left; line-height: 180%; letter-spacing: 0.2em; padding-top: 2.5em; } main#corporate p.president-name{ font-family: "Yuji Syuku", serif; font-size: 4.2vw; text-align: right; margin-top: 1.5em; margin-right: 5%;} main#corporate p.president-name span{ padding-right: 15px; font-size: 3.2vw;} /* corporate------#company-overview-----------------------*/ main #company-overview .company-overview-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #company-overview .company-overview-title p { font-size:12vw; display: block; line-height: 110%;} main #company-overview .company-overview-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #company-overview .company-profile {width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main #company-overview .company-profile dl {font-size:4.2vw;margin: 0;padding: 0;display: grid;grid-template-columns: 25% 75%;gap: 1.5em 5%; display: block;} main #company-overview .company-profile dt {width: fit-content; font-weight: bold;border-top: none; border-bottom: 3px solid #333;padding: 0.5em 0;margin: 0;} main #company-overview .company-profile dd {width: 100%; margin: 0 0 0 auto;line-height: 1.6;border-top: none; border-bottom: 1px solid #333;padding: 0.5em 0;margin: 0 0 1.5em;} main #company-overview .company-profile dt:last-of-type {border-bottom: 3px solid #333;padding-bottom: 0.5em;} main #company-overview .company-profile dd:last-of-type {border-bottom: 1px solid #333;padding-bottom: 0.5em;} main #company-overview .company-profile .factory-row {display: flex;justify-content: space-between;gap: 1em;line-height: 1.6;margin: 0; width: 60%; margin-right: auto;} main #company-overview .company-profile .factory-row .label {min-width: 5em;} main #company-overview .company-profile .factory-row .area {text-align: right;white-space: nowrap;} /* corporate------#company-history-----------------------*/ main #company-history .company-history-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #company-history .company-history-title p { font-size:12vw; display: block; line-height: 110%;} main #company-history .company-history-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #company-history .company-history {width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main #company-history .company-history dl {font-size: 4.2vw;margin: 0;padding: 0;display: grid;grid-template-columns: 20% 75%;gap: 1.5em 5%; } /* corporate------#production-sites-----------------------*/ main #production-sites .production-sites-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #production-sites .production-sites-title p { font-size:12vw; display: block; line-height: 110%;} main #production-sites .production-sites-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #production-sites .production-factory-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: center; flex-flow: column;} .border-top-ccc{border-top: 1px solid #ccc;padding: 1.5em 0 0;} main #production-sites .production-factory-contents {width: 100%;margin: 0px auto; padding-top: 1.5em; padding-bottom: 1.5em;} main #production-sites .production-factory-contents h2 {width: fit-content; color: #333; font-size: 6.2vw; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #production-sites .production-factory-contents p { font-size: 4.2vw; display: block; line-height: 180%;} main #production-sites .production-factory-img {width: 100%;margin: 0 auto; padding-top: 0em; padding-bottom: 2.5em;} main #production-sites .production-factory-img img {width: 100%; margin: 0 auto; height: auto; object-fit: contain;object-position:center top;} main #production-sites .production-factory-contents a{color: #00a5a0; text-decoration: none; transition: all 0.5s;} main #production-sites .production-factory-contents a:hover{opacity: 0.6;} /* corporate------#kenkou-management-----------------------*/ main #kenkou-management .kenkou-management-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #kenkou-management .kenkou-management-title h2 { font-size: 6.2vw; display: block; padding-top: 1em;} main #kenkou-management .kenkou-policy-container {background: #fff; width: 90%; margin: 0 auto;box-sizing: border-box; display: flex; justify-content: center; flex-flow: column;} main #kenkou-management .kenkou-policy-contents {width: 100%;margin: 0 auto 0 0; padding-top: 0em; padding-bottom: 2.5em;} main #kenkou-management .kenkou-policy-contents h2 {width: fit-content; color: #333; font-size: 6.2vw; display: block; border-bottom: 8px solid #00a5a0; padding-bottom: 0.5em; margin-bottom: 1.5em;} main #kenkou-management .kenkou-policy-contents p { font-size: 4.2vw; display: block; line-height: 180%;} main #kenkou-management .kenkou-policy-img {width: 100%;margin: 0 auto; padding-top: 0em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-policy-img img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-logo {width: 70%;margin: 0 auto; padding-top: 1.5em; padding-bottom: 0em;} main #kenkou-management .kenkou-logo img {width: 100%; height: auto; margin: 0 auto;} main #kenkou-management .kenkou-figure-title h2 { font-size: 6.2vw; display: block; text-align: center;} main #kenkou-management .kenkou-figure {width: 100%;margin: 0 auto; padding-top: 1.5em; padding-bottom: 3.5em;} main #kenkou-management .kenkou-figure img {width: 100%; height: auto; margin: 0 auto;} /* aboutus------#aboutus-main-----------------------*/ main #aboutus-main .aboutus-main-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #aboutus-main .aboutus-inner {display: flex; flex-flow: column; align-items: center;} main #aboutus-main .aboutus-main-contents p {font-size: 4.2vw; display: block; line-height: 180%; padding-top: 1.5em;} main #aboutus-main h2{display: block; width: 80%;} main #aboutus-data span.note {font-size: 4.2vw; display: block; line-height: 180%; text-align: center; margin-top: auto;} main #aboutus-data .aboutus-data-style-box span.note {margin-top: 2em;} main #aboutus-data .aboutus-data-container{width: 100%; padding-top: 5em;} main #aboutus-data .aboutus-data-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 5em;} main #aboutus-data .aboutus-data-title h2 { font-size: 6.2vw; display: block;} main #aboutus-data .aboutus-data-contents p {font-size: 4.2vw; letter-spacing:0.2em; line-height: 180%; padding-top: 2.5em;} main #aboutus-data ul.aboutus-data-work-box {list-style: none; margin: 5em auto 0em auto ; padding: 0; display: flex; justify-content:center; flex-wrap: wrap;gap: 2rem; flex-flow: column;} main #aboutus-data .aboutus-data-work-box li {width: 100%; background: #fff; padding: 2em; box-sizing: border-box; border-radius: 60px; display: flex; justify-content:flex-start; flex-direction: column; align-items: center;} main #aboutus-data .aboutus-data-work-box h3 {font-size: 6.2vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-work-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-work-box p .number {font-size: 30vw;line-height: 1;} main #aboutus-data .aboutus-data-work-box p .symbol {font-size: 12vw;line-height: 1.6;margin-left: 7px;} /* main #aboutus-data .aboutus-data-work-box dl.qualification {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {width: 50%; font-size: 24px; line-height: 180%;padding: 0.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {width: 20%; font-size: 24px; line-height: 180%;padding: 0.5em;} */ main #aboutus-data .aboutus-data-work-box dl.qualification {display: grid;grid-template-columns: 1fr auto;row-gap: 1.5em;column-gap: 4em; align-items: end; margin: 0;padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box dl.qualification dt {font-size: 4.2vw;} main #aboutus-data .aboutus-data-work-box dl.qualification dd {display: flex;justify-content: flex-end;align-items: flex-end;font-size: 0; } main #aboutus-data .aboutus-data-work-box dl.qualification dd {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: flex-end; line-height: 1; padding-top: 0em; text-align: right;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .number {font-size: 6.2vw;line-height: 1;} main #aboutus-data .aboutus-data-work-box dl.qualification dd .symbol {font-size: 4.2vw;line-height: 1.2;margin-left: 4px;} main #aboutus-data ul.aboutus-data-style-box {list-style: none; margin: 5em auto 0em auto; padding-bottom: 2.5em; display: flex; justify-content:center; flex-wrap: wrap;gap: 2rem; flex-flow: column;} main #aboutus-data .aboutus-data-style-box li {width: 100%; background: #fff; padding: 2em; box-sizing: border-box; border-radius: 60px; display: flex;flex-direction: column;justify-content: flex-start; align-items: center;} main #aboutus-data .aboutus-data-style-box h3 {font-size: 6.2vw; text-align: center; display: block; padding-bottom: 1em; width: fit-content; margin: auto; margin-top: 0px;} main #aboutus-data .aboutus-data-style-box p {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1; padding-top: 0em; text-align: center;} main #aboutus-data .aboutus-data-style-box p .number {font-size: 30vw;line-height: 1;} main #aboutus-data .aboutus-data-style-box p .symbol {font-size: 12vw;line-height: 1.6; margin-left: 7px;} /*.age-graph */ main #aboutus-data .aboutus-data-work-box .age-graph {max-width: 100%; width: 100%; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-row {display: flex;align-items: center; margin-bottom: 1em;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-label {width: 35%; text-align: right; margin-right: 1em; font-size: 4.2vw; white-space: nowrap; flex-shrink: 0;} main #aboutus-data .aboutus-data-work-box .age-graph .bar-container {flex: 1;background-color: #fff; height: 32px;position: relative;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .age-graph .bar {height: 100%;background-color: #00a5a0;width: 0;animation: bar-animation 2s ease-out forwards;} .bar.animated,.circle .type.animated {animation-iteration-count: 1;} /*.recruitment-graph-vertical */ main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical {max-width: 90%;margin: 0px auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-group {display: flex;justify-content: center;align-items: flex-end;gap: 2em; /* 棒グラフ同士の間隔を縮める */height: 320px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-item {display: flex;flex-direction: column;align-items: center;width: 120px; /* 棒を太めに */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar-container {width: 100%;height: 240px;background: #fff;display: flex;align-items: flex-end;justify-content: center;overflow: hidden;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .bar {width: 100%;height: 0;animation: grow 1.5s ease-out forwards;/* border-radius: 0; ←不要 */} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent {font-family: "Roboto Condensed", sans-serif;font-weight: 900; color: #00a5a0; font-size: 0; display: flex; align-items: flex-end; justify-content: center; line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .number {font-size: 20vw;line-height: 1;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .percent .symbol {font-size: 10vw;line-height: 1;margin-left: 5px;} main #aboutus-data .aboutus-data-work-box .recruitment-graph-vertical .label {margin-top: 1em; font-size: 4.2vw; text-align: center;} /*.chart-container */ main #aboutus-data .aboutus-data-work-box .chart-container {display: flex;flex-flow: column; align-items: center;gap: 3em; padding-top: 2.5em; padding-bottom: 2.5em;} main #aboutus-data .aboutus-data-work-box .circle {display: inline-block;transform: rotate(-90deg);width: 100%; height: auto;} main #aboutus-data .aboutus-data-work-box .legend {font-size:4.2vw;line-height: 180%;} main #aboutus-data .aboutus-data-work-box .legend-item {display: flex;align-items: center;margin-bottom: 0em;} main #aboutus-data .aboutus-data-work-box .legend-color {width: 4.2vw;height: 4.2vw;margin-right: 1em;} /* aboutus------#aboutus-data .btn-----------------------*/ main #aboutus-data ul.aboutus-btn .btn{width: 260px;} /* recruit------#recruit-info-----------------------*/ main #recruit-info .recruit-info-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em;} main #recruit-info .recruit-info-title { display: flex; justify-content: flex-start;} main #recruit-info .recruit-info-title h2 { font-size: 6.2vw; display: block;} main #recruit-info .recruit-info-title span{ font-size: 4.2vw; display: block;padding-top: 0.5em; padding-left: 1em;} /* recruit------#recruit .btn-----------------------*/ main#recruit ul.recruit-btn {list-style: none; display: flex; flex-flow: column; justify-content: center; padding-bottom: 5em;} main#recruit ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main#recruit ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:70%; padding: 1em 0em; height: 60px;background: #00a5a0; margin: 0.5em auto;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 4.2vw; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main#recruit ul.recruit-btn .btn::after {background: #fff; position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main#recruit ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main#recruit ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main#recruit ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main#recruit ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} main#recruit ul.recruit-btn li.btn-box.current .btn {background: #333;color: #fff;pointer-events: none;border: none;} /* recruit------#recruit-info-youkou-----------------------*/ main #recruit-info .recruit-info-youkou {width: 100%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #recruit-info .recruit-info-youkou dl {font-size: 4.2vw;margin: 0;padding: 0;display: grid;grid-template-columns: 30% 65%;gap: 1.5em 5%; } main #recruit-info .recruit-info-youkou dt {font-weight: bold;border-top: 3px solid #333;padding: 1.5em 0 0;margin: 0;} main #recruit-info .recruit-info-youkou dd {margin: 0;line-height: 1.6;border-top: 1px solid #333;padding: 1.5em 0 0;} main #recruit-info .recruit-info-youkou dt:last-of-type {border-bottom: 3px solid #333; padding-bottom: 1.5em;} main #recruit-info .recruit-info-youkou dd:last-of-type {border-bottom: 1px solid #333; padding-bottom: 1.5em;} /* recruit------#recruit-women-----------------------*/ main #recruit-women {} main #recruit-women .recruit-women-container{background: #ffe600;width: 100%; padding-top: 5em;} main #recruit-women .recruit-women-contents{width: 90%;margin: 0 auto; padding-top: 0em; padding-bottom: 0em;} main #recruit-women .recruit-women-title h2 { font-size: 6.2vw; display: block;} main #recruit-women .recruit-women-contents p { font-size: 4.2vw; display: block; line-height: 180%; padding-top: 2.5em; padding-bottom: 2.5em;} /* recruit------#recruit-women .btn-----------------------*/ main #recruit-women ul.recruit-btn {list-style: none; display: flex; justify-content: center; flex-flow: column;} main #recruit-women ul.recruit-btn li .btn-box {position: absolute; bottom: 60px; left: 50%;transform: translateX(-50%); z-index: 2;} main #recruit-women ul.recruit-btn .btn {color: #fff;letter-spacing: .1em;text-align: center;width:fit-content; padding: 1.5em 2em; height: 60px;background: #00a5a0; margin: 1em auto; display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 60px;text-decoration: none; font-size: 4.2vw; gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;} main #recruit-women ul.recruit-btn .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;} main #recruit-women ul.recruit-btn .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;} main #recruit-women ul.recruit-btn .btn:hover::after {transform: scale(1, 1);} main #recruit-women ul.recruit-btn .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;} main #recruit-women ul.recruit-btn .btn:hover .icon {transform: translateX(5px);} /* recruit------#recruit-work-----------------------*/ main #recruit-work {} main #recruit-work .recruit-work-container{width: 100%;} main #recruit-work .recruit-work-contents{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 5em;} main #recruit-work .recruit-work-title h2 { font-size: 6.2vw; display: block;} main #recruit-work ul.recruit-work-box {list-style: none; margin: 2.5em auto; padding: 0; display: flex; justify-content:center; flex-wrap: nowrap;gap: 2rem; flex-flow: column;} main #recruit-work-job .recruit-work-box li {width: 100%; background: #ffe600; padding: 3em; box-sizing: border-box; border-radius: 60px;} main #recruit-work-job .recruit-work-box h2 {font-size: 6.2vw; display: block; padding-bottom: 1em; width: fit-content; margin: auto;} main #recruit-work-job .recruit-work-box p {font-size: 4.2vw; display: block; line-height: 180%;} main #recruit-work-faq {padding-top: 5em;} main #recruit-work-faq dl.faq-list{ padding-top: 2.5em; padding-bottom: 0em;} main #recruit-work-faq dl.faq-list dt {font-size: 5.2vw; display: block; padding-top: 1.3em; border-top: 1px solid #ccc;} main #recruit-work-faq dl.faq-list dd {font-size: 4.2vw; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } main #recruit-work-faq dl.faq-list dd:last-of-type {border-bottom: 1px solid #ccc;} main #recruit-work-system {padding-top: 0em;} main #recruit-work-system dl.system-list{ padding-top: 2.5em; padding-bottom: 0em;} main #recruit-work-system dl.system-list dt {font-size: 5.2vw; display: block; padding-top: 1.3em; border-top: 1px solid #333;} main #recruit-work-system dl.system-list dd {font-size: 4.2vw; display: block; line-height: 180%; padding-top: 1.5em; padding-bottom: 2.5em; } main #recruit-work-system dl.system-list dd:last-of-type {border-bottom: 1px solid #333;} /* recruit------#recruit-benefits-----------------------*/ main #recruit-benefits .recruit-benefits-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 2.5em;} main #recruit-benefits .recruit-benefits-title h2 { font-size: 6.2vw; display: block;} main #recruit-benefits .recruit-benefits-contents p {font-size: 4.2vw; display: block; line-height: 180%; padding-top: 2.5em;} main #recruit-benefits ul.recruit-benefits-box {list-style: none; margin: 2.5em auto; padding: 0;gap: 2rem;} main #recruit-benefits ul.recruit-benefits-box li {font-size: 4.2vw; display: block; line-height: 180%;} main #recruit-benefits-system {padding-bottom: 2.5em;} main #recruit-benefits-support {} main #recruit-benefits ul.recruit-in-house-box {list-style: none;display: flex; flex-flow: column; justify-content: center; flex-wrap: nowrap; align-items: center; padding-top:1.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-in-house-box li{width: 100%; padding-top: 2.5em;} main #recruit-benefits ul.recruit-in-house-box li p{font-size: 4.2vw; display: block; line-height: 180%; padding-top: 0.5em;} main #recruit-benefits ul.recruit-softball-box {list-style: none;display: flex; flex-flow: column; justify-content: center; flex-wrap: nowrap; align-items: center; padding-top: 1.5em; padding-bottom: 5em;} main #recruit-benefits ul.recruit-softball-box li{width: 100%; padding-top: 2.5em;} main #recruit-benefits ul.recruit-softball-box li p{font-size: 4.2vw; display: block; line-height: 180%; padding-top: 0.5em;} /* privacypolicy------#privacypolicy-main-----------------------*/ main#privacypolicy .privacypolicy-main-contents{width: 90%;margin: 0 auto; padding-top: 2.5em; padding-bottom: 5em;} main#privacypolicy .privacypolicy-inner {width: 100%; padding-top: 2.5em; padding-bottom: 2.5em; border-bottom: 1px solid #ccc;} main#privacypolicy .privacypolicy-inner h2 { font-size: 6.2vw; display: block;} main#privacypolicy .privacypolicy-inner p {font-size: 4.2vw; display: block; line-height: 180%; padding-top: 1.5em;} main#privacypolicy .privacypolicy-inner ol{list-style-position: inside; list-style: decimal;padding-left: 1em; padding-top: 1.5em;} main#privacypolicy .privacypolicy-inner ol li{font-size: 4.2vw; display: list-item; line-height: 180%;padding-left: 0.5em; padding-top: 1.5em;} /* end @media screen and (max-width: 600px)*/ }