@charset "UTF-8";
#container {
  background: #FCF3E8;
}
#container.top {
  background: url(../images/top/top-bg.gif) no-repeat 0 90px #FCF3E8;
}
#container.top .titleArea {
  width: 710px;
  margin: 0 auto 10px auto;
}
#container.top .titleArea h1 {
  text-align: center;
  margin-bottom: 10px;
}
#container.top #main {
  width: 820px;
  margin: 0 auto 20px auto;
}
#container.top #main .main-wrap {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  font-size: 90%;
}
#container.top #main .main-wrap .box-l, #container.top #main .main-wrap .box-r {
  width: 400px;
}
#container.top .box {
  margin-bottom: 20px;
  width: 400px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0px 12px 12px -6px rgba(0, 0, 0, .5);
  transition: all 0.2s ease-in-out;
}
#container.top .box.last {
  margin-bottom: 0;
}
#container.top .box:hover {
  box-shadow: 2px 6px 5px -3px rgba(0, 0, 0, .5);
}
#container.top .box.locabo {
  width: 820px;
}

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

#container.top .button {
  text-align: center;
}
#container.top .button a {
  display: block;
  margin: 10px 50px 0;
  padding: 5px 10px;
  color: #fff;
  background: #E63178;
  text-align: center;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .button a:link, #container.top .button a:visited, #container.top .button a:active {
  color: #fff;
}
#container.top .button a:hover {
  color: #fff;
  text-decoration: none;
  background: #F57DA7;
}

/* link
------------------------------------------------ */

#container.top #main .box li {
  position: relative;
  padding: 2px 0 2px 2em;
  border-bottom: 2px dotted #F1BE83;
}
#container.top #main .box li::before, #container.top #main .box li::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
#container.top #main .box li::before {
  top: .5em;
  left: 0.5em;
  z-index: 2;
  width: 14px;
  height: 14px;
  background: rgba(247, 140, 45, 0.5);
}
#container.top #main .box li:last-child {
  padding-bottom: 0;
}

/* .news
------------------------------------------------ */

#container.top .news .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: url(../images/top/top-1-bg.gif) no-repeat 50% 50% #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .news h2 {
  margin-top: -15px;
  padding: 0;
  text-align: center;
}

/* .joho
------------------------------------------------ */

#container.top .joho .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: url(../images/top/top-2-bg.gif) no-repeat 50% 50% #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .joho h2 {
  margin-top: -15px;
  padding: 0;
  text-align: center;
}
#container.top .joho h3 {
  margin: 5px 1em;
  font-weight: bold;
  color: #6B3B30;
}

/* .dosuru
------------------------------------------------ */

#container.top .dosuru .wrap {
  padding: 6px 5px;
  border: 1px solid #f8bfdf;
  background: #FAFBE2;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .dosuru h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* .eiyoshi
------------------------------------------------ */

#container.top .eiyoshi .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: #FFE65F;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .eiyoshi h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* .data
------------------------------------------------ */

#container.top .data .wrap {
  padding: 6px 5px;
  border: 1px solid #f8bfdf;
  background: #FFF79F;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .data h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* enquete-2
------------------------------------------------ */

#container.top .enquete-2 a.wrap {
  display: block;
  padding: 6px 5px;
  border: 1px solid #f8bfdf;
  background: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .enquete-2 h2 {
  text-align: center;
}
#container.top .enquete-2 .text {
  padding: 5px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: url(../images/top/top-6-2.gif) no-repeat 95% 95% #FFF3BA;
}

/* .enquete-1
------------------------------------------------ */

#container.top .enquete-1 .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: url(../images/top/top-7-bg.gif) no-repeat 50% 50% #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .enquete-1 h2 {
  margin-top: -15px;
  padding: 0;
  text-align: center;
}

/* .link
------------------------------------------------ */

#container.top .link .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: url(../images/top/top-8-bg.gif) no-repeat 50% 50% #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .link h2 {
  margin-top: -15px;
  padding: 0;
  text-align: center;
}

/* panel
------------------------------------------------ */

#container.top .panel .wrap {
  padding: 6px;
  border: 1px solid #f8bfdf;
  background: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#container.top .panel h2 {
  text-align: center;
  margin-bottom: 10px;
}
#container.top .panel p {
  margin: 0 20px 10px;
}
#container.top .panel h3.vol1 {
  margin: 0 50px 10px;
  background: #E96B9B;
  color: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
}
#container.top .panel h3.vol2 {
  margin: 0 50px 10px;
  background: #EF525A;
  color: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
}
#container.top .panel .flex {
  margin-bottom: 10px;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari */
  justify-content: space-around;
}

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

#container.top .support {
  text-align: right;
}

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

#container.top .hrg {
  margin: 0 20px 20px;
}
#container.top .hrg ul {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-justify-content: space-around;
  /* Safari */
  justify-content: space-around;
}
#container.top .hrg ul li {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0px 12px 12px -6px rgba(0, 0, 0, .5);
  transition: all 0.2s ease-in-out;
}
#container.top .hrg ul li:hover {
  box-shadow: 2px 6px 5px -3px rgba(0, 0, 0, .5);
}