@charset "utf-8";

/* =========================================================
   Public Site Styles - しまねの郷づくり応援サイト風
========================================================= */

/* Reset and Base Styles
--------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}

#main-container {
  position: relative;
  z-index: 1;
}

/* Header Styles
--------------------------------------------------------- */
.site-header {
  background-color: #2c5aa0;
  color: white;
  padding: 10px 0;
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .site-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  
  .header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  
  .font-size-controls,
  .background-controls {
    display: flex;
    gap: 5px;
  }
  
  .control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    
    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    
    &.active {
      background: rgba(255, 255, 255, 0.4);
    }
  }
}

/* Navigation Styles
--------------------------------------------------------- */
.site-navigation {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  
  .nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      margin-right: 30px;
      
      a {
        display: block;
        padding: 15px 0;
        color: #333;
        text-decoration: none;
        font-weight: 500;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        
        &:hover {
          color: #2c5aa0;
          border-bottom-color: #2c5aa0;
        }
      }
    }
  }
}

/* Main Content Area
--------------------------------------------------------- */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Area Information Header
--------------------------------------------------------- */
.area-header {
  background: linear-gradient(135deg, #2c5aa0 0%, #1e3d6f 100%);
  color: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  text-align: center;
  
  .area-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 10px 0;
  }
  
  .area-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 20px 0;
  }
  
  .area-type {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .my-area-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    
    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

/* Tab Navigation
--------------------------------------------------------- */
/* 
.tab-navigation {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  
  .tab-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
    
    .tab-item {
      flex: 1;
      
      .tab-link {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #666;
        text-align: center;
        font-weight: 500;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        background: #f8f9fa;
        
        &:hover {
          color: #2c5aa0;
          background: #e9ecef;
        }
        
        &.active {
          color: #2c5aa0;
          background: white;
          border-bottom-color: #2c5aa0;
        }
      }
    }
  }
}
*/

/* Tab Content
--------------------------------------------------------- */
/*
.tab-content {
  
  .tab-panel {
    display: none;
    padding: 30px;
    
    &.active {
      display: block;
    }
  }
}
*/

/* Data Tables
--------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
  }
  
  th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
  }
  
  tr:hover {
    background: #f8f9fa;
  }
  
  .number-cell {
    text-align: right;
    font-family: "Courier New", monospace;
  }
}

/* Charts Container
--------------------------------------------------------- */
.chart-container {
  margin: 30px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .chart-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }
  
  .chart-wrapper {
    position: relative;
    height: 400px;
    background: white;
    border-radius: 5px;
    padding: 20px;
  }
}

/* Comparison Section
--------------------------------------------------------- */
.comparison-section {
  margin: 30px 0;
  
  .comparison-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }
  
  .comparison-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    
    .comparison-btn {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &:hover {
        background: #e9ecef;
      }
      
      &.active {
        background: #2c5aa0;
        color: white;
        border-color: #2c5aa0;
      }
    }
  }
}

/* Responsive Design
--------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header .header-content {
    flex-direction: column;
    gap: 10px;
  }
  
  .site-navigation .nav-menu {
    flex-direction: column;
    
    li {
      margin-right: 0;
      border-bottom: 1px solid #dee2e6;
      
      a {
        padding: 12px 0;
      }
    }
  }
  
  .tab-navigation .tab-list {
    flex-direction: column;
    
    .tab-item .tab-link {
      border-bottom: 1px solid #dee2e6;
      border-right: none;
      
      &.active {
        border-bottom-color: #dee2e6;
        border-left: 3px solid #2c5aa0;
      }
    }
  }
  
  .area-header .area-title {
    font-size: 24px;
  }
  
  .data-table {
    font-size: 12px;
    
    th, td {
      padding: 8px 10px;
    }
  }
  
  .comparison-options {
    flex-direction: column;
    
    .comparison-btn {
      text-align: center;
    }
  }
}

/* Accessibility Improvements
--------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for keyboard navigation */
.tab-link:focus,
.control-btn:focus,
.comparison-btn:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #2c5aa0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* form */
.surveyForm {

  & .question {
    margin-bottom: 30px;
  }
  & input,
    textarea {
    padding: 8px 32px 8px 12px;
    border: 1px solid #CCC;
    border-radius: 5px;
    width: 100%;
    max-width: ;
  }
  & .question .note {
    color: red;
    margin-left: 10px;
  }
  & .submit {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  & label {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  & .last_name label,
    .first_name label {
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    font-size: 14px;
  }
  & .last_name input,
    .first_name input {
    margin-left: 10px;
    max-width: 260px;
  }

  & .submit input {
    padding: 12px 48px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    background-color: #FFE44F;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-block;
    max-width: 200px;
  }
  & .submit input:hover {
    background-color: #F0C732;
  }
  & .last_name {
    margin-right: 50px;
  }
  & .last_name,
    .first_name {
    display: inline-block;
  }
  & .errorExplanation {
    background-color: #fff;
    border: 1px solid #BEBEBE;
    padding: 28px;
    margin-bottom: 40px;
  }
  & .errorExplanation h2 {
    color: #FF6A30;
    font-size: 22px;
  }
  & .errorExplanation p {
    margin-bottom: 12px;
  }
  & .errorExplanation ul {
    padding-left: 1.3em;
    margin-bottom: 0;
  }
  & .errorExplanation ul li {
    position: relative;
  }
  & .errorExplanation ul li::before {
    content: "※";
    position: absolute;
    top: 1px;
    left: -1.2em;
  }

}

#page-inquiry-form-confirmAnswers .submit input:last-child {
  background-color: #999;
  transition: .4s;
}
#page-inquiry-form-confirmAnswers .submit input:last-child:hover {
  background-color: #999;
  opacity: .6;
}

.back {
  text-align: center;
  margin-top: 60px;

  & a {
    background: #000;
    border-radius: 50px;
    color: #FFE44F;
    display: block;
    padding: 20px;
    position: relative;
    text-align: center;
    transition: .4s;
    max-width: 320px;
    margin-inline: auto;
  }
  & a:hover {
    background-color: #FFE44F;
    color: #000;
    text-decoration: none;
  }
}


/* その他の人口情報 */
.area-sec.other-pop {
  background-image: linear-gradient(#ffef98, #ffe44f);
  border-radius: 16px;
  padding: 30px 40px;
  position: relative;
  box-shadow: 0 0 9px rgba(0,0,0,0.2);
  max-width: 1120px;
  margin: 50px auto 0;
  width: 90%;

  & .area-sec-head {
    font-size: 24px;
    margin-bottom: 26px;
  }
  & .area-sec-head span.other-txt {
    font-size: 16px;
    margin-left: 24px;
  }
  & .more-btn-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px 4%;
    flex-wrap: wrap;
  }
  & .more-btn {
    width: 48%;
    & a {
      background: #000;
      border-radius: 50px;
      color: #FFE44F;
      display: block;
      padding: 20px;
      position: relative;
      text-align: center;
      transition: .4s;
      max-width: none;
      margin-inline: auto;
      border: 1px solid #000;
    }
    & a::after {
      content: "";
      position: absolute;
      top: 0px;
      bottom: 0px;
      right: 27px;
      width: 9px;
      height: 9px;
      margin: auto;
      border-top: 2px solid rgb(255, 228, 79);
      border-right: 2px solid rgb(255, 228, 79);
      transform: rotate(45deg);
      box-sizing: border-box;
    }
    & a:hover {
      background-color: rgb(255, 228, 79);
      color: rgb(0, 0, 0);
      text-decoration: none;
    }
    & a:hover::after {
      border-top: 2px solid rgb(0, 0, 0);
      border-right: 2px solid rgb(0, 0, 0);
    }
  }
}


@media screen and (max-width: 1000px) {
  .area-sec.other-pop {
    & .more-btn-wrap {
      flex-direction: row;
    }
    & .area-sec-head span.other-txt {
      display: block;
      margin-left: 0;
      margin-top: 5px;
    }
  }
}


@media screen and (max-width: 900px) {
  .area-sec.other-pop {
    & .more-btn {
      width: 100%;
    }
    & .more-btn-wrap {
      flex-direction: column;
    }
  }
}


@media screen and (max-width: 600px) {
  .surveyForm {
    & .last_name {
      margin-right: 0;
    }
  }
  .area-sec.other-pop {
    padding: 30px 30px;
    & .more-btn {
      & a {
        padding: 20px 50px 20px 30px;
      }
    }
  }
}




/* 印刷用CSS */
@media print {
  html, body {
    height: auto;
  }
  .header {
    background-image: none !important;
  }
  .right-area,
    #seachResult,
    #breadcrumb,
  .footer {
    display: none !important;
  }
  .top-main-slider {
    width: 300px !important;
  }
  .top-main-content {
    width: 300px !important;
  }
  .page-area {
    background-image: none !important;
    &::before {
      background-image: none !important;
    }
    &::after {
      background-image: none !important;
    }
  }
  .option_link li {
    width: 30.5% !important;
  }
  .myarea,
  .how-to {
    display: none !important;
  }
  .graph-box canvas {
    width: 100% !important;
    height: 100% !important;
  }
  .area-sec.other-pop {
    display: none;
  }
  .area-wrap .area-cont-tab-block {
    display: flex !important;
    width: 100% !important;
  }
  .tab-item.tab {
    display: inline-block;
    width: 25% !important;
    page-break-inside: avoid;
  }
  .links-cont {
    & .accordion-content-block {
      width: 100% !important;
    }
    & .area-links {
      width: 22.6% !important;
    }
  }
  .lower-main-wrap {
    & .lower-main-cont-head {
      font-size: 28px !important;
    }
    & .lower-main-cont {
      padding-right: 0 !important;
    }
  }
  .about-cont-wrap {
    & .lower-main-cont::after {
      width: 100px !important;
      height: 120px !important;
      top: -120px !important;
      right: 0 !important;
    }
  }
  .guide-cont {
    & .lower-title::after {
      right: 0 !important;
      width: 123px !important;
      height: 106px !important;
    }
  }
  .lower-voice {
    & .lower-voice-box {
      font-size: 16px !important;
      padding: 54px 18px 52px 18px !important;
    }
  }
  .lower-step-wrap {
    & .accordion-title {
      padding: 50px 190px 30px 57px !important;
    }
    & .accordion-title {
      gap: 50px !important;
    }
    & .step01 .accordion-title::before {
      width: 78px !important;
      height: 60px !important;
    }
    & .step02 .accordion-title::before {
      width: 55px !important;
      height: 62px !important;
    }
    & .step03 .accordion-title::before {
      width: 66px !important;
      height: 67px !important;
    }
    & .accordion-title-cont {
      gap: 4px !important;
      flex-direction: column !important;
    }
    & .accordion-content::after {
      width: 126px !important;
      height: 108px !important;
    }
  }
  .step-cont-wrap {
    & .about-list li .circle {
      height: 180px !important;
      width: 180px !important;
      padding-bottom: 24px !important;
    }
  }
  .search-wrap h1 {
    margin-bottom: 10px !important;
  }
  .search-results {
    & .area-item {
      width: 100% !important;
    }
  }
  .area-wrap {
    & .area-head-cont-block {
      flex-direction: column !important;
    }
    & .more-btn-area {
      flex-direction: column !important;
    }
  }
  .bar-graph-area canvas {
    width: 100% !important;
    height: 100% !important;
  }
  .tab-list.area-cont-tab-block {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    & .tab-item {
      margin-right: 10px !important;
      width: 24% !important;
      &:last-child {
        margin-right: 0 !important;
      }
    }
    & .tab a {
      font-size: 15px !important;
      min-width: auto !important;
    }
  }

  #tabpy01 canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .bubble-chart-form {
    flex-direction: row !important;
  }

  .area-wrap {
    & .graph-box {
      min-height: auto !important;
    }
  }

  .area-cont-block-child .graph-box canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .more-btn {
    width: 256px !important;
  }

  .simulation-wrap {
    & .please {
      bottom: -45px !important;
    }
    & .simulation-cont-block .simulation-input-box input {
      display: inline-block !important;
      text-align: left !important;
      height: 60px !important;
    }
  }

  /* .top-main {
    display: block !important;
  } */

  .top-main-slider {
    width: 360px !important;
    margin-inline: auto !important;
    & img {
      width: 360px !important;
    }
  }
  .top-main-txt-p br {
    display: none !important;
  }
  .top-main-content {
    margin-inline: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    & .top-main-txt img {
      width: 450px !important;
    }
  }
  .top-main-txt-btn.more-btn {
    margin: 0 auto !important;
  }  
  #modelSlider {
    height: 400px !important;
  }
  .model-slider-photo {
    & img {
      width: 600px !important;
    }
  }
  .top-model-wrap {
    & .top-model-wrap-bgbtm {
      bottom: 150px !important;
    }
  }

  .top-news-wrap {
    page-break-after: always !important;
  }



  #top-map {
    /* display: none !important; */

    & .top-map-area {
      backdrop-filter: initial;
      background-color: #fff !important;
      width: 700px !important;
    }

    & .top-map-area-flex {
      display: block !important;
      width: 700px !important;
    }

    & .top-map-area-cont {
      margin-bottom: 40px !important;
      width: 600px !important;
    }

    & .top-map-area-map {
      width: 600px !important;
    }

    & .top-map svg {
      width: 400px !important;
      margin-inline: auto !important;
      height: auto !important;
    }
  }

}