/* ====================================== */
/*  BASIC CSS */
/* ====================================== */


/* ---- com ---- */


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
font-family: 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ pro W6', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 130%;
line-height: 180%;
letter-spacing: 0.1em;
}

body {
min-width: 1000px;
color: #000;
background: #c7eaf1;
text-align: center;
}

img {
max-width: 100%;
border: 0px;
height: auto;
vertical-align: bottom;
}

a {
color: #000;
text-decoration: none;
}

ul {
list-style: none;
}

h1,
h2,
h3 {
letter-spacing: 0.2em;
}

strong {
font-size: 110%;
color: #d11014;
/*font-weight: 900;*/
}

strong.k {
color: #000;
}

.sp {
display: none!important;
}


/* size */


.xxl {
font-size: 140%;
line-height: 160%;
}

.xl {
font-size: 120%;
line-height: 160%;
}

.l {
font-size: 110%;
line-height: 160%;
}

.xs {
font-size: 100%;
}

/* box */

.sb {
display: inline-block;
background: #fff;
border: 5px solid #000;
border-radius: 10px;
padding: 30px 50px;
position: relative;
text-align: left;
}

.sb span {
font-size: 120%;
color:#d11014;
font-weight: bold;
display: block;
}

/* speech balloon */

/* 1 top */

.sbt:before {
content: '';
position: absolute;
left: 50%;
top:  -26px;
margin-left: -18px;
border-right: 20px solid transparent;
border-bottom: 25px solid #000;
border-left: 20px solid transparent;
}

.sbt:after {
content: '';
position: absolute;
left: 50%;
top:  -18px;
margin-left: -18px;
border-right: 20px solid transparent;
border-bottom: 25px solid #fff;
border-left: 20px solid transparent;
}

/* 2 right */

.sbr:before {
content: '';
position: absolute;
right: -26px;
top: 50%;
margin-top: -18px;
border-left: 25px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

.sbr:after {
content: '';
position: absolute;
right: -18px;
top: 50%;
margin-top: -18px;
border-left: 25px solid #fff;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

/* 3 bottom */

.sbb:before {
content: '';
position: absolute;
left: 50%;
bottom:  -26px;
margin-left: -18px;
border-right: 20px solid transparent;
border-top: 25px solid #000;
border-left: 20px solid transparent;
}

.sbb:after {
content: '';
position: absolute;
left: 50%;
bottom:  -18px;
margin-left: -18px;
border-right: 20px solid transparent;
border-top: 25px solid #fff;
border-left: 20px solid transparent;
}

/* 4 left */

.sbl:before {
content: '';
position: absolute;
left: -26px;
top: 50%;
margin-top: -18px;
border-right: 25px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

.sbl:after {
content: '';
position: absolute;
left: -18px;
top: 50%;
margin-top: -18px;
border-right: 25px solid #fff;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

/* h2 */

h2 {
font-size: 160%;
color: #fff;
background: #d11014;
line-height: 140%;
border-top: 5px solid #000;
padding: 40px;
display:flex;
justify-content:center;
align-items: center;
margin-bottom: 50px;
}

h2 img {
padding: 0 15px;
}

/* section */

section {
width: 800px;
margin: 0 auto;
position: relative;
}

section.box {
border: 5px solid #000;
border-radius: 10px;
background: #fff;
}

section.box h3 {
font-size: 130%;
color: #fff;
border-bottom: 5px solid #000;
background: #d11014;
padding: 25px;
}


/* ---- header ---- */


header {
background: #fff url("../../com/img/header/bg.png") repeat-x bottom left;
border-bottom: 5px solid #000;
}

header img {
margin: 0 auto;
}

header div {
font-size: 120%;
color: #fff;
font-weight: bold;
background: #d11014;
margin-bottom: 12px;
}

header div p {
background: url("../../com/img/header/check.png") no-repeat center left;
padding: 22px 22px 22px 70px;
display: inline-block;
}


/* ---- content ---- */


#intro > p:first-child {
padding: 35px 0 15px 0;
}

#intro div {
min-height: 244px;
background: url("../../com/img/nav/1.png") no-repeat top left;
margin-top: 10px;
}

#intro div p {
margin: 30px 0 0 180px;
}


/* ---- 溝 ---- */


#howto div:first-of-type {
min-height: 330px;
background: url("../../com/img/content/check.jpg") no-repeat center left;
}

#howto div:first-of-type p {
font-size: 90%;
line-height: 180%;
padding: 40px 20px 20px 350px;
text-align: left;
}

#howto div:first-of-type p span {
font-size: 80%;
display: block;
}

#howto div:last-of-type {
background: url(../../com/img/line.png) repeat-x top left;
}

#howto div:last-of-type p {
padding: 20px 40px;
text-align: left;
}

#howto:before{
content:"";
width: 331px;
height: 203px;
background: url("../../com/img/nav/2.png") no-repeat;
position: absolute;
right: 30px;
bottom: 0;
}

/* シミュレーター */

.sim div {
min-height: 239px;
background: url("../../com/img/nav/3.png") no-repeat top left;
margin-top: 50px;
}

.sim div p {
margin: -20px 0 0 320px;
}

#sim h3 {
text-align: left;
padding-left: 40px;
position: relative;
}

#sim h3:before {
content:"";
width: 176px;
height: 188px;
background: url("../../com/img/nav/4.png") no-repeat;
position: absolute;
right: 40px;
bottom: 0;
}

/* form */

input[type="submit"],
input[type="button"] {
-webkit-appearance: none;
}

form div {
display: inline-block;
padding: 40px 15px;
position: relative;
}

form input {
font-size: 150%;
width: 320px;
height: 80px;
background: transparent;
border: 3px solid #231815;
margin-top: 20px;
padding: 10px 20px;
outline: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance:textfield;
}

form div:before {
color: #a3a3a3;
position: absolute;
top: 135px;
right: 35px;
}

form div:first-child:before {
content: 'km';
}

form div:last-child:before {
content: 'mm';
}

form div {
display: inline-block;
vertical-align: top;
padding: 40px 15px;
position: relative;
}

form .validate {
width: 320px;
font-size: 80%;
line-height: 160%;
color: #d11014;
font-weight: bold;
margin-top: 15px;
display: block;
}

button {
font-size: 100%;
letter-spacing: 0.1em;
font-weight: bold;
width: 680px;
height: 104px;
color: #fff;
border: 5px solid #000;
background: url("../../com/img/content/form.png") repeat-x top left;
cursor: pointer;
margin-bottom: 40px;
padding-bottom: 18px;
}

#sim h4 {
font-weight: normal;
padding: 20px;
border-top: 5px solid #000;
background: #eaeaea url(../../com/img/line.png) repeat-x bottom left;
}

#sim #result {
height: 200px;
background: #eaeaea;
position: relative;
}

#sim #result p {
color: #959595;
font-weight: bold;
position: absolute;
}

#sim #result p:first-child {
top: 25px;
left: 120px;
}

#sim #result p.about {
bottom: 25px;
left: 200px;
}

#sim #result #output {
font-size: 600%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#sim #result p.month {
bottom: 25px;
left: 550px;
}

/* 以内 */
#sim #result p.month span {
display: inline-block;
}

/* 動画 */

.sim-notes {
font-size: 60%;
line-height: 200%;
text-align: left;
padding: 10px;
}

.video-intro div {
min-height: 244px;
background: url("../../com/img/nav/1.png") no-repeat bottom left;
margin-top: 90px;
padding-bottom: 40px;
}

.video-intro div p {
margin: -20px 0 0 210px;
}

.video-intro:after{
content:"ちょっと待って！";
color: #fff;
font-weight: bold;
background: #d11014;
border-radius: 10px;
position: absolute;
top: -70px;
left: 150px;
transform: rotate(-2deg);
padding: 10px 30px;
}

.video h3 p {
font-size: 90%;
background-image: url(../../com/img/content/video/icon.png), url(../../com/img/content/video/icon.png);
background-position: center left, center right;
background-repeat: no-repeat, no-repeat;
display: inline-block;
padding: 0 40px 0 50px;
}

.video video {
width: 100%;
vertical-align: bottom;
}

/* チェック */

.note div {
min-height: 270px;
background: url("../../com/img/nav/5.png") no-repeat center left;
background-size: 240px;
margin-top: 100px;
}

.note div p {
margin: -50px 0 0 240px;
}

#note dl {
border: 5px solid #000;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}

#note #g4 {
background: #fff100;
}

#note #g3 {
background: #f69421;
}

#note #g2 {
background: #e60012;
}

#note dl:before {
content:"";
width: 179px;
height: 55px;
background: url("../../com/img/content/note/icon.png") no-repeat;
position: absolute;
top: 0;
left: 0;
}

#note dt {
width: 270px;
float: left;
}

#note #g4 dt {
padding-top: 100px;
}

#note #g3 dt {
padding-top: 72px;
}

#note #g2 dt {
padding-top: 72px;
}

#note dd {
margin-left: 270px;
line-height: 160%;
border-left: 5px solid #000;
padding: 30px;
background: #fff;
text-align: left;
}

#note dd img {
padding: 5px 10px 10px 0;
}

#note #g3 dd:last-child {
margin-left: 0;
border-left: none;
border-top: 5px solid #000;
}

#note #g3 dd:last-child div {
min-height: 211px;
background: url("../../com/img/content/note/nav.png") no-repeat center left;
}

#note #g3 dd:last-child div p {
font-size: 90%;
margin-left: 200px;
}

#note #g3 dd:last-child img {
display: block;
margin: 25px auto;
}

#note #g3 dd:last-child span {
font-size: 60%;
display: block;
margin: 30px 0 -20px 0;
}

/* 溝 end */

#next {
padding: 25px 0 50px 0;
}

#next div:last-child {
background: url("../../com/img/nav/5.png") no-repeat top center;
padding-top: 320px;
margin-top: 10px;
}

#next div p {
text-align: center;
}

#next div:last-child p:after {
content:"";
width: 63px;
height: 63px;
background: url("../../com/img/content/sb/1.png") no-repeat;
position: absolute;
top: -31px;
left: -31px;
}


/* ---- キズ・変形, ヒビ ---- */


h2.xs img {
width: 480px;
}

.broke img {
margin: 50px 0;
}


/* ---- 空気圧 ---- */


#air img {
margin: 50px 0;
}

/* グラフ */

#air1 {
margin: 40px 0;
}

#air1 h3 {
font-size: 110%;
padding: 30px 0 25px 0;
}

#air1 h3 span {
font-size: 60%;
}

#air1 img {
margin: 40px 0 20px 0;
}

#air1 p {
font-size: 60%;
margin: 0 0 5px 20px;
text-align: left;
}

/* 不具合一覧 */

#air2 h3 {
font-size: 105%;
padding: 30px 0;
}

#air2 h3 strong {
font-size: 135%;
color: #fff;
}

#air2 img {
width: 95%;
margin: 15px auto 30px auto;
}

/* 空気圧 end */

#air3 {
margin: 100px 0 110px 0;
}

#air3 p {
background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff100 0%) repeat scroll 0 0;
display: inline-block;
}


/* ---- まとめ ---- */


#finish div {
background: url("../../com/img/nav/6.png") no-repeat top center;
padding-top: 288px;
margin-top: -80px;
}

#finish div p {
text-align: center;
}


/* ---- AI ---- */


#ai1 {
font-size: 120%;
line-height: 160%;
letter-spacing: 0.1em;
text-align: left;
display: block;
margin-top: 150px;
}

#ai1 p {
width: 900px;
margin: 0 auto;
position: relative;
}

#ai1 p:after {
content:"";
width: 313px;
height: 263px;
background: url("../../com/img/nav/3.png") no-repeat;
position: absolute;
bottom: -40px;
right: 0;
}

#ai1 p:before {
content:"";
width: 205px;
height: 94px;
background: url("../../com/img/content/sb/2.png") no-repeat;
position: absolute;
top: -100px;
left: 0;
}

#ai1 strong {
font-size: 120%;
color: #fff;
}

/* 動画 */

#ai2 {
margin-bottom: 50px;
text-align: center;
}

/* AI バナー */

#ai3 {
margin-top: 50px;
padding-bottom: 200px;
}

#ai3:after {
content:"";
width: 330px;
height: 266px;
background: url("../../com/img/nav/7.png") no-repeat;
position: absolute;
bottom: 0;
right: 0;
}

#ai4:before {
content:"";
width: 250px;
height: 94px;
background: url("../../com/img/content/sb/3.png") no-repeat;
position: absolute;
top: -75px;
left: -20px;
}

#ai4 h3 {
font-size: 100%;
}

#ai4 h3 strong {
font-size: 120%;
color: #fff;
}

#ai4 div {
color: #fff;
height: 235px;
background: #d11014 url("../../com/img/content/ai/banner_pc.jpg") no-repeat top right;
}

#ai4 div p {
font-size: 90%;
width: 370px;
height: 235px;
text-align: left;
padding: 45px 30px;
border-right: 3px solid #000;
}

#ai4 div p strong {
font-size: 100%;
color: #fff;
}

#ai5 {
display: block;
padding: 20px;
}


/* ---- footer ---- */


footer {
background: url("../../com/img/nav/8.png") no-repeat top center;
padding-top: 420px;
margin-top: 50px;
}

footer p {
color: #000;
background: #fff;
border-top: 5px solid #000;
padding: 90px;
}