@charset "utf-8";
/* CSS Document */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
b, i, dl, dt, dd, ol, ul, li,
footer, header {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ul,ol { list-style-type: none;}
p { margin: 0;}
img { border: 0; vertical-align: bottom;}

body {
    background-color: #fff;
    color: #222;
    font-size: 18px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

a { color: #222; text-decoration: none;}
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)";}
a[href^="tel:"] {
    pointer-events: none;
}

#wrap {
    position: relative;
    margin: 0px auto;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    z-index: 1;
}

/* header
--------------------------*/
#spw header {
    height: 600px;
    background: url("/public/images/default/laetitienpet/spawan/spw_fv.jpg") no-repeat top center;
}
#spw header .spwFv { width: 1200px; margin: 0 auto;}
#spw header .spwFv h1 { padding: 45px 100px; animation: spwlogo 1.0s ease-out;}

@keyframes spwlogo {
  0%{
      transform: translate(0, -30px);
      opacity: 0;
    }
  100%{
      transform: translate(0, 0);
      opacity: 1;
    }
}

/* spwMessage
--------------------------*/
#spwMessage { position: relative; width: 1200px; margin: 0 auto; padding: 40px 0 120px;}
#spwMessage .messPic { position: absolute; top: -40px; left: 0; animation: spwmess 1.0s ease-out;}
#spwMessage .messTxt { margin-left: 530px; z-index: 10; animation: spwmess 1.0s ease-out;}
#spwMessage .messHeart { position: absolute; bottom: 250px; right: 0; z-index: 1; animation: spwmess 2.0s ease-out;}
#spwMessage .messTxt02 { margin-top: 130px; text-align: center; animation: spwmess 1.0s ease-out;}

@keyframes spwmess {
  0%{
      transform: translate(0, 80px);
      opacity: 0;
    }

  100%{
      transform: translate(0, 0);
      opacity: 1;
    }
}

/* menu
--------------------------*/
#spwMenu { background: #bfac9e; padding: 40px 0; overflow: hidden;}
#spwMenu ul { width: 1000px; margin: 0 auto;}
#spwMenu ul li { width: 33.33%; float: left; text-align: center;}


/* spw Intro
--------------------------*/

#spwIntro {
    background: url("/public/images/default/laetitienpet/spawan/SPW_T_back_01.jpg") no-repeat top right / 100% auto, url("/public/images/default/laetitienpet/spawan/SPW_T_back_02.jpg") no-repeat bottom center / 100% auto;
}
#spwIntro .Intro_con { position: relative; width: 1200px; margin: 0 auto;}
#spwIntro .Intro_txt01 { padding: 100px 0; text-align: center;}
#spwIntro .IntroPic { margin-left: 130px; float: left;}
#spwIntro .Intro_txt02 { margin-top: 20px; margin-right: 20px; float: right;}
#spwIntro .Intro_txt03 img { margin: 100px 0;}
#spwIntro .arrow  { padding-bottom: 70px; text-align: center; }



/* item
--------------------------*/
#spwTreat, #spwBrush, #spwTowl { padding: 80px 0;}
#spw .item { width: 1000px; margin: 0 auto; position: relative;}
#spw .item h2 { text-align: center; margin-bottom: 30px;}
#spw .item .mainPic { margin-bottom: 60px;}
#spw .item .itemDetail { display: flex; justify-content: space-between;　overflow: hidden;}
#spw .item .itemDetail .detail p { margin-bottom: 5px;}




/* Treatment
--------------------------*/

.howto .cnt { width: 1200px; margin: 80px auto;}
.cnt_wrap_01 { width: 1200px; margin: 0 auto;}
.spw_new_cnt {text-align: center; margin-bottom: 100px;}
.spw_new_cnt p {text-align: center; margin-bottom: 100px;}

#spwTreat .treat_flex_01 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px;}
#spwTreat .moist {background: url("/public/images/default/laetitienpet/spawan/SPW_T_back_04.jpg") no-repeat bottom center; width: 100%; padding-top: 50px;}
#spwTreat .moist .moist_cnt {display:flex; justify-content: space-between; width: 920px; margin: 0 auto; padding-bottom: 50px;}
#spwTreat {background: url("/public/images/default/laetitienpet/spawan/SPW_T_back_03.jpg") no-repeat top right / 100% auto;}
#spwTreat .treat_flex_02 {display: flex; justify-content: space-between; align-items: center; width:80%;
    margin-left: auto; margin-right: auto; margin-bottom: 80px;}

#spwTreat .treat_story {background-color: #f9f8f7; padding: 80px 0; margin-bottom: 80px;}
#spwTreat .cnt_wrap_01 h2 {text-align: center; margin-bottom: 80px;}
#spwBrush { background: url("/public/images/default/laetitienpet/spawan/SPW_T_back_03.jpg") no-repeat top right / 100% auto;}


/* Brush
--------------------------*/


#spwBrush .brush_Intro { position: relative; width: 100%; margin-bottom: 100px;}
#spwBrush .brush_Intro .Intro_txt { position: absolute; width: 100%; text-align: center; z-index: 1; top: 200px; }
#spwBrush .brush_cnt_01 {background-color: #ccbdb1; padding: 110px 0; text-align: center;}
#spwBrush .brush_cnt_02 {display: flex; justify-content: space-between; width: 1200px; margin-top: 80px; margin-left: auto; margin-right: auto;}



/* Towl
--------------------------*/

#spwTowl {background: url("/public/images/default/laetitienpet/spawan/spw_towl_back.jpg") no-repeat top left;background-size: 100% auto;}
#spwTowl .Towl_cnt_01 { background-color: #faf9f9; padding: 90px;}
#spwTowl .Towl_cnt_01 h2 {margin-bottom: 90px;}
#spwTowl .Towl_cnt_txt01 { text-align: center; margin-bottom: 70px;}
#spwTowl .Towl_cnt_02 { width: 1000px; margin: 0 auto; padding-top: 80px;}
#spwTowl .Towl_cnt_txt02 {display: flex;}

/* Offer
--------------------------*/
#spwOffer {
    background: url("/public/images/default/laetitienpet/spawan/SPW_last_back_01.jpg") no-repeat top center;
    background-size: 100% auto; padding-top: 150px;
}
#spwOffer .spwOffer_cnt01  { margin-bottom: 100px;}
#spwOffer .spwOffer_cnt02  { text-align: center; margin-top: 80px;}


/* Last
--------------------------*/

#spwLast {
    background: url("/public/images/default/laetitienpet/spawan/spw_towl_back.jpg") no-repeat top left;
    background-size: 100% auto; margin-top: 100px; padding: 200px;
}



@media (min-width:2000px) {
    #spwTreat { background-size: 2000px auto;}
    #spwTowl { background-size: 2000px auto;}
}



/* animation
--------------------------*/
.fadein {
    opacity: 0;
    transform: translate(0,50px);
    transition: all 1s;
}
.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
.fdMn01 {
    transition: all 0.5s;
}
.fdMn02 {
    transition: all 1.0s;
}
.fdMn03 {
    transition: all 1.5s;
}

/* spwMessage_数値変更
--------------------------*/
#spwMessage { position: relative; width: 1200px; margin: 0 auto; padding: 70px 0 80px;}
#spwMessage .messTxt { margin-left: 530px; z-index: 10; animation: spwmess 1.0s ease-out; }
#spwMessage .messTxt { margin-left: 530px; z-index: 10; animation: spwmess 1.0s ease-out; }

/* menu_数値変更
--------------------------*/
#spwMenu ul li { width: 25%; float: left; text-align: center;}

/* shampoo_コンテンツ追加
--------------------------*/
#spwShampoo {background: url("/public/images/default/laetitienpet/spawan/SPW_T_back_03.jpg") no-repeat top right / 100% auto;}
#spwShampoo .shampoo_item {background-color:#f9f9f9; width:100%; padding: 50px 0; margin-top: 100px; }
#spwShampoo .shampoo_Detail { width: 1000px; margin: 0 auto; display: flex; justify-content: space-between;　overflow: hidden; }
#spwShampoo .shampoo_main  { width: 1000px; margin: 0 auto; }
#spwShampoo .shampoo_main h2 { text-align: center;padding: 100px 0 80px;}
#spwShampoo .shampoo_main h3 { text-align: center;}
#spwShampoo .shampoo_main .Shampoo_txt01 { text-align: center;padding: 70px 0;}
#spwShampoo .shampoo_main .Shampoo_txt02 { margin-bottom: 60px;}

/* Last_追加
--------------------------*/
#spwLast .spwLast_cnt {text-align: center;}