@font-face { font-family: 'Yu Gothic Std'; src: url("../font/YuGothicStd-D.otf") format("otf"); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Yu Gothic Std'; src: url("../font/YuGothicStd-B.otf") format("otf"); font-weight: 600; font-style: normal; }

html {
  font-size: calc((100 / 680) * 1vw);
/*  font-family: sans-serif;*/
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP";
}
@media screen and (min-width: 680px) {
  html {
    font-size: 1px;
  }
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
a img {
  transition: transform .3s;
}

.color-green {
  color: #64B402;
}
.color-orange {
  color: #FF9D0F;
}
.l-container {
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
}

a:hover img {
  transform: scale(1.04);
}

.full-width-img {
  width: 680rem;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  position: relative;
  width: 680rem;
  color: #62441A;
  font-family: 'Yu Gothic Std', sans-serif;
  font-size: calc(38rem / 750 * 680);
  font-weight: 600;
  line-height: calc(90 / 38);
  letter-spacing: 0rem;
}
.section_a1 {
  margin: calc(85rem / 750 * 680) auto 0;
  width:  calc(593rem / 750 * 680);
  height:  calc(329rem / 750 * 680);
}
.section_a2 {
  margin: calc(35rem / 750 * 680) auto 0;
  width:  calc(592rem / 750 * 680);
  height:  calc(368rem / 750 * 680);
}
.section_a3 {
  margin-top: calc(85rem / 750 * 680);
  background: #FCF8EF;
  padding-top: 76rem;
}
.section_a4 {
  padding-top: 50rem;
}
.section_a5 {
  background: #FCF8EF;
  padding-top: 50rem;
}
.section_a6 {
  padding-top: 50rem;
}
.section_a7 {
  background: #FCF8EF;
  padding-top: 50rem;
}
.section_a8 {
  padding-top: 50rem;
}
.section_a9 {
  background: #FCF8EF;
  padding-top: 50rem;
}
.section_a10 {
  padding-top: 50rem;
}
.section_a11 {
  background: #FCF8EF;
  padding-top: 50rem;
}
.section_a12 {
  padding-top: 50rem;
}
.name {
  font-family: Yu Gothic Std;
  font-size: calc(36rem / 750 * 680);
  line-height: calc(66 / 36);
  font-weight: 700;
  letter-spacing: 1.08rem;
  margin-left: 16rem;
  width: 110rem;
  float: left;
}
.text-center {
  text-align: center;
}
.text {
  font-family: Yu Gothic Std;
  font-size: calc(36rem / 750 * 680);
  line-height: calc(66 / 36);
  font-weight: 700;
  letter-spacing: 0;
  color: #544025;
  margin-bottom: 60rem;
}
.text .text-small {
  font-size: calc(19rem / 750 * 680);
  line-height: 42rem;
}
dl {
  width: 680rem;
}
dd.text {
  margin-left: 124rem;
}
p img {
  display: flex;
  margin: 0 auto 50rem;
  max-width: 90%;
}

.bg {
  position: absolute;
  z-index: -1;
  width: 680rem;
}

.btn img {
  width: calc(592rem / 750 * 680);
}

mark {
  --color1: #64B404;
  --color2: #64B404;
  --bg-height: 100%;
  all: unset;
  margin: 4rem 0;
  padding: 10rem 16rem;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-size: 0 var(--bg-height);
  background-repeat: no-repeat;
  background-position: 0 100%;
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused; 
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  font: normal normal normal calc(36rem / 750 * 680) Noto Sans JP;
  font-family: "Yu Gothic Std", "Yu Gothic", "Meiryo", "Arial", sans-serif;
  line-height: calc(80 / 36);
}
@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}  
@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}
.hl-g {
  --bg-height: 100%;
  all: unset;
  margin: 4rem 0;
  padding: 10rem 16rem;
  background-color: #64B404;
  background-size: 0 var(--bg-height);
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  font-family: Yu Gothic Std;
  font-size: calc(35rem / 750 * 680);
  line-height: calc(66 / 36);
  font-weight: 700;
}

.re-pos {
  margin: 0 auto;
  position: relative;
  max-width: 680rem;
  width: 100%;
}

.re-pos p {
  margin-bottom: 0;
}

.re-pos img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.corporate-action {
  position: absolute;
  top: 27%;
  left: 9%;
  height: 7%;
  width: 14%;
}

.law-action {
  position: absolute;
  top: 37%;
  left: 9%;
  height: 7%;
  width: 39%;
}

.policy-action {
  position: absolute;
  top: 46.5%;
  left: 9%;
  height: 7%;
  width: 30%;
}

.call-action {
  position: absolute;
  top: 68%;
  left: 22%;
  height: 6%;
  width: 22%;
}

.icon:before {
  content: '';
  position: absolute;
}
.icon-hand:before {
  background: url('../img/icon/hand.png');
  background-size: cover;
  width: 33rem;
  height: 44rem;
}
.icon-water:before {
  background: url('../img/icon/water.png');
  background-size: cover;
  width: 32rem;
  height: 30rem;
}
.icon-light:before {
  background: url('../img/icon/light.png');
  background-size: cover;
  width: 23rem;
  height: 40rem;
}
.icon-star:before {
  background: url('../img/icon/star.png');
  background-size: cover;
  width: 42rem;
  height: 44rem;
}