@charset "UTF-8";

body {
margin: 0 auto;
color: #3e3a39;
background-color: #fff
;
}
div, h2, a, p {
font-family: "Hina Mincho", serif;
color: #3e3a39;
}
.sp {
display: none !important;
}
.inner {
width: 80%;
margin-right: auto;
margin-left: auto;
padding: 0 20px;
}
.header {
width: 100%;
z-index: 999999;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
} .header-img {
width: 100%;
height: 70px;
padding-right: 15px;
opacity: 0.8;
}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2.5rem;
z-index: 99999;
}
.logo {
font-size: 1.25em;
font-weight: bold;
} .drawer__button {
position: relative;
width: 8px;
height: 8px;
background-color: transparent;
border: none;
cursor: pointer;
z-index: 99999; padding: 2.5rem;
} .drawer__button > span {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2px;
background-color: #999;
transform: translateX(-50%);
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 0.5rem));
transition: transform 0.3s ease;
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transform: translate(-50%, calc(-50% + 0.5rem));
transition: transform 0.3s ease;
} .drawer__button.active > span:first-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__button.active > span:nth-child(2) {
opacity: 0;
}
.drawer__button.active > span:last-child {
transform: translate(-50%, -50%) rotate(45deg);
} .drawer__nav {
position: fixed; top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
opacity: 0;
visibility: hidden;
}
.drawer__nav.active {
opacity: 1;
visibility: visible;
}
.drawer__nav__inner {
position: relative;
width: 100%;
height: 100%;
background-color: white;
padding: 4rem 1.5rem 1rem;
margin: 0 0 0 auto;
transform: translateX(100%);
transition: transform 0.9s ease;
}
.drawer__nav.active .drawer__nav__inner {
transform: translateX(0);
}
.drawer__nav__menu {
list-style: none;
padding-left: 0;
text-align: center;
}
.drawer__nav__link {
display: block;
color: black;
text-decoration: none;
padding: 1rem 1rem;
border-bottom: solid 1px lightgray;
} body.active {
height: 100%;
overflow: hidden;
}
.wrap {
max-width: -webkit-fill-available;
margin: 0 auto;
padding: 3% 5%;
}
.flex {
display: flex;
}
.sp-none {
display: block;
}
#icon {
display: flex;
align-items: center;
flex-direction: row-reverse;
font-weight: 600;
letter-spacing: 10px;
margin: 0;
font-size: 36px;
}
#logo {
text-decoration-line: none;
color: #ffffff;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
} #main-visual {
position: relative;
display: block;
text-align: center;
height: max-content;
max-width: 100%;
margin: auto;
color: #fffffc;
background-size: cover;
background-position: center;
}
#main-visual::before {
content: "";
background-color: rgba(0, 0, 0, 0); left: 0;
right: 0;
top: 0;
bottom: 0;
}
#main-visual-img {
width: -webkit-fill-available;
height: 100%;
object-fit: cover;
}
#main-visual .main-visual-box {
position: absolute;
bottom: 7%;
left: 2%;
}
#main-visual .main {
font-family: "Hina Mincho", serif;
font-size: 1.5vw;
font-weight: 600;
letter-spacing: 10px;
line-height: 2em;
margin: 0;
color: #fffffc
} #about-us {
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.60);
height: -webkit-fill-available;
}
.about-us-box {
padding-top: 10em;
}
.about-us-box .flex {
justify-content: space-between;
}
.about {
position: relative;
display: block;
margin-bottom: 20px;
font-weight: bolder;
letter-spacing: 7px;
}
.about-us-box h2 {
position: relative;
margin: 0 0 20px 0;
}
.about-us-box h2 a {
text-decoration: none;
position: relative;
display: block;
}
.about-us-box h2 span {
display: block;
font-size: 14px;
font-weight: normal;
margin-top: 17px;
margin-bottom: 17px;
}
.about-us-img {
position: relative;
width: 50%;
height: 30em;
}
.about-us-box p {
line-height: 50px;
margin: 0;
font-size: 1.4vw;
font-family: "Hina Mincho", serif;
font-weight: 600;
letter-spacing: 1.4px;
opacity: 0.8;
} #business {
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.60);
height: -webkit-fill-available;
}
.business-box {
padding-top: 7em;
}
.business-box .flex {
justify-content: space-between;
letter-spacing: 1.8px;
}
.project {
position: relative;
display: block;
margin-bottom: 20px;
font-weight: bolder;
letter-spacing: 7px;
}
.scrollDown {
position: absolute;
bottom: 80px;
right: 50%;
animation: scrollDown 1s ease-in-out infinite;
}
@keyframes scrollDown {
0% {
bottom: 10%;
}
50% {
bottom: 15%;
}
100% {
bottom: 10%;
}
}
.scrollDown span {
position: absolute;
left: -25px;
bottom: 10px;
font-size: 0.8em;
letter-spacing: 0.05em;
writing-mode: vertical-rl;
}
.scrollDown::before {
position: absolute;
content: "";
width: 1px;
height: 20px;
background-color: #333;
bottom: 0;
right: -6px;
transform: skew(-30deg);
}
.scrollDown::after {
position: absolute;
content: "";
width: 1px;
height: 60px;
background-color: #333;
bottom: 0;
right: 0;
}
.boxes {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 80px;
margin-top: 25em;
}
.box {
aspect-ratio: 16 / 9;
background-color: #dedede;
opacity: 0;
visibility: hidden;
transition: all 1s;
transform: translateY(150px);
}
.squares {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
row-gap: 80px;
margin-top: 0.5em;
padding-bottom: 5em;
}
.square {
aspect-ratio: 16 / 9;
opacity: 0;
visibility: hidden;
transition: all 1s;
transform: translateY(150px);
}
.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scrollDownimg {
width: 100%;
height: stretch;
border-radius: 30px;
}
.flipbox {
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 0 60px;
}
.flip {
width: -webkit-fill-available;
height: 365px;
margin-top: 20px;
animation: fadeIn linear;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
.flip:hover .flip-inner {
transform: rotateY(180deg);
}
.flip .flip-inner {
transform-style: preserve-3d;
transition: transform 0.4s ease;
height: 100%;
text-align: left;
margin: 20px;
}
.flip .flip-inner .front,
.flip .flip-inner .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
overflow: hidden;
}
.flip .flip-inner .back {
transform: rotateY(180deg);
}
.flip .flip-inner .thumbnail {
width: 100%;
} .komebox-nouka,
.komebox-mizu,
.komebox-hare,
.komebox-kinu {
display: flex;
justify-content: space-between;
padding: 30px 22px;
align-items: center;
border-radius: 20px;
box-sizing: border-box;
cursor: pointer;
height: 100%;
background: #fff;
position: relative;
}
.newmark {
position: absolute;
right: 20px;
top: 20px;
width: 100px;
}
.komebox-nouka {
border: 11px solid rgba(224, 158, 135, 0.8);
}
.komebox-mizu {
border: 11px solid rgba(44, 169, 225, 0.8);
}
.komebox-hare {
border: 11px solid rgba(226, 4, 27, 0.8);
}
.komebox-kinu {
border: 11px solid rgba(248, 181, 0, 0.8);
}
.komep {
height: 100%;
width: 100%;
}
.kome-d {
width: 40%;
}
.yoshidasan-nouka,
.yoshidasan-mizu,
.yoshidasan-hare,
.yoshidasan-kinu {
font-size: 16px;
}
.yoshidasan-nouka {
color: #e09e87;
}
.yoshidasan-mizu {
color: #2ca9e1;
}
.yoshidasan-hare {
color: #e2041d;
}
.yoshidasan-kinu {
color: #f8b500;
}
.komename-nouka,
.komename-mizu,
.komename-hare,
.komename-kinu {
font-size: 24px;
line-height: 1.3;
margin-top: 5px;
}
.komename-nouka {
color: #e09e87;
}
.komename-mizu {
color: #2ca9e1;
}
.komename-hare {
color: #e2041d;
}
.komename-kinu {
color: #f8b500;
}
.five {
font-size: 20px;
padding-left: 10px;
}
.more-nouka,
.more-mizu,
.more-hare,
.more-kinu {
text-align: center;
font-size: 16px;
margin-top: 20px;
padding: 8px 0 6px;
margin-bottom: 20px;
}
.more-nouka {
background: #e09e87;
}
.more-mizu {
background: #2ca9e1;
}
.more-hare {
background: #e2041d;
}
.more-kinu {
background: #874b91;
}
.more-nouka,
.more-mizu,
.more-hare,
.more-kinu {
color: #fff;
}
.backbg-nouka,
.backbg-mizu,
.backbg-hare,
.backbg-kinu {
padding: 40px 30px;
border-radius: 20px;
overflow: hidden;
height: 100%;
box-sizing: border-box;
}
.backbg-nouka {
background: #e09e87;
opacity: 0.8;
}
.backbg-mizu {
background: #2ca9e1;
opacity: 0.8;
}
.backbg-hare {
background: #e2041d;
opacity: 0.8;
}
.backbg-kinu {
background: #f8b500;
opacity: 0.8;
}
.backflex {
display: flex;
justify-content: space-between;
} .komep-back {
width: 30%;
}
.komep-back img {
width: 100%;
}
.yoshidaback {
color: #fff;
font-size: 16px;
}
.yoshidasan-back {
color: #fff;
font-size: 26px;
border-bottom: 1px solid #fff;
}
.fiveback {
font-size: 18px;
padding-left: 10px;
color: #fff;
}
.backtext {
padding-top: 12px;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 1.4;
}
.backsub-text {
margin-top: 20px;
color: #fff;
font-size: 15px;
word-break: break-all;
}
.backmore-nouka a,
.backmore-mizu a,
.backmore-hare a,
.backmore-kinu a {
background: #fff;
text-align: center;
font-size: 16px;
display: block;
width: 180px;
margin: 20px 0 0 auto;
padding: 8px 10px 6px;
}
.backmore-nouka a {
color: #e09e87;
opacity: 0.8;
}
.backmore-mizu a {
color: #2ca9e1;
}
.backmore-hare a {
color: #cf347d;
}
.backmore-kinu a {
color: #874b91;
}
p {
margin: 10px;
}
.container {
display: flex;
}
.item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bug {
margin: 40px auto;
width: 300px;
padding: 20px;
background-color: lightseagreen;
color: white;
font-size: 1.2rem;
border-radius: 8px; animation: fadeIn linear;
animation-timeline: view(); animation-range: entry 0% cover 30%;
} .spacer {
height: 100vh;
} footer {
padding: 40px;
margin-top: 10em;
background-image: url(//nouen-megumi.com/wp-content/themes/nouen-megumi/img/shikun21781349_TP_V.jpg);
float: left;
width: -webkit-fill-available;
}
.footer {
z-index: 99999;
position: absolute;
transform: translateX(40px);
width: 10%;
}
#footer-logo {
}
#footer-icon { }
.footer-img {
width: auto;
float: left;
height: 70px;
padding: 11px;
opacity: 0.8;
}
#footer-link {
margin: 150px 0 50px 0;
font-size: 18px;
text-align: justify;
}
.footer-text {
color: black;
font-weight: 600;
}
#footer-link > a {
text-decoration: none;
margin: 10px;
}
#footer-link > a:link {
color: #ffffff;
}
#footer-link > a:visited {
color: #ffffff;
}
#footer-link > a:hover {
color: #ffffff;
text-decoration: underline;
}
#footer-link > a:active {
color: #ffffff;
}
#sns-footer {
width: 100%;
height:50px;
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
flex-direction: column;
}
#sns-footer > a {
margin-right: 30px;
}
#x-twitter {
width: 20px;
}
#copyright {
color: black;
font-weight: 600;
}
@media screen and (max-width: 960px) {
body {
line-height: 1.5;
font-size: 14px;
font-size: 1.4rem;
}
#main-visual .main {
font-size: 2vw;
letter-spacing: 5px;
}
.about-us-box h2, .about-us-box p {
font-size: 2vw;
}
#footer-icon {
font-size: 20px;
}
#sns-footer, #footer-link, #copyright {
font-size: 14px;
}
@media screen and (min-width: 420px) and (max-width: 768px) { 
h2 {
font-size: 16px;
}
.header-img {
height: 50px;
}
.header__inner {
padding: 1.8rem;
}
.drawer__nav__inner {
padding: 4rem 0;
}
#main-visual .main {
font-weight: 600;
}
.about-us-box .flex {
display: block;
}
.about-us-box p {
word-break: keep-all;
line-height: 25px;
padding: 3em 0;
}
.about-us-img {
width: 100%;
height: auto;
}
}
}