/* テスト */ .btn-test { height: 200vh; width: 100%; } /* テストここまで */ /* ※各ページ、ged_headerの直後にから書き始める。その直下に_nav3を呼ぶ */ /* ▼　サイト全体　▼ */ body.posi { overflow: hidden; } .r-site { width: 100%; overflow-x: hidden; .co-h2 { text-align: left; font-weight: 700; color: var(--blue); font-size: 3rem; line-height: 2.5rem; span { margin-left: 30px; color: var(--gray); font-weight: 600; font-size: 1rem; display: block; position: relative; } span::before { content: ""; position: absolute; background-image: url("../img3/mimore-red.webp"); background-size: cover; width: 25px; height: 25px; left: -30px; top: calc(50% - 12.5px); display: block; } } /* 背景世界地図 */ #backworld { position: fixed; top: 0; left: 0; width: 200%; height: 100svh; object-position: 50% 50%; overflow: hidden; z-index: -1; img { height: 100%; width: auto; object-fit: cover; } .bw-1-1 { animation: bw-1-1 80s -40s linear infinite; } .bw-1-2 { animation: bw-1-2 80s linear infinite; } } /* 背景世界地図ここまで */ /* ナビゲーション */ #top-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 900; text-align: left; .tn-area { position: relative; height: 60px; width: 100%; background-color: var(--white); z-index: 900; display: flex; align-items: center; a { height: 60%; margin-left: 10px; img { height: 100%; width: auto; } } } #ham-btn { position: fixed; top: 0; right: 0; height: 60px; width: 60px; cursor: pointer; background-color: var(--blue); border-radius: 0 0 0 10px; z-index: 999; transition: all 0.3s; span { position: absolute; transition: all 0.3s; } .hamb-line { width: 40px; height: 2px; background-color: var(--white); transform-origin: 50% 50%; left: calc(50% - 20px); border-radius: 2px; } .hamb-1 { top: 14px; } .hamb-2 { top: 24px; } .hamb-text { text-align: center; font-size: 16px; line-height: 1.2rem; bottom: 8.5px; left: 0; display: inline-block; width: 100%; } .hamb-3 { color: var(--white); } .hamb-4 { opacity: 0; visibility: hidden; } } #ham-btn:hover { width: 70px; /* height: 70px; */ transition: all 0.3s; } #ham-btn.posi { background-color: var(--lgray); .hamb-line { background-color: var(--black); } .hamb-text { color: var(--black); } .hamb-1 { transform: rotate(20deg) translateY(5px); } .hamb-2 { transform: rotate(-20deg) translateY(-5px); } .hamb-3 { opacity: 0; visibility: hidden; } .hamb-4 { opacity: 1; visibility: visible; } } #ham-menu { transition: all 0.3s 0.3s; position: fixed; right: -100%; width: 100%; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: right; z-index: 998; .ham-cover { position: absolute; z-index: 2; top: 0; bottom: 0; width: 0; transition: all 0.8s; right: 0; background-color: var(--blue); } .hamm-close-area { display: none; } .hamm-wrap { padding: 60px var(--paddingLR) 80px 20px; width: 100%; height: 100%; overflow-y: scroll; transition: all 0.3s; z-index: 1; .hamm-inner { .hamm-area { padding-left: 15px; .back-home { margin: 30px 0; margin-right: auto; font-weight: 600; font-size: 1.6rem; display: block; width: fit-content; .b-home-img { width: 35px; height: 35px; top: calc(50% - 17.5px); right: -40px; transform: scaleX(-1); .bhi-1 { width: 100%; height: auto; top: 0; left: 0; } .bhi-2 { width: 40px; height: 40px; top: calc(55% - 20px); right: calc(70% - 20px); transform: scaleX(-1) rotate(10deg); i { width: 100%; height: 100%; position: relative; display: block; bottom: 66%; left: -35%; .i2-1 { width: 100%; height: 100%; } .i2-2 { width: 30%; height: 30%; bottom: 10%; left: 10%; transform-origin: 60% 18%; animation: bt-2-2 1.5s linear infinite; } .i2-3 { width: 30%; height: 30%; top: 30%; right: 0; transform-origin: 18% 50%; animation: bt-2-3 1.5s linear infinite; } } } } } .back-home:hover { .b-home-img { .bhi-2 { i { animation: btn-icon 1.5s linear infinite; } } } } .hamm-box { .hafb-box { border-bottom: 0.5px solid var(--lgray); padding-block: 20px; h3 { color: var(--blue); font-size: 1.3rem; margin-bottom: 15px; } ul { padding-left: 25px; li { a { display: block; width: 100%; position: relative; padding-block: 5px; font-size: 1.1rem; font-weight: 600; transition: all 0.2s; } /* a::before { content: ""; position: absolute; width: 15px; height: 15px; top: calc(50% - 7.5px); left: -20px; background-color: var(--blue); } */ i { font-style: normal; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); overflow: hidden; width: 20px; height: 20px; /* aspect-ratio: 1 / 1; */ display: flex; gap: 15px; background: var(--blue); border-radius: 50%; padding: 10px; span { font-size: 12px; line-height: 32px; display: flex; align-items: center; width: fit-content; transform: translateX(-34px); transition: all 0.3s; font-weight: 800; color: var(--white); } } a:hover { transition: all 0.2s; color: var(--red); i { span { transform: translateX(-7.5px); transition: all 0.3s; } } } } li:before { display: none; } } } } .hamm-btn-wrap { flex-direction: column; .BT { background-color: var(--lgray); color: var(--black); } } } } } } #ham-menu.posi2 { .ham-cover { animation: ham-cover2 0.8s linear forwards; } } #ham-menu.posi { right: 0; transition: all 0.3s 0.2s; .ham-cover { animation: ham-cover 0.8s linear forwards; } } } /* ナビゲーションここまで */ /* 固定ボタン */ #fixed-CV { position: fixed; right: 0; bottom: 0; display: flex; width: 100%; align-items: end; z-index: 999; .sideCV { position: relative; width: 55%; height: 60px; border-radius: 0 10px 0 0; font-weight: 600; background-color: var(--red); margin-right: 0; transition: all 0.3s; .sideCV-text { color: var(--white); position: absolute; inset: 0; margin: auto; letter-spacing: 1px; transition: all 0.3s; font-size: 16px; width: fit-content; height: fit-content; } i { position: absolute; width: 80px; height: 80px; left: -2px; bottom: 100%; overflow: hidden; transform: translateY(20px) rotate(10deg); div { width: 100%; height: 100%; img { position: absolute; } .i2-1 { width: 100%; height: 100%; top: 0; left: 0; } .i2-2 { width: 30%; height: 30%; bottom: 10%; left: 10%; transform-origin: 60% 18%; } .i2-3 { width: 30%; height: 30%; top: 30%; right: 0; transform-origin: 18% 50%; } } } } .sideCV:hover { transition: all 0.3s; height: 70px; i { div { animation: btn-icon 1.5s linear infinite; .i2-2 { animation: bt-2-2 1.5s linear infinite; } .i2-3 { animation: bt-2-3 1.5s linear infinite; } } } } .sideLINE { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; border-radius: 10px 0 0 0; background-color: var(--line); width: 45%; height: 60px; transition: all 0.3s; gap: 20px; img { width: 40px; height: 40px; } .sLINE-text { font-size: 16px; color: white; font-weight: 600; transition: all 0.3s; } } .sideLINE:hover { transition: all 0.3s; height: 70px; } } /* 使い回しボタン */ .BT { font-size: 1.4rem; display: flex; padding: 10px 50px 10px 30px; height: fit-content; min-height: 55px; justify-content: center; align-items: center; position: relative; border-radius: 10rem; margin: 20px auto; font-weight: 600; background-color: #2a2a30; width: fit-content; color: white; overflow: hidden; i { font-style: normal; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); overflow: hidden; width: 24px; height: 24px; /* aspect-ratio: 1 / 1; */ display: flex; gap: 15px; background: white; border-radius: 50%; padding: 12px; span { font-size: 15px; line-height: 32px; display: flex; align-items: center; width: fit-content; transform: translateX(-37.5px); transition: all 0.3s; font-weight: 800; color: #2a2a30; } } } .BT::after { content: ""; position: absolute; top: -1px; left: -100%; height: calc(100% + 2px); width: 80%; transform: skewX(-30deg); background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100% ); } .BT:hover { opacity: 1; } .BT:hover i span { transform: translateX(-7.5px); transition: all 0.3s; } .BT:hover::after { transition: all 0.7s; left: calc(100% + 2px); } /* 使い回しボタンここまで */ @media screen and (min-width: 950px) { /* ナビゲーション */ #top-nav { position: fixed; top: 0; #ham-menu { .hamm-close-area { display: block; width: 15%; } .hamm-wrap { width: 0; .hamm-inner { .hamm-area { .hamm-box { .hafb-box { max-width: 100%; ul { display: flex; flex-wrap: wrap; li { width: fit-content; margin-right: 70px; a { width: fit-content; white-space: nowrap; } } } } } .hamm-btn-wrap { margin-top: 50px; flex-direction: row; justify-content: left; .BT { margin-inline: 0 30px; } } } } } } #ham-menu.posi2 { .ham-cover { animation: ham-cover2 1.2s linear forwards; } } #ham-menu.posi { .hamm-wrap { width: 85%; /* overflow-y: auto; */ } .ham-cover { animation: ham-cover 1.2s linear forwards; } } } /* ナビゲーションここまで */ /* 固定ボタン */ #fixed-CV { bottom: auto; top: 20vh; display: flex; flex-direction: column; width: auto; .sideCV { display: flex; justify-content: center; align-items: center; padding: 20px 14px; width: 60px; border-radius: 10px 0 0 10px; font-weight: 600; background-color: var(--red); margin-right: 0; height: auto; .sideCV-text { position: relative; color: var(--white); writing-mode: vertical-rl; letter-spacing: 5px; transition: all 0.3s; font-size: 16px; } i { position: absolute; width: 80px; height: 80px; right: -20px; bottom: 100%; overflow: hidden; transform: translateY(20px) scaleX(-1) rotate(10deg); div { width: 100%; height: 100%; img { position: absolute; } .i2-1 { width: 100%; height: 100%; top: 0; left: 0; } .i2-2 { width: 30%; height: 30%; bottom: 10%; left: 10%; transform-origin: 60% 18%; } .i2-3 { width: 30%; height: 30%; top: 30%; right: 0; transform-origin: 18% 50%; } } } } .sideCV:hover { transition: all 0.3s; height: auto; width: 70px; i { div { animation: btn-icon 1.5s linear infinite; .i2-2 { animation: bt-2-2 1.5s linear infinite; } .i2-3 { animation: bt-2-3 1.5s linear infinite; } } } } .sideLINE { position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px 0 0 10px; background-color: var(--line); width: 60px; margin-right: 0; transition: all 0.3s; margin-top: 30px; img { width: 60px; height: 60px; } .sLINE-text { position: absolute; opacity: 0; visibility: hidden; font-size: 12px; bottom: calc(100% + 3px); right: 2px; transition: all 0.3s; } } .sideLINE:hover { transition: all 0.3s; width: 70px; height: 60px; /* .sLINE-text { opacity: 1; visibility: visible; transition: all 0.3s; } */ } } } } @keyframes btn-icon { 0% { transform: translateY(0); } 5% { transform: translateY(-5px); } 10% { transform: translateY(0); } 15% { transform: translateY(-5px); } 20% { transform: translateY(0); } 25% { transform: translateY(-5px); } 30% { transform: translateY(0); } 35% { transform: translateY(-5px); } 40% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes bt-2-2 { 0% { transform: rotate(-15deg); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-15deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-15deg); } 25% { transform: rotate(10deg); } 30% { transform: rotate(-15deg); } 35% { transform: rotate(10deg); } 40% { transform: rotate(0); } } @keyframes bt-2-3 { 0% { transform: rotate(15deg); } 5% { transform: rotate(-10deg); } 10% { transform: rotate(15deg); } 15% { transform: rotate(-10deg); } 20% { transform: rotate(15deg); } 25% { transform: rotate(-10deg); } 30% { transform: rotate(15deg); } 35% { transform: rotate(-10deg); } 40% { transform: rotate(0); } } @keyframes ham-cover { 0% { right: 0; width: 0; } 30% { right: 0; width: 100%; } 70% { right: 0; width: 100%; } 100% { right: 100%; width: 100%; } } @keyframes ham-cover2 { 0% { right: 100%; width: 100%; } 30% { right: 0; width: 100%; } 80% { right: 0; width: 100%; } 100% { right: 0; width: 0; } } @keyframes bw-1-1 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes bw-1-2 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } /* ▲　サイト全体ここまで　▲ */ /* ______________________________________________________ */ /* ▼　トップページ　▼ */ .r-site { #r-top { /* ▼　スマホ表示　▼ */ /* ▲　スマホ表示ここまで　▲ */ /* ▼　タブレット表示　▼ */ /* ▲　タブレット表示ここまで　▲ */ /* ▼　パソコン表示　▼ */ /* ▲　パソコン表示ここまで　▲ */ } } /* ▲　トップページここまで　▲ */ /* ______________________________________________________ */ /* ▼　下層ページ全体　▼ */ .r-site { .r-under { /* ▼　スマホ表示　▼ */ /* ▲　スマホ表示ここまで　▲ */ /* ▼　タブレット表示　▼ */ /* ▲　タブレット表示ここまで　▲ */ /* ▼　パソコン表示　▼ */ /* ▲　パソコン表示ここまで　▲ */ } /* ▲　下層ページ全体ここまで　▲ */ /* ______________________________________________________ */ /* ▼　下層ページ単体　▼ */ /* ▲　下層ページ単体ここまで　▲ */ }