@charset "UTF-8";
#howto {
 padding: 0;
 background: #f4f5f0;
 color: #252525;
}
#howto .howtoHeader {
 position: relative;
 background: #fcfcfc;
 text-align: center;
 overflow: hidden;
 padding: 8rem 3%;
}
#howto .howtoHeader:before {
 content: "";
 display: block;
 background: url("../images/common/deco_leftupper_hex.png") no-repeat;
 background-size: cover;
 width: 25%;
 padding-top: calc(76.97% * 0.25);
 position: absolute;
 left: -1%;
 top: -1%;
}
#howto .howtoHeader:after {
 content: "";
 display: block;
 background: url("../images/common/deco_rightlower_hex.png") no-repeat;
 background-size: cover;
 width: 25%;
 padding-top: calc(76.77% * 0.25);
 position: absolute;
 right: -1%;
 bottom: -1%;
}
#howto .howtoHeader h2 {
 font-size: 2.6vw;
 font-weight: 600;
 position: relative;
 z-index: 5;
}
#howto .howtoHeader h2 img {
 width: 40%;
 margin: 0 auto 1rem;
}
#howto .howtoHeader .ch {
 font-size: 2.4vw;
 font-weight: 600;
 margin: 4rem auto 0;
 line-height: 1;
 padding-left: 0.75em;
 position: relative;
 z-index: 5;
}
#howto .howtoHeader .ch img {
 display: inline-block;
 height: 1.5em;
 width: auto;
 padding: 0 0.25em 0 0;
}
#howto .howtoHeader .ch strong {
 font-size: 180%;
 font-weight: 600;
 color: #e94709;
 display: inline-block;
 padding: 0 0.1em 0 0.1em;
}
#howto .howtoHeader .badge {
 position: absolute;
 width: 16vw;
 height: 16vw;
 border-radius: 50%;
 color: #fcfcfc;
 right: 11%;
 top: 0;
 bottom: 0;
 margin: auto 0;
 z-index: 4;
 background: #FF416C;
 background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
 background: linear-gradient(to right, #FF4B2B, #FF416C);
}
#howto .howtoHeader .badge .central {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 font-weight: 600;
 white-space: nowrap;
 font-size: 1.5vw;
 line-height: 1.1;
}
#howto .howtoHeader .badge .central strong {
 font-weight: 600;
 font-size: 120%;
 display: block;
 padding: 0.25em 0 0.5em;
}
#howto .howtoHeader .badge .central .en {
 font-size: 200%;
}
#howto .inner {
 padding: 5rem 3%;
}
.carousel {
 text-align: left;
 position: relative;
 margin: 0 auto;
 z-index: 5;
}
.carousel > input {
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 width: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
}
.carousel > input:nth-of-type(3):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -200%;
}
.carousel > input:nth-of-type(2):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: -100%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel_slides .carousel_slide:first-of-type {
 margin-left: 0%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel_thumbnails li:nth-of-type(1) label, .carousel > input:nth-of-type(2):checked ~ .carousel_thumbnails li:nth-of-type(2) label, .carousel > input:nth-of-type(3):checked ~ .carousel_thumbnails li:nth-of-type(3) label {
 background: #f25e23;
 color: #fcfcfc;
}
.carousel > input:nth-of-type(1):checked ~ .carousel_thumbnails li:nth-of-type(1) label:after, .carousel > input:nth-of-type(2):checked ~ .carousel_thumbnails li:nth-of-type(2) label:after, .carousel > input:nth-of-type(3):checked ~ .carousel_thumbnails li:nth-of-type(3) label:after {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 right: 0;
 bottom: -6px;
 margin: 0 auto;
 width: 20px;
 height: 20px;
 background: #f25e23;
 transform: rotate(45deg);
 border-radius: 2px;
 z-index: 4;
}
.carousel_thumbnails {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
}
.carousel_thumbnails li {
 flex: 1 0 33.333%;
 max-width: 33.333%;
 transition: all 0.3 ease-in-out;
 padding: 0 0.5rem 0.5rem;
}
.carousel_thumbnails label {
 display: block;
 position: relative;
 text-align: center;
 font-size: 110%;
 line-height: 1.4;
 padding: 3rem 0.5rem 2rem;
 font-weight: 600;
 background: orange;
 color: #fcfcfc;
 border-radius: 4px;
}
.carousel_thumbnails label br {
 display: none;
}
.carousel_thumbnails li:nth-child(1) label:before, .carousel_thumbnails li:nth-child(2) label:before, .carousel_thumbnails li:nth-child(3) label:before {
 content: "";
 display: block;
 height: 5rem;
 margin: 0 auto 1.5rem;
}
.carousel_thumbnails li:nth-child(1) label:before {
 background: url("../images/howto/icon_tv.svg") no-repeat;
 background-size: cover;
 width: calc(5rem * 1.266);
}
.carousel_thumbnails li:nth-child(2) label:before {
 background: url("../images/howto/icon_pcsp.svg") no-repeat;
 background-size: cover;
 width: calc(5rem * 1.973);
}
.carousel_thumbnails li:nth-child(3) label:before {
 background: url("../images/howto/icon_archives.svg") no-repeat;
 background-size: cover;
 width: calc(5rem * 1.466);
}
.carousel_thumbnails label:hover, .carousel_thumbnails label:focus {
 cursor: pointer;
}
.carousel_slides {
 position: relative;
 z-index: 1;
 padding: 0;
 margin: 0;
 overflow: hidden;
 white-space: nowrap;
 box-sizing: border-box;
 display: flex;
}
.carousel_slide {
 position: relative;
 display: block;
 flex: 1 0 100%;
 max-width: 100%;
 height: 100%;
 overflow: hidden;
 transition: all 0.3s ease-out;
 vertical-align: top;
 box-sizing: border-box;
 white-space: normal;
 text-align: center;
 margin: 0 auto;
 padding: 0 3% 5rem;
}
.carousel_slide h3 {
 font-size: 2.6rem;
 font-weight: 600;
 text-align: center;
 color: #FF416C;
 position: relative;
 margin: 5rem 0;
}
.carousel_slide h3 span {
 display: inline-block;
 font-size: 105%;
 font-weight: 600;
}
.carousel_slide h3:after {
 content: "";
 display: block;
 width: 8rem;
 height: 2px;
 background: #252525;
 margin: 0.5rem auto 0;
}
.carousel_slide .pattern .step {
 display: flex;
 margin-bottom: 8rem;
 padding-left: 3rem;
}
.carousel_slide .pattern .step > li {
 flex: 1 0 33.333%;
 max-width: 33.333%;
 padding: 0 3rem;
 position: relative;
}
.carousel_slide .pattern .step > li.step01:before, .carousel_slide .pattern .step > li.step02:before {
 content: "";
 display: block;
 width: 6vw;
 height: 6vw;
 position: absolute;
 top: 7rem;
 left: -1rem;
 background-position: center center;
}
.carousel_slide .pattern .step > li.step01:before {
 background: url("../images/howto/step_no01.png") no-repeat;
 background-size: cover;
}
.carousel_slide .pattern .step > li.step02:before {
 background: url("../images/howto/step_no02.png") no-repeat;
 background-size: cover;
}
.carousel_slide .pattern .step > li:after {
 content: "";
 display: block;
 background: url("../images/howto/arrow_pink.png") no-repeat;
 background-size: cover;
 width: 4rem;
 height: calc(4rem * 1.475);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 right: -2rem;
}
.carousel_slide .pattern .step > li:last-child:after {
 display: none;
}
.carousel_slide .pattern .step > li h4 {
 position: absolute;
 color: #fcfcfc;
 font-weight: 600;
 font-size: 1.4vw;
 background: #ff416c;
 display: inline-block;
 padding: 1em 0.5em;
 left: -3rem;
 top: 9rem;
 border-radius: 2em;
 line-height: 1.2;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}
.carousel_slide .pattern .step > li p {
 font-weight: 600;
 font-size: 1.2vw;
 text-align: center;
 line-height: 1.8;
 margin: 2rem -50% 0;
 letter-spacing: 0.01em;
 white-space: nowrap;
}
.carousel_slide .pattern .step > li p .remoconBtn {
 font-weight: 600;
 display: inline-block;
 background: #faee00;
 padding: 0.2em 0.4em;
 border-radius: 6px;
 margin: 0 0.2em;
 line-height: 1.2;
 box-shadow: 2px 2px 0 #ccc;
}
.carousel_slide .pattern .announce {
 font-size: 120%;
 font-weight: 600;
 background: #fcfcfc;
 border-radius: 20px;
 padding: 3rem 4rem;
 display: inline-block;
}
.carousel_slide .btn {
 width: 34rem;
 margin: 0 auto;
}
.carousel_slide .btn a {
 padding: 2rem 2rem;
 font-size: 2rem;
 font-weight: 600;
 background: #FF416C;
 background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
 background: linear-gradient(to right, #FF4B2B, #FF416C);
 border: none;
 position: relative;
}
.carousel_slide .btn.onAir {
 margin: 0 auto 3rem;
}
.carousel_slide .btn.onAir a:before {
 content: "";
 display: block;
 background: #fcfcfc;
 width: 1.2rem;
 height: 1.2rem;
 border-radius: 2rem;
 position: absolute;
 left: 7rem;
 top: 0;
 bottom: 0;
 margin: auto 0;
 -webkit-animation: blink .5s ease-in-out infinite alternate;
 -moz-animation: blink .5s ease-in-out infinite alternate;
 animation: blink .5s ease-in-out infinite alternate;
}
.carousel_slide .flex {
 display: flex;
 justify-content: space-between;
 margin: 2rem auto 0;
}
.carousel_slide .flex .flexBox {
 flex: 1 0 calc(33.333% - 2rem);
 max-width: calc(33.333% - 2rem);
 padding: 0 3rem 3rem;
 background: #fcfcfc;
 border-radius: 10px;
}
.carousel_slide .flex .flexBox h4 {
 font-weight: 600;
 font-size: 120%;
 border-bottom: solid 1px #ccc;
 margin: 0 0 1.5rem;
 padding: 3rem 0 1.5rem;
 line-height: 1.2;
}
.carousel_slide .flex .flexBox h5 {
 font-size: 110%;
 margin: 1.5rem 0 0.5rem;
}
.carousel_slide .flex .flexBox p {
 color: #888;
}
@media screen and (max-width: 750px) {
 #howto .howtoHeader {
  padding: 9rem 3% 7rem;
 }
 #howto .howtoHeader:before {
  width: 35%;
  padding-top: calc(76.97% * 0.35);
 }
 #howto .howtoHeader:after {
  width: 35%;
  padding-top: calc(76.77% * 0.35);
 }
 #howto .howtoHeader h2 {
  font-size: 4.4vw;
 }
 #howto .howtoHeader h2 img {
  width: 56%;
 }
 #howto .howtoHeader .ch {
  font-size: 4.8vw;
  margin: 2rem auto 0;
 }
 #howto .howtoHeader .badge {
  width: 28vw;
  height: 28vw;
  right: 0.5%;
  top: 1%;
  margin: 0;
  bottom: auto;
 }
 #howto .howtoHeader .badge .central {
  font-size: 2.5vw;
 }
 #howto .howtoHeader .badge .central .en {
  font-size: 230%;
 }
 #howto .inner {
  padding: 0.5rem 0.25rem 3rem;
 }
 .carousel_thumbnails li {
  padding: 0 0.25rem;
 }
 .carousel_thumbnails label {
  font-size: 3vw;
  padding: 1.5rem 0.5rem;
		white-space: nowrap;
}
 .carousel_thumbnails label br {
  display: block;
 }
 .carousel_thumbnails li:nth-child(1) label:before, .carousel_thumbnails li:nth-child(2) label:before, .carousel_thumbnails li:nth-child(3) label:before {
  height: 3rem;
 }
 .carousel_thumbnails li:nth-child(1) label:before {
  width: calc(3rem * 1.266);
 }
 .carousel_thumbnails li:nth-child(2) label:before {
  width: calc(3rem * 1.973);
 }
 .carousel_thumbnails li:nth-child(3) label:before {
  width: calc(3rem * 1.466);
 }
 .carousel_slide {
  padding: 0 1rem 2rem;
 }
 .carousel_slide h3 {
  font-size: 5.0vw;
  margin: 2.5rem 0;
 }
 .carousel_slide h3:after {
  width: 12.6vw;
  margin: 0.25rem auto 0;
 }
 .carousel_slide .pattern .step {
  display: block;
  margin: 0 auto 3rem;
  padding: 0 0 3rem;
  border-bottom: solid 2px #ccc;
 }
 .carousel_slide .pattern .step > li {
  flex: none;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 16vw;
 }
 .carousel_slide .pattern .step > li:last-child {
  padding: 0;
 }
 .carousel_slide .pattern .step > li.step00 {
  padding-top: 18vw;
 }
 .carousel_slide .pattern .step > li img {
  width: 64%;
  margin: 0 auto;
 }
 .carousel_slide .pattern .step > li.step01:before, .carousel_slide .pattern .step > li.step02:before {
  width: 17vw;
  height: 17vw;
  top: 0;
  left: 0;
 }
 .carousel_slide .pattern .step:last-of-type > li.step01 img, .carousel_slide .pattern .step:last-of-type > li.step02 img {
  margin-top: -8vw;
 }
 .carousel_slide .pattern .step > li:after {
  transform: rotate(90deg);
  width: 8vw;
  height: calc(8vw * 1.475);
  top: auto;
  left: 0;
  right: 0;
  bottom: 2vw;
  margin: 0 auto;
 }
 .carousel_slide .pattern .step > li h4 {
  font-size: 5.4vw;
  padding: 0.5em 1em;
  left: 0;
  right: 0;
  top: 0;
  -ms-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
 }
 .carousel_slide .pattern .step > li p {
  font-size: 3.0vw;
 }
	.carousel_slide .pattern .step > li p .remoconBtn {
		font-size: 150%;
	}
 .carousel_slide .pattern .announce {
  padding: 2rem 3rem;
 }
 .carousel_slide .btn {
  width: 100%;
 }
 .carousel_slide .btn a {
  font-size: 5vw;
 }
 .carousel_slide .flex {
  display: block;
  margin: 0 auto;
 }
 .carousel_slide .flex .flexBox {
  flex: none;
  max-width: 100%;
  padding: 0 2rem 1.5rem;
  margin-top: 2rem;
 }
 .carousel_slide .flex .flexBox h4 {
  font-size: 120%;
  padding: 2rem 0 1.5rem;
 }
 .carousel_slide .flex .flexBox h5 {
  font-size: 100%;
  margin: 1rem 0 0.5rem;
 }
}