@charset "utf-8";

0html, 0body                 {width:100%;margin:0 auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
0body                       {-webkit-text-size-adjust:100%;}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td, p,
fieldset, form, label, legend, input,
article, aside, canvas, figure, figcaption,
0footer, 0header, nav, section,
b, u, i                    {margin:0;padding:0;list-style:none;font-style:normal;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

a                          {outline:none;}
img                        {border:0 none;vertical-align:top;max-width:100%;height:auto;}
em                         {font-style:normal;font-weight:bold;}
nav ul, nav li             {list-style:none;}
.h a, .f a,
nav a, nav span            {text-decoration:none;}
table                      {border-collapse:collapse;}
ul, ol, dl,
p                          {line-height:1.6;}


/* ----------------------------------------------- font */
0html                       {font-size:62.5%;}
0body                       {font-size:16px;font-size:1.6rem;font-family: "YuGothic M", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}

h1, h2,  h3                {font-weight:normal;}
.wf_suruga                 {font-family: ab-suruga-u, sans-serif;font-weight: 400;font-style: normal;}

/* ============================================================== base */
0html, body                 {height:100%;}
0body                       {background:#fff;color:#333;-webkit-text-size-adjust:100%;}
0a                          {color:#254d9a;}
0a:visited                  {color:#153d8a;}
0a:hover                    {color:#46b;}
img                        {vertical-align:top;}

.bg_fixed                  {background-size:cover;background-repeat:no-repeat;background-position:50% 50%;}
.no-br                     {display:none;}
@media screen and (min-width: 960px){
	.bg_fixed                  {background-attachment:fixed;background-position:50% 100%;}
	_:-ms-fullscreen, :root .bg_fixed {background-attachment:scroll;}
	.no-br                     {display:inline;}
}

/* ----------------------------------------------- pagetop */
.ptop                      {font-size:4vw;background:#0e4064;color:#fff;width:3em;height:3em;line-height:3em;text-align:center;position:fixed;z-index:99;right:0.5em;bottom:-1em;cursor:pointer;border-radius:0;box-shadow:0 0 5px rgba(0,0,0,0.2);transition:0.2s;opacity:0;display:block;}
.ptop:before               {content:"";display:block;position:absolute;top:calc(50% - 0.4em);left:calc(50% - 0.5em);width:1em;height:1em;border-bottom:1px solid #fff;border-right:1px solid #fff;transform:rotate(-135deg);}
.ptop i                    {display:none;}
.scrl_bgn .ptop            {opacity:1;bottom:1em;}
@media screen and (min-width: 750px){
	.ptop                      {font-size:30px;}
}

/* ----------------------------------------------- common */
.v_sp {
	display: block;
}
span.v_sp {
	display: inline-block;
}
.v_pc {
	display: none;
}
.sct {
	position: relative;
	font-size: 4vw;
}
@media screen and (min-width: 600px){
	.sct {
		font-size: 24px;
	}
}
@media screen and (min-width: 1000px){
	span.v_sp,
	.v_sp {
		display: none;
	}
	.v_pc {
		display: block;
	}
	span.v_pc {
		display: inline-block;
	}
	.sct {
		position: relative;
	}
}
.inr {
	position: relative;
	margin: 0 auto;
	max-width: 1300px;
}
.sct .inr {
	padding: 1em;
}
@media screen and (min-width: 750px){
	.sct .inr {
		padding: 2em 1em;
	}
}
@media screen and (min-width: 1000px){
	.sct .inr {
		padding: 4em 1em;
	}
}
.sct_ttl span {
	display: inline-block;
}
.sct_lst li {
	position: relative;
	display: block;
	padding-left:1.4em;
	margin-bottom: 0.5em;
	background-repeat:no-repeat;
	background-position: 0 0.3em;
	background-size: 1em auto;
	background-image: url("../img/check_01.svg");
}
/* ============================================================== header */
.h {
	position: relative;
	overflow: hidden;
	font-size: 4.5vw;
	padding: 1em 0 0;
}
@media screen and (min-width: 670px){
	.h {
		font-size: 30px;
	}
}
.h .inr {
	padding: 0;
}
.h_ttl {
	padding: 0.5em 0;
}
.h_ttl span {
	display: block;
	position: relative;
	z-index: 3;
	width: 6em;
	margin: 0 auto;
}
.h_chara ul {
	position: absolute;
	display: flex;
	height: 50%;
	top: 25%;
	width: calc(50% - 5em);
	background-repeat: no-repeat;
	background-size: auto 100%;
	list-style: none;
}
.h_chara ul:nth-of-type(1) {
	left: 0;
	background-position: 100% 0;
	background-image: url("../img/header_film_01.png");
}
.h_chara ul:nth-of-type(2) {
	right: 0;
	background-position: 0 0;
	background-image: url("../img/header_film_02.png");
}
.h_chara li {
	position: absolute;
	width: 2.8em;
	top: -0.4em;
}
.h_chara li.h_chara_01 {
	right: 10.3em;
	width: 4.4em;
	top: 0;
}
.h_chara li.h_chara_02 {
	right: 6.4em;
	top: 0.1em;
	width: 3.2em;
}
.h_chara li.h_chara_03 {
	right: 2.4em;
}
.h_chara li.h_chara_04 {
	left: 2.4em;
	top: -0.2em;
}
.h_chara li.h_chara_05 {
	left: 6.8em;
	top: -0.2em;
	width: 2.6em;
}
.h_chara li.h_chara_06 {
	left: 11.4em;
	top: -0.4em;
	width: 2.2em;
}

/* ============================================================== cv */
.sct.sct_cv {
	background-size: auto 100%;
	background-repeat: repeat-x;
}
.sct_cv_1 {
	background: #0e4064;
	color: #fff;
}
.sct_cv_2 {
	background-color: #ddd;
	color: #111;
}
.cv_set {
	max-width: 640px;
	margin: 0 auto;
	padding: 2em 1em 1em 9em;
	text-align: right;
	background-size: 7em auto;
	background-repeat: no-repeat;
	background-position: 0.5em 50%;
	background-image: url("../img/cv_chara_01.png");
}
.sct_cv_2 .cv_set {
	padding: 3em 1em 3em 9em;
	background-image: url("../img/cv_chara_02.png");
}
.cv_btn a {
	display: block;
	color: #ffffff;
	font-size: 116%;
	min-width: 13em;
	text-decoration: none;
	text-align: center;
	padding: 0.8em 0.8em 0.8em 2.8em;
	border-radius: 0.4em;
	box-shadow: 0.3em 0.3em 0 rgba(192,192,192,0.5);
	transition: 0.3s;
	font-weight: bold;
	font-style: normal;
	background-color: #ff0000;
	background-size: 2em auto;
	background-repeat: no-repeat;
	background-image: url("../img/ico_youtube.svg");
	background-position: 1em 50%;
}
.cv_btn a:hover {
	background-color: #f54;
}
.cv_btn span {
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
	margin-top: 0.4em;
}

.cv_btn span img{
	width: 5%;
}

.cv_txt{
	font-size: 14px;
	text-align: center;
	margin-top: -20px;
}

/* ============================================================== intro */
.sct_intro.sct .inr {
	padding: 1em;
}
@media screen and (min-width: 750px){
	.sct_intro.sct .inr {
		padding: 1em 1em 2em;
	}
}
.intro_lead {
	margin: 0 auto;
	padding: 1em;
	max-width: 1300px;
}
.intro_txt ul {
	margin: 1.5em;
}
.intro_fig {
	margin: 1em;
}

/* ============================================================== youtube */
.sct_yt {
	background: #0e4064;
	color: #fff;
	text-align: center;
	background: linear-gradient(to bottom, #023 0, #0e4064 10%, #0e4064 90%, #023 100%);
	background: linear-gradient(to bottom, #023 0, #0e4064 10%);
}
.sct_yt .inr {
	padding: 2em 1em;
}
@media screen and (min-width: 750px){
	.sct_yt .inr {
		padding-bottom: 1.5em;
	}
}
.sct_yt .sct_ttl {
	margin: 0 auto 1em;
	max-width: 720px;
}
.yt_lead {
	font-size: 140%;
	font-weight: bold;
	margin: 0 0 0.5em;
}
.yt_lead span {
	display: inline-block;
	margin: 0 0.5em;
}
.yt_lead em {
	background-image: linear-gradient(to bottom, transparent 0, transparent 70%, rgba(255,233,0,0.7) 70%, rgba(255,233,0,0.7) 100%);
}
.yt_lead i {
	font-size: 140%;
}
.sct_yt .youtube {
	margin-bottom: 1em;
}
.yt_chara {
	display: none;
	pointer-events: none;
}
@media screen and (min-width: 1000px){
	.sct_yt .sct_ttl {
		font-size: 180%;
	}
	.yt_chara {
		position: absolute;
		z-index: 3;
		display: block;
		right: 1em;
		bottom: -1.5em;
		width: 12em;
	}
}
.youtube {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
.yt_catch {
	letter-spacing: -0.05em;
	font-weight: bold;
	text-align:center;
}
.yt_catch span {
	display: block;
}
/* ============================================================== contents */
.sct_c1,
.sct_c2 {
	background-color: #0e4064;
	padding: 0 1em;
}
.sct_c1 .inr,
.sct_c2 .inr {
	background-color: #fff;
}
.c_ttl {
	display: flex;
	align-items: flex-end;
	margin-bottom: 0.5em;
}
.c_ttl span:nth-of-type(1) {
	width: 2.4em;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 468 / 566;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url("../img/kachinko.png");
	color: #fff;
	letter-spacing: -0.05em;
	font-size: 140%;
	padding-bottom: 0.3em;
	font-family: ab-suruga-u, sans-serif;
	font-weight: 400;
}
.c_ttl span:nth-of-type(1) i {
	display: block;
	width: 100%;
	text-align: center;
}
.c_ttl span:nth-of-type(2) {
	margin-left: 0.5em;
	flex: 1;
	display: block;
	line-height: 1.2;
	font-weight: bold;
}
.c_fig {
	margin: 0 auto 1em;
	max-width: 520px;
}
.c_fig span {
	display: block;
	aspect-ratio: 16/9;
	box-shadow: 0.3em 0.3em 0 rgba(192,192,192,0.5);
}
.c_fig span img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}
.c_txt p {
	margin-bottom: 1em;
}
.c_txt ul {
	margin: 0 1.5em;
}
@media screen and (min-width: 1000px){
	.sct_c1 .inr,
	.sct_c2 .inr {
		padding: 2em;
	}
	.sct_c1 .inr {
		padding-bottom: 0;
	}
	.c_ttl {
		margin-bottom: 1em;
	}
	.c_wrp {
		display: flex;
	}
	.c_fig {
		width: 40%;
		margin: 0;
	}
	.c_txt {
		flex: 1;
		margin-left: 2em;
	}
	.sct_c2 .c_wrp {
		flex-direction: row-reverse;
	}
	.sct_c2 .c_txt {
		margin-left: 0;
		margin-right: 2em;
	}
}

/* ============================================================== mc */
.sct_mc {
	background: linear-gradient(to top, #023 0, #0e4064 10%);
	padding:2em 1em;
}
.sct_mc .inr {
	padding: 1em;
	max-width: 1080px;
	background: #fff;
}
.sct_mc .sct_ttl {
	margin-bottom: 1em;
}
.sct_mc .sct_ttl span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 1em;
}
.sct_mc .sct_ttl i {
	display: block;
}
.sct_mc .sct_ttl i:nth-of-type(1) {
	background: #0e4064;
	color: #fff;
	padding: 0.4em 1.4em 0.3em;
	line-height: 1;
	margin-right: 0.5em;
	font-size: 62.5%;
	border-radius: 2em;
}
.mc_fig {
	padding: 1em;
	margin: 0 auto 1em;
	width: 50%;
	max-width: 270px;
}
.mc_fig span {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
@media screen and (min-width: 750px){
	.sct_mc {
		padding:2em 1em 4em;
	}
	.sct_mc .inr  {
		padding: 1em 3em 2em;
	}
	.sct_mc .sct_ttl {
		padding-top: 1em;
	}
	.sct_mc .sct_ttl span {
		justify-content: flex-start;
	}
	.mc_fig {
		float: left;
		margin: 0 1em 0 0;
	}
}

/* ============================================================== vod */
.sct_vod {
	background: #f3f3f3;
}
.sct_vod .inr {
	max-width: 1100px;
}
.sct_vod_ttl {
	font-size: 110%;
	font-weight: bold;
	padding: 0.3em 0.8em;
	color: #fff;
	background: #153d8a;
}
.vod_wrp {
	border: 1px solid #0e4064;
	padding: 1em;
	margin-bottom: 1em;
}
.sct_vod p + p {
	margin-top: 1em;
}
.vod_fig {
	margin: 0 auto;
	padding: 1em 0;
	width: 75%;
	max-width: 320px;
}
@media screen and (min-width: 1000px){
	.vod_wrp {
		display :flex;
		align-items: center;
	}
	.vod_fig {
		margin: 1em 2em 0 1em;
		width: 30%;
	}
	.vod_txt {
		flex: 1;		
	}
}
/* ----------------------- vod service */
.vod-svc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 0.5%;
	color: #fff;
}
.vod-svc_box {
	padding: 3% 0.5% 2%;
}
.vod-svc_box:nth-of-type(1) {
	background: #4361B3;
}
.vod-svc_box:nth-of-type(2) {
	background: #576C61;
}
.vod-svc_box:nth-of-type(3) {
	background: #B3585E;
}
.vod-svc_ttl {
	text-align:center;
	font-size: 3vw;
	font-weight: bold;
	margin-bottom: 0.5em;
}
.vod-svc_img.is-01 {
	margin-bottom: 0.5em;
}
.vod-svc_img.is-02 {
	width: 53%;
}
.vod-svc_img.is-04 {
	position: relative;
	z-index: 3;
	width: 198%;
	margin-left: 2.5%;
}
@media screen and (min-width: 1000px){
	.vod-svc_ttl {
		font-size: 30px;
	}
}

/* ============================================================== sony */

/* sony header */

@media screen and (min-width: 1000px) {
#0pageheader {
	width:100%;
	background-color:#000;
	margin:0 auto;
}
#0pageheader .sonylogo {
	position:static;
	width:1300px;
	background-color:#000;
	top:0;
	left:0;
	transform: translateY(0)translateX(0);
	margin:0 auto;
	padding:16px;
}
#0pageheader .sonylogo img{
    vertical-align: middle;
}
#pagefooter {background-color:#231f20;color:#fff;bottom:0;text-align:center;display:block;}
#pagefooter #copyright{padding-top:1%;padding-bottom:1%;font-size:60%;font-family:sans-serif;}
#pagefooter #topback{position: fixed;bottom:5%;right:5%;}
#pagefooter #topback > img{width:50px;height:auto;}
.bravia_link a{
    width:592px;
    margin:0 auto;
}
}

@media screen and (max-width: 999px) {
#0pageheader {
	width:100%;
	height:50px;
	background-color:#000;
	margin:0 auto;
}
#0pageheader .sonylogo {
	position:relative;
	width:71px;
	background-color:#000;
	top:50%;
	left:0;
	transform: translateY(-50%)translateX(0);
	margin-left: 16px;
}
#0pageheader .sonylogo img{
    vertical-align: middle;
}
#pagefooter {background-color:#231f20;color:#fff;bottom:0;text-align:center;display:block;}
#pagefooter #copyright{padding-top:2%;padding-bottom:2%;font-size:60%;font-family:sans-serif;}
#pagefooter #topback{position: fixed;bottom:60px;right:10px;}
#pagefooter #topback > img{width:40px;height:auto;}
.bravia_link a{
    max-width:592px;
    margin:0 auto;
}
}