/*
font-family: 'Noto Serif Display', serif;
font-family: 'Poppins', sans-serif;
font-family: noto-sans-cjk-jp, sans-serif;

font-family: goldenbook, serif;
font-weight: 600;
font-style: normal;

font-family: poppins, sans-serif;
font-weight: 400;
font-style: normal;
*/


/* base style */
.main-area{
  position: relative;
  overflow: clip;
  width: 100%;
  margin: 0 auto;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-align: center;
  color: #000;
  background-color: #fff;
  z-index: 1;

  --pc-width: 1920; /*PCデザイン幅*/
  --sp-width: 390; /*SPデザイン幅*/
  --pc-artboard-width: 650; /*SP共通デザイン幅*/
  --sp-artboard-width: 390; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
  --font-Noto: "Noto Sans JP", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-operetta: "operetta-12", serif;
  --color-dblue: #0A1C28;
}


.main-area * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

.main-area *::before,
.main-area *::after{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main-area img,
.main-area svg {
  height: auto;
  width: 100%;
}

#main-container picture {
  display: block;
}

.main-area a {
  display: inline-block;
}


@media only screen and (min-width: 560px) {

  /* ===========================
  * Style of Tablet-view *
  =========================== */
  #main-container{
    padding: 0;
    background-color: var(--color-dblue);
  }

  .main-area {
    padding: 0;
  }

  .sp_only {
    display: none !important;
  }

  .pc_only {
    display: block !important;
  }
  
}

@media only screen and (max-width: 559px){
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
}

@media only screen and (min-width: 1400px) {

  /* ===========================
  * Style of Tablet-view *
  =========================== */
  #main-container {
    padding: 0;
  }
}


/*========================================================
breadcrumb
========================================================*/
/* ----------[ breadcrumb SP ]---------- */
/* #main-container .cateList {
  width: 89%;
  margin: calc(59*(100vw / 390)) auto 0;
  padding: 0 0 calc(15 * (100vw / 390));
  font-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: calc(10 * (100vw / 390));
  letter-spacing: 0.01em;
  line-height: calc(20 * (100vw / 390));
  color: #000;
  text-align: left;
} */

/* ----------[ breadcrumb table ]---------- */
@media only screen and (min-width: 560px) {
  /* #main-container .cateList {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(1280 * (100vw / 1920));
    max-width: 1280px;
    height: calc(50 * (100vw / 1920));
    max-height: 50px;
    margin: 0 auto;
    padding: calc(131* (100vw / 1920)) calc(40 * (100vw / 1920)) calc(49 * (100vw / 1920)) 0;
    font-size: calc(13 * (100vw / 1920));
    letter-spacing: 0.01em;
    line-height: normal;
    color: #000;
  } */

  #main-container .cateList span {
    padding: 0 calc(5 * (100vw / 1920));
  }
}

/* ----------[ breadcrumb PC ]---------- */
@media only screen and (min-width: 1400px) {
  /* #main-container .cateList {
    margin: auto;
    padding: 131px 40px 49px 0;
    font-size: 13px;
    height: 50px;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-weight: normal;
  } */

  #main-container .cateList span {
    padding: 0 5px;
  }
}

.main-area {
  font-family: noto-sans-cjk-jp, sans-serif;
  line-height: 2;
  letter-spacing: 0.2em;
  text-align: center;
}

/*========================================================
mainvisual
========================================================*/
.maivsiual .inner {
  margin: auto;
  padding-bottom: calc(650* (100vw /390));
}

.maivsiual_tx {
  font-size: calc(14* (100vw /390));
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  padding: calc(37 * (100vw / 390)) 0 calc(55 * (100vw / 390)) 0;
}

@media screen and (min-width: 560px) {
  .maivsiual_tx {
    font-size: calc(18 * (100vw / 1920));
    line-height: 1.7777777778;
    padding: calc(55 * (100vw / 1920)) 0 calc(67 * (100vw / 1920));
  }
}

@media only screen and (min-width: 1400px) {
  .maivsiual_tx {
    font-size: 18px;
    padding: 55px 0 67px;
  }
}


/* ===============================================
* 共通 *
=============================================== */
/* ーーーーーーー .style ーーーーーーー */
.style {
  width: 100%;
  /* padding-top: calc(110 * (100vw /390)); */
  margin: auto;
  background-color: #fff;
}

.section {
  margin-bottom: calc(40 * (100vw /390));
  background-color: #EFEEEC;
}

.section_cont{
  position: relative;
}

.section .--inner{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

/*  回転ループアニメーション  */

.section .txt_circle{
  position: absolute;
  width: calc(159.55 * (100vw /390));
  animation: 40s linear infinite rotation1;
}

.section01 .txt_circle{
  top: calc(34 * (100vw /390));
  right: calc(20 * (100vw /390));
}

.section03 .txt_circle {
  top: calc(199 * (100vw /390));
  right: calc(25 * (100vw /390));
}

.section04 .txt_circle {
  top: calc(196 * (100vw / 390));
  left: calc(39 * (100vw / 390));
}

.section06 .txt_circle{
  top: calc(40 * (100vw / 390));
  right: calc(36 * (100vw / 390));
}

@media screen and (min-width: 560px) {
  .style {
    width: 100%;
    max-width: calc(650 * (100vw /1920));
    padding-top: calc(40 * (100vw / 1920));
  }

  .style-inner{
    max-width: calc(550 * (100vw /1920));
    margin: 0 auto;
  }

  .section .txt_circle{
    width: calc(225 * (100vw / 1920));
  }

  .section01 .txt_circle{
    top: calc(49.5 * (100vw / 1920));
    right: calc(28.5 * (100vw / 1920));
    left: auto;
  }

  .section03 .txt_circle {
    top: calc(278 * (100vw / 1920));
    right: calc(37 * (100vw / 1920));
  }

  .section04 .txt_circle {
    top: auto;
    right: auto;
    bottom: calc(411 * (100vw / 1920));
    left: calc(55 * (100vw / 1920));
  }

  .section06 .txt_circle {
    top: calc(55 * (100vw / 1920));
    right: calc(50 * (100vw / 1920));
  }
}

@media screen and (min-width: 1400px) {
  .style {
    width: 100%;
    max-width: 650px;
    padding-top: 40px;
  }

  .style-inner{
    max-width: 550px;
    margin: 0 auto;
  }

  .section .txt_circle{
    width: 225px;
  }

  .section01 .txt_circle{
    top: 49.5px;
    right: 28.5px;
  }

  .section03 .txt_circle {
    top: 278px;
    right: 37px;
  }

  .section04 .txt_circle {
    top: auto;
    right: auto;
    bottom: 411px;
    left: 55px;
  }

  .section06 .txt_circle {
    top: 55px;
    right: 50px;
  }

}

@keyframes rotation1{
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 560px) {
  .section {
    margin-bottom: calc(55 * (100vw / 1920));
  }

  .section .--inner{
    display: flex;
    align-items: center;
  }

}
@media screen and (min-width: 1400px) {
  .section {
    margin-bottom: 55px;
  }

  .section .--inner{
    display: flex;
    align-items: center;
  }

  .txt_circle{
    width: 229px;
    top: 109.5px;
    right: -64.5px;
    left: auto;
  }
}

/*　ーーーーーーー 無限ループスライダー ーーーーーーー　*/

.js-slider-set2_item{
  width: calc(665.54* (100vw /390));
}

.txt_infinite:first-child {
  padding-top: calc(10*(100vw / 390));
}

.txt_infinite:last-child {
  padding-bottom: calc(10*(100vw / 390));
}

@media screen and (min-width: 560px) {

  .txt_infinite-bg{
    position: absolute;
    z-index: 1!important;
    top: 0;
    left: calc(13* (100vw /1920));
    /* transform: rotate(90deg); */
    width: 35px;
    /* height: 2451.99px; */
    overflow: hidden;
  }
/* 
  .txt_infinite-bg .txt_infinite-bg__inner{
    position: fixed;
    top: 0;
    left: calc(24* (100vw /1920));
    transform: rotate(90deg);
    max-width: 100%;
    height: 100vh;
  } */

  .txt_infinite-bg .slider-set2_item{
    width: 35px;
    margin-bottom: 35px;
  }

  .txt_infinite-bg.--right{
    /* transform: rotate(-90deg); */
    left: auto;
    right: calc(13* (100vw /1920));
  }

  .slider-repeat-vertical{
    display: flex;
    flex-direction: column;
    animation: vertical-animation 150s linear infinite;
  }

  .txt_infinite-bg.--right .slider-repeat-vertical{
    display: flex;
    flex-direction: column-reverse;
    animation: vertical-animation-r 150s infinite linear;
  }

  @keyframes vertical-animation {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }

  @keyframes vertical-animation-r {
    0% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0);
    }
  }

  .js-slider-set2_item{
    width: calc(910.74* (100vw /1920));
  }

  .txt_infinite:first-child {
    padding-top: calc(14*(100vw / 1920));
  }

  .txt_infinite:last-child {
    padding-bottom: calc(18*(100vw / 1920));
  }
}

@media screen and (min-width: 1400px) {
  .txt_infinite-bg{
    left: 24px;
  }

  /* .txt_infinite-bg .js-slider-set2_item{
    width: 2451.99px;
  } */

  .txt_infinite-bg.--2{
    right: 24px;
  }

  .js-slider-set2_item{
    width: 910.74px;
  }

  .txt_infinite:first-child {
    padding-top: 14px;
  }

  .txt_infinite:last-child {
    padding-bottom: 18px;
  }
}

/*　ーーーーーーー credit ーーーーーーー　*/
.section .credit-wrap {
  position: relative;
  display: flex;
  background-color: #fff;
  width: calc(330 * (100vw /390));
  height: calc(303 * (100vw /390));
}

.section02 .credit-wrap,
.section03 .credit-wrap,
.section04 .credit-wrap{
  width: calc(330 * (100vw /390));
}

.section04 .credit-wrap{
  height: calc(140 * (100vw /390));
}

.section .crdt > div a {
  display: block;
  font-family:'Poppins', sans-serif;
  font-size: calc(14 * (100vw /390));
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
}

.section .crdt_wrap{
  display: flex;
  align-items: center;
  column-gap: calc(10 * (100vw / 390));
  row-gap: calc(9 * (100vw / 390));
}

.section02 .crdt_wrap,
.section04 .crdt_wrap{
  flex-direction: column;
}

.section02 .crdt > div a,
.section04 .crdt > div a{
  text-align: center;
  line-height: 1.5263157895;
}

/* .section .credit-wrap .buy_btn {
  position: absolute;
  width: calc(50*(100vw / 390));
  height: calc(18*(100vw / 390));
  right: calc(-60*(100vw / 390));
  top: calc(-1*(100vw / 390));
} */


.section .credit-wrap .buy_btn {
  width: calc(50*(100vw / 390));
}


.section .credit-wrap .nmbr{
  position: relative;
  font-family: goldenbook, serif;
  font-weight: 700;
  font-size: calc(50* (100vw /390));
  color: var(--color-dblue);
}

.section .credit-wrap .nmbr::after{
  content: '';
  position: absolute;
  transform:rotate(-50deg);
  width: calc(100* (100vw /390));
  height: 1px;
  background-color: var(--color-dblue);
}

.section .credit-wrap .crdt{
  display: flex;
  flex-direction: column;
  align-items: baseline;
  row-gap: calc(13* (100vw /390));
}

@media screen and (min-width: 560px) {
  .section .credit-wrap{
    width: calc(465.38 * (100vw / 1920));
    height: calc(427.31 * (100vw / 1920));
  }

  .section .crdt > div a {
    letter-spacing: 0.04em;
    font-size: calc(19* (100vw /1920));
  }

  .section .crdt_wrap{
    column-gap: calc(22 * (100vw / 1920));
    row-gap: calc(15 * (100vw / 1920));
  }

  .section .credit-wrap .buy_btn {
    width: calc(70.51*(100vw / 1920));
  }

  .section .credit-wrap .nmbr{
    font-size: calc(70* (100vw /1920));
    position: absolute;
  }

  .section .credit-wrap .nmbr::after{
    width: calc(141.03*(100vw / 1920));
    top: calc(75*(100vw / 1920));
  }

  .section .credit-wrap .crdt{
    row-gap: calc(18.5* (100vw /1920));
  }
}
@media screen and (min-width: 1400px) {
  .section .credit-wrap{
    width: 465.38px;
    height: 427.31px
  }

  .section .crdt > div a {
    font-size: 19px;
  }

  .section .crdt_wrap{
    column-gap: 22px;
    row-gap: 15px;
  }

  .section .credit-wrap .buy_btn {
    width: 70.51px;
  }

  .section .credit-wrap .nmbr{
    font-size: 70px;
  }

  .section .credit-wrap .nmbr::after{
    width: 141.03px;
    top: 75px;
  }

  .section .credit-wrap .crdt{
    row-gap: 18.5px;
  }
}

/*========================================================
section01
========================================================*/
.section01 .--inner01 {
  padding: calc(50* (100vw /390)) 0 calc(50* (100vw /390));
}

.section01 .img01{
  width: calc(350* (100vw /390));
  margin-right: 0;
  margin-left: calc(30*(100vw / 390));
}

.section01 .credit-wrap {
  margin: calc(23*(100vw / 390)) auto 0;
}

.section01 .credit-wrap .nmbr{
  top: calc(-51*(100vw / 390));
  left: calc(23*(100vw / 390));
}

.section01 .credit-wrap .nmbr::after{
  top: calc(78*(100vw / 390));
  left: calc(-22*(100vw / 390));
}

.section01 .credit-wrap .crdt{
    padding: calc(64* (100vw /390)) 0 0 calc(43* (100vw /390));
}
@media screen and (min-width: 560px) {
  .section01 .--inner01 {
    padding: calc(70* (100vw /1920)) 0 calc(100* (100vw /1920));
  }

  .section01 .img01{
    width: calc(493.59* (100vw /1920));
    margin-left: calc(30*(100vw / 1920));
  }

  .section01 .credit-wrap{
    top: calc(28 * (100vw / 1920));
    margin: calc(3 * (100vw / 1920)) 0 0 0;
  }

  .section01 .credit-wrap .nmbr{
    top: calc(-70*(100vw / 1920));
    left: calc(33*(100vw / 1920));
  }


  .section01 .credit-wrap .nmbr::after{
    top: calc(110 * (100vw / 1920));
    left: calc(-34 * (100vw / 1920));
  }

  .section01 .credit-wrap .crdt{
    padding: calc(92* (100vw / 1920)) 0 0 calc(85* (100vw / 1920));
  }
}
@media screen and (min-width: 1400px) {
  .section01 .--inner01 {
    padding: 70px 0 100px;
  }

  .section01 .img01{
    width: 493.59px;
    margin-left: 30px;
  }

  .section01 .credit-wrap{
    top: 28px;
    margin: 3px 0 0 0;
  }

  .section01 .credit-wrap .nmbr{
    top: -70px;
    left: 33px;
  }

  .section01 .credit-wrap .nmbr::after{
    top: 110px;
    left: -34px;
  }

  .section01 .credit-wrap .crdt{
    padding: 92px 0 0 85px;
  }
}
/*========================================================
section02
========================================================*/
.section02 .--inner02 {
  padding: 0 0 calc(44* (100vw /390));
}

.section02 .img02{
  width: calc(350 * (100vw / 390));
  margin-left: calc(20 * (100vw / 390));
  margin-top: calc(-25 * (100vw / 390));
}

.section02 .credit-wrap {
  height: calc(189 * (100vw / 390));
  margin: calc(30*(100vw / 390)) auto 0;
}

.section02 .credit-wrap a{
  text-align: center;
}

.section02 .credit-wrap .buy_btn{
  right: calc(79*(100vw / 390));
  top: calc(50*(100vw / 390));
}

.section02 .credit-wrap .nmbr{
  top: calc(-50 * (100vw / 390));
  left: calc(18 * (100vw / 390));
}

.section02 .credit-wrap .nmbr::after{
  top: calc(77*(100vw / 390));
  left: calc(-18*(100vw / 390));
}

.section02 .credit-wrap .crdt{
  padding: calc(59* (100vw /390)) 0 0 calc(63* (100vw /390));
}

@media screen and (min-width: 560px) {
  .section02 .--inner02 {
    padding: 0;
  }

  .section02 .img02{
    width: calc(493.59 * (100vw / 1920));
    margin-left: calc(-3 * (100vw / 1920));
    margin-top: calc(-33 * (100vw / 1920));
  }

  .section02 .credit-wrap {
    height: calc(266.54 * (100vw / 1920));
    margin: calc(42 * (100vw / 1920)) 0 calc(60 * (100vw / 1920));
  }

  .section02 .credit-wrap .buy_btn{
    /* width: calc(220* (100vw /1920)); */
    top: calc(49*(100vw / 1920));
    right: calc(80*(100vw / 1920));
  }

  .section02 .credit-wrap .nmbr{
    top: calc(-72*(100vw / 1920));
    left: calc(26*(100vw / 1920));
  }

  .section02 .credit-wrap .nmbr::after{
    top: calc(109*(100vw / 1920));
    left: calc(-25*(100vw / 1920));
  }

  .section02 .credit-wrap .crdt{
    padding: calc(83* (100vw /1920)) 0 0 calc(126* (100vw /1920));
  }
}
@media screen and (min-width: 1400px) {
  .section02 .--inner02 {
    padding: 0;
  }

  .section02 .img02{
    width: 493.59px;
    margin-left: -3px;
    margin-top: -33px;
  }

  .section02 .credit-wrap {
    height: 266.54px;
    margin: 42px 0 60px;
  }

  .section02 .credit-wrap .buy_btn{
    /* width: 220px; */
    top: 49px;
    right: 80px;
  }

  .section02 .credit-wrap .nmbr{
    top: -72px;
    left: 26px;
  }

  .section02 .credit-wrap .nmbr::after{
    top: 109px;
    left: -25px;
  }

  .section02 .credit-wrap .crdt{
    padding: 83px 0 0 126px;
  }
}
/*========================================================
section03
========================================================*/
.section03 .--inner03 {
  padding: calc(31* (100vw /390)) 0 calc(50* (100vw /390));
}

.section03 .img03{
  width: calc(350 * (100vw / 390));
  margin-left: calc(20 * (100vw / 390));
}

.section03 .credit-wrap {
  height: calc(295.09* (100vw /390));
  margin: calc(48*(100vw / 390)) auto 0;
}

.section03 .credit-wrap a{
  text-align: center;
}

.section03 .credit-wrap .nmbr {
  top: calc(-51*(100vw / 390));
  left: calc(18*(100vw / 390));
}

.section03 .credit-wrap .nmbr::after{
  top: calc(77*(100vw / 390));
  left: calc(-17*(100vw / 390));
}

.section03 .credit-wrap .crdt {
  padding: calc(61*(100vw / 390)) 0 0 calc(34*(100vw / 390));
}

@media screen and (min-width: 560px) {
  .section03 .--inner03 {
    padding: calc(39* (100vw /1920)) 0 calc(73* (100vw /1920));
  }

  .section03 .img03{
    width: calc(493.59 * (100vw / 1920));
    /* margin-left: calc(50 * (100vw / 1920)); */
    margin-left: 0;
  }

  .section03 .credit-wrap {
    margin: calc(70 * (100vw / 1920)) auto 0;
    height: calc(416.15 * (100vw / 1920));
  }

  .section03 .credit-wrap .nmbr {
    top: calc(-70 * (100vw / 1920));
    left: calc(26 * (100vw / 1920));
  }

  .section03 .credit-wrap .nmbr::after{
    top: calc(109 * (100vw / 1920));
    left: calc(-24 * (100vw / 1920));
  }

  .section03 .credit-wrap .crdt {
    padding: calc(88*(100vw / 1920)) 0 0 calc(86*(100vw / 1920));
  }
}
@media screen and (min-width: 1400px) {
  .section03 .--inner03 {
    padding: 39px 0 73px;
  }

  .section03 .img03{
    width: 493.59px;
    /* margin-left: 50px; */
    margin-left: 0;
  }

  .section03 .credit-wrap {
    margin: 70px auto 0;
    height: 416.15px;
  }

  .section03 .credit-wrap .nmbr {
    top: -70px;
    left: 26px;
  }

  .section03 .credit-wrap .nmbr::after{
    top: 109px;
    left: -24px;
  }

  .section03 .credit-wrap .crdt {
    padding: 88px 0 0 86px;
  }
}
/*========================================================
section04
========================================================*/
.section04 .--inner04 {
  padding: 0 0 calc(50* (100vw /390));
}

.section04 .img04{
  width: calc(350 * (100vw / 390));
  margin-left: calc(20 * (100vw / 390));
}

.section04 .credit-wrap {
  height: calc(189* (100vw /390));
  margin: calc(33*(100vw / 390)) auto 0;
}

.section04 .credit-wrap .nmbr{
  top: calc(-50 * (100vw / 390));
  left: calc(18 * (100vw / 390));
}

.section04 .credit-wrap .nmbr::after{
  top: calc(75*(100vw / 390));
  left: calc(-17*(100vw / 390));
}

.section04 .credit-wrap a{
  text-align: center;
}

.section04 .credit-wrap .crdt {
  padding: calc(59*(100vw / 390)) 0 0 calc(65*(100vw / 390));
}

/* _______________ animation_icon */
.section04 .animation_icon {
  position: absolute;
  display: inline-block;
  font-family: var(--font-poppins);
  font-weight: 500;
  font-style: normal;
  font-size: calc(12* (100vw /390));
  line-height: 1.4;
  letter-spacing: 0.04em;
  width: calc(74* (100vw /390));
  height: calc(74* (100vw /390));
  top: calc(19 * (100vw / 390));
  right: calc(20 * (100vw / 390));
  pointer-events: none;
  background: #EC7A23;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 2;
}

.section04 .animation_icon .inner {
  text-align: center;
}

@media screen and (min-width: 560px) {
  .section04 .--inner04 {
    padding: 0 0 calc(70* (100vw /1920));
  }

  .section04 .img04{
    width: calc(493.59* (100vw /1920));
    margin-left: calc(5* (100vw /1920));
  }

  .section04 .credit-wrap{
    height: calc(266.54* (100vw /1920));
    margin-top: calc(48* (100vw / 1920));
  }

  .section04 .credit-wrap .nmbr{
    top: calc(-73*(100vw / 1920));
    left: calc(26*(100vw / 1920));
  }

  .section04 .credit-wrap .nmbr::after{
    top: calc(111 * (100vw / 1920));
    left: calc(-24 * (100vw / 1920));
  }

  .section04 .credit-wrap .crdt {
    padding: calc(82*(100vw / 1920)) 0 0 calc(126*(100vw / 1920));
  }

  /* _______________ animation_icon */
  .section04 .animation_icon {
    width: calc(104 * (100vw / 1920));
    height: calc(105 * (100vw / 1920));
    top: calc(27 * (100vw / 1920));
    right: calc(27 * (100vw / 1920));
    font-size: calc(16 * (100vw / 1920));
    line-height: 1.4375;
    letter-spacing: 0.04em;
  }
}
@media screen and (min-width: 1400px) {
  .section04 .--inner04 {
    padding: 0 0 70px;
  }

  .section04 .img04{
    width: 493.59px;
    margin-left: 5px;
  }

  .section04 .credit-wrap{
    height: 266.54px;
    margin-top: 48px;
  }

  .section04 .credit-wrap .nmbr{
    top: -73px;
    left: 26px;
  }

  .section04 .credit-wrap .nmbr::after{
    top: 111px;
    left: -24px;
  }

  .section04 .credit-wrap .crdt {
    padding: 82px 0 0 126px;
  }

  /* _______________ animation_icon */
  .section04 .animation_icon {
    width: 104px;
    height: 105px;
    top: 27px;
    right: 27px;
    font-size: 16px;
  }
}
/*========================================================
section05
========================================================*/
.section05 .--inner05 {
  padding: calc(25* (100vw /390)) 0 calc(45* (100vw /390));
}

.section05 .img05{
  width: calc(350 * (100vw / 390));
  margin-left: calc(19 * (100vw / 390));
}

.section05 .credit-wrap {
  height: calc(201.98 * (100vw / 390));
  margin: calc(34*(100vw / 390)) auto 0;
}

.section05 .credit-wrap a{
  text-align: center;
}

.section05 .credit-wrap .buy_btn{
  right: calc(77*(100vw / 390));
  top: calc(50*(100vw / 390));
}

.section05 .credit-wrap .nmbr{
  top: calc(-51*(100vw / 390));
  left: calc(18*(100vw / 390));
}

.section05 .credit-wrap .nmbr::after{
  top: calc(77*(100vw / 390));
  left: calc(-17*(100vw / 390));
}

.section05 .credit-wrap .crdt {
  padding: calc(60*(100vw / 390)) 0 0 calc(58*(100vw / 390));
}

@media screen and (min-width: 560px) {
  .section05 .--inner05 {
    padding: calc(38* (100vw /1920)) 0 calc(64* (100vw /1920));
  }

  .section05 .img05{
    width: calc(493.59 * (100vw / 1920));
    margin-left: 0;
  }

  .section05 .credit-wrap {
    margin: calc(45 * (100vw / 1920)) 0 0;
    height: calc(284.84 * (100vw / 1920));
  }

  .section05 .credit-wrap .buy_btn{
    right: calc(78*(100vw / 1920));
    top: calc(50*(100vw / 1920));
  }

  .section05 .credit-wrap .nmbr{
    top: calc(-71 * (100vw / 1920));
    left: calc(27 * (100vw / 1920));
  }

  .section05 .credit-wrap .nmbr::after{
    top: calc(109 * (100vw / 1920));
    left: calc(-27 * (100vw / 1920));
  }

  .section05 .credit-wrap .crdt {
    padding: calc(86*(100vw / 1920)) 0 0 calc(123*(100vw / 1920));
  }
}
@media screen and (min-width: 1400px) {
  .section05 .--inner05 {
    padding: 38px 0 64px;
  }

  .section05 .img05{
    width: 493.59px;
    margin-left: 0;
  }
  .section05 .credit-wrap {
    margin:45px 0 0;
    height:284.84px;
  }

  .section05 .credit-wrap .buy_btn{
    right: 78px;
    top: 50px;
  }

  .section05 .credit-wrap .nmbr{
    top: -71px;
    left: 27px;
  }

  .section05 .credit-wrap .nmbr::after{
    top: 109px;
    left: -27px;
  }

  .section05 .credit-wrap .crdt {
    padding: 86px 0 0 123px;
  }
}
/*========================================================
section06
========================================================*/
.section06{
   margin-bottom: 0;
}

.section06 .--inner06 {
  padding: calc(40* (100vw /390)) 0 calc(50* (100vw /390));
}

.section06 .img06{
  width: calc(340* (100vw /390));
  margin-right: 0;
  margin-left: calc(30*(100vw / 390));
}

.section06 .credit-wrap{
  height: calc(202.03 * (100vw / 390));
  margin: calc(31*(100vw / 390)) auto 0;
}

.section06 .credit-wrap a{
  text-align: center;
}

.section06 .credit-wrap .nmbr {
  top: calc(-49*(100vw / 390));
  left: calc(18*(100vw / 390));
}

.section06 .credit-wrap .nmbr::after {
  top: calc(77*(100vw / 390));
  left: calc(-17*(100vw / 390));
}

.section06 .credit-wrap .crdt {
  padding: calc(62 * (100vw / 390)) 0 0 calc(51 * (100vw / 390));
}
@media screen and (min-width: 560px) {
  .section06 .--inner06 {
    padding: calc(55* (100vw /1920)) 0 calc(67* (100vw /1920));
  }

  .section06 .img06{
    width: calc(479.49 * (100vw / 1920));
    margin-left: calc(20 * (100vw / 1920));
  }

  .section06 .credit-wrap{
    margin: calc(45 * (100vw / 1920)) 0 0;
    height: calc(284.91 * (100vw / 1920));
  }

  .section06 .credit-wrap .nmbr {
    top: calc(-71 * (100vw / 1920));
    left: calc(25 * (100vw / 1920));
  }

  .section06 .credit-wrap .nmbr::after {
    top: calc(112 * (100vw / 1920));
    left: calc(-27 * (100vw / 1920));
  }

  .section06 .credit-wrap .crdt {
    padding: calc(86*(100vw / 1920)) 0 0 calc(116*(100vw / 1920));
  }
}
@media screen and (min-width: 1400px) {
  .section06 .--inner06 {
    padding: 55px 0 67px;
  }

  .section06 .img06{
    width: 479.49px;
    margin-left: 20px;
  }

  .section06  .credit-wrap .nmbr {
    top: -71px;
    left: 25px;
  }

  .section06 .credit-wrap{
    margin: 45px 0 0;
    height: 284.91px;
  }

  .section06 .credit-wrap .nmbr::after {
    top: 112px;
    left: -27px;
  }

  .section06 .credit-wrap{
    margin: 17px 0 0;
  }

  .section06 .credit-wrap .crdt {
    padding: 86px 0 0 116px;
  }
}

/*========================================================
js-line
========================================================*/
#main-container .actionBtn{
  background-color: var(--color-dblue);
  width: calc(300* (100vw /390));
  height: calc(50* (100vw /390));
  margin: calc(156*(100vw / 750)) auto 0;
}

#main-container .viewall {
  display: inline-block;
  width: 100%;
  font-family: var(--font-operetta);
  font-weight: 700;
  font-size: calc(24* (100vw / 390));
  color: #fff;
  letter-spacing: 0.04em;
  padding-top: calc(2* (100vw /390));
}

@media only screen and (min-width: 560px) {
  #main-container .actionBtn{
    width: calc(423.08 * (100vw / 1920));
    height: calc(70.51 * (100vw / 1920));
    margin: calc(117 * (100vw / 1920)) auto 0;
  }

  #main-container .viewall {
    font-size: calc(32* (100vw / 1920));
    word-spacing: calc(3 * (100vw / 1920));
    padding-top: calc(4* (100vw /1920));
  }
}

@media only screen and (min-width: 1400px) {
  #main-container .actionBtn{
    width: 423.08px;
    height: 70.510px;
    margin: 117px auto 0;
  }

  #main-container .viewall {
    font-size: 32px;
    word-spacing: 3px;
    padding-top: 4px;
  }
}

/*========================================================
js-line
========================================================*/
.js-line {
  position: relative;
  width: calc(650* (100vw /750));
  margin: calc(95* (100vw /750)) auto 0;
}

.js-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(2* (100vw /750));
  background: #000;
  transition: all .75s;
  transform: scale(0, 1);
  transform-origin: center top;
}

.js-line.onView::after {
  transform: scale(1, 1);
}

@media screen and (min-width: 768px) {
  .js-line {
    width: 120rem;
    margin: 7rem auto 0;
  }

  .js-line::after {
    height: 1px;
  }
}


/*========================================================
animation
========================================================*/

.fadeIn {
  opacity: 0;
}

.fadeIn.onView {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
}

/* scale up___________________________*/
.js-show.animation_icon {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(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), scale 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-show.animation_icon.onView {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* zoomout___________________________*/
.img-wrap .fade-zoomout {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.1);
  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), scale 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-wrap .fade-zoomout.onView {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* fade-left ___________________________*/
.fade-left {
  opacity: 0;
  transform: translateX(calc(-40* (100vw /750)));
  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);
}

.fade-left.onView {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .fade-left {
    transform: translateX(calc(-100* (100vw /750)));
  }
}


/* fade-right ___________________________*/
.fade-right {
  opacity: 0;
  transform: translateX(calc(40* (100vw /750)));
  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);
}

.fade-right.onView {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .fade-right {
    transform: translateX(calc(100* (100vw /750)));
  }
}

/* fade-bottom ___________________________*/
.fade-bottom {
  opacity: 0;
  transform: translateY(calc(100* (100vw /750)));
  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);
}

.fade-bottom.onView {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .fade-bottom {
    transform: translateY(7rem);
  }
}

/* slide-in-inner___________________________*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-50%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  width: 100%;
}


@keyframes slideTextX-100 {
  from {
    transform: translateX(50%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*

@media screen and (min-width: 390px) and (max-width: 1400px) {
  html {
    font-size: calc((10 * (100vw / 1920)));
  }
} */