@charset "UTF-8";


/* Property
====================================================== */

h1 img {
  width: 128px;
}

p {
  color: #4e5562;
}

.logo {
  width: 280px;
}

hr {
  border-top: 1px dashed #333;
  border-bottom: 1px dashed #FFF;
  margin: 20px 0;
}

.mascot img {
  max-width: 320px;
  margin-top: 30px;
}

ul {
  color: #666;
  list-style: none;
}


/* Logo mark
--------------------------------- */
.logo-mark img {
  width: 64px;
  height: 64px;
  margin-top: -28px;
  margin-right: 8px;
}


/* Shopping mark
--------------------------------- */
.shopping-mark img {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}


/* Intro
--------------------------------- */

.intro {
  max-width: 680px;
  text-indent: 1rem;
  background-color: #F4F4F4;
  border-radius: 18px;
  padding: 1rem;
}


/* www/sitemap.html
====================================================== */

.sitemap .main-color {
  background-color: #cdae79;
}

.sitemap .sub-color {
  background-color: #c682ce;
}

.sitemap .heading-text-color {
  background-color: #3a3021;
}

.sitemap .sub-text-color {
  background-color: #50443c;
}

.sitemap .footer-color {
  background-color: #222934;
}


/* Category
====================================================== */

.category .pictogram {
  width: 64px;
  margin-bottom: 1rem;
}

.category p {
  text-indent: 1rem;
}

/* 未訪問のリンク */
.category a:link {
  color: #FFF;
  text-decoration: none;
}

/* 訪問済みのリンク */
.category a:visited {
  color: #DDD;
}

/* マウスカーソルが乗った状態 */
.category a:hover {
  color: skyblue;
  text-decoration: underline;
}

/* 要素をクリックしてから離すまでの間 */
.category a:active {
  color: #FF0;
  text-decoration: underline;
}

.category ul li {
  line-height: 2;
}

.category ul li a {
  background-color: #5aabc4;
  padding: .2rem .8rem;
  border-radius: 16px;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  border: 0.1rem outset #ffda49;
  outline: 0.1rem solid khaki;
  box-shadow: 0 0 0 .1rem skyblue;
}

.category ul li a:hover {
  background-color: #87ceeb;
  padding: .2rem .8rem;
  border-radius: 16px;
  box-sizing: border-box;
  color: #FFF;
  text-decoration: none;
  border: 0.1rem outset #c3ea88;
  outline: 0.1rem solid #eab988;
  box-shadow: 0 0 0 .1rem skyblue;
}


/* 
====================================================== */





/* 
====================================================== */





/* Footer
====================================================== */

.footer h6 {
  text-align: left;
}

.footer address p {
  margin-bottom: .2rem;
  color: #FFF;
}


/* 見出し装飾
====================================================== */

/* テキストの先頭にサークル2個を重ねる
--------------------------------- */

.h-deco-2circles {
  position: relative;
  padding: 0 .5em .5em 2em;
  border-bottom: 1px solid #CCC;
}

.h-deco-2circles::before,
.h-deco-2circles::after {
  position: absolute;
  content: '';
  border-radius: 100%
}

.h-deco-2circles::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: rgba(150, 150, 150, .5);
}

.h-deco-2circles::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: rgba(210, 210, 210, .5);
}

/* 背景をブラしたデザイン (Shake)
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */

/* h-deco-shake（yellow color）
--------------------------------- */

.h-deco-shake {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
  margin: 1rem;
}

.h-deco-shake:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #444220;
}


/* 
====================================================== */