/*
//system_bath
*/


.area_system_bath_content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 100px;
    padding:0 15px;
}

/* key_visual */
.ttl_key_visual {
    color: #01B6D0;
}
.sec_line {
    position: relative;
    /*width: 450px;*/
    margin: auto;
}
.item_line {
    font-family: 'Oswald';
    letter-spacing: 7.99px;
    color: #FFFFFF;
}
.item_line.left {
    font-size: 2.2396vw;
}
.item_line.right {
    font-size: 2.2396vw;
    margin-left: auto;
    text-align: right;
}
.sec_line .small {
    font-size: 1.025rem;
    color: #FFFFFF;
    text-align: right;
    padding: 20px 0 0 0;
    margin-right: 10px;
}
.sec_line .small span {
    font-size: 1.1979vw;
    letter-spacing: 0.2rem;
    color: #FFFFFF;
}
.sec_line .small span.item_line_title_jp {
    letter-spacing: 0.2rem;
}
.sec_line .line_horizontal {
    background: transparent linear-gradient(246deg, #FFFFFF 0%, rgba(0,0,0,0) 100%) 0% 0% no-repeat padding-box;
    border: none;
    margin: 17px auto;
    width: 50%;
    height: 2px;
}
.sec_line .line_diagonal {
    background: transparent linear-gradient(246deg, rgba(0,0,0,0) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    width: 70px;
    height: 2px;
    left: 50%;
    bottom: 75px;
    transform: rotate(130deg);
    border-top: 0px;
}
.img_key_visual {
    position: relative;
    padding: 0 0 30px 0;
}
.img_key_visual img {
    width: 100%;
}
.area_key_visual {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  color: #595757; }
  @media (max-width: 768px) {
    .area_key_visual {
      display: block; } }
  .area_key_visual .box_key_visual {
    padding: 30px 0;
    width: 45%;
    text-align: right; }
    @media (max-width: 768px) {
      .area_key_visual .box_key_visual {
        width: 100%;
        padding: 0;
        margin-bottom: 30px; } }
    .area_key_visual .box_key_visual.left {
      margin-right: 5%; }
      @media (max-width: 768px) {
        .area_key_visual .box_key_visual.left {
          margin-right: 0; } }
    .area_key_visual .box_key_visual .ttl_key_visual {
      color: #01B5D0;
      font-size: 2.1rem;
      letter-spacing: 0.68rem;
      line-height: 1.36;
      margin-bottom: 12px; }
      @media (max-width: 768px) {
        .area_key_visual .box_key_visual .ttl_key_visual {
          font-size: 1.135rem;
          letter-spacing: 0.18rem;
          line-height: 1.5; } }
    .area_key_visual .box_key_visual .txt_key_visual {
      font-size: 1.1rem;
      letter-spacing: 0.225rem;
      line-height: 2.78rem; }
      @media (max-width: 768px) {
        .area_key_visual .box_key_visual .txt_key_visual {
          font-size: 0.865rem;
          letter-spacing: 0.075rem;
          line-height: 2rem; } }
    .area_key_visual .box_key_visual + .box_key_visual {
      text-align: left;
      font-family: "Oswald",suns-serif; }
      .area_key_visual .box_key_visual + .box_key_visual .ttl_key_visual {
        font-weight: 400;
        font-size: 1.88rem;
        letter-spacing: 0.16875rem;
        margin-bottom: 15px; }
        @media (max-width: 768px) {
          .area_key_visual .box_key_visual + .box_key_visual .ttl_key_visual {
            font-size: 1.01rem;
            font-weight: 500;
            letter-spacing: 0.1rem;
            margin-bottom: 12px; } }
      .area_key_visual .box_key_visual + .box_key_visual .txt_key_visual {
        font-size: 1.05rem;
        font-weight: 300;
        letter-spacing: 0.1rem;
        line-height: 2.8rem; }
        @media (max-width: 768px) {
          .area_key_visual .box_key_visual + .box_key_visual .txt_key_visual {
            font-size: 0.865rem;
            letter-spacing: 0.025rem;
            line-height: 1.8rem; } }


.pc_line_wa {
    position: relative;
}
.pc_line_in {
    position: absolute;
    top: -28vw;
    left: 5%;
    width: 37%;
    max-width: 580px;
    font-weight: normal;
}
/* key_visual end */

/* h2 */
.ttl_section {
  font-family: 'Oswald';
  text-align: center;
  font-size: 1.5625rem;
  letter-spacing: 2.25px;
  text-transform: uppercase;
  color: #01B5D0;
  padding-top: 50px;
  padding-left: 2.25px;
  font-weight: 400;
}
.line_horizontal {
    background: transparent linear-gradient(90deg, #00A9C6 0%,rgba(0,0,0,0))0% 0% no-repeat padding-box;
    border: none;
    margin: 12px 25% 12px auto;
    width: 35%;
    height: 2px;
}
.sub_ttl_section {
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 5px;
    color: #595757;
    padding-bottom: 50px;
    padding-left: 5px;
}
/* h2 end*/

/* youtube */
.area_youtube_system_bath {
  position: relative;
  width: 100%;
  margin: 50px auto;
}
.link_youtube_system_bath {
  width: 100%;
  height: 100%;
  border: none;
    outline:none;
}
.link_youtube_system_bath img {
    width: 100%;
}
/* youtube end */

/* FREE DESIGNING */
.sec_free_designing {
    display: flex;
    flex-wra: wrap;
    justify-content: space-between;
    padding: 40px 15px 0;
    max-width: 1200px;
    margin: 0 auto 60px;
}

.box_free_designing {
    width: 32%;
}
.sec_free_designing .item_free_designing img{
    width:100%;
    height:100%;
    object-fit: contain;
}

#bfd_1 {
    width:28%;
}
#bfd_2 {
    width:28%;
}
#bfd_3 {
    width:36%;
}

.box_free_designing.col_1 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.ttl_free_designing {
    font-size: 22px;
    text-align: center;
    color: #01B5D0;
    margin-bottom:30px;
}
.item_free_designing {
    text-align: center;
    height:14vw;
    max-height:200px;
    margin-bottom:30px;
}

.item_free_designing-shape {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-bottom:40px;
}
.img_free_designing{
    width:17%;
    text-align: center;
    display: flex;
    align-items:flex-end;
    flex-direction: column;
    justify-content: end;
}
.img_free_designing img {
    width: 90%;
    max-height:160px;
}
.img_free_designing p {
    width:100%;
    display: inline-block;
    margin-top: 15px;
}

/* FREE DESIGNING end */

/* characteristic */
.characteristic.col_wrap{
    max-width:1024px;
}
.characteristic.col_wrap .col_box{
    margin-bottom:40px;
}
.sec_characteristic {
  padding: 40px 15px 0;
  max-width: 1400px;
  margin: 0 auto 80px;
    display: flex;
flex-wrap: wrap;
}
.area_txt_system_bath,
.img_characteristic{
    max-width: 1200px;
  margin: 0 auto 50px;
}


.box_characteristic {
    width: 35%;
    margin: auto;
    padding: 50px 0 0 0;
    color: #595757;
}
.ttl_characteristic {
    font-size: 22px;
    letter-spacing: 0.2rem;
    margin-bottom:15px;
    color: #01B5D0;
}
.txt_characteristic span {
    position: relative;
    margin: 0.4375rem;
}
.txt_characteristic span::after {
    position: absolute;
    top: -0.4rem;
    left: -0.5rem;
    content: '※';
    font-size: 0.8rem;
}
.txt_characteristic.annotation {
	font-size: 0.80rem;
    letter-spacing: 0.1rem;
}
.img_characteristic img {
    width: 100%;
}
/* characteristic end */

/* lighting */
.lighting.col_wrap{
    max-width:1200px;
    align-items:end;
}

.area_lighting {
    display: flex;
    padding: 0 0 20px 0;
}
p.annotation {
    font-size: 0.80rem;
}

.box_lighting {
    width: 50%;
}
.box_lighting img {
    width: 100%;
}
.box_lighting.left {
    margin-right: 3%;
}
.box_lighting.right {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}
.box_lighting.right img {
    position: absolute;
    bottom: 0;
    padding: 0;
}
.box_lighting:focus{
    outline:none;
    /*-webkit-tap-highlight-color:rgba(0,0,0,0);
        cursor:pointer;
        -webkit-touch-callout:none;*/
}
.ttl_lighting {
    font-size: 22px;
    letter-spacing: 0.2rem;
    margin-bottom: 15px;
    color: #01B5D0;
}
.txt_lighting {
    margin-bottom:15px;
}
.img_lighting img{
    width:100%;
}
/* lighting end */

/* gallery */
.area_system_bath_gallery {
    position: relative;
    display: block;
    margin: 5% 0;
}
.area_system_bath_gallery img {
    width: 100%;
}
.box_system_bath_gallery {
    position: absolute;
    top: 51%;
    transform: translateY(-50%);
    left: 5%;
}
.txt_system_bath_gallery {
    font-family: 'Oswald';
    font-size: 2.2375rem;
    text-align: right;
    letter-spacing: 3.5px;
    color: #FFFFFF;
    line-height: 3rem;
}
.txt_system_bath_gallery:last-child {
    position: relative;
}
.txt_system_bath_gallery:last-child::after {
    position: absolute;
    content: "";
    display: inline-block;
    right: -2.4rem;
    border: 12px solid transparent;
    border-left: 12px solid #fff;
    margin-top: 15px;
}
/* gallery end */

.link_youtube_system_bath:hover,
.box_lighting.right:hover,
.area_system_bath_gallery:hover {
    opacity: 0.8;
}


@media (max-width: 768px) {
    /* スマートフォン以下専用スタイル */
    
    body{
        font-size:14px;
    }
    .img_key_visual {
        margin:65px 0 30px;
    }
    .area_txt_system_bath {
        width: 100%;
    }
    /* key_visual */
    .pc_line_wa {
        position: static;
    }
    .pc_line_in {
        position: static;
        top: auto;
        margin: 0 auto 30px;
        min-width: 350px;
    }
    .sec_line {
        position: relative;
        width: 400px;
        max-width: 90%;
        margin: auto;
    }
    .sec_line .small span.item_line_title_jp {
        font-size: 0.875rem;
        color: #595757;
    }
    .item_line {
        font-family: 'Oswald';
        letter-spacing: 7.99px;
        color: #13768D;
    }
    .item_line.left {
        font-size: 1.375rem;
    }
    .sec_line .line_horizontal {
        background: transparent linear-gradient(246deg, #00a9c6 0%, rgba(0,0,0,0) 100%) 0% 0% no-repeat padding-box;
        border: none;
        margin: 14px auto;
        height: 2px;
    }
    .sec_line .line_diagonal {
        background: transparent linear-gradient(246deg, rgba(0,0,0,0) 0%, #00a9c6 100%) 0% 0% no-repeat padding-box;
        position: absolute;
        width: 60px;
        height: 2px;
        left: 47%;
        bottom: 55px;
        transform: rotate(130deg);
        border-top: 0px;
    }
    .item_line {
        font-family: 'Oswald';
        letter-spacing: 0.25rem;
        color: #13768D;
    }    
    .item_line.right {
        font-size: 1.375rem;
        margin-left: auto;
    }
    .sec_line .small {
        padding-top: 14px;
        font-size: 0.875rem;
        text-align: right;
        color: #595757;
        margin: 0;
    }
    .sec_line .small span {
        font-size: 0.875rem;
        color: #13768D;
    }
    .area_key_visual {
        display: block;
        width: 90%;
        margin: 2rem auto 3em;
    }
    .box_key_visual {
        width: 100%;
        margin: auto;
    }
    .box_key_visual.left {
        text-align: left;
        margin-right: auto;
    }
    /* key_visual end */

    /* h2 */
    .ttl_section {
      font-size: 1.375rem;
      letter-spacing: 2.25px;
    }
    /*.ttl_key_visual {
        padding: 0 0 10px 0;
        font-size: 1.01rem;
        font-weight: 500;
        letter-spacing: 0.1rem;
    }
    .box_key_visual.left .ttl_key_visual {
        font-size: 1.135rem;
        letter-spacing: 0.22375rem;
    }
   
    .txt_key_visual {
        font-size: 0.865rem;
        letter-spacing: 0.1rem;
        line-height: 1.8rem;
    }
    .box_key_visual.left .txt_key_visual {
        font-size: 0.865rem;
        letter-spacing: 0.075rem;
    }*/

    .line_horizontal {
        margin: 6px auto;
        width: 97%;
        max-width: 375px;
        height: 2px;
    }
    .sub_ttl_section {
        padding-bottom: 25px;
        font-size: 0.875rem;
        letter-spacing: 5px;
        font-weight: 500;
    }
    /* h2 end*/
    .area_system_bath_content {
        margin:0 auto 80px;
    }
    /* FREE DESIGNING */
    .ttl_free_designing {
        font-size:18px;
    }
    .sec_free_designing {
         display: block;
        padding:0;
    }
    .box_free_designing{
        margin-bottom:30px;
    }
    #bfd_1,
    #bfd_2,
    #bfd_3{
        width:100%;
    }
    .item_free_designing-shape {
        margin-bottom:10px;
    }
    .item_free_designing {
        height: 100vw;
    }
    .img_free_designing {
        width: 50%;
        margin: 15px auto;
    }
    .box_free_designing.col_1 {
        margin: 40px auto 0 auto;
        padding: 0 0 10px 0;
        text-align: center;
    }
    .txt_characteristic.annotation {
        padding-left: 0rem;
        font-size: 0.75rem;
    }
    .txt_characteristic span::after {
        position: absolute;
        top: 0em;
        left: -0.65em;
        font-size: 0.725rem;
     }
    

    /* FREE DESIGNING end */
    
    /* characteristic */
    .txt_characteristic{
        text-align: left;
    }
    .characteristic.col_wrap {
        padding:0;
    }
    .ttl_characteristic {
        font-size:18px;
    }
    .sec_characteristic {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 0 0;
    }
    .box_characteristic {
        width: 100%;
        margin: auto;
        padding: 30px 0 0 0;
    }
    /* characteristic end */


    .area_system_bath_content.asbc_lighting .sub_ttl_section {
        padding-bottom: 50px;
    }

    /* lighting */
    .lighting.col_wrap{
        flex-direction: column-reverse;
        align-items:flex-start;
        padding:0;
    }
    .area_lighting {
        display: block;
        padding: 0 0 5px 0;
    }
    .box_lighting {
        width: 100%;
        margin: auto;
    }
    .box_lighting video {
        padding: 0;
    }
    .box_lighting.right video {
        position: static;
    }
    .ttl_lighting {
        font-size: 18px;
    }
    .img_lighting {
        padding: 20px 0;
    }
    /* lighting end */

    /* gallery */
    .box_system_bath_gallery {
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
    }
    .txt_system_bath_gallery {
        font-size: 1.1875rem;
        letter-spacing: 3.5px;
        width: 300px;
        margin: auto;
        line-height: 1.5rem;
    }
    .txt_system_bath_gallery:last-child::after {
        right: -2rem;
        border: 10px solid transparent;
        border-left: 10px solid #fff;
        margin-top: 3px;
    }    
    /* gallery end */

    /* modaal video */
    .modaal-inner-wrapper {
        padding: 0;
    }
    .modaal-video-wrap {
        margin: 0;
    }
    /* modaal video end */

}