:root{
  --content_width: 100vw;
}
*{
  box-sizing: border-box;
  overscroll-behavior: none;
}

@font-face{
    font-family:"IQOSW01-Bold";
    src:url("../fonts/IQOSW01-Bold.woff2") format("woff2"),url("../fonts/IQOSW01-Bold.woff") format("woff");
}
@font-face{
    font-family:"IQOSW02-Bold";
    src:url("../fonts/IQOSW02-Bold.woff2") format("woff2"),url("../fonts/IQOSW02-Bold.woff") format("woff");
}
@font-face{
    font-family:"IQOSW05-Bold";
    src:url("../fonts/IQOSW05-Bold.woff2") format("woff2"),url("../fonts/IQOSW05-Bold.woff") format("woff");
}
@font-face{
    font-family:"IQOSW04-Bold";
    src:url("../fonts/IQOSW04-Bold.woff2") format("woff2"),url("../fonts/IQOSW04-Bold.woff") format("woff");
}
@font-face{
    font-family:"IQOSW10-Bold";
    src:url("../fonts/IQOSW10-Bold.woff2") format("woff2"),url("../fonts/IQOSW10-Bold.woff") format("woff");
}
@font-face{
    font-family:"IQOSW02-Light";
    src:url("../fonts/IQOSW02-Light.woff2") format("woff2"),url("../fonts/IQOSW02-Light.woff") format("woff");
}
@font-face{
    font-family:"IQOSW05-Light";
    src:url("../fonts/IQOSW05-Light.woff2") format("woff2"),url("../fonts/IQOSW05-Light.woff") format("woff");
}
@font-face{
    font-family:"IQOSW01-Regular";
    src:url("../fonts/IQOSW01-Regular.woff2") format("woff2"),url("../fonts/IQOSW01-Regular.woff") format("woff");
}
@font-face{
    font-family:"IQOSW04-Regular";
    src:url("../fonts/IQOSW04-Regular.woff2") format("woff2"),url("../fonts/IQOSW04-Regular.woff") format("woff");
}
@font-face{
    font-family:"IQOSW10-Regular";
    src:url("../fonts/IQOSW10-Regular.woff2") format("woff2"),url("../fonts/IQOSW10-Regular.woff") format("woff");
}
@font-face{
    font-family:"IQOSW05-Regular";
    src:url("../fonts/IQOSW05-Regular.woff2") format("woff2"),url("../fonts/IQOSW05-Regular.woff") format("woff");
}
@font-face{
    font-family:"IQOSW02-Regular";
    src:url("../fonts/IQOSW02-Regular.woff2") format("woff2"),url("../fonts/IQOSW02-Regular.woff") format("woff");
}
@font-face{
    font-family:"IQOSW10-Light";
    src:url("../fonts/IQOSW10-Light.woff2") format("woff2"),url("../fonts/IQOSW10-Light.woff") format("woff");
}
@font-face{
    font-family:"IQOSW04-Light";
    src:url("../fonts/IQOSW04-Light.woff2") format("woff2"),url("../fonts/IQOSW04-Light.woff") format("woff");
}
@font-face{
    font-family:"IQOSW01-Light";
    src:url("../fonts/IQOSW01-Light.woff2") format("woff2"),url("../fonts/IQOSW01-Light.woff") format("woff");
}

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #34303D;
  background-color: #FFFDFB;
  line-height: 1.5em;
  overflow-x: hidden;
}
h1, h2, h3{
  padding: 0;
  margin: 0;
  font-weight: normal;
}
a{
  text-decoration: none;
}
img{
  width: 100%;
}
ul, ol{
  padding: 0;
  margin: 0;
}
ul li{
  list-style-type: none;
}

.pc_inline{
  display: block;
}
.pc_only_inline{
  display: inline-block;
}
.sp_only,
.sp_only_inline{
  display: none;
}

.content_wrapper{
  width: 100%;
  height: 100%;
}
header{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 76px;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0, 0.1);
  z-index: 10;
}
header .header_logo{
  display: block;
  width: 141px;
  height: 44px;
}
footer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 76px;
  font-size: 12px;
  color: #FFFDFB;
  background-color: #34303D;
}
.content_outer,
.content_inner{
  min-height: calc(100% - (76px + 76px));
}

@media screen and (max-width: 800px) {
  body{
    font-size: calc(32 * (var(--content_width) / 750));
  }

  .pc_inline,
  .pc_only_inline{
    display: none;
  }
  .sp_inline{
    display: block;
  }
  .sp_only_inline{
    display: inline-block;
  }

  header {
    height: calc(112 * (var(--content_width) / 750));
  }
  header .header_logo{
    width: calc(216 * (var(--content_width) / 750));
    height: calc(67 * (var(--content_width) / 750));
  }
  footer{
    height: calc(112 * (var(--content_width) / 750));
    font-size: calc(18 * (var(--content_width) / 750));;
  }
  .content_outer,
  .content_inner{
    min-height: calc(100% - ((112 + 112) * (var(--content_width) / 750)));
  }
}