@charset "UTF-8";
/**
* Helly Hansen Seagear 2021ss スタイル設定CSS
* Created  on: 2021.3.29
* Modified on: 2021.3.29
**/
/** Helly Hansen Seagear 2021ss トンマナ用CSS Created on: 2021.3.29 */
/*--------------------------------------------------------
　BREAK POINT
--------------------------------------------------------*/
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/*--------------------------------------------------------
　FONT
--------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap");
/*--------------------------------------------------------
　OTHERS
--------------------------------------------------------*/
/*--------------------------------------------------------
　BASE STYLE
--------------------------------------------------------*/
.allwrap { width: 100%; background: #FFFFFF; overflow: hidden; position: relative; margin: 0 auto; font-family: 'Noto Sans JP', sans-serif; font-weight: 300; color: #484848; }

.br { display: inline-block; }

@media only screen and (min-width: 769px) { .sp-visible { display: none; } }
@media only screen and (max-width: 768px) { .pc-visible { display: none; } }
header a img, footer a img { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; }

/*--------------------------------------------------------
　HEADER
--------------------------------------------------------*/
.header__block { width: 250px; height: 100%; padding: 80px 0 0 45px; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 99; }
.header__ttl { width: 170px; padding-bottom: 20px; }
.header__nav ul::before, .header__nav ul::after { display: none; }
.header__nav ul li { font-family: 'DINPro-Medium'; font-size: 17px; color: #00002f; margin-bottom: 10px; }
.header__nav ul li a:link, .header__nav ul li a:visited { color: #00002f; }
.header__nav ul li a.is-current { text-decoration: underline; }
.header__nav ul li a.no-border { text-decoration: none !important; }
.header__nav ul li > ul { margin-left: 30px; margin-top: 10px; }
.header__nav ul img { width: 50px; }
.header__logo { width: 185px; margin-top: 70px; }
.header__menu { display: none; }
@keyframes navOn { 0% { opacity: 0; transform: translate(0, -20px); }
  100% { opacity: 1; transform: translate(0, 0); } }
@media only screen and (max-width: 768px) { .header__block { width: 100%; height: 140px; padding: 20px 0 0 20px; }
  .header__ttl { width: 85px; padding-bottom: 10px; }
  .header__nav { display: none; position: fixed; top: 100px; left: 20px; background: #FFFFFF; padding: 10px; z-index: 100; }
  .header__nav ul li { font-size: 13px; }
  .header__nav.is-open { display: block; animation: navOn .4s ease-out forwards; }
  .header__logo { width: 92px; margin-top: 0; }
  .header__menu { display: block; width: 40px; height: 40px; position: relative; }
  .header__menu::before { content: ""; width: 40px; height: 6px; background: #00002f; position: absolute; top: 11px; left: 5px; transform: skewX(-30deg); }
  .header__menu::after { content: ""; width: 32px; height: 6px; background: #00002f; position: absolute; bottom: 11px; left: 2px; transform: skewX(-30deg); } }

/*--------------------------------------------------------
　MAIN
--------------------------------------------------------*/
main { display: block; width: 100%; padding-left: 250px; box-sizing: border-box; position: relative; }
@media only screen and (max-width: 768px) { main { padding-left: 0; } }

.first__block { width: 100%; height: 100vh; background: #FFFFFF; position: relative; }
.first__block-inner { width: calc(100% - 250px); height: 100%; position: fixed; top: 0; }
.first__eyecatch { width: 100%; height: calc(100% - 175px); background-image: url(/static/full/hellyhansen/seagear_2021ss/images/fv_img01.jpg); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.first__txt { width: 100%; height: 175px; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center; position: absolute; bottom: 0; left: 0; }
.first__txt span { width: 506px; padding-bottom: 3px; position: relative; }
.first__txt span::before { content: ""; width: 100%; height: 3px; background: #00002f; position: absolute; bottom: 0; left: 0; }
@media only screen and (max-width: 768px) { .first__block-inner { width: 100%; padding-top: 140px; box-sizing: border-box; position: relative; }
  .first__eyecatch { height: calc(100% - 70px); background-image: url(/static/full/hellyhansen/seagear_2021ss/images/fv_img01_sp.jpg); }
  .first__txt { height: 50px; bottom: 20px; left: 20px; }
  .first__txt span { width: 253px; } }

.item__block { width: 100%; height: 100vh; background: #FFFFFF; position: relative; }
.item__block-inner { width: 100%; min-height: 100%; position: relative; padding-right: 250px; box-sizing: border-box; background: #FFFFFF; }
.item__block-inner::before { content: ""; width: 100vw; height: 1px; background: #cacaca; position: absolute; top: 0; left: -250px; }
.item__block-inner.is-fixed { width: calc(100% - 250px); position: fixed; top: 0; }
.item__content { max-width: 860px; height: 100%; min-height: 100vh; margin: 0 auto; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative; }
.item__content .swiper-button-next { display: none; }
.item__content .swiper-button-next-a { font-family: 'DINPro-Medium'; font-size: 12px; color: #00002f; text-decoration: underline; background: none; padding: 10px 0; cursor: pointer; margin-right: auto; }
.item__content .swiper-button-next-a:hover { text-decoration: none; }
.item__genre { position: absolute; top: 10px; left: 0; font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; }
.item__category { position: absolute; top: 10px; right: 40px; font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; }
@media only screen and (max-width: 768px) { .item__block#keelboatStyles .swiper-button-next-a, .item__block#dinghyStyles .swiper-button-next-a { padding-left: 0; }
  .item__block-inner { padding-right: 0; }
  .item__block-inner::before { left: 0; }
  .item__block-inner.is-fixed { width: 100%; }
  .item__genre { font-size: 10px; top: 100px; left: auto; right: 20px; }
  .item__category { font-size: 10px; top: 120px; right: 20px; }
  .item__content { -webkit-justify-content: flex-start; justify-content: flex-start; }
  .item__content .swiper-button-next-a { padding-left: 20px; font-size: 10px; } }

.scene__pagination { width: 100%; height: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; top: 14px; left: 0; cursor: default; }
.scene__pagination .swiper-pagination-bullet { background: none; width: 20px; height: 20px; display: block; outline: none; font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; margin: 0 4px; }
.scene__pagination .swiper-pagination-bullet-active { padding-right: 74px; position: relative; }
.scene__pagination .swiper-pagination-bullet-active::after { content: ""; width: 50px; height: 1px; background: #cacaca; position: absolute; top: 10px; right: 0; }
.scene__slider { width: 100%; max-height: 574px; height: 66vh; margin-top: 4vh; }
@keyframes zoomOut { 0% { transform: scale(1.3); }
  100% { transform: scale(1); } }
.scene__slide { width: 100%; height: 100%; overflow: hidden; }
.scene__slide > div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.scene__slide .img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1.3); }
.scene__slide.slide-animate .img { animation: zoomOut 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@media only screen and (max-width: 768px) { .scene__slider { height: calc(100vh - 210px); margin-top: 140px; }
  .scene__slider .swiper-pagination { top: 100px; }
  .scene__slider .swiper-pagination-bullet { font-size: 10px; }
  .scene__slider .swiper-pagination-bullet-active { padding-right: 30px; }
  .scene__slider .swiper-pagination-bullet-active::after { width: 10px; top: 5px; } }

.styles__pagination { width: 100%; height: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; top: 14px; left: 0; cursor: default; }
.styles__pagination .swiper-pagination-bullet { background: none; width: 20px; height: 20px; display: block; outline: none; font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; margin: 0 4px; }
.styles__pagination .swiper-pagination-bullet-active { padding-right: 74px; position: relative; }
.styles__pagination .swiper-pagination-bullet-active::after { content: ""; width: 50px; height: 1px; background: #cacaca; position: absolute; top: 10px; right: 0; }
.styles__slider { width: 100%; max-height: 708px; height: 80vh; margin-top: 4vh; }
@keyframes zoomOut { 0% { transform: scale(1.3); }
  100% { transform: scale(1); } }
.styles__slide { width: 100%; height: 100%; border-width: 0 30px; border-style: solid; border-color: #FFFFFF; position: relative; }
.styles__slide > div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.styles__slide .img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.styles__slide .credit { width: 30px; height: 100%; position: absolute; bottom: 0; left: 100%; font-family: 'DINPro-Medium'; font-size: 11px; line-height: 1.5; color: #00002f; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -o-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0; transition: opacity .3s; }
.styles__slide .credit a { color: inherit; display: inline; }
.styles__slide .credit.is-animate { opacity: 1; }
@media only screen and (max-width: 768px) { .styles__slider { height: calc(100vh - 210px); margin-top: 140px; }
  .styles__slider .swiper-pagination { top: 100px; }
  .styles__slider .swiper-pagination-bullet { font-size: 10px; }
  .styles__slider .swiper-pagination-bullet-active { padding-right: 30px; }
  .styles__slider .swiper-pagination-bullet-active::after { width: 10px; top: 5px; }
  .styles__slide .credit { font-size: 9px; } }

#keelboatScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img01.jpg); }
#keelboatScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img02.jpg); }
#keelboatScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img03.jpg); }
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 769px) { #keelboatScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img01@2x.jpg); }
  #keelboatScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img02@2x.jpg); }
  #keelboatScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img03@2x.jpg); } }
@media only screen and (max-width: 768px) { #keelboatScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img01_sp.jpg); }
  #keelboatScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img02_sp.jpg); }
  #keelboatScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img03_sp.jpg); } }
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) { #keelboatScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img01_sp@2x.jpg); }
  #keelboatScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img02_sp@2x.jpg); }
  #keelboatScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_scene_img03_sp@2x.jpg); } }

#keelboatStyles .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img01.jpg); }
#keelboatStyles .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img02.jpg); }
#keelboatStyles .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img03.jpg); }
#keelboatStyles .slide-4 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img04.jpg); }
#keelboatStyles .slide-5 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img05.jpg); }
#keelboatStyles .slide-6 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img06.jpg); }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { #keelboatStyles .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img01@2x.jpg); }
  #keelboatStyles .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img02@2x.jpg); }
  #keelboatStyles .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img03@2x.jpg); }
  #keelboatStyles .slide-4 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img04@2x.jpg); }
  #keelboatStyles .slide-5 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img05@2x.jpg); }
  #keelboatStyles .slide-6 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/keelboat_styles_img06@2x.jpg); } }

#dinghyScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img01.jpg); }
#dinghyScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img02.jpg); }
#dinghyScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img03.jpg); }
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 769px) { #dinghyScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img01@2x.jpg); }
  #dinghyScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img02@2x.jpg); }
  #dinghyScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img03@2x.jpg); } }
@media only screen and (max-width: 768px) { #dinghyScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img01_sp.jpg); }
  #dinghyScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img02_sp.jpg); }
  #dinghyScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img03_sp.jpg); } }
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) { #dinghyScene .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img01_sp@2x.jpg); }
  #dinghyScene .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img02_sp@2x.jpg); }
  #dinghyScene .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_scene_img03_sp@2x.jpg); } }

#dinghyStyles .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img01.jpg); }
#dinghyStyles .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img02.jpg); }
#dinghyStyles .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img03.jpg); }
#dinghyStyles .slide-4 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img04.jpg); }
#dinghyStyles .slide-5 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img05.jpg); }
#dinghyStyles .slide-6 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img06.jpg); }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { #dinghyStyles .slide-1 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img01@2x.jpg); }
  #dinghyStyles .slide-2 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img02@2x.jpg); }
  #dinghyStyles .slide-3 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img03@2x.jpg); }
  #dinghyStyles .slide-4 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img04@2x.jpg); }
  #dinghyStyles .slide-5 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img05@2x.jpg); }
  #dinghyStyles .slide-6 .img { background-image: url(/static/full/hellyhansen/seagear_2021ss/images/dinghy_styles_img06@2x.jpg); } }

#keelboatStyles .item__content, #dinghyStyles .item__content { width: 66.6%; max-width: 626px; }
#keelboatStyles .item__slider, #dinghyStyles .item__slider { max-height: 708px; height: 80vh; }
#keelboatStyles .swiper-button-next-a, #dinghyStyles .swiper-button-next-a { margin-left: 30px; }
@media only screen and (max-width: 768px) { #keelboatStyles .item__content, #dinghyStyles .item__content { width: 100%; padding-left: 20px; padding-right: 20px; }
  #keelboatStyles .item__slider, #dinghyStyles .item__slider { height: calc(100vh - 210px); } }

.keelboatspec__content, .dinghyspec__content { width: 66%; max-width: 566px; }
.keelboatspec__mainimg, .dinghyspec__mainimg { max-height: 708px; height: 80vh; margin-top: 4vh; overflow: hidden; }
.keelboatspec__mainimg img, .dinghyspec__mainimg img { width: 100%; height: 100%; font-family: 'object-fit: cover;'; object-fit: cover; }
.keelboatspec__ttl, .dinghyspec__ttl { width: 45px; position: absolute; bottom: 10vh; right: 0; margin-right: -147px; }
.keelboatspec__ttl span, .dinghyspec__ttl span { display: block; padding-right: 3px; position: relative; }
.keelboatspec__ttl span::before, .dinghyspec__ttl span::before { content: ""; width: 3px; height: 100%; background: #00002f; position: absolute; top: 0; right: 0; }
.keelboatspec__more, .dinghyspec__more { font-family: 'DINPro-Medium'; font-size: 12px; color: #00002f; text-decoration: underline; background: none; padding: 10px 0; cursor: pointer; margin-right: auto; transition: opacity .3s; }
.keelboatspec__more:hover, .dinghyspec__more:hover { text-decoration: none; }
.keelboatspec__more.is-hide, .dinghyspec__more.is-hide { opacity: 0; }
.keelboatspec__detail, .dinghyspec__detail { display: none; padding: 0 0 60px 17%; }
.keelboatspec__txt, .dinghyspec__txt { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 18px; line-height: 2; color: #00002f; }
@media only screen and (max-width: 768px) { .keelboatspec__content, .dinghyspec__content { width: 100%; padding-left: 20px; padding-right: 20px; }
  .keelboatspec__mainimg, .dinghyspec__mainimg { height: calc(100vh - 210px); margin-top: 140px; }
  .keelboatspec__ttl, .dinghyspec__ttl { width: 230px; bottom: auto; top: calc(100vh - 60px); right: 20px; margin-right: 0; }
  .keelboatspec__ttl span, .dinghyspec__ttl span { padding-right: 0; padding-bottom: 3px; }
  .keelboatspec__ttl span::before, .dinghyspec__ttl span::before { width: 100%; height: 3px; top: auto; bottom: 0; right: auto; bottom: 0; }
  .keelboatspec__more, .dinghyspec__more { font-size: 10px; }
  .keelboatspec__detail, .dinghyspec__detail { padding: 0 20px 30px; }
  .keelboatspec__txt, .dinghyspec__txt { font-size: 12px; line-height: 1.8; } }

.keelboatspec__img01 { width: 78%; margin: 60px 0 60px auto; }
.keelboatspec__img02 { width: 78%; margin: 60px auto 60px 0; }
@media only screen and (max-width: 768px) { .keelboatspec__img01 { width: 86%; margin: 30px 0 30px auto; }
  .keelboatspec__img02 { width: 86%; margin: 30px auto 30px 0; } }

.dinghyspec__ttl { bottom: auto; top: 10vh; }
.dinghyspec__movie { width: 100%; margin: 60px auto; }
.dinghyspec__movie .movie-box { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.dinghyspec__movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.dinghyspec__img01 { width: 78%; margin: 60px 0 60px auto; }
@media only screen and (max-width: 768px) { .dinghyspec__ttl { bottom: auto; top: calc(100vh - 60px); }
  .dinghyspec__movie { margin: 30px auto; }
  .dinghyspec__img01 { width: 86%; margin: 30px 0 30px auto; } }

.interview__mainimg { width: 100%; max-height: 574px; height: 66vh; margin-top: 4vh; background-image: url(/static/full/hellyhansen/seagear_2021ss/images/interview_img01@2x.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; }
.interview__ttl { width: 43px; position: absolute; bottom: 17vh; right: 0; margin-right: -147px; }
.interview__ttl span { display: block; padding-right: 3px; position: relative; }
.interview__ttl span::before { content: ""; width: 3px; height: 100%; background: #00002f; position: absolute; top: 0; right: 0; }
.interview__more { font-family: 'DINPro-Medium'; font-size: 12px; color: #00002f; text-decoration: underline; background: none; padding: 10px 0; cursor: pointer; margin-right: auto; transition: opacity .3s; }
.interview__more:hover { text-decoration: none; }
.interview__more.is-hide { opacity: 0; }
.interview__detail { display: none; padding: 0 0 60px; }
.interview__summary { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.9; color: #00002f; }
.interview__profile { margin: 100px 0; padding-left: 40px; border-left: 10px solid #00002f; box-sizing: border-box; color: #00002f; }
.interview__profile .name { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 20px; }
.interview__profile .name-en { font-family: 'DINPro-Medium'; font-size: 16px; margin-top: .5em; margin-bottom: 1em; }
.interview__profile .txt { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 18px; line-height: 2; }
.interview__txt { margin: 60px 0; }
.interview__txt .q { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; line-height: 2; color: #00002f; text-decoration: underline; padding-left: 10px; margin-bottom: 5px; position: relative; }
.interview__txt .q::before { content: ""; width: 6px; height: 2px; background: #00002f; position: absolute; top: 17px; left: 0; }
.interview__txt .a { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 18px; line-height: 2; color: #00002f; }
.interview__txt.txt-r { width: 85%; margin-left: auto; }
.interview__txt.txt-l { width: 85%; }
.interview__img01 { width: 48.6%; margin: 60px 0 60px auto; }
.interview__img02 { width: 70%; margin: 60px auto 60px 0; }
.interview__img03 { width: 46.6%; margin: 60px 0 60px auto; }
.interview__img04 { width: 59.2%; margin: 60px auto; }
.interview__img05 { width: 59.2%; margin: 60px auto 60px 0; }
@media only screen and (max-width: 768px) { .interview__content { width: 100%; }
  .interview__mainimg { max-height: 708px; height: calc(100vh - 210px); margin-top: 140px; background-image: url(/static/full/hellyhansen/seagear_2021ss/images/interview_img01_sp@2x.jpg); }
  .interview__ttl { width: 143px; bottom: auto; top: calc(100vh - 60px); right: 20px; margin-right: 0; }
  .interview__ttl span { padding-right: 0; padding-bottom: 3px; }
  .interview__ttl span::before { width: 100%; height: 3px; top: auto; bottom: 0; right: auto; bottom: 0; }
  .interview__more { padding-left: 20px; }
  .interview__detail { padding: 0 20px 30px; }
  .interview__summary { font-size: 12px; line-height: 1.8; }
  .interview__profile { margin: 50px 0; padding-left: 20px; border-left-width: 5px; }
  .interview__profile .name { font-size: 14px; }
  .interview__profile .name-en { font-size: 13px; }
  .interview__profile .txt { font-size: 12px; line-height: 1.8; }
  .interview__txt { margin: 30px 0; }
  .interview__txt .q, .interview__txt .a { font-size: 12px; line-height: 1.8; }
  .interview__txt .q::before { top: 10px; }
  .interview__txt.txt-r, .interview__txt.txt-l { width: 100%; }
  .interview__img01 { width: 62.4%; margin: 30px 0 30px auto; }
  .interview__img02 { width: 90%; margin: 30px auto 30px 0; }
  .interview__img03 { width: 60%; margin: 30px 0 30px auto; }
  .interview__img04 { width: 76%; margin: 30px 0 30px auto; }
  .interview__img05 { width: 76%; margin: 30px auto 30px 0; } }

/*--------------------------------------------------------
　SCROLL ANIMATION
--------------------------------------------------------*/
.fade-up { opacity: 0; transform: translate(0, 50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-up.is-done { opacity: 1; transform: translate(0, 0); }

.fade-down { opacity: 0; transform: translate(0, -50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-down.is-done { opacity: 1; transform: translate(0, 0); }

.fade-left { opacity: 0; transform: translate(-30px, 0); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-left.is-done { opacity: 1; transform: translate(0, 0); }

.fade-right { opacity: 0; transform: translate(30px, 0); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-right.first__ttl { transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-right.is-done { opacity: 1; transform: translate(0, 0); }

.fade-scale { opacity: 0; transform: scale(0.5); transition: all 0.8s cubic-bezier(0.65, -0.55, 0.265, 1.55); }
.fade-scale.is-done { opacity: 1; transform: scale(1); }

.txt-line span::before { transform: scale(1, 0); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: right top; transition-delay: .4s; }
.txt-line.is-done span::before { transform: scale(1, 1); }
.txt-line.first__txt span::before { transform: scale(0, 1); transform-origin: left top; }
.txt-line.first__txt.is-done span::before { transform: scale(1, 1); }
@media only screen and (max-width: 768px) { .txt-line span::before { transform: scale(0, 1); transform-origin: left top; }
  .txt-line.is-done span::before { transform: scale(1, 1); } }