@charset "UTF-8";

:root {
  --color-red: #c62828;
  --color-blue: #1971ff;
  --color-green: #00b06b;
  --color-lime: #74b816;
  --color-yellow: #f6aa00;
  --color-orange: #fc6a1d;
  --color-gold: #ff9142;
  --color-black: #333;
  --color-dark: #546E7A;
  --color-gray: #a9bdc4;
  --color-light: #ccc;
  --color-ash: #f2f2f2;
  --color-cobalt: #406FAF;
  --color-tv: #E3007F;
  --color-net: #0F8CD0;
  --color-phone: #16A94E;
  --color-mobile: #0BA8AB;
  --color-tablet: #DD4329;
  --color-elec: #F08C00;
  --color-gas: #0B308E;
  --color-home: #fc776b;
  --color-jcom: #e83416;
  --bg-red: #FFE5E5;
  --bg-orange: #fff0e8;
  --bg-dark: #9DB4BC;
  --bg-gray: #F2F2F2;
  --bg_light: #f8f8f8
}

.sp_only {
  display: block
}

.pc_only {
  display: none
}

.maintenance_outage .container {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px
}

.maintenance_outage .container .block {
  width: 100%;
  padding: 10px
}

.maintenance_outage #area_setting.container {
  padding-top: 0px;
  padding-bottom: 0px
}

.maintenance_outage #area_setting.container .block {
  padding-top: 60px;
  padding-bottom: 60px
}

.maintenance_outage .container#intro,
.maintenance_outage .container#info_detail {
  padding-top: 20px
}

.maintenance_outage .bg_gray {
  background-color: var(--bg-gray)
}

.maintenance_outage .flexbox {
  display: flex;
  flex-wrap: wrap
}

.maintenance_outage .flexbox.flex_nowrap {
  flex-wrap: nowrap
}

.maintenance_outage .flexbox.flex_jc_start {
  justify-content: flex-start
}

.maintenance_outage .flexbox.flex_jc_end {
  justify-content: flex-end
}

.maintenance_outage .flexbox.flex_jc_center {
  justify-content: center
}

.maintenance_outage .flexbox.flex_jc_betweeen {
  justify-content: space-between
}

.maintenance_outage .flexbox.flex_jc_around {
  justify-content: space-around
}

.maintenance_outage .flexbox.flex_jc_evenly {
  justify-content: space-evenly
}

.maintenance_outage .flexbox.flex_ai_start {
  align-items: flex-start
}

.maintenance_outage .flexbox.flex_ai_center {
  align-items: center
}

.maintenance_outage .flexbox.flex_ai_end {
  align-items: flex-end
}

.maintenance_outage .flexbox.gap5 {
  gap: 5px
}

.maintenance_outage .flexbox.gap10 {
  gap: 10px
}

.maintenance_outage .flexbox.gap15 {
  gap: 15px
}

.maintenance_outage .flexbox.gap20 {
  gap: 20px
}

.maintenance_outage .flexbox.gap25 {
  gap: 25px
}

.maintenance_outage .flexbox.gap30 {
  gap: 30px
}

.bg_area {
  background: url(../img/bg_map_japan.png) no-repeat center center/auto 180px
}

.outage_notHave_text {
  margin-bottom: 20px;
  font-size: 18px;
  text-align: center
}

.outage_notHave_text b {
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-ash)
}

.maintenance_outage .headline {
  font-weight: bold;
  line-height: 1.25;
  text-align: center
}

.maintenance_outage .headline.h1 {
  font-size: 24px;
  margin-bottom: 20px
}

.maintenance_outage .headline.h1.detail {
  font-size: 22px
}

.maintenance_outage .headline.h2 {
  font-size: 22px;
  margin-bottom: 20px
}

.maintenance_outage .headline.h3 {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 10px
}

.maintenance_outage .headline_desc {
  margin-top: -10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center
}

.maintenance_outage .menu_anchor {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center
}

.maintenance_outage .menu_anchor .menu_anchor_list {
  flex: 1;
  text-align: center;
  line-height: 1.25;
  border-left: 2px solid #eee
}

.maintenance_outage .menu_anchor .menu_anchor_list:last-child {
  border-right: 2px solid #eee
}

.maintenance_outage .menu_anchor .menu_anchor_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px 2px 14px;
  color: var(--color-black);
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}

.maintenance_outage .menu_anchor .menu_anchor_btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-jcom);
  border-right: 2px solid var(--color-jcom);
  transform: rotate(135deg);
  position: absolute;
  bottom: 0;
  right: calc(50% - 5px);
}

.maintenance_outage .box_centering {
  display: block;
  text-align: center;
}

.maintenance_outage .menu_anchor2 {
  display: inline-block;
  text-align: left;
}

.maintenance_outage .menu_anchor2 .menu_anchor_list {
  border-bottom: 2px solid #ddd;
}

.maintenance_outage .menu_anchor2 .menu_anchor_btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 6px 8px 20px;
  color: var(--color-black);
  font-weight: bold;
  text-decoration: none;
}

.maintenance_outage .menu_anchor2 .menu_anchor_btn br {
  display: none;
}

.maintenance_outage .menu_anchor2 .menu_anchor_btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-jcom);
  border-right: 2px solid var(--color-jcom);
  transform: rotate(135deg);
  position: absolute;
  top: calc(50% - 5px);
  left: 0;
}

.maintenance_outage .contact_menu li {
  width: calc(50% - 20px)
}

.maintenance_outage .contact_menu li .btn {
  width: 100%;
  display: block;
  font-size: 14px;
  line-height: 1.25
}

.maintenance_outage .phonePlus_menu li {
  width: 100%;
  text-align: center
}

.maintenance_outage .phonePlus_menu li .btn {
  display: block
}

.maintenance_outage .form_select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  color: var(--color-black);
  background-color: #fff;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  cursor: pointer
}

.maintenance_outage .form_select_wrap {
  position: relative
}

.maintenance_outage .form_select_wrap::after {
  content: "▼";
  font-size: 12px;
  color: var(--color-black);
  position: absolute;
  top: 10px;
  right: 10px
}

.maintenance_outage .btn {
  display: inline-block;
  position: relative;
  width: 100%;
  color: var(--color-black);
  font-weight: bold;
  text-decoration: none;
  cursor: pointer
}

.maintenance_outage .btn.btn_primary {
  padding: 12px 36px;
  color: #fff;
  text-align: center;
  background-color: var(--color-jcom);
  border-radius: 50px
}

.maintenance_outage .btn.btn_white_primary {
  padding: 12px 36px;
  background-color: #fff;
  border: 2px solid var(--color-jcom);
  border-radius: 50px
}

.maintenance_outage .btn.btn_white_gray {
  padding: 12px 36px;
  background-color: #fff;
  border: 2px solid var(--color-ash);
  border-radius: 50px
}

.maintenance_outage .btn.btn_shadow {
  padding: 12px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .24) 0px 3px 8px
}

.maintenance_outage .btn.btn_shadow .symbol {
  width: 64px;
  height: auto;
  text-align: center
}

.maintenance_outage .btn.btn_arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 5px);
  right: 15px
}

.maintenance_outage .btn.btn_arrow.btn_arrow_b::after {
  transform: rotate(135deg);
  top: calc(50% - 6px)
}

.maintenance_outage .btn.btn_arrow.btn_arrow_l::after {
  transform: rotate(-135deg);
  right: auto;
  left: 15px
}

.maintenance_outage .btn.btn_arrow.btn_primary::after {
  border-color: #fff
}

.maintenance_outage .btn.btn_trigger {
  display: block;
  margin-right: auto;
  margin-left: auto
}

.maintenance_outage .btn.btn_trigger::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  transform: rotate(135deg);
  position: absolute;
  top: calc(50% - 6px);
  right: 15px
}

.maintenance_outage .btn.btn_trigger.select::after {
  transform: rotate(-45deg);
  top: calc(50% - 3px)
}

.maintenance_outage .btn.btn_label {
  padding-top: 6px;
}

.maintenance_outage .btn.btn_label small {
  font-style: 12px;
}

.maintenance_outage .link_txt {
  color: var(--color-black);
  font-weight: bold;
  text-decoration: none;
  padding-right: 26px;
  background: url(../img/icon/icn-link-self-red.svg) no-repeat right center/16px auto
}

.maintenance_outage .link_panel {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--color-ash);
  border-left: 2px solid var(--color-ash)
}

.maintenance_outage .link_panel li {
  width: 100%;
  border-right: 2px solid var(--color-ash);
  border-bottom: 2px solid var(--color-ash)
}

.maintenance_outage .link_panel li a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 12px;
  padding-right: 30px;
  color: var(--color-black);
  font-weight: bold;
  text-decoration: none;
  background-color: #fff;
}

.maintenance_outage .link_panel li a::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 5px);
  right: 15px
}

.maintenance_outage .link_panel_separate {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.maintenance_outage .link_panel_separate li {
  width: 100%;
  text-align: center;
}

.maintenance_outage .link_panel_separate li a {
  position: relative;
  display: block;
  height: 100%;
  padding: 6px 16px;
  color: var(--color-black);
  font-weight: bold;
  line-height: 1.25;
  text-decoration: none;
  background-color: #fff;
  border: 2px solid var(--color-ash);
  transition: .2s
}

.maintenance_outage .link_panel_separate li a.blank {
  background: url("../img/icon/icon_blank_bk.png") no-repeat center right 10px / 18px auto;
}

.table_detail {
  width: 100%;
  margin-right: auto;
  margin-left: auto
}

.table_detail th,
.table_detail td {
  display: block
}

.table_detail th {
  padding-top: 8px
}

.table_detail td {
  padding: 3px 3px 8px;
  border-bottom: 1px solid var(--color-light)
}

.table_detail .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left
}

.maintenance_outage .tag {
  display: inline-block;
  width: 80px;
  text-align: center;
  padding: 1px 3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: -0.05rem;
  border-radius: 5px;
  border: 1px solid var(--color-ash);
  background-color: #fff
}

.maintenance_outage .tag.tag_now,
.maintenance_outage .tag.tag_recovery {
  width: 120px;
  padding-top: 5px;
  padding-bottom: 5px;
  letter-spacing: 2px;
  color: #fff;
  border: none
}

.maintenance_outage .tag.tag_now {
  background-color: var(--color-jcom);
  border: none
}

.maintenance_outage .tag.tag_recovery {
  background-color: var(--color-green)
}

.maintenance_outage .tag.tag_now_category {
  border-color: var(--color-jcom)
}

.maintenance_outage .tag.tag_recovery_category {
  border-color: var(--color-green)
}

.maintenance_outage .maintenance_detail .list {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-weight: bold;
  border-bottom: 1px dotted var(--color-dark)
}

.maintenance_outage .maintenance_detail .list:last-child {
  margin-bottom: 0px;
}

.maintenance_outage .maintenance_detail .list .list_link {
  color: var(--color-cobalt);
}

.maintenance_outage .maintenance_detail .list .list_link::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.maintenance_outage .maintenance_detail .list .tag+.date {
  padding-left: 6px
}

.maintenance_outage .maintenance_detail .row+.row {
  margin-top: 6px
}

.maintenance_outage .js_acco .js_acco_inner {
  display: none
}