.lHeader-fixedWraper{
  z-index: 100;
}

#rf10-20-f4l{
  position: relative;
/*  padding-top: 70px;*/
  background: #000;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-feature-settings: "palt";
  color: #FFF;
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: initial;
  z-index: 1;
}

#rf10-20-f4l, #rf10-20-f4l *, #rf10-20-f4l *::before, #rf10-20-f4l *::after{
  box-sizing: border-box;
}

.gothic{
  font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fadeIn{
  opacity: 0;
  transition: opacity 0.6s;
}

.inview.fadeIn{
  opacity: 1;
}

main img{
  width: 100%;
  height: auto;
}

:not(.str-inner) > :where(.plain-html) sup{
/*  vertical-align: super;*/
  font-size: 0.6em;
}

main section{
  overflow: hidden;
}

.br-sp{
  display: none;
}

.attention{
  position: relative;
  display: block;
  padding-left: 1.3em;
  line-height: 1.4;
}

.attention a, .attention2 a{
  text-decoration: underline;
  transition: opacity 0.3s;
}

.attention a:hover, .attention2 a:hover{
  opacity: 0.7;
}

.attention::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

small{
  counter-reset: num 0;
}

.attention2{
  position: relative;
  display: block;
  padding-left: 2.5em;
  line-height: 1.4;
}

.attention2::before{
  counter-increment: num 1;
  content: "※" counter(num);
  position: absolute;
  top: 0;
  left: 0;
}

.attention:nth-child(n+2), .attention2:nth-child(n+2){
  margin-top: 4px;
}

.operation-prohibited{
  position: relative;
}

.operation-prohibited::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}


@media (min-width: 768px){
  .sp-only{
    display: none !important;
  }
}

@media (max-width: 767px){
  #rf10-20-f4l{
    padding-top: 13.33334vw;
    z-index: 5;
  }

  .mFooter-toTop{
    z-index: 4;
  }

  .br-sp{
    display: inline;
  }

  .pc-only{
    display: none !important;
  }

  .br-pc{
    display: none;
  }
}


/* kv
-----------------------------------------------*/

.kv{
  overflow: hidden;
}

.kv__inner{
  aspect-ratio: 1400 / 600;
  background: url('/-/media/Project/Canon/CanonJP/Personal/product/camera/rf/rf10-20-f4l/feature/image/kv-bg.jpg') no-repeat center center / cover;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.kv__img{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 49.07143%;
  z-index: 10;
  transition: opacity 0.6s;
  opacity: 0;
  transition-delay: 0.5s;
}

.kv__num{
  position: absolute;
  left: 14.57143%;
  top: 28%;
  width: 40.14286%;
  z-index: 1;
  transition: opacity 0.6s;
  opacity: 0;
}

.kv__text{
  position: absolute;
  left: 14.57143%;
  top: 72.16667%;
  line-height: 1;
  font-size: 0;
  z-index: 1000;
}

.kv__text p{
  display: inline-block;
}

.kv__text span{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.6s, opacity 0.15s;
  transition-delay: 1s;
  opacity: 0;
  width: 0;
}

.inview .kv__text span{
  opacity: 1;
  width: 100%;
}

.kv__new{
  margin-right: 3px;
}

.kv__name{
  margin-top: 5px;
}

.kv__new span{
  background: #df0011;
  font-size: 23px;
  letter-spacing: 0.1em;
  padding: 0 8px;
}

.kv__release span{
  background: #000;
  font-size: 23px;
  letter-spacing: 0.1em;
  padding: 0 8px;
}

.kv__name span{
  background: #000;
  font-size: 40px;
  letter-spacing: 0.098em;
  padding: 0 8px;
  z-index: 100;
}

.kv__name strong{
  color: #df0011;
}

.inview .kv__img{
  opacity: 1;
}

.inview .kv__num{
  opacity: 1;
}

.inview .kv__new{
  opacity: 1;
}

.inview .kv__release{
  opacity: 1;
}

.inview .kv__name{
  opacity: 1;
}

.cosButton{
  position: absolute;
  left: 0;
  top: 595px;
  z-index: 9999;
  transition: opacity 0.6s;
  transition-delay: 1s;
  opacity: 0;
}

.cosButton.inview{
  opacity: 1;
}

.cosButton a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 185px;
  height: 50px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  line-height: 1.41667;
  letter-spacing: -0.05em;
  transition: background 0.3s, color 0.3s;
  background: #FFF;
}

:not(.str-inner) > :where(.plain-html) a{
  color: #000;
}
.cosButton a:hover{
  background: #000;
  color: #FFF;
}

.cosButton__icon{
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
  margin-left: 10px;
}

.cosButton__icon::before, .cosButton__icon::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center / contain;
  transition: opacity 0.3s;
}

.cosButton__icon::before{
  background-image: url('/-/media/Project/Canon/CanonJP/Personal/product/camera/rf/rf10-20-f4l/feature/image/cos-btn-icon-black.png');
  opacity: 1;
}

.cosButton__icon::after{
  background-image: url('/-/media/Project/Canon/CanonJP/Personal/product/camera/rf/rf10-20-f4l/feature/image/cos-btn-icon-white.png');
  opacity: 0;
}

.cosButton a:hover .cosButton__icon::before{
  opacity: 0;
}

.cosButton a:hover .cosButton__icon::after{
  opacity: 1;
}


@media (min-width: 1401px){
  .kv__new span{
    padding: 0 0.57102vw;
    font-size: 1.64286vw;
  }
  
  .kv__release span{
    padding: 0 0.57102vw;
    font-size: 1.64286vw;
  }
  
  .kv__name span{
    padding: 0 0.57102vw;
    font-size: 2.85714vw;
  }
}

@media (min-width: 768px) and (max-width: 1049px){
  .cosButton{
    top: calc(70px + 50vw);
  }

  .cosButton a{
    width: 17.61905vw;
    height: 4.7619vw;
    font-size: 1.14286vw;
  }

  .cosButton__icon{
    width: 2vw;
    height: 2vw;
    margin-left: 0.95238vw;
  }
}

@media (min-width: 1050px) and (max-width: 1400px){
  .kv__inner{
    width: auto;
    height: 600px;
    background-image: url('/-/media/Project/Canon/CanonJP/Personal/product/camera/rf/rf10-20-f4l/feature/image/kv-bg-sp.jpg');
  }
}

@media (min-width: 768px) and (max-width: 1120px){
  .kv__inner{
    width: 133.33333vw;
  }

  .kv__new span{
    padding: 0 0.71429vw;
    font-size: 2.19048vw;
  }
  
  .kv__release span{
    padding: 0 0.71429vw;
    font-size: 2.19048vw;
  }
  
  .kv__name span{
    padding: 0 0.71429vw;
    font-size: 3.80952vw;
  }
}

@media (max-width: 767px){
  .kv__inner{
    aspect-ratio: 750 / 1000;
  }

  .kv__img{
    width: 82.93333vw;
    height: auto;
  }

  .kv__num{
    width: 89.46666vw;
    top: 9.73333vw;
    left: 5.46666vw;
  }

  .kv__text{
    top: auto;
    left: 5.19999vw;
    bottom: 6.66666vw;
  }

  .kv__new span{
    font-size: 3.73333vw;
  }

  .kv__release span{
    font-size: 3.73333vw;
  }

  .kv__name span{
    font-size: 5.6vw;
  }

  .cosButton{
    position: fixed;
    top: auto;
    bottom: 0;
    width: 100%;
  }

  .cosButton a{
    width: 100%;
    height: 14.4vw;
    border: none;
    background: #dfdfdf;
    font-size: 3.2vw;
    letter-spacing: 0.12em;
  }

  .cosButton__icon{
    width: 4.26667vw;
    height: 4.26667vw;
    margin-left: 2.66667vw;
  }
}



/* page__nav
-----------------------------------------------*/

.page__nav{
  background: #000;
  position: sticky;
/*  top: 0px;*/
  top: 46px;
  z-index: 9999;
}

.page__nav ul{
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}

.page__nav ul li{
  position: relative;
  flex-grow: 1;
  z-index: 1;
}

.page__nav ul li:nth-child(n+2)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: 30px;
  border-left: 1px solid #808080;
}

.page__nav ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #FFF;
  font-size: 14px;
  text-align: center;
  height: 50px;
  z-index: 10;
}

.page__nav ul li a::after{
  content: "";
  position: absolute;
  left: 22.16981%;
  bottom: 7px;
  width: 0;
  border-bottom: 3px solid #df0011;
  transition: width 0.3s;
}

.page__nav ul li a:hover::after, .page__nav ul li.current a::after{
  width: 55.66038%;
}


@media (max-width: 767px){
  .page__nav{
/*    top: 13.33333vw;*/
    top: 50px;
  }

  .page__nav ul{
    flex-wrap: wrap;
  }

  .page__nav ul li:nth-child(4n+1){
    width: 29%;
  }
  .page__nav ul li:nth-child(4n+2){
    width: 23%;
  }
  .page__nav ul li:nth-child(4n+3){
    width: 24%;
  }
  .page__nav ul li:nth-child(4n){
    width: 24%;
  }

  .page__nav ul li::before{
    display: none;
  }

  .page__nav ul li a{
    height: 8.53332vw;
    font-size: 2.93332vw;
  }

  .page__nav ul li a::after {
    left: 15%;
    bottom: 0.93333vw;
    width: 0;
    border-bottom-width: 0.4vw;
  }
  .page__nav ul li a:hover::after, .page__nav ul li.current a::after{
    width: 70%;
  }
}


/* impression
-----------------------------------------------*/

.impression{
  position: relative;
  background: #404040;
  padding: 110px 0 140px;
}

.impression__backtext-1{
  position: absolute;
  right: calc(50% - 700px + 18px);
  top: 30px;
  width: 943px;
  z-index: 1;
  transition: transform 0.6s;
  transform: translate(60px, 0);
}

.impression__backtext-2{
  position: absolute;
  left: calc(50% - 700px + 48px);
  bottom: 15px;
  width: 1131px;
  z-index: 1;
  transition: transform 0.6s;
  transform: translate(-60px, 0);
}

.inview.impression__backtext-1,
.inview.impression__backtext-2{
  transform: translate(0, 0);
}

.impression__inner{
  position: relative;
  width: 800px;
  max-width: 89.33333vw;
  margin: 0 auto;
  z-index: 10;
}

.impression__title{
  margin-bottom: 30px;
  font-size: 0;
}

.impression__title small{
  display: block;
  font-size: 21px;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}

.impression__title > span{
  display: inline-block;
}

.impression__title > span:nth-of-type(n+2){
  margin-top: 7px;
}

.impression__title > span > span{
  display: block;
  overflow: hidden;
  background: #000;
  padding: 0 8px;
  font-size: 32px;
  letter-spacing: 0.2em;
  line-height: 1.2;
  white-space: nowrap;
  transition: width 0.9s, opacity 0.15s;
  transition-delay: 0.6s;
  width: 0;
  opacity: 0;
}

.impression__title.inview > span > span{
  width: 100%;
  opacity: 1;
}

.impression__movie{
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 40px;
}

.impression__movie iframe{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.impression__btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 340px;
  height: 70px;
  border-radius: 35px;
  margin: 0 auto;
  font-size: 22px;
  letter-spacing: 0.1em;
  transition: background 0.3s, color 0.3s;
  background: #FFF;
  color: #000;
}

.impression__btn:hover{
  background: #000;
  color: #FFF;
}


@media (min-width: 768px) and (max-width: 1120px){
  .impression{
    padding: 10.47619vw 0 13.33333vw;
  }
  
  .impression__backtext-1{
    right: 1%;
    top: 2.85714vw;
    width: 89.80952vw;
  }
  
  .impression__backtext-2{
    left: 1%;
    bottom: 1.42857vw;
    width: 107.71428vw;
    transform: translate(-5.71428vw, 0);
  }
  
  .impression__inner{
    position: relative;
    width: 76.19047vw;
    max-width: 89.33333vw;
    margin: 0 auto;
    z-index: 10;
  }
  
  .impression__title{
    margin-bottom: 2.85714vw;
  }
  
  .impression__title small{
    font-size: 2vw;
    margin-bottom: 0.47619vw;
  }
  
  .impression__title > span:nth-of-type(n+2){
    margin-top: 0.66666vw;
  }
  
  .impression__title > span > span{
    padding: 0 0.7619vw;
    font-size: 3.04761vw;
  }
  
  .impression__movie{
    margin-bottom: 3.80952vw;
  }
  
  .impression__btn{
    width: 32.38095vw;
    height: 6.66666vw;
    border-radius: 3.33333vw;
    font-size: 2.09523vw;
  }
}


@media (max-width: 767px){
  .impression{
    padding: 16.66666vw 0 13.33332vw;
  }

  .impression__title{
    margin-bottom: 4.66666vw;
  }

  .impression__title small{
    font-size: 3.19999vw;
    letter-spacing: 0.1em;
    margin-bottom: 0.66667vw;
  }

  .impression__title > span > span{
    font-size: 4vw;
    letter-spacing: 0.1em;
  }

  .impression__movie{
    margin-bottom: 5.33333vw;
  }

  .impression__btn{
    width: 53.33332vw;
    height: 10.66666vw;
    border-radius: 5.33333vw;
    font-size: 3.19999vw;
  }

  .impression__backtext-1{
    width: 83.46666vw;
    top: 2.66666vw;
    right: 1.73333vw;
  }

  .impression__backtext-2{
    width: 98.26666vw;
    bottom: 0.66667vw;
    left: 0.66667vw;
  }
}


/* point1
-----------------------------------------------*/

#point1{
  padding: 140px 0 90px;
}

.color-light{
  background: #FAFAFC;
  color: #000;
}

.section__inner{
  position: relative;
  width: 1000px;
  max-width: 89.33333vw;
  margin: 0 auto;
}

.section__inner > *{
  position: relative;
  z-index: 10;
}

.point__title{
  margin-bottom: 30px;
  font-size: 0;
}

.point__title small{
  position: relative;
  display: inline-block;
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  padding: 0 15px 10px;
  margin-bottom: 12px;
}

.point__title small::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  background: #df0011;
  transition: width 0.6s;
  transition-delay: 0.3s;
  width: 0;
}

.point__title.inview small::after{
  width: 100%;
}


.point__title > span{
  display: inline-block;
}

.point__title > span:nth-of-type(n+2){
  margin-top: 7px;
}

.point__title > span > span{
  display: block;
  overflow: hidden;
  background: #FFF;
  padding: 0 8px;
  font-size: 48px;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
  transition: width 0.9s, opacity 0.15s;
  transition-delay: 0.9s;
  width: 0;
  opacity: 0;
}

.point__title > span.red > span{
  background: #df0011 !important;
  font-size: 40px !important;
  color: #FFF !important;
}

.point__title sup{
  position: relative;
  font-size: 0.4em;
  vertical-align: top;
  top: 0.2em;
}

.point__title.inview > span > span{
  width: 100%;
  opacity: 1;
}

.color-light .point__title > span > span{
  background: #000;
  color: #FFF;
}

#point1 .point__title{
  margin-bottom: 50px;
}

.point__num{
  position: absolute;
  z-index: 1;
  transition: transform 0.6s, opacity 0.3s;
  opacity: 0;
}

.inview.point__num{
  transform: translate(0, 0) !important;
  opacity: 1;
}

#point1 .point__num{
  right: 6px;
  top: -44px;
  width: 217px;
  transform: translate(60px, 0);
}

.point1__img{
  margin-bottom: 15px;
}

.point1__text{
  width: 768px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
}

.point1__img-text{
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
  width: calc(100% - 4em);
  margin-top: -2.4em;
}
.point1__text small{
  display: block;
  font-size: 12px;
  margin-top: 10px;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point1{
    padding: 13.33333vw 0 8.57142vw;
  }
  
  .point__title{
    margin-bottom: 2.85714vw;
  }
  
  .point__title small{
    font-size: 2.85714vw;
    padding: 0 1.42857vw 0.95238vw;
    margin-bottom: 1.14285vw;
  }
  
  .point__title small::after{
    height: 0.57142vw;
  }
  
  .point__title > span:nth-of-type(n+2){
    margin-top: 0.66666vw;
  }
  
  .point__title > span > span{
    padding: 0 0.7619vw;
    font-size: 4.57142vw;
  }
  
  .point__title > span.red > span{
    font-size: 3.80952vw !important;
  }
  
  #point1 .point__title{
    margin-bottom: 4.7619vw;
  }
  
  #point1 .point__num{
    right: 0.57142vw;
    top: -4.19047vw;
    width: 20.66666vw;
    transform: translate(5.71428vw, 0);
  }
  
  .point1__img{
    margin-bottom: 1.42857vw;
  }
  
  .point1__text{
    width: 73.14285vw;
    font-size: 1.71428vw;
  }
  
  .point1__text small{
    font-size: 1.14285vw;
    margin-top: 0.95238vw;
  }

  .point1__img-text{
    font-size: 1.14285vw;
    width: calc(100% - 6em);
    margin-top: -1.6em;
  }
}


@media (max-width: 767px){
  #point1{
    padding: 14.66667vw 0;
  }

  #point1 .point__num{
    width: 25.99999vw;
    right: 0;
    top: -11.46666vw;
  }

  #point1 .point__title{
    margin-bottom: 8.79999vw;
  }

  .point__title small{
    font-size: 3.59999vw;
    padding: 0 2vw 1.33333vw;
    margin-bottom: 1.33333vw;
  }

  .point__title small::after{
    height: 0.53333vw;
  }

  .point__title > span.red > span{
    font-size: 4.8vw !important;
  }

  .point__title > span:nth-of-type(n+2){
    margin-top: 1.33333vw;
  }

  .point__title > span > span{
    font-size: 5.86666vw;
  }

  .point1__img{
    margin-bottom: 4.00000vw;
  }

  .point1__text{
    width: 100%;
    font-size: 3.46667vw;
  }
  .point1__text small{
    margin-top: 2.66666vw;
    font-size: 2.66666vw;
  }
  .point1__img-text{
    font-size: 2.66666vw;
    width: calc(100% - 6em);
    margin-top: -1.8em;
  }
}


/* point2
-----------------------------------------------*/

#point2{
  padding: 90px 0;
}

.color-dark{
  background: linear-gradient(135deg, #000, #444);
}

#point2 .point__title{
  margin: 0 0 40px 226px;
}

#point2 .point__num{
  left: 0;
  top: 140px;
  width: 248px;
  transform: translate(-60px, 0);
}

.point2__textImgBox{
  display: flex;
  justify-content: space-between;
  margin: 0 0 80px 226px;
}

.point2__textImgBox p{
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
  width: 322px;
}

.point2__textImgBox p small{
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: 10px;
}

.point2__textImgBox__img{
  width: 392px;
}

.point2__slider{
  width: 94%;
  margin: 0 auto;
}

.point2__slider figcaption{
  display: block;
  text-align: right;
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.point2__slider .slick-dots{
  position: relative;
  margin: 30px 0 0;
  font-size: 0;
  bottom: 0;
}

.point2__slider .slick-dots li button:before{
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 100%;
  background-color: #787878;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1 !important;
}

.point2__slider .slick-dots li.slick-active button:before{
  background: #df0011;
}

.point2__slider .slick-prev, .point2__slider .slick-next{
  top: calc(50% - 18px);
  width: 60px;
  height: 60px;
  transition: opacity 0.3s;
}

.point2__slider .slick-prev:hover, .point2__slider .slick-next:hover{
  opacity: 0.7;
}

.point2__slider .slick-prev{
  left: -60px;
}

.point2__slider .slick-next{
  right: -60px;
}

.point2__slider .slick-prev::before{
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  transform: rotate(-45deg);
  right: 10px;
  top: calc(50% - 13px);
}

.point2__slider .slick-next::before{
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
  left: 10px;
  top: calc(50% - 13px);
}


@media (min-width: 768px) and (max-width: 1120px){
  #point2{
    padding: 8.57142vw 0;
  }
  
  #point2 .point__title{
    margin: 0 0 3.80952vw 21.5238vw;
  }
  
  #point2 .point__num{
    top: 13.33333vw;
    width: 23.61904vw;
    transform: translate(-5.71428vw, 0);
  }
  
  .point2__textImgBox{
    margin: 0 0 7.61904vw 21.5238vw;
  }
  
  .point2__textImgBox p{
    font-size: 1.71428vw;
    width: 30.66666vw;
  }
  
  .point2__textImgBox__img{
    width: 32.33333vw;
  }
  
  .point2__slider figcaption{
    margin-top: 0.95238vw;
    font-size: 1.5238vw;
  }
  
  .point2__slider .slick-dots{
    margin: 2.85714vw 0 0;
  }
  
  .point2__slider .slick-dots li button:before{
    width: 1.23809vw;
    height: 1.23809vw;
  }
  
  .point2__slider .slick-prev, .point2__slider .slick-next{
    top: 48%;
    width: 5.71428vw;
    height: 5.71428vw;
    transition: opacity 0.3s;
  }

  .point2__slider .slick-prev{
    left: -5.71428vw;
  }
  
  .point2__slider .slick-next{
    right: -5.71428vw;
  }
  
  .point2__slider .slick-prev::before{
    width: 2.47619vw;
    height: 2.47619vw;
    right: 0.95238vw;
    top: calc(50% - 1.23809vw);
  }
  
  .point2__slider .slick-next::before{
    width: 2.47619vw;
    height: 2.47619vw;
    left: 0.95238vw;
    top: calc(50% - 1.23809vw);
  }
}

@media (max-width: 767px){
  #point2{
    padding: 16vw 0 9.33332vw;
  }

  #point2 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point2 .point__title{
    margin: 0 auto 7.99999vw;
  }

  .point2__textImgBox{
    display: block;
    margin: 0 auto 9.33332vw;
  }

  .point2__textImgBox p{
    width: 100%;
    font-size: 3.46667vw;
    margin-bottom: 5.33333vw;
  }

  .point2__textImgBox__img{
    display: block;
    width: 56.93332vw;
    margin: 0 auto;
  }

  .point2__slider{
    width: 100%;
  }

  .point2__slider .slick-prev, .point2__slider .slick-next{
    top: 38%;
    width: 7.99999vw;
    height: 7.99999vw;
  }
  
  .point2__slider .slick-prev{
    left: -7.99999vw;
  }
  
  .point2__slider .slick-next{
    right: -7.99999vw;
  }
  
  .point2__slider .slick-prev::before{
    width: 3.46667vw;
    height: 3.46667vw;
    right: 0;
    top: calc(50% - 1.73333vw);
  }
  
  .point2__slider .slick-next::before{
    width: 3.46667vw;
    height: 3.46667vw;
    left: 0;
    top: calc(50% - 1.73333vw);
  }

  .point2__slider figcaption{
    font-size: 2.93332vw;
    margin-top: 1.33333vw;
  }

  .point2__slider .slick-dots{
    margin-top: 2.66667vw;
  }

  .point2__slider .slick-dots li{
    margin: 0;
    width: 4vw;
    height: 4vw;
  }

  .point2__slider .slick-dots li button{
    width: 4vw;
    height: 4vw;
  }

  .point2__slider .slick-dots li button:before{
    width: 1.6vw;
    height: 1.6vw;
  }
}


/* point3
-----------------------------------------------*/

#point3{
  padding: 100px 0;
}

#point3 .point__title{
  margin-bottom: 40px;
}

#point3 .point__num{
  right: 0;
  top: -81px;
  width: 248px;
  transform: translate(60px, 0);
}

.point3__textImgBox{
  display: flex;
  justify-content: space-between;
}

.point3__textImgBox p{
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
  width: 422px;
}

.point3__textImgBox__img{
  width: 543px;
  margin-top: -70px;
}

.point3__textImgBox__img img{
  width: 744px;
}

.point3__products{
  position: relative;
  margin-top: -194px;
  z-index: 100;
  display: flex;;
}

.point3__products li:nth-child(n+2){
  margin-left: 66px;
}

.point3__products__img{
  position: relative;
  width: 272px;
  margin: 0 auto 15px;
  aspect-ratio: 272 / 485;
}

.point3__products li:nth-child(1) img:nth-child(1){
  width: 62.5%;
  position: absolute;
  top: 9.27835%;
  left: 50%;
  transform: translate(-50%, 0);
}

.point3__products li:nth-child(1) img:nth-child(2){
  position: absolute;
  width: 77.20588%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.point3__products li:nth-child(2) img:nth-child(1){
  width: 62.5%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.point3__products li:nth-child(2) img:nth-child(2){
  position: absolute;
  bottom: 0;
}

.point3__products h3{
  position: relative;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.06em;
}

.point3__products h3 .new{
  position: absolute;
  left: 0;
  bottom: 100%;
  line-height: 1.1;
  background: #df0011;
  padding: 0 2px;
  font-size: 19px;
  color: #FFF;
}

.point3__products p span{
  display: block;
  line-height: 1.2;
  background: #df0011;
  font-size: 22px;
  color: #FFF;
  text-align: center;
}

.point3__products p span:nth-child(n+2){
  margin-top: 4px;
}

.point3__products li:nth-child(2) p span{
  background: #000;
}

@media (min-width: 768px) and (max-width: 1120px){
  #point3{
    padding: 9.5238vw 0;
  }
  
  #point3 .point__title{
    margin-bottom: 3.80952vw;
  }
  
  #point3 .point__num{
    top: -7.71428vw;
    width: 23.61904vw;
    transform: translate(5.71428vw, 0);
  }
  
  .point3__textImgBox p{
    font-size: 1.71428vw;
    width: 40.19047vw;
  }
  
  .point3__textImgBox__img{
    width: 44.71428vw;
    margin-top: -6.66666vw;
  }
  
  .point3__textImgBox__img img{
    width: 50.85714vw;
  }
  
  .point3__products{
    margin-top: -10.47619vw;
  }
  
  .point3__products li:nth-child(n+2){
    margin-left: 6.28571vw;
  }
  
  .point3__products__img{
    width: 25.90476vw;
    margin: 0 auto 1.42857vw;
  }
  
  .point3__products h3{
    font-size: 2.28571vw;
  }
  
  .point3__products h3 .new{
    padding: 0 0.19047vw;
    font-size: 1.80952vw;
  }

  .point3__products p{
    font-size: 1.71429vw;
    margin-top: 0.95238vw;
  }

  .point3__products p span{
    font-size: 2.09523vw;
  }
  
  .point3__products p span:nth-child(n+2){
    margin-top: 0.38095vw;
  }  
}


@media (max-width: 767px){
  #point3{
    padding: 15.33333vw 0 16vw;
  }

  #point3 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point3 .point__title{
    margin-bottom: 8vw;
  }

  .point3__textImgBox{
    display: block;
    margin-bottom: 7.19999vw;
  }

  .point3__textImgBox__img img{
    width: 100%;
  }

  .point3__textImgBox p{
    width: 100%;
    font-size: 3.46666vw;
    margin-bottom: 6.66666vw;
  }

  .point3__textImgBox__img{
    width: 100%;
    margin: 0;
  }

  .point3__products{
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }

  .point3__products li{
    width: 48%;
  }

  .point3__products li:nth-child(n+2){
    margin: 0;
  }

  .point3__products__img{
    width: 39.6vw;
    margin-bottom: 2.66666vw;
  }

  .point3__products h3{
    width: fit-content;
    font-size: 3.46666vw;
    letter-spacing: 0;
    margin: 0 auto;
  }

  .point3__products h3 .new{
    font-size: 2.93333vw;
  }

  .point3__products p span{
    font-size: 3.2vw;
  }
  
  .point3__products p span:nth-child(n+2){
    margin-top: 0.53333vw;
  }
}


/* point4
-----------------------------------------------*/

#point4{
  padding: 90px 0;
}

#point4 .point__title{
  margin: 0 0 40px 226px;
}

#point4 .point__num{
  left: 0;
  top: 140px;
  width: 248px;
  transform: translate(-60px, 0);
}

.point4__textBox{
  margin: 0 80px 60px 226px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
}

.point4__textBox small{
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: 10px;
}

.point4__imgSwitchBox h3{
  font-size: 22px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-align: center;
}

.point4__imgSwitch__btn{
  width: 345px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
}

.point4__imgSwitch__btn button{
  width: 44.92754%;
  height: 55px;
  border-radius: 27.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c6c6c6;
  font-size: 20px;
  letter-spacing: 0.03em;
  color: #FFF;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  border: none;
  transition: background 0.3s, opacity 0.3s;
}

.point4__imgSwitch__btn button:hover{
  opacity: 0.7;
  cursor: pointer;
}

.point4__imgSwitch__btn button.active{
  background: #df0011;
  opacity: 1 !important;
  cursor: default !important;
}

.point4__imgSwitch__img{
  position: relative;
  width: 800px;
  max-width: 80vw;
  margin: 0 auto;
}

.point4__imgSwitch__img li{
  transition: opacity 0.3s;
  opacity: 0;
}

.point4__imgSwitch__img li:nth-child(n+2){
  position: absolute;
  left: 0;
  top: 0;
}

.point4__imgSwitch__img li.active{
  opacity: 1;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point4{
    padding: 8.57142vw 0;
  }
  
  #point4 .point__title{
    margin: 0 0 3.80952vw 21.5238vw;
  }
  
  #point4 .point__num{
    top: 13.33333vw;
    width: 23.61904vw;
    transform: translate(-5.71428vw, 0);
  }
  
  .point4__textBox{
    margin: 0 7.61904vw 5.71428vw 21.5238vw;
    font-size: 1.71428vw;
  }
  
  .point4__textBox small{
    margin-top: 0.95238vw;
  }
  
  .point4__imgSwitchBox h3{
    font-size: 2.09523vw;
    margin-bottom: 0.90476vw;
  }
  
  .point4__imgSwitch__btn{
    width: 32.85714vw;
    margin: 0 auto 2.85714vw;
  }
  
  .point4__imgSwitch__btn button{
    height: 5.23809vw;
    border-radius: 2.61904vw;
    font-size: 1.90476vw;
  }
  
  .point4__imgSwitch__img{
    width: 76.19047vw;
  }
}


@media (max-width: 767px){
  #point4{
    padding: 15.33333vw 0 18.66666vw;
  }

  #point4 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point4 .point__title{
    margin: 0 0 8vw 0;
  }

  .point4__textBox{
    margin: 0 0 8vw;
    font-size: 3.46666vw;
  }

  .point4__textBox small{
    font-size: 2.66666vw;
    margin-top: 2.66666vw;
  }

  .point4__imgSwitchBox h3{
    font-size: 3.46666vw;
    margin-bottom: 2.66666vw;
  }
  
  .point4__imgSwitch__btn{
    width: 42.66666vw;
    margin-bottom: 6vw;
  }

  .point4__imgSwitch__btn button{
    width: 46.875%;
    height: 8vw;
    border-radius: 4vw;
    font-size: 3.2vw;
  }
}


/* point5
-----------------------------------------------*/

#point5{
  padding: 100px 0 130px;
}

#point5 .point__title{
  margin-bottom: 50px;
}

#point5 .point__num{
  right: 0;
  top: -14px;
  width: 248px;
  transform: translate(60px, 0);
}

.point5__textBox{
  width: 690px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
  margin-bottom: 60px;
}

.point5__textBox small{
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: 10px;
}

.point5__img{
  max-width: 1000px;
}

.point5__img figcaption{
  text-align: right;
  font-size: 16px;
  letter-spacing: 0.1em;
  margin-top: 5px;
  margin-right: 282px;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point5{
    padding: 9.5238vw 0 12.38095vw;
  }
  
  #point5 .point__title{
    margin-bottom: 4.7619vw;
  }
  
  #point5 .point__num{
    top: -1.33333vw;
    width: 23.61904vw;
    transform: translate(5.71428vw, 0);
  }
  
  .point5__textBox{
    width: 71.71428vw;
    font-size: 1.71428vw;
    margin-bottom: 5.71428vw;
  }
  
  .point5__textBox small{
    margin-top: 0.95238vw;
  }
  
  .point5__img{
    width: 91.80952vw;
  }
  
  .point5__img figcaption{
    font-size: 1.5238vw;
    margin-top: 0.47619vw;
    margin-right: 25.678571428vw;
    
  }
}


@media (max-width: 767px){
  #point5{
    padding: 15.33333vw 0 10.66666vw;
  }

  #point5 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point5 .point__title{
    margin: 0 0 8vw 0;
  }

  .point5__textBox{
    width: 100%;
    margin: 0 0 4.5vw;
    font-size: 3.46666vw;
  }

  .point5__textBox small{
    font-size: 2.66666vw;
    margin-top: 2.66666vw;
  }

  .point5__img{
    width: 100%;
  }

  .point5__img figcaption {
    font-size: 2.93333vw;
    margin-top: 0.66666vw;
    margin-right: 25.066vw;
  }
}


/* point6
-----------------------------------------------*/

#point6{
  padding: 170px 0 110px;
}

#point6 .point__title{
  margin: 0 0 50px 395px;
}

#point6 .point__num{
  left: 0;
  top: -126px;
  width: 248px;
  transform: translate(-60px, 0);
}

.point6__imgTextBox{
  display: flex;
  justify-content: space-between;
  width: 877px;
}

.point6__imgTextBox__img{
  width: 355px;
  margin: -240px 0 0 -24px;
}

.point6__imgTextBox p{
  width: 482px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point6{
    padding: 16.19047vw 0 10.47619vw;
  }
  
  #point6 .point__title{
    margin: 0 0 4.7619vw 33.61904vw;
  }
  
  #point6 .point__num{
    top: -12vw;
    width: 23.61904vw;
    transform: translate(-5.71428vw, 0);
  }
  
  .point6__imgTextBox{
    width: 83.5238vw;
  }
  
  .point6__imgTextBox__img{
    width: 30.80952vw;
    margin: -22.85714vw 0 0 -1.28571vw;
  }
  
  .point6__imgTextBox p{
    width: 49.90476vw;
    font-size: 1.71428vw;
  }
}


@media (max-width: 767px){
  #point6{
    padding: 15.33333vw 0 16vw;
  }

  #point6 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point6 .point__title{
    margin: 0 0 9.33333vw 0;
  }

  .point6__imgTextBox{
    display: block;
  }

  .point6__imgTextBox{
    width: 100%;
    display: block;
  }
  
  .point6__imgTextBox__img{
    width: 52vw;
    margin: 0 auto 6.66666vw;
  }

  .point6__imgTextBox__img{
    width: 52vw;
    margin: 0 auto 6.66666vw;
  }

  .point6__imgTextBox p{
    width: 100%;
    font-size: 3.46666vw;
  }
}



/* point7
-----------------------------------------------*/

#point7{
  padding: 100px 0;
}

#point7 .point__title{
  margin-bottom: 50px;
}

#point7 .point__num{
  right: 0;
  top: -35px;
  width: 248px;
  transform: translate(60px, 0);
}

.point7__textImgBox{
  display: flex;
  justify-content: space-between;
}

.point7__textImgBox p{
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.66667;
  width: 512px;
}

.point7__textImgBox p small{
  display: block;
  font-size: 0.6em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-top: 10px;
}

.point7__textImgBox img{
  width: 341px;
  margin: -25px 77px 0 0;
}

.point7__effect{
  margin-top: -15px;
}

.point7__effect h3{
  font-size: 22px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point7{
    padding: 9.5238vw 0;
  }
  
  #point7 .point__title{
    margin-bottom: 4.7619vw;
  }
  
  #point7 .point__num{
    top: -3.33333vw;
    width: 23.61904vw;
    transform: translate(5.71428vw, 0);
  }
  
  .point7__textImgBox p{
    font-size: 1.71428vw;
    width: 48.7619vw;
  }
  
  .point7__textImgBox p small{
    margin-top: 0.95238vw;
  }
  
  .point7__textImgBox img{
    width: 34.47619vw;
    margin: -2.38095vw 3.33333vw 0 0;
  }
  
  .point7__effect{
    margin-top: -1.42857vw;
  }
  
  .point7__effect h3{
    font-size: 2.09523vw;
    margin-bottom: 0.95238vw;
  }
}


@media (max-width: 767px){
  #point7{
    padding: 15.33333vw 0 16vw;
  }

  #point7 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point7 .point__title{
    margin: 0 0 6.66666vw 0;
  }

  .point7__textImgBox{
    display: block;
    margin-bottom: 9.33333vw;
  }

  .point7__textImgBox p{
    font-size: 3.46666vw;
    margin-bottom: 5.33333vw;
    width: 100%;
  }

  .point7__textImgBox p small{
    font-size: 2.93333vw;
    margin-top: 2.93333vw;
  }

  .point7__textImgBox img{
    display: block;
    width: 62.93333vw;
    margin: 0 auto;
  }

  .point7__effect{
    margin-top: 0;
  }

  .point7__effect h3{
    font-size: 3.73333vw;
    margin-bottom: 0;
  }
}


/* point8
-----------------------------------------------*/

#point8{
  padding: 95px 0 100px;
}

#point8 .point__title{
  margin-bottom: 50px;
}

#point8 .point__num{
  right: 0;
  top: -17px;
  width: 248px;
  transform: translate(60px, 0);
}

.point8__outline{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.point8__outline li{
  width: 460px;
}

.point8__outline h3{
  font-size: 30px;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 20px;
}

.point8__outline p{
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  margin-bottom: 30px;
}


@media (min-width: 768px) and (max-width: 1120px){
  #point8{
    padding: 9.04761vw 0 9.5238vw;
  }
  
  #point8 .point__title{
    margin-bottom: 4.7619vw;
  }
  
  #point8 .point__num{
    top: -1.61904vw;
    width: 23.61904vw;
    transform: translate(5.71428vw, 0);
  }
  
  .point8__outline li{
    width: 41.80952vw;
  }
  
  .point8__outline h3{
    font-size: 2.85714vw;
    margin-bottom: 1.90476vw;
  }
  
  .point8__outline p{
    font-size: 1.71428vw;
    margin-bottom: 2.85714vw;
  }
}


@media (max-width: 767px){
  #point8{
    padding: 15.33333vw 0 16vw;
  }

  #point8 .point__num {
    left: auto;
    right: 0;
    top: -11.99999vw;
    width: 29.73333vw;
    transform: translate(7.99999vw, 0);
  }

  #point8 .point__title{
    margin: 0 0 9.33333vw 0;
  }

  .point8__outline li{
    width: 100%;
  }

  .point8__outline li:nth-child(n+2){
    margin-top: 10vw;
  }

  .point8__outline h3{
    font-size: 4.8vw;
    margin-bottom: 3.33333vw;
  }

  .point8__outline p{
    font-size: 3.46666vw;
    margin-bottom: 5.33333vw;
  }

  .point8__outline img{
    display: block;
    width: 78.66666vw;
    margin: 0 auto;
  }
}


/* photographer
-----------------------------------------------*/

.photographer{
  background: #404040;
  padding: 90px 0 130px;
}

.photographer__title{
  position: relative;
  margin-bottom: 40px;
}

.photographer__title img{
  position: relative;
  z-index: 1;
}

.photographer__title span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 46px;
  letter-spacing: 0.25em;
  white-space: nowrap;
  z-index: 10;
}

.photographer__imgTextBox{
  margin-bottom: 140px;
}

.photographer__imgTextBox li{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photographer__imgTextBox li:nth-child(even){
  flex-direction: row-reverse;
}

.photographer__imgTextBox li:nth-child(n+2){
  margin-top: 30px;
}

.photographer__imgTextBox__img{
  width: 610px;
}

.photographer__imgTextBox__img img{
  width: 710px;
  margin-left: -100px;
}

.photographer__imgTextBox li:nth-child(even) .photographer__imgTextBox__img img{
  margin-left: auto;
  margin-right: -100px;
}

.photographer__imgTextBox__text{
  width: 345px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

#gallery{
  position: relative;
  top: -20px;
}

.gallery h3{
  width: fit-content;
  height: 54px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  font-size: 40px;
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0 auto 20px;
}

.gallery__slider{
  width: 940px;
  margin: 0 auto;
}

.gallery__slider{
  width: 94%;
  margin: 0 auto 25px;
}

.gallery__slider li{
  position: relative;
}

.gallery__slider li img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 627px;
  margin: 0 auto;
}

.gallery__slider figcaption{
  display: block;
  text-align: right;
  margin: 10px auto 0;
  font-size: 16px;
  letter-spacing: 0.06em;
}

.gallery__slider .slick-dots{
  position: relative;
  margin: 30px 0 0;
  font-size: 0;
  bottom: 0;
}

.gallery__slider .slick-dots li button:before{
  width: 13px;
  height: 13px;
  border-radius: 100%;
  background-color: #787878;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1 !important;
}

.gallery__slider .slick-dots li.slick-active button:before{
  background: #df0011;
}

.gallery__slider .slick-prev, .gallery__slider .slick-next{
  width: 60px;
  height: 60px;
  transition: opacity 0.3s;
}

.gallery__slider .slick-prev:hover, .gallery__slider .slick-next:hover{
  opacity: 0.7;
}

.gallery__slider .slick-prev{
  left: -60px;
}

.gallery__slider .slick-next{
  right: -60px;
}

.gallery__slider .slick-prev::before{
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  transform: rotate(-45deg);
  right: 10px;
  top: calc(50% - 13px);
}

.gallery__slider .slick-next::before{
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
  left: 10px;
  top: calc(50% - 13px);
}

.gallery-thumbnail{
  width: 100%;
  margin: 0 auto 130px !important;
}

.gallery-thumbnail .slick-track{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gallery-thumbnail.thumbnail-fixed .slick-track{
  transform: unset !important;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100% !important;
}

.gallery-thumbnail.thumbnail-fixed .slick-track li.slick-cloned{
  display: none;
}

.gallery-thumbnail .slick-track li{
  position: relative;
  width: 95px !important;
  margin: 0;
  transition: opacity 0.3s;
}

.gallery-thumbnail .slick-track li:hover{
  opacity: 0.7;
  cursor: pointer;
}

.gallery-thumbnail .slick-track li.slick-current{
  opacity: 1 !important;
  cursor: default !important;
}

.gallery-thumbnail .slick-track li img{
  position: relative;
  z-index: 1;
}

.gallery-thumbnail .slick-track li::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 4px solid #df0011;
  transition: width 0.3s;
  width: 0;
  z-index: 10;
}

.gallery-thumbnail .slick-track li.slick-current::after{
  width: 100%;
}

.profile{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  padding: 20px 40px;
}

.profile__text{
  width: 590px;
}

.profile__text h3{
  font-size: 26px;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
}

.profile__text h3 small{
  display: inline-block;
  font-size: 0.61539em;
  margin-left: 20px;
}

.profile__text p{
  font-size: 18px;
  line-height: 1.66667;
  letter-spacing: 0.06em;
}

.profile img{
  width: 240px;
}


@media (min-width: 768px) and (max-width: 1120px){
  .photographer{
    padding: 8.57142vw 0 12.38095vw;
  }
  
  .photographer__title{
    margin-bottom: 3.80952vw;
  }
  
  .photographer__title span{
    font-size: 4.38095vw;
  }
  
  .photographer__imgTextBox{
    margin-bottom: 13.33333vw;
  }
  
  .photographer__imgTextBox li:nth-child(n+2){
    margin-top: 2.85714vw;
  }
  
  .photographer__imgTextBox__img{
    width: 52.09523vw;
  }
  
  .photographer__imgTextBox__img img{
    width: 57.61904vw;
    margin-left: -5.5238vw;
  }
  
  .photographer__imgTextBox li:nth-child(even) .photographer__imgTextBox__img img{
    margin-right: -9.5238vw;
  }
  
  .photographer__imgTextBox__text{
    width: 32.85714vw;
    font-size: 1.71428vw;
  }
  
  .gallery h3{
    height: 5.14285vw;
    padding: 0 1.71428vw;
    font-size: 3.80952vw;
    margin: 0 auto 1.90476vw;
  }
  
  .gallery__slider{
    margin: 0 auto 2.38095vw;
  }
  
  .gallery__slider figcaption{
    margin-top: 0.95238vw;
    font-size: 1.5238vw;
  }
  
  .gallery__slider .slick-dots{
    margin: 2.85714vw 0 0;
  }
  
  .gallery__slider .slick-dots li button:before{
    width: 1.23809vw;
    height: 1.23809vw;
  }
  
  .gallery__slider .slick-prev, .gallery__slider .slick-next{
    width: 5.71428vw;
    height: 5.71428vw;
  }
  
  .gallery__slider .slick-prev{
    left: -5.71428vw;
  }
  
  .gallery__slider .slick-next{
    right: -5.71428vw;
  }
  
  .gallery__slider .slick-prev::before{
    width: 2.47619vw;
    height: 2.47619vw;
    right: 0.95238vw;
    top: calc(50% - 1.23809vw);
  }
  
  .gallery__slider .slick-next::before{
    width: 2.47619vw;
    height: 2.47619vw;
    left: 0.95238vw;
    top: calc(50% - 1.23809vw);
  }
  
  .gallery-thumbnail{
    margin: 0 auto 12.38095vw !important;
  }

  .gallery-thumbnail .slick-track li{
    width: 8.4vw !important;
  }
  
  .gallery-thumbnail .slick-track li::after{
    border-bottom: 0.38095vw solid #df0011;
  }
  
  .profile{
    padding: 1.90476vw 3.80952vw;
  }
  
  .profile__text{
    width: 56.19047vw;
  }

  .profile__text p{
    font-size: 1.71429vw;
  }
  
  .profile__text h3{
    font-size: 2.47619vw;
    margin-bottom: 1.42857vw;
  }
  
  .profile__text h3 small{
    margin-left: 1.90476vw;
  }
  
  .profile img{
    width: 22.85714vw;
  }
}


@media (max-width: 767px){
  .photographer{
    padding: 12.66666vw 0 20vw;
  }

  .photographer__title{
    margin-bottom: 8.66666vw;
  }

  .photographer__title img{
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .photographer__title span{
    font-size: 5.86666vw;
  }

  .photographer__imgTextBox{
    margin-bottom: 17.59999vw;
  }

  .photographer__imgTextBox li{
    display: block;
  }

  .photographer__imgTextBox li:nth-child(n+2){
    margin-top: 11.33333vw;
  }

  .photographer__imgTextBox__img{
    width: 100%;
    margin-bottom: 2.66666vw;
  }

  .photographer__imgTextBox__text{
    width: 100%;
    font-size: 3.46666vw;
  }

  .photographer__imgTextBox__img img {
    width: 94.66666vw;
    margin-left: -6.66666vw;
  }

  .photographer__imgTextBox li:nth-child(even) .photographer__imgTextBox__img img{
    margin-right: -6.66666vw;
  }

  .slick-slider{
    width: 100%;
    margin-bottom: 7.33333vw;
  }

  #gallery{
    position: relative;
    top: -4vw;
  }

  .gallery h3{
    height: 7.2vw;
    padding: 0 2.4vw;
    font-size: 5.33333vw;
    margin: 0 auto 4vw;
  }

  .gallery__slider .slick-prev, .gallery__slider .slick-next{
    top: 47%;
    width: 8vw;
    height: 8vw;
  }
  
  .gallery__slider .slick-prev{
    left: -8vw;
  }
  
  .gallery__slider .slick-next{
    right: -8vw;
  }
  
  .gallery__slider .slick-prev::before{
    width: 3.46666vw;
    height: 3.46666vw;
    right: 0;
    top: calc(50% - 1.73333vw);
  }
  
  .gallery__slider .slick-next::before{
    width: 3.46666vw;
    height: 3.46666vw;
    left: 0;
    top: calc(50% - 1.73333vw);
  }

  .gallery__slider figcaption {
    margin-top: 1.33333vw;
    font-size: 2.93333vw;
}

  .gallery-thumbnail{
    width: 54vw;
    margin: 0 auto 18.66666vw !important;
  }

  .gallery-thumbnail .slick-list{
    overflow: visible;
  }

  .gallery-thumbnail .slick-track li{
    width: 25.8vw !important;
  }

  .profile{
    padding: 6vw 5.33333vw;
    flex-direction: column-reverse;
  }

  .profile img{
    width: 32vw;
    margin-bottom: 3.66666vw;
  }

  .profile__text{
    width: 100%;
  }

  .profile__text h3{
    margin-bottom: 1.66666vw;
    font-size: 4.53333vw;
  }

  .profile__text h3 small{
    font-size: 2.93333vw;
  }

  .profile__text p{
    font-size: 3.46666vw;
  }
}


/* product
-----------------------------------------------*/

.product{
  padding: 105px 0 105px;
}

.product__title{
  margin-bottom: 40px;
}

.product__title small:nth-of-type(1){
  display: inline-block;
  background: #000;
  color: #FFF;
  padding: 0 8px;
  font-size: 34px;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.product__title span{
  display: inline-block;
  font-size: 48px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-top: 40px;
}

.product__title small:nth-of-type(2){
  display: inline-block;
  font-size: 26px;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.product__title > *::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: #FAFAFA;
  transition: width 0.9s;
  width: 100%;
}

.product__title.inview > *::after{
  width: 0;
}

.product__title strong{
  color: #df0011;
}

.product__textImgBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 85px;
}

.product__textImgBox ul{
  width: 533px;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.product__textImgBox ul small{
  display: block;
  font-size: 0.8em;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.product__textImgBox__img{
  width: 467px;
}

.product__btn{
  width: 660px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.product__btn a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45.45455%;
  height: 100px;
  border-radius: 50px;
  border: 1px solid #000;
  background: #FFF;
  font-size: 22px;
  letter-spacing: 0.1em;
  transition: color 0.3s, background 0.3s;
}

.product__btn a:hover{
  background: #000;
  color: #FFF;
}

.product__btn a::before, .product__btn a::after{
  content: "";
  position: absolute;
  width: 10px;
  height: 7px;
  border: 1px solid #888;
  background: #FFF;
  transition: 0.3s;
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}

.product__btn a::before{
  z-index: 10;
  right: 13.63636%;
  bottom: 15%;
  box-shadow:  1px -1px 0 #FFF;
}

.product__btn a::after{
  z-index: 1;
  right: calc(13.63636% - 4px);
  bottom: calc(15% + 4px);
}

.product__btn a:hover::before, .product__btn a:hover::after{
  border-color: #FFF;
  background: #000;
}

.product__btn a:hover::before{
  box-shadow:  1px -1px 0 #000;
}


@media (min-width: 768px) and (max-width: 1120px){
  .product{
    padding: 10vw 0 10vw;
  }
  
  .product__title{
    margin-bottom: 3.80952vw;
  }
  
  .product__title small:nth-of-type(1){
    padding: 0 0.7619vw;
    font-size: 3.23809vw;
  }
  
  .product__title span{
    font-size: 4.57142vw;
    margin-top: 3.80952vw;
  }
  
  .product__title small:nth-of-type(2){
    font-size: 2.47619vw;
  }
  
  .product__textImgBox{
    margin-bottom: 8.09523vw;
  }
  
  .product__textImgBox ul{
    width: 50.7619vw;
    font-size: 1.90476vw;
  }
  
  .product__textImgBox ul small{
    margin-bottom: 0.47619vw;
  }
  
  .product__textImgBox__img{
    width: 38.47619vw;
  }
  
  .product__btn{
    width: 62.85714vw;
  }
  
  .product__btn a{
    height: 9.5238vw;
    border-radius: 4.7619vw;
    font-size: 2.09523vw;
  }
}


@media (max-width: 767px){
  .product{
    padding: 17.33333vw 0;
  }

  .product__title{
    margin-bottom: 4vw;
    font-size: 0;
  }

  .product__title small:nth-of-type(1){
    font-size: 4.53333vw;
  }

  .product__title span{
    font-size: 6.4vw;
    margin-top: 3.33333vw;
  }

  .product__title small:nth-of-type(2){
    font-size: 3.73333vw;
  }

  .product__textImgBox{
    margin-bottom: 8vw;
  }

  .product__textImgBox ul{
    width: 100%;
    font-size: 3.2vw;
    margin-bottom: 2.66666vw;
  }

  .product__textImgBox ul small{
    font-size: 2.66666vw;
    margin-top: 0.66666vw;
  }

  .product__textImgBox__img{
    width: 64.93333vw;
    margin: 0 auto;
  }

  .product__btn{
    width: 78.66666vw;
  }

  .product__btn a {
    width: 36vw;
    height: 12vw;
    border-radius: 6vw;
    font-size: 3.2vw;
  }

  .product__btn a::before, .product__btn a::after{
    width: 2vw;
    height: 1.46666vw;
  }
  
  .product__btn a::after{
    right: calc(13.63636% - 0.8vw);
    bottom: calc(15% + 0.8vw);
  }
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
  color: unset;
}

:where(.plain-html) {
  color: #fff;
}