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

/* Google Fonts */
@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');

/* -------------------------
  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;


  /* カラー変数 */
  --color_base:           #FFFFFF;
  --color_main:           #D8DAE6;
  --color_accent:         #D8000B;
  --color_accentLight:    #E72418;
  --color_dark:           #333333;
  --color_text:           #231815;
  --color_textLight:      #918C8A;


  /* サイズ変数 */
  --basic_pc_size: 1440;
  --basic_sp_size: 390;
  --vw: calc(100vw / var(--basic_pc_size));
  --vw_sp: calc(100vw / var(--basic_sp_size));
  /* --container_padding:  50px; */
  --container_padding:  clamp(30px, calc(80 * var(--vw)), 80px);
  --container_width: calc(var(--content_width_full) + (var(--container_padding) * 2));
  --sidebar_width:  200px;
  /* --content_width: 1040px; */
  --content_width: calc(var(--container_padding) + 1280px);
  --content_width_full: calc(var(--sidebar_width) + var(--content_width));
  --header_height:  80px;
}

/* タブレット変数 */
@media (max-width: 1023px) {
  :root {
    /* サイズ変数 */
    --container_padding:  30px;
  }
}

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


/* -------------------------
  デバイス判定
------------------------- */
@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .tablet:not(.sp) {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet ~ .pc:not(.tablet) {
    display: none !important;
  }
  .sp:not(.tablet) {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .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: 1.6rem;
  font-weight: normal;
  line-height: 1.7;
  background: var(--color_base);
  color: var(--color_text);
  text-align: left;
  font-feature-settings: "palt";
  overscroll-behavior: none;
  overflow-x: hidden;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
}
body * {
  letter-spacing: 0.15em;
}

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

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.2em;
  line-height: 1.7;
}
@media (any-hover: hover) {
  a[href] {
    transition: opacity 0.1s;
  }
  a[href]:hover {
    transition: opacity 0.2s;
    opacity: 0.7;
  }
}

.external-link {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  background: url(../img/external-link_bk.svg) center / contain no-repeat;
  margin-left: 0.15em;
  opacity: 0.8;
}

/* -------------------------
  image-zoom
------------------------- */
.image-zoom {
  display: block;
  overflow: hidden;
  position: relative;
}

.image-zoom img {
  transition: transform 0.3s ease;
  transform: scale(1);
  width: 100%;
  height: auto;
}

@media (any-hover: hover) {
  a.image-zoom {
    transition: opacity 0.1s;
  }
  a.image-zoom:hover {
    transition: opacity 0.2s;
    opacity: 0.9;
  }
  .image-zoom:hover img {
    transform: scale(1.03);
  }
}

/* -------------------------
section
------------------------- */
.section {
  position: relative;
  width: 100%;
  padding: 64px 0;
}

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

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

.button-arrow {
  display: inline-flex;
  align-items: center;
}

.button-arrow::after {
  content: '';
  background: url(../img/arrow.svg) center / contain no-repeat;
  background-size: 16px;
  width:  36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color_accentLight);
  transition: background-color 0.3s ease;
  margin-left: 12px;
  transition: 0.3s cubic-bezier(.66,2.15,.64,1);
}

.button-arrow.button-size24::after {
  background-size: 12px;
  width:  24px;
  height: 24px;
}

.button-arrow.button-size36::after {
  background-size: 16px;
  width:  36px;
  height: 36px;
}

.button-arrow.button-size48::after {
  background-size: 20px;
  width:  48px;
  height: 48px;
}

.button-arrow.button-size60::after {
  background-size: 24px;
  width:  60px;
  height: 60px;
}

.button-arrow.button-wh::after {
  background-image: url(../img/arrow_red.svg);
  background-color: hsla(0, 0%, 100%, 0.3);
}

.button-arrow.button-bk::after {
  background-color: var(--color_dark);
}

.button-arrow.button-external::after {
  background-image: url(../img/external-link.svg);
}

.button-arrow.button-external.wh::after {
  background-image: url(../img/external-link_red.svg);
}

@media (any-hover: hover) {
  a:hover.button-arrow::after,
  a:hover .button-arrow::after,
  button:hover.button-arrow::after,
  button:hover .button-arrow::after {
    scale: 1.3;
  }
}

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

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

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