@charset "utf-8";
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
.contents {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
}

body {
	width:100%;
	font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding: 0px;
	margin: 0px auto; 
	border: 0px;
	/*overflow:hidden;
	text-align: center;*/
}

#container{	
	padding:0px;
	max-width:980px;
    width: 980px;
	margin: 0px auto; 
}

.contents img{	
	display: block;
	margin: 0 auto;
	vertical-align: bottom;
}

 img {
	border:none;
	max-width:100%;
	margin: 0px;
	}

a:link{
text-decoration:underline;
color:#4db1cb;
} 

video{	
	display: block;
	margin: 0 auto;
	vertical-align: bottom;
}

/* 背景色 */
.gradient_bg {
    background: linear-gradient(90deg, #e8fbfd 0%, #f5fdfe 22%, #fff 50%, #f5fdfe 78%, #e8fbfd 100%);
}
/*----------------------------
	accordion
-----------------------------*/
.accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.accordion_tab:hover {
	cursor: pointer;
}
.accordion_article {
	display: none;
}
.accordion_article img {
	vertical-align: bottom;
}
.accordion li img {
	display: block;
}

.notes{
	font-size: 12px;
	line-height: 1.4em;
	text-align: right;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 7px;
	font-weight: normal;
}

.br_sp {display: none;}
#top p{
    font-size: 20px;
    line-height: 1.6em;
    margin: 0;
    padding: 3%;
}
#top img {
    margin: 0 auto;
    display: block;
}
#top .btn_area{
    position:relative;
}
#top .btn_img{
    position:absolute;
    left: 0;
    right: 0;
    width: 80%;
}
#top .btn_img02{
    width: 93%;
    margin: 10px auto 0;
}

.txt_bold{
    font-weight: bold;
}
.text_red{
	color: #fb1a46;
}
.text_blue{
	color: #0362c3;
}
.underline{
	text-decoration: underline;
}
#top .txt_henkin a,
#top .txt_henkin a:hover,
#top .txt_henkin a:active,
#top .txt_henkin a:link,
#top .txt_henkin a:visited{
    font-size:14px;
    text-align: right;
    font-weight: normal;
    color: #000;
    text-decoration: underline;
    padding: 3%;
}
#Footer img {
    display: initial;
}

/*-- video --*/
.video {
    position: relative;
    height: 0;
    padding: 0px 0 50.25%;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*-- order --*/
/*header*/
.no_fix > .box_orders {
    position: absolute;
}

.box_orders p{
    white-space: nowrap;
}

/*header*/
#header p{
    margin: 0;
}
#header .box_orders {
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    border: 4px solid #E22E2E;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    padding: 5px;
    height: 85px;
    max-width: 980px;
    width: 100%;
    z-index: 8;
}
#header .box_orders div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    width: 88%;
}
#header .box_orders div .txt_order {
    color: #E22E2E;
    font-size: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
}
#header .box_orders div .txt_order {
    color: #E22E2E;
    font-size: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 480px){
.br_sp {display: block;}
#header .box_orders {
    padding: 0.5em;
    height: 15vw;
}
#header .box_orders div .txt_order {
    font-size: 3.7vw;
}
#header.box_orders div .txt_small, #header.box_orders div .txt_date {
    font-size: 2.5vw;
    margin: 0;
}
}

/* last */
#top .box_orders {
    border: 0;
    height: 12vh;
    line-height: 1.2em;
    margin: 0 auto 10px;
}
#top .box_orders div {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin:10px 0;
}

#top .box_orders div .txt_order {
    font-size: 20px;
    padding: 0;
    margin: 0 0 0.3em;
    text-align: center;
    width: 100%;
}

#top .box_orders div .txt_marker {
    color: #E22E2E;
    background:linear-gradient(transparent 60%, #f9e99c 60%);
 }

#top .box_orders div .txt_order span span {
    color: #000;
    font-size: 120%;
}

#top .box_orders div .txt_small,
#top .box_orders div .txt_date {
    margin: 0 0 0 1em;
    font-size: 110%;
	padding: 0;
}

@media screen and (max-width: 640px) {
#top .box_orders div .txt_order {
    font-size: 3.7vw;
  }

#top .box_orders div .txt_small,
#top .box_orders div .txt_date {
    margin: 0;
    font-size: 3vw;
	padding: 1%;
  }
}


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

20分後ボタンが無効になるカウントダウンコンテンツ
.box_countdown

==============================================*/   
.box_countdown {
}

.box_countdown .timer span {
  color: #fff;
}

.box_countdown .ttl {
  font-size: 150%;
  text-align: center;
  font-weight: bold;
}

.box_countdown .ttl span {
  color: #e53535;
}

.box_countdown .ttl span.large {
  font-size: 150%;
}

.box_countdown .timer {
  background: #e53535;
    padding: 0.5em 0 0.3em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 0.1em;
  box-sizing: border-box;
    line-height: 1em;
}

.box_countdown .timer span {
  color: #fff;
  margin: 0;
}

.box_countdown .timer .txt {
  background: #fff;
  color: #333;
  display: inline-block;
  width: 3em;
  text-align: center;
  line-height: 1.3em;
  font-size: 45%;
  padding: 0.5em;
  font-weight: bold;
  letter-spacing: 0;
  margin-right: 1em;
}

@media screen and (max-width: 640px) {
  .box_countdown .ttl {
    font-size: 4vw;
  }

  .box_countdown .timer {
    font-size: 6vw;
  }
}

.enquete_box .section6 {
  width: 95%;
}

.gg-danger {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  transform: scale(var(--ggs,1));
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 40px;
  vertical-align: middle;
  margin-right: 0.3em;
}
.gg-danger::after,
.gg-danger::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  background: currentColor;
  left: 7px;
}
.gg-danger::after {
  top: 2px;
  height: 8px;
}
.gg-danger::before {
  height: 2px;
  bottom: 2px;
}

.box_attention {
  background: linear-gradient(
  -45deg,
  #000 25%, #fffe68 25%,
  #fffe68 50%, #000 50%,
  #000 75%, #fffe68 75%,
  #fffe68
  );
  background-size: 40px 40px;
  width: 70%;
  margin: 1em auto 0;
  box-sizing: border-box;
  padding: 0.5em;
}

.box_attention .inner {
  background: #fffffff0;
  box-sizing: border-box;
  padding: 0.5em;
  line-height: 1.5em;
  text-align: center;
  font-size: 80%;
}
/*タイマー*/
#btn_invalid,#countTimer {
  margin: initial;
  color: #fff;
}       

p.notes{
	font-size: 12px !important;
	color: #292929;
	text-align: right;
	padding: 0 16px;
	line-height: 1.2!important;
}

/*zaiko*/
.zaiko_wrap{
    position: relative;
}
.zaiko_item{
    position: absolute;
    left: 10%;
    color: #fff;
    font-family: serif;
    font-weight: bold;
    font-size: 125%;
}
.zaiko_item:first-of-type{
    top: 15%;
}
.zaiko_item:nth-last-of-type(2){
    top: 47%;
}
.zaiko_item:last-of-type{
    top: 78%;
}

@media screen and (min-width:721px){
.zaiko_item{
    font-size: 200%;
}
}

/* move_btn */
.move_btn {
  animation: bounce 2s infinite;
  margin-bottom: 20px;
}

@keyframes bounce {
  0% {    transform: translateY(0);  }
  10% {    transform: translateY(0);  }
  25% {    transform: translateY(-20px);  }
  40% {    transform: translateY(0);  }
  65% {    transform: translateY(-10px);  }
  75% {    transform: translateY(0);  }
  85% {    transform: translateY(-5px);  }
  100% {    transform: translateY(0);  }
}

.btn_move_updown {
    animation: btn_move_updown 1s infinite ease-out;
}
@keyframes btn_move_updown {
    0% {
        transform: translateY(4px);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(4px);
    }
}

.btn_move_zoom {
    animation: btn_move_zoom 0.8s ease 0s infinite alternate;
    transform-origin: center;
}
@keyframes btn_move_zoom {
	from {
		transform: scale(0.91,0.91);
	}
	to {
		transform: scale(1,1);
	}
}

/*--- floatbtn ---*/
.floatingfix {
    width: 250px;
    position: fixed;
    bottom: 20%;
    z-index: 99;
    margin-left: 0px!important;
    border: solid 3px #d9d9d9;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5);
    background-color: #fff;
}
.floatingfix img { 
    width: 100%; 
}
.floatingfix .countTimer{
    position: absolute;
    font-size: 15px;
    top: 50%;
    translate: 0 -50%;
    right: 8%;
    line-height: 1;
}

.btn_gray {
    filter: grayscale(1);
}
.is-fixed-timer {
    display: none !important;
}

/* カウントダウンタイマー上部追従 */
#header .box_orders {
  position: relative;
}

.box_fixed {
  align-items: center;
  display: flex;
  background: #fff;
  box-sizing: border-box;
  border: 4px solid #E22E2E;
  top: 0;
  padding: 5px;
  height: 85px;
  max-width: 640px;
  width: 100%;
  position: fixed;
  z-index: 1;
}

.box_fixed div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
}

.box_fixed p {
  font-size: 120%;
  text-align: center;
  width: 100%;
}

.box_fixed p span {
  font-size: 160%;
  vertical-align: middle;
}

.clock {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  margin-right: 0.2em;
}

.clock::before, .clock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: currentColor;
  border-radius: 0.1em;
  transform: translate(-0.05em, 0.05em);
  color: #3184c8;
}

.clock::before {
  width: 0.1em;
  height: 0.4em;
}

.clock::after {
  width: 0.35em;
  height: 0.1em;
}

@media screen and (max-width: 640px) {
  #header .box_fixed {
    padding: 0.5em;
    height: 15vw;
  }
  .box_fixed p {
    font-size: 3vw;
  }

  .box_fixed p span {
    font-size: 4.5vw;
  }
}

/*-------------------------------------------------
	pr企業名スクロール
-------------------------------------------------*/


.movieBoxPR{
	position: relative;
}
.movieBoxPR *{
	box-sizing: border-box;
}

.movieBoxPR .sliderPR,
.movieBoxPR .moviePR01{
	position: absolute;
	margin:0 auto;
	left: 0;
	right: 0;
}

.movieBoxPR .sliderPR{
    width: 85%;
    top: 70%;
    height: 24%;
    overflow: hidden;
}

.movieBoxPR .sliderPR ul{
	display: flex;
	align-items: center;
	border-bottom:1px solid #c9c9c9;
	padding: 10px 0;
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: center;
}
@media only screen and (max-width : 720px){
	.movieBoxPR .sliderPR ul{
		font-size: 1rem;
	}
}

.movieBoxPR .sliderPR ul li:first-child{
	width: 40%;

}
.movieBoxPR .sliderPR ul li:nth-child(2){
	width: 30%;
}

.sliderPR div{
	animation: scrollPR 30s linear infinite;
	animation-delay: 3s;
}
@keyframes scrollPR{
	0% {transform: translateY(0)}
	100% {transform: translateY(-100%)}
}
/**/


/* ===========================
	離脱ポップアップ2枚目用
=========================== */

#modalArea2 .modalContents {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
}

/* 日付帯の調整 */
.modalArea .today_wrap02 {
position: relative;
}


/* アニメーション同期用 */
.modalArea {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .4s;
	margin: 0;
}

.modalArea.is-show {
	visibility: visible;
	opacity: 1;
}

.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.modalContents {
	background: transparent;
	padding: 0;
}

/* モールボタン群（2枚目用・画像ベース） */
.mallBoxContainer {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 20px auto 10px;
}

.mallBoxBase {
	width: 100% !important;
	display: block;
}

.mallButtonGroup {
	position: absolute;
	top: 61%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.mallButton {
	flex: 1;
	display: block;
	transition: opacity 0.2s;
}

.mallButton:hover {
	opacity: 0.8;
}

.mallButton img {
	width: 100% !important;
	height: auto;
	display: block;
}

#modalArea {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-y: auto;
}

#modalArea .modalWrapper {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	margin: 40px auto;
}

#modalArea .modalBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.txt_kome{
	font-size: 50%;
}

.note_sms {
		display: none;
}

.mg0 {  margin: 0 !important;}
.mg5 {  margin: 5px !important;}
.mg10 {  margin: 10px !important;}
.mg15 {  margin: 15px !important;}
.mg20 {  margin: 20px !important;}
.mg25 {  margin: 25px !important;}
.mg30 {  margin: 30px !important;}
.mg35 {  margin: 35px !important;}
.mg40 {  margin: 40px !important;}
.mg45 {  margin: 45px !important;}
.mg50 {  margin: 50px !important;}
/*top*/
.mgT0 {  margin-top: 0 !important;}
.mgT5 {  margin-top: 5px !important;}
.mgT10 {  margin-top: 10px !important;}
.mgT15 {  margin-top: 15px !important;}
.mgT20 {  margin-top: 20px !important;}
.mgT25 {  margin-top: 25px !important;}
.mgT30 {  margin-top: 30px !important;}
.mgT35 {  margin-top: 35px !important;}
.mgT40 {  margin-top: 40px !important;}
.mgT45 {  margin-top: 45px !important;}
.mgT50 {  margin-top: 50px !important;}
/*right*/
.mgR5 {  margin-right: 5px !important;}
.mgR10 {  margin-right: 10px !important;}
.mgR15 {  margin-right: 15px !important;}
.mgR20 {  margin-right: 20px !important;}
.mgR25 {  margin-right: 25px !important;}
.mgR30 {  margin-right: 30px !important;}
.mgR35 {  margin-right: 35px !important;}
.mgR40 {  margin-right: 40px !important;}
.mgR45 {  margin-right: 45px !important;}
.mgR50 {  margin-right: 50px !important;}
/*bottom*/
.mgB0 {  margin-bottom: 0 !important;}
.mgB5 {  margin-bottom: 5px !important;}
.mgB10 {  margin-bottom: 10px !important;}
.mgB15 {  margin-bottom: 15px !important;}
.mgB20 {  margin-bottom: 20px !important;}
.mgB25 {  margin-bottom: 25px !important;}
.mgB30 {  margin-bottom: 30px !important;}
.mgB35 {  margin-bottom: 35px !important;}
.mgB40 {  margin-bottom: 40px !important;}
.mgB45 {  margin-bottom: 45px !important;}
.mgB50 {  margin-bottom: 50px !important;}
/*left*/
.mgL5 {  margin-left: 5px !important;}
.mgL10 {  margin-left: 10px !important;}
.mgL15 {  margin-left: 15px !important;}
.mgL20 {  margin-left: 20px !important;}
.mgL25 {  margin-left: 25px !important;}
.mgL30 {  margin-left: 30px !important;}
.mgL35 {  margin-left: 35px !important;}
.mgL40 {  margin-left: 40px !important;}
.mgL45 {  margin-left: 45px !important;}
.mgL50 {  margin-left: 50px !important;}
/*Padding
--------------*/
.pd5 {  padding: 5px !important;}
.pd10 {  padding: 10px !important;}
.pd15 {  padding: 15px !important;}
.pd20 {  padding: 20px !important;}
.pd25 {  padding: 25px !important;}
.pd30 {  padding: 30px !important;}
.pd35 {  padding: 35px !important;}
.pd40 {  padding: 40px !important;}
.pd45 {  padding: 45px !important;}
.pd50 {  padding: 50px !important;}
/*top*/
.pdT5 {  padding-top: 5px !important;}
.pdT10 {  padding-top: 10px !important;}
.pdT15 {  padding-top: 15px !important;}
.pdT20 {  padding-top: 20px !important;}
.pdT25 {  padding-top: 25px !important;}
.pdT30 {  padding-top: 30px !important;}
.pdT35 {  padding-top: 35px !important;}
.pdT40 {  padding-top: 40px !important;}
.pdT45 {  padding-top: 45px !important;}
.pdT50 {  padding-top: 50px !important;}
/*right*/
.pdR5 {  padding-right: 5px !important;}
.pdR10 {  padding-right: 10px !important;}
.pdR15 {  padding-right: 15px !important;}
.pdR20 {  padding-right: 20px !important;}
.pdR25 {  padding-right: 25px !important;}
.pdR30 {  padding-right: 30px !important;}
.pdR35 {  padding-right: 35px !important;}
.pdR40 {  padding-right: 40px !important;}
.pdR45 {  padding-right: 45px !important;}
.pdR50 {  padding-right: 50px !important;}
/*bottom*/
.pdB5 {  padding-bottom: 5px !important;}
.pdB10 {  padding-bottom: 10px !important;}
.pdB15 {  padding-bottom: 15px !important;}
.pdB20 {  padding-bottom: 20px !important;}
.pdB25 {  padding-bottom: 25px !important;}
.pdB30 {  padding-bottom: 30px !important;}
.pdB35 {  padding-bottom: 35px !important;}
.pdB40 {  padding-bottom: 40px !important;}
.pdB45 {  padding-bottom: 45px !important;}
.pdB50 {  padding-bottom: 50px !important;}
/*left*/
.pdL5 {  padding-left: 5px !important;}
.pdL10 {  padding-left: 10px !important;}
.pdL15 {  padding-left: 15px !important;}
.pdL20 {  padding-left: 20px !important;}
.pdL25 {  padding-left: 25px !important;}
.pdL30 {  padding-left: 30px !important;}
.pdL35 {  padding-left: 35px !important;}
.pdL40 {  padding-left: 40px !important;}
.pdL45 {  padding-left: 45px !important;}
.pdL50 {  padding-left: 50px !important;}

.contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* h069002_1466_d1 overrides */
.section1 .button {
    position: relative;
    margin: 20px 1% !important;
}
.button .button_img {
    display: inline-block !important;
    margin: 0;
    height: 63px;
    position: absolute;
    bottom: 10%;
    left: 8%;
}

.loading_mov {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  
  animation: fadeOut 0.5s 3.4s forwards; 
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    pointer-events: auto;
  }
  99% {
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.loading_pic {
  width: 100%;
  max-width: 980px;
  height: 100%;
  background: url(https://www.mizumuclear.com/pc/images_h069002_1466/mc_pc_h069002_1466_loading_bk.jpg) no-repeat center;
  background-size: contain;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 0;
  animation: logo_fade 3.4s forwards;
}

.loading_pic img {
  display: block;
  margin: 0 auto;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0; /* 3.4秒かけて画像が消える */
  }
}
.enquete_box h2 {
    margin: 10px 0 20px;
}
@media screen and (max-width: 720px){
.enquete_box h2 {
    font-size: 18px;
    line-height: 1.7em;
}
}
.sec_sup {
    display: inline-block;
    vertical-align: 0.9em;
    margin: 0px 5px -1.75em -0.4em;
    font-weight: normal;
    letter-spacing: -0.8em;
    font-size: 10px;
}
#sec02,#sec03,#sec04,#sec05,#sec06,#sec07{
    display: none;
}
.box_attention {
    width: 780px;
}
.box_attention .inner {
    background: #fffffff8;
}
.PopupMenu {
    z-index: 8 !important;
}
#contents_wrap,
#contents,
.enquete_box {
    max-width: 980px;
    margin: 0 auto;
}

p.notes.no_bg,
.no_bg {
    background: transparent !important;
    background-color: transparent !important;
}

.fv_w{
	position: relative;
}
.fv_btn{
	position: absolute;
	width: 370px;
    bottom: 9.2%;
    right: 3.5%;
}

.today_wrap {
    display: block;
    width: 100%;
    bottom: 29.5%;
    padding: 2% 0;
    font-size: clamp(13px,5vw,28px);
    text-align: center;
    background: #f00;
    color: #fff;
    font-weight: bold;
}