@charset "UTF-8";
@keyframes fadeIn {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  60% {opacity: 1}
}
@keyframes fadeIn2 {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn2 {
  0% {opacity: 0}
  60% {opacity: 1}
}
@keyframes fadeIn3 {
  0% {opacity: 0}
  60% {opacity: 1}
}

@-webkit-keyframes fadeIn3 {
  0% {opacity: 0}
  60% {opacity: 1}
}
/*******************モーダル*************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmfadeOut {
  from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mmslideIn {
from { transform: translateY(15%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}

.micromodal-slide {
display: none;
}

.micromodal-slide.is-open {
display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}

/* ==========================================================================
共通
========================================================================== */ 
  html {
    scroll-padding-top: 88px;
  }
  
  .fadein_left {
    opacity : 0;
    transform : translateX(-30px);
    transition : all 1000ms;
    }
  .fadein_right{
    opacity : 0;
    transform : translateX(30px);
    transition : all 1000ms;
    }
  .fadein_bottom{
    opacity : 0;
    transform : translate(0px, 20px);
    transition : all 1000ms;
    }

  /* 画面内に入った状態 */
  .fadein_left.scrollin,
  .fadein_right.scrollin,
  .fadein_bottom.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
    .bg_gr{
      background: #f2f2f2;
    }
    .slide-in {
      overflow: hidden;
        display: inline-block;
    }
    
    .slide-in_inner {
      display: inline-block;
    }
    
    /*左右のアニメーション*/
    .leftAnime{
        opacity: 0;/*事前に透過0にして消しておく*/
        transform : translate(0px, 300px);
    }
    
    .slideAnimeLeftRight {
      animation-name:slideTextX100;
      animation-duration:0.8s;
      animation-fill-mode:forwards;
        opacity: 0;
    }
    
    @keyframes slideTextX100 {
      from {
      transform: translateX(-100%); /*要素を左の枠外に移動*/
            opacity: 0;
      }
    
      to {
      transform: translateX(0);/*要素を元の位置に移動*/
        opacity: 1;
      }
    }
    
    .slideAnimeRightLeft {
      animation-name:slideTextX-100;
      animation-duration:0.8s;
      animation-fill-mode:forwards;
        opacity: 0;
    }
    
    
    @keyframes slideTextX-100 {
      from {
      transform: translateX(100%);/*要素を右の枠外に移動*/
        opacity: 0;
      }
    
      to {
      transform: translateX(0);/*要素を元の位置に移動*/
        opacity: 1;
      }
    }

    .text_bold600{
      font-weight: 600;
    }


/* ==========================================================================
スマートフォン
========================================================================== */ 
@media (max-width: 768px) {
  
.attention_wrap{
  
  position: relative;
  margin-top: 70px;
  background: #fff;
  text-align: center;
}
.attention_wrap h1{
  text-align:center;
  font-size: 1.7rem;
  letter-spacing: .3rem;
  font-weight: 500;
  margin-bottom: 30px;
  padding: 0 10px;
  line-height: 1.8em;
}


.attention_wrap p{
  width: 980px;
}
.attention_wrap .text_sm{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .6rem;
  line-height: 3em;
  padding-bottom: 15px;
}
.attention_details{
  max-width: 1100px;
  margin: 0 auto 50px;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}
.attention_details h2 {
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3;
  padding: 0 3px;
  width: 95%;
  margin: 0 auto;
  letter-spacing: .1rem;
}

.attention_details h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: 1px #48BCC9 solid;
  bottom: -1px;
  left:0;
  width: 25%;
}
.attention_details p{
  font-size: 1.2rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  padding: 30px 20px 60px;
}
.attention_details a{
  color:#464444;
  text-decoration: underline;
}

}

/* ==========================================================================
デスクトップ
========================================================================== */ 
@media (min-width: 769px) {
  body{
    width: 100%!important;
  }
  

.attention_wrap{
  position: relative;
  margin-top: 160px;
  background: #fff;
  text-align: center;
}
.attention_wrap h1{
  text-align:center;
  font-size: 2rem;
  letter-spacing: .5rem;
  font-weight: 500;
  margin-bottom: 80px;
}

.attention_wrap p{
  width: 980px;
}
.attention_wrap .text_sm{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .6rem;
  line-height: 3em;
  padding-bottom: 15px;
}
.attention_details{
  max-width: 1100px;
  margin: 0 auto 140px;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}
.attention_details h2 {
  border-bottom: 1px #e0e0e0 solid;
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 3;
  padding: 0 10px;
  letter-spacing: .1rem;
}

.attention_details h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: 1px #48BCC9 solid;
  bottom: -1px;
  left:0;
  width: 20%;
}
.attention_details p{
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: .1rem;
  padding: 30px 10px 60px;
}
.attention_details a{
  color:#464444;
  text-decoration: underline;
  transition: .2s ease;
}
.attention_details a:hover{
  opacity: .7;
}

}