* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

header {
  background: rgba(0, 156, 136, 0.6);
  text-align: center;
}

header h1 {
  color: #fff;
  font-size: 14px;
  line-height: 30px;
}

header h1 a {
  color: #fff;
  text-decoration: none;
}

main {
  font-size: 0px;
}

main a {
  color: #666;
}
main section{
  font-size: 14px;
}

.cat1 {
  width: 100%;
  display: block;
  height: calc(100vh - 33.3vw - 60px);
  font-size: 20px;
  background: url(img/cat1-1.jpeg);
  background-size: cover;
  background-position: right center;
  position: relative;
}

.cat1 p {
  background: rgba(255, 255, 255, 0.85);
  width: 65vw;
  position: absolute;
  bottom: 0vh;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 12px 16px;
  -webkit-transform: scaleY(1) perspective(1em) rotateX(1deg);
  transform: scaleY(1) perspective(1em) rotateX(1deg);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  border-right: solid 8px #a0d1a0;
}

.cat1 p span {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

.cat3 {
  background: #999;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: calc(100vw / 3);
  height: calc(33.3vw);
  font-size: 14px;
  position: relative;
  text-align: center;
}

.cat3 p {
  background: rgba(255, 255, 255, 0.85);
  position: absolute;
  bottom: 0;
  width: 100%;
  font-weight: bold;
}

a:nth-child(2) .cat3 {
  background: url("img/cat3-1.jpg");
  background-size: cover;
  background-position: right bottom;
  border-bottom: solid 8px #e8b2ce;
}

a:nth-child(3) .cat3 {
  background: url("img/cat3-2.jpg");
  background-size: cover;
  background-position: right bottom;
  border-bottom: solid 8px #cccc00;
}

a:nth-child(4) .cat3 {
  background: url("img/cat3-3.jpg");
  background-size: cover;
  background-position: left bottom;
  border-bottom: solid 8px #51aad6;
}

.cat3 p {
  margin: 0 auto;
}

footer {
  background: rgba(0, 156, 136, 0.8);
  text-align: center;
}

footer small {
  color: #fff;
  line-height: 30px;
  font-size: 10px;
}

footer small a {
  color: #fff;
  text-decoration: none;
}

.sub .cat1{
  height: 50vw;
}
.sub .cat1 p{
  width: 70%;
  font-size: 14px;
  padding: 8px 8px;
}
.point{
  padding: 0 8px;
}
.point .point-sec{
  border: solid 3px #a0d1a0;
  border-radius: 4px;
  padding: 8px;
  width: calc(33.3% - 11px);
  margin: 12px 4px ;
  display: inline-block;
}
.anshin .content{
  padding: 0 16px;
  text-align: center;
}
.anshin .fukidashi{
  font-weight: bold;
  font-size: 1.6rem;
  border: solid 4px rgba(0, 156, 136, 0.8);
  display: inline-block;
  padding: 4px;
  border-radius: 8px;
  margin: 8px auto 16px;
  position: relative;
}

.anshin .fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid rgba(0, 156, 136, 0.8);
}
.large-button {
  text-align: center;
}
.large-button button{
  background: orange;
  font-weight: bold;
  font-size: 1.6rem;
  color: #fff;
  padding: 8px;
  margin: 32px auto;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  text-shadow:2px 2px 0 #333, -2px -2px 0 #333,
    -2px 2px 0 #333, 2px -2px 0 #333,
    0px 2px 0 #333,  0 -2px 0 #333,
    -2px 0 0 #333, 2px 0 0 #333;
  -webkit-animation: bound 3s infinite;
  animation: bound 3s infinite;
}


@-webkit-keyframes bound {
  0% { -webkit-transform:translateY(0); transform:translateY(0) }
  5% { -webkit-transform:translateY(0); transform:translateY(0) }
  10% { -webkit-transform:translateY(0); transform:translateY(0) }
  20% { -webkit-transform:translateY(-25px); transform:translateY(-25px) }
  25% { -webkit-transform:translateY(0); transform:translateY(0) }
  30% { -webkit-transform:translateY(-15px); transform:translateY(-15px) }
  50% { -webkit-transform:translateY(0); transform:translateY(0) }
  100% { -webkit-transform:translateY(0); transform:translateY(0) }
}

.large-button button span{
  font-size: 0.8rem;
  display: block;
  border: none;
  color: #000;
  text-shadow: none;
}

section h2{
  background: #a0d1a0;
  -webkit-box-shadow: 0px 0px 0px 5px #a0d1a0;
  box-shadow: 0px 0px 0px 5px #a0d1a0;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  text-align: center;
  margin: 24px 16px 16px;
}
section p{
  padding: 0 16px 16px;
}
section ul{
  margin: 16px;
  padding-left: 16px;
}
section.resolve ul{
  list-style-type: none;
  padding-left: 0;
}
section.resolve li{
  display: block;
  border:solid 3px rgba(0, 156, 136, 0.6);
  background: #fefefd;
  background: -webkit-gradient(linear, left top, left bottom, from(#fefefd),color-stop(42%, #dce3c4),to(#aebf76));
  background: linear-gradient(to bottom, #fefefd 0%,#dce3c4 42%,#aebf76 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 );
  color: #333;
  font-weight: bold;
  text-align: center;margin-bottom: 16px;
  padding: 8px;
}
section.resolve li b{
  color:orangered;
}

.resolve{
  text-align: center;
}
.resolve .catch{
  font-weight: bold;
  font-size: 1.2rem;
}


@media(min-width:1000px) {
  .cat1 {
    height: calc(100vh - 20vw - 60px);
  }
  .cat3 {
    height: calc(20vw);
  }
}