@charset "UTF-8";
/**====================================
* CSS information
* file name : style-sp.css
* author : libretto works
====================================**/
@media screen and (max-width: 767px) {
/*/////////////////////////////////////////////////////////////////////////////
// TOP //
/////////////////////////////////////////////////////////////////////////////*/
/* visual
-------------------------------------------------- */
.visual-ttl {
left: 0;
transform: translateY(-50%);
padding: 0 6.6666%;
}
.visual-ttl .ttl {
font-size: 4.2rem;
letter-spacing: 0.18em;
padding-bottom: 16px;
line-height: 1.45;
}
.visual-ttl .ttl span {
display: block;
margin-left: 0;
}
.visual-ttl .txt {
font-size: 1.5rem;
letter-spacing: 0.06em;
margin: 0 0 0 4px;
}
.visual-txt {
left: 0;
bottom: 20px;
font-size: 1.0rem;
padding: 0 6.6666%;
}
/* scroll
-------------------------------------------------- */
.scroll {
width: 55px;
height: 100px;
bottom: inherit;
left: inherit;
right: 0;
top: 120px;
}
.scroll::after {
display: none;
}
.scroll__bar1,
.scroll__bar2 {
right: inherit;
left: 0;
}
.scroll p {
bottom: inherit;
top: -5px;
left: 20px;
font-size: 1.0rem;
transform-origin: left bottom;
}
/* pickupnews
-------------------------------------------------- */
.pickupnews {
padding: 0 5.3333%;
}
.pickupnews-inner {
display: block;
border-bottom: 1px solid #999999;
font-size: 1.4rem;
line-height: 1.8;
padding: 25px 0 10px;
}
.pickupnews .ttl {
display: none;
}
.pickupnews a {
display: block;
width: 100%;
background: none;
background-size: 13px auto;
padding-right: 0;
box-sizing: border-box;
}
.pickupnews a .inner {
display: block;
}
.news-info {
margin-right: 0;
}
.news-info .date {
font-size: 1.4rem;
margin-right: 15px;
}
.news-info .cate {
font-size: 1.2rem;
padding: 0 12px;
}
.pickupnews a .inner .txt {
padding: 8px 0;
white-space: normal;
overflow: auto;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center right 5px;
;
background-size: 13px auto;
padding-right: 30px;
}
/* t-sec-message
-------------------------------------------------- */
.t-sec-message {
padding: 40px 0 60px;
position: relative;
}
.t-sec-message-mark {
width: 74%;
position: absolute;
top: 60px;
left: 0;
}
.t-sec-message .flex-col2 {
padding: 70px 5.3333% 50px;
position: relative;
}
.message-img01.sp {
display: block;
width: 30%;
margin: 0;
position: absolute;
right: 5.3333%;
top: 40px;
}
.message-img01.sp .thumb::after {
padding-top: 75%;
}
.t-sec-message-ttl {
width: 100%;
padding: 0 0 0 55px;
box-sizing: border-box;
position: relative;
}
.t-sec-message-ttl .enttl {
font-size: 1.4rem;
left: 0;
top: 16px;
padding: 25px 0 0 3px;
}
.t-sec-message-ttl .ttl {
font-size: 3.0rem;
line-height: 1.7;
}
.t-sec-message-cont {
width: 100%;
box-sizing: border-box;
padding-left: 55px;
}
.t-sec-message-cont .message-img01 {
display: none;
}
.t-sec-message-cont .txt-wrap {
padding: 5px 3% 30px 0;
}
.message-slider li {
margin-right: 1.5vw;
}
.message-slider .thumb {
width: 60vw;
}
/* t-sec-service
-------------------------------------------------- */
.t-service-list {
width: 100%;
position: relative;
color: #ffffff;
}
.t-service-list-bg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.t-service-list .section-inner {
width: 100%;
height: 100%;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(42, 44, 46, 0.30);
display: flex;
justify-content: center;
align-items: center;
}
.t-service-list-inner {
display: block;
padding: 60px 0 90px;
}
.t-service-list .listttl {
width: 100%;
font-size: 1.5rem;
padding-top: 35px;
margin: 0 0 30px;
}
.t-service-list .service-list-cont-wrap {
width: 100%;
display: block;
}
.t-service-list .service-list-cont-wrap .thumb {
width: 100%;
margin-bottom: 25px;
}
.t-service-list .service-list-cont-wrap .thumb::after {
padding-top: 63%;
}
.service-list-cont {
box-sizing: border-box;
position: relative;
}
.t-service-list .service-list-cont {
width: 100%;
padding: 0 11% 0 0;
box-sizing: border-box;
}
.service-list-cont .ttl {
font-size: 2.8rem;
margin-bottom: 6px;
}
.service-list-cont .txt {
margin-bottom: 40px;
}
.service-list-cont .vertical-ttl {
font-size: 1.2rem;
right: -6px;
top: 15px;
}
.service-list-cont .vertical-ttl::after {
height: 45px;
bottom: -60px;
}
/* t-sec-sustainability
-------------------------------------------------- */
.t-sec-sustainability {
padding: 60px 0 60px;
position: relative;
overflow: hidden;
}
.t-sec-sustainability .section-inner {
padding-right: 5.3333%;
}
.t-sec-sustainability-cont {
width: 100%;
position: relative;
padding-bottom: 45px;
}
.t-sec-sustainability-img {
width: 94.6667vw;
margin-left: -5.3333vw;
}
.t-sec-sustainability-img::after {
padding-top: 66.6666%;
}
.t-sec-sustainability-cont .sustainability-ttl {
font-size: 2.8rem;
line-height: 1.75;
margin-top: 5px;
}
.t-sec-sustainability-cont .sustainability-img01 {
width: 28%;
position: absolute;
left: inherit;
right: 0;
bottom: inherit;
top: 32px;
}
.t-sec-sustainability-cont .sustainability-img01::after {
padding-top: 100%;
}
.t-sec-sustainability-cont .block {
padding: 25px 34% 0 0;
position: relative;
}
.t-sec-sustainability-cont .block .btn {
margin: 25px 0 0 0;
}
.t-sec-sustainability .txt-slider {
padding-top: 0;
position: absolute;
left: 0;
bottom: 30px;
}
/* t-sec-news
-------------------------------------------------- */
.t-sec-news {
padding: 50px 0 55px;
}
.sec-news {
padding: 0 0 60px;
}
.sec-news-side {
width: 100%;
margin-bottom: 30px;
}
.cate-list-wrap {
width: calc(100% + 5.3333vw);
}
.cate-list-ttl {
font-size: 1.2rem;
width: calc(100% - 5.3333vw);
}
.cate-list-ttl::before {
width: 59.5744%;
}
.cate-list {
padding: 10px 25px 20px 0;
display: flex;
justify-content: flex-start;
overflow-x: auto;
}
.cate-list li {
margin: 0 6px 0 0;
white-space: nowrap;
}
.cate-list li a {
font-size: 1.2rem;
line-height: 1.5;
padding: 6px 16px 8px;
}
.archive-nav select {
width: 40%;
height: 39px;
font-size: 1.2rem;
}
.t-sec-news .cate-list {
display: none;
}
.sec-news-side .btn {
display: none;
}
.sec-news-cont {
width: 100%;
}
.t-sec-news .news-list {
margin: 20px 0 30px;
}
.news-block a {
padding: 20px 0;
}
.news-block .thumb {
width: 26%;
}
.news-block .thumb::after {
padding-top: 100%;
}
.news-block .inner {
width: 66.4%;
padding: 0;
}
.news-block .ttl {
padding: 8px 0;
font-size: 1.5rem;
}
.sec-news-cont .btn {
display: block;
}
/* t-imageArea
-------------------------------------------------- */
.t-imageArea {
width: 100%;
height: auto;
}
.t-imageArea::after {
padding-top: 75%;
}
/* t-sec-recruit
-------------------------------------------------- */
.t-sec-recruit {
position: relative;
}
.t-sec-recruit-mark {
width: 60%;
top: -40px;
}
.t-sec-recruit-cont {
padding: 120px 0;
}
.recruit-fig {
position: absolute;
}
.recruit-fig._fig01 {
width: 28%;
top: 40px;
left: 0;
}
.recruit-fig._fig02 {
width: 30%;
left: -1.3333vw;
top: inherit;
bottom: 190px;
}
.recruit-fig._fig03 {
width: 24%;
right: 2%;
top: 140px;
z-index: 2;
}
.recruit-fig._fig04 {
width: 30%;
right: -2vw;
top: inherit;
bottom: 200px;
}
.recruit-fig._fig04 .thumb::after {
padding-top: 119.1666%;
}
.recruit-fig._fig05 {
width: 22%;
right: 20%;
top: inherit;
bottom: 60px;
}
.t-sec-recruit .sec-ttl {
z-index: 2;
}
.t-sec-recruit .btn {
margin: 30px 0 0 0;
}
/*/////////////////////////////////////////////////////////////////////////////
// COMPANY //
/////////////////////////////////////////////////////////////////////////////*/
/* GREETING
-------------------------------------------------- */
.sec-greeting {
padding: 0 0 60px;
}
.sec-greeting-top {
display: block;
margin-bottom: 50px;
}
.sec-greeting-top-fig {
width: 58%;
margin: 40px 0 0;
}
.sec-greeting-top-main {
width: 100%;
margin: -110px 0 0;
}
.sec-greeting-top-main .ttl {
font-size: 2.8rem;
margin: 0 0 30px 20px;
}
.sec-greeting-top-main .ttl span {
display: inline-block;
}
.sec-greeting-top-main .ttl span:nth-child(3) {
padding-top: 50px;
}
.sec-greeting-top-main .ttl span:nth-child(5) {
padding-top: 140px;
}
.sec-greeting .txt-wrap p {
margin-bottom: 1em;
}
.sec-greeting-btm {
display: block;
}
.sec-greeting-btm-fig {
width: 100%;
margin: 0 0 20px;
}
.sec-greeting-btm-main {
width: 100%;
}
/* PHILOSOPHY
-------------------------------------------------- */
.sec-philosophy {
padding: 60px 0 50px;
}
.sec-philosophy-list {
margin: 40px 0 0;
}
.sec-philosophy-list li {
margin-bottom: 25px;
}
.sec-philosophy-list li .numb {
width: 55px;
font-size: 1.2rem;
}
.sec-philosophy-list li .numb::after {
width: 20px;
}
.sec-philosophy-list li .txt {
width: calc(100% - 75px);
font-size: 2.0rem;
}
/* OVERVIEW
-------------------------------------------------- */
.sec-overview {
padding: 60px 0 0;
}
.sec-overview-block {
margin: 20px 0 0 0;
}
/* EITOKU GROUP
-------------------------------------------------- */
.sec-group {
width: 100vw;
padding: 100px 0 60px;
}
.sec-group-list {
padding-top: 60px;
}
.sec-group-list .flex-col2 {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 40px;
}
.sec-group-ttl {
width: 70px;
padding: 30px 0 0;
position: sticky;
left: 0;
top: 20px;
}
.sec-group-ttl::before {
display: none;
}
.sec-group-ttl .ttl {
font-size: 2.2rem;
line-height: 1.75;
padding-left: 5px;
}
.sec-group-ttl .enttl {
font-size: 1.0rem;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat top center;
background-size: 14px 14px;
padding: 21px 0 0 0;
}
.sec-group-block {
width: calc(100% - 100px);
margin-bottom: 0;
}
.group-slider {
padding-bottom: 20px;
}
.group-slider li {
width: 60vw;
margin-right: 1.8301vw;
}
.sec-group-block-col2 {
padding-right: 5.3333vw;
display: block;
}
.sec-group-block-col2 .table {
width: 100%;
}
.sec-group-block-col2 .table dt {
width: 100%;
font-size: 1.2rem;
border-bottom: none;
padding-bottom: 0;
}
.sec-group-block-col2 .table dd {
width: 100%;
font-size: 1.5rem;
padding-top: 5px;
}
.sec-group-list .map {
height: 200px;
}
.sec-group-list .map + .btn {
margin: 20px 0 0 0;
text-align: right;
}
/* HISTORY
-------------------------------------------------- */
.sec-history {
padding: 60px 0;
}
.sec-history-list {
margin-top: 40px;
}
.history-block {
margin-bottom: 20px;
}
.history-block::before {
left: 80px;
top: 7px;
}
.history-block::after {
height: calc(100% - 20px);
left: 86px;
bottom: -15px;
}
.history-block-year {
width: 93px;
display: block;
}
.history-block-year .numb {
width: 85px;
}
.history-block-year .txt {
font-size: 1.2rem;
margin-left: -0.65em;
}
.history-block-cont {
width: calc(94.4680% - 93px);
}
/*/////////////////////////////////////////////////////////////////////////////
// SERVICE //
/////////////////////////////////////////////////////////////////////////////*/
.service-list {
display: block;
padding-right: 0;
position: relative;
overflow: hidden;
}
.service-list .txt-slider {
position: absolute;
left: 0;
bottom: 25px;
}
.service-list .txt-slider li {
font-weight: 600;
}
.service-list-fig {
width: 100%;
height: auto;
}
.service-list-fig.thumb::after {
padding-top: 75%;
}
.service-list-inner {
width: 100%;
display: block;
border-top: none;
padding: 30px 5.3333% 95px;
}
.service-list .service-list-cont {
padding: 0 11% 0 0;
}
.service-list .listttl {
font-size: 1.2rem;
padding-left: 26px;
margin-bottom: 10px;
}
.service-list .service-list-cont .txt {
margin-bottom: 35px;
}
/*/////////////////////////////////////////////////////////////////////////////
// SERVICE DETAIL //
/////////////////////////////////////////////////////////////////////////////*/
/* service-lead
-------------------------------------------------- */
.service-lead-col2 {
display: block;
}
.service-lead-col2 .service-lead-block {
width: 100%;
}
.service-lead-block .ttl {
font-size: 2.4rem;
margin-bottom: 20px;
}
.service-lead-col2 .contents-link {
margin-top: 40px;
}
/* sec-features
-------------------------------------------------- */
.sec-features {
padding: 60px 0 10px;
}
.sec-features-list {
padding: 40px 0 50px;
}
.features-block {
display: block;
padding-bottom: 40px;
margin-bottom: 35px;
}
.features-block .thumb {
width: 100%;
}
.features-block .thumb::after {
padding-top: 66.6666%;
}
.features-block-inner {
width: 100%;
padding-top: 20px;
}
.features-block .numb {
width: 52px;
margin-top: 10px;
font-size: 1.2rem;
}
.features-block .numb::after {
width: 20px;
}
.features-block dl {
width: calc(100% - 70px);
}
.features-block dl dt {
font-size: 2.2rem;
margin-bottom: 12px;
}
/* sec-detail-contact
-------------------------------------------------- */
.sec-detail-contact {
margin: 60px auto 0;
padding: 45px 5.3333% 60px;
}
.sec-detail-contact .enttl {
font-size: 1.2rem;
margin-bottom: 8px;
}
.sec-detail-contact .lead {
font-size: 2.0rem;
margin-bottom: 20px;
}
.sec-detail-contact ul li {
width: 100%;
padding: 30px 20px 40px;
margin-top: 10px;
}
.sec-detail-contact ul li .ttl {
font-size: 1.6rem;
padding-bottom: 10px;
margin-bottom: 15px;
}
.sec-detail-contact ul li a.tel ._en {
font-size: 3.0rem;
margin-bottom: 4px;
}
.sec-detail-contact ul li a.tel ._en span {
font-size: 1.8rem;
}
.sec-detail-contact ul li a.tel .txt {
font-size: 1.4rem;
}
.sec-detail-contact ul li a.mail {
max-width: 280px;
margin: 5px auto 0;
}
/* service-pagelink
-------------------------------------------------- */
.service-pagelink {
padding-top: 60px;
}
.service-page-list {
display: block;
}
.service-page-list li {
width: 100%;
border-top: 1px solid #999999;
margin-top: 0;
}
.service-page-list li a {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center right 10px;
background-size: 9px auto;
padding: 20px 0;
}
.service-page-list li .thumb::after {
padding-top: 75%;
}
.service-page-list li p {
padding-right: 30px;
font-size: 1.4rem;
}
/* service-nav
-------------------------------------------------- */
.service-nav {
margin-top: 50px;
padding: 0 0 50px;
}
.service-pagelink + .service-nav {
margin-top: 40px;
}
.service-nav-list {
display: block;
padding-top: 20px;
}
.service-nav-list li {
width: 100%;
margin-top: 5px;
}
.service-nav-list li a {
display: block;
position: relative;
color: #ffffff;
}
.service-nav-list li .thumb::after {
padding-top: 41%;
}
.service-nav-list li .block {
bottom: 30px;
padding: 0 5.3333%;
}
.service-nav-list li .block::after {
right: 5.3333%;
}
.service-nav-list li .block .ttl {
font-size: 2.3rem;
}
.service-nav-list li .block .enttl {
font-size: 1.1rem;
}
/* ===============================================
CARDBOARD
=============================================== */
/* sec-flex
-------------------------------------------------- */
.sec-flex {
padding-top: 50px;
}
.sec-flex-block {
width: 100%;
}
.sec-flex-block .btn {
margin-top: 30px;
}
.sec-flex-block .thumb.sp {
display: block;
margin: 20px 0 -8px;
}
.sec-flex .thumb {
width: 100%;
}
.sec-flex .thumb::after {
padding-top: 66.6666%;
}
/* sec-slider
-------------------------------------------------- */
.sec-slider {
padding-top: 60px;
}
.fig-slider {
margin: 30px 0;
padding: 0;
}
.fig-slider .thumb {
width: 75vw;
}
.sec-slider .btn {
margin: 0;
}
/* sec-facilities
-------------------------------------------------- */
.sec-facilities {
padding-top: 60px;
}
.flex-col3-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
}
.flex-col3-list li {
width: 48%;
margin-top: 15px;
}
.flex-col3-list li dt {
font-size: 1.6rem;
line-height: 1.5;
margin-top: 10px;
}
.flex-col3-list li dd {
margin: 4px 0 10px;
font-size: 1.3rem;
}
/* sec-capabilities
-------------------------------------------------- */
.sec-capabilities {
display: block;
padding: 60px 0 0;
}
.sec-capabilities:nth-child(even) {
flex-direction: row-reverse;
}
.capabilities-fig {
width: 100%;
}
.capabilities-fig::after {
padding-top: 75%;
}
.capabilities-block {
width: 100%;
padding: 0 5.3333%;
box-sizing: border-box;
}
.sec-capabilities:nth-child(even) .capabilities-block {
padding: 0 5.3333%;
}
.capabilities-block-ttl {
border-top: none;
padding: 40px 0 45px;
}
.capabilities-block-ttl-inner {
width: 110px;
border-right: none;
padding: 0;
}
.capabilities-block-ttl .enttl {
font-size: 1.2rem;
font-weight: 600;
padding: 28px 0 0;
margin: -3px 6px 0 0;
}
.capabilities-block-ttl .ttl {
display: block;
font-size: 4.6rem;
line-height: 1.5;
letter-spacing: 0.12em;
}
.capabilities-block-ttl dl {
width: calc(100% - 120px);
padding: 20px 0 0;
border-top: 1px solid #cccccc;
}
.capabilities-block-ttl dl dt {
font-size: 2.1rem;
margin-bottom: 8px;
}
.capabilities-block-list li {
width: 47%;
}
.capabilities-block-list li dl {
line-height: 1.6;
}
.capabilities-block-list li dt {
font-size: 1.7rem;
font-weight: 700;
margin: 10px 0 5px;
}
.capabilities-block-list li dd {
font-size: 1.4rem;
letter-spacing: 0.02em;
}
/* sec-flow
-------------------------------------------------- */
.sec-flow {
padding-top: 60px;
}
.flow-block {
flex-wrap: wrap;
justify-content: flex-end;
margin-bottom: 40px;
padding: 35px 0 0;
}
.flow-block::before {
width: 100%;
background: #cccccc;
}
.flow-block::after {
content: "";
width: 1px;
height: calc(100% - 150px);
background: #cccccc;
position: absolute;
bottom: 0;
left: 7.5%;
}
.flow-block .thumb {
width: 75%;
}
.flow-block .thumb::after {
padding-top: 66.6666%;
}
.flow-block-cont {
width: 100%;
padding: 0 0 20px;
}
.flow-block-cont .numb {
width: 15%;
}
.flow-block-cont .numb::after {
display: none;
}
.flow-block-cont .numb p {
font-size: 1.0rem;
line-height: 1.5;
padding-bottom: 20px;
}
.flow-block-cont .numb p span {
font-size: 2.6rem;
display: block;
}
.flow-block-cont dl {
width: 75%;
}
.flow-block-cont dl dt {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 10px;
}
/* sec-products
-------------------------------------------------- */
.sec-products {
padding-top: 70px;
}
.plus {
width: 31px;
height: 31px;
right: 8px;
bottom: 8px;
}
.plus::before,
.plus::after {
width: 13px;
left: 9px;
top: 15px;
}
/* ===============================================
PACKAGING
=============================================== */
/* sec-pa-products
-------------------------------------------------- */
.sec-pa-products {
padding-top: 50px;
}
/* sec-col2-main
-------------------------------------------------- */
.sec-col2-main {
margin: 30px 0 0 0;
}
.sec-col2-main-lead {
margin: -10px 0 30px;
}
.flex-col2-list .block {
width: 47%;
margin-top: 30px;
}
.flex-col2-list .block:nth-child(-n+2) {
margin-top: 0;
}
.flex-col2-list .block .thumb::after {
padding-top: 75%;
}
.flex-col2-list .block dl {
margin-top: 12px;
line-height: 1.6;
}
.flex-col2-list .block dt {
font-size: 1.6rem;
margin-bottom: 6px;
}
.flex-col2-list .block dd {
font-size: 1.3rem;
}
/* ===============================================
SILICONE
=============================================== */
/* sec-si-group
-------------------------------------------------- */
.sec-si-group {
padding-top: 60px;
}
.sec-si-group-col2 {
display: block;
}
.sec-si-group-col2 .sidettl {
font-size: 2.4rem;
}
.si-group-cont {
width: 100%;
margin-top: 8px;
}
.si-group-cont-inner {
display: block;
margin-top: 15px;
}
.si-group-cont-inner .icon {
width: 50%;
font-size: 1.3rem;
margin: 0 0 20px;
}
.si-group-cont-inner .icon p ._small {
font-size: 1.0rem;
}
.si-group-cont-inner .txt {
width: 100%;
margin-bottom: 15px;
}
.si-group-cont .btn {
margin-top: 20px;
}
/* sec-si-about
-------------------------------------------------- */
.sec-si-about {
padding: 50px 0 0;
}
.sec-si-about-box {
border: 6px solid #f1f2ed;
padding: 25px 20px 30px;
}
.sec-si-about-box .ttl {
font-size: 2.0rem;
padding-bottom: 12px;
}
.sec-si-about-box-inner {
margin-top: 30px;
display: block;
}
.sec-si-about-box-inner .thumb {
width: 100%;
}
.sec-si-about-box-inner .thumb::after {
padding-top: 66.6666%;
}
.sec-si-about-box-inner dl {
width: 100%;
margin-top: 20px;
}
.sec-si-about-box-inner dl dt {
font-size: 2.2rem;
margin-bottom: 10px;
}
/* sec-si-products
-------------------------------------------------- */
.sec-si-products {
padding-top: 50px;
}
.flex-col4-list {
margin: 20px 0 0;
}
.flex-col4-list li {
width: 49%;
margin-top: 2%;
}
.flex-col3-list.list-border {
margin-top: 40px;
}
.flex-col2-list.list-border li,
.flex-col3-list.list-border li {
padding-top: 10px;
padding-bottom: 10px;
}
.flex-col2-list.list-border li:nth-child(-n+2) {
border-top: 1px solid #cccccc;
}
.flex-col2-list.list-border li {
padding-top: 25px;
padding-bottom: 25px;
}
.flex-col3-list.list-border li:nth-child(3) {
border-top: none;
}
/* sec-si-description
-------------------------------------------------- */
.sec-si-description {
padding-top: 60px;
}
.si-description-block {
margin-bottom: 20px;
}
.si-description-block:last-child {
margin-bottom: 20px;
}
.si-description-block .ttl span {
font-size: 2.3rem;
}
.si-description-block .ttl span::after {
width: 80px;
right: -100px;
}
.si-description-block-fig {
margin-top: 12px;
}
.si-description-block-fig li {
width: 48.5%;
}
/*/////////////////////////////////////////////////////////////////////////////
// SUSTAINABILITY //
/////////////////////////////////////////////////////////////////////////////*/
/* SDGs
-------------------------------------------------- */
.sec-sdgs {
padding: 0 0 50px;
}
.sec-sdgs-top {
margin: 30px 0 0;
}
.sec-sdgs-top-cont {
display: block;
margin-top: 30px;
}
.sec-sdgs-top-cont .ttl {
width: 100%;
font-size: 1.8rem;
line-height: 1.75;
}
.sec-sdgs-top-cont .txt-wrap {
width: 100%;
padding: 25px 0 0 0;
margin-top: 25px;
}
.sec-sdgs-list {
display: block;
margin-top: 30px;
}
.sec-sdgs-list li {
width: 100%;
padding: 20px 0;
}
.sec-sdgs-list li .txt {
font-size: 1.4rem;
}
/* CSR
-------------------------------------------------- */
.sec-csr {
padding: 60px 0;
}
.sec-csr-cont {
margin: 10px 0 50px;
}
.sec-csr-cont .ttl {
width: 80px;
font-size: 2.4rem;
line-height: 1.75;
position: sticky;
right: 0;
top: 90px;
}
.sec-csr-list {
width: calc(100% - 105px);
margin-top: 60px;
padding-top: 20px;
}
.sec-csr-list li {
display: block;
margin-top: 20px;
}
.sec-csr-list li .icon {
width: 30%;
padding: 0;
}
.sec-csr-list li dl {
width: 100%;
}
.sec-csr-box {
background: #ffffff;
padding: 30px 25px 40px;
}
.sec-csr-box .ttl {
font-size: 2.0rem;
margin-bottom: 25px;
}
.sec-csr-box ul li {
margin-top: 20px;
}
.sec-csr-box ul li .numb {
width: 55px;
font-size: 1.4rem;
}
.sec-csr-box ul li .numb::after {
width: 20px;
}
.sec-csr-box ul li .txt {
width: calc(100% - 70px);
}
/* FSC
-------------------------------------------------- */
.sec-fsc {
padding: 60px 0 0;
}
.sec-fsc-cont {
margin: 30px 0 50px;
}
.sec-fsc-cont .thumb {
width: 36%;
height: 100vh;
margin-left: -5.3333vw;
position: sticky;
left: 0;
top: 0;
}
.sec-fsc-list {
width: 62%;
}
.sec-fsc-list li {
padding: 20px 0 30px;
}
.sec-fsc-list li dt {
font-size: 1.8rem;
}
.sec-fsc-list li dd.flex-col2 {
flex-direction: row-reverse;
}
.sec-fsc-list li dd.flex-col2 .icon {
width: 40%;
margin: 16px 0 0 8px;
float: right;
}
.sec-fsc-list li dd.flex-col2 .txt {
width: 100%;
}
.sec-fsc-box {
border: 6px solid #f1f2ed;
padding: 30px 20px;
}
.sec-fsc-box .ttl {
font-size: 2.0rem;
margin-bottom: 12px;
}
.sec-fsc-box-inner {
margin-top: 20px;
padding-top: 25px;
}
.sec-fsc-box .subttl {
font-size: 2.2rem;
line-height: 1.5;
}
.sec-fsc-box-note {
margin-top: 10px;
}
.sec-fsc-box-note li {
font-size: 1.4rem;
padding-left: 18px;
margin-top: 6px;
}
.sec-fsc-box-note li::before {
top: 9px;
}
.sec-fsc-box-list {
display: block;
margin: 25px 0 10px;
}
.sec-fsc-box-list li {
width: 100%;
}
.sec-fsc-box-list li:nth-child(2) {
border-top: none;
}
/*/////////////////////////////////////////////////////////////////////////////
// NEWS //
/////////////////////////////////////////////////////////////////////////////*/
/* wp-pagenavi
-------------------------------------------------- */
.wp-pagenavi {
margin: 40px auto 0;
font-size: 1.2rem;
}
.wp-pagenavi a {
width: 45px;
height: 45px;
margin: 0 6px 6px 0;
line-height: 45px;
}
.wp-pagenavi span.current {
width: 45px;
height: 45px;
margin: 0 6px 6px 0;
line-height: 45px;
}
.wp-pagenavi span.extend {
line-height: 45px;
margin: 0 6px 6px 0;
}
/*/////////////////////////////////////////////////////////////////////////////
// NEWS DETAIL //
/////////////////////////////////////////////////////////////////////////////*/
/* sec-news-detail
-------------------------------------------------- */
.sec-news-detail {
padding-bottom: 60px;
}
/* entry
-------------------------------------------------- */
.entry {
padding: 0 0 40px;
}
.entry blockquote {
padding: 20px 20px;
margin: 1.5em 0;
}
.entry blockquote h2:first-child,
.entry blockquote h3:first-child,
.entry blockquote h4:first-child,
.entry blockquote h5:first-child {
margin-top: 10px;
}
.entry ul li::before {
top: 10px;
}
.entry p {
display: block;
margin: 0.3em 0;
}
.entry p + p {
margin: 0.75em 0 0.5em;
}
.entry h2 {
font-size: 2.6rem;
margin: 0.4em 0 0.75em;
}
.entry h3 {
font-size: 2.2rem;
padding-left: 20px;
}
.entry h4 {
font-size: 2.0rem;
}
.entry h5 {
font-size: 1.8rem;
}
.entry h2:first-child,
.entry h2:first-child,
.entry h2:first-child,
.entry h2:first-child {
margin-top: 0;
}
/* sns-link
-------------------------------------------------- */
.sns-share {
padding: 0 0 50px;
}
.sns-share .en-ttl {
padding-right: 55px;
margin-right: 10px;
font-size: 1.3rem;
}
.sns-share .en-ttl::after {
width: 40px;
}
.sns-share li {
padding: 4px 10px;
}
.sns-share li a {
width: 24px;
height: 24px;
}
/* detail-nav
-------------------------------------------------- */
.detail-nav-wrap {
padding: 40px 0 0;
}
.detail-nav {
width: 100%;
}
.detail-nav ul li a {
font-size: 1.4rem;
}
.detail-nav ul li a span.pc {
display: none !important;
}
/*/////////////////////////////////////////////////////////////////////////////
// RECRUIT //
/////////////////////////////////////////////////////////////////////////////*/
/* ===============================================
RECRUIT TOP
=============================================== */
/* sec-recruit-message
-------------------------------------------------- */
.sec-recruit-message {
position: relative;
padding-top: 10px;
}
.sec-recruit-message .sec-col2-main {
margin-left: 0%;
}
.recruit-message-block {
margin-bottom: 100px;
}
.recruit-message-block .ttl {
font-size: 2.4rem;
padding-bottom: 0;
}
.recruit-message-block .txt-wrap p {
margin-top: 1em;
}
.recruit-message-fig01 {
width: 35%;
top: inherit;
bottom: 240px;
z-index: 1;
}
.recruit-message-fig02 {
width: 72%;
}
.recruit-message-fig02::after {
padding-top: 75%;
}
/* sec-recruit-interview
-------------------------------------------------- */
.sec-recruit-interview {
padding-top: 60px;
}
.interview-slider {
margin: 40px 0 30px;
}
.interview-slider .block a {
display: block;
}
.interview-slider .block .thumb {
width: 100%;
}
.interview-slider .block-inner {
width: 100%;
padding-top: 10px;
}
.interview-slider .block .ttl {
font-size: 2.0rem;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
margin-bottom: 14px;
}
.interview-slider .block dl {
font-size: 1.3rem;
}
.interview-slider .block dl dt {
margin-bottom: 5px;
}
.interview-slider .block dl dd.name {
font-size: 1.8rem;
line-height: 1.4;
}
/* sec-recruit-know
-------------------------------------------------- */
.sec-recruit-know {
position: relative;
margin-top: 60px;
}
.recruit-know-block {
padding: 100px 0;
}
.recruit-know-block .btn {
margin-top: 40px;
}
/* sec-recruit-job
-------------------------------------------------- */
.sec-recruit-job {
padding: 60px 0;
}
.recruit-requirements-wrap {
margin-top: 30px;
}
.recruit-requirements {
padding: 30px 20px 30px;
margin-top: 20px;
}
.recruit-requirements-ttl {
padding-bottom: 12px;
}
.recruit-requirements-ttl .ttl {
font-size: 2.4rem;
}
.recruit-requirements .block-col2 {
display: block;
padding: 20px 0;
}
.recruit-requirements .thumb {
width: 100%;
}
.recruit-requirements .block-inr {
width: 100%;
padding: 25px 0 0;
}
.recruit-requirements .block-ttl {
padding: 0 15px;
margin-bottom: 12px;
}
/* recruit-nav
-------------------------------------------------- */
.recruit-nav {
padding: 60px 0 50px;
}
.recruit-nav-flex {
display: block;
}
.recruit-nav-list {
width: 100%;
margin-bottom: 10px;
}
.recruit-nav-list li {
width: 47%;
margin-top: 0;
}
.recruit-nav-list li:nth-child(-n+2) {
margin-top: 0;
}
.recruit-nav-list li a {
padding: 30px 0;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center right;
background-size: 8px auto;
}
.recruit-entry {
width: 100%;
height: 180px;
}
.recruit-entry a {
padding: 5px 30px 0;
}
.recruit-entry a::after {
content: "";
width: 49px;
height: 49px;
position: absolute;
right: 20px;
}
.recruit-entry a .enttl {
font-size: 4.8rem;
}
/* ===============================================
KNOW
=============================================== */
/* sec-numbers
-------------------------------------------------- */
.sec-numbers {
padding: 10px 0 60px;
}
.sec-numbers-list {
display: block;
margin-top: 20px;
}
.numbers-block {
width: 100%;
padding: 15px 15px 40px;
margin-top: 20px;
}
.numbers-block._col1 {
width: 100%;
}
.numbers-block .numb {
font-size: 1.2rem;
}
.numbers-block .ttl {
font-size: 2.6rem;
}
.numbers-block .icon {
width: 80px;
margin: 10px auto 2px;
}
.numbers-block-inner {
padding: 30px 0 0;
margin-top: 10px;
}
.numbers-flex {
justify-content: space-between;
flex-wrap: wrap;
}
.numbers-flex._col2 li {
width: 47%;
}
.numbers-flex._col4 li {
width: 100%;
}
.numbers-block .subttl {
font-size: 1.5rem;
}
.numbers-block .ennumb {
font-size: 5.8rem;
}
.numbers-block .ennumb ._ja {
font-size: 1.5rem;
}
/* est */
.numb-est-list {
margin: -10px 0;
}
.numb-est-list li {
margin: 10px 0;
}
.numb-est-list .subttl {
font-size: 1.4rem;
}
.numb-est-list .ennumb {
font-size: 5.8rem;
}
/* emp */
._emp.numbers-block {
padding: 15px 20px 30px;
}
._emp .numbers-block-inner {
padding: 25px 0 0;
}
.numb-emp-list {
margin: 20px 0 0;
}
.numb-emp-list .subttl {
font-size: 1.1rem;
margin: 0 3px;
letter-spacing: 0;
}
.numb-emp-list .ennumb {
font-size: 2.2rem;
}
.numb-emp-list .ennumb ._ja {
font-size: 1.2rem;
}
/* sec-system
-------------------------------------------------- */
.sec-system {
padding: 60px 0 40px;
}
/* sec-benefits
-------------------------------------------------- */
.sec-benefits {
padding: 60px 0 50px;
}
/* ===============================================
INTERVIEW
=============================================== */
/* interview-nav
-------------------------------------------------- */
.interview-nav {
padding: 30px 0;
}
.interview-nav .section-inner {
padding-right: 0;
}
.interview-nav ul {
display: block;
}
.interview-nav ul li {
width: 40vw;
margin-left: 2.6666vw;
}
.interview-nav ul li a {
font-size: 1.2rem;
line-height: 1.5;
}
.interview-nav ul li dl {
padding-top: 8px;
}
.interview-nav ul li dl .name {
font-size: 1.6rem;
line-height: 1.35;
margin-top: 6px;
}
/* interview-list
-------------------------------------------------- */
.interview-block {
padding-top: 60px;
}
.interview-block-main {
display: block;
padding-right: 5.3333%;
margin-bottom: 25px;
}
.interview-block:nth-child(2n) .interview-block-main {
padding-right: 0;
padding-left: 5.3333%;
}
.interview-block-main .thumb {
width: 100%;
}
.interview-block-main .thumb::after {
padding-top: 75%;
}
.interview-block-main-inner {
width: 100%;
padding-right: 0;
padding-left: 5.6338%;
padding-top: 30px;
}
.interview-block:nth-child(2n) .interview-block-main-inner {
padding-right: 5.6338%;;
padding-left:0;
}
.interview-block-ttl {
font-size: 2.4rem;
margin: 5px 0 12px;
}
.interview-block-main dl {
font-size: 1.3rem;
line-height: 1.75;
}
.interview-block-main dl dd.name {
font-size: 2.2rem;
margin-top: 5px;
}
.interview-question {
position: relative;
}
.interview-question::before {
height: 16.5%;
}
.question-block {
width: 100%;
box-sizing: border-box;
padding-bottom: 20px;
position: relative;
}
.question-block:nth-child(odd) {
padding-right: 0;
}
.question-block:nth-child(even) {
padding-left: 0;
border-left: none;
}
.question-block dt {
position: relative;
font-size: 1.9rem;
font-weight: 700;
padding: 15px 0 8px;
}
.question-block dt span {
display: block;
position: relative;
}
.question-block dt span.numb {
font-size: 7.0rem;
left: -10px;
top: -10px;
}
.interview-message {
padding: 30px 0 60px;
}
.interview-message-block {
padding: 40px 25px 30px;
display: block;
}
.interview-message-block .thumb {
width: 80%;
margin: 0 auto 20px;
}
.interview-message-block dl {
width: 100%;
}
.interview-message-block dt {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 8px;
}
/*/////////////////////////////////////////////////////////////////////////////
// CONTACT //
/////////////////////////////////////////////////////////////////////////////*/
/* contact-form
-------------------------------------------------- */
.contact-form {
margin: 0 0 60px;
}
/* contact-tel-block
-------------------------------------------------- */
.contact-tel-block {
margin: 0 auto 40px;
}
.contact-tel-block a {
padding: 25px 0 30px;
font-size: 1.4rem;
}
.contact-tel-block .tel {
font-size: 2.0rem;
margin: 5px 0 0;
}
.contact-tel-block .tel span {
font-size: 3.4rem;
}
.contact-tel-block .note {
font-size: 1.3rem;
}
/* contact-block
-------------------------------------------------- */
.contact-block-txt {
margin-bottom: 20px;
}
.contact-block-txt + dl {
border-top: 1px solid #cccccc;
}
.contact-block dl {
padding: 10px 0 15px;
}
.contact-block dl dt {
width: 100%;
float: none;
padding: 15px 0 8px;
font-size: 1.4rem;
}
.contact-block dl dt .note {
display: block;
font-size: 1.2rem;
margin: 15px 0 0;
}
.contact-block dl dd {
margin: 0;
}
.contact-block dl dd .subttl {
font-size: 1.4rem;
margin-top: 8px;
}
/* input
-------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"] {
padding: 20px 10px;
font-size: 1.4rem;
}
input[type="text"].w240 {
width: 60%;
}
select {
width: 100%;
padding: 0 10px;
font-size: 1.4rem;
}
textarea {
height: 180px;
padding: 20px 15px;
font-size: 1.4rem;
}
select.w200 {
width: 120px;
}
select.w140 {
width: 100px;
}
/* form-btn
-------------------------------------------------- */
.form-btn {
padding-top: 30px;
}
.form-btn ul {
display: block;
padding-top: 20px;
}
.form-btn ul li {
width: 100%;
margin: 10px 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
height: 60px;
font-size: 1.5rem;
}
/* form-btm-txt
-------------------------------------------------- */
.form-btm-txt {
display: block;
font-size: 1.2rem;
margin-top: 20px;
}
/* complete-display
-------------------------------------------------- */
.complete-display {
padding: 40px 20px 45px;
margin-top: 0;
}
.complete_ttl {
font-size: 2.7rem;
padding-bottom: 12px;
}
.complete-display .btn {
margin-top: 25px;
}
/*/////////////////////////////////////////////////////////////////////////////
// Privacy Policy //
/////////////////////////////////////////////////////////////////////////////*/
.privacy-contact {
padding-top: 15px;
}
.privacy-contact dt {
font-size: 1.5rem;
margin-bottom: 5px;
}
}