@import url('base.css');


/* === ############## TOPページ用 ############## === */

body.top{
padding:0;
}

body.top main{
padding-left:30px!important;
padding-right:30px!important;
}

.top h2{
text-align:center;
}

.top h2 img{
height:30px;
width:auto;
vertical-align: -4px;
padding-right:5px;
}

.top-info01-wapper h2{
background:var(--color-white-bg);
color:var(--color-primary);
border-radius:50px;
padding:10px 0;
}

.top-info01-wapper h3{
padding:0;
margin-top:0;
}

 .steps {
max-width: 100%;
color: white;
margin-top:30px;
}

.step {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
padding-bottom:30px;
border-bottom:solid 1px #FFF;
}

.step img.step-image {
width: 60px;
height: 60px;
margin-right: 15px;
flex-shrink: 0;
}

.step-content p {
margin-top: 0;
font-size: 16px;
font-weight: bold;
}

.step-content ul {
margin: 5px 0 0 0;
padding-left: 1em;
}

.step-content ul li {
font-size: 14px;
margin-bottom: 5px;
list-style: disc;
line-height:1.4;
}

.top-info03-wapper h3{
margin-top:0;
font-size:1.2rem;
}

 .link-list {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 15px;
}

.link-button {
background:var(--color-white-bg);
border-radius: 200px;
padding: 15px 20px;
text-decoration: none;
color:var(--color-primary);
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: relative;
}

.link-button .text {
display: flex;
flex-direction: column;
padding-left: 15px;
}

.link-button .text h3 span{
color:var(--color-white-text);
background:var(--color-primary);
padding: 1px 17px;
border-radius: 20px;
margin-right: 8px;
}

.link-button .arrow {
font-size: 20px;
}

.link-button .note {
font-size: 0.9rem;
color: var(--color-primary);
font-weight: normal;
margin-top: 10px;
}

.modal-link a{
font-size:1.4rem;
font-weight:600;
border-bottom:solid 1px #FFF;
}

.special-form {
text-align: center;
margin: 40px 0;
}

.special-form input[type="text"] {
width: 100%;
max-width: 400px;
padding: 12px;
border: 2px solid var(--color-primary);
border-radius: 2px;
font-size: 16px;
outline: none;
box-sizing: border-box;
}

.special-form button {
margin-top: 20px;
padding: 10px 30px;
font-size: 16px;
font-weight: bold;
color: #f6529a;
background-color: transparent;
border: 2px solid var(--color-primary);
border-radius: 10px;
cursor: pointer;
}

.top-info04-wapper h2{
text-align:left;
}

.sense{
background:#231816;
padding:35px 40px;
}

.sense h2{
margin:0;
}

.sense img{
width:150px;
}

.top-company h3{
font-weight:300;
font-size:1.2rem;
}

.top .site-footer{
background:#231816;
padding:10px 0;
}

.top .site-footer p{
margin:0;
}

/* GoogleMAP */

.map-container {
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius:20px;
}

.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

/* ドロワーメニュー */

.hamburger {
width: 40px;
height: 30px;
position: fixed;
top: 20px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.hamburger span {
display: block;
height: 4px;
background: hotpink;
border-radius: 2px;
transition: all 0.3s ease;
}

/* ドロワー：上からスライドダウン */
.drawer {
position: fixed;
top: -120vh;
left: 0;
width: 100%;
background: rgba(0, 80, 180, 0.95);
color: #fff;
z-index: 1000;
transition: top 0.4s ease;
padding: 80px 40px;
box-sizing: border-box;
overflow-y: auto;
height:100vh;
padding-top: 150px;
}

.drawer.open {
top: 0;
}

.drawer ul {
list-style: none;
padding: 0;
margin: 0;
}

.drawer li {
margin: 20px 0;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border-bottom:solid 3px #FFF;
padding-bottom:20px;
}

.drawer li a{
display: block;
width: 100%;
text-align: center;
font-weight: 700;
font-size: 1.5rem;
}

.drawer li img {
width: auto;
height:25px;
margin-right: 10px;
}

.drawer li:first-child img{
margin-right: 4px;
}

.drawer img.menu-img{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width:60%;
}

/* ハンバーガーがアクティブ状態 */

.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(10px, 6px);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(12px, -9px);
}

.drawer.open {
right: 0;
}

/* === ############## 下層ページ用 ############## === */

/* header */

.sub-page h1 img{
width:190px;
}

.sub-page header .flex-container{
justify-content: space-between;
}

/* footer */

.sub-page footer p{
font-size:0.8rem;
}

.sub-page footer{
text-align:center;
}

/* ========== スポット ========== */

body.spot{
padding:20px 0;
}

.spot h2{
border-bottom:solid 1px #FFF;
}

.spot-info{
font-weight:600;
}

.spot h2 img,.spot h3 img{
height:30px;
width:auto;
vertical-align: -4px;
padding-right:5px;
}

.spot h3 img{
height:23px;
}

.spot-info01-wapper a,.spot-info02-wapper a{
font-size:1.2rem;
border-bottom:solid 1px #FFF;
}

.spot-info03-wapper h3{
font-size:1.2rem;
}

.spot-info03-wapper ul{
padding-left:0!important;
}

.spot5-att ul{
color:#FFF!important;
}

p.jr-time{
border:solid 1px #FFF;
padding:10px;
}

/* 音声再生プレイヤー */

.custom-player {
background-color: #000;
color: #fff;
padding: 16px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}

.audio-title {
margin: 0 0 8px;
font-weight: bold;
font-size: 16px;
}

input[type="range"] {
width: 90%;
margin-bottom: 12px;
accent-color: white;
height:3px;
}

.controls {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 16px;
padding: 0 40px;
gap: 24px;
}

.icon-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width:35px;
}

.volume-btn {
position: absolute;
right: 0;
}

#playPauseBtn{
width:60px;
}

.close-btn {
position: absolute;
top: -35px;
right: 0;
background: #000;
border: none;
color: var(--color-white-text);
font-size: 2rem;
cursor: pointer;
padding: 0 13px;
}

.guideline {
max-width: 100%;
margin: 0 auto;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
color: #333;
}

.guideline ul {
list-style: none;
padding: 0;
margin: 0;
}

.guideline li {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.guideline img {
width: 35px;
height: 35px;
margin-right: 12px;
flex-shrink: 0;
margin-top: 2px;
}

.guideline p {
margin: 0;
border-left: solid 1px #000;
padding-left: 16px;
}

/* ========== アンケート ========== */

.survey .content-box{
padding:40px 20px!important;
}
.survey-form {
max-width: 100%;
margin: auto;
}

.survey-form label {
display: block;
margin: 0 0 8px;
font-weight: bold;
}

/* 性別ボタン風スタイル */
.radio-buttons {
display: flex;
gap: 10px;
}

.radio-buttons input[type="radio"] {
display: none;
}

.radio-buttons label {
flex: 1;
padding: 10px;
background-color: var(--color-primary);
color: #fff;
text-align: center;
border: 2px solid var(--color-primary);
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s ease;
user-select: none;
}
.select-buttons label{
margin-top:25px;
}

.radio-buttons input[type="radio"]:checked + label {
background-color: #fff;
color: var(--color-primary);
}

/* セレクトボックス共通スタイル */
.survey-form select {
width: 100%;
padding: 12px;
border: 2px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-white-text);
border-radius: 6px;
font-weight: bold;
font-size: 1rem;
appearance: none;

background-image: url("data:image/svg+xml,%3Csvg fill='white' height='32' viewBox='0 0 24 24' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 32px;
}

.survey-form select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(230, 69, 151, 0.3);
}

.agreement-section {
margin-top: 30px;
text-align: center;
color: white;
}

.agreement-section .links {
margin-bottom: 40px;
font-size:0.9rem;
}

.agreement-section .links a {
color: white;
text-decoration: none;
margin: 0 10px;
}

.checkbox-label {
display: inline-flex;
align-items: center;
font-weight: bold;
color: white;
cursor: pointer;
gap: 8px;
position: relative;
}

.checkbox-label input[type="checkbox"] {
display: none;
}

.custom-checkbox {
width: 20px;
height: 20px;
border: 2px solid white;
border-radius: 4px;
display: inline-block;
position: relative;
vertical-align: -4px;
margin-right: 4px;
}

/* チェックされたら ✔ を表示 */
.checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}

.submit-button {
margin-top: 10px;
background-color: white;
color: var(--color-primary);
font-weight: 700;
padding: 12px 40px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.4rem;
transition: background-color 0.2s ease;
}

.submit-button:hover {
background-color: #f5f5f5;
}


/* ========== 位置情報設定方法 ========== */

.gps section p.gps-heading-note{
color: var(--color-white-text);
font-weight:800;
font-size:1.2rem;
}

.gps .content-box h3,.gps .content-box h4{
font-size:1.08rem;
}

.gps .content-box h3{
border-bottom:solid 1px #000;
}

.gps .content-box img{
padding-bottom:30px;
}

/* ========== 位置情報許可 ========== */

body.location{
height:100vh;
}

.location-btn-wapper{
gap: 16px;
margin: 20px 0;
}

.location-btn-wapper .btn {
display: inline-block;
padding: 12px 15px;
background-color: var(--color-primary);
color: var(--color-white-text);
text-decoration: none;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
text-align: center;
transition: background-color 0.2s ease;
width:130px;
text-align:center;
}

/* ========== リリース前 ========== */


/* ==========
TOP
利用規約
プライバシーポリシー
位置情報設定手順
注意事項 アンケート
共通
* ========== */

.top .content-box,.location .content-box,.terms .content-box,.policy .content-box,.gps .content-box,.spot-info03-wapper .content-box,.survey .content-box{
background:var(--color-white-bg);
padding:20px;
font-weight:600;
color: var(--color-text);
}

.terms ol,.terms ul,.policy ul,.gps ul,.spot-info03-wapper ul,.spot5-att ul{
list-style-type: disc;
padding-left: 1em;
margin:0.5em 0 1em;
line-height:1.2;
color: var(--color-text);
}

.policy ul li ul {
list-style-type: circle;
}

.terms ol {
list-style-type: decimal;
}

/* ========== Media Queries Style ========== */

@media (max-width: 430px) {
.drawer img.menu-img{
max-width:100%;
}
h2{
font-size: 7vw;
}
h3{
font-size: 6vw;
}
p,ul,ol{
font-size:4vw;
}
.spot h2,.spot h3{
font-size: 6vw;
}
.gps section p.gps-heading-note,
.top h2,
.sense h2,
.modal-link a{
font-size:5vw;
}
.gps .content-box h3,.gps .content-box h4,.top-info03-wapper h3{
font-size:4.6vw;
}
.top h2 img,.spot h2 img,.spot h3 img{
height:6vw;
}
.top-info01-wapper h3{
font-size:4.2vw;
}
.modal-body li{
font-size: 3.8vw;
}
.text div,
.sense p{
font-size: 3.4vw;
}
.link-button .note{
font-size: 2.6vw;
}
.link-button .text h3 span{
position: absolute;
top: -10px;
right: 10px;
border: solid 2px #FFF;
font-size:0.8rem;
}
}

@media (max-width: 365px) {
.sub-page h1{
width:60%;
}
.sub-page h1 img{
width:90%;
}
.btn--primary{
padding: 10px 18px;
}
}