@charset "UTF-8";

@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:400&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:700&display=swap");

/*============================
general
============================*/

.wapper .content-wrap{
  font-family: "Noto Serif JP", univia-pro, -apple-system, BlinkMacSystemFont, serif;
}

.wrapper .p-box{
  position: relative;
}

/*============================
foryou
============================*/
.wrapper .foryou .foryou-gif{
  position: absolute;
  width: calc(622/750*100%);
  top: 24%;
  left: 50%;
  transform: translateX(-50%);

}
/*============================
slider
============================*/
.wrapper .slick {

}
/* voice-slider */
.wrapper .slick{
  width: calc(672/750*100%);
  margin: 0 auto;
}
.wrapper .slick img{
  width: 100%;
}

.wrapper .slick .slide-arrow{
  position: absolute;
  width: calc(48/672*100%);
  top:45%;
  z-index:10;
  cursor: pointer;
}
.wrapper .slick .slide-arrow.prev-arrow{
  left:-4%;
}
.wrapper .slick .slide-arrow.next-arrow{
  right:-4%;
}
/*============================
.img
============================*/
.img_fv-03{
	background-image:  url(https://cdn.urr.jp/Advanceds/1821/deocomic2/cmn/img/fv-03_backgroundimg.jpg);
    background-size: cover;
        padding-bottom: calc(715/750*100%);
        position: relative;
}
.onayami-03{
	background-image:  url(https://cdn.urr.jp/Advanceds/1821/deocomic2/cmn/img/onayami-03_backgroundimg.jpg);
    background-size: cover;
        padding-bottom: calc(705/750*100%);
        position: relative;
}
.animation_zoomin{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
.zoomin_img01{
	position: absolute;
	margin-top: calc(350/750*100%);
	width:50%;
}
.zoomin_img02{
	position: absolute;
	margin-top: calc(500/750*100%);
	margin-left: calc(200/750*100%);
	width:55%;	
}
.zoomin {
  animation-name: zoomin;
  animation-direction: normal;
}

@keyframes zoomin {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.img_offer-11{
background-image:  url(https://cdn.urr.jp/Advanceds/1821/deocomic2/cmn/img/offer-11_2512.jpg);
background-repeat:  no-repeat;  /* 背景の繰り返し設定 */
 background-size:cover;
}
.img_offer-02_b{
	background-image:  url(https://cdn.urr.jp/Advanceds/1821/deocomic2/cmn/img/offer-02_b.png);
    background-repeat:  no-repeat;  /* 背景の繰り返し設定 */
 background-size:cover;
}
.animation_flash{
  animation-iteration-count: infinite;
  animation-duration: 0.8s;
}
.keyframe1 {
  animation-name: flash;
}
@keyframes flash {
	to{
		transform:scaleX(1.1);
	}
 0% {
   opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

/*============================
graph
============================*/
.pie_chart1{
	width: 100%;
	height: auto;
	position: relative;
	background-color: #fff;
  background-image:
    radial-gradient(#d2d2d2 
	calc(100%/8), transparent calc(100%/8));
  background-size: 4% 4%;
	}
.pie_chart2{
	width: 100%;
	height: auto;
	position: relative;
	background-color: #fffde7;
	}
.pi_graph {

transform-origin:center;
transform:rotate(-90deg);
}
	
.enko {
fill:none;
stroke-width:8;
stroke-dasharray:125;
/* 最初は非表示状態 */
stroke-dashoffset:125;
}
/* グレー */
.base {
  position: relative;
  fill: none;
  stroke-width: 8;
  stroke: #d5d5d5;
  stroke-dasharray:140;
stroke-dashoffset:0;
}	
/* グリーン */
#green {

stroke:#51bfa6;
animation:green 3s ease-in-out infinite;
}
@keyframes green {
      to {

stroke-dashoffset:4;
}}
.pi_graph_text_img{
	position: absolute;
	width: calc(299/750*100%);
	top:23%;
	left: 32%;
}
.pi_graph_anno{
	position: absolute;
	width: calc(350/750*100%);
	top:85%;
}
/*============================
.btn-middle
============================*/

.wrapper .btn-middle{
width: calc(692/750*100%);
  margin: 0 auto;
	}
.wrapper .renewal .btn-middle{
  padding-bottom: calc(50/750*100%);
	}
.wrapper .uv-02 .btn-middle{
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translateX(-50%);
}	
.bound01 {
  animation: bound01 2s infinite;
}
	.bound01_img{
		padding: 0px;
	}
@keyframes bound01 {
  0% { transform:translateX()}
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(10px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(10px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}

/*============================
.btn-fixed
============================*/

.btn-fixed{
		  padding:10px;
		  width:100%;}
.btn-fixed img{
		width: 332px;}
	.hidden {
 animation: fade .2s ease-in-out forwards;
 pointer-events: none;
}

@keyframes fade {
 from {
  opacity: 1;
 }

 to {
  opacity: 0;
 }}
.visible {
 animation: fadeOut .2s ease-in-out forwards;
 pointer-events:all;
}

@keyframes fadeOut {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}	
/*============================
.offer
============================*/

.wrapper .offer .count-text{
  font-size: min(calc(22/375*100vw),22px);
  text-align: center;
  line-height: calc(62/45);
  margin-bottom: 0.5em;
}

.wrapper .offer .count-text .count-line{
  background: linear-gradient(transparent 60%, yellow 30%);
}

.wrapper .offer .count-caution{
  font-size: min(calc(8/375*100vw),8px);
  text-align: right;
  padding-right: 10%;
  padding-bottom: 5%;
}
.wrapper .offer .offer-text-box{
  background-color: #439482;
  color: #FFF;
  padding:5% 0 8%;
}
.wrapper .offer .btn-offer{
  position: absolute;
  width: calc(601/750*100%);
  top: 71%;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper .offer .offer-text-box ul{
  width: calc(660/750*100%);
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.3;
}
.wrapper .offer .offer-text-box .indent-list{
  margin-bottom: 2em;
}
.wrapper .offer .offer-text-box .indent-list li{
  text-indent: -1em;
  padding-left: 1em;
}

.wrapper .offer .offer-text-box .indent-list li a{
  color: #FFF;
}