@charset "utf-8";

/*----------------------------------------------------
    共通css
----------------------------------------------------*/
.addParts02 .blockTitArea h3 {
  font-size: 2.6rem;
}

.contents .URLyou {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.3;
  word-break: break-all;
  color: #999;
  width: 100%;
}

.caption {
  text-align: center;
}

.kuchikomi {
  background: #fffbf2;
  padding: 5px 15px;
  margin: 15px 0;
  border-radius: 9px;
  border: 2px dotted #ffb76f;
}

.black {
  font-weight: bold;
  font-size: 1.5rem;
}

.sansho {
  margin: 8px 0 0;
  font-size: 1.0rem;
  line-height: 1.3;
  word-break: break-all;
  color: #999;
}

.waku1 {
  background: #ffeff0;
  padding: 5px 10px;
  margin: 50px 0;
}

.waku1 .float-wrap {
  max-width: 1100px;
  margin: 10px auto;
  box-sizing: border-box;
  border-top: 2px dotted #ffb76f;
  padding: 10px 0;
  border-bottom: 2px dotted #ffb76f;
}

.waku2 {
  background: #ffeff0;
  padding: 5px 20px;
  margin: 50px 0;
}

.waku3 {
  max-width: 1100px;
  margin: 10px auto;
  box-sizing: border-box;
  border-top: 2px dotted #ffb76f;
  padding: 10px 0;
  border-bottom: 2px dotted #ffb76f;
  padding: 10px;
}

.title-show {
  font-size: 2.0rem;
  font-weight: bold;
}

br.sp-only {
  display: none;
}

.float-wrap img {
  width: auto;
}

.float-wrap .ct {
  width: auto;
}

.contents .emi th {
  width: 40%;
}

#side .sideTopBox a {
  display: block;
  padding: 0 15px 20px;
}

.contents .addParts10 .summaryTit_wrap {
  max-width: 840px;

}

.contents .addParts03 .summaryArea .summaryTit_wrap {
  max-width: 650px;
}

.contents .shiyo th {
  width: 50%;
}

/*20210603*/
.official {
  margin: 0 auto;
  margin-top: 50px;
}

.official ul {
  display: block;
  margin: auto;
  padding: 20px 10px !important;
  max-height: 300px;
  overflow-y: scroll;
  border: 2px solid #f69453;
  margin-bottom: 15px;
}

.official ul li {
  display: block;
  border-bottom: 1px dashed #333;
  margin-bottom: 10px;
  padding: 0 0 10px !important;
  text-align: left;
  font-size: 14px !important;
}

.contents .official ul:not([class]) li::before {
  content: none;
}

.official ul li span {
  font-size: 1.2rem;
  display: block;
  background: none;
  color: #000;
  margin: 0px;
  font-weight: bold;
}

.official ul div {
  padding: 0;
  font-weight: bold;
  color: #f69453;
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 0 0 10px;
}

.official h4,
.official h5,
.official h6 {
  font-weight: bold;
  margin: 20px 0;
}

.official h4:before,
.official h5:before,
.official h6 {
  content: none;
}

.contents .official h4 {
  font-size: 2.6rem;
  text-align: center;
  line-height: 1.5;
  position: relative;
  display: table;
  border-bottom: 5px solid #f69453;
  z-index: 1;
  margin: 2rem auto 0;
  padding-bottom: .5rem;
  font-weight: normal;
  font-weight: bold;
}

.contents .official h5 {
  font-size: 1.2em;
  border-bottom: 1px dashed #f69453;
}

.contents .official h6 {
  font-size: 1.1em;
}

.contents .official iframe {
  min-width: auto !important;
  width: 300px !important;
}

.right {
  text-align: right;
}

.plan-price span {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

.stage {
  position: relative;
  max-width: 640px;
  /*スライドショーの横幅最大値*/
  margin: 0 auto;
  background: #666;
  overflow: hidden;
  padding: 20px 0px 30px;
  margin-bottom: 20px;

}


.quote_source {
  text-align: center;
  color: #fff;
  margin: 10px 0;
}

/*全ラジオボタンを非表示に*/
.r1, .r2, .r3, .r4, .r5, .back1, .back2, .back3, .back4, .back5, .next1, .next2, .next3, .next4, .next5 {
  display: none;
}

/* 表示切換えボタンと表示位置 */
.circ {
  position: relative;
  cursor: pointer;
  width: 20%;
  padding: 5px;
  box-sizing: border-box;
}

.oowada .pic img:nth-child(1) {
  width: auto;
}

.btn2 {
  bottom: -20px;
}

.thumbnail {
  display: flex;
  display: -webkit-flex;
  padding: 10px;
}

.btn2 {
  background-color: #56b329;
}

/* 左右送りボタン */
.pb, .nb {
  color: #fff;
  font-weight: bold;
  font-size: 26px;
  display: block;
  position: absolute;
  top: 45%;
  /*z-index:200;pointer-events:auto;*/
}

.pb {
  top: 50%;
  left: 0%;
}

.nb {
  top: 50%;
  right: 0%;
}

.pb:hover, .nb:hover {
  color: #ff0e0e;
  cursor: pointer;
}

/* stageが初期サイズ以下のなったときのサイズ */


.construction_portfolio {
  margin-top: 25px;
}

.construction_portfolio p {
  margin: 10px;
}

.date p {
  font-size: 12px;
}



@media screen and (max-width: 768px) {
  .pb, .nb {
    font-size: 18px;
  }

  .thumbnail {
    flex-wrap: wrap;
    justify-content: center;
  }

  .circ {
    width: 33%;
    padding: 5px;
  }

  .oowada .pic img:nth-child(1) {
    max-width: 320px;
    width: 90%;
  }

}

/*全表示スライドのコンテナー*/
.photos {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: flowSlides 40s infinite;
}

/* 個々のスライド・現スライド標示ボタン */
.pic {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  text-align: center
}

.pic img:nth-child(1) {
  max-height: 200px;
}

/*表示スライドをphotosの中に横並びで一列に並べる*/

.photo1 {
  position: relative;
  left: 0;
}

.photo2 {
  left: 100%;
}

.photo3 {
  left: 200%;
}

/* 写真の下に現スライド標示ボタンを配置 */

/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1_1:checked~#photos1, #r2_1:checked~#photos2, #r3_1:checked~#photos3 {
  animation: flowSlides1 40s infinite;
  animation-delay: 0s;
}

#r1_2:checked~#photos1, #r2_2:checked~#photos2, #r3_2:checked~#photos3 {
  animation: flowSlides2 40s infinite;
  animation-delay: -8s;
}

#r1_3:checked~#photos1, #r2_3:checked~#photos2, #r3_3:checked~#photos3 {
  animation: flowSlides3 40s infinite;
  animation-delay: -16s;
}

/* 左右送りボタン */
#back1_1:checked~#photos1, #back2_1:checked~#photos2, #back3_1:checked~#photos3 {
  animation: flowSlides3 40s infinite;
  animation-delay: -32s;
}

#back1_2:checked~#photos1, #back2_2:checked~#photos2, #back3_2:checked~#photos3 {
  animation: flowSlides1 40s infinite;
  animation-delay: 0s;
}

#back1_3:checked~#photos1, #back2_3:checked~#photos2, #back3_3:checked~#photos3 {
  animation: flowSlides2 40s infinite;
  animation-delay: -8s;
}

#next1_1:checked~#photos1, #next2_1:checked~#photos2, #next3_1:checked~#photos3 {
  animation: flowSlides2 40s infinite;
  animation-delay: -8s;
}

#next1_2:checked~#photos1, #next2_2:checked~#photos2, #next3_2:checked~#photos3 {
  animation: flowSlides3 40s infinite;
  animation-delay: -16s;
}

#next1_3:checked~#photos1, #next2_3:checked~#photos2, #next3_3:checked~#photos3 {
  animation: flowSlides1 40s infinite;
  animation-delay: -24s;
}

/* 初期スライドショー */
/* 初期スライドショー */
@keyframes flowSlides {
  0% {
    left: 0px;
    opacity: 0;
  }

  2% {
    left: 0px;
    opacity: 1;
  }

  18% {
    left: 0px;
    opacity: 1;
  }

  20% {
    left: 0px;
    opacity: 0;
  }

  20.01% {
    left: -100%;
    opacity: 0;
  }

  22% {
    left: -100%;
    opacity: 1;
  }

  38% {
    left: -100%;
    opacity: 1;
  }

  40% {
    left: -100%;
    opacity: 0;
  }

  40.01% {
    left: -200%;
    opacity: 0;
  }

  42% {
    left: -200%;
    opacity: 1;
  }

  58% {
    left: -200%;
    opacity: 1;
  }

  60% {
    left: -200%;
    opacity: 0;
  }

  60.01% {
    left: -300%;
    opacity: 0;
  }

  62% {
    left: -300%;
    opacity: 1;
  }

  78% {
    left: -300%;
    opacity: 1;
  }

  80% {
    left: -300%;
    opacity: 0;
  }

  80.01% {
    left: -400%;
    opacity: 0;
  }

  82% {
    left: -400%;
    opacity: 1;
  }

  98% {
    left: -400%;
    opacity: 1;
  }

  100% {
    left: -400%;
    opacity: 0;
  }
}

/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
  0% {
    left: 0px;
    opacity: 0;
  }

  2% {
    left: 0px;
    opacity: 1;
  }

  18% {
    left: 0px;
    opacity: 1;
  }

  20% {
    left: 0px;
    opacity: 0;
  }

  20.01% {
    left: -100%;
    opacity: 0;
  }

  22% {
    left: -100%;
    opacity: 1;
  }

  38% {
    left: -100%;
    opacity: 1;
  }

  40% {
    left: -100%;
    opacity: 0;
  }

  40.01% {
    left: -200%;
    opacity: 0;
  }

  42% {
    left: -200%;
    opacity: 1;
  }

  58% {
    left: -200%;
    opacity: 1;
  }

  60% {
    left: -200%;
    opacity: 0;
  }

  60.01% {
    left: -300%;
    opacity: 0;
  }

  62% {
    left: -300%;
    opacity: 1;
  }

  78% {
    left: -300%;
    opacity: 1;
  }

  80% {
    left: -300%;
    opacity: 0;
  }

  80.01% {
    left: -400%;
    opacity: 0;
  }

  82% {
    left: -400%;
    opacity: 1;
  }

  98% {
    left: -400%;
    opacity: 1;
  }

  100% {
    left: -400%;
    opacity: 0;
  }
}

@keyframes flowSlides2 {
  0% {
    left: 0px;
    opacity: 0;
  }

  2% {
    left: 0px;
    opacity: 1;
  }

  18% {
    left: 0px;
    opacity: 1;
  }

  20% {
    left: 0px;
    opacity: 0;
  }

  20.01% {
    left: -100%;
    opacity: 0;
  }

  22% {
    left: -100%;
    opacity: 1;
  }

  38% {
    left: -100%;
    opacity: 1;
  }

  40% {
    left: -100%;
    opacity: 0;
  }

  40.01% {
    left: -200%;
    opacity: 0;
  }

  42% {
    left: -200%;
    opacity: 1;
  }

  58% {
    left: -200%;
    opacity: 1;
  }

  60% {
    left: -200%;
    opacity: 0;
  }

  60.01% {
    left: -300%;
    opacity: 0;
  }

  62% {
    left: -300%;
    opacity: 1;
  }

  78% {
    left: -300%;
    opacity: 1;
  }

  80% {
    left: -300%;
    opacity: 0;
  }

  80.01% {
    left: -400%;
    opacity: 0;
  }

  82% {
    left: -400%;
    opacity: 1;
  }

  98% {
    left: -400%;
    opacity: 1;
  }

  100% {
    left: -400%;
    opacity: 0;
  }
}

@keyframes flowSlides3 {
  0% {
    left: 0px;
    opacity: 0;
  }

  2% {
    left: 0px;
    opacity: 1;
  }

  18% {
    left: 0px;
    opacity: 1;
  }

  20% {
    left: 0px;
    opacity: 0;
  }

  20.01% {
    left: -100%;
    opacity: 0;
  }

  22% {
    left: -100%;
    opacity: 1;
  }

  38% {
    left: -100%;
    opacity: 1;
  }

  40% {
    left: -100%;
    opacity: 0;
  }

  40.01% {
    left: -200%;
    opacity: 0;
  }

  42% {
    left: -200%;
    opacity: 1;
  }

  58% {
    left: -200%;
    opacity: 1;
  }

  60% {
    left: -200%;
    opacity: 0;
  }

  60.01% {
    left: -300%;
    opacity: 0;
  }

  62% {
    left: -300%;
    opacity: 1;
  }

  78% {
    left: -300%;
    opacity: 1;
  }

  80% {
    left: -300%;
    opacity: 0;
  }

  80.01% {
    left: -400%;
    opacity: 0;
  }

  82% {
    left: -400%;
    opacity: 1;
  }

  98% {
    left: -400%;
    opacity: 1;
  }

  100% {
    left: -400%;
    opacity: 0;
  }
}

p.inyo {
  color: #bcbab7;
  font-size: 10px;
  width: 90%;
  margin: 0 auto;
  display: inline-block;
  overflow-x: scroll;
  text-align: left;
  word-break: inherit;
}

.lower_bottom .btn-web a {
  padding: 1.5rem 2rem;
}

body {
  font-weight: 600;
}


header h1.rightTxt,
header div.rightTxt a {
  display: flex;
  align-items: center;
  justify-content: right;
}

header h1.rightTxt:before,
header div.rightTxt a:before {
  background: #000;
  color: #fff;
  content: "PR";
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.3;
  margin-right: 1rem;
  padding: 0 1rem;
}

p.copy a:before {
  content: "【PR】";
}
.word-break{
word-break: break-all; 
}




/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/
@media screen and (min-width: 481px) {

  /*20210603*/
  .official {
    width: 80%;
    padding: 20px 50px;
  }

  .circ img {
    width: 100%;
  }

  .circ {
    display: block;
    margin: 0 auto;
  }

  .stage {
    max-width: 450px;
  }

  .circ {
    width: 28%;
  }

  /*2022.02.18*/
  .lower_bottom .block .scrollArea {
    display: flex;
    flex-direction: column;
    height: 700px;
  }

  .lower_bottom .block .scrollArea .tax_info {
    font-size: .9em;
  }

  .lower_bottom .btn-web, .btn-tel {
    margin-bottom: 0;
  }

  .contents .addParts10 .summaryArea {
    width: 100%;
    background: url(https://www.success-houseordering.com/wp/wp-content/uploads/parts10_summary_bg_20220218.jpg) center no-repeat;
    background-size: cover;
    padding: 2.5rem 3rem;
    margin: 0 0 10rem;
    border-radius: 10px;
    position: relative;
  }
}



/*----------------------------------------------------
    SPサイトcss
    ----------------------------------------------------*/

@media screen and (max-width: 480px) {

  /*/////////////SP用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/
  #visArea .mainArea .siteNameArea {
    height: 115px;
  }

  .contents .addParts01 .addTopArea .sttl {
    padding-top: 80px;
    margin-top: -80px;
  }

  .contents .waku1 .float-wrap {
    margin: 1rem 0;
  }

  .waku3 {
    padding: 0px;
  }

  .contents .shiyo th {
    width: 75%;
  }

  br.sp-only {
    display: block;
  }

  .youtube iframe {
    width: 100%;
  }

  .p .orikaeshi {
    word-break: break-all;
  }

  /*20210603*/
  .official {
    width: 100%;
    background: #f5f5f559;
    border-radius: 30px;
    padding: 5% 0;
    margin-top: 50px;
  }

  .official ul {
    width: 100%;
    padding: 15px;
  }

  .addParts02 .blockTitArea h3 {
    font-size: 2.3rem;
  }

  .circ img {
    height: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
  }

  .contents .addParts02 .btn-web a {
    font-size: 1.32rem;
  }

  /*2022.02.18*/
  .lower_bottom .block .scrollArea .tax_info {
    font-size: .9em;
  }

  #visArea .mainArea .siteNameArea {
    display: table;
    background: url(https://www.success-houseordering.com/wp/wp-content/uploads/mv_pic_sp_20220218n.jpg) center top no-repeat;
    background-size: cover;
    width: 100%;
    margin: 0 auto;
  }

  .contents .addParts10 .summaryArea {
    width: 100%;
    background: url(https://www.success-houseordering.com/wp/wp-content/uploads/parts10_summary_bg_20220218.jpg) center no-repeat;
    background-size: cover;
    padding: 2.5rem 3rem;
    margin: 0 0 10rem;
    border-radius: 10px;
    position: relative;
  }
  header h1.rightTxt,
  header div.rightTxt a {
    display: block;
  }
  header h1.rightTxt:before,
  header div.rightTxt a:before {
    display: flex;
    padding: 0 1rem;
    margin: 0 auto 6px;
    width: fit-content;
  }

}