@charset 'utf-8';

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

img {
  max-width: 100%;
  height: auto;
}

sub {
  font-size: 60%;
  vertical-align: text-top;
}

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

.hydid_pt_ball {
  z-index: 1;
}
.hydid_pt_ball_1 {
  top: 41.28vw;
  left: -11.42vw;
  width: 22.69vw;
}
.hydid_pt_ball_2 {
  top: 36.96vw;
  left: 10.907vw;
  width: 10.32vw;
}
.hydid_pt_ball_3 {
  top: 8.57vw;
  left: 51.56vw;
  width: 10.128vw;
}
.hydid_pt_ball_4 {
  top: 34.33vw;
  left: 80.087vw;
  width: 5.83vw;
}
.hydid_pt_ball_5 {
  top: -22.79vw;
  left: 74.89vw;
  width: 24.96vw;
}
.hydid_pt_ball_6 {
  top: 13.323vw;
  left: 87.62vw;
  width: 25.47vw;
  z-index: 0;
}
.hydid_pt_ball_7 {
  top: 11.713vw;
  left: -18.008vw;
  width: 35.431vw;
}
.hydid_pt_ball_8 {
  top: 54.831vw;
  left: 84.04vw;
  width: 9.8828vw;
}
.hydid_pt_ball_9 {
  top: 1.4641vw;
  left: 92.45vw;
  width: 23.06vw;
}
.hydid_pt_ball_10 {
  top: 122.304vw;
  left: 90.043vw;
  width: 36.67vw;
}
.hydid_pt_ball_11 {
  top: 118.4vw;
  left: -3.44vw;
  width: 16.91vw;
}
.hydid_pt_ball_12 {
  top: 152.76vw;
  left: -11.27vw;
  width: 43.55vw;
  z-index: 0;
}
.hydid_pt_ball_13 {
  top: 158.76vw;
  left: 81.33vw;
  width: 16.251vw;
}

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

.hydraId_wrap {
  font-family: "Zen Kaku Gothic New", sans-serif;
  overflow: hidden;
}

.hydraId_fv {
  position: relative;
  font-size: 0;
}
.hydraId_fv_img img {
  width: 100%;
}
.hydraId_fv_point {
  position: absolute;
  display: flex;
  width: 11.71vw;
  height: 11.71vw;
  font-size: 1.75vw;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  color: #e24585;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.hydraId_fv_point.point1 {
  top: 7vw;
  left: 64vw;
}
.hydraId_fv_point.point2 {
  top: 7vw;
  left: 77vw;
}
.hydraId_fv_point.point3 {
  top: 20vw;
  left: 77vw;
}
.hydraId_fv_point::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94%;
  height: 94%;
  background: url(../images/point_roll.png) 50% 50% / contain no-repeat;
  transform: translate(-50%, -50%);
  animation: hydvTextRotate 8s linear infinite;
}
@keyframes hydvTextRotate {
  0% {
    transform:translate(-50%, -50%)rotate(0deg);
  }
  100% {
    transform:translate(-50%, -50%)rotate(360deg);
  }
}
.hydraId_fv .hydraId_note {
  position: relative;
  padding: 0 40px;
  margin-top: 50px;
  z-index: 3;
}

.hydraId_foryou {
  position: relative;
  padding: 120px 40px 90px;
  background: url(../images/sec_bg01_pc.png) 50% 0 / 100% 100% no-repeat;
}
.hydarId_sec_title {
  margin-bottom: 54px;
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  color: #2f5194;
  line-height: 1.6;
}
.hydarId_sec_txt {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
.hydraId_foryou .hydarId_sec_txt {
  font-size: 24px;
  text-align: center;
}
.hydarId_sec_txt b {
  font-weight: 600;
}
.foryou_box {
  position: relative;
  max-width: 1000px;
  margin: 100px auto 23px;
  font-size: 0;
  text-align: center;
  z-index: 1;
}
.foryou_bpx_title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.foryou_mask {
  position: absolute;
  top: -149px;
  right: -123px;
}
.hydraId_note {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 400;
}
.hydraId_foryou .hydraId_note {
  text-align: center;
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
}

.sec_idee {
  position: relative;
  padding: 50px 40px 100px;
  background: url(../images/sec_bg02_pc.png) 50% 0 / 100% 100% no-repeat;
}
.idee_box {
  position: relative;
  padding: 80px 9% 110px 40%;
  background: url(../images/item_bg01_pc.png) 50% 50% / 100% 100% no-repeat;
}
.idee_title {
  padding-left: 10px;
  margin-bottom: 52px;
  font-size: 0;
}
.idee_box .hydarId_sec_title {
  margin-bottom: 40px;
  text-align: left;
}
.idee_box .hydarId_sec_txt {
  margin-bottom: 34px;
}
.idee_ill.ill1 {
  top: -14px;
  left: -170px;
}
.idee_ill.ill2 {
  top: 109px;
  right: -110px;
}
.idee_ill {
  position: absolute;
}

.sec_point {
  position: relative;
}
.point-t-t {
  position: relative;
  margin-bottom: -50px;
  text-align: center;
  z-index: 5;
}
.point-title {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
.point-title big {
  display: block;
  font-size: 50px;
  color: #2f5194;
}
.point-title big span {
  color: #e24585;
}
.point-title > div {
  position: relative;
  width: 800px;
  padding: 20px 40px;
  margin: 0 auto;
  display: inline-block;
}
.point-title > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: url(../images/title_wk01.png) 0 50% / contain no-repeat;
}
.point-title > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: url(../images/title_wk02.png) 100% 50% / contain no-repeat;
}
.sec_point .inner {
  position: relative;
  max-width: 100%;
  padding: 45px;
  z-index: 2;
}
.sec_point .point1 {
  padding-top: 145px;
  background: url(../images/sec_bg03_pc.png) 50% 0 / 100% 100%  no-repeat;
}
.sec_point .point2 {
  background: url(../images/sec_bg04_pc.png) 50% 0 / 100% 100% no-repeat;
}
.sec_point .point3 {
  padding-bottom: 100px;
  background: url(../images/sec_bg05_pc.png) 50% 0 / 100% 100% no-repeat;
}
.point-items {
  display: flex;
  max-width: 800px;
  margin: 0 auto 26px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.items_tw .point-item {
  width: 49%;
  max-width: 381px;
}
.point1 .hydraId_note,
.point2 .hydraId_note,
.point3 .hydraId_note {
  max-width: 800px;
  margin: 0 auto;
}
.point-items.items_thr {
  justify-content: center;
}
.items_thr .point-item {
  width: 29%;
  margin-right: 6%;
  margin-bottom: 24px;
  max-width: 264px;
}
.items_thr .point-item:nth-child(3n),
.items_thr .point-item:last-child {
  margin-right: 0;
}
.point2 .items_thr .point-item:last-child {
  width: 34%;
  max-width: 324px;
  margin-right: -4%;
}
.point3_inner {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  align-items: flex-end;
  justify-content: space-between;
}
.point_mask {
  position: relative;
  width: 44%;
}
.point_detail {
  width: 50%;
}
.point_mask {
  position: relative;
  width: 44%;
  padding: 46px 46px 0;
  text-align: center;
  background: #FFF;
  border: 1px solid #2f5194;
  border-radius: 200px 200px 0 0;
  overflow: hidden;
  z-index: 2;
}
.point_mask_item {
  margin-bottom: 13%;
}
.point_mask_arw {
  position: absolute;
  top: 47%;
  left: 12%;
  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%);
  }
}
.point_mask::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(../images/sec_img12.png) 50% 0 / cover no-repeat;
  transform: translateY(100%);
  transition: 0.8s ease-in-out;
  z-index: -1;
}
.point_mask_ttl {
  margin: 0 -46px 0;
  font-size: 0;
}
.point_ml {
  position: relative;
  margin-bottom: 42px;
  font-size: 0;
  z-index: 2;
}
.point_ml_co {
  position: absolute;
  right: -52px;
  bottom: 11px;
}
.point_detail .hydraId_note {
  margin-top: 12px;
  text-align: right;
}

.sec_fragrance {
  position: relative;
  padding: 113px 40px 120px;
  background: url(../images/sec_bg06_pc.png) 50% 50% / cover no-repeat;
}
.fragrance_item {
  position: relative;
  text-align: center;
  z-index: 3;
}
.fragrance_ill {
  position: absolute;
  z-index: 2;
}
.ill1 {
  top: -48px;
  left: -20px;
}
.ill2 {
  right: -76px;
  bottom: 18px;
}

/* --- Offer overrides commented out: style_2.css takes priority ---
.hydid_offer_body {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hydid_offer_body_left {
  width: 50%;
  flex: auto;
}
.hydid_offer_title {
  width: 408px;
  margin: 0 auto 20px;
}
.hydid_offer_desc {
  width: 100%;
  margin-bottom: 40px;
}
.offer_txt {
  margin: 30px 20px;
  text-align: center;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
}
.offer_txt span {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}
.hydid_offer_body_right {
  max-width: 320px;
  padding-top: 64px;
}
.hydid_offer_body_right .hydraId_note {
  font-weight: 500;
  backdrop-filter: drop-shadow(1px 1px 4px rgba(255, 255, 255, 0.8));
  text-shadow: 0 0 12px white;
}
.hydid_offer_body_right .hydid_offer_box_cta {
  max-width: 290px;
  margin: 0 auto;
  background: #2f5194;
}
.hydid_offer_box.offter_shop {
  border: 2px solid #2e5194;
}
.hydid_offer_box.offter_shop .hydid_offer_box_showcase_price {
  text-align: left;
  line-height: 1.1;
}
.hydid_offer_body_right .hydid_offer_box.offter_shop .hydid_offer_box_showcase {
  padding: 0 0 0 30px;
}
.hydid_offer_body_right .hydid_offer_box.offter_shop .hydid_offer_box_cta {
  color: #2e5194;
  background: #FFF;
  border: 1px solid #2e5194;
}
.hydid_offer_body_right .hydid_offer_box_title.normal {
  color: #2e5194;
  background: #bfd2f7;
}
--- end Offer overrides comment out --- */

/*==================================*/
              /*  SP  */
/*==================================*/

@media screen and (max-width: 767px) {
  .hydid_pt_ball_1 {
    top: 145.066vw;
    left: -22.46vw;
    width: 34.8vw;
  }
  .hydid_pt_ball_2 {
    top: 20.133vw;
    left: 22.93vw;
    width: 15.466vw;
  }
  .hydid_pt_ball_3 {
    top: 3.57vw;
    left: 50.56vw;
    width: 13.128vw;
  }
  .hydid_pt_ball_4 {
    top: 119.733vw;
    left: 90.333vw;
    width: 23.06vw;
  }
  .hydid_pt_ball_5 {
    top: -47.86vw;
    left: 60vw;
    width: 45.2vw;
  }

  .hydraId_fv_point {
    width: 24vw;
    height: 24vw;
    padding-top: 1vw;
    font-size: 3.733vw;
    line-height: 1.3;
  }
  .hydraId_fv_point.point1 {
    top: 113.06vw;
    left: 11.4vw;
  }
  .hydraId_fv_point.point2 {
    top: 113.06vw;
    left: 37.5vw;
  }
  .hydraId_fv_point.point3 {
    top: 113.06vw;
    left: 64.3vw;
  }
  .hydraId_fv .hydraId_note {
    padding: 0 10px;
    margin: 30px 0 0;
  }

  .hydraId_foryou {
    padding: 28px 24px 40px;
    background-image: url(../images/sec_bg01_sp.png);
  }
  .hydarId_sec_title {
    margin-bottom: 32px;
    font-size: 23px;
  }
  .hydarId_sec_txt {
    font-size: 14px;
  }
  .hydraId_foryou .hydarId_sec_txt {
    font-size: 16px;
    line-height: 1.8;
  }
  .foryou_mask {
    display: none;
  }
  .foryou_box {
    margin: 50px auto 20px;
  }
  .foryou_bpx_title {
    width: 49.333vw;
  }
  .hydraId_foryou .hydraId_note {
    text-align: left;
  }
  .hydraId_foryou .hydraId_note br {
    display: none;
  }

  .sec_idee {
    padding: 20px 24px 40px;
    background-image: url(../images/sec_bg02_sp.png);
  }
  .idee_title {
    width: 42.666vw;
    max-width: 160px;
    padding: 0;
    margin: 0 auto 91.73vw;
  }
  .idee_ill.ill1 {
    width: auto;
    top: 12.2vw;
    left: -24px;
    right: -14px;
  }
  .idee_ill.ill2 {
    display: none;
  }
  .idee_box {
    padding: 0;
    background: transparent;
  }
  .idee_box .hydarId_sec_title {
    margin-bottom: 16px;
    font-size: 32px;
    text-align: center;
  }
  .idee_box .hydarId_sec_txt {
    margin-bottom: 6px;
  }

  .point-t-t svg {
    width: 100%;
    height: auto;
  }
  .point-t-t {
    width: 98%;
    margin: 0 auto -5vw;
  }
  .sec_point .inner {
    padding: 50px 24px 0;
    background-image: url(../images/sec_bg03_sp.png);
  }
  .point-title > div {
    width: 100%;
    padding: 24px 38px;
  }
  .point-title {
    font-size: 18px;
  }
  .point-title big {
    font-size: 32px;
  }
  .hydid_pt_sec_head {
    padding: 0;
  }
  .hydid_pt_sec_head_title_text {
    display: block;
  }
  .items_tw .point-item {
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
  }
  .point-items.items_tw {
    margin-bottom: -10px;
  }
  .hydid_pt_sec_head_title_point > div:nth-child(2) {
    font-size: 0;
  }
  .hydid_pt_sec_head_title_point img {
    width: auto;
    height: 6.8vw;
  }
  .items_thr .point-item,
  .items_thr .point-item:nth-child(3n),
  .point2 .items_thr .point-item:last-child {
    display: flex;
    padding: 0 12px;
    margin: 0;
    max-width: 250px;
  }
  .point-items .slick-slide img.pc {
    position: absolute;
    display: none;
  }
  .point-items .slick-track {
    display: flex;
    align-items: flex-start;
  }
  .point-items.items_thr {
    padding-bottom: 20px;
    margin-bottom: 16px;
  }
  .point-items .slick-dots {
    bottom: 0;
  }
  .point-items .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0 2.5px;
  }
  .point-items .slick-dots li button {
    width: 100%;
    height: 100%;
    border-color: #19140f;
  }
  .point-items .slick-dots li.slick-active button {
    background: #19140f;
  }

  .point3_inner {
    display: block;
  }
  .point_mask {
    width: 100%;
    padding: 44px 45px 0;
    margin: 0 auto 45px;
  }
  .point_mask_ttl {
    margin: 0 -45px;
  }
  .point_mask_arw {
    left: 9%;
  }
  .point_detail {
    width: 100%;
    padding-bottom: 70px;
  }
  .point_ml {
    margin-bottom: 24px;
  }
  .point_ml_co {
    right: -20px;
    bottom: 10px;
    width: 40%;
  }

  .sec_fragrance {
    padding: 86px 24px 140px;
  }
  .ill1 {
    top: -28px;
    left: -28px;
    width: 157px;
  }
  .ill2 {
    right: -47px;
    bottom: 1px;
    width: 194px;
  }

  .hydid_howto_item_pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/*=================================*/
/*アニメーション*/
/*=================================*/

.foryou_box .foryou_bpx_title {
  padding-top: 80px;
  opacity: 0;
  transition: 0.6s ease-in-out;
}
.foryou_box .foryou_mask {
  transform: translateY(50px);
  opacity: 0;
  transition: 0.6s 0.7s ease-in-out;
}
.foryou_box .foryou_inner {
  transform: translateY(50px);
  opacity: 0;
  transition: 0.6s ease-in-out;
}

.foryou_box.ant_show .foryou_bpx_title {
  padding-top: 0;
  opacity: 1;
}

.foryou_box.ant_show .foryou_mask,
.foryou_box.ant_show .foryou_inner {
  transform: translateY(0);
  opacity: 1;
}

.idee_ills.ant_item .ill1 {
  transform: translateY(80px) rotate(5deg);
  opacity: 0;
  transition: 0.6s ease-in-out;
}
.idee_ills.ant_item .ill2 {
  transform: translateY(80px) rotate(-5deg);
  opacity: 0;
  transition: 0.6s ease-in-out;
}
.idee_ills.ant_item.ant_show .idee_ill {
  transform: translateY(0)rotate(0);
  opacity: 1;
}

.point-t-t.ant_item path {
  opacity: 0;
  transform: translateY(18px);
  transition: 0.3s ease-out;
}
.point-t-t.ant_item .point_t_item02 {
  transition-delay: 0.1s;
}
.point-t-t.ant_item .point_t_item03 {
  transition-delay: 0.2s;
}
.point-t-t.ant_item .point_t_item04 {
  transition-delay: 0.3s;
}
.point-t-t.ant_item .point_t_item05 {
  transition-delay: 0.4s;
}
.point-t-t.ant_item .point_t_item06 {
  transition-delay: 0.5s;
}
.point-t-t.ant_item .point_t_item07 {
  transition-delay: 0.6s;
}
.point-t-t.ant_item .point_t_item08 {
  transition-delay: 0.7s;
}
.point-t-t.ant_item .point_t_item09 {
  transition-delay: 0.8s;
}
.point-t-t.ant_item .point_t_item10 {
  transition-delay: 0.9s;
}
.point-t-t.ant_item .point_t_item11 {
  transition-delay: 1s;
}
.point-t-t.ant_item .point_t_item12 {
  transition-delay: 1.1s;
}
.point-t-t.ant_item .point_t_item13 {
  transition-delay: 1.2s;
}

.point-t-t.ant_show path {
  transform: translateY(0);
  opacity: 1;
}

.point-title.ant_item,
.sec_fragrance .ant_item,
.hydid_every_points.ant_item img {
  transform: translateY(64px);
  opacity: 0;
  transition: 0.6s ease-in-out;
}
.point-title.ant_show,
.sec_fragrance .ant_show,
.hydid_every_points.ant_show img {
  transform: translateY(0);
  opacity: 1;
}

.hydid_every_points.ant_show img:nth-child(2) {
  transition-delay: 0.2s;
}
.hydid_every_points.ant_show img:nth-child(3) {
  transition-delay: 0.4s;
}

.point_mask.ant_show::after{
  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);
  }
}