File: /home/kusanagi/lease-back.com/DocumentRoot/wp-content/themes/original/lp/lp-pc.css
@charset "utf-8";
/*
Theme Name: リースバック支援センター
Theme URI:
Description: リースバック支援センター
Version: 1.0
Author: monokus.jp
*/
/* BODY
---------------------------------------------*/
body {
text-align: left;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 16px;
color: #555;
background: #fff;
}
img {
vertical-align: bottom;
border: none;
}
.op {
opacity: 1;
transition: opacity 0.5s linear;
}
.op:hover {
opacity: 0.6;
}
/* テーブル対応
---------------------------------------------*/
table.mainstyle{
border: 1px #b9b9b9 solid;
border-collapse: collapse;
border-spacing: 0;
margin:15px 20px 8px 20px;
}
table.mainstyle th {
font-weight: bold;
padding:10px;
border: 1px #b9b9b9 solid;
border-width: 0 0 1px 1px;
background:#FFFFCC;
}
table.mainstyle td {
padding:10px;
border: 1px #b9b9b9 solid;
border-width: 0 0 1px 1px;
background:#fff;
}
/* Layout
---------------------------------------------*/
#viewport {
width: 100%;
overflow: hidden;
visibility: visible !important;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
#wrap {
}
#contents {
width: 1000px;
margin: 0 auto;
padding: 0;
}
/* #sidebar {
width: 230px;
float: left;
}
#main {
width: 750px;
float: right;
} */
#footer {
clear: both;
}
/*
#contents.wide {
}
#contents.wide #main {
width: auto;
float: none !important;
}
*/
#contents.liquid {
width: 100%;
}
#contents.liquid #main {
width: auto;
float: none !important;
}
/* Header
---------------------------------------------*/
#header {
background: #fff;
border-bottom: 10px solid #022859;
font-size: 14px;
font-weight: normal;
line-height: 1.3em;
color: #4d4d4d;
}
#header .inner {
margin: 0 auto;
width: 1000px;
min-height: 75px;
padding: 1px 0 0 ;
position: relative;
}
#header .logo {
float: left;
padding: 8px 0 0;
}
#header .logo h1 {
padding: 0 0 5px;
}
#header .tel {
float: right;
margin: 8px 164px 0 0;
position: relative;
}
#header .tel .links {
position: absolute;
right: -8px;
bottom: -4px;
}
#header .tel .links li {
display: inline-block;
}
#header .tel .links li a {
display: block;
padding: 2px 2px 0;
background: #f2f2f2;
font-size: 15px;
font-weight: bold;
line-height: 1.3em;
color: #bf9004;
text-decoration: none;
}
#header .contact {
}
#header .contact a {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #bf9004;
width: 142px;
height: auto;
}
#header .contact a img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
display: block;
}
/* Main Contents
---------------------------------------------*/
.main_image {
height: 600px;
position: relative;
}
.main_image img {
position: absolute;
left: 50%;
top: 0;
display: block;
margin: 0 0 0 -900px;
}
.nav01 {
margin: 0;
padding: 40px 0;
background: #022859;
}
.nav01 ul {
width: 1000px;
padding: 0 0 0 28px;
box-sizing: border-box;
margin: 0 auto;
}
.nav01 ul li {
float: left;
padding: 0 0 0 4px;
}
.nav02 {
margin: 0;
padding: 40px 0;
background: #fff;
}
.nav02 h2 {
padding: 0 0 50px;
text-align: center;
}
.nav02 .list {
width: 1000px;
margin: 0 auto;
}
.nav02 ul {
margin: 0 -37px;
}
.nav02 ul li {
float: left;
padding: 0 0 30px 37px;
}
.nav03 {
margin: 0;
padding: 40px 0 50px;
background: #f2f2f2;
font-size: 24px;
font-weight: normal;
line-height: 1.7em;
color: #000;
}
.nav03 .stress {
color: #d95f18;
}
.nav03 .inner {
width: 1000px;
margin: 0 auto;
}
.nav03 h2 {
padding: 0 0 40px;
text-align: center;
}
.nav03 .text01 {
padding: 0 0 30px;
text-align: center;
}
.nav03 .text02 {
padding: 0 0 40px;
text-align: center;
}
.nav03 .text03 {
padding: 0 35px;
}
.nav03 .text03 li:first-child { float: left; }
.nav03 .text03 li:last-child { float: right; }
.nav04 {
background: #3ea8d8;
padding: 30px 0 50px;
}
.nav04 .inner {
width: 1000px;
margin: 0 auto;
position: relative;
}
.nav04 ul {
position: absolute;
right: 20px;
bottom: 20px;
}
.nav04 ul li {
display: inline-block;
padding: 0 0 0 12px;
}
.nav05 {
margin: 0;
padding: 40px 0;
background: #fff;
}
.nav05 h2 {
padding: 0 0 50px;
text-align: center;
}
.nav05 .list {
width: 1000px;
margin: 0 auto;
}
.nav05 ul {
margin: 0 -43px;
}
.nav05 ul li {
float: left;
padding: 0 0 20px 43px;
}
.nav06 {
margin: 0;
padding: 40px 0 0;
background: #fff2cc;
}
.nav06 h2 {
padding: 0 0 50px;
text-align: center;
}
.nav06 .tab {
width: 1000px;
margin: 0 auto;
}
.nav06 .tab li {
float: left;
width: 250px;
}
.nav06 .tab li a {
display: block;
width: 263px;
height: 149px;
box-sizing: border-box;
margin: 0 -13px 0 0;
background-image: url(images/lp01/nav06_tab.png);
background-position: left bottom;
background-repeat: no-repeat;
font-size: 24px;
font-weight: bold;
line-height: 1.3em;
color: #fff;
text-align: center;
text-decoration: none;
}
.nav06 .tab li a:before {
display: block;
padding: 34px 0 17px;
font-size: 24px;
font-weight: normal;
line-height: 1.3em;
content: ' ';
}
.nav06 .tab li:nth-child(1) a:before { content: 'case 1'; }
.nav06 .tab li:nth-child(2) a:before { content: 'case 2'; }
.nav06 .tab li:nth-child(3) a:before { content: 'case 3'; }
.nav06 .tab li:nth-child(4) a:before { content: 'case 4'; }
.nav06 .tab li a:hover,
.nav06 .tab li a.active {
background-image: url(images/lp01/nav06_tab_active.png);
color: #000;
}
.nav06 .contents {
position: relative;
z-index: 2;
margin: -10px 0 0;
background: #fff;
}
.nav06 .contents ul {
width: 1000px;
margin: 0 auto;
padding: 60px 40px ;
box-sizing: border-box;
}
.nav06 .contents ul li {
display: none;
}
.nav06 .contents ul li.active {
display: flex;
}
.nav06 .contents ul li .image {
width: 350px;
}
.nav06 .contents ul li .image img {
display: block;
width: 100%;
height: auto;
}
.nav06 .contents ul li .in {
width: 565px;
}
.nav06 .contents ul li h3 {
padding: 0 0 16px 34px;
border-bottom: 1px solid #be5f24;
font-size: 32px;
font-weight: normal;
line-height: 1.5em;
color: #be5f24;
}
.nav06 .contents ul li .text {
padding: 16px 0 0 34px;
}
.nav07 {
margin: 0;
padding: 50px 0 40px;
background: #fff2cc;
text-align: center;
}
.nav08 {
margin: 0;
padding: 40px 0;
background: #fff;
font-size: 21px;
font-weight: normal;
line-height: 1.5em;
color: #022859;
}
.nav08 h2 {
padding: 0 0 50px;
text-align: center;
}
.nav08 .image {
padding: 0 0 50px;
text-align: center;
}
.nav08 h3 {
padding: 0 0 30px;
text-align: center;
}
.nav08 .list {
width: 1000px;
margin: 0 auto;
}
.nav08 .list li {
margin: 0 0 18px;
padding: 18px 18px 18px 131px;
background: #f2f2f2;
position: relative;
}
.nav08 .list li:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
width: 113px;
height: auto;
content: '';
background-color: #d95f18;
background-position: center center;
background-repeat: no-repeat;
}
.nav08 .list li:nth-child(1):before { background-image: url(images/lp01/nav08_icon01.png); }
.nav08 .list li:nth-child(2):before { background-image: url(images/lp01/nav08_icon02.png); }
.nav08 .list li:nth-child(3):before { background-image: url(images/lp01/nav08_icon03.png); }
.nav08 .list li:nth-child(4):before { background-image: url(images/lp01/nav08_icon04.png); }
.nav08 h4 {
font-size: 30px;
font-weight: normal;
line-height: 1.5em;
color: #bf9004;
}
.nav09 {
margin: 0;
padding: 40px 0;
background: #fff;
font-size: 18px;
font-weight: normal;
line-height: 1.5em;
color: #022859;
}
.nav09 h2 {
padding: 0 0 60px;
text-align: center;
}
.nav09 .image {
text-align: center;
padding: 0 0 48px;
}
.nav09 .image02 {
padding: 100px 0 0;
text-align: center;
background: url(images/lp02/nav09_arrow01.png) center top no-repeat;
}
.nav09 h3 {
padding: 40px 0 30px;
text-align: center;
}
.nav09 .list {
width: 1000px;
margin: 0 auto;
}
.nav09 .list ul {
display: flex;
flex-flow: row wrap;
margin: 0 -40px;
}
.nav09 .list li:nth-child(1) { order: 1; }
.nav09 .list li:nth-child(2) { order: 3; }
.nav09 .list li:nth-child(3) { order: 5; }
.nav09 .list li:nth-child(4) { order: 2; }
.nav09 .list li:nth-child(5) { order: 4; }
.nav09 .list li:nth-child(6) { order: 6; }
.nav09 .list li {
margin: 0 0 18px 40px;
width: 480px;
box-sizing: border-box;
background: #f2f2f2;
position: relative;
}
.nav09 .list li:before {
display: block;
height: auto;
content: '特徴1';
padding: 8px 0 5px;
font-size: 21px;
font-weight: normal;
line-height: 1em;
color: #fff;
text-align: center;
background-color: #022859;
}
.nav09 .list li:nth-child(1):before { content: '特徴1'; }
.nav09 .list li:nth-child(2):before { content: '特徴2'; }
.nav09 .list li:nth-child(3):before { content: '特徴3'; }
.nav09 .list li:nth-child(4):before { content: '特徴4'; }
.nav09 .list li:nth-child(5):before { content: '特徴5'; }
.nav09 .list li:nth-child(6):before { content: '特徴6'; }
.nav09 .list li .in {
padding: 18px;
}
.nav09 .list li h4 {
font-size: 21px;
font-weight: normal;
line-height: 1.5em;
color: #be5f24;
}
.nav09 .list li:nth-child(4) h4,
.nav09 .list li:nth-child(5) h4,
.nav09 .list li:nth-child(6) h4 {
color: #bf9004;
}
.qa {
margin: 0;
padding: 0 0 40px;
background: #f2f2f2;
font-size: 21px;
font-weight: normal;
line-height: 1.5em;
color: #000;
position: relative;
}
.qa:before {
position: absolute;
left: 0;
right: 0;
top: 0;
display: block;
width: auto;
height: 128px;
content: '';
background: #022859;
}
.qa:after {
position: absolute;
left: 0;
right: 0;
top: 125px;
margin: 0 auto;
display: block;
width: 0;
height: 0;
content: '';
border-color: #022859 transparent transparent transparent;
border-width: 60px 65px;
border-style: solid;
}
.qa .inner {
position: relative;
z-index: 2;
background: url(images/lp01/qa_bg_mask.png) center center repeat;
}
.qa h2 {
padding: 40px 0 90px;
text-align: center;
}
.qa .list {
margin: 0 auto;
padding: 40px 0 0;
width: 900px;
}
.qa .list li {
margin: 0 0 30px;
}
.qa .list dl {
background: #fff;
padding: 30px 25px 25px 125px;
min-height: 100px;
box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
position: relative;
}
.qa .list dl:before {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
height: 100px;
content: '';
background: #022859 url(images/lp01/qa_icon_q.png) center center no-repeat;
}
.qa .list dl dt {
padding: 0 0 15px 20px;
color: #022859;
font-size: 30px;
font-weight: normal;
line-height: 1.3em;
border-bottom: 1px solid #022859;
}
.qa .list dl dd {
padding: 15px 0 0 20px;
}
.contact_form {
background: #fff2cc;
padding: 60px 0;
}
.contact_form form {
background: #fff;
width: 900px;
margin: 0 auto;
padding: 40px 40px 1px ;
box-sizing: border-box;
}
.contact_form form h2 {
padding: 0 0 20px;
text-align: center;
}
.contact_form form input[type="text"] ,
.contact_form form input[type="email"],
.contact_form form input[type="number"] {
width: 500px;
height: 30px;
box-sizing: border-box;
padding: 0 5px;
border-radius: 6px;
border: 1px solid #d9d9d9;
}
.contact_form form textarea {
width: 500px;
height: 150px;
box-sizing: border-box;
padding: 0 5px;
border-radius: 6px;
border: 2px solid #d9d9d9;
}
.contact_form form input[type="radio"] ,
.contact_form form input[type="checkbox"] {
margin: 0 10px 0 0;
}
.contact_form dl {
border-bottom: 1px solid #d9d9d9;
display: flex;
align-items: center;
justify-content: center;
}
.contact_form dl dt {
width: 220px;
padding: 22px 12px;
box-sizing: border-box;
font-size: 18px;
line-height: 1.3em;
color: #000;
}
.contact_form dl dt .required {
color: #d95f18;
}
.contact_form dl dt .note {
font-size: 14px;
line-height: 1.3em;
}
.contact_form dl dt .note2 {
margin: 18px 0 0;
font-size: 14px;
line-height: 1.3em;
color: #d95f18;
}
.contact_form dl dd {
width: 660px;
padding: 22px 12px;
box-sizing: border-box;
}
.contact_form dl dd .note {
font-size: 14px;
line-height: 1.3em;
color: #808080;
}
.contact_form .submit {
padding: 22px 0;
text-align: center;
}
.contact_form .submit button {
border: none !important;
background: none !important;
margin: 0 auto !important;
padding: 0 !important;
cursor: pointer;
}
.contact_form .tel_contact {
margin: 8px 0 0;
}
.contact_form .tel_contact .subtitle {
display: inline-block;
padding: 3px 14px 2px;
margin: 0 14px 0 0;
border-radius: 3px;
background: #d9d9d9;
color: #000;
}
.contact_form .tel_contact label {
display: inline-block;
padding: 3px 0 2px 14px;
color: #000;
}
.contact_form dl.saimu {
}
.contact_form dl.saimu .addition {
display: inline-block;
margin: 0 0 0 14px;
}
.contact_form dl.saimu .addition input[type="number"] {
width: 190px;
margin: 0 6px;
}
.contact_form dl.checkboxes {
}
.contact_form dl.checkboxes label {
display: block;
}
.contact_form dl.checkboxes label .sub {
display: block;
padding: 0 0 0 26px;
color: #d95f18;
}
/* Footer
---------------------------------------------*/
#footer {
background: #fff;
}
#footer .links {
padding: 40px 0 30px;
color: #022859;
}
#footer .links ul {
margin: 0 auto;
width: 1000px;
text-align: right;
}
#footer .links li {
display: inline-block;
}
#footer .links li:before {
display: inline-block;
content: '|';
margin: 0 12px;
}
#footer .links li:first-child:before {
display: none;
}
#footer .links li a {
color: #022859;
}
#footer .copyright {
text-align: center;
padding: 40px 0 30px;
}
/* 下層ページ
---------------------------------------------*/
/* BREADCRUMB = TOPIC PATH */
.breadcrumb {
padding: 0;
margin: 12px 0 12px;
font-size: 14px;
}
.breadcrumb a {
}
/* リスト
---------------------------------------------*/
.baselist {
margin: 15px;
}
.baselist ul {
margin: 0 !important;
}
.baselist li {
list-style: none !important;
margin: 0 0 8px;
}
.baselist li a {
display: block;
font-size: 15px;
margin-bottom: 8px;
padding: 7px 5px 7px 35px;
border-bottom: 1px dotted #666;
}
.baselist li a {
color: #666;
text-decoration: none;
font-weight: normal;
}
.baselist li a:hover {
color: #444;
text-decoration: underline;
font-weight: normal;
}
.baselist > ul > li {
background: url(images/lp01/side_menu_icon01.png) 5px 12px no-repeat;
}
.baselist > ul > li ul {
margin-left: 25px !important;
}
.baselist > ul > li ul li {
background: url(./images/lp01/side_menu_icon02.png) 5px 14px no-repeat;
}
/* PADDING & MARGIN SETUP
---------------------------------------------*/
/* MARGIN */
.mt5 {margin-top: 5px !important;}
.mt8 {margin-top: 8px !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;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mb00 {margin-bottom: 0px !important;}
.mb01 {margin-bottom: 1px !important;}
.mb02 {margin-bottom: 2px !important;}
.mb03 {margin-bottom: 3px !important;}
.mb04 {margin-bottom: 4px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb100 {margin-bottom: 100px !important;}
.mr10 {margin-right: 10px !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}
.ml10 {margin-left: 10px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}
/* PADDING */
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}
.pr10 {padding-right: 10px !important;}
.pr20 {padding-right: 20px !important;}
.pr30 {padding-right: 30px !important;}
.pr40 {padding-right: 40px !important;}
.pr50 {padding-right: 50px !important;}
.pl10 {padding-left: 10px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}
/* FLOAT */
.fleft {float: left;}
.fright {float: right;}
/* WP STYLE
---------------------------------------------*/
img.centered ,
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;}
.alignright {float: right;}
.alignleft {float: left;}