/* Theme Name:NAKAI kenchikukobo Theme URI:https://kentikukobo-nakai.com/ Version: 1.0 Author: Author URI:https://kentikukobo-nakai.com/ Description: Theme for "NAKAI kenchikukobo". */ @charset "utf-8"; /* CSS Document */ html, body {min-width:100%;} html {font-size:62.5%; line-height:1.5;} body { color:#222; margin:0; padding:0; -webkit-text-size-adjust:100%; transition:0.2s; background-image:url("images/bg.png"); background-repeat:repeat !important; background-size:unset !important; } *{font-family: YakuHanJP, "Zen Maru Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight:700; text-align:justify; text-justify:inter-ideograph; background-size:contain !important; background-repeat:no-repeat !important;} div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,input,dl,dt,dd,figure { padding:0; margin:0; } ul,ol {list-style-type: none;} img {border:none; max-width:100% !important; height:auto;} /* link */ a {transition:0.2s;} a:link {color:#5e3819; text-decoration:none;} a:visited {color:#5e3819; text-decoration:none;} a:active {color:#222; text-decoration:underline;} a:hover {color:#222; text-decoration:underline;} a img {transition:0.2s;} a:hover img {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;} div.clear {clear:both;} /* HEADER -------------------------------------------------- */ HEADER {width:auto; min-width:1200px; height:170px; margin:0 auto; box-sizing:border-box; overflow:hidden;} HEADER .head_logo {display:block; width:300px; height:70px; background:url(images/head_logo.png) center center; margin-top:70px; margin-left:20px; float:left; position:relative;} HEADER .head_logo p {font-size:1.3rem; line-height:1.6rem; color:#5e3819; position:absolute; top:-40px; left:15px;} HEADER a.head_logo:hover p {color:#222;} HEADER .head_logo span {display:none;} HEADER div.head_menu {padding:30px 30px 30px 20px;} HEADER div.head_menu ul {font-size:0; text-align:center;} HEADER div.head_menu ul li {display:inline-block;} HEADER div.head_menu ul li a {font-size:2rem; text-decoration:none; color:#5e3819;} HEADER div.head_menu ul li:not(.contact) {position:relative; margin:20px 10px 0;} HEADER div.head_menu ul li:not(.contact):hover::before {content:""; position:absolute; width:15px; height:70px; background:url("images/menu_bg01.png"); background-size:contain; background-repeat:no-repeat; top:0; left:0;} HEADER div.head_menu ul li:not(.contact):hover::after {content:""; position:absolute; width:15px; height:70px; background:url("images/menu_bg03.png"); background-size:contain; background-repeat:no-repeat; top:0; right:0;} HEADER div.head_menu ul li:not(.contact) a {display:block; line-height:7rem; position:relative; margin:0 15px;} HEADER div.head_menu ul li:not(.contact):hover a {background:url("images/menu_bg02.png"); background-size:cover !important;} HEADER div.head_menu ul li:not(.contact) a p {max-width:270px;} HEADER div.head_menu ul li:not(.contact) a p::before {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; vertical-align:text-top; margin-top:-3px;} HEADER div.head_menu ul li.reason a p::before {background:url("images/menu_reason.png");} HEADER div.head_menu ul li.flow a p::before {background:url("images/menu_flow.png");} HEADER div.head_menu ul li.result a p::before {background:url("images/menu_result.png");} HEADER div.head_menu ul li.company a p::before {background:url("images/menu_company01.png");} HEADER div.head_menu ul li.company a p::after {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; background:url("images/menu_company02.png");} HEADER div.head_menu ul li.contact {color:#5e3819; float:right;} HEADER div.head_menu ul li.contact p.tel {font-size:4rem; line-height:1;} HEADER div.head_menu ul li.contact p.tel::before {content:""; display:inline-block; width:35px; height:35px; background:url("images/menu_tel.png"); background-size:contain; vertical-align:bottom;} HEADER div.head_menu ul li.contact p.time {font-size:1.8rem; text-align:right;} HEADER div.head_menu ul li.contact p.time span {font-size:1.4rem; margin-left:.3em;} HEADER div.head_menu ul li.contact a.contact {display:block; width:260px; height:40px; text-align:center; line-height:40px; background-image:url("images/menu_contact_bg.png"); background-size:contain; border-radius:2px; margin-top:10px;} HEADER div.head_menu ul li.contact a.contact::before {content:""; display:inline-block; width:30px; height:30px; background:url("images/menu_contact.png"); background-size:contain; vertical-align:text-top;} HEADER div.head_menu ul li.contact a.contact:hover {background-color:#FFFFFF99;} /*縮小*/ @media screen and (max-width:1600px){ HEADER .head_logo {width:260px;} HEADER .head_logo p {font-size:1.1rem;} } @media screen and (max-width:1550px){ HEADER div.head_menu ul li:not(.contact) {margin:20px 0 0;} } @media screen and (max-width:1500px){ HEADER div.head_menu ul li.contact {margin-top:10px;} HEADER div.head_menu ul li.contact p.tel {font-size:3rem;} HEADER div.head_menu ul li.contact p.tel::before {width:28px; height:28px;} HEADER div.head_menu ul li.contact p.time {font-size:1.5rem;} HEADER div.head_menu ul li.contact p.time span {font-size:1.2rem;} HEADER div.head_menu ul li.contact a.contact {width:195px; height:30px; line-height:30px; margin-top:10px; font-size:1.6rem;} HEADER div.head_menu ul li.contact a.contact::before {width:24px; height:24px;} } @media screen and (max-width:1400px){ HEADER .head_logo {width:240px;} HEADER .head_logo p {font-size:1rem;} HEADER div.head_menu ul li a {font-size:1.8rem;} HEADER div.head_menu ul li:not(.contact) a p::before {width:28px; height:28px;} HEADER div.head_menu ul li.company a p::after {width:28px; height:28px;} HEADER div.head_menu ul li.contact p.tel::before {width:28px; height:28px;} } @media screen and (max-width:1300px){ HEADER div.head_menu ul li a {font-size:1.6rem;} } @media screen and (max-width:1250px){ HEADER .head_logo {margin-left:10px;} HEADER div.head_menu {padding:30px 10px 30px 20px;} } /*スクロール版*/ div#header2 {position:fixed; top:-200px; width:100%; height:100px; background:rgba(255,255,255,0.9); z-index:300; min-width:1200px;} div#header2 .head_logo {display:block; width:260px; height:60px; background:url(images/head_logo.png) center center; margin-top:20px; margin-left:20px; float:left; position:relative;} div#header2 .head_logo span {display:none;} div#header2 div.head_menu {padding:0 30px 0 20px;} div#header2 div.head_menu ul {font-size:0; text-align:center;} div#header2 div.head_menu ul li {display:inline-block;} div#header2 div.head_menu ul li a {font-size:1.6rem; text-decoration:none; color:#5e3819;} div#header2 div.head_menu ul li:not(.contact) {position:relative; margin:20px 5px 0;} div#header2 div.head_menu ul li:not(.contact):hover::before {content:""; position:absolute; width:12px; height:56px; background:url("images/menu_bg01.png"); background-size:contain; background-repeat:no-repeat; top:0; left:0;} div#header2 div.head_menu ul li:not(.contact):hover::after {content:""; position:absolute; width:12px; height:56px; background:url("images/menu_bg03.png"); background-size:contain; background-repeat:no-repeat; top:0; right:0;} div#header2 div.head_menu ul li:not(.contact) a {display:block; line-height:5.6rem; position:relative; margin:0 12px;} div#header2 div.head_menu ul li:not(.contact):hover a {background:url("images/menu_bg02.png"); background-size:cover !important;} div#header2 div.head_menu ul li:not(.contact) a p {max-width:216px;} div#header2 div.head_menu ul li:not(.contact):not(.blog) a p::before {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; margin-top:-3px;} div#header2 div.head_menu ul li.reason a p::before {background:url("images/menu_reason.png");} div#header2 div.head_menu ul li.flow a p::before {background:url("images/menu_flow.png");} div#header2 div.head_menu ul li.result a p::before {background:url("images/menu_result.png");} div#header2 div.head_menu ul li.company a p::before {background:url("images/menu_company01.png");} div#header2 div.head_menu ul li.company a p::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; background:url("images/menu_company02.png");} div#header2 div.head_menu ul li.blog a {} div#header2 div.head_menu ul li.blog a p::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; background:url("images/menu_blog.png");} div#header2 div.head_menu ul li.contact {color:#5e3819; float:right; margin-top:5px;} div#header2 div.head_menu ul li.contact p.tel {font-size:3rem; line-height:1;} div#header2 div.head_menu ul li.contact p.tel::before {content:""; display:inline-block; width:28px; height:28px; background:url("images/menu_tel.png"); background-size:contain; vertical-align:bottom;} div#header2 div.head_menu ul li.contact p.time {font-size:1.5rem; text-align:right;} div#header2 div.head_menu ul li.contact p.time span {font-size:1.2rem; margin-left:.3em;} div#header2 div.head_menu ul li.contact a.contact {display:block; width:195px; height:30px; text-align:center; line-height:30px; background-image:url("images/menu_contact_bg.png"); background-size:contain; border-radius:2px; margin-top:5px;} div#header2 div.head_menu ul li.contact a.contact::before {content:""; display:inline-block; width:24px; height:24px; background:url("images/menu_contact.png"); background-size:contain; vertical-align:text-top;} div#header2 div.head_menu ul li.contact a.contact:hover {background-color:#f1e9d9;} @media screen and (max-width:1450px){ div#header2 .head_logo {display:block; width:220px; margin-left:10px;} } @media screen and (max-width:1400px){ div#header2 div.head_menu {padding:0 10px 0 20px;} div#header2 div.head_menu ul li:not(.contact) {margin:20px 0 0;} } @media screen and (max-width:1350px){ div#header2 .head_logo {display:block; width:200px;} div#header2 div.head_menu ul li:not(.contact) a p {font-size:1.4rem;} div#header2 div.head_menu ul li:not(.contact):not(.blog) a p::before {width:23px; height:23px; margin-top:0;} div#header2 div.head_menu ul li.company a p::after {width:23px; height:23px; margin-top:0;} div#header2 div.head_menu ul li.blog a p::after {width:23px; height:23px; margin-top:0;} } /* FOOTER -------------------------------------------------- */ a.pagetop {position:fixed; right:15px; color:#FFF; text-decoration:none; display:block; width:55px; height:55px; border-radius:100%; background:#5e3819; z-index:1000;} a.pagetop::before {font-family:"FontAwesome"; content:"\f077"; display:block; text-align:center; font-size:27px; line-height:60px; transition:0.2s;} a.pagetop:hover {background:#222;} a.pagetop:hover::before {line-height:50px;} a.pagetop span {display:none;} FOOTER {margin:120px 0 0; position:relative; min-width:1200px;} FOOTER H2 {margin-top:-40px;} FOOTER H2 a {display:block; width:320px; height:40px; background-size:contain !important; background:url("images/foot_name.png"); margin:0 auto 1em;} FOOTER H2 a span {display:none;} FOOTER p.address {font-size:1.6rem; color:#5e3819; text-align:center;} FOOTER div.bg {width:800px; height:180px; margin:0 auto; background-size:contain !important; background:url("images/foot_bg.png");} FOOTER div.bg::before {content:""; display:block; width:80px; height:50px; background-size:contain !important; background:url("images/bg_cloud01.png"); position:absolute; top:-20px; left:calc(50% - 200px); z-index:-2;} FOOTER div.bg::after {content:""; display:block; width:130px; height:90px; background-size:contain !important; background:url("images/bg_cloud02.png"); position:absolute; top:-80px; left:calc(50% + 50px); z-index:-3;} FOOTER div.bg::before {animation: foot_bg01 30s linear infinite;} FOOTER div.bg::after {animation: foot_bg02 35s linear infinite;} @keyframes foot_bg01 { 0% {transform:translateX(-50%); opacity:0;} 5% {transform:translateX(-45%); opacity:1;} 95% {transform:translateX( 45%); opacity:1;} 100% {transform:translateX( 50%); opacity:0;} } @keyframes foot_bg02 { 0% {transform:translateX(-50%); opacity:0;} 5% {transform:translateX(-45%); opacity:1;} 95% {transform:translateX( 45%); opacity:1;} 100% {transform:translateX( 50%); opacity:0;} } FOOTER div.tel {display:table; margin:30px auto 0; color:#5e3819;} FOOTER div.tel p.tel {font-size:3.6rem; line-height:1;} FOOTER div.tel p.tel::before {content:""; display:inline-block; width:30px; height:30px; background:url("images/menu_tel.png"); background-size:contain; vertical-align:bottom;} FOOTER div.tel p.time {font-size:1.8rem; text-align:right;} FOOTER div.tel p.time span {font-size:1.2rem; margin-left:.3em;} FOOTER div.foot_menu {width:1200px; margin:30px auto 0; padding:0 0 20px 0; background:url("images/foot_line.png"); background-position:bottom;} FOOTER div.foot_menu ul {font-size:0; text-align:center;} FOOTER div.foot_menu ul li {display:inline-block;} FOOTER div.foot_menu ul li a {font-size:2rem; text-decoration:none; color:#5e3819;} FOOTER div.foot_menu ul li {position:relative;} /* FOOTER div.foot_menu ul li:hover::before {content:""; position:absolute; width:15px; height:70px; background:url("images/menu_bg01.png"); background-size:contain; top:0; left:0;} FOOTER div.foot_menu ul li:hover::after {content:""; position:absolute; width:15px; height:70px; background:url("images/menu_bg03.png"); background-size:contain; top:0; right:0;} */ FOOTER div.foot_menu ul li a {display:block; line-height:5rem; position:relative; margin:0 15px;} /* FOOTER div.foot_menu ul li:hover a {background:url("images/menu_bg02.png"); background-size:cover !important;} */ FOOTER div.foot_menu ul li a p {max-width:270px;} FOOTER div.foot_menu ul li:not(.blog) a p::before {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; transition:.2s;} FOOTER div.foot_menu ul li.reason a p::before {background:url("images/menu_reason.png");} FOOTER div.foot_menu ul li.flow a p::before {background:url("images/menu_flow.png");} FOOTER div.foot_menu ul li.result a p::before {background:url("images/menu_result.png");} FOOTER div.foot_menu ul li.company a p::before {background:url("images/menu_company01.png");} FOOTER div.foot_menu ul li.company a p::after {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; background:url("images/menu_company02.png");} FOOTER div.foot_menu ul li.blog a {} FOOTER div.foot_menu ul li.blog a p::after {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; vertical-align:text-top; margin-top:-3px; background:url("images/menu_blog.png");} FOOTER div.foot_menu ul li a p::before, FOOTER div.foot_menu ul li a p::after {transition:.2s;} FOOTER div.foot_menu ul li:hover a p::before, FOOTER div.foot_menu ul li:hover a p::after {margin-top:-6px;} FOOTER div.bottom {width:1200px; margin:10px auto 0; overflow:hidden; position:relative; height:5rem;} FOOTER div.bottom p.copy {float:left; font-size:1.4rem;} FOOTER div.bottom ul.sns {position:absolute; left:400px; right:400px; top:0; text-align:center;} FOOTER div.bottom ul.sns li {display:inline-block; margin:0 1em;} FOOTER div.bottom ul.sns li a {text-decoration:none;} FOOTER div.bottom ul.sns li a::before {font-family:"FontAwesome"; font-size:3rem; font-weight:normal;} FOOTER div.bottom ul.sns li.fb a::before {content:"\f09a";} FOOTER div.bottom ul.sns li.in a::before {content:"\f16d";} FOOTER div.bottom ul.sns li.ml a::before {content:"\f0e0";} FOOTER div.bottom ul.sns li a span {display:none;} FOOTER div.bottom ul.contact {font-size:1.6rem; float:right;} FOOTER div.bottom ul.contact li {display:inline-block;} FOOTER div.bottom ul.contact li + li::before {content:"　｜　";} FOOTER div.bottom ul.contact li a {} /* MAIN -------------------------------------------------- */ main {width:100%; overflow:hidden;} /* INDEX #index -------------------------------------------------- */ div#index {min-width:1200px;} /*スライド*/ div.index_slide {position:relative; width:100%; height:calc(90vh - 200px); min-height:600px; box-sizing:border-box; z-index:50;} ul.index_slide {} ul.index_slide li {position:relative; width:100%; height:calc(90vh - 200px); min-height:600px; padding:0; box-sizing:border-box;} ul.index_slide li {background-position:center center; background-repeat:no-repeat; background-size:cover !important;} /*NAKAIのまいにち*/ div.index_blog {position:absolute; right:0; bottom:40px; background:#FFF; box-sizing:border-box; padding:10px 20px 20px 20px; border-top-left-radius:20px; border-bottom-left-radius:20px;} div.index_blog H2 {font-size:1.8rem; letter-spacing:0.2em; color:#5e3819;} div.index_blog H2::after {content:""; display:inline-block; width:30px; height:30px; background-size:contain !important; vertical-align:text-top; margin-left:.3em; background:url("images/menu_blog.png");} div.index_blog a {color:#222; text-decoration:none; display:block; padding:5px 10px; overflow:hidden; width:320px; box-sizing:border-box;} div.index_blog a p.ph {float:left; margin-right:20px; display:flex; overflow:hidden; position:relative; width:120px; height:80px; border-top-left-radius:10px; border-bottom-right-radius:10px;} div.index_blog a p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; transition:transform .2s linear;} div.index_blog a:hover p.ph img {transform:scale(1.1); opacity:1;} div.index_blog a p.date {font-size:1.5rem;} div.index_blog a p.ttl {font-size:1.6rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:160px;} div.index_blog a:hover p.ttl {color:#5e3819; text-decoration:underline;} /*中井の家づくり*/ div.index_about {position:relative; margin-top:100px;} div.index_about H2 {font-size:4.8rem; color:#5e3819; line-height:1.2; letter-spacing:0.15em; width:1200px; margin:0 auto;} div.index_about H2 p {font-size:3rem; color:#FFF;} div.index_about div.area {width:1200px; margin:50px auto 0; padding-bottom:140px;} div.index_about div.area div.desc {font-size:2.1rem; line-height:4.8rem; letter-spacing:0.1em; width:720px; background:#FFFFFFcc; box-sizing:border-box; padding:40px; border-top-right-radius:40px; border-bottom-left-radius:40px; margin-left:10px;} div.index_about div.area ul {width:240px; margin:60px 0 0 50px;} div.index_about div.area ul li {margin-bottom:20px;} div.index_about div.area ul li a {display:block; font-size:1.6rem; line-height:5rem; letter-spacing:0.1em; text-align:center; height:5rem; color:#FFF; text-decoration:none; background:#5e3819; border-top-left-radius:10px; border-bottom-right-radius:10px;} div.index_about div.area ul li.company {position:relative;} div.index_about div.area ul li.company a::before {content:""; display:inline-block; width:30px; height:30px; background-size:contain !important; background:url("images/menu_company01.png"); transition:.2s; position:absolute; left:10px; top:0; z-index:-1;} div.index_about div.area ul li.company a:hover::before {top:-26px;} div.index_about div.area ul li.company a::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; background:url("images/menu_company02_w.png"); margin-left:.3em;} div.index_about div.area ul li.reason {} div.index_about div.area ul li.reason a {text-indent:.5em;} div.index_about div.area ul li.reason a::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; background:url("images/menu_reason_w.png"); margin-right:.2em; transition:.2s;} div.index_about div.area ul li.reason a:hover::after {margin-left:.2em; margin-right:0;} div.index_about div.area ul li.flow {position:relative; overflow:hidden;} div.index_about div.area ul li.flow a::after {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; background:url("images/menu_flow_w.png"); transition:.2s; position:absolute; right:20px; bottom:-8px;} div.index_about div.area ul li.flow a:hover::after {bottom:-4px;} div.index_about div.ph {position:absolute; top:310px; bottom:0; left:calc(50% - 100px); right:0; background-size:cover !important; z-index:-1;} div.index_about div.bg {height:100px; background-size:contain !important; background:url("images/index_about_bg.png"); position:absolute; left:calc(50% - 680px); right:0; bottom:0;} div.index_about div.bg::before {content:""; display:block; width:80px; height:50px; background-size:contain !important; background:url("images/bg_cloud01.png"); position:absolute; bottom:110px; left:380px; z-index:-2;} div.index_about div.bg::after {content:""; display:block; width:130px; height:90px; background-size:contain !important; background:url("images/bg_cloud02.png"); position:absolute; bottom:110px; left:440px; z-index:-3;} div.index_about div.bg::before {animation: index_about_bg02 30s linear infinite;} div.index_about div.bg::after {animation: index_about_bg03 35s linear infinite;} @keyframes index_about_bg02 { 0% {transform:translateX(-60px); opacity:0;} 5% {transform:translateX(-48px); opacity:1;} 100% {transform:translateX(200px)} } @keyframes index_about_bg03 { 0% {transform:translateX(-40px); opacity:0;} 5% {transform:translateX(-26px); opacity:1;} 100% {transform:translateX(140px)} } /*スキマ*/ div.index_gap {width:100%; height:40vh; margin-top:100px; clip-path:inset(0);} div.index_gap::after {content:""; position:fixed; top:0; left:0; width:100%; height:100%; z-index:-10; background-size:cover !important;} /*施工事例*/ div.index_result {margin-top:100px;} div.index_result H2 {font-size:4.8rem; color:#5e3819; line-height:1.2; letter-spacing:0.15em; width:1200px; margin:0 auto 50px;} div.index_result H2 p {font-size:3rem; color:#FFF;} div.index_result ul.index_result {margin-left:calc(50% - 480px);} div.index_result ul.index_result li {} div.index_result ul.index_result li a {display:block; text-decoration:none;} div.index_result ul.index_result li a p.ph {display:flex; overflow:hidden; position:relative; width:480px; height:320px; border-top-left-radius:40px; border-bottom-right-radius:40px;} div.index_result ul.index_result li a p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; transition:transform .2s linear;} div.index_result ul.index_result li a:hover p.ph img {transform:scale(1.1); opacity:1;} div.index_result ul.index_result li a ul.category {display:inline-block; margin-top:20px; float:left;} div.index_result ul.index_result li a ul.category li {display:inline-block; font-size:1.6rem; line-height:3rem; letter-spacing:.1em; color:#FFF; padding:0 .5em; margin-right:10px;} div.index_result ul.index_result li a ul.category li.new {background:#71897a;} div.index_result ul.index_result li a ul.category li.reform {background:#c17955;} div.index_result ul.index_result li a p.ttl {font-size:2rem; margin-top:20px; color:#222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;} div.index_result ul.index_result li a:hover p.ttl {color:#5e3819;} div.index_result a.view_all {display:block; font-size:1.6rem; line-height:5rem; letter-spacing:0.1em; text-align:center; width:300px; height:5rem; color:#FFF; text-decoration:none; background:#5e3819; border-top-left-radius:10px; border-bottom-right-radius:10px; margin:120px auto 0; position:relative;} div.index_result a.view_all::before {content:""; display:block; width:50px; height:30px; background-size:contain !important; background:url("images/index_result_view.png"); position:absolute; top:-30px; left:0; right:0; margin:auto;} div.index_result a.view_all::after {font-family:"FontAwesome"; content:"\f054"; transition:.2s; position:absolute; right:20px;} div.index_result a.view_all:hover::after {right:15px;} /* 下層ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ div#main {margin:0 auto 200px;} /* タイトル -------------------------------------------------- */ div#main div.page_ttl {display:flex; overflow:hidden; position:relative; width:100%; height:300px; background:#000;} div#main div.page_ttl H1 {font-size:4.8rem; color:#5e3819; line-height:1.2; letter-spacing:0.15em; display:table; width:1200px; margin:auto; padding-bottom:15px; z-index:1;} div#main div.page_ttl H1 p {font-size:3rem; color:#FFF; margin-bottom:10px;} div#main div.page_ttl img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; opacity:0.8; width:100%;} /* 固定ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ div#main div.parts_page {} div#main div.parts_page H2.sub {color:#5e3819; font-size:3rem; letter-spacing:0.1em; width:1200px; margin:0 auto;} div#main div.parts_page H2.sub::before {content:"―"; letter-spacing:0; font-weight:normal; margin-right:.5em;} /* 建築工房中井について -------------------------------------------------- */ div.parts_page.company {} div.parts_page.company div.company_message {width:1200px; margin:100px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px; position:relative;} div.parts_page.company div.company_message p.company_message {font-size:2.1rem; line-height:4.8rem; letter-spacing:0.2em;} div.parts_page.company div.company_message p.company_name {font-size:1.8rem; line-height:3rem; letter-spacing:0.2em; text-align:right; padding-right:300px; margin-top:2em;} div.parts_page.company div.company_message p.ph {display:flex; overflow:hidden; position:absolute; right:50px; bottom:-100px; width:300px; height:300px; border-radius:100%;} div.parts_page.company div.company_message p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.company div.company_outline {width:1200px; margin:20px auto 0; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px; position:relative;} div.parts_page.company div.company_outline table {width:100%; font-size:1.8rem; letter-spacing:0.1em;} div.parts_page.company div.company_outline table th {width:6em; padding:.8em .5em .5em; border-bottom:2px #5e3819 solid;} div.parts_page.company div.company_outline table td {padding:.8em .5em .5em 1em; border-bottom:1px #bab9b6 solid;} div.parts_page.company div.company_ph {width:1200px; margin:60px auto 0;} div.parts_page.company div.company_ph ul {font-size:0;} div.parts_page.company div.company_ph ul li {display:inline-block; width:270px;} div.parts_page.company div.company_ph ul li:nth-of-type(n+2) {margin-left:40px;} div.parts_page.company div.company_ph ul li img {display:block; border-radius:10px;} div.parts_page.company div.company_map {width:1200px; margin:60px auto 0; position:relative; padding:0 0 600px 0; height:0; overflow:hidden;} div.parts_page.company div.company_map iframe {position:absolute; left:0; top:0; width:100%; height:100%;} /* 私たちができること -------------------------------------------------- */ div.parts_page.reason {} div.parts_page.reason div.reason_intro {width:1200px; margin:100px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px; font-size:2.1rem; line-height:4.8rem; letter-spacing:0.15em;} div.parts_page.reason div.reason_why {width:1200px; margin:20px auto 100px; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.parts_page.reason div.reason_why ul.reason_why {font-size:0;} div.parts_page.reason div.reason_why ul.reason_why > li {display:inline-block; width:470px; vertical-align:top; margin-right:60px;} div.parts_page.reason div.reason_why ul.reason_why > li:nth-of-type(2n) {margin-right:0;} div.parts_page.reason div.reason_why ul.reason_why > li:nth-of-type(n+3) {margin-top:60px;} div.parts_page.reason div.reason_why ul.reason_why > li p.ph {display:flex; overflow:hidden; width:470px; height:300px; position:relative; margin-bottom:10px;} div.parts_page.reason div.reason_why ul.reason_why > li p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.reason div.reason_why ul.reason_why > li H3 {font-size:2.1rem; line-height:3.5rem; color:#5e3819;} div.parts_page.reason div.reason_why ul.reason_why > li p.txt {font-size:1.6rem; line-height:2rem; margin-top:5px;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link {margin-top:10px;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li {} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a {font-size:1.6rem; text-decoration:none; display:block;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a::before {font-family:"FontAwesome"; content:"\f054"; font-size:1.4rem; margin-right:.5em; transition:.2s;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a:hover::before {margin-left:.2em; margin-right:0.3em;} div.parts_page.reason div.reason_initiative {width:1200px; margin:20px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.parts_page.reason div.reason_initiative ul.reason_initiative {font-size:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li {display:inline-block; width:470px; vertical-align:top; margin-right:60px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li:nth-of-type(2n) {margin-right:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li:nth-of-type(n+3) {margin-top:60px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.ph {display:flex; overflow:hidden; width:470px; height:300px; position:relative; margin-bottom:10px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li H3 {font-size:2.1rem; line-height:3.5rem; color:#5e3819;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.txt {font-size:1.6rem; line-height:2rem; margin-top:5px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link {margin-top:10px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li {} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a {font-size:1.6rem; text-decoration:none; display:block;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a::before {font-family:"FontAwesome"; content:"\f054"; font-size:1.4rem; margin-right:.5em; transition:.2s;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a:hover::before {margin-left:.2em; margin-right:0.3em;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a.blank::after {content:"（外部サイト）"; font-size:1.4rem;} /* ご依頼の流れ -------------------------------------------------- */ div.parts_page.flow {} div.parts_page.flow div.flow_intro {width:1200px; margin:100px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px; font-size:2.1rem; line-height:4.8rem; letter-spacing:0.15em;} div.parts_page.flow div.flow_intro_list {width:1200px; margin:20px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list {counter-reset:number 0;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li {outline:0 #f9f5ee solid; transition:.2s; position:relative;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li:nth-of-type(n+2) {margin-top:120px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li:hover {background:#f9f5ee; outline:30px #f9f5ee solid; border-radius:10px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li H3 {font-size:2.1rem; letter-spacing:0.1em; color:#5e3819; border-bottom:1px #5e3819 solid; display:table;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li H3::before {counter-increment:number 1; content:counter(number) ".";} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li p {font-size:1.6rem; line-height:2.5rem; letter-spacing:0.1em; padding-left:1em; padding-top:1em;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li + li::before {font-family:"FontAwesome"; content:"\f078"; display:block; font-size:4rem; text-align:center; color:#5e3819; position:absolute; left:0; right:0; top:-90px;} /* お問い合わせ -------------------------------------------------- */ div.parts_page.contact {} div.parts_page.contact div.mail {width:1200px; margin:100px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.parts_page.contact div.mail H2 {font-size:3rem; line-height:6rem; text-align:center; margin:3em 0 1em;} div.parts_page.contact div.mail label {cursor:pointer;} div.parts_page.contact div.mail table {font-size:1.6rem; width:800px; margin:0 auto;} div.parts_page.contact div.mail table th {width:8em; padding:20px 0; border-bottom:1px #bab9b6 solid; text-align:right; line-height:2rem;} div.parts_page.contact div.mail table th span.must {font-size:1.2rem; display:block; text-align:right; color:#F32E66;} div.parts_page.contact div.mail table th span.note {font-size:1.2rem; display:block; text-align:right; color:#666666;} div.parts_page.contact div.mail table td {padding:20px 0 20px 20px; border-bottom:1px #bab9b6 solid; text-align:left;} div.parts_page.contact div.mail table td p {margin-bottom:1em;} div.parts_page.contact div.mail table td p:last-of-type {margin-bottom:0;} div.parts_page.contact div.mail table td span.note {font-size:1.2rem; display:inline-block; color:#666666; margin-left:1em;} div.parts_page.contact div.mail table td span.example {font-size:1.2rem; display:block; color:#666666; margin-top:5px; margin-left:1em;} div.parts_page.contact div.mail input[type="text"], div.parts_page.contact div.mail input[type="email"], div.parts_page.contact div.mail input[type="tel"], div.parts_page.contact div.mail input[type="number"], div.parts_page.contact div.mail select {padding:10px; width:100%; box-sizing:border-box; font-size:1.6rem; line-height:3rem; background:#EEE; border:1px #999 solid; border-radius:10px; color:#191919;} div.parts_page.contact div.mail textarea {padding:10px; display:block; margin-top:5px; width:100%; box-sizing:border-box; font-size:1.6rem; background:#EEE; border:1px #999 solid; border-radius:10px;} div.parts_page.contact div.mail table td p.zipcode {} div.parts_page.contact div.mail input[name="contact_zipcode"] {width:8em;} div.parts_page.contact div.mail table td p.address01 {display:inline-block; float:left; width:10em; vertical-align:top;} div.parts_page.contact div.mail table td p.address02 {display:inline-block; float:right; width:calc(100% - 11em);} div.parts_page.contact div.mail table td p.address03 {float:none;} div.parts_page.contact div.mail table td p.address04 {} div.parts_page.contact div.mail select[name="contact_address01"] {width:10em; padding:12px 10px;} div.parts_page.contact div.mail ::placeholder {color:#999; font-size:1.4rem;} div.parts_page.contact div.mail table th label {display:block; text-align:right;} div.parts_page.contact div.mail td label {padding:5px 10px 5px 5px; display:inline-block; letter-spacing:0;} div.parts_page.contact div.mail input[type="submit"]:not(:disabled):hover, div.parts_page.contact div.mail form.invalid input[type="submit"]:hover {background:#222; color:#FFF;} div.parts_page.contact div.mail table.other {margin-top:4em;} div.parts_page.contact div.mail table.other td {text-align:center; border-bottom:none;} div.parts_page.contact div.mail table.other td span.wpcf7-form-control-wrap {display:block; background:#f9f5ee; margin-top:1em;} div.parts_page.contact div.mail table.other td span.wpcf7-form-control-wrap span:not(.wpcf7-list-item-label) {display:block; text-align:center;} div.parts_page.contact div.mail table.other td label {display:block; text-align:center; padding:1em;} div.parts_page.contact div.mail input[type="submit"] {margin:30px auto 0; padding:25px; width:300px; display:block; border:none; color:#FFF; letter-spacing:0.3em; text-align:center; font-size:15px; transition:.2s;} div.parts_page.contact div.mail input[type="submit"]:not(:disabled) {background:#5e3819; cursor:pointer;} div.parts_page.contact div.mail input.wpcf7-submit:disabled {background:#aca690; cursor:not-allowed;} div.parts_page.contact div.mail span.wpcf7-not-valid-tip {font-size:1.4rem; font-weight:bold;} .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {padding:1em; text-align:center; font-size:1.4rem;} /* プライバシーポリシー */ div.parts_page.contact div.privacy {width:1200px; margin:20px auto; box-sizing:border-box; padding:100px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.parts_page.contact div.privacy p.privacy_intro {font-size:1.6rem; line-height:2.5rem; letter-spacing:0.1em;} div.parts_page.contact div.privacy p.privacy_intro + H3 {margin-top:4em;} div.parts_page.contact div.privacy H3 {font-size:1.8rem; line-height:3rem; border-bottom:2px #222 solid; display:table;} div.parts_page.contact div.privacy ul.privacy_list {} div.parts_page.contact div.privacy ul.privacy_list li {margin-top:4em;} div.parts_page.contact div.privacy ul.privacy_list li H4 {font-size:1.6rem; line-height:2.5rem; border-bottom:1px #bab9b6 solid;} div.parts_page.contact div.privacy ul.privacy_list li p {font-size:1.4rem; line-height:2rem; padding:1em 0 0 1em;} /* 更新系ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ /*ページネーション*/ div.wp-pagenavi {text-align:center; margin-top:100px;} .wp-pagenavi {clear:both; text-align:center;} .wp-pagenavi a, .wp-pagenavi span {height:45px; width:45px; border-radius:50%; line-height:40px; text-align:center; border: 2px solid #5e3819 !important; box-sizing:border-box; text-decoration: none; margin:0 .2em !important; padding:0 !important; display:inline-block; background:#FFFFFF66; color:#5e3819; font-size:2rem; letter-spacing:0; } .wp-pagenavi span.current, .wp-pagenavi a:hover {color:#FFF; background:#5e3819;} .wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink {color:#5e3819; background:none; border:none !important; width:auto !important;} .wp-pagenavi a.previouspostslink:hover, .wp-pagenavi a.nextpostslink:hover {color:#222;} .wp-pagenavi a.previouspostslink {margin-right:1em !important;} .wp-pagenavi a.previouspostslink p {position:relative; padding-right:1em; color:#5e3819; font-weight:bold;} .wp-pagenavi a:hover.previouspostslink p {color:#222;} .wp-pagenavi a.previouspostslink p::after {content:"\f0d9"; position:absolute; right:0; color:#5e3819; font-family:FontAwesome; font-size:2rem; transition:.2s;} .wp-pagenavi a:hover.previouspostslink p::after {color:#222;} .wp-pagenavi a.nextpostslink {margin-left:1em !important;} .wp-pagenavi a.nextpostslink p {position:relative; padding-left:1em; color:#5e3819; font-size:1.8rem; font-weight:bold;} .wp-pagenavi a:hover.nextpostslink p {color:#222;} .wp-pagenavi a.nextpostslink p::before {content:"\f0da"; position:absolute; left:0; color:#5e3819; font-family:FontAwesome; font-size:2rem; transition:.2s;} .wp-pagenavi a:hover.nextpostslink p::before {color:#222;} .wp-pagenavi span.extend {border:none !important; background:none !important; color:#5e3819; width:auto;} .wp-pagenavi span.pages {display:none; /*display:block; border:none !important; background:none !important; color:#5e3819; width:auto;*/} .wp-pagenavi span.pages p, .wp-pagenavi a.first p, .wp-pagenavi a.last p {text-align:center; font-weight:bold;} .wp-pagenavi a.first , .wp-pagenavi a.last {border:none !important; background:none !important; color:#5e3819 !important;} .wp-pagenavi a.first p , .wp-pagenavi a.last p {font-size:1.6rem;} .wp-pagenavi a.first:hover , .wp-pagenavi a.last:hover {color:#222 !important;} /*前後戻る*/ div.return {margin:60px auto 0; width:800px;} div.return ul.return {display:flex; flex-wrap:nowrap;} div.return ul.return li {width:100%; height:50px;} div.return ul.return li a {display:block; text-decoration:none; font-size:2rem; line-height:50px; font-weight:bold; color:#5e3819;} div.return ul.return li a::before, div.return ul.return li a::after {font-family:"FontAwesome"; transition:.2s;} div.return ul.return li.next a {text-align:right;} div.return ul.return li.next a::before {content:"\f060"; margin-right:.5em;} div.return ul.return li.next a:hover::before {margin-right:.7em;} div.return ul.return li.prev a {text-align:left;} div.return ul.return li.prev a::after {content:"\f061"; margin-left:.5em;} div.return ul.return li.prev a:hover::after {margin-left:.7em;} div.return ul.return li.all a {text-align:center;} div.return ul.return li.all a::before {content:"\f0ca"; margin-right:.5em;} div.return ul.return li a:hover {color:#222;} /* 施工事例 -------------------------------------------------- */ /*一覧*/ div.result_cat {} div.result_cat ul.result_cat {text-align:center; margin-top:60px;} div.result_cat ul.result_cat li {display:inline-block; margin:0 10px;} div.result_cat ul.result_cat li a {display:block; width:240px; height:46px; font-size:2rem; line-height:4.6rem; border-radius:10px; text-align:center; text-decoration:none;} div.result_cat ul.result_cat li.all a {border:2px #5e3819 solid; color:#5e3819;} div.result_cat ul.result_cat li.all a:hover {background:#5e3819; color:#FFF;} body.all div.result_cat ul.result_cat li.all a {background:#5e3819; color:#FFF; pointer-events:none;} div.result_cat ul.result_cat li.new a {border:2px #71897a solid; color:#71897a;} div.result_cat ul.result_cat li.new a:hover {background:#71897a; color:#FFF;} body.new div.result_cat ul.result_cat li.new a {background:#71897a; color:#FFF; pointer-events:none;} div.result_cat ul.result_cat li.reform a {border:2px #c17955 solid; color:#c17955;} div.result_cat ul.result_cat li.reform a:hover {background:#c17955; color:#FFF;} body.reform div.result_cat ul.result_cat li.reform a {background:#c17955; color:#FFF; pointer-events:none;} div.result_list {} div.result_list p.tag {text-align:center; font-size:1.8rem; line-height:1; color:#666; margin:1em 0 -2em;} div.result_list ul.result_list {width:1200px; margin:60px auto 0; font-size:0;} div.result_list ul.result_list > li {display:inline-block; width:360px; margin-right:60px; vertical-align:top;} div.result_list ul.result_list > li:nth-of-type(3n) {margin-right:0;} div.result_list ul.result_list > li:nth-of-type(n+4) {margin-top:60px;} div.result_list ul.result_list > li a {display:block; text-decoration:none;} div.result_list ul.result_list > li a p.ph {display:flex; overflow:hidden; position:relative; width:360px; height:240px; border-top-left-radius:30px; border-bottom-right-radius:30px;} div.result_list ul.result_list > li a p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; transition:transform .2s linear;} div.result_list ul.result_list > li a:hover p.ph img {transform:scale(1.1); opacity:1;} div.result_list ul.result_list > li a ul.category {display:inline-block; margin-top:20px; float:left;} div.result_list ul.result_list > li a ul.category li {display:inline-block; font-size:1.4rem; line-height:2.5rem; color:#FFF; padding:0 .5em; margin-right:10px;} div.result_list ul.result_list > li a ul.category li.new {background:#71897a;} div.result_list ul.result_list > li a ul.category li.reform {background:#c17955;} div.result_list ul.result_list > li a p.ttl {font-size:1.8rem; margin-top:18px; color:#222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;} div.result_list ul.result_list > li a:hover p.ttl {color:#5e3819;} div.result_list ul.result_list > li ul.tag {font-size:1.4rem; line-height:1.8rem; margin-top:.5em; text-align:left;} div.result_list ul.result_list > li ul.tag li {display:inline-block; margin-top:.5em;} div.result_list ul.result_list > li ul.tag li a {line-height:1; color:#666666; margin-right:.8em;} div.result_list ul.result_list > li ul.tag li a::before {content:"#";} div.result_list ul.result_list > li ul.tag li a:hover {color:#5e3819;} /*個別ページ*/ div.result_catch {width:1200px; box-sizing:border-box; padding:60px 100px 40px; margin:60px auto 0; min-height:140px; position:relative;} div.result_catch img {display:block; margin:0 auto;} div.result_catch::after {content:""; width:1200px; display:block; background:#FFFFFFcc; height:140px; position:absolute; left:0; right:0; bottom:0; border-top-right-radius:40px; z-index:-1;} div.result_entry {width:1200px; margin:0 auto 60px; box-sizing:border-box; padding:0 100px 100px; background:#FFFFFFcc; border-bottom-left-radius:40px; } div.result_entry div.result_ttl {overflow:hidden; background:url("images/result_ttl_bg.png"); background-position:bottom;} div.result_entry div.result_ttl p.category {float:left; line-height:5rem; margin-right:20px;} div.result_entry div.result_ttl p.category a {display:inline-block; font-size:1.4rem; line-height:2.5rem; color:#FFF; padding:0 1em; margin-right:10px; margin-top:20px;} div.result_entry div.result_ttl p.category a[href*="new"] {background:#71897a;} div.result_entry div.result_ttl p.category a[href*="reform"] {background:#c17955;} div.result_entry div.result_ttl H2 {font-size:3.6rem; line-height:5rem; margin-bottom:1rem;} div.result_entry ul.tag {font-size:1.4rem; line-height:1.8rem; margin-top:.5em; text-align:right;} div.result_entry ul.tag li {display:inline-block; margin-top:.5em;} div.result_entry ul.tag li a {line-height:1; color:#666666; margin-left:.8em; text-decoration:none;} div.result_entry ul.tag li a::before {content:"#";} div.result_entry ul.tag li a:hover {color:#5e3819;} div.result_entry p.result_intro {font-size:1.6rem; line-height:2.5rem; letter-spacing:0.1em; margin-top:30px;} div.result_entry table.result_guide {width:100%; font-size:1.8rem; letter-spacing:0.1em; margin-top:40px;} div.result_entry table.result_guide th {width:6em; padding:.8em .5em .5em; border-bottom:2px #5e3819 solid;} div.result_entry table.result_guide td {padding:.8em .5em .5em 1em; border-bottom:1px #bab9b6 solid;} div.result_entry ul.result_ph {margin-top:100px;} div.result_entry ul.result_ph li {margin-top:60px;} div.result_entry ul.result_ph li img {display:block; margin:auto;} div.result_entry ul.result_ph li p {font-size:1.6rem; line-height:2.5rem; margin-top:1em; text-align:center;} /* NAKAIのまいにち -------------------------------------------------- */ /*カテゴリー*/ ul.blog_pankuzu {width:1200px; margin:2rem auto -4rem; font-size:1.6rem; line-height:2rem; text-align:left;} ul.blog_pankuzu li {display:inline-block;} ul.blog_pankuzu li a {} ul.blog_pankuzu li + li::before {font-family:"FontAwesome"; content:"\f105"; font-size:1.5rem; margin:0 .5em;} ul.blog_pankuzu li.list + li.list::before {font-family:"FontAwesome"; content:"\2b"; font-size:1.3rem; font-weight:normal; margin:0 .5em;} /*個別記事*/ div.blog_area {width:1200px; margin:100px auto 0; position:relative;} div.blog_main {width:800px; float:left;} div.blog_main div.blog_entry {width:100%; box-sizing:border-box; padding:40px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px;} div.blog_main div.blog_entry:nth-of-type(n+2) {margin-top:100px;} div.blog_main div.blog_entry p.catch {margin-bottom:20px;} div.blog_main div.blog_entry p.catch img {display:block; margin:0 auto; border-top-right-radius:20px; max-height:600px; width:auto;} div.blog_main div.blog_entry p.ttl {font-size:2.4rem; line-height:1.2; padding-bottom:.3em; border-bottom:1px #bab9b6 solid; margin-bottom:.5em;} div.blog_main div.blog_entry p.date {font-size:1.4rem; margin-left:10px;} div.blog_main div.blog_entry ul.category {font-size:1.4rem; line-height:2rem; margin-top:-2rem; text-align:right;} div.blog_main div.blog_entry ul.category li {display:inline-block;} div.blog_main div.blog_entry ul.category li a {margin-right:10px;} div.blog_main div.blog_entry div.content {font-size:1.6rem; line-height:2.5rem; margin-top:40px; padding:0 20px;} div.blog_main div.blog_entry div.content p {margin-top:1.3em;} div.blog_main div.blog_entry div.content img {display:block; margin:3em auto; max-height:600px; width:auto;} div.blog_side {width:360px !important; box-sizing:border-box; padding:40px; background:#FFF; border-top-right-radius:40px; border-bottom-left-radius:40px; float:right;} div.blog_side H3 {font-size:2.4rem; line-height:1; padding-bottom:.6em; text-align:center; background:url(images/foot_line.png); background-position:bottom;} div.blog_side ul.blog_list {} div.blog_side ul.blog_list li {margin-top:10px; padding-bottom:10px; border-bottom:1px #bab9b6 solid;} div.blog_side ul.blog_list li a {display:block; text-decoration:none; outline:0 #f9f5ee solid;} div.blog_side ul.blog_list li a:hover {background:#f9f5ee; outline:5px #f9f5ee solid;} div.blog_side ul.blog_list li a p.date {font-size:1.3rem; color:#222;} div.blog_side ul.blog_list li a p.ttl {font-size:1.8rem; line-height:1.4; color:#222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;} div.blog_side ul.blog_list li a:hover p.ttl {color:#5e3819;} @media screen and (max-height:800px){div.blog_side ul.blog_list li:nth-of-type(n+4) {display:none;}} @media screen and (max-height:700px){div.blog_side ul.blog_list li:nth-of-type(n+3) {display:none;}} div.blog_side H3:nth-of-type(n+2) {margin-top:4em;} div.blog_side ul.blog_category {font-size:1.4rem; line-height:4rem;} div.blog_side ul.blog_category li {border-bottom:1px #bab9b6 solid;} div.blog_side ul.blog_category li a {display:block; color:#222; text-decoration:none; padding-left:1rem; position:relative;} div.blog_side ul.blog_category li a span {position:absolute; right:30px; text-align:right;} div.blog_side ul.blog_category li a::after {font-family:"FontAwesome"; content:"\f105"; position:absolute; right:10px; transition:.2s;} div.blog_side ul.blog_category li a:hover {background:#f9f5ee; color:#5e3819;} div.blog_side ul.blog_category li a:hover::after {right:5px;} /* 404 Not Found -------------------------------------------------- */ body.notfound div#main H1 {font-size:21px; font-weight:bold; text-align:center;} div.notfound {width:800px; margin:100px auto; background:#FFF; font-size:1.6rem; line-height:2; text-align:center; box-sizing:border-box; padding:100px; border-radius:40px;} /* レスポンシブ関連 -------------------------------------------------- */ /*-------------------------------------------------------------------- */ .only_sp {display:none !important;} @media screen and (max-width:767px){ *{ max-width:100% !important; height:auto; width:auto; letter-spacing:0 !important; } .only_pc {display:none !important;} .only_sp {display:block !important;} body { font-size:14px; line-height:25px; } HEADER, div#index, FOOTER {min-width:auto;} /*DRAWER*/ button.drawer-hamburger {position:fixed; right:10px !important; top:20px !important; width:30px; padding:23px 10px 24px; border-radius:100%; z-index:1003; transition:.2s;} button.drawer-hamburger::before, button.drawer-hamburger::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #5e3819; z-index: -1; transition:.2s; border-radius: 100%; } nav.drawer-nav {overflow-y:auto; background-image:url(images/bg.png); background-repeat:repeat !important; background-size:unset !important; padding-top:100px; padding-bottom:10px;} nav.drawer-nav p.intro {color:#5e3819; padding:0 1.5em; font-size:min(3vw, 12px); line-height:1.2;} nav.drawer-nav ul.drawer-menu.content {display:block; width:auto; margin:20px auto; font-size:0;} nav.drawer-nav ul.drawer-menu.content li {display:block;} nav.drawer-nav ul.drawer-menu.content li a {display:block; text-decoration:none;} nav.drawer-nav ul.drawer-menu.content li a p {font-size:min(5.5vw, 20px); line-height:3; color:#5e3819; margin-left:1.5em;} nav.drawer-nav ul.drawer-menu.content li a p::before {content:""; display:inline-block; width:30px; height:30px; background-size:contain !important; vertical-align:text-top; margin-right:.2em; transition:.2s;} nav.drawer-nav ul.drawer-menu.content li a:hover p::before {margin-left:.2em; margin-right:0;} nav.drawer-nav ul.drawer-menu.content li.reason a p::before {background:url("images/menu_reason.png");} nav.drawer-nav ul.drawer-menu.content li.flow a p::before {background:url("images/menu_flow.png");} nav.drawer-nav ul.drawer-menu.content li.result a p::before {background:url("images/menu_result.png");} nav.drawer-nav ul.drawer-menu.content li.company a p::before {background:url("images/menu_company01.png");} nav.drawer-nav ul.drawer-menu.content li.blog a p::before {background:url("images/menu_blog.png");} nav.drawer-nav ul.drawer-menu.sns {text-align:center; background: url(images/foot_line.png); background-position: bottom; padding-bottom:1em;} nav.drawer-nav ul.drawer-menu.sns li {display:inline-block; margin:0 1em;} nav.drawer-nav ul.drawer-menu.sns li a {text-decoration:none;} nav.drawer-nav ul.drawer-menu.sns li a::before {font-family:"FontAwesome"; font-size:2.5rem; font-weight:normal;} nav.drawer-nav ul.drawer-menu.sns li.fb a::before {content:"\f09a";} nav.drawer-nav ul.drawer-menu.sns li.in a::before {content:"\f16d";} nav.drawer-nav ul.drawer-menu.sns li.ml a::before {content:"\f0e0";} nav.drawer-nav ul.drawer-menu.sns li a span {display:none;} nav.drawer-nav ul.drawer-menu.bottom {font-size:min(3vw, 12px); line-height:1.2; overflow:hidden; padding:20px 20px 0;} nav.drawer-nav ul.drawer-menu.bottom li {display:inline-block;} nav.drawer-nav ul.drawer-menu.bottom li.privacy {float:left;} nav.drawer-nav ul.drawer-menu.bottom li.privacy a {color:#5e3819;} nav.drawer-nav ul.drawer-menu.bottom li.copy {float:right; color:#5e3819;} body.drawer-open main, body.drawer-open nav.sp_header .head_logo {/*オープンで他はボカす*/ filter: blur(3px); } /* HEADER -------------------------------------------------- */ HEADER {width:100%; min-width:unset; height:unset; position:fixed; z-index:1002; background-image:url(images/bg.png); background-repeat:repeat !important; background-size:unset !important;} HEADER .head_logo {display:block; width:calc(100vw - 140px); height:auto; aspect-ratio:30/7; max-height:60px; background:url(images/head_logo.png) center center; margin-top:20px; margin-left:10px; margin-bottom:20px; float:none; position:relative;} HEADER .head_logo p {display:none;} /* FOOTER -------------------------------------------------- */ a.pagetop {position:fixed; right:10px; color:#FFF; text-decoration:none; display:block; width:40px; height:40px; border-radius:100%; background:#5e3819; z-index:1000;} a.pagetop::before {font-family:"FontAwesome"; content:"\f077"; display:block; text-align:center; font-size:21px; line-height:40px; transition:0.2s;} a.pagetop:hover {background:#222;} a.pagetop:hover::before {line-height:35px;} a.pagetop span {display:none;} FOOTER {margin:100px 0 65px; position:relative; min-width:unset; } FOOTER H2 {margin-top:-40px;} FOOTER H2 a {display:block; width:60vw; height:auto; aspect-ratio:32/4; background-size:contain !important; background:url("images/foot_name.png"); margin:0 auto 0;} FOOTER H2 a span {display:none;} FOOTER p.address {font-size:1.2rem; color:#5e3819; text-align:center; background: url(images/foot_line.png); background-position: bottom; padding-bottom:1em;} FOOTER div.bg {width:100%; height:140px; margin:0 auto; background-size:contain !important; background:url("images/foot_bg.png");} FOOTER div.bg::before {content:""; display:block; width:80px; height:50px; background-size:contain !important; background:url("images/bg_cloud01.png"); position:absolute; top:-20px; left:calc(50% - 200px); z-index:-2;} FOOTER div.bg::after {content:""; display:block; width:130px; height:90px; background-size:contain !important; background:url("images/bg_cloud02.png"); position:absolute; top:-80px; left:calc(50% + 50px); z-index:-3;} FOOTER div.bg::before {animation: foot_bg01 30s linear infinite;} FOOTER div.bg::after {animation: foot_bg02 35s linear infinite;} div.bottom_contact {position:fixed; bottom:0; left:0; right:0; background-image:url(images/bg.png); background-repeat:repeat !important; background-size:unset !important; padding:10px 0 0 5px;} div.bottom_contact ul {color:#5e3819; font-size:0;} div.bottom_contact ul li {display:inline-block; vertical-align:middle;} div.bottom_contact ul li a {text-decoration:none; color:#5e3819;} div.bottom_contact ul li.tel {width:calc(55vw - 35px);} div.bottom_contact ul li.tel p.tel {font-size:6.5vw; line-height:1;} div.bottom_contact ul li.tel p.tel::before {content:""; display:inline-block; width:20px; height:20px; background:url("images/menu_tel.png"); background-size:contain; vertical-align:bottom;} div.bottom_contact ul li.tel p.time {font-size:3.2vw; text-align:center;} div.bottom_contact ul li.tel p.time span {font-size:0.8em; margin-left:.3em;} div.bottom_contact ul li.mail {width:calc(45vw - 35px);} div.bottom_contact ul li.mail a.contact {display:block; text-align:center; line-height:unset; font-size:4vw;} div.bottom_contact ul li.mail a.contact::before {content:""; display:inline-block; width:20px; height:20px; background:url("images/menu_contact.png"); background-size:contain; margin-top:2px; vertical-align:text-top;} /* div.bottom_contact ul li.mail a.contact {display:block; width:100%; height:auto; aspect-ratio:195/30; text-align:center; line-height:unset; background-image:url("images/menu_contact_bg.png"); background-size:contain; border-radius:2px; margin-top:5px; font-size:1.2rem;} div.bottom_contact ul li.mail a.contact::before {content:""; display:inline-block; width:20px; height:20px; background:url("images/menu_contact.png"); background-size:contain; vertical-align:text-top;} div.bottom_contact ul li.mail a.contact:hover {background-color:#f1e9d9;} */ /* MAIN -------------------------------------------------- */ main {width:100%; overflow:hidden; padding-top:100px;} /* INDEX #index -------------------------------------------------- */ div#index {min-width:auto;} /*スライド*/ div.index_slide {position:relative; width:100%; height:60vw; min-height:unset; box-sizing:border-box; z-index:50;} ul.index_slide {} ul.index_slide li {position:relative; width:100%; height:60vw; min-height:unset; padding:0; box-sizing:border-box;} ul.index_slide li {background-position:center center; background-repeat:no-repeat; background-size:cover !important;} /*NAKAIのまいにち*/ div.index_blog {position:absolute; right:0; bottom:15px; background:#FFFFFFdd; box-sizing:border-box; padding:5px 10px 8px 10px; border-top-left-radius:15px; border-bottom-left-radius:15px;} div.index_blog H2 {font-size:1.4rem; letter-spacing:0.2em; color:#5e3819;} div.index_blog H2::after {content:""; display:inline-block; width:20px; height:20px; background-size:contain !important; vertical-align:text-top; margin-left:.3em; background:url("images/menu_blog.png");} div.index_blog a {color:#222; text-decoration:none; display:block; padding:0 5px 0 10px; overflow:hidden; width:100%; box-sizing:border-box; line-height:1.2;} div.index_blog a p.ph {display:none;} div.index_blog a p.date {font-size:1.2rem; float:left; margin-right:.5em;} div.index_blog a p.ttl {font-size:1.3rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; width:50vw;} div.index_blog a:hover p.ttl {color:#5e3819; text-decoration:underline;} /*中井の家づくり*/ div.index_about {position:relative; margin-top:40px; width:100%; box-sizing:border-box; padding:0;} div.index_about H2 {font-size:2.4rem; color:#5e3819; line-height:1.2; letter-spacing:0.05em !important; width:auto; margin:0 15px;} div.index_about H2 p {font-size:1.5rem; color:#5e3819;} div.index_about div.area {width:auto; margin:20px 15px 0; padding-bottom:0;} div.index_about div.area div.desc {font-size:1.4rem; line-height:2.4rem; width:auto; background:#FFFFFFcc; box-sizing:border-box; padding:20px; border-top-right-radius:30px; border-bottom-left-radius:30px; margin-left:0;} div.index_about div.area ul {width:240px; margin:50px auto 0;} div.index_about div.area ul li {margin-bottom:20px;} div.index_about div.area ul li a {display:block; font-size:1.6rem; line-height:5rem; letter-spacing:0.1em; text-align:center; height:5rem; color:#FFF; text-decoration:none; background:#5e3819; border-top-left-radius:10px; border-bottom-right-radius:10px;} div.index_about div.area ul li.company {position:relative;} div.index_about div.area ul li.company a::before {content:""; display:inline-block; width:30px; height:30px; background-size:contain !important; background:url("images/menu_company01.png"); transition:.2s; position:absolute; left:10px; top:-26px; z-index:-1;} div.index_about div.area ul li.company a::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; background:url("images/menu_company02_w.png"); margin-left:.3em;} div.index_about div.area ul li.reason {} div.index_about div.area ul li.reason a {text-indent:.5em;} div.index_about div.area ul li.reason a::after {content:""; display:inline-block; width:28px; height:28px; background-size:contain !important; vertical-align:text-top; background:url("images/menu_reason_w.png"); margin-right:.2em; transition:.2s;} div.index_about div.area ul li.reason a:hover::after {margin-left:.2em; margin-right:0;} div.index_about div.area ul li.flow {position:relative; overflow:hidden;} div.index_about div.area ul li.flow a::after {content:""; display:inline-block; width:35px; height:35px; background-size:contain !important; background:url("images/menu_flow_w.png"); transition:.2s; position:absolute; right:20px; bottom:-8px;} div.index_about div.area ul li.flow a:hover::after {bottom:-4px;} div.index_about div.ph {position:static; background-size:cover !important; display:block; width:100%; height:60vw; margin-top:-40px;} div.index_about div.bg {height:100px; background-size:contain !important; background:url("images/index_about_bg.png"); position:absolute; left:-20px; right:-100px; bottom:0; max-width:unset !important; background-position:bottom;} div.index_about div.bg::before {content:""; display:block; width:80px; height:50px; background-size:contain !important; background:url("images/bg_cloud01.png"); position:absolute; bottom:110px; left:10%; z-index:0;} div.index_about div.bg::after {content:""; display:block; width:130px; height:90px; background-size:contain !important; background:url("images/bg_cloud02.png"); position:absolute; bottom:100px; left:50%; z-index:0;} div.index_about div.bg::before {animation: index_about_bg02 30s linear infinite;} div.index_about div.bg::after {animation: index_about_bg03 35s linear infinite;} /*スキマ*/ div.index_gap {width:100%; height:25vh; margin-top:100px; clip-path:inset(0);} div.index_gap::after {content:""; position:fixed; top:0; left:0; width:100%; height:100%; z-index:-10; background-size:cover !important;} /*施工事例*/ div.index_result {margin-top:100px;} div.index_result H2 {font-size:2.4rem; color:#5e3819; line-height:1.2; letter-spacing:0.05em !important; width:auto; margin:0 15px 20px;} div.index_result H2 p {font-size:1.5rem; color:#5e3819;} div.index_result ul.index_result {margin-left:calc(50% - 100px); max-width:unset !important;} div.index_result ul.index_result li {} div.index_result ul.index_result li a {display:block; text-decoration:none;} div.index_result ul.index_result li a p.ph {display:flex; overflow:hidden; position:relative; width:100%; height:auto; aspect-ratio:48/32; border-top-left-radius:20px; border-bottom-right-radius:20px;} div.index_result ul.index_result li a p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; transition:transform .2s linear;} div.index_result ul.index_result li a:hover p.ph img {transform:scale(1.1); opacity:1;} div.index_result ul.index_result li a ul.category {display:inline-block; margin-top:10px; float:left;} div.index_result ul.index_result li a ul.category li {display:inline-block; font-size:1rem; line-height:1.6rem; letter-spacing:.1em; color:#FFF; padding:0 .5em; margin-right:10px;} div.index_result ul.index_result li a ul.category li.new {background:#71897a;} div.index_result ul.index_result li a ul.category li.reform {background:#c17955;} div.index_result ul.index_result li a p.ttl {font-size:1.4rem; margin-top:10px; color:#222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;} div.index_result ul.index_result li a:hover p.ttl {color:#5e3819;} div.index_result a.view_all {display:block; font-size:1.4rem; line-height:5rem; letter-spacing:0.1em; text-align:center; width:240px; height:5rem; color:#FFF; text-decoration:none; background:#5e3819; border-top-left-radius:10px; border-bottom-right-radius:10px; margin:80px auto 0; position:relative;} div.index_result a.view_all::before {content:""; display:block; width:40px; height:24px; background-size:contain !important; background:url("images/index_result_view.png"); position:absolute; top:-24px; left:0; right:0; margin:auto;} div.index_result a.view_all::after {font-family:"FontAwesome"; content:"\f054"; transition:.2s; position:absolute; right:20px;} div.index_result a.view_all:hover::after {right:15px;} /* 下層ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ div#main {margin:0 auto 160px;} /* タイトル -------------------------------------------------- */ div#main div.page_ttl {display:flex; overflow:hidden; position:relative; width:100%; height:30vw; background:#f1e9d9;} div#main div.page_ttl H1 {font-size:2.4rem; color:#5e3819; line-height:1.2; letter-spacing:0.15em; display:table; width:100%; margin:auto 15px; padding-bottom:10px; z-index:1;} div#main div.page_ttl H1 p {font-size:1.5rem; color:#5e3819; margin-bottom:5px;} div#main div.page_ttl img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; opacity:0.8; width:100%;} /* 固定ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ div#main div.parts_page {} div#main div.parts_page H2.sub {color:#5e3819; font-size:2rem; letter-spacing:0.1em; width:100%; margin:0 auto;} div#main div.parts_page H2.sub::before {content:"―"; letter-spacing:0; font-weight:normal; margin-right:.5em;} /* 建築工房中井について -------------------------------------------------- */ div.parts_page.company {} div.parts_page.company div.company_message {width:auto; margin:40px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px; position:relative;} div.parts_page.company div.company_message p.company_message {font-size:1.4rem; line-height:2.4rem; letter-spacing:0.2em;} div.parts_page.company div.company_message p.company_name {font-size:1.2rem; line-height:2rem; letter-spacing:0.2em; text-align:right; padding-right:40vw; margin-top:2em;} div.parts_page.company div.company_message p.ph {display:flex; overflow:hidden; position:absolute; right:20px; bottom:-13vw; width:35vw; height:35vw; border-radius:100%;} div.parts_page.company div.company_message p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.company div.company_outline {width:auto; margin:20px 15px 0; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px; position:relative;} div.parts_page.company div.company_outline table {width:100%; font-size:1.4rem; line-height:1.2;} div.parts_page.company div.company_outline table th {display:table; width:auto; padding:.8em .5em .2em; border-bottom:2px #5e3819 solid;} div.parts_page.company div.company_outline table td {display:block; padding:.8em .5em .8em 1em; border-bottom:1px #bab9b6 solid; margin-bottom:1em;} div.parts_page.company div.company_ph {width:auto; margin:20px 15px 0;} div.parts_page.company div.company_ph ul {font-size:0;} div.parts_page.company div.company_ph ul li {display:inline-block; width:calc(50vw - 20px);} div.parts_page.company div.company_ph ul li:nth-of-type(n+2) {margin-left:10px;} div.parts_page.company div.company_ph ul li:nth-of-type(2n+1) {margin-left:0;} div.parts_page.company div.company_map {width:100%; margin:60px auto 0; position:relative; padding:0 0 45vh 0; height:0; overflow:hidden;} div.parts_page.company div.company_map iframe {position:absolute; left:0; top:0; width:100%; height:100%;} /* 私たちができること -------------------------------------------------- */ div.parts_page.reason {} div.parts_page.reason div.reason_intro {width:auto; margin:40px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px; font-size:1.4rem; line-height:2.4rem; letter-spacing:0.15em;} div.parts_page.reason div.reason_why {width:auto; margin:20px 15px 80px; box-sizing:border-box; padding:25px 20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.parts_page.reason div.reason_why ul.reason_why {font-size:0;} div.parts_page.reason div.reason_why ul.reason_why > li {display:block; width:100%; vertical-align:top; margin-right:0;} div.parts_page.reason div.reason_why ul.reason_why > li:nth-of-type(2n) {margin-right:0;} div.parts_page.reason div.reason_why ul.reason_why > li:nth-of-type(n+3) {margin-top:0;} div.parts_page.reason div.reason_why ul.reason_why > li:nth-of-type(n+2) {margin-top:40px;} div.parts_page.reason div.reason_why ul.reason_why > li p.ph {display:flex; overflow:hidden; width:100%; height:auto; aspect-ratio:47/30; position:relative; margin-bottom:10px; border-top-right-radius:10px;} div.parts_page.reason div.reason_why ul.reason_why > li p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.reason div.reason_why ul.reason_why > li H3 {font-size:1.8rem; line-height:2.5rem; color:#5e3819;} div.parts_page.reason div.reason_why ul.reason_why > li p.txt {font-size:1.4rem; line-height:2rem; margin-top:5px;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link {margin-top:10px;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li {} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a {font-size:1.2rem; text-decoration:none; display:block;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a::before {font-family:"FontAwesome"; content:"\f054"; font-size:1.1rem; margin-right:.5em; transition:.2s;} div.parts_page.reason div.reason_why ul.reason_why > li ul.reason_why_link li a:hover::before {margin-left:.2em; margin-right:0.3em;} div.parts_page.reason div.reason_initiative {width:auto; margin:20px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.parts_page.reason div.reason_initiative ul.reason_initiative {font-size:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li {display:block; width:100%; vertical-align:top; margin-right:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li:nth-of-type(2n) {margin-right:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li:nth-of-type(n+3) {margin-top:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li:nth-of-type(n+2) {margin-top:40px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.ph {display:flex; overflow:hidden; width:100%; height:auto; aspect-ratio:47/30; position:relative; margin-bottom:10px; border-top-right-radius:10px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li H3 {font-size:1.8rem; line-height:2.5rem; color:#5e3819;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li p.txt {font-size:1.4rem; line-height:2rem; margin-top:5px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link {margin-top:10px;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li {} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a {font-size:1.2rem; text-decoration:none; display:block;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a::before {font-family:"FontAwesome"; content:"\f054"; font-size:1.1rem; margin-right:.5em; transition:.2s;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a:hover::before {margin-left:.2em; margin-right:0.3em;} div.parts_page.reason div.reason_initiative ul.reason_initiative > li ul.reason_initiative_link li a.blank::after {content:"（外部サイト）"; font-size:1.0rem;} /* ご依頼の流れ -------------------------------------------------- */ div.parts_page.flow {} div.parts_page.flow div.flow_intro {width:auto; margin:40px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px; font-size:1.4rem; line-height:2.4rem; letter-spacing:0.15em;} div.parts_page.flow div.flow_intro_list {width:auto; margin:20px 15px 80px; box-sizing:border-box; padding:25px 20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list {counter-reset:number 0;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li {outline:0 #f9f5ee solid; transition:.2s; position:relative;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li:nth-of-type(n+2) {margin-top:80px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li:hover {background:#f9f5ee; outline:30px #f9f5ee solid; border-radius:10px;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li H3 {font-size:1.8rem; letter-spacing:0.1em; color:#5e3819; border-bottom:1px #5e3819 solid; display:table;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li H3::before {counter-increment:number 1; content:counter(number) ".";} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li p {font-size:1.4rem; line-height:2rem; letter-spacing:0.1em; padding-left:0; padding-top:1em;} div.parts_page.flow div.flow_intro_list ul.flow_intro_list li + li::before {font-family:"FontAwesome"; content:"\f078"; display:block; font-size:3rem; text-align:center; color:#5e3819; position:absolute; left:0; right:0; top:-55px;} /* お問い合わせ -------------------------------------------------- */ div.parts_page.contact {} div.parts_page.contact div.mail {width:auto; margin:40px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.parts_page.contact div.mail H2 {font-size:2rem; line-height:4rem; text-align:center; margin:2em 0 1em;} div.parts_page.contact div.mail label {cursor:pointer;} div.parts_page.contact div.mail table {font-size:1.4rem; width:100%; margin:0 auto;} div.parts_page.contact div.mail table th {display:block; width:100%; padding:20px 0 10px; border-bottom:none; text-align:left; line-height:2rem;} div.parts_page.contact div.mail table th span.must {font-size:1.1rem; display:inline-block; text-align:left; color:#F32E66; margin-left:.5em;} div.parts_page.contact div.mail table th span.note {font-size:1.1rem; display:inline-block; text-align:left; color:#666666; margin-left:.5em;} div.parts_page.contact div.mail table td {display:block; width:100%; padding:0 0 20px 0; border-bottom:1px #bab9b6 solid; text-align:left;} div.parts_page.contact div.mail table td p {margin-bottom:1em;} div.parts_page.contact div.mail table td p:last-of-type {margin-bottom:0;} div.parts_page.contact div.mail table td span.note {font-size:1.1rem; display:inline-block; color:#666666; margin-left:1em;} div.parts_page.contact div.mail table td span.example {font-size:1.1rem; display:block; color:#666666; margin-top:5px; margin-left:.5em;} div.parts_page.contact div.mail input[type="text"], div.parts_page.contact div.mail input[type="email"], div.parts_page.contact div.mail input[type="tel"], div.parts_page.contact div.mail input[type="number"], div.parts_page.contact div.mail select {padding:10px; width:100%; box-sizing:border-box; font-size:1.4rem; line-height:2.5rem; background:#EEE; border:1px #999 solid; border-radius:6px; color:#191919;} div.parts_page.contact div.mail textarea {padding:10px; display:block; margin-top:5px; width:100%; box-sizing:border-box; font-size:1.4rem; background:#EEE; border:1px #999 solid; border-radius:6px;} div.parts_page.contact div.mail table td p.zipcode {text-align:left;} div.parts_page.contact div.mail input[name="contact_zipcode"] {width:8em;} div.parts_page.contact div.mail table td p.address01 {display:inline-block; float:left; width:10em; vertical-align:top;} div.parts_page.contact div.mail table td p.address02 {display:inline-block; float:right; width:calc(100% - 11em);} div.parts_page.contact div.mail table td p.address03 {float:none;} div.parts_page.contact div.mail table td p.address04 {} div.parts_page.contact div.mail select[name="contact_address01"] {width:10em; padding:12px 10px;} div.parts_page.contact div.mail ::placeholder {color:#999; font-size:1.2rem;} div.parts_page.contact div.mail table th label {display:block; text-align:right;} div.parts_page.contact div.mail td label {padding:5px 10px 5px 5px; display:inline-block; letter-spacing:0;} div.parts_page.contact div.mail input[type="submit"]:not(:disabled):hover, div.parts_page.contact div.mail form.invalid input[type="submit"]:hover {background:#222; color:#FFF;} div.parts_page.contact div.mail table.other {margin-top:3em;} div.parts_page.contact div.mail table.other td {text-align:left; border-bottom:none; line-height:1.4;} div.parts_page.contact div.mail table.other td span.wpcf7-form-control-wrap {display:block; background:#f9f5ee; margin-top:1em;} div.parts_page.contact div.mail table.other td span.wpcf7-form-control-wrap span:not(.wpcf7-list-item-label) {display:block; text-align:center;} div.parts_page.contact div.mail table.other td label {display:block; text-align:center; padding:1em;} div.parts_page.contact div.mail input[type="submit"] {margin:30px auto 0; padding:25px; width:300px; display:block; border:none; color:#FFF; letter-spacing:0.3em; text-align:center; font-size:15px; transition:.2s;} div.parts_page.contact div.mail input[type="submit"]:not(:disabled) {background:#5e3819; cursor:pointer;} div.parts_page.contact div.mail input.wpcf7-submit:disabled {background:#aca690; cursor:not-allowed;} div.parts_page.contact div.mail span.wpcf7-not-valid-tip {font-size:1.2rem; font-weight:bold;} .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {padding:1em; text-align:left; font-size:1.2rem; line-height:1.4;} /* プライバシーポリシー */ div.parts_page.contact div.privacy {width:auto; margin:40px 15px 80px; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.parts_page.contact div.privacy p.privacy_intro {font-size:1.4rem; line-height:2.4rem; letter-spacing:0.1em;} div.parts_page.contact div.privacy p.privacy_intro + H3 {margin-top:3.5em;} div.parts_page.contact div.privacy H3 {font-size:1.6rem; line-height:2.5rem; border-bottom:2px #222 solid; display:table;} div.parts_page.contact div.privacy ul.privacy_list {} div.parts_page.contact div.privacy ul.privacy_list li {margin-top:3em;} div.parts_page.contact div.privacy ul.privacy_list li H4 {font-size:1.4rem; line-height:2rem; border-bottom:1px #bab9b6 solid;} div.parts_page.contact div.privacy ul.privacy_list li p {font-size:1.2rem; line-height:1.8rem; padding:1em 0 0 1em;} /* 更新系ページ -------------------------------------------------- */ /* ----------------------------------------------------------- */ /*ページネーション*/ div.wp-pagenavi {text-align:center; margin-top:80px;} .wp-pagenavi {clear:both; text-align:center;} .wp-pagenavi a, .wp-pagenavi span {height:25px; width:25px; border-radius:50%; line-height:23px; text-align:center; border: 1px solid #5e3819 !important; box-sizing:border-box; text-decoration: none; margin:0 .2em !important; padding:0 !important; display:inline-block; background:#FFFFFF66; color:#5e3819; font-size:1rem; letter-spacing:0; } .wp-pagenavi span.current, .wp-pagenavi a:hover {color:#FFF; background:#5e3819;} .wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink {color:#5e3819; background:none; border:none !important; width:auto !important;} .wp-pagenavi a.previouspostslink:hover, .wp-pagenavi a.nextpostslink:hover {color:#222;} .wp-pagenavi a.previouspostslink {margin-right:1em !important;} .wp-pagenavi a.previouspostslink p {position:relative; padding-right:1em; color:#5e3819; font-weight:bold; font-size:1.1rem;} .wp-pagenavi a:hover.previouspostslink p {color:#222;} .wp-pagenavi a.previouspostslink p::after {content:"\f0d9"; position:absolute; right:0; color:#5e3819; font-family:FontAwesome; font-size:1.5rem; transition:.2s;} .wp-pagenavi a:hover.previouspostslink p::after {color:#222;} .wp-pagenavi a.nextpostslink {margin-left:1em !important;} .wp-pagenavi a.nextpostslink p {position:relative; padding-left:1em; color:#5e3819; font-weight:bold; font-size:1.1rem;} .wp-pagenavi a:hover.nextpostslink p {color:#222;} .wp-pagenavi a.nextpostslink p::before {content:"\f0da"; position:absolute; left:0; color:#5e3819; font-family:FontAwesome; font-size:1.5rem; transition:.2s;} .wp-pagenavi a:hover.nextpostslink p::before {color:#222;} .wp-pagenavi span.extend {border:none !important; background:none !important; color:#5e3819; width:auto;} .wp-pagenavi span.pages {display:none; /*display:block; border:none !important; background:none !important; color:#5e3819; width:auto;*/} .wp-pagenavi span.pages p, .wp-pagenavi a.first p, .wp-pagenavi a.last p {text-align:center; font-weight:bold;} .wp-pagenavi a.first , .wp-pagenavi a.last {border:none !important; background:none !important; color:#5e3819 !important;} .wp-pagenavi a.first p , .wp-pagenavi a.last p {font-size:1rem;} .wp-pagenavi a.first:hover , .wp-pagenavi a.last:hover {color:#222 !important;} /*前後戻る*/ div.return {margin:40px auto 0; width:auto; padding:0 20px;} div.return ul.return {display:flex; flex-wrap:nowrap;} div.return ul.return li {width:90%; height:40px;} div.return ul.return li a {display:block; text-decoration:none; font-size:1.5rem; line-height:40px; font-weight:bold; color:#5e3819;} div.return ul.return li a::before, div.return ul.return li a::after {font-family:"FontAwesome"; transition:.2s;} div.return ul.return li.next a {text-align:right;} div.return ul.return li.next a::before {content:"\f060"; margin-right:.5em;} div.return ul.return li.next a:hover::before {margin-right:.7em;} div.return ul.return li.prev a {text-align:left;} div.return ul.return li.prev a::after {content:"\f061"; margin-left:.5em;} div.return ul.return li.prev a:hover::after {margin-left:.7em;} div.return ul.return li.all {width:120%;} div.return ul.return li.all a {text-align:center;} div.return ul.return li.all a::before {content:"\f0ca"; margin-right:.5em;} div.return ul.return li a:hover {color:#222;} /* 施工事例 -------------------------------------------------- */ /*一覧*/ div.result_cat {width:auto; margin:0 15px;} div.result_cat ul.result_cat {text-align:center; margin-top:30px; font-size:0; line-height:0;} div.result_cat ul.result_cat li {display:inline-block; margin:0; width:30%;} div.result_cat ul.result_cat li:nth-of-type(n+2) {margin-left:4%;} div.result_cat ul.result_cat li a {display:block; width:100%; height:26px; font-size:1.4rem; line-height:2.6rem; border-radius:10px; text-align:center; text-decoration:none;} div.result_cat ul.result_cat li.all a {border:2px #5e3819 solid; color:#5e3819;} div.result_cat ul.result_cat li.all a:hover {background:#5e3819; color:#FFF;} body.all div.result_cat ul.result_cat li.all a {background:#5e3819; color:#FFF; pointer-events:none;} div.result_cat ul.result_cat li.new a {border:2px #71897a solid; color:#71897a;} div.result_cat ul.result_cat li.new a:hover {background:#71897a; color:#FFF;} body.new div.result_cat ul.result_cat li.new a {background:#71897a; color:#FFF; pointer-events:none;} div.result_cat ul.result_cat li.reform a {border:2px #c17955 solid; color:#c17955;} div.result_cat ul.result_cat li.reform a:hover {background:#c17955; color:#FFF;} body.reform div.result_cat ul.result_cat li.reform a {background:#c17955; color:#FFF; pointer-events:none;} div.result_list {width:auto; margin:0 15px;} div.result_list p.tag {text-align:center; font-size:1.6rem; line-height:1; color:#666; margin:1em 0 -2em;} div.result_list ul.result_list {width:100%; margin:50px auto 0; font-size:0;} div.result_list ul.result_list > li {display:block; width:100%; margin-right:0; vertical-align:top;} div.result_list ul.result_list > li:nth-of-type(3n) {margin-right:0;} div.result_list ul.result_list > li:nth-of-type(n+2) {margin-top:50px;} div.result_list ul.result_list > li a {display:block; text-decoration:none;} div.result_list ul.result_list > li a p.ph {display:flex; overflow:hidden; position:relative; width:100%; height:auto; aspect-ratio:36/24; border-top-left-radius:20px; border-bottom-right-radius:20px;} div.result_list ul.result_list > li a p.ph img {display:block; margin:auto; position:absolute; left:0; top:0; right:0; bottom:0; transition:transform .2s linear;} div.result_list ul.result_list > li a:hover p.ph img {transform:scale(1.1); opacity:1;} div.result_list ul.result_list > li a ul.category {display:inline-block; margin-top:10px; float:left;} div.result_list ul.result_list > li a ul.category li {display:inline-block; font-size:1.2rem; line-height:2rem; color:#FFF; padding:0 .5em; margin-right:8px;} div.result_list ul.result_list > li a ul.category li.new {background:#71897a;} div.result_list ul.result_list > li a ul.category li.reform {background:#c17955;} div.result_list ul.result_list > li a p.ttl {font-size:1.6rem; margin-top:8px; color:#222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;} div.result_list ul.result_list > li a:hover p.ttl {color:#5e3819;} div.result_list ul.result_list > li ul.tag {font-size:1.2rem; line-height:1.5rem; margin-top:.5em; text-align:left;} div.result_list ul.result_list > li ul.tag li {display:inline-block; margin-top:.5em;} div.result_list ul.result_list > li ul.tag li a {line-height:1; color:#666666; margin-right:.8em;} div.result_list ul.result_list > li ul.tag li a::before {content:"#";} div.result_list ul.result_list > li ul.tag li a:hover {color:#5e3819;} /*個別ページ*/ div.result_catch {width:100%; box-sizing:border-box; padding:40px 0 0; margin:0; min-height:100px; position:relative;} div.result_catch img {display:block; margin:0 auto;} div.result_catch::after {content:""; width:auto; display:block; background:#FFFFFFcc; height:100px; position:absolute; left:0; right:0; bottom:0; border-top-right-radius:30px; z-index:-1;} div.result_entry {width:auto; margin:0 15px 60px; box-sizing:border-box; padding:20px 20px 40px; background:#FFFFFFcc; border-bottom-left-radius:30px; } div.result_entry div.result_ttl {overflow:hidden; background:url("images/result_ttl_bg.png"); background-position:bottom;} div.result_entry div.result_ttl p.category {float:left; line-height:2rem; margin-right:10px;} div.result_entry div.result_ttl p.category a {display:inline-block; font-size:1.2rem; line-height:2rem; color:#FFF; padding:0 .5em; margin-right:8px; margin-top:0;} div.result_entry div.result_ttl p.category a[href*="new"] {background:#71897a;} div.result_entry div.result_ttl p.category a[href*="reform"] {background:#c17955;} div.result_entry div.result_ttl H2 {font-size:1.6rem; line-height:2rem; margin-bottom:1rem;} div.result_entry ul.tag {font-size:1.1rem; line-height:1.4rem; margin-top:.5em; text-align:right;} div.result_entry ul.tag li {display:inline-block; margin-top:.5em;} div.result_entry ul.tag li a {line-height:1; color:#666666; margin-left:.8em; text-decoration:none;} div.result_entry ul.tag li a::before {content:"#";} div.result_entry ul.tag li a:hover {color:#5e3819;} div.result_entry p.result_intro {font-size:1.4rem; line-height:2.4rem; letter-spacing:0.1em; margin-top:30px;} div.result_entry table.result_guide {width:100%; font-size:1.2rem; letter-spacing:0.1em; margin-top:30px;} div.result_entry table.result_guide th {width:6em; padding:.8em .5em .5em; border-bottom:2px #5e3819 solid;} div.result_entry table.result_guide td {padding:.8em .5em .5em 1em; border-bottom:1px #bab9b6 solid;} div.result_entry ul.result_ph {margin-top:60px;} div.result_entry ul.result_ph li {margin-top:40px;} div.result_entry ul.result_ph li img {display:block; margin:auto;} div.result_entry ul.result_ph li p {font-size:1.3rem; line-height:1.6rem; margin-top:.6em; text-align:left;} /* NAKAIのまいにち -------------------------------------------------- */ /*カテゴリー*/ ul.blog_pankuzu {width:auto; margin:1rem 1em -2rem; font-size:1.3rem; line-height:1.6rem; text-align:left; overflow-x:scroll; white-space:nowrap;} ul.blog_pankuzu li {display:inline-block;} ul.blog_pankuzu li a {} ul.blog_pankuzu li + li::before {font-family:"FontAwesome"; content:"\f105"; font-size:1.2rem; margin:0 .5em;} ul.blog_pankuzu li.list + li.list::before {font-family:"FontAwesome"; content:"\2b"; font-size:1.3rem; font-weight:normal; margin:0 .5em;} /*個別記事*/ div.blog_area {width:auto; margin:40px 15px 0; position:relative;} div.blog_main {width:100%; float:none;} div.blog_main div.blog_entry {width:100%; box-sizing:border-box; padding:20px; background:#FFF; border-top-right-radius:30px; border-bottom-left-radius:30px;} div.blog_main div.blog_entry:nth-of-type(n+2) {margin-top:60px;} div.blog_main div.blog_entry p.catch {margin-bottom:20px;} div.blog_main div.blog_entry p.catch img {display:block; margin:0 auto; border-top-right-radius:20px; max-height:600px; width:auto;} div.blog_main div.blog_entry p.ttl {font-size:1.8rem; line-height:1.2; padding-bottom:.3em; border-bottom:1px #bab9b6 solid; margin-bottom:.5em;} div.blog_main div.blog_entry p.date {font-size:1.2rem; margin-left:10px;} div.blog_main div.blog_entry ul.category {font-size:1.2rem; line-height:1.6rem; margin-top:-2rem; text-align:right;} div.blog_main div.blog_entry ul.category li {display:inline-block;} div.blog_main div.blog_entry ul.category li a {margin-right:10px;} div.blog_main div.blog_entry div.content {font-size:1.4rem; line-height:2.4rem; margin-top:30px; padding:0;} div.blog_main div.blog_entry div.content p {margin-top:1.3em;} div.blog_main div.blog_entry div.content img {display:block; margin:1.5em auto; max-height:40vh; width:auto;} /* 404 Not Found -------------------------------------------------- */ body.notfound div#main H1 {font-size:2rem; font-weight:bold; text-align:center; margin-top:2em;} div.notfound {width:auto; margin:40px 15px; background:#FFF; font-size:1.3rem; line-height:2; text-align:center; box-sizing:border-box; padding:60px 20px; border-radius:30px;} }