html { scroll-behavior: smooth; scroll-padding-top: 75px; }

div.box-wave { width: 100%; max-width: 1100px; margin: 0 auto; z-index: 9; position: relative; padding-bottom: 100px; }
div.box-wave div.title p { color: #fff; }
div.box-wave div.title { margin-bottom: 0; }
div.box-wave-wrapper { padding: 0 0 100px 0; }

/* 波線アニメーション */

.wave-section { position: relative; background-color: #f7f7f7; overflow: hidden; min-height: 300px; }
.wave-content { padding: 100px 20px; text-align: center; position: relative; z-index: 2; }
.wave { position: absolute; left: 0; width: 100%; height: 160px; overflow: hidden; line-height: 0; z-index: 1; }
.wave svg { display: block; width: 200%; height: 100%; animation: waveMove 10s linear infinite; fill: #fff; }
.wave-top { top: 0; transform: rotate(180deg); }
.wave-bottom { bottom: 0; }

@keyframes waveMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 810px) { .wave { height: clamp(48px, 16vw, 160px); } }

/* 共通設定 */

.box-01 { width: 100%; max-width: 1100px; margin: 0 auto; position: relative;}
.box-02 { width: 100%; margin: 0 auto; position: relative; padding: 0 50px 0 150px; overflow: hidden; }

section#area1,section#area2,section#area3,section#area4,section#area5,section#area6 { padding: 100px 5% 100px; position: relative; }

div.wrapper { clear: both; padding: 100px 0 0 0; }

.title-yowan-01 { font-family: "Zen Kaku Gothic New", sans-serif; color: #656464; font-size: 180%; margin: 15px 0 35px; letter-spacing: 2px; }
.title-yowan-02 { font-family: "Zen Kaku Gothic New", sans-serif; color: #000; font-size: 120%; margin: 0 0 35px; letter-spacing: 2px; text-align: center; }
.text-yowan-01 { font-size: 90%; line-height: 240%; }
.sub-title-yowan-01 { font-weight: 200; }
.sub-title-yowan-02 { font-size: 50%; letter-spacing: 0; color: #000; }

/* 個別設定 */

section#area1 { background: url("../../img/yowan/area1-background.jpg")bottom no-repeat; background-size: cover; }

img.tt-01 { width: 50px; position: absolute; top: 0; left: 0; }
section#area2 img.tt-02 { width: 20px; position: absolute; bottom: 5%; right: 5%; }
img.tt-02 { width: 20px; position: absolute; bottom: 10%; right: 5%; }

section#area2 { background: url("../../img/yowan/area2-background.jpg")bottom no-repeat; background-size: contain; }
section#area2 div.left { width: 60%; float: left; }
section#area2 div.right { width: 32%; float: right; }
section#area2 div.left2 { width: 44%; float: left; }
section#area2 div.right2 { width: 50%; float: right; }

div.box-a span,div.box-b span,div.box-c span { display: inline-block; line-height: 1.4; padding: 0 .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin-bottom: 10px; }
div.box-a span { background: linear-gradient(#fedf6f, #fedf6f) 0 calc(100% - .12em) / 100% .55em no-repeat; }
div.box-b span { background: linear-gradient(#b9cee7, #b9cee7) 0 calc(100% - .12em) / 100% .55em no-repeat; }
div.box-c span { background: linear-gradient(#accb62, #accb62) 0 calc(100% - .12em) / 100% .55em no-repeat; }

div.box-a,div.box-b,div.box-c { font-weight: 200; font-size: 85%; vertical-align: top; display: inline-block; line-height: 180%; }
div.box-a { margin: 0 20px 0 0; width: calc(33.3333333333333% - 20px); }
div.box-b { margin: 0 20px 0 20px; width: calc(33.3333333333333% - 40px); }
div.box-c { margin: 0 0 0 20px; width: calc(33.3333333333333% - 20px); }

.title-yowan-03 { font-family: "Zen Kaku Gothic New", sans-serif; color: #fff; font-size: 200%; margin: 0 0 20px 0; letter-spacing: 2px; text-align: center; }
section#area3 { background: url("../../img/yowan/area3-background.jpg")center no-repeat; background-size: cover; }
section#area3 div.logo { max-width: 200px; margin: 0 auto; }
section#area3 div.box-02 { text-align: right; margin-top: 600px; }
section#area3 div.box-02 img { max-width: 450px; }

/* 画像を上下にふわふわ */
section#area3 div.box-02 img { display: inline-block; animation: fuwafuwa 2s ease-in-out infinite alternate; will-change: transform; }

/* 上下に往復するアニメーション */
@keyframes fuwafuwa { from { transform: translateY(-10px); } to { transform: translateY(10px); } }

/* ユーザーがアニメ抑制設定の場合は止める（任意） */
@media (prefers-reduced-motion: reduce) { section#area3 div.box-02 img { animation: none; } }

section#area4 { background: url("../../img/yowan/area4-background.jpg")center no-repeat; background-size: cover; }

section#area5 { background: url("../../img/yowan/area2-background.jpg")bottom no-repeat; background-size: cover; }
section#area5 div.box-02 img { max-width: 800px; margin: 0 auto; display: block; }
section#area5 div.box-02 div.box-03 { max-width: 800px; margin: 0 auto 45px; overflow: hidden; }
section#area5 div.box-02 div.left { float: left; text-align: center; width: 50%; }
section#area5 div.box-02 div.right { float: right; text-align: center; width: 50%; }
section#area5 div.box-02 span { font-size: 150%; font-weight: 900; }
section#area5 div.box-02 div.left a,section#area5 div.box-02 div.right a { display: block; padding: 10px 20px; background-color: #fff; color: #ff0000; border: 1px solid #ff0000; border-radius: 30px; text-align: center; margin: 20px auto 0; text-decoration: none; transition: 0.3s; width: 200px; }
section#area5 div.box-02 div.left a:hover,section#area5 div.box-02 div.right a:hover { text-decoration: none; color: #fff; background-color: #ff0000; transition: 0.3s; }
section#area5 div.box-02 div.banner { clear: both; text-align: center; }
section#area5 div.box-02 div.banner img { max-width: 300px; margin: 0 auto; display: block; }
section#area5 div.box-02 div.banner a { opacity: 1.0; transition: 0.3s; display: inline-block; }
section#area5 div.box-02 div.banner a:hover { opacity: 0.3; transition: 0.3s; }
section#area5 div.banner p { text-align: center; clear: both; display: block; margin: 0 0 20px; font-size: 95%; }

section#area6 { background: url("../../img/yowan/area6-background.jpg")center no-repeat; background-size: cover; }

section#area7 { padding: 100px 0 200px; }
section#area7 ul { list-style: none; padding: 0; margin: 0; }
section#area7 ul li { position: relative; padding-left: 1.2em; margin: 10px 0; font-size: 85%; }
section#area7 ul li::before { content: "●"; position: absolute; left: 0; }
section#area7 ul li span { color: #004EA2; }
section#area7 div.box-01 { max-width: 950px; }

@media print, screen and (max-width: 767.98px) {

html { scroll-behavior: smooth; scroll-padding-top: 50px; }

div.box-wave-wrapper { padding: 0; }
div.box-wave { padding: 0; }
img.tt-01 { width: 30px; }
.box-02 { padding: 0 0 0 50px; }
section#area2 div.left,section#area2 div.right { float: none; width: 100%; } 
.title-yowan-01 { font-size: 150%; margin: 15px 0 20px; letter-spacing: 0; }
.text-yowan-01 { line-height: 200%; margin-bottom: 20px; }
div.wrapper { padding: 50px 0 0 0; }
div.box-a,div.box-b,div.box-c { float: none; width: 100%; margin: 0 0 20px 0; }
.sub-title-yowan-02 { display: inline-block; }
.title-yowan-02 { font-size: 100%; }
section#area2 div.left2,section#area2 div.right2 { float: none; width: 100%; } 
section#area2 { background: url("../../img/yowan/area2-background_sp.jpg")bottom no-repeat; }
section#area2 img.tt-02 { right: auto; left: 5%; width: 15px; bottom: 2%; }
img.tt-02 { right: auto; left: 5%; width: 15px; bottom: 5%; }
section#area3 { background: url("../../img/yowan/area3-background_sp.jpg")center no-repeat; background-size: cover; }
.title-yowan-03 { font-size: 150%; }
section#area3 div.box-02 { text-align: center; margin-top: 100px; padding: 0; }
section#area5 div.box-02 { padding: 0; }
section#area5 div.box-02 div.left,section#area5 div.box-02 div.right { font-size: 80%; float: none; width: 100%; margin-top: 50px; }
section#area5 div.banner p { font-size: 85%; }

section#area7 { padding: 50px 20px 100px; }

}