@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

*, h1, h2, h3, h4, h5, p {
  padding: 0;
  margin: 0;
}

html {
  font-size: 10px;
  overflow-y: scroll;
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  html {
    overflow-x: hidden;
    width: 100%;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  body {
    overflow-x: hidden;
    width: 100%;
  }
}

a {
  text-decoration: none;
}

ul, li {
  list-style: none;
}

*:focus {
  outline: none;
}

img {
  vertical-align: bottom;
  border: 0px;
  width: 100%;
  height: 100%;
}

section {
  position: relative;
}

.pc-none {
  display: none;
}
@media screen and (min-width: 1501px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1500px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .pc-none {
    display: block;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .pc-none {
    display: block;
  }
}
@media screen and (max-width: 375px) {
  .pc-none {
    display: block;
  }
}

.sp-none {
  display: block;
}
@media screen and (min-width: 1501px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1500px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .sp-none {
    display: none;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .sp-none {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .sp-none {
    display: none;
  }
}

/****************************************
		1. General Setting
*****************************************/
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption,
tbody, tfoot, thead, table, label, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  list-style: none;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

html {
  background-color: #fff;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  html {
    width: 99%;
    margin: 0 auto;
  }
}

body {
  font-family: "Noto Sans JP", "Inconsolata", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ms pgothic", "osaka", sans-serif;
  font-size: 14px;
  color: #000;
}

img {
  vertical-align: text-bottom;
}

iframe {
  width: 100% !important;
}

.clear {
  clear: both;
  line-height: 0;
}

/****************************************
costomize_propety
*****************************************/
/*開くボタン*/
.modalOpen {
  width: 100%;
  max-width: 200px;
  background: #333;
  border: none;
  border-radius: 5px;
  color: #e9e9e9;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
}

.modalOpen:hover {
  cursor: pointer;
  opacity: 0.8;
}

/*モーダルウィンドウ*/
.modalWindow {
  width: calc(100vw - 100px);
  height: calc(100vh - 100px);
  min-height: 150px;
  max-height: 700px;
  background: #fff;
  border: solid 9px #fff;
  border-radius: 5px;
  padding: 5px;
  -webkit-box-shadow: 0px;
          box-shadow: 0px;
  position: fixed;
  top: calc(50% - (100vh - 100px) / 2);
  left: calc(50% - (100vw - 100px) / 2);
  z-index: 999; /*最前面に配置する*/
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalWindow {
    width: calc(100vw - 30px);
    left: calc(50% - (100vw - 30px) / 2);
    max-height: 2000px;
  }
}
@media screen and (max-width: 375px) {
  .modalWindow {
    width: 100%;
    left: 0;
    max-height: 2000px;
  }
}

.modalWindow.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

@media only screen and (min-width: 900px) {
  .modalWindow {
    width: 65vw;
    left: calc(100% - 82vw);
  }
}
/*モーダルウインドウ内*/
/*タイトル*/
.modalTitle {
  padding: 25px 0;
  background: #002e9c;
  color: #f9f9f9;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalTitle {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .modalTitle {
    display: none;
  }
}
.modalTitle span {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 3px;
}
/*メイン*/
.modalContents {
  height: 250px;
  background: #fff;
  padding: 10px;
  overflow-y: hidden;
  width: 88%;
  margin: 0 auto;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalContents {
    width: 96%;
    overflow-y: visible;
    height: 220px;
  }
}
@media screen and (max-width: 375px) {
  .modalContents {
    width: 96%;
    overflow-y: visible;
  }
}
.modalContents .attention {
  margin: 15px 0 20px 0;
  text-align: center;
  font-weight: bold;
  font-size: 23px;
  letter-spacing: 0px;
  color: #e40303;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalContents .attention {
    font-size: 7.2vw;
  }
}
@media screen and (max-width: 375px) {
  .modalContents .attention {
    font-size: 7.2vw;
  }
}
.modalContents .text {
  margin: 0 0 10px 0;
  font-size: 17px;
}
/*モーダルウインドウ内ボタン*/
.modalBtn {
  text-align: center;
  background: #f6f6f6;
  position: relative;
  top: 50px;
  width: 90%;
  margin: 0 auto;
  border-radius: 5px;
  padding: 45px 0 45px;
  border: solid 1px #aaa;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalBtn {
    width: 98%;
    top: 20vw;
  }
}
@media screen and (max-width: 375px) {
  .modalBtn {
    width: 100%;
    top: 20vw;
    padding: 20px 0 20px;
  }
}
.modalBtn .question {
  font-size: 36px;
  font-weight: bold;
  margin: 0 0 50px 0px;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalBtn .question {
    font-size: 8vw;
    margin: 0 0 35px 0;
  }
}
@media screen and (max-width: 375px) {
  .modalBtn .question {
    font-size: 8vw;
    margin: 0 0 25px 0;
  }
}

.modalBtn span {
  display: inline-block;
  width: 34%;
  font-weight: bold;
  background: #0645a7;
  border-radius: 5px;
  color: #f9f9f9;
  padding: 18px 0 18px;
  margin: 0 25px 0;
  font-size: 22px;
  letter-spacing: 2px;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .modalBtn span {
    width: 35%;
    margin: 0 4.5vw 0;
    padding: 19px 0px 19px;
  }
}
@media screen and (max-width: 375px) {
  .modalBtn span {
    width: 35%;
    margin: 0 4.5vw 0;
    padding: 19px 0px 19px;
    font-size: 20px;
  }
}

.modalBtn span:hover {
  cursor: pointer;
  opacity: 0.8;
}

/*オーバーレイ*/
.modalOverRay {
  display: none;
  width: 100%;
  height: 100%;
  background: #666;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99; /*モーダルウィンドウの下に配置する*/
  opacity: 0.5;
}

.modalOverRay.active {
  display: block;
}

/*モーダルウィンドウが開いていた時はスクロール不可*/
body.active {
  height: 100vh;
  overflow: hidden;
}
/*# sourceMappingURL=popup_modal.css.map */