/*
Theme Name:  NIL INC WEBSITE.
Theme URI:  https://www.ni-l.co.jp
Description: 株式会社 nil のコーポレートサイト。
Author:  nil inc
Version:  1.0
Text Domain: nil-inc-website
Tested up to: 6.7
*/



:root {

  /* ----- Color ----- */
  --primary-base-color-code: #ffffff;
  --primary-base-color-rgb: 255 255 255;

  --secondary-base-color-code: #eeeeee;
  --secondary-base-color-rgb: 238 238 238;

  --main-color-code: #595857;
  --main-color-rgb: 89 88 87;

  --accent-color-code: #b94047;
  --accent-color-rgb: 185 64 71;


  /* Font Family */
  --noto-serif-jp: "Noto Serif JP", serif;
  --noto-sans-jp: "Noto Sans JP", sans-serif;
  --m-plus-rounded: "M PLUS Rounded 1c", sans-serif;

  /* Font Size */
  --font-size-tiny: 0.705rem;
  --font-size-small: 0.85rem;
  --font-size-normal: 1.075rem;
  --font-size-mid-normal: 1.375rem;
  --font-size-medium: 1.55rem;
  --font-size-large: 2.05rem;
  --font-size-xlarge: 2.55rem;

  /*  */
  --animation-duration-primary: 0.33s;
  --animation-duration: 0.275s;

  --cta-button-border-radius: 7.73px;

}

html {
  font-size: 18px;
  user-select: none;
}

body {
  letter-spacing: 0.065rem;
}

p, span {
  font-optical-sizing: auto;
  font-style: normal;
}

a {
  color: #0000EE;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

svg {
  aspect-ratio: 1 / 1;
}

hr {
  min-width: 1px;
  min-height: 1px;
  background-color: #000000;
}


summary {
  list-style-type: none;
}
/* Safariで表示されるデフォルトの三角形アイコンを消します */
summary::-webkit-details-marker {
  display: none;
}



.serif {
  font-family: var(--noto-serif-jp);
}

.sans-serif {
  font-family: var(--noto-sans-jp);
}



/* ▼Chrome・Safari・Opera用(※1：Edgeでも有効) */
::-webkit-input-placeholder {
  color: #777777;
}

/* ▼Firefox18以前用(※2) */
:-moz-placeholder {
  color: #777777;
}
/* ▼Firefox19以上用(※3) */
::-moz-placeholder {
  color: #777777; opacity: 1;
}

/* ▼CSS4標準(予定)の記述 */
::placeholder {
  color: #777777;
}

@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  :root {
    --eye-catch-width: 33.5%;
    --eye-catch-height: 100vh;

    --width-of-header: 75px;

    --primary-vertical-padding: 11.5vh;
    --primary-horizontal-padding: 5.95vw;

    --cta-button-padding-x: 15px;
    --cta-button-padding-y: 10.5px;


    --accent-hr-line-vertical-margin: 2.75px;
  }

  h2 {
    font-size: var(--font-size-medium);
  }

  h3 {
    font-size: var(--font-size-normal);
  }



  div.padded-x, section.padded-x {
    padding-right: var(--primary-horizontal-padding);
    padding-left: var(--primary-horizontal-padding);
  }

  div.padded-top {
    padding-top: var(--primary-vertical-padding);
  }

  div.padded-bottom {
    padding-bottom: var(--primary-vertical-padding);
  }

  section.padded-y-section {
    padding-top: 2.35rem;
    padding-bottom: 2.35rem;
  }


  .accent-hr-line {
    position: relative;
    margin-bottom: calc(var(--accent-hr-line-vertical-margin) * 2);
  }

  .accent-hr-line:after {
    content: "";
    display: block;

    position: absolute;
    bottom: calc(-1 * var(--accent-hr-line-vertical-margin));
    left: 0;

    width: 3.25vw;
    height: 1px;
    background-color: #000000;
  }


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

  /* -----  ----- */
  .header-container {
    width: var(--width-of-header);
    height: 100vh;

    background-color: rgb(var(--primary-base-color-rgb) / 0.775);

    padding-top: 6.5vh;
    padding-right: 10px;
    padding-bottom: 6.5vh;
    padding-left: 10px;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  /* -----  ----- */
  .content-wrapper {
    position: relative;

    width: calc(100% - var(--eye-catch-width));
    margin-left: auto;
    overflow-x: hidden;
  }

  .content-wrapper .floating-contact-button {
    position: fixed;
    top: 4.25%;
    right: 2.75%;

    width: 62.5px;

    border-radius: 50%;

    background-color: var(--accent-color-code);
    transition-duration: var(--animation-duration-primary);
    z-index: 1;
  }

  .content-wrapper .floating-contact-button:hover {
    filter: brightness(1.25);
  }


  /* -----  ----- */
  .footer-container {
    width: calc(100% - var(--eye-catch-width));
    margin-left: auto;
  }

}


@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  :root {
    --width-of-header: 45.5px;

    --eye-catch-width: calc(100vw - var(--width-of-header));
    --eye-catch-height: 42.5vh;


    --primary-vertical-padding: 2.5vh;
    --primary-horizontal-padding: 3.25vw;

    --cta-button-padding-x: 10px;
    --cta-button-padding-y: 7.5px;


    --accent-hr-line-vertical-margin: 2.75px;
  }

  h2 {
    font-size: calc(var(--font-size-mid-normal) - 0.175rem);
  }

  h3 {
    font-size: calc(var(--font-size-normal) - 0.125rem);
  }

  p, a, span {
    font-size: calc(var(--font-size-small) + 0.025rem);
  }


  div.padded-x, section.padded-x {
    padding-right: var(--primary-horizontal-padding);
    padding-left: var(--primary-horizontal-padding);
  }

  div.padded-top {
    padding-top: var(--primary-vertical-padding);
  }

  div.padded-bottom {
    padding-bottom: var(--primary-vertical-padding);
  }

  section.padded-y-section {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
  }


  .header-container {
    width: var(--width-of-header);
    
    position: relative;
    z-index: 2;
  }


  /* -----  ----- */
  .content-wrapper {
    position: relative;

    width: calc(100% - var(--width-of-header));
    margin-left: auto;
    overflow-x: hidden;
  }

  .content-wrapper .floating-contact-button {
    position: fixed;
    top: 4.25%;
    right: 2.75%;

    width: 52.5px;

    border-radius: 50%;

    background-color: var(--accent-color-code);
    transition-duration: var(--animation-duration-primary);
    z-index: 1;
  }

  .content-wrapper .floating-contact-button:hover {
    filter: brightness(1.25);
  }


  .footer-container {
    width: calc(100% - var(--width-of-header));
    margin-left: auto;
  }



  .accent-hr-line {
    position: relative;
    margin-bottom: calc(var(--accent-hr-line-vertical-margin) * 2);
  }

  .accent-hr-line:after {
    content: "";
    display: block;

    position: absolute;
    bottom: calc(-1 * var(--accent-hr-line-vertical-margin));
    left: 0;

    width: 4.5vw;
    height: 1px;
    background-color: #000000;
  }


}