@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

html {
  /*****************
  base: 10px
  e.g.: font-size: 14px; (for ie8)
        font-size: 1.4rem;
  *****************/
  font-size: 62.5%;
}

body {
  color: #242427;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 1.8em;/* chrome対策としてem指定 */
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.001em;/* iOS4でのテキスト右の隙間対策 */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;/* iOSでの文字サイズ自動調整の解除 */
  word-wrap: break-word;
  overflow-wrap : break-word;
}

html,
body {
  background-color: #fff;
}

.container {
  padding: 0 20px 0;
  margin: 0 auto;
}

/* -------------------------------------------------
▼ パディングとボーダーを幅と高さに含める
------------------------------------------------- */
*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* -------------------------------------------------
▼ 画像
------------------------------------------------- */
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  /*-webkit-backface-visibility: hidden;*/
  /*image-rendering: -webkit-optimize-contrast;*/
}

/* 画像エリアの確保 */
.ratio-wrap {
  width: 100%;
  height: 0;
  /* 画像比率は各画像で設定
  例：700 × 430 ⇒ 430 ÷ 700 × 100% = 61.428%
  padding-bottom: 61.428%
  */
}

.ratio-wrap .image-file {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------
▼ main（IE11対策）
------------------------------------------------- */
main {
  display: block;
}

/* -------------------------------------------------
▼ リンク
------------------------------------------------- */
a:link,
a:visited {
  color: #242427;
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: none;
}

a:focus,
*:focus {
  outline: none;
}

a.disable:hover {
  cursor: default;
}

/* -------------------------------------------------
▼ デフォルトスタイル
------------------------------------------------- */
ul, ol {
  list-style-type: none;
}

/* -------------------------------------------------
▼ テキストスタイル
------------------------------------------------- */
.text-small {
  font-size: 12px;
  font-size: 1.2rem;
}

.text-bold {
  font-weight: bold;
}

.text-nobold {
  font-weight: normal !important;
}

.text-italic {
  font-style: italic !important;
}

.text-underline {
  text-decoration: underline !important;
}

/* -------------------------------------------------
▼ リストスタイル
------------------------------------------------- */
.list-type-disc {
  list-style-type: disc;
  margin-left: 1.8rem;
}

.list-type-custom {
  margin-left: 1.3em;
  text-indent: -1.3em;
}

.list-type-custom .mark {
  padding-right: 0.3em;
}




/* -------------------------------------------------
▼ マージン
------------------------------------------------- */
.m00 {margin: 0 !important;}
.mt00 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}
.mb00 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}

/* -------------------------------------------------
▼ パディング
------------------------------------------------- */
.p00 {padding: 0 !important;}
.pt00 {padding-top: 0 !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.pt70 {padding-top: 70px !important;}
.pt80 {padding-top: 80px !important;}
.pt90 {padding-top: 90px !important;}
.pt100 {padding-top: 100px !important;}
.pb00 {padding-bottom: 0 !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb100 {padding-bottom: 100px !important;}

/* -------------------------------------------------
▼ ホバー
------------------------------------------------- */
@media print, screen and (min-width: 751px) {
  body:not(.touch) .hover-op {
    transition: .2s;
  }

  body:not(.touch) .hover-op:hover {
    filter: alpha(opacity=80);
    opacity: .80;
  }
}

/* -------------------------------------------------
▼ 改行
------------------------------------------------- */
@media print, screen and (min-width: 751px) {
  .br-sp {
    display: none;
  }

  .br-pc {
    display: inline;
  }
}

@media print, screen and (max-width: 750px) {
  .br-sp {
    display: inline;
  }

  .br-pc {
    display: none;
  }
}

/* -------------------------------------------------
▼ Clearfix
------------------------------------------------- */
.clearfix::after {clear: both;content: ' ';display: block;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}
* html .clearfix {height: 1px; /*\*//*/height: auto;overflow: hidden;/**/}

/* -------------------------------------------------
▼ モーダル関連
------------------------------------------------- */
/* Bodyのスクロール停止 */
.fixed-scroll {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* モーダル画面表示の時のガタつき対策（スクロールバー） */
.fixed-scroll-y {
  overflow-y: scroll;
}

/* -------------------------------------------------
▼ slickスライダー
------------------------------------------------- */
.slider-wrap {
  overflow: hidden;
  width: 100%;
  height: 0;
  /* エリア比率はそれぞれ設定
  例：700 × 430 ⇒ 430 ÷ 700 × 100% = 61.428%
  padding-bottom: 61.428%
  */
}

.slider-list.slick-slider {
  opacity: 0;
}

.slider-list.slick-initialized {
  opacity: 1;
}

.slider-list {
  margin-bottom: 0 !important;
}

.slider-list .item {
  display: block;
}

/* ドットタイプ */
.slider-list.slider-type-dot .slider-dot {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
}

.slider-list.slider-type-dot .slider-dot li {
  margin: 0 8px;
}

.slider-list.slider-type-dot .slider-dot li button {
  margin: 0;
  padding: 0;
  font-size: 0;
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #e60012;
  border-radius: 50%;
  cursor: pointer;
}

.slider-list.slider-type-dot .slider-dot li.slick-active button {
  background: #e60012;
}

@media print, screen and (min-width: 751px) {
  body:not(.touch) .slider-list.slider-type-dot .slider-dot li button {
    transition: .2s;
  }

  body:not(.touch) .slider-list.slider-type-dot .slider-dot li button:hover {
    filter: alpha(opacity=50);
    opacity: .50;
  }
}


.test-wrap {
  width: 300px;
  background-color: pink;
}

.test-wrap .test {
  display: block;
  background-color: red;
}

.test-wrap .deco {
  display: inline-block;
  width: 30px;
  height: 12px;
  position: relative;
  overflow: hidden;

  background-color: aqua;
}

.test-wrap .deco::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  position: absolute;
  top: 10px;
  left: 0;
}

.test-wrap .deco::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17.3px;
  border-color: transparent transparent transparent #007bff;

  position: absolute;
  top: 5px;
  left: 20px;
}