@charset "utf-8";

/* -------------------------- Font --------------------------

font-family: "Zen Kaku Gothic New", serif;
font-weight: 300, 400, 500, 700, 900;

font-family: "Lato", serif;
font-weight: 100, 300, 400, 700, 900;

font-family: "Allison", cursive;
font-weight: 400;

*/

/* -------------------------- overwrite -------------------------- */

@media (max-width : 960px) {
  body{
    min-width:auto;
    overflow-x: hidden;
  }
}

/* -------------------------- Common -------------------------- */

.hydv_wrap{
  font-family: "Zen Kaku Gothic New", serif;
  font-weight:400;
  letter-spacing: 0;
  color:#19140f;
  overflow:hidden;
}
.hydv_wrap img{
  vertical-align: middle;
}
.sp_block{
  display:none;
}

@media (max-width : 960px) {
  .pc_block{
    display:none;
  }
  .sp_block{
    display:block;
  }
}

/* -------------------------- FV -------------------------- */

.hydv_fv{
  position:relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  aspect-ratio: 1 / 0.5622;
  padding-top:2.34%;
}
.hydv_fv_logo{
  width:27.45%;
  margin:0 auto 20px;
}
.hydv_fv_logo > img{
  display:block;
  width:100%;
}
.hydv_fv_desc{
  font-size:22px;
  text-align: center;
}
.hydv_fv_pic,
.hydv_fv_pic > img{
  display:block;
  width:100%;
}
.hydv_fv_badge{
  position:absolute;
  /*
  top:33.59%;
  left:56.66%;
  */
  top:36%;
  left:55%;
  display:flex;
  justify-content: center;
  align-items: center;
  width:140px;
  height:140px;
}
.hydv_fv_badge_circle{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation: hydvTextRotate 8s linear infinite;
}
@keyframes hydvTextRotate {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}
.hydv_fv_badge_text{
  font-weight:500;
  font-size:25px;
  line-height:1.36;
  letter-spacing: 0.05em;
  text-align:left;
  color:#ff2323;
}
.hydv_fv_badge_text > small{
  font-size:12px;
  vertical-align: super;
}

@media (max-width : 960px) {
  .hydv_fv{
    aspect-ratio: 1 / 1.7;
    padding-top:7.33%;
  }
  .hydv_fv_logo{
    width:325px;
    margin:0 auto 4.5%;
  }
  .hydv_fv_desc{
    font-size:18px;
    line-height:1.33;
  }
  .hydv_fv_badge{
    /* top:39.92%; */
    top:44%;
    left:55.86%;
    width:123px;
    height:123px;
  }
  .hydv_fv_badge_text{
    font-size:22px;
    line-height:1.36;
  }
}

/* -------------------------- Appear -------------------------- */

.hydv_apr{
  background-color: #eef0ff;
  padding-bottom:20px;
}
.hydv_apr_in{
  max-width:800px;
  background-repeat: no-repeat;
  background-position: left 108px top;
  background-size: 512px auto;
  padding-top:72px;
  margin:0 auto;
}
.hydv_apr_main{
  display:flex;
  margin:0 0 16px;
}
.hydv_apr_main_left{
  flex:1;
}
.hydv_apr_title{
  font-weight:500;
  font-size:36px;
  line-height: 1.77;
  letter-spacing: 0.05em;
  color:#ff2323;
  margin:0 0 12px;
}
.hydv_apr_title > small{
  font-size:16px;
  vertical-align: super;
}
.hydv_apr_desc_01{
  width:320px;
  font-size:16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin:0 0 16px;
}
.hydv_apr_desc_02{
  width:320px;
  font-size:16px;
  line-height: 2;
  letter-spacing: 0.05em;
}
.hydv_apr_desc_02 > small{
  font-size:10px;
  vertical-align: super;
}
.hydv_apr_main_right{
  width:280px;
}
.hydv_apr_video{
  width:100%;
}
.hydv_apr_note{
  font-size:10px;
  line-height:1.8;
}

@media (max-width : 960px) {
  .hydv_apr{
    padding-bottom:20px;
  }
  .hydv_apr_in{
    max-width:none;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    padding-top:40px;
    margin:0;
  }
  .hydv_apr_main{
    display:block;
    margin:0 0 35px;
  }
  .hydv_apr_main_left{
    padding-left:25px;
    margin:0 0 20px;
  }
  .hydv_apr_title{
    font-size:25px;
    line-height: 1.48;
    margin:0 0 20px;
  }
  .hydv_apr_title > small{
    font-size:12px;
  }
  .hydv_apr_desc_01{
    width:225px;
    font-size:14px;
    line-height: 1.85;
    margin:0;
  }
  .hydv_apr_desc_02{
    width:auto;
    font-size:14px;
    line-height: 1.85;
    padding:0 25px;
    margin:0 0 10px;
  }
  .hydv_apr_main_right{
    width:250px;
  }
  .hydv_apr_note{
    font-size:10px;
    line-height:1.5;
    padding:0 25px;
  }
}

/* -------------------------- Point Background -------------------------- */

.hydv_pt_wrap{
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

/* -------------------------- Point Fv -------------------------- */

.hydv_pt_fv{
  position:relative;
  max-width:1366px;
  aspect-ratio: 1 / 0.4992;
  margin:0 auto 24px;
}
.hydv_pt_fv_pdt_box{
  position:absolute;
  z-index:14;
  top:166px;
  left:524px;
  width:346px;
}
.hydv_pt_fv_pdt_pack{
  position:absolute;
  z-index:13;
  top:3px;
  left:731px;
  width:273px;
}
.hydv_pt_fv_ball_01{
  position:absolute;
  z-index:5;
  top:28px;
  left:-86px;
  width:305px;
}
.hydv_pt_fv_ball_02{
  position:absolute;
  z-index:5;
  top:282px;
  left:318px;
  width:256px;
}
.hydv_pt_fv_ball_03{
  position:absolute;
  z-index:5;
  top:359px;
  left:706px;
  width:191px;
}
.hydv_pt_fv_ball_04{
  position:absolute;
  z-index:15;
  top:304px;
  left:805px;
  width:106px;
}
.hydv_pt_fv_ball_05{
  position:absolute;
  z-index:5;
  top:303px;
  left:1003px;
  width:318px;
}
.hydv_pt_fv_ball_06{
  position:absolute;
  z-index:5;
  top:51px;
  left:1218px;
  width:115px;
}
.hydv_pt_fv_water{
  position:absolute;
  z-index:5;
  top:33px;
  left:386px;
  width:197px;
}
.hydv_pt_fv_water_sp{
  display:none;
}
.hydv_pt_fv_square{
  position:absolute;
  top:109px;
  left:493px;
  width:380px;
}
.hydv_pt_fv_line{
  position:absolute;
  z-index:4;
  top:115px;
  left:-367px;
  width:2100px;
  max-width:none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:clip-path 2s;
}
.hydv_pt_fv_line > img{
  display:block;
  width:100%;
}
.hydv_pt_fv.standby .hydv_pt_fv_line{
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.hydv_pt_fv_vertical_line{
  position:absolute;
  z-index:15;
  top:426px;
  left:50%;
  width:1px;
  height:108px;
  background-color: #000;;
}
.hydv_pt_fv_title{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  margin:0;
}
.hydv_pt_fv_title > span{
  display:block;
  font-weight:500;
  font-size:30px;
  margin:0 0 16px;
}
.hydv_pt_fv_title > img{
  display:block;
  width:177px;
}

.hydv_pt_fv_pdt_box,
.hydv_pt_fv_pdt_pack{
  transition:opacity 2s, transform 2s;
}
.hydv_pt_fv.standby .hydv_pt_fv_pdt_box,
.hydv_pt_fv.standby .hydv_pt_fv_pdt_pack{
  opacity:0;
}
.hydv_pt_fv.standby .hydv_pt_fv_pdt_box{
  transform:translateY(50px) rotate(20deg);
}
.hydv_pt_fv.standby .hydv_pt_fv_pdt_pack{
  transform:translateY(50px) rotate(-20deg);
}

@media (max-width : 960px) {
  .hydv_pt_fv{
    position:relative;
    max-width:none;
    aspect-ratio: 1 / 1.633;
    margin:0 auto 30px;
  }
  .hydv_pt_fv_pdt_box{
    z-index:14;
    top:27.30%;
    left:5%;
    width:71.6%;
  }
  .hydv_pt_fv_pdt_pack{
    z-index:13;
    top:2.37%;
    left:42%;
    width:56.4%;
  }
  .hydv_pt_fv_ball_01{
    display:none;
  }
  .hydv_pt_fv_ball_02{
    z-index:5;
    top:44.97%;
    left:-29.46%;
    width:58.93%;
  }
  .hydv_pt_fv_ball_03{
    z-index:5;
    top:54.53%;
    left:56.8%;
    width:39.86%;
  }
  .hydv_pt_fv_ball_04{
    z-index:15;
    top:48.48%;
    left:77.33%;
    width:24.4%;
  }
  .hydv_pt_fv_ball_05{
    display:none;
  }
  .hydv_pt_fv_ball_06{
    display:none;
  }
  .hydv_pt_fv_water_sp{
    display:block;
    position:absolute;
    z-index:5;
    top:7.84%;
    left:-18.13%;
    width:51.6%;
  }
  .hydv_pt_fv_square{
    top:19.62%;
    left:auto;
    right:0;
    width:86.66%;
  }
  .hydv_pt_fv_line{
    z-index:4;
    top:19.62%;
    left:0;
    width:100%;
  }
  .hydv_pt_fv_vertical_line{
    top:64.34%;
    height:98px;
  }
  .hydv_pt_fv_title > span{
    margin:0 0 12px;
  }
  .hydv_pt_fv_title > img{
    display:block;
    width:161px;
  }
}

/* -------------------------- ふわふわ揺れるアニメ（共通で使う） -------------------------- */

.hydv_bubble{
  animation-name: hydvAnimBubble;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hydv_bubble.ver1{
  animation-duration: 1.2s;
}
.hydv_bubble.ver2{
  animation-duration: 1.4s;
}
.hydv_bubble.ver3{
  animation-duration: 1.6s;
}
.hydv_bubble.ver4{
  animation-duration: 1.8s;
}
.hydv_bubble.ver5{
  animation-duration: 2.0s;
}
.hydv_bubble.ver6{
  animation-duration: 2.2s;
}

@keyframes hydvAnimBubble {
  0% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(50px);
  }
}

/* -------------------------- Point Section Head (Common) -------------------------- */

.hydv_pt_sec_head{
  position:relative;
  z-index: 2;
  max-width:800px;
  margin:0 auto 25px;
}
.hydv_pt_sec_head_title_box{
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  margin:0 0 15px;
}
.hydv_pt_sec_head_title_point{
  display:flex;
  justify-content: center;
  align-items: center;
  padding:5px 0;
}
.hydv_pt_sec_head_title_point > div:nth-child(1){
  font-family: "Lato", serif;
  font-weight:300;
  font-size:20px;
  letter-spacing: 0.05em;
  padding:3px 15px 3px 0;
}
.hydv_pt_sec_head_title_point > div:nth-child(1) > span{
  font-weight:700;
  font-size:28px;
}
.hydv_pt_sec_head_title_point > div:nth-child(2){
  font-family: "Lato", serif;
  font-weight:400;
  font-size:30px;
  border-left:1px solid #000;
  padding:3px 0 3px 15px;
}
.hydv_pt_sec_head_title_text{
  border-top:1px solid #000;
  font-weight:500;
  font-size:30px;
  letter-spacing: 0.05em;
  text-align: center;
  color:#ff2323;
  padding:13px 0;
}
.hydv_pt_sec_head_desc{
  font-size:16px;
  line-height:2;
  letter-spacing: 0.05em;
}
.hydv_pt_sec_head_desc.pt2{
  letter-spacing: 0;
}
.hydv_pt_sec_head_desc > small{
  font-size:10px;
  vertical-align: super;
}

@media (max-width : 960px) {
  .hydv_pt_sec_head{
    max-width:none;
    padding:0 25px;
    margin:0 auto 12px;
  }
  .hydv_pt_sec_head_title_point{
    padding:5px 0;
  }
  .hydv_pt_sec_head_title_point > div:nth-child(1){
    font-size:18px;
    padding:3px 10px 3px 0;
  }
  .hydv_pt_sec_head_title_point > div:nth-child(1) > span{
    font-size:25px;
  }
  .hydv_pt_sec_head_title_point > div:nth-child(2){
    font-size:25px;
    padding:3px 0 3px 10px;
  }
  .hydv_pt_sec_head_title_point > div:nth-child(2).pt3{
    font-size:23px;
  }
  .hydv_pt_sec_head_title_text{
    font-size:25px;
    line-height:1.48;
    padding:6px 0;
  }
  .hydv_pt_sec_head_desc{
    font-size:14px;
    line-height:1.85;
  }
  .hydv_pt_sec_head_desc.pt2{
    letter-spacing: 0;
  }
}

/* -------------------------- Point 1 body -------------------------- */

.hydv_pt1_body{
  position:relative;
  max-width:980px;
  padding:0 0 100px;
  margin:0 auto;
}
.hydv_pt1_ball_01{
  position:absolute;
  top:-50px;
  left:-142px;
  width:252px;
}
.hydv_pt1_ball_02{
  position:absolute;
  top:558px;
  left:-143px;
  width:377px;
}
.hydv_pt1_water{
  position:absolute;
  top:346px;
  right:-167px;
  width:223px;
}
.hydv_pt1_body_item_list{
  position:relative;
  z-index:2;
  display:flex;
  flex-flow:row wrap;
  justify-content: space-between;
  gap:10px 0;
  margin:0 0 25px;
}
.hydv_pt1_body_item{
  width:230px;
}
.hydv_pt1_body_note{
  max-width:800px;
  font-size:10px;
  line-height:1.8;
  margin:0 auto;
}

@media (max-width : 960px) {
  .hydv_pt1_body{
    position:relative;
    max-width:none;
    padding:0 0 60px;
    margin:0;
  }
  .hydv_pt1_ball_01{
    position:absolute;
    top:-63px;
    left:-32.13%;
    width:41.2%;
  }
  .hydv_pt1_ball_02{
    position:absolute;
    top:195px;
    left:-56.66%;
    width:86.66%;
  }
  .hydv_pt1_water{
    position:absolute;
    top:334px;
    right:-32.13%;
    width:51.2%;
  }
  .hydv_pt1_body_item_list{
    display:block;
    margin:0 0 22px;
  }
  .hydv_pt1_body_item{
    width:200px !important;
    margin:0 7.5px;
  }
  .hydv_pt1_body_note{
    position:relative;
    z-index:2;
    max-width:none;
    font-size:10px;
    line-height:1.5;
    padding:0 25px;
    margin:0;
  }

  .hydv_pt1_body_item_list .slick-dots {
    position: static;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap:0 5px;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
    margin:15px 0 0;
  }
  .hydv_pt1_body_item_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydv_pt1_body_item_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydv_pt1_body_item_list .slick-dots li.slick-active button {
    background-color: #000;
  }
}

/* -------------------------- Point 2 body -------------------------- */

.hydv_pt2_body{
  position:relative;
  max-width:1366px;
  padding-bottom:96px;
  margin:0 auto;
}
.hydv_pt2_line{
  position:absolute;
  top:-342px;
  left:-244px;
  display:block;
  width:1716px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:clip-path 2s;
}
.hydv_pt2_line > img{
  display:block;
  width:100%;
}
.hydv_pt2_line.standby{
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.hydv_pt2_ball_01{
  position:absolute;
  top:-60px;
  left:1102px;
  display:block;
  width:199px;
}
.hydv_pt2_ball_02{
  position:absolute;
  top:350px;
  left:-58px;
  display:block;
  width:297px;
}
.hydv_pt2_herb_list{
  position:relative;
  z-index:2;
  display:flex;
  flex-flow:row wrap;
  justify-content: center;
  gap: 20px 20px;
  max-width:740px;
  margin:0 auto;
}
.hydv_pt2_herb_item{
  width:170px;
}
.hydv_pt2_herb_item > img{
  display:block;
  width:100%;
}

@media (max-width : 960px) {
  .hydv_pt2_body{
    max-width:none;
    padding-bottom:72px;
    margin:0;
  }
  .hydv_pt2_line{
    top:132px;
    left:0;
    width:100%;
  }
  .hydv_pt2_ball_01{
    top:-40px;
    left:auto;
    right:-7.06%;
    width:18.66%;
  }
  .hydv_pt2_ball_02{
    display:none;
  }
  .hydv_pt2_herb_list{
    display:block;
    max-width:none;
    margin:0;
  }
  .hydv_pt2_herb_item{
    width:150px !important;
    margin:0 5px;
  }

  .hydv_pt2_herb_list .slick-dots {
    position: static;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap:0 5px;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
    margin:15px 0 0;
  }
  .hydv_pt2_herb_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydv_pt2_herb_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydv_pt2_herb_list .slick-dots li.slick-active button {
    background-color: #000;
  }
}

/* -------------------------- Point 3 body -------------------------- */

.hydv_pt3_body{
  position:relative;
  max-width:800px;
  padding-bottom:68px;
  margin:0 auto;
}
.hydv_pt3_ball_01{
  position:absolute;
  top:10px;
  left:-116px;
  display:block;
  width:175px;
}
.hydv_pt3_ball_02{
  position:absolute;
  top:70px;
  right:-218px;
  display:block;
  width:300px;
}
.hydv_pt3_in{
  position:relative;
  z-index:2;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.hydv_pt3_in_left{
  width:300px;
}
.hydv_pt3_mask_frame{
  position:relative;
  width:300px;
  height:300px;
  border-radius:50%;
  background-color: #FFF;
  overflow:hidden;
}
.hydv_pt3_mask_water{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  transform:translateY(100%);
}
.hydv_pt3_mask_water.anim{
  animation: hydvMaskWater 4s ease-in-out forwards;
}
@keyframes hydvMaskWater {
  0% {
    transform:translateY(100%);
  }
  25% {
    transform:translateY(75%);
  }
  50% {
    transform:translateY(50%);
  }
  75% {
    transform:translateY(25%);
  }
  100% {
    transform:translateY(0);
  }
}
.hydv_pt3_mask_mask{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:238px;
}
.hydv_pt3_mask_vector{
  position:absolute;
  top:164px;
  left:50%;
  transform:translateX(-50%);
  width:257px;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: hydvMaskVector 2s ease-in-out infinite;
}
@keyframes hydvMaskVector {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  80% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.hydv_pt3_in_right{
  width:430px;
}
.hydv_pt3_catch{
  display:block;
  margin:0 0 24px;
}
.hydv_pt3_catch > img{
  display:block;
  width:100%;
}
.hydv_pt3_desc{
  font-size:16px;
  line-height:2;
  letter-spacing: 0.025em;
  text-align: justify;
  margin-bottom:10px;
}
.hydv_pt3_note{
  font-size:10px;
  text-align:right;
}

@media (max-width : 960px) {
  .hydv_pt3_body{
    max-width:none;
    padding-bottom:68px;
    margin:0;
  }
  .hydv_pt3_ball_01{
    top:-15px;
    left:-27.06%;
    width:40.26%;
  }
  .hydv_pt3_ball_02{
    top:85px;
    right:-15.2%;
    width:55.73%;
  }
  .hydv_pt3_in{
    display:block;
  }
  .hydv_pt3_in_left{
    width:auto;
    margin:0 0 20px;
  }
  .hydv_pt3_mask_frame{
    width:302px;
    height:302px;
    margin:0 auto;
  }
  .hydv_pt3_in_right{
    display:flex;
    flex-flow:row wrap;
    width:auto;
    padding:0 25px;
  }
  .hydv_pt3_catch{
    order:2;
    display:block;
    width:95px;
    margin:0;
  }
  .hydv_pt3_desc{
    order:1;
    flex:1; 
    font-size:14px;
    line-height:1.85;
    padding-right:30px;
    margin:0;
  }
  .hydv_pt3_note{
    order:3;
    width:100%;
    font-size:10px;
    text-align:right;
    margin-top:8px;
  }
}

/* -------------------------- 365 days -------------------------- */

.hydv_every{
  display:block;
}
.hydv_every_image{
  display:block;
}
.hydv_every_image > img{
  display:block;
  width:100%;
}
.hydv_every_bottom{
  position:relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:65px 0 48px;
 }
.hydv_every_title{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:266px;
}
.hydv_every_title > img{
  display:block;
  width:100%;
}
.hydv_every_catch{
  font-size:40px;
  letter-spacing: 0.05em;
  text-align: center;
  margin:0 0 18px;
}
.hydv_every_catch > span{
  color:#ff2323;
}
.hydv_every_desc{
  font-size:28px;
  letter-spacing: 0.05em;
  text-align: center;
  margin:0 0 26px;
}
.hydv_every_points{
  display:flex;
  justify-content: center;
  gap:0 19px;
  transition:opacity 1s, transform 1s;
}
.hydv_every_points.standby{
  opacity:0;
  transform:translateY(50px);
}
.hydv_every_points > img{
  width:150px;
}

@media (max-width : 960px) {
  .hydv_every_bottom{
    padding:62px 0 48px;
   }
  .hydv_every_title{
    top:-30px;
    width:213px;
  }
  .hydv_every_catch{
    font-size:28px;
    margin:0 0 13px;
  }
  .hydv_every_desc{
    font-size:18px;
    margin:0 0 24px;
  }
  .hydv_every_points{
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:10px 15px;
    max-width:260px;
    margin:0 auto;
  }
  .hydv_every_points > img{
    width:120px;
  }
}

/* -------------------------- 365 days -------------------------- */

.hydv_howto{
  background-color: #fefae9;
  padding:70px 0 50px;
}
.hydv_howto_in{
  width:800px;
  margin:0 auto;
}
.hydv_howto_title{
  display:block;
  margin:0 0 25px;
}
.hydv_howto_title > picture{
  display:block;
  width:100%;
}
.hydv_howto_title > picture > img{
  display:block;
  width:100%;
}
.hydv_howto_list{
  display:flex;
  justify-content: space-between;
  margin:0 0 10px;
}
.hydv_howto_item{
  width:177px;
}
.hydv_howto_item_pic{
  display:flex;
  align-items: flex-end;
  height:220px;
  margin:0 0 6px;
}
.hydv_howto_item_pic > img{
  display:block;
}
.hydv_howto_item_pic.item_4{
  position:relative;
}
.hydv_howto_item_pic.item_4 > img{
  position:absolute;
  bottom:0;
  right:0;
  width:192px;
  max-width:none;
}
.hydv_howto_item_desc{
  font-size:16px;
  line-height:1.875;
  text-align: justify;
}
.hydv_howto_after{
  display:flex;
  flex-flow:column nowrap;
  justify-content: center;
  align-items: center;
  gap:12px 0;
  height:90px;
  background-color: #FFF;
}
.hydv_howto_after_title{
  font-weight:700;
  font-size:16px;
  color:#ff2323;
}
.hydv_howto_after_desc{
  font-size:16px;
}

@media (max-width : 960px) {
  .hydv_howto{
    padding:50px 0;
  }
  .hydv_howto_in{
    width:350px;
    margin:0 auto;
  }
  .hydv_howto_title{
    display:block;
    margin:0 0 20px;
  }
  .hydv_howto_list{
    display:flex;
    flex-flow:row wrap;
    gap:15px 0;
    justify-content: space-between;
    margin:0 0 40px;
  }
  .hydv_howto_item{
    width:46.76%;
  }
  .hydv_howto_item_pic{
    display:flex;
    align-items: flex-end;
    height:180px;
    margin:0 0 2px;
  }
  .hydv_howto_item_pic.item_4{
    position:static;
  }
  .hydv_howto_item_pic.item_4 > img{
    position:static;
    width:100%;
  }
  .hydv_howto_item_desc{
    font-size:14px;
    line-height:1.71;
  }
  .hydv_howto_after{
    gap:0 0;
    height:80px;
    background-color: #FFF;
  }
  .hydv_howto_after_title{
    font-size:14px;
    line-height:1.71;
  }
  .hydv_howto_after_desc{
    font-size:14px;
    line-height:1.71;
    text-align: center;
  }
}

/* -------------------------- Offer -------------------------- */

.hydv_offer{
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #fdf0b7;
  aspect-ratio: 1 / 0.6368;
  padding:5.12% 0 50px;
}
.hydv_offer_in{
  position:relative;
  max-width:800px;
  margin:0 auto;
}
.hydv_offer_bg_v{
  position:absolute;
  top:140px;
  right:-216px;
  display:block;
  width:477px;
}
.hydv_offer_bg_v > img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}
.hydv_offer_body{
  position:relative;
  z-index:2;
  display:flex;
  justify-content: space-between;
}
.hydv_offer_body_left{
  position:relative;
  flex:1;
}
.hydv_offer_title{
  width:375px;
  margin:0 0 20px;
}
.hydv_offer_title > img{
  display:block;
  width:100%;
}
.hydv_offer_desc{
  width:375px;
  font-weight:400;
  font-size:24px;
  line-height:1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
.hydv_offer_note{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  font-size:10px;
  line-height:1.8;
  padding-right:21px;
}
.hydv_offer_body_right{
  width:380px;
}
.hydv_offer_box{
  background-color: #FFF;
  border-radius:20px;
  overflow:hidden;
  padding:0 0 22px;
}
.hydv_offer_box:not(:last-child){
  margin:0 0 20px;
}
.hydv_offer_box_title{
  font-weight:500;
  font-size:22px;
  letter-spacing: 0.1em;
  text-align: center;
  color:#ff2323;
  background-color: #fbe26f;
  padding:8px 0;
  margin:0 0 30px;
}
.hydv_offer_box_title.normal{
  color:#000;
  background-color: #fbe26f;
  margin:0 0 17px;
}
.hydv_offer_box_showcase{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:0 15px;
  margin:0 0 20px;
}
.hydv_offer_box_showcase_pic{
  width:105px;
  text-align:center;
}
.hydv_offer_box_showcase_pic > img{
  width:auto;
}
.hydv_offer_box_showcase_info{
  width:180px;
  text-align:center;
}
.hydv_offer_box_showcase_labels{
  display:flex;
  justify-content: space-between;
  margin:0 0 5px;
}
.hydv_offer_box_showcase_labels > span{
  display:flex;
  justify-content: center;
  align-items: center;
  width:85px;
  height:30px;
  background-color: #fbe26f;
  font-weight:700;
  font-size:18px;
  color:#ff2323;
  letter-spacing: 0.05em;
}
.hydv_offer_box_showcase_price{
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.hydv_offer_box_showcase_price > span{
  font-size:22px;
}
.hydv_offer_box_cta{
  display:flex;
  justify-content: center;
  align-items: center;
  width:340px;
  height:50px;
  background-color: #fbe26f;
  font-weight:700;
  font-size:16px;
  letter-spacing: 0.05em;
  color:#ff2323;
  margin:0 auto 21px;
}
.hydv_offer_box_about_sbsc{
  text-align:center;
}
.hydv_offer_box_about_sbsc > a{
  font-weight:500;
  font-size:16px;
  letter-spacing: 0;
  text-align:center;
  text-decoration: underline;
  color:#4d4d4d;
}

@media (max-width : 960px) {
  .hydv_offer{
    background-size: 100% auto;
    aspect-ratio: auto;
    padding:0;  
  }
  .hydv_offer_in{
    max-width:none;
    padding:48px 0 25px;  
    margin:0 auto;
  }
  .hydv_offer_bg_v{
    position:absolute;
    top:535px;
    right:0;
    width:293px;
  }  
  .hydv_offer_body{
    max-width:325px;
    display:block;
    margin:0 auto;
  }
  .hydv_offer_body_left{
    margin:0 0 86vw;
  }
  .hydv_offer_title{
    width:100%;
    min-height:auto;
    padding:0;
    margin:0 0 15px;
  }
  .hydv_offer_title > img{
    width:100%;
  }
  .hydv_offer_desc{
    width:auto;
    font-size:18px;
    line-height:calc(50/36);
    margin:0;
  }
  .hydv_offer_note{
    position:static;
    width:325px;
    font-size:10px;
    line-height:1.5;
    padding-right:0;
    margin:15px auto 0;
  }  
  .hydv_offer_body_right{
    width:auto;
  }
  .hydv_offer_box{
    border-radius:12px;
    padding:0 0 25px;
  }
  .hydv_offer_box:not(:last-child){
    margin:0 0 25px;
  }
  .hydv_offer_box_title{
    font-size:19px;
    padding:8px 0;
    margin:0 0 36px;
  }
  .hydv_offer_box_title.normal{
    margin:0 0 15px;
  }
  .hydv_offer_box_showcase{
    gap:0 15px;
    margin:0 0 20px;
  }
  .hydv_offer_box_showcase_pic{
    width:90px;
  }
  .hydv_offer_box_showcase_pic > img{
    width:auto;
  }
  .hydv_offer_box_showcase_pic > img.sheets7{
    width:65px;
  }
  .hydv_offer_box_showcase_info{
    width:155px;
  }
  .hydv_offer_box_showcase_labels{
    margin:0 0 10px;
  }
  .hydv_offer_box_showcase_labels > span{
    width:75px;
    height:25px;
    font-size:15px;
  }
  .hydv_offer_box_showcase_price{
    font-size:14px;
    line-height:calc(45/28);
  }
  .hydv_offer_box_showcase_price > span{
    font-size:19px;
  }
  .hydv_offer_box_cta{
    width:295px;
    height:50px;
    font-size:14px;
    letter-spacing: 0;
    margin:0 auto 21px;
  }
  .hydv_offer_box_about_sbsc > a{
    font-size:14px;
  }  
}

/* -------------------------- Info -------------------------- */

.hydv_info{
  background-color: #fdf0b7;
  padding:50px 0;
}
.hydv_info_in{
  max-width:800px;
  margin:0 auto;
}
.hydv_info_block{
  margin:0 0 20px;
}
.hydv_info_block_title{
  display:flex;
  justify-content:center;
  align-items: center;
  height:52px;
  font-weight:500;
  font-size:20px;
  letter-spacing: 0.05em;
  color:#4d4d4d;
  border-bottom:2px solid #4d4d4d;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 22px auto;
}
.hydv_info_block_content{
  font-weight:400;
  font-size:14px;
  line-height:calc(24/14);
  padding-top:20px;
}
.hydv_info_block_content.last{
  border-bottom:2px solid #4d4d4d;
  padding-bottom:20px;
}

@media (max-width : 960px) {
  .hydv_info{
    padding:53px 0 40px;
  }
  .hydv_info_in{
    max-width:325px;
  }
  .hydv_info_block{
    margin:0 0 20px;
  }
  .hydv_info_block_title{
    height:40px;
    font-size:14px;
    border-bottom:1px solid #4d4d4d;
    background-size:15px auto;
  }
  .hydv_info_block_content{
    font-size:11px;
    line-height:calc(34/22);
    padding-top:16px;
  }
  .hydv_info_block_content.last{
    border-bottom:1px solid #4d4d4d;
    padding-bottom:20px;
  }
}

/* -------------------------- More -------------------------- */

.hydv_more{
  padding:0 0 50px;
}
.hydv_more_main{
  position:relative;
}
.hydv_more_main_image{
  display:block;
}
.hydv_more_main_image > img{
  display:block;
  width:100%;
}
.hydv_more_main_title{
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
}
.hydv_more_main_title > h2{
  font-family: "Allison", cursive;
  font-size:80px;
  line-height:0.8;
  text-align:center;
  margin:0;
}
.hydv_more_main_title > p{
  font-size:22px;
  letter-spacing: 0.05em;
  text-align:center;
}
.hydv_more_list{
  display:flex;
  justify-content: center;
  gap:0 20px;
}
.hydv_more_item{
  width:320px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:20px;
}
.hydv_more_item_in{
  position:relative;
  background-color:rgba(255,255,255,0.9);
  border:1px solid #000;
  padding-bottom:20px;
}
.hydv_more_item_badge{
  position:absolute;
  top:30px;
  left:-16px;
  display:flex;
  justify-content: center;
  align-items: center;
  width:95px;
  height:95px;
  border-radius:50%;
  background-color: #000;
}
.hydv_more_item_badge_text{
  font-weight:500;
  font-size:16px;
  line-height:1.375;
  letter-spacing: 0.05em;
  text-align: center;
  color:#FFF;
}
.hydv_more_item_badge_text > small{
  font-size:10px;
  vertical-align: super;
}
.hydv_more_item_pic{
  position:relative;
  z-index:2;
  display:block;
  height:185px;
  padding:28px 8px 0;
}
.hydv_more_item_pic > img{
  display:block;
  width:198px;
  margin-left:auto;
}
.hydv_more_item_note{
  font-size:10px;
  text-align: center;
  margin:0 0 17px;
}
.hydv_more_item_title{
  display:flex;
  justify-content: center;
  align-items: center;
  height:40px;
  background-color: #000;
  font-weight:500;
  font-size:18px;
  letter-spacing: 0.05em;
  color:#FFF;
  margin:0 0 20px;
}
.hydv_more_item_data{
  display:flex;
  justify-content: center;
  margin:0 0 16px;
}
.hydv_more_item_data_one{
  text-align: center;
  padding:2px 6px;
}
.hydv_more_item_data_one:nth-child(2){
  border-left:1px solid #000;
}
.hydv_more_item_count{
  font-size:16px;
  letter-spacing: 0.05em;
  margin:0 0 8px;
}
.hydv_more_item_price{
  font-size:22px;
  letter-spacing: 0.05em;
}
.hydv_more_item_price > small{
  font-size:16px;
}
.hydv_more_item_cta{
  display:flex;
  justify-content: center;
  align-items: center;
  width:240px;
  height:60px;
  background-color: #FFF;
  border:1px solid #ffce23;
  font-weight:700;
  font-size:16px;
  color:#ffce23;
  margin:0 auto;
}

.hydv_more_item.hydra_ex .hydv_more_item_in{
  border:1px solid #552378;
}
.hydv_more_item.hydra_az .hydv_more_item_in{
  border:1px solid #00a0b8;
}
.hydv_more_item.hydra_f .hydv_more_item_badge{
  left:-8px;
  width:105px;
  height:105px;
}
.hydv_more_item.hydra_ex .hydv_more_item_badge{
  background-color: #552378;
}
.hydv_more_item.hydra_az .hydv_more_item_badge{
  background-color: #00a0b8;
}
.hydv_more_item.hydra_f .hydv_more_item_pic{
  padding:20px 0 0;
}
.hydv_more_item.hydra_f .hydv_more_item_pic > img{
  width:106px;
  margin:0 auto;
}
.hydv_more_item.hydra_ex .hydv_more_item_title{
  background-color: #552378;
}
.hydv_more_item.hydra_az .hydv_more_item_title{
  background-color: #00a0b8;
}
.hydv_more_item.hydra_ex .hydv_more_item_data_one:nth-child(2){
  border-left:1px solid #552378;
}
.hydv_more_item.hydra_az .hydv_more_item_data_one:nth-child(2){
  border-left:1px solid #00a0b8;
}
.hydv_more_item.hydra_ex .hydv_more_item_cta{
  border:1px solid #552378;
  color:#552378;
}
.hydv_more_item.hydra_az .hydv_more_item_cta{
  border:1px solid #00a0b8;
  color:#00a0b8;
}

.hydv_more_to_top{
  padding:50px 0 0;
}
.hydv_more_to_top > a{
  display:flex;
  justify-content: center;
  align-items: center;
  width:380px;
  height:50px;
  background-color: #eef0ff;
  border:1px solid #000;
  border-radius:24px;
  font-size:16px;
  margin:0 auto;
}

@media (max-width : 960px) {
  .hydv_more{
    padding:0 0 45px;
  }
  .hydv_more_main{
    padding-bottom:70px;
  }
  .hydv_more_main_title{
    bottom:30px;
  }
  .hydv_more_main_title > h2{
    font-size:70px;
    line-height:0.8;
    margin:0;
  }
  .hydv_more_main_title > p{
    font-size:18px;
    white-space: nowrap;
  }
  .hydv_more_list{
    display:block;
  }
  .hydv_more_item{
    width:315px !important;
    padding:15px;
    margin:0 7.5px;
  }
  .hydv_more_item_in{
    padding-bottom:15px;
  }
  .hydv_more_item_badge{
    position:absolute;
    top:40px;
    left:-10px;
  }
  .hydv_more_item_badge_text{
    font-size:16px;
    line-height:1.4;
  }
  .hydv_more_item_pic{
    height:188px;
    padding:37px 8px 0;
  }
  .hydv_more_item_pic > img{
    width:199px;
  }
  .hydv_more_item_note{
    margin:0 0 15px;
  }
  .hydv_more_item_title{
    height:35px;
    font-size:18px;
    margin:0 0 10px;
  }
  .hydv_more_item_data{
    margin:0 0 9px;
  }
  .hydv_more_item_data_one{
    text-align: center;
    padding:2px 14px;
  }
  .hydv_more_item_count{
    font-size:14px;
    margin:0 0 8px;
  }
  .hydv_more_item_price{
    font-size:19px;
  }
  .hydv_more_item_price > small{
    font-size:14px;
  }
  .hydv_more_item_cta{
    width:255px;
    height:50px;
    font-size:14px;
  }
  
  .hydv_more_item.hydra_f .hydv_more_item_badge{
    top:35px;
    left:4px;
    width:100px;
    height:100px;
  }
  .hydv_more_item.hydra_f .hydv_more_item_pic{
    padding:34px 0 0 5px;
  }
  .hydv_more_item.hydra_f .hydv_more_item_pic > img{
    width:101px;
    margin:0 auto;
  }

  .hydv_more_list .slick-dots {
    position: static;
    bottom: auto;
    display: flex;
    justify-content: center;
    gap:0 5px;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
    margin:25px 0 0;
  }
  .hydv_more_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydv_more_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydv_more_list .slick-dots li.slick-active button {
    background-color: #000;
  }

  .hydv_more_to_top{
    padding:26px 0 0;
  }
  .hydv_more_to_top > a{
    width:315px;
    height:40px;
    border-radius:20px;
    font-size:14px;
  }
}