@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;
	line-height: 1.6;scroll-behavior: smooth;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}

/* table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;} */

table {
   width: 100%; font-size: 70%;
}
table td {
    padding: 10px 5px;
}
table.hikawa {
    border: 1px #ddd solid;
    border-collapse: collapse;
    border-spacing: 0;
}
table.hikawa td {
    padding: 10px 5px;
    border: 1px #ddd solid;
    border-width: 0 0 1px 1px;
}

fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
ul{
  margin: 0;
  padding: 0;
}
dl{
  margin: 0;
  padding: 0;
}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%;scroll-behavior: smooth; }
body { text-align: center;width: 100%; 
}
/* ======================================== */

a:link { color: #d3135b; text-decoration:none; transition: 0.5s;}
a:visited { color: #d3135b; }
a:hover { color: #3d39c8; }
a:active { color: #4643b6; }

/* contents
---------------------------------------------------------- */
#contents {	
	margin: 0 auto; position:relative; background-color: #fff;
	width: 100%;
	padding:0;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

header.head{
width: 100%; height:auto; padding: 0; overflow:hidden; position: relative; 
display:flex; flex-direction: column;
}

header.head h1{width: 100%; padding: 10px; background-color: #dfdfdf; color: #2b4069; text-align: center; font-size: 300%;display:flex; flex-direction: row;align-items:center; justify-content:center;font-family: 'Noto Sans JP', sans-serif;}
dl.top_bn{ width: 100%;display:flex; flex-direction: row; color: #fff;font-family: 'Noto Sans JP', sans-serif;}
dl.top_bn dt{width:100%;}

dl.top_bn dd{ padding: 160px 60px 60px 60px; flex-grow:1;
display:flex; flex-direction: column;
justify-content:flex-start; align-items:center; text-align: left;
background-color: #211f24;} 

dl.top_bn dt img{width:100%; height: auto;vertical-align:top;}
dl.top_bn dd h3{width:100%; font-size: 240%; text-align: left; }
dl.top_bn dd h2{width:100%; font-size: 600%; text-align: left; font-weight: 500; }
dl.top_bn dd p{width:100%; font-size: 120%; text-align: left; }
.txt-yellow{ color:#fce5bd;}
dl.top_bn dd img{width:100%; height: auto;vertical-align:top;}

.news-box{ width: 100%; padding: 5%  1%;;
background: #dfdfdf; /* Old browsers */
background: -moz-linear-gradient(top,  #dfdfdf 0%, #ccdcf6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #dfdfdf 0%,#ccdcf6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #dfdfdf 0%,#fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ccdcf6',GradientType=0 ); /* IE6-9 */
}
.sub-title{ width: 50%; height:auto; display: block; margin: auto;
 color: #45577b;font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 200%; text-align: left;
}
ul.top-news{ width: 47%; margin: auto; text-align: left; line-height: 2; list-style: disc;font-size: 140%;}

.for_mobile_s{ display: none;}

.br-sp {display: block; }


@media screen and (max-width: 375px) {
.br-sp {display: none; }

header.head{flex-direction:column; height:auto; }
header.head h1{font-size: 100%;}
header.head img{ width: 8vw; height: auto;}

dl.top_bn{ width: 100%;display:flex; flex-direction:column-reverse; color: #fff;font-family: 'Noto Sans JP', sans-serif;}
dl.top_bn dt{width: 100%;}

dl.top_bn dd{width: 100%; padding: 60px 60px 60px 60px; flex-grow:1;
display:flex; flex-direction: column;
justify-content:flex-start; align-items:center; text-align: left;
background-color: #211f24;} 
dl.top_bn dd h3{width:100%; font-size: 140%; text-align: left; }
dl.top_bn dd h2{width:100%; font-size: 260%; text-align: left; font-weight: 500; }
.sub-title{ width: 90%; font-size: 200%; 
}
ul.top-news{ width: 90%;  margin: auto; padding-left: 50px; font-size: 90%; line-height: 1.6; }

}

@media screen and (min-width:376px) and (max-width: 767px) {
.br-sp {display: none; }

header.head{flex-direction:column; height:auto; }
header.head h1{font-size: 100%;}
header.head img{ width: 8vw; height: auto;}

dl.top_bn{ width: 100%;display:flex; flex-direction:column-reverse; color: #fff;font-family: 'Noto Sans JP', sans-serif;}
dl.top_bn dt{width: 100%;}

dl.top_bn dd{width: 100%; padding: 60px 60px 60px 60px; flex-grow:1;
display:flex; flex-direction: column;
justify-content:flex-start; align-items:center; text-align: left;
background-color: #211f24;} 
dl.top_bn dd h3{width:100%; font-size: 140%; text-align: left; }
dl.top_bn dd h2{width:100%; font-size: 260%; text-align: left; font-weight: 500; }
.sub-title{ width: 90%; font-size: 200%; 
}
ul.top-news{ width: 90%;  margin: auto; padding-left: 50px;  font-size: 90%; line-height: 1.6;}
}

@media screen and (max-width: 767px) {
.br-sp {display: none; }

ul.top-news{ width: 90%;  margin: auto; padding-left: 50px;  font-size: 90%; line-height: 1.6;}
dl.top_bn dt img{width:100%; height: auto;vertical-align:top;}
dl.top_bn dd img{width:100%; height: auto;vertical-align:top;}
}

/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
.br-sp {display: none; }

header.head{flex-direction:column; height:auto; }
header.head h1{font-size: 180%;}
header.head img{ width: 8vw; height: auto;}

dl.top_bn{ width: 100%;display:flex; flex-direction:row; }
dl.top_bn dt{width: 100%;}
dl.top_bn dd{width: 100%; padding: 30px; flex-grow:1;} 
dl.top_bn dd h3{width:100%; font-size: 120%;  }
dl.top_bn dd h2{width:100%; font-size: 280%; }
dl.top_bn dd p{ font-size: 100%;}
.sub-title{ width: 80%;}
ul.top-news{ width: 80%; margin: auto; text-align: left; line-height: 2; list-style: disc;font-size: 100%;}
}

/* For Laptop */
@media screen and (min-width:950px) and (max-width:1620px){
.br-sp {display: none; }

header.head{flex-direction:column; height:auto; }
header.head h1{font-size: 180%;}
header.head img{ width: 8vw; height: auto;}

dl.top_bn dd{ padding: 100px 60px 60px 60px; } 

dl.top_bn dt img{width:100%; height: auto;vertical-align:top;}
dl.top_bn dd h3{width:100%; font-size: 200%; text-align: left; }
dl.top_bn dd h2{width:100%; font-size: 300%; text-align: left; font-weight: 500; }
dl.top_bn dd p{width:100%; font-size: 80%; text-align: left; }

.sub-title{ width: 80%;}
ul.top-news{ width: 80%; padding-left: 20px; font-size: 100%;font-family: 'Noto Sans JP', sans-serif;}
}

/* ======================================== */

.main {
	margin: 0 auto; padding:0;
	width: 100%; height:100%;
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
}

section.top_release_box{
width: 100%;
}

dl.top_release{ margin:0 auto; padding:60px 0; width:80%; height: auto; 
display:flex;
justify-content:center;
}
dl.top_release dt{width:100%; height: 100%; padding:0 10px 0 0;  font-weight: 700;
display:flex;
align-items:flex-start;flex-direction:column;
}
dl.top_release p{ display: inline-block; text-align: left; margin-top: 20px;}
dl.top_release dd{width:100%; height: 100%;display:flex;
align-items:flex-start;flex-direction:column;padding:0 0 0 40px;
}

.btn,
a.btn,
button.btn { width: 80%;
 background-color: #dfdfdf;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #4c4e7a;
  border-radius: 0.5rem;
}
a.btn--red.btn--cubic {
  border-bottom: 5px solid #cccccc;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #dfdfdf;
}

a.btn--radius {
  border-radius: 100vh;
}

.about_streaming_box{ width: 100%;}
.about_streaming_box h2{
width: 100%; margin: 150px 0 auto; padding: 20px; text-align: center; background-color: #a80511; color: #e8f8c1;font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 300%;
}

dl.about_streaming{ margin:0 auto; margin-top: 80px; margin-bottom: 50px; padding:0; width:90%; height: auto; text-align: left;font-family: 'Noto Sans JP', sans-serif;
display:flex;
justify-content:center;
flex-direction:row;align-content:space-around; position: relative;
}
dl.about_streaming dt{width:100%; margin-right: 20px;
background-color: #bdd5ee; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: column; position: relative;
}
dl.about_streaming dd{width:100%; margin-left: 20px; background-color: #eba78f; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: column; position: relative;
}
.illust-box{ width: 100%; text-align: center; position: absolute;	top:80%;
	left:50%;
	transform: translate(-50%, -70%);}
.illust-box img{ max-width: 100%;}
.illust-size{ width: 98%; margin: auto; bottom: 0;}

.height660{ height: 660px;}

dl.about_streaming div.midasi{ width: 100%;
 font-size: 200%; float: left;
}
.midashi-icon{ float: left; margin-right: 20px;}

.hght-520{ height: 520px;}

.hght-auto{ height: auto;}

.midashi-streaming{ width: 100%; text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 300%; color: #2b4069;}
.midashi-download{ width: 100%; text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 300%; color: #b10f2e;}

div.to{ position: absolute; top:50px; font-size: 200%;font-family: 'Noto Sans JP', sans-serif;}
div.chigai{position: absolute; top:150px; font-size: 200%;font-family: 'Noto Sans JP', sans-serif;}

.about_streaming_box h3{ width: 100%; margin-top: 150px; text-align: center;font-family: 'Noto Sans JP', sans-serif;font-weight: 900; font-size: 180%;}

dl.about_streaming02{ margin:0 auto; margin-top: 40px; margin-bottom: 50px; padding:0; width:90%; height: auto; text-align: left; font-family: 'Noto Sans JP', sans-serif;
display:flex;
justify-content:center;
flex-direction:row;align-content:space-around; position: relative;
}
dl.about_streaming02 dt{width:100%; height: 600px; margin-right: 20px;
background-color: #bdd5ee; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: row;align-content:center;
}
dl.about_streaming02 dd{width:100%; height: 600px; margin-left: 20px; background-color: #eba78f; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: row;align-content:center;
}

dl.about_streaming02 p{ padding: 20px; font-size: 150%; line-height: 2;}

.about_app_box{ width: 100%;}
.about_app_box h1{ width: 80%; margin: auto; margin-top: 100px; text-align: left; font-size: 390%;font-family: 'Noto Sans JP', sans-serif;font-weight: 700;}

.app-descrip{width: 100%; height: auto; padding: 20px; background-color: #ffdda1;border-top: 34px #dec5b6 solid;}
.app-descrip-box{ width: 86%; margin: auto; display:flex; }
.music-app-icon{ float: left; max-width: 122px; height: 179px;vertical-align:top;}
.app-descrip-box h3{font-family: 'Noto Sans JP', sans-serif;font-weight: 700; font-size: 260%; }
.app-descrip-txt{ margin-left: 40px; display:flex; flex-direction: column; text-align: left; }
.app-descrip-txt p{font-size: 160%;}
.about_streaming h3{ font-size: 260%;font-weight: 700; }
.about_streaming-illust { max-width: 100%; height: auto; margin: auto;}
.mt-50{margin-top: 50px;}
.mt-90{margin-top: 90px;}

dl.streaming-service{width:90%; margin: auto; padding: 60px;
background-color: #bdd5ee; border-radius: 30px;display:flex;}
dl.streaming-service dt{width:60%; text-align: left;}
dl.streaming-service dd{width:40%;}

dl.streaming-service p{font-family: 'Noto Sans JP', sans-serif; font-size: 160%; margin-bottom: 60px;}

h3.type-streaming-midashi{ width: 100%; color: #2b4069;font-family: 'Noto Sans JP', sans-serif;font-weight: 700; font-size: 220%;display:flex;}

.type-streaming-midashi-icon{ margin-right: 20px;}
p.type-streaming-midashi-sub{font-weight: 700;font-size: 270% !important;font-family: 'M PLUS 1', sans-serif;}

.futoji{font-weight: 700;font-size: 110%;}


.memo { width: 70%; margin: auto; margin-top: 100px;
  position: relative;
  background: #F8F0D7;
  border-left:4px dotted rgba(0,0,0,.1);
  border-right:4px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 1em;
  color: #65513f;
}
div.masking-tape{ font-size: 200%;
  position: absolute;
  top: -1em;
  left: 26%;
  width:600px;
  height:40px;
  background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0;
  color: #65513f;
  transform: rotate(-4deg); 
}
.memo p { text-align: left;
  color: #65513f;
  padding: 30px 10px 10px 10px
}
div.masking-tape p{ text-align: center; margin-top: -35px;}

section.deliver-service{ width: 100%; }
section.deliver-service h2{ width: 80%; margin: auto; margin-top: 60px; border-bottom: 1px #000 solid;font-family: 'Noto Sans JP', sans-serif;font-weight: 700; font-size: 220%; text-align: left; }
section.deliver-service p{ width: 80%;margin: auto; margin-top: 60px;  text-align: left;font-family: 'Noto Sans JP', sans-serif; font-size: 120%;}

dl.service-list{ margin:0 auto; margin-top: 4px; margin-bottom: 50px; padding:0; width:80%; height: auto; text-align: left;font-family: 'Noto Sans JP', sans-serif;
display:flex; flex-direction: row;
flex-wrap:wrap;
justify-content:center;
}
dl.service-list dt{width:50%; height: 380px; padding: 20px 10px; 
display:flex;
align-items:flex-start;flex-direction:column;border-bottom: 1px #aaabab solid;
}
dl.service-list dd{width:50%; height: 380px; padding: 20px 10px;
display:flex;
align-items:flex-start;flex-direction:column;border-bottom: 1px #aaabab solid;
}
dl.service-list p{ width: 100%; margin: 10px 0 0 0; padding: 0; font-size: 90%; }

.service-title{ font-family: 'Noto Sans JP', sans-serif;;font-size: 140%;font-weight: 700; line-height: 2;}

.logo-bn{border: 1px #aaabab solid; padding: 5px 5px 0 5px;}


dl.download-service{width:90%; margin: auto; padding: 60px;
background-color: #eba78f; border-radius: 30px;display:flex;}
dl.download-service dt{width:60%; text-align: left;}
dl.download-service dd{width:40%;}

dl.download-service p{font-family: 'Noto Sans JP', sans-serif; font-size: 160%; margin-bottom: 60px;}

h3.type-download-midashi{ width: 100%; color: #b10f2e;font-family: 'M PLUS 1', sans-serif;font-weight: 700; font-size: 220%;display:flex; margin: 0; padding: 0;
}

p.type-download-midashi-sub{font-weight: 700;font-size: 250% !important;font-family: 'Noto Sans JP', sans-serif; margin: 0 0 0 0 !important; padding: 0; }


dl.release-box{ width: 80%; display:flex;flex-direction:row;margin: auto;margin-top: 20px; margin-bottom: 40px;font-family: 'Noto Sans JP', sans-serif;
}
dl.release-box dt{width:50%; padding-right: 10px; display: block; text-align: left;
}
dl.release-box dd{width:50%; padding-left: 10px; display: block;text-align: left;
}
.release-title { width: 100%; font-weight: 700;font-size: 260% !important;font-family: 'Noto Sans JP', sans-serif; text-align: left;}
dl.release-box p{ margin: 0; line-height: 2; }


.s-btn,
a.s-btn,
button.s-btn { width: 80%;margin-top: 30px;
 background-color: #2b4069;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
}
a.s-btn--orange {
  color: #fff;
  background-color: #2b4069;
  border-bottom: 5px solid #12203c;
}
a.s-btn--orange:hover {
  margin-top: 33px;
  color: #fff;
  background: #2b4069;
  border-bottom: 2px solid #12203c;
}
a.s-btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

.link-list {
 width: 80%; font-size: 160%;font-family: 'Noto Sans JP', sans-serif; text-align: left; margin: auto; padding: 30px 0 0 0; line-height: 3;
}

dl.info-box{ margin:0 auto; margin-top: 4px; margin-bottom: 50px; padding:0; width:80%; height: auto; text-align: left;font-family: 'Noto Sans JP', sans-serif;
display:flex;
justify-content:center;
flex-direction:column;
}
dl.info-box dt{width:100%; height: 100%; padding: 10px 5px 0 5px; font-weight: 700; font-size: 160%;
display:flex;
align-items:flex-end;
}
dl.info-box dd{width:100%; padding: 10px 5px 35px 5px;
}
dl.info-box dd p{ width:100%; display: inline-block; padding: 0; margin: 0;}


@media screen and (max-width: 375px) and (max-width: 767px) {

}

@media screen and (max-width: 767px) {

dl.top_release{ margin:0 auto; padding:60px 0; width:96%; height: auto; 
display:flex;flex-direction:column;
justify-content:center;
}
dl.top_release dt{width:100%; height: 100%; padding:0 0 10px 0;  font-weight: 700;
display:flex;
align-items:flex-start;flex-direction:column;
}
dl.top_release p{ display: inline-block; text-align: left; margin-top: 20px;}
dl.top_release dd{width:100%; height: 100%;display:flex;
align-items:flex-start;flex-direction:column;padding:0 0 10px 0;
}
dl.top_release img{ width: 100%; height: auto;}
.btn,
a.btn,
button.btn { width: 90%;  font-size: 12px;
}
.about_streaming_box h2{
width: 100%; margin: 20px 0 auto; padding: 20px; font-size: 120%;
}
dl.about_streaming{ margin:0 auto; margin-top: 30px; margin-bottom: 30px; padding:0; width:90%; height: auto; text-align: left; font-family: 'Noto Sans JP', sans-serif;
display:flex;
justify-content:center;
flex-direction:column;align-content:space-around; position: relative;
}
dl.about_streaming dt{width:100%; margin-right: 0; margin-bottom: 20px;
background-color: #bdd5ee; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: column;
}
dl.about_streaming dd{width:100%; margin-left: 0; background-color: #eba78f; border-radius: 30px;
padding: 30px;
display:flex; flex-direction: column;
}
.illust-size{ width: 90%; height: auto; vertical-align: bottom; margin-top: 0px;}
.midashi-icon{ float: left; margin-right: 20px; width: 20%; height: auto;}
dl.about_streaming div.midasi{ width: 100%;
 font-size: 120%; float: left;
}
.hght-520{ height: 280px;}
.height660{ height: 400px;}

.midashi-streaming{ font-size: 160%;}
.midashi-download{ font-size: 160%;}

div.to{ position: absolute; top:100px; left: 50%; font-size: 100%;}
div.chigai{position: absolute; top:250px; left: 36%; font-size: 100%;}
.about_streaming_box h3{ width: 90%; margin: auto; margin-top: 100px; text-align: center; font-size: 120%;}

dl.about_streaming02{ margin:0 auto; margin-top: 20px; margin-bottom: 50px; padding:0; width:90%; height: auto; 
display:flex;
justify-content:center;
flex-direction:column;align-content:space-around; position: relative;
}
dl.about_streaming02 dt{width:100%; height: 520px; margin-right: 0; margin-bottom: 20px;
padding: 30px 10px;
display:flex; flex-direction: row;align-content:center;
}
dl.about_streaming02 dd{width:100%; height: 480px; margin-left: 0; 
padding: 30px 10px;
display:flex; flex-direction: row;align-content:center;
}
.illust-size02{ width: 100px; height: auto !important; vertical-align: top; }
.illust-size03{ width: 70px; height: auto !important; vertical-align: top; }
dl.about_streaming02 p{ padding: 20px; font-size: 100%; line-height: 2;}
.about_app_box h1{ width: 80%; margin: auto; margin-top: 0px; font-size: 140%;font-weight: 700;}

.app-descrip{ padding: 10px;border-top: 24px #dec5b6 solid;}
.app-descrip-box h3{font-weight: 700; font-size: 120%; }
.app-descrip-txt{ margin-left: 10px; display:flex; flex-direction: column; text-align: left; }
.app-descrip-txt p{font-size: 100%;}
.about_streaming h3{ font-size: 160%;font-weight: 700; }
.music-app-icon{ float: left; max-width: 60px; height: 88px;vertical-align:top;}

dl.streaming-service{width:90%; margin: auto; padding: 30px;
display:flex; flex-direction: column;}
dl.streaming-service dt{width:100%; text-align: left;}
dl.streaming-service dd{width:100%;}

dl.streaming-service p{font-family: 'Noto Sans JP', sans-serif; font-size: 120%; margin-bottom: 20px;}
h3.type-streaming-midashi{ width: 100%; font-weight: 700; font-size: 160%;display:flex;}
.type-streaming-midashi-icon{ margin-right: 0px; width: 50px;height: auto !important; vertical-align: top;}
p.type-streaming-midashi-sub{font-weight: 700;font-size: 120% !important;font-family: 'Noto Sans JP', sans-serif;}
.streaming-illust04-size{width: 100%; height: auto; vertical-align: top;}

.memo { width: 90%; margin: auto; margin-top: 100px;
}
div.masking-tape{ font-size: 120%;
  position: absolute;
  top: -1em;
  left: 2%;
  width:90%;
  height:40px;
  padding: 10px 0 0 0;
}

section.deliver-service{ width: 100%; }
section.deliver-service h2{ width: 80%; margin: auto; margin-top: 60px; border-bottom: 1px #000 solid;font-weight: 700; font-size: 120%; text-align: left; }
section.deliver-service p{ width: 80%;margin: auto; margin-top: 10px;  text-align: left;font-family: 'Noto Sans JP', sans-serif; font-size: 120%;}

dl.service-list{ margin:0 auto; margin-top: 4px; margin-bottom: 50px; padding:0; width:80%; height: auto; text-align: left;font-family: 'Noto Sans JP', sans-serif;
display:flex; flex-direction: column;
flex-wrap:wrap;
justify-content:center;
}
dl.service-list dt{width:100%; height: auto; padding: 20px 0px; 
}
dl.service-list dd{width:100%; height: auto; padding: 20px 0px;
}
dl.service-list p{width:100%; }

dl.download-service{width:90%; margin: auto; padding: 30px;display:flex; flex-direction: column;}
dl.download-service dt{width:100%; text-align: left;}
dl.download-service dd{width:100%;}

dl.download-service p{ width: 100%; font-family: 'Noto Sans JP', sans-serif; font-size: 100%; margin-bottom: 30px;}

h3.type-download-midashi{ width: 100%; color: #b10f2e;font-weight: 700; font-size: 100%;display:flex; margin: 0; padding: 0;
}
p.type-download-midashi-sub{font-weight: 700;font-size: 110% !important;font-family: 'Noto Sans JP', sans-serif; margin: 0 0 0 0 !important; padding: 0; }

dl.release-box{ width: 80%; display:flex;flex-direction:column;margin: auto;margin-top: 20px; margin-bottom: 40px;
}
dl.release-box dt{width:100%; padding-right: 0px; display: block; margin-bottom: 30px;
}
dl.release-box dd{width:100%; padding-left: 0px; display: block;
}
.release-title { width: 100%; font-weight: 700;font-size: 260% !important;font-family: 'M PLUS 1', sans-serif; text-align: left;}
dl.release-box p{ margin: 0; line-height: 2; }
dl.release-box img{ width: 100%; height: auto;}

dl.info-box{ margin:0 auto; margin-top: 4px; margin-bottom: 50px; padding:0; width:80%; height: auto; text-align: left;font-family: 'Noto Sans JP', sans-serif;
display:flex;
justify-content:center;
flex-direction:column;
}
dl.info-box dt{width:100%; height: 100%; padding: 10px 5px 0 5px; font-weight: 700; font-size: 160%;
display:flex;
align-items:flex-end;
}
dl.info-box dd{width:100%; padding: 10px 5px 20px 5px;
}
dl.info-box dd p{ width:100%;display: inline-block; padding: 0; margin: 0;}
.link-list {
 width: 90%; font-size: 100%; padding: 10px 0 0 0; line-height: 2; margin-bottom: 80px;
}
.no-border{ visibility: hidden;}
#foot{
height: 300px;}


.mt-50{margin-top: 40px;}
.mt-90{margin-top: 50px;}

}

/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
.main {padding:10px 0px 0px 0px;}

section.top_release_box{
width: 100%;
}
dl.top_release{ margin:0 auto; padding:60px 0; width:90%; height: auto; 
display:flex;
justify-content:center;
}
dl.top_release dt{width:100%; height: 100%; padding:0 10px 0 0;  font-weight: 700;
display:flex;
align-items:flex-start;flex-direction:column;
}
dl.top_release p{ display: inline-block; text-align: left; margin-top: 20px;}
dl.top_release dd{width:100%; height: 100%;display:flex;
align-items:flex-start;flex-direction:column;padding:0 0 0 10px;
}
dl.top_release img{ width: 100%; height: auto;}

.btn,
a.btn,
button.btn { width: 80%;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  padding: 1rem 4rem;
  letter-spacing: 0.1em;
}

.about_streaming_box{ width: 100%;}
.about_streaming_box h2{
width: 100%; margin: 50px 0 auto; padding: 20px; font-size: 200%;
}

dl.about_streaming{ margin:0 auto; margin-top: 30px; margin-bottom: 50px; padding:0; width:90%; height: auto; text-align: left;
display:flex;
justify-content:center;
flex-direction:row;align-content:space-around; position: relative;
}

dl.about_streaming dt{width:100%; margin-right: 10px;
}
dl.about_streaming dd{width:100%; margin-left: 10px;
padding: 30px;
display:flex; flex-direction: column;
}
.illust-box{top:85%; left:50%; transform: translate(-50%, -70%);}
.illust-size{ width: 300px; height: auto; vertical-align: bottom; margin-top: 20px;}

dl.about_streaming div.midasi{ width: 100%;
 font-size: 180%; float: left;
}
.midashi-icon{ float: left; margin-right: 10px; width: 50px; height: auto; }
.hght-520{ height: 360px;}

.midashi-streaming{  font-size: 180%; }
.midashi-download{ font-size: 180%; }

div.to{ position: absolute; top:90px; font-size: 160%;}
div.chigai{position: absolute; top:120px; font-size: 160%;}

.illust-size02{ width: 100px; height: auto !important; vertical-align: top; }
.illust-size03{ width: 70px; height: auto !important; vertical-align: top; }

dl.about_streaming02 p{ padding: 2px; font-size: 110%; line-height: 1.5;}
.about_app_box h1{ width: 90%; margin: auto; margin-top: 50px;font-size: 190%;}
.br-sp {display: none; }

.app-descrip-box h3{ font-size: 180%; }
.app-descrip-txt{ margin-left: 40px; display:flex; flex-direction: column; text-align: left; }
.app-descrip-txt p{font-size: 120%;}
.about_streaming h3{ font-size: 200%;font-weight: 700; }
.about_streaming-illust { max-width: 290px; height: auto; margin: auto;}

.height660{ height: 400px;}

dl.streaming-service{width:90%; margin: auto; padding: 30px;
display:flex; flex-direction: column;}
dl.streaming-service dt{width:100%; text-align: left;}
dl.streaming-service dd{width:100%;}

dl.streaming-service p{font-family: 'Noto Sans JP', sans-serif; font-size: 120%; margin-bottom: 20px;}
h3.type-streaming-midashi{ width: 100%; font-weight: 700; font-size: 160%;display:flex;}
.type-streaming-midashi-icon{ margin-right: 0px; width: 50px;height: auto !important; vertical-align: top;}
p.type-streaming-midashi-sub{font-weight: 700;font-size: 120% !important;font-family: 'Noto Sans JP', sans-serif;}
.streaming-illust04-size{width: 40%; height: auto; vertical-align: top;}

.memo { width: 90%; margin: auto; margin-top: 100px;
}
div.masking-tape{ font-size: 130%;
  position: absolute;
  top: -1em;
  left: 14%;
  width:70%;
  height:40px;
  padding: 10px 0 0 0;
}

dl.service-list{ margin:0 auto; margin-top: 4px; margin-bottom: 50px; padding:0; width:90%; height: auto;
display:flex; flex-direction: row;
flex-wrap:wrap;
justify-content:center;
}
dl.service-list dt{width:50%; height: 500px; padding: 20px 10px; 
display:flex;
align-items:flex-start;flex-direction:column;border-bottom: 1px #aaabab solid;
}
dl.service-list dd{width:50%; height: 500px; padding: 20px 10px;
display:flex;
align-items:flex-start;flex-direction:column;border-bottom: 1px #aaabab solid;
}
dl.service-list p{ width:100%; margin: 10px 0 0 0; padding: 0; font-size: 90%; }

dl.download-service{width:90%; margin: auto; padding: 30px;display:flex; flex-direction: column;}
dl.download-service dt{width:100%; text-align: left;}
dl.download-service dd{width:100%;}

dl.download-service p{ width: 100%; font-family: 'Noto Sans JP', sans-serif; font-size: 100%; margin-bottom: 30px;}

h3.type-download-midashi{ width: 100%; color: #b10f2e;font-weight: 700; font-size: 100%;display:flex; margin: 0; padding: 0;
}
p.type-download-midashi-sub{font-weight: 700;font-size: 110% !important;font-family: 'Noto Sans JP', sans-serif; margin: 0 0 0 0 !important; padding: 0; }

.release-title { font-size: 200% !important; }
dl.release-box p{ margin: 0; line-height: 2; }
dl.release-box img{ width: 100%; height: auto; }
.s-btn,
a.s-btn,
button.s-btn { width: 90%;margin-top: 30px;
  font-size: 0.8em;}

dl.info-box dd p{ width:100%;display:}
.link-list {
 width: 80%; font-size: 100%; padding: 10px 0 0 0; line-height: 2; margin-bottom: 80px;
}

#foot{
height: 240px;}


}

.br-pc {display: block; }

/* For Laptop */
@media screen and (min-width:950px) and (max-width:1620px){

section.top_release_box{
width: 100%;
}
dl.top_release{ margin:0 auto; padding:60px 0; width:90%; height: auto; 
display:flex;
justify-content:center;
}
dl.top_release dt{width:100%; height: 100%; padding:0 10px 0 0;  font-weight: 700;
display:flex;
align-items:flex-start;flex-direction:column;
}
dl.top_release p{ display: inline-block; text-align: left; margin-top: 20px;}
dl.top_release dd{width:100%; height: 100%;display:flex;
align-items:flex-start;flex-direction:column;padding:0 0 0 10px;
}
dl.top_release img{ width: 100%; height: auto;}

.btn,
a.btn,
button.btn { width: 80%;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5;
  padding: 1rem 4rem;
  letter-spacing: 0.1em;
}

.illust-size{ width: 480px; height: auto; vertical-align: bottom; margin-top: 10px;}

.hght-520{ height: 460px;}

.illust-size02{ width: 100px; height: auto !important; vertical-align: top; }
.illust-size03{ width: 70px; height: auto !important; vertical-align: top; }

dl.about_streaming02 dt{height: 600px;

}
dl.about_streaming02 dd{ height: 600px;
}
.about_app_box h1{ width: 90%; margin: auto; margin-top: 50px;font-size: 280%;}

.about_streaming-illust { width: 100%; height: auto; margin: auto;}
.streaming-illust04-size{width: 100%; height: auto; vertical-align: top;}

dl.release-box p{ margin: 0; line-height: 2; }
dl.release-box img{ width: 100%; height: auto; }
. mt-90{margin-top: 60px;}
.height660{ height: 560px;}

div.masking-tape{ font-size: 130%;
  left: 14%;
}

dl.service-list dt{width:50%; height: 440px; 
}
dl.service-list dd{width:50%; height: 440px; 
}

}

/* nandemonai size */
@media screen and (min-width:1330px) and (max-width:1620px){

section.top_release_box{
width: 100%;
}
dl.top_release{ margin:0 auto; padding:60px 0; width:90%; height: auto; 
display:flex;
justify-content:center;
}
dl.top_release dt{width:100%; height: 100%; padding:0 10px 0 0;  font-weight: 700;
display:flex;
align-items:flex-start;flex-direction:column;
}
dl.top_release p{ display: inline-block; text-align: left; margin-top: 20px;}
dl.top_release dd{width:100%; height: 100%;display:flex;
align-items:flex-start;flex-direction:column;padding:0 0 0 10px;
}
dl.top_release img{ width: 100%; height: auto;}

.hght-520{ height: 460px;}



}

/* footer
---------------------------------------------------------- */
#foot{
margin-top: auto; margin: 0; padding:5% 3% 8% 3% ;

width:100%;bottom:0;
display:flex;
flex-direction:column;
align-items:center;transform: rotate(0.05deg);font-family: 'Noto Sans JP', sans-serif;
}


/*
=========================================
  Utilities
=========================================
*/

/* txt
---------------------------------*/
.txt-lll{ font-size: 280%;}
.txt-l{ font-size: 180%;}
.txt-s{ font-size: 80%;}

.txt-pink{color: #b10f2e;}
.txt-blue{ color: #2b4069;}
.txt-orange{ color: #dc330b;}
.txt-green{ color: #096b20;}

/* inview
---------------------------------*/
.head,.news-box,.top_release_box,.about_streaming_box,.about_streaming,.about_app_box,.memo,.deliver-service,.download-service,.movie-box{ opacity:0;}
.fadeIn{
  transition: all 1.3s ease-out;
  opacity: 1 !important;
}
.fadeIn02{
  transition: all 1.8s ease-in-out;
  opacity: 1 !important;
}