@charset "utf-8";
/* -----
css Information
File name；common.css
Description；index.html, about/, e-store/, services/
First time；2026-01
Editors；bukuyan
Last Editor；
Update；
----- */

#header {
align-items: center;
display: flex;
height: 72px;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}

#header .logo {
background: #ffdead;
border-radius: 0;
height: 80px;
margin: 0;
padding: 0;
text-align: center;
top: 0;
width: 100%;
}

#header .title {
font-size: 2.4rem;
line-height: 72px;
}

#header .title-in {
font-family: cursive;
font-size: 1.6rem;
padding-right: .5rem;
}

#header .logo img {
border-radius: 50%;
display: block;
left: .5rem;
position: absolute;
top: 0;
width: 72px;
}

#header h1 .inner2::before,
#header h1 .inner2::after,
#header h1 .inner1::after {
display: none;
}

.hero {
margin: 72px auto 0;
position: relative;
width: 100%;
}

.hero img {
width: 100%;
}

.brand-outer {
margin: 48px 8px 48px;
outline: 1px solid #ff8c00;
padding: 0;
position: relative;
}

.brand-outer .brand {
font-size: 2.0rem;
margin: 0;
padding-left: 8px;
text-align: left;
}

.brand-outer::after {
border-color: transparent transparent #ff8c00 transparent;
border-style: solid;
border-width: 40px 280px 28px 72px;
content: '';
display: block;
left: 0;
position: absolute;
top: -68px;
z-index: 1;
}

.brand-outer .icons-2,
.brand-outer .icons-1 {
background-color: #25AF01;
content: '';
display: inline-block;
height: 8px;
margin: 0 8px 4px 24px;
transform: rotate(-45deg);
width: 8px;
}

.brand-outer .mob_br2,
.brand-outer .mob_br1 {
display: none;
}

.brand-outer .mob_br2 {
display: block;
}

.home-office {
height: 100%;
margin: 0 auto;
overflow: hidden;
padding: 30% 8px;
position: relative;
width: 100%;
}

.home-office img {
height: auto;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}

.furniture-area {
margin: 16px 0 0;
padding: 0 8px;
width: 100%;
}

.furniture-area .title {
color: #ffa500;
font-size: 2.0rem;
margin: 0 8px;
}

.furniture-area .title span {
padding-left: 40px;
text-indent: 40px;
}

.furniture-area .lead {
font-size: 1.8rem;
margin: 12px 8px;
}

.furniture-area .notes {
margin: 12px 8px;
}

.furniture-area .notes .dpc_br,
.furniture-area .lead .dpc_br,
.furniture-area .title .dpc_br {
}

.furniture-area .goods {
margin: 24px 0;
}

.furniture-area .goods img {
width: 100%;
}

.info {
position: relative;
width:100%;
}

.info .inside {
padding: 0 8px
}

.info .box-left {
margin-bottom: 40px;
padding-bottom: 16px;
}

.info .contact {
font-size: 1.8rem;
margin-bottom: 0;
padding: 16px 8px 24px;
text-align: left;
width: 100%;
}

.info .contact h2 {
margin: 0 0 8px 0;
font-size: 2.0rem;
letter-spacing: .1rem;
color: #000;
}

.info .contact .addr {
color: #000;
padding: 0;
}

.info .contact .tel {
 margin-bottom: -16px;
}

.info .contact a.mobile {
display: inline-block;
margin: 8px 0;
padding: 4px;
}

.info .one-week {
margin: 8px 0 16px;
}

.info .one-week .holiday {
color: #0000e6;
}

.info .kanaken-qr2,
.info .kanaken-qr {
height: 160px;
margin: 0 0 56px 96px;
width: 160px;
}

.info .kanaken-qr2 {
margin-top: 160px;
padding-top: 8px;
}

.info .kanaken-qr2 p,
.info .kanaken-qr p {
padding-bottom: 16px;
text-align: center;
}

.info .kanaken-qr2 img,
.info .kanaken-qr img {
width: 100%;
}

.info .map-box {
height: 240px;
margin-top: 16px;
padding: 0;
width: 100%;
}

#footer {
background:#fdf5e6;
margin-top: 16px;
padding-top: 16px;
width: 100%;
}

#footer .footer-nav {
margin: auto;
width: 98%;
}

#footer .nav {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 16px auto 0;
}

#footer .nav li {
text-align: center;
padding: 16px;
}

#footer .nav li a {
background: #fff;
box-shadow: 2px 2px 4px #696969;
color: #121212;
display: block;
font-size: 1.8rem;
line-height: 1.8;
margin: 0;
padding: 8px;
width: 100%;
}

#footer .nav li a {
background: #fff;
border-radius: 4px;
box-shadow: 2px 2px 4px #696969;
color: #121212;
display: block;
font-size: 1.7rem;
height: 80px;
line-height: 80px;
margin: 0;
padding: 0;
width: 100%;
}

#footer .footer-contact {
margin: 40px auto 0;
padding-left: 16px;
width: 98%;
}

#footer h2 {
font-size: 2.0rem;
letter-spacing: .4rem;
margin-bottom: 8px;
}

#footer address {
font-style: normal;
}

#footer a.mobile  {
display: inline-block;
margin: 8px 0;
padding: 4px;
}

#footer .copyright {
margin: 0 auto;
padding: 16px 0;
text-align: center;
}

#footer .copyright small {
color: #000;
font-size: 1.4rem;
}

#footer .back-to-top .inner span {
display: none;
}

.br_mob8,
.br_mob1 {
display: none;
}

@media screen and (min-width:768px) {
#header .title {
font-size: 2.8rem;
}

#header .logo img {
border-radius: 50%;
left: 2.5rem;
position: absolute;
top: 0;
width: 72px;
}

.brand-outer .brand .space {
padding-left: 1.5rem;
}

.home-office {
padding: 34% 8px;
}

.furniture-area .title {
font-size: 2.4rem;
color: #ffa500;
margin: 0 8px;
}

.furniture-area .title span {
padding-left: 40px; 
text-indent: 40px;
}

.furniture-area .notes,
.furniture-area .lead {
font-size: 2.0rem;
line-height: 1.5;
margin: 12px 8px;
}

.info .contact {
font-size: 1.8rem;
margin-bottom: 176px;
padding: 16px 8px 24px;
text-align: left;
width: 100%;
}

.info .contact a.mobile {
pointer-events: none;
}

.info .kanaken-qr2,
.info .kanaken-qr {
left: 5%;
position: absolute;
top: 344px;
}

.info .kanaken-qr2 {
left: 50%;
padding-top: 0;
top: 184px;
}

.info .map-box {
height: 320px;
}

#footer .footer-nav {
margin: auto;
}

#footer .nav {
display: flex;
justify-content: space-between;
margin: 16px auto 40px;
width: 96%;
}

#footer .nav li {
margin: 8px 16px 8px 0;
}

#footer .nav li:last-child {
margin-right: 0;
}

#footer .nav li a {
background:transparent;
box-shadow: none;

height: 48px;
line-height: 48px;
}

#footer .nav li {
position: relative;
}

#footer .nav li::after {
color: #121212;
content: '/';
padding: 0;
position: absolute;
right: -16px;
text-shadow: 0 0 0 rgba(0,0,0,0);
top: 28px;
}

#footer .nav li:last-child::after {
content: '';
text-shadow: none;
}

#footer .footer-contact {
margin: 0;
padding-left: 32px;
}

#footer a.mobile {
pointer-events: none;
}

#footer .kanaken-qr30 {
height: 88px;
left: 42%;
position: absolute;
top: 4px;
width: 88px;
}

#footer .copyright {
margin: auto;
padding: 0 0 24px;
}

.br_mob9,
.br_mob8,
.br_mob7,
.br_mob5,
.br_mob3,
.br_mob2,
.br_mob1 {
display: none;
}
}

@media screen and (min-width:1024px) {
#header {
display: block;
margin: 0;
padding: 0;
}

#header .logo {
background: transparent;
display: block;
max-width: 150px;
margin:0 16px;
padding: 40px 0 20px 0;
top: 5.0rem;
}

#header .logo {
display: block;
}

#header .title {
display: none;
}

#header .logo img {
box-shadow: 0 4px 4px 0 rgba(7,7,7, .5);
left: -8px;
position: absolute;
top: -36px;
width: 100%;
}

#header h1 .inner2::before,
#header h1 .inner2::after,
#header h1 .inner1::after {
color: #ff8833;
content: "K";
display: block;
font-size: 5.0rem;
left: 144px;
line-height: 1;
position: absolute;
text-align: left;
text-shadow: 2px 2px 0 rgba(23,21,21, .8);
top: 40px;
width: 100px;
}

#header h1 .inner2::before {
content: "ANAKEN";
font-size: 2.2rem;
left: 184px;
position: absolute;
top: 64px;
width: 120px;
}

#header h1 .inner2::after {
color: #1c1c1c;
content: "INTERIOR　COMMUNICATION";
font-size: 2.0rem;
left: 144px;
position: absolute;
text-shadow: none;
top: 100px;
width: 360px;
}

.hero {
margin: 168px auto 0;
width: 100%;
}

.hero .heading {
font: 5vw/1.5 serif;
color: #ff8c00;
margin-top: 88px;
}

.hero .heading span {
padding: 0 0 0 480px;
}

.brand-outer {
background: linear-gradient(90deg,#fbb034,#fff);
box-shadow: 0 1px 0 rgba(0,0,0,0);
margin: 48px 0 0 -24px;
outline: 0;
padding: 8px 0;
position: relative;
width: calc(100% + 1.3%);
}

.brand-outer .brand {
font-size: 2.6rem;
background: linear-gradient(150deg,#fff,#fff,#ffcc33,#fff,#fff);
margin: 0;
padding: 16px 40px;
width: 100%;
}

.brand-outer .brand .icons-2,
.brand-outer .brand .icons {
background-color: #25AF01;
content: '';
display: inline-block;
height: 8px;
margin: 0 8px 4px 0;
transform: rotate(-45deg);
width: 8px;
}

.brand-outer .brand .icons-2 {
margin-left: 24px;
}

.brand-outer .brand .space {
background-color: transparent;
display: inline-block;
padding-left: 32px;
transform: rotate(0);
}

.brand-outer::before {
border: none;
border-bottom: solid 32px transparent;
border-right: solid 24px #6081b7;
content: '';
left: 0;
position: absolute;
top: 100%;
}

.brand-outer .brand .icons-2,
.brand-outer .brand .icons {
background-color: #25AF01;
content: '';
display: inline-block;
height: 8px;
margin: 0 8px 4px 0;
transform: rotate(-45deg);
width: 8px;
}

.brand-outer .brand .icons-2 {
margin-left: 24px;
}

.brand-outer .brand .space {
display: inline-block;
padding-left: 32px;
transform: rotate(0);
}

.brand-outer .brand .mob_br2,
.brand-outer .brand .mob_br1 {
display: none;
}

.brand-outer .brand .mob_br2 {
display: none;
}

.home-office {
padding: 26% 8px;
width: 80%;
}

.home-office img {
border: 16px solid #f5f5f5;
border-radius: 5px;
box-shadow: 0 0 4px 0 #8a8a8a;
}

.furniture-area {
margin: auto;
width: 96%;
z-index: 10;
}

.furniture-area .title-box {
background: linear-gradient(90deg,#fbb034,#fff);
box-shadow: 0 1px 0 rgba(0,0,0,0);
margin: 0 0 0 -72px;
padding: 8px 0;
position: relative;
width: 100%;
}

.furniture-area .title-box .title {
border-top: dashed 2px #fff;
border-bottom: dashed 2px #fff;
color: #000;
font-size: 2.8rem;
line-height: 56px;
margin: 0;
padding: 0 32px 0 160px;
vertical-align: middle;
width: 100%;
}

.furniture-area .title span {
padding-left: 40px;
text-indent: 40px;
}

.furniture-area .title-box::before {
border: none;
border-bottom: solid 32px transparent;
border-right: solid 24px #6081b7;
content: '';
left: 8px;
position: absolute;
top: 100%;
}

.furniture-area .notes,
.furniture-area .lead {
font-size: 2.6rem;
margin: 12px 8px 12px 64px;
width: 80%;
}

.furniture-area .notes {
margin-top: 8px;
}

.furniture-area .goods {
margin: 0;
padding: 0;
position: relative;
width: 36%;
}

.furniture-area .goods:nth-child(1n) {
margin-left: 64%;
top: 0;
}

.furniture-area .goods:nth-child(2n) {
margin-left: 26%;
top: -32px;
width: 48%;
z-index: 1;
}

.furniture-area .goods:nth-child(3n) {
margin-left: 0;
top: -72px;
}

.furniture-area .goods img {
border-radius: 8px; 
box-shadow: 0px 6px 6px 0px rgba(0,0,0, .5);
transition: transform .8s ease;
width: 100%;
}

.info {
margin-top: 24px;
}

.info .inside {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: auto;
padding: 0;
width: 100%;
max-width: 1600px;
}

.info .box-right,
.info .box-left {
flex: 0 0 45%;
height: 600px;
width: 100%;
}

.info .box-left {
margin: 0;
padding: 0;
}

.info .box-right {
background: #e0ffff;
flex: 0 0 54%;
}

.info .contact {
height: 600px;
padding: 4px 4px 4px 16px;
}

.info .contact h2 {
letter-spacing: .4rem;
margin: 0px 0 8px 0;
}

.info .contact .fax,
.info .contact .tel {
margin-bottom: -16px;
}

.info .contact .fax {
margin-bottom: 8px;
}

.info .contact a.mobile {
margin-top: 0;
}

.info .one-week .space {
padding-left: 1.0rem;
}

.info .kanaken-qr2,
.info .kanaken-qr {
left: 0;
position: absolute;
top: 344px;
}

.info .kanaken-qr2 {
left: 20%;
top: 184px;
}

.info .map-box {
height: 600px;
margin: 0;
padding: 4px;
}

#footer {
height: 180px;
margin-top: 0;
padding-top: 24px;
position: relative;
}

#footer .footer-nav {
margin-top: 8px;
}

#footer .nav {
display: flex;
margin: 0 2% 0 auto;
width: 72%;
}

#footer .nav li {
flex: auto;
margin: 8px 24px 8px 0;
}

#footer .nav li a {
box-shadow: none;
margin: 0;
padding: 8px 0;
padding: 0;
text-align: center;
height: 48px;
line-height: 48px;
}

#footer .nav li a:hover {
color: #0000cd;
text-shadow: 1px 0 1px rgba(47,79,79, .8);
background: #fff;
border-radius: 10px;
}

#footer .nav li {
position: relative;
}

#footer .nav li::after {
content: '/';
padding: 0;
position: absolute;
right: -16px;
top: 28px;
}

#footer .nav li:last-child::after {
content:'';
}

#footer .footer-contact {
left: 0;
margin: 0;
padding-left: 2%;
position: absolute;
top: 0;
width: 25%;
}

#footer h2 {
margin-top: 32px;
}

#footer a.mobile {
padding: 0;
}

#footer .copyright {
left: 160%;
margin: 0;
position: absolute;
text-align: center;
top: 144px;
width: 98%;
}

#footer .back-to-top {
display: block;
margin: 0;
position: absolute;
right: 12%;
text-align: center;
width: 160px;
z-index: 80;
}

#footer .back-to-top .inner {
background: #ffa500;
border: 2px solid #ebebeb;
border-radius: 80px;
box-shadow: 0 6px 6px 0 rgba(0,0,0, .5);
color: #0e0916;
display: inline-block;
height: 80px;
margin: 0;
outline: none;
position: relative;
text-align: left;
text-decoration: none;
transition: .8s;
width: 80px;
}

#footer .back-to-top .inner span {
color: #000;
display: inline-block;
font: bold 2.0rem/1.6 serif;
left: -24px;
position: absolute;
top: 26px;
width: 160px;
}

#footer .back-to-top .inner:hover {
background: #ffa500;
box-shadow: 0 0 0 0 transparent;
transform: translateY(8px);
}

.br_mob9,
.br_mob2,
.br_mob1 {
display: none;
}
}