@charset "UTF-8";



:root {
  --init_font-family_icons:      "Font Awesome 5 Pro", "Font Awesome 5 Brands", FontAwesome;
  --init_font-family_code:       Menlo, Monaco, Consolas, 'Courier New', monospace;
  --init_font-family_sans-serif: "Noto Sans JP", "ヒラギノ角ゴシック W3", "ヒラギノ角ゴシック", "游ゴシック体", "游ゴシック", "メイリオ", "ＭＳ Ｐゴシック", sans-serif, var(--init_font-family_icons);
  --init_font-family_serif:      "ヒラギノ明朝 W3", "ヒラギノ明朝", "游明朝体", "游明朝", "ＭＳ Ｐ明朝", serif, var(--init_font-family_icons);

  --init_font-size: 15px;
  --init_line-height: 1.5;

  --init_section-spacing: 4rem;
  --init_header-spacing: calc( var(--init_section-spacing) / 4 );
}



/*
  Elements
*/

html {
  font: normal normal 400 var(--init_font-size)/var(--init_line-height) var(--init_font-family_sans-serif);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}



body {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}



header {
  margin: 0 0 var(--init_header-spacing) 0;
}



h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: var(--init_line-height);
  margin: 0 0 0.75em;
}

h1 { font-size: 2.0rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.50rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }



section {
  margin: 0 0 var(--init_section-spacing) 0;
}

* + section {

}

section > :last-child {
  margin-bottom: 0;
}



div {
  position: relative;
}



p {
  margin: 0 0 1em 0;
}



em {
  font-style: normal;
  font-weight: bold;
}



i {
  font-style: normal;
}



hr {
  display: block;
  height: 0;
  border: none;
  border-bottom: 1px solid #000000;
  margin: calc(var(--init_line-height) * 1em) auto;
}



blockquote {
  background: hsla(0, 0%, 95%);
  padding: 1em;
  margin: 0 0 1em 0;
}



figure {
  margin: 1em;
}



figcaption {
  font-size: 0.9em;
}



img {
  max-width: 100%;
}


/* 
table {
  margin: 1em 0;
  border: 1px solid #000;
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid #000;
}

table tr > :not(:last-child) {
  border-right: 1px solid #000;
}

th, td {
  padding: 0.5em;
} */



ul, ol {
  margin: 1em 0;
  padding: 0 0 0 2em;
}

li {
  margin: 0.5em 0 0 0;
}

li:first-child {
  margin-top: 0;
}

li > :last-child {
  margin-bottom: 0;
}



dl {
  margin: 1em 0;
  padding: 0 0 0 1em;
}

dt {
  margin: 0 0 0.5em 0;
  font-weight: bold;
}

dd {
  margin: 0 0 1em 0;
}



input, textarea, select, button {
  font: normal normal 400 var(--init_font-size)/var(--init_line-height) var(--init_font-family_sans-serif);
  box-sizing: border-box;
}

button {
  cursor: pointer;
}



address {
  font-style: normal;
}

pre {
  font-family: var(--init_font-family_code);
  padding: 1em;
  margin: 1em 0;
  white-space: pre-wrap;
  /* overflow-wrap: anywhere; */
}

code {
  font-family: var(--init_font-family_code);
  display: inline-block;
  padding: 0.25em 0.5em;
  background: hsla(0, 0%, 92%, 1);
}

samp, kbd, var {
  font-family: var(--init_font-family_code);
}



/*
  Classes
*/

.visually-hidden { /* hide for DOM outline */
  display: none;
}



.as-grid {
  display: grid;
  margin: 0;
  padding: 0;
}

.as-grid > * > :last-child {
  margin-bottom: 0;
}

.as-grid:is(ul, ol) {
  list-style: none;
}

.as-grid > li,
.as-grid :is(dt, dd) {
  margin: 0;
  padding:0;
}



.as-flex {
  display: flex;
  margin: 0;
  padding: 0;
}

.as-flex > * > :last-child {
  margin-bottom: 0;
}

.as-flex:is(ul, ol) {
  list-style: none;
}

.as-flex > li,
.as-flex :is(dt, dd) {
  margin: 0;
  padding: 0;
}



:is(.as-grid, .as-flex) {
  box-sizing: border-box;
}

:is(.as-grid, .as-flex) > * {
  margin: 0;
}



* > :not(:is(header, h2, h3, h4, h5, h6)):last-child {
  margin-bottom: 0;
}