@charset "UTF-8"; /* =============================================================== FOUNDATION =============================================================== */ /* -- RESET --------------------------------------------- */ @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap&subset=japanese"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } button, input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; background: none; } /* -- BASE --------------------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body, input, textarea, select, button { font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-weight: 500; -webkit-appearance: none; } body { padding-top: 100px; color: #444; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body.scrollfixed { position: relative; overflow: hidden; padding-right: 18px; } /* IE表示用のCSS */ _:-ms-input-placeholder *, :root * { font-family: "Noto Sans JP", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-weight: 300; } a { color: #444; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { width: 100%; vertical-align: bottom; } img[usemap] { height: auto; } hr { height: 1px; background-color: #dfe3e6; border: none; color: #dfe3e6; } template { position: absolute; top: -99999px; left: -99999px; opacity: 0; pointer-events: none; } .swiper-pagination-bullet { background-color: #009ce5; opacity: 0.5; } .swiper-pagination-bullet-active { background-color: #007ac5; opacity: 1; } @media screen and (max-width: 1170px) { [lang="en"] body { padding-top: 140px; } } @media screen and (max-width: 1156px) { body { padding-top: 140px; } } @media screen and (max-width: 768px) { body { padding-top: 55px; } body.scrollfixed { padding-right: 0; } } /* =============================================================== LAYOUT =============================================================== */ /* -- HEADER --------------------------------------------- */ .l-header { position: fixed; width: 100%; top: 0; left: 0; padding: 30px 40px 0; width: 100%; height: 100px; z-index: 20; } @media screen and (max-width: 1170px) { [lang="en"] .l-header { padding-top: 20px; height: 100px; height: 140px; } } @media screen and (max-width: 1196px) { .l-header { padding-top: 20px; height: 140px; } } /* -- WRAP --------------------------------------------- */ .l-wrap { margin-top: 50px; margin-bottom: 140px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .l-main { max-width: 840px; width: 100%; } .l-aside { margin-left: 5%; width: 300px; min-width: 300px; } /* -- BLOCK --------------------------------------------- */ .l-block { padding-top: 80px; padding-bottom: 100px; } .l-block--type2 { padding-top: 50px; padding-bottom: 50px; } .l-block2 { padding: 30px; } /* -- CONTAINER --------------------------------------------- */ .l-container { margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; max-width: 1280px; } .l-bottom-btn-wrap { padding: 30px 0 10px; } .l-hero { margin-bottom: 50px; } @media screen and (max-width: 768px) { /* -- HEADER SP --------------------------------------------- */ .l-header { padding: 0; min-height: 60px; height: 60px; } [lang="en"] .l-header { padding: 0; min-height: 60px; height: 60px; } /* -- WRAP SP --------------------------------------------- */ .l-wrap { margin-top: 40px; margin-bottom: 80px; } .l-aside { display: none; } /* -- BLOCK SP --------------------------------------------- */ .l-block { padding-top: 60px; padding-bottom: 70px; } .l-block--type2 { padding-top: 40px; } .l-block2 { padding: 20px; } /* -- CONTAINER SP --------------------------------------------- */ .l-container { padding-left: 17px; padding-right: 17px; } } /* =============================================================== OBJECT =============================================================== */ /* -- UTILITY --------------------------------------------- */ .u-inline { display: inline !important; } .u-inline-block { display: inline-block; } .u-ta-r { text-align: right !important; } .u-ta-l { text-align: left !important; } .u-ta-c { text-align: center !important; } .u-va-t { vertical-align: top !important; } .u-fc-primary { color: #007ac5 !important; } .u-fz-small { font-size: 0.875em !important; } .u-indent-1 { display: block; padding-left: 1em; } .u-text-indent-075 { display: block; text-indent: -0.75em; padding-left: 0.75em; } .u-text-indent-1 { display: block; text-indent: -1em; padding-left: 1em; } .u-text-indent-15 { display: block; text-indent: -1.5em; padding-left: 1.5em; } .u-text-indent-2 { display: block; text-indent: -2em; padding-left: 2em; } .u-text-indent-3 { display: block; text-indent: -3em; padding-left: 3em; } .u-tc-primary { color: #007ac5; } .u-bg-gray { background-color: #eef2f5; } .u-fw-b { font-weight: bold !important; } .u-fw-n { font-weight: normal !important; } .u-mt-0 { margin-top: 0 !important; } .u-mt-5 { margin-top: 5px !important; } .u-mt-10 { margin-top: 10px !important; } .u-mt-15 { margin-top: 15px !important; } .u-mt-20 { margin-top: 20px !important; } .u-mt-25 { margin-top: 25px !important; } .u-mt-30 { margin-top: 30px !important; } .u-mt-50 { margin-top: 50px !important; } .u-mb-10 { margin-bottom: 10px !important; } .u-mb-15 { margin-bottom: 15px !important; } .u-mb-20 { margin-bottom: 20px !important; } .u-mb-30 { margin-bottom: 30px !important; } .u-mr-0 { margin-right: 0 !important; } .u-mr-5 { margin-right: 5px !important; } .u-mr-10 { margin-right: 10px !important; } .u-ml-0 { margin-left: 0 !important; } .u-ml-a { margin-left: auto !important; } .u-lh-15 { line-height: 1.5; } .u-pt-0 { padding-top: 0 !important; } @media screen and (min-width: 769px) { .u-only-sp { display: none !important; } .u-ta-r-pc { text-align: right !important; } .u-ta-l-pc { text-align: left !important; } .u-ta-c-pc { text-align: center !important; } } @media screen and (max-width: 768px) { .u-only-pc { display: none !important; } .u-ta-c-sp { text-align: center !important; } .u-ta-l-sp { text-align: left !important; } .u-ta-r-sp { text-align: right !important; } .u-fz-14-sp { font-size: 14px !important; } } /* -- BUTTON --------------------------------------------- */ .c-btn-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-btn-wrap > * { margin-right: 10px; } .c-btn-wrap > *:last-child { margin-right: 0; } .c-btn-wrap2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-btn-wrap2 * { margin-right: 30px; } .c-btn-wrap2 *:last-child { margin-right: 0; } .c-btn-wrap3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-btn-wrap3 > * { margin-right: 30px; } .c-btn-wrap3 > *:last-child { margin-right: 0; } .c-btn1 a { position: relative; display: block; font-size: 16px; line-height: 1; padding: 5px 35px 5px 10px; border-radius: 4px; border: 1px solid #007ac5; background-color: rgba(0, 156, 229, 0); -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-btn1--border-no a { border: none; } .c-btn1 a:hover, .c-btn1:focus { background-color: #007ac5; color: #fff; } .c-btn1 a:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } .c-btn1 a:hover:after, .c-btn1:focus:after { background-image: url("/assets/img/common/icon_btn_arrow1.png"); } .c-btn2 a { position: relative; display: block; font-size: 14px; padding-right: 20px; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-btn2 a:before { content: ""; display: block; position: absolute; bottom: -3px; left: 0; width: 100%; height: 1px; background-color: #444; opacity: 0; } .c-btn2 a:hover, .c-btn2:focus { background-color: none; } .c-btn2 a:hover:before, .c-btn2:focus:before { opacity: 1; } .c-btn2 a:after { content: ""; display: block; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } .c-btn3 { position: relative; width: 100%; height: 70px; } .c-btn3 a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; padding: 20px 25px 20px 20px; width: 100%; height: 100%; color: #444; font-size: 16px; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; border-radius: 10px; background-color: #fff; } .c-btn3 a:hover, .c-btn3 a:focus { color: #fff; background-color: #006ac5; } .c-btn3 a:before { content: ""; display: block; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-btn3 a:hover:before, .c-btn3 a:focus:before { background-image: url("/assets/img/common/icon_btn_arrow1.png"); } .c-btn3--center a { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .c-btn3--mini { height: 50px; } .c-btn3--primary a { color: #fff; background-color: #007ac5; } .c-btn3--primary a:hover, .c-btn3--primary a:focus { color: #444; background-color: #fff; } .c-btn3--primary a:before { background-image: url("/assets/img/common/icon_btn_arrow1.png"); } .c-btn3--primary a:hover:before, .c-btn3--primary a:focus:before { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-btn3--highlight a { background-color: rgba(0, 122, 197, 0.2); } .c-btn3--highlight a:hover, .c-btn3--highlight a:focus { color: #fff; background-color: #006ac5; } .c-btn3--secondary a { color: #444; background-color: #fff; } .c-btn3--secondary a:before { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-btn3--secondary a:hover, .c-btn3--secondary a:focus { color: #444; background-color: rgba(0, 122, 197, 0.2); } .c-btn3--secondary a:hover:before, .c-btn3--secondary a:focus:before { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-btn3--banner:hover { background-color: #007ac5; } .c-btn3--banner a { color: #444; background-color: #fff; } .c-btn3--banner a:hover, .c-btn3--banner a:focus { opacity: 0.65; color: #444; background-color: #fff; } .c-btn3--banner a:hover:before, .c-btn3--banner a:focus:befor { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-btn3--blank a:before { content: ""; display: inline-block; margin-left: 10px; width: 14px; height: 14px; background-image: url("/assets/img/common/icon_blank.gif"); background-repeat: no-repeat; background-position: center bottom; background-size: contain; } .c-btn3--blank a:hover:before, .c-btn3--blank a:focus:before { background-image: url("/assets/img/common/icon_blank.gif"); } .c-btn3--bold a { font-weight: bold; } .c-btn3--border a { border: 1px solid #007ac5; } .c-btn3--basic a { border-radius: 0; } .c-btn3--no-hover a { color: #444; background-color: #fff; } .c-btn3--no-hover a:hover, .c-btn3--no-hover a:focus { color: #444; background-color: #fff; } .c-btn3--no-hover a:hover:before, .c-btn3--no-hover a:focus:befor { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-btn3--secondary.c-btn3--border a { border: 1px solid #007ac5; } .c-btn3--primary.c-btn3--opacity a:hover, .c-btn3--primary.c-btn3--opacity a:focusd { color: #fff; background-color: #006ac5; opacity: 0.7; } .c-btn3--primary.c-btn3--opacity a:hover:before, .c-btn3--primary.c-btn3--opacity a:focus:before { background-image: url("/assets/img/common/icon_btn_arrow1.png"); } .c-btn3--primary.c-btn3--blank a:before { background-image: url("/assets/img/common/icon_blank_3.png"); } .c-btn3--primary.c-btn3--blank a:hover:before, .c-btn3--primary.c-btn3--blank:focusd:before { background-image: url("/assets/img/common/icon_blank_3.png"); } .c-btn4 { font-size: 16px; font-weight: bold; } .c-btn4 a { position: relative; display: block; width: 100%; height: 100%; padding-right: 22px; } .c-btn4 a:after { content: ""; display: block; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } .c-btn4 a:hover, .c-btn4 a:focus { text-decoration: underline; } .c-btn4--blank a:after { background-image: url("/assets/img/common/icon_blank.gif"); width: 14px; height: 14px; } /* -- LINK --------------------------------------------- */ .c-link { position: relative; color: #007ac5; text-decoration: none; } .c-link:hover { text-decoration: underline; } .c-link--td-u { text-decoration: underline; } .c-link--td-u:hover { text-decoration: underline; } .c-link__icon-pdf { position: relative; display: inline-block; margin-left: 2px; top: 1px; width: 12px; height: 15px; background-image: url("/assets/img/common/icon_pdf.png"); background-repeat: no-repeat; background-position: center bottom; background-size: contain; } .c-link__icon-blank { display: inline-block; margin-left: 2px; top: auto; width: 14px; height: 14px; background-image: url("/assets/img/common/icon_blank.gif"); background-repeat: no-repeat; background-position: center bottom; background-size: contain; } .c-link__icon-blank--absolute { position: absolute; left: calc(100% + 1px); -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } /* -- ICON --------------------------------------------- */ .c-icon-pdf { position: relative; display: inline-block; margin-left: 2px; width: 12px; height: 15px; background-image: url("/assets/img/common/icon_pdf.png"); background-repeat: no-repeat; background-position: center 40%; background-size: contain; } .c-icon-pdf--absolute { position: absolute; left: calc(100% + 1px); -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } .c-icon-blank { display: inline-block; margin-left: 2px; top: auto; width: 14px; height: 100%; background-image: url("/assets/img/common/icon_blank.gif"); background-repeat: no-repeat; background-position: center 40%; background-size: contain; } .c-icon-blank--absolute { position: absolute; left: calc(100% + 1px); -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); height: 14px; background-position: center bottom; } .c-icon-xls { display: inline-block; margin-left: 2px; top: auto; width: 15px; height: 15px; background-image: url("/assets/img/common/icon_xls.png"); background-repeat: no-repeat; background-position: center bottom; background-size: contain; } .c-icon-xls--absolute { position: absolute; left: calc(100% + 1px); -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } /* -- HEADER --------------------------------------------- */ .c-header { width: 100%; background-color: #f5f5f5; -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); } .c-header__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 100%; height: 100%; } .scrollfixed .c-header__inner { padding-right: 18px; } .c-header__logo { max-width: 220px; min-width: 220px; width: 20%; } .c-header__logo img { width: 100%; } .c-header__menu-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-left: 30px; max-width: 950px; width: 100%; height: 100%; } @media all and (-ms-high-contrast: none) { .c-header__menu-wrap { max-width: 940px; } } .c-header--en .c-header__menu-wrap { max-width: 860px; } .c-header__gnav { max-width: 550px; min-width: 490px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .c-header--en .c-header__gnav { min-width: 590px; max-width: 590px; } .c-header__subnav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-left: 15px; margin-bottom: 10px; } .c-header__buttons { position: relative; width: 190px; min-width: 190px; height: 40px; border: 1px solid #c8c8c8; border-radius: 4px; overflow: hidden; } .c-header__buttons--search-result { width: 150px; min-width: 150px; } .c-header__buttons form { width: 100%; height: 100%; } .c-header--en .c-header__buttons { width: 65px; min-width: 65px; } .c-header__buttons-inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; background-color: #fff; padding: 10px; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-header__button { position: relative; } .c-header__button:after { content: ""; display: block; position: absolute; top: 50%; right: -14px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 14px; background-color: #c8c8c8; } .c-header__button:last-child:after { content: none; } .c-header__button a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #444; font-size: 14px; vertical-align: middle; text-decoration: none; line-height: 1; } .c-header__button a img { display: block; margin-right: 7px; width: 17px; height: 18px; } .c-header__button a img:last-child { margin-right: 0; } .c-header__buttons--search-result .c-header__button a img:last-child, .c-header--en .c-header__button a img:last-child { margin-right: 7px; } .c-header__search { display: block; position: absolute; top: 0; left: 0; padding: 10px; width: 190px; height: 100%; font-size: 16px; border: none; border-radius: 4px; background-color: #fff; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; background-position: right 10px top 50%; background-repeat: no-repeat; } .c-header__search:focus { outline: none; } .c-header__search:after { content: none; } .c-header__submit { text-indent: -9999px; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; background-color: #fff; background-image: url("/assets/img/common/icon_search.png"); background-size: 14px 14px; background-position: center center; background-repeat: no-repeat; pointer-events: none; opacity: 0; cursor: pointer; } .c-header__search.is-active + .c-header__buttons-inner + .c-header__submit { opacity: 1; pointer-events: auto; } .c-header__button--search { position: relative; z-index: 10; cursor: pointer; } .c-header__button--search:after { content: none; } .c-header__search.is-active + .c-header__buttons-inner { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .c-header__search.is-active + .c-header__buttons-inner .c-header__button--search { pointer-events: none; } .c-header__link1 { margin-left: 25px; width: 130px; } .c-header__link1 img { width: 100%; } .c-header__menu-sp { display: none; position: absolute; top: 100%; left: 0; width: 100%; } .c-header__search-sp-btn { display: none; } .c-header__search-sp { display: none; } /* -- GNAV --------------------------------------------- */ .c-gnav { padding-top: 8px; width: 100%; height: 70px; } .c-gnav__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; height: 100%; } .c-gnav__list .c-gnav__list-item { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 100%; } .c-gnav__list .c-gnav__list-item:last-child { -webkit-box-flex: 0.5; -webkit-flex-grow: 0.5; -ms-flex-positive: 0.5; flex-grow: 0.5; } .c-gnav__list .c-gnav__list-item-inner { position: relative; height: 100%; } .c-gnav__list .c-gnav__list-item-inner:after { content: ""; display: block; position: absolute; bottom: 20px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-left: solid 8px transparent; border-right: solid 8px transparent; border-bottom: solid 10px #c8ebfa; opacity: 0; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; pointer-events: none; } .c-gnav__list .c-gnav__list-item--sustainability .c-gnav__list-item-inner:after { bottom: 0; } .c-gnav__list .c-gnav__list-item--accor:hover > .c-gnav__list-item-inner:after { opacity: 1; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .c-gnav--no-accor .c-gnav__list .c-gnav__list-item--accor:hover > .c-gnav__list-item-inner:after { opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-gnav__list .c-gnav__list-item--accor.is-close .c-gnav__list-item-inner:after { opacity: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-gnav__list > .c-gnav__list-item > a, .c-gnav__list > .c-gnav__list-item > .c-gnav__list-item-inner a { position: relative; display: block; padding: 5px 0; width: 100%; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; color: #444; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-gnav__list > .c-gnav__list-item > a:hover, .c-gnav__list > .c-gnav__list-item > .c-gnav__list-item-inner a:hover { color: #007ac5; background-color: #c8ebfa; } .c-gnav__list > .c-gnav__list-item--accor:hover .c-gnav__list-item-inner a { background-color: #c8ebfa; } .c-gnav__list .c-gnav__list-item-small { line-height: 1.5; font-weight: normal; } .c-gnav__list > .c-gnav__list-item:last-child > a .c-gnav__list > .c-gnav__list-item:last-child .c-gnav__list-item-inner a { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .c-gnav__list .c-gnav__list-item:hover .c-gnav__accordion { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); pointer-events: auto; } .c-gnav__list .c-gnav__list-item.is-close:hover .c-gnav__accordion { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); pointer-events: none; } .c-gnav__accordion { position: absolute; /* ----------------------- */ /* top: calc(100% - 20px); */ top: calc(100% - 37px); z-index:99; left: 0; width: 100%; padding-top: 20px; padding-bottom: 0; background-color: #c8ebfa; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: 250ms ease-out; transition: 250ms ease-out; opacity: 0; pointer-events: none; } .c-gnav__accordion--sustainability { /* ----------------------- */ /* top: 100%; */ top: calc(100% - 23px); z-index:99; } .c-gnav__accordion-inner { position: relative; } .c-gnav__accordion-btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; position: absolute; top: 0; right: 0; } .c-gnav__accordion-btn { margin-left: 15px; } .c-gnav__accordion-share { width: 30px; height: 30px; } .c-gnav__accordion-close { font-size: 16px; font-weight: bold; cursor: pointer; } .c-gnav__accordion-close:hover { text-decoration: underline; } .c-gnav__accordion-sitemap { height: 50px; } .c-gnav__accordion-sitemap a { padding: 0 30px 0 15px; font-size: 14px; } .c-gnav__accordion-title { display: inline-block; margin-bottom: 20px; width: auto; height: 50px; } .c-gnav__accordion-title a { font-size: 22px; padding-right: 30px; } .c-gnav__accordion-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-gnav__accordion-wrap#group-banner { opacity: 0; overflow: hidden; margin-top: -50px; -webkit-transition: 300ms ease-out; transition: 300ms ease-out; pointer-events: none; width: 100%; } .c-gnav__accordion-wrap#group-banner.is-active { opacity: 1; margin-top: 0; margin-top: 0; pointer-events: auto; } .c-gnav__accordion-block { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 47.5%; } .c-gnav__accordion-block--full { width: 100%; } .c-gnav__accordion-label { position: relative; width: 100%; margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: center; } .c-gnav__accordion-label:before { content: ""; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 1px; background-color: #007ac5; } .c-gnav__accordion-label span { display: inline-block; position: relative; padding: 0 10px; background-color: #c8ebfa; } .c-gnav__accordion-link { width: 47.3%; height: 64px; margin-bottom: 20px; border-radius: 0; } .c-gnav__accordion-link a { font-size: 16px; border-radius: 0; } .c-gnav__accordion-link--en-guide a { padding: 0; } .c-gnav__accordion-link--en-guide a img:first-child { width: auto; height: 100%; } .c-gnav__accordion-link--en-guide a img { max-width: calc(100% - 70px); } .c-gnav__accordion-block--full .c-gnav__accordion-link { width: 23.25%; margin-right: 2.3%; } .c-gnav__accordion-block--full .c-gnav__accordion-link:nth-child(4n) { margin-right: 0; } .c-gnav__accordion-banner a { padding-left: 15px; padding-right: 35px; } .c-gnav__accordion--ir .c-gnav__accordion-block, .c-gnav__accordion--sustainability .c-gnav__accordion-block { width: 100%; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .c-gnav__accordion--ir .c-gnav__accordion-link, .c-gnav__accordion--sustainability .c-gnav__accordion-link { width: 21.25%; margin-right: 5%; margin-bottom: 20px; } .c-gnav__accordion--ir .c-gnav__accordion-link:nth-child(4n), .c-gnav__accordion--sustainability .c-gnav__accordion-link:nth-child(4n) { margin-right: 0; } /* -- BREADCRUMBS --------------------------------------------- */ .c-breadcrumbs { width: 100%; height: 60px; background-color: #fff; } .c-breadcrumbs--footer { display: none; height: auto; font-size: 12px; background-color: #fff; border-top: 1px solid #f5f5f5; } .c-breadcrumbs__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .c-breadcrumbs--footer .c-breadcrumbs__inner { height: auto; min-height: 44px; } .c-breadcrumbs__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-breadcrumbs__list li { position: relative; margin-right: 27px; font-size: 14px; } .c-breadcrumbs__list li a:hover { text-decoration: underline; } .c-breadcrumbs--footer li { margin-right: 18px; font-size: 12px; } .c-breadcrumbs--footer li:last-child { margin-right: 0; } .c-breadcrumbs--footer li a { text-decoration: underline; } .c-breadcrumbs__list li:after { content: ""; display: block; position: absolute; top: 50%; left: calc(100% + 11px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url(/assets/img/common/icon_btn_arrow2.png); background-repeat: no-repeat; background-position: center center; background-size: contain; } .c-breadcrumbs--footer li:after { left: calc(100% + 6px); width: 5px; height: 7px; } .c-breadcrumbs__list li:last-child:after { content: none; } /* -- FOOTER --------------------------------------------- */ .c-footer { position: relative; background-color: #f0f0f0; } .c-footer__inner { padding: 30px 0 20px; } .c-footer__totop { position: fixed; bottom: 40px; right: 40px; width: 40px; height: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; pointer-events: none; z-index: 100; } .c-footer__totop.is-show { opacity: 1; pointer-events: auto; } .c-footer__totop.is-fix { position: absolute; top: 0; } .c-footer__logo { margin: 0 auto 10px; width: 190px; } .c-footer__logo img { width: 100%; } .c-footer__links { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .c-footer__link { margin-right: 24px; font-size: 14px; font-weight: 700; } .c-footer__link--fb { width: 26px; height: 26px; } .c-footer__link:last-child { margin-right: 0; } .c-footer__link:hover { text-decoration: underline; } .c-footer__copyright { text-align: center; font-size: 12px; } /* -- SECTION --------------------------------------------- */ .c-section { padding-bottom: 85px; } .c-section:last-child { padding-bottom: 0; } /* -- TITLE --------------------------------------------- */ .c-title1 { position: relative; margin-bottom: 40px; padding-bottom: 24px; font-size: 30px; font-weight: 500; line-height: 1.25; } .c-title1--fz-s { font-size: 25px; } .c-title1--center { text-align: center; } .c-title1--pc-center { text-align: center; } .c-title1--mb-s { margin-bottom: 30px; } .c-title1:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background-color: #007ac5; border-radius: 2px; } .c-title1--center:after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-title1--pc-center:after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-title2 { margin-top: 40px; font-size: 20px; font-weight: bold; line-height: 1.5; } .c-title2:first-child { margin-top: 0; } .c-title2--em { color: #007ac5; } .c-title1 + .c-title2 { margin-top: 20px; } .c-title3 { margin-top: 30px; font-size: 18px; font-weight: bold; line-height: 1.5; margin-bottom: 10px; } /* -- PARAGRAPH --------------------------------------------- */ .c-paragraph { margin-top: 30px; font-size: 16px; line-height: 2; } .c-paragraph--mt-l { margin-top: 90px; } .c-paragraph:first-child { margin-top: 0; } .c-title2 + .c-paragraph { margin-top: 20px; } .c-title3 + .c-paragraph { margin-top: 20px; } .c-paragraph2 { font-size: 18px; line-height: 2; } /* -- NOTE --------------------------------------------- */ .c-note { text-indent: -1em; padding-left: 1em; font-size: 12px; line-height: 1.5; } .c-note--noindex { text-indent: 0; padding-left: 0; } .c-note--index15 { text-indent: -1.5em; padding-left: 1.5em; } .c-note--index2 { text-indent: -2em; padding-left: 2em; } .c-note--index25 { text-indent: -2.5em; padding-left: 2.5em; } .c-note--index3 { text-indent: -3em; padding-left: 3em; } .c-note--index4 { text-indent: -4em; padding-left: 4em; } /* -- HEADING --------------------------------------------- */ .c-heading { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #007ac5; padding: 0 20px; height: 120px; display: flex; align-items: center; justify-content: center; -webkit-box-sizing: content-box; box-sizing: content-box; } .c-heading--bg { height: 180px; background-size: 1500px; background-repeat: no-repeat; background-position: center center; } .c-heading__title { margin: 0 auto; padding: 0 40px; max-width: 1280px; width: 100%; color: #fff; font-size: 36px; font-weight: bold; line-height: 1; text-align: center; -webkit-box-sizing: content-box; box-sizing: content-box; } .c-heading__desc { margin-top: 25px; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center; } /* -- PAGE DESC --------------------------------------------- */ .c-page-desc { padding: 80px 0 0; font-size: 20px; font-weight: 500; line-height: 1.5; text-align: center; } /* -- SIDEMENU --------------------------------------------- */ .c-sidemenu__block { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 1px solid #f0f0f0; } .c-sidemenu__item { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 25px; min-height: 70px; font-size: 16px; font-weight: 500; line-height: 1.25; vertical-align: middle; border-bottom: 1px solid #f0f0f0; } .c-sidemenu__item-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; } .c-sidemenu__item:last-child { border-bottom: none; } .c-sidemenu__item a:hover { color: #007ac5; } .c-sidemenu__item--title { font-size: 18px; font-weight: bold; text-align: center; background-color: #dfe3e6; } .c-sidemenu__item--subtitle { font-size: 16px; font-weight: bold; text-align: center; background-color: #eef2f5; } .c-sidemenu__block .c-sidemenu__item--subtitle { padding-left: 40px; } .c-sidemenu__item--link { display: block; padding: 0; } .c-sidemenu__item--link a { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 5px 40px 5px 25px; width: 100%; height: 100%; min-height: 70px; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-sidemenu__block .c-sidemenu__item--link a { padding-left: 40px; } .c-sidemenu__block .c-sidemenu__item--accr { padding-left: 40px; } .c-sidemenu__item--link a:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow3.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; } #energy .c-sidemenu__item--energy, #energy .c-sidemenu__item--energy a, #nature_positive_declaration .c-sidemenu__item--nature_positive_declaration, #nature_positive_declaration .c-sidemenu__item--nature_positive_declaration a, #experience_creation .c-sidemenu__item--experience_creation , #experience_creation .c-sidemenu__item--experience_creation a, #compliance .c-sidemenu__item--compliance , #compliance .c-sidemenu__item--compliance a, #supplier_guideline .c-sidemenu__item--supplier_guideline , #supplier_guideline .c-sidemenu__item--supplier_guideline a, #procurement_policy .c-sidemenu__item--procurement_policy , #procurement_policy .c-sidemenu__item--procurement_policy a, #town_development .c-sidemenu__item--town_development , #town_development .c-sidemenu__item--town_development a, #human_capital .c-sidemenu__item--human_capital, #human_capital .c-sidemenu__item--human_capital a, #policy .c-sidemenu__item--policy, #policy .c-sidemenu__item--policy a, #message .c-sidemenu__item--message a, #vision .c-sidemenu__item--vision a, #business .c-sidemenu__item--business a, #traffic .c-sidemenu__item--traffic a, #hotel .c-sidemenu__item--hotel a, #shopping .c-sidemenu__item--shopping a, #leisure .c-sidemenu__item--leisure a, #sports .c-sidemenu__item--sports a, #living .c-sidemenu__item--living a, #facilities .c-sidemenu__item--facilities a, #facilities_overseas .c-sidemenu__item--facilities_overseas a, #grouplist .c-sidemenu__item--grouplist a, #history .c-sidemenu__item--history a, #governance .c-sidemenu__item--governance, #governance .c-sidemenu__item--governance a, #about .c-sidemenu__item--about a, #organigram .c-sidemenu__item--organigram a, #officer .c-sidemenu__item--officer a, #ir_message .c-sidemenu__item--ir_message a, #risk .c-sidemenu__item--risk a, #disclaimer .c-sidemenu__item--disclaimer a, #koukoku .c-sidemenu__item--koukoku a, #ir_event .c-sidemenu__item--ir_event a, #stock_condition .c-sidemenu__item--stock_condition a, #rating .c-sidemenu__item--rating, #rating .c-sidemenu__item--rating a, #stock .c-sidemenu__item--stock a, #condition .c-sidemenu__item--condition a, #dividend .c-sidemenu__item--dividend a, #ir_mail .c-sidemenu__item--ir_mail a, #rule .c-sidemenu__item--rule a, #basic_info .c-sidemenu__item--basic_info a, #management .c-sidemenu__item--management, #management .c-sidemenu__item--management a, #compliance .c-sidemenu__item--compliance , #compliance .c-sidemenu__item--compliance a, #individual .c-sidemenu__item--individual, #finance .c-sidemenu__item--finance, #individual .c-sidemenu__item--individual a, #finance .c-sidemenu__item--finance a, #stock_finance .c-sidemenu__item--stock_finance, #stock_finance .c-sidemenu__item--stock_finance a, #finance .c-sidemenu__item--finance5th, #finance .c-sidemenu__item--finance5th a, #ir_material .c-sidemenu__item--ir_material, #ir_material .c-sidemenu__item--ir_material a, #stock .c-sidemenu__item--stock, #stock .c-sidemenu__item--stock a, #session .c-sidemenu__item--session a, #highlight .c-sidemenu__item--highlight a, #segment .c-sidemenu__item--segment a, #balance_sheet .c-sidemenu__item--balance_sheet a, #consolidated .c-sidemenu__item--consolidated a, #cash_flow .c-sidemenu__item--cash_flow a, #estimate .c-sidemenu__item--estimate a, #monthly .c-sidemenu__item--monthly a, #safety .c-sidemenu__item--safety a, #communication .c-sidemenu__item--communication a, #environment .c-sidemenu__item--environment, #environment .c-sidemenu__item--environment a, #activities .c-sidemenu__item--activities, #activities .c-sidemenu__item--activities a, #climate_change .c-sidemenu__item--climate_change a, #esg_data .c-sidemenu__item--esg_data a, #latest_material .c-sidemenu__item--latest_material a, #brief_note .c-sidemenu__item--brief_note a, #results_briefing .c-sidemenu__item--results_briefing a, #financial_report .c-sidemenu__item--financial_report a, #factbook .c-sidemenu__item--factbook a, #annual .c-sidemenu__item--annual a, #ir_meeting .c-sidemenu__item--ir_meeting a, #gp_report .c-sidemenu__item--gp_report a, #event .c-sidemenu__item--event a, #analyst .c-sidemenu__item--analyst a, #stock_meeting .c-sidemenu__item--stock_meeting a, #press .c-sidemenu__item--press a, #ir_policy .c-sidemenu__item--ir_policy a, #benefit .c-sidemenu__item--benefit, #benefit .c-sidemenu__item--benefit a, #plan .c-sidemenu__item--plan a, #ir_sitemap .c-sidemenu__item--ir_sitemap a, #agenda .c-sidemenu__item--agenda a, #faq .c-sidemenu__item--faq a, #topics .c-sidemenu__item--topics a, #archive .c-sidemenu__item--archive a, #about .c-sidemenu__item--about a, #presentation .c-sidemenu__item--presentation a, #report .c-sidemenu__item--report a, #governance_rule .c-sidemenu__item--governance_rule a, #specialplan .c-sidemenu__item--specialplan a, #pasmo .c-sidemenu__item--pasmo a, #stock_finance .c-sidemenu__item--stock_finance a, #finance5th .c-sidemenu__item--finance5th a, #procedure .c-sidemenu__item--procedure a, #initiative .c-sidemenu__item--initiative a , #initiative_evaluation .c-sidemenu__item--initiative_evaluation a, #archive.archiveLatest .c-sidemenu__item--archiveLatest a , #archive.archive2022 .c-sidemenu__item--archive2022 a , #archive.archive2021 .c-sidemenu__item--archive2021 a , #archive.archive2020 .c-sidemenu__item--archive2020 a , #archive.archive2019 .c-sidemenu__item--archive2019 a , #archive.archive2018 .c-sidemenu__item--archive2018 a , #safety_health .c-sidemenu__item--safety_health , #safety_health .c-sidemenu__item--safety_health a , #procurement .c-sidemenu__item--procurement , #procurement .c-sidemenu__item--procurement a , #procurement_policy .c-sidemenu__item--procurement_policy , #procurement_policy .c-sidemenu__item--procurement_policy a, #supplier_guideline .c-sidemenu__item--supplier_guideline { color: #007ac5; font-weight: bold; background-color: #c8ebfa; } .c-sidemenu__item--link a:hover { color: #007ac5; background-color: #c8ebfa; } .c-sidemenu__item--accr a:hover { color: #007ac5; } #energy .c-sidemenu__item--energy a:after, #nature_positive_declaration .c-sidemenu__item--nature_positive_declaration a:after, #experience_creation .c-sidemenu__item--experience_creation a:after, #compliance .c-sidemenu__item--compliance a:after, #supplier_guideline .c-sidemenu__item--supplier_guideline a:after, #procurement_policy .c-sidemenu__item--procurement_policy a:after, #human_capital .c-sidemenu__item--human_capital a:after, #policy .c-sidemenu__item--policy a:after, #message .c-sidemenu__item--message a:after, #vision .c-sidemenu__item--vision a:after, #business .c-sidemenu__item--business a:after, #grouplist .c-sidemenu__item--grouplist a:after, #history .c-sidemenu__item--history a:after, #governance .c-sidemenu__item--governance a:after, #about .c-sidemenu__item--about a:after, #organigram .c-sidemenu__item--organigram a:after, #officer .c-sidemenu__item--officer a:after, #finance .c-sidemenu__item--finance a:after, #ir_message .c-sidemenu__item--ir_message a:after, #risk .c-sidemenu__item--risk a:after, #disclaimer .c-sidemenu__item--disclaimer a:after, #koukoku .c-sidemenu__item--koukoku a:after, #ir_event .c-sidemenu__item--ir_event a:after, #stock_condition .c-sidemenu__item--stock_condition a:after, #rating .c-sidemenu__item--rating a:after, #stock .c-sidemenu__item--stock a:after, #condition .c-sidemenu__item--condition a:after, #dividend .c-sidemenu__item--dividend a:after, #ir_mail .c-sidemenu__item--ir_mail a:after, #rule .c-sidemenu__item--rule a:after, #basic_info .c-sidemenu__item--basic_info a:after, #management .c-sidemenu__item--management a:after, #individual .c-sidemenu__item--individual a:after, #finance .c-sidemenu__item--finance a:after, #ir_material .c-sidemenu__item--ir_material a:after, #stock .c-sidemenu__item--stock a:after, #highlight .c-sidemenu__item--highlight a:after, #segment .c-sidemenu__item--segment a:after, #balance_sheet .c-sidemenu__item--balance_sheet a:after, #consolidated .c-sidemenu__item--consolidated a:after, #cash_flow .c-sidemenu__item--cash_flow a:after, #estimate .c-sidemenu__item--estimate a:after, #monthly .c-sidemenu__item--monthly a:after, #faq .c-sidemenu__item--faq a:after, #safety .c-sidemenu__item--safety a:after, #communication .c-sidemenu__item--communication a:after, #environment .c-sidemenu__item--environment a:after, #activities .c-sidemenu__item--activities a:after, #ir_policy .c-sidemenu__item--ir_policy a:after, #benefit .c-sidemenu__item--benefit a:after, #plan .c-sidemenu__item--plan a:after, #ir_sitemap .c-sidemenu__item--ir_sitemap a:after, #archive .c-sidemenu__item--archive a:after, #topics .c-sidemenu__item--topics a:after, #about .c-sidemenu__item--about a:after, #presentation .c-sidemenu__item--presentation a:after, #report .c-sidemenu__item--report a:after, #governance_rule .c-sidemenu__item--governance_rule a:after, #specialplan .c-sidemenu__item--specialplan a:after, #benefit.pasmo .c-sidemenu__item--pasmo a:after, #stock_finance .c-sidemenu__item--stock_finance a:after, #stock_finance .c-sidemenu__item--stock_finance5th a:after, #procedure .c-sidemenu__item--procedure a:after, #initiative .c-sidemenu__item--initiative a:after, .c-sidemenu__item--link a:hover:after { background-image: url("/assets/img/common/icon_btn_arrow2.png"); } .c-sidemenu__item--accr { cursor: pointer; } .c-sidemenu__item--accr:before, .c-sidemenu__item--accr:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; width: 14px; height: 2px; background-color: #a0a0a0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-sidemenu__item--accr:after { -webkit-transform: rotate(90deg) translateX(-1px); -ms-transform: rotate(90deg) translateX(-1px); transform: rotate(90deg) translateX(-1px); } .c-sidemenu__item--accr.is-active:before { -webkit-transform: rotate(-180deg) translateX(0px) translateY(-50%); -ms-transform: rotate(-180deg) translateX(0px) translateY(-50%); transform: rotate(-180deg) translateX(0px) translateY(-50%); } .c-sidemenu__item--accr.is-active:after { -webkit-transform: rotate(0deg) translateX(0px) translateY(0); -ms-transform: rotate(0deg) translateX(0px) translateY(0); transform: rotate(0deg) translateX(0px) translateY(0); } .c-sidemenu__block .c-sidemenu__block { border: none; border-bottom: 1px solid #f0f0f0; } .c-sidemenu__block .c-sidemenu__block:last-child { border-bottom: none; } .c-sidemenu__block .c-sidemenu__block .c-sidemenu__item { padding-left: 45px; } .c-sidemenu__block .c-sidemenu__block .c-sidemenu__item--link { padding-left: 0; } .c-sidemenu__block .c-sidemenu__block .c-sidemenu__item--link a, .c-sidemenu__block .c-sidemenu__block .c-sidemenu__item--accr { padding-left: 60px; } .c-sidemenu__block .c-sidemenu__block .c-sidemenu__block .c-sidemenu__item--link a { padding-left: 80px; } .c-sidemenu__item-small { font-size: 0.7em; font-weight: normal; } /* -- STRIPE LIST --------------------------------------------- */ .c-stripe-list li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-stripe-list li:nth-child(odd) { background-color: #f8f8f8; } .c-stripe-list li:nth-child(even) { background-color: #fff; } .c-stripe-list__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 5px 30px; width: 100%; min-height: 66px; } .c-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .c-grid__item { width: calc((100% - 40px) / 2); } /* -- CARDS --------------------------------------------- */ .c-cards__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .c-cards__list li { margin-right: 3.251%; margin-bottom: 3.251%; width: 31.166%; } .c-cards__list li:nth-child(3n) { margin-right: 0; } .c-cards__item { height: 100%; } .c-cards__item a { display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: #dcebf5; } .c-cards__image { position: relative; overflow: hidden; } .c-cards__image--border { border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid #ddd; border-bottom: none; } .c-cards__image img { width: 100%; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-cards__item a:hover .c-cards__image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .c-cards__content { padding: 30px 10.75%; } .c-cards--small .c-cards__content { padding-left: 8%; padding-right: 8%; } .c-cards__item a:hover .c-cards__content { color: #007ac5; } .c-cards__title { position: relative; font-size: 20px; line-height: 1.2; font-weight: bold; } .c-cards__title:after { content: ""; display: inline-block; margin-left: 15px; width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } .c-cards--small .c-cards__title { font-size: 18px; } .c-cards--small .c-cards__title:after { margin-left: 10px; } .c-cards__desc { margin-top: 14px; font-size: 16px; font-weight: 500; line-height: 1.75; } .c-cards--small .c-cards__desc { font-size: 14px; } @media screen and (max-width: 1030px) { .c-cards__list li { width: 47.5%; margin-right: 5%; margin-bottom: 5%; } .c-cards__list li:nth-child(3n) { margin-right: 5%; } .c-cards__list li:nth-child(2n) { margin-right: 0; } } /* -- IR INFO --------------------------------------------- */ .c-ir-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border: 4px solid #e1e1e1; } .c-ir-info__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 10px; width: 32%; font-size: 22px; font-weight: bold; line-height: 1.3; } .c-ir-info__content { position: relative; padding: 20px 10px 20px 6%; width: 62%; } .c-ir-info__content:after { content: ""; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 24px); background-color: #e1e1e1; } .c-ir-info__label { margin-bottom: 7px; font-size: 18px; font-weight: bold; line-height: 1.3; } .c-ir-info__text { font-size: 16px; line-height: 1.625; } /* -- TABLE --------------------------------------------- */ .c-table-title { margin-bottom: 20px; font-size: 16px; line-height: 1.5; font-weight: bold; } .c-table { table-layout: fixed; width: 100%; max-width: 100%; border: 1px solid #f0f0f0; } .c-table * { max-width: 100%; } .c-table tr { border-bottom: 1px solid #f0f0f0; } .c-table th, .c-table td { padding: 20px 20px; font-size: 16px; text-align: left; line-height: 1.75; font-weight: 500; vertical-align: middle; } .c-table th { background-color: #fafafa; } .c-table th, .c-table td { border-right: 1px solid #f0f0f0; } .c-table th:last-child, .c-table td:last-child { border-right: none; } .c-table th.em, .c-table td.em { background-color: #dadada; } .c-table thead th { background-color: #cdcdcd; } .c-table .total th { background-color: #efefef; } .c-table .total td { background-color: #fafafa; } .c-table--small th, .c-table--small td { font-size: 14px; } /* -- LIST --------------------------------------------- */ .c-list1 { margin-top: 30px; } .c-list1--decimal { list-style: decimal; } .c-list1--decimal > li { margin-left: 1.2em; list-style: decimal; } .c-list1--dot > li { position: relative; padding-left: 1em; } .c-list1--dot > li:before { position: absolute; top: 0; left: 0; content: "・"; font-size: inherit; line-height: inherit; } .c-list1:first-child { margin-top: 0; } .c-list1 li { margin-bottom: 8px; line-height: 1.5; } .c-list1 li:last-child { margin-bottom: 0; } .c-list1--small { font-size: 0.875em; } .c-list1 .c-list1 { margin-top: 10px; } .c-list1 .c-list1:first-child { margin-top: 0; } .c-list-caption + .c-list1 { margin-top: 0; } .c-title2 + .c-list1, .c-title3 + .c-list1 { margin-top: 20px; } /* -- ACCORDION --------------------------------------------- */ .js-accordion2 { position: relative; overflow: hidden; } .js-accordion2:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.8)) ); background-image: -webkit-linear-gradient( top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100% ); background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100% ); opacity: 1; pointer-events: none; } .js-accordion2.is-active:after { opacity: 0; } .c-accr-toggle-btn { position: relative; margin-top: 40px; padding-top: 20px; font-size: 18px; color: #007ac5; font-weight: bold; text-align: center; cursor: pointer; } .c-accr-toggle-btn:before { content: ""; display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%) rotate(180deg); -ms-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); width: 15px; height: 10px; background-image: url("/assets/img/common/icon_accordion.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } .c-accr-toggle-btn .open { display: inline-block; } .c-accr-toggle-btn .close { display: none; } .c-accr-toggle-btn.is-active:before { -webkit-transform: translateX(-50%) rotate(0deg); -ms-transform: translateX(-50%) rotate(0deg); transform: translateX(-50%) rotate(0deg); } .c-accr-toggle-btn.is-active .open { display: none; } .c-accr-toggle-btn.is-active .close { display: inline-block; } .c-modal { display: none; position: fixed; top: 0; left: 0; padding: 100px 40px; width: 100%; height: 100%; overflow: auto; z-index: 100; } .c-modal *:not(a):focus { outline: none; } .c-modal.is-active { display: block; } .c-modal__bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; } .c-modal__inner { position: relative; margin-left: auto; margin-right: auto; padding: 100px; width: 100%; max-width: 1000px; background-color: #fff; } .c-modal__close { position: absolute; top: 40px; right: 40px; width: 44px; z-index: 2; } .c-modal__content { position: relative; width: 100%; } @media screen and (max-width: 768px) { /* -- BUTTON SP --------------------------------------------- */ .c-btn-wrap { width: calc(100% + 6px); margin-left: -3px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .c-btn-wrap * { margin-bottom: 10px; margin-right: 0; } .c-btn-wrap *:last-child { margin-bottom: 0; } .c-btn-wrap2 * { width: 33%; margin-right: 0; } .c-btn-wrap2 *:last-child { margin-bottom: 0; } .c-btn-wrap3 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-btn-wrap3 > * { margin-right: 0; margin-bottom: 4%; } .c-btn-wrap3 > *:nth-child(1), .c-btn-wrap3 > *:nth-child(2) { width: 48%; } .c-btn-wrap3 > *:nth-child(3) { width: 100%; } .c-btn1 { margin-left: 3px; margin-right: 3px; } .c-btn1 a { padding: 6px 30px 6px 6px; font-size: 15px; } .c-btn1 a:after { width: 5px; height: 7px; } .c-btn2 a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; font-size: 12px; padding: 0; text-align: center; } .c-btn2 a:after { position: relative; top: 0; left: 0; right: auto; margin-left: 6px; -webkit-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); width: 6px; height: 9px; } .c-btn2 a:hover:before { opacity: 0; } .c-btn3 { height: 30px; } .c-btn3 a { padding: 8px; font-size: 12px; border-radius: 5px; } .c-btn-wrap3 .c-btn3 a:before { content: none; } /* -- HEADER SP --------------------------------------------- */ .c-header__inner { position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 50; padding-left: 17px; padding-right: 17px; background-color: #f5f5f5; } .c-header__menu-wrap { display: none; } .c-header__menu-sp { display: block; z-index: 40; } .c-header__menu-sp { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; pointer-events: none; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-header__menu-sp-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; } .c-header.is-open .c-header__menu-sp-bg { opacity: 1; pointer-events: auto; } .c-header.is-open .c-header__menu-sp { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto; } .c-header__toggle-btn { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 15px; z-index: 60; } .c-header__toggle-btn span { position: absolute; width: 100%; height: 1px; top: 0; bottom: 0; left: 0; margin: auto; background-color: #28ace9; -webkit-transition: 300ms ease-out; transition: 300ms ease-out; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .c-header__toggle-btn span:nth-child(1) { -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); } .c-header__toggle-btn span:nth-child(3) { -webkit-transform: translateY(7px); -ms-transform: translateY(7px); transform: translateY(7px); } .c-header__toggle-btn.is-once-closed span:nth-child(1) { -webkit-animation-name: closeMenu1; animation-name: closeMenu1; } .c-header__toggle-btn.is-once-closed span:nth-child(2) { -webkit-animation-name: closeMenu2; animation-name: closeMenu2; } .c-header__toggle-btn.is-once-closed span:nth-child(3) { -webkit-animation-name: closeMenu3; animation-name: closeMenu3; } .c-header__toggle-btn.is-open span:nth-child(1) { -webkit-animation-name: openMenu1; animation-name: openMenu1; } .c-header__toggle-btn.is-open span:nth-child(2) { -webkit-animation-name: openMenu2; animation-name: openMenu2; } .c-header__toggle-btn.is-open span:nth-child(3) { -webkit-animation-name: openMenu3; animation-name: openMenu3; } .c-header__search-sp-btn { position: absolute; top: 50%; right: 55px; display: block; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; z-index: 60; } .c-header__search-sp { display: block; position: absolute; top: 100%; left: 0; width: 100%; padding: 10px; background-color: #007ac5; z-index: 50; opacity: 0; pointer-events: none; -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-header__search-sp.is-active { opacity: 1; pointer-events: auto; } .c-header__search-sp form { width: 100%; } .c-header__search-sp:after { content: ""; display: block; position: absolute; bottom: 100%; right: 65px; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); border-left: solid 8px transparent; border-right: solid 8px transparent; border-bottom: solid 10px #007ac5; } .c-header__search-sp-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; } .c-header__search-sp-input { display: block; padding: 12px 10px; width: calc(100% - 70px); height: 34px; background-color: #fff; border-radius: 4px 0 0 4px; } .c-header__search-sp-submit { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 70px; height: 34px; font-size: 15px; letter-spacing: 0.2em; background-color: #dcdcdc; border: none; border-radius: 0 4px 4px 0; } .scrollfixed .c-header__inner { padding-right: 0; } @-webkit-keyframes openMenu1 { 0% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translate(0) rotate(45deg); transform: translate(0) rotate(45deg); } } @keyframes openMenu1 { 0% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translate(0) rotate(45deg); transform: translate(0) rotate(45deg); } } @-webkit-keyframes openMenu2 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes openMenu2 { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes openMenu3 { 0% { -webkit-transform: translateY(7px); transform: translateY(7px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translate(0) rotate(-45deg); transform: translate(0) rotate(-45deg); } } @keyframes openMenu3 { 0% { -webkit-transform: translateY(7px); transform: translateY(7px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translate(0) rotate(-45deg); transform: translate(0) rotate(-45deg); } } @-webkit-keyframes closeMenu1 { 0% { -webkit-transform: translate(0) rotate(45deg); transform: translate(0) rotate(45deg); } 50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 100% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } } @keyframes closeMenu1 { 0% { -webkit-transform: translate(0) rotate(45deg); transform: translate(0) rotate(45deg); } 50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 100% { -webkit-transform: translateY(-7px); transform: translateY(-7px); } } @-webkit-keyframes closeMenu2 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes closeMenu2 { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes closeMenu3 { 0% { -webkit-transform: translate(0) rotate(-45deg); transform: translate(0) rotate(-45deg); } 50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 100% { -webkit-transform: translateY(7px); transform: translateY(7px); } } @keyframes closeMenu3 { 0% { -webkit-transform: translate(0) rotate(-45deg); transform: translate(0) rotate(-45deg); } 50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 100% { -webkit-transform: translateY(7px); transform: translateY(7px); } } /* -- SPNAV SP --------------------------------------------- */ .c-spnav { max-height: calc(100vh - 55px); overflow: auto; } .c-spnav__title { position: relative; border-bottom: 1px solid #eef2f5; font-size: 18px; font-weight: bold; } .c-spnav__title a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 20px; width: 100%; height: 70px; background-color: #dfe3e6; } .c-spnav__title a:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 14px; height: 9px; background-image: url("/assets/img/common/icon_btn_arrow3.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; } .c-spnav__title--accr a:after { display: none; } .c-spnav__title-small { margin-left: 10px; font-size: 0.6em; font-weight: normal; } .c-spnav__toggle-icon { position: absolute; top: 50%; right: 0; width: 50px; height: 70px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 100; } .c-spnav__toggle-icon:before, .c-spnav__toggle-icon:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; width: 14px; height: 2px; background-color: #a0a0a0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 250ms ease-out; transition: 250ms ease-out; } .c-spnav__toggle-icon:after { -webkit-transform: rotate(90deg) translateX(-1px); -ms-transform: rotate(90deg) translateX(-1px); transform: rotate(90deg) translateX(-1px); } .c-spnav__toggle-icon.is-active:before { -webkit-transform: rotate(-180deg) translateX(0px) translateY(-50%); -ms-transform: rotate(-180deg) translateX(0px) translateY(-50%); transform: rotate(-180deg) translateX(0px) translateY(-50%); } .c-spnav__toggle-icon.is-active:after { -webkit-transform: rotate(0deg) translateX(0px) translateY(0); -ms-transform: rotate(0deg) translateX(0px) translateY(0); transform: rotate(0deg) translateX(0px) translateY(0); } .c-spnav__subtitle { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 60px; padding: 0 20px 0 40px; background-color: #eef2f5; border-bottom: 1px solid #dfe3e6; font-size: 18px; font-weight: bold; } .c-spnav__link { min-height: 60px; background-color: #fff; border-bottom: 1px solid #dfe3e6; } .c-spnav__link a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; padding: 0 30px 0 20px; width: 100%; height: 100%; min-height: 60px; font-size: 18px; font-weight: bold; } .c-spnav__link a:after { content: ""; display: block; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 14px; height: 9px; background-image: url("/assets/img/common/icon_btn_arrow3.png"); background-position: center center; background-repeat: no-repeat; background-size: contain; } .c-spnav__block { position: relative; } .c-spnav__block .c-spnav__link a { padding: 0 30px 0 40px; } .c-spnav__block .c-spnav__block .c-spnav__link a { padding: 5px 30px 5px 60px; } .c-spnav__buttons { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-spnav__buttons .c-spnav__link { position: relative; width: 50%; border-right: 1px solid #dfe3e6; } .c-spnav__buttons .c-spnav__link:last-child { border-right: none; } .c-spnav__buttons .c-spnav__link a { font-size: 16px; font-weight: 500; } .c-spnav--en .c-spnav__buttons .c-spnav__link { width: 100%; } .c-spnav__banners { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding: 10px; background-color: #fff; } .c-spnav__banner { margin-bottom: 10px; width: calc((100% - 10px) / 2); } .c-spnav__banner .c-btn3 { height: auto; border-radius: 0; border: 1px solid #dfe3e6; } .c-spnav__banner .c-btn3 a { min-height: 56px; padding: 10px; font-size: 13px; } .c-spnav__banner--en-guide .c-btn3 a { padding: 0; } .c-spnav__banner--en-guide .c-btn3 a img:first-child { width: auto; height: 54px; } /* -- BREADCRUMBS SP --------------------------------------------- */ .c-breadcrumbs { display: none; } .c-breadcrumbs__list { line-height: 1.5; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-breadcrumbs--footer { display: block; } /* -- FOOTER SP --------------------------------------------- */ .c-footer__totop { right: 20px; width: 50px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 10; } .c-footer__logo { margin-bottom: 22px; width: 270px; } .c-footer__logo--group { width: 200px; } .c-footer__links { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-footer__link { margin-right: 0; margin-bottom: 25px; text-decoration: underline; } /* -- SECTION SP --------------------------------------------- */ .c-section { padding-bottom: 60px; } /* -- TITLE SP --------------------------------------------- */ .c-title1 { margin-bottom: 30px; padding-bottom: 20px; font-size: 20px; } .c-title1--pc-center { text-align: left; } .c-title1--pc-center:after { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .c-title1--sp-center { text-align: center; } .c-title1--sp-center:after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .c-title2 { margin-top: 20px; font-size: 16px; } .c-title3 { margin-top: 20px; font-size: 16px; } /* -- PARAGRAPH SP --------------------------------------------- */ .c-paragraph { margin-top: 20px; } .c-title2 + .c-paragraph { margin-top: 10px; } .c-paragraph2 { font-size: 14px; } /* -- HEADING SP --------------------------------------------- */ .c-heading { padding: 10px 17px; min-height: 80px; } .c-heading--bg { height: auto; padding-top: 15px; padding-bottom: 15px; min-height: 160px; background-size: cover; } .c-heading__title { font-size: 25px; padding: 0; } .c-heading__title--small { font-size: 20px; } .c-heading__desc { margin-top: 20px; font-size: 14px; } /* -- PAGE DESC SP --------------------------------------------- */ .c-page-desc { padding-top: 30px; font-size: 16px; text-align: left; } /* -- STRIPE LIST SP --------------------------------------------- */ .c-stripe-list__inner { padding: 20px 17px; } .c-grid { display: block; margin-bottom: 20px; } .c-grid__item { width: 100%; margin-bottom: 20px; } .c-grid__item:last-child { margin-bottom: 0; } /* -- CARDS SP --------------------------------------------- */ .c-cards__list { display: block; } .c-cards__list li { width: 100%; margin-right: 0; } .c-cards__list li:last-child { margin-bottom: 0; } .c-cards__content { padding: 25px; } /* -- IR INFO SP --------------------------------------------- */ .c-ir-info { display: block; border: 2px solid #e1e1e1; } .c-ir-info__title { padding: 10px; width: 100%; font-size: 18px; } .c-ir-info__content { width: 100%; } .c-ir-info__content:after { top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: calc(100% - 20px); height: 1px; } .c-ir-info__label { font-size: 16px; line-height: 1.3; } .c-ir-info__text { font-size: 14px; } /* -- TABLE SP --------------------------------------------- */ .c-table-title { margin-bottom: 10px; } .c-table th, .c-table td { padding: 10px; line-height: 1.5; } .c-table-wrap { width: calc(100% + 34px); margin-left: -17px; overflow: auto; } .c-table-wrap .c-table { width: 600px; } .c-table-wrap .c-table th, .c-table-wrap .c-table td { padding: 10px; } .c-table--sp-grid1 th, .c-table--sp-grid1 td { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 10px; width: 100%; } .c-table--sp-grid1 th { border-bottom: 1px solid #f0f0f0; } .c-table--sp-grid1 td { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .c-table--sp-small th, .c-table--sp-small td { font-size: 14px; } /* -- ACCORDION SP --------------------------------------------- */ .c-accr-toggle-btn { font-size: 14px; } .c-modal { padding: 80px 20px; } .c-modal__inner { padding: 40px 20px; } .c-modal__close { top: 15px; right: 20px; width: 24px; } .c-modal__content { padding-left: 0; } } /* -- vaccine --------------------------------------------- */ #vaccine .c-cards__image{ display:flex; height:240px; width:100%; background:#fff; align-items: center; justify-content: center; border-top: 1px solid #c9c7c7; border-left: 1px solid #c9c7c7; border-right: 1px solid #c9c7c7; border-radius: 10px 10px 0 0; box-sizing: border-box; } #vaccine .c-cards__image > div{ font-size: 26px; font-weight: bold; } #vaccine .c-cards__item{ display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: #dcebf5; } #vaccine .c-cards__content_out p{ margin-bottom:10px; } #vaccine .c-cards__content_out a:hover{ color: #007ac5; } .p-vaccine-city-list{ max-width:840px; border-bottom: 1px solid #f0f0f0; margin:auto; padding: 20px 0; } @media screen and (max-width: 768px){ .p-vaccine-city-tokyo{ padding: 0 0 20px; } } .p-vaccine-city-list-padding{ padding:30px 0 ; } @media screen and (max-width: 768px){ .p-vaccine-city-list-padding{ padding:0 ; } } #vaccine .p-group-section{ border:none; } #vaccine .p-grouplist-list__list li { padding-right: 20px; margin-bottom: 20px; width: calc(100% / 5); line-height: 1.5; } @media screen and (max-width: 768px){ #vaccine .p-grouplist-list__list li { margin-bottom: 8px; padding-right: 16px; width: 50%; font-size: 14px; line-height: 1.5; } } .p-vaccine-city-list-paragraph{ max-width:840px; margin:30px auto 0; } #vaccine .p-vaccine-city-list-paragraph .inline{ display:inline-block; } @media screen and (max-width: 768px){ .l-container-vaccine-sp.u-ta-r{ text-align: left !important; } } /* 2023.4 */ /* サステナビリティトップ */ #sustainability .p-ir-nav__item{ width:49%; } #sustainability .p-ir-link_list .p-ir-link_list_ul{ display: flex; flex-wrap: wrap; width: 100%; } @media screen and (max-width: 768px){ #sustainability .p-ir-link_list .p-ir-link_list_ul{ display: block; } } #sustainability .p-ir-link_list .p-ir-link_list_ul li{ width:49%; } @media screen and (max-width: 768px){ #sustainability .p-ir-link_list .p-ir-link_list_ul li{ width:100%; } #sustainability .p-ir-nav__content.ir-nav_list_pd{ min-height: 83px; } } #sustainability .p-ir-block-indent{ margin-left:14px; } #sustainability .p-ir-link_list .p-ir-link_list_ul li.all{ width:100%; } #sustainability .pc-only{ display:block; } .sustainability-top-line-height{ line-height:1.4; } .p-ir-link_list .p-ir-link_list_ul li a.sustainability-top-blank{ display:inline-block; } .p-ir-nav__item__dummy{ width: 22.5%; } @media screen and (max-width: 768px){ .p-ir-nav__item__dummy{ display:none; } } .p-ir-nav__item.single__unit{ background:none; } @media screen and (max-width: 768px){ .p-ir-nav__item.single__unit .p-ir-nav__title a{ position:relative; } .p-ir-nav__item.single__unit .p-ir-nav__title a:after { content: ""; display: block; position: absolute; top: 50%; right: -18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 9px; height: 14px; background-image: url("/assets/img/common/icon_btn_arrow2.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } } /* サステナビリティアーカイブ */ .c-side-year{ display:none; } #archive .c-side-year{ display:block; margin-top:20px; border: 1px solid #f0f0f0; } @media screen and (max-width: 768px){ #archive .l-wrap{ display:block; } #archive .l-aside{ display:block; width:100%; margin-left: 0; } #archive .c-sidemenu{ display:none; } #archive .c-sidemenu.c-side-year { display: block; } } /* サステナビリティアーカイブTOP */ .p-ir-nav__item a.haikibutu, .p-ir-nav__item a.jinnzai, .p-ir-nav__item a.kannri { height:auto; margin-bottom: 8px; } .p-ir-nav__item a.lossToValue, .p-ir-nav__item a.diversity, .p-ir-nav__item a.safety_health { height:auto; } /* マネジメント */ #management #agenda .p-sustainability-cards__item{ width: 120px; } @media screen and (max-width: 768px){ #management #agenda .p-sustainability-cards__item{ width: calc((100% - 30px) / 3); } } #management #agenda .p-sustainability-block-title__sub{ padding-right:30px; } @media screen and (max-width: 768px){ #management #agenda .p-sustainability-block-title__sub{ padding-right:0; } }