@charset "UTF-8";






/*
 * モジュール関係
 */
.para {
  opacity: 0;
  transition: opacity 750ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 750ms cubic-bezier(0.215, 0.61, 0.355, 1);
  /* easeOutCubic */ }

.para-in {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important; }

.carousel {
  display: block;
  position: relative; }
  .carousel .imgs-wrap {
    width: 100%;
    height: 796px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 0;
    overflow: hidden; }
    .carousel .imgs-wrap .leftbtn {
      display: none; }
    .carousel .imgs-wrap .rightbtn {
      display: none; }
    .carousel .imgs-wrap .imgs {
      width: 100%;
      height: 100%;
      margin-top: 0;
      margin-bottom: 0; }
      .carousel .imgs-wrap .imgs:after {
        content: "";
        display: table;
        clear: both; }
      .carousel .imgs-wrap .imgs .img {
        width: 100%;
        height: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 0;
        float: left;
        background-size: cover;
        background-position: 50% 50%; }
        .carousel .imgs-wrap .imgs .img img {
          width: 100%;
          height: auto;
          margin-bottom: 0; }
  .carousel.fadepager .imgs-wrap .imgs .img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    float: none; }
  .carousel .menu {
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;
    position: absolute;
    bottom: 25px;
    text-align: right;
    line-height: 0; }
    @media screen and (max-width: 767px) {
      .carousel .menu {
        padding-right: 17px;
        bottom: 12px; } }
    .carousel .menu .icon {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 6px;
      margin-left: 6px;
      border: 0px;
      box-sizing: border-box;
      vertical-align: top; }
      @media screen and (max-width: 767px) {
        .carousel .menu .icon {
          width: 4px;
          height: 4px;
          margin-left: 3px;
          margin-right: 3px; } }
      .carousel .menu .icon:first-child {
        margin-left: 0; }
      .carousel .menu .icon:last-child {
        margin-right: 0; }
      .carousel .menu .icon.active, .carousel .menu .icon:hover {
        border: 1px solid #fff;
        background-color: transparent; }
      .carousel .menu .icon img {
        display: none; }





#pickup .content-wrap {
	width: 100%;
	padding-left: 7.46%;
	padding-right: 7.46%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	margin-bottom: 0;
	position: relative;
}
#pickup .content-wrap:after {
	content: "";
	position: absolute;
	left: 50px;
	top: 50px;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../images/style/style_slide_bg.svg) repeat-x;
	background-size: contain;
}
@media screen and (max-width: 767px) {
	#pickup .content-wrap {
		padding-left: 0;
		padding-right: 0;
		margin-top: 9%;
	}
	#pickup .content-wrap:after {
		left: 0;
		top: auto;
		bottom: -60px;
	}
}

#pickup .content-wrap .content {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
#pickup .content-wrap .content:after {
	content: "";
	display: table;
	clear: both;
}
@media screen and (max-width: 767px) {
	#pickup .content-wrap .content {
		position: relative;
	}
}

#pickup .carousel.wrap {
	padding-top: 0;
	position: relative;
}
@media screen and (max-width: 767px) {
	#pickup .carousel.wrap {
		padding-top: 0;
	}
}

@media screen and (max-width: 767px) {
	#pickup .img-text {
		padding-top: 0;
		position: relative;
	}
}

#pickup .imgs {
	opacity: 0;
	width: 84.5%;
	position: absolute;
	left: 33.3%;
	top: 0;
	z-index: 1;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
	#pickup .imgs {
		width: 100%;
		padding-left: 5.33%;
		padding-right: 5.33%;
		box-sizing: border-box;
		position: relative;
		left: 0;
	}
}

#pickup .imgs .img-wrap {
	position: relative;
}

#pickup .imgs .img {
	width: 100%;
	padding-top: 66.66%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	background-size: cover;
	background-position: 50% 50%;
}




#pickup .text-wrap {
	width: 66.8%;
	padding-top: 53.3%;
	position: relative;
}
@media screen and (max-width: 767px) {
	#pickup .text-wrap {
	width: 100%;
	padding: 0% 5.33% 0;
	margin-top: -30%;
	}
}

#pickup .text {
	width: 100%;
	height: 70%;
	padding: 5.5% 55% 5.5% 5.5%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
	box-sizing: border-box;
	background-color: #fff;
}
@media screen and (max-width: 767px) {
	#pickup .text {
		padding: 35% 5.33% 15%;
		position: relative;
	}
}

#pickup .text .case-wrap {
	position: relative;
	transition: height 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

#pickup .text .case-wrap .case {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
@media screen and (max-width: 767px) {
	#pickup .text .case-wrap .case {
		height: auto;
	}
}

#pickup .text p.title {
	font-size: 1.78vw;
	font-weight: 700;
	margin-bottom: 7%;
}
@media screen and (max-width: 767px) {
	#pickup .text p.title {
		font-size: 18px;
		font-size: 1.125rem;
		margin-bottom: 4%;
		padding-top: 20px;
	}
}
@media screen and (min-width: 1290px){
	#pickup .text p.title {
		font-size: 23px;
		font-size: 1.4375rem;
	}
}

#pickup .text p.detail {
	font-size: 2.23vw;
	line-height: 1.8;
	margin-bottom: 8.4%;
}
@media screen and (max-width: 767px) {
	#pickup .text p.detail {
		font-size: 13px;
		font-size: 0.8125rem;
		margin-bottom: 5.2%;
	}
}
@media screen and (min-width: 1290px){
	#pickup .text p.detail {
		font-size: 18px;
	/*	font-size: 1.125rem;*/
		font-size: 1.9rem;
		line-height: 2;
	}
}

#pickup .paging {
	width: 50%;
	position: absolute;
	right: 0;
	bottom: 5%;
	z-index: 0;
	text-align: right;
	vertical-align: middle;
}
@media screen and (max-width: 767px) {
	#pickup .paging {
		width: 100%;
		right: 5.33%;
		bottom: 15px;
	}
}

#pickup .paging .prev {
	display: inline-block;
	vertical-align: middle;
	width: 8.76%;
	padding-top: 8.76%;
	position: relative;
	cursor: pointer;
	transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (max-width: 767px) {
	#pickup .paging .prev {
		width: 10.5%;
		padding-top: 10.5%;
	}
}

@media screen and (min-width: 768px) {
	#pickup .paging .prev:hover p {
		border-left: 2px solid #aaa;
		border-bottom: 2px solid #aaa;
	}
}

#pickup .paging .prev p {
	left: 3px;
	width: 40%;
	padding-top: 40%;
	position: absolute;
	left: 54%;
	top: 50%;
	z-index: 0;
	border-left: 2px solid #202020;
	border-bottom: 2px solid #202020;
	transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
	#pickup .paging .prev p {
		border-left: 2px solid #202020;
		border-bottom: 2px solid #202020;
	}
}

#pickup .paging .next {
	display: inline-block;
	vertical-align: middle;
	width: 8.76%;
	padding-top: 8.76%;
	position: relative;
	cursor: pointer;
	transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (max-width: 767px) {
	#pickup .paging .next {
		width: 10.5%;
		padding-top: 10.5%;
		margin-right: 3.8%;
	}
}

@media screen and (min-width: 768px) {
	#pickup .paging .next:hover p {
		border-top: 2px solid #aaa;
		border-right: 2px solid #aaa;
	}
}

#pickup .paging .next p {
	left: 3px;
	width: 40%;
	padding-top: 40%;
	position: absolute;
	left: 48%;
	top: 50%;
	z-index: 0;
	border-top: 2px solid #202020;
	border-right: 2px solid #202020;
	transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (max-width: 767px) {
	#pickup .paging .next p {
		border-top: 2px solid #202020;
		border-right: 2px solid #202020;
	}
}