@charset "utf-8";
/* CSS Document */


/* ==========================
==========　メイン　===========
============================= */

/* 下層ページビジュアル
---------------------------*/
.page_visual {
	background: url(../img/page_visual.png)no-repeat center center;
	background-size: cover;
}

/* 
---------------------------*/
.sp_block {
    display: none;
}

.about {
	background: url(../img/yachiyo_bg01.png)no-repeat left top;
	background-size: cover;
	max-width: 1200px;
	margin: auto;
	padding-bottom: 45px;
}

.message {
    overflow: hidden;
    max-width: 1000px;
    margin: auto;
    padding: 0 0 60px;
}
.message img {
	float: right;
}
.message img.sp_img {display: none;}

p.lu_midashi {
    text-align: center;
    font-size: 24px;
    margin: 80px 0 30px;
}

.lineup.outer1000 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.lineup.outer1000 ul li {
  width: 50%;
	max-width: 495px;
	margin-bottom: 40px;
	text-align: center;
}

p.pro_name {
    padding-top: 20px;
    margin-top: 8px;
    font-weight: bold;
    /*background: url(../../../common/img/header_icon02.png)no-repeat right top;*/
}
p.pro_comment {
    color: #999999;
	max-width: 375px;
    margin: auto;
}

.page_backBtn {
    text-align: center;
    border-top: 1px solid #e4e4e4;
    padding: 45px 0 15px;
}

.page_backBtn p {
    color: #ffffff;
    background: #999999;
    padding: 4px 65px;
    display: inline-block;
}

.prologue.outer1000 {
    width: 92%;
    //padding: 100px 0 0;
    padding: 0 0 50px;
        margin-top: -50px;
          font-size: xx-large;
}
ul.pro_list {
    margin: 75px auto 0px;
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    width: 100%;
}
ul.pro_list li {
  width: 140px;
  font-size: 12px;
}
ul.pro_list li img {
    margin-bottom: 15px;
}

/* 動画
========================== */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 150px auto 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.m_midashi {
    max-width: 1000px;
    width: 92%;
    text-align: center;
    font-size: 17px;
    color: #000;
    margin: 50px auto 0;
   margin-bottom: 20px;
}
.movie-box {
  margin: 20px auto 50px;
}
.movie-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 auto ;
}
.movie-inner .movie-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url("../img/thumb.jpg") no-repeat;
  background-size: cover;
}
.movie-inner .movie-thumb:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: url("../img/thumb_play.png") center center no-repeat;
  background-size: 90px 90px;
  transition: 0.5s;
}
.movie-inner .movie-thumb:hover:after {
  transform: scale(1.1);
  background: url("../img/thumb_play.png") center center no-repeat;
  background-size: 90px 90px;
}
.movie-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 固有のスマホ対応記述
========================== */

/* 700pxより小さい場合 */
@media screen and ( max-width: 700px ){

	.message img.sp_img {display: block;}
	.message img.pc_img {display: none;}

	.swiper-container {
		width: 90%;
		padding: 0 5%!important;
	}
	.swiper-button-prev, .swiper-button-next {
		display: none;
	}
	.about {
		background: url(../img/yachiyo_bg01b.png)no-repeat -40px 0px;
		background-size: cover;
	}
	.message img {
		float: right;
		width: 50%;
	}

	.lineup.outer1000 {
		width: 92%;
	}
	p.lu_midashi {
		margin: 50px 0 30px;
	}

	.lineup.outer1000 ul {
		justify-content: center;
	}

  ul.pro_list {
      display: inherit;
  }
  ul.pro_list li {
      width: 100%;
      display: flex;
      justify-content: space-between;
  }

  ul.pro_list li p {
      width: 60%;
  }

  ul.pro_list li p.prolist_img {
      width: 35%;
  }

  .prologue.outer1000 {
      //padding: 45px 0 0;
      padding: 0 0 40px;
            margin-top: 0;
              font-size: large;
  }

.lineup.outer1000 ul li {
  width: 100%;
}


/* 動画
========================== */
.youtube {
    position: relative;
    padding-top: 56.25%;
    margin: 0px auto;
}
  .movie-inner {
/*    position: relative;
    width: 100%;
    padding-top: 0;*/
        position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 auto;
}
  .movie-inner .movie-thumb {
    width: 90%;
    margin: auto;
    position: relative;
    width: 90%;
    padding-top: 56.25%;
    margin: auto;
}
.movie-box {
    display: none;
}
.sp_block {
    display: block;
}
}


@media print {


}