File: /home/kusanagi/lease-back.com/DocumentRoot/wp-content/themes/original/lp/lp-sp.css
@charset "utf-8";
/*
Theme Name: リースバック支援センター
Theme URI:
Description: リースバック支援センター
Version: 1.0
Author: monokus.jp
*/
/* BODY
---------------------------------------------*/
body {
line-height: 1.0em;
margin: 0;
font-family: Meiryo,'メイリオ','Lucida Grande',Verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;
color: #666;
-webkit-text-size-adjust: 100%;
font-size: 15px;
line-height: 1.3em;
}
/*
body {
font-size: 30px;
line-height: 1.3em;
}
@media screen and (max-width: 480px) {
body {
font-size: 15px;
line-height: 1.3em;
}
}
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
a {
-webkit-tap-highlight-color: transparent;
}
q:before,q:after { content: ''; }
abbr,acronym {
border: 0;
font-variant: normal; }
sup { vertical-align: baseline; }
sub { vertical-align: baseline; }
/* legend {
color: #000;
} */
input,button,textarea,select,optgroup,option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
input,button,textarea,select {
*font-size: 100%;
}
img {
max-width: 100%;
height: auto;
}
img.responsive {
width: 100%;
height: auto;
}
/* 全体 共通設定
--------------------------------------------------------*/
html {
-webkit-text-size-adjust: 100%;
}
.sp-btns2 {
padding: 0.8em 2.5% 0.5em;
}
.sp-btns2 ul {
margin: 0 -0.15em;
}
.sp-btns2 li {
float: left;
width: 50%;
padding: 0 0 0.6em;
}
.sp-btns2 li a ,
.sp-btns2 li span {
display: block;
margin: 0 0.3em;
}
.sp-btns2 li a img {
display: block;
width: 100%;
height: auto;
}
.sp-btns2 li:nth-child(2n+1) {
clear: both;
}
.sp-btns3 {
padding: 0.8em 2.5% 0.5em;
}
.sp-btns3 ul {
margin: 0 -0.15em;
}
.sp-btns3 li {
float: left;
width: 33.33%;
}
.sp-btns3 li {
padding: 0 0 0.3em;
}
.sp-btns3 li a,
.sp-btns3 li span {
display: block;
margin: 0 0.15em;
}
.sp-btns3 li a img ,
.sp-btns3 li span img {
display: block;
width: 100%;
height: auto;
}
.sp-btns3 li:nth-child(3n+1) {
clear: both;
}
.sp-btns4 {
}
.sp-btns4 ul {
margin: 0 -0.15em;
}
.sp-btns4 li {
float: left;
width: 25%;
}
.sp-btns4 li {
padding: 0 0 0.3em;
}
.btns4 li a ,
.btns4 li span {
display: block;
margin: 0 0.15em;
}
.sp-btns4 li a img ,
.sp-btns4 li span img {
display: block;
width: 100%;
height: auto;
}
.sp-btns4 li:nth-child(4n+1) {
clear: both;
}
/* レイアウト
-------------------------- */
/* body {
background: #ccc;
} */
#viewport {
/* max-width: 640px;
background: #fff; */
margin: 0 auto;
max-width: 100%;
overflow: hidden;
/* overflow: hidden; */
visibility: visible !important;
}
#wrap {
}
#contents {
}
#footer {
clear: both;
}
/* Header
---------------------------------------------*/
#header {
background: #fff;
border-bottom: 0.8em solid #022859;
position: relative;
z-index: 99995;
}
#header .bg {
display: block;
width: 90%;
height: auto;
padding: 2.5% 5%;
}
#header .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
width: auto;
height: auto;
padding: 2.5% 5%;
}
#header .links {
}
#header .links a {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: auto;
height: auto;
}
#header .links .logo a { left: 0; right: 60%; }
#header .links .tel a { left: 40%; right: 37%; }
#header .links .contact a { left: 63%; right: 15%; }
#header .links .menu a { left: 83%; right: 0; }
/* Main Contents
---------------------------------------------*/
.main_image {
}
.main_image img {
}
.nav01 {
background: #022859;
}
.nav01.sp-btns2 {
padding: 0.8em 2.5% 0.5em;
}
.nav01.sp-btns2 li:first-child {
float: none;
width: 100%;
}
.nav01.sp-btns2 li:nth-child(2n+1) {
clear: none !important;
}
.nav01.sp-btns2 li:nth-child(2n) {
clear: both !important;
}
.nav02 {
background: #fff;
}
.nav02 h2 {
padding: 2em 2.5% 1em;
text-align: center;
}
.nav03 {
margin: 0;
background: #f2f2f2;
font-size: 90%;
font-weight: normal;
line-height: 1.7em;
color: #000;
}
.nav03 .stress {
color: #d95f18;
}
.nav03 .inner {
}
.nav03 h2 {
padding: 2em 2.5% 0.7em;
text-align: center;
}
.nav03 .text01 {
padding: 0 0 1.5em;
text-align: center;
}
.nav03 .text02 {
padding: 0 2.5% 0;
text-align: center;
}
.nav04 {
background: #3ea8d8;
padding: 1.2em;
}
.nav04 .inner {
position: relative;
}
.nav04 ul {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 33%;
}
.nav04 ul li a {
position: absolute;
left: 0;
right: 0;
display: block;
width: auto;
height: auto;
}
.nav04 ul li:first-child a { top: 0; bottom: 50%; }
.nav04 ul li:last-child a { top: 50%; bottom: 0; }
.nav04 ul li img {
display: none;
}
.nav05 {
background: #fff;
}
.nav05 h2 {
padding: 2em 2.5% 1em;
text-align: center;
}
.nav05 .list {
margin: 0 2.5%;
}
.nav06 {
margin: 0;
padding: 2em 2.5% 1em;
background: #fff2cc;
}
.nav06 h2 {
padding: 0 0 2em;
text-align: center;
}
.nav06 .tab {
display: table;
table-layout: fixed;
width: 100%;
}
.nav06 .tab ul {
display: table-row;
}
.nav06 .tab li {
display: table-cell;
width: 25%;
}
.nav06 .tab li a {
display: block;
padding: 0.1em 0.8em 0.1em 0;
background-image: url(images_sp/lp01/nav06_tab.png);
background-position: right bottom;
background-repeat: no-repeat;
background-size: 100% auto !important;
font-size: 90%;
font-weight: bold;
line-height: 1.2em;
color: #fff;
text-align: right;
text-decoration: none;
}
.nav06 .tab li a:before {
display: block;
font-size: 90%;
font-weight: normal;
line-height: 1.1em;
}
.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_sp/lp01/nav06_tab_active.png);
color: #000;
}
.nav06 .contents {
position: relative;
z-index: 2;
margin: -1px 0 0;
background: #fff;
}
.nav06 .contents ul {
padding: 1.2em;
box-sizing: border-box;
}
.nav06 .contents ul li {
display: none;
}
.nav06 .contents ul li.active {
display: block;
}
.nav06 .contents ul li .image {
margin: 0 0 1.2em;
}
.nav06 .contents ul li .image img {
display: block;
width: 100%;
height: auto;
}
.nav06 .contents ul li .in {
}
.nav06 .contents ul li h3 {
padding: 0 0 0.4em;
margin: 0 0 0.8em;
border-bottom: 1px solid #be5f24;
font-size: 140%;
font-weight: bold;
line-height: 1.2em;
color: #be5f24;
}
.nav06 .contents ul li .text {
}
.nav07 {
margin: 0;
padding: 1em 2.5%;
background: #fff2cc;
text-align: center;
}
.nav08 {
margin: 0;
padding: 0 2.5%;
font-size: 100%;
font-weight: normal;
line-height: 1.5em;
color: #022859;
}
.nav08 h2 {
padding: 2em 0 1em;
text-align: center;
}
.nav08 .image {
padding: 0 0 2em;
text-align: center;
}
.nav08 h3 {
padding: 0 0 1em;
text-align: center;
}
.nav08 .list {
margin: 0 2.5%;
}
.nav08 .list li {
margin: 0 0 1em;
padding: 0.8em 0.8em 0.8em 4.5em;
background: #f2f2f2;
font-size: 90%;
font-weight: normal;
line-height: 1.5em;
position: relative;
}
.nav08 .list li:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
width: 3.5em;
height: auto;
content: '';
background-color: #d95f18;
background-position: center 1em;
background-repeat: no-repeat;
background-size: 70% auto !important;
}
.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: 150%;
font-weight: normal;
line-height: 1.5em;
color: #bf9004;
}
.nav09 {
margin: 0;
padding: 0 2.5%;
font-size: 100%;
font-weight: normal;
line-height: 1.5em;
color: #022859;
}
.nav09 h2 {
padding: 2em 0 4em;
text-align: center;
}
.nav09 .image {
padding: 0 0 4em;
text-align: center;
}
.nav09 h3 {
padding: 0 0 2em;
text-align: center;
}
.nav09 .list {
margin: 0 2.5%;
}
.nav09 .list li {
margin: 0 0 1em;
background: #f2f2f2;
font-size: 90%;
font-weight: normal;
line-height: 1.5em;
position: relative;
}
.nav09 .list li:before {
display: block;
height: auto;
content: '特徴1';
padding: 0.3em 0 0.2em;
font-size: 100%;
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: 0.8em;
}
.nav09 h4 {
font-size: 150%;
font-weight: normal;
line-height: 1.5em;
color: #be5f24;
}
.qa {
margin: 0;
padding: 0 0 1em;
background: #f2f2f2;
font-size: 90%;
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: 1px;
content: '';
padding: 0 0 20%;
background: #022859;
}
.qa:after {
position: absolute;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
display: block;
width: 0;
height: 0;
content: '';
border-color: #022859 transparent transparent transparent;
border-width: 25vw;
border-style: solid;
}
.qa .inner {
position: relative;
z-index: 2;
background: url(images/lp01/qa_bg_mask.png) center center repeat;
background-size: 40% auto;
}
.qa h2 {
height: 1px;
padding: 0 0 20%;
margin: 0 0 10%;
position: relative;
}
.qa h2 img {
position: absolute;
left: 2.5%;
right: 2.5%;
top: 0;
bottom: 0;
display: block;
width: 95%;
height: auto;
margin: auto 0;
}
.qa .list {
margin: 0 auto;
padding: 0 2.5%;
}
.qa .list li {
margin: 0 0 1em;
}
.qa .list dl {
background: #fff;
padding: 1em 0 0.8em 4em;
min-height: 100px;
box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.2);
position: relative;
}
.qa .list dl:before {
position: absolute;
left: 0;
top: 0;
display: block;
width: 4em;
height: 4em;
content: '';
background: #022859 url(images/lp01/qa_icon_q.png) center center no-repeat;
background-size: 65% auto;
}
.qa .list dl dt {
padding: 0 0 0.8em 2em;
color: #022859;
font-size: 120%;
font-weight: bold;
line-height: 1.3em;
border-bottom: 1px solid #022859;
}
.qa .list dl dd {
padding: 0.8em 0.6em 0 2em;
}
.contact_form {
background: #fff2cc;
padding: 2em 2.5%;
}
.contact_form form {
background: #fff;
margin: 0 auto;
padding: 2em 2.5% 1px;
box-sizing: border-box;
}
.contact_form form h2 {
padding: 0 2.5% 2em;
text-align: center;
}
.contact_form form input[type="text"] ,
.contact_form form input[type="email"],
.contact_form form input[type="number"] {
width: 100%;
height: 2.5em;
box-sizing: border-box;
padding: 0 0.5em;
border-radius: 0.3em;
border: 1px solid #d9d9d9;
box-shadow: none !important;
-moz-appearance: none;
-webkit-appearance: none;
}
.contact_form form textarea {
width: 100%;
height: 7.5em;
box-sizing: border-box;
padding: 0 0.5em;
border-radius: 0.3em;
border: 2px solid #d9d9d9;
box-shadow: none !important;
-moz-appearance: none;
-webkit-appearance: none;
}
.contact_form form input[type="radio"] ,
.contact_form form input[type="checkbox"] {
margin: 0 0.3em 0 0;
}
.contact_form dl {
border-bottom: 1px solid #d9d9d9;
padding: 0.8em 0;
}
.contact_form dl dt {
padding: 0 0 0.8em;
box-sizing: border-box;
font-size: 100%;
font-weight: bold;
line-height: 1.3em;
color: #000;
}
.contact_form dl dt .required {
color: #d95f18;
}
.contact_form dl dt .note {
font-size: 80%;
font-weight: normal;
line-height: 1.3em;
}
.contact_form dl dt .note2 {
font-size: 80%;
font-weight: normal;
line-height: 1.3em;
color: #d95f18;
}
.contact_form dl dd {
}
.contact_form dl dd .note {
font-size: 80%;
font-weight: normal;
line-height: 1.3em;
color: #808080;
}
.contact_form .submit {
padding: 1.4em 0;
text-align: center;
}
.contact_form .submit button {
border: none !important;
background: none !important;
margin: 0 25% !important;
padding: 0 !important;
cursor: pointer;
}
.contact_form .tel_contact {
margin: 0.5em 0 0;
}
.contact_form .tel_contact .subtitle {
display: inline-block;
padding: 0.2em 1em 0.1em;
margin: 0 0.5em 0 0;
border-radius: 0.4em;
background: #d9d9d9;
color: #000;
}
.contact_form .tel_contact label {
display: inline-block;
padding: 0.2em 0 0.1em 0.4em;
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: 0 2.5%;
color: #022859;
}
#footer .links ul {
margin: 0 2.5%;
}
#footer .links li {
float: left;
width: 50%;
border-bottom: 1px dashed #aaa;
}
#footer .links li a {
display: block;
padding: 0.8em 0;
color: #022859;
text-align: center;
}
#footer .copyright {
text-align: center;
padding: 0.8em 0;
}
.fixed_nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: block;
background: rgba(255,255,255,0.7);
border-top: 0.3em solid #022859;
}
.fixed_nav .links {
padding: 0.5em 2.5%;
}
.fixed_nav .links a {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: auto;
height: auto;
}
.fixed_nav .links .tel a { left: 0; right: 57%; }
.fixed_nav .links .contact a { left: 43%; right: 15%; }
.fixed_nav .links .menu a { left: 85%; right: 0; }
.overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99990;
display: block;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.4);
}
.submenu {
position: relative;
}
.submenu ul {
position: absolute;
left: 0;
right: 0;
width: auto;
background: #fff;
}
#header .submenu ul { top: 0; }
.fixed_nav .submenu ul { bottom: 0; }
.submenu ul li {
border-bottom: 1px solid #bb942c;
}
.submenu ul li a {
display: block;
padding: 1.2em 2.5% 1.0em;
font-size: 120%;
line-height: 1.1em;
color: #443322;
}
.submenu ul li:first-child a {
background: #bb942c;
color: #fff;
}