/* Variables
****************************************************************************/
/* Media Queries
****************************************************************************/
/* Utilities
****************************************************************************/
/*clearfix*/
/* set some element's line-height to 1em because of adjust text margin */
/*set fontfamily*/
/*@mixin font-lato {
	font-family: 'Lato', sans-serif;
}
@mixin font-lato-700 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}*/
/*@mixin font-montserrat {
	font-family: 'Montserrat', sans-serif;
}*/
/*
	#index.css
*/
/* Sec-Head
****************************************************************************/
.page-container {
  background: url(../../img/index_bg.png); }

.nav-container .h1 {
  display: none; }

@media only screen and (max-width: 980px) {
  .nav-container {
    top: 0; }
    .nav-container .h1 {
      display: block; }
  .menu-trigger {
    z-index: 100; } }

.sec-head .title {
  text-align: center; }
  .sec-head .title img {
    display: inline-block;
    margin-bottom: 10px; }

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .sec-head .title {
    margin-bottom: 20px; }
  .sec-head .catch {
    width: 300px;
    margin-left: auto;
    margin-right: auto; } }

@media only screen and (min-width: 768px) and (max-width: 980px) {
  .sec-head {
    margin-bottom: 32px; } }

@media only screen and (min-width: 981px) {
  .sec-head {
    margin-bottom: 32px; } }

.sec-entrance {
  margin-bottom: 50px;
  /*.vol3 .btn-container {
		clip-path: url(#clip3_2);
	}*/
  /*.vol3 {

		.btn-container {
			background: #23b2bf;
		}
		.photo {
			opacity: 1;
			background-image: url(../../img/index_vol3_photo.png);
		}
		.cs1, .cs2 {
			position: absolute;
			@include hide-text;
			transition-duration: 0.3s;
			top: 0;
			left: 0;
			z-index: 10;
			width: 296px;
			height: 296px;


		}
		.cs1 {
			background: url(../../img/index_vol3_cstypo2.png) no-repeat center center;
		}
		.cs2 {
			opacity: 0;
			background: url(../../img/index_vol3_cstypo.png) no-repeat center center;
		}
	}*/ }
  @media only screen and (min-width: 981px) {
    .sec-entrance {
      margin-bottom: 100px; }
      .sec-entrance:after {
        content: "";
        clear: both;
        display: block; } }
  .sec-entrance li {
    width: 276px; }
    .sec-entrance li .ent-tit {
      text-align: center;
      margin-bottom: 35px; }
      .sec-entrance li .ent-tit > img {
        height: 19px; }
      .sec-entrance li .ent-tit span {
        display: inline-block;
        margin-bottom: 15px; }
    .sec-entrance li a {
      display: block;
      width: 276px;
      height: 276px; }
    .sec-entrance li .btn-container {
      position: relative;
      width: 276px;
      height: 276px;
      border-radius: 50% 50%; }
    .sec-entrance li .photo, .sec-entrance li .circle, .sec-entrance li .arrow, .sec-entrance li #clip1, .sec-entrance li #clip2, .sec-entrance li #clip3 {
      -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%; }
    .sec-entrance li .photo {
      top: 0;
      position: absolute;
      z-index: 1;
      width: 276px;
      height: 276px;
      border-radius: 50% 50%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 276px 276px; }
    .sec-entrance li .circle {
      position: absolute;
      width: 276px;
      height: 276px;
      top: 0;
      background: url(../../img/index_btn_circle.svg) no-repeat;
      z-index: 2; }
    .sec-entrance li .arrow {
      width: 46px;
      height: 46px;
      right: 15px;
      bottom: 5px;
      text-indent: 110%;
      white-space: nowrap;
      overflow: hidden;
      position: absolute;
      z-index: 3;
      -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
      background: url(../../img/index_btn_arrow.png) no-repeat; }
    .sec-entrance li .fukidashi {
      position: absolute;
      right: -30px;
      top: -15px;
      z-index: 4;
      -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      -webkit-transform: translateY(20px);
              transform: translateY(20px); }
    @media only screen and (max-width: 980px) {
      .sec-entrance li {
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto; }
        .sec-entrance li .ent-tit {
          text-align: center;
          margin-bottom: 25px; }
          .sec-entrance li .ent-tit span {
            margin-bottom: 0px; } }
    @media only screen and (min-width: 981px) {
      .sec-entrance li {
        float: left;
        margin-right: 70px; }
        .sec-entrance li:last-child {
          margin-right: 0; } }
  .sec-entrance .vol1 .photo {
    -webkit-clip-path: url(../../#clip1);
            clip-path: url(../../#clip1); }
  .sec-entrance .vol2 .photo {
    -webkit-clip-path: url(#clip2);
            clip-path: url(#clip2); }
  .sec-entrance .vol3 .photo {
    -webkit-clip-path: url(#clip3);
            clip-path: url(#clip3); }
  @media only screen and (min-width: 981px) {
    .sec-entrance .active a:hover .circle {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
    .sec-entrance .active a:hover .photo {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
      background-size: 320px 320px; }
    .sec-entrance .active a:hover #clip1 {
      -webkit-transform: scale(0.9);
              transform: scale(0.9); }
    .sec-entrance .active a:hover #clip2 {
      -webkit-transform: scale(0.9);
              transform: scale(0.9); }
    .sec-entrance .active a:hover #clip3 {
      -webkit-transform: scale(0.9);
              transform: scale(0.9); }
    .sec-entrance .active a:hover .arrow {
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    .sec-entrance .active a:hover .fukidashi {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }
  @media only screen and (min-width: 981px) {
    .sec-entrance .coming:hover .photo {
      opacity: 0.4;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
      background-size: 300px 300px; }
    .sec-entrance .coming:hover .cs2 {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
    .sec-entrance .coming:hover .cs1 {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }
  .sec-entrance .vol1 .btn-container {
    background: url(../../img/index_vol1_photo_bg.png); }
  .sec-entrance .vol1 .photo {
    background-image: url(../../img/index_vol1_photo.png); }
  .sec-entrance .vol2 .btn-container {
    background: url(../../img/index_vol2_photo_bg.png); }
  .sec-entrance .vol2 .photo {
    background-image: url(../../img/index_vol2_photo.png); }
  .sec-entrance .vol3 .btn-container {
    background: url(../../img/index_vol3_photo_bg.png); }
  .sec-entrance .vol3 .photo {
    background-image: url(../../img/index_vol3_photo.png); }
  @media only screen and (min-width: 981px) {
    .sec-entrance {
      width: 980px;
      margin-left: auto;
      margin-right: auto; } }