@charset "UTF-8";
/*!
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
*/
/**
 # Foundation
 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,200;0,300;0,400;0,700;1,300;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

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,
sub,
sup,
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;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  box-sizing: border-box;
}

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;
}

/* reset for form */
input[type="text"] {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  box-sizing: border-box;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-sizing: border-box;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS UI Gothic", sans-serif;
  color: #000;
  text-align: left;
  background-color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  overflow-x: hidden;
  font-weight: 400;
}

.transition {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hover:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.pc {
  display: block !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

.smp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .smp {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 4.06vw;
    padding: 0;
  }
}

/**
 # Vendor CSS
 */
/**
 # Layout
 */
/*--------------------------------------------------------------
    # footer.scss
--------------------------------------------------------------*/
.l--footer {
  background-color: #fff;
  padding: 50px 0 65px;
}

.l--footer__inner {
  max-width: 960px;
  margin: 0 auto;
}

.l--footer-logo {
  display: block;
  width: 302px;
  margin: 0 auto 25px;
}

.l--footer-logo img {
  width: 100%;
  vertical-align: bottom;
}

.l--footer-list {
  text-align: center;
  letter-spacing: -0.45em;
  margin: 0 0 30px;
}

.l--footer-list li {
  letter-spacing: normal;
  display: inline-block;
  margin: 0 15px 0 0;
  padding: 0 20px 0 0;
  border-right: 1px solid #dddddd;
}

.l--footer-list li a {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  padding: 0 40px 0 0;
  background-image: url("https://www.heiwa-re.co.jp/assets/css/../img/common/icon-blank.png");
  background-repeat: no-repeat;
  background-position: 98.65% center;
  background-size: 10px 10px;
  padding: 0 20px 0 0;
}

.l--footer-list li a:link {
  color: #333;
  text-decoration: none;
}

.l--footer-list li a:visited {
  color: #333;
  text-decoration: none;
}

.l--footer-list li a:hover {
  color: #333;
  text-decoration: none;
  opacity: 0.35;
}

.l--footer-list li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.l--footer-copyright {
  display: block;
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .l--footer {
    background-color: #fff;
    padding: 10.66667vw 0;
  }

  .l--footer__inner {
    max-width: initial;
  }

  .l--footer-logo {
    width: 80.53333vw;
    margin: 0 auto 10.66667vw;
  }

  .l--footer-list {
    text-align: left;
    letter-spacing: normal;
    margin: 0 0 12vw;
  }

  .l--footer-list li {
    display: block;
    margin: 0;
    padding: 7.46667vw 4.26667vw;
    border-top: 1px solid #dddddd;
    border-right: none;
    background-image: url("../images/common/parts/arrow__btn.png");
    background-repeat: no-repeat;
    background-position: 90.65% center;
    background-size: 6.4vw 4.26667vw;
  }

  .l--footer-list li a {
    font-size: 4.26667vw;
    margin: 0;
    display: inline-block;
    background-image: url("https://www.heiwa-re.co.jp/assets/img/common/icon-blank.png");
    background-repeat: no-repeat;
    background-position: 98.65% center;
    background-size: 10px 10px;
    padding: 0 20px 0 0;
  }

  .l--footer-list li:last-child a {
    padding: 7.46667vw 4.26667vw;
  }

  .l--footer-list li:last-child {
    border-top: 1px solid #dddddd;
  }

  .l--footer-copyright {
    display: block;
    font-size: 1.3rem;
    text-align: center;
  }
}

/*
     Page top
--------------------------------------------------------------*/
.page--top-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 50;
  width: 60px;
  height: 60px;
  background-color: #a28947;
}

.page--top-wrap a {
  position: absolute;
  display: block;
  width: 60px;
  height: 60px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.page--top-wrap a:before {
  width: 16px;
  height: 2px;
  margin-top: -10px;
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.page--top-wrap a:after {
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  margin-left: -2px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}

.page--top-wrap a:hover {
  opacity: 0.65;
}

@media screen and (max-width: 768px) {
  .page--top-wrap {
    width: 21.33333vw;
    height: 21.33333vw;
    bottom: 5.33333vw;
    right: 5.33333vw;
  }

  .page--top-wrap a {
    right: 0;
    position: absolute;
    display: block;
    width: 21.33333vw;
    height: 21.33333vw;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .page--top-wrap a:before {
    width: 16px;
    height: 2px;
    margin-top: -10px;
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .page--top-wrap a:after {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    margin-left: -2px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .page--top-wrap a:hover {
    opacity: 0.65;
  }
}

/*--------------------------------------------------------------
    # header.scss
--------------------------------------------------------------*/
.l--header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.l--header__inner {
  position: relative;
  height: 96px;
}

.l--header-logo {
  position: absolute;
  top: 21px;
  left: 32px;
  width: 302px;
  display: block;
}

.l--header-logo a {
  display: block;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.l--header-logo a:hover {
  opacity: 0.45;
}

.l--header-logo a img {
  width: 100%;
  vertical-align: bottom;
}

.l--header.hide {
  transform: translateY(-100%);
}

@media screen and (max-width: 768px) {
  .l--header__inner {
    height: 25.6vw;
  }

  .l--header-logo {
    top: 6.66667vw;
    left: 4.26667vw;
    width: 70.13333vw;
  }
}

/**
 # Objects -  Compornent -
 */
/**
 # Objects -  project -
 */
/*
    animation.scss
---------------------------------------------------------------------------- */
/*
    home[keyvisual]
--------------------------------------------------------------*/
body.loaded .h--keyv-title-subText,
body.loaded .h--keyv-title-subText::after {
  animation-delay: 3.45s;
  animation-iteration-count: 1;
  animation-duration: 1800ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

body.loaded .h--keyv-title-mainText,
body.loaded .h--keyv-title-mainText::after {
  animation-delay: 3.5s;
  animation-iteration-count: 1;
  animation-duration: 1800ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

body.loaded .h--keyv-title-mainText {
  animation-delay: 3.5s;
  animation-duration: 2.1s;
  animation-iteration-count: 1;
  position: relative;
  animation-name: clip-text;
  color: #122e5a;
  display: inline-block;
}

body.loaded .h--keyv-title-mainText::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

body.loaded .h--keyv-title-subText {
  animation-delay: 3.45s;
  animation-duration: 2.1s;
  animation-iteration-count: 1;
  position: relative;
  animation-name: clip-text;
  color: #fff;
  display: inline-block;
}

body.loaded .h--keyv-title-subText::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

body.loading .h--keyv-banner {
  opacity: 0;
  transform: translateX(100px);
  transition: 1s cubic-bezier(0.09, 0.43, 0.1, 0.79) 2s;
}

body.loaded .h--keyv-banner {
  opacity: 1;
  transform: translateX(0);
}

body.loading .h--keyv-scroll {
  opacity: 0;
  transition: 1s cubic-bezier(0.09, 0.43, 0.1, 0.79) 1.5s;
}

body.loaded .h--keyv-scroll {
  opacity: 1;
}

body.loading .h--keyv__bg {
  opacity: 0;
  background-color: #fff;
  transform: translateX(-30vw);
  transition: 0.25s cubic-bezier(0.09, 0.43, 0.1, 0.79) 1s;
}

body.loaded .h--keyv__bg {
  opacity: 1;
  transform: translateX(0);
  background-color: #122e5a;
}

body.loading .h--keyv-imgbox {
  opacity: 0;
  transform: scale(1.2);
  transition: 1s cubic-bezier(0.09, 0.43, 0.1, 0.79) 2.5s;
}

body.loaded .h--keyv-imgbox {
  opacity: 1;
  transform: scale(1);
}

/*
    home[1stblock]
--------------------------------------------------------------*/
body.loading .h--message {
  opacity: 0;
  transform: translateY(100px);
  transition: 1s cubic-bezier(0.09, 0.43, 0.1, 0.79) 1.5s;
}

body.loaded .h--message {
  opacity: 1;
  transform: translateY(0);
}

/*
    home[contents]
--------------------------------------------------------------*/
.slideLeftAni {
  opacity: 0;
}

.lazyloaded .slideLeftAni,
.lazyloaded .slideLeftAni::after {
  opacity: 1;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-duration: 1.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.lazyloaded .slideLeftAni {
  animation-delay: 0;
  animation-duration: 1.6s;
  animation-iteration-count: 1;
  position: relative;
  animation-name: clip-text;
  display: inline-block;
}

.lazyloaded .slideLeftAni::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #122e5a;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

.slideRightAni {
  opacity: 0;
}

.lazyloaded .slideRightAni,
.lazyloaded .slideRightAni::after {
  opacity: 1;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-duration: 1.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.lazyloaded .slideRightAni {
  animation-delay: 0;
  animation-duration: 1.6s;
  animation-iteration-count: 1;
  position: relative;
  animation-name: clip-text2;
  display: inline-block;
}

.lazyloaded .slideRightAni::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #122e5a;
  transform: scaleX(0);
  transform-origin: 50% 0;
  pointer-events: none;
  animation-name: text-revealer2;
}

.lazyloaded .ani01 {
  animation-delay: 0.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani01:after {
  animation-delay: 0.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani02 {
  animation-delay: 1.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani02:after {
  animation-delay: 1.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani03 {
  animation-delay: 2.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani03:after {
  animation-delay: 2.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani04 {
  animation-delay: 3.5s;
  animation-duration: 0.5s;
}

.lazyloaded .ani04:after {
  animation-delay: 3.5s;
  animation-duration: 0.5s;
}

/*
    home[sectioin]
--------------------------------------------------------------*/
.h--section {
  opacity: 0;
  transform: translateY(130px);
  transition: 1.5s cubic-bezier(0.09, 0.43, 0.1, 0.79) 0.25s;
}

.h--section.lazyloaded {
  opacity: 1;
  transform: translateY(0);
}

.h--sectionB {
  opacity: 0;
  transform: translateY(130px);
  transition: 1.5s cubic-bezier(0.09, 0.43, 0.1, 0.79) 0.25s;
}

.h--sectionB.lazyloaded {
  opacity: 1;
  transform: translateY(0);
}

/*
    home[sectioin photo]
--------------------------------------------------------------*/
.h--section-photo {
  opacity: 0;
  transform: scale(0.85);
  transition: 0.5s cubic-bezier(0.09, 0.43, 0.1, 0.79) 0.25s;
}

.h--section-photo.lazyloaded {
  opacity: 1;
  transform: scale(1);
}

.h--sectionB-photo {
  opacity: 0;
  transform: scale(0.85);
  transition: 0.5s cubic-bezier(0.09, 0.43, 0.1, 0.79) 0.25s;
}

.h--sectionB-photo.lazyloaded {
  opacity: 1;
  transform: scale(1);
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes text-revealer {

  0%,
  50% {
    transform-origin: 0 50%;
  }

  60%,
  100% {
    transform-origin: 100% 50%;
  }

  60% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes clip-text2 {
  from {
    clip-path: inset(0 0 0 100%);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes text-revealer2 {

  0%,
  50% {
    transform-origin: 100% 50%;
  }

  60%,
  100% {
    transform-origin: 0 100%;
  }

  60% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

/*
    Hamburger menu
---------------------------------------------------------------------------- */
.scroll-lock {
  overflow: hidden;
}

.burger--wrap {
  height: 64px;
  width: 64px;
  top: 16px;
  right: 32px;
  position: absolute;
  z-index: 400;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.burger {
  width: 32px;
  height: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  position: relative;
}

.burger .line {
  width: 32px;
  height: 2px;
  background: #122e5a;
  transition: 0.3s;
  right: 0;
  position: absolute;
}

.burger::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  top: 0;
  right: 0;
  background: #122e5a;
  transition: 0.6s;
}

.burger::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  bottom: 0;
  right: 0;
  background: #122e5a;
  transition: 0.8s;
}

.navigation.nav-active {
  display: block;
  z-index: 300;
  animation: show 0.25s linear 0s;
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.navigation {
  display: none;
  opacity: 0;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.navigation .navigation--content {
  background-color: #122e5a;
  padding: 0;
  height: 100vh;
  width: 100%;
  position: absolute;
  right: 0;
  z-index: 100;
}

.navigation .navigation--content__inner {
  position: relative;
  padding: 180px 0 0;
}

.navigation-logo {
  position: absolute;
  left: 32px;
  top: 21px;
  width: 302px;
}

.navigation-logo img {
  width: 100%;
  vertical-align: bottom;
}

.navigation-list {
  width: 79.94186047%;
  margin: 0 auto;
}

.navigation-list__inner {
  display: flex;
  flex-wrap: wrap;
}

.navigation-box {
  width: 29.09090909%;
  margin: 0 6.363636364% 60px 0;
}

.navigation-box:nth-child(3n) {
  margin: 0 0 60px 0;
}

.navigation-box dt {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0 0 35px;
}

.navigation-box dd a {
  display: block;
  margin: 0 0 12px;
  padding: 0 0 0 30px;
  font-size: 1.5rem;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  line-height: 1.5;
  background-image: url(../images/common/parts/arrow__03.png);
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left 8px;
}

.navigation-box dd a:link {
  color: #fff;
  text-decoration: none;
}

.navigation-box dd a:visited {
  color: #fff;
  text-decoration: none;
}

.navigation-box dd a:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.65;
}

.navigation-button {
  text-align: center;
  letter-spacing: -0.45em;
}

.navigation-button li {
  letter-spacing: normal;
  display: inline-block;
}

.navigation-button li a {
  color: #122e5a;
  font-size: 1.6rem;
  border-radius: 4px;
  width: 192px;
  display: block;
  line-height: 4.8rem;
  height: 48px;
  text-align: center;
  background-color: #fff;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin: 0 7px;
}

.navigation-button li a:link {
  color: #122e5a;
  text-decoration: none;
}

.navigation-button li a:visited {
  color: #122e5a;
  text-decoration: none;
}

.navigation-button li a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #000;
}

.navigation-search {
  margin: 0 auto 20px;
  max-width: 400px;
  position: relative;
}

.navigation-search .search-input {
  height: 48px;
  width: 400px;
  background-color: #d0d5de;
  border-radius: 24px;
  padding: 0 20px 0 60px;
}

.navigation-search .search-input::placeholder {
  color: #71819c;
  font-size: 1.6rem;
}

.navigation-search .search-button {
  position: absolute;
  background-image: url(../images/common/parts/icon__search.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  top: 17px;
  left: 30px;
  display: block;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.burger--wrap.burger--wrap-active {
  background-color: #fff;
}

.burger-active::before {
  transform: rotate(135deg);
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #122e5a;
}

.burger-active::after {
  transform: rotate(-135deg);
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #122e5a;
  width: 100%;
}

.burger-active>.line {
  transform: scale(0);
}

.nav-active {
  top: 0;
  right: 0;
  opacity: 1;
}

.burger-active .line {
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .burger--wrap {
    height: 13.33333vw;
    width: 13.33333vw;
    top: 6.4vw;
    right: 4.26667vw;
  }

  .burger {
    width: 8.53333vw;
    height: 3.73333vw;
  }

  .burger .line {
    width: 8.53333vw;
  }

  .burger::before {
    width: 8.53333vw;
  }

  .burger::after {
    width: 8.53333vw;
  }

  .navigation {
    display: none;
    opacity: 0;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #122e5a;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }

  .navigation .navigation--content {
    background-color: #122e5a;
    padding: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    z-index: 100;
  }

  .navigation .navigation--content__inner {
    padding: 26.66667vw 0 0;
  }

  .navigation-logo {
    top: 6.66667vw;
    left: 4.26667vw;
    width: 70.13333vw;
  }

  .navigation-list {
    width: auto;
    margin: 0 auto;
  }

  .navigation-list__inner {
    display: block;
  }

  .navigation-box {
    width: auto;
    margin: 0;
  }

  .navigation-box:nth-child(3n) {
    margin: 0;
  }

  .navigation-box div {
    display: none;
  }

  .navigation-box dt {
    font-size: get_wv(16);
    margin: 0;
    border-bottom: 1px solid #fff;
    padding: 4vw 10.66667vw 4vw 5.33333vw;
    line-height: 1.3;
    cursor: pointer;
    position: relative;
  }

  .navigation-box dt i {
    display: block;
    position: absolute;
    right: 5.33333vw;
    top: 4vw;
  }

  .navigation-box dt i:before {
    content: "";
    display: block;
    width: 5.33333vw;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 2.4vw;
    right: 0vw;
  }

  .navigation-box dt i:after {
    content: "";
    display: block;
    width: 2px;
    height: 5.33333vw;
    background-color: #fff;
    position: absolute;
    top: 0vw;
    right: 2.4vw;
  }

  .navigation-box dt.active i:after {
    display: none;
  }

  .navigation-box dd a {
    margin: 0;
    padding: 5.33333vw 5.33333vw 5.33333vw 10.66667vw;
    font-size: 3.73333vw;
    border-bottom: 1px solid #122e5a;
    background-color: #fff;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    line-height: 1.5;
    background-image: url(../images/common/parts/arrow__03__smp.png);
    background-repeat: no-repeat;
    background-size: 3.2vw 2.13333vw;
    background-position: 5.86667vw 7.2vw;
  }

  .navigation-box dd a:link {
    color: #122e5a;
    text-decoration: none;
  }

  .navigation-box dd a:visited {
    color: #122e5a;
    text-decoration: none;
  }

  .navigation-box dd a:hover {
    color: #122e5a;
    text-decoration: none;
    opacity: 0.65;
  }

  .navigation-button {
    margin: 8vw 0 0;
    text-align: center;
  }

  .navigation-button li {
    letter-spacing: normal;
    display: inline-block;
  }

  .navigation-button li a {
    color: #122e5a;
    font-size: 4.26667vw;
    border-radius: 1.06667vw;
    width: 42.66667vw;
    line-height: 12.8vw;
    height: 12.8vw;
    margin: 0 2.66667vw;
  }

  .navigation-search {
    margin: 13.33333vw auto 5.33333vw;
    max-width: 96vw;
    position: relative;
  }

  .navigation-search .search-input {
    height: 12.8vw;
    width: 96vw;
    border-radius: 6.4vw;
    padding: 0 5.33333vw 0 16vw;
  }

  .navigation-search .search-input::placeholder {
    font-size: 3.73333vw;
  }

  .navigation-search .search-button {
    position: absolute;
    background-image: url(../images/common/parts/icon__search.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 4.53333vw;
    left: 8vw;
    display: block;
    width: 4vw;
    height: 4vw;
    cursor: pointer;
  }

  .burger--wrap.burger--wrap-active {
    background-color: #fff;
  }

  .burger-active::before {
    transform: rotate(135deg);
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #122e5a;
  }

  .burger-active::after {
    transform: rotate(-135deg);
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #122e5a;
    width: 100%;
  }

  .burger-active>.line {
    transform: scale(0);
  }

  .nav-active {
    top: 0;
    right: 0;
    opacity: 1;
  }

  .burger-active .line {
    background-color: #fff;
  }
}

/**
 # Objects -  pages -
 */
/*--------------------------------------------------------------
    # _home.scss
--------------------------------------------------------------*/
/*  KeyVisual
--------------------------------------------------------------*/
.h--keyv {
  position: relative;
  margin: 0 0 13.80814vw;
  z-index: 1;
}

.h--keyv-imgbox {
  margin-left: 14.17151163%;
  height: 41.56977vw;
  display: block;
  background-image: url(../images/second/home/main.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.h--keyv-imgbox img {
  width: 100%;
  vertical-align: bottom;
}

.h--keyv__bg {
  background-color: #122e5a;
  width: 93.02325581%;
  height: calc(105%);
  position: absolute;
  top: 12.5%;
  left: 0;
  z-index: -1;
}

.h--keyv-scroll {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  position: absolute;
  bottom: -38.56%;
  left: 4.18023vw;
  width: auto;
  height: 60px;
  text-transform: uppercase;
  letter-spacing: 0.128em;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  transform: rotate(90deg) translate3d(-14.53488vw, 0, 0);
  transform-origin: top left;
}

.h--keyv-scroll-in {
  display: flex;
  width: 100%;
}

.h--keyv-scroll-text {
  transform: rotate(-90deg) translate3d(0, 0, 0);
  transform-origin: top left;
  position: relative;
  top: 35px;
  left: 35px;
  font-size: 14px;
}

.h--keyv-scroll-line {
  overflow: hidden;
  position: relative;
  width: 55px;
}

.h--keyv-scroll-line:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 55px;
  height: 2px;
}

.h--keyv-scroll-line:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 55px;
  height: 2px;
  background-color: #fff;
  animation: scroll 2s infinite normal;
}

.h--keyv-banner {
  position: absolute;
  right: 7.26744186%;
  width: 50.87209vw;
  z-index: 10;
  bottom: -6.123vw;
}

.h--keyv-banner-list {
  width: auto;
  margin: 0;
}

.h--keyv-banner-list__inner {
  display: flex;
  align-items: center;
}

.h--keyv-banner-titleBox {
  padding: 0 1.45349vw 0 0;
}

.h--keyv-banner-title {
  font-size: 1.74419vw;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
}

.h--keyv-banner-titleSub {
  font-size: 1.01744vw;
  font-weight: 400;
  color: #122e5a;
  color: #fff;
}

.h--keyv-banner-titleSub a {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  display: inline-block;
  padding: 0 1.45349vw 0 0;
  background-image: url("../images/common/parts/icon-blank__wh.png");
  background-repeat: no-repeat;
  background-position: 98.65% center;
  background-size: 10px 10px;
}

.h--keyv-banner-titleSub a:link {
  color: #fff;
  text-decoration: none;
}

.h--keyv-banner-titleSub a:visited {
  color: #fff;
  text-decoration: none;
}

.h--keyv-banner-titleSub a:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.65;
}

.h--keyv-banner-meta {
  padding: 0 1.45349vw 0 0;
  display: flex;
}

.h--keyv-banner-metaTitle {
  font-size: 1.01744vw;
  margin: 0 1.45349vw 0 0;
  display: block;
  color: #fff;
  line-height: 1.2;
}

.h--keyv-banner-metaTitle a {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  display: inline-block;
  padding: 0 1.45349vw 0 0;
  background-image: url("../images/common/parts/icon-blank__wh.png");
  background-repeat: no-repeat;
  background-position: 98.65% center;
  background-size: 0.72674vw 0.72674vw;
}

.h--keyv-banner-metaTitle a:link {
  color: #fff;
  text-decoration: none;
}

.h--keyv-banner-metaTitle a:visited {
  color: #fff;
  text-decoration: none;
}

.h--keyv-banner-metaTitle a:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.65;
}

.h--keyv-banner-metaResult {
  color: #fff;
  font-size: 1.16279vw;
  padding: 0 0.36337vw 0 0;
  align-self: flex-end;
  line-height: 1;
}

.h--keyv-banner-metaResult strong {
  font-size: 4.65116vw;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  margin: 0 0.36337vw 0 0;
  line-height: 1;
}

.h--keyv-banner-metaResultPer {
  display: none;
}

.h--keyv-banner-metaResultUnit {
  color: #fff;
  font-size: 1.16279vw;
  padding: 0 6.38% 0 0;
}

.h--keyv-banner .slick-arrow {
  cursor: pointer;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  position: absolute;
  top: 44.5%;
  width: 1.45349vw;
  height: 0.72674vw;
  z-index: 10;
}

.h--keyv-banner .slick-arrow.next {
  right: 2.5%;
  top: 70.5%;
  background-image: url(../images/common/parts/arrow__s__next.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.h--keyv-banner .slick-arrow.prev {
  right: 2.5%;
  top: 40.5%;
  background-image: url(../images/common/parts/arrow__s__prev.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.h--keyv-title-mainColor,
.h--keyv-title-subColor {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 6.97674vw;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  top: 65%;
  height: calc(100% - 10%);
  overflow: hidden;
  left: 5.813953488%;
  z-index: 3;
}

.h--keyv-title-mainColor {
  width: 100%;
  margin-left: 8.37151163%;
}

.h--keyv-title-subColor {
  width: 8.37151163%;
}

.h--keyv-title-mainColor span,
.h--keyv-title-subColor span {
  display: block;
  position: absolute;
}

.h--keyv-title-mainColor span {
  width: 100%;
  color: #122e5a;
  left: -8.37151163%;
}

.h--keyv-title-subColor span {
  width: 500%;
  color: #fff;
}

@keyframes scroll {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@media screen and (max-width: 768px) {
  .h--keyv {
    margin: 0 0 8.53333vw;
    height: 177.86667vw;
  }

  .h--keyv-imgbox {
    margin-left: 25.6%;
    height: 118.13333vw;
  }

  .h--keyv__bg {
    background-color: #122e5a;
    width: 91.46666667%;
    height: 144vw;
    top: 34.13333vw;
  }

  .h--keyv-scroll {
    display: none;
  }

  .h--keyv-banner {
    position: absolute;
    right: inherit;
    left: 6.66667vw;
    width: 78.66667vw;
    bottom: 4.56vw;
  }

  .h--keyv-banner-list__inner {
    display: block;
  }

  .h--keyv-banner-titleBox {
    width: auto;
    padding: 8vw 0 2.66667vw;
  }

  .h--keyv-banner-title {
    font-size: 6.4vw;
    margin: 0 0 3.2vw;
    text-align: center;
  }

  .h--keyv-banner-titleSub {
    text-align: center;
    font-size: 3.73333vw;
  }

  .h--keyv-banner-meta {
    width: auto;
    padding: 0;
    display: block;
  }

  .h--keyv-banner-metaTitle {
    font-size: 4.26667vw;
    margin: 0 0 2.66667vw;
    text-align: center;
  }

  .h--keyv-banner-metaTitle br {
    display: none;
  }

  .h--keyv-banner-metaResult {
    text-align: center;
    color: #fff;
    font-size: 4.26667vw;
    display: block;
  }

  .h--keyv-banner-metaResult strong {
    font-size: 17.06667vw;
    margin: 0 1.33333vw 0 0;
  }

  .h--keyv-banner-metaResultPer {
    display: inline-block;
  }

  .h--keyv-banner-metaResultUnit {
    color: #fff;
    font-size: 4.26667vw;
    padding: 0;
    text-align: center;
    display: block;
  }

  .h--keyv-banner-metaResultUnit br {
    display: none;
  }

  .h--keyv-banner .slick-arrow {
    cursor: pointer;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    position: absolute;
    top: 44.5%;
    width: 4.26667vw;
    height: 8.53333vw;
    z-index: 10;
  }

  .h--keyv-banner .slick-arrow.next {
    left: 0.5%;
    top: 70.5%;
    background-image: url(../images/common/parts/arrow__s__next__smp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .h--keyv-banner .slick-arrow.prev {
    right: 0.5%;
    top: 70.5%;
    background-image: url(../images/common/parts/arrow__s__prev__smp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .h--keyv-title-mainColor,
  .h--keyv-title-subColor {
    margin: 0;
    font-size: 15.46667vw;
    top: 45%;
    height: calc(100% - 10%);
    overflow: hidden;
    left: 7.73333vw;
    z-index: 3;
  }

  .h--keyv-title-mainColor {
    width: 100%;
    margin-left: 17.37151163%;
  }

  .h--keyv-title-subColor {
    width: 17.37151163%;
  }

  .h--keyv-title-mainColor span,
  .h--keyv-title-subColor span {
    display: block;
    position: absolute;
  }

  .h--keyv-title-mainColor span {
    width: 100%;
    color: #122e5a;
    left: -17.37151163%;
  }

  .h--keyv-title-subColor span {
    width: 500%;
    color: #fff;
  }

  @keyframes scroll {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }
}

/*  Section
--------------------------------------------------------------*/
.en--index .h--section-title {
  margin: 0 0 3.27035vw;
}

.en--index .h--sectionB-title {
  margin: 0 0 2.90698vw;
}

.h--section {
  position: relative;
  max-width: 100%;
  margin: 0 auto 16.35174vw;
}

.h--section__bg {
  position: absolute;
  z-index: -1;
  background-color: #fff;
}

.h--section__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.h--section-photo {
  width: 43.02326vw;
  display: block;
}

.h--section-photo img {
  width: 100%;
  vertical-align: bottom;
}

.h--section-contents {
  width: 50%;
  padding-top: 14.53488vw;
}

.h--section-title {
  margin: 0 0 0.72674vw;
}

.h--section-titleEn {
  font-size: 4.06977vw;
  color: #000;
  font-weight: 700;
  display: block;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
}

.h--section-titleSub {
  margin: 0 0 3.27035vw;
}

.h--section-titleSubJp {
  font-size: 1.16279vw;
  color: #122e5a;
  font-weight: 700;
  display: block;
}

.h--section-text {
  font-weight: 400;
  font-size: 1.16279vw;
  line-height: 1.9;
  width: 43.02326vw;
  margin: 0 0 3.63372vw;
}

.h--section.leftPhoto .h--section__bg {
  width: 95.3125%;
  height: 46.51163vw;
  left: 102px;
  top: 6.90407vw;
}

.h--section.leftPhoto .h--section-photo {
  order: 1;
}

.h--section.leftPhoto .h--section-contents {
  order: 2;
}

.h--section.rightPhoto .h--section__bg {
  width: 93.02325581%;
  height: 46.51163vw;
  left: 0;
  top: 6.90407vw;
}

.h--section.rightPhoto .h--section-photo {
  order: 2;
}

.h--section.rightPhoto .h--section-contents {
  order: 1;
  padding: 14.53488vw 0 0 6.97674vw;
}

.h--sectionB {
  position: relative;
  max-width: 100%;
  margin: 0 auto 13.95349vw;
}

.h--sectionB__bg {
  position: absolute;
  z-index: -1;
  background-color: #122e5a;
}

.h--sectionB__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.h--sectionB-photo {
  width: 47.67442vw;
  display: block;
}

.h--sectionB-photo img {
  width: 100%;
  vertical-align: bottom;
}

.h--sectionB-contents {
  width: 50%;
  padding-top: 15.98837vw;
}

.h--sectionB-title {
  margin: 0 0 0.72674vw;
  display: block;
}

.h--sectionB-title span {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 2.32558vw;
  padding: 12.5px 0;
  line-height: 1;
}

.h--sectionB-text {
  margin: 0 0 2.90698vw;
  color: #fff;
  font-size: 1.16279vw;
  font-weight: 400;
}

.h--sectionB.leftPhoto .h--sectionB__bg {
  width: 95.3125%;
  height: 28.34302vw;
  left: 102px;
  top: 6.90407vw;
}

.h--sectionB.leftPhoto .h--sectionB-photo {
  order: 1;
}

.h--sectionB.leftPhoto .h--sectionB-contents {
  order: 2;
}

.h--sectionB.rightPhoto .h--sectionB__bg {
  width: 93.02325581%;
  height: 28.34302vw;
  left: 0;
  top: 6.90407vw;
}

.h--sectionB.rightPhoto .h--sectionB-photo {
  order: 2;
}

.h--sectionB.rightPhoto .h--sectionB-contents {
  order: 1;
  padding: 14.53488vw 0 0 6.97674vw;
}

@media screen and (max-width: 768px) {
  .h--section {
    position: relative;
    max-width: 100%;
    margin: 0 auto 12.8vw;
  }

  .h--section__bg {
    display: none;
  }

  .h--section__inner {
    display: block;
    background-color: #fff;
    padding: 0;
    margin: 0 0 0 4.26667vw;
  }

  .h--section-photo {
    width: 96vw;
    margin: 0 0 0 -4.66vw;
    display: block;
    position: relative;
    top: -4.266666667vw;
  }

  .h--section-photo img {
    width: 100%;
    vertical-align: bottom;
  }

  .h--section-contents {
    width: auto;
    padding: 6.66667vw 8vw 10.66667vw;
  }

  .h--section-titleEn {
    font-size: 10.66667vw;
    margin: 0 0 2.66667vw;
  }

  .h--section-titleSub {
    margin: 0 0 9.6vw;
  }

  .h--section-titleSubJp {
    font-size: 4.26667vw;
  }

  .h--section-text {
    font-size: 4.26667vw;
    margin: 0 0 12vw;
    width: auto;
  }

  .h--section.leftPhoto .h--section__bg {
    width: 95.3125%;
    height: 46.51163vw;
    left: 102px;
    top: 6.90407vw;
  }

  .h--section.leftPhoto .h--section-photo {
    order: 1;
  }

  .h--section.leftPhoto .h--section-contents {
    order: 2;
  }

  .h--section.rightPhoto .h--section__inner {
    margin: 0 4.26667vw 0 0;
  }

  .h--section.rightPhoto .h--section-photo {
    width: 96vw;
    margin: 0 0 0 0;
    top: -4.266666667vw;
    right: -4.33vw;
  }

  .h--section.rightPhoto .h--section-contents {
    padding: 5.33333vw 8.53333vw 10.66667vw;
  }

  .h--sectionB {
    margin: 0 auto 13.33333vw;
  }

  .h--sectionB__bg {
    display: none;
  }

  .h--sectionB__inner {
    position: relative;
    display: block;
    background-color: #122e5a;
  }

  .h--sectionB-photo {
    width: 96vw;
    display: block;
  }

  .h--sectionB-photo img {
    width: 100%;
    vertical-align: bottom;
  }

  .h--sectionB-contents {
    width: auto;
    padding-top: 0;
  }

  .h--sectionB-title {
    margin: 0 0 9.33333vw;
    display: block;
  }

  .h--sectionB-title span {
    font-size: 6.4vw;
    padding: 2.66667vw 5.33333vw;
    line-height: 1.5;
  }

  .h--sectionB.leftPhoto .h--sectionB__inner {
    padding: 0 8.26667vw 10.66667vw;
    margin: 0 0 0 4.26667vw;
  }

  .h--sectionB.leftPhoto .h--sectionB-photo {
    position: relative;
    width: 96vw;
    margin: 0 0 5.33333vw -4.26667vw;
    top: -4.266666667vw;
    left: -8.16vw;
  }

  .h--sectionB.rightPhoto .h--sectionB__inner {
    padding: 0 8.26667vw 10.66667vw;
    margin: 0 4.26667vw 0 0;
  }

  .h--sectionB.rightPhoto .h--sectionB-photo {
    position: relative;
    width: 96vw;
    margin: 0 0 5.33333vw 0;
    top: -4.266666667vw;
    right: 3.86vw;
  }

  .h--sectionB.rightPhoto .h--sectionB-contents {
    padding: 0;
  }

  .h--environmental .h--section-title span {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .h--environmental .h--section-title span br {
    display: none;
  }
}

/*--------------------------------------------------------------
    # _components.scss
--------------------------------------------------------------*/
/*  Common [titleBlock]
--------------------------------------------------------------*/
.second--main {
  background-color: #122e5a;
  margin: 86px 0 0;
  min-height: 430px;
}

.second--main__inner {
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
  position: relative;
}

.second--main-photo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 50%;
  display: block;
  height: 525px;
  right: 0;
  top: 0;
}

.second--main-photo.concept {
  background-image: url(../images/second/concept/main.jpg);
}

.second--main-photo.initiative {
  background-image: url(../images/second/initiative/main.jpg);
}

.second--main-photo.environment {
  background-image: url(../images/second/environment/main.jpg);
}

.second--main-photo.society {
  background-image: url(../images/second/society/main.jpg);
}

.second--main-photo.governance {
  background-image: url(../images/second/governance/main.jpg);
}

.second--main-photo.report {
  background-image: url(../images/second/report/main.jpg);
}

.second--main-titleBlock {
  width: 45.4375%;
  padding: 100px 0 0;
}

.second--main-title {
  font-size: 4.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 15px;
}

.second--main-subtitle {
  color: #fff;
  font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
  .second--main {
    background-color: #122e5a;
    margin: 25.6vw 0 0;
    min-height: initial;
  }

  .second--main__inner {
    max-width: initial;
    padding: 0 8vw;
    margin: 0 auto;
    position: relative;
  }

  .second--main-photo {
    position: relative;
    width: auto;
    display: block;
    height: 69.86667vw;
    right: 0;
    top: 0;
  }

  .second--main-titleBlock {
    width: auto;
    padding: 8vw 0;
  }

  .second--main-title {
    font-size: 6.4vw;
    margin: 0 0 2.66667vw;
  }

  .second--main-subtitle {
    color: #fff;
    font-size: 5.33333vw;
  }
}

/*  Common [config]
--------------------------------------------------------------*/
.clearance--box {
  height: 96px;
}

@media screen and (max-width: 768px) {
  .clearance--box {
    height: 25.6vw;
  }
}

.cmn--headline {
  text-align: center;
  margin: 32px 0 64px;
}

.cmn--headlineMain {
  background-color: #122e5a;
  display: inline-block;
  font-weight: 700;
  font-size: 4.8rem;
  color: #fff;
  padding: 10px;
  margin: 0 0 10px;
}

.cmn--headlineSub {
  text-transform: uppercase;
  background-color: #fff;
  display: inline-block;
  font-weight: 400;
  font-size: 1.6rem;
  color: #122e5a;
  padding: 10px;
  margin: 0 0 10px;
}

@media screen and (max-width: 768px) {
  .cmn--headline {
    text-align: center;
    margin: 4.26667vw 0 8.53333vw;
  }

  .cmn--headlineMain {
    background-color: #122e5a;
    display: inline-block;
    font-weight: 700;
    font-size: 8.26667vw;
    padding: 2.66667vw;
    margin: 0 0 2.66667vw;
    line-height: 1.35;
  }

  .cmn--headlineSub {
    font-size: 3.73333vw;
    padding: 2.66667vw;
    margin: 0 0 2.66667vw;
  }
}

body.home {
  background-color: #eaf3ff;
}

.l--container {
  margin: 0 auto;
  max-width: 1328px;
}

.l--container__inner {
  background-color: #fff;
  padding: 72px 64px 0px;
  position: relative;
  top: -100px;
}

@media screen and (max-width: 768px) {
  .l--container {
    padding: 0 4.26667vw;
    margin: 0 0 8.53333vw;
  }

  .l--container__inner {
    padding: 8.53333vw 4.26667vw 8.53333vw;
    top: inherit;
  }
}

.l--topicpath {
  background-color: #f0f0f0;
  padding: 15px 64px;
}

.l--topicpath ul {
  display: flex;
  flex-wrap: wrap;
}

.l--topicpath li a {
  font-size: 1.4rem;
  color: #000000;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.l--topicpath li a:link {
  color: #000000;
  text-decoration: none;
}

.l--topicpath li a:visited {
  color: #000000;
  text-decoration: none;
}

.l--topicpath li a:hover {
  color: #000000;
  text-decoration: underline;
  opacity: 0.65;
}

.l--topicpath li span {
  color: #000000;
  font-size: 1.4rem;
}

.l--topicpath li i {
  color: #000000;
  padding: 0 14px;
  height: 1.8rem;
  display: block;
  background-image: url(../images/common/parts/arrow__05.png);
  background-repeat: no-repeat;
  background-size: 4px 7.5px;
  background-position: center center;
}

@media screen and (max-width: 768px) {
  .l--topicpath {
    padding: 2.66667vw 4.26667vw;
  }

  .l--topicpath li a {
    font-size: 3.73333vw;
  }

  .l--topicpath li span {
    font-size: 3.73333vw;
  }

  .l--topicpath li i {
    padding: 0 3.73333vw;
    height: 4.8vw;
    background-image: url(../images/common/parts/arrow__04.png);
    background-repeat: no-repeat;
    background-size: 1.06667vw 2vw;
    background-position: center center;
  }
}

.cmn--contents h2 {
  margin: 64px 0 32px;
  color: #122e5a;
  padding: 4px 12px;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  background-color: #edf0f5;
  border-left: 4px solid #cb0023;
}

.cmn--contents h2:first-child {
  margin: 0 0 32px;
}

.cmn--contents h3 {
  margin: 0 0 32px;
  color: #000;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 0 0 14px 14px;
  border-bottom: 1px solid #dddddd;
  position: relative;
  line-height: 1.5;
}

.cmn--contents h3:before {
  content: "";
  width: 4px;
  height: 24px;
  display: block;
  background-color: #122e5a;
  position: absolute;
  left: 0;
  top: 5px;
}

.cmn--contents h4 {
  margin: 0 0 32px;
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  padding: 0 0 0 14px;
  position: relative;
  line-height: 1.5;
}

.cmn--contents h4:before {
  content: "";
  width: 4px;
  height: 24px;
  display: block;
  background-color: #91b2e1;
  position: absolute;
  left: 0;
  top: 2px;
}

.cmn--contents h5 {
  margin: 0 0 16px;
  color: #cb0023;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .cmn--contents h2 {
    margin: 0 0 8.53333vw;
    font-size: 5.33333vw;
  }

  .cmn--contents h3 {
    margin: 0 0 8.53333vw;
    font-size: 4.53333vw;
    padding: 0 0 3.73333vw 3.73333vw;
  }

  .cmn--contents h3:before {
    content: "";
    width: 1.06667vw;
    height: 6.4vw;
    top: 1.06667vw;
  }

  .cmn--contents h4 {
    margin: 0 0 8.53333vw;
    font-size: 4vw;
    padding: 0 0 0 3.73333vw;
  }

  .cmn--contents h4:before {
    content: "";
    width: 1.06667vw;
    height: 6.4vw;
  }

  .cmn--contents h5 {
    margin: 0 0 4.26667vw;
    font-size: 5.33333vw;
  }
}

.cmn--contents ul {
  margin: 0 0 32px;
}

.cmn--contents ul li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 15px;
  font-weight: 400;
  line-height: 1.5;
}

.cmn--contents ul li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 50%;
}

.cmn--contents ul.non--icon li {
  padding: 0;
}

.cmn--contents ul.non--icon li:before {
  display: none;
}

.cmn--contents ol {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: number;
  padding: 0;
}

.cmn--contents ol li {
  font-size: 1.5rem;
  color: #4a4a4a;
  padding: 0 0 20px 35px;
  margin: 0 0 20px;
  line-height: 1.5;
  position: relative;
  list-style: none;
  list-style-position: outside;
  list-style-position: outside;
}

.cmn--contents ol li:before {
  counter-increment: number;
  content: counter(number) "";
  display: block;
  position: absolute;
  font-size: 1.3rem;
  background-color: #122e5a;
  border-radius: 50%;
  text-align: center;
  left: 0;
  top: 1px;
  color: #fff;
  margin-right: 0.5em;
  width: 20px;
  height: 20px;
}

.cmn--contents .lead {
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0 0 16px;
}

.cmn--contents p {
  font-size: 1.6rem;
  margin: 0 0 32px;
  line-height: 2;
}

.cmn--contents p b {
  font-weight: 700;
}

.cmn--contents p strong {
  color: #cb0023;
  font-size: 1.8rem;
  font-weight: 700;
}

.cmn--contents .text--right {
  text-align: right;
  margin: 0 0 10px;
}

.cmn--contents strong {
  font-weight: 700;
}

.cmn--contents a {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.cmn--contents a:link {
  color: #122e5a;
  text-decoration: underline;
}

.cmn--contents a:visited {
  color: #122e5a;
  text-decoration: underline;
}

.cmn--contents a:hover {
  color: #122e5a;
  text-decoration: underline;
  opacity: 0.65;
}

.cmn--contents a.ex--links {
  display: inline-block;
  padding: 0 20px 0 0;
  background-image: url("https://www.heiwa-re.co.jp/assets/img/common/icon-blank.png");
  background-repeat: no-repeat;
  background-position: 98.65% center;
  background-size: 10px 10px;
}

.cmn--contents .cmn--coution {
  font-size: 1.3rem;
  margin: 0 0 12px;
}

.cmn--contents .cmn--coution.indentText {
  text-indent: -3em;
  padding-left: 3em;
}

.cmn--contents .cmn--coution-list li {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
}

.cmn--contents .cmn--coution-list li:before {
  top: 7px;
}

@media screen and (max-width: 768px) {
  .cmn--contents .lead {
    font-size: 5.86667vw;
    margin: 0 0 4.26667vw;
  }

  .cmn--contents p {
    font-size: 3.73333vw;
    margin: 0 0 8.53333vw;
  }

  .cmn--contents p strong {
    font-size: 3.73333vw;
  }
}

.cmn--contents .fig--style01 {
  display: block;
  margin: 0 0 32px;
}

.cmn--contents .fig--style01 img {
  width: 100%;
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  .cmn--contents .fig--style01 {
    margin: 0 0 8.53333vw;
  }
}

.scroll--table-text {
  display: none;
}

.cmn--contents table {
  margin: 0 0 32px;
  width: 100%;
}

.cmn--contents table .t--cell-centered {
  text-align: center;
}

.cmn--contents table thead th {
  border-top: 1px solid #122e5a;
  background-color: #f4f7fc;
  text-align: center;
  padding: 15px 0;
  font-size: 1.5rem;
  font-weight: 700;
  border-right: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  line-height: 1.35;
}

.cmn--contents table thead td {
  border-top: 1px solid #122e5a;
  background-color: #f4f7fc;
  text-align: center;
  padding: 15px 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.cmn--contents table tbody th {
  border-top: 1px solid #122e5a;
  border: 1px solid #dddddd;
  padding: 15px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.35;
}

.cmn--contents table tbody td {
  border: 1px solid #ddd;
  padding: 15px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4a4a4a;
  font-weight: 400;
}

.cmn--contents table tbody tr:last-child th {
  border-bottom: 1px solid #dddddd;
}

.cmn--contents table tbody tr:last-child td {
  border-bottom: 1px solid #dddddd;
}

.cmn--contents table .tablev01 {
  background-color: #122e5a;
  color: #fff;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .cmn--contents .scroll--table-text {
    display: block;
    font-size: 3.46667vw;
    color: #9e9e9e;
    margin: 0 0 2.66667vw;
  }

  .cmn--contents .scroll--table {
    width: 100% !important;
    overflow-x: scroll;
  }

  .cmn--contents .scroll--table table {
    width: 800px !important;
  }

  .cmn--contents table {
    margin: 0 0 8.53333vw;
  }

  .cmn--contents table thead th {
    padding: 4vw 0;
    font-size: 3.46667vw;
  }

  .cmn--contents table thead td {
    border-top: 1px solid #122e5a;
    padding: 4vw 0;
    font-size: 3.46667vw;
  }

  .cmn--contents table tbody th {
    padding: 4vw 2.66667vw;
    font-size: 3.46667vw;
  }

  .cmn--contents table tbody td {
    padding: 4vw 2.66667vw;
    font-size: 3.46667vw;
  }
}

.cmn--contents .col-box {
  display: flex;
  justify-content: space-between;
  margin: 0 0 48px;
}

.cmn--contents .col-box-photo {
  display: block;
  width: 35%;
}

.cmn--contents .col-box-photo img {
  width: 100%;
  vertical-align: bottom;
  margin: 0 0 20px;
}

.cmn--contents .col-box-photo span {
  line-height: 2;
  display: block;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
}

.cmn--contents .col-box-contents {
  display: block;
  width: 60%;
}

.cmn--contents .col-box.leftphoto .col-box-photo {
  order: 2;
}

.cmn--contents .col-box.leftphoto .col-box-contents {
  order: 1;
}

.cmn--contents .col-box.rightphoto .col-box-photo {
  order: 1;
}

.cmn--contents .col-box.rightphoto .col-box-contents {
  order: 2;
}

.cmn--contents .col-box.cols3 figure {
  width: 30%;
  margin: 0 3.33% 3.33% 0;
}

.cmn--contents .col-box.cols3 figure img {
  width: 100%;
  vertical-align: bottom;
}

.cmn--contents .col-box.cols3 figure:last-child {
  margin: 0 0 3.33% 0;
}

.cmn--contents .col-box.cols3 figure figcaption {
  display: block;
  margin: 10px 0 0;
  font-size: 1.3rem;
  text-align: center;
}

.cmn--contents .col-box.cols4 figure {
  width: 22%;
  margin: 0 3.33% 3.33% 0;
}

.cmn--contents .col-box.cols4 figure img {
  width: 100%;
  vertical-align: bottom;
}

.cmn--contents .col-box.cols4 figure:last-child {
  margin: 0 0 3.33% 0;
}

.cmn--contents .col-box.cols4 figure figcaption {
  display: block;
  margin: 10px 0 0;
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .cmn--contents .col-box {
    display: block;
    justify-content: space-between;
    margin: 0 0 8.53333vw;
  }

  .cmn--contents .col-box-photo {
    margin: 0 0 4.26667vw;
    display: block;
    width: auto;
    order: 2;
  }

  .cmn--contents .col-box-photo img {
    width: 100%;
    vertical-align: bottom;
    margin: 0 0 20px;
  }

  .cmn--contents .col-box-photo span {
    font-size: 3.73333vw;
  }

  .cmn--contents .col-box-contents {
    width: auto;
  }

  .cmn--contents .col-box.cols3 figure {
    width: auto;
    margin: 0 0 8vw 0;
  }

  .cmn--contents .col-box.cols3 figure img {
    width: 100%;
    vertical-align: bottom;
  }

  .cmn--contents .col-box.cols3 figure:last-child {
    margin: 0 0 8vw 0;
  }

  .cmn--contents .col-box.cols3 figure figcaption {
    display: block;
    margin: 2.66667vw 0 0;
    font-size: 3.2vw;
    text-align: center;
  }

  .cmn--contents .col-box.cols4 {
    flex-wrap: wrap;
    display: flex;
  }

  .cmn--contents .col-box.cols4 figure {
    width: 48%;
    margin: 0 0 5.33333vw 0;
  }

  .cmn--contents .col-box.cols4 figure img {
    width: 100%;
    vertical-align: bottom;
  }

  .cmn--contents .col-box.cols4 figure:last-child {
    margin: 0 0get_vw 20 0;
  }

  .cmn--contents .col-box.cols4 figure figcaption {
    display: block;
    margin: 2.66667vw 0 0;
    font-size: 3.2vw;
    text-align: center;
  }
}

.cmn--button01 {
  display: inline-block;
  padding: 0 0 0 50px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  line-height: 4.5rem;
  position: relative;
}

.cmn--button01:link {
  color: #122e5a;
  text-decoration: none;
}

.cmn--button01:visited {
  color: #122e5a;
  text-decoration: none;
}

.cmn--button01:hover {
  color: #122e5a;
  text-decoration: none;
}

.cmn--button01 span {
  position: relative;
  display: inline-block;
  padding: 0 0 10px;
}

.cmn--button01 span:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  left: -50px;
  bottom: 5px;
  background-color: #122e5a;
  display: block;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.cmn--button01:hover span:after {
  width: 150%;
}

.cmn--button01:before {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  content: "";
  background-image: url(../images/common/parts/arrow__btn.png);
  background-repeat: no-repeat;
  background-size: 24px 16px;
  background-position: center center;
  width: 40px;
  height: 40px;
  border: 1px solid #122e5a;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.cmn--button01:hover:before {
  border: 1px solid #122e5a;
  background-color: #122e5a;
  background-image: url(../images/common/parts/arrow__btn__hover.png);
}

.cmn--button02 {
  display: inline-block;
  padding: 0 0 0 50px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  line-height: 4.5rem;
  position: relative;
}

.cmn--button02:link {
  color: #fff;
  text-decoration: none;
}

.cmn--button02:visited {
  color: #fff;
  text-decoration: none;
}

.cmn--button02:hover {
  color: #fff;
  text-decoration: none;
}

.cmn--button02 span {
  position: relative;
  display: inline-block;
  padding: 0 0 10px;
}

.cmn--button02 span:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 1px;
  left: -50px;
  bottom: 5px;
  background-color: #fff;
  display: block;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.cmn--button02:hover span:after {
  width: 150%;
}

.cmn--button02:before {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  content: "";
  background-image: url(../images/common/parts/arrow__btn__hover.png);
  background-repeat: no-repeat;
  background-size: 24px 16px;
  background-position: center center;
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.cmn--button02:hover:before {
  border: 1px solid #fff;
  background-color: #fff;
  background-image: url(../images/common/parts/arrow__btn.png);
}

@media screen and (max-width: 768px) {
  .cmn--button01 {
    padding: 0 0 0 13.33333vw;
    font-size: 5.33333vw;
    line-height: 12vw;
  }

  .cmn--button01:after {
    display: none;
  }

  .cmn--button01:before {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    content: "";
    width: 10.66667vw;
    height: 10.66667vw;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .cmn--button01:hover:after {
    width: 100%;
  }

  .cmn--button02 {
    padding: 0 0 0 13.33333vw;
    font-size: 5.33333vw;
    line-height: 12vw;
  }

  .cmn--button02:after {
    display: none;
  }

  .cmn--button02:before {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    content: "";
    width: 10.66667vw;
    height: 10.66667vw;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .cmn--button02:hover:after {
    width: 100%;
  }
}

/*--------------------------------------------------------------
    # _pages.scss
--------------------------------------------------------------*/
/*  concept
--------------------------------------------------------------*/
.cmn--contents.concept-index .col-box {
  margin: 0;
}

.cmn--contents.concept-index .col-box p:last-child {
  margin: 0;
}

.concept-policy__fig01 {
  max-width: 536px;
  margin: 0 auto 32px;
}

.concept-policy__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.concept-policy__fig02 {
  max-width: 695px;
  margin: 0 auto 32px;
}

.concept-policy__fig02 img {
  width: 100%;
  vertical-align: bottom;
}

.concept-policy__fig03 {
  max-width: 950px;
  margin: 0 auto 32px;
}

.concept-policy__fig03 img {
  width: 100%;
  vertical-align: bottom;
}

.concept-policy table {
  width: 20%;
}

.concept-policy table th {
  text-align: center;
}

.en .concept-policy__fig01 {
  max-width: 750px;
}

.concept-materiality .big--catch {
  font-size: 3rem;
  font-weight: 700;
  display: block;
}

.concept-materiality table .t--head th {
  background-color: #122e5a;
  color: #fff;
}

.concept-materiality .t--cbg01 {
  background-color: #00bd95;
  vertical-align: middle;
  color: #fff;
  border: none;
}

.concept-materiality .t--cbg02 {
  background-color: #2da4d0;
  vertical-align: middle;
  color: #fff;
  border: none;
}

.concept-materiality .t--cbg03 {
  background-color: #bf62ba;
  vertical-align: middle;
  color: #fff;
  border: none;
}

.concept-materiality .t--chead {
  background-color: #f5f5f5;
}

.concept-materiality td {
  border-right: 1px solid #ddd;
  vertical-align: top;
}

.concept-materiality ul {
  margin: 0;
}

.concept-materiality ul li {
  font-size: 1.5rem;
  margin: 0 0 5px;
}

.concept-materiality ul li:before {
  top: 9px;
}

.concept-materiality ul li:last-child {
  margin: 0;
}

.concept-materiality__sdgsIcon {
  display: block;
  margin: 0 auto 25px;
  width: 120px;
}

.concept-materiality__sdgsIcon img {
  width: 100%;
  vertical-align: bottom;
}

.concept-materiality__sdgsIcon:last-child {
  margin: 0 auto;
}

.cmn--contents.concept-risk table th,
.cmn--contents.concept-risk table td {
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .conceptindex .col-box-photo {
    order: 2;
  }

  .conceptindex .col-box-contents {
    order: 1;
  }

  .cmn--contents.concept-policy table {
    width: 50%;
  }
}

/*  initiative
--------------------------------------------------------------*/
.initiative__fig01 {
  max-width: 630px;
  margin: 0 auto 32px;
}

.initiative__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.initiative__fig02 {
  max-width: 330px;
  margin: 0 auto 32px;
}

.initiative__fig02 img {
  width: 100%;
  vertical-align: bottom;
}

/*  environment
--------------------------------------------------------------*/
.cmn--contents.environment-index table td {
  vertical-align: middle;
}

.environment-climate__fig01 {
  max-width: 536px;
  margin: 0 auto 32px;
}

.environment-climate__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.environment-climate .t--hbg01 {
  background-color: #1ca9d0;
  vertical-align: middle;
  color: #fff;
}

.environment-climate .t--hbg02 {
  background-color: #3597d3;
  vertical-align: middle;
  color: #fff;
}

.environment-climate .t--hbg03 {
  background-color: #5e82cb;
  vertical-align: middle;
  color: #fff;
}

.environment-climate .t--hbg04 {
  background-color: #8169b6;
  vertical-align: middle;
  color: #fff;
}

.environment-climate .t--hbg05 {
  background-color: #994e95;
  vertical-align: middle;
  color: #fff;
}

.environment-climate .t--cbg01 {
  background-color: #ddf2f8;
  vertical-align: middle;
  color: #000;
}

.environment-climate .t--cbg02 {
  background-color: #e1f0f9;
  vertical-align: middle;
  color: #000;
}

.environment-climate .t--cbg03 {
  background-color: #e7ecf7;
  vertical-align: middle;
  color: #000;
}

.environment-climate .t--cbg04 {
  background-color: #ece8f4;
  vertical-align: middle;
  color: #000;
}

.environment-climate .t--cbg05 {
  background-color: #f0e4ef;
  vertical-align: middle;
  color: #000;
}

.environment-issues__fig02 {
  max-width: 662px;
  margin: 0 auto;
}

.environment-issues__fig02 img {
  width: 100%;
  vertical-align: bottom;
}

.environment-issues__fig03 {
  max-width: 482px;
  margin: 0 auto 32px;
}

.environment-issues__fig03 img {
  width: 100%;
  vertical-align: bottom;
}

.environment-issues__fig03 figcaption {
  display: block;
  margin: 10px 0 0;
  font-size: 1.3rem;
  text-align: center;
}

.cmn--contents.environment-issues table td {
  vertical-align: middle;
}

.cmn--contents.environment-greenbuilding table th,
.cmn--contents.environment-greenbuilding table td {
  vertical-align: middle;
}

.environment-greenbuilding table th {
  background-color: #f4f7fc;
}

.environment-greenbuilding-box {
  flex-wrap: nowrap;
  display: flex;
  padding: 1em 0;
  margin: 0 -0.5px;
  flex-wrap: wrap;
  justify-content: center;
}

.environment-greenbuilding-box dl {
  width: 198px;
  display: block;
  padding: 10px 0.5px;
  margin: 0;
}

.environment-greenbuilding-box dl dt {
  text-align: center;
  display: block;
  padding: 0.5em;
  margin: 0;
  background-color: #122e5a;
  color: white;
  font-size: 1.3rem;
  line-height: 1.8;
}

.environment-greenbuilding-box dl dd {
  padding: 1em 2em;
  display: block;
  padding: 1em 2em;
  margin: 0;
  background-color: rgba(18, 46, 90, 0.05);
}

.environment-greenbuilding-box dl dd p {
  display: block;
  padding: 0;
  margin: 0 auto;
  max-width: 160px;
}

.environment-greenbuilding-box dl dd p img {
  width: 100%;
  vertical-align: bottom;
}

.environment-greenbuilding-property {
  display: flex;
  padding: 0;
  margin: 1em 0;
  flex-direction: column;
  align-items: center;
  background-color: rgba(18, 46, 90, 0.05);
  flex-direction: row;
}

.environment-greenbuilding-property__logo {
  width: 25%;
  text-align: center;
}

.environment-greenbuilding-property__logo-logoImg {
  max-width: 240px;
  display: block;
  padding: 20px 20px;
  margin: 0 auto;
}

.environment-greenbuilding-property__logo-logoImg img {
  width: 100%;
  vertical-align: bottom;
}

.environment-greenbuilding-property__photo {
  width: 75%;
  padding: 10px;
  background-color: rgba(18, 46, 90, 0.05);
  display: block;
}

.environment-greenbuilding-property__photo ul {
  justify-content: flex-start;
  flex-direction: row;
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
}

.environment-greenbuilding-property__photo ul li {
  width: 33.333%;
  display: block;
  padding: 5px;
  margin: 0;
}

.environment-greenbuilding-property__photo ul li:before {
  display: none;
}

.environment-greenbuilding-property__photo-list-photo {
  display: block;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.environment-greenbuilding-property__photo-list-photo figure {
  display: block;
  padding: 5px;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 10px rgba(18, 46, 90, 0.05);
  max-width: 220px;
}

.environment-greenbuilding-property__photo-list-photo figure img {
  width: 100%;
  vertical-align: bottom;
}

.environment-greenbuilding-property__photo-list-photo figcaption {
  display: block;
  padding: 0;
  margin: 0 auto;
}

.environment-greenbuilding-property__photo-list-photo a:link {
  color: #000;
  text-decoration: none;
}

.environment-greenbuilding-property__photo-list-photo a:visited {
  color: #000;
  text-decoration: none;
}

.environment-greenbuilding-property__photo-list-photo a:hover {
  color: #000;
  text-decoration: none;
}

.environment-greenbuilding .col-box .col-box-photo {
  width: 20%;
}

.environment-greenbuilding .col-box .col-box-contents {
  width: 75%;
}

@media screen and (max-width: 768px) {
  .environment-greenbuilding-box {
    display: block;
    padding: 2.66667vw 0;
    margin: 0;
  }

  .environment-greenbuilding-box dl {
    width: auto;
    display: block;
    padding: 2.66667vw;
    margin: 0;
  }

  .environment-greenbuilding-box dl dt {
    text-align: left;
    padding: 2.66667vw;
    margin: 0;
    font-size: 3.2vw;
    line-height: 1.8;
  }

  .environment-greenbuilding-box dl dt br {
    display: none;
  }

  .environment-greenbuilding-box dl dd p {
    max-width: 70%;
  }

  .environment-greenbuilding-box dl dd p img {
    width: 100%;
    vertical-align: bottom;
  }

  .environment-greenbuilding-property {
    display: block;
    margin: get_wv(10) 0;
  }

  .environment-greenbuilding-property__logo {
    width: auto;
    text-align: center;
  }

  .environment-greenbuilding-property__logo-logoImg {
    max-width: initial;
    width: 60%;
    display: block;
    padding: 5.33333vw;
    margin: 0 auto !important;
  }

  .environment-greenbuilding-property__logo-logoImg img {
    width: 100%;
    vertical-align: bottom;
  }

  .environment-greenbuilding-property__photo {
    width: auto;
    padding: 2.66667vw;
  }

  .environment-greenbuilding-property__photo ul {
    display: block;
  }

  .environment-greenbuilding-property__photo ul li {
    width: 58.66667vw;
    display: block;
    padding: 5px;
    margin: 0 auto 4vw;
  }

  .environment-greenbuilding-property__photo ul li:before {
    display: none;
  }

  .environment-greenbuilding-property__photo-list-photo figure {
    padding: 2.66667vw;
    max-width: 58.66667vw;
  }

  .environment-greenbuilding-property__photo-list-photo figure img {
    width: 100%;
    vertical-align: bottom;
  }

  .environment-greenbuilding .col-box .col-box-photo {
    width: auto;
  }

  .environment-greenbuilding .col-box .col-box-contents {
    width: auto;
  }
}

/*  society
--------------------------------------------------------------*/
.society-index-box {
  margin: 0 0 50px;
}

.society-index__fig01 {
  display: block;
  margin: 0 auto 20px;
  max-width: 513px;
}

.society-index__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.society-index__fig10 {
  display: block;
  margin: 0 auto 32px;
  max-width: 300px;
}

.society-index__fig10 img {
  width: 100%;
  vertical-align: bottom;
}

.society-contribution-table01 th {
  vertical-align: middle;
}

.society-contribution-table01 td {
  vertical-align: middle;
}

.cmn--contents.society-contribution table th,
.cmn--contents.society-contribution table td {
  vertical-align: middle;
}

.cmn--contents .society-contribution__fig01 {
  margin: 0 auto 32px;
  max-width: 736px;
}

.cmn--contents .society-contribution__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.cmn--contents .society-contribution__fig02 {
  margin: 0 auto 32px;
  max-width: 540px;
}

.cmn--contents .society-contribution__fig02 img {
  width: 100%;
  vertical-align: bottom;
}

.cmn--contents .society-contribution__txt01 {
  color: #122e5a;
  text-align: center;
  font-weight: 700;
  font-size: 2.6rem;
}

.cmn--contents .society-contribution__txt01 em {
  font-size: 3.2rem;
}

.cmn--contents .society-contribution__table th {
  border-top: 1px solid #122e5a;
  background-color: #f4f7fc;
}

/*  governance
--------------------------------------------------------------*/
.governance-index__fig01 {
  max-width: 760px;
  margin: 0 auto 50px;
}

.governance-index__fig01 img {
  width: 100%;
  vertical-align: bottom;
}

.governance-index__fig02 {
  max-width: 860px;
  margin: 0 auto 50px;
}

.governance-index__fig02 img {
  width: 100%;
  vertical-align: bottom;
}

.governance-index-box {
  margin: 0 0 50px;
}

.cmn--contents .governance-index-box .col-box {
  margin: 0;
}

.cmn--contents.governance-index .rightphoto .col-box-photo {
  width: 25%;
}

.cmn--contents.governance-index .rightphoto .col-box-contents {
  width: 70%;
}

.governance-compliance__groupBox {
  background-color: rgba(18, 46, 90, 0.05);
}

.governance-compliance__groupBox__inner {
  padding: 20px;
}

.cmn--contents.governance-index table td {
  vertical-align: middle;
}

.cmn--contents.governance-index table ul {
  margin: 0;
}

.cmn--contents.governance-index table ul li:last-child {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .governance-index__fig01 {
    max-width: 100%;
    margin: 0 auto 10.66667vw;
  }

  .governance-index__fig02 {
    max-width: 100%;
    margin: 0 auto 10.66667vw;
  }

  .cmn--contents.governance-index .rightphoto .col-box-photo {
    width: auto;
  }

  .cmn--contents.governance-index .rightphoto .col-box-contents {
    width: auto;
  }
}

/*  report
--------------------------------------------------------------*/
.report-index table th {
  background-color: #f4f7fc;
  vertical-align: middle;
}

.report-index table td {
  vertical-align: middle;
}

.cmn--contents .report-index-list li {
  padding: 10px 0 15px;
  border-bottom: 1px solid #ccc;
}

.cmn--contents .report-index-list li:before {
  display: none;
}

.cmn--contents .report-index-list li a {
  display: flex;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.cmn--contents .report-index-list li a:link {
  color: #122e5a;
  text-decoration: none;
}

.cmn--contents .report-index-list li a:visited {
  color: #122e5a;
  text-decoration: none;
}

.cmn--contents .report-index-list li a:hover {
  color: #122e5a;
  text-decoration: underline;
  opacity: 0.65;
}

.cmn--contents .report-index-list-time {
  width: 12.5%;
  font-weight: 500;
}

.cmn--contents .report-index-list-text {
  margin: 0 15px 0 0;
}

.cmn--contents .report-index-list-pdf span {
  background-color: #f91703;
  border-radius: 5px;
  color: #fff;
  font-size: 1.2rem;
  display: inline-block;
  padding: 2.5px 5px;
  font-weight: 400;
  margin: 0 10px 0 0;
}

.cmn--contents .report-index-list-pdf em {
  font-size: 1.2rem;
}

/*  greenfinance
--------------------------------------------------------------*/
.cmn--contents p.greenfinance-text-margin-3 {
  margin: 0 0 0 68px;
}

.cmn--contents p.greenfinance-text-margin-4 {
  margin: 0 0 0 90px;
}


@media screen and (max-width: 768px) {
  .cmn--contents .report-index-list li {
    padding: 2.66667vw 0 4vw;
  }

  .cmn--contents .report-index-list li a {
    display: block;
  }

  .cmn--contents .report-index-list-time {
    width: auto;
    font-weight: 500;
    margin: 0 0 1.33333vw;
    display: block;
  }

  .cmn--contents .report-index-list-text {
    margin: 0 0 2.66667vw;
    display: block;
  }

  .cmn--contents .report-index-list-pdf span {
    border-radius: 1.33333vw;
    color: #fff;
    font-size: 3.2vw;
    padding: 0.8vw 1.33333vw;
    margin: 0 2.66667vw 0 0;
  }

  .cmn--contents .report-index-list-pdf em {
    font-size: 3.2vw;
  }
}

/**
 # Objects -  utility -
 */
/*========== utility.scss ==========*/
.u-radius5 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.u-radiusC {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.transition {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hover:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.pc {
  display: block !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

.smp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .smp {
    display: block !important;
  }
}

/*--------------------------------------------------------------
    # _print.scss
--------------------------------------------------------------*/
@media print {
  .l--header {
    opacity: 100;
    position: relative;
    width: 100%;
  }

  .fadein {
    opacity: 1;
    transform: translate(0, 0);
  }

  .keyVisual__pritBlock {
    display: block !important;
  }

  .keyVisual__pritBlock img {
    width: 100%;
  }

  .keyVisual {
    height: auto !important;
  }

  .h--productsBox__thum {
    width: 640px;
    height: 480px;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: -60px;
  }

  .h--productsBox__thum img {
    width: 100%;
    transition: none !important;
  }

  .h--productsBox__thumCover {
    width: 640px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: none;
    z-index: 10;
    transition: none !important;
  }

  .h--productsBox__title {
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    top: 200px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    color: #fff;
    line-height: 1;
  }

  .h--productsBox__titleEn {
    font-family: "Roboto", sans-serif;
    display: block;
    font-size: 3.2rem;
    margin: 0 0 10px;
  }

  .h--productsBox__titleJp {
    font-size: 1.8rem;
  }
}

/*# sourceMappingURL=style.css.map */

.cmn--contents p.green-text-margin-1 {
  margin: 0;
}

.cmn--contents p.green-text-margin-2 {
  margin: 0 0 0 46px;
}

.cmn--contents p.green-text-margin-3 {
  margin: 0 0 0 68px;
  text-indent: -22px;
}

.cmn--contents p.green-text-margin-4 {
  margin: 0 0 0 80px;
  text-indent: -22px;
}

.cmn--contents p.padding-bottom-30 {
  padding-bottom: 30px;
}

.cmn--contents .vertical-align--middle {
  vertical-align: middle;
}

.cmn--contents .white-space--nowrap {
  white-space: nowrap;
}

.list-style--decimal>li {
  list-style-type: decimal;
  padding: 0 !important;
}

.list-style--decimal>li::before {
  content: none !important;
}

.list-style--decimal {
  margin-left: 2em !important;
  list-style-position: outside;
  text-indent: 0;
}

ul.list-style--decimal ul {
  margin-bottom: 0 !important;
}

.margin-bottom--0 {
  margin-bottom: 0 !important;
}

.margin-bottom--10 {
  margin-bottom: 10px !important;
}

.margin-bottom--20 {
  margin-bottom: 20px !important;
}

.margin-bottom--30 {
  margin-bottom: 30px !important;
}

.cmn--contents .align-items--center {
  align-items: center;
}

.text-align--center {
  text-align: center !important;
}

.text-align--right {
  text-align: right !important;
}

.text-align--left {
  text-align: left !important;
}

.font-weight--bold {
  font-weight: bold;
}

sup {
  vertical-align: super;
  font-size: 0.8em;
  line-height: 0;
  margin: 0;
}
.width--percent-0 {
  width: 0% !important
}

.width--percent-5 {
  width: 5% !important
}

.width--percent-10 {
  width: 10% !important
}

.width--percent-15 {
  width: 15% !important
}

.width--percent-20 {
  width: 20% !important
}

.width--percent-25 {
  width: 25% !important
}

.width--percent-30 {
  width: 30% !important
}

.width--percent-35 {
  width: 35% !important
}

.width--percent-40 {
  width: 40% !important
}

.width--percent-45 {
  width: 45% !important
}

.width--percent-50 {
  width: 50% !important
}

.width--percent-55 {
  width: 55% !important
}

.width--percent-60 {
  width: 60% !important
}

.width--percent-65 {
  width: 65% !important
}

.width--percent-70 {
  width: 70% !important
}

.width--percent-75 {
  width: 75% !important
}

.width--percent-80 {
  width: 80% !important
}

.width--percent-85 {
  width: 85% !important
}

.width--percent-90 {
  width: 90% !important
}

.width--percent-95 {
  width: 95% !important
}

.width--percent-100 {
  width: 100% !important
}