/*------------------------------------------
カスタムリセット
---------------------------------------------*/

* {
  font-family: var(--font-family-body);
}

/* 画像の初期設定 */
img {
  width: 100%;
  height: auto;
  /* width を変えても、元の比率のまま サイズが変わる！ */
  display: block;
  /* 画像の下にできる謎のスキマ */
}

/*------------------------------------------

root定義

---------------------------------------------*/
:root {
  /*----------------------------------------------------------------------------------
    カラー設定
----------------------------------------------------------------------------------*/
  --color-yellow-light: #FFF6C7;   /* 明るいクリームイエロー */
  --color-yellow-primary: #FFD275; /* やや濃い目のイエロー */
  --color-pink-primary: #E4007F;
  --color-green-fresh: #87B81D;
  --color-blue-sky: #0194CB;
  --color-purple-deep: #920783;
  --color-gray-dark: #333333;
  --color-white: #FFFFFF;
  --color-pink-deep: #E50F83;
  /*----------------------------------------------------------------------------------
    フォント設定
----------------------------------------------------------------------------------*/
  --font-family-accent: 'M PLUS Rounded 1c', sans-serif;/* 全体 */
  --font-family-body: 'Zen Antique Soft', sans-serif;/* 見出し */

  --font-size-fixed-xs: 12px;
  --font-size-fixed-s:  16px;
  --font-size-fixed-m:  20px;
  --font-size-fixed-l:  28px;
  --font-size-fixed-xl: 32px;
  --font-size-fixed-xxl: 70px;


  --font-size-xs: clamp(0.875rem, calc(1rem - 0.3vw), 1rem);      /* 12〜16pxくらい */
  --font-size-sm: clamp(0.875rem, 0.6rem + 1vw, 1.125rem); /* 14〜18pxくらい */
  --font-size-md: clamp(1rem, 0.75rem + 1vw, 1.25rem);     /* 16〜20pxくらい */
  --font-size-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);      /* 20〜24pxくらい */
  --font-size-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);      /* 24〜32pxくらい */

  --font-weight-medium: 500;/* 標準よりやや太め */
  --font-weight-bold: 700;/* 太字（見出しなどに使用） */
  --font-weight-extra-bold: 900;/* 極太 */
  /*----------------------------------------------------------------------------------
    テキストスタイル
----------------------------------------------------------------------------------*//* 基準 */
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;/* 広め（ゆったり） */

  --letter-spacing-normal: 0.05rem;/* 基準（基準の文字間隔） */
  --letter-spacing-relaxed: 0.08rem;/* やや広め（読みやすさUP） */
  --letter-spacing-loose: 0.12rem;/* 広め（ゆったりしたデザイン） */

  --text-align-justify: justify;/* 文字の両端揃え */
  --text-align-center: center;/* 文字の中央揃え */
  --text-align-left: left;/* 文字の左揃え */
  /*----------------------------------------------------------------------------------
    角丸スタイル
----------------------------------------------------------------------------------*/
  --border-radius-sm: 4px;
  --border-radius-m: 7px;
  --border-radius-lg: 16px;
  --border-radius-xl: 50px;
  --border-radius-full: 50%;
  /*----------------------------------------------------------------------------------
余白設定
----------------------------------------------------------------------------------*/
  --space-xs: 4px; /* アイコン間隔、ボタン内の余白など */
  --space-s: 8px;/* テキストの行間、リストアイテムの間隔 */
  --space-sm: 12px;/* ボタンとボタンの間、カード内のパディング */
  --space-m: 16px;/* セクション内の余白、コンテンツのマージン */
  --space-ml: 24px;/* コンテンツのまとまりの間隔(大) */
  --space-l: 32px;/* コンテンツのまとまりの間隔(中)*/
  --space-xl: 76px;/* コンテンツのまとまりの間隔(小) */
  --space-xxl: 80px;/* 大きなコンテンツブロック間 */
  --space-xxxl: 150px;/* さらに大きなコンテンツブロック間 */

  --space-bottm-sp: 24px;
}



@media (max-width: 767px) {
  :root {
    --font-size-fixed-l: 20px;
    --space-xl: 46px;
  }
}

/*----------------------------------------------------------------------------------
    ボタン
----------------------------------------------------------------------------------*/
.btn {
  background-color: var(--color-deep-blue-gray);
  align-items: var(--text-align-center);
  display: flex;
  color: var(--color-pink-deep);
  border: 2px solid var(--color-pink-deep);
  padding: 12px 46px;
  margin-right: 10px;
  border-radius: 20px;
  gap: 24px;
  transition: all 0.2s ease-in;
  display: block;
  margin: 0 auto;
  max-width: 210px;
text-align: center;
}


.btn:hover {
  background-color: var(--color-pink-deep); 
  color: var(--color-white); 
}

.arrow {
  position: relative; /* ← これを追加！ */
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: var(--color-pink-deep);
  right: 30px;
  top: 50%;
  transform-origin: right center;
  transition: all 0.2s ease-in;
}

.arrow::before {
  transform: rotate(45deg);
}


.arrow::after {
  transform: rotate(-45deg);
}

.arrow:hover::before,
.arrow:hover::after {
  background-color: var(--color-white);
  right:24px;
}

@media (max-width: 767px) {
  .btn {
    background-color: var(--color-deep-blue-gray);
    align-items: var(--text-align-center);
    color: var(--color-pink-deep);
    border: 2px solid var(--color-pink-deep);
    padding: 12px 46px;
    border-radius: 20px;
    gap: 24px;
    transition: all 0.2s ease-in;
    display: block;
    margin: 0 auto;
    max-width: 180px;
    font-size: 14px;
	white-space: nowrap;
    font-size: 12px;
}
}
/*----------------------------------------------------------------------------------
    テキストデザイン
----------------------------------------------------------------------------------*/
.heading {
  font-size: var(--font-size-xl);
  color: var(--color-black);
  font-family: var(--font-family-accent);
}

.heading-sub {
  font-size: var(--font-size-s);
  color: var(--color-medium-gray);
  font-family: var(--font-family-accent);
}

.main-text {
  position: absolute;
  top: 50%;  
  left: 50%; 
  transform: translate(-50%, -50%); 
  color: var(--color-white);
  font-size: var(--font-size-fixed-xxl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  width: 100%;
  font-family: var(--font-family-accent);
}

.mail-icon:hover {
  transform: translateY(-5px);
}
  
  @media (max-width: 767px) {

  .main-text {
    font-size: 36px;
}
  }

/*----------------------------------------------------------------------------------
    コンテンツレイアウト
----------------------------------------------------------------------------------*/
.wide_690 {
  max-width: 690px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wide_1640 {
  max-width: 1640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wide_450 {
  max-width: 450px;
  width: 100%;
}

.margin_bottom {
  margin-bottom: 52px;
}

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

.content__inner {
  padding: 52px 32px;
}

main{
  margin-top: 100px;
  padding: 0px 60px;
}

@media (max-width: 1200px) {
  main{
    padding: 0px 16px;
  }
}

@media (max-width: 767px) {
  .inner {
    padding: 0px 16px;
  }

  .content__inner {
  padding: 52px 20px;
}

  main{
    padding: 0px;
  }
}

/*----------------------------------------------------------------------------------
    レスポンシブbr
----------------------------------------------------------------------------------*/
/* （スマホ用）（794以下） */
.br-pc,
.br-tb {
  display: none;
  /* pcとタブレットoff */
}

.br-sp {
  display: block;
}

/* タブレット用（795px〜1399px） */
@media screen and (min-width: 795px) {

  .br-sp,
  .br-pc {
    display: none;
    /* pcとスマフォoff */
  }

  .br-tb {
    display: block;
  }
}

/* PC用（1024px〜） */
@media screen and (min-width: 1440px) {

  .br-tb,
  .br-sp {
    display: none;
    /* pcとタブレットoff */
  }

  .br-pc {
    display: block;
  }
}

/*----------------------------------------------------------------------------------
    スクロールアイコン
----------------------------------------------------------------------------------*/

.scroll {
  bottom: 136px;
  display: flex;
  flex-flow: row nowrap;
  left: 60px;
  pointer-events: none;
  position: absolute;
  transform: rotate(90deg) translate(calc(-100% + 20px), 50%);
  transform-origin: 0 100%;
  transition: all .8s cubic-bezier(.165,.84,.44,1) .18s;
  color: var(--color-pink-primary);
  font-size: 14px;
  align-items: center;
  gap: 8px;
  z-index: 10;
}


@keyframes blink {
  0%, 100% {
      opacity: 0.2;
  }
  50% {
      opacity: 1;
  }
}

.scroll .triangulararrow {
  transform: rotate(-90deg);
  display: inline-block;
  animation: blink 1s infinite;
}

.scroll .triangulararrow:nth-child(1) {
  animation-delay: 0s;
}

.scroll .triangulararrow:nth-child(2) {
  animation-delay: 0.2s;
}

.scroll .triangulararrow:nth-child(3) {
  animation-delay: 0.4s;
}

@media (max-width: 767px) {
  .scroll {
    bottom: 350px;
      display: flex;
      flex-flow: row nowrap;
      left: 20px;
      pointer-events: none;
      position: absolute;
      transform: rotate(90deg) translate(calc(-100% + 20px), 50%);
      transform-origin: 0 100%;
      transition: all .8s cubic-bezier(.165,.84,.44,1) .18s;
      color: var(--color-pink-primary);
      font-size: 14px;
      align-items: center;
      gap: 8px;
  }
}