@charset "utf-8";
/* =====================================
reset
------------------------------------- */
* {
margin: 0;
border: 0;
padding: 0;
}

/* =====================================
base
------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background-color: #fff;
color: #000;
font-size: 10px;
font-family: "Yu Gothic", YuGothic, Arial, Helvetica, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
line-height: 1.8125;
font-size: 1.6em;
letter-spacing: 0.025em;
word-break: keep-all;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
border: none;
}
header,
footer,
nav,
main {
display: block;
}
a {
color: #000;
text-decoration: none;
}

/* =====================================
header
------------------------------------- */
#header {
border-bottom: 1px solid #d7d7d7;
}
.header-inner {
position: relative;
width: 1000px;
height: 109px;
margin: 0 auto;
}
.header-logo {
position: absolute;
top: 40px;
left: 10px;
}
.sns-list {
position: absolute;
top: 38px;
right: 10px;
}
.sns-list::after {
content: "";
clear: both;
display: block;
}
.sns-list li {
float: left;
margin-left: 12px;
}

/* =====================================
main
------------------------------------- */
.mainimage {
width: 1000px;
margin: 0 auto;
text-align: center;
padding: 60px 0 72px;
}
.nav {
width: 1000px;
margin: 0 auto;
padding: 0 10px 30px;
text-align: center;
font-size: 0.875em;
font-weight: bold;
}
/*.nav ul::after {
content: "";
clear: both;
display: block;
}*/
.nav li {
/*float: left;*/
display: inline-block;
width: 20%;
padding-top: 138px;
cursor: pointer;
}
.nav span {
line-height: 1.42857;
}
.nav li.fl {
background: url(/sp/english/tape/images/nav_item_fl.png) no-repeat top center;
}
.nav li.mk {
background: url(/sp/english/tape/images/nav_item_mk.png) no-repeat top center;
}
.nav li.mf {
background: url(/sp/english/tape/images/nav_item_mf.png) no-repeat top center;
}
.nav li.lt {
background: url(/sp/english/tape/images/nav_item_lt.png) no-repeat top center;
}
.nav li.ft {
background: url(/sp/english/tape/images/nav_item_ft.png) no-repeat top center;
}
.nav li.fl.active {
background: url(/sp/english/tape/images/hov_item_fl.png) no-repeat top center;
}
.nav li.mk.active {
background: url(/sp/english/tape/images/hov_item_mk.png) no-repeat top center;
}
.nav li.lt.active {
background: url(/sp/english/tape/images/hov_item_lt.png) no-repeat top center;
}
.nav li.ft.active {
background: url(/sp/english/tape/images/hov_item_ft.png) no-repeat top center;
}
.nav li.fl:hover span,
.nav li.fl:active span,
.nav li.fl.active span {
background-color: #cffcc0;
}
.nav li.mk:hover span,
.nav li.mk:active span,
.nav li.mk.active span {
background-color: #c0e1fc;
}
.nav li.mf:hover span,
.nav li.mf:active span,
.nav li.mf.active span {
background-color: #fce0c0;
}
.nav li.lt:hover span,
.nav li.lt:active span,
.nav li.lt.active span {
background-color: #fcfcc0;
}
.nav li.rk:hover span,
.nav li.rk:active span,
.nav li.rk.active span {
background-color: #fcc0d8;
}
.nav li.ft:hover span,
.nav li.ft:active span,
.nav li.ft.active span {
background-color: #fcc9c0;
}
.tabmenu {
min-width: 1000px;
}
.tab-inner {
width: 1000px;
margin: 0 auto;
padding: 60px 10px;
position: relative;
}
.tab-inner h2 {
font-size: 1.5em;
font-weight: bold;
}
.tab-inner::before {
content: "";
display: block;
width: 0;
height: 0;
}
.tab-fl > .tab-inner::before {
position: absolute;
top: -40px;
left: 29.3%;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #eef7eb;
border-left: 11px solid transparent;
}
.tab-mk > .tab-inner::before {
position: absolute;
top: -40px;
left: 48.9%;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #edf4fa;
border-left: 11px solid transparent;
}
.tab-mf > .tab-inner::before {
position: absolute;
top: -40px;
left: 48.9%;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #faf4ed;
border-left: 11px solid transparent;
}
.tab-lt > .tab-inner::before {
position: absolute;
top: -40px;
left: 49%;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #f5f5e9;
border-left: 11px solid transparent;
}
.tab-rk > .tab-inner::before {
position: absolute;
top: -40px;
left: 88.9%;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #faf0f4;
border-left: 11px solid transparent;
}
.tab-ft > .tab-inner::before {
position: absolute;
top: -40px;
left: 68.5%;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #faf0f4;
border-left: 11px solid transparent;
}
.tab-fl {
background-color: #eef7eb;
}
.tab-mk {
background-color: #edf4fa;
}
.tab-mf {
background-color: #faf4ed;
}
.tab-lt {
background-color: #f5f5e9;
}
.tab-rk {
background-color: #faf0f4;
}
.tab-ft {
background-color: #faf0f0;
}
.tab-title-center {
  display: flex;
  justify-content: center;
}
.fl-box {
display: table;
max-width: 1000px;
margin: 0 auto 52px;
}
.fl-box > p {
display: table-cell;
font-size: 18px;
font-weight: bold;
padding-right: 117px;
max-width: 500px;
vertical-align: top;
}
.fl-box .note {
display: table;
font-size: .8em;
}
.fl-box .note > span {
display: table-cell;
padding-right: .5em;
}
.fl-box > .img {
padding-right: 40px;
}
.fl-box .txt {
display: table-cell;
vertical-align: top;
}
.fl-box .txt > p > span {
font-size: 2.0em;
}
.lineup::after {
content: "";
clear: both;
display: block;
}
.lineup li {
float: left;
margin-bottom: 40px;
}
.lineup li > span {
display: block;
padding-top: 8px;
font-size: 0.875em;
white-space: nowrap;
}
.lineup li > .ico {
padding: 0;
margin-bottom: 11px;
}
.lineup.col3 li {
width: 300px;
margin-right: 40px;
}
.lineup.col3 li:nth-child(3n) {
margin-right: 0;
}
.lineup.col4 li {
width: 215px;
margin-right: 40px;
}
.lineup.col4 li:nth-child(4n) {
margin-right: 0;
}
.models {
text-align: center;
}
.models h2 {
margin: 60px 0 42px;
}
.models p {
height: 4px;
padding-top: 20px;
}
.subnav::after {
content: "";
clear: both;
display: block;
}
.subnav {
font-size: 0;
}
.subnav li {
/*float: left;*/
display: inline-block;
width: 24%;
height: 61px;
padding: 10px 0;
font-size: 1.4rem;
border-left: 1px dotted #000;
}
.subnav li:last-child {
border-right: 1px dotted #000;
}
.subnav a {
display: table;
margin: 0 auto;
padding-left: 26px;
background: url(/sp/english/tape/images/ico-bullet.png) no-repeat left center;
cursor: pointer;
}
.subnav span.wrap {
display: table-cell;
padding-left: 10px;
font-weight: bold;
vertical-align: middle;
line-height: 1.7;
}
.subnav span.wrap > span {
display: inline;
}
.subnav li img {
display: table-cell;
}
.tab-fl .subnav a:hover span span,
.tab-fl .subnav a:active span span {
background-color: #cffcc0;
}
.tab-mk .subnav a:hover span span,
.tab-mk .subnav a:active span span {
background-color: #c0e1fc;
}
.tab-mf .subnav a:hover span span,
.tab-mf .subnav a:active span span {
background-color: #fce0c0;
}
.tab-lt .subnav a:hover span span,
.tab-lt .subnav a:active span span {
background-color: #fcfcc0;
}
.tab-rk .subnav a:hover span span,
.tab-rk .subnav a:active span span {
background-color: #fcc0d8;
}
.list-note > li {
position: relative;
padding-left: 1.2em;
font-size: 1.4rem;
}
.list-note > li > .list_mark {
position: absolute;
top: 0;
left: 0;
}

/* =====================================
footer
------------------------------------- */
#footer {
background-color: #fff;
}
.footer-inner {
width: 1000px;
height: 142px;
margin: 0 auto;
text-align: center;
}
.footer-logo {
padding: 40px 0 34px;
}
.pagetop {
position: fixed;
right: 20px;
bottom: 20px;
}
.pagetop a {
display: block;
position: relative;
width: 48px;
height: 48px;
border: #999 3px solid;
border-radius: 50%;
background-color: #fff;
}
.pagetop a:hover,
.pagetop a:focus,
.pagetop a:active {
background-color: #999;
}
.pagetop a::before {
content: "";
display: block;
width: 15px;
height: 15px;
border-top: #999 3px solid;
border-left: #999 3px solid;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 17px;
left: 14px;
}
.pagetop a:hover::before,
.pagetop a:focus::before,
.pagetop a:active::before {
border-top: #fff 3px solid;
border-left: #fff 3px solid;
}
.pagetop a > span {
position: absolute;
top: -999em;
left: -999em;
}
.copyright {
color: #666;
font-size: 0.875em;
}