@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2025.4.7
Last Updated: 2025.4.21
*/


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');


/* set
------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
-webkit-text-size-adjust: 100%;
font-family: '游ゴシック', '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
color: #000;
font-size: 1.6rem;
font-weight: 500;
}
ul,ol {
list-style: none;
}
hr {
margin: 3rem 0;
border: none;
border-bottom: 1px solid #000;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
caption {
caption-side: bottom;
}
video,iframe {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
.opa a:hover img {
opacity: .7;
}
:hover {
transition: .3s;
}
.smd,.smp,.flex.smd,.flex.smp {
display: none;
}
.pc {
display: block;
}
.pc.inline {
display: inline-block;
}
.flex.pc {
display: flex;
}


/* common
------------------------------------------------------------ */
/* layout */
main {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
article {
width: 100%;
position: relative;
}
section {
width: 96%;
max-width: 1000px;
margin: 0 auto;
position: relative;
}

/* flexbox */
.flex {
display: flex;
}
.flex.wrap {
flex-wrap: wrap;
}
.col,
.col-2,
.col-3,
.col-4 {
flex-wrap: wrap;
justify-content: space-between;
}
.flex.row-end {
flex-direction: row-reverse;
}
.flex.end {
justify-content: flex-end;
}
.flex.center {
justify-content: center;
}
.flex.around {
justify-content: space-around;
}
.flex.start {
align-items: flex-start;
}
.flex.aligin-center {
align-items: center;
}
.flex.aligin-end {
align-items: flex-end;
}
.flex.column {
flex-direction: column;
}
.flex.column-end {
flex-direction: column-reverse;
}
.col-2 >* {flex-basis: 48%;}
.col-3 >* {flex-basis: 32%;}
.col-4 >* {flex-basis: 24%;}
.col-3::after {
content: "";
width: 32%;
height: 0;
display: block;
}
.col-4::before,
.col-4::after {
content: "";
width: 24%;
height: 0;
display: block;
}
.col-4::before {
order: 1;
}
.flex.end::before,
.flex.end::after {
display: none;
}

/* style */
.none {
display: none;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.circle {
border-radius: 50%;
}
.semicircle {
border-radius: 100vh;
}
table.auto {
width: auto;
margin: 0 auto;
}
.vwmax img {
width: 100vw;
}

/* color */
.grn {
color: #009c3b;
}
.ygrn {
color: #99cc66;
}

/* background */
.bg {
position: relative;
}
.bg::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
z-index: -1;
}
.top40::before {
background: url("img/bg_top40.svg") no-repeat top/100% auto;
top: 0;
}
.top60::before {
background: url("img/bg_top60.svg") no-repeat top/100% auto;
top: 0;
}
.middle::before {
background: url("img/bg_middle.svg") no-repeat top/100% auto;
top: 0;
}
.btm30::before {
background: url("img/bg_btm30.svg") no-repeat bottom/100% auto;
bottom: 0;
}
.btm20::before {
background: url("img/bg_btm20.svg") no-repeat bottom/100% auto;
bottom: 0;
}
.st01::before {
background: url("img/bg_street_01.png") no-repeat top/100% auto;
top: 0;
}
.st02::before {
background: url("img/bg_street_02.png") no-repeat bottom/100% auto;
top: 0;
}

/* title */
#ttl.bg::before {
z-index: 0;
}
#ttl h1 {
color: #FFF;
}
#ttl.bg h1 {
position: absolute;
top: 13%;
left: 8%;
z-index: 0;
}
#ttl h1 span {
font-family: "Kanit", sans-serif;
font-size: 10rem;
font-weight: 400;
line-height: 1;
display: block;
}
#ttl h1 em {
font-size: 3rem;
}

main:not(.home):not(:has(#ttl.bg)) {
background: url("img/bg_street_03.png") no-repeat top/100% auto;
}
#ttl:not(.bg) {
padding: 10em 4% 5em;
}
#ttl:not(.bg) h1 span {
margin-bottom: .2em;
}

.ttl {
color: #009c3b;
font-size: 6.6rem;
font-weight: 500;
line-height: 1.2;
font-style: italic;
letter-spacing: -.01em;
margin-bottom: .5em;
}
.ttl em {
font-size: 2.5rem;
letter-spacing: 0;
}
.ttl em::before {
content: "-";
margin: 0 .3em;
}
.ttl:has(.block) {
font-size: 6.3rem;
letter-spacing: .05em;
}
.ttl em.block {
font-size: 2rem;
letter-spacing: .15em;
}
.ttl em.block::before {
display: none;
}
.ttl span {
font-size: 4.8rem;
letter-spacing: 0;
position: relative;
display: block;
}
.ttl span::before {
content: "";
background: linear-gradient(to right, #99CC66, transparent);
width: 150%;
height: 150%;
position: absolute;
top: -25%;
left: -50%;
z-index: -1;
}
.ttl strong {
color: #000;
font-size: 4.7rem;
letter-spacing: .08em;
}

.ttl.underline {
padding-bottom: .5em;
border-bottom: 2px solid #d3d3d3;
}
.ttl.underline em::before {
content: "";
}

.centerline {
font-size: 3rem;
letter-spacing: .08em;
white-space: nowrap;
margin: 3em 0 1em;
display: flex;
align-items: center;
}
.centerline .line {
background: #d3d3d3;
flex-grow: 1;
height: 2px;
margin-left: .5em;
}

/* .cat */
.cat {
background: #99cc66;
color: #FFF;
font-size: 1.3rem;
font-weight: bold;
letter-spacing: .15em;
white-space: nowrap;
text-align: center;
width: 100px;
margin: .5em;
padding: .2em 1em;
border-radius: 100vh;
}
.cat.c3,
.cat.c4,
.cat.c5,
.cat.c6 {
background: #009c3b;
}

.cat_list {
margin-bottom: 3em;
padding-bottom: 1em;
border-bottom: 2px solid #d3d3d3;
}
.cat:has(a) {
width: auto;
margin: .5em 1em;
padding: 0;
}
.cat a {
background: #FFF;
color: #99cc66;
font-size: 1.8rem;
padding: .2em 2em;
display: block;
border: 1px solid #99cc66;
border-radius: 100vh;
}
.cat a:hover {
background: #99cc66;
color: #FFF;
}
.cat.c3 a,
.cat.c4 a,
.cat.c5 a,
.cat.c6 a {
color: #009c3b;
border: 1px solid #009c3b;
}
.cat.c3 a:hover,
.cat.c4 a:hover,
.cat.c5 a:hover,
.cat.c6 a:hover {
background: #009c3b;
color: #FFF;
}

/* list */
.no {
counter-reset: no;
}
.no li {
font-size: 2.1rem;
padding: 0 0 .5em 2em;
position: relative;
}
.no li:before {
counter-increment: no;
content: counter(no);
background: #007a2c;
color: #FFF;
font-size: 1.9rem;
width: 1.3em;
height: 1.3em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: .2rem;
left: 0;
}

.heading li {
font-size: 2.1rem;
margin-bottom: .5em;
}
.heading h4 {
background: #007a2c;
color: #FFF;
font-size: 1.7rem;
text-align: center;
min-width: 130px;
margin-right: 1em;
padding: 0 .8em;
border-radius: 100vh;
}

/* .more */
.more a {
background: #FFF;
color: #009c3b;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: .15em;
text-align: center;
padding: .8em 1.8em;
min-width: 220px;
max-width: 100%;
display: inline-block;
border: solid 4px #80ce9d;
border-radius: 100vh;
position: relative;
}
.more a::after {
content: "";
background: url("img/arrow_off.svg") no-repeat center/1.3em auto;
width: 1.3em;
height: 1.3em;
display: inline-block;
vertical-align: middle;
}
.more a:hover {
background: #009c3b;
color: #FFF;
}
.more.reverse a::after,
.more a:hover::after {
background: url("img/arrow_on.svg") no-repeat center /1.3em auto;
}
.more.reverse a {
background: #009c3b;
color: #FFF;
font-size: 2.5rem;
border: solid 6px #80ce9d;
}
.more.reverse a::after {
margin-left: .5em;
}
.more.reverse a:hover::after {
background: url("img/arrow_off.svg") no-repeat center/1.3em auto;
}
.more.reverse.no-arrow a {
background: #007a2c;
font-size: 2.8rem;
border: solid 8px #80ce9d;
}
.more.reverse a:hover {
background: #FFF;
color: #009c3b;
}
.more.no-arrow a::after {
display: none;
}

/* .illust */
.illust {
position: relative;
}
.illust::before {
content: "";
background: url("img/illust.svg") no-repeat bottom/contain;
width: 493px;
max-width: 100%;
height: 136px;
display: block;
}

/* Swiper */
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
.swiper-button-prev,
.swiper-button-next {
width: 5.5rem;
height: 5.5rem;
}

/* #post s_link */
#post_link,
#posts_link {
margin: 3em auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#posts_link {
justify-content: center;
}
#post_link li:not(.more) a,
#posts_link li a,
#posts_link li.active {
background: #FFF;
color: #009c3b;
font-size: 1.8rem;
font-weight: bold;
width: 40px;
height: 40px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
border: 1.5px solid #007a2c;
}
#posts_link li a:hover,
#posts_link li.active {
background: #007a2c;
color: #FFF;
border: 1.5px solid #FFF;
}
#post_link li:not(.more) a,
#posts_link li.prev a,
#posts_link li.next a {
background: none !important;
width: auto !important;
border: none !important;
}
#post_link li.active a {
width: auto !important;
padding: 0 20px;
}
#post_link li:not(.more) a:hover,
#posts_link li.prev a:hover,
#posts_link li.next a:hover {
color: #99cc66;
}


/* header
------------------------------------------------------------ */
header {
background: #FFF;
width: 100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0 2px 3px rgba(0,0,0,.3);
z-index: 2;
}
header section {
max-width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
header nav ul {
display: flex;
align-items: center;
}
header nav ul li a {
font-size: 1.2rem;
font-weight: bold;
letter-spacing: .15em;
text-align: center;
padding: 0 2em .3em;
display: block;
position: relative;
}
header nav ul li:not(:first-of-type):not(.more) a {
border-left: solid 1px #999a9a;
}
header nav ul li:not(.more) a::before {
content: "";
background: #009c3b;
width: 50px;
height: 2px;
position: absolute;
left: 50%;
bottom: 0;
transform-origin: center top;
transform: translateX(-50%) scale(0,1);
transition: transform .3s;
}
header nav ul li a:hover::before {
transform-origin: center top;
transform: translateX(-50%) scale(1,1);
}
header nav ul li a span {
color: #009c3b;
font-size: .8rem;
display: block;
}
header nav .more a {
font-size: 1.2rem;
min-width: auto;
padding: .5em 1.8em;
}
header nav .more a::after {
display: none;
}
#triple,
#shutter {
display: none;
}


/* footer
------------------------------------------------------------ */
footer {
background: #009c3b;
color: #FFF;
letter-spacing: .15em;
}
footer section {
max-width: 900px;
padding: 3em 0;
}

footer #contact-us {
background: #007a2c;
font-size: 1.8rem;
}
footer #contact-us .ttl {
color: #FFF;
}
footer #contact-us p {
line-height: 2;
margin: 2em 0 2em;
}
footer #contact-us ul {
position: relative;
}
footer #contact-us ul li {
padding-bottom: .5em;
display: flex;
flex-direction: column;
align-items: center;
}
footer #contact-us ul li em {
margin-bottom: 1em;
display: flex;
align-items: center;
flex-grow: 1;
}
footer #contact-us ul li .more a {
font-size: 1.9rem;
padding: .5em 1.8em;
border: solid 6px #80ce9d;
}
footer #contact-us ul li .more a::after {
display: none;
}
footer #contact-us ul::before {
content: "";
background: #FFF;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 50%;
}

body:has(#form) footer #contact-us {
display: none;
}

footer section.flex {
align-items: center;
padding: 1em 0;
}
footer nav {
padding: 2em 0;
flex-basis: 60%;
border-right: solid 1px #FFF;
}
footer nav ul {
column-count: 2;
column-gap: 1em;
font-weight: bold;
}
footer nav ul li {
break-inside: avoid;
margin-bottom: 2em;
}
footer nav ul li a {
position: relative;
}
footer nav ul li:not(.more) a::before {
content: "";
background: #FFF;
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: -.3em;
transform-origin: left top;
transform: scale(0,1);
transition: transform .3s;
}
footer nav ul li a:hover::before {
transform-origin: left top;
transform: scale(1,1);
}
footer nav .more a {
font-size: 1.2rem;
min-width: auto;
padding: .5em 1.8em;
}
footer nav .more a::after {
display: none;
}
footer div.center {
padding: 2em 0;
flex-basis: 40%;
}
#pagetop {
margin-top: 2em;
}


/* main
------------------------------------------------------------ */
/* .home
----------------------------------- */
/* #top_slider */
#top_slider {
padding: 4em 0;
}
#top_slider .swiper-slide {
transition: transform .3s ease;
transform: scale(.7);
}
#top_slider .swiper-slide-active {
transform: scale(1);
z-index: 2;
}
#top_slider .swiper-slide img {
border-radius: 2rem;
box-shadow: 2px 3px 3px rgba(0,0,0,.3);
}
#top_slider section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}

/* #slogan */
#slogan {
padding: 8em 0 10em;
}
#slogan.st01::before {
height: 150%;
}
/* #news_list */
#news_list {
padding-bottom: 3em;
}
#news_list .illust::before {
max-width: 50%;
position: absolute;
right: 5%;
bottom: 0;
}
#news_list table {
margin-bottom: 3em;
}
#news_list table tr:nth-child(odd) {
background: #ededed;
}
#news_list table tr:hover {
background: rgba(0,156,59,.1);
}
#news_list table th {
color: #009c3b;
font-size: 1.3rem;
font-weight: bold;
letter-spacing: .1em;
padding: .8em;
padding-left: 2em;
}
#news_list table td {
padding: .8em .2em;
}
/* #pick-up */
#pick-up.btm30::before {
height: 150%;
}
.pick-up {
margin-top: 4em;
}
.pick-up li {
margin-bottom: 2em;
}
.pick-up div img {
border: solid 2px #80ce9d;
border-radius: 1em;
}
.pick-up h3 {
color: #009c3b;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: .1em;
padding: .5em;
}
.pick-up a:hover h3 {
font-weight: bold;
}
.pick-up3 p {
font-size: 1.4rem;
line-height: 1.8;
padding: 0 .5em;
}
#pick-up .summary {
background: #009b3a;
color: #FFF;
font-size: 1.9rem;
text-align: center;
margin-top: 4em;
padding: .8em 4%;
}
/* #certified-painter */
#certified-painter.st02::before {
background-size: cover;
}
#certified-painter {
padding: 6em 0;
}
#certified-painter .ttl {
margin-bottom: 0;
}
#certified-painter figure {
margin-bottom: 2em;
}
#certified-painter figcaption {
font-size: 3.3rem;
line-height: 1.3;
white-space: nowrap;
margin-left: .5em;
}
#certified-painter p {
font-size: 1.3rem;
line-height: 2.5;
}
#certified-painter .flex.col-2 > * {
margin-bottom: 2em;
}
#certified-painter .flex.col-2 .illust::before {
max-width: 90%;
margin: 0 auto -6px;
}
#certified-painter .flex.col-2 .illust img {
border: solid 4px #80ce9d;
border-radius: 2em;
}

/* .news
----------------------------------- */
.news #ttl {
margin-bottom: 6em;
}
#news_list.btm30::before {
bottom: -25vw;
}

/* .single
----------------------------------- */
/* #contents */
#contents {
padding: 6em 0;
}
#contents.btm30::before {
bottom: -25vw;
}
/* #main */
#main {
flex-basis: 70%;
}
.content .flex.col h2 {
font-size: 2.6rem;
padding-right: 1em;
flex: 1;
}
.content .flex.col time {
color: #009c3b;
font-size: 1.3rem;
font-weight: bold;
letter-spacing: .1em;
}
___.post {
margin-top: 1em;
padding: 2em 0;
border-top: 2px solid #d3d3d3;
border-bottom: 2px solid #d3d3d3;
}

#contents section > h2 {
font-size: 3.3rem;
margin-top: 1em;
}
#contents section > time {
color: #b5b5b6;
font-size: 2.2rem;
font-weight: bold;
}
#contents section:not(:has(> figure)) > time {
color: #666;
}
.post {
font-size: 2rem;
margin-top: 1em;
padding: 2em 0 4em;
}

/* #side */
#side {
flex-basis: 20%;
}
#side ul {
margin-bottom: 3em;
}
#side ul h3 {
color: #009c3b;
font-size: 1.8rem;
margin-bottom: .5em;
}
#side ul li a {
font-size: 1.5rem;
line-height: 1.4;
padding: .5em 0 .5em 1.2em;
display: block;
position: relative;
}
#side ul li a::before {
content: "－";
position: absolute;
top: .5em;
left: 0;
}
#side ul li a:hover {
color: #009c3b;
}

/* .attempt
----------------------------------- */


/* .about
----------------------------------- */
/* #concept */
#concept {
padding: 3em 0 14em;
}
#concept.st01::before {
top: 75%;
}
#concept::after {
content: "";
background: url("img/concept.jpg") no-repeat center/cover;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: -2;
}
#concept section > div {
width: 42%;
}
#concept p {
font-size: 1.5rem;
font-weight: bold;
line-height: 2.4;
margin-bottom: 3em;
}
/* #loop */
#loop {
background: #FFF;
padding: 15px 0;
}
#loop .swiper-wrapper {
transition-timing-function: linear !important;
}
/* #message */
#message {
padding: 6em 0;
}
#message figure.illust::before {
max-width: 50%;
position: absolute;
top: -18%;
right: 0;
z-index: -1;
}
#message figure::after {
content: "";
background: rgba(175,175,175,.5);
width: 100%;
height: 100%;
position: absolute;
top: .8em;
right: -.8em;
z-index: -1;
}
#message figure {
background: #FFF;
margin: 6em 0 4em;
border-top: 3px solid #009c3b;
}
#message figure > div {
flex-basis: 50%;
}
#message figcaption {
flex-basis: 50%;
padding: 2em 3em;
}
#message figcaption p {
line-height: 2;
}
#message figcaption p.flex {
font-weight: bold;
letter-spacing: .15em;
margin-top: 2em;
}
#message figcaption em {
font-size: 2.3rem;
line-height: 1.3;
text-align: right;
}
#message figcaption strong {
font-size: 4rem;
line-height: 1.4;
margin-left: .5em;
padding-left: .5em;
border-left: 2px solid #000;
}
/* #pick-up */
.about #pick-up.btm30::before {
bottom: -50%;
}
.about #pick-up {
padding-bottom: 4em;
}

/* .unionization
----------------------------------- */
/* #joining */
#joining {
padding: 6em 0;
}
#joining figure.col-2 {
font-size: 2.2rem;
line-height: 2;
margin: 2em 0;
}
#joining figure.col-2 figcaption {
margin-bottom: 1em;
}
#joining .centerline + p {
font-size: 1.7rem;
line-height: 2;
margin-bottom: 2em;
}
#joining p.grn {
font-size: 1.8rem;
letter-spacing: .15em;
margin-bottom: .5em;
}

/* .certified-painter
----------------------------------- */
/* #certified */
#certified {
padding: 6em 0;
}
#certified.btm30::before {
bottom: -20%;
}
#certified figure.col-2 {
font-size: 2.2rem;
line-height: 2;
margin: 2em 0 6em;
}
#certified figure.col-2 figcaption {
margin-bottom: 1em;
}
#certified .centerline + p {
font-size: 2rem;
margin-bottom: 2em;
}
#certified .st01::before {
height: 150%;
top: -70%;
}
#certified .centerline .line {
background: #9fa0a0;
}

/* .member
----------------------------------- */
/* #member_list */
#member_list {
padding: 12em 0 6em;
}
#member_list .st01::before {
top: -12%;
}
#member_list dl {
flex-basis: 20%;
}
#member_list dt {
font-size: 3.9rem;
letter-spacing: .08em;
}
#member_list dt small {
font-size: 1.9rem;
display: block;
}
#member_list dd {
flex-basis: 75%;
}
#member_list dd a:hover {
color: #009c3b;
text-decoration: underline;
}
#member_list div.flex {
padding: 2em 0;
border-bottom: 2px solid #d3d3d3;
}
#member_list div.flex > div {
flex-basis: 40%;
}
#member_list div.flex h3 {
font-size: 2.6rem;
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 2px solid #d3d3d3;
}
#member_list div.flex p {
font-size: 2rem;
font-weight: bold;
}
#member_list div.flex p span {
font-size: 1.6rem;
display: block;
}
#member_list div.flex address {
flex-basis: 55%;
font-size: 2rem;
}

/* .contact
----------------------------------- */
/* #call-us */
#call-us {
color: #FFF;
font-size: 1.8rem;
padding: 3em 0;
}
#call-us:before {
background: #007a2c url(img/bg_street_01.png) no-repeat top / 100% auto;
}
#call-us .ttl strong {
color: #FFF;
font-size: 4.2rem;
}
#call-us p {
font-size: 1.8rem;
margin: 2em 0 2em;
}
#call-us a {
font-size: 5rem;
font-weight: bold;
}
#call-us a:hover {
opacity: .7;
}





@media screen and (max-width: 1180px) {

/* header
------------------------------------------------------------ */
header nav ul li a {
padding: 0 .8em .3em;
}

}


@media screen and (max-width: 834px) {

/* set
------------------------------------------------------------ */
html {
font-size: 50%;
}
.pc,.pc.inline,.flex.pc {
display: none;
}
.smd {
display: block;
}
.flex.smd {
display: flex;
}

/* common
------------------------------------------------------------ */
/* layout */
section {
width: 92%;
}

/* flexbox */
.smd-flex {
display: flex;
}
.smd-block {
display: block;
}
.smd-col-2,
.smd-col-3,
.smd-col-4 {
flex-wrap: wrap;
justify-content: space-between;
}
.smd-col-2 >* {flex-basis: 48% !important;}
.smd-col-3 >* {flex-basis: 32% !important;}
.smd-col-4 >* {flex-basis: 24% !important;}
.smd-col-3::after {
content: "";
width: 32%;
height: 0;
display: block;
}
.smd-col-4::before,
.smd-col-4::after {
content: "";
width: 24%;
height: 0;
display: block;
}
.smd-col-4::before {
order: 1;
}

/* style */
.smd-center {
text-align: center;
}
.smd-left {
text-align: left;
}

/* .cat */
.cat:has(a) {
margin: .5em;
}

/* list */
.heading.smp-block li {
margin-bottom: 1em;
}
.heading.smp-block h4 {
margin-bottom: .5em;
display: inline-block;
}


/* header
------------------------------------------------------------ */
header section {
height: 60px;
}
header nav {
display: none;
}

/* .active */
header nav.active {
display: block;
}
header nav ul {
width: 100%;
display: block;
position: fixed;
top: calc(60px + 2em);
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
header nav ul li a {
font-size: 2rem;
color: #FFF;
padding: 1em 2em;
}
header nav ul li:not(:first-of-type):not(.more) a {
border-left: solid 1px #999a9a;
}
header nav ul li:not(.more) a::before {
}
header nav ul li a span {
color: #99cc66;
font-size: 1.4rem;
}
header nav .more {
text-align: center;
margin-top: 2em;
}
header nav .more a {
font-size: 2.2rem;
}

/* #triple */
#triple {
display: block;
background: #009c3b;
width: 60px;
height: 60px;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
z-index: 3;
}
#triple span,
#triple span::before,
#triple span::after {
content: "";
background: #FFF;
width: 30px;
height: 2px;
border-radius: 1px;
position: absolute;
top: calc(50% - 10px);
left: 50%;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
}
#triple span::before {
top: calc(50% + 10px);
}
#triple span::after {
top: calc(50% + 20px);
}
#triple.open span {
top: 50%;
transform: translate(-50%,-50%) rotate(-225deg);
}
#triple.open span::before {
opacity: 0;
}
#triple.open span::after {
top: 50%;
transform: translate(-50%,-50%) rotate(90deg);
}

/* #shutter */
#shutter {
display: block;
background: #009c3b;
width: 100%;
height: 100svh;
position: fixed;
top: -100svh;
right: 0;
z-index: 2;
transition: all .6s;
}
#shutter.active {
top: 0;
}

/* main
------------------------------------------------------------ */
/* .home
----------------------------------- */
/* #certified-painter */
#certified-painter .flex.col-2 {
max-width: 80%;
margin: 2em auto;
}
#certified-painter p {
font-size: 1.6rem;
}

/* .single
----------------------------------- */
/* #side */
#side {
flex-basis: 25%;
}

/* .about
----------------------------------- */
/* #concept */
#concept {
padding: 3em 0 10em;
}
#concept.st01::before {
top: 80%;
}
#concept::after {
width: 28%;
}
#concept section > div {
width: 70%;
}
/* #message */
#message figure.illust::before {
top: -26%;
}
#message figure > div {
flex-basis: 40%;
}
#message figcaption {
flex-basis: 60%;
padding: 2em;
}

}


@media screen and (max-width: 430px) {

/* set
------------------------------------------------------------ */
html {
font-size: 43%;
}
table {
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
table::-webkit-scrollbar {
height: 3px;
}
table::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .1);
}
.smd,.flex.smd,.smp-none {
display: none;
}
.smp {
display: block;
}
.flex.smp {
display: flex;
}
br.smp {
font-size: 0;
}

/* common
------------------------------------------------------------ */
/* flexbox */
.smp-flex {
display: flex;
}
.smp-block {
display: block;
}
.smp-col-2 >* {flex-basis: 48% !important;}
.smp-col-3 >* {flex-basis: 32% !important;}
.smp-col-4 >* {flex-basis: 24% !important;}
.smp-col-3::after {
content: "";
width: 32%;
height: 0;
display: block;
}
.smp-col-4::before,
.smp-col-4::after {
content: "";
width: 24%;
height: 0;
display: block;
}
.smp-col-4::before {
order: 1;
}

/* style */
.smp-center {
text-align: center;
}
.smp-left {
text-align: left;
}
table.smp-block {
display: table;
}
table.smp-block th,
table.smp-block td {
width: 100%;
display: block;
}
.w50 img {width: 50%;}
.w60 img {width: 60%;}
.w70 img {width: 70%;}
.w80 img {width: 80%;}
.w90 img {width: 90%;}

/* title */
#ttl h1 span {
font-size: 8rem;
}
#ttl h1 em {
font-size: 2.5rem;
}
#ttl:not(.bg) {
padding: 5em 4% 2.5em;
}
#ttl:not(.bg) h1 em {
font-size: 2rem;
}

/* .cat */
.cat {
letter-spacing: .05em;
width: 50px;
}

/* #post s_link */
#post_link li:not(.more) a,
#posts_link li a,
#posts_link li.active {
width: 30px;
height: 30px;
}

/* form set */
input#zip,
input.short {
width: 60%;
}
input[type="submit"] {
min-width: 80%;
}
.submit div {
display: block;
}

/* footer
------------------------------------------------------------ */
footer #contact-us ul li {
margin-top: 2em;
}
footer #contact-us ul::before {
display: none;
}

footer nav {
border-right: none;
}
footer nav ul {
column-count: 3;
}
footer nav ul li {
text-align: center;
margin-bottom: 1em;
}

/* main
------------------------------------------------------------ */
/* .home
----------------------------------- */
/* #top_slider */
#top_slider section {
width: 100%;
}
/* #slogan */
#slogan {
padding: 4em 0 5em;
}
/* #news_list */
#news_list .illust::before {
bottom: auto;
right: 0;
top: -2.5em;
}
/* #certified-painter */
#certified-painter .flex.col-2 {
max-width: 100%;
}
#certified-painter .flex.col-2 .illust::before {
height: 80px;
}

/* .single
----------------------------------- */
/* #contents */
#contents {
padding: 3em 0;
}
.content .flex.col h2 {
padding-right: 0;
}
/* #side */
#side {
margin-top: 3em;
padding-top: 2em;
border-top: 2px solid #d3d3d3;
}
#side ul {
margin-bottom: 2em;
}

/* .about
----------------------------------- */
/* #concept */
#concept::after {
opacity: .5;
}
#concept section > div {
width: 100%;
}
/* #message */
#message figure.illust::before {
max-width: 70%;
top: -17%;
}
#message figure > div img {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
}

/* .member
----------------------------------- */
/* #member_list */
#member_list {
padding: 6em 0;
}
#member_list .st01::before {
top: -4%;
}
#member_list dt small {
display: inline-block;
}
#member_list div.flex p span {
display: inline-block;
}

/* .contact
----------------------------------- */
/* #call-us */
#call-us .ttl strong {
font-size: 3.2rem;
}
#call-us a img {
width: 20px;
}

}