@charset "utf-8";
/* ============================================================================================== */
/* フォント                                                                                   */
/* ============================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
/* ============================================================================================== */
/* タブレット用                                                                                   */
/* ============================================================================================== */
@media screen and (max-width: 768px) {
  body {
    width: auto;
  }
}
main.l-main {
  margin-bottom: 0;
}

/* ============================================================================================== */
/* common                                                                                         */
/* ============================================================================================== */
* {
  box-sizing: border-box;
}
#no1milk {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #333333;
}
#no1milk h1,
#no1milk h2,
#no1milk h3,
#no1milk h4,
#no1milk h5,
#no1milk p,
#no1milk figure,
#no1milk dl,
#no1milkdl dt,
#no1milk dl dd,
#no1milk ul,
#no1milk ul li,
#no1milk ol,
#no1milk ol li {
  padding: 0;
  margin: 0;
}
#no1milk ul > li,
#no1milk ol > li {
  list-style: none;
}
#no1milk img {
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
#no1milk a img {
  transition: all 1s;
}
#no1milk a:hover img {
  opacity: 0.5;
}
/*--- layout --*/
#no1milk .fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 980px) {
  #no1milk .inner_cont {
    width: 980px;
    margin: auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #no1milk .inner_cont {
    width: 98vw;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  #no1milk .inner_cont {
    width: 90.47vw;
    margin: auto;
  }
}
/*--- text --*/
#no1milk h2 {
  color: #ed262d;
  font-size: 36px;
  font-weight: 700;
}
#no1milk p {
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
#no1milk .notes {
  font-size: 12px;
  font-weight: 500;
}
#no1milk .txtp24 {
  color: #ed262d;
  font-size: 24px;
  font-weight: 700;
}
#no1milk .txtc {
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  #no1milk h2 {
    font-size: 36px;
  }
  #no1milk p {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  #no1milk h2 {
    font-size: 24px;
  }
  #no1milk p {
    font-size: 14px;
  }
  #no1milk .notes {
    font-size: 9px;
  }
  #no1milk .txtp24 {
    font-size: 16px;
  }
}
/*--- btn --*/
#no1milk .btn_pink {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 15px;
  background: #ff8583 url("../images/icon_win.svg") center right 15px no-repeat;
  border-radius: 8px;
  transition: all 1s;
}
#no1milk .btn_red {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 15px;
  background: #ed262d url("../images/icon_win.svg") center right 15px no-repeat;
  border-radius: 8px;
  transition: all 1s;
}
#no1milk .btn_pink:hover,
#no1milk .btn_red:hover {
  opacity: 0.5;
}
/*--- pc&sp switching --*/
#no1milk .sp {
  display: none !important;
}
@media screen and (max-width: 768px) {
  #no1milk .sp {
    display: block !important;
  }
  #no1milk .pc {
    display: none !important;
  }
}
/*--- fade --*/
#no1milk .fade_off {
  opacity: 0;
  transition: all 1s ease 0s;
}
#no1milk .fade_on {
  opacity: 1;
}
#no1milk .fade::before,
#no1milk .fade::after {
  opacity: 0;
  transition: all 1s;
}
#no1milk .fade_on::before,
#no1milk .fade_on::after {
  opacity: 1;
}
/*-- waves --*/
#no1milk .waves {
  position: relative;
  bottom: -46px;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  min-height: 20px;
  max-height: 50px;
  transform: scale(1, -1.5);
}
@media screen and (max-width: 768px) {
  #no1milk .waves {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 20px;
    max-height: 27px;
    transform: scale(1, -1.5);
    background: #fef4db;
  }
  #no1milk .waves_02 {
    position: relative;
    bottom: 26px;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 20px;
    max-height: 27px;
  }
  #no1milk .waves_03 {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 20px;
    max-height: 27px;
    transform: scale(1, -1.5);
    background: rgba(255, 255, 255, 0);
  }
  #no1milk .parallax use {
    fill: #ffe8e5;
  }
}
/*--  Animation --*/
#no1milk .parallax > use {
  animation: wave_animation 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  animation-delay: -2s;
  animation-duration: 7s;
}
#no1milk .parallax_02 > use {
  animation: wave_animation 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  animation-delay: -2s;
  animation-duration: 5s;
}
@keyframes wave_animation {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* ============================================================================================== */
/* fsview                                                                                         */
/* ============================================================================================== */
#fsview {
  position: relative;
  width: 98.611vw;
  height: 500px;
  max-width: 1420px;
  margin: 10px auto 0;
  background: url("../images/fsview_bg.png") center center no-repeat;
  background-size: cover;
}
#fsview .inner_cont {
  align-items: center;
  padding: 92px 0 0;
  z-index: 1;
}
#fsview .inner_cont .ttl {
  z-index: 10;
}
#fsview .inner_cont .logo {
  width: 178px;
  margin: 0 auto;
  animation: fadeIn01 2.5s ease 0.1s forwards;
  opacity: 0;
}
#fsview .inner_cont h1 {
  width: 421px;
  margin: 36px auto 30px;
  animation: fadeIn01 3s ease 0.3s forwards;
  opacity: 0;
}
#fsview .inner_cont p {
  font-size: 12px;
  animation: fadeIn01 3.5s ease 0.5s forwards;
  opacity: 0;
}
#fsview .inner_cont picture {
  display: block;
  width: 559px;
  z-index: 10;
  animation: fadeIn01 3s ease 0.5s forwards;
  opacity: 0;
}
/*--Animation--*/
@keyframes fadeIn01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 1420px) {
  #fsview {
    border-radius: 30px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #fsview {
    width: 98vw;
    height: 34.722vw;
    background-size: cover;
  }
  #fsview .inner_cont {
    justify-content: space-around;
    padding: 6.389vw 0 0;
  }
  #fsview .inner_cont .logo {
    width: 12.361vw;
  }
  #fsview .inner_cont h1 {
    width: 29.236vw;
    margin: 2.5vw auto 2.083vw;
  }
  #fsview .inner_cont picture {
    width: 36.25vw;
  }
}
@media screen and (max-width: 768px) {
  #fsview {
    position: relative;
    width: 95.238vw;
    height: 114.286vw;
    margin: 2.381vw auto 0;
    background: url("../images/sp/fsview_bg.png") center center no-repeat;
    background-size: cover;
  }
  #fsview .inner_cont {
    display: block;
    padding: 7.143vw 0 0;
  }
  #fsview .inner_cont .logo {
    width: 37.381vw;
  }
  #fsview .inner_cont h1 {
    width: 74.048vw;
    margin: 5vw auto 3.571vw;
  }
  #fsview .inner_cont p {
    font-size: 9px;
    text-align: center;
  }
  #fsview .inner_cont picture {
    width: 83.095vw;
    margin: 8.095vw auto 0;
  }
}
/*-- circle --*/
#fsview .circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1420px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}
#fsview .circle img {
  position: absolute;
}
#fsview .circle_01 {
  width: 126px;
  top: 30px;
  left: 30px;
  mix-blend-mode: multiply;
  animation: circle_fade 3s ease 1.5s forwards;
  opacity: 0;
}
#fsview .circle_02 {
  width: 94px;
  top: 131px;
  left: 567px;
  opacity: 0;
  animation: circle_fade 4s ease 2.5s forwards;
}
#fsview .circle_03 {
  width: 243px;
  bottom: 24px;
  left: 110px;
  mix-blend-mode: multiply;
  animation: circle_fade 5s ease 3s forwards;
  opacity: 0;
}
#fsview .circle_04 {
  width: 183px;
  top: 84px;
  right: 220px;
  mix-blend-mode: multiply;
  animation: circle_fade 3s ease 1s forwards;
  opacity: 0;
}
#fsview .circle_05 {
  width: 145px;
  top: 30px;
  right: 30px;
  animation: circle_fade 4s ease 2.5s forwards;
  opacity: 0;
}
#fsview .circle_06 {
  width: 151px;
  bottom: 10px;
  right: 20px;
  animation: circle_fade 3.5s ease 3s forwards;
  opacity: 0;
}
#fsview .circle_07 {
  width: 94px;
  top: 22px;
  right: 575px;
  mix-blend-mode: multiply;
  animation: circle_fade 2s ease 1s forwards;
  opacity: 0;
}
@keyframes circle_fade {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  50% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #fsview .circle {
    width: 98vw;
  }
}
@media screen and (max-width: 768px) {
  #fsview .circle {
    width: 95.238vw;
    height: 114.286vw;
  }
  #fsview .circle_02 {
    width: 69px;
    top: 85px;
    left: 0;
    right: 24px;
    margin: 0 0 0 auto;
    animation: circle_fade 5s ease 3s forwards;
  }
  #fsview .circle_03 {
    width: 172px;
    bottom: 171px;
    left: 10px;
    animation: circle_fade 3s ease 1.5s forwards;
  }
  #fsview .circle_06 {
    width: 125px;
    bottom: 77px;
    right: 39px;
    animation: circle_fade 4s ease 2.5s forwards;
  }
}
/*-- //circle --*/

/* ============================================================================================== */
/* review                                                                                         */
/* ============================================================================================== */
#review {
  padding: 55px 0 0;
}
#review .inner_cont {
  width: 98vw;
}
#review .inner_cont h2 {
  width: 590px;
  margin: 0 auto 50px;
}
#review .inner_cont h2 span.sub_title {
  width: 553px;
}
@media screen and (min-width: 1320px) {
  #review .inner_cont {
    width: 1320px;
  }
}
@media screen and (max-width: 768px) {
  #review {
    padding: 7.143vw 0 0;
  }
  #review .inner_cont {
    width: 100%;
  }
  #review .inner_cont h2 {
    width: 54.762vw;
    margin: 0 auto 4.048vw;
  }
  #review .inner_cont h2 span.sub_title {
    width: 48.81vw;
  }
}
/*-- slide --*/
#review .review_list {
  position: relative;
  overflow: hidden;
}
#review .review_list .swiper-slide .review_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 261px;
  height: 356px;
}
#review .review_list .swiper-slide picture {
  display: block;
  width: 201px;
}
#review .review_list .swiper_prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 255px;
  width: 18px;
  height: 36px;
  margin: auto 0;
  z-index: 5;
}
#review .review_list .swiper_next {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 255px;
  width: 18px;
  height: 36px;
  margin: auto 0;
  z-index: 5;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #review .review_list .swiper-slide .review_item {
    width: 25.958vw;
    height: 33.722vw;
  }
  #review .review_list .swiper-slide picture {
    width: 17.958vw;
  }
  #review .review_list .swiper_prev {
    left: 12vw;
  }
  #review .review_list .swiper_next {
    right: 11vw;
  }
}
@media screen and (min-width: 769px) {
  #review .review_list .swiper-slide.started picture {
    transform: scale(1.3);
    animation: scale_start 1s ease 0s forwards;
  }
  #review .review_list .swiper-slide.swiper-slide-active picture {
    display: block;
    transform: scale(1.3);
  }
  #review .review_list .swiper-slide.finished picture {
    transform: scale(1);
    animation: scale_end 1s ease 0s forwards;
  }
}
@keyframes scale_start {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
@keyframes scale_end {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (max-width: 768px) {
  #review .review_list {
    margin-left: 10px;
  }
  #review .review_list .swiper-slide .review_item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 47.857vw;
    height: 74.524vw;
  }
  #review .review_list .swiper-slide.review_02 .review_item,
  #review .review_list .swiper-slide.review_04 .review_item {
    align-items: flex-end;
  }
  /*#review .review_list .swiper-slide.swiper-slide-active .review_item {
    align-items: flex-end;
  }*/
  #review .review_list .swiper-slide picture,
  #review .review_list .swiper-slide.swiper-slide-active picture {
    width: 100%;
  }
  /*#review .review_list .swiper-slide.started picture img{
  transform: translateY(9.5vw);
  animation: translate_start 1s ease 0s forwards;
 }
 #review .review_list .swiper-slide.finished picture img{
  animation: translate_end 1s ease 0s forwards;
 }*/
}
/* @keyframes translate_start {
   0% {
    transform: translateY(0);
   }
   100% {
    transform: translateY(9.5vw);
   }
 }
 @keyframes translate_end {
   0% {
   transform: translateY(9.5vw);
   }
   100% {
    transform: translateY(0);
   }
 }*/
/*-- slide --*/
/*-- circle --*/
#review .inner_cont {
  position: relative;
}
#review .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 60px;
  width: 257px;
  height: 215px;
  background: url(../images/circle/review_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#review .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: 54px;
  right: 75px;
  width: 244px;
  height: 210px;
  background: url(../images/circle/review_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
  #review .inner_cont {
    overflow-y: visible;
    overflow-x: clip;
  }
  #review .inner_cont::before {
    top: -25px;
    left: -60px;
    width: 140px;
    height: 140px;
    background: url(../images/circle/review_circle_03.png) center center no-repeat;
  }
  #review .inner_cont::after {
    top: 0;
    right: -105px;
    width: 183px;
    height: 157px;
    background-size: cover;
  }
}
/*-- //circle --*/
/* ============================================================================================== */
/* design                                                                                         */
/* ============================================================================================== */
#design {
  padding: 120px 0 90px;
}
#design .inner_cont {
  width: 1070px;
}
#design .fl_cont {
  display: flex;
  flex-direction: column;
  width: 468px;
  padding-top: 82px;
  margin-right: 80px;
}
#design .fl_cont h2 {
  order: 2;
  margin-bottom: 42px;
}
#design .fl_cont h3 {
  order: 1;
  display: block;
  width: 230px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 3px 26px 3px;
  margin: 15px 0 10px;
  background: #ff8583;
  border-radius: 15px;
}
#design .fl_cont p {
  order: 3;
}
#design picture {
  display: block;
  width: 471px;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #design {
    overflow-x: clip;
  }
  #design .inner_cont {
    width: 98vw;
  }
  #design .fl_cont {
    width: 49vw;
    margin-right: 20px;
  }
  #design picture {
    display: block;
    width: 43vw;
  }
}
@media screen and (max-width: 768px) {
  #design {
    padding: 16.81vw 0 0;
  }
  #design .inner_cont {
    width: 100%;
  }
  #design .inner_cont .fl {
    flex-direction: column-reverse;
  }
  #design .fl_cont {
    align-items: center;
    width: 100%;
    padding-top: 0;
  }
  #design .fl_cont h2 {
    order: 1;
    text-align: center;
    margin-bottom: 1.19vw;
  }
  #design .fl_cont h3 {
    order: 2;
    width: 54.762vw;
    font-size: 16px;
    padding: 0.714vw 6.048vw 0.714vw;
    margin: 0 0 8.333vw;
  }
  #design .fl_cont p {
    text-align: center;
  }
  #design .figure {
    width: 100vw;
    margin-top: 9.524vw;
    padding-bottom: 9.524vw;
    background: #f3f9fa;
  }
  #design .figure picture {
    width: 92.857vw;
    margin: auto;
  }
}
/*-- circle --*/
#design .inner_cont {
  position: relative;
}
#design .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 395px;
  width: 131px;
  height: 159px;
  background: url(../images/circle/design_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#design .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -31px;
  width: 173px;
  height: 174px;
  background: url(../images/circle/design_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
#design .inner_cont .fl {
  position: relative;
}
#design .inner_cont .fl::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 128px;
  height: 143px;
  background: url(../images/circle/design_circle_03.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.7s;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #design {
    overflow-x: clip;
  }
}
@media screen and (max-width: 768px) {
  #design .inner_cont {
    overflow-y: visible;
    overflow-x: clip;
  }
  #design .inner_cont .fl {
    overflow-y: visible;
  }
  #design .inner_cont::before {
    top: -83px;
    left: -83px;
    width: 131px;
    height: 159px;
  }
  #design .inner_cont::after {
    bottom: -100px;
    right: -44px;
    width: 173px;
    height: 174px;
    margin: auto 0 0 0;
    background-size: cover;
  }
  #design .inner_cont .fl::before {
    top: -40px;
    right: -30px;
    width: 97px;
    height: 108px;
    background-size: cover;
  }
}
/*-- //circle --*/
/* ============================================================================================== */
/* research                                                                                       */
/* ============================================================================================== */
#research {
  padding: 40px 0 90px;
}
#research .inner_cont {
  width: 1070px;
}
#research .inner_cont .fl {
  justify-content: flex-end;
}
#research .fl_cont {
  display: flex;
  flex-direction: column;
  width: 468px;
  padding-top: 103px;
}
#research .fl_cont h2 {
  order: 2;
  margin-bottom: 42px;
}
#research .fl_cont h3 {
  order: 1;
  display: block;
  width: 230px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 3px 26px 3px;
  margin: 15px 0 10px;
  background: #ff8583;
  border-radius: 15px;
}
#research .fl_cont p {
  order: 3;
}
#research .figure picture {
  display: block;
  width: 561px;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #research .inner_cont {
    width: 98vw;
  }
  #research .inner_cont .fl {
    justify-content: center;
  }
  #research .fl_cont {
    width: 49vw;
  }
  #research .figure {
    width: 47vw;
  }
  #research .figure picture {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #research {
    padding: 14.286vw 0 0;
  }
  #research .inner_cont {
    width: 100%;
  }
  #research .inner_cont .fl {
    justify-content: flex-end;
  }
  #research .fl_cont {
    align-items: center;
    width: 100%;
    padding-top: 0;
  }
  #research .fl_cont h2 {
    order: 1;
    text-align: center;
    margin-bottom: 1.19vw;
  }
  #research .fl_cont h3 {
    order: 2;
    width: 54.762vw;
    font-size: 16px;
    padding: 0.714vw 6.048vw 0.714vw;
    margin: 0 0 8.333vw;
  }
  #research .fl_cont p {
    text-align: center;
  }
  #research .figure {
    width: 100vw;
    margin-top: 9.524vw;
    background: #ffe8e5;
  }
  #research .figure picture {
    width: 88.095vw;
    margin: auto;
  }
}
/*-- circle --*/
#research .inner_cont {
  position: relative;
}
#research .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: -40px;
  left: 0;
  width: 145px;
  height: 163px;
  background: url(../images/circle/research_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#research .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 317px;
  width: 185px;
  height: 197px;
  background: url(../images/circle/research_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
  #research {
    overflow: hidden;
  }
  #research .inner_cont::before {
    top: 39px;
    left: -79px;
    width: 119px;
    height: 133px;
    background-size: cover;
  }
  #research .inner_cont::after {
    top: 170px;
    right: 0;
    width: 129px;
    height: 123px;
    background-size: cover;
  }
}
/*-- //circle --*/
/* ============================================================================================== */
/* convenience                                                                                    */
/* ============================================================================================== */
/*-- coveni_header --*/
#convenience .coveni_header {
  text-align: center;
  height: 527px;
  padding: 154px 0 80px;
  background: url("../images/convenience_bg.png") center center no-repeat;
}
#convenience .coveni_header h3 {
  display: inline-block;
  color: #ed262d;
  font-size: 19px;
  letter-spacing: 0px;
  padding: 4px 26px 5px;
  margin: 15px auto 40px;
  background: #fff;
  border-radius: 15px;
}
@media screen and (max-width: 768px) {
  #convenience {
    overflow: hidden;
  }
  #convenience .coveni_header {
    height: auto;
    padding: 11.048vw 0 9.524vw;
    background: url("../images/sp/convenience_bg.png") center center no-repeat;
    background-size: cover;
  }
  #convenience .coveni_header h3 {
    font-size: 16px;
    padding: 0.714vw 5.238vw 0.714vw;
    margin: 1.19vw auto 8.333vw;
  }
}
/*-- coveni_item common --*/
#convenience .coveni_item {
  border-bottom: #fef4db 10px solid;
}
#convenience .coveni_item .inner_cont {
  width: 1100px;
}
#convenience .coveni_item .check {
  width: 124px;
}
#convenience .coveni_item .point_list p {
  font-size: 19px;
  letter-spacing: -0.09em;
  line-height: 1.421;
  text-align: center;
}
#convenience .coveni_item .sp_cont {
  display: none;
}
@media screen and (min-width: 1025px) {
  #convenience .coveni_item .point_list {
    padding: 17px 20px 20px;
    background: #f8f4ec;
    border-radius: 14px;
  }
  #convenience .coveni_item .point_list .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  #convenience .point_list .point_01,
  #convenience .point_list .point_02,
  #convenience .point_list .point_03,
  #convenience .point_list .point_04 {
    width: 250px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #convenience .coveni_item .inner_cont {
    width: 97%;
  }
  #convenience .coveni_item .point_list {
    padding: 1.181vw 1.389vw 1.389vw;
    background: #f8f4ec;
    border-radius: 14px;
  }
  #convenience .coveni_item .point_list .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  #convenience .point_list .point_01,
  #convenience .point_list .point_02,
  #convenience .point_list .point_03,
  #convenience .point_list .point_04 {
    width: 22.278vw;
  }
}
@media screen and (max-width: 768px) {
  /* #convenience .coveni_item {
  } */
  #convenience .coveni_item .inner_cont {
    width: 100%;
  }
  #convenience .coveni_item .check {
    width: 19.048vw;
    margin-top: 2.381vw;
  }
  #convenience .coveni_item .point_list p {
    width: 56.5vw;
    font-size: 13px;
  }
  #convenience .coveni_item .sp_fl {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 1.19vw;
  }
  #convenience .coveni_item .sp_cont {
    display: block;
    width: 19.048vw;
  }
  #convenience .coveni_item .sp_slide {
    width: 78.571vw;
    padding: 4.048vw 0 4.524vw 7.143vw;
    background: #f8f4ec;
    border-radius: 14px 0 0 14px;
  }
  #convenience .coveni_item .point_list {
    width: 100%;
    margin: 0 0 0 auto;
  }
  #convenience .point_list .point_01,
  #convenience .point_list .point_02,
  #convenience .point_list .point_03,
  #convenience .point_list .point_04 {
    width: 59.524vw !important;
  }
  #convenience .point_list .swiper-slide img {
    width: 56.5vw;
  }
  #convenience .point_list .swiper_pagination {
    width: 52.381vw;
    text-align: center;
  }
  #convenience .point_list .swiper_pagination span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: #bcbcbc;
    border-radius: 5px;
    cursor: pointer;
  }
  #convenience .point_list .swiper_pagination span.swiper-pagination-bullet-active {
    background: #ff8583;
  }
}
/*-- coveni_item 01 --*/
#convenience .item_01 {
  padding: 50px 0 40px;
}
#convenience .item_01 .ttl {
  width: 733px;
  margin: 0 auto 20px;
}
#convenience .item_01 h3 {
  width: 566px;
}
@media screen and (max-width: 768px) {
  #convenience .item_01 {
    padding: 10.476vw 0 7.143vw;
  }
  #convenience .item_01 .ttl {
    width: 80.952vw;
    margin: 0 auto 7.143vw;
  }
  #convenience .item_01 h3 {
    width: 80.952vw;
  }
  #convenience .item_01 .sp_cont img.product {
    display: block;
    width: 19.048vw;
    margin: 0 auto;
  }
}
/*-- circle --*/
#convenience .item_01 .inner_cont {
  position: relative;
}
#convenience .item_01 .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: 70px;
  left: -80px;
  width: 145px;
  height: 135px;
  background: url(../images/circle/item_01_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#convenience .item_01 .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: -40px;
  right: -111px;
  width: 185px;
  height: 197px;
  background: url(../images/circle/item_01_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #convenience {
    overflow-x: clip;
  }
}
@media screen and (max-width: 768px) {
  #convenience .item_01 .inner_cont::before {
    top: 9.048vw;
    left: -11.905vw;
    width: 17.857vw;
    height: 16.667vw;
    background-size: cover;
  }
  #convenience .item_01 .inner_cont::after {
    top: -9.524vw;
    right: -6.905vw;
    width: 13.333vw;
    height: 15vw;
    background-size: cover;
  }
}
/*-- //circle --*/
/*-- //coveni_item 01 --*/
/*-- coveni_item 02 --*/
#convenience .item_02 {
  padding: 50px 0 40px;
}
#convenience .item_02 .ttl {
  width: 689px;
  margin: 0 auto 20px;
}
#convenience .item_02 h3 {
  width: 526px;
}
@media screen and (max-width: 768px) {
  #convenience .item_02 {
    padding: 10.476vw 0 7.143vw;
  }
  #convenience .item_02 .ttl {
    width: 73.81vw;
    margin: 0 auto 7.143vw;
  }
  #convenience .item_02 h3 {
    width: 73.81vw;
  }
  #convenience .item_02 .sp_cont img.product {
    display: block;
    width: 16.429vw;
    margin: 0 auto;
  }
}
/*-- circle --*/
#convenience .item_02 .inner_cont {
  position: relative;
}
#convenience .item_02 .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: -39px;
  left: -109px;
  width: 149px;
  height: 181px;
  background: url(../images/circle/item_02_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#convenience .item_02 .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: -39px;
  right: -84px;
  width: 158px;
  height: 183px;
  background: url(../images/circle/item_02_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
  #convenience .item_02 .inner_cont::before {
    top: -6.714vw;
    left: -2.381vw;
    width: 17.857vw;
    height: 21.667vw;
    background-size: cover;
  }
  #convenience .item_02 .inner_cont::after {
    top: 15.238vw;
    right: -4.048vw;
    width: 14.524vw;
    height: 16.905vw;
    background-size: cover;
  }
}
/*-- //circle --*/
/*-- //coveni_item 02 --*/
/*-- coveni_item 03 --*/
#convenience .item_03 {
  padding: 50px 0 40px;
}
#convenience .item_03 .ttl {
  width: 632px;
  margin: 0 auto 20px;
}
#convenience .item_03 h3 {
  width: 469px;
}
#convenience .item_03.coveni_item .point_list .swiper-wrapper {
  width: 794px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  #convenience .item_03 {
    padding: 10.476vw 0 7.143vw;
  }
  #convenience .item_03 .ttl {
    width: 68.333vw;
    margin: 0 auto 7.143vw;
  }
  #convenience .item_03 h3 {
    width: 68.333vw;
  }
  #convenience .item_03 .sp_cont img.product {
    display: block;
    width: 11.905vw;
    margin: 0 auto;
  }
}
/*-- circle --*/
#convenience .item_03 .inner_cont {
  position: relative;
}
#convenience .item_03 .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: -29px;
  left: -84px;
  width: 134px;
  height: 137px;
  background: url(../images/circle/item_03_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#convenience .item_03 .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  right: -123px;
  width: 149px;
  height: 122px;
  background: url(../images/circle/item_03_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
  #convenience .item_03 .inner_cont::before {
    top: -2.381vw;
    left: -9.524vw;
    width: 25.476vw;
    height: 26.19vw;
    background-size: cover;
  }
  #convenience .item_03 .inner_cont::after {
    top: 2.381vw;
    right: -3.19vw;
    width: 15.952vw;
    height: 14.762vw;
    background-size: 100% auto;
  }
}
/*-- //circle --*/
/*-- //coveni_item 02 --*/
/* ============================================================================================== */
/* check                                                                                          */
/* ============================================================================================== */
#check {
  padding: 120px 0;
}
#check .inner_cont {
  width: 990px;
}
#check .inner_cont p.hukidashi {
  width: 450px;
  margin: auto;
}
#check .inner_cont h2 {
  width: 468px;
  margin: 13px auto 30px;
}
#check .inner_cont ul {
  margin-top: 37px;
}
#check .inner_cont ul li {
  width: 330px;
}
@media screen and (min-width: 769px) and (max-width: 1025px) {
  #check {
    padding: 120px 0;
  }
  #check .inner_cont {
    width: 98vw;
  }
  #check .inner_cont p.hukidashi {
    width: 31.25vw;
  }
  #check .inner_cont h2 {
    width: 32.5vw;
    margin: 0.903vw auto 2.083vw;
  }
  #check .inner_cont ul {
    margin-top: 2.569vw;
  }
  #check .inner_cont ul li {
    width: 31.917vw;
  }
}
@media screen and (max-width: 768px) {
  #check {
    padding: 19.048vw 0 16.667vw;
  }
  #check .inner_cont {
    width: 90.47vw;
  }
  #check .inner_cont p.hukidashi {
    width: 73.571vw;
  }
  #check .inner_cont h2 {
    width: 74.286vw;
    margin: 2.143vw auto 7.143vw;
  }
  #check .inner_cont ul {
    margin-top: 7.143vw;
  }
  #check .inner_cont ul li {
    width: 100%;
  }
}
/*-- modal-video --*/
.modal-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  cursor: pointer;
  opacity: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video;
  transition: opacity 0.3s ease-out;
}
.modal-video-close {
  opacity: 0;
}
.modal-video-close .modal-video-movie-wrap {
  transform: translate(0, 100px);
}
.modal-video-body {
  max-width: 960px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.modal-video-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (orientation: landscape) {
  .modal-video-inner {
    padding: 10px 60px;
    box-sizing: border-box;
  }
}
.modal-video-movie-wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  background-color: #333;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video-inner;
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}
.modal-video-movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-video-close-btn {
  position: absolute;
  z-index: 2;
  top: -45px;
  right: 0;
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  background: transparent;
}
@media (orientation: landscape) {
  .modal-video-close-btn {
    top: -40px;
    right: 0;
  }
}
.modal-video-close-btn:before {
  transform: rotate(45deg);
}
.modal-video-close-btn:after {
  transform: rotate(-45deg);
}
.modal-video-close-btn:before,
.modal-video-close-btn:after {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  top: 50%;
  left: 0;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
}
@keyframes modal-video {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-video-inner {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, 0);
  }
}
/*-- //modal-video --*/
/* ============================================================================================== */
/* anniversary                                                                                    */
/* ============================================================================================== */
#anniversary {
  padding: 60px 0 63px;
  background: #fff5e5;
}
#anniversary .inner_cont .fl_cont {
  width: 395px;
}
#anniversary .inner_cont .fl_cont h2 {
  width: 395px;
  margin: 0 auto 45px;
}
#anniversary .inner_cont .fl_cont h3 {
  width: 200px;
  margin: 36px auto 0;
}
#anniversary .inner_cont .btn {
  align-items: flex-end;
  /* padding-top: 30px; */
}
#anniversary .inner_cont .sale {
  display: block;
  width: 218px;
  margin-bottom: 7px;
}
#anniversary .inner_cont .btn .btn_pink {
  width: 220px;
}
#anniversary .inner_cont .btn .btn_red {
  width: 220px;
}
#anniversary .inner_cont .product {
  width: 488px;
}
#anniversary .inner_cont .product .point {
  display: block;
  width: 380px;
  margin: 0 auto 36px;
}
#anniversary .inner_cont .product picture {
  display: block;
  margin: 0 auto 20px;
}
#anniversary .inner_cont .product p.notes {
  text-align: right;
}

@media screen and (min-width: 769px) and (max-width: 1025px) {
  #anniversary .inner_cont .fl_cont {
    width: 47vw;
  }
  #anniversary .inner_cont .fl_cont h2 {
    width: 39.431vw;
  }
  #anniversary .inner_cont .fl_cont h3 {
    width: 16.889vw;
  }
  #anniversary .inner_cont .fl_cont .btn {
    padding-top: 2.083vw;
  }
  #anniversary .inner_cont .fl_cont .sale {
    width: 21.278vw;
    margin-bottom: 0.486vw;
  }
  #anniversary .inner_cont .btn .btn_pink {
    width: 21.278vw;
  }
  #anniversary .inner_cont .btn .btn_red {
    width: 21.278vw;
  }
  #anniversary .inner_cont .product {
    width: 45vw;
  }
  #anniversary .inner_cont .product .point {
    width: 100%;
    margin: 0 auto 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  #anniversary {
    /*padding: 9.524vw 0 9.524vw;*/
    padding: 9.524vw 0 23.81vw;
  }
  #anniversary .inner_cont .fl_cont {
    width: 100%;
  }
  #anniversary .inner_cont .fl_cont h2 {
    width: 71.667vw;
    margin-bottom: 3.333vw;
  }
  #anniversary .inner_cont .fl_cont h3 {
    width: 18.333vw;
    margin: 0 auto 7.143vw;
  }
  #anniversary .inner_cont .fl_cont p.notes {
    text-align: center;
  }
  #anniversary .inner_cont .fl_cont .point {
    display: block;
    width: 90.476vw;
    margin: 6.19vw auto 9.524vw;
  }
  #anniversary .inner_cont .fl_cont .product_sp {
    width: 83.095vw;
    margin: 0 auto;
  }
  #anniversary .inner_cont .fl_cont .btn {
    display: block;
    text-align: center;
    padding-top: 9.524vw;
  }
  #anniversary .inner_cont .fl_cont .sale {
    width: 51.905vw;
    margin: 7.143vw auto 1.905vw;
  }
  #anniversary .inner_cont .fl_cont .btn .btn_pink {
    width: 66.667vw;
    margin: 0 auto;
  }
  #anniversary .inner_cont .fl_cont .btn .btn_red {
    width: 66.667vw;
    margin: 0 auto;
  }
}

/* ============================================================================================== */
/* online                                                                                         */
/* ============================================================================================== */
#online {
  padding: 100px 0 120px;
}
#online .inner_cont {
  text-align: center;
}
#online .inner_cont h2 {
  margin: 20px auto 60px;
}
#online .inner_cont picture {
  display: block;
  width: 557px;
  margin: 12px auto 40px;
}
#online .inner_cont .btn_pink {
  width: 280px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  #online {
    padding: 14.286vw 0 19.048vw;
  }
  #online .inner_cont h2 {
    margin: 2.381vw auto 9.524vw;
  }
  #online .inner_cont picture {
    display: block;
    width: 90.476vw;
    margin: 1.19vw auto 7.143vw;
  }
  #online .inner_cont .btn_pink {
    width: 66.667vw;
  }
}
/*-- circle --*/
#online .inner_cont {
  position: relative;
}
#online .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: -40px;
  left: 0;
  width: 227px;
  height: 196px;
  background: url(../images/circle/online_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#online .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: 125px;
  right: 0;
  width: 140px;
  height: 140px;
  background: url(../images/circle/online_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (max-width: 768px) {
  #online {
    overflow: hidden;
  }
  #online .inner_cont::before {
    top: -37px;
    left: -130px;
  }
  #online .inner_cont::after {
    top: 14px;
    right: -95px;
  }
}
/*-- //circle --*/

/* ============================================================================================== */
/* step                                                                                           */
/* ============================================================================================== */
#step {
  padding: 100px 0 120px;
}
#step .inner_cont {
  width: 980px;
  text-align: center;
}
#step .inner_cont h2 {
  position: relative;
  display: inline-block;
  padding-top: 66px;
  margin-bottom: 52px;
}
#step .inner_cont h2 span {
  position: absolute;
  display: block;
  top: 20px;
  left: -30px;
  width: 139px;
}
#step .inner_cont .fl {
  align-items: flex-end;
}
#step .inner_cont .fl_cont {
  width: 455px;
}
#step .inner_cont .fl_cont h3 {
  width: 415px;
  margin: 36px auto 32px;
}
#step .inner_cont .fl_cont .btn {
  align-items: flex-end;
  text-align: left;
  padding-top: 0;
}
#step .inner_cont .fl_cont .sale {
  display: block;
  width: 218px;
  margin-bottom: 7px;
}
#step .inner_cont .fl_cont .btn .btn_pink {
  width: 220px;
}
#step .inner_cont .fl_cont .btn .btn_red {
  width: 220px;
}
#step .inner_cont .product {
  width: 500px;
}
#step .inner_cont .product picture {
  display: block;
  margin: 0 auto 0;
}
#step .inner_cont .product p.notes {
  text-align: right;
}

@media screen and (min-width: 769px) and (max-width: 1439px) {
  #step .inner_cont {
    width: 95vw;
    max-width: 980px;
  }
  #step .inner_cont h2 {
    padding-top: 6.735vw;
    margin-bottom: 5.306vw;
  }
  #step .inner_cont h2 span {
    top: 2.041vw;
    left: -3.061vw;
    max-width: 139px;
    width: 14.184vw;
  }
  #step .inner_cont .fl_cont {
    width: 47vw;
    max-width: 455px;
  }
  #step .inner_cont .fl_cont h3 {
    width: 42.347vw;
    max-width: 415px;
  }
  #step .inner_cont .fl_cont .sale {
    width: 21.278vw;
    max-width: 218px;
    margin-bottom: 0.486vw;
  }
  #step .inner_cont .fl_cont .btn .btn_pink {
    width: 21.278vw;
    max-width: 220px;
  }
  #step .inner_cont .fl_cont .btn .btn_red {
    width: 21.278vw;
    max-width: 220px;
  }
  #step .inner_cont .product {
    width: 43.163vw;
    max-width: 473px;
  }
}

@media screen and (max-width: 768px) {
  #step {
    padding: 14.286vw 0 19.048vw;
  }
  #step .inner_cont {
    width: 95vw;
  }
  #step .inner_cont h2 {
    padding-top: 0;
    margin-bottom: 7.143vw;
  }
  #step .inner_cont h2 span {
    top: -20vw;
    left: 0;
    right: 0;
    width: 33.095vw;
    margin: 0 auto;
  }
  #step .inner_cont .fl_cont {
    width: 100%;
  }
  #step .inner_cont .fl_cont h3 {
    width: 75.714vw;
    margin: 0 auto 2.619vw;
  }
  #step .inner_cont .fl_cont p.notes {
    text-align: center;
  }
  #step .inner_cont .fl_cont .product_sp {
    width: 84.524vw;
    margin: 0 auto 6.667vw;
  }
  #step .inner_cont .fl_cont .btn {
    display: block;
    text-align: center;
    padding-top: 5.524vw;
  }
  #step .inner_cont .fl_cont .sale {
    width: 51.905vw;
    margin: 7.143vw auto 1.905vw;
  }
  #step .inner_cont .fl_cont .btn .btn_pink {
    width: 66.667vw;
    margin: 0 auto;
  }
  #step .inner_cont .fl_cont .btn .btn_red {
    width: 66.667vw;
    margin: 0 auto;
  }
}

/*-- circle --*/
#step .inner_cont {
  position: relative;
}
#step .inner_cont::before {
  content: "";
  display: block;
  position: absolute;
  top: -40px;
  left: -55px;
  width: 227px;
  height: 196px;
  background: url(../images/circle/online_circle_01.png) center center no-repeat;
  z-index: -1;
  transition-delay: 0.3s;
}
#step .inner_cont::after {
  content: "";
  display: block;
  position: absolute;
  top: 125px;
  right: -60px;
  width: 140px;
  height: 140px;
  background: url(../images/circle/online_circle_02.png) center center no-repeat;
  visibility: initial;
  z-index: -1;
  transition-delay: 0.5s;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
  #step {
    overflow-x: clip;
  }
}
@media screen and (max-width: 768px) {
  #step {
    overflow-x: clip;
  }
  #step .inner_cont::before {
    top: -37px;
    left: -130px;
  }
  #step .inner_cont::after {
    top: 14px;
    right: -95px;
  }
}
/*-- //circle --*/
/*-- accolade addition --*/
.accolade_hohoemi {
  max-width: 461px;
  margin: 0 auto 40px;
}
.accolade_step {
  max-width: 655px;
  margin: 0 auto 36px;
}
.accolade_notes {
  margin: 36px 0 0;
}
.accolade_notes li {
  font-size: 12px;
  text-align: left;
  text-indent: -1.5rem;
  padding-left: 1.5rem !important;
  margin-bottom: 5px !important;
}
@media screen and (max-width: 768px) {
  .accolade_hohoemi {
    max-width: 90.476vw;
    margin: 0 auto 9.524vw;
  }
  .accolade_step {
    max-width: 90.476vw;
    margin: 0 auto 8.571vw;
  }
  .accolade_notes {
    margin: 7.143vw 0 0;
  }
  .accolade_notes li {
    font-size: 9px;
  }
}