@charset "UTF-8";

/* 共通 */

@media screen and (min-width:768px) {
  .sp_only {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pc_only {
    display: none !important;
  }
}
body{
  background: #fff;
}

img {
  vertical-align: bottom;
}

section{
  padding: 75px 0 95px;
}

[data-browse-mode="S"] section{
  padding: 70px 0 90px;
}

h2{
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  background: transparent;
  padding: 0;
}

[data-browse-mode="S"] h2{
  font-size: 33px;
}

p{
  font-size: 16px;
  font-weight: 500;
}

[data-browse-mode="S"] p{
  font-size: 15px;
}

a{
  transition: all .3s ease;
}

a:hover{
  opacity: .7;
  text-decoration: none;
}

.sub_title{
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

[data-browse-mode="S"] .sub_title{
  font-size: 20px;
}

.color_blue{
  color: #2A77CA;
}

.futon_content_inner{
  max-width: 1200px;
  margin: 0 auto;
}

[data-browse-mode="S"] .futon_content_inner{
  padding: 0 30px;
}

/* mv */
.futon_mv_inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

[data-browse-mode="P"] .futon_mv_area{
  background-image: url(../../../img/usr/freepage/futon/mv_pc_2026.jpg);
  width: 100%;
  aspect-ratio: 35 / 16;
  background-size: cover;
}

[data-browse-mode="S"] .futon_mv_area{
  background-image: url(../../../img/usr/freepage/futon/mv_sp_2026.jpg);
  aspect-ratio: 43 / 30;
  background-size: cover;
}

/* problem */
.futon_problem{
  background: #fff;
}
[data-browse-mode="S"] .futon_problem{
  padding-top: 36px;
}
.futon_problem_content_area{
  margin-top: 84px;
  padding: 0 20px;
  display: flex;
  gap: 55px;
  align-items: stretch;
}

[data-browse-mode="S"] .futon_problem_content_area{
  flex-direction: column;
  align-items: center;
  margin-top: 75px;
}

.futon_problem_content_box{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem_title{
  position: relative;
}

.problem_title::before{
  content: "";
  background-image: url(../../../img/usr/freepage/futon/problem_icon.svg);
  width: 33px;
  height: 42px;
  display: block;
  position: absolute;
}

.futon_problem_content_box:first-of-type .problem_title::before{
  left: 20px;
  transform: rotate(-31deg);
}

[data-browse-mode="S"] .futon_problem_content_box:first-of-type .problem_title::before{
  left: -3px;
}

.futon_problem_content_box:nth-last-of-type(2) .problem_title::before{
  right: -12px;
}

[data-browse-mode="S"] .futon_problem_content_box:nth-last-of-type(2) .problem_title::before{
  right: -20px;
}

.futon_problem_content_box:last-of-type .problem_title::before{
  right: 24px;
  transform: rotate(-31deg);
}

[data-browse-mode="S"] .futon_problem_content_box:last-of-type .problem_title::before{
  right: unset;
  left: 0;
  transform: rotate(-31deg);
}

.problem_img{
  margin: 44px auto 29px;
  border-radius: 60px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

[data-browse-mode="S"] .problem_img{
  margin: 32px auto 29px;
  border-radius: 60px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 308px;
}

.problem_txt{
  padding: 0 30px;
}

[data-browse-mode="S"] .problem_txt{
  padding: 0;
}

/* point */
.futon_point{
  background: #F4F8FD;
}

.futon_point_content_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
  gap: 47px 30px;
  margin-top: 70px;
}

[data-browse-mode="S"] .futon_point_content_area{
  flex-direction: column;
  align-items: center;
  gap: 31px;
  margin-top: 66px;
}

.futon_point_content_box{
  width: calc((100% - 30px * 2) / 3);
  background: #FFF;
  border-radius: 60px;
  padding: 46px 37px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

[data-browse-mode="S"] .futon_point_content_box{
  width: 100%;
  padding: 36px 32px 38px;
}

.point_img{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 111px;
  margin: 0 auto;
}

[data-browse-mode="S"] .point_img{
  max-width: 92px;
}

.point_title{
  margin: 38px auto 16px;
}

[data-browse-mode="S"] .point_title{
  margin: 28px auto 16px;
}

/* recommended_timing */
.futon_re_timing{
  background: #fff;
}

.futon_re_timing_content_area{
  padding: 0 66px;
  margin-top: 88px;
  display: flex;
  justify-content: center;
  align-content: stretch;
  gap: 34px;
}

[data-browse-mode="S"] .futon_re_timing_content_area{
  margin-top: 100px;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 90px;
}

.futon_re_timing_content_box{
  padding: 0 32px 25px;
  border-radius: 10px;
  flex: 1;
  background: #f6f6f6;
}

[data-browse-mode="S"] .futon_re_timing_content_box{
  padding: 0 22px 25px;
}

.futon_re_timing_content_item{
  position: relative;
  padding-top: 66px;
}

[data-browse-mode="S"] .futon_re_timing_content_item{
  padding-top: 48px;
}

.re_timing_title{
  background: #70ADEF;
  color: #fff;
  text-align: center;
  padding: 16px 0;
  margin-bottom: 24px;
  border-radius: 20px;
  position: absolute;
  top: -18px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

[data-browse-mode="S"] .re_timing_title{
  top: -46px;
  padding: 8px 0;
}

/* wait */
.futon_wait{
  background: #fff;
  padding-top: 0!important;
}

.futon_wait_content_area{
  margin: 47px 70px 0;
}

[data-browse-mode="S"] .futon_wait_content_area{
  margin: 47px auto 0;
  width: 100%;
}

.futon_wait_content_area p{
  margin-bottom: 40px;
}

.wait_img{
  width: 100%;
}

[data-browse-mode="P"] .wait_img{
  overflow: hidden;
  border-radius: 45px;
}

/* flow */
.futon_flow{
background: #F4F8FD;
}

.futon_flow_content_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
  gap: 19px;
  margin-top: 85px;
}

[data-browse-mode="S"] .futon_flow_content_area{
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
}

[data-browse-mode="P"] .futon_flow_content_box{
  width: calc((100% - 19px * 3) / 4);
  background: #FFF;
  border-radius: 60px;
  padding: 18px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

[data-browse-mode="P"] .futon_flow_content_box::after{
  content: "";
  width: 34px;
  height: 51px;
  background-image:url(../../../img/usr/freepage/futon/flow_arrow.svg);
  background-repeat: no-repeat;
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

[data-browse-mode="S"] .futon_flow_content_box{
  width: 100%;
  background: #FFF;
  border-radius: 30px;
  padding: 23px 28px 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

[data-browse-mode="S"] .futon_flow_content_box::after{
  content: "";
  width: 51px;
  height: 28px;
  background-image:url(../../../img/usr/freepage/futon/flow_arrow_sp.svg);
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  z-index: 2;
}

.futon_flow_content_box:last-of-type:after{
  content: none;
}

[data-browse-mode="P"] .futon_flow_content_item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-browse-mode="S"] .futon_flow_content_item{
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

[data-browse-mode="S"] .futon_flow_content_item_left{
  width: 72px;
  flex-shrink: 0;
}

[data-browse-mode="S"] .futon_flow_content_item_right{
  flex: 1;
  margin-top: 8px;
}

.step_num {
  font-size: 18px;
  text-align: center;
  font-weight: 700;
}

.step_num .num{
  font-size: 48px;
  font-weight: 500;
}

[data-browse-mode="S"] .step_num .num{
  font-size: 30px;
}

.flow_img{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 38px;
}

[data-browse-mode="S"] .flow_img{
  margin-top: 40px;
}

.flow_title{
  margin: 46px auto 18px;
}

[data-browse-mode="S"] .flow_title{
  text-align: left;
  margin: 0 auto 20px;
}

.futon_detail_content_area{
  margin-top: 62px;
  padding: 0 215px;
}

[data-browse-mode="S"] .futon_detail_content_area{
  margin-top: 62px;
  padding: 0;
}

.amount{
  margin-top: 21px;
  font-size: 20px!important;
  font-weight: 700;
}

.futon_detail_comment{
  margin: 30px auto;
}

.futon_detail_comment{
  text-align: center;
}

.example_box{
  background: #FDFDFD;
  border-radius: 10px;
  margin-bottom: 50px;
  padding: 26px 56px;
}

[data-browse-mode="S"] .example_box{
  padding: 26px 24px;
}

.common_btn_blue{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 497px;
  height: 64px;
  margin: 0 auto 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1;
  border-radius: 100px;
  background: #2A77CA;
  border: 1px solid #2A77CA;
  position: relative;
}

.btn_white_arrow::after{
  position: absolute;
  content: "";
  top: 50%;
  right: 30px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.common_btn_white{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 497px;
  height: 64px;
  margin: 0 auto 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  background: #fff;
  border-radius: 100px;
  border: 2px solid #2A77CA;
  color: #2A77CA;
  position: relative;
}

.btn_blue_arrow::after{
  position: absolute;
  content: "";
  top: 48%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #2A77CA;
  border-right: 1px solid #2A77CA;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* storage_service */
.futon_storage_service{
  background: #FFF;
}

.futon_storage_service_text_area{
  margin: 46px auto 60px;
  text-align: center;
}
.futon_storage_service_content_area{
  padding: 0 66px;
  margin-top: 88px;
  display: flex;
  justify-content: center;
  align-content: stretch;
  gap: 34px;
}

[data-browse-mode="S"] .futon_storage_service_content_area{
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 54px;
}


.futon_storage_service_content_box{
  padding: 0 21px 25px;
  border-radius: 10px;
  flex: 1;
  background: #f6f6f6;
}

.futon_storage_service_content_item{
  position: relative;
  padding-top: 66px;
}

.storage_service_title{
  color: #fff;
  text-align: center;
  padding: 16px 0;
  margin-bottom: 24px;
  border-radius: 20px;
  position: absolute;
  top: -18px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

[data-browse-mode="S"] .storage_service_title{
  padding: 8px 0;
  border-radius: 10px;

}

.futon_storage_service_content_box:first-of-type .storage_service_title{
  background: #E75581;
}

.futon_storage_service_content_box:last-of-type .storage_service_title{
  background: #2AA5CA;
}

/* more_service */
.futon_more_service{
  background: #FFF;
  padding-top: 0!important;
}
.futon_more_service_text_area{
  margin: 46px auto 60px;
  text-align: center;
}