:root {
  --radius: 8px;
  --text-size-main:16px;
  --text-size-small:0.8rem;

  --accent-color-main: #b88a3e;
  --accent-color-soft: #f5ecd9;

  --background-color-main: #9d9d9d;
  --background-color-white: #ffffff;
  --background-color-white-300: #fdfcfa;
  --background-color-gray-100: #F3F5F5;
  --font-color-main: #1c1c1c;
  --font-color-muted: #6b6b6b;
  --font-color-subtle: #999;
  --font-color-white: #FFFFFF;
  --font-color-gray: #868686;
  --font-color-red: #C13832;
  --font-color-black-400: #434343;
  --border-color-main: #ececec;
  --border-color-strong: #d8d8d8;
  --link-color: #0a5cb8;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: (var(--text-size-main));
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--font-color-main);
  background: var(--background-color-white-300);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*navbar*/
.navbar{

    --bs-navbar-hover-color: var(--accent-color-main);
    .navbar-brand img{
        width: 300px;
    }

    @media (min-width: 1200px) {
        #container-navbar{
            max-width: 70vw;
        }
    }

    @media (max-width: 768px) {
        .navbar-brand img{
            width: 200px;
        }
    }
}

/*main*/
main {

   background-color:var(--background-color-main);
   height: 100%;

    /*content*/
    .container-content{
        max-width:1200px;
        background-color: var(--background-color-white-300);
        box-shadow:20px 0 20px -20px rgba(0, 0, 0, 0.15),-20px 0 20px -20px rgba(0, 0, 0, 0.15);
        padding: 1.5rem 3rem;
    }

    @media (max-width: 768px) {
        .container-content{
            width:100%;
            padding: 0.5rem 0.1rem;
        }
    }
}

/*footer*/
footer {
    height: 2rem;

    small{
        color: var(--font-color-gray);
    }
}

/* breadcrumb */
nav.breadcrumb {
  font-size: var(--text-size-small);
  color: var(--font-color-subtle);
  letter-spacing: 0.02em;
}
nav.breadcrumb a {
  color: var(--font-color-muted);
  text-decoration: none;
}
nav.breadcrumb a:hover {
  color: var(--accent-color-main);
  text-decoration: underline;
}
nav.breadcrumb .sep {
  margin: 0 8px;
  color: var(--font-color-subtle);
}


/* others */
h2 {
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-bottom: 1.5px solid var(--border-color-main);
}


ul{
    padding:0;
}

li::marker { color: var(--accent-color-main); }

a {
    color: inherit;
    transition: color 0.15s ease;
    text-decoration: none;
}

a:hover { color: var(--accent-color-main); }

.link {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}