@charset "UTF-8";
/* CSS Document */
main h2{
background-image: url("../images/pc/00_top/top_img.png");
}
.top_text{
font-size: 16px;
width: 900px;
margin: 35px auto 35px auto;
display: block;
}

.content {
	list-style-type:none;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
    width: 1095px;
    margin: 0px auto;
}
.content br{
display: block;
}
.content > li {
	display:inline-block;
	position:relative;
    margin: 25px 10px;
}
.content > li a{
text-decoration: none;
padding-bottom: 20px;
color: #333;
font-size: 14px;
}
.content > li a img{
width: 315px;
height: 206px;
}
.content > li h3{
font-size: 18px;
font-weight: 600;
color: #333;
}
.content > li h3::first-letter{
color: #00a9ba;
}
.content > li > ul {
	display:none;
}
.content > li > ul li::before{
  content: "■";
  color: #00a9ba;
  padding-right: 5px;
  }
  .content > li > ul li{
  border-bottom: 1px dashed #776d69;
  padding:5px 0px;
  text-indent: -17px;
  padding-left: 14px;
  }
.content > li > ul li:last-child {
  border: none;
}
.content > li:hover ul {
      animation-name: fade;
  animation-duration: 0.5s;
  width: auto;
	display:block;
	position:absolute;
	padding:10px;
	margin:0;
	top:240px;
	left:0;
	list-style-type:none;
	box-shadow: 0px 3px 12px 0 rgba(0, 0, 0, .3);
    background-color: #ffffff;
}
.content > li a:hover{
color: #00a9ba;
}
  @keyframes fade{
  0%{opacity:0;}
  100%{opacity: 1;}
  }
.cont1{
z-index: 20;
}
.cont2{
z-index: 19;
}
.cont3{
z-index: 18;
}
.cont4{
z-index: 17;
}
.cont5{
z-index: 16;
}
.cont6{
z-index: 15;
}

/* ============================================== スマートフォン ================================================ */
@media screen and (max-width: 620px) {
main h2{
background-image: url("../images/sp/00_top/top_img_s.png");
}
.top_text{
font-size: 16px;
width: 85%;
margin: 30px auto 30px auto;
display: block;
text-align: justify;
font-weight: 200;
}

.content {
	list-style-type:none;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
    width: 85%;
    margin: 0px auto;
}
.content br{
display: none;
}
.content > li {
	display:inline-block;
	position:relative;
    margin: 25px auto;
    width: 100%;
}
.content > li a{
text-decoration: none;
padding-bottom: 20px;
color: #333;
font-size: 4.1vw;
}
.content > li > ul li::before{
  content: "■";
  color: #00a9ba;
  padding-right: 5px;
  font-size: 4.1vw;
  }
.content > li a img{
width: 100%;
height: 85%;
}
  .content > li > ul li{
  border-bottom: 1px dashed #776d69;
  padding:5px 0px;
  text-indent: -4.7vw;
  padding-left: 4.2vw;
  }
.content > li > ul li:last-child {
  border: none;
}
.content > li:hover ul {
      animation-name: fade;
  animation-duration: 0.5s;
	display:block;
	position:absolute;
	padding:8px 15px;
	margin:0;
	top:100%;
	left:0;
	list-style-type:none;
	box-shadow: 0px 3px 12px 0 rgba(0, 0, 0, .3);
    background-color: #ffffff;
}


}