@charset "utf-8";




/* スマホヘッダー　start */

@media screen and (max-width: 768px) {

.example-block {
 margin: 100px auto ;
 padding:0 0 0 0;
 text-align:center;
 width:90%;
}
.example-block:after {
 content: '';
 display: block;
 clear: both;
}
.example-block h2 {
  margin: 0;
  font-size:20px;
  text-align:left;
  color:#333;
}
.example-block p {
  margin: 20px 0 0 0;
  font-size:16px;
  text-align:left;
  color:#333;
}

.example-nav-block {
  margin: 40px auto 60px;
  padding: 0 0 80px 0;
  text-align:center;
  width:100%;
  font-size:0;
}
.example-nav-block:after {
  content: '';
  display: block;
  clear: both;
}
.example-nav li {
  border-radius: 0px;
 text-align:center;
 width:80%;
 margin:40px auto;
}
.example-nav a {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#fff;
  font-size:16px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background:#ef66a6;
}

.example-detail-block {
 margin: 30px auto ;
 padding:10px;
 text-align:center;
 width:90%;
 border:1px dotted #999;
}
.example-detail-block:after {
 content: '';
 display: block;
 clear: both;
}
.example-detail-block h2 {
  margin: 0;
  font-size:20px;
  text-align:left;
  color:#1658a3;
}
.example-detail-block p {
  margin: 20px 0 0 0;
  font-size:16px;
  text-align:left;
  color:#333;
}
.example-detail-image {
 margin: 20px auto;
 padding:0;
 text-align:center;
 width:90%;
}
.example-next {
 margin: 20px auto;
 padding:0;
 text-align:center;
 width:200px;
}

.example-back li {
  border-radius: 0px;
 text-align:center;
 width:300px;
 margin:60px auto;
}
.example-back a {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#333;
  font-size:16px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border:1px solid #999;
}
}
/* スマホ　end */



/* PC　start */
@media screen and (min-width: 769px) {

.example-block {
 margin: 100px auto ;
 padding:0 0 0 0;
 text-align:center;
 width:80%;
 min-width:960px;
 max-width:1200px;
}
.example-block:after {
 content: '';
 display: block;
 clear: both;
}
.example-block h2 {
  margin: 0;
  font-size:20px;
  text-align:left;
  color:#333;
}
.example-block p {
  margin: 20px 0 0 0;
  font-size:16px;
  text-align:left;
  color:#333;
}

.example-nav-block {
  margin: 40px auto 60px;
  padding: 0 0 80px 0;
  text-align:center;
  width:100%;
  font-size:0;
}
.example-nav-block:after {
  content: '';
  display: block;
  clear: both;
}
.example-nav li {
  border-radius: 0px;
 text-align:center;
 width:25%;
 margin:20px 20px;
 display:inline-block;
}
.example-nav a {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#333;
  font-size:16px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border:1px solid #999;
}
.example-nav a:hover {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#ffffff;
  font-size:16px;
  background-color:#e75297;
}


.example-detail-block {
 margin: 30px auto ;
 padding:10px;
 text-align:center;
 width:80%;
 min-width:960px;
 max-width:1200px;
 border:1px dotted #999;
}
.example-detail-block:after {
 content: '';
 display: block;
 clear: both;
}
.example-detail-block h2 {
  margin: 0;
  font-size:20px;
  text-align:left;
  color:#1658a3;
}
.example-detail-block p {
  margin: 20px 0 0 0;
  font-size:16px;
  text-align:left;
  color:#333;
}
.example-detail-image {
 margin: 20px 0 0 20px ;
 padding:0;
 text-align:right;
 width:400px;
 float:right;
}
.example-next {
 margin: 20px auto;
 padding:0;
 text-align:center;
 width:200px;
}

.example-back li {
  border-radius: 0px;
 text-align:center;
 width:300px;
 margin:60px auto;
}
.example-back a {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#333;
  font-size:16px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border:1px solid #999;
}
.example-back a:hover {
  border-radius: 3px;
  margin:0;
  padding: 10px 10px 10px 10px;
  display: block;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color:#ffffff;
  font-size:16px;
  background-color:#e75297;
}



}
/* PCメイン　end */