@charset "utf-8";

/* -----------------------------------------------------------
    疑似クラス・疑似要素
----------------------------------------------------------- */

:root {
  --text-color: #1A1A1A;
  --base-color: #;
  --main-color:#0D0908;
  --lightblue: #BFA688;
  --purple: #BFA688;
  --pink: #BFA688;
  --accent-color: #D9CDBE;
  --accent-color2: #523A32;
  --accent-color3: #D9CDBD;
  --gray-color: #F8F8F8;
  --gray-color2: #B1B1B1;
}

a:link {
  color: var(--text-color);
  text-decoration: none;
}

a:visited {
  color: var(--text-color);
  text-decoration: none;
}

a:hover,
button:hover {
  color: var(--text-color);
  text-decoration: none;
  transition: all linear 0.3s;
}

a:active {
  color: var(--text-color);
  text-decoration: none;
}


/* -----------------------------------------------------------
    タグ
----------------------------------------------------------- */

html {
  font-size:62.5%; /* 分かりやすくするために1remを10pxに */
  overflow-y: scroll; /* スクロールバーの有無によるズレ対策 */
}

body {
  font-family:"Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "メイリオ", "Meiryo", sans-serif; 
  background: var(--base-color);
  color: var(--text-color);
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

::-ms-clear {
  display: none; /* IEのテキストボックスとパスワード入力欄の「×」を消すため */
}

a {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
  backface-visibility: hidden; /* Chromeのホバー時1pxのずれ解消のため */
}

section {
  margin-top: 12.0rem;
}

button {
  display: block;
  border: none;
}

textarea {
  width: 100%;
  height: 20.0rem;
  resize: vertical;
  padding: 1.5rem;
  border: none;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  padding: 1.5rem;
  border: none;
}

input[type="email"] {
  width: 100%;
}

input[type="reset"],
input[type="submit"],
input[type="button"] {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
  appearance: none;
  -webkit-appearance: none;
}

input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="checkbox"]:hover,
input[type="radio"]:hover,
label:hover {
  cursor: pointer;
  opacity:0.8;
  transition: all linear 0.3s;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.5rem;
}

label {
  display: inline-block;
}

/* -----------------------------------------------------------
    フレックスボックス
----------------------------------------------------------- */

.flex {
  display: flex;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.justify-center {
  justify-content: center;
}

.flex.justify-end {
  justify-content: flex-end;
}

.flex.align-center {
  align-items: center;
}

.flex.align-base {
  align-items: baseline;
}

.flex.align-bottom {
  align-items: flex-end;
}

.flex.align-stretch {
  align-items: stretch;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.row{
  flex-direction: row;
}

.flex.column{
  flex-direction: column;
}

/* -----------------------------------------------------------
    ベースレイアウト
----------------------------------------------------------- */

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.relative {
  position: relative;
}

.w-100per {
  width: 100%;
}

.w-60per {
  width: 60%;
}

.w-50per {
  width: 50%;
}

.w-40per {
  width: 40%;
}

.w-fit {
  width: fit-content;
}

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.v-middle {
  vertical-align: middle;
}

/* -----------------------------------------------------------
    フォント・テキスト・色
----------------------------------------------------------- */

.titillium {
  font-family: "Titillium Web", sans-serif;
}
.en{
  font-family: "Poppins", sans-serif;
}
.en_2{
  font-family: "Bellefair", serif;
}

.fuga{
  font-family: "Fugaz One", cursive;
}

.marck {
  font-family: "Marck Script", cursive;
}

.serif {
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝", "YuMincho", serif;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

.heebo {
  font-family: 'Heebo', sans-serif;
}
.f-bold-500{
  font-weight: 500;
}
.f-bold {
  font-weight: bold;
}

.kerning {
  margin-right: 1.0rem;
}

.paragraph + .paragraph {
  margin-top: 4.0rem;
}

.white-text {
  color: #fff !important;
}

.gray-text {
  color: var(--gray-color) !important;
}
.gray-text2 {
  color: var(--gray-color2) !important;
}

.main-text {
  color: var(--main-color) !important;
}

.accent-text {
  color: var(--accent-color) !important;
}

.accent-text2 {
  color: var(--accent-color2) !important;
}

.accent-text3 {
  color: var(--accent-color3) !important;
}

.accent-text4 {
  color: var(--accent-color4) !important;
}

.outline-text {
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
  -1px 1px 0 #000, 1px -1px 0 #000,
  0px 1px 0 #000,  0-1px 0 #000,
  -1px 0 0 #000, 1px 0 0 #000;
}

.transparent-bg {
  background: transparent !important;
}

.transparent{
  color: transparent !important;
}

.pinpont-transparent > span:nth-child(6){
  color: transparent !important;
}

.white-bg {
  background: #fff;
}

.black-bg {
  color: #fff !important;
  background: #000 !important;
}

.gray-bg {
  background: var(--gray-color);
}
.gray-bg2 {
  background: var(--gray-color2);
}

.main-bg {
  background: var(--main-color);
}

.accent-bg {
  background: var(--accent-color);
}

.accent-bg2 {
  background: var(--accent-color2);
}

.accent-bg3 {
  background: var(--accent-color3);
}

.f-size-8 {
  font-size: 0.8rem;
}

.f-size-9 {
  font-size: 0.9rem;
}

.f-size-10 {
  font-size: 1.0rem;
}

.f-size-11 {
  font-size: 1.1rem;
}

.f-size-12 {
  font-size: 1.2rem;
}

.f-size-13 {
  font-size: 1.3rem;
}

.f-size-14 {
  font-size: 1.4rem;
}

.f-size-15 {
  font-size: 1.5rem;
}

.f-size-16 {
  font-size: 1.6rem;
}

.f-size-17 {
  font-size: 1.7rem;
}

.f-size-18 {
  font-size: 1.8rem;
}

.f-size-19 {
  font-size: 1.9rem;
}

.f-size-20 {
  font-size: 2.0rem;
}

.f-size-21 {
  font-size: 2.1rem;
}

.f-size-22 {
  font-size: 2.2rem;
}

.f-size-23 {
  font-size: 2.3rem;
}

.f-size-24 {
  font-size: 2.4rem;
}

.f-size-25 {
  font-size: 2.5rem;
}

.f-size-26 {
  font-size: 2.6rem;
}

.f-size-27 {
  font-size: 2.7rem;
}

.f-size-28 {
  font-size: 2.8rem;
}

.f-size-29 {
  font-size: 2.9rem;
}

.f-size-30 {
  font-size: 3.0rem;
}

.f-size-31 {
  font-size: 3.1rem;
}

.f-size-32 {
  font-size: 3.2rem;
}

.f-size-33 {
  font-size: 3.3rem;
}

.f-size-34 {
  font-size: 3.4rem;
}

.f-size-35 {
  font-size: 3.5rem;
}

.f-size-36 {
  font-size: 3.6rem;
}

.f-size-37 {
  font-size: 3.7rem;
}

.f-size-38 {
  font-size: 3.8rem;
}

.f-size-39 {
  font-size: 3.9rem;
}

.f-size-40 {
  font-size: 4.0rem;
}

.f-size-41 {
  font-size: 4.1rem;
}

.f-size-42 {
  font-size: 4.2rem;
}

.f-size-43 {
  font-size: 4.3rem;
}

.f-size-44 {
  font-size: 4.4rem;
}

.f-size-45 {
  font-size: 4.5rem;
}

.f-size-46 {
  font-size: 4.6rem;
}

.f-size-47 {
  font-size: 4.7rem;
}

.f-size-48 {
  font-size: 4.8rem;
}

.f-size-49 {
  font-size: 4.9rem;
}

.f-size-50 {
  font-size: 5.0rem;
}

.f-size-51 {
  font-size: 5.1rem;
}

.f-size-52 {
  font-size: 5.2rem;
}

.f-size-53 {
  font-size: 5.3rem;
}

.f-size-54 {
  font-size: 5.4rem;
}

.f-size-55 {
  font-size: 5.5rem;
}

.f-size-56 {
  font-size: 5.6rem;
}

.f-size-57 {
  font-size: 5.7rem;
}

.f-size-58 {
  font-size: 5.8rem;
}

.f-size-59 {
  font-size: 5.9rem;
}

.f-size-60 {
  font-size: 6.0rem;
}

.f-size-61 {
  font-size: 6.1rem;
}

.f-size-62 {
  font-size: 6.2rem;
}

.f-size-63 {
  font-size: 6.3rem;
}

.f-size-64 {
  font-size: 6.4rem;
}

.f-size-65 {
  font-size: 6.5rem;
}

.f-size-66 {
  font-size: 6.6rem;
}

.f-size-67 {
  font-size: 6.7rem;
}

.f-size-68 {
  font-size: 6.8rem;
}

.f-size-69 {
  font-size: 6.9rem;
}

.f-size-70 {
  font-size: 7.0rem;
}

.f-size-71 {
  font-size: 7.1rem;
}

.f-size-72 {
  font-size: 7.2rem;
}

.f-size-73 {
  font-size: 7.3rem;
}

.f-size-74 {
  font-size: 7.4rem;
}

.f-size-75 {
  font-size: 7.5rem;
}

.f-size-76 {
  font-size: 7.6rem;
}

.f-size-77 {
  font-size: 7.7rem;
}

.f-size-78 {
  font-size: 7.8rem;
}

.f-size-79 {
  font-size: 7.9rem;
}

.f-size-80 {
  font-size: 8.0rem;
}

.f-size-81 {
  font-size: 8.1rem;
}

.f-size-82 {
  font-size: 8.2rem;
}

.f-size-83 {
  font-size: 8.3rem;
}

.f-size-84 {
  font-size: 8.4rem;
}

.f-size-85 {
  font-size: 8.5rem;
}

.f-size-86 {
  font-size: 8.6rem;
}

.f-size-87 {
  font-size: 8.7rem;
}

.f-size-88 {
  font-size: 8.8rem;
}

.f-size-89 {
  font-size: 8.9rem;
}

.f-size-90 {
  font-size: 9.0rem;
}

.f-size-91 {
  font-size: 9.1rem;
}

.f-size-92 {
  font-size: 9.2rem;
}

.f-size-93 {
  font-size: 9.3rem;
}

.f-size-94 {
  font-size: 9.4rem;
}

.f-size-95 {
  font-size: 9.5rem;
}

.f-size-96 {
  font-size: 9.6rem;
}

.f-size-97 {
  font-size: 9.7rem;
}

.f-size-98 {
  font-size: 9.8rem;
}

.f-size-99 {
  font-size: 9.9rem;
}

.f-size-100 {
  font-size: 10.0rem;
}

.f-size-101 {
  font-size: 10.1rem;
}

.f-size-102 {
  font-size: 10.2rem;
}

.f-size-103 {
  font-size: 10.3rem;
}

.f-size-104 {
  font-size: 10.4rem;
}

.f-size-105 {
  font-size: 10.5rem;
}

.f-size-106 {
  font-size: 10.6rem;
}

.f-size-107 {
  font-size: 10.7rem;
}

.f-size-108 {
  font-size: 10.8rem;
}

.f-size-109 {
  font-size: 10.9rem;
}

.f-size-110 {
  font-size: 11.0rem;
}

.f-size-111 {
  font-size: 11.1rem;
}

.f-size-112 {
  font-size: 11.2rem;
}

.f-size-113 {
  font-size: 11.3rem;
}

.f-size-114 {
  font-size: 11.4rem;
}

.f-size-115 {
  font-size: 11.5rem;
}

.f-size-116 {
  font-size: 11.6rem;
}

.f-size-117 {
  font-size: 11.7rem;
}

.f-size-118 {
  font-size: 11.8rem;
}

.f-size-119 {
  font-size: 11.9rem;
}

.f-size-120 {
  font-size: 12.0rem;
}

.f-size-121 {
  font-size: 12.1rem;
}

.f-size-122 {
  font-size: 12.2rem;
}

.f-size-123 {
  font-size: 12.3rem;
}

.f-size-124 {
  font-size: 12.4rem;
}

.f-size-125 {
  font-size: 12.5rem;
}

.f-size-126 {
  font-size: 12.6rem;
}

.f-size-127 {
  font-size: 12.7rem;
}

.f-size-128 {
  font-size: 12.8rem;
}

.f-size-129 {
  font-size: 12.9rem;
}

.f-size-130 {
  font-size: 13.0rem;
}

.f-size-131 {
  font-size: 13.1rem;
}

.f-size-132 {
  font-size: 13.2rem;
}

.f-size-133 {
  font-size: 13.3rem;
}

.f-size-134 {
  font-size: 13.4rem;
}

.f-size-135 {
  font-size: 13.5rem;
}

.f-size-136 {
  font-size: 13.6rem;
}

.f-size-137 {
  font-size: 13.7rem;
}

.f-size-138 {
  font-size: 13.8rem;
}

.f-size-139 {
  font-size: 13.9rem;
}

.f-size-140 {
  font-size: 14.0rem;
}

.f-size-141 {
  font-size: 14.1rem;
}

.f-size-142 {
  font-size: 14.2rem;
}

.f-size-143 {
  font-size: 14.3rem;
}

.f-size-144 {
  font-size: 14.4rem;
}

.f-size-145 {
  font-size: 14.5rem;
}

.f-size-146 {
  font-size: 14.6rem;
}

.f-size-147 {
  font-size: 14.7rem;
}

.f-size-148 {
  font-size: 14.8rem;
}

.f-size-149 {
  font-size: 14.9rem;
}

.f-size-150 {
  font-size: 15.0rem;
}

.f-size-151 {
  font-size: 15.1rem;
}

.f-size-152 {
  font-size: 15.2rem;
}

.f-size-153 {
  font-size: 15.3rem;
}

.f-size-154 {
  font-size: 15.4rem;
}

.f-size-155 {
  font-size: 15.5rem;
}

.f-size-156 {
  font-size: 15.6rem;
}

.f-size-157 {
  font-size: 15.7rem;
}

.f-size-158 {
  font-size: 15.8rem;
}

.f-size-159 {
  font-size: 15.9rem;
}

.f-size-160 {
  font-size: 16.0rem;
}

.f-size-161 {
  font-size: 16.1rem;
}

.f-size-162 {
  font-size: 16.2rem;
}

.f-size-163 {
  font-size: 16.3rem;
}

.f-size-164 {
  font-size: 16.4rem;
}

.f-size-165 {
  font-size: 16.5rem;
}

.f-size-166 {
  font-size: 16.6rem;
}

.f-size-167 {
  font-size: 16.7rem;
}

.f-size-168 {
  font-size: 16.8rem;
}

.f-size-169 {
  font-size: 16.9rem;
}

.f-size-170 {
  font-size: 17.0rem;
}

.f-size-171 {
  font-size: 17.1rem;
}

.f-size-172 {
  font-size: 17.2rem;
}

.f-size-173 {
  font-size: 17.3rem;
}

.f-size-174 {
  font-size: 17.4rem;
}

.f-size-175 {
  font-size: 17.5rem;
}

.f-size-176 {
  font-size: 17.6rem;
}

.f-size-177 {
  font-size: 17.7rem;
}

.f-size-178 {
  font-size: 17.8rem;
}

.f-size-179 {
  font-size: 17.9rem;
}

.f-size-180 {
  font-size: 18.0rem;
}

.f-size-181 {
  font-size: 18.1rem;
}

.f-size-182 {
  font-size: 18.2rem;
}

.f-size-183 {
  font-size: 18.3rem;
}

.f-size-184 {
  font-size: 18.4rem;
}

.f-size-185 {
  font-size: 18.5rem;
}

.f-size-186 {
  font-size: 18.6rem;
}

.f-size-187 {
  font-size: 18.7rem;
}

.f-size-188 {
  font-size: 18.8rem;
}

.f-size-189 {
  font-size: 18.9rem;
}

.f-size-190 {
  font-size: 19.0rem;
}

.f-size-191 {
  font-size: 19.1rem;
}

.f-size-192 {
  font-size: 19.2rem;
}

.f-size-193 {
  font-size: 19.3rem;
}

.f-size-194 {
  font-size: 19.4rem;
}

.f-size-195 {
  font-size: 19.5rem;
}

.f-size-196 {
  font-size: 19.6rem;
}

.f-size-197 {
  font-size: 19.7rem;
}

.f-size-198 {
  font-size: 19.8rem;
}

.f-size-199 {
  font-size: 19.9rem;
}

.f-size-200 {
  font-size: 20.0rem;
}


.ma5 {
  margin: 5px;
}
.ma10 {
  margin: 10px;
}
.ma15 {
  margin: 15px;
}
.ma20 {
  margin: 20px;
}
.ma25 {
  margin: 25px;
}
.ma30 {
  margin: 30px;
}
.ma35 {
  margin: 35px;
}
.ma40 {
  margin: 40px;
}
.ma45 {
  margin: 45px;
}
.ma50 {
  margin: 50px;
}
.ma55 {
  margin: 55px;
}
.ma60 {
  margin: 60px;
}
.ma65 {
  margin: 65px;
}
.ma70 {
  margin: 70px;
}
.ma75 {
  margin: 75px;
}
.ma80 {
  margin: 80px;
}
.ma85 {
  margin: 85px;
}
.ma90 {
  margin: 90px;
}
.ma95 {
  margin: 95px;
}
.ma100 {
  margin: 100px;
}

.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mt35 {
  margin-top: 35px;
}
.mt40 {
  margin-top: 40px;
}
.mt45 {
  margin-top: 45px;
}
.mt50 {
  margin-top: 50px;
}
.mt55 {
  margin-top: 55px;
}
.mt60 {
  margin-top: 60px;
}
.mt65 {
  margin-top: 65px;
}
.mt70 {
  margin-top: 70px;
}
.mt75 {
  margin-top: 75px;
}
.mt80 {
  margin-top: 80px;
}
.mt85 {
  margin-top: 85px;
}
.mt90 {
  margin-top: 90px;
}
.mt95 {
  margin-top: 95px;
}
.mt100 {
  margin-top: 100px;
}

.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb35 {
  margin-bottom: 35px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb45 {
  margin-bottom: 45px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb55 {
  margin-bottom: 55px;
}
.mb60 {
  margin-bottom: 60px;
}
.mb65 {
  margin-bottom: 65px;
}
.mb70 {
  margin-bottom: 70px;
}
.mb75 {
  margin-bottom: 75px;
}
.mb80 {
  margin-bottom: 80px;
}
.mb85 {
  margin-bottom: 85px;
}
.mb90 {
  margin-bottom: 90px;
}
.mb95 {
  margin-bottom: 95px;
}
.mb100 {
  margin-bottom: 100px;
}

.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml25 {
  margin-left: 25px;
}
.ml30 {
  margin-left: 30px;
}
.ml35 {
  margin-left: 35px;
}
.ml40 {
  margin-left: 40px;
}
.ml45 {
  margin-left: 45px;
}
.ml50 {
  margin-left: 50px;
}
.ml55 {
  margin-left: 55px;
}
.ml60 {
  margin-left: 60px;
}
.ml65 {
  margin-left: 65px;
}
.ml70 {
  margin-left: 70px;
}
.ml75 {
  margin-left: 75px;
}
.ml80 {
  margin-left: 80px;
}
.ml85 {
  margin-left: 85px;
}
.ml90 {
  margin-left: 90px;
}
.ml95 {
  margin-left: 95px;
}
.ml100 {
  margin-left: 100px;
}

.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr25 {
  margin-right: 25px;
}
.mr30 {
  margin-right: 30px;
}
.mr35 {
  margin-right: 35px;
}
.mr40 {
  margin-right: 40px;
}
.mr45 {
  margin-right: 45px;
}
.mr50 {
  margin-right: 50px;
}
.mr55 {
  margin-right: 55px;
}
.mr60 {
  margin-right: 60px;
}
.mr65 {
  margin-right: 65px;
}
.mr70 {
  margin-right: 70px;
}
.mr75 {
  margin-right: 75px;
}
.mr80 {
  margin-right: 80px;
}
.mr85 {
  margin-right: 85px;
}
.mr90 {
  margin-right: 90px;
}
.mr95 {
  margin-right: 95px;
}
.mr100 {
  margin-right: 100px;
}

.indent {
  text-indent: -1em;
  padding-left: 1em;
}
/*-----------------------------------------------------------
  アニメーション 
-------------------------------------------------------------*/

/*-ロード時にフワッと(load-fade) */
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}
/*-ロード時にフワッと(load-fade) */

/*---スクロール時にフワッと  (scroll-up)------*/
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 0.5s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
/*---スクロール時にフワッと  (scroll-up)------*/

/* -----------------------------------------------------------
    PCのみ
----------------------------------------------------------- */

@media screen and (min-width:1025px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* -----------------------------------------------------------
    タブレット・スマホ時
----------------------------------------------------------- */

@media screen and (max-width:1024px) {

:hover {
  opacity: 1; /* ボタン等を押した時に2回押さないと効かないバグ対策 */
}

html {
  font-size:60%;
}

}

/* -----------------------------------------------------------
    スマホ時
----------------------------------------------------------- */

@media screen and (max-width:767px) {

  html {
    font-size:55%;
  }

  .flex.row{
    flex-direction: column;
  }

}