@charset "utf-8"; /* CSS Document */ /* 20250604 kato 以下追加 */ .blueHeader202506{ width: 100%; min-height: 800px; height: auto; position: relative; display: flex; justify-content: center; z-index: 1; } .blueHeader202506 .bt-bg01{ width: 100%; height: 430px; background: url("../img/top/bt-main-bg01.jpg") bottom; background-size: cover; position: absolute; z-index: 1; overflow: visible; } .blueHeader202506 .bt-bg01 div{ width: 100%; height: 430px; margin: 1px 0 0 0; background: url("../img/top/bt-bg02.png") bottom repeat-x; z-index: 2; } .blueHeader202506 .bt-title01{ width: calc(100% - 70px); height: auto; padding: 40px 0 100px 0; margin: 0 auto; box-sizing: border-box; z-index: 10; position: absolute; } .blueHeader202506 .bt-title01 p{ text-align: center; font-size: 22px; font-weight: 700; color: #FFFFFF; margin: 0 0 30px 0; opacity: 0; white-space: nowrap; } .blueHeader202506 .bt-title01 h1{ margin: 0 auto; width: 100%; height: auto; opacity: 0; } .blueHeader202506 .bt-title01 h1 img{ width: 100%; height: auto; } .blueHeader202506 .bt-title01 ul.bt-ul-pc{ display: none; } .blueHeader202506 .bt-title01 ul.bt-ul-sp{ width: 260px; height: 280px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px auto 0 auto; } .blueHeader202506 .bt-title01 ul.bt-ul-sp li{ opacity: 0; } .blueHeader202506 .bt-title01 h2{ width: 100%; display: flex; justify-content: center; margin: 40px 0 0 0; } .blueHeader202506 .bt-title01 p:last-child{ text-align: left; margin: 32px 0 0 0; font-size: 14px; font-weight: 300; color: #333333; white-space: normal; line-height: 2.0; } @media (min-width: 744px) { .blueHeader202506{ width: 100%; min-height: 800px; height: auto; position: relative; display: flex; justify-content: center; } .blueHeader202506 .bt-bg01{ width: 100%; height: 430px; background: url("../img/top/bt-main-bg01.jpg") bottom; background-size: cover; position: absolute; z-index: 1; } .blueHeader202506 .bt-bg01 div{ width: 100%; height: 430px; background: url("../img/top/bt-bg02.png") bottom repeat-x; z-index: 2; } .blueHeader202506 .bt-title01{ width: 659px; height: auto; padding: 72px 0 100px 0; margin: 0 auto; box-sizing: border-box; z-index: 10; position: absolute; } .blueHeader202506 .bt-title01 p{ text-align: center; font-size: 24px; font-weight: 700; color: #FFFFFF; margin: 0 0 30px 0; opacity: 0; } .blueHeader202506 .bt-title01 h1{ margin: 0 auto; width: 477px; height: 159px; opacity: 0; } .blueHeader202506 .bt-title01 h1 img{ width: 477px; height: 159px; } .blueHeader202506 .bt-title01 ul.bt-ul-pc{ width: 659px; display: flex; justify-content: space-between; margin: 70px 0 0 0; } .blueHeader202506 .bt-title01 ul.bt-ul-pc li{ opacity: 0; } .blueHeader202506 .bt-title01 ul.bt-ul-sp{ display: none; } .blueHeader202506 .bt-title01 h2{ width: 400px; display: flex; justify-content: center; margin: 70px auto 0 auto; } .blueHeader202506 .bt-title01 h2 img{ width: 100%; height: auto; } .blueHeader202506 .bt-title01 p:last-child{ text-align: center; margin: 56px 0 0 0; font-size: 16px; font-weight: 300; color: #333333; white-space: nowrap; line-height: 2.0; } }