@import "_initial";


// *import
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Roboto:ital,wght@0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* font
===================================*/

body {
  font-family:'Noto Sans JP', 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro', 'メイリオ' , Meiryo, 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif; font-weight: 400;
}


span {
  font-family: inherit;
}



/* text, anchor, image
===================================*/

p {
  // color: #333;
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 1.5em;
  word-wrap: break-word;
  font-weight: 500;
  @include portrait(){font-size: 16px;}  
  @include bp(320px,767px) {margin-bottom: 1em;}



  &:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}

a {
  transition: all  0.2s ease;
  backface-visibility: hidden;
  img {
    transition: all  0.2s ease;
    backface-visibility: hidden;
  }
}

input {
  transition: all  0.2s ease;
  backface-visibility: hidden;
}

a {
  img:hover {
    opacity: 0.9;
  }
  color: inherit;
  text-decoration: none;
  font: inherit;
  &:hover {
    text-decoration: none;
  }
}


img {
  max-width: 100%;
  height: auto;
  // -webkit-backface-visibility: hidden;
}

figure img {display: block; margin: auto;}

li {list-style: none;}

address,em, i {font-style: normal;}

i {line-height: 1;}



/* text */

.center {text-align: center !important;}
.bold {font-weight: bold;}
.red {color: #C71331;}
.blue {color: #00468C;}
.yellow {color: #F2E14D;}


// ?margin
.mb0 {margin-bottom: 0;}
.mb10 {margin-bottom: 10px;}
.mb50 {margin-bottom: 50px;}


/* marker */
.marker {background:linear-gradient(transparent 60%, #F2E14D 60%);

  // &.yellow {background:linear-gradient(transparent 80%, #FCEE86 80%);}
  
}


/* switch
===================================*/

.sp {
  @include pc(768px) {display: none;}
}

.pc {
  @include sp(){display: none;}
}

.portrait {
  @include pc(567px){display: none;}
}



hr {
  &.spacer {border: none;height: 30px;
      &.medium {height: 60px; 
        @include bp(320px,767px) {height: 3rem;}
      }
      &.large {height: 90px;
        @include bp(320px,767px) {height: 4rem;}
      }
  }

  &.border {
    border: 0px dashed #ccc;
    border-width: 0 0 1px;
    margin: 30px 0;

    &.medium {margin: 60px 0;
    
      @include portrait(){margin: 2rem 0;}
    }
  }
}



// * scroller
/* scroller */
.scroller {position: fixed; right: -5rem; bottom: 2rem; background: rgba(0,0,0,0.5); color: #FFF;  width: 50px; height: 50px; font-size: 30px; display: flex; justify-content: center; align-items: center; border-radius: 70px; z-index: 101;}
.scroller.active {right: 1rem}

@media screen and (max-width: 767px) {
			.scroller {  width: 30px; height: 30px; font-size: 20px; }
			.scroller.active {bottom: .5rem;}
}