@charset "UTF-8";
/*==============================================

COLOR

==============================================*/ :root {
  --txt-Color: #402419;
  --base: #FFFAEC;
  --main: #402419;
  --sub: #FF6800;
}
/*========================================================================================

共通設定

=========================================================================================*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none !important;
}
::before, ::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  width: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 40px;
}
body {
  color: var(--txt-Color);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: left;
  background-color: var(--base);
}
main {
  overflow: hidden;
}
img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}
a {
  transition: all .3s ease;
  cursor: pointer;
  text-decoration: none;
}
ul li, ol li {
  list-style-type: none;
}
/*========================================================================================

クラス名指定機能

=========================================================================================*/
.width1400 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.width1200 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.width1000 {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.width1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.width900 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  .width1400 {
    padding: 0 15px;
  }
}
@media screen and (max-width: 1200px) {
  .width1200 {
    padding: 0 15px;
  }
}
@media screen and (max-width: 1100px) {
  .width1100 {
    padding: 0 15px;
  }
}
@media screen and (max-width: 1000px) {
  .width1000 {
    padding: 0 15px;
  }
}
@media screen and (max-width: 900px) {
  .width900 {
    padding: 0 15px;
  }
}
.col-90 {
  width: 90%;
}
.col-87 {
  width: 87%;
}
.col-85 {
  width: 85%;
}
.col-83 {
  width: 83%;
}
.col-80 {
  width: 80%;
}
.col-75 {
  width: 75%;
}
.col-70 {
  width: 70%;
}
.col-65 {
  width: 65%;
}
.col-60 {
  width: 60%;
}
.col-55 {
  width: 55%;
}
.col-50 {
  width: 50%;
}
.col-46 {
  width: 46%;
}
.col-47 {
  width: 47%;
}
.col-48 {
  width: 48%;
}
.col-45 {
  width: 45%;
}
.col-42 {
  width: 42%;
}
.col-40 {
  width: 40%;
}
.col-37 {
  width: 37%;
}
.col-35 {
  width: 35%;
}
.col-32 {
  width: 32%;
}
.col-31 {
  width: 31%;
}
.col-30 {
  width: 30%;
}
.col-28 {
  width: 28%;
}
.col-25 {
  width: 25%;
}
.col-20 {
  width: 20%;
}
.col-15 {
  width: 15%;
}
.col-12 {
  width: 12%;
}
.col-10 {
  width: 10%;
}
.col-5 {
  width: 5%;
}
.mb-ten5em {
  margin-bottom: 0.5em;
}
.mb-1em {
  margin-bottom: 1em;
}
.mb-2em {
  margin-bottom: 2em;
}
.mb-short {
  margin-bottom: clamp(20px, 4vw, 80px);
}
.mb-mid {
  margin-bottom: clamp(40px, 6vw, 100px);
}
.mb-large {
  margin-bottom: clamp(80px, 10vw, 140px);
}
.mb-xlarge {
  margin-bottom: clamp(100px, 15vw, 180px);
}
.aspect1-1, img.aspect1-1 {
  aspect-ratio: 1 / 1;
}
.aspect2-1, img.aspect2-1 {
  aspect-ratio: 2 / 1;
}
.aspect2-3, img.aspect2-3 {
  aspect-ratio: 2 / 3;
}
.aspect3-2, img.aspect3-2 {
  aspect-ratio: 3 / 2;
}
.aspect3-4, img.aspect3-4 {
  aspect-ratio: 3 / 4;
}
.aspect4-5, img.aspect4-5 {
  aspect-ratio: 4 / 5;
}
.aspect19-7, img.aspect19-7 {
  aspect-ratio: 19 / 7;
}
/*仕様*/
.radius20 {
  border-radius: 20px;
}
.radius30 {
  border-radius: 30px;
}
.radius40 {
  border-radius: 40px;
}
.radius100, .radius100 .img {
  border-radius: 100px;
}
.m-auto {
  margin: 0 auto;
}
.t-center {
  text-align: center;
}
.none {
  display: none;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.relative {
  position: relative;
  z-index: 1;
}
.bold {
  font-weight: 700;
}
.font-2xlarge {
  font-size: clamp(3.5rem, 2.227rem + 6.36vw, 7rem);
  font-weight: 700;
  line-height: 1.5;
}
.font-xlarge {
  font-size: clamp(3rem, 2.273rem + 3.64vw, 5rem);
  font-weight: 700;
  line-height: 1.5;
}
.font-large {
  font-size: clamp(2.4rem, 2.636rem + 1.82vw, 4rem);
  font-weight: 700;
  line-height: 1.5;
}
.font-mid {
  font-size: clamp(2rem, 1.455rem + 2.73vw, 3.5rem);
  font-weight: 700;
}
.font-small {
  font-size: clamp(1.8rem, 1.436rem + 1.82vw, 2.8rem);
}
.font-lead {
  font-size: clamp(1.6rem, 1.455rem + 0.73vw, 2rem);
  line-height: 2.5;
  font-weight: 700;
  text-align: left;
}
.font-or {
  color: var(--sub);
}
.font-ye {
  color: #FFDD00;
}
.font-re {
  color: #ce0019;
}
.font-bu {
  color: #43BDFF;
}
/* 文字の上に点 */
.dots {
  background-image: radial-gradient(circle at center, #FF9800 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 1em;
  padding-top: .5em;
  line-height: 1;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-reverse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*align-items: flex-start;*/
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
/*========================================================================================

レスポンシブ

=========================================================================================*/
.sp-block, .tb-block {
  display: none;
}
@media screen and (max-width: 820px) {
  .flex-release {
    display: block;
  }
  .tp-block {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .sp-block {
    display: block;
  }
  /* 600px以下で横スクロール */
  .scroll600 {
    overflow-x: auto;
    overflow-y: hidden; /* 縦スクロールを無効化 */
    width: 100%;
    height: auto; /* 必要に応じて調整 */
  }
  .scroll600 ul {
    display: flex; /* 横並び */
    align-items: center; /* 子要素を縦中央揃え */
    min-width: 200vw; /* 横スクロールを実現 */
    /*white-space: nowrap;*/
    margin-bottom: 1em;
  }
  .scroll600::-webkit-scrollbar {
    width: 3.5px;
    height: 3.5px;
  }
  .scroll600::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 5px;
  }
  .scroll600::-webkit-scrollbar-thumb {
    background: #F3A696;
    border-radius: 5px;
  }
  .scroll600 + .btn-area {
    margin-top: 1em;
  }
}
/*========================================================================================

レイアウトの基本設定

=========================================================================================*/
/*============= 余白 =============*/
section {
  padding: 0 0 clamp(40px, 10vw, 100px);
  margin: 0px;
}
/*============= スマホタブレットでのhoverスタイル無効化 =============*/
@media screen and (hover: hover) {
  .hover-op:hover {
    opacity: .5;
  }
}
/*============= PCでの電話無効化
@media(min-width: 820px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
} =============*/
/*=====////////ふわっと出現////////======*/
/*下から*/
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*左から*/
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*右から*/
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*はじめに透過0を指定*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}