@charset "utf-8";

* {
margin: 0;
border: 0;
padding: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

ul,
ol {
list-style: none;
}

img {
vertical-align: bottom;
}

body,
html {
background-color: #6e797f;
color: #fff;
}

body {
line-height: 1.5;
font-size: 62.5%;
font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#header,
.content,
#footer {
width: 100%;
min-width: 1080px;
}
#header > .inner,
.content > .inner,
#footer > .inner {
width: 1080px;
margin: 0 auto;
padding: 0 20px;
}

#header {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
box-shadow: 0 0 10px rgba(0,0,0,.5);
background-color: #eee;
}
#header .inner {
position: relative;
height: 100px;
}
#header .logo-product,
#header .logo-site,
#header .nav,
#header .share {
position: absolute;
}
#header .logo-product {
top: 23px;
left: 30px;
}
#header .logo-site {
top: 19px;
right: 30px;
}
#header .logo-product a,
#header .logo-site a {
display: block;
}
#header .nav {
top: 63px;
left: 30px;
}
#header .share {
top: 62px;
right: 30px;
}
.static #header .share {
display: none;
}
#header .nav ul,
#header .share ul {
display: table;
}
#header .nav ul li,
#header .share ul li {
display: table-cell;
}
#header .nav ul li {
padding-right: 36px;
}
#header .share ul li {
padding-left: 15px;
}
#header .nav ul li a {
color: #000;
font-size: 140%;
font-weight: bold;
text-decoration: none;
opacity: 1;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#header .nav ul li a.current,
.notIOS #header .nav ul li a:hover,
.notIOS #header .nav ul li a:active,
.notIOS #header .nav ul li a:focus {
opacity: .5;
}

.content {
background-color: #fff;
color: #000;
}
.content .notice {
overflow: hidden;
}
.content .notice > span {
display: block;
overflow: hidden;
}
.content .notice > .mark {
float: left;
margin-right: .5em;
}

#top {
position: relative;
margin-top: 100px;
overflow: hidden;
padding-top: 600px;
}
#top > .mv:before,
#top > .mv:after,
#top > .mv p:before,
#top > .mv p:after {
content: "";
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 300px;
}
#top > .mv:before {
top: 0;
left: -50%;
background-color: #ed9f00;
}
#top > .mv:after {
top: 0;
right: -50%;
background-color: #7a6c9f;
}
#top > .mv p:before {
top: 300px;
left: -50%;
background-color: #00aad2;
}
#top > .mv p:after {
top: 300px;
right: -50%;
background-color: #009e81;
}
#top > .mv p span {
position: absolute;
top: 0;
z-index: 2;
display: table-cell;
width: 980px;
height: 600px;
padding: 115px;
background: transparent url(/sp/portabook/xmc10/images/bg-top-01.png) no-repeat scroll center top;
text-align: center;
}
#top > .mv strong {
position: absolute;
top: 530px;
left: 50%;
z-index: 2;
display: block;
width: 360px;
margin-left: -210px;
padding: .25em;
background-color: #fff;
color: #f00;
font-size: 160%;
text-align: center;
}
#top > .product {
position: relative;
background-color: #6e797f;
text-align: center;
}
#top > .product:before,
#top > .product:after {
content: "";
position: absolute;
top: 0;
display: block;
width: 250%;
height: 100%;
background-color: #6e797f;
}
#top > .product:before {
left : -250%;
}
#top > .product:after {
right: -250%;
}
#top > .product .btn {
position: absolute;
top: 20px;
right: 30px;
}
#top > .product .btn li {
margin-bottom: 10px;
}
#top > .product .btn a {
display: block;
border-radius: 60px;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
.notIOS #top > .product .btn a:hover,
.notIOS #top > .product .btn a:active,
.notIOS #top > .product .btn a:focus {
opacity: .5;
}
#top .lyt-img-01 {
overflow: hidden;
margin: 40px 0;
}
#top .lyt-img-01 .txt {
float: left;
width: 610px;
}
#top .lyt-img-01 .txt p{
line-height: 2;
margin-top: 1.35em;
font-size: 160%;
}
#top .lyt-img-01 .txt p:first-child{
margin-top: 0;
}
#top .lyt-img-01 .txt p.lead{
line-height: 1.35;
font-size: 360%;
}
#top .lyt-img-01 .img {
float: right;
width: 330px;
}
#top .movie > a {
display: table;
table-layout: fixed;
direction: rtl;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
#top .movie > a:hover,
#top .movie > a:active,
#top .movie > a:focus {
opacity: .5;
}
#top .movie > a > span {
display: table-cell;
direction: ltr;
vertical-align: middle;
}
#top .movie > a > .title span {
display: inline-block;
border-bottom: 2px solid #000;
font-size: 125%;
font-weight: bold;
color: #000;
}
#top .movie > a > .thumb {
padding-right: 30px;
}

#slide-arc-keyboard {
background-color: #fff;
overflow: hidden;
}
#slide-arc-keyboard .hdg {
position: relative;
background-color: #eb614b;
color: #fff;
font-size: 240%;
font-weight: bold;
text-align: center;
}
#slide-arc-keyboard .hdg:before,
#slide-arc-keyboard .hdg:after {
content: "";
position: absolute;
top: 0;
display: block;
width: 250%;
height: 100%;
background-color: #eb614b;
}
#slide-arc-keyboard .hdg:before {
left: -250%;
}
#slide-arc-keyboard .hdg:after {
right: -250%;
}
#slide-arc-keyboard .lyt-img-01 {
overflow: hidden;
padding-bottom: 30px;
text-align: center;
}
#slide-arc-keyboard .lyt-img-01 .col1 {
float: right;
width: 540px;
}
#slide-arc-keyboard .lyt-img-01 .col2 {
float: left;
width: 440px;
}
#slide-arc-keyboard .lyt-img-01 .col2 * {
vertical-align: top;
}
#slide-arc-keyboard .img {
height: 440px;
}
#slide-arc-keyboard .logo,
#slide-arc-keyboard .lead1,
#slide-arc-keyboard .lead2 {
margin-top: 28px;
}
#slide-arc-keyboard .lead1 {
font-size: 360%;
font-weight: bold;
}
#slide-arc-keyboard .lead2 {
line-height: 2;
font-size: 160%;
}
#slide-arc-keyboard #video {
width: 440px;
height: 440px;
}
#slide-arc-keyboard .notinuse {
margin: 5em 0;
font-size: 140%;
}
#slide-arc-keyboard .btn,
#slide-arc-keyboard .notice {
display: inline-block;
line-height: 30px;
}
#slide-arc-keyboard .btn {
margin-right: 15px;
}
#slide-arc-keyboard .btn button {
background: none;
cursor: pointer;
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 250ms;
transition: 250ms;
}
.notIOS #slide-arc-keyboard .btn button:hover,
.notIOS #slide-arc-keyboard .btn button:active,
.notIOS #slide-arc-keyboard .btn button:focus {
opacity: .5;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#slide-arc-keyboard .notice {
font-size: 120%;
}
#slide-arc-keyboard .notice > span {
display: inline-block;
}

#feature {
overflow: hidden;
padding-bottom: 50px;
}
#feature .hdg {
position: relative;
line-height: 1.35;
margin: 30px 0 20px 0;
padding: 1em 0;
background-color: #6e797f;
color: #fff;
font-size: 240%;
font-weight: bold;
}
#feature h3.hdg:first-of-type {
margin-top: 0;
}
#feature .hdg:before,
#feature .hdg:after {
content: "";
position: absolute;
top: 0;
display: block;
width: 250%;
height: 100%;
background-color: #6e797f;
}
#feature .hdg:before {
left: -250%;
}
#feature .hdg:after {
right: -250%;
}
#feature .hdg.keyboard,
#feature .hdg.portability,
#feature .hdg.interface {
line-height: 1.1;
margin: 0;
padding: .7em 0;
font-size: 400%;
text-align: center;
}
#feature .hdg.keyboard,
#feature .hdg.keyboard:before,
#feature .hdg.keyboard:after {
background-color: #ed9f00;
}
#feature .hdg.portability,
#feature .hdg.portability:before,
#feature .hdg.portability:after {
background-color: #00aad2;
}
#feature .hdg.interface,
#feature .hdg.interface:before,
#feature .hdg.interface:after {
background-color: #009e81;
}
#feature .lyt-img-01,
#feature .lyt-img-02,
#feature .lyt-img-03 {
overflow: hidden;
}
#feature .lyt-img-02,
#feature .lyt-img-03 {
margin-top: 1.5em;
text-align: center;
}
#feature .lyt-img-03 {
margin: 2em 120px 0 120px;
}
#feature .lyt-img-01.left {
margin-left: -80px;
}
#feature .lyt-img-01.right {
margin-right: -80px;
}
#feature .lyt-img-01.left > .col2,
#feature .lyt-img-01.right > .col1,
#feature .lyt-img-02 > .col1,
#feature .lyt-img-03 > .col1 {
float: left;
}
#feature .lyt-img-01.left > .col1,
#feature .lyt-img-01.right > .col2,
#feature .lyt-img-02 > .col2,
#feature .lyt-img-03 > .col2 {
float: right;
}
#feature .lyt-img-03 > .col1,
#feature .lyt-img-03 > .col2 {
width: 350px;
}
#feature .lyt-img-01.left > .col1,
#feature .lyt-img-01.right > .col1 {
width: 450px;
padding-bottom: 10px;
}
#feature .lyt-img-01.left > .col2,
#feature .lyt-img-01.right > .col2 {
width: 600px;
}
#feature .lead {
line-height: 1.25;
margin-bottom: .5em;
border-bottom: 3px solid #6e797f;
padding: 2em 0 .25em 0;
font-size: 240%;
font-weight: bold;
}
#feature .lead.keyboard {
border-color: #ed9f00;
}
#feature .lead.portability {
border-color: #00aad2;
}
#feature .lead.interface {
border-color: #009e81;
}
#feature .txt {
line-height: 2;
font-size: 160%;
}
#feature .notice {
margin-top: 1em;
font-size: 120%;
}
#feature .link {
margin-top: 1em;
font-size: 140%;
text-align: center;
}
#feature .link a {
position: relative;
display: inline-block;
padding-left: 15px;
color: #000;
}
#feature .link a:before {
content: "";
position: absolute;
top: .5em;
left: 0;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 4.5px 0 4.5px;
border-color: #000 transparent transparent transparent;
}
#feature .img-slide {
position: relative;
width: 600px;
overflow: hidden;
}
#feature .img-slide > ul {
display: table;
table-layout: fixed;
width: 100%;
}
#feature .img-slide > ul > li {
display: none;
}
#feature .img-slide > ul > li:first-child {
display: table-cell;
}
#feature .img-slide > .next,
#feature .img-slide > .prev {
position: absolute;
bottom: 15px;
display: block;
width: 40px;
height: 40px;
border-radius: 20px;
background: transparent url(/sp/portabook/xmc10/images/btn-slide-01.png) no-repeat scroll 0 0;
cursor: pointer;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
#feature .img-slide > .next {
background-position: right top;
}
#feature .img-slide > .prev {
background-position: left top;
}
#feature .right .img-slide > .next {
left: 70px;
}
#feature .right .img-slide > .prev {
left: 20px;
}
#feature .left .img-slide > .next {
right: 20px;
}
#feature .left .img-slide > .prev {
right: 70px;
}
.notIOS #feature .img-slide > .next:hover,
.notIOS #feature .img-slide > .next:active,
.notIOS #feature .img-slide > .next:focus,
.notIOS #feature .img-slide > .prev:hover,
.notIOS #feature .img-slide > .prev:active,
.notIOS #feature .img-slide > .prev:focus {
opacity: .5;
}
#feature .img-slide > .next span,
#feature .img-slide > .prev span {
position: absolute;
top: -999em;
left: -999em;
}
#feature .box-office {
margin: 30px -10px 0 -10px;
border: 2px solid #e0e0e0;
}
#feature .box-office > dt {
position: relative;
padding: 1em 38px;
background-color: #e0e0e0;
font-size: 220%;
font-weight: bold;
}
#feature .box-office > dt > button {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
background-color: transparent;
cursor: pointer;
}
#feature .box-office > dt > button:before,
#feature .box-office > dt > button:after {
content: "";
position: absolute;
top: 50%;
right: 38px;
display: block;
width: 28px;
height: 0;
margin-top: -3px;
border-top: 4px solid #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 200ms;
transition: 200ms;
}
#feature .box-office > dt > button:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#feature .box-office.closed > dt > button:before,
#feature .box-office.closed > dt > button:after {
width: 24px;
right: 47px;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#feature .box-office.closed > dt > button:after {
right: 32px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
#feature .box-office > dt > button > span {
position: absolute;
top: -999em;
left: -999em;
}
#feature .box-office > dd {
background-color: #fff;
}
#feature .box-office .lyt-office-01 {
display: table;
margin: 2.5em 38px;
}
#feature .box-office .lyt-office-01 > p {
display: table-cell;
width: 50%;
padding-top: 5px;
vertical-align: top;
}
#feature .box-office .lyt-office-01 > p.txt {
padding-top: 0;
padding-right: 40px;
}
#feature .box-office .lyt-office-02 {
padding: 3.5em 38px;
background-color: #ec6200;
color: #fff;
}
#feature .box-office .lyt-office-02 dt {
font-weight: bold;
}
#feature .box-office .lyt-office-02 > dl > dt {
font-size: 200%;
}
#feature .box-office .lyt-office-02 > dl > dd > div {
display: table;
margin: 3.5em 0;
}
#feature .box-office .lyt-office-02 > dl > dd > div > div,
#feature .box-office .lyt-office-02 > dl > dd > div > dl {
display: table-cell;
vertical-align: top;
}
#feature .box-office .lyt-office-02 > dl > dd > div > div {
width: 260px;
padding-top: 5px;
padding-right: 40px;
text-align: center;
}
#feature .box-office .lyt-office-02 > dl > dd > div > dl > dt {
margin-bottom: .5em;
font-size: 180%;
}
#feature .box-office .lyt-office-02 > dl > dd > div > dl > dd {
line-height: 2;
font-size: 160%;
}
#feature .box-office .lyt-office-02 .notice a {
color: #fff;
}
#feature .box-office .lyt-office-03 {
overflow: hidden;
padding: 3.5em 38px;
background-color: #f39800;
color: #fff;
}
#feature .box-office .lyt-office-03 > div {
float: left;
width: 260px;
padding: 5px 40px 5px 0;
text-align: center;
}
#feature .box-office .lyt-office-03 > dl {
overflow: hidden;
}
#feature .box-office .lyt-office-03 > dl > dt {
margin-bottom: .5em;
font-size: 180%;
font-weight: bold;
}
#feature .box-office .lyt-office-03 > dl > dd {
line-height: 2;
font-size: 160%;
}
#feature .box-office .lyt-office-04 {
padding: 30px 38px;
background-color: #fff;
}
#feature .box-office .lyt-office-04 p {
text-align: center;
}
#feature .box-office .lyt-office-04 p a {
position: relative;
display: inline-block;
margin: 0 auto;
border-radius: 10px;
padding: 1em 60px 1em 40px;
background-color: #e0e0e0;
color: #000;
font-size: 200%;
font-weight: bold;
text-decoration: none;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#feature .box-office .lyt-office-04 p a:after {
content: "";
position: absolute;
top: 50%;
right: 24px;
display: block;
width: 0;
height: 0;
margin-top: -6px;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #000;
}
#feature .box-office .lyt-office-04 p a:hover,
#feature .box-office .lyt-office-04 p a:active,
#feature .box-office .lyt-office-04 p a:focus {
opacity: .5;
}

#view-size {
overflow: hidden;
background-color: #ddd;
background: -webkit-radial-gradient(center, ellipse cover, #fff 0%, #ccc 100%);
background: radial-gradient(ellipse at center, #fff 0%, #ccc 100%);
}
#view-size > .inner {
padding: 15px 0 25px 0;
}
#view-size .hdg {
margin: .75em 0;
font-size: 300%;
text-align: center;
}
#view-size .view-slide {
position: relative;
width: 980px;
margin: 0 auto;
}
#view-size .view-slide.carouselized {
padding-bottom: 120px;
}
#view-size .view-slide.carouselized > .view-list {
position: absolute;
left: 22px;
right: 22px;
bottom: 0;
margin: 0;
}
#view-size .view-slide > .view-list > ul {
display: table;
table-layout: fixed;
width: 936px;
margin: 0 auto;
}
#view-size .view-slide > .view-list > ul > li {
display: table-cell;
}
#view-size .view-slide > .view-list > ul > li > a {
position: relative;
display: block;
margin: 0 5px;
cursor: pointer;
}
#view-size .view-slide > .view-list > ul > li > a:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 24px;
display: block;
border-radius: 4px;
background-color: #fff;
-webkit-transition: background-color 250ms;
transition: background-color 250ms;
}
#view-size .view-slide > .view-list > ul > li > a.current:before,
#view-size .view-slide > .view-list > ul > li > a:hover:before,
#view-size .view-slide > .view-list > ul > li > a:active:before,
#view-size .view-slide > .view-list > ul > li > a:focus:before {
content: "" "";
background-color: #6e797f;
}
#view-size .view-slide > .view-list > ul > li > a > img {
position: relative;
z-index: 3;
}
#view-size .view-slide > .view-list > .notice {
margin: 15px 5px 0 5px;
font-size: 120%;
}
#view-size .view-slide > .view-img {
width: 860px;
margin: 0 auto;
text-align: center;
}
#view-size .view-slide.carouselized > .view-img > ul {
display: table;
table-layout: fixed;
}
#view-size .view-slide.carouselized > .view-img > ul > li {
display: table-cell;
padding: 0 40px;
opacity: .5;
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
}
#view-size .view-slide.carouselized > .view-img > ul > li.current {
opacity: 1;
}
#view-size .view-slide > .next,
#view-size .view-slide > .prev {
display: none;
}
#view-size .view-slide.carouselized > .next,
#view-size .view-slide.carouselized > .prev {
position: absolute;
top: 225px;
display: block;
width: 34px;
height: 48px;
background-color: transparent;
background-image: url(/sp/portabook/xmc10/images/btn-view-slide-01.png);
cursor: pointer;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
#view-size .view-slide.carouselized > .next {
right: 40px;
background-position: right top;
}
#view-size .view-slide.carouselized > .prev {
left: 40px;
background-position: left top;
}
.notIOS #view-size .view-slide.carouselized > .next:hover,
.notIOS #view-size .view-slide.carouselized > .next:active,
.notIOS #view-size .view-slide.carouselized > .next:focus,
.notIOS #view-size .view-slide.carouselized > .prev:hover,
.notIOS #view-size .view-slide.carouselized > .prev:active,
.notIOS #view-size .view-slide.carouselized > .prev:focus {
opacity: .5;
}
#view-size .view-slide.carouselized > .next > span,
#view-size .view-slide.carouselized > .prev > span {
position: absolute;
top: -999em;
left: -999em;
}

#spec {
background-color: #fff;
}
#spec > .inner {
padding: 15px 30px 20px 30px;
}
#spec .hdg {
margin: .75em 0;
font-size: 300%;
text-align: center;
}
#spec .tbl {
width: 100%;
margin: 1.5em 0;
border-bottom: 1px solid #ccc;
border-collapse: collapse;
}
#spec .tbl th,
#spec .tbl td {
border-top: 1px solid #ccc;
padding: .6em 1.2em;
background-color: #fff;
font-size: 140%;
font-weight: normal;
text-align: left;
vertical-align: top;
}
#spec .tbl th {
width: 150px;
background-color: #eee;
}
#spec .tbl th + th {
width: 200px;
}
#spec .tbl .line {
border-left: 1px solid #ccc;
}
#spec .notice {
margin: .75em 0;
font-size: 120%;
}
#spec .option {
margin: 4.5em 0;
border-top: 3px solid #eee;
border-bottom: 3px solid #eee;
padding: 4.5em 0;
}
#spec .option > div {
display: table;
table-layout: fixed;
width: 100%;
}
#spec .option > div > .cell {
display: table-cell;
vertical-align: middle;
}
#spec .option > div > h3.cell {
width: 230px;
}
#spec .option > div > h3.cell span {
display: inline-block;
border-bottom: 2px solid #000;
font-size: 240%;
}
#spec .option > div > p.cell {
width: 330px;
}
#spec .option > div > dl.cell {
width: 420px;
}
#spec .option > div > dl.cell > dt {
margin-bottom: .5em;
font-size: 240%;
font-weight: bold;
}
#spec .option > div > dl.cell > dd .price {
margin-bottom: .5em;
font-size: 140%;
font-weight: bold;
}
#spec .option > div > dl.cell > dd .price span {
font-size: 114.28571%;
}
#spec .option > div > dl.cell > dd .price span em {
font-size: 187.5%;
font-style: normal;
}
#spec .option > div > dl.cell > dd .spec {
line-height: 1.75;
margin-bottom: .5em;
font-size: 120%;
}
#spec .option > div > dl.cell > dd .notice {
font-size: 120%;
}
#spec .link {
margin: 0 10px;
}
#spec .link > ul {
overflow: hidden;
}
#spec .link > ul > li {
float: left;
width: 250px;
padding: 0 10px;
}
#spec .link > ul > li > a,
#spec .link > ul > li > span {
display: table-cell;
width: 230px;
height: 100px;
padding: 10px;
font-size: 180%;
text-align: center;
vertical-align: middle;
}
#spec .link > ul > li > a {
background-color: #6e797f;
color: #fff;
text-decoration: none;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
.notIOS #spec .link > ul > li > a:hover,
.notIOS #spec .link > ul > li > a:active,
.notIOS #spec .link > ul > li > a:focus {
opacity: .5;
}
#spec .link > ul > li > span {
background-color: #eee;
color: #b2b2b2;
}
#spec .link > ul > li > a span,
#spec .link > ul > li > span span {
font-size: 77.77778%;
}
#spec .appendix {
position: relative;
margin: 1em 0;
padding-left: 1.5em;
font-size: 120%;
}
#spec .appendix:before {
content: "";
position: absolute;
top: .5em;
left: .25em;
display: block;
width: 0;
height: 0;
border: 3.5px solid #6e797f;
border-radius: 3.5px;
}

#contact{
padding: 5px 0 50px 0;
}
#contact .contact {
overflow: hidden;
margin: 0 30px;
border: 1px solid #6e797f;
}
#contact .contact > .hdg,
#contact .contact > .tel,
#contact .contact > .mail {
float: left;
}
#contact .contact > .mail {
width: 210px;
margin-top: 15px;
padding: 10px;
background-color: #eee;
text-align: center;
}
#contact .contact > .mail > dt {
margin: 10px 0;
font-size: 150%;
font-weight: bold;
}
#contact .contact > .mail > dd {
margin: 10px 0;
}
#contact .contact > .mail > dd a {
display: inline-block;
}
#contact .contact > .mail > dd a.roll {
width: 170px;
height: 35px;
background: transparent url(/sp/portabook/xmc10/images/btn-contact-01_o.png) no-repeat scroll 0 0;
}
#contact .contact > .mail > dd a.roll img {
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
.notIOS #contact .contact > .mail > dd a.roll:hover img,
.notIOS #contact .contact > .mail > dd a.roll:active img,
.notIOS #contact .contact > .mail > dd a.roll:focus img {
opacity: .1;
}
#contact .copyright {
margin: 40px 30px 0 30px;
font-size: 120%;
}
#contact .copyright > li {
position: relative;
margin: .5em 0;
padding-left: 1.5em;
}
#contact .copyright > li:before {
content: "";
position: absolute;
top: .5em;
left: .25em;
display: block;
width: 0;
height: 0;
border: 3.5px solid #6e797f;
border-radius: 3.5px;
}

#footer {
height: 70px;
background-color: #6e797f;
}
#footer p {
line-height: 70px;
text-align: center;
}
#footer p small {
font-size: 120%;
}