@charset "UTF-8";
@import url("https://use.typekit.net/xwf4buu.css");

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  html {
    font-size: calc(10* (100vw / 1000));
  }
}

body {
  width: 100%;
}
a:hover{
  text-decoration: underline;
}

#main-container img,
#main-container video {
  width: 100%;
}

#main-container {
  width: 100%;
  margin: 0 auto;
  padding-top: 8rem;
  color: #000;
}

/*パンくず*/
#main-container #breadcrumb {
    margin: 0 auto 2rem;
    font-size: 1rem;
    line-height: 1;
    width: 120rem;
		color: #1C1C1C;
}

/*PC　TOPへ戻るボタン LP共通*/
#main-container .scrTop__btn {
  font-size: 1.2rem;
  width: 120rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#main-container .scrTop__btn a {
  display: inline-block;
}

#feature .sp_only{
	display: none;
}


/*PC*/
#feature {
	width: 100%;
	margin: 7rem auto 38rem;
}

/*credit*/
#feature .credit{
	display: flex;
	flex-wrap: wrap;
}
#feature .credit li {
	display: flex;
	flex-wrap: wrap;
}
#feature .credit li:not(:last-child)::after{
	content: "/";
	font-size: 2.5rem;
	margin: 0 0.5rem;
}

#feature .credit a {
	color: #000;
	font-size: 2.5rem;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
}

/*mv*/
#feature .mv_blk{
	margin-bottom: 10rem;
}
#feature .mv_blk .mv{;
	width: 80.4rem;	
	margin: 0 auto 4.9rem;
}

#feature .mv_blk .subTxt{
	font-size: 2rem;
	line-height: 2.2;
	color: #707070;
	font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
	text-align: center;
}

/*h2*/
#feature h2{
	font-size: 6rem;
	font-family: gioviale, sans-serif;
	font-weight: 400;
	font-style: normal;
}

#feature .yellow_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #F6EE55 0%) repeat scroll 0 0;
	display: inline-block;
	padding: 0 0 0 1rem;
}

/*_01*/
#feature ._01{
	width: 80.4rem;
	margin:0 auto 13rem;
}
#feature ._01 h2{
	margin-bottom:3rem;
}
#feature ._01 .code_inner{
	margin-bottom: 5rem;
}
#feature ._01 .code_inner .imgArea{
	width: 65.9rem;
	margin: 0 0 1.5rem 4.5rem;
}
#feature ._01 .code_inner .credit{
	justify-content: flex-end;
	margin-right:  9rem;
}

#feature ._01 .code_inner + .code_inner .imgArea{
	width: 72.3rem;
	margin: 0 0 1.5rem 1.5rem;
}
#feature ._01 .code_inner + .code_inner .credit{
	justify-content: flex-start;
	margin-right: 0;
}

/*_02*/
#feature ._02{
	width: 80.4rem;
	margin:0 auto 22.5rem;
}
#feature ._02 h2{
	margin-bottom:3rem;
}
#feature ._02 .code_inner{
	margin-bottom: 3.7rem;
}
#feature ._02 .code_inner .imgArea{
	width: 65.6rem;
	margin: 0 0 1rem 7.4rem;
}
#feature ._02 .code_inner .credit{
	justify-content: flex-end;
	margin-right:  6.5rem;
}

#feature ._02 .code_inner + .code_inner .imgArea{
	width: 70.3rem;
	margin: 0 0 1.3rem 2.6rem;
}
#feature ._02 .code_inner + .code_inner .credit{
	justify-content: flex-start;
	margin-right: 0;
	margin-left: 1rem;
}

/*_03*/
#feature ._03{
	width: 97.7rem;
	margin:0 auto 18rem;
}
#feature ._03 h2{
	margin:0 0 2.2rem 9rem;
}
#feature ._03 .code_inner{
	margin-bottom: 11rem;
	position: relative;
}
#feature ._03 .code_inner .imgArea{
	width: 96rem;
	margin: 0 0 0 1.7rem;
}
#feature ._03 .code_inner .credit{
	position: absolute;
	bottom: 21.2rem;
}

#feature ._03 .code_inner + .code_inner .imgArea{
	width: 85rem;
	margin: 0 0 1.4rem 6.7rem;
}
#feature ._03 .code_inner + .code_inner .credit{
	justify-content: flex-end;
	position: static;
	margin-right: 4.3rem;
}

/*_04*/
#feature ._04{
	width: 97.7rem;
	margin:0 auto 13rem;
}
#feature ._04 h2{
	margin:0 0 2.5rem 9rem;
}
#feature ._04 .code_inner{
	margin-bottom: 5.6rem;
	position: relative;
}
#feature ._04 .code_inner .imgArea{
	width: 90.5rem;
	margin: 0 0 0 3rem;
}
#feature ._04 .code_inner .credit{
	position: absolute;
	bottom: 29.5rem;
	right: -3rem;
}

#feature ._04 .code_inner + .code_inner .imgArea{
	width: 59.6rem;
	margin: 0 auto 1.5rem;
}
#feature ._04 .code_inner + .code_inner .credit{
	justify-content: flex-end;
	position: static;
	margin-right: 18.8rem;
}

/*viewBtn*/
#feature .viewBtn {
	width: 66.9rem;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
#feature .viewBtn .link_btn a {    
	width: 32.4rem;
	height: 9.3rem;
	font-size: 2.9rem;
	letter-spacing: 0;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid #000;
}
#feature .viewBtn .link_btn a:hover {
	text-decoration: none;
	opacity: 0.4;
}


/*SP*/
@media screen and (max-width: 767px) {
/*LP共通*/
a:hover{
	text-decoration: unset;
}
#main-container {
	width: 100%;
	padding-top: calc(80* (100vw / 750));
}
/*パンくず*/
#main-container #breadcrumb {
	margin-bottom: calc(30* (100vw / 750));
	font-size: calc(24* (100vw / 750));
	width: 100%;
	padding: 0 calc(26 * (100vw / 750));
	color: #1c1c1c;
}


/*LPコンテンツ*/
#feature {
	margin: calc(100 * (100vw/750)) auto calc(200 * (100vw/750));
}

/*credit*/
#feature .credit li:not(:last-child)::after{
	content: "/";
	font-size: calc(30 * (100vw / 750));
	margin: 0 calc(10 * (100vw / 750));
}
#feature .credit li{
	line-height: 1.5;
}

#feature .credit a {
	color: #000;
	font-size: calc(30 * (100vw / 750));
}

/*mv*/
#feature .mv_blk{
	margin-bottom: calc(84*(100vw/750));
}
#feature .mv_blk .mv{
	width: 100%;
	margin: 0 auto calc(48*(100vw/750));
}

#feature .mv_blk .subTxt{
	font-size: calc(25*(100vw/750));
}

/*h2*/
#feature h2{
	font-size: calc(60*(100vw/750));
	font-family: gioviale, sans-serif;
	font-weight: 400;
	font-style: normal;
}
#feature .yellow_line{
	padding: 0 0 0 calc(10*(100vw/750));
}


#feature ._01,
#feature ._02,
#feature ._03,
#feature ._04{
	width: 100%;
}

/*_01*/
#feature ._01{
	margin:0 auto calc(165*(100vw/750));
}
#feature ._01 h2{
	margin-bottom:calc(30*(100vw/750));
}
#feature ._01 .code_inner{
	margin-bottom: calc(57*(100vw/750));
}
#feature ._01 .code_inner .imgArea,
#feature ._01 .code_inner + .code_inner .imgArea{
	width: calc(659*(100vw/750));
	margin: 0 auto calc(12*(100vw/750));
}
#feature ._01 .code_inner .credit{
	justify-content: flex-end;
	margin-right:  calc(36*(100vw/750));
}
#feature ._01 .code_inner + .code_inner .credit{
	justify-content: flex-start;
	margin-right: 0;
	margin-left: calc(29*(100vw/750));
}

/*_02*/
#feature ._02{
	margin:0 auto calc(164*(100vw/750));
}
#feature ._02 h2{
	margin-bottom: calc(22*(100vw/750));
}
#feature ._02 .code_inner{
	margin-bottom: calc(28*(100vw/750));
}
#feature ._02 .code_inner .imgArea{
	width: 100%;
	margin: 0 auto calc(13*(100vw/750));
}
#feature ._02 .code_inner .credit{
	justify-content: flex-end;
	margin-right: calc(26*(100vw/750));
}

#feature ._02 .code_inner + .code_inner .imgArea{
	width: calc(704*(100vw/750));
	margin: 0 0 calc(13*(100vw/750)) calc(46*(100vw/750));
}
#feature ._02 .code_inner + .code_inner .credit{
	justify-content: flex-start;
	margin-right: 0;
	margin-left: 1rem;
}

/*_03*/
#feature ._03{
	margin:0 auto calc(108*(100vw/750));
}
#feature ._03 h2{
	margin:0 0 calc(24*(100vw/750)) 0;
}
#feature ._03 .code_inner{
	margin-bottom: calc(66*(100vw/750));
	position: relative;
}
#feature ._03 .code_inner .imgArea{
	width: calc(704	*(100vw/750));
	margin: 0 0 0 calc(46*(100vw/750));
}
#feature ._03 .code_inner .credit{
	position: absolute;
	bottom: calc(544*(100vw/750));
	margin-left: calc(30*(100vw/750));
}

#feature ._03 .code_inner + .code_inner .imgArea{
	width: 100%;
	margin: 0 auto calc(13*(100vw/750));
}
#feature ._03 .code_inner + .code_inner .credit{
	justify-content: flex-end;
	position: static;
	margin-right: calc(30*(100vw/750));
	margin-left: 0;
}

/*_04*/
#feature ._04{
	margin:0 auto calc(113*(100vw/750));
}
#feature ._04 h2{
	margin:0 0 calc(30*(100vw/750)) 0;
}
#feature ._04 .code_inner{
	margin-bottom: calc(30*(100vw/750));
	position: static;
}
#feature ._04 .code_inner .imgArea{
	width: calc(664*(100vw/750));
	margin: 0 0 calc(13*(100vw/750)) calc(46*(100vw/750));
}
#feature ._04 .code_inner .credit{
	position: static;
	bottom: 0;
	right: 0;
	margin-left: calc(28*(100vw/750)); 
}

#feature ._04 .code_inner + .code_inner .imgArea{
	width: 100%;
	margin: 0 auto calc(13*(100vw/750));
}
#feature ._04 .code_inner + .code_inner .credit{
	justify-content: flex-end;
	position: static;
	margin-right: calc(30*(100vw/750));
}

/*viewBtn*/
#feature .viewBtn {
	width: calc(669*(100vw/750));
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
#feature .viewBtn .link_btn a {    
	width: calc(324*(100vw/750));
	height: calc(93*(100vw/750));
	font-size: calc(29*(100vw/750));
	letter-spacing: 0;
	line-height: 1.2;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid #000;
}
#feature .viewBtn .link_btn a:hover {
	text-decoration: none;
	opacity: 0.4;
}




/*SPページTOPへ戻るボタン LP共通*/
#main-container .scrTop__btn {
	width: 100%;
	font-size: calc(26* (100vw / 750));
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#main-container .scrTop__btn a {
  display: inline-block;
}

}