@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap"); :root { --color-white: #fff;
--color-text: #402011; --color-primary: #92B402;
--color-green-light: #AED047;
--color-green-tel: #C3D671;
--color-green-mail: #92B402;
--color-green-dark: #819F00;
--color-bg-green: #F4F7EB; --color-gray: #C9C9C9;
--color-gray-light: #ccc;
--color-border: #EEEEEE; --color-overlay: rgba(20, 20, 20, 0.8);
--shadow-text: rgba(0, 0, 0, 0.7);
}
.noto-serif-jp {
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
} *,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
:where([hidden]:not([hidden='until-found'])) {
display: none !important
}
:where(html) {
-webkit-text-size-adjust: none;
color-scheme: dark light
}
@supports not (min-block-size:100dvb) {
:where(html) {
block-size: 100%
}
}
@media (prefers-reduced-motion:no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth
}
}
:where(body) {
line-height: 1.8;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit
}
:where(textarea) {
resize: vertical;
resize: block
}
:where(button, label, select, summary, [role='button'], [role='option']) {
cursor: pointer
}
:where(:disabled) {
cursor: not-allowed
}
:where(label:has(>input:disabled), label:has(+input:disabled)) {
cursor: not-allowed
}
:where(button) {
border-style: solid
}
:where(a) {
text-underline-offset: .2ex
}
:where(ul, ol) {
list-style: none
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block
}
:where(img, picture, svg) {
max-inline-size: 100%;
block-size: auto
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
font-weight: 400;
}
:where(h1, h2, h3) {
line-height: calc(1em + 1rem)
}
:where(hr) {
border: none;
border-block-start: 1px solid;
color: inherit;
block-size: 0;
overflow: visible
}
:where(:focus-visible) {
outline: 2px solid var(--focus-color, Highlight);
outline-offset: 2px
}
:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
position: absolute !important;
white-space: nowrap !important;
border: 0 !important
} * {
transition: .25s all;
}
:where(html) {
color-scheme: var(--color-white);
}
html {
background: var(--color-white);
scroll-behavior: smooth;
font-size: 100%;
overflow-x: hidden;
}
body {
background: var(--color-bg-green);
margin: 0;
padding: 0;
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 400;
color: var(--color-text);
font-size: 100%;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--color-primary);
display: block;
text-decoration: none;
} .txs-14 {
font-size: 0.875rem;
}
.txs-16 {
font-size: 1rem;
}
.txs-18 {
font-size: 1.125rem;
}
.txs-19 {
font-size: 1.1875rem;
}
.txs-20 {
font-size: 1.25rem;
}
.txs-21 {
font-size: 1.3125rem;
}
.txs-23 {
font-size: 1.4375rem;
}
.txs-24 {
font-size: 1.5rem;
}
.txs-25 {
font-size: 1.5625rem;
}
.txs-28 {
font-size: 1.75rem;
}
.txs-34 {
font-size: 2.125rem;
}
.txs-36 {
font-size: 2.25rem;
}
.txs-38 {
font-size: 2.375rem;
}
.txs-40 {
font-size: 2.5rem;
}
.txs-42 {
font-size: 2.625rem;
}
.txs-46 {
font-size: 2.875rem;
}
.txs-48 {
font-size: 3rem;
}
.txs-51 {
font-size: 3.1875rem;
}
.txs-54 {
font-size: 3.375rem;
}
.txs-57 {
font-size: 3.5625rem;
}
.txs-62 {
font-size: 3.875rem;
}
.txs-64 {
font-size: 4rem;
}
.txs-70 {
font-size: 4.375rem;
}
.txs-72 {
font-size: 4.5rem;
}
.txs-75 {
font-size: 4.6875rem;
}
.txs-78 {
font-size: 4.875rem;
}
.txs-80 {
font-size: 5rem;
}
.txs-82 {
font-size: 5.125rem;
}
.txs-86 {
font-size: 5.375rem;
}
.txs-88 {
font-size: 5.5rem;
}
.txs-150 {
font-size: 9.375rem;
}
.txs-200 {
font-size: 12.5rem;
} .txw-r {
font-weight: 400;
}
.txw-m {
font-weight: 500;
}
.txw-b {
font-weight: 700;
}
.txw-h {
font-weight: 900;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.pc-center {
text-align: center;
}
.pc-right {
text-align: right;
}
p {
font-size: 1rem;
line-height: 1.8;
}
@media screen and (min-width: 1080px) {
.txs-48 {
font-size: 3rem;
}
.txs-54 {
font-size: 3.5rem;
}
.txs-62,
.txs-72 {
font-size: 4.5rem;
}
.txs-80,
.txs-88 {
font-size: 5rem;
}
.txs-150 {
font-size: 8rem;
}
.txs-200 {
font-size: 10rem;
}
}
@media screen and (max-width: 768px) {
.txs-14,
.txs-16 {
font-size: 1rem;
}
.txs-18 {
font-size: 1rem;
}
.txs-20,
.txs-21,
.txs-23,
.txs-24,
.txs-28 {
font-size: 1.25rem;
}
.txs-34,
.txs-36,
.txs-38,
.txs-40,
.txs-42,
.txs-46,
.txs-48 {
font-size: 1.5rem;
}
.txs-51,
.txs-54,
.txs-57 {
font-size: 1.8rem;
}
.txs-62,
.txs-64,
.txs-70,
.txs-72 {
font-size: 2rem;
}
.txs-75,
.txs-78,
.txs-80,
.txs-82,
.txs-86,
.txs-88 {
font-size: 2.25rem;
}
.txs-150,
.txs-200 {
font-size: 3rem;
}
p {
font-size: 1rem;
line-height: 1.8;
}
.pc-center {
text-align: left;
}
.pc-right {
text-align: left;
}
} .wrap {
padding: 0;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.contents {
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1280px;
}
.inner {
margin: 0 auto;
padding: 0 100px;
width: 100%;
max-width: 1280px;
}
.pc {
display: block;
}
.pcd {
display: block;
}
.pd {
display: none;
}
.pds {
display: none;
}
.sp {
display: none;
}
@media screen and (max-width: 1280px) {
body {
width: 100%;
overflow: hidden;
}
.contents,
.inner {
padding: 0 4vw;
}
}
@media screen and (max-width: 1080px) {
.pc {
display: none;
}
.pcd {
display: block;
}
.pd {
display: block;
}
.pds {
display: block;
}
.sp {
display: none;
}
}
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.pcd {
display: none;
}
.pd {
display: none;
}
.pds {
display: block;
}
.sp {
display: block;
}
} #hamburger {
position: fixed;
top: 20%;
right: -1px;
width: 55px;
z-index: 3;
height: 175px;
}
#hamburger .menu-iconsp {
display: none;
}
.menu-icon img {
content: url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/menu-open.png);
width: 55px;
transition: content 0.2s ease;
}
#hamburger:hover .menu-icon img {
content: url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/menu-close.png);
}
#hamburger.active .menu-icon img {
content: url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/menu-close.png);
}
#main-nav {
z-index: 3;
position: fixed;
top: 0;
right: 0;
height: 100vh;
background: var(--color-primary);
color: var(--color-white);
display: none;
}
#main-nav.active {
display: block;
}
#bag {
display: block;
z-index: -2;
position: fixed;
background: var(--color-overlay);
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
#hamburger-close2 {
position: absolute;
top: 20%;
z-index: 5;
left: -54px;
}
#hamburger-close {
z-index: 5;
position: fixed;
top: 40px;
right: 40px;
}
#main-nav a {
font-weight: 500;
color: var(--color-white);
}
#main-nav .flex {
width: 300px;
display: flex;
justify-content: space-between;
}
#main-nav .flex li {
padding: 0 0 16px;
}
#main-nav .contactlink {
margin: 24px auto 20px;
background: var(--color-white);
color: var(--color-primary);
font-weight: 600;
text-align: center;
line-height: 50px;
height: 50px;
border-radius: 25px;
width: 100%;
font-size: 18px;
}
#main-nav .sub {
padding-bottom: 100px;
width: 300px;
gap: 20px;
display: flex;
justify-content: center;
}
#main-nav .sub a {
font-size: 14px;
}
#main-nav .wrap {
background: var(--color-primary);
color: var(--color-white);
position: relative;
z-index: 4;
padding: 140px 60px 0;
overflow: scroll;
height: 100vh;
} #header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}
#header .logo.flex {
padding: 22px 0 0 40px;
gap: 30px;
display: flex;
}
#header .flex img {
width: 578px;
max-width: 40vw;
}
#header h1 {
color: var(--color-white);
text-shadow: 0 0 10px var(--shadow-text);
line-height: 1;
}
#hd-nav {
position: absolute;
top: 0;
right: 0;
height: 80px;
width: 590px;
}
#hd-nav .flex {
display: flex;
}
#hd-nav .tel {
background: var(--color-white);
height: 80px;
border-radius: 0 0 0 30px;
padding: 10px 0 0 10px;
text-align: center;
line-height: 1;
width: 310px;
}
#hd-nav .tel a {
padding-left: 20px;
background: url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/icon-tel.png) no-repeat left 28px bottom 3px;
background-size: 21px auto;
}
#hd-nav .mail {
height: 80px;
text-align: center;
line-height: 80px;
width: 280px;
background: linear-gradient(to left, var(--color-primary), var(--color-green-light));
}
#hd-nav .mail a {
color: var(--color-white);
padding-left: 30px;
background: url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/icon-mail.png) no-repeat left 40px bottom 29px;
background-size: 26px auto;
}
@media screen and (max-width: 1080px) {
#header {
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
#hd-nav {
height: 50px;
}
#header .logo h1,
#hamburger-close2 {
display: none;
}
#header .logo.flex {
display: none;
}
#hd-nav .flex {
display: block;
height: 50px;
background: var(--color-gray-light);
position: relative;
}
#h1logo {
height: 50px;
padding-top: 2px;
}
#h1logo img {
margin: 0 auto;
}
#hd-nav .tel p,
#hd-nav .tel span,
#hd-nav .mail span {
display: none;
}
#hd-nav .tel,
#hd-nav .mail {
border-radius: 0;
padding: 0;
position: absolute;
width: 34vw;
z-index: 3;
height: 50px;
}
#hd-nav .tel {
top: 0;
right: 67vw;
}
#hd-nav .mail {
top: 0;
right: 33vw;
}
#hd-nav .tel a {
width: 100%;
height: 50px;
background: var(--color-green-tel) url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/icon-tel2.png) no-repeat center center;
background-size: 21px auto;
}
#hd-nav .mail a {
width: 100%;
height: 50px;
background: var(--color-green-mail) url(//hikari-paint.co.jp/wp-content/themes/swell_child/apaman-lp/asset/images/icon-mail.png) no-repeat center center;
background-size: 26px auto;
}
#hamburger {
top: 0;
right: 0;
width: 33vw;
height: 50px;
z-index: 1;
background: var(--color-green-dark);
}
#hamburger .menu-iconsp {
display: block;
width: 34vw;
height: 50px;
}
#hamburger .menu-iconsp img {
height: 50px;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
#main-nav .wrap {
padding: 120px 20px 0;
width: 90vw;
}
#main-nav .flex {
width: 100%;
justify-content: center;
gap: 40px;
}
#main-nav .sub {
width: 100%;
}
} #thanks {
padding-top: 300px;
padding-bottom: 200px;
}
#thanks h1 {
padding-bottom: 20px;
} #footer .wrap {
padding: 80px;
}
#footer .info {
gap: 50px;
display: flex;
}
#footer .info table td,
#footer .info table th {
padding: 2px 30px 6px 0;
letter-spacing: normal;
border-bottom: 1px solid var(--color-border);
}
#footer .info table th {
padding-right: 30px;
text-align: left;
}
#footer .ft {
padding-top: 50px;
justify-content: flex-end;
gap: 40px;
display: flex;
}
#footer .ft .right {
text-align: right;
}
#footer .ft .right a {
text-decoration: underline;
color: var(--color-text);
}
#footer .ft .left {
line-height: 1;
color: var(--color-primary);
padding-left: 30px;
border-left: 1px solid var(--color-primary);
}
#footer .copy {
margin-top: 5px;
color: var(--color-gray);
line-height: 1.2;
}
@media screen and (max-width: 1080px) {
#footer .wrap {
padding: 50px 4vw;
}
#footer .info {
display: block;
}
#footer .address {
margin-top: 30px;
}
#footer .info table td {
padding-right: 0;
}
#footer .ft .left {
display: none;
}
}
@media screen and (max-width: 768px) {
#footer .info table th,
#footer .info table td {
display: block;
}
#footer .info table th {
border-bottom: none;
padding: 10px 0 0;
}
#footer .info table td {
padding: 0 0 10px;
}
#footer .txs-14 {
font-size: 12px;
letter-spacing: normal;
}
#footer h1 img {
margin: 0 auto;
}
}