body {
  background-color: #fff;
}

/*--------------------------------------------------------------
  マイスポット
--------------------------------------------------------------*/

.modal {
  display         : none; /* Hidden by default */
  position        : fixed; /* Stay in place */
  z-index         : 1; /* Sit on top */
  padding-top     : 200px; /* Location of the box */
  left            : 0;
  top             : 0;
  width           : 100%; /* Full width */
  height          : 100%; /* Full height */
  overflow        : auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  font-family     : ヒラギノ角ゴシック, W5;
  font-size       : 16px;
  background-color: #0000009A;
  margin          : auto;
  padding         : 17px;
  border          : 1.5px solid #000;
  width           : 30%;
  border-radius   : 10px;
  color           : #fff;
  text-align      : center;
}

@media screen and (max-width:480px){
  /* スマホサイズはこちらを読み込み */
  .modal-content{
      width: 80%;
  }
}

.modal-body p {
  margin: 0;
}
.my_spot_point {
  width           : 10px;
  height          : 10px;
  border-radius   : 100%;
  background-color: #000;
  position        : relative;
  top             : 4px;
  left            : 6px;
  z-index         : 1;
}

/*--------------------------------------------------------------
  タイトルセクション
--------------------------------------------------------------*/

.detail-v2 {
  a:link, a:visited {
    color: #000;
  }
}

.detail-v2__header {
  padding: 0px 10px;
}

.detail-v2-header__top {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.title-box__title {
  font-size  : 24px;
  font-weight: bold;
  line-height: 1.2;
  margin     : 0px 2px 5px 0;
}

.btns__my-spot-btn {
  width  : 80px;
  display: block;
  margin : auto;
}

.btns__myspot-btn-box {
  display        : flex;
  justify-content: end;
  margin-top     : 5px;
}

.btns__more-info-btn {
  display        : block;
  width          : 80px;
  height         : 12px;
  color          : black!important;
  padding        : 5px;
  border         : 1px solid #66645D;
  border-radius  : 5px;
  text-decoration: none;
  font-size      : 10px;
  text-align     : center;
  margin-top     : 10px;
  font-weight    : bold;
}

.address-box {
  display    : flex;
  align-items: center;
}

.address-box__address {
  margin-right: 5px;
}

.address-box__map-icon {
  margin-right    : 9px;
  border-radius   : 13px;
  color           : #000 !important;
  background-color: #E9E4D4;
  padding         : 1px 7px;
  font-size       : 11px;
}

.detail-v2.pc_weather_detail.clearfix {
  background-color: #FFFFFF;
}

.detail-v2-header__tag {
  margin-top: 0px;
}

.detail-v2-header__tag a {
  font-size    : 11px;
  border       : 1px #E3E3E3 solid;
  border-radius: 5px;
  padding      : 1px 5px;
  color        : #000;
}

.detail-v2-header__warning {
  margin    : 0px 0 10px 0;
  padding-left:10px;
  padding-right:80px;
  font-size : 12px;
}

.detail-v2-header__warning span {
  padding      : 3px 0;
  border-radius: 2px;
}

.detail-v2-header__warning-text {
  width     : 64px;
  height    : 17px;
  display   : inline-block;
  text-align: center;
}

.detail-v2-header__warning-text.special_alert {
  background-color: #DD0E1A;
}

.detail-v2-header__warning-text.alert {
  background-color: #F5E56B;
}

.detail-v2-header__warning-text.warning {
  background-color: #F6AD49;
}

.detail-v2-header__update-time {
  text-align    : end;
  color         : #535353;
  margin-top    : -1em;
  position      : relative;
  /* z-index       : 2; */
}

.detail-v2-header__update-time span {
  /* background : #fff; */
  padding-top: 5px;
  /* outline    : 3px solid #fff; */
}

/*--------------------------------------------------------------
  3日間の天気
--------------------------------------------------------------*/

.detail-v2__roughly-weathers {
  display    : flex;
  column-gap : 1rem;
  margin     : 0px;
  font-weight: bold;
}

.detail-v2__roughly-weather div {
  background-color: #E3E3E3;
}

.detail-v2__near-info {
  margin-top: 6px;
}

.roughly-weather {
  cursor          : pointer;
  background-color: #E5EAE8;
  padding         : 10px 15px;
  border-radius   : 10px;
  flex-direction  : column;
  justify-content : space-between; /* 最初と最後の子要素が上下端に配置される */
}

h3.title_roughly-weather{
  margin   : 0;
  padding  : 0;
  font-size: 14px;
}

.roughly-weather:first-child {
  margin-left: 10px;
}

.roughly-weather:last-child {
  margin-right: 10px;
}

.roughly-weather__date {
  font-weight: bold;
}

.roughly-weather__date-sturday {
  color: #3976F5;
}

.roughly-weather__date-sunday {
  color: #FF0000;
}

.roughly-weather__center.roughly-weather-center {
  display    : flex;
  align-items: center;
  margin     : 1.5px 0;
  column-gap : 1rem;
}

.roughly-weather-center__icon {
  width         : 44px;
  height        : 44px;
  vertical-align: top;
}

p.roughly-weather-center__icon-text {
  margin    : 0;
  font-size : 12px;
  text-align: center;
}

.roughly-weather__center.roughly-weather-img {
  width          : 113px;
  text-align     : center;
  display        : flex;
  align-items    : center;
  column-gap     : 5px;
  flex-wrap      : nowrap;
  justify-content: center;
}

.roughly-weather-center__arrow {
  color      : #A3A3A3;
  width      : 15px;
  height     : 13px;
  display    : inline-block;
  font-weight: bold;
}

.title_roughly-weather {
  margin-bottom: 5px;
}

.temps__high-temp {
  color      : #FF0000;
  margin     : 0;
  white-space: nowrap;
}

.temps__low-temp {
  color      : #0052ED;
  margin     : 0;
  white-space: nowrap;
}

.sunset_sunrise {
  font-size: 10px;
  font-weight: normal;
  color: #333;
  line-height: 1.3em;
}

/*--------------------------------------------------------------
  1時間、3時間、14日間の天気
--------------------------------------------------------------*/

detail-v2__detailed-weathers {
  height: 100px;

}

.d-w__large-tabs {
  display        : flex;
  justify-content: space-between;
  border         : 1px solid #ccc;
  border-radius  : 25px;
  padding        : 3px;
  margin         : 10px 20px;
}

.l-t__tab {
  flex      : 1;
  text-align: center;
  padding   : 1px 0;
  cursor    : pointer;
  position  : relative;
  transition: color 0.3s, background 0.3s;
  border-radius: 20px;
}

.l-t__tab.active {
  color        : white;
  background   : #999;
}

.l-t__tab.active::after {
  content     : '';
  position    : absolute;
  top         : 23px; /* Adjust as needed */
  left        : 50%;
  transform   : translateX(-50%);
  border-left : 10px solid transparent;
  border-right: 10px solid transparent;
  border-top  : 10px solid #999;
}

.d-w__small-tabs{
  display: flex;
  height : 21px;
}

.s-t__tab {
  flex      : 1;
  text-align: center;
  cursor    : pointer;
}

.s-t__tab.active {
  text-decoration          :underline;
  text-underline-offset    : 7px;
  text-decoration-thickness: 2px;
  font-weight              : bold;
}

.s-t__tab.Sat {
  color                : #3976F5;
  text-decoration-color: #3976F5;
}

.s-t__tab.Sun {
  color                : #FC0301;
  text-decoration-color: #FC0301;
}

.d-w__table-lap {
  --border-color            : #e0e0e5;
  --stripe-bg-color         : #e5f6ff;
  --header-bg-color         : #fff;
  overflow-x                : scroll;
  border                    : 1px solid var(--border-color);
  border-right              : none;
  margin-top                : 8px;
  -webkit-overflow-scrolling: touch;
}

.d-w__table-lap table {
  border-collapse: collapse;
  width          : 100%;
}

.d-w__table-lap tr:nth-of-type(2n+4) {
  background: #E5EAE8;
}

.d-w__table-lap th,
.d-w__table-lap td {
  padding   : 4px 8px;
  text-align: center;
}

.d-w__table-lap th {
  position    : sticky;
  left        : 0;
  background  : var(--header-bg-color);
  border-right: 1px solid var(--border-color);
}

.d-w__table-lap td {
  white-space: nowrap; /* 任意 */
}

.d-w-t th {
  font-weight: normal;
  white-space: nowrap;
}

.d-w-t__day td {
  font-weight: bold;
  text-align : left;
}

.d-w-t__day td.Sat {
  color: #3976F5;
}

.d-w-t__day td.Sun {
  color: #FC0301;
}

.d-w-t__weather {
  position  : relative;
  margin-top: -5px;
}

.d-w-t__time th,
.d-w-t__time td {
  padding-top   : 0;
  padding-bottom: 0
}

.d-w-t__weather td {
  padding-top: 0;
}

.d-w-t__weather p {
  margin: -8px 0 0 0;
}

.detail-v2__link-list-wrapper {
  margin          : 10px 0px;
  background-color: #dcdddd;
  box-shadow      : 0 -10px 0 white, 0 10px 0 white;
}

.detail-v2__link-list {
  padding        : 5px 75px;
  display        : flex;
  justify-content: center;
}

.detail-v2__link-list-box img {
  height: 25px;
  cursor: pointer;
}

.detail-v2__link-list-box p {
  color      : #393939;
  margin     : 2px 0 0 0;
  white-space: nowrap;
  padding    : 6px 15px;
}

.detail-v2__trending-spots.trending-spots-v2 {
  margin-top: 15px;
  padding   : 0 5px;
}

.trending-spots-v2__header {
  display        : flex;
  justify-content: space-between;
  align-items    : end;
  margin         : 3px 0;
}

.trending-spots-v2__header p {
  font-size  : 18px;
  font-weight: bold;
  margin     : 0;
}

.trending-spots-v2__header a {
  color: #1C5190;
}

.trending-spots-v2__courses {
  display        : flex;
  justify-content: space-between;
  font-size      : 0;
  gap            : 13px;
  overflow-x     : auto;
  white-space    : nowrap;
}

.trending-spots-v2__courses a {
  display: inline-block;
  flex   : 0 0 auto;
  width  : 125px;
}

.trending-spots-v2__courses img {
  border-radius: 5px 5px 0 0;
  max-width    : 100%;
}

.trending-spots-v2__courses div {
  border-radius   : 0 0 5px 5px;
  background-color: #F0F0F0;
  font-size       : 12px;
  height          : 40px;
  padding         : 5px;
  color           : #000000;
  white-space     : normal;
}

.detail-v2__search {
  display      : flex;
  align-items  : center;
  border       : 1px solid #ccc;
  border-radius: 22px;
  padding      : 5px 10px;
  margin       : 15px 70px;
  height       : 31px;
}

.detail-v2__search input {
  border      : none;
  outline     : none;
  flex        : 1;
  padding-left: 10px;
  font-size   : 16px;
}

.detail-v2__search .icon {
  width          : 18px;
  height         : 15px;
  background     : url('/img/search_icon.svg') no-repeat center center;
  background-size: contain;
}

.triangle3 {
  width       : 0;
  height      : 0;
  border-left : 7px solid transparent;
  border-right: 7px solid transparent;
  border-top  : 7px solid #535353;
}

.panel {
  padding         : 0 18px;
  display         : none;
  background-color: white;
  overflow        : hidden;
}

.panel a {
  color                : #666;
  margin               : 1px 5px;
  display              : inline-block;
  text-decoration      : underline #666;
  text-underline-offset:4px;
}

#all__area__weather {
  border: 1px solid #ccc;
}

#all__area__weather {
  .all__area__weather-map {
    background         : url('/img/japan_map.svg') no-repeat;
    height             : 850px;
    background-size    : 85%;
    margin-top         : 2rem;
    background-position: 70% 20%;
  }

  .all__area__weather-choice {
    border-bottom: 3px solid #E5F6FF;
  }

  .all__area__weather-choice p {
    margin: 0;
  }

  .all__area__weather-choice {
    .all__area__weather-treasure-spot {
      white-space: nowrap;
    }
  }

  .all__area__weather-main-box {
    font-size  : 20px;
    font-weight: bold;
    width      : 30%;
    text-align : center;
    display    : inline-block;
  }

  .all__area__weather-tresure-spot-box{
    font-size: 18px;
    width    : 70%;
    display  : inline-block;
  }

  .all__area__weather-choice {
    display: flex;
  }

  .all__area__weather-choice {
    .choosing {
      background-color: #4991F5;
      color           : #FFFFFF;
    }

    & div {
        font-weight     : bold;
        padding         : 6px 0;
        background-color: #fff;
        color           : #000;
        cursor          : pointer;
        font-size       : 13px;
    }
  }

  .all__area__weather__date {
    .choosing {
      border-bottom: 4px solid #9DDDFF;
      font-weight  : bold;
    }
  }

  .all__area__weather__date p {
    margin   : 0;
    font-size: 14px;
  }

  .all__area__weather__date {
    display        : flex;
    justify-content: space-around;
  }

  .all__area__weather__date div {
    font-size : 18px;
    width     : 33%;
    text-align: center;
    margin    : 0;
    padding   : 10px;
  }

  .all__area__weather-title {
    margin       : 0;
    font-weight  : bold;
    font-size    : 16px;
    margin-bottom: 5px;
    width        : 100%;
    text-align   : center;
  }

  .all__area__weather-box {
    text-align: center;
  }

  .all__area__weather-info-parts-tempreature-box {
    white-space: nowrap;
  }

  .all__area__weather-info-parts-tempreature-box span {
    font-size: 1rem;
  }

  .all__area__weather-info-parts-temperature-max {
    color      : #FA3638;
    font-weight: bold;
  }

  .all__area__weather-info-parts-temperature-min {
    color      : #3A76F5;
    font-weight: bold;
  }

  .all__area__weather-info-parts-temperature-middle {
    font-weight: bold;
  }

  .all__area__weather-east-group,
  .all__area__weather-west-group {
    position: relative;
  }

  .all__area__weather-area {
    position : absolute;
    font-size: 0px;
  }
}

.weather__in__choice__place {
  display        : flex;
  justify-content: center;
}

.weather__in__choice__place-text {
  color                    : #393939 !important;
  padding                  : 8.5px 0;
  display                  : inline-block;
  text-decoration          : underline !important;
  text-decoration-color    : #66645D !important;
  text-decoration-thickness: 2px !important;
}

/* ul.upperTabs 内のリンクに対するスタイル */
.detail-v2 ul.upperTabs a , .detail-v2 .amagumo_btn a , .detail-v2 .kaminari_btn a, .detail-v2 .how_to_use a {
  color: #FFFFFF;
}

.amagumo_tab_contents,
.kaminari_tab_contents,
.amedas_tab_contents,
.wavesimulator_tab_contents,
.wavesimulator_map {
  background-color: #dcdddd;
}

.jslider .jslider-scale ins {
  color: #393939 !important;
}

.detail-v2 .how_to_use a, .amagumo_table , .amagumo_radio label{
  color: #393939;
}

.wind_map_simu {
  background-color: #dcdddd;
}

.amedas_kazamuki_hanrei_wrapper {
  background-color: #dcdddd;
  padding         : 5px 0 30px 0;
}

.amagumo_map, .amagumo_map .contents {
  margin-bottom: 19px;
}

.wind_map_simu {
  padding: 25px 0 5px 0;
}

.amedas_kazamuki_hanrei,
.amedas_kion_hanrei,
.amedas_kousui_hanrei,
.amedas_nisshou_hanrei {
  padding: 0;
}

.imglayer .realcontents {
  margin-bottom: 11px;
}

.imglayer .weeklycontents {
  margin-bottom: 11px;
}

.imglayer .typhoon_figure .typhoon_image {
  margin-bottom: 19px;
}

ul.upperTabs {
  padding-top: 0 !important;
}

.amedas_tabs .amedas_tab {
  margin-top: 0 !important;
}

.imglayer .typhoonandweather_update_time
, #img-box p {
  padding: 0 0 2px 0 !important;
  height : 15px !important;
}

.amagumo_btns, .kaminari_btns {
  margin-top: 0 !important;
}

.kaminari_map#map_area {
  height       : 300px !important;
  margin-bottom: 25px;
}

.weather__choice__place {
  display        : flex;
  justify-content: center;
}

.weather__choice__place-text {
  color                    : #393939 !important;
  padding                  : 8.5px 0;
  display                  : inline-block;
  text-decoration          : underline !important;
  text-decoration-color    : #66645D !important;
  text-decoration-thickness: 2px !important;
}

.about_kousuiryo {
  display        : flex;
  flex-direction : row;
  justify-content: center;
  gap            : 10px;
  padding        : 12px 0px 12px 0px;
}

.tide_graph, .tide_header, .tide_header_left, .tide_header_right {
  padding-top: 0 !important;
}

div.page {
  margin-top: 15px !important;
}

@media screen and (max-width: 768px) {
  .detail-v2__roughly-weathers {
    overflow: auto;
  }

  .detail-v2__roughly-weathers::-webkit-scrollbar {
    display: none;
  }

  .detail-v2__link-list-box p {
    display   : block;
    width     : 100%;
    text-align: center;
    padding   : 0;
  }

  .detail-v2__link-list-box img {
    width: 27px;
    /* display: block; */
  }

  .detail-v2__link-list-box {
    display         : flex;
    flex-direction  : column;
    background-color: #ffffff;
    align-content   : center;
    justify-content : center;
    align-items     : center;
    padding         : 10px 5px 5px 5px;
    /* width        : 76px; */
    flex            : 1;
    flex-basis      : 0;
    /* height       : 35px; */
    border-radius   : 8px;
    max-width       : 25%;
  }

  .detail-v2__link-list-box * {
    font-size: 10px;
  }

  .detail-v2__link-list {
    padding        : 5px 10px;
    column-gap     : 5px;
    font-size      : 10px;
    display        : flex;
    justify-content: center;
  }

  .detail-v2__link-list .active {
    background-color: #fd7e39;
  }

  .detail-v2__link-list .active p {
    color: #ffffff;
  }

  .detail-v2__link-list .active img {
    filter: brightness(1000%);
  }

  .detail-v2__hours_link-list-wrapper {
    margin: 0 10px 10px 10px;
  }

  .detail-v2__hours_link-list {
    display        : flex;
    justify-content: center;
    column-gap     : 1rem;
  }

  .detail-v2__hours_link-list-box {
    border         : 1px solid #66645D;
    border-radius  : 25px;
    text-align     : center;
    height         : 20px;
    width          : 268px;
    flex-wrap      : wrap;
    align-content  : center;
    justify-content: center;
    align-items    : center;
  }

  .detail-v2__hours_link-list-box a {
    color: #393939;
  }

  .detail-v2__search {
    margin: 15px 10px;
  }

  .detail-v2__search input::placeholder {
    font-size: 12px;
    color    : #9D9D9D;
  }

  #all__area__weather {
    .all__area__weather-tresure-spot-box {
      font-size      : 18px;
      width          : 76%;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }

    .all__area__weather-map {
      background         : url('/img/japan_map.svg') no-repeat;
      height             : 340px;
      background-size    : 90%;
      background-position: 71% 19%;
      width              : 370px;
      margin             : 20px auto 0;
    }

    .all__area__weather-title {
      font-size    : 11px;
      margin-bottom: 0;
      color        : #000;
    }

    .all__area__weather-img {
      width : 30px;
      height: auto;
    }

    .all__area__weather-main-box {
      width          : 30%;
      display        : flex;
      align-items    : center;
      justify-content: center;
    }

    .all__area__weather-area {
      width        : 40px;
      height       : auto;
      font-size    : 0.5rem;
      background   : #F0F0F0;
      padding      : 8px 2px;
      align-content: center;
      border-radius: 6px;
      box-shadow   : 2px 2px 2px 1px #DFDFDF;
      line-height  : 1.1;
    }

    .all__area__weather-info-parts-temperature-max {
      color      : #FA3638;
      font-weight: bold;
      font-size  : 18px;
    }

    .hokkaido1 {
      top  : -15px;
      right: 92px;
    }

    .hokkaido2 {
      top  : 102px;
      right: 17px;
    }

    .tohoku {
      top  : 157px;
      right: 66px;
    }

    .hokuriku1 {
      top  : 64px;
      right: 140px;
    }

    .kanto {
      top  : 223px;
      right: 115px;
    }

    .hokuriku2 {
      top  : 92px;
      right: 196px;
    }

    .tokai {
      top : 228px;
      left: 158px;
    }

    .kansai {
      top : 230px;
      left: 107px;
    }

    .tyugoku {
      top : 101px;
      left: 64px;
    }

    .shikoku {
      top : 230px;
      left: 56px;
    }

    .kyusyu1 {
      top : 122px;
      left: 5px;
    }

    .kyusyu2 {
      top : 252px;
      left: 3px;
    }

    .okinawa {
      top : 16px;
      left: 14px;
    }
  }

  .weather__in__your__favorite__place {
    display        : flex;
    justify-content: center;
    font-weight    : bold;
  }

  .weather__in__your__favorite__place-text {
    color           : #535353 !important;
    text-align      : center;
    border-radius   : 5px;
    padding         : 3px 10px;
    margin          : 6px 10px;
    background-color: #E9E4D4;
    min-height      : 34px;
    width           : 65%;
    display         : grid;
    place-items     : center;
  }

  .weather__in__your__favorite__place-text__top-text {
    margin   : 0;
    font-size: 11px;
  }

  .weather__in__your__favorite__place-text__btm-text {
    margin   : 0;
    font-size: 13px;
  }

  .top__link-text {
    color      :#535353;
    font-size  : 16px;
    text-align : center;
    font-weight: bold;
  }

  #primary__footer {
    border-top: 1px solid #E5E5E5;
  }

  #primary__footer {
    .primary__footer-text-box {
      margin: 10px;
    }

    .primary-footer-text {
      text-align: center;
    }

    .primary__footer-link-box {
      display              : grid;
      grid-template-columns: 1fr 1fr 1fr;
      row-gap              : 13px;
      margin               : 18px 0;
    }

    .primary__footer-link-box {
      & a {
          color      : #3976F5;
          text-align : center;
          line-height: 1;
      }

      .primary__footer-center-link {
        border-right: 1px solid #535353;
        border-left : 1px solid #535353;
      }
    }

    .primary__footer-poricy-box {
      background     : #707070;
      margin-top     : 14px;
      padding        : 10px;
      display        : flex;
      justify-content: space-around;
      align-items    : center;
    }

    .primary__footer-poricy-box {
      & a {
          font-size: 12px;
      }

      & span {
          color: #fff;
      }
    }
  }
}

@media screen and (max-width:480px){
  /* スマホサイズはこちらを読み込み */
  .modal-content{
      width: 80%;
  }
}