@charset "utf-8";
/*リセット追加分*/
/*width内にpaddingやborderを含める！「box-sizing」*/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*クリアフィックス*/
.cf:after {
  content: "";
  clear: both;
  display: block;
}
/*font*/
* {
  /*-webkit-text-size-adjust: 100%;*/
  font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', 'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, Arial, 'メイリオ', Meiryo, sans-serif;
}
.bold {
  font-weight: bold;
}
ol, ul {
  list-style: none;
}
/**/
/*オンマウスで透過
*/
a img {transition:.5s ease;}
a:hover img, a:focus img {filter: brightness(1.1);}
/**font*/
html {
  font-size: calc(112.5% + 0.25vw)
}
html {
  font-size: calc(100vw / 32);
}
html {
  font-size: 62.5%; /*（1rem = 10px）*/
}
body {
  /* スマートフォン端末用* 基本のフォントサイズを12pxにする。*/
  font-size: 12px;
  font-size: 1.2rem;
}
/*  レイアウト*/
body {
  background: #fce3e9;
  /*display: -webkit-box;  Android */
 /* display: -ms-flexbox;  IE10 */
 /*  display: -webkit-flex; Safari */
  display: block;
  min-height: 100vh;
  -webkit-box-direction: column; /* Android */
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */ 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */ 'Segoe UI', /* Windowsの欧文 */ 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */ Meiryo, /* Windowsのメイリオ */ sans-serif;
}
#container {
  -webkit-box-flex: 1; /* Android */
  -ms-flex: 1; /* IE10 */
  flex: 1;
}
/* H1～H5*/
.wrapper {
  margin-right: auto; /* 1 */
  margin-left: auto; /* 1 */
  /*max-width: 980px;*/ /* 2 */
}
h1 {
  /*font-size: calc(2rem + 2.5vmin);*/
  line-height: 0;
}
h1 img {
  width: 100%;
  max-width: 960px;
}
h2 {
  font-size: 5vmin;
  font-size: calc(0.5rem + 2.5vmin);
}
h3 {
  font-size: calc(0.5rem + 2.5vmin);
}
h4 {
  /*font-size: 100vw;*/
}
.movie-position1{
  width: 93%;
  margin-top: -58.6%;
  margin-left: 3.4%;
  margin-bottom: 2%;
}
.center {
  text-align: center;
}
.fs14 {
  font-size: 1.4em;
}
.p10 {
  padding: 10%;
}
.mt10 {
  margin-top: 10% !important;
}
/*文字装飾*/
.thinline_Y {
  background: linear-gradient(transparent 60%, #ff0 0%);
}
.txtpink {
  color: #fa3487
}
.txtbold {
  font-weight: bold !important
}
.red {
  color: #f00;
}
.bigbold {
  font-size: 2em;
  font-weight: 600;
}
/*表示*/
.pc {
  display: none !important;
}
.sp {
  display: block !important;
}
/* golumayu*/
.contents {
  background: #fce3e9;
}
.contents img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.contents img.small {
  width: 80%;
}
img.m5 {
  margin: 5% auto;
}
p.mt5, img.mt5 {
  margin-top: 5% !important;
}
/*ボタン部分*/
.bnrarea {
    position: relative;
    height: 0;
    padding-top: 43.0%;
    /* margin-bottom: 0%; */
    background: url(../img/cvarea.jpg) 0 no-repeat;
    background-size: contain;
}
.bnrarea_fv {
    position: relative;
    height: 0;
    padding-top: 38.76%;
    /* margin-bottom: 0%; */
    background: url(../img/3.jpg) 0 no-repeat;
    background-size: contain;
}

img.b4 {
    position: absolute;
    width: 80%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 15.5%;
}
img.b5 {
    position: absolute;
    width: 80%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 26%;
    transition:.5s ease;
}
img.b5:hover, img.b5:focus {filter:brightness(1.1);}
.notice {
  width: 94%;
  margin: 2% auto;
  border: 2px solid #5F5F5F;
}
.notice h2 {
  font-size: 1.4em;
  text-align: center;
  font-weight: 600;
  color: #fff;
  padding: 2%;
  background: #5F5F5F;
}
.notice p, .notice ul {
  font-size: 1em;
  text-align: left;
  padding: 3%;
  line-height: 1.8;
}
.notice ul li:before {
  content: "●";
}
/*成分*/
.seibun {
  width: 90%;
  line-height: 150%;
  background: rgba(249, 249, 249, 1.00) none repeat scroll 0 0;
  color: #000000;
  font-size: 98%;
  text-align: left;
  margin: 10% auto;
  padding: 0px 8px 8px 8px;
  border: 1px solid rgba(199, 199, 199, 1.00);
}
.seibun h5 {
  font-size: 108% !important;
  font-weight: bold !important;
  margin: 10px 0px 5px 0px !important;
  border-bottom: 1px solid rgba(188, 188, 188, 1.00) !important;
}
/**/
.hojyuinfo {
  padding: 3%;
  background: #ffffff;
  border: 13px solid #4aa1a8;
  overflow: hidden
}
.hojyuinfo h3 {
  color: #262626;
  margin-bottom: 3%;
  line-height: 1.5;
}
.hojyuinfo p {
  line-height: 1.3;
}
/*文字を明朝にする*/
.mincho {
  font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}
.FR {
  float: right;
  clear: right;
  margin-left: 1%;
}
/*animation*/
.limitation {
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}
.nk01 {
  text-align: center;
  margin: 5% auto 0;
}
.nk01 img {
  width: 80%;
}
/*checkbox
------------------------*/
.checkbox {
  width: 90%;
  font-size: 1.4em;
  line-height: 180%;
  margin: 2% 0 2% 10%;
  text-align: left;
}
.checkbox input {
  display: none;
}
.checkbox-parts {
  padding-left: 20px;
  position: relative;
  margin-right: 20px;
}
.checkbox-parts::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -10px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox input:checked + .checkbox-parts::after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #c00;
  border-right: 3px solid #c00;
}
.guideline {
  width: 96%;
  text-align: left;
  line-height: 1.6;
  margin: 2% auto;
  padding: 3% 4%;
  background: #ddd;
}
#entry {
  width: 400px;
  border: 5px dotted #ddd;
  margin: 2% auto;
}
/*footer*/
footer {
font-family:noto_sans;
  text-align: center;
  color: #000000;
  background: #fce3e9;
  padding: 2% 0;
}
.footerarea {
  width: 100%;
  margin: 0 auto;
  padding: 1% 0;
  line-height: 1.6;
  vertical-align: middle;
}
.footerarea ul {
  list-style-type: none;
}
footer .footerarea ul li {
  display: inline-block;
}
footer .footerarea ul li a {
  color: #000000;
  text-decoration: none;
}
footer .footerarea ul li a:hover {
  text-decoration: underline;
}
footer p {
  text-align: center;
  width: 100%;
  padding: 5px 0px;
  clear: both;
}
footer h4 {
  font-weight: normal;
  clear: both;
  text-align: center;
  padding: 2%;
  width: 90%;
  margin: 0 auto;
  line-height: 1.6
}
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 100%;
  font-weight: bold;
  background: rgba(49, 173, 44, 0.7);
  border-radius: 10px; /* CSS3草案 */
}
#page-top a {
  text-decoration: none;
  color: #fff;
  padding: 20px;
  text-align: center;
  display: block;
  border-radius: 5px;
}
#page-top a:hover {
  opacity: 0.7;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}
/*============================
 btn
============================*/
main .btnCont {
  position: relative;
}
main .btn {
  position: absolute;
  bottom: 8.5%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0);
}
main .btn a {
  transition: filter .5s ease-out;
}
main .btn a:hover {
  filter: brightness(120%);
  opacity: 1.0;
}
/*============================
 movie
============================*/
/*--20231130_文責：山本ケ--*/
#movie .popup-iframe {
    position: relative;
    max-width: 960px;
    display: block;
    margin: 0 auto;
}
#movie .popup-iframe img {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}
#movie .popup-iframe:after {
    position: absolute;
    content: '';
    background-image: url(//mizu-ho.com/wp-content/uploads/2022/06/yt_icon_thumb_blk.png);
    background-size: contain;
    pointer-events: none;
    transition: .5s ease;
    width: 20%;
    height: 25%;
    top: 38%;
    left: 40%;
    opacity: 0.6;
}
#movie .popup-iframe:hover:after, #movie .popup-iframe:focus:after {
    background-image: url(//mizu-ho.com/wp-content/uploads/2022/06/yt_icon_thumb.png);
    opacity: 1;
}

/*--------------------------------------------------------------------------------------------------
 タブレット
------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px) {
  body {
    background: #fce3e9;
  }
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}
/*--------------------------------------------------------------------------------------------------
 PC
------------------------------------------------------------------------------------------------*/
@media screen and (min-width:920px) {
  /* PCから効くスタイル */
  body {
    background: #fce3e9;
  }
  #container {
    background: #fce3e9;
    margin: 0 auto;
  }
  .contents img {
    width: 100%;
    margin: 0 auto;
  }
  .contents img.b5 {
    width: 80%;
    margin: 0 auto;
  }
  .nk01 img {
    width: 70%;
  }
  .notice h2 {
    font-size: 1.8em;
    padding: 1%;
  }
  .notice p, .notice ul {
    font-size: 1.2em;
  }
  main .btn {
    bottom: 5%;
    width: 90%;
  }
  .movie {
    width: 90%;
}
}
