@charset "utf-8";

.feature-article{
	font-family: Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
	line-height: 1.5;
}

.feature-article .container,
.feature-article header,
.feature-article section,
.feature-article article {
	position: relative;
	z-index: 1;
}

.feature-article a {
	color: #555;
	text-decoration: underline;
}

.feature-article p {
	margin: 10px 0 0;
	position: relative;
	z-index: 2;
}

*:first-child+html .feature-article .row {
	zoom: 1;
	position: relative;
}

/*
 * classes
 *==================================================
 */

/* 横いっぱいのビジュアル */
.feature-article img.img-hero{
	width: 100%;
}

/* 横いっぱいのビデオ */
.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 横方向の高さ合わせ */
@media screen and (min-width:981px) {
	.feature-article .fit-h1{
		margin-top: 20px;
	}
	/*
	*/
/*ad20160414
	.feature-article .container {
		padding-left: 5px;
		padding-right: 5px;
	}*/

	.feature-article .container .container {
		margin-left: -5px;
		margin-right: -5px;
	}

}


/* MyXperiaスタイルのボタン(灰色) */
.feature-article .btn-feature {
	color: #fff;
	background: url(../img/mark1.png) scroll no-repeat 95% center #959DA0;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-block;
	margin: 5px 1px;
	
	font-weight: normal;
	line-height: 50px;
	
	padding: 0 40px 0 10px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

.feature-article .btn-feature2 {
	color: #fff;
	background: url(../img/mark3.png) scroll no-repeat 95% center #959DA0;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-block;
	margin: 5px 1px;
	
	font-weight: normal;
	line-height: 50px;
	
	padding: 0 40px 0 10px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}


.feature-article .btn-feature:hover,
.feature-article .btn-feature:active,
.feature-article .btn-feature:focus {
	color: #fff;
	background-color: #a5aDb0;
}
.feature-article .btn-feature2:hover,
.feature-article .btn-feature2:active,
.feature-article .btn-feature2:focus {
	color: #fff;
	background-color: #a5aDb0;
}

/* MyXperiaスタイルのボタン(白色) */
.feature-article .btn-white {
	color: #333;
	background: url(../img/mark2.png) scroll no-repeat 95% center #fff;
	border: 1px solid #ccc;
	cursor: pointer;
	display: inline-block;
	margin: 5px 1px;
	
	font-weight: normal;
	line-height: 120%;
	
	padding: 18px 40px 18px 20px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	/*white-space: nowrap;*/
}

.feature-article .btn-white:hover,
.feature-article .btn-white:active,
.feature-article .btn-white:focus {
	color: #000;
	border: 1px solid #999;
	background-image: url(../img/mark2_on.png);
}

/* MyXperiaスタイルのボタン(調整) */
.feature-article .btnstage {
	text-align: center;
	margin: 30px -2px 30px;
}

.feature-article .btnstage2 {
	text-align: center;
	margin: 30px -2px 30px;
}


@media screen and (min-width:981px) {
	
	.feature-section > section .btnstage.row {
		margin: 5px -2px 40px
	}
	.feature-section > section .btnstage2.row {
		margin: 5px -2px 40px
	}
	
	.feature-article .btnstage.row > div {
		padding-left: 2px;
		padding-right: 2px;
	}
	.feature-article .btnstage2.row > div {
		padding-left: 2px;
		padding-right: 2px;
	}
	
	*:first-child+html .feature-article .btn-feature,
	*:first-child+html .feature-article .btn-feature,
	*:first-child+html .feature-article .btn-white{
		display: inline;
		position: relative;
		zoom: 1;
	}
	*:first-child+html .feature-article .btn-feature2,
	*:first-child+html .feature-article .btn-feature2,
	*:first-child+html .feature-article .btn-white{
		display: inline;
		position: relative;
		zoom: 1;
	}
	
	.feature-article .btnstage.row > div > .btn-feature,
	.feature-article .btnstage.row > div > .btn-feature,
	.feature-article .btnstage.row > div > .btn-white {
		width: 100%;
		display: block;
	}
	.feature-article .btnstage2.row > div > .btn-feature,
	.feature-article .btnstage2.row > div > .btn-feature,
	.feature-article .btnstage2.row > div > .btn-white {
		width: 100%;
		display: block;
	}
	.feature-article .btnstage.row > div > .btn-feature2,
	.feature-article .btnstage.row > div > .btn-feature2,
	.feature-article .btnstage.row > div > .btn-white {
		width: 100%;
		display: block;
	}
	.feature-article .btnstage2.row > div > .btn-feature2,
	.feature-article .btnstage2.row > div > .btn-feature2,
	.feature-article .btnstage2.row > div > .btn-white {
		width: 100%;
		display: block;
	}
	
	*:first-child+html .feature-article .row > div > .btn-feature,
	*:first-child+html .feature-article .row > div > .btn-feature,
	*:first-child+html .feature-article .row > div > .btn-white {
		padding: 0;
	}
	
	*:first-child+html .feature-article .row > div > .btn-feature2,
	*:first-child+html .feature-article .row > div > .btn-feature2,
	*:first-child+html .feature-article .row > div > .btn-white {
		padding: 0;
	}
	
	section + div.final-section > .row:first-child {
		margin-top: 30px;
	}
	
}

@media screen and (max-width:981px) {
	.feature-article .btnstage {
		margin: 10px -2px 30px;
	}
	
	.feature-article .btnstage.row > div .btn-feature,
	.feature-article .btnstage.row > div .btn-feature,
	.feature-article .btnstage.row > div .btn-white {
		display: block;
		margin: 5px 0;
	}
	.feature-article .btnstage.row > div .btn-feature2,
	.feature-article .btnstage.row > div .btn-feature2,
	.feature-article .btnstage.row > div .btn-white {
		display: block;
		margin: 5px 0;
	}
	.feature-article .btnstage2 {
		margin: 10px -2px 30px;
	}
	
	.feature-article .btnstage2.row > div .btn-feature,
	.feature-article .btnstage2.row > div .btn-feature,
	.feature-article .btnstage2.row > div .btn-white {
		display: block;
		margin: 5px 0;
	}
	.feature-article .btnstage2.row > div .btn-feature2,
	.feature-article .btnstage2.row > div .btn-feature2,
	.feature-article .btnstage2.row > div .btn-white {
		display: block;
		margin: 5px 0;
	}
	
}

/* 縦方向中央ぞろえのパネル */
@media screen and (min-width:981px) {
	.feature-article .panel-outer{
		display: table;
		table-layout: fixed;
	}

	.feature-article .panel-inner,
	.feature-article .panel-outer > div{
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		float: none;
	}
	
	*:first-child+html .feature-article .panel-inner,
	*:first-child+html .feature-article .panel-outer > div { /* IE 7 */
		display: inline;
		zoom: 1;
	}
}

/* 並び方逆順 */
@media screen and (max-width:981px) {
	.feature-article .flip-reverse{
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		flex-direction: column;
	}

	.feature-article .flip-reverse > div{
		-webkit-flex: 1;
		-moz-box-flex: 1;
		flex: 1;
	}

	.feature-article .flip-reverse > div:nth-child(2){
		-webkit-order: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		order: 1;
	}
	
	.feature-article .flip-reverse > div:nth-child(1){
		-webkit-order: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		order: 2;
	}
}

/* 改行調整 */
@media screen and (max-width:981px) {
	.feature-article .sp-br{
		display: block;
	}
	
	.feature-article h1 span{
		display: block;
		line-height: 1.5;
	}
}

@media screen and (min-width:981px) {
	.feature-article .pc-br{
		display: block;
	}
}

@media screen and (min-width:981px) {
	.feature-article .max-br{
		display: block;
	}
}

/*
 * feature-visual
 *==================================================
 */

.feature-article .feature-visual .visual-desc {
	overflow: hidden;
	position: relative;
}

@media screen and (max-width:981px) {
	.feature-article .feature-visual {
		padding-left: 0;
		padding-right: 0;
	}
	
	.feature-article .feature-visual .visual-desc,
	.feature-article .feature-visual.container .container{
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.feature-article .visual-desc > .container {
		margin: 0 !important;
		padding: 0;
	}
}

/* オレンジが引かれたタイトル */
.feature-article .feature-visual .marker{
	background-color: #F69C00;
	color: #fff;
	display: inline-block;
	font-size: 1.1em;
	line-height: 16px;
	padding: 8px 1em;
	vertical-align: middle;
}

.feature-article .feature-visual .title .marker{
	font-size: 18px;
	line-height: 18px;
	padding: 8px 16px;
	margin: 0 0.7em;
	/*IE8 under*/padding: 8px 16px 6px\9;
}

*:first-child+html .feature-article .feature-visual .marker{
	display: inline;
	zoom: 1;
}

/* 大きなビジュアルを用いたタイトルセクション */
@media screen and (min-width:981px) {
	.feature-article .feature-visual.bigpicture .visual-desc{
		bottom: 0;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.feature-article .feature-visual.bigpicture .visual-desc .container {
		display: table;
		height: 100%;
		table-layout: fixed;
	}

	.feature-article .feature-visual.bigpicture .visual-desc .container .row {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
	}
	
	*:first-child+html .feature-article .feature-visual.bigpicture .visual-desc .container .row  { /* IE 7 */
		display: inline;
		zoom: 1;
	}
}

/* シンプルなタイトルセクション */
.feature-article .feature-visual.simple{
	font-size: 1.2em;
	text-align: center;
}

.feature-article .feature-visual.simple .btnstage{
	font-size: 13px;
}
.feature-article .feature-visual.simple .btnstage2{
	font-size: 13px;
}
.feature-article .feature-visual.simple h1.marker{
	position: absolute;
	left: 0;
	top: 0;
}

.feature-article .feature-visual.simple .title{
	margin: 30px auto;
	font-size: 2em;
	line-height: 1.4;
}

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

	.feature-article .feature-visual.simple .btnstage{
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	.feature-article .feature-visual.simple .btnstage2{
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	.feature-article .feature-visual.simple .title + p{
		margin-top: -25px;
	}

	.feature-article .feature-visual.simple .title .marker{
		position: relative;
		top: -4px;
		left: 0;
	}
	
}

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

	.feature-article .feature-visual.simple {
		text-align: left;
	}
	
	.feature-article .feature-visual.simple .title{
		margin: 10px auto 10px;
		font-size: 1.5em;
	}
	
	.feature-article .feature-visual .title .marker{
		margin: 8px 0;
	}
	
}


/* 2014/10/23 */
.fwd-link ,.prv-link {
	position: relative;
}

.fwd-link.topa ,.prv-link.topa {
	padding: 0;
	position: relative;
}

.fwd-link.btma ,.prv-link.btma {
	margin: 30px 0 0 0;
	padding: 0;
	position: relative;
}

.fwd-link a {
	padding-right: 20px;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	background: url(../img/next_btn_s.png) no-repeat right center #fff;
	position: absolute;
	top: 0;
	right: 0;
}

.prv-link a {
	padding-left: 20px;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	background: url(../img/back_btn_s.png) no-repeat left center #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.fwd-link a:hover ,.prv-link a:hover {
	color: #00a8b5;
}
/* 2014/10/31 */

.btnspace {
	margin-top: 0!important;
 	margin-bottom: 40px!important;
}

.btnspace-2 {
	margin-top: -20px!important;
	margin-bottom:40px!important;
}

.btndesign {
 	line-height: 20px!important;
	padding: 5px 0!important;
	padding: 5px 0 4px\9!important;
	background-color: #e0e0e0!important;
	color: #525252!important;
}

.btnfont {
	font-size: 90%;
}

.spaceclear {
	margin: 0!important;
}

.vol1 {
	width:60px;
	color:#f69c00;
	margin:0 0 10px 0!important;
	padding:6px 10px 4px;
	border:1px solid #f69c00;
	font-weight:normal;
	font-size:120%;	
}

.vol1sp {
	width: 60px;
	color: #f69c00;	
	margin: 45px 0 -10px 15px!important;
	padding: 6px 10px 4px;
	border: 1px solid #f69c00;
	font-weight: normal;
	font-size: 120%;
}
/* 2014/11/14 */
.visible-link {
	margin-top:10px!important;
	padding-bottom:30px!important;
	}
.hidden-link {
	margin-top:15px!important;
	padding-bottom:15px!important;
}



.rec-article{
  width:970px;
  margin:0 auto;
  font-size:90%;
}

.rec-article h2{
  margin:0 0 25px;
}

.item-wrapper{
  margin:-20px 0 35px -20px;
  font-family: 'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  overflow:hidden;
}

.item-wrapper img{
  max-width:100%;
}

.item-wrapper a{
  display:block;
  text-decoration:none;
  overflow:hidden;
  padding:9px;
}

.item-wrapper .item{
  margin:20px 0 0 20px;
  border:1px solid #ccc;
  box-sizing:border-box;
  float:left;
  width:310px;
  height:105px;
  overflow:hidden;
}

.item-wrapper .item .image{
  width:150px;
  float:left;
}


.item-wrapper .item .desc{
  padding:10px 0 0 10px;
  overflow:hidden;
}

.item-wrapper .item .desc .cat{
  margin:0 0 5px 0;
  padding-left:5px;
  border-left: 3px solid #f69c00;
  font-size: 80%;
  color: #666;
  line-height: 1.4;
  font-weight:bold;
}

.item-wrapper .item .desc .text{
  margin:0;
  font-size: 95.71429%;
  line-height:1.4;
  color: #333;
}

@media only screen and (max-width: 981px) {
  .rec-article {
    width:auto;
    margin:0 -15px 20px;
  }
  
  .rec-article h2{
  margin:0 0 25px 15px;
  font-size:26px;
}
  
  .item-wrapper{
  margin:0 0 30px;
}

.item-wrapper a{
	/* add 20150522 */
	padding:10px 7% 10px 15px;
}
  
   
  .item-wrapper .item{
    margin:0;
    border-style:solid;
    border-color:#eee;
    border-width:0 0 1px 0;
    float:none;
  width:auto;
  height:auto;
    background: url(/img/ico-arrow-sp.gif) 98% 50% no-repeat;
  background-size: 8px auto;
  }
  
    .item-wrapper .item:first-child{
      border-top:1px solid #eee;
      }
  

  
  
  .item-wrapper .item .image{
display:none;
}

   .item-wrapper .item .desc{
     padding: 10px 0 0 12px;
    width:66.6%;
  }
  
    .item-wrapper .item .desc .cat{
      font-weight:700;
      color: #333;
}
  
  .item-wrapper .item .desc .text{
  font-size: 105.5%;
}
}

.btn-myxperia{
  width:310px;
  margin:0 auto 20px;
}

.btn-myxperia a {
  color: #fff;
  background: url(/myxperia/articles/img/mark1.png) scroll no-repeat 95% center #959DA0;
  display: block;
  line-height: 50px;
  padding: 0 40px 0 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

@media only screen and (max-width: 981px) {
  .btn-myxperia{
  width:80%;
  margin:0 auto 20px;
}
}

/* 2015/03/25 */
@media screen and (max-width:981px) {
.mtop50 {margin-top:50px !important;}
}

/* 2015/03/26 PAGER */
.container ul.pageNav {margin:30px 0 20px;padding: 12px 0;text-align: center;}
.container ul.pageNav li {display: inline;margin: 0 1px;padding: 0;}
.container ul.pageNav li span,
.container ul.pageNav li a{display:inline-block;padding: 7px 13px;border: 1px solid #ccc;vertical-align: middle;text-decoration: none;}
.container ul.pageNav li span{background:#e0e0e0;}
.container ul.pageNav li a.Nxt {background: url(../img/next_btn_s.png) no-repeat right center #fff;padding-right:20px;border:none;}
.container ul.pageNav li a.Prv {background: url(../img/back_btn_s.png) no-repeat left center #fff;padding-left:20px;border:none;}
.container ul.pageNav li a:hover {color:#00a8b5;background-color:#f0f0f0;}
.container ul.pageNav li a.Prv:hover,
.container ul.pageNav li a.Nxt:hover{background-color:transparent;}
.container ul.pageNav li.None {padding:0 28px;}
@media screen and (max-width:981px) {
.container ul.pageNav {margin: 0 0 10px;}
}
/**/
.btn-myxperia.IndexBtn{
	margin-bottom:50px !important;
}
/**/
@media screen and (max-width:981px) {
.feature-article .btnstage2.SpSpace30{margin-top:30px !important;}
.feature-article .btnstage2.SpSpaceMns20{margin-top:-20px !important;}
.SpSpaceMns20{margin-top:-20px !important;}
.SpSpaceMns3{margin-top:-3px !important;}

}



/*20150522 */
@media only screen and (max-width:981px) {
.container {
    width: auto;
}
}



/*20151118*/
@media only screen and (max-width:981px) {

.item-wrapper .item .image{
  display:none;
}

  .item-wrapper .item .image{
    width:33.4%;
  }

.item-wrapper .item .image{
  display:block;
}

#footer #footer-global, #footer #footer-global a {
	color: #adadad !important;
}

}


#footer #footer-global, #footer #footer-global a {
	color: #adadad !important;
}

#footer #footer-site dt a:hover, #footer #footer-site dd a:hover {
	color: #00a8b5 !important;
	text-decoration: none !important;
}

/*20160420*/
@media only screen and (max-width:981px) {

#footer #footer-site .row > .expander a {
	color: #adadad !important;
}

#footer #footer-site .nav-bottom li a {
	color: #adadad !important;
}

}





/* header */
header .visual-desc p {
	margin: 20px auto 10px;
}
@media screen and (min-width:768px) {
header .visual-desc p {
	margin: 20px auto 30px;
}
}


/* ソーシャル */
.feature-visual .social {
  margin-top: 20px;
  text-align: right;
  letter-spacing: -0.5em;
  white-space: nowrap;
  position: absolute;
  top:100%;
  right: 1%;
  margin-top: -45px;
}
.feature-visual .social > div {
  display: inline-block;
  margin-left: 8px;
  letter-spacing: normal;
  vertical-align: middle;
}
.feature-visual .social .icon {
  width: 34px;
}
@media (max-width:768px){
.feature-visual .social {
  margin-right: 10px;
}
}