@layer reset, base, utilities;

/* デザイントークン（色・余白・フォントの出所） */
:root {
  --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Arial, sans-serif;
  --font-size: 1rem;
  --line-height: 1.6;
  
  --c-white: #fff;
  --c-black: #333;
  --c-blue: #71c6d4;
  --c-red: #DC143C;
  --c-green: #108678;
  --c-yellow: #F6C85F;
  --c-orange: #f57b56;
  --c-gray: #ccc;
  --c-l-gray: #f7f7f7;
  --c-bg: #FAFBF8;
  --c-text: #283238;
  --c-link: #176D79;
  --c-btn: #D97706;

  --c-border: var(--color-gray);
  --c-bg-box: var(--color-l-gray);

  --fs10: 0.625rem;
  --fs11: 0.6875rem;
  --fs12: 0.75rem;
  --fs13: 0.8125rem;
  --fs14: 0.875rem;
  --fs15: 0.9375rem;
  --fs16: 1.0rem;
  --fs17: 1.0625rem;
  --fs18: 1.125rem;
  --fs20: 1.25rem;
  --fs22: 1.375rem;
  --fs24: 1.5rem;
  --fs28: 1.75rem;
  --fs30: 1.875rem;
  --fs32: 2.0rem;
  --fs36: 2.25rem;
  --fs40: 2.5rem;
  --fs50: 3.125rem;
  --fs60: 3.75rem;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; border: none; }
  ul, ol { list-style: none; margin: 0; padding: 0 }
  table { border-collapse: collapse; border-spacing: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-base);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
  }
  .block {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto 50px;
  }
  a { color: var(--color-accent); text-decoration: none;}
  h1, h2, h3 { line-height: 1.2; }
  .mb20 { margin-bottom: 20px; }
}




.sp { 
  display: none;
  
  @media (max-width: 430px) {
    & { display: block; }
  }
}

.pc {
  @media (max-width: 430px) {
    & { display: none; }
  }
}
.btn {
  position: relative;
  display: block;
  font-size: 1.0rem;
  border: 1px solid var(--color-blue);
  background: var(--color-blue);
  color: var(--color-white);
  padding: 10px 0 12px 20px;
  border-radius: 8px;
  width: 300px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 10px;
    height: 10px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    transform: translateY(-50%) rotate(45deg);
  }
  
  &:hover {
    background: var(--color-white);
    color: var(--color-blue);
    
    &:after {
	  right: 1.4rem;
    }
  }
  
  @media (max-width: 430px) {
    & {
	  font-size: 0.875rem;
	  width: 100%;
	  padding: 5px 0 7px 20px;
	  
	  &:after {
		right: 20px;
	  }
	}
  }
}