@charset "UTF-8";
/*------------------------
SIZE
-------------------------*/
/*************************************
MIXINS
*************************************/
.scpop {
  transform: scale3d(0, 0, 0);
  transform-origin: center center;
  will-change: animation;
}

.scpop.ac {
  animation: bounce 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/*------------------------------------
animation
	*/
@keyframes watapiiPc {
  0% {
    transform: translateX(-5.8565153734vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes watapiiSp {
  0% {
    transform: translateX(-16vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(359deg);
  }
}
@keyframes photoCoverAnim {
  0% {
    filter: grayscale(95%);
  }
  100% {
    filter: grayscale(0%);
  }
}
@keyframes bounce {
  0% {
    transform: scale3d(0, 0, 0);
  }
  40% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  60% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  80% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
/*------------------------
COLOR
-------------------------*/
a {
  color: #000;
  text-decoration: none;
}

/*------------------------
TEXT SET
-------------------------*/
html {
  font-size: 62.5%;
}

body {
  font-size: 1.1713030747vw;
  font-family: "zen-kaku-gothic-new", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  color: #1A1A1A;
  background-color: #FFFEF1;
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  box-sizing: border-box;
}
@media screen and ( min-width : 1680px ) {
  body {
    font-size: 19.6px;
  }
}
@media screen and ( max-width : 1023px ) {
  body {
    font-size: 4.2666666667vw;
  }
}

.sans {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.en {
  color: #777;
  font-family: "ryo-gothic-plusn", sans-serif;
}

/*------------------------
BASIC LAYOUT / MODULE
-------------------------*/
img {
  image-rendering: -webkit-optimize-contrast;
  width: 100%;
}

.sp {
  display: none !important;
}
@media screen and ( max-width : 1023px ) {
  .sp {
    display: block;
  }
}

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

@media screen and ( max-width : 1023px ) {
  br.sp, .btn.sp, .tac.sp {
    display: block !important;
  }
}

.lbx {
  cursor: pointer;
}

.tac {
  text-align: center;
}

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

figure {
  margin: 0;
}

/*------------------------
RESET
-------------------------*/
body {
  word-wrap: break-word;
}

th, td {
  text-align: left;
  vertical-align: top;
  border: none;
}

caption {
  text-align: left;
}

img {
  border: 0;
  vertical-align: bottom;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

fieldset, img {
  border: 0;
}

a {
  outline: none;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

/*
	clearfix
------------------------------------- */
.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

* html .clearfix {
  display: inline-block;
}

.clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/*html5の要素をblock*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
  box-sizing: border-box;
}

/*------------------------
FORM
-------------------------*/
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*------------------------
TABLE
-------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
  width: 100%;
}

.cls-34 {
  cursor: pointer;
}

.cls-34:hover {
  opacity: 0.7;
}

#convBtn {
  position: fixed;
  bottom: 3.6603221083vw;
  right: 6.588579795vw;
  z-index: 3;
  width: 17.1303074671vw;
  max-width: 292px;
  transition: opacity 0.3s;
}
@media screen and ( min-width : 1680px ) {
  #convBtn {
    bottom: 62.5px;
    right: 112.5px;
  }
}
@media screen and ( max-width : 1023px ) {
  #convBtn {
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 768px;
  }
}

#convBtn:hover {
  opacity: 0.7;
}

#heroArea {
  width: calc(100% - 8.78477306vw);
  height: calc(100svh - 6.149341142vw);
  min-height: 768px;
  position: relative;
  margin: 0 auto;
}
@media screen and ( min-width : 1680px ) {
  #heroArea {
    height: calc(100svh - 103px);
  }
}
@media screen and ( max-width : 1023px ) {
  #heroArea {
    height: calc(100svh - 18.6666666667vw);
    width: 100%;
    min-height: 0px;
  }
}
#heroArea .bg {
  position: absolute;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translateX(4.39238653vw);
}
#heroArea .bg.loaded {
  opacity: 1;
}
@media screen and ( min-width : 1680px ) {
  #heroArea .bg {
    transform: translateX(73px);
  }
}
@media screen and ( max-width : 1023px ) {
  #heroArea .bg {
    transform: translateX(0);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/*==================================================
#kenkoArea
==================================================*/
#kenkoArea {
  width: 100%;
  background-color: #FCEA7B;
  padding-bottom: 21.0834553441vw;
}
@media screen and ( min-width : 1680px ) {
  #kenkoArea {
    padding-bottom: 360px;
  }
}
@media screen and ( max-width : 1023px ) {
  #kenkoArea {
    padding-bottom: 51.2vw;
  }
}
#kenkoArea .halfBox.textBox .caption {
  line-height: 1.7;
}

#introduction .halfBox.image {
  background-image: url(../images/top/image_introduction.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
#introduction .halfBox.textBox {
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}
@media screen and ( max-width : 1023px ) {
  #introduction .halfBox.textBox {
    background-size: 140%;
    height: auto;
  }
}
#introduction .text {
  position: absolute;
  text-align: center;
  top: 15%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
@media screen and ( max-width : 1023px ) {
  #introduction .text {
    position: relative;
    margin-top: 25.6vw;
    top: 0;
    padding-bottom: 53.3333333333vw;
  }
}
#introduction .text .title {
  margin-bottom: 2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  #introduction .text .title {
    margin-bottom: 50px;
  }
}
@media screen and ( max-width : 1023px ) {
  #introduction .text .title {
    margin-bottom: 10.6666666667vw;
  }
}
#introduction .text .caption {
  line-height: 1.75;
}

.halfBox.animationArea .lottie-animation {
  padding: 0 2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  .halfBox.animationArea .lottie-animation {
    padding: 0 73px;
  }
}
@media screen and ( max-width : 1023px ) {
  .halfBox.animationArea .lottie-animation {
    padding: 0 0vw;
  }
}

.lottie-animation {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.lottie-animation svg {
  width: 100% !important;
  height: auto !important;
  display: block;
  margin-top: auto;
  object-fit: contain;
  /* アスペクト比を維持 */
  object-position: bottom;
  /* 下部揃え */
}

.lottie-animation.center {
  top: 0;
}
@media screen and ( max-width : 1023px ) {
  .lottie-animation.center {
    height: auto !important;
    position: relative;
  }
}
.lottie-animation.center svg {
  height: 100% !important;
}
@media screen and ( max-width : 1023px ) {
  .lottie-animation.center svg {
    height: auto !important;
  }
}

@media screen and ( max-width : 1023px ) {
  .commonKenko .animationArea {
    width: 100%;
    height: auto;
    min-height: 0;
  }
}
.commonKenko .textBox {
  display: flex;
  align-items: center;
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .textBox {
    width: 100%;
    max-width: 9999px;
    height: auto;
    display: block;
    padding-top: 10.6666666667vw;
    padding-bottom: 24vw;
  }
}
.commonKenko .textBox.leftPadding {
  padding-left: 3.074670571vw;
}
@media screen and ( min-width : 1680px ) {
  .commonKenko .textBox.leftPadding {
    padding-left: 52.5px;
  }
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .textBox.leftPadding {
    padding-left: 6.9333333333vw;
  }
}
.commonKenko .text {
  width: 39.0922401171vw;
  max-width: 656px;
  margin: 0 auto;
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .text {
    width: 100%;
    max-width: 9999px;
  }
}
.commonKenko .textBox.alignTop {
  align-items: flex-start;
}
.commonKenko .number {
  width: 23.3528550512vw;
  max-width: 390px;
  margin: 0 0 2.7818448023vw;
}
@media screen and ( min-width : 1680px ) {
  .commonKenko .number {
    margin-bottom: 46px;
  }
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .number {
    width: 72.5333333333vw;
    max-width: 9999px;
    margin-bottom: 10.6666666667vw;
  }
}
.commonKenko .title {
  margin: 0 auto 2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  .commonKenko .title {
    margin-bottom: 50px;
  }
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .title {
    margin-bottom: 10.6666666667vw;
    letter-spacing: 0;
  }
}
.commonKenko .caption {
  margin-bottom: 6.588579795vw;
}
@media screen and ( min-width : 1680px ) {
  .commonKenko .caption {
    margin-bottom: 112.5px;
  }
}
@media screen and ( max-width : 1023px ) {
  .commonKenko .caption {
    margin-bottom: 10.6666666667vw;
  }
}

#summary {
  position: relative;
}
@media screen and ( max-width : 1023px ) {
  #summary {
    display: block;
    min-height: 0;
  }
}
#summary .halfBox {
  padding-top: 6.588579795vw;
}
@media screen and ( min-width : 1680px ) {
  #summary .halfBox {
    padding-top: 112.5px;
  }
}
@media screen and ( max-width : 1023px ) {
  #summary .halfBox {
    padding-top: 0vw;
    height: auto;
    min-height: 0;
  }
}
#summary .halfBox.title .headText {
  font-size: 3.513909224vw;
  font-weight: 900;
  padding-left: 6.588579795vw;
}
@media screen and ( min-width : 1680px ) {
  #summary .halfBox.title .headText {
    font-size: 60px;
    padding-left: 111px;
  }
}
@media screen and ( max-width : 1023px ) {
  #summary .halfBox.title .headText {
    font-size: 7.2vw;
    padding-left: 6.9333333333vw;
  }
}
@media screen and ( max-width : 1023px ) {
  #summary .halfBox .text {
    padding-bottom: 24vw;
  }
}
#summary .line {
  width: 93.7042459736vw;
  max-width: 1600px;
  height: 0.2928257687vw;
  max-height: 5px;
  background-image: url(../images/top/illust_line.svg);
  position: absolute;
  bottom: 3.6603221083vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and ( min-width : 1680px ) {
  #summary .line {
    bottom: 62.5px;
  }
}
@media screen and ( max-width : 1023px ) {
  #summary .line {
    width: 100%;
    height: 1.0666666667vw;
    bottom: 5.3333333333vw;
  }
}
#summary .illust {
  position: absolute;
  bottom: 0;
  left: 19.2532942899vw;
  width: 13.9824304539vw;
  max-width: 235px;
  height: 17.4963396779vw;
  max-height: 295px;
}
@media screen and ( min-width : 1680px ) {
  #summary .illust {
    left: 328.75px;
  }
}
@media screen and ( max-width : 1023px ) {
  #summary .illust {
    width: 25.3333333333vw;
    max-width: 9999px;
    height: 31.7333333333vw;
    left: 14.4vw;
  }
}

/*==================================================
#modehouseArea
==================================================*/
.roof {
  background-color: #FCEA7B;
  position: relative;
  pointer-events: none;
}

#modehouseArea {
  position: relative;
  width: 100%;
  background-color: #FFFEF1;
  margin-bottom: 10.541727672vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea {
    margin-bottom: 180px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea {
    margin-bottom: 24vw;
  }
}
#modehouseArea .captionBox {
  margin-bottom: 7.027818448vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .captionBox {
    margin-bottom: 120px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox {
    margin-bottom: 24vw;
  }
}
#modehouseArea .captionBox dt {
  height: 10.0292825769vw;
  max-height: 171px;
  width: 100%;
  margin-bottom: 2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .captionBox dt {
    margin-bottom: 50px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox dt {
    height: auto;
  }
}
#modehouseArea .captionBox dd {
  line-height: 1.8;
}
#modehouseArea .captionBox .title {
  font-size: 1.5373352855vw;
  margin-bottom: 2.196193265vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .captionBox .title {
    font-size: 26px;
    margin-bottom: 37px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .title {
    font-size: 5.3333333333vw;
    letter-spacing: 0;
    margin-bottom: 10.1333333333vw;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .title.spMb {
    margin-bottom: 24vw;
  }
}
#modehouseArea .captionBox .stay dt {
  text-align: center;
}
#modehouseArea .captionBox .stay dt .lineSleep {
  width: 34.3338213763vw;
  max-width: 576px;
  height: 100%;
  margin: 0 auto;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .stay dt .lineSleep {
    width: 100%;
    max-width: 9999px;
    margin-bottom: 4vw;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .wood {
    margin-top: 22.6666666667vw;
  }
}
#modehouseArea .captionBox .wood dt {
  display: flex;
  justify-content: space-between;
}
#modehouseArea .captionBox .wood dt .illustWood {
  width: 32.0644216691vw;
  max-width: 538px;
  margin: 0 auto;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .wood dt .illustWood {
    width: 100%;
    max-width: 9999px;
    margin-bottom: 4vw;
  }
}
#modehouseArea .captionBox .wood dt .title {
  width: 28.9897510981vw;
  max-width: 492px;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .captionBox .wood dt .title {
    width: 59.7333333333vw;
    max-width: 9999px;
  }
}
#modehouseArea .mapBox {
  width: 100%;
  padding: 7.027818448vw;
  background-color: #FFFFFF;
  display: flex;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox {
    display: block;
    padding: 12.2666666667vw 5.3333333333vw;
  }
}
#modehouseArea .mapBox .text {
  width: 39.0922401171vw;
  max-width: 656px;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .text {
    width: 100%;
    max-width: 9999px;
  }
}
#modehouseArea .mapBox .text h6 {
  font-size: 3.074670571vw;
  margin-bottom: 2.9282576867vw;
  font-weight: 900;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .mapBox .text h6 {
    font-size: 52.5px;
    margin-bottom: 50px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .text h6 {
    font-size: 6.8vw;
    margin-bottom: 5.3333333333vw;
    letter-spacing: 0;
  }
}
#modehouseArea .mapBox .text .address {
  font-size: 1.1713030747vw;
  margin-bottom: 2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .mapBox .text .address {
    font-size: 20px;
    margin-bottom: 50px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .text .address {
    font-size: 4vw;
    margin-bottom: 8vw;
  }
}
#modehouseArea .mapBox .map {
  width: 31.7715959004vw;
  max-width: 533px;
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .map {
    width: 100%;
    max-width: 9999px;
    margin-bottom: 12.8vw;
  }
}
#modehouseArea .mapBox .btn {
  width: 23.0600292826vw;
  max-width: 380px;
  position: relative;
  padding-left: 1.4641288433vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .mapBox .btn {
    padding-left: 25px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .btn {
    width: 100%;
    max-width: 9999px;
    padding-left: 8vw;
  }
}
#modehouseArea .mapBox .btn .illust {
  width: 4.39238653vw;
  max-width: 74px;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: -2.9282576867vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .mapBox .btn .illust {
    bottom: -50px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .btn .illust {
    width: 16vw;
    max-width: 9999px;
    bottom: -10.6666666667vw;
  }
}
#modehouseArea .mapBox .tac {
  width: 23.0600292826vw;
  max-width: 380px;
  font-size: 1.0248901903vw;
  text-align: center;
  margin-top: 0.7320644217vw;
  padding-left: 1.4641288433vw;
}
@media screen and ( min-width : 1680px ) {
  #modehouseArea .mapBox .tac {
    font-size: 17.5px;
    padding-left: 25px;
  }
}
@media screen and ( max-width : 1023px ) {
  #modehouseArea .mapBox .tac {
    width: 100%;
    font-size: 3.7333333333vw;
    max-width: 9999px;
    padding-left: 8vw;
    margin-top: 3.7333333333vw;
    line-height: 1;
  }
}

/* #modehouseArea */
/*==================================================
#worksArea
==================================================*/
#worksArea {
  width: 100%;
  background-color: #FFFEF1;
}
#worksArea .categoryTitle {
  margin-bottom: 3.513909224vw;
}
@media screen and ( min-width : 1680px ) {
  #worksArea .categoryTitle {
    margin-bottom: 60px;
  }
}
@media screen and ( max-width : 1023px ) {
  #worksArea .categoryTitle {
    margin-bottom: 11.7333333333vw;
  }
}

/* #worksArea */
/*==================================================
#topicsArea
==================================================*/
#topicsArea {
  width: 100%;
  background-color: #FFF;
  padding-top: 4.0995607613vw;
  padding-bottom: 7.027818448vw;
}
@media screen and ( min-width : 1680px ) {
  #topicsArea {
    padding-top: 70px;
    padding-bottom: 120px;
  }
}
@media screen and ( max-width : 1023px ) {
  #topicsArea {
    padding-top: 14.9333333333vw;
    padding-bottom: 25.6vw;
  }
}
#topicsArea .contentWrap {
  justify-content: space-between;
}
#topicsArea .newsList {
  width: 39.0922401171vw;
  max-width: 656px;
}
@media screen and ( max-width : 1023px ) {
  #topicsArea .newsList {
    width: 100%;
    max-width: 9999px;
  }
}
@media screen and ( max-width : 1023px ) {
  #topicsArea .newsList:first-of-type {
    margin-bottom: 25.6vw;
  }
}

/*==================================================
#pomotionArea
==================================================*/
#pomotionArea {
  width: 100%;
  background-color: #FFF;
  padding-top: 4.0995607613vw;
  padding-bottom: 7.027818448vw;
}
@media screen and ( min-width : 1680px ) {
  #pomotionArea {
    padding-top: 70px;
    padding-bottom: 120px;
  }
}
@media screen and ( max-width : 1023px ) {
  #pomotionArea {
    padding-top: 14.9333333333vw;
    padding-bottom: 25.6vw;
  }
}
#pomotionArea .contentWrap {
  justify-content: space-between;
}
#pomotionArea .item {
  width: 39.0922401171vw;
  max-width: 656px;
}
@media screen and ( max-width : 1023px ) {
  #pomotionArea .item {
    width: 100%;
    max-width: 9999px;
  }
}
@media screen and ( max-width : 1023px ) {
  #pomotionArea .item:first-of-type {
    margin-bottom: 25.6vw;
  }
}

#corporateArea {
  width: 100%;
  background-color: #F7F7F0;
  padding-top: 7.027818448vw;
  padding-bottom: 7.027818448vw;
}
@media screen and ( min-width : 1680px ) {
  #corporateArea {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
@media screen and ( max-width : 1023px ) {
  #corporateArea {
    padding-top: 25.6vw;
    padding-bottom: 25.6vw;
  }
}
#corporateArea .textBox .item:last-of-type {
  border-bottom: 1px solid #DDDDDD;
}
#corporateArea .textBox .item {
  display: flex;
  align-items: center;
  border-top: 1px solid #DDDDDD;
  padding-top: 1.4641288433vw;
  padding-bottom: 1.4641288433vw;
}
@media screen and ( min-width : 1680px ) {
  #corporateArea .textBox .item {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}
@media screen and ( max-width : 1023px ) {
  #corporateArea .textBox .item {
    display: block;
    padding-top: 2.9333333333vw;
    padding-bottom: 3.2vw;
  }
}
#corporateArea .textBox .item dt {
  width: 13.9092240117vw;
  max-width: 237px;
  font-size: 1.1713030747vw;
}
@media screen and ( min-width : 1680px ) {
  #corporateArea .textBox .item dt {
    font-size: 20px;
  }
}
@media screen and ( max-width : 1023px ) {
  #corporateArea .textBox .item dt {
    width: 100%;
    font-size: 4.2666666667vw;
    max-width: 9999px;
    margin-bottom: 2.1333333333vw;
  }
}
#corporateArea a {
  text-decoration: underline;
}
#corporateArea a:hover {
  text-decoration: none;
}

/*==================================================
#kvArea
==================================================*/
.pcImage svg .cls-1, .pcImage svg .cls-2 {
  fill: none;
}
.pcImage svg .cls-3, .pcImage svg .cls-4, .pcImage svg .cls-5, .pcImage svg .cls-6, .pcImage svg .cls-7, .pcImage svg .cls-8, .pcImage svg .cls-9, .pcImage svg .cls-10, .pcImage svg .cls-11, .pcImage svg .cls-12, .pcImage svg .cls-13, .pcImage svg .cls-14, .pcImage svg .cls-15, .pcImage svg .cls-16, .pcImage svg .cls-17, .pcImage svg .cls-18, .pcImage svg .cls-19, .pcImage svg .cls-20, .pcImage svg .cls-21 {
  fill-rule: evenodd;
}
.pcImage svg .cls-3, .pcImage svg .cls-22 {
  fill: #fff;
}
.pcImage svg .cls-4 {
  fill: #604b3b;
}
.pcImage svg .cls-23, .pcImage svg .cls-11 {
  fill: #12491d;
}
.pcImage svg .cls-5 {
  fill: #ffff01;
}
.pcImage svg .cls-24 {
  fill: #237d26;
}
.pcImage svg .cls-6 {
  fill: #beac83;
}
.pcImage svg .cls-7, .pcImage svg .cls-25 {
  fill: #fe330a;
}
.pcImage svg .cls-26 {
  clip-path: url(#clippath-1);
}
.pcImage svg .cls-27 {
  clip-path: url(#clippath-2);
}
.pcImage svg .cls-28 {
  fill: #cf502a;
}
.pcImage svg .cls-9 {
  fill: #ffdb01;
}
.pcImage svg .cls-10 {
  fill: #be894a;
}
.pcImage svg .cls-29 {
  fill: #0e3917;
}
.pcImage svg .cls-12 {
  fill: #41aa54;
}
.pcImage svg .cls-13, .pcImage svg .cls-30 {
  fill: #ffcc01;
}
.pcImage svg .cls-2 {
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 0.735px;
}
.pcImage svg .cls-14 {
  fill: #ff8001;
}
.pcImage svg .cls-31 {
  fill: #2e58a6;
}
.pcImage svg .cls-15 {
  fill: #6ebf5b;
}
.pcImage svg .cls-16 {
  fill: #85785c;
}
.pcImage svg .cls-32 {
  fill: #ffe649;
}
.pcImage svg .cls-17 {
  fill: #f775b9;
}
.pcImage svg .cls-33 {
  fill: #6c624b;
}
.pcImage svg .cls-18 {
  fill: #e5dab3;
}
.pcImage svg .cls-19 {
  fill: #5c941d;
}
.pcImage svg .cls-20 {
  fill: #7c411e;
}
.pcImage svg .cls-21 {
  fill: #63300f;
}
.pcImage svg .cls-34 {
  clip-path: url(#clippath);
}

.spImage svg .cls-1 {
  fill: none;
}
.spImage svg .cls-2, .spImage svg .cls-3, .spImage svg .cls-4, .spImage svg .cls-5, .spImage svg .cls-6, .spImage svg .cls-7, .spImage svg .cls-8, .spImage svg .cls-9, .spImage svg .cls-10, .spImage svg .cls-11, .spImage svg .cls-12, .spImage svg .cls-13, .spImage svg .cls-14, .spImage svg .cls-15, .spImage svg .cls-16, .spImage svg .cls-17, .spImage svg .cls-18, .spImage svg .cls-19, .spImage svg .cls-20 {
  fill-rule: evenodd;
}
.spImage svg .cls-2, .spImage svg .cls-21 {
  fill: #fff;
}
.spImage svg .cls-3 {
  fill: #604b3b;
}
.spImage svg .cls-22, .spImage svg .cls-10 {
  fill: #12491d;
}
.spImage svg .cls-4 {
  fill: #ffff01;
}
.spImage svg .cls-23 {
  fill: #237d26;
}
.spImage svg .cls-5 {
  fill: #beac83;
}
.spImage svg .cls-6, .spImage svg .cls-24 {
  fill: #fe330a;
}
.spImage svg .cls-25 {
  clip-path: url(#clippath-1);
}
.spImage svg .cls-26 {
  fill: #cf502a;
}
.spImage svg .cls-8 {
  fill: #ffdb01;
}
.spImage svg .cls-9 {
  fill: #be894a;
}
.spImage svg .cls-27 {
  fill: #0e3917;
}
.spImage svg .cls-11 {
  fill: #41aa54;
}
.spImage svg .cls-12, .spImage svg .cls-28 {
  fill: #ffcc01;
}
.spImage svg .cls-13 {
  fill: #ff8001;
}
.spImage svg .cls-29 {
  fill: #2e58a6;
}
.spImage svg .cls-14 {
  fill: #6ebf5b;
}
.spImage svg .cls-15 {
  fill: #85785c;
}
.spImage svg .cls-30 {
  fill: #ffe649;
}
.spImage svg .cls-16 {
  fill: #f775b9;
}
.spImage svg .cls-31 {
  fill: #6c624b;
}
.spImage svg .cls-17 {
  fill: #e5dab3;
}
.spImage svg .cls-18 {
  fill: #5c941d;
}
.spImage svg .cls-19 {
  fill: #7c411e;
}
.spImage svg .cls-20 {
  fill: #63300f;
}
.spImage svg .cls-32 {
  clip-path: url(#clippath);
}

.pcImage {
  display: block;
}
@media screen and ( max-width : 1023px ) {
  .pcImage {
    display: none;
  }
}

.spImage {
  display: none;
}
@media screen and ( max-width : 1023px ) {
  .spImage {
    display: block;
  }
}

.topSvgContainer .watapii {
  transform: translateX(-5.8565153734vw);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.5s;
}
@media screen and ( max-width : 1023px ) {
  .topSvgContainer .watapii {
    transform: translateX(-21.3333333333vw);
  }
}
.topSvgContainer .campaign {
  opacity: 0;
  transition: all 0.6s;
  transition-delay: 1s;
  transform: translateY(0.7320644217vw);
}

.topSvgContainer.loaded .watapii {
  transform: translateX(0);
}
.topSvgContainer.loaded .campaign {
  opacity: 1;
  transform: translateY(0);
}
.topSvgContainer.loaded .baloonBtn {
  cursor: pointer;
}
.topSvgContainer.loaded .baloonBtn:hover {
  fill: #FE5D39;
}