@charset "UTF-8";
.column:after,
.list_01:after,
.list:after,
.list li:after,
#main #header .inner .sns:after,
#main #header .box:after,
#main #header .inner .logo_01:after,
#main #header .inner .logo_02:after,
#main #header .inner .logo_03:after,
#main #header .inner .sns :after,
.column .left:after,
.column .right:after,
.column .col:after {
display: block;
clear: both;
height: 0;
content: "";
}

/*base
-----------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
html {
line-height: 1;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: "";
content: none;
}
input,
textarea {
margin: 0;
padding: 0;
}
ol,ul {
list-style: none;
}
.column .col {
float:left;
margin-left:5px;
margin-right:40px;
width:310px;
}

.column .left {
float: left;
}
.column .right {
float: right;
}

body {
font-family: Arial,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, YuGothic, "游ゴシック", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 20px;
width: 100%;
min-width: 1040px;
}
.ie8 body {
font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

a {
color: #fff;
text-decoration:none;
}
a:hover {
color: #cc0011;

}

.note_01 {
font-size: 12px;
line-height: 20px;
color: #8c8c8c;
margin-top: 18px;
}

.note_02 {
font-size: 12px;
line-height: 20px;
}
.note_02.type {
color: #8c8c8c;
}
.note_02 li {
position: relative;
margin-top: 10px;
padding-left: 1.5em;
}
.note_02 li .mark {
position: absolute;
top: 0;
left: 0;
display: block;
}
.note_02.num {
margin-top: 30px;
}
.note_02.num li {
padding-left: 2em;
}

strong {
color: #e60012;
}


.center {
text-align: center !important;
}

p.lead {
line-height: 32px;
max-height: 100%;
-webkit-text-size-adjust: 100%;
color: #323232;
margin-top: 33px;
}

p.note {
font-size: 15px;
max-height: 100%;
-webkit-text-size-adjust: 100%;
color: #323232;
}


/*content
-----------------------------------------*/
.content {
text-align: center;
}

/*#top
-----------------------------------------*/
#main #top {
background: #004ea2 url(/sp/pw20/images/top_bg.jpg) no-repeat center;
width: 100%;
min-width: 1040px;
padding: 0 0 18px;
}

#main #top .inner {
width: 1040px;
margin: 0 auto;
position:relative;
}

#main #top .inner .logo_01 {
float: right;
padding: 20px 0 0 0;
}

#main #top .inner .sns {
position:absolute;
top:110px;
right:30px;
width:180px;
}

#main #top .inner ul {
text-align:left;
margin:40px 0 0 30px;
}

#main #top .inner ul li {
padding-bottom:18px;
}

#main #top .inner .icon {
position: relative;
width: 311px;
margin-top: 28px;
margin-bottom: 102px;
}

#main #top p.img {
text-align:left;
padding:25px 0 8px 107px;
}

#main #top p.img01 {
position: absolute;
left: 533px;
top:322px;
}


/*#title
-----------------------------------------*/
#main #title {
background: #f8f8f8;
width: 100%;
min-width: 1040px;
padding: 60px 0 60px;
}

#main #title .inner {
width: 1040px;
margin: 0 auto;
}

#main #title h1 {
margin-top:60px;
}

#main #title h4 {
font-size:24px;
font-weight:bold;
color:#004ea2;
margin-bottom:20px;
height:40px;
}

#main #title h4 span{
padding:5px 0 5px 15px;
font-weight:bold;
}

#main #title h4 img {
vertical-align:middle;
}

.hover:hover{
opacity: .7;
transition-property: all;
transition: 0.3s;
}

#main #title p.img {
margin-top: 53px;
margin-bottom: 128px;
padding: 0 0 0 48px;
}

#main #title p.price{
text-align:left;
font-size:20px;
line-height: 30px;
margin-top: 24px;
}

#main #title p.price span{
font-size:32px;
}

/*#use
-----------------------------------------*/
#main #use {
background: #0081cc;
width: 100%;
min-width: 1040px;
padding: 60px 0 60px;
}

#use .inner {
width: 1040px;
height:312px;
margin: 0 auto;
position:relative;
}

#main #use h3 {
font-size:32px;
font-weight:bold;
color:#fff;
margin-bottom:20px;
height:40px;
}

#use .img01{
position:absolute;
left:90px;
top:72px;
}
#use .img02{
position:absolute;
left:423px;
top:72px;
}
#use .img03{
position:absolute;
left:741px;
top:72px;
}

#use .inner span.lead {
margin-top:-3px;
font-seize:24px;
line-height: 32px;
color: #fff;
font-weight:bold;
}

/*#manage
-----------------------------------------*/
#main #manage {
background: #f8f8f8 url("/sp/pw20/images/manage_bg.png") no-repeat center top;
width: 100%;
min-width: 1040px;
padding: 60px 0 30px;
}

#manage div .bg{
background: url("/sp/pw20/images/img_manage_01.png") no-repeat center top;
width: 100%;
}


#manage .inner {
width: 1040px;
margin: 0 auto;
position:relative;
}

#main #manage p.img01 {
position: absolute;
left: 520px;
top:95px;
}

#manage dl {
width:455px;
text-align:left;
margin-top:40px;
}

#manage dl dt {
background: url("/sp/pw20/images/manage_icon-01.png") 0% no-repeat;
height:46px;
font-size:32px;
font-weight:bold;
color:#0081cc;
text-align:left;
padding-left:50px;
padding-top:20px;
}

#manage dl dd {
font-size:18px;
line-height:1.6em;
text-align:left;
padding-top:6px;
margin-bottom:30px;
}

#manage div .bg{
background: url("/sp/pw20/images/img_manage_01.png") no-repeat 60%;
}


/*#check
-----------------------------------------*/
#main #check {
background: url("/sp/pw20/images/check_bg.png") repeat;
width: 100%;
min-width: 1040px;
padding: 60px 0 60px 0;
}

#check .inner {
width: 1040px;
margin: 0 auto;
}
#main #check ul {
width:100%;
}

#main #check li {
float:left;
width:325px;
margin-bottom:30px;
}
.list li {
position: relative;
display: inline-block;
margin: 0 0 0 0;
padding: 0;
}
.list input {
position: absolute;
top: 0;
left:0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
cursor: hand;
}

.list input {
position: absolute;
top: 0;
left:0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
cursor: hand;
}

.list input img {
left:0;
}

.list input[type="checkbox"] + label {
display: block;
background-image: url("/sp/pw20/images/check_icon_check.png");
background-size: 43px 43px;
background-position: left center;
background-repeat: no-repeat;
padding: 4px 0 0 7px;
}

.list input[type="checkbox"]:checked + label {
background-image: url("/sp/pw20/images/check_icon_checked.png");
color:#fff;
}

.list :hover img{
visibility: hidden;
}

.bg1{
background: url("/sp/pw20/images/check_img_03_o.png") no-repeat 33px 4px;
}

.bg2{
background: url("/sp/pw20/images/check_img_04_o.png") no-repeat 33px 4px;
}

.bg3{
background: url("/sp/pw20/images/check_img_05_o.png") no-repeat 33px 4px;
}

.bg4{
background: url("/sp/pw20/images/check_img_06_o.png") no-repeat 33px 4px;
}

.bg5{
background: url("/sp/pw20/images/check_img_07_o.png") no-repeat 33px 4px;
}

.bg6{
background: url("/sp/pw20/images/check_img_08_o.png") no-repeat 33px 4px;
}

.suggest{
opacity: 1;
}
.suggest.hide{
opacity: 0;
}
.suggest.transition{
-webkit-transition: opacity 2000ms;
transition: opacity 2000ms;
}

/*#name
-----------------------------------------*/
#main #name {
background: #f8f8f8;
padding: 60px 0 60px;
}

#name .inner {
width: 1040px;
margin: 0 auto;
}

#main #name h3 {
font-size:32px;
font-weight:bold;
color:#004ea2;
margin-bottom:15px;
}

#main #name ul {
font-size: 12px;
line-height: 22px;
max-height: 100%;
text-align: left;
color: #000;
margin-top:40px;
text-indent: -1em;
margin-left:1em;
}

/*#soft
-----------------------------------------*/
#main #soft {
background: #d3edfb;
padding: 60px 0 60px;
}

#soft .inner {
width: 1040px;
margin: 0 auto;
}

#main #soft h3 {
font-size:32px;
font-weight:bold;
color:#004ea2;
}

#main #soft h4 {
font-size:18px;
font-weight:bold;
color:#000;
margin-bottom:15px;
padding-top:10px;
}

#main #soft p.txt {
width:460px;
line-height:1.6em;
text-align:left;
font-size:18px;
}

#main #soft .btn {
background-color: rgba(204,0,17,1);
background-image: url('/sp/pw20/images/soft_icon_01.png');
background-repeat: no-repeat;
background-position: 31px 23px;
border: solid 4px rgba(204,0,17,1);
width: 450px;
height: 80px;
padding: px 0px 0px 0px;
display: inline-block;
font-size: 20px;
line-height: 84px;
text-align: center;
color:#ffffff !important;
font-weight: bold !important;
text-decoration:none;
}

#main #soft  p .btn:hover {
background-color: rgba(255,255,255,1);
background-image: url('/sp/pw20/images/soft_icon_01_o.png');
color: #cc0011 !important;
text-decoration:none;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#main #soft .btn span.bold{
font-weight:bold !important;
padding-left:50px;}

#main #soft .btn span.small, .btn_off span.small {
font-size: 16px;
padding:0 10px 0 10px !important;
}

#main #soft .btn_off {
background-color: rgba(179,179,179,1);
width: 460px;
height: 88px;
display: inline-block;
font-size: 20px;
line-height: 88px;
text-align: center;
color: rgba(255,255,255,1);
font-weight: bold;
}

/*#spec
-----------------------------------------*/
#main #spec {
background: #f8f8f8;
padding: 60px 0 80px;
}

#spec .inner {
width: 1040px;
margin: 0 auto;
}

#main #spec h3 {
font-size:32px;
font-weight:bold;
color:#004ea2;
}

#main #spec h4 {
font-size:18px;
font-weight:bold;
color:#000;
margin-bottom:20px;
padding-top:10px;
text-align:left;
}

#spec table {
width: 460px;
border-top: 1px solid #dbdbdb;
font-size: 14px;
line-height:26px;
border-collapse:collapse;
}
#spec table th{
width: 180px;
font-weight:normal;
}

#spec table th,
#spec table td {
border-bottom: 1px solid #dbdbdb;
text-align: left;
vertical-align: middle;
padding:10px 0 10px;
}

#spec .note{
width:460px;
text-align:left;
font-size: 12px;
line-height: 22px;
max-height: 100%;
color: #000;
margin-top:40px;
text-indent: -1em;
margin-left:1em;
}

#spec ul {
font-size: 12px;
line-height: 22px;
max-height: 100%;
text-align: left;
color: #000;
text-indent: -1em;
margin-left:1em;
}

/*#.footer
-----------------------------------------*/
#main .footer {
background: #1676e1;
width: 100%;
min-width: 1040px;
padding: 25px 0 25px;
}

#main .footer .inner {
width: 1040px;
margin: 0 auto;
}

#main .footer p {
font-size: 14px;
text-align: center;
color: #fff;
display: block;
}


/*etc
-----------------------------------------*/

div.adj{
margin-left:30px;
margin-right:30px;
text-align:center;
}


.mt0 {
margin-top: 0 !important;
}

.mt5 {
margin-top: 5px !important;
}

.mt10 {
margin-top: 10px !important;
}

.mt15 {
margin-top: 15px !important;
}

.mt20 {
margin-top: 20px !important;
}

.mt25 {
margin-top: 25px !important;
}

.mt30 {
margin-top: 30px !important;
}

.mt35 {
margin-top: 35px !important;
}

.mt40 {
margin-top: 40px !important;
}

.mt45 {
margin-top: 45px !important;
}

.mt50 {
margin-top: 50px !important;
}
.pl10{
padding-left:10px !important;
}

.mobile .bg {
background-attachment: scroll !important;
height: 530px;
}
.mobile .list li {
margin-top: 10px;
}
.mobile .list li a {
font-size: 22px !important;
}
.mobile .list li:hover a {
color: #000;
}
.mobile #main .nav {
position: absolute;
min-width: 640px;
}
.mobile .mainVisual {
margin-top: 95px;
}

.note_red {
  margin-top: 10px;
  font-size: 15px;
  text-align: left;
  color: #f00;
}

.link_button {
  font-weight: bold;/*太字に*/
  text-decoration: none;/*下線消す*/
  background: silver;/*背景をシルバーに*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
/*以下カーソルを当てたとき*/
.link_button:hover {
  background: silver;/*背景色をシルバーに*/
  text-decoration: none;/*下線を消す*/
}

/*以下訪問済みのデザイン*/
.link_button:visited {
  color: gray;/*文字をグレイに*/
}