@charset 'utf-8';

:root{
  --c-east-pri: #F4398C;
  --c-west-pri: #D32A53;
  --c-prefecture-pri: #F9E4E8;
  --c-prefecture-sec: #FDF7FA;
  --c-black: black;
  --c-white: white;
  --c-grey-e0: #e0e0e0;
  --c-grey-c: #ccc;
  --img-icon-east: url("/access/images/hikari/10g/icon-east.png");
  --img-icon-west: url("/access/images/hikari/10g/icon-west.png");
  --prefecture-icon-width: 50px;
  --prefecture-icon-height: 50px;
  --prefecture-icon-sp-width: 35px;
  --prefecture-icon-sp-height: 35px;
}

.area-comp .sa-h{
  border-bottom: 1px solid var(--c-black);
  padding-bottom: 1.6rem;
  font-size: 2.4rem;
  line-height: 1;
}
.area-comp .wrapper{
  border-top: 1px solid var(--c-grey-e0);
}

.area-comp .area-wrapper .area-h{
  padding-left: 2.4rem;
  position: relative;
}
.area-comp .area-wrapper .area-h::before{
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  top: 0;
  bottom: 0;
  left: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
}
.area-comp .area-wrapper.e .prefecture-list button:hover,
.area-comp .area-wrapper.e .area-h::before{
  background-color: var(--c-east-pri);
}
.area-comp .area-wrapper.w .prefecture-list button:hover,
.area-comp .area-wrapper.w .area-h::before{
  background-color: var(--c-west-pri);
}
.area-comp .area-wrapper.e .prefecture-list button:hover,
.area-comp .area-wrapper.w .prefecture-list button:hover{
  color: var(--c-white);
  cursor: pointer;
}

.area-comp .area-wrapper .prefecture-list li{
  display: inline-block;
  margin-right: .8rem;
  margin-bottom: .8rem;
}
.area-comp .area-wrapper .prefecture-list button{
  border-radius: 4px;
  padding: .2rem .6rem;
  border: 1px solid var(--c-grey-c);
}
.area-comp .area-wrapper.e .prefecture-list button{
  color: var(--c-east-pri);
}
.area-comp .area-wrapper.w .prefecture-list button{
  color: var(--c-west-pri);
}

.area-comp .prefecture-details{
  border-radius: 6px;
  padding: 3.2rem;
  border: 3px solid var(--c-grey-c);
  background-color: var(--c-prefecture-sec);
  position: relative;
}

.area-comp .prefecture-details .title{
  font-weight: bold;
  border-radius: 4px;
  background-color: var(--c-prefecture-pri);
  padding: .8rem 1.6rem;
}

.area-comp .area-wrapper.e .prefecture-details{
  border-color: var(--c-east-pri);
}

.area-comp .area-wrapper.w .prefecture-details{
  border-color: var(--c-west-pri);
}

.area-comp .area-wrapper .prefecture-details::before{
  content: "";
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: var(--prefecture-icon-width);
  height: var(--prefecture-icon-height);
  left: 0;
  right: 0;
  top: calc(var(--prefecture-icon-width) * .5 * -1);
  background-position: left top;
  background-repeat: no-repeat;
}
.area-comp .area-wrapper.e .prefecture-details::before{
  background-image: var(--img-icon-east);
}
.area-comp .area-wrapper.w .prefecture-details::before{
  background-image: var(--img-icon-west);
}

.area-comp .area-wrapper.e .prefecture-list .active{
  background-color: var(--c-east-pri);
  border: 1px solid var(--c-east-pri);
  color: var(--c-white);
  font-weight: bold;
}

.area-comp .area-wrapper.w .prefecture-list .active{
  background-color: var(--c-west-pri);
  border: 1px solid var(--c-west-pri);
  color: var(--c-white);
  font-weight: bold;
}

.area-comp .prefecture-details .content,
.area-comp .prefecture-details,
.area-comp .area-wrapper,
.area-comp .wrapper,
.area-comp .areamap{
  margin-top: 3.2rem;
}

.area-comp .prefecture-details .content .title ~ *{
  word-break: keep-all;
  line-break: anywhere;
  text-align: justify;
}

.area-comp .prefecture-details .content .title ~ *,
.area-comp .area-wrapper .prefecture-list{
  margin-top: 1.6rem;
}

.area-comp .prefecture-details .content:first-of-type{
  margin-top: 0;
}

.area-comp .areamap{
  display: block;
}

@media only screen and (max-width: 767px){
  .area-comp .prefecture-details .content{
    margin-top: 1.6rem;
  }
  .area-comp .prefecture-details{
    padding: 2.4rem 1.6rem 1.6rem;
  }
  .area-comp .area-wrapper .prefecture-details::before{
    background-size: 70% 70%;
    top: calc(var(--prefecture-icon-width) * .35 * -1)
  }
}