@charset "UTF-8";
/* calc スタイル
======================================================================================== */
/* html {
  background: #f5f0e1;
} */

@media screen and (min-width: 560px) {
  html {
    scroll-behavior: smooth;
  }
}

#main-container {
  --color-white: #fff;
  --color-navy: #293754;
  --color-brown: #5A514F;
  --color-beige: #B39684;

  --font-azo: "azo-sans-web", sans-serif;
  --font-poppins: "poppins", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  font-style: normal;
  --pc-width: 1920;
  --sp-width: 390;
  --pc-artboard-width: 650;
  --sp-artboard-width: 390;
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/

  position: relative;
  width: 100%;
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--color-black);
  background-color: var(--color-white);
}

/* #main-container a{
  pointer-events: all;
} */

/* @media screen and (min-width: 1921px) {
  #GPH251110NordicDog {
    --ratio: 1px;
  }
} */

@media screen and (min-width: 560px) {
  #main-container {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); 
    --variable: calc(100vw / var(--pc-width));
    /* --variable: 1px; */
  }

  /* :root {
    --formula: calc(1px * calc(650 / 390));
  } */
}

/* SP画面幅 559px以下 可変 */
@media screen and (max-width: 559px) {
  #main-container {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
    overflow-x: hidden;
    /* --reference-value: .1rem;
    --dsesktop-rate: calc(100vw / 1920);
    --rate: calc(100cqi / 390);
    opacity: 1; */
  }
/* 
  :root {
    --formula: (100vw / 390);
  } */
}

@media screen and (min-width: 1401px) {
  #main-container {
    --variable: 1px; /* ←ここで固定化 */
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* 比率はそのまま */
  }
}

/* ベーススタイル
======================================================================================== */

.main-area * {
  box-sizing: border-box;
}
.main-area img {
  height: auto;
  opacity: 1;
  width: 100%;
}
.main-area a {
  display: inline-block;
  text-decoration: none;
}
.main-area picture {
  display: block;
}
.main-area p, .main-area ul, .main-area ol, .main-area dl {
  list-style: none;
}

@media (min-width: 560px) and (max-width: 1400px) {
  .contents__inner{
    max-width: calc(650 * var(--formula));
  }
}

@media screen and (min-width: 1401px) {
  .contents_area{
    max-width: 1600px;
  }
}

@media screen and (min-width: 560px) {
  .contents_area{
    display: flex;
    position: relative;
    /* min-width: 100%; */
    min-height: 100%;
    width: 100%;
    max-width: calc(1600* var(--formula_pc));
    overflow-x: clip;
    margin: 0 auto;
  }

  .left_part{
    position: relative;
    flex: 1;
    width: 50%;
  }

  .left_part__inner{
    position: sticky;
    width: 100%;
    height: 100vh;
    top: 0;
  }

  .left_part__box{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    row-gap: calc(20* var(--formula_pc));
    margin-top: calc(-73 * var(--formula_pc));
  }

  .left_part .mv_img{
    width: calc(600* var(--formula_pc));
  }

  .left_part .cai_btn{
    width: calc(430* var(--formula_pc));
  }

  .contents{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 50%;
    /* padding: 0 calc(100* var(--formula_pc)); */
  }

  .contents__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(650* var(--formula_pc));
    /* max-width: 650px; */
  }

  .spOnly {
    display: none;
  }

  .pcOnly {
    display: block;
  }

  .section_link{
    scroll-margin-top: calc(var(--headerHeight));
  }
}

@media screen and (max-width: 559px) {
  #GPH251110NordicDog{
    overflow-x: clip;
  }

  .spOnly {
    display: block;
  }

  .pcOnly {
    display: none;
  }

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  html {
    scrollbar-width: none;
    overflow-x: clip;
  }

  /* IE、Edge */
  body {
    -ms-overflow-style: none;
  }

  .contents_area{
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    overflow-x: clip;
  }

  .section_link{
    scroll-margin-top: calc(var(--headerHeight) + calc(10 * var(--formula)));
  }
}

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content {
  /* max-height: calc(170 * var(--formula)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content.open {
  /* max-height: calc(526 * var(--formula)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-btn {
  /* top: calc(50 * var(--formula)); */
  /* padding-top: calc(20 * var(--formula)); */
}


/* ==============================
  共通
============================== */
.maivsiual{
  position: relative;
  width: 100%;
  margin-bottom: calc(60 * var(--formula));
}


.mv_ttl{
  position: absolute;
  bottom: calc(26.7 * var(--formula));
  left: 50.5%;
  transform: translateX(-50%);
  width: calc(264.44 * var(--formula));
  pointer-events: none;
}

.anchor_set{
  display: flex;
  justify-content: space-between;
  width: calc(300 * var(--formula));
  margin: 0 auto;
}

a.dog01-anchor,
a.dog02-anchor{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(145 * var(--formula));
  height: calc(174 * var(--formula));
}

.anchor__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(3 * var(--formula));
}

.dog01-anchor{
  background-color: var(--color-navy);
}

.dog02-anchor{
  background-color: var(--color-beige);
}

.dog01-anchorbtn_img{
  width: calc(90 * var(--formula));
}

.dog02-anchorbtn_img{
  width: calc(89 * var(--formula));
}

.go_btn{
  width: calc(36 * var(--formula));
  height: calc(38 * var(--formula));
}

.sec__content{
  display: flex;
  flex-direction: column;
  row-gap: calc(12 * var(--formula));
  width: 100%;
}

.dog-top{
  width: calc(250 * var(--formula));
  padding-top: calc(60 * var(--formula));
  margin: 0 auto calc(40 * var(--formula));
}

.flex_wrap{
  display: flex;
  width: 100%;
}

.flex_wrap .sec__content-item{
  width: 50%;
  margin-left: -0.2px;
}


/* ==============================
  section01
============================== */
.sec__wrapper.--01 .gift_img{
  width: calc(33.39 * var(--formula));
}


/* ==============================
  section02
============================== */
.sec__wrapper.--02 .gift_img{
  width: calc(40.75 * var(--formula));
}


/* ==============================
  cai_btn
============================== */
.sp_cai_btn{
  width: calc(358 * var(--formula));
  margin: calc(80 * var(--formula)) auto calc(80 * var(--formula));
}

@media screen and (min-width: 560px) {
  .sp_cai_btn{
    margin: calc(80 * var(--formula)) auto 0;
  }
}



/* ===============================================
* SPモーダル *
=============================================== */
@media screen and (max-width: 767px) {

  /*================ Swipear ================*/
  #main-container .swiper-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: hidden;
  }

  #main-container .swiper-wrapper {
    width: 100%;
    height: 100%;
  }

  #main-container .swiper-slide img {
    width: auto;
    height: 100%;
    vertical-align: bottom;
  }

  /* 前へ次への矢印カスタマイズ */
  #main-container .swiper-button-prev,
  #main-container .swiper-button-next {
    margin-top: 0;
    width: 4%;
    height: calc(30 * var(--formula));
    top: calc(545 * var(--formula));
    z-index: 2000;
  }

  #main-container .swiper-button-prev {
    left: 6%;
  }

  #main-container .swiper-button-next {
    right: 6%;
  }

  #main-container .swiper-button-prev::after,
  #main-container .swiper-button-next::after {
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  #main-container .swiper-button-prev::after {
    background-image: url(../img/arrow-left.svg);
  }

  #main-container .swiper-button-next::after {
    background-image: url(../img/arrow-right.svg);
  }

  #main-container .swiper-slide img {
    height: auto;
    width: 100%;
  }

  #main-container .swiper-pagination-current,
  #main-container .swiper-pagination-total {
    position: relative;
    display: inline-block;
    font-family: var(--font-poppins);
    font-weight: var(--fw-light);
    font-size: calc(14* var(--formula));
    font-style: normal;
    color: var(--color-navy);
    letter-spacing: 0.05em;
    top: calc(1* var(--formula));
  }

  #main-container .swiper-pagination-current {
    width: calc(20 * var(--formula));
    padding: calc(2 * var(--formula)) 0 0 0;
  }

  #main-container .swiper-pagination-total{
    padding: calc(2 * var(--formula)) 0 0  calc(5 * var(--formula));
  }

  /*================ Modal ================*/
  #main-container .modalWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-white);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    box-sizing: border-box;
    z-index: 100000;
  }

  #main-container .modalWrap.active {
    opacity: 1;
    display: block;
    visibility: visible;
    transition: 0.5s;
  }

  #main-container .modalBody {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100vw;
    margin: 15.2% auto 20%;
  }

  #main-container .modalCont {
    width: calc(350* var(--formula));
    margin: 0 auto;
    position: relative;
  }

  #main-container .modalCont--numb {
    display: inline-block;
    width: auto;
    position: absolute;
    top: calc(550* var(--formula));
    left: 41%;
    color: var(--color-navy);
    pointer-events: none;
    font-family: var(--font-poppins);
    font-weight: var(--fw-light);
    font-size: calc(12* var(--formula));
  }

  #main-container .creditWrap {
    border-top: solid calc(1* var(--formula)) var(--color-navy);
    padding: calc(24* var(--formula)) 4.8% 0;
    margin: calc(68* var(--formula)) auto 0;
  }

  #main-container .creditWrap .credit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(12 * var(--formula)) calc(12 * var(--formula));
  }

  #main-container .creditWrap li{
    display: block;
    font-family: var(--font-poppins);
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    font-size: calc(11* var(--formula));
    font-style: normal;
    color: var(--color-navy);
  }

  /*====== CloseBtn ======*/
  #main-container .modalClose {
    position: absolute;
    top: calc(-46* var(--formula));
    right: -1.2%;
    width: calc(30* var(--formula));
    height: calc(30* var(--formula));
    cursor: pointer;
    z-index: 1000;
    transition: 0.5s;
  }

  #main-container .modalClose::before,
  #main-container .modalClose::after {
    content: "";
    display: block;
    background: var(--color-navy);
    width: calc(30* var(--formula));
    height: 1px;
    position: absolute;
    top: calc(17 *  var(--formula));
    left: calc(16 *  var(--formula));
  }

  #main-container .modalClose::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #main-container .modalClose::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }


}


/* ===============================================
* PCクレジット *
=============================================== */
@media screen and (min-width: 768px) {
  .card__wrap .pcOnly {
    position: relative;
  }

  .card__wrap .pcOnly::before {
    transition-duration: 1.2s;
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(000, 000, 000, 0.4);
    background-repeat: no-repeat;
    background-position: bottom;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
  }

  .card__wrap .pcOnly:hover::before {
    opacity: 1;
  }

  .card__wrap .creditWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 100;
  }

  .card__wrap .creditWrap .credit {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: calc(9* var(--formula_pc));
    padding: 0 0 calc(5 * var(--formula_pc)) calc(12 * var(--formula_pc));
  }

  .card__wrap .creditWrap .credit a {
    width: max-content;
    margin: 0 auto;
    transition: transform 0.8s, opacity 0.8s;
    transform: translateY(20%);
    opacity: 0;
    display: inline-block;
    margin: 0 calc(14 * var(--formula_pc)) calc(0 * var(--formula_pc)) 0;
    font-family: var(--font-azo);
    font-weight: var(--fw-regular);
    font-style: normal;
    font-size: calc(14* var(--formula_pc));
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--color-white);
  }

  .card__wrap .pcOnly:hover .creditWrap .credit a {
    transition-duration: 1.2s;
    transform: translateY(0);
    opacity: 1;
  }

  /* ___________________________*/
  .creditWrap li a {
    position: relative;
  }

  /* .creditWrap li a:hover {
    opacity: 0.5;
  } */

  .card__wrap .creditWrap .credit a:hover{
    opacity: 0.5 !important;
  }

}



/* ==============================
  animatiion
============================== */
.maivsiual .animation-delay{
  transition-delay: 0.5s;
}

/* frameWrapper ___________________________*/
.frameWrapper {
  opacity: 0;
  transition: opacity 0.5s;
}
.frameWrapper.onView {
  opacity: 1;
}


/* curlUp ___________________________*/
.js-show.curlUp{
  transition-duration: 1s;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.js-show.curlUp.view{
  clip-path: polygon(0% 0%, 0% 0%, 0% 200%, 200% 0%);
}

/* fadeIn ___________________________*/
.js-show.fadeIn{
  opacity: 0;
  transition: opacity 1s ease-in;
}

.js-show.fadeIn.view{
  opacity: 1;
}

/* fadeUp ___________________________*/
.js-show.fadeUp{
  transform: translateY(calc(70 * var(--formula)));
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-show.fadeUp.view{
  opacity: 1;
  transform: translateY(0);
}

/* delay_anim ___________________________*/
.js-show.fadeIn.delay_anim{
  transition-delay: 1s;
}