/* @media all and (min-width: 768px) {
  .int_pic_1,
  .int_pic_1 span {
    width: 600px;
    height: 354px;
  }
}
@media all and (max-width: 767px) {
  .int_pic_1 span {
    padding: 59% 0 0;
  }
} */
.intro h2, .intro h3{ text-align: center; font-size: 1.4em; line-height: 1.6em; font-weight: bold; color:#000; padding-top: 10px; }

.comentName {color: #d84f8f; font-size: 1.2em; font-weight: bold; padding: 10px;}
.catch { line-height: 1.5em; padding-bottom: 20px;}

p.btn a {
  display: block;
  border-radius: 30px;
  background-color: #5bc5de;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/intro/btn_comment.png);
background-size: contain;
width: 350px;
height: 60px;
text-indent: -9999px;
margin: 0 auto;
}
p.btn a:hover {background-color: #89d5e7;}

@media all and (max-width: 767px) {
	p.btn a {width: 95%; height: 50px; border-radius:25px;}
}

@media all and (min-width: 768px) {
 .intro1 .ph_cut,
  .intro1 .ph_cut span{
    height: 450px;
  }
	.intro2 .ph_cut,
  .intro2 .ph_cut span{
    height: 272px;
  }
  .intro3 .ph_cut,
  .intro3 .ph_cut span{
    height: 310px;
  }

  .intro4 .ph_cut_l,
  .intro4 .ph_cut_l span {
    width:280px; height: 300px;
  }

.ph_cut {
    margin: 1em auto 2.5em;
}
}
@media all and (max-width: 767px) {
.intro h2 {font-size: 1.3em; line-height: 1.5em; padding-bottom: 0px;}
.intro h3 {font-size: 1.2em; line-height: 1.5em; padding-bottom: 0px;}
	
  .intro1 .ph_cut span{
    padding-top: 75%;
  }
	.intro2 .ph_cut span{
    padding-top: 45.333%;
  }
 .intro3 .ph_cut span{
    padding-top: 51.666%;
  }

  .intro4 .ph_cut_l span {
    padding-top: 107.142%;
  }
}