@charset "utf-8";

/* ===============================================

* Target user-agent
  - Desktop
    - IE 9, 11
    - Firefox (Latest)
    - Chrome (Latest)
  - Smart Device
    - Mobile Safari (iOS 8.4.1)
    - Android Chrome (Android 5.1.1)

----------------------------------------------- */

/* =====================================
reset
------------------------------------- */
* {
margin: 0;
border: 0;
padding: 0;
}

/* =====================================
base
------------------------------------- */
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-width: 1000px;
line-height: 1.5;
background-color: #fff;
color: #333;
font-size: 10px;
letter-spacing: .00001em;
word-break: break-all;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
input,
button,
textarea,
option {
font-family: "\30d2\30e9\30ae\30ce\89d2\30b4 ProN W3", "Hiragino Kaku Gothic ProN", "\30e1\30a4\30ea\30aa", Meiryo, sans-serif;
}
a,
a::before,
a::after,
button,
button::before,
button::after,
input,
input::before,
input::after {
-webkit-transition: 200ms;
transition: 200ms;
}
a,
a:link,
a:visited,
a strong,
a:link strong,
a:visited strong {
color: #005172;
text-decoration: none;
}
a:visited,
a:visited strong {
color: #639;
}
a:active,
a:hover,
a:focus,
a:active strong,
a:hover strong,
a:focus strong {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"],
button,
select,
option,
label {
cursor: pointer;
}
table {
border-collapse: collapse;
}
th,
td {
text-align: left;
vertical-align: middle;
}
th,
dt {
font-weight: normal;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
border: 0;
}
table img {
max-width: inherit;
}
strong,
em,
b,
i {
font-style: normal;
}
strong,
em,
b {
font-weight: bold;
}
strong {
color: #aa272f;
}
small {
font-size: 100%;
}
section,
article,
figcaption,
figure,
header,
footer,
aside,
nav,
main {
display: block;
}

/* =====================================
header
------------------------------------- */
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
box-shadow: 0 0 10px rgba(0,0,0,.25);
background-color: #fff;
}
.static #header {
position: relative;
}
#header > .inner {
position: relative;
max-width: 1000px;
min-width: 1000px;
height: 85px;
margin: 0 auto;
padding: 0 10px;
}

#header .logo-product {
position: absolute;
top: 21px;
left: 10px;
}
#header .logo-maker {
position: absolute;
top: 12px;
right: 10px;
}

#header nav {
position: absolute;
bottom: 0;
right: 10px;
}
#header nav ul::after {
content: "";
clear: both;
display: block;
}
#header nav ul li {
float: left;
margin-left: 35px;
font-size: 140%;
font-weight: bold;
}
#header nav ul li a {
display: inline-block;
border-bottom: 3px solid #fff;
padding: .4em 6px;
color: #333;
text-decoration: none;
}
#header nav ul li a.current {
border-bottom: 3px solid #ff7828;
}

/* =====================================
main
------------------------------------- */
main section .inner,
main aside .inner {
max-width: 1000px;
min-width: 1000px;
margin: 0 auto;
padding: 0 10px;
}

#top {
position: relative;
height: 626px;
padding-top: 85px;
background: transparent url(/sp/imisiru/images/bg-01.jpg) no-repeat 50% 100%;
}
#top::before,
#top::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 50%;
}
#top::before {
left: 0;
background-color: #f6f5f6;
}
#top::after {
right: 0;
background-color: #fff;
}
.static #top {
padding-top: 0;
height: 541px;
}

#top > .inner {
max-width: 1000px;
min-width: 1000px;
margin: 0 auto;
padding: 0 10px 0 560px;
}
#top .lead {
padding-top: 45px;
}
#top .movie {
margin-top: 25px;
text-align: center;
}
#top .movie a {
display: inline-block;
border: 1px solid #dadada;
}
#top .movie a img {
background-color: #fff;
-webkit-transition: 200ms;
transition: 200ms;
}
#top h2 {
margin-top: 20px;
}
#top ul {
margin-top: 10px;
padding-left: 140px;
}
#top ul li {
display: inline-block;
vertical-align: top;
}

#case {
margin-top: -85px;
padding-top: 85px;
}
.static #case {
margin-top: 0;
padding-top: 0;
}

#case .area-01 {
height: 700px;
background-color: #1b88d8;
background-image: url(/sp/imisiru/images/bg-02.png), url(/sp/imisiru/images/bg-03.png);
background-position: 50% 100%, 0 0;
background-repeat: no-repeat, repeat;
}
.static #case .area-01 {
height: 500px;
}
.static #case .area-01 .noscript {
padding: 200px 100px;
}
.static #case .area-01 .noscript span {
display: block;
line-height: 100px;
box-shadow: 0 0 1em rgba(0,0,0,.5);
background-color: #fff;
border-radius: 50px;
font-size: 200%;
text-align: center;
}

#gimmick {
position: relative;
opacity: 0;
}
.static #gimmick {
display: none;
}
#gimmick .comment {
height: 130px;
overflow: hidden;
padding-top: 30px;
background: transparent url(/sp/imisiru/images/bg-05.png) no-repeat 50% 71.53846%;
}
#gimmick .comment p {
color: #fff;
font-size: 280%;
font-weight: bold;
text-align: center;
}
#gimmick .comment p.txt-03 {
font-size: 220%;
}
#gimmick .comment p em {
margin: 0 .15em;
color: #f3e61d;
font-size: 145.45454%;
}
#gimmick .img {
position: relative;
width: 924px;
height: 454px;
overflow: hidden;
margin: 0 auto 15px auto;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0,0,0,.5);
background: #fff url(/sp/imisiru/images/bg-06.jpg) no-repeat 50% 50%;
background-size: cover;
}
#gimmick .img img {
opacity: 1;
}
#gimmick .img img.img-01 {
position: relative;
z-index: 3;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 30% 25%;
-ms-transform-origin: 30% 25%;
transform-origin: 30% 25%;
}
#gimmick .img img.img-01.transition {
-webkit-transition: 800ms;
transition: 800ms;
}
#gimmick .img img.img-01.zoom {
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
#gimmick .img img.img-02,
#gimmick .img img.img-03,
#gimmick .img img.img-04 {
position: absolute;
z-index: 4;
}
#gimmick .img img.img-02 {
top: 101px;
left: 148px;
-webkit-animation: question 2400ms infinite;
animation: question 2400ms infinite;
}
@-webkit-keyframes question {
  0%   { top: 111px; }
  50%  { top:  91px; }
  100% { top: 111px; }
}
@keyframes question {
  0%   { top: 111px; }
  50%  { top:  91px; }
  100% { top: 111px; }
}
#gimmick .img img.img-03 {
top: 33px;
left: 670px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-animation: exclamation 2400ms infinite;
animation: exclamation 2400ms infinite;
}
@-webkit-keyframes exclamation {
  0%   { -webkit-transform: scale(.9);  -ms-transform: scale(.9);  transform: scale(.9);  }
  10%  { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(.9);  -ms-transform: scale(.9);  transform: scale(.9);  }
}
@keyframes exclamation {
  0%   { -webkit-transform: scale(.9);  -ms-transform: scale(.9);  transform: scale(.9);  }
  10%  { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(.9);  -ms-transform: scale(.9);  transform: scale(.9);  }
}
#gimmick .img img.img-04 {
top: 174px;
left: 351px;
z-index: 2;
}
#gimmick .ui {
text-align: center;
}
#gimmick .ui li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
}
#gimmick .ui li button {
display: block;
width: 54px;
height: 54px;
background-color: transparent;
}
#gimmick .ui li button.btn-01 {
background-image: url(/sp/imisiru/images/btn-gimmick-01_off.png);
}
#gimmick .ui li button.btn-02 {
background-image: url(/sp/imisiru/images/btn-gimmick-02_off.png);
}
#gimmick .ui li button.btn-03 {
background-image: url(/sp/imisiru/images/btn-gimmick-03_off.png);
}

#case .area-02 {
position: relative;
padding: 5px 0;
text-align: center;
}
#case .area-02 .hdg {
position: absolute;
top: -24px;
left: 50%;
width: 600px;
line-height: 44px;
margin-left: -300px;
border: 2px solid #087ed5;
border-radius: 24px;
background-color: #fff;
color: #087ed5;
font-size: 220%;
}
#case .area-02 .dic-img {
margin: 60px 0 40px 0;
}
#case .area-02 .dic-img li {
display: inline-block;
margin: 0 35px;
}
#case .area-02 .dic-txt {
margin-bottom: 35px;
font-size: 220%;
}
#case .area-02 .dic-txt strong {
color: #e6102e;
}
#case .area-02 .detail {
margin-bottom: 30px;
border-top: 2px solid #087ed5;
}
#case .area-02 .detail::after {
content: "";
clear: both;
display: block;
}
#case .area-02 .detail > li {
float: left;
margin-left: 24px;
}
#case .area-02 .detail > li:first-child {
margin-left: 0;
}
#case .area-02 .detail > li:nth-child(1) {
width: 466px;
}
#case .area-02 .detail > li:nth-child(2),
#case .area-02 .detail > li:nth-child(3) {
width: 233px;
}
#case .area-02 .detail > li .txt {
display: block;
margin: 1em 0 .5em 0;
font-size: 160%;
text-align: left;
}

#howtouse {
margin-top: -85px;
padding-top: 85px;
}
.static #howtouse {
margin-top: 0;
padding-top: 0;
}

#howtouse .area-01 {
padding-bottom: 35px;
background-color: #e5f1fd;
}
#howtouse .area-01 > .inner > .hdg {
padding: 45px 0 30px 0;
font-size: 300%;
text-align: center;
}
#howtouse .step {
margin-bottom: 60px;
}
#howtouse .step::after {
content: "";
clear: both;
display: block;
}
#howtouse .step > li {
position: relative;
float: left;
width: 300px;
margin-left: 40px;
border-radius: 6px;
padding: 1.25em 15px;
background-color: #fff;
}
#howtouse .step > li::before {
content: "";
position: absolute;
top: 0;
left: -40px;
bottom: 0;
display: block;
width: 40px;
background: transparent url(/sp/imisiru/images/arrow-01.png) no-repeat 50% 50%;
}
#howtouse .step > li:first-child {
margin-left: 0;
}
#howtouse .step > li:first-child::before {
content: none;
}
#howtouse .step > li span {
display: block;
}
#howtouse .step > li .txt-01 {
margin-bottom: .75em;
font-size: 160%;
}
#howtouse .step > li .txt-02 {
margin-top: .75em;
font-size: 140%;
}
#howtouse .step > li .txt-01 img,
#howtouse .step > li .txt-02 img {
position: relative;
top: -.1em;
margin: 0 .25em;
vertical-align: middle;
}
#howtouse .step > li .txt-01 img:first-letter,
#howtouse .step > li .txt-02 img:first-letter {
margin-left: 0;
}
#howtouse .step > li .img {
text-align: center;
}
#howtouse .function {
position: relative;
margin-bottom: 10px;
border-radius: 6px;
padding: 55px 80px 20px 80px;
background-color: #fff;
}
#howtouse .function > .hdg {
position: absolute;
top: -24px;
left: 50%;
width: 600px;
line-height: 44px;
margin-left: -300px;
border: 2px solid #087ed5;
border-radius: 24px;
background-color: #fff;
color: #087ed5;
font-size: 220%;
text-align: center;
}
#howtouse .function > ul::after {
content: "";
clear: both;
display: block;
}
#howtouse .function > ul > li {
width: 400px;
}
#howtouse .function > ul > li > .txt {
float: right;
}
#howtouse .function > ul > li > .txt .hdg {
margin-bottom: .5em;
font-size: 180%;
font-weight: bold;
}
#howtouse .function > ul > li > .txt p {
font-size: 160%;
}
#howtouse .function > ul > li > .img {
float: left;
}
#howtouse .function > ul > li:nth-child(1) {
float: left;
}
#howtouse .function > ul > li:nth-child(1) > .txt {
width: 274px;
}
#howtouse .function > ul > li:nth-child(2) {
float: right;
}
#howtouse .function > ul > li:nth-child(2) > .txt {
width: 191px;
}

#howtouse .notice {
margin-top: .25em;
font-size: 140%;
}

#names {
margin-top: -85px;
padding-top: 85px;
padding-bottom: 40px;
}
.static #names {
margin-top: 0;
padding-top: 0;
}

#names .hdg {
padding: 35px 0 30px 0;
font-size: 300%;
text-align: center;
}
#names ul {
position: relative;
width: 780px;
height: 328px;
margin: 0 auto;
background: transparent url(/sp/imisiru/images/bg-04.jpg) no-repeat 0 0;
}
#names ul li {
position: absolute;
line-height: 1.25;
font-size: 140%;
}
#names ul li.name-01 {
top: 84px;
left: 282px;
width: 100px;
}
#names ul li.name-02 {
top: 280px;
left: -24px;
width: 140px;
text-align: center;
}
#names ul li.name-03 {
top: 280px;
left: 156px;
width: 140px;
text-align: center;
}
#names ul li.name-04 {
top: 31px;
right: 194px;
width: 180px;
text-align: right;
}
#names ul li.name-05 {
top: 31px;
left: 756px;
width: 70px;
}
#names ul li.name-06 {
top: 118px;
left: 756px;
width: 70px;
}
#names ul li.name-07 {
top: 165px;
left: 756px;
width: 70px;
}
#names ul li.name-08 {
top: 280px;
left: 466px;
width: 100px;
text-align: center;
}
#names ul li.name-09 {
top: 280px;
left: 572px;
width: 180px;
text-align: center;
}

#spec {
margin-top: -85px;
padding-top: 85px;
}
.static #spec {
margin-top: 0;
padding-top: 0;
}

#spec .area-01 {
background-color: #f4f4f4;
}
#spec .area-01 .hdg {
padding: 35px 0 30px 0;
font-size: 300%;
text-align: center;
}
#spec .area-01 .column {
padding-bottom: 30px;
}
#spec .area-01 .column::after {
content: "";
clear: both;
display: block;
}
#spec .area-01 .column table {
width: 476px;
border-top: 1px solid #ccc;
font-size: 140%;
}
#spec .area-01 .column table:nth-child(1) {
float: left;
}
#spec .area-01 .column table:nth-child(2) {
float: right;
}
#spec .area-01 .column table th,
#spec .area-01 .column table td {
border-bottom: 1px solid #ccc;
padding: .75em 0;
text-align: left;
vertical-align: top;
}
#spec .area-01 .column table th {
width: 105px;
padding: .75em 10px;
}
#spec .area-01 .column table td ul {
margin-bottom: 1em;
}
#spec .area-01 .column table td ul li {
position: relative;
padding-left: 12px;
}
#spec .area-01 .column table td ul li::before {
content: "";
position: absolute;
top: .55em;
left: 2px;
display: block;
width: 0;
height: 0;
border: 2px solid #333;
border-radius: 2px;
-webkit-transform: scale(.75);
-ms-transform: scale(.75);
transform: scale(.75);
}

#top[tabindex],
#case[tabindex],
#howtouse[tabindex],
#names[tabindex],
#spec[tabindex] {
outline: 0;
}

#note .inner {
padding-top: 10px;
padding-bottom: 20px;
}
#note .notice {
margin: .25em 0;
font-size: 120%;
}

/* =====================================
footer
------------------------------------- */
#footer {
border-top: 1px solid #ccc;
background-color: #fff;
}
#footer > .inner {
max-width: 1000px;
min-width: 1000px;
margin: 0 auto;
padding: 0 10px;
}

#footer .copyright {
padding: 1em 0;
font-size: 120%;
text-align: center;
}

/* =====================================
btn-area 16/05/23
------------------------------------- */
.btn-area {
margin-bottom:84px;
text-align:center;
}

.btn-area a {
font-size:220%;
display:inline-block;
min-width:380px;
background:#ffffff;
padding:12px 0 8px 0;
border:3px solid #ff7828;
color:#333333;
border-radius:6px;
position:relative;
z-index:2;
-webkit-perspective:300px;
perspective:300px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
}

.btn-area a:hover {
text-decoration:none;
color:#ffffff;
}

.btn-area a::after {
display:block;
position:absolute;
content:"";
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background:#ff7828;
-webkit-transform-origin:center top;
transform-origin:center top;
-webkit-transform:rotateX(90deg);
transform:rotateX(90deg);
opacity:0;
}
.btn-area a:hover::after {
-ms-transform:rotateX(0);
-webkit-transform:rotateX(0);
transform:rotateX(0);
opacity:1;
}