@charset "UTF-8";
/*!
 * ress.css • v3.0.1
 * MIT License
 * github.com/filipelinhares/ress
 */
/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat;
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */
hr {
  overflow: visible;
  /* Show the overflow in Edge and IE */
  height: 0;
  /* Add the correct box sizing in Firefox */
}

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none;
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */
input {
  border-radius: 0;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type="search"] {
  -webkit-appearance: textfield;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  /* Internet Explorer 11+ */
  resize: vertical;
  /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
  color: inherit;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

/* Style select like a standard input */
select {
  -moz-appearance: none;
  /* Firefox 36+ */
  -webkit-appearance: none;
  /* Chrome 41+ */
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor;
  /* Internet Explorer 11+ */
}

legend {
  border: 0;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */
/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* ============================================
  Setting
============================================ */
* {
  word-break: break-all;
}

*:focus, *:active {
  outline: none;
}

*:hover {
  -webkit-tap-highlight-color: transparent;
}

table {
  border-collapse: collapse;
}

img,
svg {
  image-rendering: -webkit-optimize-contrast;
  vertical-align: top;
  max-width: 100%;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 767px) {
  img,
  svg {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root img, :root
svg {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  img,
  svg {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  img,
  svg {
    image-rendering: auto;
  }
}

ul,
ol {
  list-style: none;
}

.cf::after {
  content: "";
  display: block;
  clear: both;
}

sup {
  font-size: 56%;
}

/* ============================================
  Animation
============================================ */
.fade-in {
  position: relative;
  visibility: visible;
  opacity: 1;
  top: 0;
  -webkit-transition: opacity 0.5s 0.3s, top 0.5s 0.3s;
  transition: opacity 0.5s 0.3s, top 0.5s 0.3s;
}

.fade-out {
  opacity: 0;
  visibility: hidden;
  top: 40px;
}

.slide-in {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.inview {
  position: relative;
  opacity: 0;
}

.animate {
  -webkit-animation: inview_slide_up 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s;
          animation: inview_slide_up 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.2s;
}

/* ============================================
  Common
============================================ */
.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.maltiple {
  line-height: 1.8;
}

.flr {
  float: right;
}

.fll {
  float: left;
}

.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
  Link
============================================ */
a,
button {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

a:hover,
button:hover {
  text-decoration: underline;
}

.textLink {
  position: relative;
  text-decoration: underline;
}

.textLink:hover {
  opacity: 1;
  text-decoration: none;
}

.over {
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

.over:hover {
  opacity: 0.5;
  text-decoration: none;
}

/* ============================================
  Base
============================================ */
html {
  font-size: 62.5%;
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 1.33333vw;
  }
}

body {
  position: relative;
  background: #c8bb9b;
  color: #946134;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  opacity: 0;
  min-width: 995px;
}

@media all and (-ms-high-contrast: none) {
  body {
    overflow-x: hidden;
  }
}

body.loaded {
  opacity: 1;
}

body.openMenu {
  overflow: hidden;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1rem;
    overflow-x: hidden;
    min-width: unset;
  }
}

/* ============================================
  Switch
============================================ */
@media only screen and (max-width: 767px) {
  .view-sp {
    display: block;
  }
  .view-pc {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .view-pc {
    display: block;
  }
  .view-sp {
    display: none !important;
  }
}

/* ============================================
  Wrapper
============================================ */
.wrapper {
  position: relative;
  width: 100%;
  padding: 50px 0 70px;
}

@media only screen and (max-width: 767px) {
  .wrapper {
    overflow-x: hidden;
    padding-top: 4.53333vw;
    padding-bottom: 9.33333vw;
  }
}

/* ============================================
  Contents
============================================ */
.contents {
  position: relative;
  background: url(/company/library/sdgs/assets/img/bg_01.png) no-repeat 2px 0/100% auto;
  image-rendering: -webkit-optimize-contrast;
  width: 970.5px;
  height: 3003px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .contents {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root .contents {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  .contents {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  .contents {
    image-rendering: auto;
  }
}

@media only screen and (max-width: 767px) {
  .contents {
    background-image: url(/company/library/sdgs/assets/img/bg_01_sp.png);
    background-position: 0 0;
    width: 97.33333vw;
    height: 656.93333vw;
  }
}

/* ============================================
  HR
============================================ */
.hr-01 {
  background: url(/company/library/sdgs/assets/img/hr_01.png) no-repeat center -1px/860px auto;
  image-rendering: -webkit-optimize-contrast;
  border: none;
  height: 3px;
}

@media only screen and (max-width: 767px) {
  .hr-01 {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root .hr-01 {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  .hr-01 {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  .hr-01 {
    image-rendering: auto;
  }
}

@media only screen and (max-width: 767px) {
  .hr-01 {
    background-image: url(/company/library/sdgs/assets/img/hr_01_sp.png);
    background-position: center;
    background-size: 87.86667vw;
    height: 0.53333vw;
  }
}

.hr-02 {
  background: url(/company/library/sdgs/assets/img/hr_02.png) no-repeat 83px center/860px auto;
  image-rendering: -webkit-optimize-contrast;
  border: none;
  height: 3px;
}

@media only screen and (max-width: 767px) {
  .hr-02 {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root .hr-02 {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  .hr-02 {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  .hr-02 {
    image-rendering: auto;
  }
}

@media only screen and (max-width: 767px) {
  .hr-02 {
    background-image: url(/company/library/sdgs/assets/img/hr_02_sp.png);
    background-position: 4.26667vw 0;
    background-size: 87.86667vw;
    height: 0.4vw;
  }
}

/* ============================================
  Section
============================================ */
.sec {
  position: relative;
}

.sec .box {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  .sec .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.sec .box .column-pic .icoList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 8px auto 0;
}

@media only screen and (max-width: 767px) {
  .sec .box .column-pic .icoList {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 2.26667vw;
  }
}

.sec .box .column-pic .icoList_item {
  width: 90px;
}

@media only screen and (max-width: 767px) {
  .sec .box .column-pic .icoList_item {
    width: 20.8vw;
  }
  .sec .box .column-pic .icoList_item:not(:first-of-type) {
    margin-left: 2.13333vw;
  }
}

.sec .box .column-pic .icoList_item > a {
  position: relative;
  display: block;
  pointer-events: none;
}

.sec .box .column-pic .icoList_item > a:hover {
  z-index: 2;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

@media only screen and (max-width: 767px) {
  .sec .box .column-pic .icoList_item > a:hover {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.sec .box .column-pic .icoList_item > a:active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0.3;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.sec .box .column-pic .icoList_item > a img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  -webkit-box-shadow: 2px 2px 4px #9e9e9f;
          box-shadow: 2px 2px 4px #9e9e9f;
}

.sec .box .column-text .text {
  color: #946134;
  font-size: 1.2rem;
  line-height: 1.7;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: justify;
}

@media only screen and (max-width: 767px) {
  .sec .box .column-text .text {
    font-size: 2.2rem;
    line-height: 1.95;
    letter-spacing: .2em;
    font-weight: 500;
  }
}

.sec .anime_wrap {
  position: relative;
  image-rendering: -webkit-optimize-contrast;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(0);
  -webkit-filter: blur(0);
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .sec .anime_wrap {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root .sec .anime_wrap {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  .sec .anime_wrap {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  .sec .anime_wrap {
    image-rendering: auto;
  }
}

.sec .anime_wrap::before {
  content: "";
  display: block;
}

/* ============================================
  Section01
============================================ */
.sec-01 {
  position: relative;
  height: 1042px;
}

@media only screen and (max-width: 767px) {
  .sec-01 {
    height: 194.13333vw;
  }
}

.sec-01 .pageHeading {
  position: absolute;
  top: 108px;
  left: 179px;
  width: 644.5px;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageHeading {
    top: 16.53333vw;
    left: 10.66667vw;
    width: 75.86667vw;
  }
}

.sec-01 .pageNavi {
  position: absolute;
  top: 201px;
  left: -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi {
    top: 40.53333vw;
    left: 0;
  }
}

.sec-01 .pageNavi_item {
  position: absolute;
  -webkit-transform: scale(0.36);
          transform: scale(0.36);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi_item {
    -webkit-transform: scale(0.136);
            transform: scale(0.136);
  }
}

.sec-01 .pageNavi_item-01 {
  top: 27px;
  left: 40px;
  width: 826px;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi_item-01 {
    top: 3.73333vw;
    left: 3.2vw;
  }
}

.sec-01 .pageNavi_item-02 {
  top: -4px;
  left: 350px;
  width: 784px;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi_item-02 {
    top: 0.53333vw;
    left: 34.66667vw;
  }
}

.sec-01 .pageNavi_item-03 {
  top: -8px;
  left: 683px;
  width: 665px;
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi_item-03 {
    top: 0;
    left: 68.26667vw;
  }
}

.sec-01 .pageNavi_item > a {
  display: block;
}

.sec-01 .pageNavi_item > a:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.sec-01 .pageNavi .anime-01-01 {
  background-image: url(/company/library/sdgs/assets/img/img_01_01.png);
  background-size: 3304px auto;
}

@media only screen and (min-width: 768px) {
  .sec-01 .pageNavi .anime-01-01:hover {
    -webkit-animation: anime-01-01 2s steps(1) infinite;
            animation: anime-01-01 2s steps(1) infinite;
  }
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi .anime-01-01 {
    -webkit-animation: anime-01-01 2s steps(1) 2;
            animation: anime-01-01 2s steps(1) 2;
  }
}

.sec-01 .pageNavi .anime-01-01::before {
  padding-top: calc(675 / 826 * 100%);
}

.sec-01 .pageNavi .anime-01-02 {
  background-image: url(/company/library/sdgs/assets/img/img_01_02.png);
  background-size: 3136px auto;
}

@media only screen and (min-width: 768px) {
  .sec-01 .pageNavi .anime-01-02:hover {
    -webkit-animation: anime-01-02 2s steps(1) infinite;
            animation: anime-01-02 2s steps(1) infinite;
  }
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi .anime-01-02 {
    -webkit-animation: anime-01-02 2s steps(1) 2;
            animation: anime-01-02 2s steps(1) 2;
  }
}

.sec-01 .pageNavi .anime-01-02::before {
  padding-top: calc(816 / 784 * 100%);
}

.sec-01 .pageNavi .anime-01-03 {
  background-image: url(/company/library/sdgs/assets/img/img_01_03.png);
  background-size: 1330px auto;
}

@media only screen and (min-width: 768px) {
  .sec-01 .pageNavi .anime-01-03:hover {
    -webkit-animation: anime-01-03 0.2s steps(1) infinite;
            animation: anime-01-03 0.2s steps(1) infinite;
  }
}

@media only screen and (max-width: 767px) {
  .sec-01 .pageNavi .anime-01-03 {
    -webkit-animation: anime-01-03 0.2s steps(1) 20;
            animation: anime-01-03 0.2s steps(1) 20;
  }
}

.sec-01 .pageNavi .anime-01-03::before {
  padding-top: calc(586 / 480 * 100%);
  padding-top: calc(812 / 665 * 100%);
}

.sec-01 .textBox {
  position: absolute;
  top: 515px;
  right: 0;
  left: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .sec-01 .textBox {
    top: 77.33333vw;
    font-size: 2.1rem;
    line-height: 2;
    letter-spacing: 0.14em;
  }
}

.sec-01 .textBox .text {
  color: #946134;
  margin: -0.3em 0;
}

@media only screen and (max-width: 767px) {
  .sec-01 .textBox .text {
    margin: -0.5em 0;
  }
}

.sec-01 .textBox .text + .text {
  margin-top: 1.2em;
}

@media only screen and (max-width: 767px) {
  .sec-01 .textBox .text + .text {
    margin-top: 1.4em;
  }
}

.sec-01 .logo {
  position: absolute;
  top: 680px;
  right: 0;
  left: 0;
  width: 429px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .sec-01 .logo {
    top: 133.6vw;
    width: 64.8vw;
    margin-top: 0.53333vw;
  }
}

.sec-01 .youtube {
  position: absolute;
  top: 757px;
  right: 0;
  left: 0;
  background: #231815;
  -webkit-box-shadow: 6px 6px 12.5px #9e9e9f;
          box-shadow: 6px 6px 12.5px #9e9e9f;
  width: 373px;
  margin: 0 auto;
  padding: 25px 0;
}

@media only screen and (max-width: 767px) {
  .sec-01 .youtube {
    top: 146.66667vw;
    -webkit-box-shadow: 1.06667vw 1.06667vw 1.7vw #9e9e9f;
            box-shadow: 1.06667vw 1.06667vw 1.7vw #9e9e9f;
    width: 55.46667vw;
    padding: 3.73333vw 0;
  }
}

.sec-01 .youtube > a {
  display: block;
}

.sec-01 .youtube .video {
  position: relative;
  width: 100%;
  height: auto;
  margin: auto;
}

.sec-01 .youtube .video::before {
  content: "";
  display: block;
  padding-top: 56%;
}

.sec-01 .youtube .video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

.sec-01 .orn-01 {
  position: absolute;
  right: 45px;
  bottom: -24px;
  width: 232px;
}

@media only screen and (max-width: 767px) {
  .sec-01 .orn-01 {
    right: 3.46667vw;
    bottom: -8vw;
    width: 87.46667vw;
  }
}

/* ============================================
  Section02
============================================ */
.sec-02 {
  height: 624px;
}

@media only screen and (max-width: 767px) {
  .sec-02 {
    height: 141.06667vw;
  }
}

.sec-02 .orn-01,
.sec-02 .orn-02,
.sec-02 .orn-03,
.sec-02 .orn-04 {
  position: absolute;
  pointer-events: none;
}

.sec-02 .orn-01 {
  top: -162px;
  left: -44px;
  width: 1050.5px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .orn-01 {
    top: 14.93333vw;
    left: -1.6vw;
    width: 95.73333vw;
  }
}

.sec-02 .orn-02 {
  top: 118px;
  left: 93px;
  width: 99px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .orn-02 {
    top: 76.8vw;
    left: 24.26667vw;
    width: 13.06667vw;
  }
}

.sec-02 .orn-03 {
  top: 65px;
  left: 356px;
  width: 155.5px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .orn-03 {
    top: 2.66667vw;
    left: 54.4vw;
    width: 20.66667vw;
  }
}

.sec-02 .orn-04 {
  top: 470px;
  left: 452px;
  width: 126.5px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .orn-04 {
    top: 122.66667vw;
    left: 49.06667vw;
    width: 16.8vw;
  }
}

.sec-02 .img-01 {
  position: absolute;
  top: 303px;
  left: 748px;
  background-image: url(/company/library/sdgs/assets/img/img_02_01.png);
  background-size: 4870px auto;
  -webkit-transform: scale(0.36);
          transform: scale(0.36);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 487px;
}

.sec-02 .img-01.is-active {
  -webkit-animation: anime-02-01 3s steps(1) 2;
          animation: anime-02-01 3s steps(1) 2;
}

@media only screen and (max-width: 767px) {
  .sec-02 .img-01 {
    top: 58.93333vw;
    left: 71.46667vw;
    -webkit-transform: scale(0.18);
            transform: scale(0.18);
  }
}

.sec-02 .img-01::before {
  padding-top: calc(400 / 487 * 100%);
}

.sec-02 .box {
  top: 205px;
  left: 164px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .box {
    top: 9.06667vw;
    left: 15.73333vw;
  }
}

.sec-02 .box .column-pic {
  width: 192px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .box .column-pic {
    width: 66.66667vw;
  }
  .sec-02 .box .column-pic .heading {
    width: 36.13333vw;
    margin-bottom: 3.46667vw;
  }
}

.sec-02 .box .column-text {
  width: 252px;
  margin: 0 0 0 28px;
}

@media only screen and (max-width: 767px) {
  .sec-02 .box .column-text {
    width: 76.8vw;
    margin: 18.66667vw 0 0 -5.06667vw;
  }
}

.sec-02 .box .column-text .heading {
  width: 242.5px;
  margin-bottom: 17px;
}

/* ============================================
  Section03
============================================ */
.sec-03 {
  height: 621px;
}

@media only screen and (max-width: 767px) {
  .sec-03 {
    height: 157.33333vw;
  }
}

.sec-03 .orn-01 {
  position: absolute;
  top: 295px;
  right: 53px;
  width: 256px;
}

@media only screen and (max-width: 767px) {
  .sec-03 .orn-01 {
    top: unset;
    right: 10.13333vw;
    bottom: 0;
    width: 28.53333vw;
  }
}

.sec-03 .img-01 {
  position: absolute;
  top: 140px;
  left: -126px;
  width: 422px;
}

@media only screen and (max-width: 767px) {
  .sec-03 .img-01 {
    top: 112.8vw;
    left: -13.6vw;
    width: 45.86667vw;
  }
}

.sec-03 .img-02 {
  position: absolute;
  top: 313px;
  left: 104px;
  background-image: url(/company/library/sdgs/assets/img/img_03_02.png);
  background-size: 14780px auto;
  -webkit-transform: scale(0.36);
          transform: scale(0.36);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 1478px;
}

.sec-03 .img-02.is-active {
  -webkit-animation: anime-03-01 3.2s steps(1) 2;
          animation: anime-03-01 3.2s steps(1) 2;
}

@media only screen and (max-width: 767px) {
  .sec-03 .img-02 {
    top: 109.86667vw;
    left: 11.2vw;
    -webkit-transform: scale(0.147);
            transform: scale(0.147);
  }
}

.sec-03 .img-02::before {
  padding-top: calc(870 / 1478 * 100%);
}

.sec-03 .box {
  top: 75px;
  left: 274px;
}

@media only screen and (max-width: 767px) {
  .sec-03 .box {
    top: 9.33333vw;
    left: 16vw;
  }
}

.sec-03 .box .column-pic {
  width: 290px;
}

@media only screen and (max-width: 767px) {
  .sec-03 .box .column-pic {
    width: 66.66667vw;
  }
  .sec-03 .box .column-pic .heading {
    width: 46.8vw;
    margin-bottom: 3.46667vw;
  }
}

.sec-03 .box .column-text {
  width: 270px;
  margin: 3px 0 0 28px;
}

@media only screen and (max-width: 767px) {
  .sec-03 .box .column-text {
    width: 77.33333vw;
    margin: 4vw 0 0 -5.86667vw;
  }
}

.sec-03 .box .column-text .heading {
  width: 268.5px;
  margin-bottom: 17px;
}

/* ============================================
  Section04
============================================ */
.sec-04 {
  height: 622px;
}

@media only screen and (max-width: 767px) {
  .sec-04 {
    height: 157.33333vw;
  }
}

@media all and (-ms-high-contrast: none) {
  .sec-04 {
    overflow: hidden;
  }
}

.sec-04 .orn-01 {
  position: absolute;
  top: -75px;
  left: 67px;
  width: 584.5px;
}

@media only screen and (max-width: 767px) {
  .sec-04 .orn-01 {
    top: unset;
    bottom: -7.46667vw;
    left: 0.53333vw;
    width: 68.13333vw;
  }
}

.sec-04 .img-01 {
  position: absolute;
  top: 37px;
  left: 651px;
  background-image: url(/company/library/sdgs/assets/img/img_04_01.png);
  background-size: 7380px;
  -webkit-transform: scale(0.36);
          transform: scale(0.36);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 738px;
}

.sec-04 .img-01.is-active {
  -webkit-animation: anime-04-01 1s steps(1) 2;
          animation: anime-04-01 1s steps(1) 2;
}

@media only screen and (max-width: 767px) {
  .sec-04 .img-01 {
    top: 106.93333vw;
    left: 61.86667vw;
    -webkit-transform: scale(0.148);
            transform: scale(0.148);
  }
}

.sec-04 .img-01::before {
  padding-top: calc(963 / 532 * 100%);
}

.sec-04 .box {
  top: 349px;
  left: 115px;
}

@media only screen and (max-width: 767px) {
  .sec-04 .box {
    top: 8vw;
    left: 16vw;
  }
}

.sec-04 .box .column-pic {
  width: 290px;
}

@media only screen and (max-width: 767px) {
  .sec-04 .box .column-pic {
    width: 66.66667vw;
  }
  .sec-04 .box .column-pic .heading {
    width: 41.73333vw;
    margin-bottom: 3.46667vw;
  }
}

.sec-04 .box .column-text {
  width: 248px;
  margin: 3px 0 0 33px;
}

@media only screen and (max-width: 767px) {
  .sec-04 .box .column-text {
    width: 77.33333vw;
    margin: 4.26667vw 0 0 -5.6vw;
  }
}

.sec-04 .box .column-text .heading {
  width: 248.5px;
  margin-bottom: 17px;
}

/* ============================================
  Button
============================================ */
.btn-sdgs {
  display: block;
  background: url(/company/library/sdgs/assets/img/btn_sdgs_01.png) no-repeat center/cover;
  image-rendering: -webkit-optimize-contrast;
  width: 624px;
  height: 78px;
  margin: 33px auto 0;
}

@media only screen and (max-width: 767px) {
  .btn-sdgs {
    image-rendering: auto;
  }
}

_::-webkit-full-page-media, _:future, :root .btn-sdgs {
  image-rendering: auto;
}

@-moz-document url-prefix() {
  .btn-sdgs {
    image-rendering: auto;
  }
}

@media all and (-ms-high-contrast: none) {
  .btn-sdgs {
    image-rendering: auto;
  }
}

@media only screen and (max-width: 767px) {
  .btn-sdgs {
    width: 78.66667vw;
    height: 9.86667vw;
    margin-top: 2.13333vw;
  }
}

.btn-sdgs:hover {
  background-image: url(/company/library/sdgs/assets/img/btn_sdgs_01_on.png);
}

@media only screen and (max-width: 767px) {
  .btn-sdgs:hover {
    background-image: url(/company/library/sdgs/assets/img/btn_sdgs_01_active.png);
  }
}

.btn-sdgs:active {
  background-image: url(/company/library/sdgs/assets/img/btn_sdgs_01_active.png);
}

@-webkit-keyframes inview_slide_up {
  0% {
    bottom: -50px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@keyframes inview_slide_up {
  0% {
    bottom: -50px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

@-webkit-keyframes anime-01-01 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -826px 0;
  }
  50% {
    background-position: -1652px 0;
  }
  75% {
    background-position: -2478px 0;
  }
  100% {
    background-position: -3304px 0;
  }
}

@keyframes anime-01-01 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -826px 0;
  }
  50% {
    background-position: -1652px 0;
  }
  75% {
    background-position: -2478px 0;
  }
  100% {
    background-position: -3304px 0;
  }
}

@-webkit-keyframes anime-01-01-sp {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -30vw 0;
  }
  50% {
    background-position: -59.93333vw 0;
  }
  75% {
    background-position: -89.93333vw 0;
  }
  100% {
    background-position: -120vw 0;
  }
}

@keyframes anime-01-01-sp {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -30vw 0;
  }
  50% {
    background-position: -59.93333vw 0;
  }
  75% {
    background-position: -89.93333vw 0;
  }
  100% {
    background-position: -120vw 0;
  }
}

@-webkit-keyframes anime-01-02 {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -784px 0;
  }
  25% {
    background-position: 0 0;
  }
  37.5% {
    background-position: -784px 0;
  }
  50% {
    background-position: 0 0;
  }
  62.5% {
    background-position: -784px 0;
  }
  100% {
    background-position: -784px 0;
  }
}

@keyframes anime-01-02 {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -784px 0;
  }
  25% {
    background-position: 0 0;
  }
  37.5% {
    background-position: -784px 0;
  }
  50% {
    background-position: 0 0;
  }
  62.5% {
    background-position: -784px 0;
  }
  100% {
    background-position: -784px 0;
  }
}

@-webkit-keyframes anime-01-02-sp {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -28.4vw 0;
  }
  25% {
    background-position: 0 0;
  }
  37.5% {
    background-position: -28.4vw 0;
  }
  50% {
    background-position: 0 0;
  }
  62.5% {
    background-position: -28.4vw 0;
  }
  100% {
    background-position: -28.4vw 0;
  }
}

@keyframes anime-01-02-sp {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: -28.4vw 0;
  }
  25% {
    background-position: 0 0;
  }
  37.5% {
    background-position: -28.4vw 0;
  }
  50% {
    background-position: 0 0;
  }
  62.5% {
    background-position: -28.4vw 0;
  }
  100% {
    background-position: -28.4vw 0;
  }
}

@-webkit-keyframes anime-01-03 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -665px 0;
  }
}

@keyframes anime-01-03 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -665px 0;
  }
}

@-webkit-keyframes anime-01-03-sp {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -24.13333vw 0;
  }
}

@keyframes anime-01-03-sp {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -24.13333vw 0;
  }
}

@-webkit-keyframes anime-02-01 {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -487px 0;
  }
  20% {
    background-position: -974px 0;
  }
  30% {
    background-position: -1461px 0;
  }
  40% {
    background-position: -1948px 0;
  }
  50% {
    background-position: -2435px 0;
  }
  60% {
    background-position: -2922px 0;
  }
  70% {
    background-position: -3409px 0;
  }
  80% {
    background-position: -3896px 0;
  }
  90% {
    background-position: -4383px 0;
  }
  100% {
    background-position: -4870px 0;
  }
}

@keyframes anime-02-01 {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -487px 0;
  }
  20% {
    background-position: -974px 0;
  }
  30% {
    background-position: -1461px 0;
  }
  40% {
    background-position: -1948px 0;
  }
  50% {
    background-position: -2435px 0;
  }
  60% {
    background-position: -2922px 0;
  }
  70% {
    background-position: -3409px 0;
  }
  80% {
    background-position: -3896px 0;
  }
  90% {
    background-position: -4383px 0;
  }
  100% {
    background-position: -4870px 0;
  }
}

@-webkit-keyframes anime-02-01-sp {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -23.33333vw 0;
  }
  20% {
    background-position: -46.66667vw 0;
  }
  30% {
    background-position: -70vw 0;
  }
  40% {
    background-position: -93.33333vw 0;
  }
  50% {
    background-position: -116.66667vw 0;
  }
  60% {
    background-position: -140vw 0;
  }
  70% {
    background-position: -163.33333vw 0;
  }
  80% {
    background-position: -186.66667vw 0;
  }
  90% {
    background-position: -210vw 0;
  }
  100% {
    background-position: -233.33333vw 0;
  }
}

@keyframes anime-02-01-sp {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -23.33333vw 0;
  }
  20% {
    background-position: -46.66667vw 0;
  }
  30% {
    background-position: -70vw 0;
  }
  40% {
    background-position: -93.33333vw 0;
  }
  50% {
    background-position: -116.66667vw 0;
  }
  60% {
    background-position: -140vw 0;
  }
  70% {
    background-position: -163.33333vw 0;
  }
  80% {
    background-position: -186.66667vw 0;
  }
  90% {
    background-position: -210vw 0;
  }
  100% {
    background-position: -233.33333vw 0;
  }
}

@-webkit-keyframes anime-03-01 {
  0% {
    background-position: 0 0;
  }
  18.75% {
    background-position: -1478px 0;
  }
  25% {
    background-position: -2956px 0;
  }
  31.25% {
    background-position: -4434px 0;
  }
  37.5% {
    background-position: -5912px 0;
  }
  43.75% {
    background-position: -7390px 0;
  }
  50% {
    background-position: -8868px 0;
  }
  56.25% {
    background-position: -10346px 0;
  }
  62.5% {
    background-position: -11824px 0;
  }
  93.75% {
    background-position: -13302px 0;
  }
  100% {
    background-position: -14780px 0;
  }
}

@keyframes anime-03-01 {
  0% {
    background-position: 0 0;
  }
  18.75% {
    background-position: -1478px 0;
  }
  25% {
    background-position: -2956px 0;
  }
  31.25% {
    background-position: -4434px 0;
  }
  37.5% {
    background-position: -5912px 0;
  }
  43.75% {
    background-position: -7390px 0;
  }
  50% {
    background-position: -8868px 0;
  }
  56.25% {
    background-position: -10346px 0;
  }
  62.5% {
    background-position: -11824px 0;
  }
  93.75% {
    background-position: -13302px 0;
  }
  100% {
    background-position: -14780px 0;
  }
}

@-webkit-keyframes anime-03-01-sp {
  0% {
    background-position: 0 0;
  }
  18.75% {
    background-position: -58vw 0;
  }
  25% {
    background-position: -116vw 0;
  }
  31.25% {
    background-position: -174vw 0;
  }
  37.5% {
    background-position: -232vw 0;
  }
  43.75% {
    background-position: -290vw 0;
  }
  50% {
    background-position: -348vw 0;
  }
  56.25% {
    background-position: -406vw 0;
  }
  62.5% {
    background-position: -464vw 0;
  }
  93.75% {
    background-position: -522vw 0;
  }
  100% {
    background-position: -580vw 0;
  }
}

@keyframes anime-03-01-sp {
  0% {
    background-position: 0 0;
  }
  18.75% {
    background-position: -58vw 0;
  }
  25% {
    background-position: -116vw 0;
  }
  31.25% {
    background-position: -174vw 0;
  }
  37.5% {
    background-position: -232vw 0;
  }
  43.75% {
    background-position: -290vw 0;
  }
  50% {
    background-position: -348vw 0;
  }
  56.25% {
    background-position: -406vw 0;
  }
  62.5% {
    background-position: -464vw 0;
  }
  93.75% {
    background-position: -522vw 0;
  }
  100% {
    background-position: -580vw 0;
  }
}

@-webkit-keyframes anime-04-01 {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -738px 0;
  }
  20% {
    background-position: -1476px 0;
  }
  30% {
    background-position: -2214px 0;
  }
  40% {
    background-position: -2952px 0;
  }
  50% {
    background-position: -3690px 0;
  }
  60% {
    background-position: -4428px 0;
  }
  70% {
    background-position: -5166px 0;
  }
  80% {
    background-position: -5904px 0;
  }
  90% {
    background-position: -6642px 0;
  }
  100% {
    background-position: -7380px 0;
  }
}

@keyframes anime-04-01 {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -738px 0;
  }
  20% {
    background-position: -1476px 0;
  }
  30% {
    background-position: -2214px 0;
  }
  40% {
    background-position: -2952px 0;
  }
  50% {
    background-position: -3690px 0;
  }
  60% {
    background-position: -4428px 0;
  }
  70% {
    background-position: -5166px 0;
  }
  80% {
    background-position: -5904px 0;
  }
  90% {
    background-position: -6642px 0;
  }
  100% {
    background-position: -7380px 0;
  }
}

@-webkit-keyframes anime-04-01-sp {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -29.06667vw 0;
  }
  20% {
    background-position: -58.13333vw 0;
  }
  30% {
    background-position: -87.2vw 0;
  }
  40% {
    background-position: -116.26667vw 0;
  }
  50% {
    background-position: -145.33333vw 0;
  }
  60% {
    background-position: -174.4vw 0;
  }
  70% {
    background-position: -203.46667vw 0;
  }
  80% {
    background-position: -232.53333vw 0;
  }
  90% {
    background-position: -261.6vw 0;
  }
  100% {
    background-position: -290.66667vw 0;
  }
}

@keyframes anime-04-01-sp {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: -29.06667vw 0;
  }
  20% {
    background-position: -58.13333vw 0;
  }
  30% {
    background-position: -87.2vw 0;
  }
  40% {
    background-position: -116.26667vw 0;
  }
  50% {
    background-position: -145.33333vw 0;
  }
  60% {
    background-position: -174.4vw 0;
  }
  70% {
    background-position: -203.46667vw 0;
  }
  80% {
    background-position: -232.53333vw 0;
  }
  90% {
    background-position: -261.6vw 0;
  }
  100% {
    background-position: -290.66667vw 0;
  }
}