@charset "UTF-8"; /* レスポンシブ(PCファースト) */ /* 要素基本設定 */ :root { --header-height: 100px; --wpadminbar-height: 0px; } body { color: #000; background: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; word-break: break-word; /* 英語サイトの場合外す */ min-width: 320px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .otgs-development-site-front-end { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } body:not(.home) .main { margin-top: 168px !important; padding-bottom: clamp(70px, 7vw, 93px); @media (width < 1000px) { margin-top: 97px !important; } } body.modal-open { overflow: hidden; position: fixed; width: 100%; } .header { top: var(--wpadminbar-height); transition: 0.4s; } .header__white { background-color: #fff; transition: 0.4s; } .front .intro { opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out; } img { max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; object-position: top; } a { display: block; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: 0.4s; } .single-news { font-family: var(--mfw-font); } .single-news__container__wrap__content a { display: inline; padding-bottom: 0; background-repeat: no-repeat; text-decoration: underline; } .underline-animate { display: inline; padding-bottom: 0; background-image: linear-gradient(#000, #000); background-repeat: no-repeat; background-position: right bottom; background-size: 0 1px; transition: background-size 0.3s !important; text-decoration: none; } .underline-animate.underline { text-decoration: underline; pointer-events: none; background: none; } .link__arrow { width: 8px; } /* 操作アクション */ /* ホバー時 */ @media (hover: hover) { a:hover { text-decoration: none; } a:active { text-decoration: none; } .hover-opacity:hover { opacity: 0.6; text-decoration: none; } .hover-opacity:active { opacity: 0.6; text-decoration: none; } .archive-news__container__post__link__ttl:hover .underline-animate { background-position: left bottom; background-size: 100% 1px; text-decoration: none; } .underline-animate:hover { background-position: left bottom; background-size: 100% 1px; text-decoration: none; } .underline-animate:active { background-position: left bottom; background-size: 100% 1px; text-decoration: none; } .single-news__container__wrap__content a:hover { background-position: left bottom; background-size: 100% 1px; text-decoration: underline; transition: none !important; } .archive-news__container__btn__ttl__link:hover { color: #000; text-decoration: none; } } /* クリック(タップ)時 */ @media (hover: none) { a:active { text-decoration: underline; } .hover-opacity:active { opacity: 0.6; text-decoration: none; } .archive-news__container__post__link__ttl:active .underline-animate { background-position: left bottom; background-size: 100% 1px; text-decoration: none; } .archive-news__container__btn__ttl__link:active { color: #000; text-decoration: none; } .underline-animate:active { background-position: left bottom; background-size: 100% 1px; text-decoration: none; } } /* 共通クラス */ /* フォント */ :root { --mfw-font: "Helvetica", "MFW-MidashiGoPr6N-MB31", "Arial"; --sub-font01: "Helvetica", "Arial", sans-serif; /*--chinese-heiti: "Helvetica", "MFW-UDShinGoSCGb6-DemiBold", "Arial", sans-serif;*/ --chinese-heiti: "Helvetica", "MFW-UDShinGoSCGb6-Medium", "Arial", sans-serif; } html[lang="en-US"] body, html[lang="en-US"] body * { font-family: var(--sub-font01); } html[lang="zh-CN"] body, html[lang="zh-CN"] body * { font-family: var(--chinese-heiti); } [lang="en"] { font-family: var(--sub-font01); } html[lang="zh-CN"] .fa, html[lang="zh-CN"] [class^="fa-"], html[lang="zh-CN"] [class*=" fa-"] { font-family: "Font Awesome 6 Free" !important; font-weight: 900; } .subFont01 { font-family: var(--sub-font01); } /* 要素最大幅 */ .mw { width: 100%; } .mws { max-width: 500px; width: 100%; margin: 0 auto; } .size32 { font-size: clamp(2.6rem, 2.6vw, 3.2rem); } .size26 { font-size: 2.6rem; } .size22 { font-size: 2.2rem; } .size20 { font-size: 2rem; } .size18 { font-size: clamp(1.6rem, 1.6vw, 1.8rem); } .size12 { font-size: 1.2rem; } .size11 { font-size: 1.1rem; } .size10 { font-size: 1rem; } /* レスポンシブ */ .pc { display: block; } .sp { display: none; } .adjust { display: none; } .adjust2 { display: none; } /* フレックス */ .flex { display: flex; } /* 非表示 */ .none { display: none !important; } /* テキストリンク */ .tLink { text-decoration: underline; display: inline-block; } /* 注意書き */ .notes { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: calc(18 / 12); letter-spacing: calc(20em / 1000); width: fit-content; margin: 10px 0 0 auto; } /* アスペクト比 */ .img16-9 { aspect-ratio: 16/9; } .img9-16 { aspect-ratio: 9/16; } .img5-2 { aspect-ratio: 5/2; } .img4-1 { aspect-ratio: 4/1; } .img3-2 { aspect-ratio: 3/2; } .img3-1 { aspect-ratio: 3/1; } .img2-1 { aspect-ratio: 2/1; } .img1-1 { aspect-ratio: 1/1; } /* セクション */ .comSec { padding: clamp(40px, 4vw, 60px) 0; } .comTtl { border-bottom: 1px solid #c7c7c7; padding-bottom: 8px; font-family: var(--mfw-font); font-weight: 600; line-height: 1.5; letter-spacing: 0; } .page__sp__bottom { margin-top: 100px; } /* ボタン */ .comMore__link { width: 320px; text-align: center; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: bold; margin: clamp(34px, 5vw, 64px) auto 0; cursor: pointer; padding: 20px 0; border-radius: 80px; background: #000; color: #fff; } /* メディアクエリ */ /* sp時 */ @media (max-width: 1000px) { .pc { display: none; } .sp { display: block; } .mws { width: 84%; } .adjust { display: block; } .size26 { font-size: clamp(2rem, 5.3vw, 2.6rem); } .size20 { font-size: clamp(1.8rem, 4.8vw, 2rem); } body:not(.home) .main { margin-top: clamp(90px, 23vw, 140px); padding-bottom: clamp(70px, 7vw, 93px); } } /* 以下新規記述 */ /* header ------------------------------------------------------------------- */ .header { position: fixed; width: calc(100% - 470px); padding: 30px 0; z-index: 30; max-width: 1000px; left: 0; right: 0; margin-left: auto; margin-right: auto; } body:not(.home) .header { /*padding-bottom: clamp(40px, 4vw, 78px);*/ } .header__inner { justify-content: space-between; align-items: center; } .header__inner__box__logoBox { width: 350px; align-items: center; } .header__inner__box__logoBox__link { position: relative; } .header__inner__box__logoBox__link__logo__white { position: absolute; top: 0; left: 0; transition-duration: 2s; } .header__inner__box__logoBox__link__logo__white.vanish { opacity: 0; } .header__inner__box__ttl { font-family: var(--mfw-font); align-items: center; margin-left: clamp(25px, 7.02vw, 101px); letter-spacing: 0; font-size: 1.2rem; @media (width < 1000px) { margin-left: 0; font-size: 1.1rem; } } .header__inner__switch { transform: rotate(-90deg) translateY(90%); will-change: opacity; } .custom-lang-switcher { font-family: var(--sub-font01); display: flex; justify-content: center; align-items: center; gap: 5px; line-height: 1.5; letter-spacing: 0; @media (width < 1000px) { gap: 12px; } } .custom-lang-switcher a { text-decoration: none; } .custom-lang-switcher .active { color: #767676; } .custom-lang-switcher li + li ::before { content: "/"; margin-right: 5px; @media (width < 1000px) { margin-right: 12px; } } /* front --------------------------------------------------------------- */ .front { position: relative; width: 100%; height: 100vh; .nav__group { .nav__group__list { .nav__group__list__submenu { display: block; } &:nth-of-type(4) { .nav__group__list__submenu { display: none; } } } } /* .nav__group { .nav__group__list__submenu { display: block; &:last-of-type { display: none; } } } */ } .front__fv { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 20; } .front__fv__wrap img { height: 100vh; width: 100vw; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* nav --------------------------------------------------------------------- */ .nav__group { flex-direction: column; align-items: flex-start; justify-content: flex-start; max-width: 250px; } .nav__group__list { font-family: var(--sub-font01); position: relative; background: #fff; &:first-child, &:last-child { .nav__group__list__link { font-family: var(--sub-font01); } } .nav__group__list__text { font-family: var(--sub-font01); } } .nav__group__list__submenu { display: none; margin-left: 15px; font-weight: 600; line-height: 1.65; font-family: var(--mfw-font); font-size: 1.5rem; } body:not(.home) .nav__group__list__submenu__list + .nav__group__list__submenu__list { margin-top: 10px; } .nav__switch { margin-top: 75px; } .nav-hover { position: relative; transition: 0.4s; z-index: 0; letter-spacing: 0; } .nav-hover:before { content: ""; width: 0px; height: 0px; background: #000; position: absolute; left: 0; /* top: 50%; */ top: 0.8em; transform: translateY(-50%); z-index: -1; transition: 0.4s; } .nav-hover__link { transition: 0.4s; } @media (hover: hover) { .nav-hover__link:hover { cursor: pointer; transform: translateX(15px); text-decoration: none; transition: 0.4s; } .nav-hover__link:hover ~ .nav-hover::before, .nav-hover:not(:has(.nav__group__list__submenu:hover)):hover::before { width: 8px; height: 8px; transition: 0.4s; } .nav-hover__link:hover ~ .nav-hover::before, .nav-hover.is-active::before { width: 8px; height: 8px; transition: 0.4s; } } .nav__link--current { display: flex; align-items: center; gap: 8px; } .nav__link--current::before { display: block; position: relative; transform: none; width: 8px; height: 8px; top: unset; } .nav__group__list__ttl { user-select: none; -webkit-user-select: none; -ms-user-select: none; font-family: var(--sub-font01) !important; } /* left-side --------------------------------------------------------------------- */ .left-side { position: fixed; display: inline-block; /* height: 100%; */ padding: 0 0 50px 31px; z-index: 10; height: 100vh; top: 0; } .left-side__nav { flex-direction: column; justify-content: space-between; /* height: calc(100% - var(--header-height)); */ overflow: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE, Edge */ padding-right: 16px; height: 100%; padding-top: 168px; @media (width < 1000px) { padding-top: 135px; } } .left__side__nav::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .left-side__nav__inner:nth-child(2) { margin-top: 50px; } .front .left-side { /* margin-top: var(--header-height); */ } .left-side__linkGroup__list { letter-spacing: 0; line-height: 1.7; font-family: var(--mfw-font); font-weight: 600; @media (width < 1000px) { line-height: 2.3; } } .left-side__snsBox { margin-top: 22px; gap: 10px; @media (width < 1000px) { margin-top: 17px; gap: 22px; } } .left-side__snsBox__linkBox:nth-of-type(1) { width: 20px; } .left-side__snsBox__linkBox:nth-of-type(2) { width: 17.28px; } .left-side__snsBox__linkBox:nth-of-type(3) { width: 21.9px; } .left-side__snsBox__linkBox:nth-of-type(4) { width: 22px; } .left-side__snsBox__linkBox__link { display: flex; align-items: center; height: 100%; } .left-side__small { font-family: var(--sub-font01); font-weight: 400; margin-top: 20px; flex-direction: column; letter-spacing: 0; line-height: 1.5; } /* right-side --------------------------------------------------------------- */ .right-side { width: 210px; position: fixed; right: 0; padding-right: 30px; padding-bottom: 80px; /* height: calc(100% - var(--header-height)); */ overflow-y: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE, Edge */ top: 0; height: 100vh; /*padding-top: var(--header-height);*/ padding-top: 168px; font-family: var(--mfw-font); letter-spacing: 0; } .right-side::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .right-side__searchBox { justify-content: center; align-items: center; width: 180px; padding: 15px 14px 15px 24px; border: 1px solid #9d9d9d; border-radius: 30px; } .right-side__searchBox__box { width: 90%; } .right-side__searchBox__box:focus-visible { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .right-side__searchBox__submit { width: 10%; cursor: pointer; } .right-side__searchBox__submit:focus-visible { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .right-side__searchBox__submit__imgBox { display: flex; align-items: center; } .right-side__taxonomyBox { margin-top: 30px; } .right-side__taxonomyBox__inner__list + .right-side__taxonomyBox__inner__list { margin-top: 33px; } .right-side__taxonomyBox__inner__list__ttl { padding-left: 10px; border-left: 2px solid #000; font-weight: 600; line-height: 1.5; } .right-side__taxonomyBox__inner__list__kind { margin-top: 9px; font-weight: 600; line-height: 1.6; } .right-side__taxonomyBox__innerSp { display: none; justify-content: center; align-items: center; } .right-side__taxonomyBox__innerSp__wrap { position: relative; width: 100%; display: flex; justify-content: center; } .right-side__taxonomyBox__innerSp__wrap:nth-child(2) { padding: 0 5px; } .right-side__taxonomyBox__innerSp__wrap__btn:focus-visible { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .right-side__taxonomyBox__innerSp__wrap__btn i { margin-left: 6px; transform: rotate(0deg); transition: 0.4s; } .right-side__taxonomyBox__innerSp__wrap__btn.open i { transform: rotate(180deg); transition: 0.4s; } .right-side__taxonomyBox__innerSp__wrap__dropdown { position: absolute; top: 150%; left: 0; width: max-content; height: max-content; display: none; padding: 14px 20px; border: 1px solid #9d9d9d; background: #fff; z-index: 10; line-height: 3.5; max-width: 280px; white-space: initial; } /* philosophy ---------------------------------------------------------------------- */ .philosophy__container { justify-content: center; flex-direction: column; } .philosophy__container__inner__catch { margin-top: clamp(30px, 3vw, 40px); font-family: var(--mfw-font); font-weight: 600; } .philosophy__container__inner__txt { margin-top: clamp(20px, 2vw, 30px); font-family: var(--mfw-font); font-weight: 600; line-height: 1.7; } .philosophy__container__inner__ttl:nth-child(n + 2) { margin-top: clamp(50px, 5vw, 70px); } .philosophy__container__inner__catch :nth-child(n + 2) { margin-top: clamp(20px, 2vw, 30px); } .philosophy__container__inner__smallTxt { margin-top: clamp(80px, 8vw, 120px); line-height: 1.7; font-family: var(--mfw-font); letter-spacing: 0; .sp-only { display: none; @media (width < 1000px) { display: inline; } } } /* news archive --------------------------------------------------------------- */ .archive-news { font-family: var(--mfw-font); } .archive-news__container__btn { justify-content: space-between; gap: 19px; align-items: center; } .archive-news__container__btn__ttl { position: relative; text-align: center; width: 100%; line-height: 1.8; border-bottom: 1px solid #000; font-weight: 600; /* z-index: -1; */ } .link-archive { color: #767676; border-bottom: 1px solid #767676; } .archive-news__container__btn__ttl__link { width: 100%; } .archive-news__container__post { flex-direction: column; gap: 11px; margin-top: 30px; } .archive-news__container__post__link__date, .archive-news__container__post__link__ttl { letter-spacing: 0; } .archive-news__container__post + .archive-news__container__post { margin-top: 40px; } .archive-news__container__post__link__tag { gap: 13px; flex-wrap: wrap; letter-spacing: 0; } .archive-news__container__post__link__tag__industry__link { padding: 1px 10px; border: 1px solid #9d9d9d; } .archive-news__container__post__link__tag__cat__link { padding: 1px 10px; background: #e1e1e1; } /* news sustainability --------------------------------------------------------------- */ .taxonomy-archive, .archive-sustainability__container { font-family: var(--mfw-font); } .archive-sustainability__container__ttl { line-height: 1.5; padding-bottom: 8px; border-bottom: 1px solid #c7c7c7; letter-spacing: 0; } .archive-sustainability__container__post { flex-direction: column; gap: 11px; margin-top: 30px; letter-spacing: 0; } .archive-sustainability__container__post + .archive-sustainability__container__post { margin-top: 40px; } .archive-sustainability__container__post__link__tag { gap: 13px; flex-wrap: wrap; } .archive-sustainability__container__post__link__tag__industry__link { padding: 1px 10px; border: 1px solid #9d9d9d; } .archive-sustainability__container__post__link__tag__cat__link { padding: 1px 10px; background: #e1e1e1; border: 1px solid #e1e1e1; } /* sustainable --------------------------------------------------------------- */ .sustainable__container { font-family: var(--mfw-font); &.sustainable__container-en { .sustainable__container__tabWrap__contents__second__tableWrap__rightTable { .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr { &.height-49 { height: 49px; } &.height-65 { height: 65px; } } } } } .sustainable__container__ttl { line-height: 1.5; padding-bottom: 8px; border-bottom: 1px solid #c7c7c7; font-weight: 600; letter-spacing: 0; } .sustainable__container__txt { line-height: 1.7; margin-top: 20px; font-weight: 600; } .sustainable__container__txt:nth-of-type(1) { margin-top: 30px; } .sustainable__container__secTtl { margin-top: 50px; line-height: 1.55; font-weight: 600; letter-spacing: 0; } .sustainable__container__imgBox { margin-top: 20px; } .sustainable__container__imgBox__img { aspect-ratio: 500/231; object-fit: cover; } .sustainable__container__smallTxt { margin-top: 10px; font-weight: 600; line-height: 1.7; } .sustainable__container__disclosureImgBox { margin-top: 30px; } .sustainable__container__stepBox { margin-top: 30px; } .sustainable__container__stepBox__ttl { text-align: center; } .sustainable__container__stepBox__imgBox { margin-top: 18px; } .sustainable__container__riskBox { margin-top: 35px; } .sustainable__container__riskBox__ttl { line-height: 1.5; text-align: center; border: 1px solid #000; } .sustainable__container__riskBox__txt { margin-top: 18px; line-height: 1.7; } .sustainable__container__riskBox__subTtl { margin-top: 40px; font-weight: 600; line-height: 1.5; letter-spacing: 0; } .sustainable__container__riskBox__imgBox { margin-top: 10px; } .sustainable__container__listTxt { margin-top: 17px; line-height: 1.7; } .sustainable__container__listTxt__txt__dotted { margin-right: 5px; } .sustainable__container__targetImgBox { max-width: 367px; width: 100%; margin: 20px auto 0; } /* sustainable data */ .sustainable__container__tabWrap__contents__content { display: none; } .sustainable__container__tabWrap__tabs { margin-top: 30px; justify-content: space-between; gap: 10px; align-items: center; } .sustainable__container__tabWrap__tabs__tab { text-align: center; width: 100%; line-height: 1.8; color: #767676; border-bottom: 1px solid #767676; transition: 0.4s; } .sustainable__container__tabWrap__tabs__tab:focus-visible { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .sustainable__container__tabWrap__tabs__tab:hover { color: #000; transition: 0.4s; } .sustainable__container__tabWrap__tabs__tab.active { color: #000; border-bottom: 1px solid #000; } .sustainable__container__tabWrap__contents__content { padding: 30px 0 50px; } .sustainable__container__tabWrap__contents__content__text { line-height: 1.7; margin-top: 20px; } .sustainable__container__tabWrap__contents__content__linkBox { margin-top: 23px; } .sustainable__container__tabWrap__contents__content__linkBox__list { list-style: disc; margin-left: 25px; line-height: 1.7; } .sustainable__container__tabWrap__contents__content__linkBox__list__link, .sustainable__container__tabWrap__contents__content__linkBox__list__link:hover { text-decoration: underline; } .sustainable__container__tabWrap__contents__content__tableWrap__tableTtl { margin-top: 35px; } .sustainable__container__tabWrap__contents__content__tableWrap { overflow-x: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .sustainable__container__tabWrap__contents__content__tableWrap ::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .sustainable__container__tabWrap__contents__content__tableWrap__table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 1rem; font-weight: 400; color: #323232; margin-top: 10px; letter-spacing: 0; } .sustainable__container__tabWrap__contents__content__tableWrap__table__body { border-left: 1px solid #626262; border-right: 1px solid #626262; border-bottom: 1px solid #626262; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__header { background: #747474; color: #fff; font-weight: 400; padding: 5px; text-align: center; border-left: 1px solid #fff; border-top: #747474; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__header--space { width: 33.3%; border-left: 1px solid #747474; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__header--right { border-right: 1px solid #747474; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row + .sustainable__container__tabWrap__contents__content__tableWrap__table__row { border-top: 1px solid #b7b7b7; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data--kind { padding: 0 8px; line-height: 2.6; text-align: left; width: 21.8%; background: #f7f7f7; border-right: 1px solid #747474; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data--tight { line-height: 1.4; padding-top: 7px; padding-bottom: 7px; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data { text-align: center; align-content: center; padding: 0 8px; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data--right { text-align: right; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data + .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data { border-left: 1px solid #747474; } .sustainable__container__tabWrap__contents__content__tableWrap__table__row__category { background-color: #e1e1e1; width: 8.2%; text-align: center; align-content: center; border-right: 1.3px solid #626262; } .emissionTable--yellowGreen { background: #e1e1e1; } .emissionTable--beige { background: #f7f7f7; } .emissionTable--green { background: #747474; } .emissionTable--lightGreen { background: #e1e1e1; } .emissionTable--thinGreen { background: #f7f7f7; line-height: 1; font-size: 0.8rem; } .sustainable__container__tabWrap__contents__content__emissionTable { border: 1px solid #727171; text-align: left; } .sustainable__container__tabWrap__contents__content__emissionTable__row__head--space { width: 15%; } .sustainable__container__tabWrap__contents__content__emissionTable__row__head:nth-of-type(1) { border-right: 1.3px solid #747474; } .sustainable__container__tabWrap__contents__content__emissionTable__row__head--wideSpace { width: 26.8%; } .sustainable__container__tabWrap__contents__content__emissionTable__head th + th { border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__content__emissionTable__body td { border-left: 1.3px solid #727171; } .emissionTable--green .sustainable__container__tabWrap__contents__content__tableWrap__table__row__data--right { border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__content__emissionTable__body tr + tr { border-top: 1px solid #727171; } .sustainable__container__tabWrap__contents__content__emissionTable__row__data--bdNone { border-left: none !important; } .sustainable__container__tabWrap__contents__content__emissionTable__row__head { background: #747474; color: #fff; padding: 5px 0; text-align: center; } .sustainable__container__tabWrap__contents__content__emissionTable__row__data { padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 7px; align-content: center; } .sustainable__container__tabWrap__contents__content__emissionTable__row__category { align-content: center; padding-left: 10px; } .sustainable__container__tabWrap__contents__content__emissionTable__row--total { color: #fff; } .sustainable__container__tabWrap__contents__content__emissionTable__row__category--total { text-align: right; padding-right: 30px; } .sustainable__container__tabWrap__contents__content__description { font-weight: 600; margin-top: 10px; } .sustainable__container__tabWrap__contents__content__description--span, .sustainable__container__tabWrap__contents__content__description--span2, .sustainable__container__tabWrap__contents__content__description--span3, .sustainable__container__tabWrap__contents__content__description--span4, .sustainable__container__tabWrap__contents__content__description--span5, .sustainable__container__tabWrap__contents__content__description--span6, .sustainable__container__tabWrap__contents__content__description--span7 { display: flex; } .sustainable__container__tabWrap__contents__content__description--span::before { content: "*1"; display: inline-block; width: 20px; } .sustainable__container__tabWrap__contents__content__description--span2::before { content: "*2"; display: inline-block; width: 20px; } .sustainable__container__tabWrap__contents__content__description--span3::before { content: attr(data-label); display: inline-block; width: 20px; } .en-susData:before { width: 52px; } .sustainable__container__tabWrap__contents__content__description--span4::before { content: "*3"; display: inline-block; width: 20px; } .sustainable__container__tabWrap__contents__content__description--span5::before { content: "*4"; display: inline-block; width: 20px; } .sustainable__container__tabWrap__contents__content__description--span6::before { content: "*5"; display: inline-block; width: 20px; } .sustainable__container__tabWrap__contents__content__description--span7::before { content: "*"; display: inline-block; width: 10px; } .sustainable__container__tabWrap__contents__content__description--spanInner { width: 95%; } .resourceTable--green { background: #e1e1e1; } .resourceTable--lightgreen { background: #f7f7f7; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable { border: 1.3px solid #727171; text-align: left; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__head th + th { border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__body td { border-left: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__body tr + tr { border-top: 1px solid #727171; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__row__data--bdNone { border-left: none !important; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__head { background: #747474; color: #fff; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__row__head { text-align: center; padding: 5px 0; } .sustainable__container__tabWrap__contents__content__resourceTable__row__head--space { width: 19%; } .sustainable__container__tabWrap__contents__content__resourceTable__row__head--space:nth-of-type(1) { border-right: 1.3px solid #747474; } .sustainable__container__tabWrap__contents__content__resourceTable__row__head--wideSpace { width: 22.9%; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__row__category { align-content: center; padding-left: 10px; } .sustainable__container__tabWrap__contents__content__tableWrap__resourceTable__row__data { padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 7px; align-content: center; } .secondTable--orange { background: #747474; } .secondTable--lightOrange { background: #e1e1e1; } .secondTable--thinOrange { background: #f7f7f7; } /* tab2 */ .sustainable__container__tabWrap__contents__second__table { width: max-content; min-width: 183px; border-collapse: collapse; font-size: 1rem; font-weight: 400; color: #323232; margin-top: 10px; letter-spacing: 0; border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__table tr + tr { border-top: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__table__thead { color: #fff; border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__table__thead__tr__th { padding: 8px; text-align: right; border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__table__thead__tr__th--space { height: 33px; } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td { padding: 8px; align-content: center; } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td--padding { padding: 0 8px; } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td--span { font-size: 0.6rem; display: inline-block; transform: translateY(-40%); } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td--border { border-left: 1px solid #b09f98; } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td--topBottom { border-top: 1px solid #b09f98; border-bottom: 1px solid #b09f98; } .sustainable__container__tabWrap__contents__second__table__tbody__tr__td--top { border-top: 1px solid #b09f98; } .sustainable__container__tabWrap__contents__second__tableWrap { overflow-x: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .sustainable__container__tabWrap__contents__second__tableWrap::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable { width: 992px; border-collapse: collapse; font-size: 1rem; font-weight: 400; color: #323232; margin-top: 10px; letter-spacing: 0; border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead th { padding: 8px 3px; text-align: center; font-size: 0.8rem; height: 33px; align-content: center; white-space: nowrap; word-break: normal; overflow-wrap: normal; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead tr:first-of-type th:first-of-type { color: #fff; border-bottom: 1.3px solid #ffffff; border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__bottom__th.secondTable--orange:nth-of-type(-n+5) { color: #fff; border-top: 1.3px solid #ffffff; border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__tr__th { border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__bottom__th { border-top: 1.3px solid #727171; border-bottom: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__bottom__th + .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__bottom__th { border-left: 1px solid #b09f98; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__thead__bottom__th--2023 { border-right: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr__wrap__td { padding: 8px 3px; align-content: center; font-size: 0.8rem; text-align: right; border-left: 1px solid #b09f98; border-bottom: 1px solid #b09f98; white-space: nowrap; word-break: normal; overflow-wrap: normal; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr__wrap__td--center { text-align: center; padding: 3px 3px; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr__wrap__td--top { border-top: 1.3px solid #727171; border-bottom: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr__wrap__td--bottom { border-bottom: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr--topBottom { border-top: 1.3px solid #727171 !important; border-bottom: 1.3px solid #727171 !important; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr__wrap__td--right { border-right: 1.3px solid #727171 !important; } .sustainable__container__tabWrap__contents__second__tableWrap__rightTable__tbody__tr { height: 33px; align-content: center; } /* tab3 */ .sustainable__container__tabWrap__contents__third__tableWrap, .sustainable__container__tabWrap__contents__third__secondTable { overflow-x: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .sustainable__container__tabWrap__contents__third__tableWrap::-webkit-scrollbar, .sustainable__container__tabWrap__contents__third__secondTable::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header { text-align: center; padding: 5px; color: #fff; background: #747474; border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header:nth-of-type(n + 2) { border-left: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header:nth-of-type(-n + 2) { border-right: 1.3px solid #ffffff; } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header--left { width: 20%; } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header--center { width: 35%; } .sustainable__container__tabWrap__contents__third__tableWrap__table__thead__row__header--right { width: 45%; } .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody { border-bottom: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody__row__cell { padding: 0 8px; height: 33px; align-content: center; border-left: 1.3px solid #727171; border-right: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody__row__cell--segment { border: 1.3px solid #727171; background: #e1e1e1; } .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody__row + .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody__row { border-top: 1px solid #d0d0d0; } .sustainable__container__tabWrap__contents__third__tableWrap__table__tbody__row--bottom { border-bottom: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__content__third__tableTtl { position: relative; } .sustainable__container__tabWrap__contents__content__third__tableTtl::before { content: attr(data-label); position: absolute; display: block; bottom: -25%; right: 0; font-size: 1rem; } .sustainable__container__tabWrap__contents__third__secondTable__table__thead { text-align: center; align-content: center; height: 33px; color: #fff; background: #747474; border: 1.3px solid #727171; font-size: 0.8rem; line-height: 1.2; } .sustainable__container__tabWrap__contents__third__secondTable__table__thead__row__cell--bottom { width: 6.5%; border-bottom: 1px solid #ffffff; } .sustainable__container__tabWrap__contents__third__secondTable__table__thead__row__cell--right { border-right: 1px solid #ffffff; } .sustainable__container__tabWrap__contents__third__secondTable__table__thead__row__cell--space { width: 25%; } .sustainable__container__tabWrap__contents__third__secondTable__table__thead__row__cell { border-left: 1.3px solid #ffffff; text-align: center; align-content: center; height: 33px; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody { text-align: center; border-bottom: 1.3px solid #727171; border-right: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row { height: 33px; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row + .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row { border-top: 1px solid #b4b4b4; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__header, .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__headerSub { padding: 0 5px; background: #e1e1e1; align-content: center; text-align: left; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__header { border: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__headerSub { border-top: 1px solid #98b1be; border-right: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__header--top { border-bottom: 1px solid #98b1be; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__headerSub--top, .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__cell--top { border-top: 1.3px solid #727171; } .sustainable__container__tabWrap__contents__third__secondTable__table__tbody__row__cell { text-align: center; align-content: center; border-left: 1px solid #b4b4b4; } /* about ---------------------------------------------------------------------- */ .about { font-family: var(--mfw-font); &.about-en { .about__container__button__link { padding: 11px 25px 11px 11px; } } } .about__container { letter-spacing: 0; } .about__container__ttl { line-height: 1.5; padding-bottom: 8px; border-bottom: 1px solid #c7c7c7; font-weight: 600; } .about__container__list { margin-top: 10px; } .about__container__list__linkBox__link { padding: 30px 0; justify-content: space-between; align-items: center; border-bottom: 1px solid #010000; } .about__container__list__linkBox__link__box { width: 92%; } .about__container__list__linkBox__link__box__ttl { font-weight: 600; line-height: 1.65; } .about__container__list__linkBox__link__box__description { margin-top: 15px; font-weight: 600; line-height: 1.5; } .about__container__list__linkBox__link .link__arrow { margin-right: 5px; transition: 0.4s; } .about__container__list__linkBox__link:hover { text-decoration: none; } .about__container__list__linkBox__link:hover.about__container__list__linkBox__link .link__arrow { transform: translateX(10px); transition: 0.4s; } /* about introduction */ .about__container__catch { margin-top: 30px; line-height: 1.55; font-weight: 600; } .about__container__txt { line-height: 1.7; margin-top: 10px; font-weight: 600; } .about__container__box { margin-top: 40px; } .about__container__box + .about__container__box { margin-top: 40px; } .about__container__box__subTtl { line-height: 1.5; font-weight: 600; } .about__container__box__txt { line-height: 1.7; margin-top: 10px; letter-spacing: 0; font-weight: 600; } .about__container__box__imgBox { margin-top: 15px; } .about__container__box__imgBox__img { aspect-ratio: 500/186; object-fit: cover; } .about__container__button__link { position: relative; margin-top: 20px; width: 190px; margin-right: 0; margin-left: auto; text-align: center; border: 1px solid #000; padding: 11px; font-weight: 600; line-height: 1.65; letter-spacing: 0; } .about__container__button__link::after { position: absolute; content: ""; background-image: url(../img/common/rightArrow.png); background-size: 100% 100%; background-repeat: no-repeat; top: 50%; right: 15px; transform: translateY(-50%); width: 6px; height: 12px; transition: 0.4s; } .about__container__button__link:hover { text-decoration: none; } .about__container__button__link:hover.about__container__button__link::after { right: 10px; transition: 0.4s; } /* message */ .about__container__message { line-height: 1.65; font-family: var(--mfw-font); } .about__container__messageImg { margin-top: 23px; max-width: 306px; width: 100%; } .about__container__name { margin-top: 20px; font-weight: 600; line-height: 1.5; } .about__container__messageImg__img { aspect-ratio: 306/365; object-fit: cover; } .about__container__messageTxt { font-family: var(--mfw-font); font-weight: 600; line-height: 1.7; letter-spacing: 0.02em; margin-top: 40px; } /* history */ .about__container__history { width: 100%; border-collapse: collapse; letter-spacing: 0; display: none; padding-bottom: 50px; } .about__container__history__row { display: flex; } .about__container__history__row__decade { width: 18.6%; color: #636363; background: #e1e1e1; padding: 8px 10px; align-content: center; text-align: left; border-bottom: 1px solid #fff; font-weight: 600; line-height: 1.65; } .about__container__history__row__decade--bottom { border-bottom: none; } .about__container__history__row__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 13px 8px 0; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; } .about__container__history__row__item { position: relative; padding-left: 80px; line-height: 1.65; font-weight: 600; } .about__container__history__row__item span { position: absolute; left: 15px; } .about__container__historyTxt { margin-top: 30px; line-height: 1.7; font-weight: 600; letter-spacing: 0.02em; } .about__container__btnWrap { margin-top: 35px; display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 20px; column-gap: 16px; } .about__container__btnWrap__btnWrap { display: grid; } .about__container__btnWrap__btnWrap__btn { padding: 10px; border: 1px solid #000; text-align: center; font-weight: 600; line-height: 1.65; letter-spacing: 0; align-content: center; } .about__container__btnWrap__btnWrap__btn:hover { text-decoration: none; } .about__container__acTtl { justify-content: space-between; align-items: center; padding: 15px 0; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: 600; line-height: 1.65; } .about__container__acTtl:nth-of-type(1) { margin-top: 50px; } .about__container__acTtl__icon { position: relative; width: 18px; height: 2px; background: #000; } .about__container__acTtl__icon::before { content: ""; position: absolute; width: 18px; height: 2px; background: #000; transform: rotate(90deg); transition: 0.4s; } .about__container__acTtl__icon.open::before { transform: rotate(0deg); transition: 0.4s; } /* overview */ .about__container__overview { width: 100%; border-collapse: collapse; letter-spacing: 0; line-height: 1.65; font-weight: 600; margin-top: 30px; } .about__container__overview__row { display: flex; } html[lang="en-US"] .about__container__overview__row { flex-wrap: wrap; margin-bottom: 10px; } .about__container__overview__row__title { width: 17.6%; padding: 5px 5px 5px 15px; background-color: #e1e1e1; border-bottom: 1px solid #fff; } html[lang="en-US"] .about__container__overview__row__title { width: 100%; border-bottom: 0; } .about__container__overview__row__text--top { border-top: 1px solid #e1e1e1; } .about__container__overview__row__title--position { margin-top: 30px; display: inline-block; } html[lang="en-US"] .about__container__overview__row__title--position { margin-top: 0; } .about__container__overview__row__text { flex: 1; padding: 5px 5px 5px 15px; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; } html[lang="en-US"] .about__container__overview__row__text { border-left: 1px solid #e1e1e1; } .about__container__overview__row__text-bottom { border-bottom: none; } .about__container__overview__row__text--officer { display: flex; flex-direction: column; padding: 0; } .about__container__overview__row__text__person { display: flex; align-items: center; } .about__container__overview__row__text__person + .about__container__overview__row__text__person { border-top: 1px solid #e1e1e1; } .about__container__overview__row__text__label, .about__container__overview__row__text__name, .about__container__overview__row__text__position { padding: 5px 0; } .about__container__overview__row__text__label { display: inline-block; @media (width>= 1000px) { width: 123px; margin-left: 15px; margin-right: 10px; } } html[lang="en-US"] .about__container__overview__row__text__label { @media (width>= 1000px) { width: 100px; margin-left: 15px; margin-right: 20px; } } .about__container__overview__row__text__name { display: inline-block; @media (width>= 1000px) { width: 65px; } } html[lang="en-US"] .about__container__overview__row__text__name { @media (width>= 1000px) { width: 165px; } } .about__container__overview__row__text__position { display: inline-block; @media (width>= 1000px) { width: 160px; margin-left: 20px; margin-right: 17px; } .position-detail { &:last-child { margin-bottom: 0; } } } .about__container__overview__row__text__position .position-detail { margin-bottom: 5px; } .about__container__map { padding: 8px; background: #fff; margin-top: 50px; } /* highlight */ .about__container__graphTtl { width: fit-content; margin: 40px auto 0; font-weight: 600; line-height: 1.65; } .about__container__highlightBox { width: 100%; max-width: 303px; margin: 20px auto 0; } .about__container__highlightBox2 { width: 100%; max-width: 201px; margin: 20px auto 0; } .about__container__highlightTxt { margin-top: 45px; line-height: 1.7; font-weight: 600; } /* system */ .about__container__systemTtl { margin-top: 40px; font-weight: 600; line-height: 1.65; } .about__container__systemSubTtl { margin-top: 15px; line-height: 1.7; font-weight: 600; letter-spacing: 0.02em; } .about__container__systemTxt { margin-top: 15px; line-height: 1.7; font-weight: 600; } .about__container__systemTable { width: 100%; flex-direction: column; margin-top: 20px; } .about__container__systemTable__row__head { width: 46.2%; background: #e1e1e1; border-bottom: 1px solid #fff; padding: 7px 5px 7px 15px; align-content: center; } .about__container__systemTable__row__head--group { width: 25%; padding: 7px 5px 7px 15px; background: #e1e1e1; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } .about__container__systemTable__row__head--bottom { border-bottom: none; } .about__container__systemTable__row__data--top { border-top: 1px solid #e1e1e1; } .about__container__systemTable__row__data { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; padding: 7px 5px 7px 15px; align-content: center; } .about__container__systemTable__row__kind { width: 21.2%; background: #e1e1e1; padding: 7px 5px 7px 15px; align-content: center; } .about__container__systemTable__row__kind--top { border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .about__container__systemImg { margin-top: 20px; } .about__container__systemBox { border: 1px solid #e1e1e1; padding: 43px 0; justify-content: center; margin-top: 20px; } .about__container__systemBox__inner { flex-direction: column; justify-content: center; align-items: center; max-width: 257px; width: 100%; margin: 0 auto; } .about__container__systemBox__inner__ttl { width: 100%; text-align: center; font-weight: 400; line-height: 1; padding: 10px 0; background: #efefef; } .about__container__systemBox__inner__wrap { flex-direction: column; row-gap: 20px; } .about__container__systemBox__inner__wrap__txtWrap:nth-of-type(1) { margin-top: 30px; } .about__container__systemBox__inner__wrap__txtWrap { justify-content: flex-start; column-gap: 30px; line-height: 1; } .about__container__systemBox__inner__wrap__txtWrap__ttl { font-weight: 400; } .about__container__systemBox__inner__wrap__txtWrap__txt { font-weight: 300; max-width: 160px; } /* logo */ .about__container__logoTtl { margin-top: 40px; font-weight: 600; line-height: 1.65; } .about__container__logoSubTtl { margin-top: 15px; line-height: 1.7; font-weight: 600; letter-spacing: 0.02em; } .about__container__logoTxt { margin-top: 15px; line-height: 1.7; font-weight: 600; } .about__container__systemImgBox { margin: 50px 0; } .about__container__systemImgBox__img { } /* bcm */ .about__container__bcmContent__wrap__ttl { margin-top: 50px; font-weight: 600; line-height: 1.65; letter-spacing: 0; } .about__container__bcmContent__wrap__subTtl { margin-top: 20px; font-weight: 600; line-height: 1.7; letter-spacing: 0; } .about__container__btnTtl { margin-top: 24px; font-weight: 600; line-height: 1.7; letter-spacing: 0; } .about__container__bcmBtnWrap { margin-top: 20px; } .about__container__bcmContent__wrap__table { margin-top: 20px; width: 100%; } .about__container__bcmContent__wrap__table__tr__th { width: 90px; padding: 11px 10px 11px 15px; background: #e1e1e1; border-bottom: 1px solid #fff; align-content: center; text-align: center; font-weight: 600; line-height: 1.65; letter-spacing: 0; } .about__container__bcmContent__wrap__table__tr__th--top { border-top: 1px solid #e1e1e1; } .about__container__bcmContent__wrap__table__tr__td { position: relative; padding: 11px 10px 11px 40px; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; align-content: center; font-weight: 600; line-height: 1.5; letter-spacing: 0; } .about__container__bcmContent__wrap__table__tr__td::before { content: attr(data-text) ""; margin-left: -20px; } .about__container__bcmContent__wrap__table__tr__td--top { border-top: 1px solid #e1e1e1; } .p-bcm__map { width: 100%; height: 300px; margin-top: 48px; } /* contact ------------------------------------------------------------------- */ .contact { font-family: var(--mfw-font); } .contact__container__ttl { line-height: 1.5; padding-bottom: 8px; border-bottom: 1px solid #c7c7c7; font-weight: 600; } .contact__container { letter-spacing: 0; } .contact__container__txt { margin-top: 24px; line-height: 1.7; } .contact__container__flow { margin-top: 10px; } .contact__container__flow--thanks { margin-top: 20px; } .contact__container__flow__txt { position: relative; line-height: 1.65; text-align: center; width: 50%; border: 1px solid #000; border-left: none; } .contact__container__flow__txt--right { border-left: 1px solid #000; border-right: none; } .contact__container__flow__txt--right::after { content: ""; position: absolute; top: -1px; right: -9px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 13px solid transparent; border-left: 5px solid #fff; border-right: none; z-index: 1; } .contact__container__flow__txt--right::before { content: ""; position: absolute; top: -1px; right: -10px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 13px solid transparent; border-left: 5px solid #000; border-right: none; } .contact__container__flow__txt--out { color: #767676; } .contact__container__form { margin-top: clamp(30px, 5.7vw, 40px); } .contact__container__form__item { display: block; margin-bottom: 15px; } .contact__container__form__item input { width: 100%; padding: 8px 15px 8px 10px; border: 1px solid #767676; } .contact__container__form__item ::placeholder { color: #767676; } .contact__container__form__item textarea { width: 100%; padding: 8px 20px 8px 20px; border: 1px solid #767676; } .contact__container__form__item + .contact__container__form__item { margin-top: 20px; } /* .contact__container__form__item--tel> p { display: flex; align-items: center; gap: 5px; } */ .visually-hidden { position: fixed !important; top: 0px !important; left: 0px !important; width: 4px !important; height: 4px !important; opacity: 0 !important; overflow: hidden !important; border: none !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: visible !important; } .contact__container__form__item br { display: none; } .contact__container__form__item__label { display: block; margin-bottom: 15px; font-weight: 600; line-height: 1.65; } .contact__container__form__item__tel { display: block; margin-bottom: 15px; } .contact__container__form__item__label--required { background: #c53042; color: #fff; font-size: 1.1rem; padding: 0 7px 1px; line-height: 1.5; margin-left: 6px; } .contact__container__form__item__label__tel3 { width: clamp(70px, 13vw, 90px) !important; display: inline-block; text-align: center; } div.wpcf7-response-output { margin-top: 1em; color: #b50017; } .contact__container__form__txt { line-height: 1.7; font-weight: 600; font-size: 12px; text-align: center; margin-top: 40px; } .contact__container__form__txt__link { display: inline; text-decoration: underline; } .contact__container__form__txt__link:hover { opacity: 0.6; } .contact__container__form__submit { position: relative; margin-top: 24px; max-width: 340px; width: 80%; height: 45px; margin-right: auto; margin-left: auto; } .contact__container__form__submit.is-hover::after { right: 10px; transition: 0.4s; } .contact__container__form__submit::after { position: absolute; content: ""; top: 50%; right: 15px; transform: translateY(-50%) rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; width: 12px; height: 12px; transition: 0.4s; } .contact__container__form__submit__btn { position: relative; display: block; background: #000; color: #fff; max-width: 340px; width: 100%; padding: 10px 0; font-size: 1.4rem; cursor: pointer; margin: 0 auto; text-align: center; transition: 0.4s; } .contact__container__form__submit__btn:focus-within { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .contact__container__form__submit__btn:hover { opacity: 0.6; transition: 0.4s; } /* single --------------------------------------------------------------- */ .single__ttl { line-height: 1.5; padding-bottom: 8px; border-bottom: 1px solid #c7c7c7; font-weight: 600; letter-spacing: 0; } .single__date { font-size: 1.2rem; margin-top: 30px; font-weight: 600; letter-spacing: 0; line-height: 1.5; } .taxonomy__date { margin-top: 3cqh; } .taxonomy__box { margin-top: 10px; gap: 12px; flex-wrap: wrap; } .single__tab { font-size: 1.2rem; line-height: 1.5; padding: 0 10px; background: #e1e1e1; border: 1px solid #e1e1e1; } .choice__tag { font-size: 1.2rem; line-height: 1.5; padding: 0 10px; border: 1px solid #e1e1e1; background: #fff; font-weight: 600; letter-spacing: 0; } .single__postTtl { line-height: 1.55; margin-top: 10px; letter-spacing: 0; font-weight: 600; } .single-news__container__wrap__atcm__imgWrap { margin-top: 23px; } .single-news__container__wrap__atcm__name { margin-top: 10px; line-height: 1.7; letter-spacing: 0; font-weight: 600; } .single-news__container__wrap__content p { line-height: 1.75; letter-spacing: 0; margin-top: 30px; font-weight: 600; } .single-news__container__wrap__attachment { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 75px; } /* taxonomy */ .taxonomy-archive__list__item__link { margin-top: 14px; } .taxonomy-archive__no-results { margin-top: 30px; } /* search */ .search { flex-direction: column; } .js-tab-buttons { margin-top: 30px; } .search__results__no-results { margin-top: 30px; } .search-news__container__btn__ttl:not(.is-active) { color: #767676; border-bottom: 1px solid #767676; } .search-news__container__btn__ttl:not(.is-active):hover { color: #000; cursor: pointer; } .js-tab-content { display: none; } .js-tab-content.is-show { display: block; } /* sustainability single */ .single-sus__container__wrap__postTtl { line-height: 1.55; letter-spacing: 0; } .single-sus__container__wrap__mainImg { margin-top: 24px; } .single-sus__container__wrap__mainImg__img { aspect-ratio: 500/200; } .single-sus__container__wrap__block__wrap__heading { line-height: 1.55; margin-top: 38px; letter-spacing: 0; } .single-sus__container__wrap__block__wrap__contents { letter-spacing: 0; line-height: 1.7; margin-top: 20px; & a { text-decoration: underline; } } .single-sus__container__wrap__block__wrap__centerImg { margin-top: 30px; } .single-sus__container__wrap__block__wrap__flexbox { margin-top: 34px; column-gap: 10px; } .single-sus__container__wrap__block__wrap__fullImg { margin-top: 30px; } .single-sus__container__postList { margin-top: 75px; } .single-sus__container__postList__ttl { line-height: 1.65; } .single-sus__container__postList__wrap__post + .single-sus__container__postList__wrap__post { margin-top: 30px; } .susImg__caption { margin-top: 10px; } #lightbox { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .lightbox .lb-image { max-width: 90vw !important; max-height: 90vh !important; } .lightbox .lb-outerContainer, .lightbox .lb-container { max-width: 90vw !important; max-height: 90vh !important; } .lightbox img { object-fit: contain !important; } /* ------------------------------------------------------------------- ---------------------------------------------------------------------- */ /* 操作アクション */ /* ホバー時 */ @media (hover: hover) { } /* クリック(タップ)時 */ @media (hover: none) { } /* SP時 */ @media (max-width: 1000px) { /* main */ body:not(.home) .main { flex-direction: column-reverse; } /* header */ .header { width: calc(100% - 60px); max-width: 550px; } .header__inner__box__logoBox { width: clamp(193px, 51.6592vw, 320px); } body:not(.home) .header__inner__box__ttl, body:not(.home) .header__inner__switch { display: none; } .front .header__inner__box__ttl, .front .header__inner__switch { display: flex; } .front .hbg__btn { display: none; } .front .header__inner { flex-direction: column; align-items: flex-start; } .header__inner__box { margin: 0; gap: 27px; justify-content: space-between; width: 100%; } .header__inner__box__ttl { align-items: flex-end; } .header__inner__switch { margin-top: clamp(23px, 6vw, 30px); margin-right: 0; margin-left: auto; transform: rotate(0deg) translateY(0); } .hbg__btn { position: relative; width: 43px; height: 18px; } .hbg__btn::before { content: ""; position: absolute; top: 0; width: 100%; height: 4px; background-color: #000000; transition: all 0.4s; } .hbg__btn::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 4px; background-color: #000000; transition: all 0.4s; } .hbg__menu { position: fixed; left: 0; width: 100%; height: 100%; top: calc(var(--header-height) + var(--wpadminbar-height)); background-color: #fff; transition: all 0.4s; transform: translateX(100%); z-index: 100; padding: 0 30px 120px 30px; overflow: auto; } .hbg__menu__active { transform: translateX(0); } .hbg__menu__nav { padding: 0 20px 20px; margin-top: -1px; } .hbg__menu__nav__switch { justify-content: flex-start; margin-top: 28px; } .hbg__btn__active::before { transition: all 0.4s; top: 45%; } .hbg__btn__active::after { transition: all 0.4s; bottom: 45%; } /* 背景暗く */ .overlay { position: fixed; top: 52px; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; display: none; opacity: 0; } /* fv */ .front__fv__wrap img { width: 100vw; object-fit: cover; object-position: center; } /* left-side */ body:not(.home) .left-side { display: none; } /* philosophy */ .philosophy__container { font-size: clamp(1.4rem, 3.7vw, 1.5rem); margin-top: 38px; } /* right-side */ .right-side { width: 90%; max-width: 500px; margin: 0 auto; position: relative; padding-right: 0; padding-bottom: 40px; height: auto; overflow: visible; padding-top: 0; } .right-side__searchBox { width: 193px; margin-right: 0; margin-left: auto; } .right-side__taxonomyBox__innerSp { display: flex; } .right-side__taxonomyBox__innerSp--sustainable { font-size: clamp(1rem, 2.6vw, 1.2rem); } .right-side__taxonomyBox__innerSp__wrap--sustainable { width: 20%; padding: 0 2px; white-space: nowrap; } .right-side__taxonomyBox__innerSp__wrap--sustainable:focus-visible { outline-offset: 1px; outline: -webkit-focus-ring-color auto 1px; } .right-side__taxonomyBox__innerSp__wrap--sustainable:nth-of-type(2) { width: 25%; } .right-side__taxonomyBox__innerSp__wrap--sustainable:nth-of-type(3) { width: 25%; } .right-side__taxonomyBox__innerSp__wrap--sustainable:nth-of-type(4) { width: 30%; } .right-side__taxonomyBox__innerSp__wrap--sustainable:nth-of-type(4) > .right-side__taxonomyBox__innerSp__wrap__dropdown { left: auto; right: 0; } /* sustainable */ .sustainable p { font-size: clamp(1.4rem, 3.7vw, 1.5rem); } .sustainable__container__tabWrap__contents__content__description.size11 { font-size: 1.1rem; } /* about */ .about__container p, .about__container__box__subTtl { font-size: clamp(1.4rem, 3.7vw, 1.5rem); } .about__container__button__link { width: clamp(172px, 45.8vw, 190px); padding: clamp(8px, 2.1vw, 11px); } .about__container__btnWrap__btnWrap__btn { font-size: clamp(1.4rem, 3.7vw, 1.5rem); padding: 8px 5px; height: 100%; align-content: center; } .about__container__overview { font-size: clamp(1.4rem, 3.7vw, 1.5rem); } .about__container__overview__row__text__person { flex-direction: column; justify-content: flex-start; gap: 0; padding: 5px 0; } .about__container__overview__row__text__label, .about__container__overview__row__text__name, .about__container__overview__row__text__position { padding: 0 5px 0 15px; line-height: 1.55; width: 100%; } .about__container__overview__row__title { width: 22%; padding: 5px 5px 5px clamp(5px, 1.5vw, 10px); } .about__container__systemTable { font-size: clamp(1.4rem, 3.7vw, 1.5rem); } .about__container__systemTtl { margin-top: clamp(30px, 9vw, 40px); } .about__container__systemTable__row__head--group { width: 30%; } .about__container__systemBox__inner { max-width: clamp(245px, 76vw, 257px); } .about__container__systemBox__inner__wrap__txtWrap { column-gap: clamp(15px, 4.5vw, 30px); } .about__container__logoTtl { margin-top: clamp(30px, 9vw, 40px); } .about__container__bcmContent__wrap__table__tr__th { width: 30%; } /* news */ .archive-news__container__btn { gap: 21px; } /* single */ .single-news__container__wrap__content p { margin-top: clamp(20px, 6.25vw, 30px); } } /* 404 & comingsoon & maintenance */ .notFound, .comingSoon, .maintenance { margin: clamp(80px, 20vw, 180px) auto; text-align: center; } .notFound__ttl, .comingSoon__ttl, .maintenance__ttl { font-family: var(--sub-font01); font-size: clamp(5rem, 12vw, 8rem); font-weight: bold; } .notFound__text, .comingSoon__text, .maintenance__text { margin-top: 50px; font-size: clamp(1.8rem, 4vw, 2rem); line-height: 1.4; } .notFound__url { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-top: 50px; } /* PD */ /* ========================= privacy-policy 追加CSS 篠田 ========================= */ .privacy { font-family: var(--mfw-font); } .privacy-inner { max-width: 500px; /* padding: 0 20px; */ font-weight: 600; line-height: 1.7; letter-spacing: 0; } .privacy-inner h2 { margin-top: 40px; font-size: 2.6rem; line-height: 1.55; letter-spacing: 0; font-weight: 600; } .overview { margin-top: 15px; } @media (max-width: 520px) { .privacy-inner h2 { margin-top: 40px; font-size: 2rem; line-height: 3rem; } .overview { font-size: 1.4rem; } } /* 大項目 */ .primary-list { padding-top: 50px; padding-bottom: 15px; font-size: 1.5rem; } /* 数字と文字の調整 */ .flex-list { display: flex; justify-content: space-between; padding-bottom: 15px; } .primary-list .flex-list { font-size: 2rem; } .flex-list p:first-child { width: 4%; } .flex-list p:last-child { width: 96%; } .primary-list .flex-list p:first-child { width: 6%; } .primary-list .flex-list p:last-child { width: 94%; } .flex-list.digits p:first-child { width: 8%; } .flex-list.digits p:last-child { width: 92%; } @media (max-width: 555px) { .header { width: 100%; padding-left: 30px; padding-right: 30px; } } @media (max-width: 520px) { .primary-list { padding-top: 30px; padding-bottom: 10px; font-size: 1.4rem; } .flex-list { padding-bottom: 10px; } .primary-list .flex-list { font-size: 1.8rem; } .flex-list p:first-child { width: 6%; } .flex-list p:last-child { width: 94%; } .primary-list .flex-list p:first-child { width: 8%; } .primary-list .flex-list p:last-child { width: 92%; } .flex-list.digits p:first-child { width: 12%; } .flex-list.digits p:last-child { width: 88%; } } /* 中項目 */ .secondary-list { padding-left: 0.5rem; } .secondary-list .flex-list, .third-list .flex-list { padding-bottom: 0; } /* 小項目 */ .third-list { padding-left: 1.5rem; } .sign { margin-top: 30px; width: fit-content; border-bottom: 1px solid #000000; } .info { margin-top: 10px; } .enactment-date { margin-top: 70px; text-align: right; } .privacy-inner .philosophy__container__inner__ttl2 { display: block; font-size: 15px; padding-bottom: 0; } .privacy-inner span { display: block; } @media (max-width: 520px) { .secondary-list, .third-list { font-size: 1.4rem; } .sign { margin-top: 20px; } .info { font-size: 1.1rem; } .enactment-date { font-size: 1.4rem; } } /* ========================= Cookie 追加CSS 石原 ========================= */ .cookie-inner { max-width: 500px; /* padding: 0 20px; */ line-height: 2.8rem; font-family: var(--mfw-font); } .cookie-inner h2 { /* margin-top: 40px; font-size: 2.6rem; line-height: 4rem; letter-spacing: 0.3rem; */ } .overview { margin-top: 15px; } @media (max-width: 520px) { .cookie-inner h2 { /* margin-top: 40px; font-size: 2rem; line-height: 3rem; */ } .overview { font-size: 1.4rem; } } /* 大項目 */ .primary-list { padding-top: 50px; padding-bottom: 15px; font-size: 1.5rem; } /* 数字と文字の調整 */ .flex-list { display: flex; justify-content: space-between; padding-bottom: 15px; } .primary-list .flex-list { font-size: 2rem; } .flex-list p:first-child { width: 4.7%; } .flex-list p:last-child { width: 96%; } .primary-list .flex-list p:first-child { width: 6%; } .primary-list .flex-list p:last-child { width: 94%; } .flex-list.digits p:first-child { width: 8%; } .flex-list.digits p:last-child { width: 92%; } @media (max-width: 520px) { .primary-list { padding-top: 30px; padding-bottom: 10px; font-size: 1.4rem; } .flex-list { padding-bottom: 10px; } .primary-list .flex-list { font-size: 1.8rem; } .flex-list p:first-child { width: 6%; } .flex-list p:last-child { width: 94%; } .primary-list .flex-list p:first-child { width: 8%; } .primary-list .flex-list p:last-child { width: 92%; } .flex-list.digits p:first-child { width: 12%; } .flex-list.digits p:last-child { width: 88%; } .adjust2 { display: block; } } /* 中項目 */ .secondary-list { padding-left: 0.5rem; } .secondary-list .flex-list, .third-list .flex-list { padding-bottom: 0; } /* 小項目 */ .third-list { padding-left: 1.5rem; } .sign { margin-top: 30px; width: fit-content; border-bottom: 1px solid #000000; } .info { margin-top: 10px; } .enactment-date { margin-top: 70px; text-align: right; } .cookie-inner .philosophy__container__inner__ttl2 { display: block; font-size: 15px; padding-bottom: 0; } .c-heading--sm { font-size: 18px; margin-bottom: 10px; } .third-list2 { margin: 10px 0 20px; } .cookie-inner a { display: inline; text-decoration: underline; text-underline-offset: 5px; } .primary-list .about-title { /* margin-top: 40px; */ font-size: 2.6rem; line-height: 4rem; letter-spacing: 0.3rem; } @media (max-width: 520px) { .primary-list .about-title { /* margin-top: 40px; */ font-size: 2rem; line-height: 3rem; } .overview { font-size: 1.4rem; } } @media (max-width: 520px) { .c-heading--sm { font-size: 18px; margin-bottom: 10px; } .secondary-list, .third-list { font-size: 1.4rem; } .sign { margin-top: 20px; } .info { font-size: 1.1rem; } .enactment-date { font-size: 1.4rem; } } /* 常石グループ一覧ページ */ .about_group__container { justify-content: center; flex-direction: column; letter-spacing: 0; } .about_group__container__inner__txt { margin-top: 15px; } .about_group__container__inner__catch { margin-top: clamp(50px, 5vw, 50px); font-weight: 600; line-height: 1.65; } .about_group__container__inner__catch span { display: block; font-size: 20px; margin-top: 16px; } .about_group__link { display: flex; justify-content: space-between; flex-wrap: wrap; } .about_group__link li { width: 48.5%; position: relative; display: flex; justify-content: start; align-items: center; margin-bottom: 10px; } .about_group__link li a { font-size: 15px; letter-spacing: 0; } .about_group__link li a p { width: 95%; font-weight: 600; line-height: 1.5; } .about_group__link li a:hover { text-decoration: none; } .about_group__link li a:hover::after { transform: translateX(-4px); } .about_group__container .about_group__link__item { position: relative; border-bottom: solid 1px #000; } .about_group__container .about_group__link__item a { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; width: 100%; text-decoration: none; line-height: 1.5; box-sizing: border-box; } .about_group__container .about_group__link__item a .link__arrow { flex-shrink: 0; margin-left: 8px; align-self: center; } .link__arrow img { width: 14px; /* 必要に応じて */ height: auto; display: block; } .fa-solid { transition: 0.4s; font-family: "Font Awesome 6 Free" !important; } .about_group__link { margin-top: 24px; } .about_group__container .about_group__link__item a:hover .link__arrow { transform: translateX(5px); transition: 0.4s; } .about-group-icon { width: 12px; height: 12px; display: inline-block; margin-left: 10px; position: relative; top: -6px; } .about_group__container__inner__txt { line-height: 1.7; font-weight: 600; letter-spacing: 0.02em; } .fo14 { font-size: 14px; } .about_group__container h4 { justify-content: space-between; align-items: center; font-size: 20px; font-weight: 600; /* margin-top: 16px; */ padding: 10px 0 5px; border-bottom: 1px solid rgba(199, 199, 199, 1); line-height: 1.7; letter-spacing: 0.02em; } .accordion-title { position: relative; padding-left: 1.5em; cursor: pointer; } .about-grope-row:nth-of-type(n + 2) .accordion-inner { display: none; } .accordion-inner { margin-bottom: 30px; } .accordion-wrap { margin-top: 12px; } .group .about__container__acTtl__icon { position: relative; width: 18px; height: 2px; background: #000; } .group .about__container__acTtl__icon::before { content: ""; position: absolute; width: 18px; height: 2px; background: #000; transform: rotate(90deg); transition: 0.4s; } .group .about__container__acTtl__icon.open::before { transform: rotate(0deg); transition: 0.4s; } .no-link { cursor: auto; pointer-events: none; } @media (max-width: 650px) { .about_group__link { display: block; } .about_group__link li { width: 100%; } } .lightboxOverlay { width: 100vw !important; height: 100vh !important; position: fixed !important; } .lightbox { position: fixed !important; } h5 a br { display: none; } .about__container__history__row:has(span:empty) { display: none; } /* WEBTRU STYLE */ [id^="datasign_cmp"]::part(floating-container) { left: 30px; bottom: 5px; } [id^="datasign_cmp"]::part(floating-button) { min-width:28px; height: 28px; line-height: 28px; } [id^="datasign_cmp"]::part(floating-button)::after { width: 18px; height: 18px; } @media (max-width: 650px) { [id^="datasign_cmp"]::part(floating-container) { left: 5px; bottom: 10px; } } /* 記事ページ sustainability */ .sustainability-introduction { display: flex; flex-flow: column; gap: 2rem; .item { border: 1px solid #000000; font-size: 12px; > p { display: none; } & a { display: flex; padding: 1.2rem; position: relative; &:before { content: ""; background: url("https://www.tsuneishi-g.jp/wp/wp-content/uploads/2024/01/arrow_icon.png"); width: 10px; height: 18px; position: absolute; top: 50%; right: 2.3rem; transform: translate(0, -50%); transition: 0.4s; @media (width < 1000px) { right: 1.2rem; } } &:hover { &:before { transform: translate(5px, -50%); } } } & img { width: 24rem; @media (width < 1000px) { width: 14rem; } } } } .shipping-business { .shipping-business__list { & p { display: none; } .item-img { width: 100%; height: 162px; object-fit: cover; @media (width < 1000px) { height: 120px; } } .item-img-large { width: 100%; height: 178px; object-fit: cover; @media (width < 1000px) { height: 120px; } } } } .single-news__container__wrap__content table { max-width: 100%; }

AltStyle によって変換されたページ (->オリジナル) /