@charset "UTF-8";

/*--------------------------
>>  mqcontents
--------------------------*/

/*--------------------Reset*/
* {
  margin: 0px;
  padding: 0px;
}

body {
  padding-top: 55px!important;
}

#mqWrapper {
	width: 100%;
	position: static;
}

#mqWrapper main {
	width: 100%;
	margin: 0;
	padding-bottom: 0;
}

#mq_contents section {
  padding: 0 !important;
}

/*--------------------Common*/
#mq_chanel2506 {
	/*position: relative;*/
	width: 100%;
	color: #000000;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1;
	word-break: normal;
	line-break: strict;
  /* overflow: hidden; */
}

#mq_chanel2506 img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
  width: 100%;
  backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-backface-visibility: hidden;/* animation時のにじみ防止 */
  -webkit-font-smoothing: antialiased;/* animation時の文字にじみ防止 */
  -moz-osx-font-smoothing: grayscale;/* animation時の文字にじみ防止 */
}


#mq_chanel2506 p {
  font-size: 16px;
  line-height: 2;
}

#mq_chanel2506 p.caption {
  font-size: 13px;
  line-height: 20px;
}



#mq_chanel2506 .bold {
  font-weight: bold;
}

#mq_chanel2506 sup {
  font-size: 10px;
  vertical-align: top;
  position: relative;
  top: 0.4em;
}

#mq_chanel2506 a:hover {
  opacity: .7;
  transition: all ease .6s;
  cursor: pointer;
}

#mq_chanel2506 a {
  display: block;
  width: 100%;
  height: 100%;
}

#mq_chanel2506 .is-pc {
  display: block;
}


#mq_chanel2506 .is-sp {
  display: none;
}

#mq_chanel2506 br.is-pc {
  display: inline-block;
}


#mq_chanel2506 br.is-sp {
  display: none;
}


/*--------------------Clearfix*/
#mq_chanel2506 .cf:before,
#mq_chanel2506 .cf:after {
	content: "";
	display: block;
	overflow: hidden;
}
#mq_chanel2506 .cf:after {
	clear: both;
}
#mq_chanel2506 .cf {
	zoom: 1;
}
#mq_chanel2506 .clear {
	clear: both;
}


/*--------------------Layout*/
#mq_chanel2506 .container {
	margin: 0 auto;
	width: 980px;
}

#mq_chanel2506 .flex_wrapper {
  display: flex;
}


/*--------------------------------------------------------------------------------------
mq_contents
-------------------------------------------------------------------------------------- */

/*-------------------------------------------------------------------------------- pr */
#mq_chanel2506 .pr {
  width: 30px;
  height: 17px;
  right: 15.93vw;
  top: 30px;
  position: absolute;
  z-index: 3;
}

/*-------------------------------------------------------------------------------- photo */


/*-------------------------------------------------------------------------------- button */
#mq_chanel2506 .btn {
  width: 488px;
  height: 80px;
  margin: 0 auto;
}

#mq_chanel2506 .btn a{
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

#mq_chanel2506 .btn img {
  width: 187px;
}

#mq_chanel2506 .btn.deactive {
  height: auto;
}

#mq_chanel2506 .btn.deactive a{
  background-color: #dcdcdc;
  pointer-events: none;
}

#mq_chanel2506 .btn.deactive .btn_lead {
  display: block;
}


#mq_chanel2506 .btn_lead {
  width: 187px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: none;
}


#mq_chanel2506 .btn.deactive a img {
  width: 138px;
}

/*-------------------------------------------------------------------------------- 背景ライン */
#mq_chanel2506 .line_left::before,
#mq_chanel2506 .line_right::before  {
  width: 250px;
  height: 30px;
} 

/*-------------------------------------------------------------------------------- mv */
#mq_chanel2506 #index01 {
  padding-top: 0;
  padding-bottom: 0;
}

#mq_chanel2506 .sticky_wrapper {
  position: relative;
}

#mq_chanel2506 .mv {
  position: sticky;
  top: 55px;
  z-index: 1;
  opacity: 1;
  visibility: visible;  
  transition: all ease .5s;
}

#mq_chanel2506 .mv.is-hide {
    opacity: 0;
    visibility: hidden;
}

#mq_chanel2506 .mv_text {
  position: sticky;
  top: 55px;
  z-index: 1;
}

#mq_chanel2506 .mv_ph {
  position: relative;
  z-index: 2;
  height: calc(100vh - 55px);
}

#mq_chanel2506 .mv_ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mq_chanel2506 .sticky_wrapper .title {
  position: absolute;
  top: 0;
  height: calc(100vh - 55px);
	width: 980px;
  display: flex;
  right: 15vw;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

#mq_chanel2506 .sticky_wrapper .title.is-hide {
  opacity: 0;
  visibility: hidden;
}

#mq_chanel2506 .title_sub {
  width: 35.36vw;
  margin-bottom: 1.64vw;
  clip-path: inset(0 100% 0 0);
  animation: clip-text 1s ease-in-out 1s forwards;
}

#mq_chanel2506 .title_main {
  width: 36.79vw;
  clip-path: inset(0 100% 0 0);
  animation: clip-text 1s ease-in-out 2s forwards;
}

#mq_chanel2506 .sticky_wrapper .lead {
  position: sticky;
  top: 55px;
  height: calc(100vh - 55px);
  width: 100%;
  padding-right: 15vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;
  text-align: right;
}

#mq_chanel2506 .sticky_wrapper .lead sup {
  top: -0.6em;
}

#mq_chanel2506 .sticky_wrapper .lead p {
  font-size: 1.286vw;
  line-height: 2.429vw;
}

/*-------------------------------------------------------------------------------- block01*/
#mq_chanel2506 .block01 {
  background-color: #fff;
  border-top: 6px solid #000;
  padding-top: 230px;
  padding-bottom: 140px;
  position: relative;
  z-index: 3;
}

#mq_chanel2506 .block01::before {
  top: 140px;
}


#mq_chanel2506 .block01 .flex_wrapper {
  align-items: flex-start;
}

#mq_chanel2506 .block01 .flex_left {
  width: 500px;
}

#mq_chanel2506 .block01 .flex_left h3 {
  width: 500px;
  margin-bottom: 32px;
}

#mq_chanel2506 .block01 .flex_right {
  width: 460px;
  height: 515px;
  overflow: hidden;
}

#mq_chanel2506 .block01 .flex_right .ph {
  width: 731px;
  margin-left: -80px;
  margin-top: -200px;
}

#mq_chanel2506 .block01 .flex_right.is-active {
    animation: clip-left 1s ease-in-out .7s forwards;
}


#mq_chanel2506 .block01 .headings {
  width: 537px;
  margin: 0 auto;
  margin-bottom: 80px;
}

#mq_chanel2506 .product {
  padding-left: 40px;
  position: relative;
}


#mq_chanel2506 .product::after {
  display: block;
  content: "";
  position: absolute;
  width: 10px;
  background-color: #040000;
  left: 0;
}

#mq_chanel2506 .block01 .product {
  width: 495px;
  margin-bottom: 81px;
}

#mq_chanel2506 .block01 .product::after {
  height: 220px;
  top: -4px;
}


#mq_chanel2506 .block01 .product_name {
  width: 189px;
  margin-bottom: 30px;
}

#mq_chanel2506 .block01 .product_text {
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 10px;
}
/*-------------------------------------------------------------------------------- block02*/
#mq_chanel2506 #index02 {
  padding-top: 80px;
  padding-bottom: 120px;
}

#mq_chanel2506 .block02 {
  padding-top: 50px;
  position: relative;
}


#mq_chanel2506 .block02::before {
  top: -80px;
}

#mq_chanel2506 .block02 .headings {
  width: 680px;
  margin: 0 auto;
  margin-bottom: 25px;
}

#mq_chanel2506 .block02 .lead {
  text-align: center;
  margin-bottom: 74px;
}

#mq_chanel2506 .block02 h3 {
  width: 304px;
  margin-top: 60px;
}

#mq_chanel2506 .block02 .flex_wrapper {
  width: 100%;
  justify-content: space-between;
  position: relative;
}

#mq_chanel2506 .block02 .flex_wrapper .ph {
 width: calc(140px + 50vw);
}

#mq_chanel2506 .block02 .flex_wrapper:first-child .ph.is-active {
    animation: clip-right 1s ease-in-out 0s forwards;
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(2) .ph.is-active {
    animation: clip-left 1s ease-in-out .5s forwards;
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(3) .ph.is-active {
    animation: clip-right 1s ease-in-out .5s forwards;
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(2) {
  position: relative;
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(2)::after {
  width: 26px;
  height: 355px;
  top: -355px;
  left: calc(50vw - 490px);
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(3)::after {
  width: 26px;
  height: 155px;
  top: -155px;
  right: calc(50vw - 490px);
}

#mq_chanel2506 .block02 .flex_wrapper:nth-child(2n+1) .flex_left {
  margin-left: calc(50vw - 490px);
}

#mq_chanel2506 .block02 .flex_wrapper:not(:last-child) {
  margin-bottom: 100px;
}

#mq_chanel2506 .block02 .flex_wrapper:last-child {
  align-items: center;
}

#mq_chanel2506 .block02 p.text {
  width: 290px;
  margin-right: calc(50vw - 490px);
  margin-top: 72px;
}

#mq_chanel2506 .block02 .caption_wrapper {
  width: 275px;
  margin-bottom: 67px;
}

#mq_chanel2506 .block02 .caption_wrapper .caption:first-child {
  margin-bottom: 15px;
}

#mq_chanel2506 .block02 .btn {
  width: 270px;
}

#mq_chanel2506 .block02 .btn img {
  width: 187px;
}

/*-------------------------------------------------------------------------------- block03*/
#mq_chanel2506 #index03 {
  padding-top: 90px;
  padding-bottom: 110px;
}

#mq_chanel2506 .block03 .product_name {
  width: 178px;
  margin-bottom: 26px;
}

#mq_chanel2506 .block03 h2 {
  width: 826px;
  margin: 0 auto;
}

#mq_chanel2506 .block03::before {
  top: -90px;
}

#mq_chanel2506 .block03 .ph1 {
  height: 835px;
  width: 980px;
  overflow: hidden;
  margin: 0 auto;
}

#mq_chanel2506 .block03 .ph1 img {
  width: 1000px;
  margin-top: -242px;
  margin-left: -10px;
}

#mq_chanel2506 .block03 .product {
  margin-bottom: 80px;
  margin-left: calc(50vw - 280px);;
}

#mq_chanel2506 .block03 .product::after {
  height: 178px;
  top: -4px;
}

#mq_chanel2506 .block03 .product .caption {
  width: 480px;
}

#mq_chanel2506 .block03 .product_text {
  width: 490px;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 10px;
}

#mq_chanel2506 .block03 .product_text sup {
  top: -0.3em;
}

#mq_chanel2506 .block03 .btn {
  width: 488px;
  margin-bottom: 213px;
}

#mq_chanel2506 .block03 .btn img {
  width: 187px;
}

#mq_chanel2506 .block03 .column {
  padding-bottom: 80px;
  position: relative;
}

#mq_chanel2506 .block03 .column_bg {
  mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 20%);
  background-image: url(../img/block03_bg@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#mq_chanel2506 .block03 .flex_wrapper {
  width: 836px;
  margin: 0 auto;

  justify-content: space-between;
}

#mq_chanel2506 .block03 .flex_wrapper h3 {
  width: 358px;
  margin-bottom: 37px;
}

#mq_chanel2506 .block03 .flex_wrapper .caption {
  margin-top: 22px;
}

#mq_chanel2506 .block03 .flex_left {
  width: 470px;
}

#mq_chanel2506 .block03 .flex_right {
  mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 20%);
  width: 314px;
}

#mq_chanel2506 .block03 .flex_right .copy {
  font-size: 13px;
  line-height: 20px;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* #mq_chanel2506 .block03 .flex_right .copy span {
  font-size: 24px;
} */

/*-------------------------------------------------------------------------------- block04*/
#mq_chanel2506 #index04 {
  padding-top: 90px;
  padding-bottom: 140px;
}

#mq_chanel2506 .block04 {
  padding-bottom: 132px;
}

#mq_chanel2506 .block04::before {
  top: -90px;
}

#mq_chanel2506 .block04 h2 {
  width: 681px;
  margin: 0 auto;
  margin-bottom: 70px;
}

#mq_chanel2506 .block04 .flex_wrapper {
  justify-content: space-between;
}

#mq_chanel2506 .block04 .flex_left {
  position: relative;
}

#mq_chanel2506 .block04 .flex_left img {
  border: 4px solid #000;
  width: 623px;
  margin-bottom: 10px;
}

#mq_chanel2506 .block04 .flex_right {
  padding-top: 64px;
  width: 300px;
}

#mq_chanel2506 .block04 .caption_list {
  margin-bottom: 64px;
}

#mq_chanel2506 .block04 .caption_list li {
  opacity: 0;
  transform: translateY(20px);
}

#mq_chanel2506 .block04 .number_list li {
  position: absolute;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
}

#mq_chanel2506 .block04 .number_list li:first-child {
  top: 120px;
  left: 107px;
}

#mq_chanel2506 .block04 .number_list li:nth-child(2) {
  top: 305px;
  left: 288px;
}

#mq_chanel2506 .block04 .number_list li:nth-child(3) {
  top: 481px;
  left: 165px;
}

#mq_chanel2506 .block04 .flex_wrapper.is-show li:first-child {
  animation: fade-up 1s ease-in-out 0s forwards;
}

#mq_chanel2506 .block04 .flex_wrapper.is-show li:nth-child(2) {
  animation: fade-up 1s ease-in-out .7s forwards;
}

#mq_chanel2506 .block04 .flex_wrapper.is-show li:nth-child(3) {
  animation: fade-up 1s ease-in-out 1.4s forwards;
}


#mq_chanel2506 .block04 .caption_list li:not(:last-child) {
  margin-bottom: 32px;
}
/*-------------------------------------------------------------------------------- block05*/
#mq_chanel2506 .block05 {
  background-color: #000;
  padding-top: 119px;
  padding-bottom: 77px;
  overflow: hidden;
}

#mq_chanel2506 .block05 h2 {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 56px;
}

#mq_chanel2506 .block05 h3 {
  width: 600px;
  margin: 0 auto;
  margin-bottom: 70px;
}

/* スライダー */
#mq_chanel2506 .block05 .swiper {
  width: 555px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

#mq_chanel2506 .block05 .swiper-slide img {
  width: 440px;
  margin: 0 auto;
  transition: all ease .5s;
  margin-top: 53px;
  display: block;
}

#mq_chanel2506 .block05 .swiper-slide.swiper-slide-active img {
  width: 555px;
  margin-top: 0;
}

#mq_chanel2506 .block05 .swiper-slide .slider_text {
  margin-bottom: 36px;
  opacity: 0;
  visibility: hidden;
  transition: all ease .5s;
}

#mq_chanel2506 .block05 .swiper-slide.swiper-slide-active .slider_text {
  opacity: 1;
  visibility: visible;
}

#mq_chanel2506 .block05 .swiper-slide h4 {
  margin: 0 auto;
  margin-bottom: 36px;
  margin-top: 50px;
}

#mq_chanel2506 .block05 .swiper-slide p {
  color: #fff;
  width: 454px;
  margin: 0 auto;
}

#mq_chanel2506 .block05 .swiper-slide p.caption {
  margin-top: 14px;
}

#mq_chanel2506 .block05 .swiper-slide .btn {
  width: 488px;
  opacity: 0;
  visibility: hidden;
  transition: all ease .5s;
}

#mq_chanel2506 .block05 .swiper-slide.swiper-slide-active .btn {
  opacity: 1;
  visibility: visible;
}

#mq_chanel2506 .block05 .swiper-slide .btn a {
  border: 1px solid #fff;
}

#mq_chanel2506 .block05 .swiper-slide .btn img {
  width: 187px;
}

#mq_chanel2506 .block05 .swiper-slide.slide1 h4 {
  width: 394px;
}

#mq_chanel2506 .block05 .swiper-slide.slide2 h4 {
  width: 354px;
}

#mq_chanel2506 .block05 .swiper-slide.slide3 h4 {
  width: 437px;
}

#mq_chanel2506 .block05 .swiper-slide.slide4 h4 {
  width: 322px;
}

#mq_chanel2506 .block05 .swiper-slide.slide5 h4 {
  width: 393px;
}

#mq_chanel2506 .block05 .swiper-slide.slide6 h4 {
  width: 464px;
}

#mq_chanel2506 .block05 .swiper-button-prev,
#mq_chanel2506 .block05 .swiper-button-next {
  background-image: url(../img/slider_arrow@2x.png);
  background-size: 19px 14px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  top: 252px;
}

#mq_chanel2506 .block05 .swiper-button-prev:hover,
#mq_chanel2506 .block05 .swiper-button-next:hover {
  cursor: pointer;
  opacity: .7;
  transition: all ease .6s;
}

#mq_chanel2506 .block05 .swiper-button-prev {
  left: -93px;
}

#mq_chanel2506 .block05 .swiper-button-next {
  right: -93px;
  transform: scale(-1, 1);
}

#mq_chanel2506 .btn_list {
  margin-bottom: 90px;
  margin-top: 160px;
}

#mq_chanel2506 .btn_list .btn:not(:last-child) {
  margin-bottom: 40px;
}

#mq_chanel2506 .btn_list .btn:first-child img {
  width: 232px;
}

#mq_chanel2506 .btn_list .btn:nth-child(2) img {
  width: 155px;
}

#mq_chanel2506 .btn_list .btn:nth-child(3) img {
  width: 116px;
}

#mq_chanel2506 .btn_list .btn:nth-child(4) img {
  width: 146px;
}



/*----------------------------------------------------------------------------contact/credit/share */
#mq_chanel2506 .contact {
  width: 445px;
  margin: 0 auto;
  margin-bottom: 78px;
}

#mq_chanel2506 .contact a {
  border-bottom: 1px solid #000;
  display: inline;
  padding-bottom: 3px;
}

#mq_chanel2506 .staff_credit {
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  margin-bottom: 80px;
}

#mq_chanel2506 .share {
  margin: 0 auto;
  text-align: center;
}

#mq_chanel2506 .share_headings {
  width: 75px;
  margin: 0 auto 40px;
}

#mq_chanel2506 .share_list {
  text-align: center;
}

#mq_chanel2506 .share_item {
  width: 60px;
  display: inline-block;
  margin: 0 25px;
  position: relative;
}

#mq_chanel2506 .share_item .default {
  opacity: 1;
  transition: all ease .6s;
}

#mq_chanel2506 .share_item .over {
  transition: all ease .15s;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

#mq_chanel2506 .share_item a:hover {
  opacity: 1;
}

#mq_chanel2506 .share_item:hover .default {
  overflow: 0;
}

#mq_chanel2506 .share_item:hover .over {
    opacity: 1;
}