/* 
 * Common Styles
 * 共通スタイル設定
 */

/* Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap'); */

/* -------------------------
  root設定
------------------------- */
:root {
  font-size: 62.5%;

    /* フォントファミリー変数 */
    --font_family_Noto_Sans: 'Noto Sans JP', "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
    --font_family_Roboto: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
    /* --font_family_Inter: "Inter", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif; */


  /* カラー変数 */
  --color_base:           #FFF;
  --color_main:           hsl(0, 0%, 95%);
  --color_accent:         #EB6153;
  --color_accent-RGB:     235, 97, 83;
  --color_accent2:        #F6AB00;
  --color_accent2-RGB:    246, 171, 0;
  --color_background:     #FEF7E5;
  --color_text:           #000000;

 
  /* border-radius変数 */
  --radius_xs:   3px;
  --radius_sm:   6px;
  --radius_md:   8px;
  --radius_lg:  12px;
  --radius_xl:  24px;

  /* line-height変数 */
  --line_height_sm: 1.3;
  --line_height_md: 1.5;
  --line_height_lg: 1.7;
  --line_height_xl: 2.0;

  /* サイズ変数 */
  --header_height:  100px;
  --container_width:  1180px;
  --container_padding:  50px;
  --sidebar_width:  350px;


  /* スペース変数 */
  --space_2xs:  4px;   /* 0.25rem */
  --space_xs:   8px;   /* 0.5rem */
  --space_sm:   12px;  /* 0.75rem */
  --space_md:   16px;  /* 1rem */
  --space_lg:   24px;  /* 1.5rem */
  --space_xl:   32px;  /* 2rem */
  --space_2xl:  40px;  /* 2.5rem */
  --space_3xl:  48px;  /* 3rem */
  --space_4xl:  64px;  /* 4rem */
  --space_5xl:  80px;  /* 5rem */
  --space_6xl:  96px;  /* 6rem */
  --space_7xl:  128px; /* 8rem */

  /* フォントサイズ変数 */
  --text_2xs:   1.0rem;  /* 10px */
  --text_xs:    1.2rem;  /* 12px */
  --text_sm:    1.3rem;  /* 13px */
  --text_md:    1.4rem;  /* 14px */
  --text_lg:    1.6rem;  /* 16px - ベースサイズ */
  --text_xl:    1.8rem;  /* 18px */
  --text_2xl:   2.0rem;  /* 20px */
  --text_3xl:   2.2rem;  /* 22px */
  --text_4xl:   2.4rem;  /* 24px */
  --text_5xl:   2.8rem;  /* 28px */
  --text_6xl:   3.2rem;  /* 32px */
  --text_7xl:   3.6rem;  /* 36px */
  --text_8xl:   4.0rem;  /* 40px */
  --text_9xl:   4.8rem;  /* 48px */
  --text_10xl:  5.6rem;  /* 56px */
}

/* タブレット変数 */
@media (max-width: 1079px) {
  :root {
    --header_height:  80px;
  }
}

/* SP変数 */
@media (max-width: 599px) {
  :root {
    /* サイズ変数 */
    --header_height:  60px;
    --container_padding:  5vw;

    /* スペース変数（SP用調整 - 約75%） */
    --space_2xs:  3px;   /* 0.1875rem */
    --space_xs:   6px;   /* 0.375rem */
    --space_sm:   9px;   /* 0.5625rem */
    --space_md:   12px;  /* 0.75rem */
    --space_lg:   18px;  /* 1.125rem */
    --space_xl:   24px;  /* 1.5rem */
    --space_2xl:  30px;  /* 1.875rem */
    --space_3xl:  36px;  /* 2.25rem */
    --space_4xl:  48px;  /* 3rem */
    --space_5xl:  60px;  /* 3.75rem */
    --space_6xl:  72px;  /* 4.5rem */
    --space_7xl:  96px;  /* 6rem */
    
    /* フォントサイズ変数（SP用調整 - 約87%） */
    --text_2xs:   0.9rem;  /* 9px */
    --text_xs:    1.0rem;  /* 10px */
    --text_sm:    1.1rem;  /* 11px */
    --text_md:    1.2rem;  /* 12px */
    --text_lg:    1.4rem;  /* 14px - SPベースサイズ */

    /* 16pxとするための上書き調整 */
    --text_2xs:   1.6rem;  /* 9px */
    --text_xs:    1.6rem;  /* 10px */
    --text_sm:    1.6rem;  /* 11px */
    --text_md:    1.6rem;  /* 12px */
    --text_lg:    1.6rem;  /* 14px - SPベースサイズ */

    --text_xl:    1.6rem;  /* 16px */
    --text_2xl:   1.8rem;  /* 18px */
    --text_3xl:   2.0rem;  /* 20px */
    --text_4xl:   2.2rem;  /* 22px */
    --text_5xl:   2.4rem;  /* 24px */
    --text_6xl:   2.8rem;  /* 28px */
    --text_7xl:   3.2rem;  /* 32px */
    --text_8xl:   3.6rem;  /* 36px */
    --text_9xl:   4.2rem;  /* 42px */
    --text_10xl:  4.8rem;  /* 48px */
  }
}


/* -------------------------
  デバイス判定
------------------------- */
@media (max-width: 599px) {
  .pc {
    display: none !important;
  }
  .tablet:not(.sp) {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 1079px) {
  .tablet ~ .pc:not(.tablet) {
    display: none !important;
  }
  .sp:not(.tablet) {
    display: none !important;
  }
}
@media (min-width: 1080px) {
  .sp {
    display: none !important;
  }
  .tablet:not(.pc) {
    display: none !important;
  }
}
/* デバイスが縦長の向き */
@media (orientation: portrait) {
  .landscape {
    display: none !important;
  }
}
/* デバイスが横長の向き */
@media (orientation: landscape) {
  .portrait {
    display: none !important;
  }
}


/* -------------------------
  html body
------------------------- */
html {
  touch-action: manipulation;
}
body {
  font-family: var(--font_family_Noto_Sans);
  font-size: var(--text_lg);
  font-weight: normal;
  line-height: var(--line_height_lg);
  background: var(--color_base);
  color: var(--color_text);
  text-align: left;
  font-feature-settings: "palt";
  overscroll-behavior: none;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body * {
  letter-spacing: 0.15em;
}

/* -------------------------
  common
------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
span.br {
  display: inline-block;
}

h1, h2 {
  letter-spacing: 0.1em;
  line-height: var(--line_height_md);
}
h3, h4, h5, h6 {
  letter-spacing: 0.15em;
  line-height: var(--line_height_lg);
}
strong {
  line-height: 1;
  /* color: var(--color_accent); */
  font-size: 115%;
  border-bottom: solid 3px var(--color_accent);
}
@media (any-hover: hover) {
  a[href],button {
    transition: opacity 0.1s, color 0.1s, background-color 0.1s, scale 0.1s;
  }
  a[href]:hover,button:hover {
    transition: opacity 0.2s,color 0.2s, background-color 0.2s, scale 0.2s;
    opacity: 0.7;
  }
}

/* -------------------------
section
------------------------- */
.section {
  position: relative;
  width: 100%;
  padding: var(--space_5xl) 0;
}

.section__inner {
  position: relative;
  margin-left:  auto;
  margin-right: auto;
  max-width: var(--container_width);
  padding-left:  var(--container_padding);
  padding-right: var(--container_padding);
}

.section__title {
  color: var(--color_accent);
  font-size: 4.4rem;
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
  letter-spacing: 0.15em;
}

@media (max-width: 599px) {
  .section__title {
    font-size: clamp(2.8rem, 7.5vw, 3.8rem);
  }
}

.common__button-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 30px;
}

@media (max-width: 1079px) {
  .common__button-container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left:  auto;
    margin-right: auto;
  }
}

.common__button {
  position: relative;
  display: inline-block;
  min-width: 240px;
  background: var(--color_accent);
  border-radius: 120px;
  color: #fff;
  padding: 16px 30px;
  padding-right: 60px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.common__button:after {
  content: '';
  background: url('../img/icon_arrow.svg') center/contain no-repeat;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 28px;
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.common__button.icon_link:after {
  background-image: url('../img/icon_link.svg');
}

.common__button.icon_back:after {
  background-image: url('../img/icon_back.svg');
}


@media (max-width: 599px) {
  .common__button {
    padding: 12px 24px;
    padding-right: 45px;
    font-size: 1.5rem;
  }
  .common__button:after {
    right: 20px;
    width: 18px;
    height: 18px;
    opacity: 0.6;
  }
}



/* Utilities */
.text-center {
  text-align: center;
}

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

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