@charset "UTF-8";
/* ######################################################################################

　アコーディオン：accordion

###################################################################################### */
* + .accordionList{margin-top: 2em;}
.accordionList{width: 100%;}
.accordionList__item{position: relative;}
.accordionList__item + .accordionList__item{margin-top: 1.5em;}

.accordionList,
.accordionList__item__first,
.accordionList__item__next{position: relative; width: 100%;}
.accordionList__item__first{
  display: block;
  border-bottom: 1px solid #979898;
  padding: 1.5em 1em;
  font-size: 2.1rem;
  text-align: center;
}
.accordionList__item__next{
  border-top: none;
  padding: 4em 0 5em;
}
.accordionList__item__toggle{
  position: absolute;
  right: 2%;
  top: 50%;
  width: 4%;
  padding-top: 4%;
  /* transform: translateY(-50%); */
  display: inline-block;
  background: #97a7b0;
  border-radius: 10%;
  border: none;
  /* font-size: 0; */
}
.accordionList__item__toggle:before{
  content: "";
  position: absolute;
  width: 45%;
  padding-top: 40%;
  transform: rotate(-45deg);
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  top: -5%;
  left: 50%;
  transform: rotate(-45deg) translateX(-70%);
  border-radius: 0 0 0 20%;
}

@media screen and (max-width: 767px) {
  .accordionList{width: 1050px;}
  .accordionList__item{border: 1px solid #979898; padding: 4em 5em;}
  .accordionList__item__first{
    padding: 1em;
    font-size: 2rem;
    text-align: center;
  }
  .accordionList__item__toggle {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    width: 35px;
    height: 35px;
    padding-top: 4%;
    bottom: 12%;
    top: inherit;
    display: inline-block;
    background: #97a7b0;
    border-radius: 10%;
    border: none;
    font-size: 0;
  }
  
}



/* ====================================================
　style-faq
==================================================== */
.accordionList.style-faq{}
.accordionList.style-faq .accordionList__item + .accordionList__item{margin-top: 3em;}
.accordionList.style-faq .accordionList__item__first{
  position: relative;
  padding: 0.75em;
  font-size: 2.8rem;
  border: 1px solid #324380;
  color: #324380;
  font-weight: 500;
  font-size: 2.8rem;
  letter-spacing: 0.2em;
  border-radius: 0.4em;
}
.accordionList.style-faq .accordionList__item__first:before{
  content: "Q";
  position: absolute;
  top: 50%;
  left: 1.5%;
  transform: translateY(-50%);
  font-family: "metropolis", sans-serif;
  font-weight: 700;
  font-size: 6.5rem;
  color: #97a7b0;
}
.accordionList.style-faq .accordionList__item__next{
  text-align: center;
  padding: 1.5em;
  border: none;
  font-size: 2.1rem;
}

.accordionList.style-faq .accordionList__item__toggle{
  position: absolute;
  right: 1.5%;
  top: 0;
  /* transform: translateY(-50%); */
  display: inline-block;
  background: none;
  border-radius: 50%;
  /* font-size: 0; */
  border: none;
  text-indent: -9999px;
}
.accordionList.style-faq .accordionList__item__toggle:before,
.accordionList.style-faq .accordionList__item__toggle:after{
  content: "";
  position: absolute;
  background: #324380;
}
.accordionList.style-faq .accordionList__item__toggle:before{
  top: 50%;
  left: calc(50% - 12px);
  width: 30px;
  height: 6px;
  transform: none;
  border: none;
  border-radius: 0px;
  padding-top: 0;
}
.accordionList.style-faq .accordionList__item__toggle:after{
  top: calc(50% - 12px);
  left: 50%;
  width: 6px;
  height: 30px;
}
.accordionList.style-faq .accordionList__item.open .accordionList__item__toggle:after{
  display: none;
}


@media screen and (max-width: 767px) {	
  .accordionList.style-faq{padding: 0 15px;}	
  .accordionList.style-faq .accordionList__item {border-radius: 0.4em; border:1px #324380 solid;}
  .accordionList.style-faq .accordionList__item + .accordionList__item{margin-top: 3em;}
  .accordionList.style-faq .accordionList__item__first{
    position: relative;
    padding: 1em 0.5em 0em;
    font-size: 1.8rem;
    color: #324380;
    font-weight: 500;
    letter-spacing: 0;
    border: none;
  }
  .accordionList.style-faq .accordionList__item__first:before{
    content: "Q";
    position: absolute;
    top: -5%;
    left: 42%;
    transform: translateX(0%)translateY(-60%);
    font-family: "metropolis", sans-serif;
    font-weight: 700;
    font-size: 3.1rem;
    color: #97a7b0;
    background: #fff;
    padding: 0 10px;
  }
  .accordionList.style-faq .accordionList__item__next{font-size: 1.6rem;text-align: left;padding: 1em 0 0 0;margin: 1em auto 0;width: calc(100% - 2.5em);display: block;border-top:1px solid #B7BBBB;}	
    .accordionList.style-faq .accordionList__item__next p{line-height: 1.8;}
  .accordionList.style-faq .accordionList__item__toggle{
    position: relative;
    left: 42%;
      top: 0;
      transform: translateY(0);	
      display: block;
      background: #FFFFFF;
      border-radius: 50%;
      font-size: 0;
  }
  .accordionList.style-faq .accordionList__item__toggle:before,
  .accordionList.style-faq .accordionList__item__toggle:after{ content: ""; position: absolute; background: #324380;}
  .accordionList.style-faq .accordionList__item__toggle:before{
    top: 50%;
    left: calc(50% - 7px);
    width: 16px;
    height: 3px;
    transform: none;
    border: none;
    border-radius: 0px;
    padding-top: 0;
  }  
  .accordionList.style-faq .accordionList__item.open .accordionList__item__toggle:before{
    left: calc(50% - 5px);
    width: 10px;
    height: 3px;
  }
  .accordionList.style-faq .accordionList__item__toggle:after{ top: calc(50% - 7px); left: 50%;  width: 3px;  height: 16px;}
  .accordionList.style-faq .accordionList__item.open .accordionList__item__toggle:after{  display: none;}
}




/* ######################################################################################

　button

###################################################################################### */
.button {
  opacity: 1;
  display: inline-block;
  position: relative;
  border: none;
  -webkit-appearance: none;
  box-shadow: none;
  border: 1px solid #333333;
  border-radius: 0;
  background: #cccccc;
  font-weight: normal;
  font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #000000;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.button:not(.disabled):active {
  top: 1px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
}
.button.block {
  display: block;
  width: 100%;
}
.button.block + .block {
  margin-top: 0.5em;
}

.button.round{
  border-radius: 3em;
}

.button.metropolis{
  letter-spacing: 0.15em;
}

@media print, screen and (min-width: 768px) {
  .button {
    text-align: center;
    display: inline-block;
    border: 1px solid #fff;
    padding: 0.5em 1em;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.14em;
  }
}
@media print, screen and (max-width: 767px) {
  .button {
    text-align: center;
    display: inline-block;
    border: 1px solid #fff;
    padding: 0.5em 1em;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
  }
}
.button.form-submit {
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.button.next:not(.disabled) {
  background: #0073b3;
  color: #ffffff;
}
.button.before:after, .button.after:after {
  margin-left: 0.5em;
}
.button.before:before, .button.after:before {
  margin-right: 0.5em;
}
.button.before.snap:after, .button.before.snap:before, .button.after.snap:after, .button.after.snap:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.button.before.snap:after, .button.after.snap:after {
  right: 0.75em;
}
.button.before.snap:before, .button.after.snap:before {
  left: 0.75em;
}
.button.disabled {
  box-shadow: none;
  cursor: no-drop;
  background: #cccccc;
  color: #aaaaaa;
}
.button.submit {
  background: #ff8000;
  color: #ffffff;
}
.button.back {
  background: #777777;
  color: #ffffff;
}
.button.del {
  background: #cc0000;
  color: #ffffff;
}
.button[class^="autoZip"] {
  background: #def1f5;
  padding: 0.5em;
  vertical-align: middle;
  margin-left: 0.5em;
}

.button.white{
  background-color: #fff;
  border: 1px solid #fff;
  color: #333;
  transition: background-color 0.25s ease;
}
a.button.white:hover{
  background-color: #e0e4e7;
  border: 1px solid #e0e4e7;
}

.button.white.reverse{
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
}
a.button.white.reverse:hover{
  background-color: #fff;
  border: 1px solid #fff;
  color: #333;
}

.button.gray{
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.7);
  color: #fff;
  transition: background-color 0.25s ease;
}
a.button.gray:hover{
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.7);
  color: rgba(0, 0, 0, 0.7);
}

.button.gray.reverse{
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.7);
  color: rgba(0, 0, 0, 0.7);
}
a.button.gray.reverse:hover{
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.7);
  color: #fff;
}


.button.black{
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  transition: background-color 0.25s ease;
}
a.button.black:hover{
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
}


.button.blue{
  overflow: hidden;
  background-color: #394680;
  border: 1px solid #394680;
  color: #fff;
  transition: background-color 0.25s ease;
}

a.button.blue:hover{
  background-color: #596b9e;
  border: 1px solid #596b9e;
}




.button.blue.twincolor:before{
  content: "";
  position: absolute;
  top: -152%;
  left: -10%;
  width: 120%;
  height: 200%;
  transform: rotate(-11deg);
  background: #4e5f9e;
  z-index: 1;
}
.button.blue.twincolor span{
  position: relative;
  z-index: 2;
}

/* 矢印1 */
.button.arrow{padding-right: 4em;}
.button.white.reverse.arrow:after,
.button.arrow:after{
  content: "";
  display: block;
  position: absolute;
  border: none;
  border-right: 2px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skew(45deg);
  transition: .3s;
  top: calc(50% - 0.35em);
  right: 1em;
  width: 2.75em;
  height: 9px;
}
.button.white.arrow:after{
  border-right-color: #333;
  border-bottom-color: #333;
}
a.button.gray.reverse.arrow:after{
  border-right-color: rgba(0, 0, 0, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.7);
}
a.button.gray.reverse.arrow:hover:after{
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* 矢印2 */
.button.arrow2{
  position: relative;
  font-weight: 500;
}
.button.arrow2:before,
.button.arrow2:after{
  content: "";
  position: absolute;
}
.button.arrow2:before{
  top: 50%;
  transform: translateY(-50%);
  right: 1.25em;
  width: 1.1em;
  height: 1px;
  background: #333;
}

.button.arrow2:after{
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.4em solid black;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}

.button.arrow2.blue:before{background: #ffffff;}
.button.arrow2.blue:after{border-left: 0.4em solid #ffffff;}

@media print, screen and (min-width: 768px) {
  .button.arrow2{
    padding: 1.05em 2em;
    font-size: 1.8rem;
    min-width: 17em;
  }
}
@media screen and (max-width: 767px) {
  .button.arrow2{
    padding: 0.75em 2em;
    font-size: 1.8rem;
    min-width: 14em;
  }
}



/* 矢印3 */
.button.arrow3{
  position: relative;
  padding: 1.05em 2em;
  font-size: 3.1rem;
  font-weight: 800;
  min-width: 13em;
}
.button.arrow3:before{
  content: "";
  position: absolute;
}
.button.arrow3:before{
  content: "";
  position: absolute;
  top: calc(50% - 0.2em);
  right: 1em;
  width: 0.4em;
  height: 0.4em;
  transform: rotate(45deg) skew(-15deg, -15deg);
  border-right: 2px solid #333;
  border-top: 2px solid #333;
}

.button.arrow3.blue:before{
  border-right-color: #fff;
  border-top-color: #fff;
}
.button.arrow3.white.reverse:before{
  border-right-color: #fff;
  border-top-color: #fff;
}
a.button.arrow3.white.reverse:hover:before{
  border-right-color: #333;
  border-top-color: #333;
}

@media print, screen and (min-width: 768px) {
  .button.arrow3{
    padding: 1.05em 2em;
    font-size: 3.1rem;
    font-weight: 800;
    min-width: 13em;
  }
}
@media screen and (max-width: 767px) {
  .button.arrow3{
    padding: 0.65em 2em;
    font-size: 1.7rem;
    font-weight: 800;
    min-width: 13em;
  }
}



/* 矢印4 */
.button.arrow4{
  position: relative;
  padding: 1.25em 2em 1.1em;
  font-size: 1.8rem;
  font-weight: 500;
  min-width: 17em;
}
.button.arrow4:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.4em solid #fff;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}
a.button.arrow4:hover:after{
  border-left-color: #333;
}




/* 矢印5 > */
.button.arrow5{
  position: relative;
  font-weight: 500;
}
.button.arrow5:before{
  content: "";
  position: absolute;
}
.button.arrow5:before{
  content: "";
  position: absolute;
  top: calc(50% - 0.2em);
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  transform: rotate(45deg) skew(-10deg, -10deg);
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.button.arrow5.white.reverse:before{
  border-right-color: #fff;
  border-top-color: #fff;
}
a.button.arrow5.white.reverse:hover:before{
  border-right-color: #fff;
  border-top-color: #fff;
}

@media print, screen and (min-width: 768px) {
  .button.arrow5{
    padding: 1.05em 2em;
    font-size: 1.8rem;
    min-width: 17em;
  }
}
@media screen and (max-width: 767px) {
  .button.arrow5{
    padding: 0.75em 2em;
    font-size: 1.8rem;
    min-width: 14em;
  }
}




/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox {
  text-align: center;
}
* + .buttonBox {
  margin-top: 1em;
}

.buttonBox p {
  text-align: center;
}
.buttonBox li .button {
  display: block;
  padding: 0.75em;
  width: 100%;
}







/* ######################################################################################

　effect

###################################################################################### */


.pageTopHide {transition:opacity 0.5s ease-in-out; opacity:1;}
.pageTopHide.hide {opacity:0; pointer-events: none;}




@keyframes bgSlideIn {
  0% {left: 100%;}
  100% {left: 0;}
}
.effect.bgSlideIn.insert .bgSlide:after{animation: bgSlideIn 0.65s ease forwards;}

.effect.bgSlideIn:nth-of-type(1) .bgSlide:after{}
.effect.bgSlideIn:nth-of-type(2) .bgSlide:after{animation-delay: 0.2s;}
.effect.bgSlideIn:nth-of-type(3) .bgSlide:after{animation-delay: 0.4s;}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeZoomOut {
  0% {
    opacity: 0;
    transform: scale(2, 2);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes slideMaskBefore {
  0% {
    width: 100%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes slideMaskAfter {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes slideMaskBeforeH {
  0% {
    height: 100%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
@keyframes slideMaskAfterH {
  0% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
@media screen {
  .effect.fadeIn {
    opacity: 0;
  }
  .effect.fadeIn.insert {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .effect.fadeUp, .effect.fadeDown, .effect.fadeRight, .effect.fadeLeft {
    opacity: 0;
  }
  .effect.fadeUp.insert, .effect.fadeDown.insert, .effect.fadeRight.insert, .effect.fadeLeft.insert {
    position: relative;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .effect.fadeUp.insert, .effect.fadeDown.insert {
    animation-duration: 0.75s;
  }
  .effect.fadeLeft.insert, .effect.fadeRight.insert {
    animation-duration: 1s;
  }
  .effect.fadeUp.insert {
    animation-name: fadeUp;
  }
  .effect.fadeDown.insert {
    animation-name: fadeDown;
  }
  .effect.fadeLeft.insert {
    animation-name: fadeLeft;
  }
  .effect.fadeRight.insert {
    animation-name: fadeRight;
  }
  .effect.fadeZoomIn, .effect.fadeZoomOut {
    opacity: 0;
  }
  .effect.fadeZoomIn.insert, .effect.fadeZoomOut.insert {
    animation-duration: 0.75s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .effect.fadeZoomIn.insert {
    animation-name: fadeZoomIn;
  }
  .effect.fadeZoomOut.insert {
    animation-name: fadeZoomOut;
  }
  .effect.slideMask {
    position: relative;
  }
  .effect.slideMask:before, .effect.slideMask:after {
    content: "";
    display: block;
    position: absolute;
    animation-duration: 1.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .effect.slideMask:before {
    background: #ffffff;
  }
  .effect.slideMask:after {
    background: #f0f0f0;
  }
  .effect.slideMask.left:before, .effect.slideMask.left:after, .effect.slideMask.right:before, .effect.slideMask.right:after {
    top: 0;
    height: 100%;
  }
  .effect.slideMask.top:before, .effect.slideMask.top:after, .effect.slideMask.bottom:before, .effect.slideMask.bottom:after {
    left: 0;
    width: 100%;
  }
  .effect.slideMask.left:before, .effect.slideMask.right:before {
    width: 100%;
  }
  .effect.slideMask.left:after, .effect.slideMask.right:after {
    width: 0%;
  }
  .effect.slideMask.top:before, .effect.slideMask.bottom:before {
    height: 100%;
  }
  .effect.slideMask.top:after, .effect.slideMask.bottom:after {
    height: 0%;
  }
  .effect.slideMask.top:before, .effect.slideMask.top:after {
    top: 0;
  }
  .effect.slideMask.right:before, .effect.slideMask.right:after {
    right: 0;
  }
  .effect.slideMask.bottom:before, .effect.slideMask.bottom:after {
    bottom: 0;
  }
  .effect.slideMask.left:before, .effect.slideMask.left:after {
    left: 0;
  }
  .effect.slideMask.insert.top:before, .effect.slideMask.insert.bottom:before {
    animation-name: slideMaskBeforeH;
  }
  .effect.slideMask.insert.top:after, .effect.slideMask.insert.bottom:after {
    animation-name: slideMaskAfterH;
  }
  .effect.slideMask.insert.left:before, .effect.slideMask.insert.right:before {
    animation-name: slideMaskBefore;
  }
  .effect.slideMask.insert.left:after, .effect.slideMask.insert.right:after {
    animation-name: slideMaskAfter;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+3) {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+4) {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+5) {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="col-"][class*="-2"]:nth-of-type(6n+6) {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="col-"][class*="-3"]:nth-of-type(4n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-3"]:nth-of-type(4n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="col-"][class*="-3"]:nth-of-type(4n+3) {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="col-"][class*="-3"]:nth-of-type(4n+4) {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="col-"][class*="-4"]:nth-of-type(3n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-4"]:nth-of-type(3n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="col-"][class*="-4"]:nth-of-type(3n+3) {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="col-"][class*="-6"]:nth-of-type(2n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-6"]:nth-of-type(2n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-5"]:nth-of-type(5n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-5"]:nth-of-type(5n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-5"]:nth-of-type(5n+3) {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-5"]:nth-of-type(5n+4) {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-5"]:nth-of-type(5n+5) {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+1) {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+2) {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+3) {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+4) {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+5) {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+6) {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-7"]:nth-of-type(7n+7) {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+1):before {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+2):before {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+3):before {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+4):before {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+5):before {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+6):before {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+7):before {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+8):before {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+1):after {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+2):after {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+3):after {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+4):after {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+5):after {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+6):after {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+7):after {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-8"]:nth-of-type(8n+8):after {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+1):before {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+2):before {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+3):before {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+4):before {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+5):before {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+6):before {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+7):before {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+8):before {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+9):before {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+1):after {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+2):after {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+3):after {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+4):after {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+5):after {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+6):after {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+7):after {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+8):after {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="mono-"][class*="-9"]:nth-of-type(9n+9):after {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+1):before {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+2):before {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+3):before {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+4):before {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+5):before {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+6):before {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+7):before {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+8):before {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+9):before {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+10):before {
    animation-delay: 0.9s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+1):after {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+2):after {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+3):after {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+4):after {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+5):after {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+6):after {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+7):after {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+8):after {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+9):after {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="mono-"][class*="-10"]:nth-of-type(10n+10):after {
    animation-delay: 0.9s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+1):before {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+2):before {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+3):before {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+4):before {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+5):before {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+6):before {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+7):before {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+8):before {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+9):before {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+10):before {
    animation-delay: 0.9s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+11):before {
    animation-delay: 1.0s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+12):before {
    animation-delay: 1.1s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+1):after {
    animation-delay: 0.0s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+2):after {
    animation-delay: 0.1s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+3):after {
    animation-delay: 0.2s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+4):after {
    animation-delay: 0.3s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+5):after {
    animation-delay: 0.4s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+6):after {
    animation-delay: 0.5s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+7):after {
    animation-delay: 0.6s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+8):after {
    animation-delay: 0.7s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+9):after {
    animation-delay: 0.8s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+10):after {
    animation-delay: 0.9s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+11):after {
    animation-delay: 1.0s;
  }
  .effect.insert[class*="col-"][class*="-1"]:nth-of-type(12n+12):after {
    animation-delay: 1.1s;
  }
}








/* ######################################################################################

　form

###################################################################################### */
input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #ffffff;
  max-width: 100%;
  color: #16181B !important;
  font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

label.select select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #ffffff;
  max-width: 100%;
  color: #16181B !important;
  font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

@media print, screen and (min-width: 768px) {
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
    padding: 0.25em;
    font-size: 1.4rem;
  }
  label.select select,
  textarea {
    padding: 0.25em;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px){
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
    padding: 0.65em 0.75em;
    font-size: 1.6rem;
  }
  label.select select,
  textarea {
    padding: 0.5em 0.75em;
    font-size: 1.6rem;
  }
}


input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
  height: auto;
}

textarea {
  width: 100%;
  min-height: 12em;
}
label.select{
  position: relative;
}
label.select select {
  padding-right: 3em;
  line-height: 1.2;
}
label.select select:not([multiple]) {
  box-shadow: none;
  margin: 0;
}
label.select:after {
  content: "";
  display: inline-block;
  position: absolute;
  pointer-events: none;
  top: 22%;
  right: 1em;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}
label.select select::-ms-expand {
  display: none;
}
label.select option[disabled="disabled"] {
  background: #f0f0f0;
  color: #cccccc;
}

input-placeholder {
  color: #aaa !important;
}

::-webkit-input-placeholder {
  color: #aaa !important;
}

::-moz-placeholder {
  color: #aaa !important;
}

::-ms-input-placeholder {
  color: #aaa !important;
}

-webkit-input-placeholder {
  color: #aaa !important;
}

input:-ms-input-placeholder {
  color: #aaa !important;
}

-moz-placeholder {
  color: #aaa !important;
}

:-ms-input-placeholder {
  color: #aaa !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="number"]:focus {
  border-color: #BABED1;
  background: #F5F8FA;
  box-shadow: none;
}

label.select select:focus,
textarea:focus {
  border-color: #BABED1;
  background: #F5F8FA;
  box-shadow: none;
}

select:not([multiple]):focus {
  box-shadow: none;
}

input + label, input + span {
  cursor: pointer;
}


/* ラジオボタン
-------------------------------------*/
input[type="radio"] {
  display: none;
}
input[type="radio"] + label,
input[type="radio"] + span {
  position: relative;
  padding: 0.5em 0.5em 0.5em 26px;
  display: inline-block;
  font-size: 1.4rem;
  border-radius: 3px;
/*  border: solid 1px #EEE;*/
  background-color: #fff;
}
.contents.form input[type="radio"] + label,
.contents.form input[type="radio"] + span{
  border: 1px solid #D2D3D3; 
}
input[type="radio"]:checked + label,
input[type="radio"]:checked + span{
    border: solid 1px #CCC;
    background-color: #E8EEF9;
    box-shadow: 0px 1px 3px #CCC inset;
}
input[type="radio"] + label:before,
input[type="radio"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
}
input[type="radio"] + label:before,
input[type="radio"] + span:before {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  border: 1px solid #BABED1;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + span:before{border: 1px solid #0060C1;}

input[type="radio"] + label:after,
input[type="radio"] + span:after {
width: 10px;
height: 10px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
}
input[type="radio"]:checked + label:after, input[type="radio"]:checked + span:after {
  content: "";
  background: #0060C1;
}
input[type="radio"] + label, input[type="radio"] + span {
  cursor: pointer;
}


.radioList{}
.radioList__item + .radioList__item{margin-top: 0.5em;}
.radioList__item label + input{margin-left: 0.5em;}



/* チェックボタン
-------------------------------------*/
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label,
input[type="checkbox"] + span {
  position: relative;
  display: inline-block;
  padding-left: 3em;
  font-weight: normal;
}
input[type="checkbox"] + label:before, input[type="checkbox"] + span:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.25em;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="checkbox"] + span:before, input[type="checkbox"] + span:after{
    width: 1em;
    height: 1em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="checkbox"] + span:before, input[type="checkbox"] + span:after{
    width: 1em;
    height: 1em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + span:before {
    content: "";
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #BABED1;
    width: 2em;
    height: 2em;
  }
  input[type="checkbox"]:checked + label:after, input[type="checkbox"]:checked + span:after {
    content: "";
    background: url(../img/contents/ico-check.svg) center no-repeat;
    background-size: 100%;
    background-color: #053291;
    width: 2em;
    height: 2em;
    background-size: 60%;
    border-radius: 4px;
  }
  input[type="checkbox"] + label, input[type="checkbox"] + span {
    cursor: pointer;
    
}


/* ====================================================
    プライバシーポリシー
==================================================== */
.privacyPolicyBox p{
  line-height: 1.86;
}
.privacyPolicyBox p a{
  color: #2780E6;
}
.privacyPolicyBox p a:after{
  display: none;
}
.privacyPolicyBox p a:hover{
  text-decoration: underline;
}
@media print, screen and (min-width: 768px) {
  .privacyPolicyBox {margin-top: 2.75em; text-align: center;}
  .privacyPolicyBox p{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .privacyPolicyBox {margin-top: 1em;}
  .privacyPolicyBox p{font-size: 1.4rem;}
}


/* ====================================================
    同意する
==================================================== */
.agreementBox {
  text-align: center;
}
.agreementBox label{
  background: #F7F7F7;
  border: 1px solid #ddd;
  display: block;
  width: 100%;
  padding: 1.5em 0.5em;
  cursor: pointer;
}
.agreementBox label span{
  font-size: 1.5rem;
}
.agreementBox + .buttonBox {
  margin-top: 2em;
}
@media print, screen and (min-width: 768px) {
  .agreementBox {margin-top: 2.5em; margin-bottom: 4em;}
  .agreementBox label span{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .agreementBox {margin-top: 2em; margin-bottom: 3em;}
  .agreementBox label span{font-size: 1.4rem;}
}



.checkConf {
  display: block;
}

.month-picker-year-table .ui-button {
  height: auto !important;
}




/* ====================================================
　入力枠サイズ
==================================================== */
.size-input-name{width: 27.9286em;}
.size-input-nameS{width: 21.2857em;}
.size-input-nameSS{width: 16.4286em;}
.size-input-full{width: 43.8572em;}

@media print, screen and (min-width: 768px) {
    .size-input-zip{width: 16.4286em;}
}
@media screen and (max-width: 767px) {
    .size-input-zip{width: 10.8125em;}
}


/* ====================================================
    必須
==================================================== */
form th.required:after {
    content: "必須";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -0.15em;
    border-radius: 5px;
    padding: 0.4em 0.7em;
    margin-left: 0.8em;
    vertical-align: middle;
    line-height: 1;
    color: #354687;
    font-weight: bold;
    font-size: 1.3rem;
    color: #fff;
    background: #324380;
    font-weight: 400;
}

.contents.form .addressBox dt.required{position: relative;}
.contents.form .addressBox dt.required:after {
  content: "必須";
  display: inline-block;
  vertical-align: middle;
  border-radius: 5px;
  padding: 0.4em 0.7em;
  margin-left: 0.8em;
  vertical-align: middle;
  line-height: 1;
  color: #354687;
  font-weight: bold;
  font-size: 1.3rem;
  color: #fff;
  background: #324380;
  font-weight: 400;
}

@media print, screen and (min-width: 768px) {
  .contents.form .addressBox dt.required:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -4em;
  }
}
@media screen and (max-width: 767px) {
}


/* ====================================================
    エラー
==================================================== */
.mw_wp_form form .error,
form .error {
  display: block;
  margin: 0.5em 0 0;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1;
  font-size: 1.4rem;
  color: #ff0000;
  font-weight: bold;
}
.mw_wp_form form .error:before,
form .error:before {
  content: "※";
}

/* ====================================================
    締め切り非表示
==================================================== */
.formClose {display: none; padding: 4em;}
.formClose .reserveEnd {font-size: 1.5em; font-weight: bold;}


/* ====================================================
    枠
==================================================== */
.contents.form{padding-bottom: 8em;}
.contents.form * + .titleBold,
.contents.form .titleBold.blue{margin-top: 4em;}
.contents.form .titleBorderBottom__title {letter-spacing: 0.1em;}
.contents.form .formLead p a{color: #313d70; text-decoration: underline;}
.contents.form .errorArea {display: none; color: #ff0000;}
.hasError .contents.form .errorArea {display: block;}

@media print, screen and (min-width: 768px) {
    .contents.form .titleBorderBottom{margin-bottom: 1.75em; padding-bottom: 43px;}
    .contents.form .titleBorderBottom__title{margin-bottom: 0; font-size: 3.6rem;}
    .contents.form .formLead{margin-bottom: 1.5625em;}
    .contents.form .formLead p{font-size: 2.1rem; line-height: 2;}
    .contents.form .formLead p a:hover{text-decoration: none;}
    .contents.form .errorArea {
      margin-bottom: 2em;
      font-size: 2.1rem;
      line-height: 2;
    }
}
@media screen and (max-width: 767px) {
    .contents.form .titleBorderBottom{margin-bottom: 1.1429em; padding-top: 4.6429em; padding-bottom: 1.0714em;}
    .contents.form .titleBorderBottom__title {margin-bottom: 0; text-align: center; font-size: 3.0rem;}
    .contents.form .formLead {margin-bottom: 2.5714em; text-align: center;}
    .contents.form .formLead p{font-size: 1.5rem; line-height: 1.6;}
    .contents.form .errorArea {
      margin-bottom: 2.5714em;
      font-size: 1.5rem;
      line-height: 1.6;
      text-align: center;
    }
}


/* Table */
.contents.form th {color: #324380; font-size: 1.7rem; letter-spacing: 0.1em; font-weight: 500;}
.contents.form th.top {vertical-align: top;}
.contents.form .nameBox{display: flex;}
.contents.form input,
.contents.form textarea {
    border: 1px solid #D2D3D3;
    border-radius: 9px;
}
.contents.form select{
    border: 1px solid #d2d3d3;
    padding: 0.35em 0.5em;
    width: 13.5em;
    border-radius: 5px;
}

@media print, screen and (min-width: 768px) {
    .contents.form .nameBox li + li {margin-left: 1em;}
    .contents.form .addressBox {display: flex; align-items: center; margin-left: -9em;}
    .contents.form .addressBox + .addressBox {margin-top: 1em;}
    .contents.form .addressBox dt {width: 9em; text-align: right; padding-right: 1em;}
    .contents.form .addressBox dd {width: calc(100% - 9em);}
    .contents.form input,
    .contents.form textarea {
        padding: 7px 0.5em;
        width: 100%;
        max-width: 40em;
    }
    .contents.form input.size-input-tel,
    .contents.form input.size-input-zip{
      max-width: 28em;
    }
    .contents.form input.size-input-nameS{
      max-width: 19.5em;
    }
    .contents.form input.size-input-zipS{
      max-width: 28em;
    }
    .contents.form textarea{
      min-height: 16em;
    }
}
@media screen and (max-width: 767px) {
    .contents.form table,
    .contents.form tbody,
    .contents.form tr,
    .contents.form th,
    .contents.form td {display: block;}
    .contents.form th,
    .contents.form td {border-width: 0; padding: 0;}
    .contents.form tr + tr {margin-top: 1.2143em;}
    .contents.form th {padding-bottom: 0.3em;}
    .contents.form .nameBox {margin-left: -0.2857em; margin-right: -0.2857em;}
    .contents.form .nameBox li {width: 50%; padding: 0.2857em;}
    .contents.form input,
    .contents.form textarea {
        padding: 0.35em 0.5em;
    }
    .contents.form .addressBox + .addressBox {margin-top: 0.1429em;}
    .contents.form .addressBox dt {margin-bottom: 0.1765em; font-size: 1.7rem;}
    .contents.form input.size-input-spS{
      max-width: 70%;
    }
    .contents.form input + input.size-input-spS{
      margin-left: 0.25em;
    }
}


.contents.form .formButtonTitle{
  margin-top: 1.5em;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 300;
}


.contents.form .buttonBox li{min-width: 20em;}
.contents.form .buttonBox li + li{margin-left: 2em;}
.contents.form .buttonBox li .button{
  
  box-shadow: 16px 12px 13px rgba(0, 0, 0, 0.08);
  font-size: 1.8rem;
}
@media print, screen and (min-width: 768px) {
    .contents.form .buttonBox{
        display: flex;
        margin-top: 4.8125em;
        justify-content: center;
    }
    .contents.form .buttonBox li .button{padding: 1.2em 1.75em;}
}
@media screen and (max-width: 767px) {
    .contents.form .buttonBox {margin-top: 2.8571em; padding: 0 30px;}
    .contents.form .buttonBox li + li {margin-left: 0; margin-top: 2.1429em;}
    .contents.form .buttonBox li,
    .contents.form .buttonBox li a {min-width: auto;}
    .contents.form .buttonBox a {padding-top: 0.6111em; padding-bottom: 0.6667em;}
}




/* ====================================================
    入力画面
==================================================== */
.mw_wp_form_input{}
.mw_wp_form_input .buttonBox li:first-child {display:none;}


/* ====================================================
    確認画面
==================================================== */
.mw_wp_form_confirm{}

/* ====================================================
    完了画面
==================================================== */
.mw_wp_form_complete{}






/* ######################################################################################

  List　リスト

###################################################################################### */
/* ====================================================
	listShadow
==================================================== */
.listShadow{
}
.listShadow__item{
  position: relative;
  counter-increment: mycounter;
  padding: 0 5em 1.5em 6em;
  border-right: 1px solid #c8d4d8;
  border-bottom: 1px solid #c8d4d8;
  font-size: 1.8rem;
  line-height: 1.77;
}
.listShadow__item:before{
  content: counter(mycounter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: "metropolis", sans-serif;
  font-style: italic;
  font-size: 4.7rem;
  color: #818181;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.listShadow__item + .listShadow__item{
  margin-top: 2.5em;
}


/* ====================================================
	termList
==================================================== */
.termList dt {font-weight: bold;}
.termList dd {font-weight: 500;}

@media print, screen and (min-width: 768px) {
    .termList dl + dl {margin-top: 2.0625em;}
    .termList dt {margin-bottom: 0.7619em; font-size: 2.1rem;}
    .termList dd {font-size: 1.5rem; line-height: 1.75; font-feature-settings: "palt";}
}
@media screen and (max-width: 767px) {
    .termList dl + dl {margin-top: 1.3571em;}
    .termList dt {font-size: 1.9rem;}
    .termList dd {font-size: 1.5rem; line-height: 1.6;}
}


/* ######################################################################################

  Layout　レイアウト

###################################################################################### */


/*  column3
-------------------------------------*/
.layoutColumn.column3 .layoutColumn__item{width: 28.3%; margin-top: 5em;}
.layoutColumn.column3 .layoutColumn__item:nth-of-type(1),
.layoutColumn.column3 .layoutColumn__item:nth-of-type(2),
.layoutColumn.column3 .layoutColumn__item:nth-of-type(3){margin-top: 0;}
.layoutColumn.column3 .layoutColumn__img {margin-bottom: 1.75em;}
.layoutColumn.column3 .layoutColumn__title{text-align: center; font-size: 2.2rem; margin-bottom: 1em;}
.layoutColumn.column3 .layoutColumn__text{line-height: 1.75;}


@media print, screen and (min-width: 768px) {
  .layoutColumn__img img{border-radius: 40px;}
}
@media screen and (max-width: 767px) {
  .layoutColumn__img img{border-radius: 20px;}
  .layoutColumn.column3 .layoutColumn__item{width: 100%;}
}




@media print, screen and (min-width: 768px) {
    /* ====================================================
        layoutColumn
    ==================================================== */
    .layoutColumn{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .layoutColumn + .layoutColumn,
    .layoutColumn + .layoutRow{margin-top: 5em;}

    .layoutColumn__item{width: 47%; margin-top: 10em;}
    .layoutColumn__item:nth-of-type(1),
    .layoutColumn__item:nth-of-type(2){margin-top: 0;}
    .layoutColumn__img {margin-bottom: 2.5em;}
    .layoutColumn__title{margin-bottom: 0.8em; font-size: 2.7rem; letter-spacing: 0.24em; font-weight: 700; line-height: 1.66;}
    .layoutColumn__text{font-size: 1.6rem; letter-spacing: 0.06em; line-height: 2.18;}
    .layoutColumn__attention{margin-top: 1em;}
}
@media screen and (max-width: 767px) {
    /* ====================================================
        layoutColumn
    ==================================================== */
    .layoutColumn{display: flex; flex-wrap: wrap; flex-direction: column;}
    .layoutColumn + .layoutColumn,
    .layoutColumn + .layoutRow{margin-top: 5em;}

    .layoutColumn__item{width: 100%; margin-top: 5.5em;}
    .layoutColumn__item:nth-of-type(1){margin-top: 0;}
    .layoutColumn__img {margin-bottom: 2em; }
    .layoutColumn__title{margin-bottom: 1em; font-size: 2.1rem; letter-spacing: 0.1em; font-weight: 700; text-align: center; line-height: 1.5;}
    .layoutColumn__text{font-size: 1.4rem; letter-spacing: 0.06em; line-height: 2.18;}
    .layoutColumn__attention{margin-top: 1em;}
}

/* ====================================================
	layoutRow
==================================================== */
.layoutRow{}
.layoutRow + .layoutColumn,
.layoutRow + .layoutRow{margin-top: 5em;}

.layoutRow__img img{border-radius: 20px;}

.layoutRow__item.top{align-items: flex-start;}
.layoutRow__item.bottom{align-items: flex-end;}
.layoutRow__img.border img{border: 1px solid #d3d3d3}

.layoutRow__item + .layoutRow__item{margin-top: 3em;}

@media print, screen and (min-width: 768px) {
    .layoutRow__item.reserve{flex-direction: row-reverse;}
    .layoutRow__item{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 11.5em;}
    .layoutRow__item:nth-of-type(1){margin-top: 0;}
    .layoutRow__img {width: 46%;}
    .layoutRow__detail{width: 47.6%;}
    .layoutRow__full{width: 100%;}
    .layoutRow__title{margin-bottom: 0.8em; font-size: 2.7rem; letter-spacing: 0.24em; font-weight: 700;}
    .layoutRow__text{font-size: 1.6rem; letter-spacing: 0.06em; line-height: 2.18;}
    .layoutRow__btn{margin-top: 2em;}
}
@media screen and (max-width: 767px) {
    .layoutRow__item.reserve{flex-direction: column;}
    .layoutRow__item{display: flex; flex-direction: column; margin-top: 11.5em;}
    .layoutRow__img {width: 100%; margin-bottom: 2em;}
    .layoutRow__detail{width: 100%;}
    .layoutRow__title{margin-bottom: 1.2em; font-size: 2.2rem; letter-spacing: 0.24em; font-weight: 700; text-align: center;}
    .layoutRow__text{font-size: 1.4rem; letter-spacing: 0.06em; line-height: 2.18;}
    .layoutRow__btn{margin-top: 2em;}
}



/* ######################################################################################

　display　表示・非表示

###################################################################################### */
@media print, screen and (min-width: 768px) {
  div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc {
    display: block;
  }
  div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp {
    display: none!important;
  }

  span.pc, img.pc, em.pc, br.pc {
    display: inline;
  }
  span.sp, img.sp, em.sp, br.sp {
    display: none!important;
  }
}
@media screen and (max-width: 767px) {
  div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp {
    display: block;
  }
  div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc {
    display: none!important;
  }

  span.sp, img.sp, em.sp, br.sp {
    display: inline;
  }
  span.pc, img.pc, em.pc, br.pc {
    display: none!important;
  }
}





/* ######################################################################################

    Instagram埋め込み

###################################################################################### */
.wallBelt.instagram #instagram .feedList{
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wallBelt.instagram #instagram .feedList li{
  position: relative;
}
.wallBelt.instagram #instagram .feedList li:before{
  content:"";
  display:block;
  padding-top:85%;
}
.wallBelt.instagram #instagram .feedList li a{
  position:absolute;
  top:0;
  left:0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}
.wallBelt.instagram #instagram .feedList li img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media print, screen and (min-width: 768px){
  .wallBelt.instagram #instagram .feedList li{
    width: calc(100% / 4 - 2.5em * 4 / 5);
    margin-bottom: 2.5em;
  }
  .wallBelt.instagram #instagram .feedList:after,
  .wallBelt.instagram #instagram .feedList:before{
    content:"";
    display:block;
    width: calc(100% / 4 - 2.5em * 4 / 5);
    height:0;
  }
  .wallBelt.instagram #instagram .feedList:before{
    order:1;
  }
}
@media screen and (max-width: 767px) {
  .wallBelt.instagram #instagram .feedList li{
    width: calc(100% / 2 - 2em * 1 / 2);
    margin-bottom: 2em;
  }
}







/* ######################################################################################

　リンク　link

###################################################################################### */
* + .linkBox{
  margin-top: 2em;
}

.borderLink{
  padding-bottom: 0.5em;
  border-bottom: 6px solid #333;
  text-decoration: none;
  font-size: 1.9rem;
  color: #333;
  font-weight: 500;
}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
  .linkBox.sp-button{
    text-align: center;
  }
  .linkBox.sp-button .borderLink{
    opacity: 1;
    display: inline-block;
    position: relative;
    border: none;
    -webkit-appearance: none;
    box-shadow: none;
    border: 1px solid #485fb8;
    border-radius: 0;
    background: #485fb8;
    border-radius: 2em;
    font-weight: normal;
    color: #fff;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    padding: 1em 2em;
    font-size: 1.4rem;
    font-weight: 500;
    min-width: 15em;
  }
  .linkBox.sp-button .borderLink:after{
    content: "";
    position: absolute;
    right: 1em;
    top: 50%;
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin: 0 0.5em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
  }
}








/* ====================================================
　linkList
==================================================== */
.linkList__item a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  text-decoration: none;
  height: 100%;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
}
.linkList__item a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(114, 114, 114, 0.48);
  mix-blend-mode: luminosity;
  border-radius: 20px;
  z-index: 1;
}
.linkList__item a:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease;
}
.linkList__item__title,
.linkList__item__text{
  position: relative;
  z-index: 2;
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
}

.linkList__item__title{
  margin-bottom: 0;
  letter-spacing: 0.14em;
  line-height: 1.09;
}
.linkList__item__text{
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {

}
@media screen and (max-width: 767px) {
  
}


/* hover */
.linkList__item a:hover:after{
  transform: scale(1.15);
}

@media print, screen and (min-width: 768px) {
  .linkList{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .linkList__item{
      margin-top: 2.5em;
      width: 48%;
      height: min(280px, 20.6vw);
  }
  .linkList__item:nth-of-type(1),
  .linkList__item:nth-of-type(2){
      margin-top: 0;
  }
  .linkList__item__title{
    font-size: 3.7rem;
  }
  .linkList__item__text{
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .linkList.listSp{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-left: 1.4706em;
      padding-right: 1.4706em;
  }

  .linkList__item{
    height: 53.33vw;
  }
  .linkList__item +  .linkList__item{
    margin-top: 2em;
  }
  .linkList__item__title{
    font-size: 2.7rem;
  }
  .linkList__item__text{
    font-size: 1.9rem;
    line-height: 1;
  }
}







/* ====================================================
　widePhotoLink
==================================================== */
.widePhotoLink{max-width: 100%; overflow: hidden;}
.widePhotoLink__list__item{position: relative; width: 100%;}
.widePhotoLink__list__inner{
  margin-right: 0;
  color: #fff;
  text-decoration: none;
}

.widePhotoLink__list__text{margin-top: 1em; text-align: center; font-size: 2.5rem;}

@media print, screen and (min-width: 768px) {
  .widePhotoLink__list__inner{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 26.875vw;
    margin-left: 50%;
    background-color: rgba(19, 19, 19, 0.8);
  }
  .widePhotoLink__list__item:before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    mix-blend-mode: exclusion;
  }
  .widePhotoLink__list__item:nth-of-type(2n):before{
    left: 100%;
  }
  .widePhotoLink__list__item:nth-of-type(2n) .widePhotoLink__list__inner{
    margin-left: 0%;
    margin-right: 50%;
  }
  .widePhotoLink__list__text{font-size: 2.3rem;}

  .widePhotoLink .effect.bgSlideIn2.insert:before{animation: bgSlideIn2 0.65s ease forwards;}
  .widePhotoLink .effect.bgSlideIn2reverse.insert:before{animation: bgSlideIn2reverse 0.65s ease forwards;}

}
@media screen and (max-width: 767px) {
  .widePhotoLink .titleBold.extra{font-size: 2.2rem; letter-spacing: 0.1em;}
  .widePhotoLink__list__inner{padding: 2.5em 0.5em; background-color: rgba(19, 19, 19, 0.75);}
  .widePhotoLink__list__item{padding-top: 10em; background-size: cover;}
  .widePhotoLink__list__text{font-size: 1.4rem; line-height: 1.64;}
  .widePhotoLink__list__button{text-align: center;}

  .widePhotoLink .effect.bgSlideIn2.insert .widePhotoLink__list__inner:before{animation: bgSlideIn2 0.65s ease forwards;}
  .widePhotoLink .effect.bgSlideIn2reverse.insert .widePhotoLink__list__inner:before{animation: bgSlideIn2reverseSP 0.65s ease forwards;}
}


@keyframes bgSlideIn2 {
  0% {left: -100%;}
  100% {left: 0;}
}
@keyframes bgSlideIn2reverse {
  0% {left: 100%;}
  100% {left: 50%;}
}
@keyframes bgSlideIn2reverseSP {
  0% {left: 100%;}
  100% {left: 0%;}
}


@media print{
  .widePhotoLink__list__item:before{
    left: 0;
  }
  .widePhotoLink__list__item:nth-of-type(2n):before{
    left: 50%;
  }
}

/* ====================================================
　verticalSquareList
==================================================== */
.verticalSquareListWarp{
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.verticalSquareList{
  display: flex;
  justify-content: space-between;
  margin-left: -35px;
  margin-right: -35px;
  width: 100%;
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.verticalSquareListWarp:hover .verticalSquareList{
  animation-play-state: paused;
}

.verticalSquareList__item{
  width: 100%;
  position: relative;
}
.verticalSquareList__item a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
  border-radius: 20px;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.verticalSquareList__item a:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease;
}
.verticalSquareList__item:nth-of-type(1) a:after{background-image: url(../img/contents/index/menu_01.jpg);}
.verticalSquareList__item:nth-of-type(2) a:after{background-image: url(../img/contents/index/menu_02.jpg);}
.verticalSquareList__item:nth-of-type(3) a:after{background-image: url(../img/contents/index/menu_03.jpg);}
.verticalSquareList__item:nth-of-type(4) a:after{background-image: url(../img/contents/index/menu_04.jpg);}

.verticalSquareList__item a:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(78, 79, 79, 0.45);
  border-radius: 20px;
  z-index: 1;
}
.verticalSquareList__item__title{
  position: relative;
  text-align: center;
  min-height: 2.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.25em;
  color: #fff;
  z-index: 2;
  font-weight: 800;
}
.verticalSquareList__item__button{
  position: relative;
  text-align: center;
  z-index: 2;
}

/* hover */
.verticalSquareList__item a:hover:after{
  transform: scale(1.15);
}



@media print, screen and (min-width: 768px) {
  .verticalSquareList__item{height: 35.8vw; width: 25vw;}
  .verticalSquareList__item__title{font-size: 3.2rem;}
  .verticalSquareList__item__button .button{font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
  .verticalSquareList__item{height: 83.4vw; width: 58vw;}
  .verticalSquareList__item__title{font-size: 1.7rem;}
  .verticalSquareList__item__button .button.white.reverse{
    border-width: 0;
    font-size: 1rem;
  }
  .verticalSquareList__item__button .button.white.reverse:after{
    right: 1.5em;
    width: 2em;
    height: 5px;
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}




/* ######################################################################################

　リスト　list

###################################################################################### */
.listTab{display: flex;}
.listTab__item + .listTab__item{margin-left: 0.5em;}
.listTab__item span,
.listTab__item a{
    display: block;
    padding: 0.45em 0.75em;
    border: 1px solid #97a7b0;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.5em;
    
    line-height: 1;
    text-indent: 0.5em;
    color: #333;
    border-radius: 10px;
}
.listTab__item span{
  background: #97a7b0;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
    .listTab{margin-top: 3.5em;}
    .listTab__item span,
    .listTab__item a {font-size: 2.3rem;}
}
@media screen and (max-width: 767px) {
    .listTab {margin-top: 7.1429em; justify-content: center;}
    .listTab__item span,
    .listTab__item a {font-size: 1.6rem;}
}



/* ====================================================
　listSlideLink
==================================================== */
.listSlideLink{
  position: relative;
  z-index: 2;
  background: #333;
  color: #fff;
  flex-wrap: wrap;
}
.listSlideLink .titleBold{
  width: 100%;
  font-size: 2.8rem;
}
.listSlideLink__lead{
  position: relative;
}
.listSlideLink__lead p{
  line-height: 2.1;
  font-weight: bold;
}

.listSlideLink__list{width: 100%;}
.listSlideLink__list__item{
  position: relative;
  border-radius: 2em;
  overflow: hidden;
}
.listSlideLink__list__inner{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  padding: 1em;
}
.listSlideLink__list__inner:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.listSlideLink__list__text{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.42;
  font-weight: bold;
  z-index: 2;
}
.listSlideLink__list__btn {
  margin-top: 0.5em;
}
.listSlideLink__list__btn .button{
  position: relative;
  z-index: 2;
}


@media print, screen and (min-width: 768px) {
  .listSlideLink{display: flex; padding: 2em;}
  .listSlideLink__lead{width: 25%;}
  .listSlideLink__lead p{font-size: 2.2rem; letter-spacing: 0.1em;}
  .listSlideLink__list{display: flex; justify-content: space-between;}
  .listSlideLink__lead__inner{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .listSlideLink__list__item{width: 23.9%; padding-top: 23.9%;}
  .listSlideLink__list__text{font-size: 2.2rem;}
  .listSlideLink__list__btn .button{font-size: 2rem;}
}
@media print, screen and (min-width: 1200px) {
  .listSlideLink__lead p{font-size: 2.8rem; letter-spacing: 0.2em;}
  .listSlideLink__list__text{font-size: 2.8rem;}
}
@media screen and (max-width: 767px) {
  .listSlideLink{padding: 5em 2em 6em;}
  .listSlideLink__lead{margin-bottom: 2em;}
  .listSlideLink__lead p{text-align: center; font-size: 2.2rem; letter-spacing: 0.1em; line-height: 1.68;}
  .listSlideLink__list__item{height: 85.1vw;}
  .listSlideLink__list__item + .listSlideLink__list__item{margin-top: 2em;}
  .listSlideLink__list__text{font-size: 2.0rem; min-height: 3.75em;}
  .listSlideLink__list__btn .button{font-size: 1.4rem;}
}
  




/* col1-title */
@media print, screen and (min-width: 768px) {
  .listSlideLink.col1-title .listSlideLink__list{
    width: 75%;
  }
  .listSlideLink.col1-title .listSlideLink__list__item{
    width: 32.2%;
    padding-top: 32.2%;
  }
}
@media screen and (max-width: 767px) {
  .listSlideLink.col1-title .listSlideLink__list__item{
    width: 100%;
    padding-top: 100%;
  }
}
  


/* 背景スライドアニメーション */
.listSlideLink__list__inner:after{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 2em;
  transition: transform 0.25s ease;
}


@media print{
  .listSlideLink__list__inner:after{
    left: 0;
  } 
}


/* hover */
a.listSlideLink__list__inner:hover:after{
  transform: scale(1.15);
}

/* ====================================================
　listButtnLink
==================================================== */
.listButtnLink__item{}
.listButtnLink__item .button.arrow3:before{
  width: 0.6em;
  height: 0.6em;
  top: calc(50% - 0.3em);
}

@media print, screen and (min-width: 768px) {
  .listButtnLink{display: flex; justify-content: center;}
  .listButtnLink__item + .listButtnLink__item{margin-left: 2em;}
  .listButtnLink__item .button{
    min-width: 18em;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  .listButtnLink__item{text-align: center;}
  .listButtnLink__item + .listButtnLink__item{margin-top: 1.5em;}
  .listButtnLink__item .button{
    min-width: 16em;
    padding: 0.85em 1.5em;
  }
}

/* ====================================================
	photoCardList
==================================================== */



/* 色 */
.photoCardList__item:nth-of-type(1) .photoCardList__item__num{background: #abbbc3;}
.photoCardList__item:nth-of-type(2) .photoCardList__item__num{background: #ba9484;}
.photoCardList__item:nth-of-type(3) .photoCardList__item__num{background: #dabe31;}


@media print, screen and (min-width: 768px) {
    * + .photoCardList{margin-top: 17em;}
    .photoCardList__item{position: relative; margin-bottom: 8em;}
    .photoCardList__item + .photoCardList__item{margin-top: 14.5em;}
    .photoCardList__item__img{width: 76.5%;}
    .photoCardList__item__img img{border-radius: 0 1.5em 0 0;}
    .photoCardList__item__detail{
      position: absolute;
      top: 70%;
      right: 0;
      width: 39.1%;
      padding: 3em 8em;
      background: #fff;
      min-width: 400px;
    }
    .photoCardList__item__title.titleBold{margin-bottom: 0.75em;}
    .photoCardList__item__num{
      position: absolute;
      top: 1.75em;
      left: -7.5em;
      padding: 1.75em;
      background: #000;
      border-radius: 3em;
      min-width: 13em;
      text-align: right;
    }
    .photoCardList__item__num img{
      height: 1.25em;
      width: auto;
    }

    .photoCardList__item:nth-of-type(2n) .photoCardList__item__img{margin-left: 23.5%;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__img img{border-radius: 1.5em 0 0 0;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__detail{left: 0; right: auto;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__num{
      left: auto;
      right: -7.5em;
      text-align: left;
    }
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__title.titleBold{text-align: right;}
}
@media screen and (max-width: 767px) {
    * + .photoCardList{margin-top: 7.5em;}
    .photoCardList__item{position: relative; margin-bottom: 8em;}
    .photoCardList__item + .photoCardList__item{margin-top: 18.5em;}
    .photoCardList__item__img{width: 92%;}
    .photoCardList__item__img img{border-radius: 0 1.5em 1.5em 0;}
    .photoCardList__item__detail{
      position: absolute;
      top: 80%;
      right: 0;
      width: 90%;
      background: #fff;
      padding: 3em 4em 3em 3em;
      letter-spacing: 0.1em;
      font-feature-settings: "palt";
    }
    .photoCardList__item__title.titleBold{margin-bottom: 0.75em;}
    .photoCardList__item__num{
      position: absolute;
      top: -2.25em;
      right: 3.75em;
      padding: 0.7em 0.7em 1em;
      background: #000;
      border-radius: 3em;
      min-height: 7em;
      text-align: center;
      display: flex;
      align-items: flex-end;
    }
    .photoCardList__item__num img{
      height: 0.9em;
      width: auto;
    }

    .photoCardList__item:nth-of-type(2n) .photoCardList__item__img{margin-left: 8%;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__img img{border-radius: 1.5em 0 0 0;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__detail{left: 0; right: auto;}
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__num{
      left: 12%;
      text-align: left;
      right: auto;
    }
    .photoCardList__item:nth-of-type(2n) .photoCardList__item__title.titleBold{text-align: right;}
}

/* ====================================================
　stepList
==================================================== */
.stepList{display: flex; flex-wrap: wrap; justify-content: space-between;}
.stepList__item{
    margin-top: 6em;
    width: 30.5%;
    padding: 1em 2.25em 3em 2.25em;
    box-shadow: 8px 8px 7px rgba(0, 0, 0, 0.07);
    border-radius: 1.25em;
    min-height: 23em;
    border: 1px solid #dff0f1;
}
.stepList__item__step{
    text-align: center;
    margin-top: -4em;
    margin-bottom: 0.5em;
}
.stepList__item__step img{width: 6em;border: 10px solid #FFFFFF;}
.stepList__item__illust{margin-bottom: 0.5em; text-align: center;}
.stepList__item p{
    font-size: 1.7rem;
    line-height: 1.65;
    color: #009b93;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
  .stepList{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .stepList__item{width: 100%; padding-bottom: 2.25em; border-radius: 2em;}
  .stepList__item p{font-size: 1.5rem;}
  .stepList__item__step{margin-top: -4em;}
  .stepList__item__step img{border: 10px solid #FFFFFF;}
}



/* ====================================================
　listAsterisk
==================================================== */
.listAsterisk{}
.listAsterisk__item{position: relative; padding-left: 1em; font-size: 1.3rem; line-height: 1.61;}
.listAsterisk__item:before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}



/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */
/* ====================================================
　3＠デフォルト
==================================================== */
/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {
  margin: 0px 0;
  padding: 1px;
}

/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
  z-index: 10;
  width: auto;
  height: auto;
}

.slick-prev {
/*  left: 15px;*/
}

.slick-next {
/*  right: 15px;*/
}

.slick-prev:before,
.slick-next:before {
  opacity: .75;
}

/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before{
  display: none;
}
.slick-prev,
.slick-next {
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-prev {
  background-image: url(../img/contents/index/slider_arrow_l.svg);
}
.slick-next:hover,
.slick-next:focus,
.slick-next {
  background-image: url(../img/contents/index/slider_arrow_r.svg);
}

@media print, screen and (min-width: 768px) {
  .slick-prev,
  .slick-next {
    width: 45px;
    height: 45px;
  }
}
@media screen and (max-width: 767px) {
  .slick-prev,
  .slick-next {
    width: 45px;
    height: 45px;
  }
}
/* 黒丸ボタンスタイル DF
-------------------------------------*/
.slick-dots {
  bottom: -1.5em;
  left: 0;
}

.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
  display: inline-block;
  padding: 0;
  width: auto;
  height: auto;
  line-height: 1;
}

.slick-dots li button {
  display: block;
}

.slick-dots li button:before {
  position: relative;
  padding: 0.25em;
  border-radius: 50%;
  opacity: 1;
}

/* ====================================================
　黒丸ボタンスタイル：・・・
==================================================== */
.slick-dots li {
  margin: 0 4px;
}

/* ●の間隔 */
.slick-dots li button::before {
  color: #999999;
}

/* ● DF色 */
.slick-dots li button:hover:before {
  color: #000000;
}

/* ● hover色 */
.slick-dots li.slick-active button::before {
  color: #000000;
}

/* ● active色 */
@media print, screen and (min-width: 768px) {
  .slick-dots li button::before {
    font-size: 10px;
  }

  /* ●サイズ */
}
@media screen and (max-width: 767px) {
  .slick-dots li button::before {
    font-size: 10px;
  }

  /* ●サイズ */
}

/* ====================================================
　slickSlider regular
==================================================== */
.slickSlider.regular .slick-slide {
  padding: 0.77em;
}
.slickSlider.regular .slick-slide img{
  display: block;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
@media print, screen and (min-width: 768px) {
    .slickSlider.regular {
      padding-left: 70px;
      padding-right: 70px;
    }
}

@media screen and (max-width: 767px) {
}




/* ====================================================
　slickSlider regular2
==================================================== */
.slickSlider.regular2 .slick-track{display: flex;}
.slickSlider.regular2 .slick-slide {padding: 0 0.85em; height: auto;}
.slickSlider.regular2 .slick-prev,
.slickSlider.regular2 .slick-next {
  box-shadow: none;
  mix-blend-mode: normal;
}
.slickSlider.regular2 .slick-prev{left: 5px;}
.slickSlider.regular2 .slick-next{right: 5px;}

.slickSlider.regular2 .slick-prev:hover,
.slickSlider.regular2 .slick-prev:focus,
.slickSlider.regular2 .slick-prev {
  background-image: url(../img/contents/index/slider_arrow_l_bk.svg);
}
.slickSlider.regular2 .slick-next:hover,
.slickSlider.regular2 .slick-next:focus,
.slickSlider.regular2 .slick-next {
  background-image: url(../img/contents/index/slider_arrow_r_bk.svg);
}

.slickSlider.regular2 .inner{
  background: #fff;
  padding: 0.75em;
  height: 100%;
}
.slickSlider.regular2 .fryer{
  display: block;
  text-decoration: none;
  color: #333;
}
.slickSlider.regular2 .title{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
}
.slickSlider.regular2 .title a{
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  color: #333;
}

.slickSlider.regular2 .tag{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -0.25em;
}
.slickSlider.regular2 .tag:after{
  content: "";
  width: 32%;
  display: block;
}

.slickSlider.regular2 .tag li{
  margin: 0.25em 0;
  width: 32%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
}
.slickSlider.regular2 .tag li.col2{
  width: 65%;
}
.slickSlider.regular2 .tag li a{
  padding: 0.4em 0;
  display: block;
  background: #595757;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

@media print, screen and (min-width: 768px) {
  .slickSlider.regular2{padding: 0 80px;}
  .slickSlider.regular2 .slick-prev,
  .slickSlider.regular2 .slick-next {
    width: 49px;
    height: 49px;
  }
}
@media screen and (max-width: 767px) {
  .slickSlider.regular2{
    margin-bottom: calc(40px + 3em);
  }
  .slickSlider.regular2 .slick-prev,
  .slickSlider.regular2 .slick-next {
    width: 45px;
    height: 45px;
  }
  .slickSlider.regular2 .slick-prev,
  .slickSlider.regular2 .slick-next {
    width: 49px;
    height: 49px;
    top: calc(100% + 40px);
  }
  .slickSlider.regular2 .slick-prev{
    left: calc(50% -  70px);
  }
  .slickSlider.regular2 .slick-next{
    right: calc(50% - 70px);
  }
}



/* ====================================================
　slickSlider regular3
==================================================== */
@media print, screen and (min-width: 768px) {
  .slickSlider.regular3 .slick-slide{padding: 0 1em;}
}
@media screen and (max-width: 767px) {
  .slickSlider.regular3 .slick-slide{padding: 0 0.5em;}
}


/* ######################################################################################

　タイトル

###################################################################################### */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75em;
  padding: 0;
  line-height: 1.25;
  font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
}

@media print, screen and (min-width: 768px) {
  h2 {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 26px;
  }
}

@media print, screen and (min-width: 768px) {
  h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 18px;
  }
}

@media print, screen and (min-width: 768px) {
  h4 {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  h4 {
    font-size: 16px;
  }
}

@media print, screen and (min-width: 768px) {
  h5 {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  h5 {
    font-size: 14px;
  }
}

@media print, screen and (min-width: 768px) {
  h6 {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  h6 {
    font-size: 12px;
  }
}


/* ====================================================
　titleBold
==================================================== */
.titleBold{
  margin-bottom: 1.25em;
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.48;
}
.titleBold.ls-wide{
  letter-spacing: 0.24em;
}

@media print, screen and (min-width: 768px) {
  .titleBold{font-size: 2.7rem;}
}
@media screen and (max-width: 767px) {
  .titleBold{font-size: 2.0rem;}
}

/* 色 */
.titleBold.white{color: #fff;}
.titleBold.gray{color: #707070;}
.titleBold.blue{color: #324380;}

/* 文字サイズ */
@media print, screen and (min-width: 768px) {
  .titleBold.large{font-size: 4.5rem; letter-spacing: 0.15em;}
  .titleBold.extra{font-size: 5.3rem; letter-spacing: 0.48em;}
}
@media screen and (max-width: 767px) {
  .titleBold.large{font-size: 4.5rem; letter-spacing: 0.15em;}
  .titleBold.extra{font-size: 3.3rem; letter-spacing: 0.48em;}
}


/* フォント */
.titleBold.metropolis{
  font-size: 3rem;
  letter-spacing: 0.14em;
  font-weight: 500;
}
@media print, screen and (min-width: 768px) {
  .titleBold.metropolis.large{font-size: 3.4rem;}
}
@media screen and (max-width: 767px) {
  .titleBold.metropolis.large{font-size: 2.3rem;}
}

/* アイコン */
.titleBold.icon{
  position: relative;
  padding-top: 70px;
}
.titleBold.icon:before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 45px;
  height: 45px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center center;
}
.titleBold.icon.instagram:before{
  background-image: url(../img/contents/ico_instagram_w.svg);
}



/* ====================================================
　titleNormal
==================================================== */
.titleNormal{
  margin-bottom: 1em;
  font-size: 2.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* 文字サイズ */
@media print, screen and (min-width: 768px) {
  .titleNormal.large{font-size: 4.5rem; letter-spacing: 0.15em;}
  .titleNormal.extra{font-size: 5.3rem; letter-spacing: 0.48em;}
}
@media screen and (max-width: 767px) {
  .titleNormal.large{font-size: 2.2rem; letter-spacing: 0.15em;}
  .titleNormal.extra{font-size: 5.3rem; letter-spacing: 0.48em;}
}



/* ====================================================
　verticalLineTitle
==================================================== */
.verticalLineTitle{
  position: absolute;
  left: 3em;
  top: 5em;
  margin-bottom: 0;
  padding-bottom: 9em;
  height: calc(100% - 5em);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.verticalLineTitle span{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 0.5em;
  letter-spacing: 0.26em;
  color: #394680;
  z-index: 2;
}
.verticalLineTitle:after{
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: #394680;
  z-index: 1;
}

@media print, screen and (min-width: 768px) {
  .verticalLineTitle{}
  .verticalLineTitle span{font-size: min(2.2rem, 2.3vh);}
}
@media print, screen and (min-width: 961px) {
  .verticalLineTitle span{font-size: min(2.7rem, 2.5vh);}
}
@media screen and (max-width: 767px) {
  .verticalLineTitle{left: 0.25em;}
  .verticalLineTitle span{font-size: 1.0rem;}
}


/* white */
.verticalLineTitle.white span{
  background-color: transparent;
  color: #fff;
}
.verticalLineTitle.white:after{
  background-color: #fff;
}


/* black */
.verticalLineTitle.black span{
  background-color: transparent;
  color: #333;
}
.verticalLineTitle.black:after{
  background-color: #333;
}




/* ====================================================
　titleLeftLine
==================================================== */
@media print, screen and (min-width: 768px) {
    .titleLeftLine{
      position: relative;
      margin-bottom: 4.25em;
      font-size: 3.1rem;
      text-indent: 2.5em;
      line-height: 1.58;
      letter-spacing: 0.17em;
      font-weight: 300;
    }
    .titleLeftLine:before{
      content: "";
      position: absolute;
      top: 0.8em;
      left: 0;
      width: 2em;
      height: 1px;
      background: #333;
    }

    .titleLeftLine.large{
      text-indent: 1.75em;
      font-size: min(2.4vw,4.7rem);
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    .titleLeftLine.large:before{
      width: 1.3em;
      height: 2px;
    }

}
@media screen and (max-width: 767px) {
    .titleLeftLine{
      margin: 0 0.5em 2.8em 0.5em;
      font-size: 2.1rem;
      line-height: 1.58;
      letter-spacing: 0.15em;
      font-weight: 200;
    }
}

/* ====================================================
　titleBorderBottom
==================================================== */
.titleBorderBottom{
  padding: 0.35em 0 0.85em;
  border-bottom: 1px solid #333;
}
.titleBorderBottom__title{
  font-size: 2.7vw;
  font-weight: 300;
  letter-spacing: 0.35em;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .titleLogo + .titleBorderBottom .titleBorderBottom__title {font-size: 3.0rem; text-align: center;}
}



/* ====================================================
　titleLogo
==================================================== */

@media print, screen and (min-width: 768px) {
    .titleLogo{
      padding: 8em 0 15em;
      text-align: center;
    }
    .titleLogo img{height: 2.9vw;}
}
@media screen and (max-width: 767px) {
    .titleLogo {
        padding: 10.1429em 0 0.9286em;
        text-align: center;
    }
    .titleLogo img{height: 6.6667vw;}
}



/* ====================================================
　titleContents
==================================================== */
.titleContents{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.titleContents .titleContents__title,
.titleContents .titleContents__illust{width: 39.1%;}
.titleContents .titleContents__text,
.titleContents .titleContents__photo{width: 56.8%;}

.titleContents .titleContents__title{margin-bottom: 0;}
.titleContents .titleContents__text{
    margin-bottom: 1.5em;
    font-size: 2.6rem;
    line-height: 1.61;
    font-weight: 500;
    letter-spacing: 0.14em;
}
.titleContents .titleContents__photo img{
  border-radius: 2em;
}

.titleContents .scroll{
    position: absolute;
    right: -8%;
    top: 2%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.64em;
    color: #818181;
    font-size: 1.4rem;
}
.titleContents .scroll:after{
    content: "";
    display: block;
    position: absolute;
    border: none;
    border-bottom: 2px solid #808080;
    border-left: 1px solid #808080;
    transform: skewY(-63deg);
    transition: .3s;
    top: 100%;
    right: calc(50% - 8px);
    width: 10px;
    height: 14em;
}


@media screen and (max-width: 767px) {
  .titleContents{
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }
  
  .titleContents .scroll{
    font-size: 1rem;
    right: 2%;
    top: 32%;
  }
  
  .titleContents .scroll:after{
    right: calc(50% - 3px);
    width: 5px;
    height: 8em;
  }
  .titleContents .titleContents__photo img{border-radius: 0;}
  .titleContents .titleContents__text, .titleContents .titleContents__photo{width: 100%;}
  .titleContents .titleContents__illust{width: 100%;}
  .titleContents .titleContents__photo { order: 5; }
  .titleContents .titleContents__illust { order: 4; }
  .titleContents .titleContents__title { order: 3; }
  .titleContents .titleContents__text { order: 1; }
  .titleContents .titleContents__illust.sp {order: 2}
  
  .titleContents .titleContents__illust{ padding: 18% 18% 0 18%;}
  .titleContents .titleContents__illust.sp{padding: 0 18%; text-align: center;}
  .titleContents .titleContents__title{margin:1.5em 0 1em; text-align: center; font-weight: bold;}
  .titleContents .titleContents__text{text-align: center; margin-top: 1em;font-size: 1.7rem;}
}


/* ====================================================
　titleSquare
==================================================== */
* + .titleSquare{
  margin-top: 4em;
}
.titleSquare{
  display: flex;
  align-items: center;
  margin-bottom: 1.5em;
  font-size: 2.1rem;
}
.titleSquare .square{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2em;
  width: 5em;
  height: 5em;
  padding: 0.5em;
  font-size: 2.1rem;
  color: #fff;
  background: #97a7b0;
  font-weight: 500;
}


/* ====================================================
　titleBorder
==================================================== */
.titleBorder{
  padding: 0.5em;
  color: #4d8498;
  display: block;
  text-align: center;
  width: 100%;
  border-top: 1px solid #4d8498;
  border-bottom: 1px solid #4d8498;
}


@media print, screen and (min-width: 768px) {
  .titleBorder{font-size: 4.1rem; letter-spacing: 0.345em; font-weight: 400;}
}
@media screen and (max-width: 767px) {
  .titleBorder{font-size: 2.2rem; letter-spacing: 0.01em; font-weight: 700;}
}




/* ====================================================
　titleSideLine
==================================================== */
.titleSideLine{
  position: relative;
  text-align: center;
  font-size: 5.3rem;
  letter-spacing: 0.18em;
  color: #324380;
}
.titleSideLine:before,
.titleSideLine:after{
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  transform: translateY(50%);
  width: 2.25em;
  height: 3px;
  background: #000;
}
.titleSideLine:before{
  left: 0;
}
.titleSideLine:after{
  right: 0;
}


/* ====================================================
　titleBg
==================================================== */
.titleBg{
  padding: 0.25em 0.5em 0.5em;
  background: #324380;
  text-align: center;
  color: #fff;
  font-size: 3rem;
  letter-spacing: 0.33em;
}
.titleBg .large{
  font-size: 136%;
}

/* ====================================================
　borderTitle
==================================================== */
.borderTitle .title {margin-bottom: 0; font-weight: normal;}
@media print, screen and (min-width: 768px) {
    .borderTitle {
        margin-bottom: 3.4375em;
        padding-bottom: 2.5em;
        border-bottom: 1px solid #333;
    }
    .borderTitle .title {font-size: 5.3rem;}
    .borderTitle .subtitle {font-size: 2.7rem;}
}
@media screen and (max-width: 767px) {
    .borderTitle {
        margin-bottom: 2.1429em;
        border-bottom: 1px solid #B7BBBB;
        padding-top: 7.6429em;
        padding-bottom: 6.9286em;
        text-align: center;
    }
    .borderTitle .pc {display: none;}
    .borderTitle .title {font-size: 2.9rem;}
    .borderTitle .subtitle {font-size: 2.2rem; line-height: 1.5;}
}



/* ######################################################################################

　アクセシビリティ対応　sr-only

###################################################################################### */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}





/* ######################################################################################

    scroll  背景固定　スクロール

###################################################################################### */
.fixed-bg {
  position: relative;
  background-attachment: fixed;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.fixed-bg:after{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.fixed-bg .fixed-bg-content.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fixed-bg.leftLine:before{
  content: "";
  position: absolute;
  top: 0;
  left: 3em;
  width: 1px;
  height: 100%;
  background: #fff;
  font-size: 2.7rem;
}
.fixed-bg.leftLineBK:before{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #333;
  font-size: 2.7rem;
}

.scroll-bg {
  position: relative;
  background: #fff;
  width: 100%;
  display: block;
  z-index: 2;
}
.scroll-bg.black{
  background: #333;
}

.scroll-bg.round{
  border-radius: 3em;
  margin-top: -3em;
  margin-bottom: -3em;
}

@media print, screen and (min-width: 768px) {
  .fixed-bg {padding: 18em 0;}
  .fixed-bg.leftLine:before{left: 3em;}
  .fixed-bg.leftLineBK:before{left: 3em;}
  .scroll-bg {padding: 5em 0;}
}
@media screen and (max-width: 767px) {
  .fixed-bg {padding: 6em 0;}
  .fixed-bg.leftLine:before{left: 0.6em;}
  .fixed-bg.leftLineBK:before{left: 0.6em;}
  .scroll-bg {padding: 3em 0;}
}



@media print {
  .fixed-bg {
      padding-top: 10em;
      padding-bottom: 10em;
      min-height: auto;
      height: auto;
      background-attachment: scroll;
  }
  .fixed-bg:after{
      position: absolute;
  }
  .fixed-bg .fixed-bg-content {
      min-height: auto;
      height: auto;
  }
}



/* ######################################################################################

　table

###################################################################################### */
/* ====================================================
　基本設定
==================================================== */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
th {  
  padding: 0.5em 0.75em;
  font-size: 2.1rem;
  font-weight: 500;
}
td {
  padding: 1.5em;
  font-size: 1.6rem;
  font-weight: 400;
}

/* ====================================================
　色
==================================================== */
th, td {border-color: #231815;}
.borderBox th{background: #394680; color: #fff;}
.borderBox tr:nth-child(2n + 1) > td{background: #e5e9eb;}
.borderBox tr:nth-child(2n + 1) > td[rowspan]{background: #fff;}

/* ====================================================
　囲み
==================================================== */
.borderBox th, .borderBox td {
  border-width: 1px;
}
.borderBox tr + tr td, .borderBox tr + tr th {
  border-top-width: 0;
}
.borderBox th + th,
.borderBox th + td,
.borderBox td + td,
.borderBox td + td {
  border-left-width: 0;
}

.borderHorizon th,
.borderHorizon td {
  padding: 1.5em 0;
  text-align: left;
  border-width: 1px 0;
  border-color: #30468a;
  font-size: 1.4rem;
}

.borderHorizon tr:not(:first-child) th,
.borderHorizon tr:not(:first-child) td {border-top-width:0;}

@media print, screen and (min-width: 768px) {
  .borderHorizon th{width: 30%;}
}



.borderVertical th, .borderVertical td {
  vertical-align: top;
  padding: 0.35em 0;
  border-width: 0;
  font-size: 2.1rem;
  line-height: 2;
}

.borderVertical th{
  width: 7em;
  padding-right: 2em;
  text-align:justify;
  text-align-last: justify;
  border-right: 1px solid #333;
}
.borderVertical td{padding-left: 2em;}

.borderVertical.doubleColor tr:nth-child(2n) th,
.borderVertical.doubleColor tr:nth-child(2n) td{
  background: #eaedef;
}
@media print, screen and (min-width: 768px) {
    .borderVertical tr:first-child th,
    .borderVertical tr:first-child td{padding-top: 0;}
    .borderVertical tr:last-child th,
    .borderVertical tr:last-child td {padding-bottom: 0;}
    .borderVertical.doubleColor th,
    .borderVertical.doubleColor td{
      padding: 0.2em 1.5em;
    }
}
@media screen and (max-width: 767px) {
    .borderVertical.doubleColor {border-top: 1px solid #B7BBBB;}
    .borderVertical.doubleColor th,
    .borderVertical.doubleColor td {font-size: 1.5rem; line-height: 1.3333;}
    .borderVertical.doubleColor th {
        padding-left: 30px;
        padding-right: 18px;
        border-right: none;
        vertical-align: middle;
    }
    .borderVertical.doubleColor td {padding: 1.8667em 2em 2.1333em 0;}
    .borderVertical.doubleColor td.narrow {padding: 0.46667em 2em 0.7333em 0;}
}




  /* ====================================================
  　線種
  ==================================================== */
  .borderSolid th {
    border-style: solid;
  }
  .borderSolid td {
    border-style: solid;
  }
  .borderSolid td:before {
    border-style: solid;
  }





/* ######################################################################################

　topicsInfo

###################################################################################### */
.topicsInfo{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 768px) {
  .topicsInfo .entry {
    position: relative;
    border-style: solid;
    border-color: #333333;
    border-width: 0;
    border-bottom-width: 1px;
    padding: 1.25em 0;
    font-size: 2.0rem;
    line-height: 1.5;
  }
  .topicsInfo .entry:first-child {
    border-top-width: 1px;
  }
  .topicsInfo .date {
    display: table-cell;
    white-space: nowrap;
    padding: 0 0 0 0;
    font-size: 100%;
    font-weight: normal;
    color: #333333;
    font-weight: 500;
  }
  .topicsInfo .text {
    display: table-cell;
    padding: 0 0 0 2.5em;
    font-size: 100%;
    line-height: 1.86;
    font-weight: 500;
  }
  .topicsInfo .text a:hover{
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .topicsInfo .entry {
    padding: 1.5em 2em 2em;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);
  }
  .topicsInfo .entry + .entry{margin-top: 2em;}
  .topicsInfo .date {
    margin-bottom: 0.5em;
    text-align: center;
  }
  .topicsInfo .date span{
    display: inline-block;
    background: #f2f4fa;
    padding: 0.5em 2em;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 600;
  }
  .topicsInfo .text {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
  }
}






/* ######################################################################################

　wallBelt

###################################################################################### */
.wallBelt {
  position: relative;
  overflow: hidden;
}
@media print, screen and (min-width: 768px) {
  .wallBelt {
    padding-top: 5em;
    padding-bottom: 5em;
  }
  .wallBelt.narrow {
    padding-top: 3em;
    padding-bottom: 3em;
  }
  .wallBelt.wide {
    padding-top: 8em;
    padding-bottom: 8em;
  }
  .wallBelt.extra {
    padding-top: 12em;
    padding-bottom: 12em;
  }
  .wallBelt.topNarrow {
    padding-top: 3em;
  }
  .wallBelt.topWide {
    padding-top: 8em;
  }
  .wallBelt.topExtra {
    padding-top: 12em;
  }
  .wallBelt.bottomNarrow {
    padding-bottom: 3em;
  }
  .wallBelt.bottomWide {
    padding-bottom: 8em;
  }
  .wallBelt.bottomExtra {
    padding-bottom: 12em;
  }
}
@media screen and (max-width: 767px) {
  .wallBelt {
    padding-top: 3em;
    padding-bottom: 3em;
  }
  .wallBelt.narrow {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
  .wallBelt.wide {
    padding-top: 4.5em;
    padding-bottom: 4.5em;
  }
  .wallBelt.extra {
    padding-top: 6em;
    padding-bottom: 6em;
  }
  .wallBelt.topNarrow {
    padding-top: 1.5em;
  }
  .wallBelt.topWide {
    padding-top: 4.5em;
  }
  .wallBelt.topExtra {
    padding-top: 6em;
  }
  .wallBelt.bottomNarrow {
    padding-bottom: 1.5em;
  }
  .wallBelt.bottomWide {
    padding-bottom: 4.5em;
  }
  .wallBelt.bottomExtra {
    padding-bottom: 6em;
  }
}

.wallBelt.zero {
  padding-top: 0;
  padding-bottom: 0;
}
.wallBelt.topZero {
  padding-top: 0;
}
.wallBelt.bottomZero {
  padding-bottom: 0;
}

.wallBelt.black {
  background: #353131;
  color: #fff;
}
.wallBelt.gray {
  background: #f8f9fa;
}



/* ######################################################################################

　modal　モーダル

###################################################################################### */
.modalInfo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* background-color: rgba(255, 255, 255, 0.7); */
  width: 100%;
  z-index: 1000000;
  display: none;
}
.modalInfo__warp {
  position: relative;
  width: calc(100% + 10%);
  margin: auto -5%;
  height: 100%;
  display: flex;
  z-index: 1000001;
  max-width: 764px;
  align-items: center;
}
.modalInfo__inner{
  position: relative;
  width: 100%;
}

.modalInfo__close__fix {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1000002;
  background: #fff;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
.modalInfo__close__fix:before,
.modalInfo__close__fix:after{
  content: "";
  position: absolute;
  background: #595757;
}
.modalInfo__close__fix:before{
  transform: rotate(-45deg);
}
.modalInfo__close__fix:after{
  transform: rotate(45deg);
}
.openModal{
  cursor: pointer;
}


.modalInfo__date{margin-bottom: 1em; font-size: 1.4rem;}
.modalInfo__title{
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #DBDBDB;
  font-size: 2.4rem;
  line-height: 1.66;
}
.modalInfo__detail p{font-size: 1.5rem;}
.modalInfo__detail p{font-size: 1.5rem;}
.modalInfo__detail blockquote{
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 6px solid #DBDBDB;
}
.modalInfo__buttonBox{margin-top: 2.5em;}

@media print, screen and (min-width: 768px) {
  .modalInfo__close__fix {
    top: -20px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  .modalInfo__close__fix:before,
  .modalInfo__close__fix:after{
    top: 18px;
    left: 10px;
    width: 20px;
    height: 2px;
  }
}
@media screen and (max-width: 767px) {
  .modalInfo__close__fix {
    top: -20px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
  .modalInfo__close__fix:before,
  .modalInfo__close__fix:after{
    top: 20px;
    left: 10px;
    width: 20px;
    height: 3px;
  }
  .modalInfo__warp {
    width: calc(100% - 30px);
    margin: 85px auto 40px;
  }
}



body{position: relative;}





/* ######################################################################################

　border

###################################################################################### */
@media screen and (max-width: 767px) {
  .border.after{position: relative;}
  .border.after:after{
    content: "";
    display: block;
    position: absolute;
    border: none;
    border-left: 1px solid #c5c5c5;
    bottom: -15%;
    height: 4.5em;
    width: 1px;
    left: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);    
  }
}


/* ######################################################################################

　scrollContents

###################################################################################### */
@media screen and (max-width: 767px) {
  .scrollContents{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}


/* ######################################################################################

　ハートアニメーション

###################################################################################### */
    .voiceList__item__btn .good .newiine_thanks {
        position:absolute;
        z-index:10;
        min-width:50px;
        bottom: 100%;
        left:-90%;
        width:80px;
        height:200px;
        padding:0;
        border:none;
        background:none;
        filter:none;
        /*background:url(../img/contents/voice/heart.png) no-repeat;
        background-size:contain;*/

    }
    button.newiine_btn div.newiine_thanks::after {display:none;}

    .good .newiine_thanks_up .newiine_icon.pop {
        position:absolute;
        bottom:0;
        width:26%;
        height:auto;
        animation:popHeart 0.75s ease-in forwards;
        opacity:0;
    }

    .good .newiine_thanks .newiine_icon.pop .heart_border {stroke: none !important;}
    .good .newiine_thanks .newiine_icon .heart            {fill:#ed5061 !important;}
    
     .good .newiine_thanks .newiine_icon.pop02 {left:9%;  animation-delay: 0.1s;}
     .good .newiine_thanks .newiine_icon.pop08 {left:57%; animation-delay: 0.2s;}
     .good .newiine_thanks .newiine_icon.pop05 {left:33%; animation-delay: 0.3s;}
     .good .newiine_thanks .newiine_icon.pop10 {left:73%; animation-delay: 0.4s;}
     .good .newiine_thanks .newiine_icon.pop03 {left:17%; animation-delay: 0.5s;}
     .good .newiine_thanks .newiine_icon.pop06 {left:41%; animation-delay: 0.6s;}
     .good .newiine_thanks .newiine_icon.pop01 {left:0%;  animation-delay: 0.7s;}
     .good .newiine_thanks .newiine_icon.pop09 {left:65%; animation-delay: 0.8s;}
     .good .newiine_thanks .newiine_icon.pop04 {left:25%; animation-delay: 0.9s;}
     .good .newiine_thanks .newiine_icon.pop07 {left:49%; animation-delay: 1.0s;}

@keyframes popHeart{
0% {opacity: 0; bottom:0;}
10% {opacity: 1;}
100% {opacity: 0; bottom:80%;}
}