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

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

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

body.en {
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

body.zh-TW {
  font-family: 'Noto Sans TC', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', sans-serif;
}

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

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

/* max-width = 1260px(header), 900px(main,footer) */
.container {
  padding: 0 10px 0;
  margin: 0 auto;
}

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

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

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

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

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

a.disable:hover {
  cursor: default;
}

/* -------------------------------------------------
▼ テキストスタイル
------------------------------------------------- */
.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;
}

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

/* -------------------------------------------------
▼ マージン
------------------------------------------------- */
.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スライダー
------------------------------------------------- */
.list-slider.slick-slider {
  /*display: none;*/
  opacity: 0;
}

.list-slider.slick-initialized {
  /*display: block;*/
  opacity: 1;
}

.list-slider {
  padding: 0 18px;
  position: relative;
}

/* Arrow 丸タイプ */
.list-slider .arrow-circle-left {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.list-slider .arrow-circle-right {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.list-slider .arrow-circle-left::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-left: 3px solid #555;
  border-bottom: 3px solid #555;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -5px;
}

.list-slider .arrow-circle-right::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #555;
  border-right: 3px solid #555;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -6px;
  margin-right: -4px;
}


/* -------------------------------------------------
▼ 入力フォーム
------------------------------------------------- */
input,
select,
textarea,
button {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 100%;
  color: #555;
}

body.en input,
body.en select,
body.en textarea,
body.en button {
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

body.zh-TW input,
body.zh-TW select,
body.zh-TW textarea,
body.zh-TW button {
  font-family: 'Noto Sans TC', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', sans-serif;
}

.ime-active {
  ime-mode: active;
}

.ime-inactive {
  ime-mode: inactive;
}

.ime-disabled {
  ime-mode: disabled;
}

/*----------------- ▼ (SP) ▼ -----------------*/
@media print, screen and (max-width: 750px) {
  input,
  select,
  textarea,
  button {
    font-size: unset;
  }
}
/*----------------- ▲ (SP) ▲ -----------------*/