@charset "UTF-8";
/***** -- javascript -- *****/
/* swiper  */
.swiper-pagination {
  bottom: 0;
  width: 100%;
}
.swiper-pagination > * {margin: 4px;}
.swiper-pagination-bullet-active {background: var(--color-1st);}
.swiper-button-next, .swiper-button-prev {color: transparent;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {text-shadow: none;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.swiper-button-prev, .swiper-button-next {
  width: 30px;
  height: 40px;
  background-size: cover;
  transition: all .2s ease;
}
.swiper-button-prev {
  left: -32px;
  background-image: url('../img/slideshow-arrow-left.png');
}
.swiper-button-next {
  right: -32px;
  background-image: url('../img/slideshow-arrow-right.png');
}
.swiper-button-prev:hover {transform: translateX(-8px);}
.swiper-button-next:hover {transform: translateX(8px);}
@media screen and (max-width: 980px) {
  .swiper-button-prev, .swiper-button-next {
    width: 4vw;
    height: 5.3vw;
  }
  .swiper-button-prev {left: -7vw;}
  .swiper-button-next {right: -7vw;}
  .swiper-button-prev:hover {transform: translateX(0);}
  .swiper-button-next:hover {transform: translateX(0);}
}
@media screen and (max-width: 640px) {
}


/***** -- Foundation -- *****/
@media screen and (max-width: 980px) {
  .l-wrap, .l-parlx {padding: 6.4vw 0;}
  .l-wrap:last-of-type {padding-bottom: 12.8vw;}
}
@media screen and (max-width: 640px) {
  .l-wrap, .l-parlx {padding: 7.2vw 0;}
  .l-wrap:last-of-type {padding-bottom: 14.4vw;}
}


/***** -- Module  -- *****/


/***** -- Component  -- *****/
/* heading */
.c-heading {
  font-family: var(--font-family-1st);
  letter-spacing: 0.1em;
}
.c-heading--01 {text-align: center;}
.c-heading--01 > span {
  display: block;
  letter-spacing: 0.1em;
}
.c-heading--01 > span:nth-of-type(1) {
  font-size: 3.2rem;
  color: var(--color-2nd);
}
.c-heading--01 > span:nth-of-type(2) {
  font-size: 1.6rem;
  color: var(--color-1st);
  margin-top: .5em;
}
/* btn */
.c-btn {
  font-family: var(--font-family-1st);
  font-weight: 700;
  line-height: 1;
  padding: 0.8em 1.6em;
  border: 2px solid;
  border-radius: 10em;
}
.c-btn--lg {
  font-size: 150%;
  padding-top: 1em;
  padding-bottom: 1em;
}
.c-btn.is-download {
  font-size: 1.8rem;
  padding: 0.4em 56px 0.4em 0.8em;
}
.c-btn.is-download::before {
  display: inline-block;
  margin-right: 8px;
  padding: 0.4em 0.8em;
  background-color: #fff;
  border-radius: 2em;
  content: '無料';
}
.c-btn--01.is-download::before {color: var(--color-1st);}
.c-btn--02.is-download::before {color: var(--color-2nd);}
.c-btn.is-download::after {
  display: block;
  position: absolute;
  right: 20px;
  top: 47%;
  font-family: "Font Awesome 6 Free";
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  transform: translate(0,-50%);
  transition: all .2s ease;
  content: '\f019';
}
.c-btn.is-download:hover::after {top: 55%;}
.c-btn.is-arrrow {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  padding-right: 56px;
}
.c-btn.is-arrrow::after {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  font-family: "Font Awesome 6 Free";
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  transform: translate(0,-50%);
  transition: all .2s ease;
  content: '\f054';
}
.c-btn.is-arrrow:hover::after {right: 10px;}
.c-btn--01 {
  color: #fff;
  background-color: var(--color-1st);
  border-color: var(--color-1st);
}
.c-btn--01:hover {
  color: var(--color-1st);
  background-color: #fff;
}
.c-btn--01.is-download:hover::before {
  color: #fff;
  background-color: var(--color-1st);
}
.c-btn--02 {
  color: #fff;
  background-color: var(--color-2nd);
  border-color: var(--color-2nd);
}
.c-btn--02:hover {
  color: var(--color-2nd);
  background-color: #fff;
}
.c-btn--02.is-download:hover::before {
  color: #fff;
  background-color: var(--color-2nd);
}
/* accordion */
.c-accordion::before {background-color: transparent;}
.c-accordion::after {
  position: absolute;
  right: 1.25em;
  top: 50%;
  width: 30px;
  height: 28px;
  background-color: transparent;
  background-size: cover;
  background-image: url('../img/icon-plus.png');
  transform: translateY(-50%);
  transition: none;
  content: '';
}
.c-accordion.is-active::after {
  width: 30.49px;
  background-image: url('../img/icon-minus.png');
}
@media screen and (max-width: 1200px) {
  /* btn */
  /*
  .c-btn--01:hover {
    color: #fff;
    background-color: var(--color-1st);
  }
  .c-btn--02:hover {
    color: #fff;
    background-color: var(--color-2nd);
  }
  */
}
@media screen and (max-width: 980px) {
  /* heading */
  .c-heading--01 > span:nth-of-type(1) {font-size: 4vw;}
  .c-heading--01 > span:nth-of-type(2) {font-size: 2vw;}
  /* btn */
  .c-btn.is-download {
    font-size: 2.8vw;
    padding: 0.4em 3.6em 0.4em 0.8em;
  }
  .c-btn.is-download::after {right: 3vw;}
  .c-btn.is-arrrow {
    font-size: 2.8vw;
    padding-right: 3.6em;
  }
  .c-btn.is-arrrow::after {right: 3vw;}
  /* accordion */
  .c-accordion::after {
    width: 3.87vw;
    height: 3.6vw;
  }
  .c-accordion.is-active::after {
    width: 3.92vw;
    height: 3.6vw;
  }
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
  /* heading */
  .c-heading--01 > span:nth-of-type(1) {font-size: 5.6vw;}
  .c-heading--01 > span:nth-of-type(2) {font-size: 3vw;}
  /* btn */
  .c-btn--lg {
    font-size: 125%;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
  }
  .c-btn.is-download {
    font-size: 3.2vw;
    padding: 0.6em 3.6em 0.6em 0.8em;
  }
  .c-btn.is-arrrow {font-size: 3.2vw;}
  /* accordion */
  .c-accordion::after {
    width: 4.3vw;
    height: 4vw;
  }
  .c-accordion.is-active::after {
    width: 4.35vw;
    height: 4vw;
  }
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 370px) {
}


/***** -- Utility -- ******/
.u-illust--01 {width: 144px;}
.u-illust--02 {width: 112px;}
.u-illust--03 {width: 77px;}
.u-illust--04 {width: 253px;}
.u-illust--05 {width: 103px;}
.u-illust--06 {width: 84px;}
.u-illust--07 {width: 115px;}
.u-illust--08 {width: 119px;}
.u-illust--09 {width: 170px;}
.u-illust--10 {width: 203px;}
.u-illust--11 {width: 94px;}
.u-illust--12 {width: 98px;}
.u-illust--13 {width: 221px;}
.u-shape--01 {
  width: 72px;
  opacity: .7;
}
.u-shape--02 {
  width: 48px;
  opacity: .7;
}
.u-shape--03 {
  width: 48px;
  opacity: .7;
}
.u-shape--04 {
  width: 72px;
  opacity: .7;
}
.u-shape--05 {
  width: 40px;
  opacity: .7;
}
.u-shape--06 {
  width: 48px;
  opacity: .7;
}
@media screen and (max-width: 980px) {
  .u-illust--01 {width: 16vw;}
  .u-illust--02 {width: 12vw;}
  .u-illust--03 {width: 8.5vw;}
  .u-illust--04 {width: 28vw;}
  .u-illust--05 {width: 11vw;}
  .u-illust--06 {width: 9vw;}
  .u-illust--07 {width: 13vw;}
  .u-illust--08 {width: 13vw;}
  .u-illust--09 {width: 19vw;}
  .u-illust--10 {width: 23vw;}
  .u-illust--11 {width: 10vw;}
  .u-illust--12 {width: 10vw;}
  .u-illust--13 {width: 25vw;}
  .u-shape--01 {width: 8vw;}
  .u-shape--02 {width: 6vw;}
  .u-shape--03 {width: 6vw;}
  .u-shape--04 {width: 8vw;}
  .u-shape--05 {width: 6vw;}
  .u-shape--06 {width: 6vw;}
}
@media screen and (max-width: 640px) {
  .u-illust--01 {width: 20vw;}
  .u-illust--02 {width: 14vw;}
  .u-illust--03 {width: 10.5vw;}
  .u-illust--04 {width: 30vw;}
  .u-illust--05 {width: 13vw;}
  .u-illust--06 {width: 11vw;}
  .u-illust--07 {width: 15vw;}
  .u-illust--08 {width: 15vw;}
  .u-illust--09 {width: 21vw;}
  .u-illust--10 {width: 25vw;}
  .u-illust--11 {width: 12vw;}
  .u-illust--12 {width: 12vw;}
  .u-illust--13 {width: 27vw;}
  .u-shape--01 {width: 8vw;}
  .u-shape--02 {width: 6vw;}
  .u-shape--03 {width: 6vw;}
  .u-shape--04 {width: 8vw;}
  .u-shape--05 {width: 6vw;}
  .u-shape--06 {width: 6vw;}
}


/***** -- Project -- *****/
/* header */
#header .p-header {box-shadow: 0 2px 4px rgba( 0, 0, 0, .1);}
#header .p-header-menu {display: none;}
#header .p-header-link {
  position: absolute;
  right: 336px;
  top: 50%;
  transform: translate(0,-50%);
}
#header .p-header-link > .c-flex > a {
  font-family: var(--font-family-1st);
  font-weight: 700;
  padding: 0 1.5em;
}
#header .p-header-link > .c-flex > a:hover {color: var(--color-1st);}
#header .p-header-btn {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translate(0,-50%);
}
#header .p-header-btn .c-flex > * {margin-right: 8px;}
#header .p-header-btn .c-btn span {display: block;}
#header .p-header-btn .c-btn.is-form > span:nth-of-type(1) {
  font-size: 1.8rem;
  color: #fff8da;
}
#header .p-header-btn .c-btn.is-form > span:nth-of-type(2) {
  font-size: 1.4rem;
  margin-top: 8px;
}
#header .p-header-btn .c-btn.is-form:hover > span:nth-of-type(1) {color: var(--color-2nd);}
#header .p-header-btn .c-btn.is-login img {
  width: auto;
  height: 18px;
}
#header .p-header-btn .c-btn.is-login span {
  font-size: 1.4rem;
  margin-top: 8px;
  padding: 0 1em;
}
#header.l-header2 {
  position: fixed;
  left: 32px;
  top: 12px;
  width: calc(100% - (32px * 2));
  height: inherit;
  background-color: #fff;
  border-radius: 80px;
  opacity: 1;
  transition: background-color .2s, transform .2s;
  transform: translateY(0);
  transform-origin: top center;
  z-index: 100;
}
#header.l-header2 .p-header {box-shadow: none;}
#header.l-header2 .p-header-link {padding-left: 184px;}
#header.l-header2 .p-header-link > .c-flex > a {padding: 0 1em;}
#header.l-header2 .p-header-btn {right: 12px;}
#header.l-header2 .p-header-menu {right: 12px;}
html.is-drawer #header.l-header2 {background-color: #fff;}



/* drawer */
.p-drawer-item {margin-top: 8vw;}
.p-drawer-item > .c-flex > * {
  width: 100%;
  font-family: var(--font-family-1st);
  font-size: 3.6vw;
  font-weight: 700;
  text-align: center;
  padding: 3vw 0;
} 
.p-drawer-btn {margin-top: 4vw;}
.p-drawer-btn > .c-flex > *:not(:first-child) {margin-top: 4vw;}
.p-drawer-btn .c-btn {width: 70%;}
.p-drawer-btn .c-btn span {display: block;}
.p-drawer-btn .c-btn.is-form > span:nth-of-type(1) {
  font-size: 4vw;
  color: #fff8da;
}
.p-drawer-btn .c-btn.is-form > span:nth-of-type(2) {
  font-size: 3.6vw;
  margin-top: 2vw;
}
.p-drawer-btn .c-btn.is-login img {
  width: auto;
  height: 6vw;
}
.p-drawer-btn .c-btn.is-login span {
  font-size: 3.6vw;
  margin-top: 2vw;
}
/* footer */
#footer.l-footer {
  width: 100%;
  height: 128px;
  padding: 0;
  background-image: url(../img/footer-bg.png);
  background-size: cover;
}
#footer .p-footer {
  position: relative;
  width: 100%;
  height: inherit;
  margin: auto;
}
#footer .p-footer-contents {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translate(0,-50%);
}
#footer .p-footer-contents img {width: 128px;}
#footer .p-footer-contents p {
  font-family: var(--font-family-1st);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-top: 8px;
}
@media screen and (max-width: 1200px) {
  /* header */
  #header .p-header-btn .c-btn:hover > span:nth-of-type(1) {color: #fff8da;}
  #header.l-header2 {
    left: 8px;
    width: calc(100% - (8px * 2));
  }
  #header.l-header2 .p-header-link > .c-flex > a {
    padding: 0 0.5em;
    margin: 0.2em;
  }
}
@media screen and (max-width: 980px) {
  /* header */
  #header .p-header-menu {display: block;}
  #header .p-header-link {display: none;}
  #header .p-header-btn {display: none;}
  /* footer */
  #footer.l-footer {height: 18vw;}
  #footer .p-footer-contents img {width: 16vw;}
  #footer .p-footer-contents p {
    font-size: 2vw;
    margin-top: 1vw;
  }
}
@media screen and (max-width: 640px) {
  /* footer */
  #footer.l-footer {height: 21vw;}
  #footer .p-footer-contents img {width: 24vw;}
  #footer .p-footer-contents p {font-size: 2.4vw;}
}

/* ----- docdl ----- */
.p-docdl .c-flex > * {text-align: center;}
.p-docdl .c-flex > *:nth-child(1) {
  width: 45%;
  margin-right: 5%;
}
.p-docdl .c-flex > *:nth-child(2) {width: 50%;}
.p-docdl a {
  position: relative;
  display: block;
  width: 90%;
  max-width: 820px;
  margin: auto;
  padding: 48px;
  background-color: var(--color-2nd);
  border-radius: 16px;
  box-shadow: 4px 4px 5px rgb(0 0 0 / 20%);
}
.p-docdl a::after {
  position: absolute;
  right: -32px;
  top: -32px;
  width: 90px;
  height: 90px;
  font-family: var(--font-family-1st);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-2nd);
  text-align: center;
  line-height: 90px;
  background-color: #ffdb00;
  border: 3px solid var(--color-2nd);
  border-radius: 100%;
  content: '無料';
}
.p-docdl-lead {
  font-family: var(--font-family-1st);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1.5;
}
.p-docdl .c-btn.is-download {
  margin-top: 16px;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 1.6em;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
}
.p-docdl .c-btn.is-download::before {display: none;}
.p-docdl a:hover {transform: translateY(-16px);}
.p-docdl a:hover .c-btn.is-download {
  color: var(--color-1st);
  background-color: #fff;
}
.p-docdl a:hover .c-btn.is-download::after {top: 55%;}
@media screen and (max-width: 980px) {
  .p-docdl a {padding: 4.8vw 2.4vw;}
  .p-docdl a::after {
    right: -3vw;
    top: -3vw;
    width: 10vw;
    height: 10vw;
    font-size: 2.8vw;
    line-height: 10vw;
  }
  .p-docdl .c-flex > *:nth-child(1) {
    width: 60%;
    margin-right: 2%;
  }
  .p-docdl .c-flex > *:nth-child(2) {width: 38%;}
  .p-docdl-lead {font-size: 2.8vw;}
}
@media screen and (max-width: 640px) {
  .p-docdl a {padding: 4.8vw;}
  .p-docdl .c-flex {flex-direction: column-reverse;}
  .p-docdl .c-flex > *:nth-child(1) {
    width: 100%;
    margin-right: 0;
    margin-top: 4vw;
  }
  .p-docdl .c-flex > *:nth-child(2) {width: 100%;}
  .p-docdl-lead {font-size: 4vw;}
}

/* ----- fixRightBottom ----- */
.p-fixRightBottom {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 144px;
  height: 144px;
  color: #fff;
  font-weight: 700;
  background-color: var(--color-2nd);
  border: 3px solid var(--color-2nd);
  border-radius: 100%;
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
  z-index: 100;
}
.p-fixRightBottom::after {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 24px;
  font-family: "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%,0);
  transition: all .2s ease;
  content: '\f019';
}
.p-fixRightBottom:hover {
  color: var(--color-2nd);
  background-color: #fff;
}
.p-fixRightBottom:hover::after  {transform: translate(-50%,4px);}
.p-fixRightBottom p {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-60%);
}
.p-fixRightBottom p > span {
  display: block;
  font-family: var(--font-family-1st);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.p-fixRightBottom p > span:nth-of-type(1) {font-size: 16px;}
.p-fixRightBottom p > span:nth-of-type(2) {
  font-size: 18px;
  margin-top: 4px;
}
@media screen and (max-width: 980px) {
  .p-fixRightBottom {
    right: 2vw;
    bottom: 2vw;
    width: 18vw;
    height: 18vw;
  }
  .p-fixRightBottom p > span:nth-of-type(1) {font-size: 1.8vw;}
  .p-fixRightBottom p > span:nth-of-type(2) {
    font-size: 2.0vw;
    margin-top: 1vw;
  }
  .p-fixRightBottom::after {
    bottom: 16%;
    font-size: 2.0vw;
  }
}
@media screen and (max-width: 640px) {
  .p-fixRightBottom {
    width: 20vw;
    height: 20vw;
  }
  .p-fixRightBottom p > span:nth-of-type(1) {font-size: 2.2vw;}
  .p-fixRightBottom p > span:nth-of-type(2) {font-size: 2.4vw;}
  .p-fixRightBottom::after {
    bottom: 14%;
    font-size: 2.4vw;
  }
}

/* ----- fixFloating ----- */
.p-fixFloating {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 98;
}
.p-fixFloating:hover {
  transform: translateY(-10px);
}
.p-fixFloating img {
  width: 150px;
  height: 150px;
}
@media screen and (max-width: 980px) {
  .p-fixFloating {
    right: 2vw;
    bottom: 2vw;
  }
  .p-fixFloating img {
    width: 18vw;
    height: 18vw;
  }
}
@media screen and (max-width: 640px) {
  .p-fixFloating img {
    width: 20vw;
    height: 20vw;
  }
}





/* ----- littleswitch ----- */
.menu-item.drop-menu {
  position: relative;
}

.menu-item.drop-menu a {
  font-family: var(--font-family-1st);
  font-weight: 700;
  padding: 0 1.5em;
}

.menu-item.drop-menu a:hover {
  color: var(--color-1st);
}

.menu-item.drop-menu .drop-menu-list {
  background-color: var(--loader-bg-color);
  left: 0;
  list-style: none;
  max-height: 0;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  overflow: hidden;
  padding: 0 0.75em;
  position: absolute;
  top: 40px;
  transition: max-height 0.5s;
  width: 180px;
}

.menu-item.drop-menu:hover > .drop-menu-list {
  max-height: 500px;
}

.menu-item.drop-menu .drop-menu-list .drop-menu-item + .drop-menu-item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-item.drop-menu .drop-menu-list .drop-menu-item a {
  display: inline-block;
  padding: 6px 12px;
  width: 100%;
}

.d-inline-block {
  display: inline-block!important;
}

.footer-content-list-wrapper {
  padding: 2em 0;
}

.footer-content-list {
  margin: 0;
}

#footer .footer-content-list a {
  color: #fff;
  font-family: var(--font-family-1st);
  font-size: 14px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: underline;
}

#footer.l-footer {
  height: 220px;
}

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

@media screen and (max-width: 767px) {
  #footer.l-footer {
    height: 300px;
  }

  .footer-content-list-wrapper {
    padding: 0;
  }

  .footer-content-list {
    margin: 3em 0;
  }

  #footer li.d-inline-block {
    float: left;
    width: 50%;
  }

  #footer li.d-inline-block:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.3);
  }

  #footer li.d-inline-block a {
    display: inline-block;
    padding: 6px;
    width: 100%;
  }

  #footer li.d-inline-block a:hover {
    background-color: rgba(255,255,255,.3);
  }
}