@charset "utf-8";

/* -------------------------

フォント

------------------------- */
.fw_300 { font-weight: 300;}
.fw_400 { font-weight: 400;}
.fw_500 { font-weight: 500;}
.fw_600 { font-weight: 600;}
.fw_700 { font-weight: 700;}
.fw_900 { font-weight: 900;}

.italic { font-style: italic;}

/* -------------------------

テキスト

------------------------- */
.big { font-size: 1.1em;}
.small { font-size: 0.9em;}

.under_line { text-decoration: underline;}

.l_height_2 { line-height: 2;}
.l_height_1_5 { line-height: 1.5;}

.align_l { text-align: left;}
.align_c { text-align: center;}
.align_r { text-align: right;}


.space_0 {
  letter-spacing: 0;
}
/* --------------------

extension

--------------------*/
button { cursor: pointer;}



.pointer { cursor: pointer;}



.b_shadow { box-shadow: 0 3px 3px rgba(0,0,0,0.15);}
.t_shadow { text-shadow: 0 3px 3px rgba(69,69,147,0.15);}



/* flex設定 */
.flex {
  display: flex;
  justify-content: space-between;
}
.ai_center {
  align-items: center;
}
.ai_end {
  align-items: end;
}
.flex_start {
  display: flex;
  justify-content: flex-start;
}
.flex_end {
  display: flex;
  justify-content: flex-end;
}
.reverse {
  flex-direction: row-reverse;
}
.grid {
  flex-wrap: wrap;
}

/* position設定 */
.po-r {
  position: relative;
}
.po-a {
  position: absolute;
}

/* width設定 */
.wd10 { width: 10%;}
.wd15 { width: 15%;}
.wd20 { width: 20%;}
.wd25 { width: 25%;}
.wd30 { width: 30%;}
.wd35 { width: 35%;}
.wd40 { width: 40%;}
.wd45 { width: 45%;}
.wd50 { width: 50%;}
.wd55 { width: 55%;}
.wd60 { width: 60%;}
.wd65 { width: 65%;}
.wd70 { width: 70%;}
.wd75 { width: 75%;}
.wd80 { width: 80%;}
.wd85 { width: 85%;}
.wd90 { width: 90%;}
.wd395 { width: 95%;}
.wd100 { width: 100%;}


.pb0 {padding-bottom: 0;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb60 {padding-bottom: 60px;}
.pb70 {padding-bottom: 70px;}
.pb80 {padding-bottom: 80px;}
.pb90 {padding-bottom: 90px;}
.pb100 {padding-bottom: 100px;}


.ls120 {letter-spacing: 0.12em;}
.ls200 {letter-spacing: 0.2em;}


/* margin設定 */
.mb0 { margin-bottom: 0px;}
.mb5 { margin-bottom: 5px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb25 { margin-bottom: 25px;}
.mb30 { margin-bottom: 30px;}
.mb35 { margin-bottom: 35px;}
.mb40 { margin-bottom: 40px;}
.mb45 { margin-bottom: 45px;}
.mb50 { margin-bottom: 50px;}
.mb55 { margin-bottom: 55px;}
.mb60 { margin-bottom: 60px;}
.mb65 { margin-bottom: 65px;}
.mb70 { margin-bottom: 70px;}
.mb75 { margin-bottom: 75px;}
.mb80 { margin-bottom: 80px;}
.mb85 { margin-bottom: 85px;}
.mb90 { margin-bottom: 90px;}
.mb95 { margin-bottom: 95px;}
.mb100 { margin-bottom: 100px;}
.mb110 { margin-bottom: 110px;}
.mb120 { margin-bottom: 120px;}

@media (min-width: 768px) { /* Tablet1 */
  .mb-md-0 { margin-bottom: 0px;}
  .mb-md-5 { margin-bottom: 5px;}
  .mb-md-10 { margin-bottom: 10px;}
  .mb-md-15 { margin-bottom: 15px;}
  .mb-md-20 { margin-bottom: 20px;}
  .mb-md-25 { margin-bottom: 25px;}
  .mb-md-30 { margin-bottom: 30px;}
  .mb-md-35 { margin-bottom: 35px;}
  .mb-md-40 { margin-bottom: 40px;}
  .mb-md-45 { margin-bottom: 45px;}
  .mb-md-50 { margin-bottom: 50px;}
  .mb-md-55 { margin-bottom: 55px;}
  .mb-md-60 { margin-bottom: 60px;}
  .mb-md-65 { margin-bottom: 65px;}
  .mb-md-70 { margin-bottom: 70px;}
  .mb-md-75 { margin-bottom: 75px;}
  .mb-md-80 { margin-bottom: 80px;}
  .mb-md-85 { margin-bottom: 85px;}
  .mb-md-90 { margin-bottom: 90px;}
  .mb-md-95 { margin-bottom: 95px;}
  .mb-md-100 { margin-bottom: 100px;}
  .mb-md-110 { margin-bottom: 110px;}
  .mb-md-120 { margin-bottom: 120px;}

  .pb-md-0 {padding-bottom: 0;}
  .pb-md-10 {padding-bottom: 10px;}
  .pb-md-20 {padding-bottom: 20px;}
  .pb-md-30 {padding-bottom: 30px;}
  .pb-md-40 {padding-bottom: 40px;}
  .pb-md-50 {padding-bottom: 50px;}
  .pb-md-60 {padding-bottom: 60px;}
  .pb-md-70 {padding-bottom: 70px;}
  .pb-md-80 {padding-bottom: 80px;}
  .pb-md-90 {padding-bottom: 90px;}
  .pb-md-100 {padding-bottom: 100px;}
}

@media (min-width: 992px) { /* Tablet2 */
  .mb-lg-0 { margin-bottom: 0px;}
  .mb-lg-5 { margin-bottom: 5px;}
  .mb-lg-10 { margin-bottom: 10px;}
  .mb-lg-15 { margin-bottom: 15px;}
  .mb-lg-20 { margin-bottom: 20px;}
  .mb-lg-25 { margin-bottom: 25px;}
  .mb-lg-30 { margin-bottom: 30px;}
  .mb-lg-35 { margin-bottom: 35px;}
  .mb-lg-40 { margin-bottom: 40px;}
  .mb-lg-45 { margin-bottom: 45px;}
  .mb-lg-50 { margin-bottom: 50px;}
  .mb-lg-55 { margin-bottom: 55px;}
  .mb-lg-60 { margin-bottom: 60px;}
  .mb-lg-65 { margin-bottom: 65px;}
  .mb-lg-70 { margin-bottom: 70px;}
  .mb-lg-75 { margin-bottom: 75px;}
  .mb-lg-80 { margin-bottom: 80px;}
  .mb-lg-85 { margin-bottom: 85px;}
  .mb-lg-90 { margin-bottom: 90px;}
  .mb-lg-95 { margin-bottom: 95px;}
  .mb-lg-100 { margin-bottom: 100px;}
  .mb-lg-110 { margin-bottom: 110px;}
  .mb-lg-120 { margin-bottom: 120px;}

  .pb-lg-0 {padding-bottom: 0;}
  .pb-lg-10 {padding-bottom: 10px;}
  .pb-lg-20 {padding-bottom: 20px;}
  .pb-lg-30 {padding-bottom: 30px;}
  .pb-lg-40 {padding-bottom: 40px;}
  .pb-lg-50 {padding-bottom: 50px;}
  .pb-lg-60 {padding-bottom: 60px;}
  .pb-lg-70 {padding-bottom: 70px;}
  .pb-lg-80 {padding-bottom: 80px;}
  .pb-lg-90 {padding-bottom: 90px;}
  .pb-lg-100 {padding-bottom: 100px;}
}

@media (min-width: 1200px) { /* PC */
  .mb-xl-0 { margin-bottom: 0px;}
  .mb-xl-5 { margin-bottom: 5px;}
  .mb-xl-10 { margin-bottom: 10px;}
  .mb-xl-15 { margin-bottom: 15px;}
  .mb-xl-20 { margin-bottom: 20px;}
  .mb-xl-25 { margin-bottom: 25px;}
  .mb-xl-30 { margin-bottom: 30px;}
  .mb-xl-35 { margin-bottom: 35px;}
  .mb-xl-40 { margin-bottom: 40px;}
  .mb-xl-45 { margin-bottom: 45px;}
  .mb-xl-50 { margin-bottom: 50px;}
  .mb-xl-55 { margin-bottom: 55px;}
  .mb-xl-60 { margin-bottom: 60px;}
  .mb-xl-65 { margin-bottom: 65px;}
  .mb-xl-70 { margin-bottom: 70px;}
  .mb-xl-75 { margin-bottom: 75px;}
  .mb-xl-80 { margin-bottom: 80px;}
  .mb-xl-85 { margin-bottom: 85px;}
  .mb-xl-90 { margin-bottom: 90px;}
  .mb-xl-95 { margin-bottom: 95px;}
  .mb-xl-100 { margin-bottom: 100px;}
  .mb-xl-110 { margin-bottom: 110px;}
  .mb-xl-120 { margin-bottom: 120px;}

  .pb-xl-0 {padding-bottom: 0;}
  .pb-xl-10 {padding-bottom: 10px;}
  .pb-xl-20 {padding-bottom: 20px;}
  .pb-xl-30 {padding-bottom: 30px;}
  .pb-xl-40 {padding-bottom: 40px;}
  .pb-xl-50 {padding-bottom: 50px;}
  .pb-xl-60 {padding-bottom: 60px;}
  .pb-xl-70 {padding-bottom: 70px;}
  .pb-xl-80 {padding-bottom: 80px;}
  .pb-xl-90 {padding-bottom: 90px;}
  .pb-xl-100 {padding-bottom: 100px;}
}


/* font-size設定 */
.fs-10 { font-size: 1rem;}
.fs-11 { font-size: 1.1rem;}
.fs-12 { font-size: 1.2rem;}
.fs-13 { font-size: 1.3rem;}
.fs-14 { font-size: 1.4rem;}
.fs-15 { font-size: 1.5rem;}
.fs-16 { font-size: 1.6rem;}
.fs-18 { font-size: 1.8rem;}
.fs-20 { font-size: 2.0rem;}
.fs-22 { font-size: 2.2rem;}
.fs-24 { font-size: 2.4rem;}
.fs-26 { font-size: 2.6rem;}
.fs-28 { font-size: 2.8rem;}
.fs-30 { font-size: 3.0rem;}
.fs-32 { font-size: 3.2rem;}
.fs-34 { font-size: 3.4rem;}
.fs-36 { font-size: 3.6rem;}
.fs-38 { font-size: 3.8rem;}
.fs-40 { font-size: 4.0rem;}
.fs-42 { font-size: 4.2rem;}
.fs-44 { font-size: 4.4rem;}
.fs-46 { font-size: 4.6rem;}
.fs-48 { font-size: 4.8rem;}
.fs-50 { font-size: 5.0rem;}
.fs-52 { font-size: 5.2rem;}
.fs-54 { font-size: 5.4rem;}
.fs-56 { font-size: 5.6rem;}
.fs-58 { font-size: 5.8rem;}
.fs-60 { font-size: 6.0rem;}
.fs-62 { font-size: 6.2rem;}
.fs-64 { font-size: 6.4rem;}
.fs-66 { font-size: 6.6rem;}
.fs-68 { font-size: 6.8rem;}
.fs-70 { font-size: 7.0rem;}

@media (min-width: 768px) { /* Tablet1 */
  .fs-md-10 { font-size: 1rem;}
  .fs-md-11 { font-size: 1.1rem;}
  .fs-md-12 { font-size: 1.2rem;}
  .fs-md-13 { font-size: 1.3rem;}
  .fs-md-14 { font-size: 1.4rem;}
  .fs-md-15 { font-size: 1.5rem;}
  .fs-md-16 { font-size: 1.6rem;}
  .fs-md-18 { font-size: 1.8rem;}
  .fs-md-20 { font-size: 2.0rem;}
  .fs-md-22 { font-size: 2.2rem;}
  .fs-md-24 { font-size: 2.4rem;}
  .fs-md-26 { font-size: 2.6rem;}
  .fs-md-28 { font-size: 2.8rem;}
  .fs-md-30 { font-size: 3.0rem;}
  .fs-md-32 { font-size: 3.2rem;}
  .fs-md-34 { font-size: 3.4rem;}
  .fs-md-36 { font-size: 3.6rem;}
  .fs-md-38 { font-size: 3.8rem;}
  .fs-md-40 { font-size: 4.0rem;}
  .fs-md-42 { font-size: 4.2rem;}
  .fs-md-44 { font-size: 4.4rem;}
  .fs-md-46 { font-size: 4.6rem;}
  .fs-md-48 { font-size: 4.8rem;}
  .fs-md-50 { font-size: 5.0rem;}
  .fs-md-52 { font-size: 5.2rem;}
  .fs-md-54 { font-size: 5.4rem;}
  .fs-md-56 { font-size: 5.6rem;}
  .fs-md-58 { font-size: 5.8rem;}
  .fs-md-60 { font-size: 6.0rem;}
  .fs-md-62 { font-size: 6.2rem;}
  .fs-md-64 { font-size: 6.4rem;}
  .fs-md-66 { font-size: 6.6rem;}
  .fs-md-68 { font-size: 6.8rem;}
  .fs-md-70 { font-size: 7.0rem;}
}

@media (min-width: 991px) { /* Tablet2 */
  .fs-lg-10 { font-size: 1rem;}
  .fs-lg-11 { font-size: 1.1rem;}
  .fs-lg-12 { font-size: 1.2rem;}
  .fs-lg-13 { font-size: 1.3rem;}
  .fs-lg-14 { font-size: 1.4rem;}
  .fs-lg-15 { font-size: 1.5rem;}
  .fs-lg-16 { font-size: 1.6rem;}
  .fs-lg-18 { font-size: 1.8rem;}
  .fs-lg-20 { font-size: 2.0rem;}
  .fs-lg-22 { font-size: 2.2rem;}
  .fs-lg-24 { font-size: 2.4rem;}
  .fs-lg-26 { font-size: 2.6rem;}
  .fs-lg-28 { font-size: 2.8rem;}
  .fs-lg-30 { font-size: 3.0rem;}
  .fs-lg-32 { font-size: 3.2rem;}
  .fs-lg-34 { font-size: 3.4rem;}
  .fs-lg-36 { font-size: 3.6rem;}
  .fs-lg-38 { font-size: 3.8rem;}
  .fs-lg-40 { font-size: 4.0rem;}
  .fs-lg-42 { font-size: 4.2rem;}
  .fs-lg-44 { font-size: 4.4rem;}
  .fs-lg-46 { font-size: 4.6rem;}
  .fs-lg-48 { font-size: 4.8rem;}
  .fs-lg-50 { font-size: 5.0rem;}
  .fs-lg-52 { font-size: 5.2rem;}
  .fs-lg-54 { font-size: 5.4rem;}
  .fs-lg-56 { font-size: 5.6rem;}
  .fs-lg-58 { font-size: 5.8rem;}
  .fs-lg-60 { font-size: 6.0rem;}
  .fs-lg-62 { font-size: 6.2rem;}
  .fs-lg-64 { font-size: 6.4rem;}
  .fs-lg-66 { font-size: 6.6rem;}
  .fs-lg-68 { font-size: 6.8rem;}
  .fs-lg-70 { font-size: 7.0rem;}
}

@media (min-width: 1199px) { /* Tablet1 */
  .fs-xl-10 { font-size: 1rem;}
  .fs-xl-11 { font-size: 1.1rem;}
  .fs-xl-12 { font-size: 1.2rem;}
  .fs-xl-13 { font-size: 1.3rem;}
  .fs-xl-14 { font-size: 1.4rem;}
  .fs-xl-15 { font-size: 1.5rem;}
  .fs-xl-16 { font-size: 1.6rem;}
  .fs-xl-18 { font-size: 1.8rem;}
  .fs-xl-20 { font-size: 2.0rem;}
  .fs-xl-22 { font-size: 2.2rem;}
  .fs-xl-24 { font-size: 2.4rem;}
  .fs-xl-26 { font-size: 2.6rem;}
  .fs-xl-28 { font-size: 2.8rem;}
  .fs-xl-30 { font-size: 3.0rem;}
  .fs-xl-32 { font-size: 3.2rem;}
  .fs-xl-34 { font-size: 3.4rem;}
  .fs-xl-36 { font-size: 3.6rem;}
  .fs-xl-38 { font-size: 3.8rem;}
  .fs-xl-40 { font-size: 4.0rem;}
  .fs-xl-42 { font-size: 4.2rem;}
  .fs-xl-44 { font-size: 4.4rem;}
  .fs-xl-46 { font-size: 4.6rem;}
  .fs-xl-48 { font-size: 4.8rem;}
  .fs-xl-50 { font-size: 5.0rem;}
  .fs-xl-52 { font-size: 5.2rem;}
  .fs-xl-54 { font-size: 5.4rem;}
  .fs-xl-56 { font-size: 5.6rem;}
  .fs-xl-58 { font-size: 5.8rem;}
  .fs-xl-60 { font-size: 6.0rem;}
  .fs-xl-62 { font-size: 6.2rem;}
  .fs-xl-64 { font-size: 6.4rem;}
  .fs-xl-66 { font-size: 6.6rem;}
  .fs-xl-68 { font-size: 6.8rem;}
  .fs-xl-70 { font-size: 7.0rem;}
}

/* --------------------

  モーダルの基本設定

--------------------*/
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg{
  background: rgba(100, 100, 100, 0.9);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content{
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
}
.modal__content img {
  height: 80vh;
  max-height: 400px;
  object-fit: contain;
}
.modal__content .js-modal-close {
  color: #fff;
  font-size: 40px;
  text-align: right;
  display: block;
}
@media (min-width: 768px) { /* Tablet1 */
  .modal__content {
    width: 80%;
  }
  .modal__content img {
    max-height: 500px;
    object-fit: contain;
  }
}
@media (min-width: 992px) { /* Tablet2 */
  .modal__content {
    width: 70%;
  }
  .modal__content img {
    max-height: 600px;
    object-fit: contain;
  }
}
@media (min-width: 1200px) { /* PC */
  .modal__content {
    width: 50%;
  }
  .modal__content img {
    max-height: 600px;
    object-fit: contain;
  }
}

/* --------------------

  fadeUp

--------------------*/
/* fadeUp */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  .fadeUpTrigger{
      opacity: 0;
  }