@charset "UTF-8";

/* =========================================
   I-IRO site only
   /common/site-iro.css
========================================= */

/* =========================
   Hero
========================= */
#hero {
  width: 100%;
  height: 24rem;
  background: #ffffff url(/common/images/suisai-rainbow.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 1070px) {
  #hero {
    height: 40rem;
  }
}

/* =========================
   Home
========================= */
#home-info {
  border: 2px solid #60caad;
}

#home-info h2 {
  margin-top: 0;
  padding: 0.5rem 1.5rem;
  color: #ffffff;
  text-align: left;
  background: #60caad;
  border: none;
}

#home-info > div {
  padding: 0 1.5rem;
}

.home-content section {
  margin: 0 2rem 4rem;
}

.home-content section h2 {
  margin: 0 0 1em;
  font-weight: 400;
  text-align: center;
}

#home-concept {
  padding: 2rem 1rem 0.5rem;
  text-align: center;
  border: 3px solid #f7f7f7;
}

#home-concept h2 {
  margin: 0 0 2rem;
  color: #60caad;
}

#home-concept p {
  margin: 0 0 1em;
}

#home-news dt {
  font-size: 1.4rem;
  font-weight: 700;
}

#home-news dd {
  margin: 0 0 5px;
  padding: 0 0 5px;
  font-size: 1.4rem;
  border-bottom: 1px dotted #dddddd;
}

#home-category h2 {
  margin: 1em 0 0.5em;
  text-align: left;
}

#home-category > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0 1.5rem;
  background: #ffffff;
  box-shadow: 1px 1px 4px #dddddd;
}

#home-category div img {
  display: block;
  width: 30%;
  padding: 1rem;
}

#home-category div div {
  width: 70%;
  padding: 1rem 1rem 1rem 0;
  text-align: left;
}

#home-category div h3 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  border-bottom: 1px solid #666666;
}

#home-category div li {
  margin: 2px 0 0;
  font-size: 1.5rem;
}

#home-category div li a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#home-category div li:last-of-type a {
  text-decoration: underline;
}

#home-category div li a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 600px) {
  #home-category > div {
    align-items: center;
  }

  #home-category div img {
    width: 16rem;
  }

  #home-category div div {
    flex: 1;
    width: auto;
    padding: 1rem 2rem 1rem 1rem;
  }
}

/* =========================
   Link Box
========================= */
.link-box {
  display: block;
  width: 16rem;
  margin: 1em auto 2em;
  padding: 5px 0;
  color: #60caad;
  text-align: center;
  text-decoration: none;
  border: 1px solid #60caad;
  border-radius: 20px;
}

.link-box:hover {
  color: #ffffff;
  background: #60caad;
}