@charset "utf-8";

/* 共通 */
/*body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue","Mplus 1p", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}*/
.hide {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.flex {
    box-sizing: border-box;
    display: flex;
}

/* #top */
body {
    width: 100%;
    height: 100vh;
}

/* .section */
section {
    width:100%;
    max-width:740px;
    margin:0 auto;
}
section img {
    width:100%;
}

/* .header */
.header {
  height:0;
}

/* .text_bg */
.text_bg {
  width:100%;
  max-width:740px;
  height:0;
}
.text_bg01 {
  background:url(../img/LP01.jpg) no-repeat center/contain;
  padding-bottom:132.97%;
    margin-bottom:100px;
}
.text_bg02 {
  background:url(../img/LP02.jpg) no-repeat center/contain;
  padding-bottom:272.51%;
    margin-bottom:60px;
}
.text_bg03 {
  background:url(../img/LP03.jpg) no-repeat center/contain;
  padding-bottom:619.74%;
    margin-bottom:60px;
}
.text_bg04 {
  background:url(../img/LP04.jpg) no-repeat center/contain;
  padding-bottom:784.67%;
    margin-bottom:60px;
}

@media screen and (min-width: 740px) {
  .text_bg01 {
    width:740px;
    height:984px;
    padding-bottom:0;
  }
}

/* .img */
.img05 {
    margin-bottom:20px;
}
.img06 {
    margin-bottom:40px;
}
.img07 {
    margin-bottom:60px;
}
.img09 {
    margin-bottom:100px;
}

.link a {
    display:block;
    width:260px;
    height:60px;
    margin-right:20px;
    margin-left:auto;
    line-height:60px;
    border:3px solid #000;
    border-radius:5px;
    text-align: center;
    font-size:26px;
    margin-bottom:150px;
    background:#989898;
    color:#fff;
    font-weight:bold;
}
a {
    transition:0.3s;
}
a:hover {
    opacity:0.3
}
.img08,.img11 {
    width:100%;
    max-width:600px;
    margin:0 auto 80px;
}
.arenji {
    justify-content:center;
    padding:0 20px;
    box-sizing:border-box;
    margin:0 auto 100px;
}
.arenji_text {
    line-height:1.6;
    font-size:18px;
}

.img10 {
    width:100%;
    max-width:540px;
    margin:0 auto 40px;
    padding:0 20px;
    box-sizing:border-box;
}
.howto_wrap,.paint_wrap,.osusume {
    margin-bottom:80px;
}
.howto_wrap figure,.paint_wrap figure {
    width:50%;
    margin:0 20px 40px 0;
}
.howto_wrap p,.paint_wrap p {
    width:50%;
    padding:10px 20px 0 0 ;
    box-sizing:border-box;
    line-height:1.6;
}

.osusume h3 {
    position:relative;
    text-align:center;
    margin-bottom:40px;
}
.osusume h3::after,.osusume h3::before {
    display:block;
    content:'';
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    width:30px;
    height:2px;
    background:#000;
    transform:rotate(125deg);
}
.osusume h3::after {
    right:0;
    left:270px;
    transform:rotate(125deg);
}
.osusume h3::before {
    right:270px;
    left:0;
    transform:rotate(-125deg);
}

.osusume .item {
    justify-content:space-around;
    align-items:center;
    width:100%;
    max-width:600px;
    margin:0 auto 100px;
    box-sizing:border-box;
}
.osusume .left {
    width:30%;
}
.osusume .right {
    width:50%;
}
.osusume .name {
    font-size:20px;
    font-weight:bold;
    line-height:1.4;
    margin-bottom:20px;
}
.osusume .link a {
    font-size:18px;
    height:40px;
    line-height:40px;
    margin-bottom:0;
}
/* youtube */
.youtube_wrap {
    padding:0 20px;
    box-sizing:border-box;
}
.youtube_wrap h3 {
    width:100%;
    max-width:720px;
    margin: 0 auto 40px;
}
.youtube2 {
  position: relative;
  width: 100%;
    max-width:740px;
    margin:0 auto 60px;
  padding:0 0 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* footer */
footer {
    text-align: center;
    padding-bottom: 20px;
}

footer ul {
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

footer a {
    display: block;
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    border-radius: 3px;
    transition: 0.3s;
}

footer a:hover {
    opacity: 0.3;
}

footer .link_fb {
    background: url(../img/icon_fb.png) no-repeat center/contain;
}

footer .link_ig {
    margin-right: 30px;
    background: url(../img/icon_ig.png) no-repeat center/contain;
}

footer .link_yt {
    background: url(../img/icon_yt.png) no-repeat center/contain;
    margin-right: 30px;
}

footer .foo_text {
    font-size: 12px;
    margin-bottom: 10px;
    color: #727171;
}

footer .last_text {
    font-size: 10px;
    color: #727171;
}

footer .nho_t {
    font-size: 12px;
    margin: 30px 0 10px;
    color: #727171;
}

footer .nho_link a {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 34px;
    max-width: 300px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

footer .pw_link a {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 58px;
    max-width: 240px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

/* topへ */
#page_top {
    width: 120px;
    height: 40px;
    position: fixed;
    right: 0;
    bottom: 10px;
    z-index: 900;
    border:1px solid #000;
    border-right:none;
    background:rgba(255, 255, 255, 0.80);
    border-radius:5px 0 0 5px;
    box-sizing:border-box;
}

#page_top a {
    position: relative;
    display: block;
    width: 120px;
    height: 40px;
    text-decoration: none;
}

/*#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #000;
    position: absolute;
    width: 25px;
    height: 25px;
    right: 5px;
    top:5px;
    margin: auto;
    text-align: center;
}*/

#page_top a::after{
  content: 'トップへ戻る';
  font-size: 13px;
  position: absolute;
  top: 12px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #000;
}

.sp_on {
    display: none;
}

/*.sp_off {
  display:block;
}*/

/* .kounyu_btn */
#kounyu_btn a {
    position: fixed;
    right: 29px;
    bottom: 30px;
    width: 130px;
    height: 80px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.80);
    border-radius: 5px;
}
#kounyu_btn a::after{
  content: 'クッションシートのご購入はこちらをクリック';
    font-size: 13px;
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    color: #000;
    padding: 10px;
    line-height: 1.4;
}

@media screen and (min-width: 740px) {
.youtube2 {
    width:740px;
    height:400px;
    padding:0;
}
}

/* サイズ別設定 */
@media screen and (max-width: 850px) {}

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

@media screen and (max-width: 574px) {
    .sp_on {
        display: block;
    }

    .sp_off {
        display: none;
    }
    .osusume .item {
        display:block;
        padding:0 20px;
        box-sizing:border-box;
    }
    .osusume .left,.osusume .right {
        width:100%;
    }
    .link a {
        width:100%;
    }
    .osusume h3::after, .osusume h3::before {
        display:none;
    }
    footer {
        margin-bottom:100px;
    }
    .sp_sukima {
        padding:0 20px;
        box-sizing:border-box;
    }
    .howto_wrap p, .paint_wrap p {
        padding:0 20px 0 0;
        margin-bottom:20px;
    }
}

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

@media screen and (max-width: 420px) {
    .img08, .img11 {
        margin-bottom:40px;
    }
    .howto_wrap .flex,.paint_wrap .flex {
        flex-wrap:wrap;
    }
    .howto_wrap figure, .paint_wrap figure {
        width:100%;
        margin:0;
    }
    .howto_wrap p, .paint_wrap p {
        width:100%;
        padding:10px 20px;
        margin-bottom:40px;
    }
    .howto_wrap, .paint_wrap, .osusume {
        margin-bottom:40px;
    }
}