@charset "UTF-8";
/**
* Helly Hansen Seagear 2021aw スタイル設定CSS
* Created  on: 2021.10.01
* Modified on: 2021.10.01
**/
/** Helly Hansen Seagear 2021aw トンマナ用CSS Created on: 2021.10.01 */
/*--------------------------------------------------------
　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; }

/*--------------------------------------------------------
　MAIN
--------------------------------------------------------*/
.header__block { width: 254px; position: absolute; top: 45px; left: 45px; z-index: 10; }
.header__logo { width: 185px; }
.header__logo a { cursor: pointer; opacity: 1; transition: opacity .3s ease; }
.header__logo a:hover { opacity: .7; }
.header__ttl { margin: 45px 0; }
.header__menubtn { display: none; }
.header__menunav li { margin-bottom: 10px; }
.header__menunav li a { display: block; position: relative; padding-left: 20px; font-family: 'DINPro-Bold'; font-size: 19px; color: #FFFFFF; }
.header__menunav li a::before { content: ""; width: 8px; height: 3px; background: #FFFFFF; position: absolute; top: 9px; left: 0; }
@keyframes navOn { 0% { opacity: 0; transform: translate(-100%, 0); }
  100% { opacity: 1; transform: translate(0, 0); } }
@keyframes navOff { 0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-100%, 0); } }
@media only screen and (max-width: 768px) { .header__block { width: 30%; top: 18vw; left: 5vw; }
  .header__logo { width: 73%; }
  .header__ttl { margin: 25px 0; }
  .header__menubtn { display: block; width: 40px; height: 40px; position: relative; }
  .header__menubtn::before { content: ""; width: 40px; height: 6px; background: #FFFFFF; position: absolute; top: 11px; left: 5px; transform: skewX(-30deg); }
  .header__menubtn::after { content: ""; width: 32px; height: 6px; background: #FFFFFF; position: absolute; bottom: 11px; left: 2px; transform: skewX(-30deg); }
  .header__menunav { background: #FFFFFF; width: 180px; position: absolute; top: 100%; left: -5vw; margin-top: 20px; padding: 15px 0 0 5vw; opacity: 0; transform: translate(-100%, 0); transition: all .3s ease-in-out; }
  .header__menunav li { margin-bottom: 15px; }
  .header__menunav li a { font-size: 13px; color: #00002f; padding-left: 16px; }
  .header__menunav li a::before { height: 2px; background: #00002f; top: 5px; }
  .header__menunav.is-open { opacity: 1; transform: translate(0, 0); } }

.first__block-inner { position: relative; width: 100%; }
.first__eyecatch { position: relative; overflow: hidden; }
.first__eyecatch::before { content: ""; width: 100%; height: 100%; background: #FFFFFF; position: absolute; top: 0; right: 0; z-index: 1; }
.first__txtbox { max-width: 718px; margin: 0 auto; padding: 60px 0; }
.first__txtbox p { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 18px; line-height: 2.1; color: #00002f; margin-top: 1em; text-align: justify; }
.first__subttl span { width: 93.7%; display: inline-block; padding-bottom: 3px; position: relative; }
.first__subttl span::before { content: ""; width: 100%; height: 2px; background: #00002f; position: absolute; bottom: 0; left: 0; }
@media only screen and (max-width: 768px) { .first__txtbox { padding: 30px 20px; }
  .first__txtbox p { font-size: 12px; } }

.series__block { margin-bottom: 150px; }
.series__ttl { font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; position: relative; padding-left: 250px; }
.series__ttl::before { content: ""; width: 212px; height: 1px; background: #00002f; position: absolute; top: 50%; left: 0; }
.series__largeimg { position: relative; overflow: hidden; margin-bottom: 70px; }
.series__largeimg::before { content: ""; width: 100%; height: 100%; background: #FFFFFF; position: absolute; top: 0; right: 0; z-index: 1; }
@media only screen and (max-width: 768px) { .series__block { margin-bottom: 70px; }
  .series__ttl { font-size: 13px; padding-left: 165px; }
  .series__ttl:before { width: 155px; }
  .series__largeimg { margin-bottom: 40px; } }

.product__wrap { max-width: 718px; margin: 70px auto; }
.product__box { margin-bottom: 70px; }
.product__box > a { display: block; color: #00002f; }
.product__box > a img { transition: opacity .3s ease; }
.product__box > a:hover img { opacity: .7; }
.product__box .name { display: block; font-family: 'DINPro-Bold'; font-size: 18px; margin: 30px 0; }
.product__box .txt { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 18px; line-height: 2.1; color: #00002f; margin-top: 1em; text-align: justify; }
.product__box .btn { text-align: right; margin-top: 40px; }
.product__box .btn a { display: inline-block; font-size: 19px; letter-spacing: .02em; color: #00002f; text-decoration: underline; }
.product__box .btn a img { width: 32px; margin-right: 8px; vertical-align: middle; }
@media only screen and (max-width: 768px) { .product__wrap { margin: 40px auto; }
  .product__box { margin-bottom: 40px; }
  .product__box .name { font-size: 12px; margin: 24px 0 20px; padding: 0 20px; }
  .product__box .txt { font-size: 12px; padding: 0 20px; }
  .product__box .btn { margin-top: 20px; padding: 0 20px; }
  .product__box .btn a { font-size: 13px; }
  .product__box .btn a img { width: 16px; } }

.style__wrap { max-width: 718px; margin: 70px auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
.style__box { width: 49%; margin-bottom: 50px; }
.style__box > img { margin-bottom: 20px; }
.style__box > a { font-family: 'DINPro-Bold'; font-size: 13px; color: #00002f; margin-top: .5em; }
@media only screen and (max-width: 768px) { .style__wrap { margin: 40px auto; padding: 0 10px; box-sizing: border-box; }
  .style__box { margin-bottom: 20px; }
  .style__box > img { margin-bottom: 5px; }
  .style__box > a { font-size: 12px; text-align: center; } }

.item__wrap { max-width: 1306px; margin: 70px auto 0; padding: 0 20px; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; align-items: stretch; }
.item__box { width: 33%; margin-bottom: 50px; -webkit-display: flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; }
.item__box > a { display: block; color: #00002f; text-align: center; }
.item__box .img { overflow: hidden; }
.item__box .img img { transition: transform .3s ease-in-out; }
.item__box .name { display: block; font-family: 'DINPro-Bold'; font-size: 13px; margin: 10px 0; }
.item__box .color { font-family: 'DINPro-Medium'; font-size: 12px; color: #00002f; text-align: center; }
.item__box .color img { height: 32px; width: auto; margin-top: 5px; }
@media only screen and (min-width: 769px) { .item__box > a:hover .img img { transform: scale(1.05); } }
@media only screen and (max-width: 980px) { .item__wrap { max-width: 758px; }
  .item__box { width: 49%; -webkit-justify-content: flex-start; justify-content: flex-start; } }
@media only screen and (max-width: 768px) { .item__wrap { margin: 40px auto; padding: 0 10px; box-sizing: border-box; }
  .item__box { margin-bottom: 20px; }
  .item__box .name { font-size: 12px; }
  .item__box .color { font-size: 10px; }
  .item__box .color img { height: 16px; } }

.interview__ttl { font-family: 'DINPro-Bold'; font-size: 19px; color: #00002f; position: relative; padding-left: 250px; }
.interview__ttl::before { content: ""; width: 212px; height: 1px; background: #00002f; position: absolute; top: 50%; left: 0; }
.interview__block-inner { max-width: 940px; margin: 70px auto; }
.interview__summary { max-width: 718px; margin: 0 auto; padding: 60px 0; }
.interview__summary p { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 19px; line-height: 2; color: #00002f; text-align: justify; }
.interview__more { text-align: right; margin-top: 40px; transition: opacity .3s; }
.interview__more span { display: inline-block; font-size: 19px; letter-spacing: .02em; color: #00002f; text-decoration: underline; cursor: pointer; transition: all .3s ease; }
.interview__more span img { width: 44px; margin-right: 8px; vertical-align: middle; }
.interview__more span:hover { color: #D91327; text-decoration: none; }
.interview__more.is-hide { opacity: 0; }
.interview__detail { display: none; }
.interview__profile { margin: 0 0 70px; 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: 19px; }
.interview__profile .name-en { font-family: 'DINPro-Medium'; font-size: 17px; 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; text-align: justify; }
.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; text-align: justify; }
.interview__txt.txt-r { width: 85%; margin-left: auto; }
.interview__txt.txt-l { width: 85%; }
.interview__txt.txt-c { width: 85%; margin-left: auto; margin-right: auto; }
.interview__img02 { width: 76%; margin: 60px 0 60px auto; }
.interview__img03 { width: 76%; margin: 60px 0; }
.interview__img04 { width: 50%; margin: 60px 0 60px auto; }
.interview__img05 { width: 76%; margin: 60px 0; }
.interview__img06 { width: 50%; margin: 60px 0; }
.interview__img07 { width: 76%; margin: 60px 0 60px auto; }
@media only screen and (max-width: 980px) { .interview__detail { padding: 0 20px; } }
@media only screen and (max-width: 768px) { .interview__block-inner { margin: 40px auto; }
  .interview__ttl { font-size: 13px; padding-left: 165px; }
  .interview__ttl:before { width: 155px; }
  .interview__summary { padding: 30px 20px; }
  .interview__summary p { font-size: 13px; }
  .interview__more { margin-top: 20px; }
  .interview__more span { font-size: 13px; }
  .interview__more span img { width: 22px; }
  .interview__profile { margin: 0 0 40px; 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, .interview__txt.txt-c { width: 100%; }
  .interview__img02, .interview__img03, .interview__img05, .interview__img07 { width: 100%; margin: 30px auto; }
  .interview__img04 { width: 61%; margin: 30px 0 30px auto; }
  .interview__img06 { width: 61%; margin: 30px 0; } }

.footer__block { padding: 0 0 70px; }
.footer__logo { width: 118px; margin: 0 auto; }
@media only screen and (max-width: 768px) { .footer__block { padding-bottom: 40px; }
  .footer__logo { width: 80px; } }

/*--------------------------------------------------------
　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); }

@keyframes zoomOut { 0% { transform: scale(1.2); }
  100% { transform: scale(1); } }
.first__eyecatch::before { transform: scale(1, 1); transform-origin: center right; transition: transform .3s ease-in-out; }
.first__eyecatch img { transform: scale(1.2); }
.is-done .first__eyecatch:before { transform: scale(0, 1); }
.is-done .first__eyecatch img { animation: zoomOut 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.first__subttl span::before { transform: scale(0, 1); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: left top; }
.first__subttl.is-done span::before { transform: scale(1, 1); }

.series__largeimg::before { transform: scale(1, 1); transform-origin: center right; transition: transform .3s ease-in-out; }
.series__largeimg img { transform: scale(1.2); }
.series__largeimg.is-done:before { transform: scale(0, 1); }
.series__largeimg.is-done img { animation: zoomOut 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.series__ttl::before { transform: scale(0, 1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: left top; }
.series__ttl.is-done::before { transform: scale(1, 1); }

.interview__ttl::before { transform: scale(0, 1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: left top; }
.interview__ttl.is-done::before { transform: scale(1, 1); }