@charset "UTF-8";
/*
Theme Name: 
Author: 川元綾子(Designer) / 田中勇輔(Developer)
Description: 
Version: 0.01 (2019/09/30)
*/
/***************************************************************
 *
 * sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css
 *
***************************************************************/
pre, textarea {
  overflow: auto;
}

[hidden], audio:not([controls]), template {
  display: none;
}

details, main, summary {
  display: block;
}

input[type=number] {
  width: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

progress {
  display: inline-block;
}

small {
  font-size: 75%;
}

textarea {
  resize: vertical;
}

[unselectable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

*, ::after, ::before {
  box-sizing: inherit;
  border-style: solid;
  border-width: 0;
}

* {
  position: relative;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

::after, ::before {
  text-decoration: inherit;
  vertical-align: inherit;
}

:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
  cursor: default;
  font: 20px/1.5 sans-seri f;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

button, input, select, textarea {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

code, kbd, pre, samp {
  font-family: monospace,monospace;
}

ol, ul {
  list-style: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::-moz-selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

::selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
  }
}
/***************************************************************
 *
 * layout and etc...
 *
***************************************************************/
img {
  max-width: 100%;
  height: auto;
}

html {
  overflow: hidden;
}

body {
  overflow: hidden;
  margin: 0;
}

/* 
			Scroll and Show
*********************************************/
.ssb {
  transform: translateY(3em);
  transition: all 0.8s ease;
  opacity: 0;
}

.ss_on.ssb,
.ss2_on.ssb,
.ss3_on.ssb,
.ss30_on.ssb {
  transform: translateY(0);
  opacity: 1;
}

.sso {
  opacity: 0;
}
.sso.ss_on {
  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* 
			inview (ScrollTrigger)
*********************************************/
.inview {
  transition: all 1s ease;
}

.ivo {
  opacity: 0;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}
.ivo.in-view {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  opacity: 1;
}

.ivb {
  opacity: 0;
  transform: translateY(3em);
}
.ivb.in-view {
  opacity: 1;
  transform: none;
}

/*
			アニメーション
*********************************************/
/* ----------------------------------------------
 * Generated by Animista on 2024-8-19 1:10:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
/***************************************************************
 *
 * sass media query
 *
***************************************************************/
/***************************************************************
 *
 * Stylesheet for LP
 *
***************************************************************/
/*
			Font
*********************************************/
body {
  font-size: 20px;
  line-height: 1.4em;
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "YuGothic", "open sans",  "Noto Sans Japanese", "メイリオ", "Meiryo",system-ui, sans-serif;
  overflow: hidden;
}

body a {
  color: #000;
  text-decoration: none;
}

.font_a {
  font-family: "Hiragino Mincho ProN","游明朝","Yu Mincho","HGS明朝E","メイリオ","Meiryo",serif;
}

.font_b {
  font-family: "Josefin Sans","Hiragino Mincho ProN","游明朝","Yu Mincho","HGS明朝E","メイリオ","Meiryo",serif;
}

/* 
			Responsive
*********************************************/
.lg_show,
.md_show,
.sm_show,
.xs_show,
.lg_showin,
.md_showin,
.sm_showin,
.xs_showin {
  display: none;
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 20px;
    line-height: 1.4em;
  }

  .lg_hide {
    display: none;
  }

  .lg_show {
    display: block;
  }

  .lg_showin {
    display: inline;
  }

  .res {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .md_hide {
    display: none;
  }

  .md_show {
    display: block;
  }

  .md_showin {
    display: inline;
  }

  body {
    font-size: 20px;
    font-size: 2.6041666666667vw;
    line-height: 1.4em;
  }
}
/***************************************************************
 *
 * 				 hiroha
 *
***************************************************************/
/* FV　BGIMG　*/
header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
header > #white-cover {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  opacity: 1;
  pointer-events: none;
}
header > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
header > img#loadinga {
  -webkit-filter: blur(50px);
  filter: blur(50px);
  transition: none;
}
header > img#bgimgb, header > img#bgimgc {
  opacity: 0;
}
header > h2 {
  width: 13.05em;
  height: 5.45em;
  position: absolute;
  top: 4em;
  left: 4em;
}
@media (max-width: 1300px) {
  header > h2 {
    width: 8.7em;
    height: 3.633333333333333em;
    top: 2em;
    left: 2em;
  }
}
@media (max-width: 980px) {
  header > h2 {
    display: none;
  }
}
header > h3 {
  width: 20.9em;
  height: 5.1em;
  position: absolute;
  left: 4em;
  bottom: 4em;
}
@media (max-width: 1300px) {
  header > h3 {
    display: none;
  }
}
header > h4 {
  width: 1em;
  height: 26.8em;
  position: absolute;
  right: 5em;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media (max-width: 980px) {
  header > h4 {
    display: none;
  }
}
header > h1 {
  width: 29.6em;
  height: 10em;
}
header > h1 > span:first-child {
  display: block;
  width: 24.15em;
  height: 4em;
  margin: 0 auto 2em;
  opacity: 0;
  transform-origin: bottom 15%;
  transform: translate(-0.3em, 0.3em) rotate(2.5deg) rotateY(20deg);
}
header > h1 > span:last-child {
  display: block;
  width: 100%;
  height: 4em;
  opacity: 0;
  transform-origin: bottom 15%;
  transform: translate(-0.4em, 0.5em) rotate(3deg) rotateY(20deg);
}

#smooth-wrapper {
  opacity: 0;
}

#smooth-content {
  padding-top: 5em;
}
@media screen and (max-width: 768px) {
  #smooth-content {
    padding: 0;
  }
}

a#bg_shop {
  z-index: 100;
  display: block;
  width: 13.875em;
  height: 9.55em;
  position: absolute;
  left: 4em;
  bottom: 4em;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1300px) {
  a#bg_shop {
    display: none;
  }
}

/* 本文 */
article#hiroha_body {
  width: 768px;
  margin: 0 9em 10em auto;
  border-radius: 3.5em 0 3.5em 0;
  overflow: hidden;
  background: url("img/128.png") no-repeat center top/contain #eef4ef;
}
@media (max-width: 1300px) {
  article#hiroha_body {
    margin: 0 2em 5em auto;
  }
}
@media (max-width: 980px) {
  article#hiroha_body {
    margin: 0 auto 5em;
  }
}
@media screen and (max-width: 768px) {
  article#hiroha_body {
    width: 100vw;
    border-radius: 0;
  }
}

#head {
  padding: 3.5em 0 6em;
}
#head > h1 {
  width: 13.05em;
  margin: 0 auto -2.5em;
  z-index: 2;
}
#head > div {
  display: flex;
  align-items: center;
  margin-bottom: -7.5em;
}
#head > div > h2 {
  width: 13%;
  text-align: center;
}
#head > div > h2 > img {
  width: 1.15em;
}
#head > div > span {
  width: 87%;
  height: 48em;
  display: block;
  overflow: hidden;
  border-radius: 4em 0 0 0;
}
#head > div > span > video {
  width: 100%;
}
#head > div > h3 {
  position: absolute;
  width: 4.125em;
  height: 27.45em;
  top: 6em;
  right: 3.5em;
}
#head > h2 {
  width: 11em;
  margin: 0 0 2.5em 2em;
}
#head > h3 {
  width: 23.6em;
  margin: 0 0 1.5em 2em;
}
#head > h4 {
  width: 14.9em;
  margin: 0 0 0 2em;
}

#head_photo {
  width: 100%;
  height: 50em;
}
#head_photo > li {
  position: absolute;
}
#head_photo > li:nth-child(1) {
  width: 5.025em;
  height: 23.85em;
  top: 0;
  left: 16.8em;
}
#head_photo > li:nth-child(2) {
  width: 7.825em;
  height: 7.475em;
  top: 4em;
  right: 6.5em;
}
#head_photo > li:nth-child(3) {
  width: 8.3em;
  height: 23.65em;
  top: 16em;
  left: 4em;
}
#head_photo > li:nth-child(4) {
  width: 6.25em;
  height: 9.875em;
  top: 9em;
  left: 6.5em;
  animation: hp_one 10s infinite ease-in-out;
}
#head_photo > li:nth-child(5) {
  width: 8.8em;
  height: 23.025em;
  bottom: 2em;
  right: 5.5em;
}
#head_photo > li:nth-child(6) {
  width: 6.45em;
  height: 6.35em;
  bottom: 11em;
  right: 14em;
  animation: hp_one 8s infinite ease-in-out;
}

#what {
  display: flex;
  padding: 4em 0 3em;
}
#what > div {
  width: 73%;
  padding: 0 0 0 4.5em;
}
#what > div > h3 {
  width: 14.9em;
  margin: 0 0 5em;
}
#what > div > h2 {
  width: 18.35em;
}
#what > span {
  display: block;
  width: 27%;
}
#what > span > img {
  width: 5.25em;
}

#size {
  padding: 0 0 6em 3.5em;
}
#size > h2 {
  width: 22em;
  height: 28em;
  overflow: hidden;
  border-radius: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#size > h2 > img {
  width: 22.65em;
  height: 28.8em;
}
#size > span {
  display: block;
  width: 9.2em;
  height: 24.1em;
  position: absolute;
  top: 8.5em;
  right: 6em;
}
#size > strong {
  display: block;
  position: absolute;
  width: 6.5em;
  height: 5.6em;
  top: 26em;
  left: 16em;
}
#size > h3 {
  padding: 3.5em 0 0;
  width: 22.3em;
}

#step {
  background: url("img/127.jpg") no-repeat center top/cover;
  height: 52.25em;
}
#step > h2 {
  width: 5.625em;
  margin: 0 0 0 4em;
}
#step > ul {
  padding: 4em 0 10em;
  display: flex;
  justify-content: space-evenly;
}
#step > ul > li:nth-child(1) {
  width: 3.65em;
}
#step > ul > li:nth-child(2) {
  width: 3.5em;
  padding-top: 6em;
}
#step > ul > li:nth-child(3) {
  width: 3.8em;
  padding-top: 12em;
}
#step > h3 {
  width: 13.4em;
  margin: 0 0 0 4em;
  padding: 0 0 7em;
}
#step > span {
  position: absolute;
  display: block;
  width: 32em;
  height: 42.5em;
  top: 1em;
  left: 0;
  right: 0;
  margin: auto;
}

#feature {
  padding: 3.5em 2.5em;
}
#feature > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 5em;
}
#feature > div:nth-child(1) > h2 {
  width: 5.425em;
}
#feature > div:nth-child(1) > h3 {
  width: 14.25em;
}
#feature > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
}
#feature > div:nth-child(2) > div {
  width: 82%;
}
#feature > div:nth-child(2) > div > h3 {
  width: 22.45em;
  margin-bottom: 3.5em;
}
#feature > div:nth-child(2) > div > span {
  display: block;
  width: 22em;
  overflow: hidden;
  border-radius: 0.75em;
}
#feature > div:nth-child(2) > div > span > video {
  width: 100%;
}
#feature > div:nth-child(2) > div > h4 {
  width: 14.25em;
  padding: 5em 0 3.5em;
}
#feature > div:nth-child(2) > div > p {
  width: 23.75em;
}
#feature > div:nth-child(2) > h2 {
  width: 18%;
  padding: 34em 0 0;
}
#feature > div:nth-child(2) > h2 > img {
  width: 5.4em;
}
#feature > div:nth-child(3) {
  display: flex;
  align-items: flex-end;
  padding: 5em 0 0;
}
#feature > div:nth-child(3) > h2 {
  width: 5.425em;
}
#feature > div:nth-child(3) > div {
  width: calc(100% - 5.425em);
}
#feature > div:nth-child(3) > div > span {
  display: block;
  width: 22em;
  overflow: hidden;
  border-radius: 0.75em;
  margin: 0 0 0 auto;
}
#feature > div:nth-child(3) > div > h3 {
  padding: 5em 0 0;
  width: 14.25em;
  margin: 0 0 0 auto;
}
#feature > span {
  display: block;
  padding: 3.5em 0 0;
  width: 30.25em;
}
#feature > h2 {
  width: 25.75em;
  margin: 0 auto;
  padding: 12em 0 4em;
}

#mori {
  background: url("img/321.png") no-repeat center top/100% auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding-bottom: 3.5em;
}
#mori > h2 {
  border-top: 1px solid #000;
  padding: 1.5em 0;
  text-align: center;
}
#mori > h2 > img {
  width: 34.7em;
}
#mori > div#m_photo {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#mori > div#m_photo > span {
  display: block;
  overflow: hidden;
  width: 35em;
  height: 40.5em;
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mori > div#m_lead {
  display: flex;
  align-items: center;
  top: -5em;
  margin-bottom: -2em;
}
#mori > div#m_lead > h3 {
  width: 58%;
  padding: 0 0 0 3em;
}
#mori > div#m_lead > h3 > img {
  width: 15.85em;
}
#mori > div#m_lead > div {
  width: 42%;
  top: -10em;
}
#mori > div#m_lead > div > span {
  display: block;
  padding: 3em 0 0;
  z-index: 1;
}
#mori > div#m_lead > div > span > img {
  width: 7.4em;
}
#mori > div#m_lead > div > strong {
  position: absolute;
  width: 12em;
  height: 12em;
  top: 0;
  right: 2.5em;
  animation: rotation 10s infinite linear;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
#mori > div#m_text {
  z-index: 2;
}
#mori > div#m_text > p:nth-child(1) {
  width: 30.65em;
  margin: 0 0 4.5em 3em;
}
#mori > div#m_text > p:nth-child(2) {
  width: 29.3em;
  margin: 0 0 4.5em 3em;
}
#mori > div#m_text > p:nth-child(3) {
  width: 32em;
  margin: 0 auto 3em;
}
#mori > div#m_text > p:nth-child(4) {
  width: 33em;
  margin: 0 auto 3em;
}
#mori > div#m_for {
  padding: 2em 0 0;
  display: flex;
  align-items: center;
  margin-bottom: -7em;
  z-index: 2;
}
#mori > div#m_for > span {
  display: block;
  width: 40%;
  text-align: center;
}
#mori > div#m_for > span > img {
  width: 6.75em;
}
#mori > div#m_for > h3 {
  width: 60%;
  padding-bottom: 3em;
}
#mori > div#m_for > h3 > img {
  width: 16.625em;
}
#mori > h3 {
  padding: 5em 0;
  width: 21.25em;
  margin: 0 auto;
}
#mori > a {
  display: block;
  width: 36em;
  margin: 0 auto;
}

div.i_scroll {
  padding: 1em 0;
}
div.i_scroll > p {
  padding: 0.5em 0;
  width: 100%;
  /* ビューポート全体の幅 */
  overflow: hidden;
  /* コンテナ外の内容を隠す */
  white-space: nowrap;
  /* テキストを改行しない */
}
div.i_scroll > p > span {
  display: inline-block;
  white-space: nowrap;
  animation: i_scroll 30s linear infinite;
}
div.i_scroll > p > span.i_scroll_sec {
  animation: i_scroll_sec 30s linear infinite;
}
div.i_scroll > p > span > img {
  display: inline-block;
  max-width: none;
  height: auto;
  margin-right: 1em;
}
div.i_scroll > p > span.is_mori > img {
  width: 104.1em;
  /*　　差し替え後に調整 */
}
div.i_scroll > p > span.is_mori_two > img {
  width: 90.625em;
  /*　　差し替え後に調整 */
}
div.i_scroll > p > span.is_tsuki > img {
  width: 62.3em;
  /*　　差し替え後に調整 */
}
div.i_scroll > p > span.is_tsuki_two > img {
  width: 73.875em;
  /*　　差し替え後に調整 */
}
div.i_scroll > p > span.is_hana > img {
  width: 100.425em;
  /*　　差し替え後に調整 */
}
@keyframes i_scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes i_scroll_sec {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
div.i_clean {
  width: 34em;
  height: 52em;
  border: 1px solid #000;
  margin: 0 auto;
  overflow: hidden;
}
div.i_clean > ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.i_clean > ul > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.i_clean .ic_photo li,
div.i_clean .ic_text li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
div.i_clean .ic_photo li img,
div.i_clean .ic_text li img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#tsuki {
  background: url("img/323.png") no-repeat center 4em/100% auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding-bottom: 3.5em;
}
#tsuki > h2 {
  background: url("img/322.png") no-repeat center top/100% auto;
  border-top: 1px solid #000;
  padding: 1.5em 0;
  text-align: center;
}
#tsuki > h2 > img {
  width: 33.875em;
}
#tsuki > div#t_photo {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#tsuki > div#t_photo > span {
  display: block;
  overflow: hidden;
  width: 35em;
  height: 40.5em;
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tsuki > div#t_lead {
  display: flex;
  align-items: center;
  top: -5em;
  margin-bottom: -2em;
}
#tsuki > div#t_lead > h3 {
  width: 60%;
  padding: 0 0 0 1em;
}
#tsuki > div#t_lead > h3 > img {
  width: 19.7em;
}
#tsuki > div#t_lead > div {
  width: 40%;
  top: -10em;
}
#tsuki > div#t_lead > div > span {
  display: block;
  padding: 3em 0 0;
  z-index: 1;
}
#tsuki > div#t_lead > div > span > img {
  width: 7.75em;
}
#tsuki > div#t_lead > div > strong {
  position: absolute;
  width: 12.5em;
  height: 12.5em;
  top: 0;
  right: 1.5em;
  animation: rotation 10s infinite linear;
}
#tsuki > div#t_text {
  z-index: 2;
}
#tsuki > div#t_text > p:nth-child(1) {
  width: 32.05em;
  margin: 0 0 4.5em 3em;
}
#tsuki > div#t_text > p:nth-child(2) {
  width: 31.925em;
  margin: 0 auto 3em;
}
#tsuki > div#t_text > p:nth-child(3) {
  width: 33em;
  margin: 0 auto 3em;
}
#tsuki > div#t_for {
  padding: 2em 0 0;
  display: flex;
  align-items: center;
  margin-bottom: -7em;
  z-index: 2;
}
#tsuki > div#t_for > span {
  display: block;
  width: 40%;
  text-align: center;
}
#tsuki > div#t_for > span > img {
  width: 6.8em;
}
#tsuki > div#t_for > h3 {
  width: 60%;
  padding-bottom: 3em;
}
#tsuki > div#t_for > h3 > img {
  width: 16.625em;
}
#tsuki > h3 {
  padding: 5em 0;
  width: 21.5em;
  margin: 0 auto;
}
#tsuki > a {
  display: block;
  width: 36em;
  margin: 0 auto;
}

#hana {
  background: url("img/325.png") no-repeat center 4em/100% auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-bottom: 3.5em;
}
#hana > h2 {
  background: url("img/324.png") no-repeat center top/100% auto;
  border-top: 1px solid #000;
  padding: 1.5em 0;
  text-align: center;
}
#hana > h2 > img {
  width: 32.75em;
}
#hana > div#h_photo {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#hana > div#h_photo > span {
  display: block;
  overflow: hidden;
  width: 35em;
  height: 40.5em;
  margin: 0 auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hana > div#h_lead {
  display: flex;
  align-items: center;
  top: -5em;
  margin-bottom: -2em;
}
#hana > div#h_lead > h3 {
  width: 60%;
  padding: 0 0 0 1em;
}
#hana > div#h_lead > h3 > img {
  width: 19.675em;
}
#hana > div#h_lead > div {
  width: 40%;
  top: -10em;
}
#hana > div#h_lead > div > span {
  display: block;
  padding: 3em 0 0;
  z-index: 1;
}
#hana > div#h_lead > div > span > img {
  width: 7.8em;
}
#hana > div#h_lead > div > strong {
  position: absolute;
  width: 12.5em;
  height: 12.5em;
  top: 0;
  right: 1.5em;
  animation: rotation 10s infinite linear;
}
#hana > div#h_text {
  z-index: 2;
}
#hana > div#h_text > p:nth-child(1) {
  width: 22.375em;
  margin: 0 0 4.5em 3em;
}
#hana > div#h_text > p:nth-child(2) {
  width: 26.525em;
  margin: 0 0 4.5em 3em;
}
#hana > div#h_text > p:nth-child(3) {
  width: 31.925em;
  margin: 0 auto 3em;
}
#hana > div#h_text > p:nth-child(4) {
  width: 33em;
  margin: 0 auto 3em;
}
#hana > div#h_for {
  padding: 2em 0 0;
  display: flex;
  align-items: center;
  margin-bottom: -7em;
  z-index: 2;
}
#hana > div#h_for > span {
  display: block;
  width: 40%;
  text-align: center;
}
#hana > div#h_for > span > img {
  width: 6.85em;
}
#hana > div#h_for > h3 {
  width: 60%;
  padding-bottom: 3em;
}
#hana > div#h_for > h3 > img {
  width: 16.625em;
}
#hana > h3 {
  padding: 5em 0;
  width: 13.875em;
  margin: 0 auto;
}
#hana > a {
  display: block;
  width: 36em;
  margin: 0 auto;
}

#products > ul {
  display: flex;
}
#products > ul > li {
  width: 33.333333%;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}
#products > ul > li:last-child {
  border-right: 1px solid #000;
}
#products > ul > li > span {
  display: flex;
  height: 34em;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #000;
}
#products > ul > li > a {
  display: flex;
  padding: 1em;
  justify-content: center;
}
#products > ul > li > a > img {
  width: 7.025em;
}
#products > span {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 25em;
}
#products > span > img {
  height: 39.76em;
  width: 53.76em;
  max-width: none;
}

#hiroha_howto {
  width: 768px;
  margin: 0 9em 0em auto;
  border-radius: 3.5em 0 0 0;
  overflow: hidden;
  background: url("img/128.png") no-repeat center top/contain #eef4ef;
  padding: 4em 0 0;
}
@media (max-width: 1300px) {
  #hiroha_howto {
    margin: 0 2em 0 auto;
  }
}
@media (max-width: 980px) {
  #hiroha_howto {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #hiroha_howto {
    width: 100vw;
    border-radius: 0;
  }
}
#hiroha_howto > h1 {
  width: 27.35em;
  margin: 0 auto 9.5em;
}

#hh_kaoru {
  margin-bottom: 5em;
}
#hh_kaoru > h2 {
  width: 14.55em;
  padding: 0 0 0 1.5em;
  margin-bottom: -1.5em;
}
#hh_kaoru > div {
  display: flex;
}
#hh_kaoru > div > h3 {
  width: 15.5%;
  padding: 4.5em 0 0;
  text-align: center;
}
#hh_kaoru > div > h3 > img {
  width: 3.375em;
  height: 7.15em;
}
#hh_kaoru > div > h3::after {
  content: "";
  display: block;
  position: absolute;
  top: 16em;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: calc(100% - 16em);
  border-left: 1px solid #000;
  transform: scaleY(0);
  transform-origin: top;
  animation: lineGrowShrink 8s ease-in-out infinite;
}
@keyframes lineGrowShrink {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  75% {
    transform: scaleY(1);
    transform-origin: top;
  }
  76% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
#hh_kaoru > div > div {
  left: -0.5em;
  width: 84.5%;
  background: url("img/704.png") no-repeat center top/28.475em auto;
  padding-top: 37em;
  padding-bottom: 5em;
}
#hh_kaoru > div > div > strong {
  display: block;
  width: 27.775em;
  margin-bottom: 5em;
}
#hh_kaoru > div > div > p {
  width: 30.275em;
}

#hh_nagam {
  margin-bottom: 5em;
}
#hh_nagam > h2 {
  width: 18.175em;
  padding: 0 0 0 1.5em;
  margin-bottom: -1.5em;
  z-index: 2;
}
#hh_nagam > div {
  display: flex;
}
#hh_nagam > div > h3 {
  width: 15.5%;
  padding: 4.5em 0 0;
  text-align: center;
}
#hh_nagam > div > h3 > img {
  width: 3.225em;
  height: 11.05em;
}
#hh_nagam > div > h3::after {
  content: "";
  display: block;
  position: absolute;
  top: 19em;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: calc(100% - 19em);
  border-left: 1px solid #000;
  transform: scaleY(0);
  transform-origin: top;
  animation: lineGrowShrink 6s ease-in-out infinite;
}
#hh_nagam > div > div {
  left: -0.5em;
  width: 84.5%;
  background: url("img/709.png") no-repeat center top/28.475em auto;
  padding-top: 34em;
  padding-bottom: 5em;
}
#hh_nagam > div > div > strong {
  display: block;
  width: 21.4em;
  margin-bottom: 5em;
}
#hh_nagam > div > div > p {
  width: 22.775em;
  margin-bottom: 5em;
}
#hh_nagam > div > div > h4 {
  width: 20.3em;
}

#hh_megru {
  margin-bottom: 5em;
}
#hh_megru > h2 {
  width: 19.25em;
  padding: 0 0 0 1.5em;
  margin-bottom: -1.5em;
  z-index: 2;
}
#hh_megru > div {
  display: flex;
}
#hh_megru > div > h3 {
  width: 15.5%;
  padding: 4.5em 0 0;
  text-align: center;
}
#hh_megru > div > h3 > img {
  width: 3.375em;
  height: 15em;
}
#hh_megru > div > h3::after {
  content: "";
  display: block;
  position: absolute;
  top: 23em;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: calc(100% - 23em);
  border-left: 1px solid #000;
  transform: scaleY(0);
  transform-origin: top;
  animation: lineGrowShrink 5s ease-in-out infinite;
}
#hh_megru > div > div {
  left: -0.5em;
  width: 84.5%;
  background: url("img/715.png") no-repeat center top/28.475em auto;
  padding-top: 34em;
  padding-bottom: 5em;
}
#hh_megru > div > div > strong {
  display: block;
  width: 20.275em;
  margin-bottom: 5em;
}
#hh_megru > div > div > ul {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5em;
}
#hh_megru > div > div > ul > li {
  width: 31%;
}
#hh_megru > div > div > p {
  width: 29.6em;
}

#hh_kokoro > h2 {
  width: 4.95em;
  margin: 0 auto 8em;
}
#hh_kokoro > h3 {
  width: 27.775em;
  margin: 0 auto 5em;
}
#hh_kokoro > h4 {
  width: 29.975em;
  margin: 0 auto 5em;
}
#hh_kokoro > span {
  display: block;
}

#hh_footer {
  padding: 4em 0 10em;
}
#hh_footer > h2 {
  width: 12.65em;
  margin: 0 3.5em 11em auto;
}
#hh_footer > h3 {
  width: 23.8em;
  margin: 0 auto 5em 3.5em;
}
#hh_footer > a {
  display: block;
  width: 32.4em;
  margin: 0 auto 8em;
}
#hh_footer > h1 {
  width: 13.05em;
  margin: 0 auto;
}

#slide {
  display: flex;
  height: 40em;
  width: 100%;
  overflow: hidden;
}
#slide > ul {
  width: 50%;
}
#slide > ul > li {
  height: 19.2em;
}