@charset "utf-8";


/*基本設定-----------------------------------------*/
/* 隙間なく表示させるおまじない */
html,
body {
  margin: 0px;
  padding: 0px;
}

/* ページ内全体の文字の設定と背景の設定 */
body {
  font-family: "Noto Serif JP", serif;
  font-size: 1em;
  color: #333333;
  line-height: 1.8em;
  background-color: #606060;

}

/* ページ内全体のリンクの文字色 */
a {
  text-decoration: none;
}

a:link {
  color: #333333;
}

/* あとは自分で書いてみよう！ */
#container {
  background-color: #0054f1;
  background-image: url(img/tricolor_side.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 100%;
  max-width: 390px;
  height: 4732px;
  background-size: cover;
  text-align: left;
}

#header {
  width: 100%;
  height: 58px;
  background-image: url(img/header_back.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  position: fixed;
  top: 0;
  filter: drop-shadow(0 4px 3px #636363);
  z-index: 1;

}

.header_logomark {
  width: 70px;
  height: 100%;
  padding: 12px 0 0 0;
  margin: 0 0 0 160px;
  display: block;
}

.header_menu {
  width: 30px;
  height: 100%;
  padding: 14px 0 0 0;
  margin: 0 0 0 100px;
}

#mainvisual {
  width: 100%;
  height: 840px;
  position: relative;
}

.mainvisual_base {
  width: 92%;
  padding: 65px 0 0 0;
  margin: 0 auto;
}

.girl {
  position: absolute;
  width: 80%;
  top: 170px;
  left: 39px;
}

.kumo_huwahuwa {
  width: 80%;
  position: absolute;
  top: 215px;
  left: 9px;
  filter: drop-shadow(2px 2px 3px #6a6a6a);
  animation-name: huwahuwa;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

@keyframes huwahuwa {
  0% {
    transform: translate(0, 0px);
  }

  100% {
    transform: translate(0, -15px)
  }
}

.tittle_box {
  position: absolute;
  top: 97px;
  left: 40px
}

.subtittle_box {
  position: absolute;
  bottom: 190px;
  left: 80px
}

hr.hasen1 {
  width: 82%;
  border: none;
  border-top: 3px dashed #999;
  position: absolute;
  bottom: 168px;
  left: 35px;
}

.scroll_box {
  width: 100%;
  height: 150px;
  position: absolute;
  bottom: 20px;
  display: flex;
}

.scroll_movie {
  margin: 10px 0 0 170px;
  width: 50px;
  height: 100%;
}

.scroll_text {
  width: 10px;
  padding: 20px 0 6px 0;
}

.scroll_text_set {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: -0.02em;
  transform: rotate(90deg);
}

.follow_butun {
  width: 50px;
  padding: 10px 0 0 0;
  margin: 0 0 0 100px;
  display: block;
}

.follow_text_set {

  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: -0.03em;
  transform: rotate(90deg);
}

.sen1_box {
  width: 10px;
  height: 5px;
  margin: 69px 0 0 14px;
}

.sen1 {
  width: 20px;
  border-color: #0054f1;
  border-width: 1px;
}

.x_logo_box {
  width: auto;
  padding: 4px 0 0 17px;
}

#sukima1 {
  width: 95%;
  margin: 0 auto;
  position: relative;
}

#top2 {
  position: absolute;
  top: 200px;

}

#concept {
  width: 100%;
  position: relative;

}

.concept_base {
  width: 92%;
  margin: 0 auto;
}

.stump_box {
  width: 113px;
  position: absolute;
  top: 55px;
  right: 17px;
}

.eurasia_box {
  width: 208px;
  position: absolute;
  top: 505px;
  left: 15px;
}

#top3 {
  position: absolute;
  top: 505px;
}

.concept_tittle_box {
  width: 100px;
  position: absolute;
  top: 65px;
  left: 130px;
}

.concept_text {
  width: 300px;
  text-align: center;
  position: absolute;
  top: 115px;
  left: 50px;
}

.concept_text_set {
  line-height: 40px;
  color: #fe3691;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 34px;
}

.concept_text_set2 {
  letter-spacing: -5px;
}

.concept_text_detail {
  width: 286px;
  position: absolute;
  top: 225px;
  left: 60px;
}

.concept_text_detail_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.5px;
}

.plane_icon_box {
  vertical-align: middle;
}

.passport_icon_box {
  vertical-align: middle;
  padding: 3px
}

.wifi_icon_box {
  vertical-align: middle;
  padding: 3px
}

.sikaku1 {
  width: 8px;
  height: 40px;
  background-color: #aaaaaa;
  position: absolute;
  top: 59px;
  left: 16px;
  border-radius: 0 2px 2px 0;
}



.side_ziploc_blue {
  width: 80px;
  height: 140px;
  position: absolute;
  padding: 10px 0 0 0;
  top: 466px;
  right: 14px;
  overflow: hidden;
}

.side_blue_box {
  width: 100px;
  animation-name: decoSwing;
  animation-duration: 1500ms;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 2px #9d9d9d);
}

@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(25deg);
  }
}


.side_ziploc_pink {
  width: 80px;
  position: absolute;
  top: 188px;
  left: 16px;
  overflow: hidden;
  transform: scaleX(-1);
}

.side_pink_box {
  width: 100px;
  animation-name: decoSwing;
  animation-duration: 1500ms;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 2px #9d9d9d);
}

@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(25deg);
  }
}

hr.hasen2 {
  width: 82%;
  border: none;
  border-top: 3px dashed #999;
  position: absolute;
  top: 565px;
  left: 35px;
}



.how_to_use {
  width: 100%;
  height: 800px;
  position: absolute;
  top: 600px;
}


.how_to_use_tittle_box {
  width: 143px;
  margin: 30px 0 0 120px;
}

.how_to_use_scroll {
  width: 92%;
  height: 580px;
  display: flex;
  margin: 0 auto;
  overflow-x: scroll;
}



.how_to_use_visual1_box {
  width: 239px;
  height: 100%;
  margin: 0 0 0 60px;
  position: relative;
}

.indicator {
  width: 97px;
  display: flex;
  margin: 0 auto;
  padding: 13px 0 10px 0;
}

.circle1 {
  margin: 0 10px 0 0;
  width: 15px;
  height: 15px;
  background-color: #0054f1;
  border-radius: 50%;
}

.circle2 {
  margin: 0 10px 0 0;
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;
}

.circle3 {
  margin: 0 10px 0 0;
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;
}

.circle4 {
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;
}

.pinkribbon {
  width: 115px;
  position: absolute;
  top: 335px;
  left: 63px;
}

.case_set {
  font-size: 15px;
  color: #ffffff;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 100;
  font-style: normal;
  position: absolute;
  top: 322px;
  left: 90px;
}

.case_set_1 {
  font-size: 1.5em;
  margin: 0 0 0 2px;
}

.how_to_use_detail1 {
  width: 100%;
  height: 50px;
  margin: 30px 0 0 0;
  display: flex;
}

.double_line {
  width: 50px;
  height: 20px;
  border-bottom: double 6px #0054f1;
}

.case1_tittle {
  display: inline;
  padding: 0 24px 0 24px;
}

.case1_tittle_set {
  line-height: 40px;
  color: #fe3691;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 30px;
  margin: 0
}

.case1_set_tume {
  letter-spacing: -6px;
}

.double_line2 {
  width: 50px;
  height: 20px;
  border-bottom: double 6px #0054f1;
}

.case1_text {
  width: 100%;
  height: 130px;
}

.case1_text_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 15px;
  text-align: center;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 24px;
}

.how_to_use_visual2_box {
  width: 239px;
  height: 100%;
  margin: 0 0 0 40px;
  position: relative;
}

.case2_tittle_set {
  line-height: 40px;
  color: #fe3691;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 30px;
  margin: 0;
  letter-spacing: -4px;
}

.case2_tittle {
  display: inline;
  padding: 0 16px 0 16px;
}


.how_to_use_visual3_box {
  width: 239px;
  height: 100%;
  margin: 0 0 0 40px;
  position: relative;
}

.case3_tittle_set {
  line-height: 40px;
  color: #fe3691;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 30px;
  margin: 0
}

.case3_tittle {
  display: inline;
  padding: 0 5px 0 2px;
}



.how_to_use_visual4_box {
  width: 239px;
  height: 100%;
  margin: 0 0 0 40px;
  position: relative;
}

.case4_tittle_set {
  line-height: 40px;
  color: #fe3691;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  letter-spacing: -5px;
  font-style: normal;
  font-size: 30px;
  margin: 0;
}

.case4_tittle {
  display: inline;
  padding: 0 10px 0 4px;
}

.circle5 {
  margin: 0 10px 0 0;
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;

}

.circle6 {
  margin: 0 10px 0 0;
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;
}

.circle7 {
  margin: 0 10px 0 0;
  width: 11px;
  height: 11px;
  border: solid 3px #0054f1;
  background-color: #ffffff;
  border-radius: 50%;
}

.circle8 {
  width: 15px;
  height: 15px;
  background-color: #0054f1;
  border-radius: 50%;
}


.stop {
  width: 50px;
  height: 100%;

}


.plane_body1 {
  width: 359px;
  height: 15px;
  background-color: #0054f1;
  margin: 0 auto;
  opacity: 20%;
}

.plane_body2 {
  width: 359px;
  height: 50px;
  background-color: #0054f1;
  margin: 13px auto 0;
  opacity: 20%;
  position: relative;
}

#top4 {
  position: absolute;
  top: 27px;
}


#products {
  width: 100%;
  height: 1400px;
  position: relative;
}

.products_base {
  width: 92%;
  margin: 0 auto;
}

.stump_box_2 {
  width: 100px;
  position: absolute;
  top: 60px;
  left: 16px;
}

.america {
  width: 100px;
  position: absolute;
  top: 0px;
  right: 58px;
  opacity: 20%;
}

.products_detail {
  width: 100%;
  height: 790px;
  position: absolute;
  top: 0px;
}

.products_tittle {
  width: 136px;
  margin: 60px auto 0;
}

.products_butun {
  height: 370px;
  padding: 30px 40px 0 40px;
}

.butunA {
  width: 100%;
  height: auto;
  display: flex;
}

.butun1 {
  width: 145px;
  height: 172px;
  background-color: #0054f1;
  border-radius: 7%;
  border-radius: 7%;
  filter: drop-shadow(0 3px 2px #7f7f7f)
}

.ribbon2 {
  width: 42px;
  height: 16px;
  margin: 5px 0 6px 0;
  position: relative;
  ;
}

.ribbon2_reitou {
  width: 20px;
  height: 10px;
  position: absolute;
  bottom: 8px;
  left: 10px;

}

.ribbon2_reitou_set {
  font-family: "zen-maru-gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
  font-size: 10px;
  margin: 0px;
}

.ribbon2_renzi {
  width: 35px;
  height: 10px;
  position: absolute;
  bottom: 7px;
  left: 5px;

}

.ribbon2_renzi_set {
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: -2px;
  margin: 0px;
}

.freeze_ribbon {
  position: absolute;
  top: 0px;
}

.freeze {
  position: absolute;
  top: 35px;
  left: 12px;

}

.easy {
  margin: 53px 0 0 13px;
}

.design {
  margin: 55px 0 0 13px;
}


.strage {
  position: absolute;
  top: 42px;
  left: 13px
}

.butun_base {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  margin: 128px 0 0 0;
  border-radius: 0 0 7px 7px;
  display: flex;
}


.products_freaze {
  width: 89px;
  height: 100%;
  padding: 10px 0 0 22px;
}

.products_freaze_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
}

.products_yazirusi1 {
  width: 3px;
  height: 33px;
  padding: 12px 0 0 0;
  display: block;
}

.butun2 {
  width: 145px;
  height: 172px;
  background-color: #0054f1;
  border-radius: 7%;
  margin: 0 0 0 20px;
  border-radius: 7%;
  filter: drop-shadow(0 3px 2px #7f7f7f)
}

.butun_base2 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  margin: 32px 0 0 0;
  border-radius: 0 0 7px 7px;
  display: flex;
}

.products_easy {
  width: 88px;
  height: 100%;
  padding: 10px 0 0 23px;
}

.products_easy_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
}

.products_yazirusi2 {
  width: 3px;
  height: 33px;
  padding: 12px 0 0 0;
  display: block;
}

.butunB {
  width: 100%;
  height: auto;
  display: flex;
  margin: 25px 0 0 0;
}

.butun3 {
  width: 145px;
  height: 172px;
  background-color: #0054f1;
  border-radius: 7%;
  border-radius: 7%;
  filter: drop-shadow(0 3px 2px #7f7f7f)
}

.butun_base3 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  margin: 40px 0 0 0;
  border-radius: 0 0 7px 7px;
  display: flex;
}

.products_design {
  width: 88px;
  height: 100%;
  padding: 9px 0 0 23px;
}

.products_design_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;

}

.products_yazirusi3 {
  width: 3px;
  height: 33px;
  padding: 12px 0 0 0;
  display: block;
}

.butun4 {
  width: 145px;
  height: 172px;
  background-color: #0054f1;
  border-radius: 7%;
  margin: 0 0 0 20px;
  border-radius: 7%;
  filter: drop-shadow(0 3px 2px #7f7f7f)
}

.strage_ribbon {
  position: absolute;
  top: 0;
}

.butun_base4 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  margin: 127px 0 0 0;
  border-radius: 0 0 7px 7px;
  display: flex;
}

.products_strage {
  width: 89px;
  height: 100%;
  padding: 10px 0 0 22px;
}

.products_strage_set {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
  letter-spacing: 0.5px;
}

.products_yazirusi4 {
  width: 3px;
  height: 33px;
  padding: 12px 0 0 0;
  display: block;
}

.and_more {
  width: 100px;
  margin: 15px auto 0;
}

.and_more_set {
  color: #303030;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 15px;
  letter-spacing: -1px;
  margin: 0;
}

.and_more_kigou {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  margin: 0 0 0 3px;
}

.shop {
  width: 310px;
  height: 55px;
  border-bottom: double 6px #0054f1;
  border-top: double 6px #0054f1;
  margin: 10px auto 0;
  padding: 10px 0 0 0;
}

.shop_butun {
  width: 100%;
  filter: drop-shadow(1px 2px 2px #bababa);
  display: flex;
}

.amazon {
  width: 97px;
  height: 44px;
  margin: 0 0 0 4px;
  display: block;
}

.rakuten {
  width: auto;
  height: 44px;
  display: block;
}

.lohako {
  width: 97px;
  height: 44px;
  display: block;
}

.roll_text {
  width: 92%;
  opacity: 20%;
  margin: 35px auto 0;
}



article {
  overflow: hidden;
  height: 98px;
}

.loop_wrap {
  display: flex;
  width: 92%;
  height: 60px;
  overflow: hidden;
  margin: 35px auto 0;
}

.loop_wrap_set {
  color: #0054f1;

  font-family: "ab-kokoro-no3", sans-serif;
  font-style: normal;
  font-size: 25px;
  letter-spacing: -6px;
  line-height: 45px;
  opacity: 20%;
}

.loop_wrap_set2 {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 5px;
  letter-spacing: -6px;
  line-height: 45px;
  opacity: 20%;
}


.loop_wrap div {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 50px;
  overflow: hidden;
}

.loop_wrap div:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap div:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

.roll_plane_box {
  margin: 0 5px 0 5px;
}


hr.hasen3 {
  width: 82%;
  border: none;
  border-top: 3px dashed #999;
  margin: 30px auto 0;
}

.australia {
  width: 100px;
  height: 89px;
  position: absolute;
  bottom: 0px;
  left: 15px;
  opacity: 20%;
}

.sns {
  width: 100%;
  height: 500px;
  position: absolute;
  bottom: 130px;
}

.sns_tittle {
  width: 135px;
  margin: 50px auto 0;
}

.sns_post_base {
  width: 306px;
  height: 400px;
  margin: 20px auto 0;
  background-image: url(img/sns_post_base.png);
  background-repeat: no-repeat;
  display: block;
}

.sns_post {
  width: 280px;
  height: 380px;
  margin: 0 auto;
  padding: 32px 0 0 0
}

.sns_text_box {
  width: 100%;
  height: auto;
  display: flex;
  margin: 7px 0 0 0;
}

.sns_doubleline {
  width: 47px;
  height: 100%;
  border-bottom: double 6px #fe3691;
  transform: rotate(-50deg);
  padding: 10px 0 0 0;
  margin: 0 0 0 30px;
}

.sns_doubleline2 {
  width: 47px;
  height: 100%;
  border-bottom: double 6px #fe3691;
  transform: rotate(50deg);
  padding: 10px 0 0 0;
}

.sns_text {
  width: 234px;
  height: 80px;

}

.sns_text_set {
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 19px;
  margin: 0;
  letter-spacing: -1px;
}

.side_ziploc_beige2 {
  width: 90px;
  position: absolute;
  top: 50px;
  right: 15px;
  overflow: hidden;
  filter: drop-shadow(0 2px 2px #9d9d9d);

}

.side_beige_box {
  width: 100px;
  animation-name: decoSwing;
  animation-duration: 1500ms;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}

@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(25deg);
  }
}

#sukima2 {
  width: 95%;
  height: 340px;
  margin: 0 auto;
  background-image: url(img/sukima.png);
}

#footer {
  width: 100%;
  height: 415px;
  position: relative;
}

.footer_base {
  width: 93%;
  line-height: 0em;
  margin: 0 auto;
}

.footer_box {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0px;
}

.footer_logo {
  width: 177px;
  height: 80px;
  margin: 60px auto 0;
  display: block;
}

.footer_index {
  width: 300px;
  height: 70px;
  border-top: solid 2px #fe3691;
  border-bottom: solid 2px #fe3691;
  margin: 40px auto 0;
}

.footer_index_text1 {
  width: 100%;
  height: 32px;
  margin: 3px 5px 0 5px;
  display: flex;

}

.footer_concept {
  width: auto;
  height: 100%;
  margin: 0 40px 0 0;
  display: block;
}

.footer_concept_set {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -1px;
  margin: 0;
}

.footer_how_to_use {
  width: auto;
  height: 100%;
}

.footer_how_to_use_set {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -1px;
  margin: 0;
}

hr.footer_sen {
  border-top: 2px solid #fe3691;
  margin: 0px;
}

.footer_index_text2 {
  width: 100%;
  height: 32px;
  margin: 3px 5px 0 5px;
  display: flex;

}

.footer_products {
  width: auto;
  height: 100%;
  margin: 0 25px 0 0
}

.footer_products_set {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -1px;
  margin: 0;
}

.footer_sns {
  width: auto;
  height: 100%;
}

.footer_sns_set {
  color: #0054f1;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -1px;
  margin: 0;
}

.footer_under {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
}

.company {
  width: auto;
  height: auto;
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 12px;
  margin: 0px;
  color: #0054f1;
  padding: 0 0 0 55px;
}

.company {
  width: auto;
  height: auto;
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
  color: #0054f1;
  padding: 0 0 0 65px;
  display: block;
}

.policy {
  width: auto;
  height: auto;
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
  color: #0054f1;
  padding: 0 0 0 20px;
  letter-spacing: -0.5px;
  display: block;
}

#top_butun {
  width: 56px;
  height: 56px;
  background-color: #fe3691;
  border-radius: 50%;
  margin: 0 0 10px 20px;
}


.top_butun_plane {
  width: 30px;
  height: 24px;
  margin: 10px auto 0;
}

.top_butun_text {
  width: 22px;
  height: 20px;
  margin: 0 auto 2px;


}

.top_butun_set {
  color: #ffffff;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 10px;
  line-height: 0%;
}

.copyrights {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 34px 0 0 75px;
  color: #0054f1;
  line-height: 0%;
}

.loading {
  /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
  width: 100vw;
  height: 100vh;
  /*ローディング画面の表示位置を固定*/
  position: fixed;
  top: 0;
  left: 0;
  background: #0054f1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*ローディング画面を0.5秒かけて非表示にする*/
  transition: all 0.4s linear;
  z-index: 3;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

.looding_plane {
  margin: 0 0 40px 0;
  width: auto;

}

.loading-text {
  font-family: "ab-kokoro-no3", sans-serif;
  font-style: normal;
  font-size: 35px;
  margin: 0 0 70px 0;
  line-height: 0;
  letter-spacing: -0.7px;
  color: #ffffff;
}

.loading_blink {
  animation: blink 2s linear infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

nav {
  position: fixed;
  top: 90px;
  right: 0;
  width: 300px;
  height: 80%;
  background-color: #0054f1;


  transition: all 0.4s;
  transform: translate(300px);
  z-index: 2;
  border-radius: 20px 0 0 20px;
  filter: drop-shadow(0 3px 2px #5f5f5f)
}

nav.open {
  transform: translate(0);
}

.menu_box {
  width: 100%;
  height: 200px;
  padding: 60px 0 0 40px;
}

.menu_index {
  width: 100%;
}

.menu_concept {
  width: 100%;
  border-bottom: solid 2px #ff45a6;
  display: block;
}

.menu_how {
  width: 100%;
  margin: 15px 0 0 0;
  border-bottom: solid 2px #ff45a6;
  display: block;
}

.menu_products {
  width: 100%;
  margin: 15px 0 0 0;
  border-bottom: solid 2px #ff45a6;
  display: block;
}

.menu_sns {
  width: 100%;
  margin: 15px 0 0 0;
  border-bottom: solid 2px #ff45a6;
  display: block;
}

.menu_shop {
  width: 100%;
  border-bottom: solid 2px #ffffff;
  margin: 50px 0 0;
}


.menu_concept_set {
  color: #ffffff;
  font-family: "ab-kokoro-no3", sans-serif;
  font-weight: 10;
  font-style: normal;
  font-size: 25px;
  letter-spacing: -1px;
  margin: 0;
}

.menu_concept_set2 {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  letter-spacing: -1px;
  margin: 0 0;
  color: #ffffff;
}

.menu_how_set2 {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  letter-spacing: -1px;
  margin: 0 0 0 18px;
  color: #ffffff;
}

.menu_another {
  width: 100%;
  height: 50px;
}

.menu_company {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 30px 0 0 0;
  color: #ffffff;
  line-height: 0;
  display: block;

}

.menu_policy {
  font-family: "游ゴシック体", Yu-Gothic;
  font-weight: bold;
  font-style: normal;
  font-size: 11px;
  margin: 0px;
  color: #ffffff;
  display: block;

}

.menu_shop_img {
  width: 100%;
  height: 500px;
}

.menu_amazon {
  width: 154px;
  height: 60px;
  margin: 20px 0 10px 0;
  display: block;
}

.menu_rakuten {
  width: 154px;
  height: 60px;
  margin: 10px 0 10px 0;
  display: block;
}

.menu_lohako {
  width: 154px;
  height: 50px;
  display: block;
}


.btn_menu {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 10px;
  right: 26px;
  z-index: 2;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}




html {
  scroll-behavior: smooth;
}