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

共通 .top

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

/*---- TOPタイトル ----*/
.top #main_view h2 {
    height: 515px;
    background: url('/img/top/title_index_main.png');
}
.top #main_view .inner {
    position: relative;
}
.top #main_view h2+img {
    position: absolute;
    top: 0;
    left: 0;
    animation: Flash 1.5s infinite;
}
@keyframes Flash {
    50% {
        opacity: 0;
    }
}

/*---- メインナビ ----*/
nav {
    width: 100%;
    margin-bottom: 30px;
}
nav ul {
    width: 1000px;
    height: 52px;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
}
nav ul li {
    width: 142px;
    height: 50px;
    float: left;
    margin-bottom: 2px;
}
nav ul li:first-child {
    margin-left: 3px;
}

/*---- メイン ----*/
.top article:after{
    content: "";
    display: block;
    clear: both;
}

/*---- お問い合わせバナー ----*/
.contact-area .contact-banner {
    background: url('/img/top/banner_contact_top.png');
}


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

トップページ /index.php

----------------------------------------*/
#index article {
    padding: 0;
    background: #fffcf9;
}

/*---- 商品一覧 ----*/
#products div {
    width: 320px;
    float: left;
    margin: 0 20px 20px 0;
    display: inline-block;
    position: relative;
}
#products div:nth-child(3n) {
    margin-right: 0;
}
#products div a.products-link {
    width: 320px;
    height: 280px;
    display: block;
}
#products div a.products-link:hover img {
    opacity: 0.7;
}
#products div ul {
    display: inline-block;
}
#products div ul li {
    width: 106px;
    float: left;
    margin-right: 1px;
}
#products div ul li:last-child {
    margin-right: 0;
}
#products div ul li a {
    width: 106px;
    height: 29px;
    display: block;
}

/*---- キャンペーンバナー ----*/
#campaign-banner ul {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
#campaign-banner ul li:first-child {
    width: 100%;
    margin-bottom: 30px;
}
#campaign-banner ul li:nth-child(2),
#campaign-banner ul li:last-child {
    width: 490px;
    margin-bottom: 0;
}
#campaign-banner ul li a:hover {
    opacity: 0.8;
}

/*---- youtube埋め込み ----*/
#youtube a {
    width: 1000px;
    height: 180px;
    margin-bottom: 20px;
    display: block;
}
#youtube a:hover {
    opacity: 0.8;
}
#youtube a img {
    width: 100%;
    height: auto;
    display: block;
}
#youtube ul {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
#youtube ul li {
    margin-bottom: 15px;
}
#youtube ul li:nth-child(5),
#youtube ul li:last-child {
    margin-bottom: 0;
}

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

リフォームお悩み /renovation.php

----------------------------------------*/
#renovation article:first-of-type {
    margin-bottom: 20px !important;
}
#renovation h5+p,
#renovation h5+p+p {
    font-size: 2.3rem;
    font-weight: bold;
}
#renovation h5+p+p {
    color: #eb6100;
}
#renovation .score-desc {
    padding: 5px;
    background: #fff;
}
#renovation .score-desc section {
    margin: 0;
    padding: 15px 10px;
    border: none;
}
#renovation .score-desc section h6 {
    margin-bottom: 5px;
    font-size: 3.3rem;
    text-shadow:  #fff 3px 0px 0px, #fff -3px 0px 0px,
                #fff 0px -3px 0px, #fff 0px 3px 0px,
                #fff 3px 3px 0px, #fff -3px 3px 0px,
                #fff 3px -3px 0px, #fff -3px -3px 0px,
                #fff 2px 3px 0px, #fff -2px 3px 0px,
                #fff 2px -3px 0px, #fff -2px -3px 0px,
                #fff 3px 2px 0px, #fff -3px 2px 0px,
                #fff 3px -2px 0px, #fff -3px -2px 0px,
                #fff 2px 2px 0px, #fff -2px 2px 0px,
                #fff 2px -2px 0px, #fff -2px -2px 0px;
}
#renovation .score-desc section .score-table {
    width: 610px;
    height: auto;
    float: left;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#renovation .score-desc section .score-table table {
    width: 100%;
    border-spacing: 1px;
}
#renovation .score-desc section .score-table table:nth-child(n+2) {
    margin-top: 15px;
}
#renovation .score-desc section .score-table table thead tr {
    height: 40px;
}
#renovation .score-desc section .score-table table tbody tr {
    height: 60px;
}
#renovation .score-desc section .score-table table tbody tr:nth-child(2n+1) {
    background: #fff;
}
#renovation .score-desc section .score-table table tbody tr:nth-child(2n) {
    background: #eee;
}
#renovation .score-desc section .score-table table thead tr th {
    color: #fff;
    font-size: 2.2rem;
}
#renovation .score-desc section .score-table table tbody tr th,
#renovation .score-desc section .score-table table tbody tr td {
    font-size: 2.0rem;
    line-height: 60px;
}
#renovation .score-desc section .score-table table tbody tr th {
    width: 88px;
}
#renovation .score-desc section .score-table table tbody tr td {
    padding-left: 10px;
}
#renovation .score-desc section .score-link {
    width: 320px;
    height: auto;
    float: right;
    margin: 0;
    padding: 0;
    background: none;
}
#renovation .score-desc section .score-link a img:hover {
    opacity: 0.8;
}
#renovation .score-desc section .score-link ul li {
    width: 106px;
    float: left;
    margin-right: 1px;
}
#renovation .score-desc section .score-link ul li:last-child {
    margin-right: 0;
}
#renovation .score-desc section .score-link ul li a {
    width: 106px;
    height: 29px;
    display: block;
}

/*---- トイレリフォーム ----*/
#renovation #toilet {
    padding: 10px;
    background: #d6e6f4;
}
#renovation #toilet .score-desc section {
    background: #d6e6f4;
}
#renovation #toilet .score-desc section h6,
#renovation #toilet .score-desc section .score-table table tbody tr th {
    color: #a2ceff;
}
#renovation #toilet .score-desc section .score-table table thead tr th {
    background: #a2ceff;
}

/*---- 水回りリフォーム ----*/
#renovation #water {
    padding: 10px;
    background: #eeebe9;
}
#renovation #water .score-desc section {
    background: #eeebe9;
}
#renovation #water .score-desc section h6,
#renovation #water .score-desc section .score-table table tbody tr th {
    color: #aaa;
}
#renovation #water .score-desc section .score-table table thead tr th {
    background: #aaa;
}

/*---- クロスリフォーム ----*/
#renovation #cross {
    padding: 10px;
    background: #ffd8f4;
}
#renovation #cross .score-desc section {
    background: #ffd8f4;
}
#renovation #cross .score-desc section h6,
#renovation #cross .score-desc section .score-table table tbody tr th {
    color: #fa72ff;
}
#renovation #cross .score-desc section .score-table table thead tr th {
    background: #fa72ff;
}

/*---- 外壁リフォーム ----*/
#renovation #wall {
    padding: 10px;
    background: #e8b6b4;
}
#renovation #wall .score-desc section {
    background: #e8b6b4;
}
#renovation #wall .score-desc section h6,
#renovation #wall .score-desc section .score-table table tbody tr th {
    color: #e94a45;
}
#renovation #wall .score-desc section .score-table table thead tr th {
    background: #e94a45;
}

/*---- エコ商品 ----*/
#renovation #eco {
    padding: 10px;
    background: #e9edb1;
}
#renovation #eco .score-desc section {
    background: #e9edb1;
}
#renovation #eco .score-desc section h6,
#renovation #eco .score-desc section .score-table table tbody tr th {
    color: #b7c500;
}
#renovation #eco .score-desc section .score-table table thead tr th {
    background: #b7c500;
}

/*---- 修理 ----*/
#renovation #repair {
    padding: 10px;
    background: #fed4a7;
}
#renovation #repair .score-desc section {
    background: #fed4a7;
}
#renovation #repair .score-desc section h6,
#renovation #repair .score-desc section .score-table table tbody tr th {
    color: #fe890d;
}
#renovation #repair .score-desc section .score-table table thead tr th {
    background: #fe890d;
}

/*---- その他 ----*/
#renovation #other {
    padding: 10px;
    background: #fff8ad;
}
#renovation #other .score-desc section {
    background: #fff8ad;
}
#renovation #other .score-desc section h6,
#renovation #other .score-desc section .score-table table tbody tr th {
    color: #d7ca3b;
}
#renovation #other .score-desc section .score-table table thead tr th {
    background: #d7ca3b;
}


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

取扱工事一覧 /construction.php

----------------------------------------*/
#construction table {
    width: 100%;
    border-spacing: 3px;
}
#construction table th {
    width: 300px;
    padding: 10px 0 10px 10px;
    background: #eee;
    text-align: left;
    box-sizing: border-box;
    font-size: 2.0rem;
}
#construction table td {
    width: 700px;
    padding: 10px 5px 10px 10px;
    background: #fff2e9;
    box-sizing: border-box;
    font-size: 1.8rem;
    line-height: 3.2rem;
}
#construction table#glossary {
    border-collapse: collapse;
}
#construction table#glossary tr.title th {
    background: #fff2e9;
}
#construction table#glossary tr th,
#construction table#glossary tr td {
    background: #fff;
    border: 1px solid #ccc;
    font-size: 1.6rem;
   line-height: 2.4rem;
}


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

お支払いシミュレーション /simulation.php

----------------------------------------*/
#simulation article {
    position: relative;
}
#simulation article:first-of-type {
    margin-bottom: 50px !important;
}
#simulation .illust-desc {
    padding: 5px;
    background: #fff;
}
#simulation .illust-desc section {
    margin: 0;
    padding: 15px;
    border: none;
}
#simulation .illust-desc h6 {
    margin-bottom: 10px;
    font-size: 3.6rem;
    text-indent: 1.3em;
    text-shadow:  #fff 3px 0px 0px, #fff -3px 0px 0px,
                #fff 0px -3px 0px, #fff 0px 3px 0px,
                #fff 3px 3px 0px, #fff -3px 3px 0px,
                #fff 3px -3px 0px, #fff -3px -3px 0px,
                #fff 2px 3px 0px, #fff -2px 3px 0px,
                #fff 2px -3px 0px, #fff -2px -3px 0px,
                #fff 3px 2px 0px, #fff -3px 2px 0px,
                #fff 3px -2px 0px, #fff -3px -2px 0px,
                #fff 2px 2px 0px, #fff -2px 2px 0px,
                #fff 2px -2px 0px, #fff -2px -2px 0px;
}
#simulation .illust-desc h6+img {
    position: absolute;
    top: -15px;
    left: -20px;
}
#simulation .illust-price {
    width: 600px;
    height: auto;
    float: left;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#simulation .illust-price p:first-child,
#simulation .illust-price p:nth-child(3) {
    font-size: 2.0rem;
    font-weight: bold;
}
#simulation .illust-price p:nth-child(2),
#simulation .illust-price p:nth-child(4) {
    margin-bottom: 10px;
    font-weight: bold;
    text-indent: -0.5em;
}
#simulation .illust-price .loan-price {
    width: 100%;
    height: auto;
    float: none;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.6);
    box-sizing: border-box;
}
#simulation .illust-price .loan-price p:first-child {
    font-size: 2.4rem;
}
#simulation .illust-price .loan-price p:nth-child(2) {
    margin-bottom: 0;
    font-size: 4.6rem;
    text-indent: 0;
}
#simulation .illust-price .loan-price p span {
    font-size: 70%;
}
#simulation .illust-price .loan-price p span.price {
    color: #ff0000;
    font-size: 100%;
}
#simulation .illust-price .loan-price p span.x {
    font-weight: normal;
}
#simulation .illust-price .case-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
#simulation .illust-price .case-img img {
    width: 295px;
    float: left;
}
#simulation .illust-price .case-img img:first-child {
    margin-right: 10px;
}
#simulation .illust-price .case-img img:last-child {
    margin-right: 0;
}
#simulation .illust-link {
    width: 320px;
    height: auto;
    float: right;
    margin: 10px 0 0 0;
    padding: 0;
    background: none;
}
#simulation .illust-link a img:hover {
    opacity: 0.8;
}
#simulation .illust-link ul li {
    width: 106px;
    float: left;
    margin-right: 1px;
}
#simulation .illust-link ul li:last-child {
    margin-right: 0;
}
#simulation .illust-link ul li a {
    width: 106px;
    height: 29px;
    display: block;
}
#simulation .illust-link+p {
    padding-left: 0.5em;
    clear: both;
    font-weight: bold;
    text-indent: -0.5em;
}

/*---- トイレ交換工事 ----*/
#simulation #illustration01 {
    padding: 10px;
    background: #d6e6f4;
}
#simulation #illustration01 .illust-desc section {
    background: #d6e6f4;
}
#simulation #illustration01 .illust-desc section h6 {
    color: #a2ceff;
}

/*---- ユニットバス交換工事 ----*/
#simulation #illustration02 {
    padding: 10px;
    background: #eeebe9;
}
#simulation #illustration02 .illust-desc section {
    background: #eeebe9;
}
#simulation #illustration02 .illust-desc section h6 {
    color: #aaa;
}

/*---- エコキュート入替工事 ----*/
#simulation #illustration03 {
    padding: 10px;
    background: #e9edb1;
}
#simulation #illustration03 .illust-desc section {
    background: #e9edb1;
}
#simulation #illustration03 .illust-desc section h6 {
    padding-left: 1.3em;
    text-indent: 0;
    line-height: 4.2rem;
    color: #b7c500;
}
#simulation #illustration03 .illust-desc .illust-price p:nth-child(2),
#simulation #illustration03 .illust-desc .illust-price p:nth-child(4) {
    text-indent: 0;
}

#simulation #attention p:first-child {
    margin-bottom: 30px;
    font-size: 2.0rem;
    line-height: 3.6rem;
}
#simulation #attention p:last-child {
    margin: 0 auto;
    border-bottom: 1px solid #eb6100;
    display: table;
    color: #eb6100;
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center
}


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

会社概要 /company.php

----------------------------------------*/
#company article div:first-of-type {
    width: 480px;
    float: left;
    margin-right: 20px;
}
#company article div:last-of-type {
    width: 500px;
    float: right;
}
#company article div section {
    padding: 0;
    border: none;
}
#company #message img,
#company #message p {
    margin-bottom: 10px;
}
#company #company-img ul li {
    float: left;
    margin-right: 15px;
}
#company #company-img ul li:last-child {
    margin-right: 0;
}
#company #company-img ul li a:hover {
    opacity: 0.8;
}
#company #company-desc table {
    width: 100%;
}
#company #company-desc table th {
    width: 135px;
    padding: 10px 0 10px 10px;
    background: #eee;
    text-align: left;
    box-sizing: border-box;
    font-size: 1.5rem;
}
#company #company-desc table td {
    width: 345px;
    padding: 10px 5px 10px 10px;
    background: #fff2e9;
    box-sizing: border-box;
    font-size: 1.4rem;
}
#company #company-desc table td a {
    color: #fe6300;
}
#company #company-desc table td a:hover {
    text-decoration: underline;
}
#company #company-desc table td p {
    margin: 5px 0;
    font-weight: bold;
}
#company #company-desc table td span {
    font-weight: bold;
}


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

個人情報保護方針 /privacy.php

----------------------------------------*/
#privacy article p:first-of-type,
#privacy article p:nth-of-type(2n+1) {
    margin-bottom: 10px;
}
#privacy article p:nth-of-type(2n) {
    font-weight: bold;
}


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

サイトマップ /sitemap.php

----------------------------------------*/
#sitemap article ul {
    width: 350px;
    float: left;
    margin: 15px 30px 0 0;
}
#sitemap article ul li {
    margin-bottom: 15px;
}
#sitemap article ul li a {
    color: #333;
}
#sitemap article ul li a:hover {
    color: #eb6100;
}


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

エラーページ /404.php

----------------------------------------*/
#error article p {
    text-align: center;
}
#error article div {
    width: 684px;
    margin: 40px auto 30px;
}
#error article div p {
    border-bottom: 1px solid #666;
    display: inline-block;
    font-size: 3.6rem;
}
#error article div+p {
    margin-bottom: 30px;
}
#error article section ul {
    width: 350px;
    float: left;
    margin: 15px 30px 0 0;
}
#error article section ul li {
    margin-bottom: 15px;
}
#error article ul li a {
    color: #333;
}
#error article ul li a:hover {
    color: #eb6100;
    text-decoration: underline;
}