main{
  overflow-x: hidden;
}

/*** --------------- 完成イメージ --------------- ***/
#preview{
  padding-top: 48px;
  padding-bottom: 120px;
}

#preview .movie_box_0{
  max-width: 560px;
  margin: auto;
}
/*** --------------- 工事の進捗率 --------------- ***/
#progress{
  padding-bottom: 120px;
}

#progress svg {
  position: relative;
  width: 150px;
  height: 150px;
}

#progress svg circle {
  position: relative;
  fill: none;
  stroke-width: 10;
  stroke: #f3f3f3;
  stroke-dasharray: 440;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

#progress svg circle.line {
  stroke: #E73562;
}

.box .percent{
  position: relative;
  display: flex;
  justify-content: center;
}

.box .percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3A1808;
}

.box .percent .number .title {
  font-size: calc(55 / var(--root-font-size) * 1rem);
}

.box .percent .number .title span {
  font-size: calc(24 / var(--root-font-size) * 1rem);
}

.box .text {
  padding: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: calc(24 / var(--root-font-size) * 1rem);
}

#progress .line {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}


/*** --------------- 工事の進捗状況 --------------- ***/
#status{
  position: relative;
}

#status .accordion {
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid #88746A;
    border-radius: 8px;
    background-color: #FFF;
}


#status .accordion-button{
  background-color: #FBE1E4;
  color: #3A1808;
  font-weight: 700;
  font-size: calc(24 / var(--root-font-size) * 1rem);
}

.accordion-button:not(.collapsed){
  box-shadow: none;
}

#status .accordion-body .text_box{
  margin-top: 20px;
}

#status .accordion-body p{
  font-size: calc(16 / var(--root-font-size) * 1rem);
  color: #3A1808;
  margin-top: 1rem;
}

#status .accordion-body p:first-of-type{
  margin-top: 0;
}

#status .accordion-body .img_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

#status .accordion-body .slid_box{
  width: 472px;
}
#status .accordion-body .movie_box{
  width: 560px;
}

#status div#n2-ss-2 .n2-ss-slider-2{
  aspect-ratio: 3/2;
}

@media screen and (max-width: 768px){
  #status .accordion-body .movie_box video{
    width: 100%!important;
    height: auto!important;
    aspect-ratio: 3/2;
  }
}

@media screen and (max-width: 575px){
  div#n2-ss-2 .n2-ss-slider-1{
    min-height: auto!important;
  }
  #status .accordion-body .slid_box,
  #status .accordion-body .movie_box{
    width: 100%;
  }

  #status .accordion-body{
    padding-right: 12px;
    padding-left: 12px;
  }
}