/* -------------------------------------------------------------------------- */
/* # 1.Document Setup */
/* -------------------------------------------------------------------------- */
:root {
  --color-text        : #333333;
  --color-main        : #a2c8d7;
  --color-main_light  : #dbe8ee;
  --color-main_dark   : #4a8da7;
  --color-red_light   : #c65c69; /* hover */
  --color-blue_light  : #0085d0; /* 新着情報 日付 */
  --color-green_light : #51b4a9; /* 新着情報 見出し */
  --color-gray        : #888;
  --color-gray_light  : #dddddd;    /* 新着情報 破線 */ /* dddddd */
  --font-size_ll      : 1.5em;   /* 24px */
  --font-size_l       : 1.25em;  /* 20px */
  --font-size_base    : 1.5rem;     /* 16px */
  --font-size_s       : .875em;  /* 14px */
  --font-size_ss      : .625em;  /* 10px */
}

// font
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../font/NotoSansJP-Regular.woff2') format('woff2'),
}
/*
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('../font/NotoSansJP-Bold.woff2') format('woff2'),
}
*/
html {
	/* overflow-x: hidden; */ /* enable */
	font-size: 62.5%; /* 1rem = 10px */
}

body {
	/* overflow-x: hidden; */ /* enable */
	box-sizing: border-box;
	/*font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: -0.015em;
	text-align: left;
  -webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	word-break: break-word;
	word-wrap: break-word;
}

/* -------------------------------------------------------------------------- */
/* # 2.Body */
/* -------------------------------------------------------------------------- */
body {
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
	color: var(--color-text);
	font-size: 1.5rem;
  line-height: 1.5; /* 1.5 */
}

body.no-scroll {
  overflow: hidden;
  position: fixed;
}

.body-warpper {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* min-height: 100vh; */ /* enable */
  /* overflow-x: hidden; */ /* enable */
  background-color: white;
}

@media only screen and (min-width: 768px) {
  .body-warpper {
    width: 76.8rem;
    /* box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .4); */ /* enable */
  }
}

/* -------------------------------------------------------------------------- */
/* # 3.Header */
/* -------------------------------------------------------------------------- */
/* ## Base */
header * {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: initial;
  color: initial;
  font-weight: initial;
  font-size: initial;
  line-height: 1;
  text-shadow: initial;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  width: 100%;
  height: 6rem;
  padding: 0 2rem;
  border-bottom: .1rem var(--color-gray_light) solid;
  box-shadow: 0 .2rem .2rem 0 rgba(0, 0, 0, .2);
  background-color: white;
}

@media only screen and (min-width: 768px) {
  header {
    position: static;
    height: 5.5rem;
    border-bottom: 1.5rem var(--color-main_dark) solid;
    box-shadow: none;
  }
}

/* ## Site ID */
.header-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

#siteid > img {
  width: 20rem;
}

#shiruporuto-logo > img {
  width: 11rem;
}

@media only screen and (min-width: 768px) {
  .header-logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
 }

  #siteid > img {
    width: auto;
  }

  #shiruporuto-logo > img {
    width: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* # 4.Main */
/* -------------------------------------------------------------------------- */
/* ## .main-container */
.main-container {
  /* flex: 1; */ /* enable */
  padding-top: 6rem;
}

@media only screen and (min-width: 768px) {
  .main-container {
    display: flex;
    padding-top: 0;
  }
}

/* ## Main */
main {
  width: 100%;
  padding: 0 2rem 2rem; /* 2rem 2rem 2rem */
}

@media only screen and (min-width: 768px) {
  main {
    flex-grow: 1;
    width: auto;
  }
}

/* ## aside */
aside {
  width: 100%;
  padding: 0 2rem 2rem;
}

@media only screen and (min-width: 768px) {
  aside {
    padding: 0 0 2rem; /* 2rem 0 2rem */
  }

  aside.front {
    width: 24rem;
    margin-right: 2rem;
  }
  aside.page {
    width: 16rem;
    background: var(--color-main_light);
  }
}

/* -------------------------------------------------------------------------- */
/* # 5.Footer */
/* -------------------------------------------------------------------------- */
/* ## Base */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem; /* 3rem */
  padding-top: .4rem; /* delete */
  background-color: var(--color-main_dark);
  color: white;
  font-size: 1rem; /* 1.25rem */
  line-height: 1;
}

footer p {
  margin: 0;
  line-height: 0;
}

footer img {
  display: none;
}

@media only screen and (min-width: 768px) {
  footer {
    justify-content: flex-end;
    position: relative;
    padding-right: 1rem; /* 2rem */
  }

  footer img {
    display: block;
    position: absolute;
    top: -1.3rem;
    left: 5rem; /* 6rem */
    width: auto;
    object-fit: none;
  }
}

/* -------------------------------------------------------------------------- */
/* # 6.Navigate */
/* -------------------------------------------------------------------------- */
/* ## Breadcrumb */
#breadcrumb {
  display: none;
}

@media only screen and (min-width: 768px) {
  #breadcrumb {
    display: block;
    margin-bottom: 2rem;
    font-size: var(--font-size_s);
  }

  #breadcrumb nav ul {
    display: flex;
    padding: 0;
    list-style-type: none;
  }

  #breadcrumb nav li {
    overflow: hidden;
    max-width: 15em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

  #breadcrumb nav li::after {
    margin-left: 1em;
    margin-right: 1em;
    font-size: .8em;
    content: '＞';
  }

  #breadcrumb nav li:last-child::after {
    margin-right: 0;
    content: '';
  }
}

/* ## Side menu */
#sidemenu {
  display: none;
}

@media only screen and (min-width: 768px) {
  #sidemenu {
    display: block;
  }

  /* ### bar */
  #sidemenu .bar {
    width: 100%;
    height: 1rem;
    background-color: var(--color-main);
  }

  /* ### Navigation base */
  #sidenav ul {
    display: block;
    margin-top: 1rem;
    padding: 0;
    list-style-type: none;
  }

  #sidenav li {
    margin-bottom: 1rem;
  }


  #sidenav a:hover {
    text-decoration: none;
  }

  /* ### Navigation first depth */
  #sidenav > ul > li > a {
    display: block;
    overflow: hidden;
    width: 160px;
    height: 34px;
    text-indent: -9999px;
    background: url(../img/page/pic-gnav.png) no-repeat;
  }

  .front #sidenav > ul > li > a {
    width: 240px;
    height: 36px;
    background: url(../img/front/pic-gnav.png) no-repeat;
  }

  .front #sidenav > ul > li:nth-child(1) > a[aria-current='page'] { background-position: 0        -72px; }

  .front #sidenav > ul > li:nth-child(2) > a                      { background-position: -240px     0; }
  .front #sidenav > ul > li:nth-child(2) > a:hover                { background-position: -240px   -36px; }

  .front #sidenav > ul > li:nth-child(3) > a                      { background-position: -480px     0;   }
  .front #sidenav > ul > li:nth-child(3) > a:hover                { background-position: -480px   -36px; }

  .front #sidenav > ul > li:nth-child(4) > a                      { background-position: -720px     0;   }
  .front #sidenav > ul > li:nth-child(4) > a:hover                { background-position: -720px   -36px; }

  .front #sidenav > ul > li:nth-child(5) > a                      { background-position: -1200px    0;   }
  .front #sidenav > ul > li:nth-child(5) > a:hover                { background-position: -1200px  -36px; }

  .front #sidenav > ul > li:nth-child(6) > a                      { background-position: -1440px    0;   }
  .front #sidenav > ul > li:nth-child(6) > a:hover                { background-position: -1440px  -36px; }

  .front #sidenav > ul > li:nth-child(7) > a                      { background-position: -1680px   0;   }
  .front #sidenav > ul > li:nth-child(7) > a:hover                { background-position: -1680px -36px; }

  .page #sidenav > ul > li > a {
    width: 160px;
    height: 34px;
    background: url(../img/page/pic-gnav.png) no-repeat;
  }

  .page #sidenav > ul > li:nth-child(1) > a                      { background-position: 0         0;   }
  .page #sidenav > ul > li:nth-child(1) > a:hover                { background-position: 0       -34px; }
  .page #sidenav > ul > li:nth-child(1) > a[aria-current='page'] { background-position: 0       -68px; }

  .page #sidenav > ul > li:nth-child(2) > a                      { background-position: -160px    0; }
  .page #sidenav > ul > li:nth-child(2) > a:hover                { background-position: -160px  -34px; }
  .page #sidenav > ul > li:nth-child(2) > a[aria-current='page'] { background-position: -160px  -68px; }

  .page #sidenav > ul > li:nth-child(3) > a                      { background-position: -320px    0;   }
  .page #sidenav > ul > li:nth-child(3) > a:hover                { background-position: -320px  -34px; }
  .page #sidenav > ul > li:nth-child(3) > a[aria-current='page'] { background-position: -320px  -68px; }

  .page #sidenav > ul > li:nth-child(4) > a                      { background-position: -480px    0;   }
  .page #sidenav > ul > li:nth-child(4) > a:hover                { background-position: -480px  -34px; }
  .page #sidenav > ul > li:nth-child(4) > a[aria-current='page'] { background-position: -480px  -68px; }

  .page #sidenav > ul > li:nth-child(5) > a                      { background-position: -800px    0;   }
  .page #sidenav > ul > li:nth-child(5) > a:hover                { background-position: -800px  -34px; }
  .page #sidenav > ul > li:nth-child(5) > a[aria-current='page'] { background-position: -800px  -68px; }

  .page #sidenav > ul > li:nth-child(6) > a                      { background-position: -960px    0;   }
  .page #sidenav > ul > li:nth-child(6) > a:hover                { background-position: -960px  -34px; }
  .page #sidenav > ul > li:nth-child(6) > a[aria-current='page'] { background-position: -960px  -68px; }

  .page #sidenav > ul > li:nth-child(7) > a                      { background-position: -1120px   0;   }
  .page #sidenav > ul > li:nth-child(7) > a:hover                { background-position: -1120px -34px; }
  .page #sidenav > ul > li:nth-child(7) > a[aria-current='page'] { background-position: -1120px -68px; }

  /* ### Navigation second depth */
  .page #sidenav > ul > li > ul { /* delete */
    margin: 0;
  }

  .page #sidenav > ul > li > ul > li { /* delete */
    margin-bottom: .25em;
  }

  .page #sidenav > ul > li > ul > li:last-child { /* delete */
    margin-bottom: .5em;
  }

  .page #sidenav > ul > li > ul > li > a {
    position: relative;
    padding-left: 1.75em;
    color: var(--color-main_dark);
    font-size: .75em;
    font-weight: bold;
    
  }

  .page #sidenav > ul > li > ul > li > a::before {
    position: absolute;
    top: 0;
    left: .8rem;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: .5rem 0 .5rem .7rem;
    border-color: transparent transparent transparent var(--color-main_dark);
    content: '';
  }

  .page #sidenav > ul > li > ul > li > a[aria-current='page'] {
    color: var(--color-red_light);
  }

  .page #sidenav > ul > li > ul > li > a[aria-current='page']::before {
    border-color: transparent transparent transparent var(--color-red_light);
  }
}

/* ## Menu button */
#menu-btn {
  display: block;
	position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: .6rem;
  background-color: var(--color-main_dark);
}

#menu-btn > i {
	position: absolute;
	top: 1.8rem;
	left: 50%;
	width: 2rem;
	height: .4rem;
	margin-left: -1rem;
  border-radius: .2rem;
	background-color: white;
}

#menu-btn > i::before,
#menu-btn > i::after {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2rem;
	height: .4rem;
	margin-left: -1rem;
  border-radius: .2rem;
	background-color: white;
	content: '';
	transition: .3s;
}

#menu-btn > i::before {
  margin-top: -.7rem;
}

#menu-btn > i::after {
  margin-top: .7rem;
}

#menu-btn.closed > i {
	background-color: transparent;
}

#menu-btn.closed > i::before,
#menu-btn.closed > i::after {
	margin-top: 0;
}

#menu-btn.closed > i::before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

#menu-btn.closed > i::after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

@media only screen and (min-width: 768px) {
  #menu-btn {
    display: none;
  }
}

/* ##  Mobile menu */
/* ### Base */
#mobi-menu {
  display: none;
	position: fixed;
  z-index: 110;
	top: 6rem;
	left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2rem;
  padding-bottom: 5rem;
  overflow-y: scroll;
  border-radius: 0 0 2rem 2rem;
  box-shadow: 0 .4rem .4rem 0 rgba(0, 0, 0, .2);
  background-color: white;
  -webkit-overflow-scrolling: touch;
}

#mobi-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  line-height: 1;
}

#mobi-menu nav li {
  margin: 0;
  border-top: 1px var(--color-gray_light) dashed;
}

#mobi-menu nav > ul > li:last-child {
  border-bottom: 1px var(--color-gray_light) dashed;
}

#mobi-menu nav a {
  display: flex;
  align-items: center;
  height: 4em;
  padding-right: 1em;
}

#mobi-menu nav a::before {
  display: block;
  margin-right: 1em;
}

/* ### First depth */
#mobi-menu nav > ul > li > a {
  padding-left: 1em;
}

#mobi-menu nav > ul > li > a::before {
  width: 20px;
  height: 20px;
  content: url('../img/i-02.png');
}

#mobi-menu nav > ul > li:first-child > a::after {
  width: 39px;
  height: 26px;
  margin-left: 1em;
  content: url('../img/pic-home.png');
}


/* ### Second depth */
#mobi-menu nav > ul > li > ul > li > a {
  position: relative;
  padding-left: 4em;
}

#mobi-menu nav > ul > li > ul > li > a::before {
  position: absolute;
  top: 0;
  left: 3.8rem;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: .5rem 0 .5rem .7rem;
  border-color: transparent transparent transparent var(--color-main_dark);
  content: '';
}

/* ## Mobile background */
#mobi-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(4px) brightness(.6);
}

#mobi-bg.on {
  display: block;
  backdrop-filter: blur(4px) brightness(.6);
}