/* iPhone c */
/*html { font-size: 62.5%; }
body { font-size: 10px; font-size: 1.0rem; }*/
.atp h2 {
font-family:"qMmpS Pro W3", "Hiragino Kaku Gothic Pro", "CI", Meiryo, Osaka, "lr oSVbN", "MS PGothic", sans-serif;
}
.pc_menu_base .service.header_list {
background-color:#FFF;
background-image:url(/images/header_service_bg_active.png);
}
header .pc_menu_base .service.header_list .qtext {
color:#90BA22;
}
.pc_menu_base .service.header_list:hover .qtext {
color:#FFFFFF !important;
}
.main img {
display:inline-block;
}
.main h2 {
font-family:"qMmpS Pro W3", "Hiragino Kaku Gothic Pro", "CI", Meiryo, Osaka, "lr oSVbN", "MS PGothic", sans-serif;
}
.sec_topContent {
background: url(../images/bg_carrier.jpg) repeat-x center bottom;
margin-top:50px;
}
.sec_inner {
width:320px;
/*border-left:solid 1px red;
border-right:solid 1px red;*/
margin:0 auto;
position:relative;
}
.sec_topContent .sec_inner {
background:url(../images/img_service.png) no-repeat center bottom;
background-size:173px auto;
height:362px;
}
.sec_topContent h1 {
padding:40px 5px 0 0;
text-align:center;
}
.sec_topContent h1 img {
width:286px;
}
.sec_topContent .symbol {
display:none;
}
.sec_sampleMovie {
background:url(../images/bg_sampleMovie.jpg) no-repeat center top #000;
background-size:auto 395px;
height:395px;
position:relative;
overflow:hidden;
}
.sec_sampleMovie h2 {
margin-top:24px;
font-size:21px;
line-height:1.4;
font-weight:bold;
color:#FFF;
text-align:center;
}
.sec_sampleMovie .text {
margin-top:9px;
font-size:14px;
line-height:1.4;
font-weight:bold;
color:#FFF;
text-align:center;
}
.sec_sampleMovie .sampleMovie {
margin:50px auto 0;
background:url(../images/base_sampleMovie.png) no-repeat center top;
background-size:auto 134px;
height:134px;
text-align:center;
position:relative;
}
.sec_sampleMovie .sampleMovie iframe {
width:198px;
height:113px;
position:absolute;
left:62px;
top:10px;
}
.sec_sampleMovie .film {
background:url(../images/img_film.jpg) repeat-x center bottom;
background-size:auto 79px;
width:100%;
height:79px;
position:absolute;
bottom:0;
text-align:center;
}
.sec_sampleMovie .film img {
height:79px;
position:absolute;
left:50%;
bottom:0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.sec_multidevice {
background:url(../images/bg_multidevice.jpg) repeat-x center top;
background-size:auto 290px;
height:290px;
overflow:hidden;
}
.sec_multidevice .sec_inner {
background:url(../images/base_multidevice.png) no-repeat center 50%;
background-size:241px auto;
height:100%;
}
.sec_multidevice .image {
padding:45px 0 0 0;
text-align:center;
}
.sec_multidevice .image img {
width:312px;
}
.deviceList {
position:relative;
height:100%;
width:100%;
overflow:hidden;
}
.deviceList li {
display:none;
position:absolute;
}
.deviceList li img {
height:86px;
-webkit-animation: scaleout 0.5s ease-in-out;
animation: scaleout 0.5s ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
80% {
-webkit-transform: scale(1.1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.0);
opacity: 1;
}
}
@keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 80% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 1;
} 100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 1;
}
}
.deviceList li:nth-child(1) {
left:111px;
top:45px;
}
.deviceList li:nth-child(2) {
left:228px;
top:72px;
}
.deviceList li:nth-child(3) {
left:163px;
top:156px;
}
.deviceList li:nth-child(4) {
left:53px;
top:155px;
}
.deviceList li:nth-child(5) {
left:0px;
top:71px;
}
.sec_system {
background:url(../images/bg_system_sp.jpg) repeat-x center top;
height:942px;
overflow:hidden;
}
.sec_system h2 {
margin:47px auto 0;
width:264px;
font-size:20px;
line-height:1.4;
font-weight:bold;
color:#E14213;
text-align:center;
}
.sec_system .image {
margin:16px 0 0 1px;
text-align:center;
}
.sec_carrier {
background: url(../images/bg_carrier.jpg) repeat center top;
height:627px;
background-size:auto 627px;
overflow:hidden;
}
.sec_carrier li {
position:relative;
}
.sec_carrier li dl {
margin-left:20px;
padding-left:89px;
height:84px;
}
.sec_carrier .smartpass dl {
margin-top:33px;
background:url(../images/icon_smartpass.png) left top no-repeat;
background-size:82px auto;
}
.sec_carrier .smartTV dl {
margin-top:35px;
background:url(../images/icon_smartTV.png) left top no-repeat;
background-size:80px auto;
}
.sec_carrier dt {
font-size:20px;
line-height:1.2;
font-weight:bold;
color:#FFF;
text-shadow:0 1px 1px rgba(0,0,0,0.45);
}
.sec_carrier .smartpass dt {
padding-top:18px;
}
.sec_carrier .smartTV dt {
padding-top:3px;
}
.sec_carrier dd {
margin-top:5px;
width:194px;
font-size:14px;
line-height:1.2;
font-weight:bold;
color:#FFF;
text-shadow:0 1px 1px rgba(0,0,0,0.45);
}
.sec_carrier .smartTV dd {
width:180px;
}
.sec_carrier li .image {
text-align:center;
}
.sec_carrier .smartpass .image {
margin-top:22px;
}
.sec_carrier .smartpass .image img {
text-align:center;
width:218px;
}
.sec_carrier .smartTV .image {
margin-top:17px;
}
.sec_carrier .smartTV .image img {
width:218px;
}
.sec_marcket {
background:#FFF;
overflow:hidden;
}
.sec_marcket .table_container {
margin:0 20px;
position:relative;
}
.sec_marcket .table_container h2 {
margin:33px 0 0;
font-size:24px;
color:#FF7200;
font-weight:bold;
text-align:center;
}
.sec_marcket .table_container table {
margin:11px 0 0;
width:100%;
border-collapse:separate;
border:solid 1px #CCC;
border-radius:6px;
}
.sec_marcket .table_container th,
.sec_marcket .table_container td {
display:inline-block;
width:100%;
text-align:left;
padding:5px 0;
font-size:14px;
line-height:1.3;
}
.sec_marcket .table_container th {
border-top: solid 1px #CCC;
}
.sec_marcket .table_container td {
border-top: dotted 1px #CCC;
}
.sec_marcket .table_container tr:first-child th {
border-top:none;
}
.sec_marcket .table_container th p,
.sec_marcket .table_container td p {
padding:0 11px;
}
.sec_marcket .icon {
display:none;
}
.btn_viewsite {
margin:20px auto 40px;
text-align:center;
}
@media screen and (min-width:600px) {
/*@for wiๆฒฎ@*/
.sec_sampleMovie {
background-size: 100%;
}
}
@media screen and (min-width:480px) {
/*@for iPhone Landscape@(iPhone ก)@*/
.sec_topContent {
margin-top:100px;
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/*@for iPad @*/
.sec_inner {
width:768px;
/*border-left:solid 1px black;
border-right:solid 1px black;*/
}
.sec_topContent .sec_inner {
background-size:298px auto;
height:592px;
}
.sec_topContent h1 {
padding:65px 2px 0 0;
}
.sec_topContent h1 img {
width:508px;
}
.sec_sampleMovie {
background-size:auto 728px;
height:728px;
}
.sec_sampleMovie .sampleMovie {
margin-top:52px;
background-size:auto 318px;
height:318px;
}
.sec_sampleMovie .sampleMovie iframe {
width:473px;
height:266px;
position:absolute;
left:150px;
top:24px;
}
.sec_sampleMovie h2 {
margin:36px 0 0 6px;
font-size:38px;
}
.sec_sampleMovie .text {
margin-top:9px;
font-size:28px;
}
.sec_sampleMovie .film {
background-size:auto 135px;
height:135px;
}
.sec_sampleMovie .film img {
height:135px;
}
.sec_multidevice {
background:url(../images/bg_multidevice.jpg) repeat-x center top;
background-size:auto 494px;
height:494px;
}
.sec_multidevice .sec_inner {
background-size:512px auto;
}
.sec_multidevice .image {
padding:35px 2px 0 0;
}
.sec_multidevice .image img {
width:669px;
}
.deviceList li img {
height:181px;
}
.deviceList li:nth-child(1) {
left:280px;
top:32px;
}
.deviceList li:nth-child(2) {
left:532px;
top:88px;
}
.deviceList li:nth-child(3) {
left:394px;
top:270px;
}
.deviceList li:nth-child(4) {
left:155px;
top:271px;
}
.deviceList li:nth-child(5) {
left:43px;
top:89px;
}
.sec_system {
background-size:auto 476px;
height:476px;
}
.sec_system h2 {
margin-top:44px;
width:650px;
font-size:38px;
}
.sec_system .image {
margin:36px 0 0 1px;
}
.sec_system .image img {
width:671px;
}
.sec_carrier {
height:436px;
}
.sec_carrier li dl {
padding:8px 0 0 138px;
height:124px;
margin-left:50px;
}
.sec_carrier .smartpass dl {
margin-top:55px;
background-size:122px auto;
}
.sec_carrier .smartpass .image {
margin:0;
position:absolute;
right:56px;
top:-9px;
}
.sec_carrier .smartpass .image img {
width:207px;
}
.sec_carrier .smartTV dl {
margin-top:54px;
background-position:6px 50%;
background-size:109px auto;
}
.sec_carrier .smartTV .image {
position:absolute;
right:43px;
top:26px;
margin:0;
}
.sec_carrier .smartTV .image img {
width:226px;
}
.sec_carrier dt {
font-size:30px;
}
.sec_carrier dd {
margin-top:6px;
width:308px;
font-size:22px;
}
.sec_carrier .smartTV dd {
width:283px;
}
.sec_marcket .table_container {
margin:0 49px;
}
.sec_marcket .table_container h2 {
margin-left:-11px;
font-size:38px;
}
.sec_marcket .table_container table {
margin-top:25px;
}
.sec_marcket .table_container th,
.sec_marcket .table_container td {
border-top: solid 1px #CCC;
display:table-cell;
font-size:23px;
padding:6px 0 5px;
}
.sec_marcket .table_container tr:first-child th,
.sec_marcket .table_container tr:first-child td {
border-top:none;
}
.sec_marcket .table_container th {
width:194px;
text-align:right;
vertical-align:top;
}
.sec_marcket .table_container td {
width:auto;
border-left: solid 1px #CCC;
}
.sec_marcket .table_container th p{
padding-right:17px;
}
.sec_marcket .table_container td p {
padding-left:15px;
}
.sec_marcket .table_container td .os {
width:6em;
}
.btn_viewsite {
margin-top:51px;
margin-bottom:55px;
}
}
@media screen and (min-width:1024px) {
/*@for PC@*/
.main img {
width:auto!important;
}
.sec_inner {
min-width:1024px;
/*border-left:solid 1px blue;
border-right:solid 1px blue;*/
}
.sec_topContent .sec_inner {
background-position:128px bottom;
background-size:auto;
height:480px;
padding:0;
}
.sec_topContent h1 {
position:absolute;
right:16px;
top:92px;
padding:0;
}
.sec_topContent .symbol {
display:block;
position:absolute;
right:64px;
bottom:-41px;
z-index:2;
}
.sec_sampleMovie {
background-size:auto 793px;
height:793px;
}
.sec_sampleMovie .sampleMovie {
margin-top:74px;
background-size:auto;
width:700px;
height:333px;
}
.sec_sampleMovie .sampleMovie iframe {
width:495px;
height:278px;
position:absolute;
left:105px;
top:26px;
}
.sec_sampleMovie h2 {
margin:23px 0 0 10px;
font-size:40px;
line-height:1.4;
}
.sec_sampleMovie .text {
margin:12px 0 0 10px;
font-size:28px;
line-height:1.4;
}
.sec_sampleMovie .film {
background-size:auto 177px;
height:177px;
}
.sec_sampleMovie .film img {
height:177px;
}
.sec_multidevice {
height:742px;
background-size:auto 741px;
}
.sec_multidevice .sec_inner {
background-size:auto;
}
.sec_multidevice .image {
padding-top:48px;
}
.deviceList li img {
height:100%;
}
.deviceList li:nth-child(1) {
left:357px;
top:47px;
}
.deviceList li:nth-child(2) {
left:735px;
top:132px;
}
.deviceList li:nth-child(3) {
left:528px;
top:405px;
}
.deviceList li:nth-child(4) {
left:169px;
top:406px;
}
.deviceList li:nth-child(5) {
left:0px;
top:133px;
}
.sec_system {
background:url(../images/bg_system.jpg) repeat-x center top;
height:581px;
}
.sec_system h2 {
margin-top:49px;
width:100%;
font-size:40px;
line-height:1.4;
color:#DD4400;
}
.sec_system .image {
margin:28px 0 0 6px;
}
.sec_carrier {
height:600px;
background-size:auto 600px;
}
.sec_carrier li dl {
padding-left:227px;
height:202px;
}
.sec_carrier .smartpass dl {
margin:64px 0 0 0;
background-position: 9px 50%;
background-size: auto;
}
.sec_carrier .smartTV dl {
margin:62px 0 0 0;
background-position: 22px 50%;
background-size: auto;
}
.sec_carrier dt {
font-size:40px;
line-height:1.2;
}
.sec_carrier .smartpass dt {
padding-top:49px;
}
.sec_carrier .smartTV dt {
padding-top:34px;
}
.sec_carrier dd {
margin:15px 0 0 1px;
width:425px!important;
font-size:27px;
}
.sec_carrier .smartpass .image {
margin:0;
position:absolute;
right:24px;
top:-21px;
}
.sec_carrier .smartTV .image {
position:absolute;
right:10px;
top:30px;
margin:0;
}
.sec_marcket .table_container {
margin:36px auto 0;
width:1024px;
}
.sec_marcket .table_container h2 {
margin:43px 0 0 10px;
font-size:40px;
}
.sec_marcket .table_container table {
margin:22px 0 0 86px;
width:739px;
border-radius:16px;
}
.sec_marcket .icon {
display:block;
position:absolute;
right:60px;
top:50px;
}
.sec_marcket .table_container th,
.sec_marcket .table_container td {
display:table-cell;
border-top:solid 1px #CCC;
padding:7px 21px 7px 0;
font-size:25px;
line-height:1.2;
vertical-align:top;
text-align:right;
}
.sec_marcket .table_container th {
width:193px;
}
.sec_marcket .table_container td {
width:auto;
border-left:solid 1px #CCC;
text-align:left;
padding-left:16px;
padding-right:0;
}
.sec_marcket .table_container tr:first-child td {
border-top:none;
}
.sec_marcket .table_container th p,
.sec_marcket .table_container td p {
padding:0;
}
.sec_marcket .table_container td .os {
width:6em;
}
.btn_viewsite {
margin-top:65px;
margin-bottom:57px;
}
}
@media screen and (min-width:1280px) {
.sec_sampleMovie {
background-size:100%;
}
}