@charset "utf-8";

/* body {
  overflow: hidden;
} */

/* section.l-section.c-showroom-reserve {
  font-family: "游明朝体", "Yu Mincho", YuMincho, serif, "Noto Serif JP" !important;
} */
/*---------------------------------

loading画面

---------------------------------*/




/* header.l-header.js-header {
  display: none;
} */

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: white;
  text-align: center;
  display: none;
}

#splash.is-active {
  display: block;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width: 260px;
}

section.b-fv.container {
  padding: 0;
}

/* ----------------- */

/*---------------------------------

ABOUT

---------------------------------*/

section#CONCEPT {
  margin: 16ex 0ex 14ex;
  display: block;
  padding-top: 100px;
}

@media screen and (max-width: 767px) {
  section#CONCEPT {
    position: relative;
    margin: 0ex 0ex 9ex 0ex;
    padding-top: 0px;
  }
}

/*---------------------------------

相談会　250512

---------------------------------*/

section#soudan {
  max-width: 800px;

}

/* section#soudan:hover{
filter: brightness(75%);
transition: 0.5s;
} */


h2.soudankai_text {
  text-align: center;
  font-size: 26px;
  /* background: #780e0e; */
  color: #333333;
}

#news_soudankai {
  position: relative;
  display: inline-block;
}

#news_soudankai img {
  display: block;
  width: 100%; /* 必要に応じて調整 */
  height: auto;
}

/* ホバー時の画像変化 */
#news_soudankai img:hover,.detail-button:hover {
  filter: brightness(75%);
transition: 0.5s;
}



.detail-button {
  position: absolute;
  bottom: 15px;
  left: 3%;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 22px;
  transition: opacity 0.3s;
  bottom: 3%;
  background-color: #fff;
  color: #333333;
  border: #333333 1px solid;
  width: 200px;
  text-align: center;
}

.detail-button:hover {
  opacity: 1;
  background-color: #000;
  color: #fff;
}

@media screen and (max-width: 767px) {
  div#news_soudankai {
    width: 100%;
  } 

  section#soudan {
    max-width: auto;
  }

  .detail-button {
    width:140px;
    font-size:15px;
  }

  h2.soudankai_text {
    font-size: 19px;
  }

}

/*---------------------------------

 cmn

---------------------------------*/

.sec-concept,
.sec-design {
  text-align: center;
}

.sec-concept h2,
.sec-design h2,
.sec-function h2 {
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.sec-concept h2 span,
.sec-design h2 span,
.sec-function h2 span {
  display: inline-block;
}

.sec-concept .b-txt,
.sec-design .b-txt,
.sec-function p {
  line-height: 2;
}

.sec-concept .b-btn div,
.sec-design .b-btn div,
.sec-function .b-btn a,
.b-case .b-btn a {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  .sec-concept {
    position: relative;
  }

  .sec-concept .b-pre p {
    width: 100%;
    margin: auto;
    margin-bottom: 43px;
    font-size: 16px;
    line-height: 1;
  }

  .sec-concept .b-pre .b-img {
    width: 185px;
    margin: auto;
    margin-top: 0;
  }

  .sec-concept h2,
  .sec-design h2,
  .sec-function h2 {
    font-size: 25px;
    margin-bottom: 25px;
  }

  .sec-concept .b-btn div,
  .sec-design .b-btn div,
  .b-case .b-btn a,
  .sec-function .b-btn a {
    width: 170px;
    height: 32px;
    font-size: 16px;
  }

  p.text-spleft{
  text-align: left;
}

}

@media screen and (max-width: 350px) {
  .sec-concept .b-pre {
    height: calc(100vh - 50px - 74.666vw);
  }

  .sec-concept .b-pre p {
    margin-bottom: 30px;
  }
}

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

  .sec-concept h2,
  .sec-design h2,
  .sec-function h2 {
    font-size: 35px;
    margin-bottom: 35px;
  }

  .sec-concept h2 span + span {
    margin-left: 0.3em;
  }

  .sec-concept .b-txt,
  .sec-design .b-txt,
  .sec-material .b-lead,
  .sec-function p {
    font-size: 18px;
    letter-spacing: 0.075em;
  }
}

/*---------------------------------

 b-fv

---------------------------------*/

.image3 {
  width: 100%;
  height: 100vh;
  background-image: url(top/img/main04-pc.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.image3 > h1 {
  position: absolute;
  bottom: 5%;
  left: 3%;
}

.image3 > h1 > img {
  width: 60%;
}

.b-fv {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0px 0px;
  margin: auto;
}

.b-fv h1,
.b-fv .b-pre,
.b-fv .slider-main {
  position: absolute;
  z-index: 2;
}

.b-fv .b-preImg {
  position: relative;
  width: 100%;
  z-index: 1;
}

.b-fv .slider-main {
  z-index: -1;
}

.b-fv .b-pre {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.b-fv .slider-main {
  width: 100%;
  z-index: 1;
}

.b-fv .slider-main > li {
  display: none;
}

.b-fv .slick-dots li {
  position: relative;
  height: 8px;
}

.b-fv .slick-dots li button,
.b-fv .slick-dots li button::before {
  height: 68px;
  transition: 0.2s all ease-in;
  margin-top: -32px;
}

.b-fv .slick-dots li:hover button,
.b-fv .slick-dots li:hover button::before {
  height: unset;
}

.b-fv .slick-dots li.slick-active button {
  background: unset;
}

.b-fv .slick-dots li button,
.b-fv .slick-dots li button::before {
  position: absolute;
  /* top: 50%; */
  top: 100%;
  transform: translateY(-50%);
}

.b-fv .slick-dots li button {
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
}

.b-fv .slick-dots li button::before {
  font-size: 0;
}

/* 追加 */

.b-fv .slick-dots li:nth-child(1),
.b-fv .slick-dots li:nth-child(2),
.b-fv .slick-dots li:nth-child(3),
.b-fv .slick-dots li:nth-child(4) {
  background-image: url(top/img/main02-sp.jpg);
  background-size: cover;
  width: 95px;
  height: 66px;
}

.b-fv .slick-dots li:nth-child(2) {
  background-image: url(top/img/main03-sp.jpg);
}

.b-fv .slick-dots li:nth-child(3) {
  background-image: url(top/img/main04-sp.jpg);
}

.b-fv .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.b-fv .slick-arrow {
  width: 12px;
  height: 12px;
  top: auto;
  border-top: 2px solid #fff;
  transform-origin: center center;
  z-index: 1;
  opacity: 0.5;
}

.b-fv .slick-arrow:hover {
  opacity: 1;
}

.b-fv .slick-prev {
  left: 41%;
  border-left: 2px solid #fff;
}

.b-fv .slick-next {
  right: 41%;
  border-right: 2px solid #fff;
}

.b-fv .slick-prev::before,
.b-fv .slick-next::before {
  content: "";
  display: none;
  font-size: 0 !important;
}

/*---------------------------------

価格_240627

---------------------------------*/

section#underline {
  text-align: center;
  font-size: 21px;
  padding: 2ex 0ex 2ex;
  /* border: 1px solid #888888; */
  background: white;
  border: double 5px #666;
}

.underline03 {
  font-size: 16px;
}

/*---------------------------------

order_order_miryoku240729

---------------------------------*/

section#order_miryoku {
  background-image: url(top/img/main02-pc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  background-blend-mode: soft-light;
}

dl#order_miryoku {
  color: #666;
}

.order_miryoku_plan {
  text-align: -webkit-center;
  font-size: 19px;
  font-weight: 400;
  margin: 13px;
}

.order_miryoku_sekou {
  text-align: -webkit-center;
  font-size: 16px;
  font-weight: 300;
  margin-top: -25px;
  margin-bottom: 2ex;
  font-weight: 500;
}

figure#order {
  padding-top: 0rem;
}

table {
  width: 40%;
  margin-bottom: 10px;
}

table.tbl-r03{
width: 100%;
margin: 0 auto;
border: none;
border-collapse: separate;
border-spacing: 0 5px;
padding: 0px 0px 0px;
color: #707070;
font-size:14px;
}

.tbl-r02 th {
  border: solid 1px #fff;
  padding: 10px;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.55);
}

.tbl-r02 td {
  padding: 10px;
  border-bottom: 1px solid #666;
}




.tbl-r03 th {
  vertical-align: middle;
  margin: 0;
  background: #efefef;
  width: 88px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 10px 0px;
}

.tbl-r03 td{
  padding: 0px 0px 0px 3px;
  border-bottom: 1px solid #666;
  width:72%;
  /* display: flex; */
    align-items: center;
      text-align: left;
}





a.btn_02,a.btn_03 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  margin: auto;
  padding: 1rem 0rem;
  border: 1px solid #780e0e;
  color: white;
  transition: 0.5s;
  border-radius: 5px;
  background: #780e0e;
  font-weight: 500;
  max-width: 184px;
}
a.btn_02:hover,a.btn_03:hover {
  color: #780e0e;
  background: #fff;
}

a.btn_03 {
  padding: 0.5rem;
  max-width: 138px;
  float: right;
  width: 83%;
}

/* チェックマーク */
.check-mark {
  padding-left: 11ex;
  position: relative;
  color: #343434;
  
}

.check-mark::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 6ex;
  width: 17px;
  height: 10px;
  border-left: 3px solid #780e0e;
  border-bottom: 3px solid #780e0e;
  transform: rotate(-41deg);
}



@media screen and (max-width: 640px) {
  .tbl-r02,table.tbl-r03  {
    width: 100%;
  }

  .tbl-r02 th {
    width: 35%;
  }

  .tbl-r02 td {
    /* border-bottom: none; */
    width: 66%;
  }

  tr {
    display: flex;
  }

  .tbl-r03 td, .tbl-r03 th {
    width: 100%;
    /* font-size: 14px; */
    display: flex;
}


  .tbl-r03 th {
    padding-left: 5px;
    font-size: 13px;
    text-align: left;
    height: 41px;
    width: 50%;
}



  .order_miryoku_sekou {
    font-size: 14px;
    margin-top: -9px;
  }

.check-mark{

  padding-left: 14ex;
}

a.btn_03{
padding: 0.5rem;
float: right;
}


}

/*---------------------------------

order_kitchen240226

---------------------------------*/



/* How to Order 240729追加 */
p#howto2 {
  line-height: 26px;
}



table.option_sekou {
  width: 61%;
  color: #780E0E;
  border: 1px solid #780E0E;
  margin: 4ex auto 0ex;
}

table.option_sekou tr {
  display: contents;
}
table.option_sekou th {
  width: 24%;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  font-weight: 500;
  padding: 10px 0px;
}

table.option_sekou td {
  border: 1px solid #780E0E;
  box-sizing: border-box;
  vertical-align: top;
  padding: 10px 0px;
}




a.btn_01,a.btn_04 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  margin: auto;
  padding: 1rem 0rem;
  border: 1px solid #780e0e;
  color: #780e0e;
  transition: 0.5s;
  border-radius: 5px;
  background: white;
  font-weight: 500;
  max-width: 230px;
}

a.btn_04{
  padding:0.5rem 0rem;
}

a.btn_01:hover,a.btn_04:hover {
  color: #fff;
  background: #780e0e;
}

dt#order2::before,
dt#order3::before {
  background: none;
}





span.howto2 {
  font-size: 12px;
  line-height: 30px;
}


.porto_message {
  font-size: 30px;
  margin-top: 3ex;
  color: white;
  margin: auto;
  text-align: left;
  padding-top: 0ex;
  font-weight: 600;
  width: 800px;
  display: block;
  padding-top: 10px;
}

.contents01 {
  background-image: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 49%,
    rgba(211, 211, 211, 0.52) 92%
  );
}
/* portolife*/

section#main02 {
  padding-bottom: 6rem;
}
.b-details#portolife {
  padding: 0px;
}

.portolife,.portolife02 {
  display: flex;
}

.portolife2 {
  display: block;
}

.card,.card_type,.card_type_PORTO {
     height: auto;
     margin: 3px;
}


.card_type{
  width:33.3%;
  margin: 5px;
}

.card_type_PORTO {
  width: 50%;
  margin: 12px;
}

.card__imgframe {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.card__textbox {
  width: 100%;
  height: auto;
  padding: 16px 0px;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
}
.card__textbox > * + * {
  margin-top: 10px;
  text-align: left;
}

.card__textbox > h4 {
  font-size: 17px;
  border-top: solid #707070;
  border-bottom: solid #707070;
  padding: 10px;
  color: #343434;
}

p#tbl-r03_plantext{
  border-bottom:double #707070 2px;
  font-size:16px;

}

.card__titletext {
  font-size: 15px;
  display: flex;
}

.card__titletext > span {
  font-size: 30px;
  font-weight: bold;
}

.card__titletext > p {
    float: left;
    color: #343434;
    margin: auto;
    border-left: 1px solid;
    padding-left:4px;

}

a.btn_plan {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 59%;
  margin: auto;
  padding: 13px;
  border: 1px solid #780e0e;
  color: #5e5e5e;
  margin-top: 4px;
}
a.btn_plan:hover,
a.btn_plan_toku:hover {
  color: #fff;
  background: #5e5e5e;
}

.porto_message2 {
  display: none;
}

/* 20240725 特長 */
.card_toku {
  max-width: 318px;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
  /* box-shadow: -8px 15px 23px -12px rgba(0, 0, 0, 2); */
  padding: 3px;
}

.card__titletext_toku {
  font-size: 24px;
  margin-left: 0px;
  padding: 5px;
}

.card__textbox_toku {
  width: 100%;
  height: auto;
  padding: 5px 10px 20px;
  background: #fff;
  box-sizing: border-box;
}

a.btn_plan_toku {
  display: block;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  margin: auto;
  padding: 10px;
  border: 1px solid #780e0e;
  color: #5e5e5e;
  margin-top: 45px;
}

@media screen and (max-width: 1200px) {
  /* @media (min-width: 765px) and (max-width: 1200px) { */
  .image3 {
    width: 100%;
    height: 40vh;
    background-image: url(top/img/main04-sp.jpg);
  }
}

@media screen and (max-width: 767px) {
  .porto_message {
    display: none;
  }

  .porto_message2 {
    margin: auto;
    display: block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: none;
    width: 65%;
    padding-top: 3ex;
    text-align: center;
  }

  .image3 {
    width: 100%;
    height: 28vh;
    background-image: url(top/img/main04-sp.jpg);
  }

  .image3 > h1 > img {
    width: 36%;
  }

  .b-fv.container {
    padding: 0;
    margin: 0;
  }

  .b-fv h1 {
    display: none;
    width: 180px;
  }

  .b-fv .b-pre {
    width: 50.667%;
    max-width: 250px;
  }

  .b-fv .slick-dots {
    bottom: 7px;
  }

  .b-fv .slick-dots li,
  .b-fv .slick-dots li button,
  .b-fv .slick-dots li button::before {
    /* width: 40px; */
    width: 60px;
  }

  .b-fv .slick-dots li {
    margin: 0 3px;
  }

  .b-fv .slick-dots li button,
  .b-fv .slick-dots li button::before {
    /* height: 3px; */
    height: 40px;
    margin-top: -20px;
  }

  .b-fv .slick-dots li button::before {
    background: rgba(255, 255, 255, 0);
  }

  .b-fv .slick-arrow {
    bottom: 17px;
  }

  .b-fv .slick-prev {
    transform: translateX(-115px) rotate(-45deg);
  }

  .b-fv .slick-next {
    transform: translateX(115px) rotate(45deg);
  }

  .b-fv .slick-dots li:nth-child(1),
  .b-fv .slick-dots li:nth-child(2),
  .b-fv .slick-dots li:nth-child(3),
  .b-fv .slick-dots li:nth-child(4) {
    width: 60px;
    height: 40px;
  }

  /* order_miryoku240729 */

  ul.order_miryoku {
    display: block;
    text-align: center;
  }

  ul.order_miryoku > li {
    width: 100%;
    display: flex;
  }

  ul.order_miryoku > li > p {
    margin: auto;
    margin-left: 10px;
  }

  ul.order_miryoku > li > img {
    width: 20%;
  }

  section#order_miryoku {
    background-position: 0px 0ex;
    padding: 40px 20px 50px;
    margin: 0px;
  }

  .order_miryoku_plan {
    font-size: 17px;
    margin: 16px 0px -20px;
  }

  section#underline {
    text-align: center;
    font-size: 16px;
  }

  /* order_kitchen240226 */

  section#CONCEPT02 {
    position: relative;
    margin: 0ex 0ex 9ex 0ex;
    padding-top: 6ex;
  }

  figure#order {
    display: block;
    padding-top: 2rem;
    margin-bottom: 20px;
  }



  dt#order2,
  dt#order3 {
    padding: 0;
    margin: 0;
  }

  table.option_sekou {
    width: 100%;
    margin-top: 3ex;
  }

  a.btn_01 {
    width: 51%;
    margin-top: 1rem;
  }
  /* order_kitchen240226 */
  section#main02 {
    padding-bottom: 2rem;
  }

  .sec-material .b-details figure#portolife {
    overflow-x: overlay;
  }

  .portolife {
    display: flex;
    margin-bottom: 30px;
  }

  .portolife02{
    display: block;
  }


  .card,
  .card_toku {
    width: 280px;
  }

  .card_type,.card_type_PORTO {
    width: 100%;
    margin-bottom: 5ex;
}

.card_type_PORTO {
  margin: 2px;
}


  dt#order2 {
    font-size: 15px;
  }
  dt#order3 {
    font-size: 14px;
  }

  .card__titletext > p {
    font-size: 14px;
}


}

@media screen and (min-width: 768px) {
  .b-fv h1 {
    left: 50px;
    bottom: 48px;
    width: 310px;
    margin-bottom: 30px;
  }

  .b-fv .b-pre {
    width: 245px;
  }

  .b-fv .slider-main {
    width: calc(100% - 40px);
  }

  .b-fv .slick-dots {
    bottom: 20px;
  }

  .b-fv .slick-dots li,
  .b-fv .slick-dots li button,
  .b-fv .slick-dots li button::before {
    width: 95px;
  }

  .b-fv .slick-arrow {
    bottom: 45px;
  }

  .b-fv .slick-prev {
    transform: translateX(-160px) rotate(-45deg);
  }

  .b-fv .slick-next {
    transform: translateX(160px) rotate(45deg);
  }

  dt#order2 {
    font-size: 18px;
    margin: 0;
  }
  dt#order3 {
    font-size: 16px;
  }
}

/*---------------------------------

Door material 20240305

---------------------------------*/

figure#portolife3 {
  margin: 10ex;
}

@media screen and (max-width: 767px) {
  figure#portolife3 {
    margin: 1ex 0ex 5ex;
  }

  .portolife3 {
    margin: auto;
  }

  .portolife2 {
    display: flex;
  }
}

/*---------------------------------

 sec-design

---------------------------------*/
/* .b-main ----------------------*/
.sec-design .b-main {
  color: #fff;
  position: relative;
  overflow: hidden;
}

.sec-design .b-main .container {
  position: relative;
  z-index: 1;
}

.sec-design .b-main .b-btn div {
  position: relative;
  transition: all 0.3s;
}

.sec-design .b-main .e-shoulder {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.17em;
  line-height: 1;
}

.sec-design .b-main .e-shoulder::after {
  content: "";
  display: block;
  height: 1px;
  margin: 25px auto 0;
  background: #fff;
}

.sec-design .b-main .b-btn div::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(assets/img/bt-arw-acc.png) center center / contain no-repeat;
  position: absolute;
  right: 23px;
  transform-origin: center center;
  transition: all 0.3s;
}

.sec-design .b-main .b-btn div.open::after {
  transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .sec-design .b-main .container {
    height: 100vh;
    padding-top: 155px;
    padding-bottom: 35px;
  }

  .sec-design .b-main .move {
    height: 120%;
    background: url(top/img/design-sp.jpg) center center / cover;
  }

  .sec-design .b-main .e-shoulder {
    top: 45px;
  }

  .sec-design .b-main .e-shoulder::after {
    display: none;
  }

  .sec-design .b-main h2 {
    font-size: 23px;
    font-weight: 400;
  }

  .sec-design .b-main .b-txt {
    font-size: 16px;
    text-align: left;
  }

  .sec-design .b-main .b-btn {
    width: 95%;
    margin-top: auto;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  .sec-design .b-main .b-btn div {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .sec-design .b-main .container {
    padding-top: 180px;
    padding-bottom: 65px;
  }

  .sec-design .b-main .move {
    height: 130%;
    background: url(top/img/design-pc.jpg) center center / cover;
  }

  .sec-design .b-main .e-shoulder {
    top: 50px;
  }

  .sec-design .b-main .e-shoulder::after {
    width: 50px;
  }

  .sec-design .b-main .b-btn {
    margin-top: 70px;
  }

  /* .sec-design .b-main .b-btn div::after{
  } */
}

/*---------------------------------

 sec-material

---------------------------------*/
.sec-material {
  color: #343434;
}

.sec-material .b-ttls .b-ttl {
  font-weight: 400;
}

.sec-material .b-ttls .b-ttl,
.sec-material .b-lead {
  text-align: center;
}

.sec-material .b-lead,dl.b-details2  {
  color: #707070;
}

.sec-material .b-ttls .b-ttl span {
  display: inline-block;
}

.sec-material .e-shoulder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #780e0e;
  color: #fff;
  border-radius: 50%;
  line-height: 1.2;
}

.sec-material .b-detail .b-img {
  position: relative;
}

.sec-material .b-detail .b-img .js {
  position: absolute;
  opacity: 1;
  transition: all 0.3s;
  cursor: pointer;
}

.sec-material .b-detail .b-img .js.tap {
  opacity: 0;
}

.b-flex {
  margin-top: 3ex;
}

.b-img2 {
  text-align: center;
  margin-bottom: 4ex;
}

.b-txt2 {
  text-align: justify;
  width: 96%;
  margin-top: 8ex;
}

.b-txt2 > h3 {
  font-size: 21px;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .sec-material {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sec-material .b-ttls .b-ttl {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .sec-material .e-shoulder {
    width: 90px;
    height: 90px;
    font-size: 21px;
    margin: 0 auto 20px;
  }

  .sec-material .b-lead {
    font-size: 16px;
  }

  .b-txt2 {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .sec-material {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .sec-material .b-ttls {
    position: relative;
  }

  .sec-material .b-ttls .b-ttl {
    font-size: 30px;
    margin-bottom: 50px;
  }

  .sec-material .e-shoulder {
    width: 103px;
    height: 103px;
    font-size: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-300px, -50%);
  }
}

/* .b-movie */
.sec-material .b-movie {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.sec-material .b-movie .b-txt {
  position: relative;
  z-index: 2;
}

.sec-material .b-movie .b-img {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: all 0.3s;
}

.sec-material .b-movie .b-txt,
.sec-material .b-movie .b-img {
  left: 0;
  top: 0;
}

.sec-material .b-movie:hover .b-img {
  transform: scale(1.1, 1.1);
}

.p-top-zeroconductor__movie.c-animation--fade.js-animation-scroll.js-modal-open.is-visible {
  width: 85%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .sec-material .b-movie {
    margin-top: 30px;
    width: 100%;
    margin: auto;
  }

  .sec-material .b-movie .b-img {
    background: url(top/img/movie-bg-sp1.jpg) center center / cover;
  }

  .b-txt.hot_to {
    width: 100%;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  .sec-material .b-movie .b-img {
    background: url(top/img/movie-bg-pc1.jpg) center center / cover;
  }


  .b-txt.hot_to img:hover {
    transform: scale(1.1);
    transition: 1s all;
    transition: all 0.5s ease-in-out;
  }
}


/* .b-details */
.sec-material .b-details {
  color: #707070;
}

.sec-material .b-details dt,.b-details2 dt {
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.15em;
  position: relative;
}

.sec-material .b-details dt::before,.b-details2 dt::before {
  content: "";
  display: block;
  height: 1px;
  background: #888;
  position: absolute;
}

dt#order::before {
  background: none;
}

.sec-material .b-details dt span {
  position: relative;
  z-index: 2;
}

.sec-material .b-details figure {
  display: flex;
}

.sec-material .b-details figure figcaption h3 {
  font-weight: 300;
  letter-spacing: 0.13em;
  color: #343434;
  line-height: 1.4;
  margin-bottom: 0.8em;
}

.sec-material .b-details figure figcaption h3 {
  letter-spacing: 0.1em;
}

.sec-material .b-details figure figcaption h3 span {
  display: block;
  font-size: 15px;
  letter-spacing: 0.05em;
}

.sec-material .b-details figure.m-handle h3 {
  letter-spacing: 0.05em;
}

.sec-material .b-details figure.m-handle h3 span {
  display: inline-block;
  color: #780e0e;
  font-weight: 400;
}


dt#handle2 {
  background: #efefef;
  margin: 4ex 0px 3ex;
  padding: 9px;
  font-size: 21px;
}


/* ポルト特集 */
section#PORTO_tokusyu{
  max-width: 1040px;
  margin: auto;
}



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


  .sec-material .b-details dt {
    font-size: 20px;
    padding: 35px 0;
    margin-top: 50px;
    width: 100%;
  }

  .sec-material .b-details dt::before {
    width: 75px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .sec-material .b-details figure {
    /* flex-wrap: wrap; */
    margin-bottom: 10px;
  }

  .sec-material .b-details figure .b-img {
    margin-bottom: 20px;
  }

  .sec-material .b-details figure .b-img .slick-list {
    width: calc(100vw - 50px);
  }

  .sec-material .b-details figure figcaption h3 {
    font-size: 25px;
  }

  .sec-material .b-details figure figcaption h3 span {
    margin-top: 0.6em;
  }

  .sec-material .b-details figure figcaption p {
    font-size: 16px;
  }

/* ポルト特集 */
section#PORTO_tokusyu {
  padding: 30px 20px;
}
  
  }
  
  @media screen and (min-width: 768px) {
    .sec-material .b-details {
      /* padding: 85px 0 60px; */
      max-width: 1220px;
      margin: auto;
    }
  
    .sec-material .b-details dt {
      font-size: 25px;
      margin-bottom: 50px;
    }
  
    .sec-material .b-details dd + dt {
      margin-top: 80px;
    }
  
    .sec-material .b-details dt::before {
      width: 100%;
      top: 50%;
    }
  
    .sec-material .b-details dt span {
      display: inline-block;
      background: #fff;
    }
  
    .sec-material .b-details figure {
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
    }
  
    .sec-material .b-details figure .b-img,
    .sec-material .b-details figure figcaption {
      width: 50%;
    }
  
    .sec-material .b-details figure:nth-child(2n) .b-img {
      order: 2;
    }
  
    .sec-material .b-details figure figcaption h3,
    .sec-material .b-details figure figcaption p {
      max-width: 370px;
      margin-left: 50px;
    }
  
    .sec-material .b-details figure.m-handle figcaption h3,
    .sec-material .b-details figure.m-handle figcaption p {
      max-width: 371px;
    }
  
    .sec-material .b-details figure figcaption h3 span {
      margin-top: 0.3em;
    }
  
    .sec-material .b-details figure:nth-child(2n) figcaption h3,
    .sec-material .b-details figure:nth-child(2n) figcaption p {
      margin-left: auto;
      margin-right: 50px;
    }
  
    .sec-material .b-details figure figcaption h3 {
      font-size: 30px;
    }
  
    .sec-material .b-details figure.m-handle figcaption h3 {
      font-size: 26px;
    }
  
    .sec-material .b-details figure .b-img {
      z-index: 2;
    }
  
    .sec-material .b-details figure .b-img .js:hover {
      opacity: 0;
    }
  
    .sec-material .b-details figure figcaption {
      transform: translate(-200px, 0);
      transition-duration: 0.8s;
      animation-timing-function: ease-out;
    }
  
    .sec-material .b-details figure:nth-child(2n) figcaption {
      transform: translate(200px, 0);
    }
  
    .sec-material .b-details figure figcaption.in {
      transform: translate(0, 0);
    }
  }
  
  
  
  /* 20240729 アコーディオン */
  /*ベース*/
  section.typeC .tabLabel {
    margin-bottom: -1px;
    padding: 12px 10px;
    display: block;
    background: wwhite;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 25px;
    border: solid 1px black;
  }
  section.typeC .tabLabel::before {
    margin-right: 1.2em;
    font-weight: 700;
    content: "∨";
  }
  section.typeC input {
    display: none;
  }
  section.typeC .content {
    /*本文*/
    height: 0;
    padding: 0 15px;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
  }
  /*アクティブ設定*/
  section.typeC input:checked + .tabLabel {
    background: #efefef;
  }
  section.typeC input:checked + .tabLabel::before {
    margin-right: 1.2em;
    font-weight: 700;
    content: "∧";
  }
  section.typeC input:checked + .tabLabel + .content {
    height: auto;
    margin-bottom: -1px;
    padding: 15px;
    overflow: auto;
    border: 1px solid gray;
    opacity: 1;
  }
  
  /*---------------------------------
  
   How to Order 注文の流れ
  
  ---------------------------------*/
  
  
      .accordion-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease;
      }
  
      .accordion-content.open {
          max-height: 500px;
          /* 内容に合わせて十分大きくしておく */
      }
  
      .accordion-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 0px;
          border-bottom: 1px solid #ccc;
          cursor: pointer;
          font-size: 14px;
      }
  
      abbr,
      address,
      .toggle-icon {
          font-size: 20px;
          transition: transform 0.3s ease;
      }
  
          figure#portolife_order {
          justify-content: left;
          font-size: 21px;
          color: #333;
          letter-spacing: 0.15em;
          position: relative;
          background: white;
  
      }
  
      figure#portolife_order::before {
          content: "";
          /* display: block; */
          height: 1px;
          background: #888;
          position: absolute;
          width: 100%;
      }
  
      .portolife_order {
          display: inline-block;
          background: #fff;
          position: relative;
          z-index: 2;
          padding-right: 4ex;
      }
  
  
      .step-title.movie {
          padding: 0px;
      }
  
      .step.movie {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          width: 65%;
  
      }
  
      .st img#pc_movie {
          display: block;
          width: 164px;
          height: 250px;
      }
  
      img#sp_movie,
      .tousya_02 {
          display: none;
      }
  
  
      .b-txt.hot_to {
          text-align: center;
      }
  
  
      .tousya {
          position: absolute;
          display: flex;
          width: 36%;
          right: 3%;
          color: #333333;
          background: #fff;
          z-index: 2;
          height: 40px;
          align-items: center;
          justify-content: center;
          font-size: 17px;
          border: double #DB133B 6px;
          font-weight: bold;
      }
  
  
  
      @media screen and (max-width: 767px) {
  
  
          figure#portolife_order::before {
              display: none;
          }
  
          .portolife_order {
              margin: 0 auto;
              font-size: 17px;
              padding-right: 0ex;
          }
  
          .step.movie {
              flex-direction: row;
              width: 96%;
              border-bottom: none;
  
          }
  
  
          .step-title.movie {
              padding: 0;
              text-align: center;
              width: 50%;
          }
  
  
          img#pc_movie {
              display: none;
          }
  
          img#sp_movie {
              display: block;
              width: 60%;
              margin: auto;
  
          }
  
          .btn4 {
              display: flex;
              align-items: center;
          }
  
          .tousya {
              top: 68%;
          }
  
  
          .tousya,
          .tousya_02 {
              width: 44%;
              font-size: 15px;
              height: 36px;
  
              border: double #DB133B 4px;
          }
  
          .tousya_02 {
              position: absolute;
              display: block;
              right: 3%;
              color: #333333;
              background: #fff;
              z-index: 2;
              align-items: center;
              bottom: 11%;
              text-align: center;
              font-weight: bold;
              bottom: 11%;
          }
  
  
  
  
      }
  
      .steps {
          display: flex;
          justify-content: space-between;
          gap: 0;
          margin: 8ex 0ex 2ex;
      }
  
      .step {
          position: relative;
          width: 100%;
          box-sizing: border-box;
          height: 370px;
          color: #333;
      }
  
  
  
      /* 線と矢印 */
      .step:not(:last-child)::after {
          content: "";
          position: absolute;
          top: 50%;
          right: -8%;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
          background: #fff;
          z-index: 2;
          clip-path: polygon(0 0, 100% 50%, 0 100%);
          background-color: #DB133B;
          /* 赤 */
      }
  
      /* 枠の右線（線の続き） */
      .step:not(:last-child)::before {
          content: "";
          position: absolute;
          top: 0;
          right: 4%;
          width: 1px;
          height: 100%;
          background: #333;
          z-index: 1;
      }
  
  
  
      .step-number {
          font-size: 22px;
          font-weight: bold;
          padding: 40px 0px 0px 19px;
      }
  
      .step-title {
          font-weight: bold;
          font-size: 18px;
          height: 72px;
          padding: 7px 0px 0px 19px;
          letter-spacing: 1.5px;
      }
  
  
      .step-desc {
          font-size: 15px;
          padding: 8px 19px 0px;
          letter-spacing: 1.1px;
      }
  
      .video-link {
          text-align: right;
          font-size: 0.9rem;
      }
  
      .video-link a {
          color: #333;
          text-decoration: underline;
      }
  
  
      .step-img img {
          display: flex;
          width: 90px;
          height: auto;
          position: absolute;
          bottom: 0%;
          left: 21%;
      }
  
  
      span#step-number-dai {
          font-size: 30px;
          color: #DB133B;
      }
  
      .step.no-line::after {
          display: none;
      }
  
      dl.b-details3 {
          margin: 9ex 0ex 0ex;
      }
  
  
      .p-search-result__item-title a {
          font-size: 15px;
      }
  
      @media screen and (max-width: 767px) {
          .steps {
              display: flex;
              flex-direction: column;
              padding: 0;
              margin: 2ex 0ex;
          }
  
  
          .step {
              width: 100%;
              border-bottom: 2px solid #ccc;
              padding: 1.5em 0;
              height: 200px;
  
          }
  
          .step:not(:last-child)::after {
              top: 100%;
              right: 49%;
              width: 32px;
              height: 32px;
              clip-path: polygon(0% 50%, 99% 50%, 50% 100%);
          }
  
  
          .step:not(:last-child)::before {
              display: none;
          }
  
          .step-number {
              font-size: 1.2em;
              color: #b60014;
              margin-bottom: 0.5em;
              padding: 0;
          }
  
          #step-number-dai {
              font-size: 1.5em;
              margin-left: 0.3em;
          }
  
          .step-title {
              font-size: 17px;
              margin-bottom: 0.3em;
              line-height: 1.4;
              height: 20px;
              padding: 0;
  
          }
  
          .step-desc {
              font-size: 15px;
              color: #333;
              margin-bottom: 1em;
              line-height: 1.6;
              width: 68%;
              padding: 0;
  
          }
  
          .step-img img {
              width: 80px;
              height: 80px;
              margin: 0 auto;
              left: 75%;
              bottom: 20%;
          }
  
          dl.b-details3 {
              margin: 7ex 0ex 5ex;
          }
  
          .p-search-result__item-title a {
              font-size: 13px;
          }
  
      }