/* 全体設定 */
	html { scroll-behavior: smooth;}

/* フェード初期値 */
  .fadeAnim{
    opacity: 0;
  }

/* 横画面 */
@media (orientation: landscape){
	:root {
	  --width_top_all: 90vw;
	  --width_top_all-max: 1300px;
	  --width_logo: 44vw;
	  --width_logo-max: 650px;
	  --width_topR: 44vw;
	  --width_topR-max: 650px;

	  --width_dk321: 95vw;
	  --width_dk321-max: 1100px;
	  --width_dk321_title: 90vw;
	  --width_dk321_title-max: 700px;

	  --width_dk4: 95vw;
	  --width_dk4-max: 1100px;
	  --width_dk4_title: 90vw;
	  --width_dk4_title-max: 700px;

	  --width_dkgaiden: 95vw;
	  --width_dkgaiden-max: 1100px;
	  --width_dkgaiden_title: 90vw;
	  --width_dkgaiden_title-max: 700px;

	  --width_dkswitch: 90vw;
	  --width_dkswitch-max: 1000px;
	  --width_dkswitch_title: 90vw;
	  --width_dkswitch_title-max: 1000px;

	  --width_dkbonus: 90vw;
	  --width_dkbonus-max: 1000px;
	  --width_dkbonus_title: 90vw;
	  --width_dkbonus_title-max: 1000px;

	  --width_popup: 70vw;
	}
	.all-out_box{
	  display:grid;
	  grid-template-rows: auto auto auto auto;
	}


	.title-logo-out_box{
	  display:grid;
	  grid-template-columns: auto auto;
	}
	/* メインタイトル */
	  .title-logo_box{
	    width: min(var(--width_top_all-max),var(--width_top_all));
	    margin: auto;
	    display:grid;
	    grid-template-rows: auto auto auto auto auto;
	    grid-template-columns: 50% 50%;
	    grid-template-areas: 
	    "top-dummy-box top-dummy-box"
	    "main-title dk3title"
	    "sale-dateX sale-dateX"
	    "dkinfo-text top-youtube_area"
	    "dkinfo-text store-button_area";
	  }
	  .title-image{
	    grid-area: main-title;
	    position: relative;
	    text-align:center;
	    width: 100%;
	    height: min(calc(var(--width_logo-max) * 1.17),calc(var(--width_logo) * 1.17));
	    transform: translateX(0%);
	  }
	/* 発売日 */
	  .sale-date_box{
	    grid-area: sale-dateX;
	    position: relative;
	    text-align:center;
	    width: 60%;
	    height: min(calc(var(--width_logo-max) * 0.225),calc(var(--width_logo) * 0.225));
	    margin: auto;
	    padding: 2vw;
	  }
	  .sale_date_inbox{
	    display: grid;
	    grid-template-columns: auto auto;
	    grid-template-rows: auto auto;
	    grid-template-areas:
	    "sale_date_01 sale_date_01"
	    "sale_date_02 sale_date_03";
	  }
	  .sale_date_area01{
	    grid-area: sale_date_01;
	    height: min(calc(var(--width_logo-max) * 0.110),calc(var(--width_logo) * 0.110));
	    margin: auto;
	  }
	  .sale_date_area02{
	    grid-area: sale_date_02;
	    height: min(calc(var(--width_logo-max) * 0.112),calc(var(--width_logo) * 0.112));
	    margin-left: auto;
	  }
	  .sale_date_area03{
	    grid-area: sale_date_03;
	    height: min(calc(var(--width_logo-max) * 0.112),calc(var(--width_logo) * 0.112));
	    margin-right: auto;
	  }
	  .top-youtube_box{
	    grid-area: top-youtube_area;
	    position:relative;
	    width: 80%;
	    aspect-ratio: 1 / 0.579;
	  }
	  .top-youtube_in{
	    position: absolute;
	    top: 3.8%;
	    left: 2%;
	    height: 92%;
	    width: 96%;
	    background: #000;
	  }
	  .top-youtube_frame{
	    position: absolute;
	    top: 0;
	    width: 100%;
	    height:100%;
	    border-radius: 2vw;
	    pointer-events: none;
	  }

	/* ストアボタン */
	  .store-button_box{
	    grid-area: store-button_area;
	    width: 80%;
	    display: grid;
	    grid-template-columns: auto auto;
	    grid-template-areas:
	    "switch-store-button package-store-button";
	  }
	  .switch-button{
	    grid-area: switch-store-button;
	    position: relative;
	    text-align:center;
	    width: 95%;
	    height: min(calc(var(--width_logo-max) * 0.15),calc(var(--width_logo) * 0.15));
	    margin: auto;
	    margin-left: 0;
	  }
	  .package-button{
	    grid-area: package-store-button;
	    position: relative;
	    text-align:center;
	    width: 95%;
	    height: min(calc(var(--width_logo-max) * 0.15),calc(var(--width_logo) * 0.15));
	    margin: auto;
	    margin-right: 0;
	  }

	  .dkinfo-bg_box{
	    grid-area: dkinfo-text;
	    width: 80%;
	    height: min(calc(var(--width_topR-max) * 0.7),calc(var(--width_topR) * 0.7));
	    margin: auto;
	    position: relative;
	  }
	  .dkinfo-bg_img{
	    width: 100%;
	  }
	  .dkinfo-text-outbox{
	    position: absolute;
	    top: 7%;
	    width: 100%
	  }
	  .dkinfo-text-head{
	    text-align: center;
	    height: min(calc(var(--width_topR-max) * 0.081),calc(var(--width_topR) * 0.081));
	  }
	  .dkinfo-text{
	    font-size: min(calc(var(--width_topR-max) * 0.040),calc(var(--width_topR) * 0.040));
	    font-weight: 600;
	    font-family: 'Noto Sans JP', sans-serif;
	  }
	  .dkinfo-text_box{
	    text-align: center;
	    height: min(calc(var(--width_topR-max) * 0.050),calc(var(--width_topR) * 0.050));
	  }
	  .dk3title_box{
	    grid-area: dk3title;
	    width: 100%;
	    height: min(calc(var(--width_logo-max) * 1.17),calc(var(--width_logo) * 1.17));
	    margin: auto;
	  }
	  .top-image-copy_base{
	    position: relative;
	  }
	  .top-image-copy{
	    position: absolute;
	    top: min(calc(var(--width_logo-max) * 0.020),calc(var(--width_logo) * 0.020));
	    right: 0;
	    width: min(calc(var(--width_logo-max) * 0.071),calc(var(--width_logo) * 0.071));
	    z-index: 3;
	  }
	  /* 伝説・友情・炎の競演！ */
	  .top_3title_img{
	    width: 100%;
	  }
	  .top_3title_title_box{
	    display: none;
	  }
	  .top_3title_title_img{
	   width: min(calc(var(--width_topR-max) * 0.571),calc(var(--width_topR) * 0.571));
	  }
	  .top_3title_box{
	    position: relative;
	    top: 50%;
	    transform: translateY(-50%);
	  }
	  .top_3title_dk321{
	    position: absolute;
	    top: min(calc(var(--width_topR-max) * 0.081),calc(var(--width_topR) * 0.081));
	    left: min(calc(var(--width_topR-max) * 0.16),calc(var(--width_topR) * 0.16));
	    width: min(calc(var(--width_topR-max) * 0.5),calc(var(--width_topR) * 0.5));
	  }
	  .top_3title_dk321_anim{
	    animation: top_3title_dk321_frame 6s linear infinite;
	  }
	  @keyframes top_3title_dk321_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }
	  .top_3title_dk4{
	    position: absolute;
	    top: min(calc(var(--width_topR-max) * 0.45),calc(var(--width_topR) * 0.45));
	    right: min(calc(var(--width_topR-max) * 0.1),calc(var(--width_topR) * 0.1));
	    width: min(calc(var(--width_topR-max) * 0.48),calc(var(--width_topR) * 0.48));
	  }
	  .top_3title_dk4_anim{
	    animation: top_3title_dk4_frame 5.5s linear infinite;
	  }
	  @keyframes top_3title_dk4_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }
	  .top_3title_dkgaiden{
	    position: absolute;
	    top: min(calc(var(--width_topR-max) * 0.8),calc(var(--width_topR) * 0.8));
	    left: min(calc(var(--width_topR-max) * 0.16),calc(var(--width_topR) * 0.16));
	    width: min(calc(var(--width_topR-max) * 0.48),calc(var(--width_topR) * 0.48));
	  }
	  .top_3title_dkgaiden_anim{
	    animation: top_3title_dkgaiden_frame 6.5s linear infinite;
	  }
	  @keyframes top_3title_dkgaiden_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }

	  /* 汗 */
	  .top_sweat{
	    position: absolute;
	    top: min(calc(var(--width_logo-max) * 0.138),calc(var(--width_logo) * 0.138));
	    left: min(calc(var(--width_logo-max) * 0.628),calc(var(--width_logo) * 0.628));
	    width: min(calc(var(--width_logo-max) * 0.102),calc(var(--width_logo) * 0.102));
	  }
	  .top_sweat_in{
	    animation: top_sweat_in_frame 0.5s ease-out;
	    transform-origin: 180% 100%;
	    opacity: 0;
	  }
	  @keyframes top_sweat_in_frame{
	    0%{
	    transform: rotate(60deg) scale(0.1);
	    }
	    100%{
	    transform: rotate(0deg);
	    opacity: 1;
	    }
	  }
	  .top_sweat_anim{
	    animation: top_sweat_frame 3s linear infinite;
	    transform-origin: 120% 120%;
	  }
	  @keyframes top_sweat_frame{
	    0%{
	    transform: rotate(0deg);
	    }
	    25%{
	    transform: rotate(8deg) scale(1.05);
	    }
	    50%{
	    transform: rotate(0deg);
	    }
	    75%{
	    transform: rotate(-7deg) scale(0.95);
	    }
	    100%{
	    transform: rotate(0deg);
	    }
	  }
	  /* コイン 01 */
	  .top_coin01_in{
	    animation: top_coin01_in_frame 0.6s ease-out;
	  }
	  @keyframes top_coin01_in_frame{
	      0%{ transform: translate(-20vw,-55vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin01_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.122),calc(var(--width_logo) * 0.122));
	    top: min(calc(var(--width_logo-max) * 0.469),calc(var(--width_logo) * 0.469));
	    left: min(calc(var(--width_logo-max) * 0.020),calc(var(--width_logo) * 0.020));
	  }
	  .top_coin01_anim{
	    animation: top_coin01_frame 2s linear infinite;
	  }
	  @keyframes top_coin01_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(15deg);
	    }
	    50%{
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(-15deg);
	    }
	  }
	  /* コイン 02 */
	  .top_coin02_in{
	    animation: top_coin02_in_frame 0.5s ease-out;
	  }
	  @keyframes top_coin02_in_frame{
	      0%{ transform: translate(-5vw,-30vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin02_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.122),calc(var(--width_logo) * 0.122));
	    top: min(calc(var(--width_logo-max) * 0.153),calc(var(--width_logo) * 0.153));
	    left: min(calc(var(--width_logo-max) * 0.204),calc(var(--width_logo) * 0.204));
	  }
	  .top_coin02_anim{
	    animation: top_coin02_frame 3s linear infinite;
	  }
	  @keyframes top_coin02_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(30deg);
	    }
	    50%{
	      filter: brightness(1.1);
	    }
	    75%{
	      transform: rotate(-30deg);
	    }
	  }
	  /* コイン 03 */
	  .top_coin03_in{
	    animation: top_coin03_in_frame 0.6s ease-out;
	  }
	  @keyframes top_coin03_in_frame{
	      0%{ transform: translate(10vw,-20vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin03_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.081),calc(var(--width_logo) * 0.081));
	    top: min(calc(var(--width_logo-max) * 0.163),calc(var(--width_logo) * 0.163));
	    left: min(calc(var(--width_logo-max) * 0.530),calc(var(--width_logo) * 0.530));
	  }
	  .top_coin03_anim{
	    animation: top_coin03_frame 2s linear infinite;
	  }
	  @keyframes top_coin03_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(-15deg);
	    }
	    50%{
	      transform: rotate(-30deg);
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(-15deg);
	    }
	  }
	  /* コイン 04 */
	  .top_coin04_in{
	    animation: top_coin04_in_frame 0.4s ease-out;
	  }
	  @keyframes top_coin04_in_frame{
	      0%{ transform: translate(10vw,-60vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin04_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.102),calc(var(--width_logo) * 0.102));
	    top: min(calc(var(--width_logo-max) * 0.489),calc(var(--width_logo) * 0.489));
	    left: min(calc(var(--width_logo-max) * 0.806),calc(var(--width_logo) * 0.806));
	  }
	  .top_coin04_anim{
	    animation: top_coin04_frame 3s linear infinite;
	  }
	  @keyframes top_coin04_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(15deg);
	    }
	    50%{
	      transform: rotate(30deg);
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(15deg);
	    }
	  }
	  /* 光芒 01 */
	  .top_particle01_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.112),calc(var(--width_logo) * 0.112));
	    top: min(calc(var(--width_logo-max) * 0.204),calc(var(--width_logo) * 0.204));
	    left: min(calc(var(--width_logo-max) * 0.387),calc(var(--width_logo) * 0.387));
	  }
	  .top_particle01_anim{
	    animation: top_particle01_frame 8s linear infinite;
	  }
	  @keyframes top_particle01_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    100%{
	      transform: rotate(360deg);
	    }
	  }
	  .top_particle01_in{
	    animation: top_particle01_in_frame 0.8s linear;
	  }
	  @keyframes top_particle01_in_frame{
	    0%{
	      opacity: 0;
	      transform: scale(0);
	    }
	    70%{
	      transform: rotate(-45deg);filter: blur(8px) brightness(20);
	      transform: scale(1);
	      opacity: 1;
	    }
	    100%{
	      transform: rotate(0deg);
	    }
	  }

	  /* 光芒 02 */
	  .top_particle02_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.091),calc(var(--width_logo) * 0.091));
	    top: min(calc(var(--width_logo-max) * 0.244),calc(var(--width_logo) * 0.244));
	    left: min(calc(var(--width_logo-max) * 0.469),calc(var(--width_logo) * 0.469));
	  }
	  .top_particle02_in{
	    animation: top_particle02_in_frame 0.7s linear;
	  }
	  @keyframes top_particle02_in_frame{
	    0%{
	      opacity: 0;
	      transform: scale(0);
	    }
	    70%{
	      transform: rotate(-45deg);filter: blur(8px) brightness(20);
	      transform: scale(1);
	      opacity: 1;
	    }
	    100%{
	      transform: rotate(0deg);
	    }
	  }
	  .top_particle02_anim{
	    animation: top_particle02_frame 8s linear infinite;
	  }
	  @keyframes top_particle02_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    100%{
	      transform: rotate(360deg);
	    }
	  }

	  .top_PKGDL_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.714),calc(var(--width_logo) * 0.714));
	    top: min(calc(var(--width_logo-max) * 1.05),calc(var(--width_logo) * 1.05));
	    left: min(calc(var(--width_logo-max) * 0.142),calc(var(--width_logo) * 0.142));
	  }
	  .top_PKGDL_anim{
	    animation: top_PKGDL_frame 10s linear infinite;
	  }
	  @keyframes top_PKGDL_frame{
	    0%{
	      transform: scale(1);
	    }
	    91%{
	      transform: scale(1);
	    }
	    92%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    93%{
	      transform: scaleX(0.90) scaleY(1.1);
	    }
	    94%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    95%{
	      transform: scaleX(1.05) scaleY(0.95);
	    }
	    97%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    100%{
	      transform: scale(1);
	    }
	  }

	/* ドカポン３・２・１ */
		.dk321-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dk321-max) * 0.35),calc(var(--width_dk321) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dk321-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dk321) * 0.45);
		  max-height: calc(var(--width_dk321_title-max) * 0.5);
		}
		.dk321-logo-img{
		  height: auto;
		  width: var(--width_dk321_title);
		  max-width: var(--width_dk321_title-max);
		}
		.dk321-logo-bg{
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		.dk321-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dk321-grid_box {
		  width: var(--width_dk321);
		  max-width: var(--width_dk321-max);
		  display: grid;
		  grid-template-columns: auto auto auto auto auto auto;
		  grid-template-rows: auto auto;
		  column-gap: min(calc(var(--width_dk321-max) * 0.03) , calc(var(--width_dk321) * 0.03));
		  row-gap: min(calc(var(--width_dk321-max) * 0.04) , calc(var(--width_dk321) * 0.04));
		}
		.dk321info_layout{
		  grid-column: 1 / 4;
		  grid-row: 1 / 2;
		}
		.dk321youtube1_layout{
		  grid-column: 4 / 7;
		  grid-row: 1 / 2;
		}
		.dk321youtube2_layout{
		  grid-column: 1 / 3;
		  grid-row: 2 / 3;
		}
		.dk321youtube3_layout{
		  grid-column: 3 / 5;
		  grid-row: 2/ 3;
		}
		.dk321youtube4_layout{
		  grid-column: 5 / 7;
		  grid-row: 2 / 3;
		}
	/* ドカポン３・２・１動画+画像 */
		.youtube-321_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk321) * 0.48);
		  max-width: calc(var(--width_dk321-max) * 0.48);;
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-321_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk321) * 0.3);
		  max-width: calc(var(--width_dk321-max) * 0.3);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dk321info_box{
		  position: relative;
		  width: calc(var(--width_dk321) * 0.48);
		  max-width: calc(var(--width_dk321-max) * 0.48);
		  aspect-ratio: 1 / 0.579;
		}
		.dk321info-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dk321info-text{
		  color: #293;
		  font-size: min(calc(var(--width_dk321-max) * 0.023),calc(var(--width_dk321) * 0.023));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dk321info-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dk321-max) * 0.040),calc(var(--width_dk321) * 0.040));
		}
		.youtube-321_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 90%;
		  width: 94%;
		  background: #000;
		}
		.youtube-321_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-321_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk321-max) * 0.015) , calc(var(--width_dk321) * 0.015));
		  pointer-events: none;
		}
		.youtube-321_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk321-max) * 0.027) , calc(var(--width_dk321) * 0.027));
		  pointer-events: none;
		}

	/* ドカポンIV */
		.dk4-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dk4-max) * 0.35),calc(var(--width_dk4) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dk4-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dk4) * 0.45);
		  max-height: calc(var(--width_dk4_title-max) * 0.5);
		}
		.dk4-logo-img{
		  height: auto;
		  width: var(--width_dk4_title);
		  max-width: var(--width_dk4_title-max);
		}
		.dk4-logo-bg{
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		.dk4-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dk4-grid_box {
		  width: var(--width_dk4);
		  max-width: var(--width_dk4-max);
		  display: grid;
		  grid-template-columns: auto auto auto auto auto auto;
		  grid-template-rows: auto auto;
		  column-gap: min(calc(var(--width_dk4-max) * 0.03) , calc(var(--width_dk4) * 0.03));
		  row-gap: min(calc(var(--width_dk4-max) * 0.04) , calc(var(--width_dk4) * 0.04));
		}
		.dk4info_layout{
		  grid-column: 1 / 4;
		  grid-row: 1 / 2;
		}
		.dk4youtube1_layout{
		  grid-column: 4 / 7;
		  grid-row: 1 / 2;
		}
		.dk4youtube2_layout{
		  grid-column: 1 / 3;
		  grid-row: 2 / 3;
		}
		.dk4youtube3_layout{
		  grid-column: 3 / 5;
		  grid-row: 2/ 3;
		}
		.dk4youtube4_layout{
		  grid-column: 5 / 7;
		  grid-row: 2 / 3;
		}
		.youtube-4_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk4) * 0.48);
		  max-width: calc(var(--width_dk4-max) * 0.48);;
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-4_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk4) * 0.3);
		  max-width: calc(var(--width_dk4-max) * 0.3);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dk4info_box{
		  position: relative;
		  width: calc(var(--width_dk4) * 0.48);
		  max-width: calc(var(--width_dk4-max) * 0.48);
		  aspect-ratio: 1 / 0.579;
		}
		.dk4info-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dk4info-text{
		  color: #137;
		  font-size: min(calc(var(--width_dk4-max) * 0.023),calc(var(--width_dk4) * 0.023));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dk4info-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dk4-max) * 0.040),calc(var(--width_dk4) * 0.040));
		}
		.youtube-4_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 90%;
		  width: 94%;
		  background: #000;
		}
		.youtube-4_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-4_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk4-max) * 0.015) , calc(var(--width_dk4) * 0.015));
		  pointer-events: none;
		}
		.youtube-4_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk4-max) * 0.027) , calc(var(--width_dk4) * 0.027));
		  pointer-events: none;
		}

	/* ドカポン外伝 */
		.dkgaiden-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dkgaiden-max) * 0.35),calc(var(--width_dkgaiden) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dkgaiden-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dkgaiden) * 0.45);
		  max-height: calc(var(--width_dkgaiden_title-max) * 0.5);
		}
		.dkgaiden-logo-img{
		  height: auto;
		  width: var(--width_dkgaiden_title);
		  max-width: var(--width_dkgaiden_title-max);
		}
		.dkgaiden-logo-bg{
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		.dkgaiden-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dkgaiden-grid_box {
		  width: var(--width_dkgaiden);
		  max-width: var(--width_dkgaiden-max);
		  display: grid;
		  grid-template-columns: auto auto auto auto auto auto;
		  grid-template-rows: auto auto;
		  column-gap: min(calc(var(--width_dkgaiden-max) * 0.03) , calc(var(--width_dkgaiden) * 0.03));
		  row-gap: min(calc(var(--width_dkgaiden-max) * 0.04) , calc(var(--width_dkgaiden) * 0.04));
		}
		.dkgaideninfo_layout{
		  grid-column: 1 / 4;
		  grid-row: 1 / 2;
		}
		.dkgaidenyoutube1_layout{
		  grid-column: 4 / 7;
		  grid-row: 1 / 2;
		}
		.dkgaidenyoutube2_layout{
		  grid-column: 1 / 3;
		  grid-row: 2 / 3;
		}
		.dkgaidenyoutube3_layout{
		  grid-column: 3 / 5;
		  grid-row: 2/ 3;
		}
		.dkgaidenyoutube4_layout{
		  grid-column: 5 / 7;
		  grid-row: 2 / 3;
		}
		.youtube-gaiden_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkgaiden) * 0.48);
		  max-width: calc(var(--width_dkgaiden-max) * 0.48);;
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-gaiden_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkgaiden) * 0.3);
		  max-width: calc(var(--width_dkgaiden-max) * 0.3);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dkgaideninfo_box{
		  position: relative;
		  width: calc(var(--width_dkgaiden) * 0.48);
		  max-width: calc(var(--width_dkgaiden-max) * 0.48);
		  aspect-ratio: 1 / 0.579;
		}
		.dkgaideninfo-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dkgaideninfo-text{
		  color: #418;
		  font-size: min(calc(var(--width_dkgaiden-max) * 0.023),calc(var(--width_dkgaiden) * 0.023));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dkgaideninfo-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dkgaiden-max) * 0.040),calc(var(--width_dkgaiden) * 0.040));
		}
		.youtube-gaiden_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 90%;
		  width: 94%;
		  background: #000;
		}
		.youtube-gaiden_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-gaiden_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: 1.5vw;
		  pointer-events: none;
		}
		.youtube-gaiden_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: 2.5vw;
		  pointer-events: none;
		}


	/* Switch版 */
		.dkswitch-grid_box {
		  width: var(--width_dkswitch);
		  max-width: var(--width_dkswitch-max);
		  display: grid;
		  grid-template-columns: auto auto;
		  grid-template-rows: auto auto;
		  column-gap: min(calc(var(--width_dkswitch-max) * 0.03) , calc(var(--width_dkswitch) * 0.03));
	    row-gap: min(calc(var(--width_dkswitch-max) * 0.04) , calc(var(--width_dkswitch) * 0.04))
		}
		.dkswitchyoutue1_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dkswitchyoutue2_layout{
		  grid-column: 2;
		  grid-row: 1;
		}
		.dkswitchyoutue3_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.youtube-switch_boxS{
		  position: relative;
		  margin: auto;
		  width: min(calc(var(--width_dkswitch-max) * 0.48),calc(var(--width_dkswitch) * 0.48));
		  aspect-ratio: 1 / 0.75;
		  max-width: var(--width_dkswitch-max);
		  margin-bottom: 3vh;
		}
		.youtube-switch_in{
		  position: absolute;
		  top: 5%;
		  left: 4%;
		  height: 71%;
		  width: 93%;
		  background: #000;
		}
		.youtube-switch_inS{
		  position: absolute;
		  top: 2.8%;
		  left: 2%;
		  height: 72%;
		  width: 96%;
		  background: #000;
		}
		.youtube-switch_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkswitch-max) * 0.03),calc(var(--width_dkswitch) * 0.03));
		  pointer-events: none;
		}
		.youtube-switch-text_box{
		  position: absolute;
		  top: 77%;
		  width:100%;
		  text-align: center;
		}
		.youtube-switch-text{
		  font-size: min(calc(var(--width_dkswitch-max) * 0.02) , calc(var(--width_dkswitch) * 0.02));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}

	/* 購入特典 */
		.dkbonus-grid_box {
		  width: var(--width_dkbonus);
		  max-width: var(--width_dkbonus-max);
		  display: grid;
		  grid-template-columns: auto auto;
		  grid-template-rows: auto auto auto;
		}
		.dkbonus1_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dkbonus2_layout{
		  grid-column: 2;
		  grid-row: 1;
		}
		.dkbonus3_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dkbonus4_layout{
		  grid-column: 2;
		  grid-row: 2;
		}
		.dkbonus5_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.youtube-bonus_box{
		  position: relative;
		  margin: auto;
		  width: min(calc(var(--width_dkbonus-max) * 0.48),calc(var(--width_dkbonus) * 0.48));
		  aspect-ratio: 1 / 0.75;
		  max-width: var(--width_dkbonus-max);
		  margin-bottom: 3vh;
		  background: #26b;
		  border-radius: 2vw;
		}
		.youtube-bonus_in{
		  position: absolute;
		  top: 12%;
		  left: 2%;
		  height: 76%;
		  width: 96%;
		  background: #000;
		  border-radius: min(calc(var(--width_dkbonus-max) * 0.02),calc(var(--width_dkbonus) * 0.02));
		}
		.youtube-bonus_img{
		  width: 100%;
		  object-fit: cover;
		}
		.youtube-bonus_frame{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkbonus-max) * 0.02),calc(var(--width_dkbonus) * 0.02));
		  pointer-events: none;
		}
		.youtube-bonus-head_box{
		  position: absolute;
		  top: 0%;
		  width:100%;
		  text-align: center;
		}
		.youtube-bonus-head{
		  font-size: min(calc(var(--width_dkbonus-max) * 0.03),calc(var(--width_dkbonus) * 0.03));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.youtube-bonus-text_box{
		  position: absolute;
		  top: 88%;
		  width:100%;
		  text-align: center;
		}
		.youtube-bonus-text{
		  font-size: min(calc(var(--width_dkbonus-max) * 0.03),calc(var(--width_dkbonus) * 0.03));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}

		.dkbonus-overview_box{
		  position: relative;
		}
		.dkbonus-overview_img{
		  width: 100%;
		}
		.dkbonus-overview_text_box{
		  position: absolute;
		  top: 0;
		  margin: 5%;
		  margin-top: 6%;
		}
		.dkbonus-overview_head{
		  font-size: min(4vw,45px);
		  font-weight: 800;
		}
		.dkbonus-overview_text{
		  margin: 4%;
		  margin-top: 0%;
		  font-size: min(3.2vw,38px);
		  font-weight: 600;
		}
	/* リンクホバー */
		.store-button_anim:hover{
		  animation: store-button_frame 0.3s;
		  transform: scale(1.05);
		  filter: brightness(1.1);
		}
		@keyframes store-button_frame{
		  0%{
		    transform: scale(1);
		  }
		  10%{
		    transform: scale(1);
		  }
		  20%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  30%{
		    transform: scaleX(0.90) scaleY(1.1);
		  }
		  40%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  50%{
		    transform: scaleX(1.05) scaleY(0.95);
		  }
		  70%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  100%{
		    transform: scale(1.05);
		  }
		}

	/* STINGロゴボタン */
		.sting-button-box {
		  position: relative;
		}
		.sting-button-img {
		  z-index: 5;
		  opacity: 0;
		  position: fixed;
		  right: 1vw;
		  width: 11vw;
		  max-width: 110px;
		  top: 0vw;
		  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
		}
		.top-button-box {
		  position: relative;
		  height: 12vw;
		}
		.top-button-img {
		  z-index: -1;
		  opacity: 0;
		  position: fixed;
		  right: 1vw;
		  width: 11vw;
		  max-width: 110px;
		  bottom: 4vw;
		  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
		}

}
/*


横画面ここまで


*/

/* 縦画面 */
@media (orientation: portrait){
	:root {
	  --width_logo: 97vw;
	  --width_logo-max: 97vw;
	  --width_topR: 97vw;
	  --width_topR-max: 97vw;

	  --width_dk321: 90vw;
	  --width_dk321-max: 1000px;
	  --width_dk321_title: 85vw;
	  --width_dk321_title-max: 800px;

	  --width_dk4: 90vw;
	  --width_dk4-max: 1000px;
	  --width_dk4_title: 85vw;
	  --width_dk4_title-max: 800px;

	  --width_dkgaiden: 90vw;
	  --width_dkgaiden-max: 1000px;
	  --width_dkgaiden_title: 85vw;
	  --width_dkgaiden_title-max: 800px;

	  --width_dkswitch: 90vw;
	  --width_dkswitch-max: 1000px;
	  --width_dkswitch_title: 90vw;
	  --width_dkswitch_title-max: 1000px;

	  --width_dkbonus: 90vw;
	  --width_dkbonus-max: 1000px;
	  --width_dkbonus_title: 90vw;
	  --width_dkbonus_title-max: 1000px;

	  --width_popup: 92vw;
	}
	.all-out_box{
	  display:grid;
	  grid-template-rows: auto auto auto auto auto;
	}

	.title-logo-out_box{
	  display:grid;
	  grid-template-rows: auto;
	}
	/* メインタイトル */
	  .title-logo_box{
	    width: var(--width_top_all);
	    margin: auto;
	    display:grid;
	    grid-template-rows: auto auto auto auto auto auto auto;
	    grid-template-columns: auto;
	    grid-template-areas: 
	    "top-dummy-box"
	    "main-title"
	    "sale-dateX"
	    "dkinfo-text"
	    "dk3title"
	    "top-youtube_area"
	    "store-button_area";
	  }
	  .title-image{
	    grid-area: main-title;
	    position: relative;
	    text-align:center;
	    width: 100%;
	    height: calc(var(--width_logo) * 1.17);
	    transform: translateX(0%);
	  }
	/* 発売日 */
	  .sale-date_box{
	    grid-area: sale-dateX;
	    position: relative;
	    text-align:center;
	    height: calc(var(--width_logo) * 0.09);
	    margin: auto;
	    padding: 2vw;
	  }
	  .sale_date_inbox{
	    display: grid;
	    grid-template-columns: auto auto;
	    grid-template-rows: auto;
	    grid-template-areas:
	    "sale_date_02 sale_date_03";
	  }
	  .sale_date_area01{
	  display: none;
	    grid-area: sale_date_01;
	    height: calc(var(--width_logo) * 0.110);
	    margin: auto;
	  }
	  .sale_date_area02{
	    grid-area: sale_date_02;
	    height: calc(var(--width_logo) * 0.08);
	    margin-left: auto;
	  }
	  .sale_date_area03{
	    grid-area: sale_date_03;
	    height: calc(var(--width_logo) * 0.08);
	    margin-right: auto;
	  }
	  .top-youtube_box{
	    grid-area: top-youtube_area;
	    position:relative;
	    width: 80%;
	    margin: auto;
	    aspect-ratio: 1 / 0.579;
	  }
	  .top-youtube_in{
	    position: absolute;
	    top: 3.8%;
	    left: 2%;
	    height: 93%;
	    width: 96%;
	    background: #000;
	  }
	  .top-youtube_frame{
	    position: absolute;
	    top: 0;
	    width: 100%;
	    height:100%;
	    border-radius: 4vw;
	    pointer-events: none;
	  }

	/* ストアボタン */
	  .store-button_box{
	    grid-area: store-button_area;
	    width: 60%;
	    margin: auto;
	    margin-top: 2vw;
	    margin-bottom: 2vw;
	    display: grid;
	    grid-template-rows: auto auto;
	    grid-row-gap: 2vw;
	    grid-template-areas:
	    "switch-store-button" "package-store-button";
	  }
	  .switch-button{
	    grid-area: switch-store-button;
	    position: relative;
	    text-align:center;
	    margin: auto;
	  }
	  .package-button{
	    grid-area: package-store-button;
	    position: relative;
	    text-align:center;
	    margin: auto;
	  }

	  .dkinfo-bg_box{
	    grid-area: dkinfo-text;
	    width: 80%;
	    height: calc(var(--width_topR) * 0.7);
	    margin: auto;
	    position: relative;
	  }
	  .dkinfo-bg_img{
	    width: 100%;
	  }
	  .dkinfo-text-outbox{
	    position: absolute;
	    top: 7%;
	    width: 100%
	  }
	  .dkinfo-text-head{
	    text-align: center;
	    height: calc(var(--width_topR) * 0.081);
	  }
	  .dkinfo-text{
	    font-size: calc(var(--width_topR) * 0.040);
	    font-weight: 600;
	    font-family: 'Noto Sans JP', sans-serif;
	  }
	  .dkinfo-text_box{
	    text-align: center;
	    height: calc(var(--width_topR) * 0.050);
	  }
	  .dk3title_box{
	    grid-area: dk3title;
	    width: 80%;
	    height: calc(var(--width_logo) * 1.10);
	    margin: auto;
	  }
	  .top-image-copy_base{
	  }
	  .top-image-copy{
	    position: absolute;
	    top: calc(var(--width_logo) * 0.020);
	    left: calc(var(--width_logo) * 0.928);
	    width: calc(var(--width_logo) * 0.071);
	  }
	  /* 伝説・友情・炎の競演！ */
	  .top_3title_img{
	    width: 98.5%;
	    border: solid 6px #aaa;
	    border-radius: 1vw;
	  }
	  .top_3title_title_box{
	    position: absolute;
	    top: calc(var(--width_topR) * -0.030);
	    width: 100%;
	    text-align: center;
	  }
	  .top_3title_title_img{
	   width: calc(var(--width_topR) * 0.571);
	  }
	  .top_3title_box{
	    position: relative;
	    top: 50%;
	    transform: translateY(-50%);
	    text-align: center;
	  }
	  .top_3title_dk321{
	    position: absolute;
	    top: calc(var(--width_topR) * 0.081);
	    left: calc(var(--width_topR) * 0.16);
	    width: calc(var(--width_topR) * 0.5);
	  }
	  .top_3title_dk321_anim{
	    animation: top_3title_dk321_frame 6s linear infinite;
	  }
	  @keyframes top_3title_dk321_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }
	  .top_3title_dk4{
	    position: absolute;
	    top: calc(var(--width_topR) * 0.35);
	    left: calc(var(--width_topR) * 0.16);
	    width: calc(var(--width_topR) * 0.48);
	  }
	  .top_3title_dk4_anim{
	    animation: top_3title_dk4_frame 5.5s linear infinite;
	  }
	  @keyframes top_3title_dk4_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }
	  .top_3title_dkgaiden{
	    position: absolute;
	    top: calc(var(--width_topR) * 0.65);
	    left: calc(var(--width_topR) * 0.16);
	    width: calc(var(--width_topR) * 0.48);
	  }
	  .top_3title_dkgaiden_anim{
	    animation: top_3title_dkgaiden_frame 6.5s linear infinite;
	  }
	  @keyframes top_3title_dkgaiden_frame{
	    0%{
	      transform: translateY(0);
	    }
	    50%{
	      transform: translateY(-0.5vw);
	    }
	    100%{
	      transform: translateY(0);
	    }
	  }

	  /* 汗 */
	  .top_sweat{
	    position: absolute;
	    top: calc(var(--width_logo) * 0.138);
	    left: calc(var(--width_logo) * 0.628);
	    width: calc(var(--width_logo) * 0.102);
	  }
	  .top_sweat_in{
	    animation: top_sweat_in_frame 0.5s ease-out;
	    transform-origin: 180% 100%;
	    opacity: 0;
	  }
	  @keyframes top_sweat_in_frame{
	    0%{
	    transform: rotate(60deg) scale(0.1);
	    }
	    100%{
	    transform: rotate(0deg);
	    opacity: 1;
	    }
	  }
	  .top_sweat_anim{
	    animation: top_sweat_frame 3s linear infinite;
	    transform-origin: 120% 120%;
	  }
	  @keyframes top_sweat_frame{
	    0%{
	    transform: rotate(0deg);
	    }
	    25%{
	    transform: rotate(8deg) scale(1.05);
	    }
	    50%{
	    transform: rotate(0deg);
	    }
	    75%{
	    transform: rotate(-7deg) scale(0.95);
	    }
	    100%{
	    transform: rotate(0deg);
	    }
	  }
	  /* コイン 01 */
	  .top_coin01_in{
	    animation: top_coin01_in_frame 0.6s ease-out;
	  }
	  @keyframes top_coin01_in_frame{
	      0%{ transform: translate(-20vw,-55vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin01_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.122);
	    top: calc(var(--width_logo) * 0.469);
	    left: calc(var(--width_logo) * 0.020);
	  }
	  .top_coin01_anim{
	    animation: top_coin01_frame 2s linear infinite;
	  }
	  @keyframes top_coin01_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(15deg);
	    }
	    50%{
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(-15deg);
	    }
	  }
	  /* コイン 02 */
	  .top_coin02_in{
	    animation: top_coin02_in_frame 0.5s ease-out;
	  }
	  @keyframes top_coin02_in_frame{
	      0%{ transform: translate(-5vw,-30vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin02_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.122);
	    top: calc(var(--width_logo) * 0.153);
	    left: calc(var(--width_logo) * 0.204);
	  }
	  .top_coin02_anim{
	    animation: top_coin02_frame 3s linear infinite;
	  }
	  @keyframes top_coin02_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(30deg);
	    }
	    50%{
	      filter: brightness(1.1);
	    }
	    75%{
	      transform: rotate(-30deg);
	    }
	  }
	  /* コイン 03 */
	  .top_coin03_in{
	    animation: top_coin03_in_frame 0.6s ease-out;
	  }
	  @keyframes top_coin03_in_frame{
	      0%{ transform: translate(10vw,-20vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin03_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.081);
	    top: calc(var(--width_logo) * 0.163);
	    left: calc(var(--width_logo) * 0.530);
	  }
	  .top_coin03_anim{
	    animation: top_coin03_frame 2s linear infinite;
	  }
	  @keyframes top_coin03_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(-15deg);
	    }
	    50%{
	      transform: rotate(-30deg);
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(-15deg);
	    }
	  }
	  /* コイン 04 */
	  .top_coin04_in{
	    animation: top_coin04_in_frame 0.4s ease-out;
	  }
	  @keyframes top_coin04_in_frame{
	      0%{ transform: translate(10vw,-60vh) rotate(720deg); }
	     45%{ filter: brightness(1);}
	     50%{ filter: brightness(5);}
	     60%{ filter: brightness(1);}
	     92%{ transform: translate(0,-0.5vh);opacity: 1; }
	    100%{ transform: translate(0,0vh);   }
	  }
	  .top_coin04_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.102);
	    top: calc(var(--width_logo) * 0.489);
	    left: calc(var(--width_logo) * 0.806);
	  }
	  .top_coin04_anim{
	    animation: top_coin04_frame 3s linear infinite;
	  }
	  @keyframes top_coin04_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    25%{
	      transform: rotate(15deg);
	    }
	    50%{
	      transform: rotate(30deg);
	      filter: brightness(1.2);
	    }
	    75%{
	      transform: rotate(15deg);
	    }
	  }
	  /* 光芒 01 */
	  .top_particle01_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.112);
	    top: calc(var(--width_logo) * 0.204);
	    left: calc(var(--width_logo) * 0.387);
	  }
	  .top_particle01_anim{
	    animation: top_particle01_frame 8s linear infinite;
	  }
	  @keyframes top_particle01_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    100%{
	      transform: rotate(360deg);
	    }
	  }
	  .top_particle01_in{
	    animation: top_particle01_in_frame 0.8s linear;
	  }
	  @keyframes top_particle01_in_frame{
	    0%{
	      opacity: 0;
	      transform: scale(0);
	    }
	    70%{
	      transform: rotate(-45deg);filter: blur(8px) brightness(20);
	      transform: scale(1);
	      opacity: 1;
	    }
	    100%{
	      transform: rotate(0deg);
	    }
	  }

	  /* 光芒 02 */
	  .top_particle02_box{
	    position: absolute;
	    width: calc(var(--width_logo) * 0.091);
	    top: calc(var(--width_logo) * 0.244);
	    left: calc(var(--width_logo) * 0.469);
	  }
	  .top_particle02_in{
	    animation: top_particle02_in_frame 0.7s linear;
	  }
	  @keyframes top_particle02_in_frame{
	    0%{
	      opacity: 0;
	      transform: scale(0);
	    }
	    70%{
	      transform: rotate(-45deg);filter: blur(8px) brightness(20);
	      transform: scale(1);
	      opacity: 1;
	    }
	    100%{
	      transform: rotate(0deg);
	    }
	  }
	  .top_particle02_anim{
	    animation: top_particle02_frame 8s linear infinite;
	  }
	  @keyframes top_particle02_frame{
	    0%{
	      transform: rotate(0deg);
	    }
	    100%{
	      transform: rotate(360deg);
	    }
	  }

	  .top_PKGDL_box{
	    position: absolute;
	    width: min(calc(var(--width_logo-max) * 0.714),calc(var(--width_logo) * 0.714));
	    top: min(calc(var(--width_logo-max) * 1.05),calc(var(--width_logo) * 1.05));
	    left: min(calc(var(--width_logo-max) * 0.142),calc(var(--width_logo) * 0.142));
	  }
	  .top_PKGDL_anim{
	    animation: top_PKGDL_frame 10s linear infinite;
	  }
	  @keyframes top_PKGDL_frame{
	    0%{
	      transform: scale(1);
	    }
	    91%{
	      transform: scale(1);
	    }
	    92%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    93%{
	      transform: scaleX(0.90) scaleY(1.1);
	    }
	    94%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    95%{
	      transform: scaleX(1.05) scaleY(0.95);
	    }
	    97%{
	      transform: scaleX(0.95) scaleY(1.05);
	    }
	    100%{
	      transform: scale(1);
	    }
	  }

	/* ドカポン３・２・１ */
		.dk321-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dk321-max) * 0.35),calc(var(--width_dk321) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dk321-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dk321) * 0.45);
		  max-height: calc(var(--width_dk321_title-max) * 0.5);
		}
		.dk321-logo-img{
		  height: auto;
		  width: var(--width_dk321_title);
		  max-width: var(--width_dk321_title-max);
		}
		.dk321-logo-bg{
		  height: 100%;
		  overflow: hidden;
		}
		.dk321-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dk321-grid_box {
		  width: var(--width_dk321);
		  max-width: var(--width_dk321-max);
		  display: grid;
		  grid-auto-rows: auto auto auto auto;
		}
		.dk321info_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dk321youtube1_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dk321youtube2_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.dk321youtube3_layout{
		  grid-column: 1;
		  grid-row: 4;
		}
		.dk321youtube4_layout{
		  grid-column: 1;
		  grid-row: 5;
		}
		.youtube-321_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk321) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dk321-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-321_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk321) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dk321-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dk321info_box{
		  position: relative;
		  aspect-ratio: 1 / 0.579;
		}
		.dk321info-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dk321info-text{
		  color: #293;
		  font-size: min(calc(var(--width_dk321-max) * 0.040),calc(var(--width_dk321) * 0.040));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dk321info-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dk321-max) * 0.080),calc(var(--width_dk321) * 0.080));
		}
		.youtube-321_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 89%;
		  width: 94%;
		  background: #000;
		}
		.youtube-321_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-321_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk321-max) * 0.043) , calc(var(--width_dk321) * 0.043));
		  pointer-events: none;
		}
		.youtube-321_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk321-max) * 0.043) , calc(var(--width_dk321) * 0.043));
		  pointer-events: none;
		}


	/* ドカポンIV */
		.dk4-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dk4-max) * 0.35),calc(var(--width_dk4) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dk4-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dk4) * 0.45);
		  max-height: calc(var(--width_dk4_title-max) * 0.5);
		}
		.dk4-logo-img{
		  height: auto;
		  width: var(--width_dk4_title);
		  max-width: var(--width_dk4_title-max);
		}
		.dk4-logo-bg{
		  height: 100%;
		  overflow: hidden;
		}
		.dk4-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dk4-grid_box {
		  width: var(--width_dk4);
		  max-width: var(--width_dk4-max);
		  display: grid;
		  grid-auto-rows: auto auto auto auto;
		}
		.dk4info_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dk4youtube1_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dk4youtube2_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.dk4youtube3_layout{
		  grid-column: 1;
		  grid-row: 4;
		}
		.dk4youtube4_layout{
		  grid-column: 1;
		  grid-row: 5;
		}
		.youtube-4_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk4) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dk4-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-4_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dk4) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dk4-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dk4info_box{
		  position: relative;
		  aspect-ratio: 1 / 0.579;
		}
		.dk4info-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dk4info-text{
		  color: #137;
		  font-size: min(calc(var(--width_dk4-max) * 0.040),calc(var(--width_dk4) * 0.040));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dk4info-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dk4-max) * 0.080),calc(var(--width_dk4) * 0.080));
		}
		.youtube-4_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 89%;
		  width: 94%;
		  background: #000;
		}
		.youtube-4_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-4_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk4-max) * 0.043) , calc(var(--width_dk4) * 0.043));
		  pointer-events: none;
		}
		.youtube-4_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dk4-max) * 0.043) , calc(var(--width_dk4) * 0.043));
		  pointer-events: none;
		}

	/* ドカポン外伝 */
		.dkgaiden-logo_outbox{
		  position: relative;
		  width: 100%;
		  height: min(calc(var(--width_dkgaiden-max) * 0.35),calc(var(--width_dkgaiden) * 0.43));
		  max-height: 460px;
		  overflow: hidden;
		}
		.dkgaiden-logo_in-box{
		  width: 100%;
		  position: absolute;
		  height: calc(var(--width_dkgaiden) * 0.45);
		  max-height: calc(var(--width_dkgaiden_title-max) * 0.5);
		}
		.dkgaiden-logo-img{
		  height: auto;
		  width: var(--width_dkgaiden_title);
		  max-width: var(--width_dkgaiden_title-max);
		}
		.dkgaiden-logo-bg{
		  width: 100%;
		  height: 100%;
		  overflow: hidden;
		}
		.dkgaiden-logo_box{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  text-align: center;
		}
		.dkgaiden-grid_box {
		  width: var(--width_dkgaiden);
		  max-width: var(--width_dkgaiden-max);
		  display: grid;
		  grid-auto-rows: auto auto auto auto;
		}
		.dkgaideninfo_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dkgaidenyoutube1_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dkgaidenyoutube2_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.dkgaidenyoutube3_layout{
		  grid-column: 1;
		  grid-row: 4;
		}
		.dkgaidenyoutube4_layout{
		  grid-column: 1;
		  grid-row: 5;
		}
		.youtube-gaiden_boxL{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkgaiden) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dkgaiden-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.youtube-gaiden_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkgaiden) * 0.98);
		  aspect-ratio: 1 / 0.58;
		  max-width: var(--width_dkgaiden-max);
		  margin-bottom: 3vh;
		  aspect-ratio: 1 / 0.579;
		}
		.dkgaideninfo_box{
		  position: relative;
		  aspect-ratio: 1 / 0.579;
		}
		.dkgaideninfo-text_outbox{
		  position: absolute;
		  top: 50%;
		  width: 100%;
		  transform: translateY(-50%);
		}
		.dkgaideninfo-text{
		  color: #418;
		  font-size: min(calc(var(--width_dkgaiden-max) * 0.040),calc(var(--width_dkgaiden) * 0.040));
		  font-weight: 600;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dkgaideninfo-text_box{
		  text-align: center;
		  height: min(calc(var(--width_dkgaiden-max) * 0.080),calc(var(--width_dkgaiden) * 0.080));
		}
		.youtube-gaiden_inS{
		  position: absolute;
		  top: 5%;
		  left: 3%;
		  height: 89%;
		  width: 94%;
		  background: #000;
		}
		.youtube-gaiden_inL{
		  position: absolute;
		  top: 3.8%;
		  left: 2%;
		  height: 93%;
		  width: 96%;
		  background: #000;
		}
		.youtube-gaiden_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkgaiden-max) * 0.043) , calc(var(--width_dkgaiden) * 0.043));
		  pointer-events: none;
		}
		.youtube-gaiden_frameL{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkgaiden-max) * 0.043) , calc(var(--width_dkgaiden) * 0.043));
		  pointer-events: none;
		}

	/* Switch版 */
		.youtube-switch_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkswitch) * 0.98);
		  aspect-ratio: 1 / 0.75;
		  max-width: var(--width_dkswitch-max);
		  margin-bottom: 3vh;
		}
		.youtube-switch_inS{
		  position: absolute;
		  top: 2.8%;
		  left: 2%;
		  height: 72%;
		  width: 96%;
		  background: #000;
		}
		.youtube-switch_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: 2.5vw;
		  pointer-events: none;
		}
		.dkswitch-grid_box {
		  width: var(--width_dkswitch);
		  max-width: var(--width_dkswitch-max);
		  display: grid;
		  grid-template-rows: auto auto auto;
		}
		.dkswitchyoutue1_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dkswitchyoutue2_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dkswitchyoutue3_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.youtube-switch_boxS{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkswitch) * 0.98);
		  aspect-ratio: 1 / 0.75;
		  max-width: var(--width_dkswitch-max);
		  margin-bottom: 3vh;
		}
		.youtube-switch_in{
		  position: absolute;
		  top: 5%;
		  left: 4%;
		  height: 70%;
		  width: 92%;
		  background: #000;
		}
		.youtube-switch_inS{
		  position: absolute;
		  top: 2.8%;
		  left: 2%;
		  height: 72%;
		  width: 96%;
		  background: #000;
		}
		.youtube-switch_frameS{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkswitch-max) * 0.05),calc(var(--width_dkswitch) * 0.05));
		  pointer-events: none;
		}
		.youtube-switch-text_box{
		  position: absolute;
		  top: 77%;
		  width:100%;
		  text-align: center;
		}
		.youtube-switch-text{
		  font-size: min(calc(var(--width_dkswitch-max) * 0.04) , calc(var(--width_dkswitch) * 0.045));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}

	/* 購入特典 */
		.dkbonus-grid_box {
		  width: var(--width_dkbonus);
		  max-width: var(--width_dkbonus-max);
		  display: grid;
		  grid-template-rows: auto auto auto auto auto;
		}
		.dkbonus1_layout{
		  grid-column: 1;
		  grid-row: 1;
		}
		.dkbonus2_layout{
		  grid-column: 1;
		  grid-row: 2;
		}
		.dkbonus3_layout{
		  grid-column: 1;
		  grid-row: 3;
		}
		.dkbonus4_layout{
		  grid-column: 1;
		  grid-row: 4;
		}
		.dkbonus5_layout{
		  grid-column: 1;
		  grid-row: 5;
		}
		.youtube-bonus_box{
		  position: relative;
		  margin: auto;
		  width: calc(var(--width_dkbonus) * 0.98);
		  aspect-ratio: 1 / 0.75;
		  max-width: var(--width_dkbonus-max);
		  margin-bottom: 3vh;
		  background: #26b;
		  border-radius: 2vw;
		}
		.youtube-bonus_in{
		  position: absolute;
		  top: 12%;
		  left: 2%;
		  height: 76%;
		  width: 96%;
		  background: #000;
		  border-radius: 2vw;
		}
		.youtube-bonus_img{
		  width: 100%;
		  object-fit: cover;
		}
		.youtube-bonus_frame{
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height:100%;
		  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
		  border-radius: min(calc(var(--width_dkbonus-max) * 0.02),calc(var(--width_dkbonus) * 0.02));
		  pointer-events: none;
		}
		.youtube-bonus-head_box{
		  position: absolute;
		  top: 1%;
		  width:100%;
		  text-align: center;
		}
		.youtube-bonus-head{
		  font-size: min(calc(var(--width_dkbonus-max) * 0.05),calc(var(--width_dkbonus) * 0.05));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.youtube-bonus-text_box{
		  position: absolute;
		  top: 88%;
		  width:100%;
		  text-align: center;
		}
		.youtube-bonus-text{
		  font-size: min(calc(var(--width_dkbonus-max) * 0.05),calc(var(--width_dkbonus) * 0.05));
		  color: #fff;
		  font-weight: 800;
		  margin: auto;
		  font-family: 'Noto Sans JP', sans-serif;
		}
		.dkbonus-overview_box{
		  position: relative;
		}
		.dkbonus-overview_img{
		  width: 100%;
		}
		.dkbonus-overview_text_box{
		  position: absolute;
		  top: 0;
		  margin: 5%;
		  margin-top: 7%;
		}
		.dkbonus-overview_head{
		  font-size: min(4vw,45px);
		  font-weight: 800;
		}
		.dkbonus-overview_text{
		  margin: 4%;
		  margin-top: 2%;
		  font-size: min(3.2vw,38px);
		  font-weight: 600;
		}

	/* リンクホバー */
		.store-button_anim:hover{
		  animation: store-button_frame 0.3s;
		  transform: scale(1.05);
		  filter: brightness(1.1);
		}
		@keyframes store-button_frame{
		  0%{
		    transform: scale(1);
		  }
		  10%{
		    transform: scale(1);
		  }
		  20%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  30%{
		    transform: scaleX(0.90) scaleY(1.1);
		  }
		  40%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  50%{
		    transform: scaleX(1.05) scaleY(0.95);
		  }
		  70%{
		    transform: scaleX(0.95) scaleY(1.05);
		  }
		  100%{
		    transform: scale(1.05);
		  }
		}

	/* STINGロゴボタン */
		.sting-button-box {
		  position: relative;
		}
		.sting-button-img {
		  z-index: 5;
		  opacity: 0;
		  position: fixed;
		  right: 1vw;
		  width: 11vw;
		  max-width: 110px;
		  top: 0vw;
		  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
		}
		.top-button-box {
		  position: relative;
		  height: 12vw;
		}
		.top-button-img {
		  z-index: -1;
		  opacity: 0;
		  position: fixed;
		  right: 1vw;
		  width: 22vw;
		  max-width: 110px;
		  bottom: 4vw;
		  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
		}
}
/*


縦画面ここまで


*/

	.TopDummy{
	  height: 1vw;
	}
	/* Switchロゴ */
	.switch-logo_box{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: calc(var(--width_logo) * 0.14);
	}
	.switch-logo_img{
	  width: 100%;
	}
	/* 画像用 */
	.top-image_parts{
	  width: 95%;
	  height: auto;
	}

	.top_bg{
	  position:relative;
	  opacity: 1;
	}
	.top_bg_in{
	  animation: top_bg_in_frame 0.5s ease-in;
	  opacity: 1;
	}
	@keyframes top_bg_in_frame{
	  0%{
	    transform: scale(0.3);
	    opacity: 0;
	  }
	  98%{
	    transform: scale(1.05);
	    opacity: 1;
	  }
	  100%{
	    transform: scale(1);
	    opacity: 1;
	  }
	}

	.dk321dummy_head{
	  height: min(calc(var(--width_dk321-max) * 0.050),calc(var(--width_dk321) * 0.050));
	}
	.dk321dummy_foot{
	  height: min(calc(var(--width_dk321-max) * 0.120),calc(var(--width_dk321) * 0.120));
	}
	.dk321_bg{
	  background-image: url(../images/dk321_BG_pattern.png);
	  background-size: 20%;
	}
	.dk321-bg-scroll {
	  animation: dk321-scroll-anim 30s linear infinite;
	}
	@keyframes dk321-scroll-anim {
		100% {
			background-position: -100% 0%;
		}
	}
	.dk321-logo_anim{
	  animation: dk321-logo_frame 6s linear infinite;
	}
	@keyframes dk321-logo_frame{
	  0%{
	    transform: scale(1);
	  }
	  50%{
	    transform: scale(0.95);
	  }
	  100%{
	    transform: scale(1);
	  }
	}
	.dk321-main_box{
	  margin: auto;
	  width: var(--width_dk321);
	  max-width: var(--width_dk321-max);
	}

	.dk4dummy_head{
	  height: min(calc(var(--width_dk4-max) * 0.050),calc(var(--width_dk4) * 0.050));
	}
	.dk4dummy_foot{
	  height: min(calc(var(--width_dk4-max) * 0.120),calc(var(--width_dk4) * 0.120));
	}
	.dk4_bg{
	  background-image: url(../images/dk4_BG_pattern.png);
	  background-size: 20%;
	}
	.dk4-bg-scroll {
	  animation: dk4-scroll-anim 30s linear infinite;
	}
	@keyframes dk4-scroll-anim {
		100% {
			background-position: 100% 0%;
		}
	}
	.dk4-logo_anim{
	  animation: dk4-logo_frame 6s linear infinite;
	}
	@keyframes dk4-logo_frame{
	  0%{
	    transform: scale(1);
	  }
	  50%{
	    transform: scale(0.95);
	  }
	  100%{
	    transform: scale(1);
	  }
	}
	.dk4-main_box{
	  margin: auto;
	  width: var(--width_dk4);
	  max-width: var(--width_dk4-max);
	}

	.dkgaidendummy_head{
	  height: min(calc(var(--width_dkgaiden-max) * 0.050),calc(var(--width_dkgaiden) * 0.050));
	}
	.dkgaidendummy_foot{
	  height: min(calc(var(--width_dkgaiden-max) * 0.120),calc(var(--width_dkgaiden) * 0.120));
	}
	.dkgaiden_bg{
	  background-image: url(../images/dkgaiden_BG_pattern.png);
	  background-size: 20%;
	}
	.dkgaiden-bg-scroll {
	  animation: dkgaiden-scroll-anim 30s linear infinite;
	}
	@keyframes dkgaiden-scroll-anim {
		100% {
			background-position: -100% 0%;
		}
	}
	.dkgaiden-logo_anim{
	  animation: dkgaiden-logo_frame 6s linear infinite;
	}
	@keyframes dkgaiden-logo_frame{
	  0%{
	    transform: scale(1);
	  }
	  50%{
	    transform: scale(0.95);
	  }
	  100%{
	    transform: scale(1);
	  }
	}
	.dkgaiden-main_box{
	  margin: auto;
	  width: var(--width_dkgaiden);
	  max-width: var(--width_dkgaiden-max);
	}

	.dkswitchdummy_head{
	  height: min(calc(var(--width_dkswitch-max) * 0.050),calc(var(--width_dkswitch) * 0.050));
	}
	.dkswitchdummy_foot{
	  height: min(calc(var(--width_dkswitch-max) * 0.120),calc(var(--width_dkswitch) * 0.120));
	}
	.dkswitch_bg{
	  background-image: url(../images/dkswitch_BG_pattern.png);
	  background-size: 20%;
	}
	.dkswitch-bg-scroll {
	  animation: dkswitch-scroll-anim 50s linear infinite;
	}
	@keyframes dkswitch-scroll-anim {
		100% {
			background-position: -100% -100%;
		}
	}
	.dkswitch-logo_outbox{
	  position: relative;
	  width: 100%;
	  height: calc(var(--width_dkswitch) * 0.15);
	  max-height: 260px;
	  overflow: hidden;
	}
	.dkswitch-logo_in-box{
	  width: 100%;
	  position: absolute;
	  height: calc(var(--width_dkswitch) * 0.23);
	  max-height: calc(var(--width_dkswitch-max) * 0.26);
	}
	.dkswitch-logo-bg{
	  width: 100%;
	  height: auto;
	  overflow: hidden;
	}
	.dkswitch-logo_box{
	  position: absolute;
	  top: min(calc(var(--width_dkswitch-max) * 0.05),calc(var(--width_dkswitch) * 0.005));
	  width: 100%;
	  text-align: center;
	}
	.dkswitch-logo-text{
	  font-size: min(calc(var(--width_dkswitch-max) * 0.060),calc(var(--width_dkswitch) * 0.060));
	  color: #fff;
	  font-weight: 800;
	  margin: auto;
	  font-family: 'Noto Sans JP', sans-serif;
	}
	.dkswitch-main_box{
	  margin: auto;
	  margin-top: calc(var(--width_dkswitch) * 0.02);
	  width: var(--width_dkswitch);
	  max-width: var(--width_dkswitch-max);
	}

	.dkbonusdummy_head{
	  height: min(calc(var(--width_dkbonus-max) * 0.050),calc(var(--width_dkbonus) * 0.050));
	}
	.dkbonus_bg{
	  background-image: url(../images/dkbonus_BG_pattern.png);
	  background-size: 20%;
	}
	.dkbonus-bg-scroll {
	  animation: dkbonus-scroll-anim 50s linear infinite;
	}
	@keyframes dkbonus-scroll-anim {
		100% {
			background-position: 100% 100%;
		}
	}
	.dkbonus-logo_outbox{
	  position: relative;
	  width: 100%;
	  height: calc(var(--width_dkbonus) * 0.25);
	  max-height: 260px;
	  overflow: hidden;
	}
	.dkbonus-logo_in-box{
	  width: 100%;
	  position: absolute;
	  height: calc(var(--width_dkbonus_title) * 0.23);
	  max-height: calc(var(--width_dkbonus_title-max) * 0.26);
	}
	.dkbonus-logo-bg{
	  width: 100%;
	  height: auto;
	  overflow: hidden;
	}
	.dkbonus-logo_box{
	  position: absolute;
	  top: min(calc(var(--width_dkbonus-max) * 0.015),calc(var(--width_dkbonus) * 0.015));
	  width: 100%;
	  text-align: center;
	}
	.dkbonus-logo-text{
	  font-size: min(calc(var(--width_dkbonus-max) * 0.050),calc(var(--width_dkbonus) * 0.050));
	  color: #fff;
	  font-weight: 800;
	  margin: auto;
	  font-family: 'Noto Sans JP', sans-serif;
	}
	.dkbonus-main_box{
	  margin: auto;
	  width: var(--width_dkbonus);
	  max-width: var(--width_dkbonus-max);
	}

/* ポップアップ */
	.popup-in-box{
	}
	.popup-in-img-box{
	text-align: center;
	}
	.popup-in-img{
	  height: 100%;
	  width: 100%;
	  object-fit: contain;
	}

	.popup-input {
	  display:none;
	}
	.popup_BG{
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 40;
	    width: 100%;
	    height: 100%;
	}
	/* ポップアップ背景部分 */
	.popup-background {
	    position: fixed;
	    left: 0;
	    top: 0;
	    background: rgba(0,0,0,0.7);
	    width: 100%;
	    height: 100%;
	    z-index: 20;
	}
	/* 閉じるボタン */
	.popup-close_button {
	    position: absolute;
	    top: 1vw;
	    right: 1vw;
	    width: 2vw;
	    height: 2vw;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #888;
	    border-radius: 0.5vw;
	    z-index: 35;
	    cursor: pointer;
	}
	.popup-close_button:hover {
	    background-color: #f00;
	}
	.popup-close_button span,
	.popup-close_button span::before {
	    display: block;
	    height: 0.2vw;
	    width: 1.5vw;
	    border-radius: 1.5vw;
	    background: #fff;
	}
	.popup-close_button span {
	    transform: rotate(45deg);
	}
	.popup-close_button span::before {
	    content: "";
	    position: absolute;
	    bottom: 0;
	    transform: rotate(-90deg);
	}

/* ドカポン３・２・１ ポップアップ */
	/* ポップアップ画面全体 */
	#dk321_overlay1 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk321_window1 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #293;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk321_popup1:checked ~ #dk321_overlay1 { visibility: visible; }
	#dk321_popup1:checked ~ #dk321_overlay1 #dk321_window1 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dk321_overlay2 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk321_window2 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #293;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk321_popup2:checked ~ #dk321_overlay2 { visibility: visible; }
	#dk321_popup2:checked ~ #dk321_overlay2 #dk321_window2 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dk321_overlay3 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk321_window3 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #293;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk321_popup3:checked ~ #dk321_overlay3 { visibility: visible; }
	#dk321_popup3:checked ~ #dk321_overlay3 #dk321_window3 { animation: dk-popup 0.3s forwards; }

/* ドカポンIV ポップアップ */
	/* ポップアップ画面全体 */
	#dk4_overlay1 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk4_window1 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #137;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk4_popup1:checked ~ #dk4_overlay1 { visibility: visible; }
	#dk4_popup1:checked ~ #dk4_overlay1 #dk4_window1 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dk4_overlay2 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk4_window2 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #137;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk4_popup2:checked ~ #dk4_overlay2 { visibility: visible; }
	#dk4_popup2:checked ~ #dk4_overlay2 #dk4_window2 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dk4_overlay3 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dk4_window3 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #137;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dk4_popup3:checked ~ #dk4_overlay3 { visibility: visible; }
	#dk4_popup3:checked ~ #dk4_overlay3 #dk4_window3 { animation: dk-popup 0.3s forwards; }

/* ドカポン外伝 ポップアップ */
	/* ポップアップ画面全体 */
	#dkgaiden_overlay1 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dkgaiden_window1 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #418;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dkgaiden_popup1:checked ~ #dkgaiden_overlay1 { visibility: visible; }
	#dkgaiden_popup1:checked ~ #dkgaiden_overlay1 #dkgaiden_window1 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dkgaiden_overlay2 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dkgaiden_window2 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #418;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dkgaiden_popup2:checked ~ #dkgaiden_overlay2 { visibility: visible; }
	#dkgaiden_popup2:checked ~ #dkgaiden_overlay2 #dkgaiden_window2 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dkgaiden_overlay3 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dkgaiden_window3 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #418;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dkgaiden_popup3:checked ~ #dkgaiden_overlay3 { visibility: visible; }
	#dkgaiden_popup3:checked ~ #dkgaiden_overlay3 #dkgaiden_window3 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ用キーフレーム */
	@keyframes dk-popup {
	     0% { opacity: 0;}
	   100% { opacity: 1; }
	}

/* ドカポンSwitch ポップアップ */
	/* ポップアップ画面全体 */
	#dkswitch_overlay1 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dkswitch_window1 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #d81;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dkswitch_popup1:checked ~ #dkswitch_overlay1 { visibility: visible; }
	#dkswitch_popup1:checked ~ #dkswitch_overlay1 #dkswitch_window1 { animation: dk-popup 0.3s forwards; }

	/* ポップアップ画面全体 */
	#dkswitch_overlay2 { visibility: hidden; }
	/* ウィンドウ部分 */
	#dkswitch_window2 {
	    width: var(--width_popup);
	    padding: 10px;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background: #000;
	    border: solid 2px #d81;
	    border-radius: 10px;
	    z-index: 30;
	    opacity: 0;
	}
	#dkswitch_popup2:checked ~ #dkswitch_overlay2 { visibility: visible; }
	#dkswitch_popup2:checked ~ #dkswitch_overlay2 #dkswitch_window2 { animation: dk-popup 0.3s forwards; }


/* スクロールしたときにフェードイン処理 */
.fadeUp{
  animation-name:fadeUpAnim;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnim{
  0% {
    opacity: 0;
    transform: translateY(3vh) scale(0.75);
  }
  40% {
    opacity: 0.8;
    transform: translateY(-1.5vw) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fadeUpAnim{
    opacity: 0;
}

.fadeOut{
  animation-name:fadeOutAnim;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:1;
}
@keyframes fadeOutAnim{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

/*
----------Anim----------
*/

.slideTitle_right{
  animation-name: slideInTitle_right;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
transform-origin: right;
    right: 0;
}
@keyframes slideInTitle_right{
  0%{
    opacity: 0;
    transform: scaleX(0);
    right: 0;
  }
  40%{
    opacity: 0.7;
    transform: scaleX(0.75);
  }
  75%{
    opacity: 0.9;
    transform: scaleX(1.05) scaleY(0.95);
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
    right: 0;
  }
}
.slideTitle_right2{
  animation-name: slideInTitle_right2;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
  transform-origin: right bottom;
    right: 0;
}
@keyframes slideInTitle_right2{
  0%{
    opacity: 0;
    transform: rotate(0.2deg);
    right: 0;
  }
  40%{
    opacity: 0.7;
    transform: rotate(0.5deg);
  }
  75%{
    opacity: 0.9;
    transform: rotate(2.5deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
    right: 0;
  }
}

.slideItem_right{
  animation-name: slideInItem_right;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
transform-origin: right;
    right: 0;
}
@keyframes slideInItem_right{
  0%{
    opacity: 0;
    transform: scaleX(0);
    right: 0;
  }
  40%{
    opacity: 0.7;
    transform: scaleX(0.75);
  }
  75%{
    opacity: 0.9;
    transform: scaleX(1.05) scaleY(0.95);
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
    right: 0;
  }
}
.slideItem_left{
  animation-name: slideInItem_left;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
transform-origin: left;
    left: 0;
}
@keyframes slideInItem_left{
  0%{
    opacity: 0;
    transform: scaleX(0);
    left: 0;
  }
  40%{
    opacity: 0.7;
    transform: scaleX(0.75);
  }
  75%{
    opacity: 0.6;
    transform: scaleX(1.05) scaleY(0.95);
    left: 0.5vw;
  }
  100%{
    opacity: 1;
    transform: scaleX(1);
    left: 0;
  }
}
.slideItem_up{
  animation-name: slideInItem_up;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideInItem_up{
  0%{
    opacity: 0;
    transform: scaleY(0) translate(0,50vw);
  }
  40%{
    opacity: 0.7;
    transform: scaleY(0.75) translate(0,5vw);
  }
  75%{
    opacity: 0.6;
    transform: scaleY(1.05) scaleX(0.95);
  }
  100%{
    opacity: 1;
    transform: scaleY(1);
  }
}