html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
    font-family: noto sans jp,游ゴシック,YuGothic,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,Verdana,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,ms pgothic,sans-serif;
    font-weight: 400;
    line-height: 1.75;
    color: #010046;
    height: 100vh;
    overflow-y: scroll;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
}
/* Chrome, Safari 対応 */
#main-area::-webkit-scrollbar {
  display:none;
}

/* common */

.inner {
  padding: 0 32px;
}
.inner-large {
  padding: 0 20px;
}

img {
  max-width: 100%;
}
.align-left {
  text-align: left;
}

.red {
  color: #c90044;
}

/* __common */

#wrapper {
  position: relative;
  z-index: 1;
}

#brand-introduction {
  display: none;
  width: calc((100% - 430px) / 2 );
  padding: 120px 70px 0;
  height: 100vh;
  position: fixed;
  z-index: 1;
  right: 0;
  top: 0;
}
#brand-introduction h1 {
  text-align: center;
  margin-bottom: 30px;
}
#brand-introduction p {
  max-width: 312px;
  margin: auto;
}

/* コンテンツエリア */
#main-area {
  width: 430px;
  max-width: 100%;
  box-shadow: 0px 0px 10px #00000029;
  background-color: #f4f2f0;
  position: relative;
  margin: 0 auto;
  z-index: 2;
  text-align: center;
}

#main-area header h1 {
  padding: 10px 32px;
  background-color: #fff;
}

@media screen and (min-width: 1025px) {
  #main-area header h1{
    display: none;
  }
}

/* 申込セクション */

.application {
  padding: 60px 0;
}
.application h2 {
  margin-bottom: 30px;
}
.application .img {
  margin-bottom: 30px;
}
.application .onetime {
  line-height: 1;
  padding: 10px 16px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #010046;
  margin-bottom: 10px;
  font-weight: 600;
}
.application h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.application .period {
  margin-bottom: 20px;
}
.application .price-box {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 30px;
}
.application .price-area {
  color: #c90044;
  font-weight: 600;
  line-height: 1.2;
}
.application .tax {
  font-size: 2rem;
}
.application .number {
  font-size: 4.2rem;
  font-family: roboto;
}
.application .yen {
  font-size: 2rem;
}
.application .shipping-fee {
  text-align: right;
}
.application .btn a {
  display: block;
  transition: 0.3s;
}
.application .btn a:hover {
  opacity: .7;
}
.application .btn-purchace {
  margin-bottom: 20px;
}

#wakan-introduction {
  background-color: #010046;
  color: #fff;
  padding-bottom: 60px;
}

#wakan-introduction h2 {
  margin-bottom: 45px;
}
#wakan-introduction .main-text {
  font-size: 1.8rem;
  margin-bottom: 30px;
}
#wakan-introduction .caption {
  font-size: 1.5rem;
  color: #ccc;
}


#feature {
  padding: 40px 0 70px;
  background-image: url(../images02/mc/bg_washi.jpg);
  background-image: image-set(
    url("../images02/mc/bg_washi.jpg") 1x,
    url("../images02/mc/bg_washi@2x.jpg") 2x);
}

.features {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 40px;
}

#feature h2 {
  margin-bottom: 20px;
}

.features h3 {
  margin-bottom: 20px;
}
.features p {
  text-align: left;
}

.feature-image .img {
  margin-bottom: 20px;
}

.feature-image p {
  font-size: 1.8rem;
  font-weight: 600;
}

#how-to-use {
  background-color: #010046;
  color: #fff;
  padding: 60px 0;
}

#how-to-use h2 {
  margin-bottom: 30px;
}
#how-to-use p {
  text-align: left;
}

#how-to-use .movie {
  margin-bottom: 30px;
}

#how-to-use .movie iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}


#about-kyonoyuki {
  background-color: #fff;
  padding: 60px 0;
}
.abouts h2 {
  margin-bottom: 20px;
}
.abouts p:not(.address) {
  text-align: left;
}
.abouts p.address {
  margin-bottom: 30px;
}
.about01 {
  margin-bottom: 32px;
}
.about02 {
  margin-bottom: 60px;
}

#main-area footer {
  padding: 30px 0 80px;
  background-color: #010046;
  color: #ccc;
  font-size: 1.2rem;
}

#main-area footer .links {
  margin-bottom: 10px;
}
#main-area footer .links a {
  transition: 0.2s;
}
#main-area footer .links a:hover {
  color: #fff;
}

/* __コンテンツエリア */

#photo-bg {
  width: calc((100% - 430px) / 2 );
  background-image: url(../images02/mc/bg_main_pc.jpg);
  background-image: image-set(
    url("../images02/mc/bg_main_pc.jpg") 1x,
    url("../images02/mc/bg_main_pc@2x.jpg") 2x);
  background-size: cover;
  background-position: right center;
  height: 100vh;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
}

#apply-btn {
  position: fixed;
  right: 9px;
  bottom: 0;
  z-index: 2;
  transform: translateY(33px);
  transition: .5s;
}
#apply-btn.up {
  transform: translateY(0);
}
#apply-btn a {
  display: block;
  transition: .3s;
}
#apply-btn a:hover {
  opacity: .7;
}

@media screen and (min-width: 377px) {
  #apply-btn {
    right: 50px;
  }
}

@media screen and (min-width: 1025px) {
  #brand-introduction {
    display: block;
  }
}

@media screen and ( max-width: 1200px ) {
  #brand-introduction {
    padding: 100px 3%;
  }
  #brand-introduction p {
    font-size: 1.5rem;
  }
}