@charset "utf-8";

/* ---------------------------------------------------
   File: privacy.css
   Version: 1.0.0
   Update: 2022-03-04
   Author: https://flowlab.co.jp

   (c)2007-2022 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */

/* ====================================================
		Layout
==================================================== */
#main .row {
  width: 840px;
  padding: 0;
  position: relative;
}
#main::after {
  width: 270px;
  height: 270px;
  background: url("../img_common/img_dot_01.png") no-repeat 0 0 / 270px;
  bottom: 200px;
  left: inherit;
  right: -20px;
}


/* ====================================================
		Page Title
==================================================== */
/* -------------------------------
		Animation - Decoration
------------------------------- */
#pageTitleArea::before {
  width: 130px;
  height: 138px;
  background: url("../img_common/img_decoration_09.png") no-repeat 0 0 / 130px 138px;
  left: 12%;
}
#pageTitleArea::after {
  width: 116px;
  height: 174px;
  background: url("../img_common/img_decoration_10.png") no-repeat 0 0 / 116px 174px;
  top: 100px;
}

/* -------------------------------
		Animation - Paints
------------------------------- */
#main h1::before {
  width: 270px;
  height: 202px;
  background: url("../img_common/img_texture_pink_06.png") no-repeat 0 0 / 270px 202px;
  animation: fuwafuwa3 2s infinite ease-in-out .2s alternate;
  top: 200px;
  left: -100px;
}
#main h1::after {
  background: none;
}
#main h1 span::before {
  width: 268px;
  height: 230px;
  background: url("../img_common/img_texture_green_06.png") no-repeat 0 0 / 268px 230px;
  animation: fuwafuwa3 3s infinite ease-in-out .2s alternate;
  top: 120px;
  right: -90px;
}
#main h1 span::after {
  width: 182px;
  height: 126px;
  background: url("../img_common/img_texture_yellow_03.png") no-repeat 0 0 / 182px 126px;
  animation: fuwafuwa2 2s infinite ease-in-out .2s alternate;
  top: 100px;
  right: 80px;
}


/* ====================================================
		Contents
==================================================== */
/* -------------------------------
		BasicPolicy / Purpose
------------------------------- */
#basicPolicy, #purpose {
  padding-bottom: 40px;
}

/* -------------------------------
		Safety Measure
------------------------------- */
#safetyMeasure {
  padding-bottom: 80px;
}


/* ====================================================
		Sub Footer
==================================================== */
/* -------------------------------
		Animation - Paints
------------------------------- */
#subFooter::before {
  background: none;
}
#subFooter::after {
  background: none;
}







/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  
  /* ====================================================
      Layout
  ==================================================== */
  #main .row {
    width: inherit;
    padding: 0 50px;
  }
  
  /* ====================================================
      Page Title
  ==================================================== */
  /* -------------------------------
      Animation - Decoration
  ------------------------------- */
  #pageTitleArea::before {
    left: 6%;
  }
  #pageTitleArea::after {
    right: 110px;
  }
  
  /* -------------------------------
      Animation - Paints
  ------------------------------- */
  #main h1 span::before {
    right: -120px;
  }
  #main h1 span::after {
    right: 50px;
  }
}













/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  
  /* ====================================================
      Layout
  ==================================================== */
  #main .row {
    width: inherit;
    padding: 0 5%;
  }
  #main::after {
    width: 200px;
    height: 200px;
    background-size: 200px;
    bottom: -200px;
    right: 200px;
  }
  
  
  /* ====================================================
      Page Title
  ==================================================== */
  /* -------------------------------
      Animation - Decoration
  ------------------------------- */
  #pageTitleArea::before {
    width: 80px;
    height: 85px;
    background-size: 80px 85px;
    top: 80px;
    left: 10px;
  }
  #pageTitleArea::after {
    width: 64px;
    height: 96px;
    background-size: 64px 96px;
    top: 50px;
    right: 10px;
  }

  /* -------------------------------
      Animation - Paints
  ------------------------------- */
  #main::after {
    width: 200px;
    height: 200px;
    background-size: 200px;
    bottom: 90px;
    right: -50px;
  }
  #main h1::before {
    width: 200px;
    height: 150px;
    background-size: 200px 150px;
    top: 80px;
  }
  #main h1 span::before {
    width: 150px;
    height: 128px;
    background-size: 150px 128px;
    top: 120px;
    right: -50px;
  }
  #main h1 span::after {
    width: 100px;
    height: 69px;
    background-size: 100px 69px;
    top: 120px;
    right: 40px;
  }
  
  
  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      BasicPolicy / Purpose
  ------------------------------- */
  #basicPolicy, #purpose {
    padding-bottom: 20px;
  }
  
  /* -------------------------------
      Safety Measure
  ------------------------------- */
  #safetyMeasure {
    padding-bottom: 40px;
  }


  
  /* ====================================================
      Sub Footer
  ==================================================== */
  /* -------------------------------
      Animation - Paints
  ------------------------------- */
  #subFooter::before {
    width: 150px;
    height: 201px;
    background-size: 150px 201px;
    bottom: 700px;
    right: -20px;
  }
  #subFooter::after {
    bottom: 650px;
    right: 10px;
  }


}