* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}  


body { margin: 0; font-family: "Noto Sans JP", sans-serif; line-height: 1.6; }

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;  
  gap: 30px;
}
 
.title { font-size: 1.8rem; margin-bottom: 5px; color: #333; }
.subtitle { font-size: 0.85rem; color: #747474; margin-bottom: 20px; }
.description { font-size: 0.95rem; color: #666; text-align: justify; }
  

.area-intro {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;  
    max-width: 1000px;   
    margin: 100px auto 20px auto;    
    padding: 20px;     
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    box-sizing: border-box;
    width: 90%;           
}

input[name="slider"] {
  display: none;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden; 
  border-radius: 15px;
}
 
.slides {
  display: flex;
  width: 400%; 
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);  
}

.slide-item {
  width: 25%;  
  position: relative;
}

.slide-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.area-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 235, 121, 0.945);  
  color: #333333;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  z-index: 3;
  letter-spacing: 1px;
}
 
#slide1:checked ~ .slider-container .slides {
  transform: translateX(0%);
} 
#slide2:checked ~ .slider-container .slides {
  transform: translateX(-25%);
} 
#slide3:checked ~ .slider-container .slides {
  transform: translateX(-50%);
} 
#slide4:checked ~ .slider-container .slides {
  transform: translateX(-75%);
}
 
#slide1:checked ~ .dots #dot1,
#slide2:checked ~ .dots #dot2,
#slide3:checked ~ .dots #dot3,
#slide4:checked ~ .dots #dot4 {
  background-color: #a8e6cf;
}
 
.slides {
  display: flex;
  width: 400%;
  transition: transform 0.4s ease-out; 
  cursor: grab;  
  touch-action: pan-y;  
}

.slides:active {
  cursor: grabbing;
}
 
.slide-item img {
  user-select: none;
  -webkit-user-drag: none;
}
.dots {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #a8e6cf;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.content-box {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff; 
    background-image:  
        radial-gradient(
            circle at 0% 0%, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 0.7) 50%, 
            rgba(255, 255, 255, 1) 100%
        ), 
        url('https://biwaichi.bike/.assets/tour4.png'); 
    background-repeat: no-repeat, no-repeat; 
    background-position: center, left top; 
    background-size: 100% 100%, 50% 60%; 
 }
@media (max-width: 767px) {
    .content-box {
      padding:2px;
      background-size: 100% 100%, 80% 50%;
    }
    .container {
     padding: 2px; 
}
}

@media (min-width: 1024px) {
  .container {
    flex-direction: row;  
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding:  40px;
    gap: 60px;
  }

  .content-box {
    flex: 1;  
  }

  .slider-wrapper {
    flex: 1.2; 
  }
 
  .area-nav-overlay {
    display: none; 
  }

  .title { font-size: 2.0rem; }

 .area-intro { 
       max-width: 1000px;
        margin: 100px auto 40px auto;
        padding: 20px;
     }
.description { font-size: 0.85rem; color: #666; text-align: justify; }
}

  
html {
    scroll-behavior: smooth;
}

.map-navigation {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;  
    max-width: 1000px;   
    margin: 20px auto;    
    padding: 40px 20px;     
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    box-sizing: border-box;
    width: 90%;   
} 

.section-title-center {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: bold;
}

.map-interaction-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 
.top-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom:20px;
}

.nav-tab {
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #ccc;
    transition: all 0.3s ease;
}

 
.tab-konan { color: #80ccdf; border-color: #80ccdf; }
.tab-koto { color: #f3abc3; border-color: #f3abc3; }
.tab-kohoku { color: #8fcca0; border-color: #8fcca0; }
.tab-kosei { color: #ef8d55; border-color: #ef8d55; }

.nav-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

 
.map-container { 
    position: relative; 
    max-width: 450px;  
    width: 100%; 
    margin: 0 auto;
}

.map-base { 
    width: 90%; 
    height: auto; 
    display: block; 
} 
 
.spot-btn {
    position: absolute;
    padding: 6px 12px;
    border-radius: 20px;
    border: 2px solid #fff;
    font-weight: bold;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.btn-kosei { background: #ef8d55; color: #fff; top: 33%; left: 28%; }
.btn-kohoku { background: #8fcca0; color: #fff; top: 25%; left: 80%; }
.btn-koto { background: #f3abc3; color: #fff; top: 61%; left: 82%; }
.btn-konan { background: #80ccdf; color: #fff; top: 85%; left: 29%; }
 
.spot-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 10;
    box-shadow: 0 0 15px rgba(255,255,255,0.8);
}
 
@media (min-width: 1024px) {
    .section-title-center {
        font-size: 2rem;
    }
    .top-nav-tabs {
        gap: 20px;
    }
    .nav-tab {
        padding: 10px 30px;
        font-size: 1rem;
    }
.map-navigation { 
    max-width: 1000px;   
    margin: 40px auto;       
    padding: 40px;  
} 
}
 
/* ４つエリア　*/
.area-main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.guide-container {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;  
    max-width: 1000px;   
    margin: 20px auto;    
    padding:  20px;     
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    box-sizing: border-box;
    width: 90%;   
}
 
  
.area-main-img img, .specialty-img img {
    width: 100%;
    border-radius: 15px;
    display: block;
}
 
/* 基础样式：定义形状、边距、字体等共有属性 */
.area-outline-tag {
    display: inline-block;
    border: 2px solid #80ccdf; /* 默认颜色 */
    color: #80ccdf;            /* 默认颜色 */
    padding: 5px 25px;
    border-radius: 25px;
    font-weight: bold;
    margin: 20px 0;
    background-color: transparent;  
}
 
.tag-konan { border-color: #80ccdf;color: #80ccdf;}
.tag-koto { border-color: #f3abc3;color: #f3abc3;}
.tag-kohoku { border-color: #8fcca0;color: #8fcca0;}
.tag-kosei { border-color: #ef8d55;color: #ef8d55;}

.solid-tag {
    background-color: #80ccdf;
    color: white;
    display: inline-block;
    padding: 3px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
 
.main-desc { font-size: 0.95rem; line-height: 1.8; margin-bottom: 20px; }
.concept-line { font-weight: bold; margin-top: 45px; margin-bottom: 15px; }

.blue-dot {
    margin-right: 8px;
    font-size: 1rem; 
    display: inline-block;
    vertical-align: middle;
}

.dot-konan {color: #80ccdf;}
.dot-koto {color: #f3abc3;}
.dot-kohoku {color: #8fcca0;}
.dot-kosei {color: #ef8d55;}

.hashtag-container {
    display: flex; 
    flex-wrap: wrap;
    gap: 8px;
}

.hashtag {
    display: inline-block;
    border: 1.5px solid #ccc; 
    color: #666;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.hash-konan { border-color: #80ccdf;}
.hash-koto { border-color: #f3abc3;}
.hash-kohoku { border-color: #8fcca0;}
.hash-kosei { border-color: #ef8d55;}
.hashtag:hover {opacity: 0.8;background-color: rgba(0,0,0,0.02);}
 
.section-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 30px 0;
}
  
.map-section {
    display: flex;
    align-items: flex-start; 
    gap: 15px;
    margin-bottom: 20px;
    flex-direction: column-reverse;
}

.map-image-wrapper {
    flex: 0 0 50%;  
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 10px;
    box-sizing: border-box;
}

.map-image-wrapper img {
    width: 100%;
    display: block;
}

.map-text-content {
    flex: 1;  
}

.map-text-content p {
    font-size: 0.85rem;
    line-height: 1.6; 
    margin-top: 10px;
    text-align: justify;
}
 
.specialty-section {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex-direction:column;
}

.specialty-text-content {
    flex: 1;
}

.specialty-img {
    flex: 0 0 50%;
}

.specialty-img img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.specialty-title {
    font-weight: bold;
    font-size: 1.15rem;
    margin: 10px 0;
}

.specialty-desc {
    font-size: 0.85rem;
    line-height: 1.6;
}
 
.solid-tag {
    color: white;
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 5px;
}
 
.solid-konan {background-color: #80ccdf;}
.solid-koto {background-color: #f3abc3;}
.solid-kohoku {background-color: #8fcca0;}
.solid-kosei {background-color: #ef8d55;}

.section-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 25px 0;
}

@media (min-width: 1024px) { 
.area-main-content {
        flex-direction: row;      
        align-items: flex-start; 
        gap: 50px;               
    }
    .map-info-flex {
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .map-visual-box { flex: 1; }
    .map-desc-box { flex: 1.5; }
 
    .specialty-flex {
        display: flex;
        align-items: center;
        gap: 40px;
        flex-direction: row;  
    }
    .specialty-content { flex: 1.5; }
    .specialty-image { flex: 1; }
    .specialty-image img { margin-top: 0; }
    
    .area-text { font-size: 1.1rem; }

    .guide-container {
        max-width: 1000px;
        margin: 40px auto;
        padding: 40px;
        width: 100%;
    }
   .area-top-flex {
        flex-direction: row;    
        align-items: flex-start;  
        gap: 40px;          
        text-align: left;     
    }
    
   .area-main-img {
        flex: 1;             
    }
    .area-info-group {
        flex: 1;                 
        text-align: left;
    }
    .main-desc {
        font-size: 0.9rem;
        margin-top: 10px;
    }
    
    .area-outline-tag {
        margin-top: 0;  
    }
 
    .area-bottom-flex {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }
    .area-outline-tag {
        margin-top: 0 !important;  
    }
 
    .map-section, .specialty-section {
        flex: 1;
        margin-bottom: 0;
        display: flex;  
        gap: 20px;
    }
 
    .map-image-wrapper, .specialty-img {
        flex: 0 0 45%;  
    }

    .map-text-content, .specialty-text-content {
        flex: 1;
    }
 
    .map-text-content p, .specialty-desc {
        font-size: 0.7rem; 
        line-height: 1.7;
    }

    .specialty-title {
        font-size: 1rem;
        margin-top: 5px;
    }
 
    .section-divider {
        margin: 40px 0;
    }
   .hashtag {  
    font-size: 0.75rem;
    }
}
 

.full-width-btn {
    display: block;  
    width: 92%;      
    max-width: 1000px; 
    margin: 10px auto;  
    padding: 12px 0;
    text-align: center;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; 
    transition: opacity 0.3s ease, transform 0.2s ease;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.full-width-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
 
.bg-konan { background-color: #80ccdf; }  
.bg-koto  { background-color: #f3abc3; }  
.bg-kohoku { background-color: #8fcca0; }  
.bg-kosei  { background-color: #ef8d55; }  
 
@media (min-width: 768px) {
    .full-width-btn {
        width: 100%; 
        padding: 15px 0;
    }
}




  /*-----------------full-background------------*/
.full-background {
  position: fixed;
  left: 0;
  bottom: 0;    
  width: 100%;
  height: 100%;  
  background-image: url('https://oportable.jp/.assets/bg2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}