/*--mainColor:#002063;*/
/*border*/
/*border*/
.LPtitle {
  text-align: center;
  font-size: 16px !important;
  font-weight: bold;
  color: #002063;
  margin-bottom: 8rem; }
  .LPtitle .logo {
    width: min(400px,100%);
    margin: 3rem auto; }

.LPentrance {
  width: min(640px,100%);
  height: auto;
  margin: 0 auto 6rem; }
  .LPentrance img {
    border-radius: 10px; }

.LPmessage {
  position: relative; }
  @media only screen and (min-width: 1281px) {
    .LPmessage {
      padding-left: max(0.5rem, calc((100vw - 1280px) / 2)) !important;
      padding-right: max(0.5rem, calc((100vw - 1280px) / 2)) !important; } }
  .LPmessage .message {
    font-size: 1.8rem;
    width: 70%;
    font-weight: bold;
    color: #002063;
    padding: 2rem 2.5rem;
    background: #FFF;
    border: 5px solid #002063;
    border-radius: 10px; }
  .LPmessage .lpbox {
    position: inherit;
    z-index: 10;
    width: min(100%, 920px);
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-bottom: 7rem; }
    .LPmessage .lpbox:nth-of-type(1) {
      margin-left: 25%; }
      @media only screen and (max-width: 640px) {
        .LPmessage .lpbox:nth-of-type(1) {
          margin: 0 auto 2rem; } }
      .LPmessage .lpbox:nth-of-type(1) .message {
        border-color: #8de207; }
    .LPmessage .lpbox:nth-child(2) {
      margin-right: 25%;
      flex-direction: row-reverse; }
      @media only screen and (max-width: 640px) {
        .LPmessage .lpbox:nth-child(2) {
          margin: 0 auto 2rem; } }
      .LPmessage .lpbox:nth-child(2) .message {
        border-color: #00cfff; }
    .LPmessage .lpbox:nth-child(3) .message {
      border-color: #ffe600; }
    @media only screen and (max-width: 640px) {
      .LPmessage .lpbox {
        flex-wrap: wrap-reverse;
        width: 95%; }
        .LPmessage .lpbox .message,
        .LPmessage .lpbox .illust {
          width: 100%; } }

.messagebg {
  position: absolute;
  width: 100%;
  left: 0; }
  .messagebg.pat {
    height: 25%;
    z-index: 3; }
    .messagebg.pat.n1 {
      background: url("../imgs/single/lpbg_komon.svg") top 0 center repeat-x;
      background-size: 33vh;
      top: 5%; }
    .messagebg.pat.n2 {
      background: url("../imgs/single/lpbg_kikkoG.svg") top 0 center repeat-x;
      background-size: 33vh;
      top: 35%; }
    .messagebg.pat.n3 {
      background: url("../imgs/single/lpbg_kanokoG.svg") top 0 center repeat-x;
      background-size: 33vh;
      top: 65%; }
  .messagebg.w {
    z-index: 5;
    height: 13%; }
    .messagebg.w.n1 {
      background: url("../imgs/single/lp_bg_white_1.png") top 0 center no-repeat;
      background-size: 100% 100%;
      top: 0%; }
    .messagebg.w.n2 {
      background: url("../imgs/single/lp_bg_white_2.png") top 20% center no-repeat;
      background-size: 100% 100%;
      top: 25%; }
    .messagebg.w.n3 {
      background: url("../imgs/single/lp_bg_white_3.png") top 60% center no-repeat;
      background-size: 100% 100%;
      top: 55%; }

.charainfo {
  position: relative;
  z-index: 15; }
  .charainfo .hSt_fourth {
    width: min(100%, 420px);
    text-align: center;
    margin: 0 auto 1rem; }
  .charainfo img {
    width: min(100%, 420px);
    display: block;
    margin: 0 auto 7rem;
    background: #FFF;
    border-radius: 10px;
    border: 5px solid #d6d6d6;
    padding: 1rem; }
  @media only screen and (max-width: 640px) {
    .charainfo {
      width: 95%;
      margin: 0 auto; } }

.LPoldmap {
  position: relative;
  z-index: 10;
  background: #FFF;
  text-align: center;
  font-weight: bold; }
  .LPoldmap.mapzoom a {
    display: block;
    overflow: hidden;
    position: relative; }
    .LPoldmap.mapzoom a img {
      background: #FFF;
      border: 5px solid #002063;
      border-radius: 10px; }
    .LPoldmap.mapzoom a:before {
      position: absolute;
      content: '';
      z-index: 1;
      bottom: 15px;
      right: 10px;
      background: url("../imgs/icon_zoom.svg") no-repeat;
      background-size: cover;
      height: 35px;
      width: 35px; }
  @media only screen and (max-width: 640px) {
    .LPoldmap a img {
      aspect-ratio: 16/9;
      width: 100%;
      object-fit: cover; } }

/*# sourceMappingURL=lp.css.map */
