@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 -------------------------- */

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

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

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

.hydas_fv{
  position:relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #e3e8ef;
  background-size: cover;
  /* background-size: 100%; */
  /* aspect-ratio: 1 / 0.83; */
  padding-top:3.34%;
  padding-bottom: 130px;
  margin-bottom: -90px;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 90px, 100% calc(100% - 90px);
  mask-position: left bottom, left top;
  z-index: 2;
}
.hydas_fv_inner {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}
.hydas_fv_logo{
  width:27.45%;
  margin:0 auto 20px;
}
.hydas_fv_logo > img{
  display:block;
  width:100%;
}
.hydas_fv_desc{
  font-size:22px;
  line-height:1.75;
  text-align: center;
  margin-bottom: 30px;
}
.hydas_fv_img {
  width: clamp(250px, 35vw, 340px);
  display: block;
  margin: 0 auto;
  position: relative;
}
.hydas_fv_img::after {
  content: '';
  display: block;
  width: clamp(250px, 35vw, 340px);
  height: 130px;
  background: url('../images/fv_img_shadow.png') no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: absolute;
  top: 100%;
  left: 0;
}
.hydas_fv_badge{
  position:absolute;
  /* top:50.59%; */
  /* left:23.9%; */
  bottom: 0;
  left: 16.3%;
  display:flex;
  justify-content: center;
  align-items: center;
  width:140px;
  height:140px;
}
.hydas_fv_badge_circle{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation: hydexTextRotate 8s linear infinite;
}
@keyframes hydexTextRotate {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}
.hydas_fv_badge_text{
  font-weight:500;
  font-size:25px;
  line-height:1.36;
  letter-spacing: 0.05em;
  text-align:center;
}
.hydas_fv_badge_text > small{
  font-size:10px;
  vertical-align: super;
}
.hydas_fv_topics01{
  position:absolute;
  top:8%;
  right:17px;
  display: flex;
  flex-direction: column;
}
.hydas_fv_topics01 img.fv_topics01{
  margin-bottom: 15px;
  width:177px;
  height:177px;
}
.hydas_fv_topics01 img.fv_topics02{
  width:177px;
  height:177px;
}
@media (max-width: 960px) {
  .hydas_fv{
    /* aspect-ratio: 1 / 1.7; */
    aspect-ratio: unset;
    padding-top:7.33%;
    padding-bottom: 60px;
    margin-bottom: -40px;
    mask-repeat: no-repeat, no-repeat;
    mask-size: 100% 40px, 100% calc(100% - 40px);
    mask-position: left bottom, left top;
  }
  .hydas_fv_logo{
    width:325px;
    margin:0 auto 4.5%;
  }
  .hydas_fv_desc{
    font-size:18px;
    line-height:1.33;
  }
  .hydas_fv_img {
    width: clamp(170px, 45vw, 250px);
  }
  .hydas_fv_img::after {
    width: clamp(170px, 45vw, 250px);
  }
  .hydas_fv_badge{
    /* top: 32%; */
    bottom: 50px;
    left: 15px;
    width: 69px;
    height: 69px;
  }
  .hydas_fv_badge_text{
    font-size: 12px;
    line-height: 1.6;
  }
  .hydas_fv_topics01{
    position:absolute;
    top: auto;
    bottom: 140px;
    right:15px;
    width: 74px;
    height: 74px;
  }
  .hydas_fv_topics01 img.fv_topics01{
    margin-bottom: 10px;
    width: 74px;
    height: 74px;
  }
  .hydas_fv_topics01 img.fv_topics02{
    width: 74px;
    height: 74px;
  }
  .hydas_fv_topics02{
    position:absolute;
    top:310px;
    right:2%;
    width:146px;
    height:146px;
  }
}


/* -------------------------- FV 商品説明 -------------------------- */
.hydas_explanation {
  max-width: 800px;
  margin: 0 auto; 
  /* padding-top:40.6%; */
  padding-top: 100px;
  padding-bottom: 15px;
  position: relative;
  z-index: 3;
}
.hydas_explanation span.marker {
  background:linear-gradient(transparent 60%, #d1c6de 60%);
}
.hydas_explanation_sec_title {
  font-size:30px;
  line-height:2.0;
  letter-spacing: 0.05em;
  text-align:center;
}
.hydas_explanation_sec_title sub {
  font-size: 60%;
  vertical-align: text-top;
}
.hydas_explanation_sec_text {
  font-size:16px;
  line-height:2.0;
  letter-spacing: 0.05em;
  text-align:center;
  padding-top: 30px;
}
.hydas_explanation_sec_text sub {
  font-size: 60%;
  vertical-align: text-top;
}
.hydas_explanation_note {
  font-size:12px;
  line-height: 2.0;
  text-align: left;
  padding-top: 30px;
}

@media (max-width : 960px) {
  .hydas_explanation {
    margin: 0 5%; 
  }
  .hydas_explanation_sec_title {
    font-size: clamp(16px, 5vw, 20px);
  }
  .hydas_explanation_sec_text {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .hydas_explanation_sec_text span {
    display: inline-block;
  }
  .hydas_explanation_note {
    line-height: 1.5;
  }
}
/* -------------------------- Appear -------------------------- */

/*.hydas_apr{
	position: relative;
  background-color: #eef0ff;
  padding-bottom:20px;
  overflow: hidden;
}
.hydas_apr_in{
  max-width:800px;
  background-repeat: no-repeat;
  background-position: 50% 32px;
  background-size: 100% auto;
  padding-top:72px;
  padding-bottom: 72px;
  margin:0 auto;
}
.hydas_apr_main{
  display:flex;
  margin:0 0 16px;
}
.hydas_apr_main_left{
  flex:1;
}
.hydas_apr_title{
  font-weight:500;
  font-size:36px;
  line-height: 1.77;
  letter-spacing: 0.05em;
  color:#00a0b8;
  margin:20px 0 12px;
}
.hydas_apr_title > small{
  font-size:16px;
  vertical-align: super;
}
.hydas_apr_desc_01{
  width:100%;
  font-size:16px;
  line-height: 2;
  letter-spacing: 0.05em;
  margin:0 0 16px;
}
.hydas_apr_desc_02{
  width:100%;
  font-size:16px;
  line-height: 2;
  letter-spacing: 0.05em;
}
.hydas_apr_desc_02 > small{
  font-size:10px;
  vertical-align: super;
}
.hydas_apr_main_right{
	position: relative;
  width:280px;
  z-index: 1;
}
.hydas_apr_video{
  width:100%;
}
.hydas_apr_note{
  font-size:10px;
  line-height:1.8;
}

@media (max-width : 960px) {
  .hydas_apr{
    padding-bottom:20px;
  }
  .hydas_apr_in{
    max-width:none;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    padding-top:40px;
    margin:0;
  }
  .hydas_apr_main{
    display:block;
    margin:0 0 35px;
  }
  .hydas_apr_main_left{
    padding-left:25px;
    margin:0 0 20px;
  }
  .hydas_apr_title{
    font-size:25px;
    line-height: 1.48;
    margin:16px 0;
  }
  .hydas_apr_title > small{
    font-size:12px;
  }
  .hydas_apr_desc_01{
    width:225px;
    font-size:14px;
    line-height: 1.85;
    margin:0;
  }
  .hydas_apr_desc_02{
    width:auto;
    font-size:14px;
    line-height: 1.85;
    padding:0 25px;
    margin:0 0 10px;
  }
  .hydas_apr_main_right{
    width:250px;
  }
  .hydas_apr_note{
    font-size:10px;
    line-height:1.5;
    padding:0 25px;
  }
}
*/
/* -------------------------- Point Background -------------------------- */

.hydas_pt_wrap{
  position:relative;
  /* background-repeat: repeat-y; */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.hydas_pt_fv_ball_01{
  position:absolute;
  z-index:5;
  top:28px;
  left:-86px;
  width:305px;
}
.hydas_pt_fv_ball_02{
  position:absolute;
  z-index:5;
  top:282px;
  left:318px;
  width:256px;
}
.hydas_pt_fv_ball_03{
  position:absolute;
  z-index:5;
  top:359px;
  left:706px;
  width:191px;
}
.hydas_pt_fv_ball_04{
  position:absolute;
  z-index:15;
  top:304px;
  left:805px;
  width:106px;
}
.hydas_pt_fv_ball_05{
  position:absolute;
  z-index:5;
  top:303px;
  left:1003px;
  width:318px;
}
.hydas_pt_fv_ball_06{
  position:absolute;
  z-index:5;
  top:51px;
  left:1218px;
  width:115px;
}

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

.hydas_pt_fv{
  position:relative;
  margin:0 auto 24px;
  padding-top: 160px;
}
.hydas_pt_fv_water{
  position:absolute;
  z-index:5;
  top:33px;
  left:386px;
  width:197px;
}
.hydas_pt_fv_water_sp{
  display:none;
}
.hydas_pt_fv_title{
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.hydas_pt_fv_title > span{
  display:block;
  font-weight:500;
  font-size:30px;
  margin:0 0 25px;
}
.hydas_pt_fv_title > img{
  display:block;
  width:177px;
  margin: 0 auto;
}

@media (max-width : 960px) {
  .hydas_pt_fv{
    position:relative;
    max-width:none;
    /* aspect-ratio: 1 / 1.8333; */
    margin:0 auto 30px;
  }
  .hydas_pt_fv_ball_01{
    display:none;
  }
  .hydas_pt_fv_ball_02{
    z-index:5;
    top:44.97%;
    left:-29.46%;
    width:58.93%;
  }
  .hydas_pt_fv_ball_03{
    z-index:5;
    top:54.53%;
    left:56.8%;
    width:39.86%;
  }
  .hydas_pt_fv_ball_04{
    z-index:15;
    top:48.48%;
    left:77.33%;
    width:24.4%;
  }
  .hydas_pt_fv_ball_05{
    display:none;
  }
  .hydas_pt_fv_ball_06{
    display:none;
  }
  .hydas_pt_fv_water_sp{
    display:block;
    position:absolute;
    z-index:5;
    top:7.84%;
    left:-18.13%;
    width:51.6%;
  }
  .hydas_pt_fv_title {
    width: 100%;
    line-height: 1.2;
    text-align: center;
    z-index: 14;
  }
  .hydas_pt_fv_title > span{
    margin:0 0 12px;
  }
  .hydas_pt_fv_title > img{
    display:block;
    width:161px;
  }
}

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

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

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

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

.hydas_pt_sec_head{
  position:relative;
  z-index: 2;
  max-width:800px;
  margin:0 auto 25px;
}
.hydas_pt_sec_head_title_point{
  display:flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 25px;
}
/*.hydas_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;
}
.hydas_pt_sec_head_title_point > div:nth-child(1) > span{
  font-weight:700;
  font-size:28px;
}
.hydas_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;
}
.hydas_pt_sec_head_title_point > div:nth-child(2) small {
  font-size: inherit;
}*/
.hydas_pt_sec_head_title_text {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-weight:500;
  font-size:26px;
  letter-spacing: 0.05em;
  text-align: center;
  color:#221815;
}
.hydas_pt_sec_head_title_text_jp {
  padding-bottom: 10px;
}
.hydas_pt_sec_head_title_text_en {
  font-family: "Lato", serif;
  font-weight: 400;
  font-size:20px;
  color: #9c6ab4;
}
.hydas_pt_sec_head_desc{
  font-size:16px;
  line-height:2;
  letter-spacing: 0.05em;
}
.hydas_pt_sec_head_desc.pt2{
  letter-spacing: 0;
}
.hydas_pt_sec_head_desc > small{
  font-size:10px;
  vertical-align: super;
}

@media (max-width : 960px) {
  .hydas_pt_sec_head{
    max-width:none;
    padding:0 25px;
    margin:0 auto 12px;
  }
  .hydas_pt_sec_head_title_point{
    padding:5px 0;
  }
  .hydas_pt_sec_head_title_point > div:nth-child(1){
    font-size:18px;
    padding:3px 10px 3px 0;
  }
  .hydas_pt_sec_head_title_point > div:nth-child(1) > span{
    font-size:25px;
  }
  .hydas_pt_sec_head_title_point > div:nth-child(2){
    font-size:20px;
    padding:3px 0 3px 10px;
  }
  .hydas_pt_sec_head_title_point > div:nth-child(2) small {
    display: block;
    padding: 3px 0;
    font-size: 70%;
  }
  .hydas_pt_sec_head_title_point > div:nth-child(2).pt3{
    font-size:23px;
  }
  .hydas_pt_sec_head_title_text{
    font-size:25px;
    line-height:1.48;
    padding:6px 0;
  }
  .hydas_pt_sec_head_desc{
    font-size:14px;
    line-height:1.85;
  }
  .hydas_pt_sec_head_desc.pt2{
    letter-spacing: 0;
  }
}

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

.hydas_pt1_body{
  position:relative;
  max-width:980px;
  padding:0 0 100px;
  margin:0 auto;
  z-index: 3;
}
.hydas_pt1_ball_01{
  position:absolute;
  top:-50px;
  left:-142px;
  width:252px;
}
.hydas_pt1_ball_02{
  position:absolute;
  top:558px;
  left:-143px;
  width:377px;
}
.hydas_pt1_water{
  position:absolute;
  top:346px;
  right:-167px;
  width:223px;
}
.hydas_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;
}
.hydas_pt1_body_item{
  width:230px;
}
.hydas_pt1_body_note{
  max-width:800px;
  font-size:12px;
  line-height:1.8;
  margin:0 auto;
}

@media (max-width : 960px) {
  .hydas_pt1_body{
    position:relative;
    max-width:none;
    padding:0 0 60px;
    margin:0;
  }
  .hydas_pt1_ball_01{
    position:absolute;
    top:-63px;
    left:-32.13%;
    width:41.2%;
  }
  .hydas_pt1_ball_02{
    position:absolute;
    top:195px;
    left:-56.66%;
    width:86.66%;
  }
  .hydas_pt1_water{
    position:absolute;
    top:334px;
    right:-32.13%;
    width:51.2%;
  }
  .hydas_pt1_body_item_list{
    display:block;
    margin:0 0 22px;
  }
  .hydas_pt1_body_item{
    width:200px !important;
    margin:0 7.5px;
  }
  .hydas_pt1_body_note{
    position:relative;
    z-index:2;
    max-width:none;
    font-size:10px;
    line-height:1.5;
    padding:0 25px;
    margin:0;
  }

  .hydas_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;
  }
  .hydas_pt1_body_item_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydas_pt1_body_item_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydas_pt1_body_item_list .slick-dots li.slick-active button {
    background-color: #000;
  }
}

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

.hydas_pt2_body{
  position:relative;
  max-width:1366px;
  padding-bottom:96px;
  margin:0 auto;
  z-index: 1;
}
.hydas_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;
}
.hydas_pt2_line > img{
  display:block;
  width:100%;
}
.hydas_pt2_line.standby{
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.hydas_pt2_ball_01{
  position:absolute;
  top:-60px;
  left:1102px;
  display:block;
  width:199px;
}
.hydas_pt2_ball_02{
  position:absolute;
  top:350px;
  left:-58px;
  display:block;
  width:297px;
}
.hydas_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;
}
.hydas_pt2_herb_item{
  width:170px;
}
.hydas_pt2_herb_item > img{
  display:block;
  width:100%;
}

@media (max-width : 960px) {
  .hydas_pt2_body{
    max-width:none;
    padding-bottom:72px;
    margin:0;
  }
  .hydas_pt2_line{
    top:132px;
    left:0;
    width:100%;
  }
  .hydas_pt2_ball_01{
    top:-40px;
    left:auto;
    right:-7.06%;
    width:18.66%;
  }
  .hydas_pt2_ball_02{
    display:none;
  }
  .hydas_pt2_herb_list{
    display:block;
    max-width:none;
    margin:0;
  }
  .hydas_pt2_herb_item{
    width:150px !important;
    margin:0 5px;
  }

  .hydas_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;
  }
  .hydas_pt2_herb_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydas_pt2_herb_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydas_pt2_herb_list .slick-dots li.slick-active button {
    background-color: #000;
  }
}

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

.hydas_pt3_body{
  position:relative;
  max-width:800px;
  padding-bottom:168px;
  margin:0 auto;
}
.hydas_pt3_ball_01{
  position:absolute;
  top:10px;
  left:-116px;
  display:block;
  width:175px;
}
.hydas_pt3_ball_02{
  position:absolute;
  top:70px;
  right:-218px;
  display:block;
  width:300px;
}
.hydas_pt3_in{
  position:relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}
.hydas_pt3_in_left{
  width:382px;
}
.hydas_pt3_mask_frame{
  position:relative;
  width: 382px;
  height: 380px;
  overflow:hidden;
}
.hydas_pt3_mask_water{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  transform:translateY(100%);
}
.hydas_pt3_mask_water.anim{
  animation: hydexMaskWater 4s ease-in-out forwards;
}
@keyframes hydexMaskWater {
  0% {
    transform:translateY(100%);
  }
  25% {
    transform:translateY(75%);
  }
  50% {
    transform:translateY(50%);
  }
  75% {
    transform:translateY(25%);
  }
  100% {
    transform:translateY(0);
  }
}
.hydas_pt3_mask_mask{
  /*position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:238px;*/
}
.hydas_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: hydexMaskVector 2s ease-in-out infinite;
}
@keyframes hydexMaskVector {
  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%);
  }
}
.hydas_pt3_in_right{
  width:400px;
}
.hydas_pt3_catch {
  display: block;
  width: 294px;
  margin: 0 auto 20px;
}
.hydas_pt3_catch > img{
  display:block;
  width:100%;
}
.hydas_pt3_catch:last-child {
  width: 402px;
  margin: 30px auto 0;
}
.hydas_pt3_desc{
  font-size:16px;
  line-height:2;
  letter-spacing: 0.025em;
  text-align: justify;
  margin-bottom:10px;
}
.hydas_pt3_note {
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width : 960px) {
  .hydas_pt3_body{
    max-width:none;
    padding-bottom:68px;
    margin:0;
  }
  .hydas_pt3_ball_01{
    top:-15px;
    left:-27.06%;
    width:40.26%;
  }
  .hydas_pt3_ball_02{
    top:85px;
    right:-15.2%;
    width:55.73%;
  }
  .hydas_pt3_in{
    /*display:block;*/
    align-items: flex-start;
  }
  .hydas_pt3_in_left{
    width:auto;
    margin:0 0 20px;
  }
  .hydas_pt3_mask_frame {
    width: 323px;
    height: 320px;
    margin: 0 0 0 -17%;
  }
  .hydas_pt3_in_right{
    position: relative;
    display: block;
    width: 50%;
    padding: 0 25px 0 0;
    margin-left: -50%;
  }
  .hydas_pt3_catch{
    display:block;
    width: 120%;
    margin-left: -20%;
    margin-bottom: 26px;
    order:2;
  }
  .hydas_pt3_desc{
    order:1;
    flex:1; 
    font-size:14px;
    line-height:1.85;
    padding-right: 0;
    margin:0;
  }
  .hydas_pt3_note{
    order:3;
    width:100%;
    font-size:10px;
    margin-top:8px;
    line-height: 1.3;
  }
}

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

.hydas_every{
  display:block;
}
.hydas_every_bottom{
  position:relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:65px 0 48px;
 }
.hydas_every_title{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:266px;
}
.hydas_every_title > img{
  display:block;
  width:100%;
}
.hydas_every_catch{
  font-size:40px;
  letter-spacing: 0.05em;
  text-align: center;
  margin:0 0 18px;
}
.hydas_every_catch > span{
  color:#945cad;
}
.hydas_every_desc{
  font-size:28px;
  letter-spacing: 0.05em;
  text-align: center;
  margin:0 0 26px;
}
.hydas_every_points{
  display:flex;
  justify-content: center;
  gap:0 19px;
  transition:opacity 1s, transform 1s;
}
.hydas_every_points.standby{
  opacity:0;
  transform:translateY(50px);
}
.hydas_every_points > img{
  width:150px;
}

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

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

.hydas_howto{
  background-color: #f8eefc;
  padding:70px 0 50px;
}
.hydas_howto_in{
  width:800px;
  margin:0 auto;
}
.hydas_howto_title{
  display:block;
  margin:0 0 25px;
}
.hydas_howto_title > picture{
  display:block;
  width:100%;
}
.hydas_howto_title > picture > img{
  display:block;
  width:100%;
}
.hydas_howto_list{
  display:flex;
  justify-content: space-between;
  margin:0 0 10px;
}
.hydas_howto_item{
  width:177px;
}
.hydas_howto_item_pic{
  display:flex;
  align-items: flex-end;
  height:220px;
  margin:0 0 6px;
}
.hydas_howto_item_pic > img{
  display:block;
}
.hydas_howto_item_pic.item_4{
  position:relative;
}
.hydas_howto_item_pic.item_4 > img{
  position:absolute;
  bottom:0;
  right:0;
  width:192px;
  max-width:none;
}
.hydas_howto_item_desc{
  font-size:16px;
  line-height:1.875;
  text-align: justify;
}
.hydas_howto_after{
  display:flex;
  flex-flow:column nowrap;
  justify-content: center;
  align-items: center;
  gap:12px 0;
  height:90px;
  background-color: #FFF;
}
.hydas_howto_after_title{
  font-weight:700;
  font-size:16px;
  color:#945cad;
}
.hydas_howto_after_desc{
  font-size:16px;
}

@media (max-width : 960px) {
  .hydas_howto{
    padding:50px 0;
  }
  .hydas_howto_in{
    width:350px;
    margin:0 auto;
  }
  .hydas_howto_title{
    display:block;
    margin:0 0 20px;
  }
  .hydas_howto_list{
    display:flex;
    flex-flow:row wrap;
    gap:15px 0;
    justify-content: space-between;
    margin:0 0 40px;
  }
  .hydas_howto_item{
    width:46.76%;
  }
  .hydas_howto_item_pic{
    display: flex;
    align-items: flex-end;
    height: 200px;
    margin: 0 0 2px;
  }
  .hydas_howto_item_pic.item_4{
    position:static;
  }
  .hydas_howto_item_pic.item_4 > img{
    position:static;
    width:100%;
  }
  .hydas_howto_item_desc{
    font-size:14px;
    line-height:1.71;
  }
  .hydas_howto_after{
    gap:0 0;
    height:80px;
    background-color: #FFF;
  }
  .hydas_howto_after_title{
    font-size:14px;
    line-height:1.71;
  }
  .hydas_howto_after_desc{
    font-size:14px;
    line-height:1.71;
    text-align: center;
  }
}

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

.hydas_offer{
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-color: #fdf0b7;
  aspect-ratio: 1 / 0.5;
  padding:5.12% 0 50px;
}
.hydas_offer_in{
  position:relative;
  max-width:800px;
  margin:60px auto 0;
}
.hydas_offer_bg_v{
  position:absolute;
  top:140px;
  right:-216px;
  display:block;
  width:477px;
}
.hydas_offer_bg_v > img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}
.hydas_offer_body{
  position:relative;
  z-index:2;
  display:flex;
  justify-content: space-between;
}
.hydas_offer_body_left{
  position:relative;
  flex:1;
}
.hydas_offer_title{
  width:375px;
  margin:0 auto 20px;
  text-align: center;
}
.hydas_offer_title > img{
  display:block;
  width:100%;
}
.hydas_fv_img.sp {
  display: none;
}
.hydas_offer_desc{
  width:375px;
  font-weight:400;
  font-size:24px;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.hydas_offer_item_title{
  width:400px;
  font-weight:600;
  font-size:24px;
  line-height:1.5;
  letter-spacing: 0.05em;
  padding-top: 45px;
} 
.hydas_offer_item_count{
  width:400px;
  font-weight:600;
  font-size:18px;
  line-height:1.5;
  padding-top: 15px;
}
.hydas_offer_item_price {
  width:400px;
  font-weight:600;
  font-size:22px;
  line-height:1.5;
  padding-top: 25px;
}
.hydas_offer_note{
  width:400px;
  font-weight:400;
  font-size:12px;
  line-height:1.5;
  padding-top: 25px;
}
.hydas_offer_body_right{
  width:380px;
  padding-left: 50%;
}
.hydas_offer_box{
  background-color: #FFF;
  border-radius:20px;
  overflow:hidden;
  padding:0 0 22px;
}
.hydas_offer_box:not(:last-child){
  margin:0 0 20px;
}

.hydas_offer_box_showcase{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:0 15px;
  margin:0 0 20px;
}
.hydas_offer_box_showcase_pic{
  width:105px;
  text-align:center;
}
.hydas_offer_box_showcase_pic > img{
  width:auto;
}
.hydas_offer_box_showcase_info{
  width:180px;
  text-align:center;
}
.hydas_offer_box_showcase_labels{
  display:flex;
  justify-content: space-between;
  margin:0 0 5px;
}
.hydas_offer_box_showcase_labels > span{
  display:flex;
  justify-content: center;
  align-items: center;
  width:85px;
  height:30px;
  background-color: #00a0b8;
  font-weight:700;
  font-size:18px;
  color:#fff;
  letter-spacing: 0.05em;
}
.hydas_offer_box_showcase_price{
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing: 0.05em;
}
.hydas_offer_box_showcase_price > span{
  font-size:22px;
}
.hydas_offer_box_cta{
  display:flex;
  justify-content: center;
  align-items: center;
  width:340px;
  height:50px;
  background-color: #00a0b8;
  font-weight:700;
  font-size:16px;
  letter-spacing: 0.05em;
  color:#fff;
  margin:0 auto 21px;
}
.hydas_offer_item_btn {
  padding-top: 60px;
}
.hydas_offer_item_btn a.hydas_offer_item_btn_search {
  width: 370px;
  font-weight:400;
  font-size: 24px;
  text-align: center;
  background: #945cad;
  border-radius: 100vh;
  box-sizing: border-box;
  color: #fff;
  display: block;
  padding: 30px 60px;
  margin: 0 auto;
}
@media (max-width : 960px) {
  .hydas_offer{
    /* background-size: 100% auto; */
    background-color: #e8e8f0;
    aspect-ratio: auto;
    padding:90px 0 0;  
  }
  .hydas_offer_in{
    max-width:none;
    padding:32px 0 25px;  
    margin:0 auto;
  }
  .hydas_offer_bg_v{
    position:absolute;
    top:535px;
    right:0;
    width:293px;
  }  
  .hydas_offer_body{
    max-width:325px;
    display:block;
    margin:0 auto;
  }
  .hydas_offer_body_left{
    margin:0 0 86vw;
  }
  .hydas_fv_img.sp {
    display: block;
  }
  .hydas_offer_title{
    width: min(320px, 77.6%);
    min-height:auto;
    padding:0;
    margin:0 auto 15px;
  }
  .hydas_offer_item_title {
    width: auto;
    font-size: 18px;
    text-align: center;
  }
  .hydas_offer_item_count {
    width: auto;
    padding-top: 6px;
    font-size: 14px;
    text-align: center;
    margin-top: 0;
    font-weight: 400;
  }
  .hydas_offer_item_price {
    width: auto;
    padding-top: 18px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
  }
  .hydas_offer_title > img{
    width:100%;
  }
  .hydas_offer_desc{
    width:auto;
    text-align: center;
    font-size:20px;
    line-height: 1.7;
    margin: 0 auto 30px;
  }
  .hydas_offer_note{
    position:static;
    width:325px;
    font-size:11px;
    line-height:1.5;
    padding-right:0;
    margin:15px auto 0;
  }  
  .hydas_offer_item_btn .hydas_offer_note {
    text-align: center;
  }
  .hydas_offer_body_right{
    width:auto;
    padding-left: 0;
  }
  .hydas_offer_item_btn {
    padding-top: 26px;
  }
  .hydas_offer_item_btn a.hydas_offer_item_btn_search {
    width: 85%;
    font-size: 19px;
    padding: 18px 10px;
    letter-spacing: 1px;
  }
  .hydas_offer_box{
    border-radius:12px;
    padding:0 0 25px;
    border: 1px solid #00a0b8;
  }
  .hydas_offer_box:last-child {
    border-color: #fff;
  }
  .hydas_offer_box:not(:last-child){
    margin:0 0 25px;
  }

  .hydas_offer_box_showcase{
    gap:0 15px;
    margin:0 0 20px;
  }
  .hydas_offer_box_showcase_pic{
    width:90px;
  }
  .hydas_offer_box_showcase_pic > img{
    width:auto;
  }
  .hydas_offer_box_showcase_pic > img.sheets7{
    width:65px;
  }
  .hydas_offer_box_showcase_info{
    width:155px;
  }
  .hydas_offer_box_showcase_labels{
    margin:0 0 10px;
  }
  .hydas_offer_box_showcase_labels > span{
    width:75px;
    height:25px;
    font-size:15px;
  }
  .hydas_offer_box_showcase_price{
    font-size:14px;
    line-height:calc(45/28);
  }
  .hydas_offer_box_showcase_price > span{
    font-size:19px;
  }
  .hydas_offer_box_cta{
    width:295px;
    height:50px;
    font-size:14px;
    letter-spacing: 0;
    margin:0 auto 21px;
  }
}

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

.hydas_info{
  background-color:#e7e7ef;
  padding:50px 0;
}
.hydas_info_in{
  max-width:800px;
  margin:0 auto;
}
.hydas_info_block{
  margin:0 0 20px;
}
.hydas_info_block_title{
  display:flex;
  align-items: center;
  height:52px;
  font-weight:500;
  font-size:20px;
  letter-spacing: 0.05em;
  color:#4d4d4d;
  border-top:2px solid #4d4d4d;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 22px auto;
  padding-top: 20px;
}

.hydas_info_block_content{
  font-weight:400;
  font-size:14px;
  line-height:calc(24/14);
  padding-top:20px;
}
.hydas_info_block.last{
  border-bottom:2px solid #4d4d4d;
  padding-bottom:20px;
}

@media (max-width : 960px) {
  .hydas_info{
    padding:53px 0 40px;
  }
  .hydas_info_in{
    max-width:325px;
  }
  .hydas_info_block{
    margin:0 0 20px;
  }
  .hydas_info_block_title{
    height:40px;
    font-size:14px;
    /*border-bottom:1px solid #4d4d4d;*/
    background-size:15px auto;
    background-position: right 20px;
  }
  .hydas_info_block_content{
    font-size:11px;
    line-height:calc(34/22);
    padding-top:16px;
  }
  .hydas_info_block_content.last{
    border-bottom:1px solid #4d4d4d;
    padding-bottom:20px;
  }
}

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

.hydas_more{
  padding:0 0 50px;
}
.hydas_more_main{
  position:relative;
}
.hydas_more_main_image{
  display:block;
}
.hydas_more_main_image > img{
  display:block;
  width:100%;
}
.hydas_more_main_title{
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
}
.hydas_more_main_title > h2{
  font-family: "Allison", cursive;
  font-size:80px;
  line-height:0.8;
  text-align:center;
  margin:0;
}
.hydas_more_main_title > p{
  font-size:22px;
  letter-spacing: 0.05em;
  text-align:center;
}
.hydas_more_list{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:20px;
  max-width:1080px;
  margin:0 auto;
}
.hydas_more_item{
  width:320px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding:20px;
}
.hydas_more_item_in{
  position:relative;
  background-color:rgba(255,255,255,0.9);
  border:1px solid #000;
  padding-bottom:20px;
}
.hydas_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;
}
.hydas_more_item_badge_text{
  font-weight:500;
  font-size:16px;
  line-height:1.375;
  letter-spacing: 0.05em;
  text-align: center;
  color:#FFF;
}
.hydas_more_item_badge_text > small{
  font-size:10px;
  vertical-align: super;
}
.hydas_more_item_pic{
  position:relative;
  z-index:2;
  display:block;
  height:185px;
  padding:28px 8px 0;
}
.hydas_more_item_pic > img{
  display:block;
  width:198px;
  margin-left:auto;
}
.hydas_more_item_note{
  font-size:10px;
  text-align: center;
  margin:0 0 17px;
}
.hydas_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;
}
.hydas_more_item_data{
  display:flex;
  justify-content: center;
  margin:0 0 16px;
}
.hydas_more_item_data_one{
  text-align: center;
  padding:2px 6px;
}
.hydas_more_item_data_one:nth-child(2){
  border-left:1px solid #000;
}
.hydas_more_item_count{
  font-size:16px;
  letter-spacing: 0.05em;
  margin:0 0 8px;
}
.hydas_more_item_price{
  font-size:22px;
  letter-spacing: 0.05em;
}
.hydas_more_item_price > small{
  font-size:16px;
}
.hydas_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;
}

.hydas_more_item.hydra_ex .hydas_more_item_in{
  border:1px solid #552378;
}
.hydas_more_item.hydra_az .hydas_more_item_in{
  border:1px solid #00a0b8;
}
.hydas_more_item.hydra_v .hydas_more_item_in{
  border:1px solid #ff2323;
}
.hydas_more_item.hydra_f .hydas_more_item_badge{
  left:-8px;
  width:105px;
  height:105px;
}
.hydas_more_item.hydra_ex .hydas_more_item_badge{
  background-color: #552378;
}
.hydas_more_item.hydra_az .hydas_more_item_badge{
  background-color: #00a0b8;
}
.hydas_more_item.hydra_v .hydas_more_item_badge{
  background-color: #ff2323;
}
.hydas_more_item.hydra_f .hydas_more_item_pic{
  padding:20px 0 0;
}
.hydas_more_item.hydra_f .hydas_more_item_pic > img{
  width:106px;
  margin:0 auto;
}
.hydas_more_item.hydra_ex .hydas_more_item_title{
  background-color: #552378;
}
.hydas_more_item.hydra_az .hydas_more_item_title{
  background-color: #00a0b8;
}
.hydas_more_item.hydra_v .hydas_more_item_title{
  background-color: #ff2323;
}
.hydas_more_item.hydra_ex .hydas_more_item_data_one:nth-child(2){
  border-left:1px solid #552378;
}
.hydas_more_item.hydra_az .hydas_more_item_data_one:nth-child(2){
  border-left:1px solid #00a0b8;
}
.hydas_more_item.hydra_v .hydas_more_item_data_one:nth-child(2){
  border-left:1px solid #ff2323;
}
.hydas_more_item.hydra_ex .hydas_more_item_cta{
  border:1px solid #552378;
  color:#552378;
}
.hydas_more_item.hydra_az .hydas_more_item_cta{
  border:1px solid #00a0b8;
  color:#00a0b8;
}
.hydas_more_item.hydra_v .hydas_more_item_cta{
  border:1px solid #ff2323;
  color:#ff2323;
}
.hydas_more_item.hydra_v .hydas_more_item_note {
  margin-bottom: 7px;
}

.hydas_more_to_top{
  padding:50px 0 0;
}
.hydas_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) {
  .hydas_more{
    padding:0 0 45px;
  }
  .hydas_more_main{
    padding-bottom:70px;
  }
  .hydas_more_main_title{
    bottom:30px;
  }
  .hydas_more_main_title > h2{
    font-size:70px;
    line-height:0.8;
    margin:0;
  }
  .hydas_more_main_title > p{
    font-size:18px;
    white-space: nowrap;
  }
  .hydas_more_list{
    display:block;
  }
  .hydas_more_item{
    width:315px !important;
    padding:15px;
    margin:0 7.5px;
  }
  .hydas_more_item_in{
    padding-bottom:15px;
  }
  .hydas_more_item_badge{
    position:absolute;
    top:40px;
    left:-10px;
  }
  .hydas_more_item_badge_text{
    font-size:16px;
    line-height:1.4;
  }
  .hydas_more_item_pic{
    height:188px;
    padding:37px 8px 0;
  }
  .hydas_more_item_pic > img{
    width:199px;
  }
  .hydas_more_item_note{
    margin:0 0 15px;
  }
  .hydas_more_item_title{
    height:35px;
    font-size:18px;
    margin:0 0 10px;
  }
  .hydas_more_item_data{
    margin:0 0 9px;
  }
  .hydas_more_item_data_one{
    text-align: center;
    padding:2px 14px;
  }
  .hydas_more_item_count{
    font-size:14px;
    margin:0 0 8px;
  }
  .hydas_more_item_price{
    font-size:19px;
  }
  .hydas_more_item_price > small{
    font-size:14px;
  }
  .hydas_more_item_cta{
    width:255px;
    height:50px;
    font-size:14px;
  }
  
  .hydas_more_item.hydra_f .hydas_more_item_badge{
    top:35px;
    left:4px;
    width:100px;
    height:100px;
  }
  .hydas_more_item.hydra_f .hydas_more_item_pic{
    padding:34px 0 0 5px;
  }
  .hydas_more_item.hydra_f .hydas_more_item_pic > img{
    width:101px;
    margin:0 auto;
  }

  .hydas_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;
  }
  .hydas_more_list .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }
  .hydas_more_list .slick-dots li button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #000;
    border-radius:50%;
  }
  .hydas_more_list .slick-dots li.slick-active button {
    background-color: #000;
  }

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


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


/* 元々あったCSS 定期の注釈のようだが今はコメントアウトされてる */
.detail-teiki_note {
  display: block;
  padding: 15px 0;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #df667e;
}

/* CSSファイル内だと file_root_path が使えないため background-image だけここに記述 */
.hydas_fv{
  background-image:url('../images/fv_bg.png');
  /* mask-image: url(../images/fv-bg-mask.svg), url(../images/bg-mask-inset.svg);*/
}
.hydas_apr_in{
  background-image:url('../images/apr_bg.png');
}
.hydas_pt_wrap{
  background-image:url('../images/pt1_bg.png');
}
.hydas_every_bottom{
  background-image:url('../images/every_bottom_bg.jpg');
}
.hydas_offer{
  background-image:url('../images/offer_bg.jpg');
}
.hydas_info_block_title{
  background-image:url('../images/info_ic_plus.png');
}
.hydas_info_block_title.active{
  background-image:url('../images/info_ic_minus.png');
}
.hydas_more_item{
  background-image:url('../images/more_pdt_hydra_f_bg.jpg');
}
.hydas_more_item.hydra_f{
  background-image: url('../images/more_pdt_hydra_f_bg.jpg')
}
.hydas_more_item.hydra_ex{
  background-image:url('../images/more_pdt_hydra_ex_bg.jpg');
}
.hydas_more_item.hydra_az{
  background-image:url('../images/more_pdt_hydra_az_bg.jpg');
}
.hydas_more_item.hydra_v {
  background-image:url('../images/more_pdt_hydra_v_bg.jpg');
}

@media (max-width : 960px) {
  .hydas_fv{
    background-image:url('../images/fv_bg_sp.png');
  }
  .hydas_apr_in{
    background-image:url('../images/apr_bg_sp.jpg');
  }
  /* .hydas_pt_wrap{
    background-image:url('../images/pt1_bg_sp.jpg');
  } */
  .hydas_every_bottom{
    background-image:url('../images/every_bottom_bg_sp.jpg');
  }
  .hydas_offer{
    /* background-image:url('../images/offer_bg_sp.png'); */
    background-image: none;
    /* background-color: #def3f7; */
  }
}

.hydas_pt1-1_body_item_list {  
  max-width: 821px;
  margin: 0 auto 30px;
}
.hydas_pt1-1_body_item.item_1 {
  margin-bottom: 45px;
  
}
.hydas_pt1_body_item_list {
  max-width: 1024px;
  margin: 0 auto 30px;
}

.tag {
  padding: 7px 16px 8px;
  margin-right: 12px;
  font-size: 22px;
  line-height: 1.1;
  border: 1px solid;
  border-radius: 50px;
}
.hydas_fv_desc small {
  font-size: 10px;
  vertical-align: top;
}

@media (max-width : 960px) {
  .hydas_pt1-1_body_item_list {
    display: block;
  }
  .hydas_pt0_body_item.item_1 {
    margin-bottom: 25px;
  }
  .hydas_pt2_body .slick-list .slick-slide {
    padding: 0 7.5px;
  }
  .tag {
    display: flex;
    padding: 0;
    width: 70px;
    height: 70px;
    font-size: 16px;
    align-items: center;
    justify-content: center;
  }
  .hydas_pt3_catch:last-child {
    width: 200%;
    margin: 78px 0 0 -100%;
  }
}

.hydas_pt_fv_title span.color {
  color: #00a0b8;
}

/*================================================*/
/*あわ*/

.hydas_apr_ball {
  position: absolute;
}
.hydas_apr_ball_01 {
  top: 27px;
  left: 20px;
}
.hydas_apr_ball_02 {
  right: 0;
  bottom: 58px;
  width: 360px;
}

.hydas_pt_ball {
  position: absolute;
  
}
.hydas_pt_ball_01 {
  top: 1158px;
  left: 0;
}
.hydas_pt_ball_02 {
  top: 858px;
  right: 0;
  z-index: 4;
}
.hydas_pt_ball_03 {
  top: -50px;
  left: 23.5%;
  z-index: 16;
}
.hydas_pt_ball_04 {
  top: 15%;
  right: 18%;
}
.hydas_pt_ball_05 {
  top: 14%;
  left: 21%;
  z-index: 2;
}
.hydas_pt_ball_06 {
  top: 183px;
  right: 280px;
  z-index: 10;
}
.hydas_pt_ball_07 {
  top: 295px;
  right: 20px;
}
.hydas_pt_ball_08 {
  left: -184px;
  bottom: 68px;
}
.hydas_pt_ball_09 {
  top: 204px;
  right: -138px;
}
.hydas_pt_ball_10 {
  left: 20px;
  bottom: 35px;
}
.hydas_pt_ball_11 {
  top: -40px;
  right: 10px;
}
.hydas_pt_ball_12 {
  top: -15%;
  left: -17%;
}

@media (max-width : 960px) {
  .hydas_apr_ball_01 {
    display: none;
  }
  .hydas_apr_ball_02 {
    right: -30%;
    bottom: 172px;
    width: 274px;
  }
  .hydas_pt_ball_01 {
    display: none;
  }
  .hydas_pt_ball_02 {
    /* left: 20px; */
    /* width: 122px; */
    width: 60px;
  }
  .hydas_pt_ball_03 {
    left: 4px;
    top: -20px;
    width: 110px;
  }
  .hydas_pt_ball_04 {
    left: -20px;
    top: 400px;
    width: 94px;
  }
  .hydas_pt_ball_05 {
    top: 50px;
    left: auto;
    right: 5px;
    width: 90px;
  }
  .hydas_pt_ball_06 {
    top: 140px;
    right: -40px;
    z-index: 13;
  }
  .hydas_pt_ball_07 {
    top: 54%;
    right: -45px;
    width: 190px;
  }
  .hydas_pt_ball_08 {
    left: -110px;
    bottom: 46%;
    width: 333px;
  }
  .hydas_pt_ball_10 {
    width: 54px;
    left: auto;
    right: -10px;
    bottom: 15%;
  }
  .hydas_pt_ball_11 {
    top: 33%;
    right: 16%;
    width: 152px;
  }
}

/*あわ*/
/*================================================*/

@media (min-width : 961px) {
  .hydas_pt1_body_item_list .hydas_pt2_body_item {
    width: 24%;
    max-width: 246px;
  }
}
@media (max-width : 960px) {
  .product_show_view img.hydas_pt2_body_item {
    max-width: 246px;
  }
}

/*フィード*/
/*================================================*/

.fed_warp {
  transform: translateY(40px);
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.fed_warp.active {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width : 960px) {
  .hydas_offer .hydas_fv_img {
    width: clamp(220px, 45vw, 280px);
  }
  .hydas_offer .hydas_fv_img::after {
    width: clamp(220px, 45vw, 280px);
  }
}