/* ------------------------------------------------ */
/* 新井清太郎商店 関内ホール用CSS */
/* 2021年8月5日 更新 */
/* ------------------------------------------------ */


@media screen and (max-width: 1920px) {
  .Contents {
    width: 100%;
  }

  .Main {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 5%;
  }

  /* トップページ写真 */
  .MainPhoto {
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  .MainPhoto a:link {
    opacity: 1;
  }
  .MainPhoto a:visited {
    opacity: 1;
  }
  .MainPhoto a:active {
    opacity: 1;
  }

  .Slide {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  /* トップページPRポイント */
  .PR {
    position: absolute;
    top: 27vh;
    right: 5%;
    z-index: 220;
    padding-right: 5%;
    color: #ffffff;
    font-weight: bold;
    font-size: 200%;
    text-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5),
    -2px 2px 5px rgba(255, 0, 0, 0.5), 2px -2px 5px rgba(255, 0, 0, 0.5),
    -2px -2px 5px rgba(255, 0, 0, 0.5), 2px 0 5px rgba(255, 0, 0, 0.5),
    0 2px 5px rgba(255, 0, 0, 0.5), -2px 0 5px rgba(255, 0, 0, 0.5),
    0 -2px 5px rgba(255, 0, 0, 0.5);
    animation: PR 1.5s ease 0.1s backwards;
  }

  @keyframes PR {
    0% {
      opacity: 0;
      transform: translateX(-200%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* トップページ説明 */
  .TopExplain {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30vh;
    left: 0;
    z-index: 200;
    width: 100%;
    height: auto;
    padding-right: 5%;
    color: #f5f5f5;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.5;
    text-align: right;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px 2px 5px rgba(0, 0, 0, 0.5),
    2px -2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(0, 0, 0, 0.5),
    2px 0 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5),
    -2px 0 5px rgba(0, 0, 0, 0.5), 0 -2px 5px rgba(0, 0, 0, 0.5);
    animation: TopExplain 1s ease-in-out;
  }

  @keyframes TopExplain {
    0% {
      opacity: 0; /*初期状態では透明に*/
      transform: translateY(200%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .TopExplain1 {
    animation: TopExplain1 0.3s ease-in-out 1s backwards;
  }

  @keyframes TopExplain1 {
    0% {
      opacity: 0; /*初期状態では透明に*/
      transform: translateY(400%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .TopExplain2 {
    animation: TopExplain2 0.3s ease-in-out 1.3s backwards;
  }

  @keyframes TopExplain2 {
    0% {
      opacity: 0; /*初期状態では透明に*/
      transform: translateY(400%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .TopExplain3 {
    animation: TopExplain3 0.3s ease-in-out 1.6s backwards;
  }

  @keyframes TopExplain3 {
    0% {
      opacity: 0; /*初期状態では透明に*/
      transform: translateY(400%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .TopExplain4 {
    animation: TopExplain4 0.3s ease-in-out 1.9s backwards;
  }

  @keyframes TopExplain4 {
    0% {
      opacity: 0; /*初期状態では透明に*/
      transform: translateY(400%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* トップページ問い合わせ */
  .TopInquiryBack {
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 200;
    width: 20%;
    height: 15vh;
    background-color: #ffffff;
    font-size: 120%;
    animation: TopInquiryBack 2s ease 1s backwards;
  }

  @keyframes TopInquiryBack {
    0% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      opacity: 0.8;
      transform: translateY(0);
    }
  }

  .TopInquiry {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: baseline;
    opacity: 1;
    position: absolute;
    bottom: 1%;
    left: 0;
    z-index: 210;
    width: auto;
    height: auto;
    padding: 1% 1% 1% 4%;
    line-height: 2;
    animation: TopInquiry 2s ease 1s backwards;
  }

  @keyframes TopInquiry {
    0% {
      opacity: 0;
      transform: translateY(50%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .TopInquiry1 {
    width: auto;
    font-size: 100%;
    line-height: 1;
  }

  .TopInquiry2 {
    width: auto;
    padding-top: 1%;
    color: #003333;
    font-weight: bold;
    font-size: 150%;
  }

  .TopInquiry2 a {
    opacity: 1;
    color: #003333;
  }


  /* トップページ更新履歴 */
  .News {
    width: 50%;
  }

  .TopBar {
    display: block;
    width: auto;
    padding-left: 2%;
    border-bottom: 1px #003333 dashed;
    border-left: 10px #003333 solid;
    font-weight: bold;
    line-height: 3;
  }

  p.UpdateBox {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: 210px;
    padding: 2% 3%;
    overflow: auto;
    font-size: 100%;
    line-height: 2.5;
  }

  p.UpdateBox .UpdateDate {
    width: 20%;
    padding-left: 3%;
    background-image: url(../../in/image/profile/ping.gif);
    background-position: 1% center;
    background-repeat: no-repeat;
    color: #003333;
    font-weight: bold;
  }

  p.UpdateBox .UpdateExplain {
    width: 80%;
    padding: 0 2% 0 2%;
  }

  p.UpdateBox a {
    display: inline;
  }
}

/* StandardDisplay */
@media screen and (max-width: 1560px) {
  .PR {
    top: 30vh;
  }

  .TopExplain {
    top: 35vh;
  }

  .TopInquiryBack {
    width: 25%;
    height: 22vh;
  }
}

/* OldDisplay */
@media screen and (max-width: 1280px) {
  .PR {
    top: 25vh;
  }

  .TopExplain {
    top: 30vh;
  }

  .TopInquiryBack {
    width: 30%;
    height: 19vh;
  }
}

/* iPad */
@media screen and (max-width: 960px) {
  .PR {
    top: 7vh;
  }

  .TopExplain {
    top: 10vh;
  }

  /* トップページ問い合わせ */
  .TopInquiryBack {
    width: 35%;
    height: 40%;
  }

  .TopInquiry {
    width: 300px;
    height: 130px;
  }

  .TopInquiry2 {
    font-size: 120%;
  }

  /* トップページ更新履歴 */
  .News {
    width: 100%;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  p.UpdateBox {
    height: 200px;
  }
}

/* スマホ */
@media screen and (max-width: 520px) {
  .PR {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 5%;
    padding-right: 0;
    font-size: 150%;
    text-align: center;
  }

  /* トップページ説明 */
  .TopExplain {
    position: relative;
    top: 0;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    color: #000000;
    font-size: 150%;
    text-align: center;
    text-shadow: none;
  }

  /* トップページ問い合わせ */
  .TopInquiryBack {
    display: none;
  }

  .TopInquiry {
    position: relative;
    width: 100%;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }

  @keyframes TopInquiry {
    0% {
      opacity: 0;
      transform: translateY(64px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .TopInquiry1 {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    font-size: 90%;
    line-height: 2;
  }

  .TopInquiry2 {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    font-size: 110%;
  }

  .TopInquiry2 a {
    color: #003333;
  }

  /* トップページ更新履歴 */
  .News {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
  }

  .TopBar {
    width: 100%;
  }

  p.UpdateBox {
    height: 230px;
    margin-bottom: 5%;
  }

  p.UpdateBox .UpdateDate {
    width: 100%;
    padding-left: 5%;
    background-position: 2% center;
    line-height: 1.5;
  }

  p.UpdateBox .UpdateExplain {
    width: 100%;
    padding: 0 0 2% 7%;
    line-height: 1.5;
  }
}