@charset "utf-8";

header { width:100%; position:fixed; top:0; left:0; z-index:1000; background:transparent; padding-top:80px;}
.parallax-section { height:100vh; position:relative; background-image:url('../img/photo_top_sp.jpg'); background-attachment:scroll; background-size:cover; background-position:center; overflow:hidden; color:white; }
.parallax-section .overlay { width: 100%;height: 100%;position: absolute; /* セクション内に限定 */top: 0;left: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 0;pointer-events: none;transition: background-color 0.6s ease;}
.content {position: relative;z-index: 1;width: 100%;margin: 0 auto;padding: 40px 20px;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;}
.content .title_english { position:absolute; top:85px; left:0; color: rgba(255, 255, 255, 0.2); }
.content h1 { width:90%; font-size:18px; margin:0px auto 0 auto; display:inline-block; color:#AD1D22; text-align:left; position:absolute; left:2.5%; top:100px; }
.text_sp { width:100%; height:100vh; padding:50px 5%; margin-top:-10px; margin-bottom:80px; background:#000; color:#fff; display:flex; align-items:center; text-align: justify; text-align:center; position:relative; z-index:1; }
.text_sp .headline-md { width:100%; text-align:center; line-height: 2.5em; letter-spacing:0.05; }
@media screen and (min-width: 768px) {
  .content h1 { /*width:1080px;*/ top:130px; left:initial; }
  .parallax-section {
    height: 100vh;
    position: relative;
    background-image: url('../img/photo_top.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: white;
    margin-bottom: 80px;
  }
  
  /* iPadなど（1024px以下）では fixed を scroll に切り替える */
  @media screen and (max-width: 1024px) {
    .parallax-section {
      background-attachment: scroll;
    }
  }
  .text_sp { display:none; }
}

.headline-md { line-height: 2.5em; letter-spacing:0.05; }
.scroll-message {opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.scroll-message.visible {opacity: 1;transform: translateY(0);}
.headline-xl { margin-top:30vh; margin-bottom: 100px;}