@charset "UTF-8";
/* base */
.pc_only,.pc_none,.sp_none,.sp_only{display:none!important}
@media screen and (min-width: 960px){.pc_only{display:block!important}}
@media screen and (max-width: 959px){.pc_none{display:block!important}}
@media screen and (min-width: 600px){.sp_none{display:block!important}}
@media screen and (max-width: 599px){.sp_only{display:block!important}}
/* body */
body {
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1em;
  letter-spacing: 0.1em;
  overflow-x: hidden;
}
body .inner {
  position: relative;
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
}
body .wrapper {
  padding-top: 88px;
}
@media screen and (max-width: 959px){
  body .wrapper {
    padding-top: 75px;
  }
}
@media screen and (max-width: 599px){
  body .inner {
    width: 90%;
  }
}
/* ----------------------------------------------
　font
---------------------------------------------- */
@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 900;
	src: url('../font/NotoSansJP-900.woff2') format('woff2'), url('../font/NotoSansJP-900.woff') format('woff'), url('../font/NotoSansJP-900.ttf') format('truetype');
}
.NotoSansJP {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.NotoSerifJP {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* ----------------------------------------------
  background
---------------------------------------------- */
.bgStripe-BLACK {
  background: url(../images/common/bgStripe-BLACK.jpg);
  background-size: 18px 18px;
  padding: 75px 0 70px;
}
.bgStripe-GRAY {
  background: url(../images/common/bgStripe-GRAY.jpg);
  background-size: 26px 26px;
  padding: 65px 0 80px;
}
.bgDots-BLUE {
  background: url(../images/common/bgDots-BLUE.png);
  background-color: #65b7cf;
  background-size: 12px 12px;
}
@media screen and (max-width: 599px) {
  .bgStripe-BLACK {
    background-size: 9px 9px;
    padding: 40px 0 45px;
  }
  .bgStripe-GRAY {
    background-size: 13px 13px;
    padding: 40px 0 45px;
  }
  .bgDots-BLUE {
    background-size: 10px 10px;
  }
}
/* ----------------------------------------------
　header / footer
---------------------------------------------- */
/* header */
header {
  background: #fff;
  width: 100%;
  padding: 15px 13px;
  position: fixed;
  z-index: 10;
}
header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* area1 */
header .area1 .item1 {
  background: #000;
  text-align: center;
  border-radius: 11px;
  padding: 3px 0 3px 3px;
  margin-bottom: 10px;
}
header .area1 .item1 span {
  position: relative;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
header .area1 .item1 span::before,
header .area1 .item1 span::after {
  content: "";
  background: url(../images/icon/icon-caution.png)no-repeat;
  background-size: contain;
  width: 15px;
  height: 13px;
  position: absolute;
  top: 3px;
  left: -23px;
}
header .area1 .item1 span::after {
  left: auto !important;
  right: -22px;
}
/* area2 */
header .area2 {
  display: flex;
  align-items: center;
  gap: 0 19px;
}
header .area2 a {
  transition: .3s;
}
header .area2 a:hover {
  opacity: 0.6;
}
/* footer */
footer {
  background: #08b0ca;
  color: #fff;
}
.copyright {
  text-align: center;
  padding: 35px 0;
}
.copyright p {
  font-size: 10px;
}
@media screen and (max-width: 959px) {
  header {
    padding: 8px 2% 8px 2.5%;
  }
  header .inner {
    width: 100%;
  }
  header .area1 .item1 {
    padding: 0px 0 5px 3px;
    margin-bottom: 9px;
  }
  header .area1 .item1 span {
    font-size: 11px;
    line-height: 1;
  }
  header .area1 .item1 span::before,
  header .area1 .item1 span::after {
    width: 12px;
    height: 11px;
    top: 3px;
    left: -15px;
  }
  header .area1 .item1 span::after {
    right: -15px;
  }
  header .area1 img {
    width: auto;
    height: 13px;
  }
  header .area2 {
    gap: 0 8px;
  }
  header .area2 .item1 {
    padding-right: 4px;
  }
  header .area2 .item1 img {
    width: 84px;
    height: auto;
  }
/* footer */
  .copyright {
    padding: 27px 0;
  }
}