html {
  font-size: 62.5%;
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  /* 色設定 */
  --txtcolor: #000000;
  --btncolor: #97968c;
  --titlecolor: #7a7a75;
}

h1, h2 {
  color: var(--txtcolor);
  margin: 0;
}
h2 {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

p, a {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--txtcolor);
  margin: 0;
}
/* リンク付きテキストのスタイルと色を変えない */
a {
  text-decoration: none;
}
a:link, a:visited {
  color: var(--txtcolor);
}
a[href^="tel:"]{
  pointer-events: none;
}

/* 文字に続く足跡の調整 */
p > img {
  margin: 0 0.1em;
  height: 1.2em;
  vertical-align: middle;
}

/* リストのスタイルを消す */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
}

body {
  margin: 0;
  text-align: left;
}

header {
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

header img.Top-img {
  width: 100%;
  height: 60vw;
  object-fit: cover;
  object-position: 50% 100%;
  margin-bottom: 40px;
}
header img.living {
  /* width: 80%; */
  height: 50vw;
  object-fit: contain;
  object-position: 50% 50%;
  margin-top: 52px;
}
header img {
  opacity: 0;
  animation: fadeIn 1.5s ease-in-out 1 forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Title-comment {
  position: absolute;
  top: 10%;
  left: 10%;
  text-align: left;
}
.Title-comment h1 {
  font-size: 5rem;
  font-weight: normal;
  line-height: .8;
  color: white;
}
.Title-comment p {
  font-size: 1.5rem;
  color: white;
}
.Title-comment h1, .Title-comment p {
  text-shadow:
  1px  1px 8px var(--titlecolor),
  -1px  1px 8px var(--titlecolor),
  1px -1px 8px var(--titlecolor),
  -1px -1px 8px var(--titlecolor),
  1px  0px 8px var(--titlecolor),
  0px  1px 8px var(--titlecolor),
  -1px  0px 8px var(--titlecolor),
  0px -1px 8px var(--titlecolor);
}

/* ハンバーガーメニュー */
/* スマホ画面のみ表示 */
#menu-btn-check {
  display: none; /* チェックボックスを隠す */
}
.menu-btn {
  position: relative;
  top: 0px;
  right: 0px;
  display: flex;
  height: 26px;
  width: 26px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 90;
}
.menu-open {
  animation: Rotate 8s linear infinite forwards;
}
@keyframes Rotate {
  43% {transform: rotate(0);}
  50% {transform: rotate(180deg);}
  93% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 24px;
  border-radius: 3px;
  background-color: var(--txtcolor);
  position: absolute;
}
.menu-btn span {
transition: background-color .4s .3s;
}
.menu-btn span:before {
  bottom: 8px;
  transition: transform .3s, bottom .4s .3s;
}
.menu-btn span:after {
  top: 8px;
  transition: transform .3s, top .4s .3s;
}

#menu-btn-check:checked ~ .menu-btn {
  animation: none;
}

/* ≡を×にする効果 */
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .4s;
}
#menu-btn-check:checked ~ .menu-btn span:before {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom .4s, transform .6s .4s;
}
#menu-btn-check:checked ~ .menu-btn span:after {
  top: 0;
  transform: rotate(-45deg);
  transition: top .4s, transform .6s .4s;
}

.menu-content {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 237, 251, 0.801);
  opacity: 0;
  transition: opacity 0.7s, transform 0s 0.7s;
  transform: scale(0);
}
#menu-btn-check:checked ~ .menu-content {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s;
}
.close_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.menu-content ul {
  margin: 10vh 0 0 0;
  list-style: none;
}
.menu-content ul li a {
  font-size: 3rem;
  line-height: 2.5em;
  font-weight: bold;
  box-sizing: border-box;
  color:var(--txtcolor);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  position: relative;
  cursor: pointer;
}
/* ハンバーガーメニューここまで */

.global-nav {
  width: 95%;
  padding: 0 2.5%;
  height: 28px;
  position: absolute;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  z-index: 9;
}
.global-nav.fixed {
  position: fixed;
  top: 0;
  background-color: rgba(135, 207, 235, 0.568);
  /* animation: fadeIn .5s ease-in-out 1 forwards; */
}

.global-nav h2 {
  font-size: 2.2rem;
  line-height: 1;
}

.normal-menu {
  display: none;
}

/* カルーセル(スライダー)設定 */
.swiper {
  width: 100%;
  height: 46vw;
}
.swiper-slide {
  opacity: .6;
}
.swiper-slide-active{
  opacity: 1;
}
.swiper-slide img {
  width: 100%;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  color: #333333;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333333;
}

.overview {
  margin: 20px 0 50px 2%;
}

.overview p {
  line-height: 2;
}

.usage {
  margin-bottom: 100px;
}

.usage h2 {
  width: 6em;
  margin: 0 auto 20px;
}

.usage ul {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 2%;
}

.usage li {
  width: 98%;
  margin-bottom: 2rem;
}

.usage li img {
  width: 100%;
  height: 60vw;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.usage li img.show {
  opacity: 1;
}

.usage ul p {
  opacity: 0;
}

.detail {
  margin: 50px 0 50px;
}

.detail li {
  margin-bottom: 40px;
}

.detail .pic {
  height: 60vw;
  opacity: 0;
  transition: opacity 1s;
}
.detail .pic.show {
  opacity: 1;
}

.detail .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail .desc {
  width: 26em;
  margin: 0 auto;
  opacity: 0;
}
.detail .desc.show, .usage ul p.show {
  animation: slideIn 1.2s cubic-bezier(0, .21, 0, 1) 1 forwards;
}

@keyframes slideIn {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

footer {
  margin-bottom: 10px;
}

.linkblock {
  width: 90%;
  margin: 20px auto;
  padding-bottom: 10px;
  border-bottom: solid 1px black;
}

.linkblock ul {
  display: flex;
  width: 280px;
  justify-content: space-between;
  margin: 0 0 1em auto;
}

.linkblock ul a {
  font-size: 2rem;
  margin-left: 1em;
}

.linkblock a {
  font-size: 1.5rem;
  line-height: 1;
}

.information h3 {
  font-size: 1.2rem;
  font-weight: normal;
  margin: 0;
}

.information .company {
  text-align: left;
  max-width: 340px;
  margin: 0 auto;
}

.company p, .nekonote a {
  font-size: 1.2rem;
}

.nekonote {
  display: flex;
  justify-content: right;
  align-items: flex-end;
}

.nekonote a {
  animation: flicker 1s infinite alternate ease-in-out;
}
@keyframes flicker {
  0% {
    border-bottom: 1px solid currentColor;
  }
  100% {
    border-bottom: 1px solid transparent;
  }
}

.nekonote a img {
  height: 1.1em;
  vertical-align: sub;
}

/* medium screen */
@media (min-width: 600px) {
  p, a {
    font-size: 1.8rem;
    margin: 0;
  }

  body {
    text-align: center;
  }

  .Title-comment h1 {
    font-size: 7rem;
  }
  .Title-comment p {
    font-size: 2rem;
  }

  .hmbg-menu {
    display: none;
  }
  .normal-menu {
  display: flex;
  width: 480px;
  justify-content: space-between;
  }
  .normal-menu a {
    line-height: 1;
    border-bottom: 1px solid currentColor;
    transition: all .5s;
  }
  .normal-menu a:hover {
    border-bottom: 1px solid transparent;
  }

  .global-nav {
    /* padding: 0 2%; */
    height: 28px;
  }

  .global-nav a {
    font-size: 2rem;
    margin-left: .75em;
  }

  .swiper {
    width: 600px;
    height: 280px;
  }
  /* .swiper-slide {
    width: 500px;
  } */

  .overview p {
    font-size: 2rem;
    line-height: 2.5;
  }

  .usage h2 {
    font-size: 3rem;
  }
  .usage li {
    width: 95%;
    display: flex;
    justify-content: space-evenly;
  }
  .usage li:nth-of-type(odd) {
    flex-direction: row-reverse;
  }
  .usage li img {
    width: 80%;
  }

  .detail li {
     display: flex;
     align-items: center;
  }

  .detail li:nth-child(even) {
    flex-direction: row-reverse;
  }

  .detail .pic {
    flex: 1;
    height: 40vw;
    max-width: 960px;
  }

  .detail .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .detail .desc {
    width: 35%;
    max-width: 32em;
    max-height: 10em;
    margin: 0 0 0 1em;
    text-align: left;
  }
  .detail li:nth-child(even) .desc {
    margin: 0 1em 0 0;
    text-align: right;
  }

  .detail .desc.show, .usage ul p.show {
    animation: slideIn 1.4s cubic-bezier(0, .21, 0, 1) 1 forwards;
  }
  @keyframes slideIn {
    0% {
      transform: translateY(120px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  footer {
    margin-bottom: 10px;
  }

  .linkblock {
    text-align: left;
  }

  .linkblock ul {
    width: 400px;
  }

  .linkblock ul a {
    font-size: 2.5rem;
    margin-left: 1em;
  }

  .linkblock a {
    font-size: 1.8rem;
  }

  .information {
    display: flex;
    margin-right: auto;
    justify-content: space-evenly;
    align-items: flex-start;
  }

  .information h3 {
    font-size: 1.6rem;
    font-weight: normal;
    margin: 0;
  }

  .information .company {
    max-width: none;
    margin: 0;
  }

  .information .company p, .nekonote a {
    font-size: 1.6rem;
  }

  .nekonote {
    height: 5.2em;
  }

  .nekonote a {
    border-bottom: 1px solid transparent;
    transition: all .8s;
  }
  .nekonote a:hover {
    border-bottom: 1px solid currentColor;
    animation: none;
  }
}

/* large screen */
@media (min-width: 1025px) {
  header img.Top-img {
    height: 615px;
    object-position: 70% 50%;
  }

  .Title-comment h1 {
    font-size: 8rem;
  }
  .Title-comment p {
    font-size: 2.5rem;
  }

  .normal-menu {
    width: 600px;
  }

  .global-nav {
    height: 34px;
   }

  .global-nav h2 {
    font-size: 3rem;
    line-height: 1;
  }

  .global-nav a {
    font-size: 2.5rem;
    margin-left: 1em;
  }

  .swiper {
    width: 1024px;
    height: 480px;
  }

  .usage ul {
    justify-content: space-between;
    margin: 10px 0;
  }

  .usage li {
    width: 33%;
    display: block;
  }

  .usage li img {
    width: 100%;
    height: 22vw;
  }

  .usage ul p {
    opacity: 1;
  }
  .usage ul p.show {
    animation: none;
  }

  .nekonote {
    margin-left: 25%;
  }

  .nekonote a {
    font-size: 2rem;
  }
}